77 lines
2.8 KiB
CSS
77 lines
2.8 KiB
CSS
/* 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/. */
|
|
|
|
@import url("chrome://global/skin/design-system/toolbar.css");
|
|
|
|
@layer tokens-foundation {
|
|
/* These tokens are declared inside of tokens-foundation layer so that the
|
|
* tokens-browser-theme layer can override them with design-system colors
|
|
* on platforms where the native theme is not active (e.g. macOS). */
|
|
:root {
|
|
&:where([customtitlebar]) {
|
|
--toolbox-background-color: ActiveCaption;
|
|
--toolbox-text-color: CaptionText;
|
|
--toolbox-background-color-inactive: InactiveCaption;
|
|
--toolbox-text-color-inactive: InactiveCaptionText;
|
|
}
|
|
}
|
|
}
|
|
|
|
:root {
|
|
--short-notification-background: #0250bb;
|
|
--short-notification-gradient: #9059ff;
|
|
--warning-icon-bgcolor: light-dark(#ffa436, #ffbd4f);
|
|
|
|
--content-area-shadow: var(--card-box-shadow);
|
|
--chrome-content-separator-color: var(--card-border-color);
|
|
|
|
@media not -moz-pref("sidebar.revamp") {
|
|
&:not([lwtheme]) {
|
|
--chrome-content-separator-color: ThreeDShadow;
|
|
}
|
|
}
|
|
|
|
@media -moz-pref("browser.nova.enabled") and (not (forced-colors)) {
|
|
&:is([theme-in-app], :not([lwtheme])) {
|
|
--chrome-content-separator-color: light-dark(rgb(201, 192, 227), rgb(63, 62, 66));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* These colors are for when an AMO LWT is installed, we force blue/cyan for
|
|
* the link/focus colors. We probably don't want to change this to purple for
|
|
* Nova but there could be a case for using --color-accent-primary instead.
|
|
* Any change will affect contrasts for LWTs but using --color-accent-primary
|
|
* would allow the user to change the color at least.
|
|
*/
|
|
&[lwtheme]:not([theme-in-app]) {
|
|
--link-color: light-dark(var(--color-blue-60), var(--color-cyan-30));
|
|
--link-color-hover: light-dark(var(--color-blue-70), var(--color-cyan-20));
|
|
--link-color-active: light-dark(var(--color-blue-80), var(--color-cyan-10));
|
|
--tabs-navbar-separator-color: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
|
|
--color-accent-attention: light-dark(#2ac3a2, #54ffbd);
|
|
|
|
@media not (prefers-contrast) {
|
|
--focus-outline-color: light-dark(#0061e0, #00ddff);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* We intentionally do not use the custom colors on linux or macOS with system
|
|
* theme enabled, instead choosing to fall back to system colors and
|
|
* transparencies in order to look more native.
|
|
*/
|
|
@media not ((forced-colors) or (-moz-native-theme)) {
|
|
:root:not([lwtheme]) {
|
|
&:where([customtitlebar]) {
|
|
--toolbox-background-color-inactive: light-dark(rgb(235, 235, 239), rgb(31, 30, 37));
|
|
}
|
|
|
|
@media not -moz-pref("sidebar.revamp") {
|
|
--chrome-content-separator-color: light-dark(rgb(204, 204, 204), hsl(240, 5%, 5%));
|
|
}
|
|
}
|
|
}
|