Bug 1884792 - Remove chrome-only :-moz-lwtheme pseudo-class. r=desktop-theme-reviewer...
[gecko.git] / toolkit / themes / shared / global-shared.css
blob22fd19bb836156c08642fc8f99a643813931b6ce
1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
5 /* all localizable skin settings shall live here */
7 @import url("chrome://global/skin/design-system/tokens-platform.css");
8 @import url("chrome://global/skin/design-system/text-and-typography.css");
10 @import url("chrome://global/locale/intl.css");
11 @import url("chrome://global/content/widgets.css");
13 @import url("close-icon.css");
15 @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
16 @namespace html url("http://www.w3.org/1999/xhtml");
18 :root {
19 --default-focusring-width: 2px;
20 --default-focusring: var(--default-focusring-width) dotted;
22 --arrowpanel-background: Field;
23 --arrowpanel-color: FieldText;
24 --arrowpanel-border-color: ThreeDShadow;
25 --arrowpanel-border-radius: 8px;
26 --arrowpanel-padding: 16px;
28 --arrowpanel-dimmed: color-mix(in srgb, currentColor 17%, transparent);
29 --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 30%, transparent);
31 --panel-separator-color: color-mix(in srgb, currentColor 25%, transparent);
32 --panel-disabled-color: color-mix(in srgb, currentColor 40%, transparent);
34 --popup-notification-body-width: calc(31em - calc(2 * var(--arrowpanel-padding)));
36 --toolbarbutton-icon-fill: currentColor;
37 --toolbarbutton-disabled-opacity: 0.4;
39 --toolbar-field-background-color: Field;
40 --toolbar-field-color: FieldText;
41 --toolbar-field-border-color: ThreeDShadow;
42 --toolbar-field-focus-background-color: Field;
43 --toolbar-field-focus-color: FieldText;
44 --toolbar-field-focus-border-color: color-mix(in srgb, var(--focus-outline-color) 50%, transparent);
46 --toolbar-non-lwt-bgcolor: color-mix(in srgb, -moz-dialog 85%, white);
47 --toolbar-non-lwt-textcolor: -moz-dialogtext;
48 --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
49 --toolbar-color: var(--toolbar-non-lwt-textcolor);
51 &[lwtheme] {
52 --toolbar-bgcolor: rgba(255,255,255,.4);
53 --toolbar-color: var(--lwt-text-color, inherit);
56 /* This color scheme should match --toolbar-color. However, note that
57 * individual toolbars might override this (see ToolbarIconColor and the
58 * brighttext attribute). */
59 --toolbar-color-scheme: light dark;
60 &[lwt-toolbar="light"] {
61 --toolbar-color-scheme: light;
63 &[lwt-toolbar="dark"] {
64 --toolbar-color-scheme: dark;
67 @media (prefers-contrast) {
68 /* Reduce the opacity of disabled toolbar buttons in order to increase
69 contrast with the enabled state. */
70 --toolbarbutton-disabled-opacity: 0.3;
72 --panel-separator-color: currentColor;
73 --toolbar-field-focus-border-color: var(--focus-outline-color);
75 &:not([lwtheme]) {
76 --panel-disabled-color: GrayText;
80 background-color: -moz-Dialog;
81 color: -moz-DialogText;
82 font: message-box;
84 &[dialogroot] {
85 font: menu;
89 :is(menupopup, panel):where([type=arrow]) {
90 --panel-background: var(--arrowpanel-background);
91 --panel-color: var(--arrowpanel-color);
92 --panel-border-color: var(--arrowpanel-border-color);
93 --panel-border-radius: var(--arrowpanel-border-radius);
94 --panel-padding: var(--arrowpanel-padding);
97 /* Lightweight theme roots */
99 :root[lwtheme] {
100 toolbar,
101 &[lwt-popup="light"] panel {
102 color-scheme: light;
104 toolbar[brighttext],
105 &[lwt-popup="dark"] panel {
106 color-scheme: dark;
110 :root[lwtheme-image] {
111 text-shadow: 0 -0.5px 1.5px white;
114 :root[lwtheme-image][lwtheme-brighttext] {
115 text-shadow: 1px 1px 1.5px black;
118 /* General styles */
120 .plain {
121 appearance: none;
122 margin: 0 !important;
123 border: none;
124 padding: 0;
127 moz-input-box,
128 html|input {
129 min-width: 0;
132 html|input {
133 margin: 2px 4px;
136 html|button,
137 html|input,
138 html|select,
139 html|textarea {
140 font: inherit;
143 html|input:where(:not([type=radio i], [type=checkbox i], [type=range i])),
144 html|textarea {
145 appearance: none;
146 padding: var(--space-small);
147 border: 1px solid var(--input-border-color, ThreeDShadow);
148 border-radius: var(--border-radius-small);
149 margin: 0;
150 background-color: var(--input-bgcolor, Field);
151 color: var(--input-color, FieldText);
153 &:where(:user-invalid) {
154 border-color: var(--color-error-outline);
157 &:where(:focus-visible) {
158 outline: var(--focus-outline);
159 outline-offset: var(--focus-outline-inset);
163 /* adapted from toolkit/themes/shared/menulist-shared.css */
164 html|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(--border-radius-small);
172 font-weight: var(--font-weight-bold);
174 color: var(--button-color, ButtonText);
175 background-color: var(--button-bgcolor, ButtonFace);
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;
182 &:-moz-locale-dir(rtl) {
183 background-position-x: left 10px;
186 &:hover {
187 background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace));
190 &:hover:active {
191 background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace));
194 &:focus-visible {
195 outline: var(--focus-outline);
196 outline-offset: var(--focus-outline-offset);
200 .header {
201 font-weight: var(--font-weight-bold);
204 .indent {
205 margin-inline-start: 23px;
208 .box-padded {
209 padding: 5px;
212 /* XUL iframe */
214 xul|iframe {
215 border: none;
216 min-width: 10px;
217 min-height: 10px;
220 /* Label/description formatting */
222 xul|description,
223 xul|label {
224 cursor: default;
225 margin-block: 1px 2px;
226 margin-inline: 6px 5px;
229 xul|description {
230 margin-bottom: 4px;
233 xul|label[disabled="true"] {
234 color: GrayText;
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.
241 See Bug 630864. */
242 min-width: 1px;
245 /* Links */
247 .text-link,
249 color: var(--link-color);
250 cursor: pointer;
251 text-decoration: underline;
253 &:focus-visible {
254 outline: var(--focus-outline);
255 outline-offset: var(--link-focus-outline-offset);
256 border-radius: 1px;
261 /* Override properties set on buttons, to display the links without unwanted styling */
262 button.text-link {
263 appearance: none;
264 background-color: transparent;
265 border: none;
266 min-width: 0;
267 margin: 0;
268 padding: 0;
269 font: inherit;
272 button.text-link .button-text {
273 /* Cancel out the default internal margin */
274 margin: 0;
277 /* Textbox context menu */
279 .textbox-contextmenu:-moz-locale-dir(rtl) {
280 direction: rtl;
283 /* Panel footer buttons */
285 .panel-footer {
286 margin: 8px 16px 16px;
289 .footer-button {
290 appearance: none;
291 border: 0;
292 border-radius: var(--border-radius-small);
293 color: var(--button-color, inherit);
294 background-color: var(--button-bgcolor, color-mix(in srgb, currentColor 13%, transparent));
295 padding: .45em 1em;
296 min-height: var(--size-item-large);
297 font-weight: 600;
298 min-width: 0;
299 margin-inline: 8px 0;
300 margin-bottom: 0;
302 &.small-button {
303 margin: 0;
304 min-height: var(--size-item-medium);
305 font-size: var(--font-size-small);
306 align-items: center;
309 &[disabled] {
310 opacity: 0.4;
313 &:focus-visible {
314 outline: var(--focus-outline);
315 outline-offset: var(--focus-outline-offset);
318 &:not([disabled]) {
319 &:hover {
320 background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 17%, transparent));
322 &:hover:active {
323 background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent));
325 &[default],
326 &.primary {
327 color: var(--button-primary-color);
328 background-color: var(--button-primary-bgcolor);
330 &:hover {
331 background-color: var(--button-primary-hover-bgcolor);
333 &:hover:active {
334 background-color: var(--button-primary-active-bgcolor);
339 &[type=menu] > .button-box > .button-menu-dropmarker {
340 appearance: none;
341 display: flex;
342 content: url("chrome://global/skin/icons/arrow-down-12.svg");
343 -moz-context-properties: fill;
344 fill: currentColor;
348 /* Autoscroll popup */
350 .autoscroller {
351 appearance: none;
353 /* Resets the native styles in windows and macOS */
354 border: none;
355 background-color: transparent;
356 -moz-window-shadow: none;
358 --autoscroll-background-image: url("chrome://global/skin/icons/autoscroll.svg");
359 --panel-border-color: rgba(0,0,0,.4);
360 --panel-padding: 0;
361 --panel-background: rgba(249,249,250,.8) no-repeat center var(--autoscroll-background-image);
362 --panel-shadow-margin: 4px;
363 /* Set pointer-events: none; so that mousemove events can be handled by AutoScrollChild.sys.mjs. */
364 pointer-events: none;
367 .autoscroller::part(content) {
368 border-radius: 100%;
369 background-clip: padding-box;
370 box-shadow: 0 0 var(--panel-shadow-margin) rgba(0,0,0,.2);
371 width: 100%;
372 height: 100%;
375 .autoscroller[scrolldir="NS"] {
376 --autoscroll-background-image: url("chrome://global/skin/icons/autoscroll-vertical.svg");
379 .autoscroller[scrolldir="EW"] {
380 --autoscroll-background-image: url("chrome://global/skin/icons/autoscroll-horizontal.svg");
383 /* Combobox dropdown renderer */
384 #ContentSelectDropdown > menupopup {
385 /* The menupopup itself should always be rendered LTR to ensure the scrollbar aligns with
386 * the dropdown arrow on the dropdown widget. If a menuitem is RTL, its style will be set accordingly */
387 direction: ltr;
390 #ContentSelectDropdown > menupopup::part(arrowscrollbox-scrollbox) {
391 scrollbar-width: var(--content-select-scrollbar-width, auto);
394 #ContentSelectDropdown > menupopup[customoptionstyling="true"]::part(arrowscrollbox) {
395 /* When authors specify a custom background, we use background-image to specify the author-supplied color.
396 * In that case, we don't want stuff like custom appearance or custom
397 * backgrounds, so we make sure to apply it on top of the default background. */
398 background-image: var(--content-select-background-image, none);
399 background-color: -moz-Combobox;
402 /* Full width separator in select */
403 #ContentSelectDropdown menuseparator {
404 padding-inline: 0;
407 /* Indent options in optgroups */
408 .contentSelectDropdown-ingroup .menu-iconic-text {
409 padding-inline-start: 2em;
412 .deemphasized {
413 color: var(--text-color-deemphasized);