diff options
Diffstat (limited to 'layout/style/res')
-rw-r--r-- | layout/style/res/forms.css | 63 | ||||
-rw-r--r-- | layout/style/res/html.css | 133 |
2 files changed, 94 insertions, 102 deletions
diff --git a/layout/style/res/forms.css b/layout/style/res/forms.css index 9fb833aa74..a2d026639b 100644 --- a/layout/style/res/forms.css +++ b/layout/style/res/forms.css @@ -259,40 +259,27 @@ select:-moz-select-list-box { } select > button { - inline-size: 12px; - white-space: nowrap; - position: static; + padding: 0; + border: 0; appearance: auto; -moz-default-appearance: -moz-menulist-arrow-button; - /* Make sure to size correctly if the combobox has a non-auto height. */ - block-size: 100%; - box-sizing: border-box; - /* Draw the arrow in the select's color */ color: inherit; - /* - 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. - */ + /* 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; } -*|*::-moz-display-comboboxcontrol-frame { - content: inherit; +select > label { + display: inline-block; overflow: clip; - color: unset; - white-space: nowrap; - text-align: unset; - user-select: none; - /* Make sure to size correctly if the combobox has a non-auto block-size. */ - block-size: 100%; - /* Try to always display our own text */ - min-inline-size: max-content; - box-sizing: border-box; - line-height: -moz-block-height; } option[label]::before { @@ -668,16 +655,15 @@ input[type=file] > label { * 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. + * 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, *|*::-moz-button-content, -*|*::-moz-display-comboboxcontrol-frame, -optgroup:before { +select > label, +optgroup::before { unicode-bidi: inherit; text-overflow: inherit; } @@ -868,6 +854,13 @@ input[type=number]::-moz-number-spin-box { overflow: clip; } +/* stylelint-disable-next-line media-query-no-invalid */ +@media (-moz-bool-pref: "dom.forms.number.hide_spin_buttons_when_no_hover_or_focus") { + input[type=number]:not(:hover, :focus)::-moz-number-spin-box { + opacity: 0; + } +} + input[type=number]::-moz-number-spin-up, input[type=number]::-moz-number-spin-down { writing-mode: horizontal-tb; @@ -922,11 +915,7 @@ input:is([type=date], [type=time], [type=datetime-local]):is(:disabled, :read-on } input:autofill, select:autofill { - /* The idea behind using background-image instead of plain background-color - * is that it's less likely to be overridden by the page. */ - background-image: linear-gradient(-moz-autofill-background, -moz-autofill-background); -} - -input:-moz-autofill-preview, select:-moz-autofill-preview { - color: GrayText; + background-color: -moz-autofill-background !important; + background-image: none !important; + color: FieldText !important; } diff --git a/layout/style/res/html.css b/layout/style/res/html.css index 383aa35f7b..ff58ecd4d1 100644 --- a/layout/style/res/html.css +++ b/layout/style/res/html.css @@ -149,10 +149,8 @@ dd { blockquote, figure { display: block; - margin-block-start: 1em; - margin-block-end: 1em; - margin-inline-start: 40px; - margin-inline-end: 40px; + margin-block: 1em; + margin-inline: 40px; } address { @@ -169,68 +167,85 @@ h1 { display: block; font-size: 2em; font-weight: bold; - margin-block-start: .67em; - margin-block-end: .67em; + margin-block: .67em; } -h2, -:is(article, aside, nav, section) -h1 { +h2 { display: block; font-size: 1.5em; font-weight: bold; - margin-block-start: .83em; - margin-block-end: .83em; + margin-block: .83em; } -h3, -:is(article, aside, nav, section) -:is(article, aside, nav, section) -h1 { +h3 { display: block; font-size: 1.17em; font-weight: bold; - margin-block-start: 1em; - margin-block-end: 1em; + margin-block: 1em; } -h4, -:is(article, aside, nav, section) -:is(article, aside, nav, section) -:is(article, aside, nav, section) -h1 { +h4 { display: block; font-size: 1.00em; font-weight: bold; - margin-block-start: 1.33em; - margin-block-end: 1.33em; + margin-block: 1.33em; } -h5, -:is(article, aside, nav, section) -:is(article, aside, nav, section) -:is(article, aside, nav, section) -:is(article, aside, nav, section) -h1 { +h5 { display: block; font-size: 0.83em; font-weight: bold; - margin-block-start: 1.67em; - margin-block-end: 1.67em; + margin-block: 1.67em; } -h6, -:is(article, aside, nav, section) -:is(article, aside, nav, section) -:is(article, aside, nav, section) -:is(article, aside, nav, section) -:is(article, aside, nav, section) -h1 { +h6 { display: block; font-size: 0.67em; font-weight: bold; - margin-block-start: 2.33em; - margin-block-end: 2.33em; + margin-block: 2.33em; +} + +/* stylelint-disable-next-line media-query-no-invalid */ +@media (-moz-bool-pref: "layout.css.h1-in-section-ua-styles.enabled") { + :is(article, aside, nav, section) + h1 { + margin-block: 0.83em; + font-size: 1.50em; + } + + :is(article, aside, nav, section) + :is(article, aside, nav, section) + h1 { + margin-block: 1.00em; + font-size: 1.17em; + } + + :is(article, aside, nav, section) + :is(article, aside, nav, section) + :is(article, aside, nav, section) + h1 { + margin-block: 1.33em; + font-size: 1.00em; + } + + :is(article, aside, nav, section) + :is(article, aside, nav, section) + :is(article, aside, nav, section) + :is(article, aside, nav, section) + h1 { + margin-block: 1.67em; + font-size: 0.83em; + } + + :is(article, aside, nav, section) + :is(article, aside, nav, section) + :is(article, aside, nav, section) + :is(article, aside, nav, section) + :is(article, aside, nav, section) + h1 { + margin-block: 2.33em; + font-size: 0.67em; + } } listing { @@ -238,16 +253,14 @@ listing { font-family: -moz-fixed; font-size: medium; white-space: pre; - margin-block-start: 1em; - margin-block-end: 1em; + margin-block: 1em; } xmp, pre, plaintext { display: block; font-family: -moz-fixed; white-space: pre; - margin-block-start: 1em; - margin-block-end: 1em; + margin-block: 1em; } /* tables */ @@ -380,25 +393,19 @@ table[rules][rules="cols"] > tr > td, table[rules][rules="cols"] > * > tr > td, table[rules][rules="cols"] > tr > th, table[rules][rules="cols"] > * > tr > th { - border-inline-start-width: thin; - border-inline-end-width: thin; - border-inline-start-style: solid; - border-inline-end-style: solid; + border-inline-width: thin; + border-inline-style: solid; } table[rules][rules="groups"] > colgroup { - border-inline-start-width: thin; - border-inline-end-width: thin; - border-inline-start-style: solid; - border-inline-end-style: solid; + border-inline-width: thin; + border-inline-style: solid; } table[rules][rules="groups"] > tfoot, table[rules][rules="groups"] > thead, table[rules][rules="groups"] > tbody { - border-block-start-width: thin; - border-block-end-width: thin; - border-block-start-style: solid; - border-block-end-style: solid; + border-block-width: thin; + border-block-style: solid; } @@ -409,8 +416,7 @@ caption { } table[align="center"] > caption { - margin-inline-start: auto; - margin-inline-end: auto; + margin-inline: auto; } table[align="center"] > caption[align="left"]:dir(ltr) { @@ -589,8 +595,7 @@ li { :is(ul, ol, dir, menu, dl) dir, :is(ul, ol, dir, menu, dl) menu, :is(ul, ol, dir, menu, dl) dl { - margin-block-start: 0; - margin-block-end: 0; + margin-block: 0; } /* 2 deep unordered lists use a circle */ @@ -618,10 +623,8 @@ hr { color: gray; border-width: 1px; border-style: inset; - margin-block-start: 0.5em; - margin-block-end: 0.5em; - margin-inline-start: auto; - margin-inline-end: auto; + margin-block: 0.5em; + margin-inline: auto; overflow: hidden; /* FIXME: This is not really per spec */ |