3 * Visual styles for Bartik's forms.
21 * We've temporarily added this Firefox specific rule here to fix fieldset
23 * @todo remove once this Mozilla bug is fixed.
24 * See https://bugzilla.mozilla.org/show_bug.cgi?id=504622
26 @-moz-document url-prefix() {
37 border-top-left-radius: 0;
38 border-top-right-radius: 0;
43 .filter-wrapper .form-item label {
44 margin-right: 10px; /* LTR */
46 [dir="rtl"] .filter-wrapper .form-item label {
53 text-shadow: 0 1px 0 #fff;
58 details summary a:hover,
59 details summary a:active,
60 details summary a:focus {
63 details .details-description {
76 font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
81 /* Keep form elements from overflowing their containers. */
83 box-sizing: border-box;
91 * Make the font slightly bigger in mobile
92 * @todo: check the correct font-size
94 @media screen and (max-width: 60em) { /* 920px */
103 textarea.form-textarea,
115 textarea.form-textarea,
117 border: 1px solid #ccc;
120 input.form-submit:hover,
121 input.form-submit:focus {
124 .password-suggestions ul li {
125 margin-left: 1.2em; /* LTR */
127 [dir="rtl"] .password-suggestions ul li {
132 .form-wrapper .label {
135 .form-wrapper .field-multiple-table .label {
138 .form-type-radio label,
139 .form-type-checkbox label {
140 margin-left: 4px; /* LTR */
142 [dir="rtl"] .form-type-radio label,
143 [dir="rtl"] .form-type-checkbox label {
147 .form-type-radio .description,
148 .form-type-checkbox .description {
149 margin-left: 2px; /* LTR */
151 [dir="rtl"] .form-type-radio .description,
152 [dir="rtl"] .form-type-checkbox .description {
165 .node-form .description,
166 .node-form .form-wrapper .label {
167 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
169 .node-form .form-wrapper .field-multiple-table .label {
170 font-family: inherit;
172 .node-form .form-wrapper {
177 .contact-form #edit-name {
181 .contact-form #edit-mail {
185 .contact-form #edit-subject {
189 .contact-form #edit-message {
191 border-top-left-radius: 4px;
192 border-top-right-radius: 4px;
195 /* Disabled form elements */
196 .form-disabled input,
197 .form-disabled select,
198 .form-disabled textarea {
203 .form-disabled label {
208 .comment-form label {
209 float: left; /* LTR */
210 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
214 [dir="rtl"] .comment-form label {
218 .comment-form .form-select {
222 .comment-form .form-type-textarea label {
225 .comment-form .form-item,
226 .comment-form .form-radios,
227 .comment-form .form-type-checkbox,
228 .comment-form .form-select {
232 .comment-form .form-type-checkbox,
233 .comment-form .form-radios {
234 margin-left: 120px; /* LTR */
236 [dir="rtl"] .comment-form .form-type-checkbox,
237 [dir="rtl"] .comment-form .form-radios,
238 [dir="rtl"] .comment-form .form-item .description {
242 .comment-form .form-type-checkbox label,
243 .comment-form .form-radios label {
247 .comment-form input.form-file {
250 .layout-no-sidebars .comment-form .form-text {
253 .layout-one-sidebar .comment-form .form-text {
256 .layout-two-sidebars .comment-form .form-text {
259 .comment-form .form-item .description {
262 margin-left: 120px; /* LTR */
264 .comment-form .form-textarea {
265 border-top-left-radius: 4px;
266 border-top-right-radius: 4px;
268 .comment-form details.filter-wrapper .details-wrapper,
269 .comment-form .text-format-wrapper .form-item {
273 .filter-wrapper label {
277 .filter-wrapper .form-select {
280 .comment-form details.filter-wrapper .tips {
283 #comment-body-add-more-wrapper .form-type-textarea label {
284 margin-bottom: 0.4em;
286 #edit-actions input {
287 margin-right: 0.6em; /* LTR */
289 [dir="rtl"] #edit-actions input {
294 /* Form error styles. */
295 .form-item textarea.error + .cke {
296 border: 2px solid red;
299 /* Form error message styles. */
300 .form-item--error-message {
305 * Improve form element usability on narrow devices.
307 @media all and (max-width: 600px) {
308 .form-actions .button {
314 box-sizing: border-box;
315 -webkit-box-sizing: border-box;
316 -moz-box-sizing: border-box;
319 .js .dropbutton .dropbutton-action > input, .js .dropbutton .dropbutton-action > a, .js .dropbutton .dropbutton-action > button {