forked from mirrors/gecko-dev
9192756e3e
This relands the simplification that was reverted in bug 1647356, which made it so that the border takes space, with a key tweak. The border taking space is generally good and simplified some code, but it causes uneven spacing around the urlbar if we set the separator color to transparent (like many even builtin themes do). This is technically already an issue if a theme sets the `chrome-content-separator-color` to transparent, but I think that's really uncommon, and we don't want to encourage themes to suppress that separator IMO... We might want to forbid that even somehow? So for now only handle the tabs separator. Clean-up some adjacent code while at it. An alternative would be to keep the shadow, and add some comments as for why it's a shadow and not a border, but that seems to subtly complicate layout in other places (which were working around it before the regressing bug). Differential Revision: https://phabricator.services.mozilla.com/D206547
92 lines
4.2 KiB
CSS
92 lines
4.2 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/. */
|
|
|
|
@namespace html url("http://www.w3.org/1999/xhtml");
|
|
|
|
@media not (prefers-contrast) {
|
|
:root:not([lwtheme]) {
|
|
--button-primary-bgcolor: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
|
|
--button-primary-hover-bgcolor: light-dark(rgb(2, 80, 187), rgb(128, 235, 255));
|
|
--button-primary-active-bgcolor: light-dark(rgb(5, 62, 148), rgb(170, 242, 255));
|
|
--button-primary-color: light-dark(rgb(251, 251, 254), rgb(43, 42, 51));
|
|
--button-bgcolor: light-dark(
|
|
rgba(207, 207, 216, .33),
|
|
rgba(0, 0, 0, .33)
|
|
);
|
|
--button-hover-bgcolor: light-dark(
|
|
rgba(207, 207, 216, .66),
|
|
rgba(207, 207, 216, .20)
|
|
);
|
|
--button-active-bgcolor: light-dark(
|
|
rgb(207, 207, 216),
|
|
rgba(207, 207, 216, .40)
|
|
);
|
|
--button-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
|
|
|
|
--focus-outline-color: var(--button-primary-bgcolor);
|
|
|
|
--arrowpanel-background: light-dark(white, rgb(66, 65, 77));
|
|
--arrowpanel-color: light-dark(black, rgb(251, 251, 254));
|
|
--arrowpanel-border-color: light-dark(rgb(240, 240, 244), rgb(82,82,94));
|
|
|
|
--arrowpanel-dimmed: light-dark(
|
|
color-mix(in srgb, currentColor 12%, transparent),
|
|
color-mix(in srgb, currentColor 17%, transparent)
|
|
);
|
|
--arrowpanel-dimmed-further: light-dark(
|
|
color-mix(in srgb, currentColor 20%, transparent),
|
|
color-mix(in srgb, currentColor 14%, transparent)
|
|
);
|
|
|
|
--input-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
|
|
--input-bgcolor: light-dark(rgb(255, 255, 255), #42414d);
|
|
--input-border-color: light-dark(color-mix(in srgb, currentColor 41%, transparent), #8f8f9d);
|
|
|
|
--tab-selected-bgcolor: light-dark(rgb(255, 255, 255), rgb(66, 65, 77));
|
|
--tab-selected-textcolor: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
|
|
--tab-icon-overlay-stroke: light-dark(rgb(255, 255, 255), rgb(66, 65, 77));
|
|
--tab-icon-overlay-fill: light-dark(rgb(91, 91, 102), rgb(251, 251, 254));
|
|
--tabs-navbar-separator-style: none;
|
|
|
|
--toolbox-non-lwt-bgcolor: light-dark(rgb(240, 240, 244), rgb(28, 27, 34));
|
|
--toolbox-non-lwt-textcolor: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
|
|
--toolbox-non-lwt-bgcolor-inactive: var(--toolbox-non-lwt-bgcolor);
|
|
--toolbox-non-lwt-textcolor-inactive: var(--toolbox-non-lwt-textcolor);
|
|
|
|
&:where([tabsintitlebar]) {
|
|
--toolbox-non-lwt-bgcolor-inactive: light-dark(rgb(235, 235, 239), rgb(31, 30, 37));
|
|
}
|
|
|
|
--toolbar-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
|
|
--toolbar-non-lwt-bgcolor: light-dark(#f9f9fb, rgb(43, 42, 51));
|
|
--toolbar-non-lwt-textcolor: var(--toolbar-color);
|
|
|
|
--toolbarbutton-icon-fill: light-dark(rgb(91, 91, 102), rgb(251, 251, 254));
|
|
--toolbarbutton-icon-fill-attention: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
|
|
--toolbarbutton-icon-fill-attention-text: light-dark(rgb(240, 240, 244), rgb(28, 27, 34));
|
|
|
|
--toolbar-field-border-color: transparent;
|
|
--toolbar-field-background-color: light-dark(rgb(240, 240, 244), rgb(28, 27, 34));
|
|
--toolbar-field-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
|
|
--toolbar-field-focus-background-color: light-dark(white, rgb(66, 65, 77));
|
|
--toolbar-field-focus-color: light-dark(black, rgb(251, 251, 254));
|
|
|
|
--urlbarView-action-color: light-dark(rgb(91, 91, 102), rgb(191, 191, 201));
|
|
--urlbarView-separator-color: light-dark(rgb(240, 240, 244), rgb(82, 82, 94));
|
|
--urlbarView-highlight-background: light-dark(#e0e0e6, rgb(43,42,51));
|
|
--urlbarView-highlight-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
|
|
--urlbarView-hover-background: light-dark(rgb(240, 240, 244), var(--arrowpanel-dimmed));
|
|
|
|
--urlbar-box-bgcolor: light-dark(white, rgb(66, 65, 77));
|
|
--urlbar-icon-fill-opacity: 0.72;
|
|
@media (prefers-color-scheme: dark) {
|
|
--urlbar-icon-fill-opacity: 1;
|
|
}
|
|
|
|
--chrome-content-separator-color: light-dark(rgb(204, 204, 204), hsl(240, 5%, 5%));
|
|
|
|
--link-color: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
|
|
--attention-dot-color: light-dark(#2ac3a2, #54ffbd);
|
|
}
|
|
}
|