tor-browser

forms.css (23192B)

---

/* 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 */

*|*::-moz-fieldset-content {
 display: block; /* StyleAdjuster::adjust_for_fieldset_content overrides this in some cases */
 unicode-bidi: inherit;
 text-overflow: inherit;
 overflow: inherit;
 resize: inherit;
 /* Need to inherit border-radius too, so when the fieldset has rounded
    borders we don't leak out the corners for hit-testing purposes. */
 border-radius: inherit;
 padding: inherit;
 box-decoration-break: inherit;
 block-size: 100%; /* Need this so percentage block-sizes of kids work right */
 /* Please keep the declarations below in sync with ::-moz-scrolled-content in
    ua.css. */
 content: inherit;
 /* Multicol container */
 column-count: inherit;
 column-width: inherit;
 column-gap: inherit;
 column-rule: inherit;
 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 */

legend {
 display: block;
 padding-inline: 2px;
}

fieldset {
 display: block;
 margin-inline: 2px;
 padding-block: 0.35em 0.625em;
 padding-inline: 0.75em;
 border: 2px groove ThreeDFace;
 min-inline-size: min-content;
}

label {
 cursor: default;
 /* If you add declarations here, consider whether the select > label and file
  * input label need them as well. */
}

/* Default inputs, text inputs, and selects */

/* Note: Values in nsNativeTheme IsWidgetStyled function
  need to match textfield background/border values here */

input {
 display: inline-block;
 appearance: auto;
 -moz-default-appearance: textfield;
 /* The sum of border and padding on block-start and block-end
    must be the same here, for buttons, and for <select> */
 padding-block: 1px;
 padding-inline: 2px;
 border: 2px inset ButtonBorder;
 background-color: Field;
 color: FieldText;
 font: -moz-field;
 text-rendering: optimizeLegibility;
 cursor: text;
}

textarea {
 display: inline-block;
 appearance: auto;
 -moz-default-appearance: textarea;
 margin-block: 1px;
 border: 2px inset ButtonBorder;
 padding: 2px;
 background-color: Field;
 color: FieldText;
 font: medium -moz-fixed;
 text-rendering: optimizeLegibility;
 vertical-align: text-bottom;
 cursor: text;
 resize: both;
 white-space: pre-wrap;
 word-wrap: break-word;
}

/* A few properties that we don't want to inherit by default: */
input,
textarea,
select,
button,
::file-selector-button {
 text-align: initial;
 text-indent: initial;
 text-shadow: initial;
 text-transform: initial;
 word-spacing: initial;
 letter-spacing: initial;
 /* Note that line-height is also reset for all these, via the font shorthand */
}

::placeholder,
::-moz-text-control-editing-root,
::-moz-text-control-preview {
 overflow: auto;
 border: 0;
 padding: inherit;
 margin: 0;
 text-decoration: inherit;
 display: inline-block;
 ime-mode: inherit;
 resize: inherit;
 scrollbar-width: inherit;
 -moz-control-character-visibility: visible;
 visibility: hidden;
}

::placeholder,
::-moz-text-control-preview {
 /*
  * Changing resize would display a broken behaviour and will assert.
  */
 resize: none;
 overflow: hidden;

 /*
  * The placeholder or preview should be ignored by pointer / selection / etc.
  * Otherwise, we might have some unexpected behavior like the resize handle
  * not being selectable.
  */
 pointer-events: none;
 user-select: none;
}

::-moz-text-control-preview {
 font-family: system-ui;
}

::placeholder {
 -webkit-text-security: none;
 color: color-mix(in srgb, currentColor 54%, transparent);
}

:not(:-moz-autofill-preview)::-moz-text-control-editing-root,
:placeholder-shown:not(:autofill)::placeholder,
:autofill::-moz-text-control-preview {
 visibility: inherit;
}

input::placeholder,
input::-moz-text-control-editing-root,
input::-moz-text-control-preview {
 scrollbar-width: none;
 resize: none;
 word-wrap: normal;
 white-space: pre;
 hyphens: none;
 /* Make the line-height equal to the available height */
 line-height: -moz-block-height !important;
}

input[type="password"] {
 -moz-default-appearance: password-input;
}

input[type="password"]::-moz-text-control-editing-root,
input[type="password"]::-moz-text-control-preview {
 /*
  * In password fields, any character should be put same direction.  Otherwise,
  * caret position at typing tells everybody whether the character is an RTL
  * or an LTR character.  Unfortunately, this makes odd rendering when bidi
  * text is unmasked.
  */
 unicode-bidi: bidi-override;
}

textarea::-moz-text-control-editing-root {
 scroll-behavior: inherit;
 overscroll-behavior: inherit;
 /* StyleAdjuster makes sure that the overflow value ends up being scrollable */
 overflow: inherit;
}

select {
 margin: 0;
 border-color: ButtonBorder;
 font: -moz-list;
 white-space: nowrap !important;
 word-wrap: normal !important;
 cursor: default;
 box-sizing: border-box;
 user-select: none;
 border-width: 2px;
 border-style: inset;
 overflow: clip;
 /* No text-decoration reaching inside, by default */
 display: inline-block;
 break-inside: avoid;
 padding-block: 1px;

 /* Set some styles for drop down selects. These are overridden below for
  * list box selects. */
 padding-inline: 4px;
 background-color: -moz-Combobox;
 color: -moz-ComboboxText;
 vertical-align: baseline;
 appearance: auto;
 -moz-default-appearance: menulist;
}

select:-moz-select-list-box {
 overflow-inline: hidden;
 overflow-block: scroll;
 padding-inline: 0;
 background-color: Field;
 color: FieldText;
 vertical-align: text-bottom;
 appearance: auto;
 -moz-default-appearance: listbox;

 @media (-moz-platform: macos) {
   scrollbar-width: thin;
 }
}

select > button {
 padding: 0;
 border: 0;
 appearance: auto;
 -moz-default-appearance: -moz-menulist-arrow-button;
 pointer-events: none;

 /* Draw the arrow in the select's color */
 color: inherit;

 /* We don't want the button to grow the line-height */
 font: inherit;
 max-block-size: 100%;

 /* Make sure to align properly with the display frame.  Note that we want the
  * baseline of the combobox to match the baseline of the label, so the
  * dropmarker is what gets the vertical-align. */
 vertical-align: top;
}

select > label {
 display: inline-block;
 overflow: clip;
 pointer-events: none;
 cursor: unset;
 /* Required for making nsIFrame::PeekOffset treat anonymous content in
  * <select> as not selectable. */
 user-select: none;
}

option[label]::before {
 content: attr(label);
}

select:-moz-select-list-box option,
select:-moz-select-list-box optgroup {
 line-height: normal !important;
}

option {
 display: block;
 float: none !important;
 position: static !important;
 /* This makes sure that it is a containing block for positioned descendants. */
 will-change: -moz-fixed-pos-containing-block !important;

 min-block-size: 1em;
 min-inline-size: min-content;
 padding-block: 2px;
 user-select: none;
 /*
  * 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.
  */
 white-space: nowrap !important;
 word-wrap: normal !important;
}

option:read-write {
 user-select: text;
}

select > option {
 padding-inline: 4px;
}

select:-moz-select-list-box option:checked {
 background-color: -moz-cellhighlight;
 color: -moz-cellhighlighttext;
}

select:-moz-select-list-box:focus option:checked {
 background-color: SelectedItem !important;
 color: SelectedItemText !important;
}

optgroup {
 display: block;
 float: none !important;
 position: static !important;
 font-style: italic;
 font-weight: bold;
 font-size: unset;
 user-select: none;
 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: "\200b" attr(label);
}

@media (-moz-platform: android) {
 /* These elements are handled by the prompt module. */
 select option,
 select optgroup {
   pointer-events: none;
 }
}

*|*::-moz-dropdown-list {
 content: inherit;
 z-index: 2147483647;
 background-color: inherit;
 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 {
 color: GrayText;
 background-color: -moz-DisabledField;
 cursor: unset;
}

input:disabled,
textarea:disabled {
 cursor: default;
}

option:disabled,
optgroup:disabled {
 background-color: transparent;
}

/* hidden inputs */
input[type="hidden"] {
 appearance: none;
 -moz-default-appearance: none;
 display: none !important;
 padding: unset;
 border: 0;
 cursor: auto;
 -moz-user-focus: ignore;
}

/* image buttons */
input[type="image"] {
 appearance: none;
 -moz-default-appearance: none;
 padding: unset;
 border: none;
 background-color: transparent;
 font-family: sans-serif;
 font-size: small;
 cursor: pointer;
}

input[type="image"]:disabled {
 cursor: unset;
}

/* colored part of the color selector button */
::-moz-color-swatch {
 width: 100%;
 height: 100%;
 min-width: 3px;
 min-height: 3px;
 margin-inline: auto;
 box-sizing: border-box;
 border: 1px solid grey;
 display: block;
}

/* radio buttons */
input[type="radio"] {
 appearance: auto;
 -moz-default-appearance: radio;
 margin-block: 3px 0;
 margin-inline: 5px 3px;
}

/* check boxes */
input[type="checkbox"] {
 appearance: auto;
 -moz-default-appearance: checkbox;
 margin-block: 3px;
 margin-inline: 4px 3px;
}

/* Common features of radio buttons and check boxes */

input[type="radio"],
input[type="checkbox"] {
 box-sizing: border-box;
 cursor: default;
 /* unset some values from the general 'input' rule above: */
 padding: unset;
 border: unset;
 background-color: unset;
 color: unset;
}

input:is([type="radio"], [type="checkbox"]):is(:disabled, :disabled:active, :disabled:hover:active) {
 cursor: unset;
}

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,
::file-selector-button,
input:is([type="color"], [type="reset"], [type="button"], [type="submit"]) {
 appearance: auto;
 -moz-default-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>. */
 padding-block: 1px;
 padding-inline: 8px;
 border: 2px outset ButtonBorder;
 background-color: ButtonFace;
 cursor: default;
 box-sizing: border-box;
 user-select: none;
 break-inside: avoid;
}

/* Text-related properties for buttons: these ones are not shared with
  input[type=color] */
button,
::file-selector-button,
input:is([type="reset"], [type="button"], [type="submit"]) {
 color: ButtonText;
 font: -moz-button;
 white-space: pre;
 text-align: center;
 padding-inline: 4px;
}

input[type="color"] {
 inline-size: 64px;
 block-size: 32px;
 padding: 4px;
}

/* https://github.com/whatwg/html/issues/9976 */
input:not([type="image" i], [type="range" i], [type="checkbox" i], [type="radio" i]) {
 overflow: clip !important;
 overflow-clip-margin: 0 !important;
}

button,
::file-selector-button {
 /* Buttons should lay out like "normal" html, mostly */
 white-space: unset;
 /* But no text-decoration reaching inside, by default */
 display: inline-block;
}

::file-selector-button:hover,
button:hover,
input:is([type="reset"], [type="button"], [type="submit"], [type="color"]):hover {
 color: -moz-buttonhovertext;
 border-color: -moz-buttonhoverborder;
 background-color: -moz-buttonhoverface;
}

::file-selector-button:active:hover,
button:active:hover,
input:is([type="reset"], [type="button"], [type="submit"], [type="color"]):active:hover {
 border-style: inset;
 border-color: -moz-buttonactiveborder;
 color: -moz-buttonactivetext;
 background-color: -moz-buttonactiveface;
}

:is(:disabled, :disabled:active)::file-selector-button,
button:is(:disabled, :disabled:active),
input:is([type="reset"], [type="button"], [type="submit"], [type="color"]):is(:disabled, :disabled:active),
select:is(:disabled, :disabled:active) > button {
 border-style: outset;
 cursor: unset;
}

:is(:disabled, :disabled:active)::file-selector-button,
button:is(:disabled, :disabled:active),
input:is([type="reset"], [type="button"], [type="submit"]):is(:disabled, :disabled:active),
select:is(:disabled, :disabled:active) > button {
 color: GrayText;
 background-color: -moz-ButtonDisabledFace;
}

/* file selector */
input[type="file"] {
 white-space: nowrap !important;
 color: unset;

 /* Revert rules which apply on all inputs. */
 appearance: none;
 -moz-default-appearance: none;
 cursor: default;

 border: none;
 background-color: transparent;
 padding: unset;
}

input[type="file"] > label {
 display: inline-block;
 min-inline-size: 12em;
 text-align: match-parent;

 cursor: unset;
 user-select: none;
 unicode-bidi: plaintext;
}

/* button part of file selector */
::file-selector-button {
 font-size: unset;
 letter-spacing: unset;
 cursor: unset;
 margin-inline-end: 5px;
}

/*
* 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 scroll frame with pseudo ::-moz-text-control-editing-root
*  which is a (direct or indirect) child of the text control.
*
* <select>:
*  inherit into the label 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.
*/
::placeholder,
::-moz-text-control-editing-root,
select > label,
optgroup::before {
 unicode-bidi: inherit;
 text-overflow: inherit;
}

progress {
 appearance: auto;
 -moz-default-appearance: progress-bar;
 display: inline-block;
 vertical-align: -0.2em;

 /* Default style in case of there is appearance: none; */
 border: 1px solid ThreeDShadow;
 border-right-color: ThreeDHighlight;
 border-bottom-color: ThreeDHighlight;
 /* #e6e6e6 is a light gray. */
 background-color: #e6e6e6;
 overflow: clip;
}

progress::-moz-progress-bar,
progress::slider-fill {
 /* 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;

 height: 100%;
 width: 100%;

 /* Default style in case of there is appearance: none; */
 background-color: #0064b4; /* blue */
}

meter {
 appearance: auto;
 -moz-default-appearance: meter;
 display: inline-block;
 vertical-align: -0.2em;
 background: linear-gradient(#e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%);
 overflow: clip;
}

meter::-moz-meter-bar,
meter::slider-fill {
 /* Block styles that would change the type of frame we construct. */
 display: inline-block !important;
 float: none !important;
 position: static !important;
 overflow: visible !important;

 height: 100%;
 width: 100%;
}

meter:-moz-meter-optimum::-moz-meter-bar,
meter:-moz-meter-optimum::slider-fill {
 /* green. */
 background: linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
}
meter:-moz-meter-sub-optimum::-moz-meter-bar,
meter:-moz-meter-sub-optimum::slider-fill {
 /* orange. */
 background: linear-gradient(#fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%);
}
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar,
meter:-moz-meter-sub-sub-optimum::slider-fill {
 /* red. */
 background: linear-gradient(#f77, #f77, #fcc 20%, #d44 45%, #d44 55%);
}

input[type="range"] {
 appearance: auto;
 -moz-default-appearance: range;
 margin: 2px;
 /* Override some rules that apply on all input types: */
 cursor: default;
 padding: unset;
 border: unset;
 /* Prevent nsIFrame::HandlePress setting mouse capture to this element. */
 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.
*
* If content authors want to have a vertical range, they will also need to
* set the width/height of this pseudo-element.
*
* TODO(emilio, bug 1663819): Losen these restrictions once these
* pseudo-elements are better spec'd out.
*/
input[type="range"]::-moz-range-track,
input[type="range"]::slider-track {
 /* Prevent styling that would change the type of frame we construct. */
 display: block !important;
 float: none !important;
 position: static !important;
 writing-mode: unset !important;
 direction: unset !important;
 block-size: 0.2em; /* same as inline-size below */
 /* Prevent nsIFrame::HandlePress setting mouse capture to this element. */
 user-select: none !important;
}

input[type="range"][orient="vertical"]::-moz-range-track,
input[type="range"][orient="vertical"]::slider-track {
 inline-size: 0.2em; /* same as block-size above */
 block-size: 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,
input[type="range"]::slider-fill {
 /* Prevent styling that would change the type of frame we construct. */
 display: block !important;
 float: none !important;
 position: static !important;
 writing-mode: unset !important;
 direction: unset !important;
 /* Since one of width/height will be ignored, this just sets the "other"
    dimension. */
 width: 0.2em;
 height: 0.2em;
 /* Prevent nsIFrame::HandlePress setting mouse capture to this element. */
 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,
input[type="range"]::slider-thumb {
 /* Prevent styling that would change the type of frame we construct. */
 display: block !important;
 float: none !important;
 position: static !important;
 writing-mode: unset !important;
 direction: unset !important;

 width: 1em;
 height: 1em;
 border: 0.1em solid #999;
 border-radius: 0.5em;
 background-color: #f0f0f0;
 /* Prevent nsIFrame::HandlePress setting mouse capture to this element. */
 user-select: none !important;
}

input[type="number"] {
 -moz-default-appearance: number-input;
}

input[type="number"]::-moz-number-spin-box {
 writing-mode: horizontal-tb;
 display: flex;
 flex-direction: column;
 width: max-content;
 align-self: center;
 justify-content: center;
 /* Don't allow the spin buttons to create overflow */
 max-height: 100%;
 max-width: 100%;
 overflow: clip;
}

input[type="number"]::-moz-number-spin-up,
input[type="number"]::-moz-number-spin-down {
 writing-mode: horizontal-tb;
 appearance: auto;
 -moz-default-appearance: spinner-upbutton;
 display: block; /* bug 926670 */
 flex-grow: 1;
 cursor: default;
}

input[type="number"]::-moz-number-spin-down {
 -moz-default-appearance: spinner-downbutton;
}

input::-moz-search-clear-button,
input::-moz-reveal {
 display: block;
 cursor: default;
 -moz-user-focus: none;
 width: 1em;
 height: 1em;
 margin-inline: 1px;
 background-image: url(resource://content-accessible/close-12.svg);
 background-repeat: no-repeat;
 background-position: center;
 background-size: contain;
 -moz-context-properties: fill;
 fill: currentColor;
}

input::-moz-search-clear-button {
 background-size: 1em;
 padding: 0.35em;
 border-radius: 4px;
 margin-inline: 1px;
}

input::-moz-search-clear-button:hover {
 background-color: color-mix(in srgb, currentColor 17%, transparent);
}

input::-moz-search-clear-button:active {
 background-color: color-mix(in srgb, currentColor 30%, transparent);
}

@media (forced-colors) {
 input::-moz-search-clear-button {
   outline: 1px solid ButtonText;
   outline-offset: -1px;
   color: ButtonText;
   background-color: ButtonFace;
 }

 input::-moz-search-clear-button:hover {
   color: SelectedItem;
   background-color: SelectedItemText;
   outline-color: SelectedItem;
 }

 input::-moz-search-clear-button:active {
   color: SelectedItem;
   background-color: SelectedItemText;
   outline-color: ButtonText;
 }
}

input::-moz-reveal {
 /* Needed to prevent regression of Bug 502258 */
 max-height: 100%;
 max-width: 100%;
 background-image: url("chrome://global/skin/icons/eye.svg");
}

input:-moz-revealed::-moz-reveal {
 background-image: url("chrome://global/skin/icons/eye-slash.svg");
}

input:-moz-value-empty::-moz-reveal,
input:-moz-value-empty::-moz-search-clear-button {
 visibility: hidden;
}

input:is([type="date"], [type="time"], [type="datetime-local"]) {
 font-family: -moz-fixed;
 cursor: default;
}

input:is([type="date"], [type="time"], [type="datetime-local"]):is(:disabled, :read-only) {
 color: GrayText;
}

input:autofill,
select:autofill,
textarea:autofill {
 background-color: -moz-autofill-background !important;
 background-image: none !important;
 color: FieldText !important;
}