diff options
Diffstat (limited to 'layout/style/res/forms.css')
| -rw-r--r-- | layout/style/res/forms.css | 1137 |
1 files changed, 1137 insertions, 0 deletions
diff --git a/layout/style/res/forms.css b/layout/style/res/forms.css new file mode 100644 index 000000000..f045540b1 --- /dev/null +++ b/layout/style/res/forms.css @@ -0,0 +1,1137 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/** + Styles for old GFX form widgets + **/ + + +@namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */ +@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); + +*|*::-moz-fieldset-content { + display: block; /* nsRuleNode::ComputeDisplayData overrules this in some cases */ + unicode-bidi: inherit; + text-overflow: inherit; + overflow: inherit; + overflow-clip-box: inherit; + padding: inherit; + block-size: 100%; /* Need this so percentage block-sizes of kids work right */ + /* Please keep the Multicol/Flex/Grid/Align sections below in sync with + ::-moz-scrolled-content in ua.css and ::-moz-button-content below. */ + /* Multicol container */ + -moz-column-count: inherit; + -moz-column-width: inherit; + -moz-column-gap: inherit; + -moz-column-rule: inherit; + -moz-column-fill: inherit; + /* Flex container */ + flex-direction: inherit; + flex-wrap: inherit; + /* -webkit-box container (aliased from -webkit versions to -moz versions) */ + -moz-box-orient: inherit; + -moz-box-direction: inherit; + -moz-box-pack: inherit; + -moz-box-align: inherit; + /* Grid container */ + grid-auto-columns: inherit; + grid-auto-rows: inherit; + grid-auto-flow: inherit; + grid-column-gap: inherit; + grid-row-gap: inherit; + grid-template-areas: inherit; + grid-template-columns: inherit; + grid-template-rows: inherit; + /* CSS Align */ + align-content: inherit; + align-items: inherit; + justify-content: inherit; + justify-items: inherit; +} + +/* miscellaneous form elements */ + +fieldset > legend { + padding-inline-start: 2px; + padding-inline-end: 2px; + inline-size: -moz-fit-content; +} + +legend { + display: block; +} + +fieldset { + display: block; + margin-inline-start: 2px; + margin-inline-end: 2px; + padding-block-start: 0.35em; + padding-block-end: 0.75em; + padding-inline-start: 0.625em; + padding-inline-end: 0.625em; + border: 2px groove ThreeDLightShadow; +} + +label { + cursor: default; +} + +/* default inputs, text inputs, and selects */ + +/* Note: Values in nsNativeTheme IsWidgetStyled function + need to match textfield background/border values here */ + +input { + -moz-appearance: textfield; + /* The sum of border and padding on block-start and block-end + must be the same here, for buttons, and for <select> (including its + internal padding magic) */ + padding: 1px; + border: 2px inset ThreeDLightShadow; + background-color: -moz-Field; + color: -moz-FieldText; + font: -moz-field; + text-rendering: optimizeLegibility; + line-height: normal; + text-align: start; + text-transform: none; + word-spacing: normal; + letter-spacing: normal; + cursor: text; + -moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields"); + text-indent: 0; + -moz-user-select: text; + text-shadow: none; + overflow-clip-box: content-box; +} + +input > .anonymous-div, +input::placeholder { + word-wrap: normal !important; + /* Make the line-height equal to the available height */ + line-height: -moz-block-height; +} + +@-moz-document url-prefix(chrome://) { + input.uri-element-right-align:-moz-locale-dir(rtl) { + direction: ltr !important; + text-align: right !important; + } + + /* Make sure that the location bar's alignment in RTL mode changes according + to the input box direction if the user switches the text direction using + cmd_switchTextDirection (which applies a dir attribute to the <input>). */ + input.uri-element-right-align[dir=ltr]:-moz-locale-dir(rtl) { + text-align: left !important; + } +} + +textarea { + margin-block-start: 1px; + margin-block-end: 1px; + border: 2px inset ThreeDLightShadow; + /* The 1px inline padding is for parity with Win/IE */ + padding-inline-start: 1px; + padding-inline-end: 1px; + background-color: -moz-Field; + color: -moz-FieldText; + font: medium -moz-fixed; + text-rendering: optimizeLegibility; + text-align: start; + text-transform: none; + word-spacing: normal; + letter-spacing: normal; + vertical-align: text-bottom; + cursor: text; + resize: both; + -moz-binding: url("chrome://global/content/platformHTMLBindings.xml#textAreas"); + -moz-appearance: textfield-multiline; + text-indent: 0; + -moz-user-select: text; + text-shadow: none; + white-space: pre-wrap; + word-wrap: break-word; + overflow-clip-box: content-box; +} + +textarea > scrollbar { + cursor: default; +} + +textarea > .anonymous-div, +input > .anonymous-div, +input::placeholder, +textarea::placeholder { + overflow: auto; + border: 0px !important; + padding: inherit !important; + margin: 0px; + text-decoration: inherit; + text-decoration-color: inherit; + text-decoration-style: inherit; + display: inline-block; + ime-mode: inherit; + resize: inherit; + -moz-control-character-visibility: visible; + overflow-clip-box: inherit; +} + +input > .anonymous-div, +input::placeholder { + white-space: pre; +} + +input > .anonymous-div.wrap { + white-space: pre-wrap; +} +textarea > .anonymous-div.inherit-overflow, +input > .anonymous-div.inherit-overflow { + overflow: inherit; +} + +input::placeholder, +textarea::placeholder { + /* + * Changing display to inline can leads to broken behaviour and will assert. + */ + display: inline-block !important; + + /* + * Changing resize would display a broken behaviour and will assert. + */ + resize: none !important; + + overflow: hidden !important; + + /* + * The placeholder should be ignored by pointer otherwise, we might have some + * unexpected behavior like the resize handle not being selectable. + */ + pointer-events: none !important; + + opacity: 0.54; +} + +textarea::placeholder { + white-space: pre-wrap !important; +} + +input:-moz-read-write, +textarea:-moz-read-write { + -moz-user-modify: read-write !important; +} + +select { + margin: 0; + border-color: ThreeDLightShadow; + background-color: -moz-Combobox; + color: -moz-ComboboxText; + font: -moz-list; + /* + * Note that the "UA !important" tests in + * layout/style/test/test_animations.html depend on this rule, because + * they need some UA !important rule to test. If this changes, use a + * different one there. + */ + line-height: normal !important; + white-space: nowrap !important; + word-wrap: normal !important; + text-align: start; + cursor: default; + box-sizing: border-box; + -moz-user-select: none; + -moz-appearance: menulist; + border-width: 2px; + border-style: inset; + text-indent: 0; + overflow: -moz-hidden-unscrollable; + text-shadow: none; + /* No text-decoration reaching inside, by default */ + display: inline-block; + page-break-inside: avoid; + overflow-clip-box: padding-box !important; /* bug 992447 */ +} + +/* Need the "select[size][multiple]" selector to override the settings on + 'select[size="1"]', eg if one has <select size="1" multiple> */ + +select[size], +select[multiple], +select[size][multiple] { + /* Different alignment and padding for listbox vs combobox */ + background-color: -moz-Field; + color: -moz-FieldText; + vertical-align: text-bottom; + padding-block-start: 1px; + padding-block-end: 1px; + padding-inline-start: 0; + padding-inline-end: 0; + -moz-appearance: listbox; +} + +select[size="0"], +select[size="1"] { + /* Except this is not a listbox */ + background-color: -moz-Combobox; + color: -moz-ComboboxText; + vertical-align: baseline; + padding: 0; + -moz-appearance: menulist; +} + +select > button { + inline-size: 12px; + white-space: nowrap; + position: static !important; + background-image: url("arrow.gif") !important; + background-repeat: no-repeat !important; + background-position: center !important; + -moz-appearance: menulist-button; + + /* Make sure to size correctly if the combobox has a non-auto height. */ + block-size: 100% ! important; + box-sizing: border-box ! important; + + /* + Make sure to align properly with the display frame. Note that we + want the baseline of the combobox to match the baseline of the + display frame, so the dropmarker is what gets the vertical-align. + */ + vertical-align: top !important; +} + +select > button:active { + background-image: url("arrowd.gif") !important; +} + +select > button[orientation="left"] { + background-image: url("arrow-left.gif") !important; +} + +select > button[orientation="right"] { + background-image: url("arrow-right.gif") !important; +} + +select > button[orientation="left"]:active { + background-image: url("arrowd-left.gif") !important; +} + +select > button[orientation="right"]:active { + background-image: url("arrowd-right.gif") !important; +} + +select:empty { + inline-size: 2.5em; +} + +*|*::-moz-display-comboboxcontrol-frame { + overflow: -moz-hidden-unscrollable; + /* This block-start/end padding plus the combobox block-start/end border need to + add up to the block-start/end borderpadding of text inputs and buttons */ + padding-block-start: 1px; + padding-block-end: 1px; + padding-inline-start: 4px; + padding-inline-end: 0; + color: inherit; + white-space: nowrap; + text-align: inherit; + -moz-user-select: none; + /* Make sure to size correctly if the combobox has a non-auto block-size. */ + block-size: 100% ! important; + box-sizing: border-box ! important; + line-height: -moz-block-height; +} + +option { + display: block; + float: none !important; + position: static !important; + min-block-size: 1em; + line-height: normal !important; + -moz-user-select: none; + text-indent: 0; + white-space: nowrap !important; + word-wrap: normal !important; + text-align: match-parent; +} + +select > option { + padding-block-start : 0; + padding-block-end: 0; + padding-inline-start: 3px; + padding-inline-end: 5px; +} + +option:checked { + background-color: -moz-html-cellhighlight !important; + color: -moz-html-cellhighlighttext !important; +} + +select:focus > option:checked, +select:focus > optgroup > option:checked { + background-color: Highlight ! important; + color: HighlightText ! important; +} + +optgroup { + display: block; + float: none !important; + position: static !important; + font: -moz-list; + line-height: normal !important; + font-style: italic; + font-weight: bold; + font-size: inherit; + -moz-user-select: none; + text-indent: 0; + white-space: nowrap !important; + word-wrap: normal !important; +} + +optgroup > option { + padding-inline-start: 20px; + font-style: normal; + font-weight: normal; +} + +optgroup:before { + display: block; + content: attr(label); +} + +*|*::-moz-dropdown-list { + z-index: 2147483647; + background-color: inherit; + -moz-user-select: none; + position: static !important; + float: none !important; + + /* + * We can't change the padding here, because that would affect our + * intrinsic inline-size, since we scroll. But at the same time, we want + * to make sure that our inline-start border+padding matches the inline-start + * border+padding of a combobox so that our scrollbar will line up + * with the dropmarker. So set our inline-start border to 2px. + */ + border: 1px outset black !important; + border-inline-start-width: 2px ! important; +} + +input:disabled, +textarea:disabled, +option:disabled, +optgroup:disabled, +select:disabled:disabled /* Need the pseudo-class twice to have the specificity + be at least the same as select[size][multiple] above */ +{ + -moz-user-input: disabled; + color: GrayText; + background-color: ThreeDLightShadow; + cursor: inherit; +} + +input:disabled, +textarea:disabled { + cursor: default; +} + +option:disabled, +optgroup:disabled { + background-color: transparent; +} + +/* hidden inputs */ +input[type="hidden"] { + -moz-appearance: none; + display: none !important; + padding: 0; + border: 0; + cursor: auto; + -moz-user-focus: ignore; + -moz-binding: none; +} + +/* image buttons */ +input[type="image"] { + -moz-appearance: none; + padding: 0; + border: none; + background-color: transparent; + font-family: sans-serif; + font-size: small; + cursor: pointer; + -moz-binding: none; +} + +input[type="image"]:disabled { + cursor: inherit; +} + +input[type="image"]:-moz-focusring { + /* Don't specify the outline-color, we should always use initial value. */ + outline: 1px dotted; +} + +/* file selector */ +input[type="file"] { + display: inline-block; + white-space: nowrap; + overflow: hidden; + overflow-clip-box: padding-box; + color: inherit; + + /* Revert rules which apply on all inputs. */ + -moz-appearance: none; + -moz-binding: none; + cursor: default; + + border: none; + background-color: transparent; + padding: 0; +} + +input[type="file"] > xul|label { + min-inline-size: 12em; + padding-inline-start: 5px; + text-align: match-parent; + + color: inherit; + font-size: inherit; + letter-spacing: inherit; + + /* + * Force the text to have LTR directionality. Otherwise filenames containing + * RTL characters will be reordered with chaotic results. + */ + direction: ltr !important; +} + +/* button part of file selector */ +input[type="file"] > button[type="button"] { + block-size: inherit; + font-size: inherit; + letter-spacing: inherit; + cursor: inherit; +} + +/* colored part of the color selector button */ +input[type="color"]:-moz-system-metric(color-picker-available)::-moz-color-swatch { + width: 100%; + height: 100%; + min-width: 3px; + min-height: 3px; + margin-inline-start: auto; + margin-inline-end: auto; + box-sizing: border-box; + border: 1px solid grey; + display: block; +} + +/* Try to make RTL <input type='file'> look nicer. */ +/* TODO: find a better solution than forcing direction: ltr on all file + input labels and remove this override -- bug 1161482 */ +input[type="file"]:dir(rtl) > xul|label { + padding-inline-start: 0px; + padding-inline-end: 5px; +} + +/* radio buttons */ +input[type="radio"] { + -moz-appearance: radio; + margin-block-start: 3px; + margin-block-end: 0px; + margin-inline-start: 5px; + margin-inline-end: 3px; + border-radius: 100% !important; +} + +/* check boxes */ +input[type="checkbox"] { + -moz-appearance: checkbox; + margin-block-start: 3px; + margin-block-end: 3px; + margin-inline-start: 4px; + margin-inline-end: 3px; + border-radius: 0 !important; +} + +/* common features of radio buttons and check boxes */ + +/* NOTE: The width, height, border-width, and padding here must all + add up the way nsFormControlFrame::GetIntrinsic(Width|Height) + expects them to, or they will not come out with total width equal + to total height on sites that set their 'width' or 'height' to 'auto'. + (Should we maybe set !important on width and height, then?) */ +input[type="radio"], +input[type="checkbox"] { + box-sizing: border-box; + inline-size: 13px; + block-size: 13px; + cursor: default; + padding: 0 !important; + -moz-binding: none; + /* same colors as |input| rule, but |!important| this time. */ + background-color: -moz-Field ! important; + color: -moz-FieldText ! important; + border: 2px inset ThreeDLightShadow ! important; +} + +input[type="radio"]:disabled, +input[type="radio"]:disabled:active, +input[type="radio"]:disabled:hover, +input[type="radio"]:disabled:hover:active, +input[type="checkbox"]:disabled, +input[type="checkbox"]:disabled:active, +input[type="checkbox"]:disabled:hover, +input[type="checkbox"]:disabled:hover:active { + padding: 1px; + border: 1px inset ThreeDShadow ! important; + /* same as above, but !important */ + color: GrayText ! important; + background-color: ThreeDFace ! important; + cursor: inherit; +} + +% On Mac, the native theme takes care of this. +% See nsNativeThemeCocoa::ThemeDrawsFocusForWidget. +%ifndef XP_MACOSX +input[type="checkbox"]:-moz-focusring, +input[type="radio"]:-moz-focusring { + /* Don't specify the outline-color, we should always use initial value. */ + outline: 1px dotted; +} +%endif + +input[type="checkbox"]:hover:active, +input[type="radio"]:hover:active { + background-color: ThreeDFace ! important; + border-style: inset !important; +} + +input[type="search"] { + box-sizing: border-box; +} + +/* buttons */ + +/* Note: Values in nsNativeTheme IsWidgetStyled function + need to match button background/border values here */ + +/* Non text-related properties for buttons: these ones are shared with + input[type="color"] */ +button, +input[type="color"]:-moz-system-metric(color-picker-available), +input[type="reset"], +input[type="button"], +input[type="submit"] { + -moz-appearance: button; + /* The sum of border and padding on block-start and block-end + must be the same here, for text inputs, and for <select>. For + buttons, make sure to include the -moz-focus-inner border/padding. */ + padding-block-start: 0px; + padding-inline-end: 6px; + padding-block-end: 0px; + padding-inline-start: 6px; + border: 2px outset ThreeDLightShadow; + background-color: ButtonFace; + cursor: default; + box-sizing: border-box; + -moz-user-select: none; + -moz-binding: none; +} + +/* Text-related properties for buttons: these ones are not shared with + input[type="color"] */ +button, +input[type="reset"], +input[type="button"], +input[type="submit"] { + color: ButtonText; + font: -moz-button; + line-height: normal; + white-space: pre; + text-align: center; + text-shadow: none; + overflow-clip-box: padding-box; +} + +input[type="color"]:-moz-system-metric(color-picker-available) { + inline-size: 64px; + block-size: 23px; +} + +button { + /* Buttons should lay out like "normal" html, mostly */ + white-space: inherit; + text-indent: 0; + /* But no text-decoration reaching inside, by default */ + display: inline-block; +} + +*|*::-moz-button-content { + display: block; + /* Please keep the Multicol/Flex/Grid/Align sections below in sync with + ::-moz-scrolled-content in ua.css and ::-moz-fieldset-content above. */ + /* Multicol container */ + -moz-column-count: inherit; + -moz-column-width: inherit; + -moz-column-gap: inherit; + -moz-column-rule: inherit; + -moz-column-fill: inherit; + /* Flex container */ + flex-direction: inherit; + flex-wrap: inherit; + /* -webkit-box container (aliased from -webkit versions to -moz versions) */ + -moz-box-orient: inherit; + -moz-box-direction: inherit; + -moz-box-pack: inherit; + -moz-box-align: inherit; + /* Grid container */ + grid-auto-columns: inherit; + grid-auto-rows: inherit; + grid-auto-flow: inherit; + grid-column-gap: inherit; + grid-row-gap: inherit; + grid-template-areas: inherit; + grid-template-columns: inherit; + grid-template-rows: inherit; + /* CSS Align */ + align-content: inherit; + align-items: inherit; + justify-content: inherit; + justify-items: inherit; +} + +button:hover, +input[type="color"]:-moz-system-metric(color-picker-available):hover, +input[type="reset"]:hover, +input[type="button"]:hover, +input[type="submit"]:hover { + background-color: -moz-buttonhoverface; +} + +button:hover, +input[type="reset"]:hover, +input[type="button"]:hover, +input[type="submit"]:hover { + color: -moz-buttonhovertext; +} + +button:active:hover, +input[type="color"]:-moz-system-metric(color-picker-available):active:hover, +input[type="reset"]:active:hover, +input[type="button"]:active:hover, +input[type="submit"]:active:hover { +%ifndef XP_MACOSX + padding-block-start: 0px; + padding-inline-end: 5px; + padding-block-end: 0px; + padding-inline-start: 7px; +%endif + border-style: inset; + background-color: ButtonFace; +} + +button:active:hover, +input[type="reset"]:active:hover, +input[type="button"]:active:hover, +input[type="submit"]:active:hover { + color: ButtonText; +} + +button::-moz-focus-inner, +input[type="color"]:-moz-system-metric(color-picker-available)::-moz-focus-inner, +input[type="reset"]::-moz-focus-inner, +input[type="button"]::-moz-focus-inner, +input[type="submit"]::-moz-focus-inner, +input[type="file"] > button[type="button"]::-moz-focus-inner { + padding-block-start: 0px; + padding-inline-end: 2px; + padding-block-end: 0px; + padding-inline-start: 2px; + border: 1px dotted transparent; +} + +button:-moz-focusring::-moz-focus-inner, +input[type="color"]:-moz-system-metric(color-picker-available):-moz-focusring::-moz-focus-inner, +input[type="reset"]:-moz-focusring::-moz-focus-inner, +input[type="button"]:-moz-focusring::-moz-focus-inner, +input[type="submit"]:-moz-focusring::-moz-focus-inner, +input[type="file"] > button[type="button"]:-moz-focusring::-moz-focus-inner { + border-color: ButtonText; +} + +button:disabled:active, button:disabled, +input[type="color"]:-moz-system-metric(color-picker-available):disabled:active, +input[type="color"]:-moz-system-metric(color-picker-available):disabled, +input[type="reset"]:disabled:active, +input[type="reset"]:disabled, +input[type="button"]:disabled:active, +input[type="button"]:disabled, +select:disabled > button, +select:disabled > button, +input[type="submit"]:disabled:active, +input[type="submit"]:disabled { + /* The sum of border and padding on block-start and block-end + must be the same here and for text inputs */ + padding-block-start: 0px; + padding-inline-end: 6px; + padding-block-end: 0px; + padding-inline-start: 6px; + border: 2px outset ThreeDLightShadow; + cursor: inherit; +} + +button:disabled:active, button:disabled, +input[type="reset"]:disabled:active, +input[type="reset"]:disabled, +input[type="button"]:disabled:active, +input[type="button"]:disabled, +select:disabled > button, +select:disabled > button, +input[type="submit"]:disabled:active, +input[type="submit"]:disabled { + color: GrayText; +} + + /* + * Make form controls inherit 'unicode-bidi' transparently as required by + * their various anonymous descendants and pseudo-elements: + * + * <textarea> and <input type="text">: + * inherit into the XULScroll frame with class 'anonymous-div' which is a + * child of the text control. + * + * Buttons (either <button>, <input type="submit">, <input type="button"> + * or <input type="reset">) + * inherit into the ':-moz-button-content' pseudo-element. + * + * <select>: + * inherit into the ':-moz-display-comboboxcontrol-frame' pseudo-element and + * the <optgroup>'s ':before' pseudo-element, which is where the label of + * the <optgroup> gets displayed. The <option>s don't use anonymous boxes, + * so they need no special rules. + */ +textarea > .anonymous-div, +input > .anonymous-div, +input::placeholder, +textarea::placeholder, +*|*::-moz-button-content, +*|*::-moz-display-comboboxcontrol-frame, +optgroup:before { + unicode-bidi: inherit; + text-overflow: inherit; +} + +/** + * Set default style for invalid elements. + */ +:not(output):-moz-ui-invalid { + box-shadow: 0 0 1.5px 1px red; +} + +:not(output):-moz-ui-invalid:-moz-focusring { + box-shadow: 0 0 2px 2px rgba(255,0,0,0.4); +} + +output:-moz-ui-invalid { + color: red; +} + +@media print { + input, textarea, select, button { + -moz-user-input: none !important; + } + + input[type="file"] { height: 2em; } +} + +progress { + -moz-appearance: progressbar; + display: inline-block; + vertical-align: -0.2em; + + /* Default style in case of there is -moz-appearance: none; */ + border: 2px solid; + /* #e6e6e6 is a light gray. */ + -moz-border-top-colors: ThreeDShadow #e6e6e6; + -moz-border-right-colors: ThreeDHighlight #e6e6e6; + -moz-border-bottom-colors: ThreeDHighlight #e6e6e6; + -moz-border-left-colors: ThreeDShadow #e6e6e6; + background-color: #e6e6e6; +} + +::-moz-progress-bar { + /* Prevent styling that would change the type of frame we construct. */ + display: inline-block ! important; + float: none ! important; + position: static ! important; + overflow: visible ! important; + box-sizing: border-box ! important; + + -moz-appearance: progresschunk; + height: 100%; + width: 100%; + + /* Default style in case of there is -moz-appearance: none; */ + background-color: #0064b4; /* blue */ +} + +meter { + -moz-appearance: meterbar; + display: inline-block; + vertical-align: -0.2em; + + background: linear-gradient(#e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%); +} + +::-moz-meter-bar { + /* Block styles that would change the type of frame we construct. */ + display: inline-block ! important; + float: none ! important; + position: static ! important; + overflow: visible ! important; + + -moz-appearance: meterchunk; + height: 100%; + width: 100%; +} + +:-moz-meter-optimum::-moz-meter-bar { + /* green. */ + background: linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%); +} +:-moz-meter-sub-optimum::-moz-meter-bar { + /* orange. */ + background: linear-gradient(#fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%); +} +:-moz-meter-sub-sub-optimum::-moz-meter-bar { + /* red. */ + background: linear-gradient(#f77, #f77, #fcc 20%, #d44 45%, #d44 55%); +} + +input[type=range] { + -moz-appearance: range; + display: inline-block; + inline-size: 12em; + block-size: 1.3em; + margin-inline-start: 0.7em; + margin-inline-end: 0.7em; + margin-block-start: 0; + margin-block-end: 0; + /* Override some rules that apply on all input types: */ + cursor: default; + background: none; + border: none; + -moz-binding: none; /* we don't want any of platformHTMLBindings.xml#inputFields */ + /* Prevent nsFrame::HandlePress setting mouse capture to this element. */ + -moz-user-select: none ! important; +} + +input[type=range][orient=block] { + inline-size: 1.3em; + block-size: 12em; + margin-inline-start: 0; + margin-inline-end: 0; + margin-block-start: 0.7em; + margin-block-end: 0.7em; +} + +input[type=range][orient=horizontal] { + width: 12em; + height: 1.3em; + margin: 0 0.7em; +} + +input[type=range][orient=vertical] { + width: 1.3em; + height: 12em; + margin: 0.7em 0; +} + +/** + * Ideally we'd also require :-moz-focusring here, but that doesn't currently + * work. Instead we only use the -moz-focus-outer border style if + * NS_EVENT_STATE_FOCUSRING is set (the check is in + * nsRangeFrame::BuildDisplayList). + */ +input[type=range]::-moz-focus-outer { + border: 1px dotted black; +} + +/** + * Layout handles positioning of this pseudo-element specially (so that content + * authors can concentrate on styling the thumb without worrying about the + * logic to position it). Specifically the 'margin', 'top' and 'left' + * properties are ignored. + * + * If content authors want to have a vertical range, they will also need to + * set the width/height of this pseudo-element. + */ +input[type=range]::-moz-range-track { + /* Prevent styling that would change the type of frame we construct. */ + display: inline-block !important; + float: none !important; + position: static !important; + border: none; + background-color: #999; + inline-size: 100%; + block-size: 0.2em; + /* Prevent nsFrame::HandlePress setting mouse capture to this element. */ + -moz-user-select: none ! important; +} + +input[type=range][orient=block]::-moz-range-track { + inline-size: 0.2em; + block-size: 100%; +} + +input[type=range][orient=horizontal]::-moz-range-track { + width: 100%; + height: 0.2em; +} + +input[type=range][orient=vertical]::-moz-range-track { + width: 0.2em; + height: 100%; +} + +/** + * Layout handles positioning of this pseudo-element specially (so that content + * authors can concentrate on styling this pseudo-element without worrying + * about the logic to position it). Specifically the 'margin', 'top' and 'left' + * properties are ignored. Additionally, if the range is horizontal, the width + * property is ignored, and if the range range is vertical, the height property + * is ignored. + */ +input[type=range]::-moz-range-progress { + /* Prevent styling that would change the type of frame we construct. */ + display: inline-block !important; + float: none !important; + position: static !important; + /* Since one of width/height will be ignored, this just sets the "other" + dimension. + */ + width: 0.2em; + height: 0.2em; + /* Prevent nsFrame::HandlePress setting mouse capture to this element. */ + -moz-user-select: none ! important; +} + +/** + * Layout handles positioning of this pseudo-element specially (so that content + * authors can concentrate on styling the thumb without worrying about the + * logic to position it). Specifically the 'margin', 'top' and 'left' + * properties are ignored. + */ +input[type=range]::-moz-range-thumb { + /* Native theming is atomic for range. Set -moz-appearance on the range + * to get rid of it. The thumb's -moz-appearance is fixed. + */ + -moz-appearance: range-thumb !important; + /* Prevent styling that would change the type of frame we construct. */ + display: inline-block !important; + float: none !important; + position: static !important; + width: 1em; + height: 1em; + border: 0.1em solid #999; + border-radius: 0.5em; + background-color: #F0F0F0; + /* Prevent nsFrame::HandlePress setting mouse capture to this element. */ + -moz-user-select: none ! important; +} + +/* As a temporary workaround until bug 677302 the rule for input[type=number] + * has moved to number-control.css + */ + +input[type=number]::-moz-number-wrapper { + /* Prevent styling that would change the type of frame we construct. */ + display: flex; + float: none !important; + position: static !important; + block-size: 100%; +} + +input[type=number]::-moz-number-text { + display: block; /* Flex items must be block-level. Normally we do fixup in + the style system to ensure this, but that fixup is disabled + inside of form controls. So, we hardcode display here. */ + -moz-appearance: none; + /* work around autofocus bug 939248 on initial load */ + -moz-user-modify: read-write; + /* This pseudo-element is also an 'input' element (nested inside and + * distinct from the <input type=number> element) so we need to prevent the + * explicit setting of 'text-align' by the general CSS rule for 'input' + * above. We want to inherit its value from its <input type=number> + * ancestor, not have that general CSS rule reset it. + */ + text-align: inherit; + flex: 1; + min-inline-size: 0; + padding: 0; + border: 0; + margin: 0; +} + +input[type=number]::-moz-number-spin-box { + writing-mode: horizontal-tb; + display: flex; + flex-direction: column; +%ifdef XP_WIN + /* The Window's Theme's spin buttons have a very narrow minimum width, so + * make it something reasonable: + */ + width: 16px; +%endif + /* If the spin-box has auto height, it ends up enlarging the default height + * of the control, so we limit it to 1em here. The height doesn't affect + * the rendering of the spinner-buttons; it's only for layout purposes. + * + * This is a temporary hack until we implement better positioning for the + * spin-box in vertical mode; it works OK at default size but less well + * if the font-size is made substantially larger or smaller. (Bug 1175074.) + */ + max-height: 1em; + align-self: center; + justify-content: center; +} + +input[type=number]::-moz-number-spin-up { + -moz-appearance: spinner-upbutton; + display: block; /* bug 926670 */ + flex: none; + cursor: default; + /* Style for when native theming is off: */ + background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="5"><path d="M1,4 L3,0 5,4" fill="dimgrey"/></svg>'); + background-repeat: no-repeat; + background-position: center bottom; + border: 1px solid darkgray; + border-bottom: none; + /* [JK] I think the border-*-*-radius properties here can remain physical, + as we probably don't want to turn the spinner sideways in vertical writing mode */ + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} + +input[type=number]::-moz-number-spin-down { + -moz-appearance: spinner-downbutton; + display: block; /* bug 926670 */ + flex: none; + cursor: default; + /* Style for when native theming is off: */ + background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="5"><path d="M1,1 L3,5 5,1" fill="dimgrey"/></svg>'); + background-repeat: no-repeat; + background-position: center top; + border: 1px solid darkgray; + border-top: none; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; +} + +input[type="number"] > div > div > div:hover { + /* give some indication of hover state for the up/down buttons */ + background-color: lightblue; +} |