← all fixtures

css-mozilla-firefox-firefox-actual-style-changes

CSS View before/after files on GitHub Upstream commit mozilla-firefox-firefox.git@4305a8c toolkit/themes/shared/global-shared.css

This mapping has 1 multi-map group: several pairings are equally correct there. The code view shows one arbitrary valid pairing, not the only one.

Before

…lines 1–30 unchanged (30 lines)
31 }
32
33 --panel-separator-color: color-mix(in srgb, currentColor 25%, transparent);
34
35 --popup-notification-body-width: calc(31em - calc(2 * var(--arrowpanel-padding)));
36
37 --input-border-color: var(--border-color-interactive);
38
39 &[lwtheme] {
40 &[lwt-icon-fill-attention="dark"] {
41 --toolbarbutton-icon-fill-attention-text: var(--toolbarbutton-icon-fill-attention-text-light);
42 }
43 &[lwt-icon-fill-attention="light"] {
…lines 44–54 unchanged (11 lines)
55 &[lwt-toolbar="dark"] {
56 --toolbar-color-scheme: dark;
57 }
58
59 @media (prefers-contrast) {
60 --panel-separator-color: currentColor;
61 }
62
63 background-color: -moz-Dialog;
64 color: -moz-DialogText;
65 font: message-box;
66 -moz-box-collapse: legacy;
67
68 &[dialogroot] {
…lines 69–121 unchanged (53 lines)
122moz-input-box,
123html|input {
124 min-width: 0;
125}
126
127html|input {
128 margin: var(--space-xxsmall) var(--space-xsmall);
129}
130
131html|button,
132html|input,
133html|select,
134html|textarea {
…lines 135–153 unchanged (19 lines)
154 outline-offset: var(--focus-outline-inset);
155 }
156}
157
158/* adapted from toolkit/themes/shared/menulist.css */
159html|select:where(:not([size], [multiple])) {
160 --select-image-spacing: var(--space-small);
161 --select-padding-inline-end: calc(var(--select-image-spacing) * 2 + var(--dimension-12)); /* padding plus image width */
162
163 appearance: none;
164 padding: var(--space-small) var(--space-large);
165 padding-inline-end: var(--select-padding-inline-end);
166 margin: var(--space-xsmall) var(--space-xxsmall);
167 border: none;
168 border-radius: var(--button-border-radius);
169
170 font-weight: var(--font-weight-semibold);
171
172 color: var(--button-text-color);
173 background-color: var(--button-background-color);
174 background-image: url(chrome://global/skin/icons/arrow-down-12.svg);
175 background-position: right var(--select-image-spacing) center;
176 background-repeat: no-repeat;
177 -moz-context-properties: fill;
178 fill: currentColor;
179
180 &:-moz-locale-dir(rtl) {
181 background-position-x: left 10px;
…lines 182–196 unchanged (15 lines)
197
198.header {
199 font-weight: var(--font-weight-heading);
200}
201
202.indent {
203 margin-inline-start: var(--space-xlarge);
204}
205
206.box-padded {
207 padding: var(--space-xsmall);
208}
209
210/* XUL iframe */
211
212xul|iframe {
213 border: none;
214 min-width: var(--size-item-xsmall);
215 min-height: var(--size-item-xsmall);
216}
217
218/* Label/description formatting */
219
220xul|description,
221xul|label {
222 cursor: default;
223 margin-block: var(--space-xxsmall);
224 margin-inline: var(--space-xsmall);
225}
226
227xul|description {
228 margin-bottom: var(--space-xsmall);
229}
230
231xul|label[disabled] {
232 color: var(--text-color-disabled);
233}
234
235.tooltip-label {
236 margin: 0;
237 word-wrap: break-word;
238 /* We must specify a min-width, otherwise word-wrap:break-word doesn't work.
…lines 239–286 unchanged (48 lines)
287 direction: rtl;
288}
289
290/* Panel footer buttons */
291
292.panel-footer {
293 margin: var(--space-small) var(--space-large) var(--space-large);
294}
295
296.footer-button {
297 appearance: none;
298 border: 0;
299 border-radius: var(--button-border-radius);
300 color: var(--button-text-color);
301 background-color: var(--button-background-color);
302 padding: var(--space-small) var(--space-large);
303 min-height: var(--size-item-large);
304 font-weight: var(--font-weight-semibold);
305 min-width: 0;
306 margin-inline: var(--space-small) 0;
307 margin-bottom: 0;
308
309 &.small-button {
310 margin: 0;
311 min-height: var(--size-item-medium);
312 font-size: var(--font-size-small);
…lines 313–331 unchanged (19 lines)
332 color: var(--button-text-color-active);
333 background-color: var(--button-background-color-active);
334 }
335 &[default],
336 &.primary {
337 color: var(--button-text-color-primary);
338 background-color: var(--button-background-color-primary);
339 &:hover {
340 color: var(--button-text-color-primary-hover);
341 background-color: var(--button-background-color-primary-hover);
342 }
343 &:hover:active,
344 &[open] {
345 color: var(--button-text-color-primary-active);
346 background-color: var(--button-background-color-primary-active);
347 }
348 }
349 }
350
351 &[type="menu"] > .button-box > .button-menu-dropmarker {
352 appearance: none;
…lines 353–415 unchanged (63 lines)
416#ContentSelectDropdown menuseparator {
417 padding-inline: 0;
418}
419
420/* Indent options in optgroups */
421#ContentSelectDropdown menuitem[indented] > .menu-text {
422 padding-inline-start: var(--space-xxlarge);
423}
424

After

…lines 1–30 unchanged (30 lines)
31 }
32
33 --panel-separator-color: color-mix(in srgb, currentColor 25%, transparent);
34
35 --popup-notification-body-width: calc(31em - calc(2 * var(--arrowpanel-padding)));
36
37 --input-border-color: color-mix(in srgb, currentColor 46%, transparent);
38
39 &[lwtheme] {
40 &[lwt-icon-fill-attention="dark"] {
41 --toolbarbutton-icon-fill-attention-text: var(--toolbarbutton-icon-fill-attention-text-light);
42 }
43 &[lwt-icon-fill-attention="light"] {
…lines 44–54 unchanged (11 lines)
55 &[lwt-toolbar="dark"] {
56 --toolbar-color-scheme: dark;
57 }
58
59 @media (prefers-contrast) {
60 --panel-separator-color: currentColor;
61 --input-border-color: currentColor;
62 }
63
64 @media (forced-colors) {
65 --input-border-color: ThreeDShadow;
66 }
67
68 background-color: -moz-Dialog;
69 color: -moz-DialogText;
70 font: message-box;
71 -moz-box-collapse: legacy;
72
…lines 73–126 unchanged (54 lines)
127moz-input-box,
128html|input {
129 min-width: 0;
130}
131
132html|input {
133 margin: 2px 4px;
134}
135
136html|button,
137html|input,
138html|select,
139html|textarea {
…lines 140–158 unchanged (19 lines)
159 outline-offset: var(--focus-outline-inset);
160 }
161}
162
163/* adapted from toolkit/themes/shared/menulist.css */
164html|select:where(:not([size], [multiple])) {
165 appearance: none;
166 padding: 6px 16px;
167 padding-inline-end: 32px; /* 2 * 10px padding + image's 12px width */
168 margin: 5px 2px 3px;
169 border: none;
170 border-radius: var(--button-border-radius);
171
172 font-weight: var(--font-weight-semibold);
173
174 color: var(--button-text-color);
175 background-color: var(--button-background-color);
176 background-image: url(chrome://global/skin/icons/arrow-down-12.svg);
177 background-position: right 10px center;
178 background-repeat: no-repeat;
179 -moz-context-properties: fill;
180 fill: currentColor;
181
182 &:-moz-locale-dir(rtl) {
183 background-position-x: left 10px;
…lines 184–198 unchanged (15 lines)
199
200.header {
201 font-weight: var(--font-weight-heading);
202}
203
204.indent {
205 margin-inline-start: 23px;
206}
207
208.box-padded {
209 padding: 5px;
210}
211
212/* XUL iframe */
213
214xul|iframe {
215 border: none;
216 min-width: 10px;
217 min-height: 10px;
218}
219
220/* Label/description formatting */
221
222xul|description,
223xul|label {
224 cursor: default;
225 margin-block: 1px 2px;
226 margin-inline: 6px 5px;
227}
228
229xul|description {
230 margin-bottom: 4px;
231}
232
233xul|label[disabled] {
234 color: GrayText;
235}
236
237.tooltip-label {
238 margin: 0;
239 word-wrap: break-word;
240 /* We must specify a min-width, otherwise word-wrap:break-word doesn't work.
…lines 241–288 unchanged (48 lines)
289 direction: rtl;
290}
291
292/* Panel footer buttons */
293
294.panel-footer {
295 margin: 8px 16px 16px;
296}
297
298.footer-button {
299 appearance: none;
300 border: 0;
301 border-radius: var(--button-border-radius);
302 color: var(--button-text-color);
303 background-color: var(--button-background-color);
304 padding: 0.45em 1em;
305 min-height: var(--size-item-large);
306 font-weight: var(--font-weight-semibold);
307 min-width: 0;
308 margin-inline: 8px 0;
309 margin-bottom: 0;
310
311 &.small-button {
312 margin: 0;
313 min-height: var(--size-item-medium);
314 font-size: var(--font-size-small);
…lines 315–333 unchanged (19 lines)
334 color: var(--button-text-color-active);
335 background-color: var(--button-background-color-active);
336 }
337 &[default],
338 &.primary {
339 color: var(--button-text-color-primary);
340 background-color: var(--color-accent-primary);
341 &:hover {
342 color: var(--button-text-color-primary-hover);
343 background-color: var(--color-accent-primary-hover);
344 }
345 &:hover:active,
346 &[open] {
347 color: var(--button-text-color-primary-active);
348 background-color: var(--color-accent-primary-active);
349 }
350 }
351 }
352
353 &[type="menu"] > .button-box > .button-menu-dropmarker {
354 appearance: none;
…lines 355–417 unchanged (63 lines)
418#ContentSelectDropdown menuseparator {
419 padding-inline: 0;
420}
421
422/* Indent options in optgroups */
423#ContentSelectDropdown menuitem[indented] > .menu-text {
424 padding-inline-start: 2em;
425}
426

Before

stylesheet
comment "/* This Source Code Form is subject to the terms of the Mozi"...
comment "/* all localizable skin settings shall live here */"
import_statement
@import "@import"
call_expression
function_name "url"
arguments
( "("
string_value
" "\""
string_content "chrome://global/skin/design-system/tokens-platform.css"
" "\""
) ")"
; ";"
import_statement
@import "@import"
call_expression
function_name "url"
arguments
( "("
string_value
" "\""
string_content "chrome://global/skin/design-system/panel.css"
" "\""
) ")"
; ";"
import_statement
@import "@import"
call_expression
function_name "url"
arguments
( "("
string_value
" "\""
string_content "chrome://global/skin/design-system/text-and-typography.css"
" "\""
) ")"
; ";"
import_statement
@import "@import"
call_expression
function_name "url"
arguments
( "("
string_value
" "\""
string_content "chrome://global/skin/design-system/toolbar.css"
" "\""
) ")"
; ";"
import_statement
@import "@import"
call_expression
function_name "url"
arguments
( "("
string_value
" "\""
string_content "chrome://global/locale/intl.css"
" "\""
) ")"
; ";"
import_statement
@import "@import"
call_expression
function_name "url"
arguments
( "("
string_value
" "\""
string_content "chrome://global/content/widgets.css"
" "\""
) ")"
; ";"
import_statement
@import "@import"
call_expression
function_name "url"
arguments
( "("
string_value
" "\""
string_content "close-icon.css"
" "\""
) ")"
; ";"
namespace_statement
@namespace "@namespace"
namespace_name "xul"
call_expression
function_name "url"
arguments
( "("
string_value
" "\""
string_content "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xu"...
" "\""
) ")"
; ";"
namespace_statement
@namespace "@namespace"
namespace_name "html"
call_expression
function_name "url"
arguments
( "("
string_value
" "\""
string_content "http://www.w3.org/1999/xhtml"
" "\""
) ")"
; ";"
rule_set
selectors
pseudo_class_selector
: ":"
class_name
identifier "root"
block
{ "{"
declaration
property_name "--default-focusring-width"
: ":"
integer_value
unit "px"
; ";"
declaration
property_name "--default-focusring"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--default-focusring-width"
) ")"
plain_value "dotted"
; ";"
declaration
property_name "--animation-easing-function"
: ":"
call_expression
function_name "cubic-bezier"
arguments
( "("
float_value "0.07"
, ","
float_value "0.95"
, ","
integer_value "0"
, ","
integer_value "1"
) ")"
; ";"
declaration
property_name "--search-engine-name-max-width"
: ":"
integer_value
unit "em"
; ";"
media_statement
@media "@media"
feature_query
( "("
feature_name "-moz-platform"
: ":"
plain_value "macos"
) ")"
block
{ "{"
comment "/* On macOS we use native shadows via -moz-window-shadow */"
declaration
property_name "--arrowpanel-shadow-margin"
: ":"
integer_value
unit "px"
; ";"
} "}"
declaration
property_name "--panel-separator-color"
: ":"
call_expression
function_name "color-mix"
arguments
( "("
plain_value "in"
plain_value "srgb"
, ","
plain_value "currentColor"
integer_value
unit "%"
, ","
plain_value "transparent"
) ")"
; ";"
declaration (+27 nodes collapsed)
declaration
property_name "--input-border-color"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--border-color-interactive" any 1:2
) ")"
; ";"
rule_set (+60 nodes collapsed)
comment "/* This color scheme should match --toolbar-color. However, "...
declaration
property_name "--toolbar-color-scheme"
: ":"
plain_value "light"
plain_value "dark"
; ";"
rule_set
selectors
attribute_selector
nesting_selector "&"
[ "["
attribute_name "lwt-toolbar"
= "="
string_value
" "\""
string_content "light"
" "\""
] "]"
block
{ "{"
declaration
property_name "--toolbar-color-scheme"
: ":"
plain_value "light"
; ";"
} "}"
rule_set
selectors
attribute_selector
nesting_selector "&"
[ "["
attribute_name "lwt-toolbar"
= "="
string_value
" "\""
string_content "dark"
" "\""
] "]"
block
{ "{"
declaration
property_name "--toolbar-color-scheme"
: ":"
plain_value "dark"
; ";"
} "}"
media_statement
@media "@media"
parenthesized_query
( "("
keyword_query "prefers-contrast"
) ")"
block
{ "{"
declaration
property_name "--panel-separator-color"
: ":"
plain_value "currentColor"
; ";"
} "}"
declaration
property_name "background-color"
: ":"
plain_value "-moz-Dialog"
; ";"
declaration
property_name "color"
: ":"
plain_value "-moz-DialogText"
; ";"
declaration
property_name "font"
: ":"
plain_value "message-box"
; ";"
declaration
property_name "-moz-box-collapse"
: ":"
plain_value "legacy"
; ";"
rule_set
selectors
attribute_selector
nesting_selector "&"
[ "["
attribute_name "dialogroot"
] "]"
block
{ "{"
declaration
property_name "font"
: ":"
plain_value "menu"
; ";"
} "}"
} "}"
rule_set (+119 nodes collapsed)
comment "/* Lightweight theme roots */"
rule_set (+75 nodes collapsed)
rule_set (+23 nodes collapsed)
rule_set (+28 nodes collapsed)
comment "/* Rules for 'hiding' portions of the chrome for special\n "...
rule_set (+151 nodes collapsed)
comment "/* General styles */"
rule_set
selectors
tag_name "moz-input-box"
, ","
namespace_selector
tag_name "html"
| "|"
tag_name "input"
block
{ "{"
declaration
property_name "min-width"
: ":"
integer_value "0"
; ";"
} "}"
rule_set
selectors
namespace_selector
tag_name "html"
| "|"
tag_name "input"
block
{ "{"
declaration
property_name "margin"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--space-xxsmall"
) ")"
call_expression
function_name "var"
arguments
( "("
plain_value "--space-xsmall"
) ")"
; ";"
} "}"
rule_set (+29 nodes collapsed)
rule_set (+190 nodes collapsed)
comment "/* adapted from toolkit/themes/shared/menulist.css */"
rule_set
selectors (+26 nodes collapsed)
block
{ "{"
declaration
property_name "--select-image-spacing"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--space-small"
) ")"
; ";"
declaration
property_name "--select-padding-inline-end"
: ":"
call_expression
function_name "calc"
arguments
( "("
binary_expression
binary_expression
call_expression
function_name "var"
arguments
( "("
plain_value "--select-image-spacing"
) ")"
* "*"
integer_value "2"
+ "+"
call_expression
function_name "var"
arguments
( "("
plain_value "--dimension-12"
) ")"
) ")"
; ";"
comment "/* padding plus image width */"
declaration
property_name "appearance"
: ":"
plain_value "none"
; ";"
declaration
property_name "padding"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--space-small"
) ")"
call_expression
function_name "var"
arguments
( "("
plain_value "--space-large"
) ")"
; ";"
declaration
property_name "padding-inline-end"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--select-padding-inline-end"
) ")"
; ";"
declaration
property_name "margin"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--space-xsmall"
) ")"
call_expression
function_name "var"
arguments
( "("
plain_value "--space-xxsmall"
) ")"
; ";"
declaration
property_name "border"
: ":"
plain_value "none"
; ";"
declaration
property_name "border-radius"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--button-border-radius"
) ")"
; ";"
declaration
property_name "font-weight"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--font-weight-semibold"
) ")"
; ";"
declaration
property_name "color"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--button-text-color"
) ")"
; ";"
declaration
property_name "background-color"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--button-background-color"
) ")"
; ";"
declaration
property_name "background-image"
: ":"
call_expression
function_name "url"
arguments
( "("
plain_value "chrome://global/skin/icons/arrow-down-12.svg"
) ")"
; ";"
declaration
property_name "background-position"
: ":"
plain_value "right"
call_expression
function_name "var"
arguments
( "("
plain_value "--select-image-spacing"
) ")"
plain_value "center"
; ";"
declaration
property_name "background-repeat"
: ":"
plain_value "no-repeat"
; ";"
declaration
property_name "-moz-context-properties"
: ":"
plain_value "fill"
; ";"
declaration
property_name "fill"
: ":"
plain_value "currentColor"
; ";"
rule_set (+21 nodes collapsed)
rule_set
selectors
pseudo_class_selector
nesting_selector "&"
: ":"
class_name
identifier "hover"
block
{ "{"
declaration
property_name "background-color"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--button-background-color-hover"
) ")"
; ";"
} "}"
rule_set (+24 nodes collapsed)
rule_set (+30 nodes collapsed)
} "}"
rule_set
selectors
class_selector
. "."
class_name
identifier "header"
block
{ "{"
declaration
property_name "font-weight"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--font-weight-heading"
) ")"
; ";"
} "}"
rule_set
selectors
class_selector
. "."
class_name
identifier "indent"
block
{ "{"
declaration
property_name "margin-inline-start"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--space-xlarge"
) ")"
; ";"
} "}"
rule_set
selectors
class_selector
. "."
class_name
identifier "box-padded"
block
{ "{"
declaration
property_name "padding"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--space-xsmall"
) ")"
; ";"
} "}"
comment "/* XUL iframe */"
rule_set
selectors
namespace_selector
tag_name "xul"
| "|"
tag_name "iframe"
block
{ "{"
declaration
property_name "border"
: ":"
plain_value "none"
; ";"
declaration
property_name "min-width"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--size-item-xsmall"
) ")"
; ";"
declaration
property_name "min-height"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--size-item-xsmall"
) ")"
; ";"
} "}"
comment "/* Label/description formatting */"
rule_set
selectors
namespace_selector
tag_name "xul"
| "|"
tag_name "description"
, ","
namespace_selector
tag_name "xul"
| "|"
tag_name "label"
block
{ "{"
declaration
property_name "cursor"
: ":"
plain_value "default"
; ";"
declaration
property_name "margin-block"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--space-xxsmall"
) ")"
; ";"
declaration
property_name "margin-inline"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--space-xsmall"
) ")"
; ";"
} "}"
rule_set
selectors
namespace_selector
tag_name "xul"
| "|"
tag_name "description"
block
{ "{"
declaration
property_name "margin-bottom"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--space-xsmall"
) ")"
; ";"
} "}"
rule_set
selectors
attribute_selector
namespace_selector
tag_name "xul"
| "|"
tag_name "label"
[ "["
attribute_name "disabled"
] "]"
block
{ "{"
declaration
property_name "color"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--text-color-disabled"
) ")"
; ";"
} "}"
rule_set (+26 nodes collapsed)
comment "/* Links */"
rule_set (+128 nodes collapsed)
comment "/* Override properties set on buttons, to display the links "...
rule_set (+45 nodes collapsed)
rule_set (+21 nodes collapsed)
comment "/* Textbox context menu */"
rule_set (+22 nodes collapsed)
comment "/* Panel footer buttons */"
rule_set
selectors
class_selector
. "."
class_name
identifier "panel-footer"
block
{ "{"
declaration
property_name "margin"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--space-small"
) ")"
call_expression
function_name "var"
arguments
( "("
plain_value "--space-large"
) ")"
call_expression
function_name "var"
arguments
( "("
plain_value "--space-large"
) ")"
; ";"
} "}"
rule_set
selectors
class_selector
. "."
class_name
identifier "footer-button"
block
{ "{"
declaration
property_name "appearance"
: ":"
plain_value "none"
; ";"
declaration
property_name "border"
: ":"
integer_value "0"
; ";"
declaration
property_name "border-radius"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--button-border-radius"
) ")"
; ";"
declaration
property_name "color"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--button-text-color"
) ")"
; ";"
declaration
property_name "background-color"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--button-background-color"
) ")"
; ";"
declaration
property_name "padding"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--space-small"
) ")"
call_expression
function_name "var"
arguments
( "("
plain_value "--space-large"
) ")"
; ";"
declaration
property_name "min-height"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--size-item-large"
) ")"
; ";"
declaration
property_name "font-weight"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--font-weight-semibold"
) ")"
; ";"
declaration
property_name "min-width"
: ":"
integer_value "0"
; ";"
declaration
property_name "margin-inline"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--space-small"
) ")"
integer_value "0"
; ";"
declaration
property_name "margin-bottom"
: ":"
integer_value "0"
; ";"
rule_set (+40 nodes collapsed)
rule_set
selectors
attribute_selector
nesting_selector "&"
[ "["
attribute_name "disabled"
] "]"
block
{ "{"
declaration
property_name "opacity"
: ":"
float_value "0.4"
; ";"
} "}"
rule_set (+30 nodes collapsed)
rule_set
selectors
pseudo_class_selector
nesting_selector "&"
: ":"
class_name "not"
arguments
( "("
attribute_selector
[ "["
attribute_name "disabled"
] "]"
) ")"
block
{ "{"
rule_set (+30 nodes collapsed)
rule_set (+40 nodes collapsed)
rule_set
selectors
attribute_selector
nesting_selector "&"
[ "["
attribute_name "default"
] "]"
, ","
class_selector
nesting_selector "&"
. "."
class_name
identifier "primary"
block
{ "{"
declaration
property_name "color"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--button-text-color-primary"
) ")"
; ";"
declaration
property_name "background-color"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--button-background-color-primary"
) ")"
; ";"
rule_set
selectors
pseudo_class_selector
nesting_selector "&"
: ":"
class_name
identifier "hover"
block
{ "{"
declaration
property_name "color"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--button-text-color-primary-hover"
) ")"
; ";"
declaration
property_name "background-color"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--button-background-color-primary-hover"
) ")"
; ";"
} "}"
rule_set
selectors
pseudo_class_selector
pseudo_class_selector
nesting_selector "&"
: ":"
class_name
identifier "hover"
: ":"
class_name
identifier "active"
, ","
attribute_selector
nesting_selector "&"
[ "["
attribute_name "open"
] "]"
block
{ "{"
declaration
property_name "color"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--button-text-color-primary-active"
) ")"
; ";"
declaration
property_name "background-color"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--button-background-color-primary-active"
) ")"
; ";"
} "}"
} "}"
} "}"
rule_set (+60 nodes collapsed)
} "}"
comment "/* Autoscroll popup */"
rule_set (+216 nodes collapsed)
comment "/* Combobox dropdown renderer */"
rule_set
selectors
child_selector
id_selector
# "#"
id_name "ContentSelectDropdown"
> ">"
tag_name "menupopup"
block
{ "{"
comment "/* The menupopup itself should always be rendered LTR to ens"...
declaration
property_name "direction"
: ":"
plain_value "ltr"
; ";"
} "}"
rule_set (+30 nodes collapsed)
rule_set (+45 nodes collapsed)
comment "/* Full width separator in select */"
rule_set
selectors
descendant_selector
id_selector
# "#"
id_name "ContentSelectDropdown"
tag_name "menuseparator"
block
{ "{"
declaration
property_name "padding-inline"
: ":"
integer_value "0"
; ";"
} "}"
comment "/* Indent options in optgroups */"
rule_set
selectors
child_selector
attribute_selector
descendant_selector
id_selector
# "#"
id_name "ContentSelectDropdown"
tag_name "menuitem"
[ "["
attribute_name "indented"
] "]"
> ">"
class_selector
. "."
class_name
identifier "menu-text"
block
{ "{"
declaration
property_name "padding-inline-start"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--space-xxlarge"
) ")"
; ";"
} "}"

