/** * Form elements. */ form { margin: 0; padding: 0; } fieldset:not(.fieldgroup) { background-color: #fcfcfa; border-radius: 2px; margin: 1em 0; padding: 30px 18px 18px; min-width: 0; position: relative; } /** * We've temporarily added this Firefox specific rule here to fix fieldset * widths. * @todo remove once this Mozilla bug is fixed. * See https://bugzilla.mozilla.org/show_bug.cgi?id=504622 */ @-moz-document url-prefix() { fieldset:not(.fieldgroup) { display: table-cell; } } fieldset:not(.fieldgroup) > legend { font-size: 1em; font-weight: bold; letter-spacing: 0.08em; position: absolute; text-transform: uppercase; top: 10px; } .fieldgroup { min-width: 0; } /** * We've temporarily added this Firefox specific rule here to fix fieldset * widths. * @todo remove once this Mozilla bug is fixed. * See https://bugzilla.mozilla.org/show_bug.cgi?id=504622 */ @-moz-document url-prefix() { .fieldgroup { display: table-cell; } } .form-item { margin: 0.75em 0; } .form-type-checkbox { padding: 0; } label { display: table; margin: 0 0 0.1em; padding: 0; font-weight: bold; } label.error { color: #a51b00; } label[for] { cursor: pointer; } .form-item label.option { text-transform: none; } .form-item label.option input { vertical-align: middle; } .form-disabled label { color: #686868; } .form-disabled input.form-text, .form-disabled input.form-tel, .form-disabled input.form-email, .form-disabled input.form-url, .form-disabled input.form-search, .form-disabled input.form-number, .form-disabled input.form-color, .form-disabled input.form-file, .form-disabled textarea.form-textarea, .form-disabled select.form-select { border-color: #d4d4d4; background-color: hsla(0, 0%, 0%, 0.08); box-shadow: none; } .form-item input.error, .form-item textarea.error, .form-item select.error { border-width: 1px; border-color: #e62600; background-color: hsla(15, 75%, 97%, 1); box-shadow: inset 0 5px 5px -5px #b8b8b8; color: #a51b00; } .form-item textarea.error + .cke { border-width: 1px; border-color: #e62600; } .form-item input.error:focus, .form-item textarea.error:focus, .form-item select.error:focus { border-color: #e62600; outline: 0; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 8px 1px #e62600; background-color: #fcf4f2; } .form-required:after { background-size: 7px 7px; width: 7px; height: 7px; } .form-item--error-message { margin-top: 0.15em; color: #e32700; } .fieldset-wrapper > .form-item--error-message { margin-top: 0; } .text-format-wrapper .form-item--error-message { border: solid #ccc; border-width: 0 1px; margin: 0; padding: 0.25em 0.666em 0; } /* Filter */ ul.tips, div.description, .form-item .description { margin: 0.2em 0 0 0; color: #595959; font-size: 0.95em; } .form-item .description.error { margin-top: 0; color: #a51b00; } ul.tips li { margin: 0.25em 0 0.25em 1.5em; /* LTR */ } [dir="rtl"] ul.tips li { margin: 0.25em 1.5em 0.25em 0; } .form-type-radio .description, .form-type-checkbox .description { margin-left: 1.5em; /* LTR */ } [dir="rtl"] .form-type-radio .description, [dir="rtl"] .form-type-checkbox .description { margin-left: 0; margin-right: 1.5em; } .form-text, .form-textarea { border-radius: 2px; font-size: 1em; line-height: normal; } input.form-autocomplete, input.form-text, input.form-tel, input.form-email, input.form-url, input.form-search, input.form-number, input.form-color, input.form-file, input.form-date, input.form-time, textarea.form-textarea { box-sizing: border-box; padding: 0.3em 0.4em 0.3em 0.5em; /* LTR */ max-width: 100%; border: 1px solid #b8b8b8; border-top-color: #999; background: #fff; color: #333; border-radius: 2px; background: #fcfcfa; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125); font-size: 1em; color: #595959; -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s; } [dir="rtl"] textarea.form-textarea { padding: 0.3em 0.5em 0.3em 0.4em; } .form-text:focus, .form-tel:focus, .form-email:focus, .form-url:focus, .form-search:focus, .form-number:focus, .form-color:focus, .form-file:focus, .form-textarea:focus, .form-date:focus, .form-time:focus { border-color: #40b6ff; outline: 0; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 8px #40b6ff; background-color: #fff; } .confirm-parent, .password-parent { overflow: visible; width: auto; } .form-item-options-group-info-identifier, .form-item-pass .description { clear: both; } /** * Limits extra long instances of select elements to the max width allowed * to avoid breaking layouts. */ select { max-width: 100%; } /** * Select elements - Webkit only */ @media screen and (-webkit-min-device-pixel-ratio: 0) { select { cursor: pointer; -webkit-appearance: none; padding: 1px 1.571em 1px 0.5em; /* LTR */ border: 1px solid #a6a6a6; border-radius: 0.143em; background: url(../../../../misc/icons/333333/caret-down.svg) no-repeat 99% 63%, -webkit-linear-gradient(top, #f6f6f3, #e7e7df); /* LTR */ text-shadow: 0 1px hsla(0, 0%, 100%, 0.6); font-size: 0.875rem; -webkit-transition: all 0.1s; transition: all 0.1s; -webkit-font-smoothing: antialiased; } [dir="rtl"] select { padding: 1px 0.714em 1px 1.571em; background-position: 1% 63%, 0 0; } select:focus, select:hover { background-image: url(../../../../misc/icons/333333/caret-down.svg), -webkit-linear-gradient(top, #fcfcfa, #e9e9dd); color: #1a1a1a; } select:hover { box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125); } } /** * Improve spacing of cancel link. */ #edit-cancel { margin-left: 10px; /* LTR */ } [dir="rtl"] #edit-cancel { margin-left: 0; margin-right: 10px; } /** * Improve form element usability on narrow devices. */ @media screen and (max-width: 600px) { input.form-autocomplete, input.form-text, input.form-tel, input.form-email, input.form-url, input.form-search, input.form-number, input.form-color, input.form-file, textarea.form-textarea { width: 100%; font-size: 1.2em; line-height: 1.2em; } input.form-number { width: auto; } .form-actions input, .form-wrapper input[type="submit"] { float: none; margin-left: 0; margin-right: 0; margin-top: 10px; padding-bottom: 6px; width: 100%; } .form-actions input:first-child, .form-wrapper input[type="submit"]:first-child { margin-top: 0; } details summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; } .password-strength { width: 100%; } div.form-item div.password-suggestions { float: none; } #dblog-filter-form .form-actions { float: none; padding: 0; } #edit-cancel { display: block; margin: 10px 0 0 0; } select { width: 100%; } } /* Exceptions */ #diff-inline-form select, div.filter-options select { padding: 0; }