After

stylesheet
comment "/* This Source Code Form is subject to the terms of the Mozi"...
comment "/* all localizable skin settings shall live here */"
import_statement
@import "@import"
call_expression
function_name "url"
arguments
( "("
string_value
" "\""
string_content "chrome://global/skin/design-system/tokens-platform.css"
" "\""
) ")"
; ";"
import_statement
@import "@import"
call_expression
function_name "url"
arguments
( "("
string_value
" "\""
string_content "chrome://global/skin/design-system/panel.css"
" "\""
) ")"
; ";"
import_statement
@import "@import"
call_expression
function_name "url"
arguments
( "("
string_value
" "\""
string_content "chrome://global/skin/design-system/text-and-typography.css"
" "\""
) ")"
; ";"
import_statement
@import "@import"
call_expression
function_name "url"
arguments
( "("
string_value
" "\""
string_content "chrome://global/skin/design-system/toolbar.css"
" "\""
) ")"
; ";"
import_statement
@import "@import"
call_expression
function_name "url"
arguments
( "("
string_value
" "\""
string_content "chrome://global/locale/intl.css"
" "\""
) ")"
; ";"
import_statement
@import "@import"
call_expression
function_name "url"
arguments
( "("
string_value
" "\""
string_content "chrome://global/content/widgets.css"
" "\""
) ")"
; ";"
import_statement
@import "@import"
call_expression
function_name "url"
arguments
( "("
string_value
" "\""
string_content "close-icon.css"
" "\""
) ")"
; ";"
namespace_statement
@namespace "@namespace"
namespace_name "xul"
call_expression
function_name "url"
arguments
( "("
string_value
" "\""
string_content "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xu"...
" "\""
) ")"
; ";"
namespace_statement
@namespace "@namespace"
namespace_name "html"
call_expression
function_name "url"
arguments
( "("
string_value
" "\""
string_content "http://www.w3.org/1999/xhtml"
" "\""
) ")"
; ";"
rule_set
selectors
pseudo_class_selector
: ":"
class_name
identifier "root"
block
{ "{"
declaration
property_name "--default-focusring-width"
: ":"
integer_value
unit "px"
; ";"
declaration
property_name "--default-focusring"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--default-focusring-width"
) ")"
plain_value "dotted"
; ";"
declaration
property_name "--animation-easing-function"
: ":"
call_expression
function_name "cubic-bezier"
arguments
( "("
float_value "0.07"
, ","
float_value "0.95"
, ","
integer_value "0"
, ","
integer_value "1"
) ")"
; ";"
declaration
property_name "--search-engine-name-max-width"
: ":"
integer_value
unit "em"
; ";"
media_statement
@media "@media"
feature_query
( "("
feature_name "-moz-platform"
: ":"
plain_value "macos"
) ")"
block
{ "{"
comment "/* On macOS we use native shadows via -moz-window-shadow */"
declaration
property_name "--arrowpanel-shadow-margin"
: ":"
integer_value
unit "px"
; ";"
} "}"
declaration
property_name "--panel-separator-color"
: ":"
call_expression
function_name "color-mix"
arguments
( "("
plain_value "in"
plain_value "srgb"
, ","
plain_value "currentColor"
integer_value
unit "%"
, ","
plain_value "transparent"
) ")"
; ";"
declaration (+27 nodes collapsed)
declaration
property_name "--input-border-color"
: ":"
call_expression
function_name "color-mix"
arguments
( "("
plain_value "in" any 1:2
plain_value "srgb" any 1:2
, ","
plain_value "currentColor"
integer_value
unit "%"
, ","
plain_value "transparent"
) ")"
; ";"
rule_set (+60 nodes collapsed)
comment "/* This color scheme should match --toolbar-color. However, "...
declaration
property_name "--toolbar-color-scheme"
: ":"
plain_value "light"
plain_value "dark"
; ";"
rule_set
selectors
attribute_selector
nesting_selector "&"
[ "["
attribute_name "lwt-toolbar"
= "="
string_value
" "\""
string_content "light"
" "\""
] "]"
block
{ "{"
declaration
property_name "--toolbar-color-scheme"
: ":"
plain_value "light"
; ";"
} "}"
rule_set
selectors
attribute_selector
nesting_selector "&"
[ "["
attribute_name "lwt-toolbar"
= "="
string_value
" "\""
string_content "dark"
" "\""
] "]"
block
{ "{"
declaration
property_name "--toolbar-color-scheme"
: ":"
plain_value "dark"
; ";"
} "}"
media_statement
@media "@media"
parenthesized_query
( "("
keyword_query "prefers-contrast"
) ")"
block
{ "{"
declaration
property_name "--panel-separator-color"
: ":"
plain_value "currentColor"
; ";"
declaration
property_name "--input-border-color"
: ":"
plain_value "currentColor"
; ";"
} "}"
media_statement
@media "@media"
parenthesized_query
( "("
keyword_query "forced-colors"
) ")"
block
{ "{"
declaration
property_name "--input-border-color"
: ":"
plain_value "ThreeDShadow"
; ";"
} "}"
declaration
property_name "background-color"
: ":"
plain_value "-moz-Dialog"
; ";"
declaration
property_name "color"
: ":"
plain_value "-moz-DialogText"
; ";"
declaration
property_name "font"
: ":"
plain_value "message-box"
; ";"
declaration
property_name "-moz-box-collapse"
: ":"
plain_value "legacy"
; ";"
rule_set
selectors
attribute_selector
nesting_selector "&"
[ "["
attribute_name "dialogroot"
] "]"
block
{ "{"
declaration
property_name "font"
: ":"
plain_value "menu"
; ";"
} "}"
} "}"
rule_set (+119 nodes collapsed)
comment "/* Lightweight theme roots */"
rule_set (+75 nodes collapsed)
rule_set (+23 nodes collapsed)
rule_set (+28 nodes collapsed)
comment "/* Rules for 'hiding' portions of the chrome for special\n "...
rule_set (+151 nodes collapsed)
comment "/* General styles */"
rule_set
selectors
tag_name "moz-input-box"
, ","
namespace_selector
tag_name "html"
| "|"
tag_name "input"
block
{ "{"
declaration
property_name "min-width"
: ":"
integer_value "0"
; ";"
} "}"
rule_set
selectors
namespace_selector
tag_name "html"
| "|"
tag_name "input"
block
{ "{"
declaration
property_name "margin"
: ":"
integer_value
unit "px"
integer_value
unit "px"
; ";"
} "}"
rule_set (+29 nodes collapsed)
rule_set (+190 nodes collapsed)
comment "/* adapted from toolkit/themes/shared/menulist.css */"
rule_set
selectors (+26 nodes collapsed)
block
{ "{"
declaration
property_name "appearance"
: ":"
plain_value "none"
; ";"
declaration
property_name "padding"
: ":"
integer_value
unit "px"
integer_value
unit "px"
; ";"
declaration
property_name "padding-inline-end"
: ":"
integer_value
unit "px"
; ";"
comment "/* 2 * 10px padding + image's 12px width */"
declaration
property_name "margin"
: ":"
integer_value
unit "px"
integer_value
unit "px"
integer_value
unit "px"
; ";"
declaration
property_name "border"
: ":"
plain_value "none"
; ";"
declaration
property_name "border-radius"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--button-border-radius"
) ")"
; ";"
declaration
property_name "font-weight"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--font-weight-semibold"
) ")"
; ";"
declaration
property_name "color"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--button-text-color"
) ")"
; ";"
declaration
property_name "background-color"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--button-background-color"
) ")"
; ";"
declaration
property_name "background-image"
: ":"
call_expression
function_name "url"
arguments
( "("
plain_value "chrome://global/skin/icons/arrow-down-12.svg"
) ")"
; ";"
declaration
property_name "background-position"
: ":"
plain_value "right"
integer_value
unit "px"
plain_value "center"
; ";"
declaration
property_name "background-repeat"
: ":"
plain_value "no-repeat"
; ";"
declaration
property_name "-moz-context-properties"
: ":"
plain_value "fill"
; ";"
declaration
property_name "fill"
: ":"
plain_value "currentColor"
; ";"
rule_set (+21 nodes collapsed)
rule_set
selectors
pseudo_class_selector
nesting_selector "&"
: ":"
class_name
identifier "hover"
block
{ "{"
declaration
property_name "background-color"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--button-background-color-hover"
) ")"
; ";"
} "}"
rule_set (+24 nodes collapsed)
rule_set (+30 nodes collapsed)
} "}"
rule_set
selectors
class_selector
. "."
class_name
identifier "header"
block
{ "{"
declaration
property_name "font-weight"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--font-weight-heading"
) ")"
; ";"
} "}"
rule_set
selectors
class_selector
. "."
class_name
identifier "indent"
block
{ "{"
declaration
property_name "margin-inline-start"
: ":"
integer_value
unit "px"
; ";"
} "}"
rule_set
selectors
class_selector
. "."
class_name
identifier "box-padded"
block
{ "{"
declaration
property_name "padding"
: ":"
integer_value
unit "px"
; ";"
} "}"
comment "/* XUL iframe */"
rule_set
selectors
namespace_selector
tag_name "xul"
| "|"
tag_name "iframe"
block
{ "{"
declaration
property_name "border"
: ":"
plain_value "none"
; ";"
declaration
property_name "min-width"
: ":"
integer_value
unit "px"
; ";"
declaration
property_name "min-height"
: ":"
integer_value
unit "px"
; ";"
} "}"
comment "/* Label/description formatting */"
rule_set
selectors
namespace_selector
tag_name "xul"
| "|"
tag_name "description"
, ","
namespace_selector
tag_name "xul"
| "|"
tag_name "label"
block
{ "{"
declaration
property_name "cursor"
: ":"
plain_value "default"
; ";"
declaration
property_name "margin-block"
: ":"
integer_value
unit "px"
integer_value
unit "px"
; ";"
declaration
property_name "margin-inline"
: ":"
integer_value
unit "px"
integer_value
unit "px"
; ";"
} "}"
rule_set
selectors
namespace_selector
tag_name "xul"
| "|"
tag_name "description"
block
{ "{"
declaration
property_name "margin-bottom"
: ":"
integer_value
unit "px"
; ";"
} "}"
rule_set
selectors
attribute_selector
namespace_selector
tag_name "xul"
| "|"
tag_name "label"
[ "["
attribute_name "disabled"
] "]"
block
{ "{"
declaration
property_name "color"
: ":"
plain_value "GrayText"
; ";"
} "}"
rule_set (+26 nodes collapsed)
comment "/* Links */"
rule_set (+128 nodes collapsed)
comment "/* Override properties set on buttons, to display the links "...
rule_set (+45 nodes collapsed)
rule_set (+21 nodes collapsed)
comment "/* Textbox context menu */"
rule_set (+22 nodes collapsed)
comment "/* Panel footer buttons */"
rule_set
selectors
class_selector
. "."
class_name
identifier "panel-footer"
block
{ "{"
declaration
property_name "margin"
: ":"
integer_value
unit "px"
integer_value
unit "px"
integer_value
unit "px"
; ";"
} "}"
rule_set
selectors
class_selector
. "."
class_name
identifier "footer-button"
block
{ "{"
declaration
property_name "appearance"
: ":"
plain_value "none"
; ";"
declaration
property_name "border"
: ":"
integer_value "0"
; ";"
declaration
property_name "border-radius"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--button-border-radius"
) ")"
; ";"
declaration
property_name "color"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--button-text-color"
) ")"
; ";"
declaration
property_name "background-color"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--button-background-color"
) ")"
; ";"
declaration
property_name "padding"
: ":"
float_value
unit "em"
integer_value
unit "em"
; ";"
declaration
property_name "min-height"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--size-item-large"
) ")"
; ";"
declaration
property_name "font-weight"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--font-weight-semibold"
) ")"
; ";"
declaration
property_name "min-width"
: ":"
integer_value "0"
; ";"
declaration
property_name "margin-inline"
: ":"
integer_value
unit "px"
integer_value "0"
; ";"
declaration
property_name "margin-bottom"
: ":"
integer_value "0"
; ";"
rule_set (+40 nodes collapsed)
rule_set
selectors
attribute_selector
nesting_selector "&"
[ "["
attribute_name "disabled"
] "]"
block
{ "{"
declaration
property_name "opacity"
: ":"
float_value "0.4"
; ";"
} "}"
rule_set (+30 nodes collapsed)
rule_set
selectors
pseudo_class_selector
nesting_selector "&"
: ":"
class_name "not"
arguments
( "("
attribute_selector
[ "["
attribute_name "disabled"
] "]"
) ")"
block
{ "{"
rule_set (+30 nodes collapsed)
rule_set (+40 nodes collapsed)
rule_set
selectors
attribute_selector
nesting_selector "&"
[ "["
attribute_name "default"
] "]"
, ","
class_selector
nesting_selector "&"
. "."
class_name
identifier "primary"
block
{ "{"
declaration
property_name "color"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--button-text-color-primary"
) ")"
; ";"
declaration
property_name "background-color"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--color-accent-primary"
) ")"
; ";"
rule_set
selectors
pseudo_class_selector
nesting_selector "&"
: ":"
class_name
identifier "hover"
block
{ "{"
declaration
property_name "color"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--button-text-color-primary-hover"
) ")"
; ";"
declaration
property_name "background-color"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--color-accent-primary-hover"
) ")"
; ";"
} "}"
rule_set
selectors
pseudo_class_selector
pseudo_class_selector
nesting_selector "&"
: ":"
class_name
identifier "hover"
: ":"
class_name
identifier "active"
, ","
attribute_selector
nesting_selector "&"
[ "["
attribute_name "open"
] "]"
block
{ "{"
declaration
property_name "color"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--button-text-color-primary-active"
) ")"
; ";"
declaration
property_name "background-color"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--color-accent-primary-active"
) ")"
; ";"
} "}"
} "}"
} "}"
rule_set (+60 nodes collapsed)
} "}"
comment "/* Autoscroll popup */"
rule_set (+216 nodes collapsed)
comment "/* Combobox dropdown renderer */"
rule_set
selectors
child_selector
id_selector
# "#"
id_name "ContentSelectDropdown"
> ">"
tag_name "menupopup"
block
{ "{"
comment "/* The menupopup itself should always be rendered LTR to ens"...
declaration
property_name "direction"
: ":"
plain_value "ltr"
; ";"
} "}"
rule_set (+30 nodes collapsed)
rule_set (+45 nodes collapsed)
comment "/* Full width separator in select */"
rule_set
selectors
descendant_selector
id_selector
# "#"
id_name "ContentSelectDropdown"
tag_name "menuseparator"
block
{ "{"
declaration
property_name "padding-inline"
: ":"
integer_value "0"
; ";"
} "}"
comment "/* Indent options in optgroups */"
rule_set
selectors
child_selector
attribute_selector
descendant_selector
id_selector
# "#"
id_name "ContentSelectDropdown"
tag_name "menuitem"
[ "["
attribute_name "indented"
] "]"
> ">"
class_selector
. "."
class_name
identifier "menu-text"
block
{ "{"
declaration
property_name "padding-inline-start"
: ":"
integer_value
unit "em"
; ";"
} "}"