mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2026-02-23 00:21:30 -08:00
Clean: SASS - Separated to system_default_theme.scss
This commit is contained in:
alstjr7375
parent
d3cb56ae69
commit
f1f0205081
2 changed files with 600 additions and 599 deletions
599
src/theme/_system_default_theme.scss
Normal file
599
src/theme/_system_default_theme.scss
Normal file
|
|
@ -0,0 +1,599 @@
|
|||
/*= Common - URL Bar focus color =============================================*/
|
||||
// TODO: `OS` Not covered case
|
||||
@media (-moz-windows-accent-color-in-titlebar), (-moz-gtk-csd-available) {
|
||||
/* URL Bar */
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme),
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) {
|
||||
--focus-outline-color: -moz-accent-color !important;
|
||||
}
|
||||
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #urlbar[open] > #urlbar-background,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #urlbar[open] > #urlbar-background {
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
-moz-accent-color 50%,
|
||||
transparent
|
||||
) !important; /* Like: --toolbar-field-focus-border-color */
|
||||
}
|
||||
}
|
||||
|
||||
/*= Windows7 - Aero Based Theme ==============================================*/
|
||||
@include OS($win7) {
|
||||
#TabsToolbar:not(:-moz-lwtheme) {
|
||||
--background-color: rgb(229, 229, 235);
|
||||
}
|
||||
#TabsToolbar:not(:-moz-lwtheme)
|
||||
.tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-background:not([selected="true"], [multiselected]) {
|
||||
color: var(--background-color);
|
||||
background-color: color-mix(in srgb, currentColor 60%, transparent);
|
||||
}
|
||||
#TabsToolbar:not(:-moz-lwtheme)
|
||||
.tabbrowser-tab:hover
|
||||
> .tab-stack
|
||||
> .tab-background:not([selected="true"], [multiselected]) {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
currentColor 85%,
|
||||
transparent
|
||||
) !important; /* Original: color-mix(in srgb, currentColor 11%, transparent) */
|
||||
}
|
||||
#scrollbutton-up:not(:-moz-lwtheme),
|
||||
#scrollbutton-down:not(:-moz-lwtheme),
|
||||
#alltabs-button:not(:-moz-lwtheme) > .toolbarbutton-badge-stack,
|
||||
#TabsToolbar:not(:-moz-lwtheme) .toolbarbutton-1 > .toolbarbutton-icon {
|
||||
color: var(--background-color) !important;
|
||||
background-color: color-mix(in srgb, currentColor 50%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
/*= Windows10 - UWP like color ===============================================*/
|
||||
@include OS($win10) {
|
||||
:root:not(:-moz-lwtheme) {
|
||||
--win-text-color: rgba(0, 0, 0);
|
||||
--win-bgcolor: rgb(204, 204, 204);
|
||||
--win-disabled-color: rgb(145, 145, 145); /* also button-active-color */
|
||||
--win-disabled-bgcolor: transparent;
|
||||
--win-hover-bgcolor: rgb(218, 218, 218);
|
||||
--win-hover-active-bgcolor: #c2c2c2; /* also button-bgcolor */
|
||||
--win-field-bgcolor: #ffffff;
|
||||
--win-component-bgcolor: #f2f2f2;
|
||||
--win-border-color: #8a8a8a;
|
||||
--win-tab-seperator-color: #a3a3a3;
|
||||
--win-sidebar-bgcolor: #e6e6e6;
|
||||
--win-sidebar-hover-bgcolor: #cfcfcf;
|
||||
--win-sidebar-button-hover-bgcolor: #b8b8b8;
|
||||
--win-sidebar-button-hover-active-bgcolor: #a3a3a3;
|
||||
--win-button-border: #747474;
|
||||
--win-button-hover-bgcolor: rgba(145, 145, 145, 0.66);
|
||||
--win-shorcut-text-color: #757575;
|
||||
--win-error-color: #b31616;
|
||||
--win-red-border-color: #ff4343;
|
||||
--win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, -moz-accent-color);
|
||||
--win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, -moz-accent-color);
|
||||
--win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, -moz-accent-color);
|
||||
--win-accent-active-color: -moz-accent-color;
|
||||
}
|
||||
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
|
||||
:root:not(:-moz-lwtheme),
|
||||
:root[lwt-default-theme-in-dark-mode] {
|
||||
--win-text-color: #ffffff;
|
||||
--win-bgcolor: #2b2b2b;
|
||||
--win-disabled-color: #747474; /* also button-active-color */
|
||||
--win-disabled-bgcolor: transparent;
|
||||
--win-hover-bgcolor: #2e2e2e;
|
||||
--win-hover-active-bgcolor: #454545; /* also button-bgcolor */
|
||||
--win-field-bgcolor: #373737;
|
||||
--win-component-bgcolor: #171717;
|
||||
--win-border-color: #5b5b5b;
|
||||
--win-tab-seperator-color: #555555;
|
||||
--win-sidebar-bgcolor: #1f1f1f;
|
||||
--win-sidebar-hover-bgcolor: #353535;
|
||||
--win-sidebar-button-hover-bgcolor: #353535;
|
||||
--win-sidebar-button-hover-active-bgcolor: #4c4c4c;
|
||||
--win-button-border: #8f8f8f;
|
||||
--win-button-hover-bgcolor: rgba(116, 116, 116, 0.66);
|
||||
--win-shorcut-text-color: #adadad;
|
||||
--win-error-color: #ffb900;
|
||||
--win-red-border-color: #ff4343;
|
||||
--win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, -moz-accent-color);
|
||||
--win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, -moz-accent-color);
|
||||
--win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, -moz-accent-color);
|
||||
--win-accent-active-color: -moz-accent-color;
|
||||
}
|
||||
}
|
||||
|
||||
:root:not(:-moz-lwtheme),
|
||||
:root[lwt-default-theme-in-dark-mode] {
|
||||
/* Text, Icon Color */
|
||||
--menu-color: var(--win-text-color) !important;
|
||||
--lwt-text-color: var(--win-text-color) !important;
|
||||
--button-color: var(--win-text-color) !important;
|
||||
--input-color: var(--win-text-color) !important;
|
||||
--toolbar-color: var(--win-text-color) !important;
|
||||
--toolbar-non-lwt-textcolor: var(--win-text-color) !important;
|
||||
--toolbarbutton-icon-fill: var(--win-text-color) !important;
|
||||
--toolbar-field-focus-color: var(--win-text-color) !important;
|
||||
--urlbar-popup-action-color: var(--win-text-color) !important;
|
||||
--toolbar-field-color: var(--win-text-color) !important;
|
||||
--autocomplete-popup-highlight-color: var(--win-text-color) !important;
|
||||
--tab-icon-overlay-fill: var(--win-text-color) !important;
|
||||
--panel-banner-item-color: var(--win-text-color) !important;
|
||||
--arrowpanel-color: var(--win-text-color) !important;
|
||||
--autocomplete-popup-color: var(--win-text-color) !important;
|
||||
|
||||
/* Text Disabled Color */
|
||||
--menu-disabled-color: var(--win-disabled-color) !important;
|
||||
--button-active-bgcolor: var(--win-disabled-color) !important;
|
||||
--checkbox-unchecked-active-bgcolor: var(--win-disabled-color) !important;
|
||||
--panel-disabled-color: var(--win-disabled-color) !important;
|
||||
--download-progress-paused-color: var(--win-disabled-color) !important;
|
||||
|
||||
/* Text Shortcut Color */
|
||||
--panel-shortcut-color: var(--win-shorcut-text-color) !important;
|
||||
--panel-description-color: var(--win-shorcut-text-color) !important;
|
||||
|
||||
/* Title Background, Border Color */
|
||||
--menu-border-color: var(--win-bgcolor) !important;
|
||||
--lwt-accent-color: var(--win-bgcolor) !important;
|
||||
--toolbar-field-border-color: var(--win-bgcolor) !important;
|
||||
--chrome-content-separator-color: var(--win-bgcolor) !important;
|
||||
|
||||
/* Component Background Color */
|
||||
--menu-background-color: var(--win-component-bgcolor) !important;
|
||||
--toolbar-bgcolor: var(--win-component-bgcolor) !important;
|
||||
--toolbar-non-lwt-bgcolor: var(--win-component-bgcolor) !important;
|
||||
--arrowpanel-background: var(--win-component-bgcolor) !important;
|
||||
--autocomplete-popup-background: var(--win-component-bgcolor) !important;
|
||||
|
||||
/* Seperator */
|
||||
--toolbarseparator-color: var(--win-tab-seperator-color) !important;
|
||||
|
||||
/* Field Backround Color */
|
||||
--input-bgcolor: var(--win-field-bgcolor) !important;
|
||||
--toolbar-field-background-color: var(--win-field-bgcolor) !important;
|
||||
--toolbar-field-focus-background-color: var(--win-field-bgcolor) !important;
|
||||
--tab-icon-overlay-stroke: var(--win-field-bgcolor) !important;
|
||||
--button-primary-color: var(--win-field-bgcolor) !important;
|
||||
--checkbox-checked-color: var(--win-field-bgcolor) !important;
|
||||
|
||||
/* Hover Background Color */
|
||||
--menuitem-hover-background-color: var(--win-hover-bgcolor) !important;
|
||||
--toolbarbutton-hover-background: var(--win-hover-bgcolor) !important;
|
||||
--panel-banner-item-hover-bgcolor: var(--win-hover-bgcolor) !important;
|
||||
|
||||
/* Hover Active, Button Color */
|
||||
--button-bgcolor: var(--win-hover-active-bgcolor) !important;
|
||||
--checkbox-unchecked-bgcolor: var(--win-hover-active-bgcolor) !important;
|
||||
--panel-banner-item-background-color: var(--win-hover-active-bgcolor) !important;
|
||||
--urlbar-box-bgcolor: var(--win-hover-active-bgcolor) !important;
|
||||
--urlbar-box-focus-bgcolor: var(--win-hover-active-bgcolor) !important;
|
||||
--panel-banner-item-active-bgcolor: var(--win-hover-active-bgcolor) !important;
|
||||
--toolbarbutton-active-background: var(--win-hover-active-bgcolor) !important;
|
||||
--urlbar-box-active-bgcolor: var(--win-hover-active-bgcolor) !important;
|
||||
--autocomplete-popup-highlight-background: var(--win-hover-active-bgcolor) !important;
|
||||
|
||||
/* Disabled Background Color */
|
||||
--menuitem-disabled-hover-background-color: var(--win-disabled-bgcolor) !important;
|
||||
|
||||
/* Button Hover Color */
|
||||
--button-hover-bgcolor: var(--win-button-hover-bgcolor) !important;
|
||||
--checkbox-unchecked-hover-bgcolor: var(--win-button-hover-bgcolor) !important;
|
||||
--urlbar-box-hover-bgcolor: var(--win-button-hover-bgcolor) !important;
|
||||
--autocomplete-popup-hover-background: var(--win-button-hover-bgcolor) !important;
|
||||
|
||||
/* Button Border Color */
|
||||
--checkbox-border-color: var(--win-button-border) !important;
|
||||
--input-border-color: var(--win-button-border) !important;
|
||||
--autocomplete-popup-separator-color: var(--win-button-border) !important;
|
||||
|
||||
/* Accent Color */
|
||||
--button-primary-bgcolor: var(--win-accent-color) !important;
|
||||
--focus-outline-color: var(--win-accent-color) !important;
|
||||
--checkbox-checked-bgcolor: var(--win-accent-color) !important;
|
||||
|
||||
/* Accent Content Color */
|
||||
--toolbarbutton-icon-fill-attention: var(--win-accent-content-color) !important;
|
||||
--urlbar-popup-url-color: var(--win-accent-content-color) !important;
|
||||
--download-progress-fill-color: var(--win-accent-content-color) !important;
|
||||
|
||||
/* Accent Hover Color */
|
||||
--button-primary-hover-bgcolor: var(--win-accent-hover-color) !important;
|
||||
--checkbox-checked-hover-bgcolor: var(--win-accent-hover-color) !important;
|
||||
|
||||
/* Accent Hover Active Color */
|
||||
--button-primary-active-bgcolor: var(--win-accent-active-color) !important;
|
||||
--checkbox-checked-active-bgcolor: var(--win-accent-active-color) !important;
|
||||
|
||||
/* Error Color */
|
||||
--error-text-color: var(--win-error-color) !important;
|
||||
--input-error-border-color: var(--win-error-color) !important;
|
||||
|
||||
/* Others */
|
||||
--tab-line-color: Highlight !important;
|
||||
--tab-selected-bgcolor: unset !important;
|
||||
--tabs-border-color: transparent !important;
|
||||
--checkbox-checked-border-color: transparent !important;
|
||||
|
||||
/* Other Defaults */
|
||||
--arrowpanel-dimmed: color-mix(in srgb, currentColor 12%, transparent) !important;
|
||||
--arrowpanel-dimmed-further: color-mix(in srgb, currentColor 20%, transparent) !important;
|
||||
--arrowpanel-dimmed-even-further: color-mix(in srgb, currentColor 27%, transparent) !important;
|
||||
|
||||
--download-progress-flare-color: rgba(255, 255, 255, 0.75) !important;
|
||||
|
||||
--panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px var(--focus-outline-color) !important;
|
||||
}
|
||||
#navigator-toolbox:not(:-moz-lwtheme) {
|
||||
background: var(--lwt-accent-color) !important;
|
||||
}
|
||||
|
||||
/*- Separator --------------------------------------------------------------*/
|
||||
:root:not(:-moz-lwtheme) {
|
||||
--arrowpanel-border-color: var(--win-bgcolor) !important;
|
||||
--panel-separator-color: var(--win-bgcolor) !important;
|
||||
}
|
||||
:root[lwt-default-theme-in-dark-mode] {
|
||||
--arrowpanel-border-color: var(--win-border-color) !important;
|
||||
--panel-separator-color: var(--win-border-color) !important;
|
||||
}
|
||||
|
||||
/*- Menu -------------------------------------------------------------------*/
|
||||
html#main-window menupopup:not(:-moz-lwtheme) {
|
||||
--menu-color: var(--win-text-color) !important;
|
||||
--menu-background-color: var(--win-component-bgcolor) !important;
|
||||
--menu-border-color: var(--win-bgcolor) !important;
|
||||
--menuitem-hover-background-color: var(--win-hover-bgcolor) !important;
|
||||
--menu-disabled-color: var(--win-disabled-color) !important;
|
||||
--menuitem-disabled-hover-background-color: var(--win-disabled-bgcolor) !important;
|
||||
}
|
||||
|
||||
/*- Toolbar ----------------------------------------------------------------*/
|
||||
:root:not(:-moz-lwtheme) #titlebar,
|
||||
:root[lwt-default-theme-in-dark-mode] #titlebar {
|
||||
--button-hover-bgcolor: var(--win-sidebar-button-hover-bgcolor);
|
||||
--button-active-bgcolor: var(--win-sidebar-button-hover-active-bgcolor);
|
||||
--toolbarbutton-hover-background: var(--win-sidebar-button-hover-bgcolor);
|
||||
--toolbarbutton-active-background: var(--win-sidebar-button-hover-active-bgcolor);
|
||||
}
|
||||
|
||||
/*- Sidebar ----------------------------------------------------------------*/
|
||||
#sidebar-box:not([lwt-sidebar]) {
|
||||
appearance: none !important;
|
||||
}
|
||||
:root:not(:-moz-lwtheme) #sidebar-box,
|
||||
:root[lwt-default-theme-in-dark-mode] #sidebar-box {
|
||||
--sidebar-background-color: var(--win-sidebar-bgcolor) !important;
|
||||
--sidebar-text-color: var(--win-text-color) !important;
|
||||
--sidebar-border-color: var(--win-border-color) !important;
|
||||
}
|
||||
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
|
||||
.sidebar-panel[style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
|
||||
body[lwt-sidebar][style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
|
||||
.sidebar-panel[style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], /* Nightly */
|
||||
body[lwt-sidebar][style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"] {
|
||||
/* Only darkmode has more: --newtab-background-color-secondary: rgba(66, 65, 77, 1); */
|
||||
--lwt-sidebar-background-color: transparent !important;
|
||||
--lwt-sidebar-text-color: var(--win-text-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
:root:not(:-moz-lwtheme)
|
||||
.subviewbutton:not(#appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2),
|
||||
:root[lwt-default-theme-in-dark-mode]
|
||||
.subviewbutton:not(#appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2) {
|
||||
--button-hover-bgcolor: var(--win-hover-bgcolor) !important;
|
||||
--button-active-bgcolor: var(--win-hover-active-bgcolor) !important;
|
||||
}
|
||||
|
||||
/*- Others -----------------------------------------------------------------*/
|
||||
/* For overwrite */
|
||||
:root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]):not(:-moz-lwtheme), /* Legacy */
|
||||
:root:not(:-moz-lwtheme) {
|
||||
/* Light Theme */
|
||||
--lwt-accent-color: var(--win-bgcolor) !important;
|
||||
}
|
||||
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
|
||||
:root[lwt-default-theme-in-dark-mode][lwthemetextcolor="bright"] {
|
||||
--toolbar-bgcolor: var(--win-component-bgcolor) !important; /* Original: rgba(43, 42, 51, 1) */
|
||||
}
|
||||
}
|
||||
|
||||
#tabbrowser-tabs:not([movingtab])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-background[multiselected]:not([selected]):not(:-moz-lwtheme),
|
||||
:root[lwtheme-mozlightdark] /* Legacy */
|
||||
#tabbrowser-tabs:not([movingtab])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-background[multiselected]:not([selected]),
|
||||
:root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
|
||||
#tabbrowser-tabs:not([movingtab])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-background[multiselected]:not([selected]) {
|
||||
background-image: linear-gradient(
|
||||
color-mix(in srgb, currentColor 11%, transparent),
|
||||
color-mix(in srgb, currentColor 11%, transparent)
|
||||
),
|
||||
linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*= Windows10 - Titlebar accent color ========================================*/
|
||||
@media (-moz-windows-accent-color-in-titlebar) {
|
||||
/* Tab Bar */
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .titlebar-color,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .titlebar-color {
|
||||
color: -moz-accent-color-foreground;
|
||||
background-color: -moz-accent-color;
|
||||
}
|
||||
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .toolbar-items,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .toolbar-items {
|
||||
--toolbarbutton-icon-fill: currentColor;
|
||||
--toolbarbutton-hover-background: color-mix(in srgb, -moz-accent-color-foreground 10%, transparent);
|
||||
--toolbarbutton-active-background: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
/*= GTK - URL View url accent color ==========================================*/
|
||||
@include OS($linux) {
|
||||
:root:not(:-moz-lwtheme) .urlbarView-url {
|
||||
--urlbar-popup-url-color: -moz-accent-color;
|
||||
}
|
||||
|
||||
/* Nightly Compatibility */
|
||||
:root:not(:-moz-lwtheme) #urlbar {
|
||||
--toolbar-field-focus-color: var(--toolbar-field-color); /* Nightly: rgba(0, 0, 0, 1) */
|
||||
--toolbar-field-focus-background-color: var(--toolbar-field-background-color); /* Nightly: white */
|
||||
}
|
||||
}
|
||||
|
||||
/*= Mac - Default like color =================================================*/
|
||||
@include OS($mac) {
|
||||
:root:not(:-moz-lwtheme),
|
||||
:root[lwt-default-theme-in-dark-mode] {
|
||||
/* Colors */
|
||||
--mac-text-color: -moz-dialogtext;
|
||||
--mac-disabled-color: GrayText;
|
||||
--mac-bgcolor: Window;
|
||||
--mac-selected-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog);
|
||||
--mac-field-bgcolor: Window;
|
||||
--mac-panel-bgcolor: Menu;
|
||||
--mac-sidebar-bgcolor: -moz-mac-source-list;
|
||||
--mac-sidebar-hover-bgcolor: color-mix(in srgb, ButtonFace 60%, var(--mac-sidebar-bgcolor));
|
||||
--mac-hover-bgcolor: Window;
|
||||
--mac-disabled-bgcolor: transparent;
|
||||
--mac-primary-button-color: -moz-accent-color-foreground; /* or -moz-mac-menutextselect */
|
||||
--mac-accent-color: -moz-accent-color; /* or LinkText */
|
||||
--mac-accent-content-color: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-accent-color);
|
||||
--mac-accent-hover-color: color-mix(
|
||||
in srgb,
|
||||
rgb(0, 0, 0) 10%,
|
||||
-moz-accent-color
|
||||
); /* or -moz-mac-menuselect, Highlight */
|
||||
--mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, -moz-accent-color); /* or ActiveBorder */
|
||||
|
||||
/* Text, Icon Color */
|
||||
--menu-color: var(--mac-text-color) !important;
|
||||
--lwt-text-color: var(--mac-text-color) !important;
|
||||
--button-color: var(--mac-text-color) !important;
|
||||
--input-color: var(--mac-text-color) !important;
|
||||
--toolbar-color: var(--mac-text-color) !important;
|
||||
--toolbar-non-lwt-textcolor: var(--mac-text-color) !important;
|
||||
--toolbarbutton-icon-fill: var(--mac-text-color) !important;
|
||||
--toolbar-field-focus-color: var(--mac-text-color) !important;
|
||||
--urlbar-popup-action-color: var(--mac-text-color) !important;
|
||||
--toolbar-field-color: var(--mac-text-color) !important;
|
||||
--autocomplete-popup-highlight-color: var(--mac-text-color) !important;
|
||||
--tab-icon-overlay-fill: var(--mac-text-color) !important;
|
||||
--panel-banner-item-color: var(--mac-text-color) !important;
|
||||
--arrowpanel-color: var(--mac-text-color) !important;
|
||||
--autocomplete-popup-color: var(--mac-text-color) !important;
|
||||
--panel-shortcut-color: var(--mac-text-color) !important;
|
||||
--panel-description-color: var(--mac-text-color) !important;
|
||||
|
||||
/* Text Disabled Color */
|
||||
--menu-disabled-color: var(--mac-disabled-color) !important;
|
||||
--button-active-bgcolor: var(--mac-disabled-color) !important;
|
||||
--checkbox-unchecked-active-bgcolor: var(--mac-disabled-color) !important;
|
||||
--panel-disabled-color: var(--mac-disabled-color) !important;
|
||||
--download-progress-paused-color: var(--mac-disabled-color) !important;
|
||||
|
||||
/* Background Color */
|
||||
--lwt-accent-color: var(--mac-bgcolor) !important;
|
||||
--menu-background-color: var(--mac-bgcolor) !important;
|
||||
--autocomplete-popup-background: var(--mac-bgcolor) !important;
|
||||
|
||||
/* Selected Background Color */
|
||||
--toolbar-bgcolor: var(--mac-selected-bgcolor) !important;
|
||||
--toolbar-non-lwt-bgcolor: var(--mac-selected-bgcolor) !important;
|
||||
|
||||
/* Field Backround Color */
|
||||
--input-bgcolor: var(--mac-field-bgcolor) !important;
|
||||
--toolbar-field-background-color: var(--mac-field-bgcolor) !important;
|
||||
--tab-icon-overlay-stroke: var(--mac-field-bgcolor) !important;
|
||||
|
||||
/* Panel Backround Color */
|
||||
--arrowpanel-background: var(--mac-panel-bgcolor) !important;
|
||||
|
||||
/* Hover Background Color */
|
||||
--menuitem-hover-background-color: var(--mac-hover-bgcolor) !important;
|
||||
--toolbarbutton-hover-background: var(--mac-hover-bgcolor) !important;
|
||||
--panel-banner-item-hover-bgcolor: var(--mac-hover-bgcolor) !important;
|
||||
|
||||
--button-bgcolor: var(--mac-hover-bgcolor) !important;
|
||||
--checkbox-unchecked-bgcolor: var(--mac-hover-bgcolor) !important;
|
||||
--panel-banner-item-background-color: var(--mac-hover-bgcolor) !important;
|
||||
--urlbar-box-bgcolor: var(--mac-hover-bgcolor) !important;
|
||||
--urlbar-box-focus-bgcolor: var(--mac-hover-bgcolor) !important;
|
||||
--panel-banner-item-active-bgcolor: var(--mac-hover-bgcolor) !important;
|
||||
--toolbarbutton-active-background: var(--mac-hover-bgcolor) !important;
|
||||
--urlbar-box-active-bgcolor: var(--mac-hover-bgcolor) !important;
|
||||
--autocomplete-popup-highlight-background: var(--mac-hover-bgcolor) !important;
|
||||
|
||||
--button-hover-bgcolor: var(--mac-hover-bgcolor) !important;
|
||||
--checkbox-unchecked-hover-bgcolor: var(--mac-hover-bgcolor) !important;
|
||||
--urlbar-box-hover-bgcolor: var(--mac-hover-bgcolor) !important;
|
||||
--autocomplete-popup-hover-background: var(--mac-hover-bgcolor) !important;
|
||||
|
||||
/* Disabled Background Color */
|
||||
--menuitem-disabled-hover-background-color: var(--mac-disabled-bgcolor) !important;
|
||||
|
||||
/* Border Color */
|
||||
/*
|
||||
--menu-border-color: var(--mac-bgcolor) !important;
|
||||
--toolbar-field-border-color: var(--mac-bgcolor) !important;
|
||||
--arrowpanel-border-color: var(--mac-bgcolor) !important;
|
||||
--chrome-content-separator-color: var(--mac-bgcolor) !important;
|
||||
--toolbarseparator-color: var(--mac-bgcolor) !important;
|
||||
--panel-separator-color: var(--mac-bgcolor) !important;
|
||||
*/
|
||||
|
||||
/* Button Border Color */
|
||||
/*
|
||||
--tab-line-color: var(---mac-bgcolor) !important;
|
||||
--checkbox-border-color: var(--mac-bgcolor) !important;
|
||||
--input-border-color: var(--mac-bgcolor) !important;
|
||||
--autocomplete-popup-separator-color: var(--mac-bgcolor) !important;
|
||||
*/
|
||||
|
||||
/* Accent Color Forground */
|
||||
--button-primary-color: var(--mac-primary-button-color) !important;
|
||||
--checkbox-checked-color: var(--mac-primary-button-color) !important;
|
||||
|
||||
/* Accent Color */
|
||||
--button-primary-bgcolor: var(--mac-accent-color) !important;
|
||||
--focus-outline-color: var(--mac-accent-color) !important;
|
||||
--checkbox-checked-bgcolor: var(--mac-accent-color) !important;
|
||||
|
||||
/* Accent Content Color */
|
||||
--toolbarbutton-icon-fill-attention: var(--mac-accent-content-color) !important;
|
||||
--urlbar-popup-url-color: var(--mac-accent-content-color) !important;
|
||||
--download-progress-fill-color: var(--mac-accent-content-color) !important;
|
||||
|
||||
/* Accent Hover Color */
|
||||
--button-primary-hover-bgcolor: var(--mac-accent-hover-color) !important;
|
||||
--checkbox-checked-hover-bgcolor: var(--mac-accent-hover-color) !important;
|
||||
|
||||
/* Accent Hover Active Color */
|
||||
--button-primary-active-bgcolor: var(--mac-accent-active-color) !important;
|
||||
--checkbox-checked-active-bgcolor: var(--mac-accent-active-color) !important;
|
||||
|
||||
/* Error Color */
|
||||
/*
|
||||
--error-text-color: var(--win-error-color) !important;
|
||||
--input-error-border-color: var(--win-error-color) !important;
|
||||
*/
|
||||
|
||||
/* Others */
|
||||
--tab-selected-bgcolor: unset !important;
|
||||
--tabs-border-color: transparent !important;
|
||||
--checkbox-checked-border-color: transparent !important;
|
||||
|
||||
/* Other Defaults */
|
||||
--arrowpanel-dimmed: color-mix(in srgb, currentColor 12%, transparent) !important;
|
||||
--arrowpanel-dimmed-further: color-mix(in srgb, currentColor 20%, transparent) !important;
|
||||
--arrowpanel-dimmed-even-further: color-mix(in srgb, currentColor 27%, transparent) !important;
|
||||
|
||||
--download-progress-flare-color: rgba(255, 255, 255, 0.75) !important;
|
||||
|
||||
--panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px var(--focus-outline-color) !important;
|
||||
}
|
||||
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
|
||||
:root:not(:-moz-lwtheme),
|
||||
:root[lwt-default-theme-in-dark-mode] {
|
||||
--mac-field-bgcolor: Field;
|
||||
--mac-panel-bgcolor: -moz-CellHighlight;
|
||||
--mac-hover-bgcolor: ButtonFace;
|
||||
|
||||
--toolbar-field-focus-background-color: var(--mac-bgcolor) !important;
|
||||
--toolbar-field-background-color: var(--mac-sidebar-bgcolor) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*- Toolbar ----------------------------------------------------------------*/
|
||||
:root:not(:-moz-lwtheme) #navigator-toolbox,
|
||||
:root[lwt-default-theme-in-dark-mode] #navigator-toolbox {
|
||||
appearance: auto !important;
|
||||
}
|
||||
|
||||
:root:not(:-moz-lwtheme) #titlebar {
|
||||
--mac-hover-bgcolor: ButtonFace;
|
||||
}
|
||||
:root:not(:-moz-lwtheme) #titlebar,
|
||||
:root[lwt-default-theme-in-dark-mode] #titlebar {
|
||||
--button-hover-bgcolor: var(--mac-hover-bgcolor);
|
||||
--button-active-bgcolor: var(--mac-hover-bgcolor);
|
||||
--toolbarbutton-hover-background: var(--mac-hover-bgcolor);
|
||||
--toolbarbutton-active-background: var(--mac-hover-bgcolor);
|
||||
}
|
||||
|
||||
:root[lwt-default-theme-in-dark-mode] #urlbar {
|
||||
--autocomplete-popup-highlight-background: var(--mac-hover-bgcolor) !important;
|
||||
--autocomplete-popup-hover-background: var(--mac-hover-bgcolor) !important;
|
||||
}
|
||||
|
||||
/*- Sidebar ----------------------------------------------------------------*/
|
||||
#sidebar-box:not([lwt-sidebar]) {
|
||||
appearance: none !important;
|
||||
}
|
||||
:root:not(:-moz-lwtheme) #sidebar-box,
|
||||
:root[lwt-default-theme-in-dark-mode] #sidebar-box {
|
||||
--sidebar-background-color: var(--mac-sidebar-bgcolor) !important;
|
||||
--sidebar-text-color: var(--mac-text-color) !important;
|
||||
/* --sidebar-border-color: var(--win-sidebar-border-color) !important; */
|
||||
}
|
||||
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
|
||||
.sidebar-panel[style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
|
||||
body[lwt-sidebar][style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
|
||||
.sidebar-panel[style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], /* Nightly */
|
||||
body[lwt-sidebar][style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"] {
|
||||
/* Only darkmode has more: --newtab-background-color-secondary: rgba(66, 65, 77, 1); */
|
||||
--lwt-sidebar-background-color: transparent !important;
|
||||
--lwt-sidebar-text-color: var(--mac-text-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
:root[lwt-default-theme-in-dark-mode] #sidebarMenu-popup {
|
||||
--button-hover-bgcolor: var(--mac-sidebar-hover-bgcolor);
|
||||
--button-active-bgcolor: var(--mac-sidebar-hover-bgcolor);
|
||||
}
|
||||
|
||||
/*- Others -----------------------------------------------------------------*/
|
||||
/* For Overwrite */
|
||||
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
|
||||
:root[lwt-default-theme-in-dark-mode][lwthemetextcolor="bright"] {
|
||||
--toolbar-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hard Coded */
|
||||
:root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy */
|
||||
#tabbrowser-tabs:not([movingtab])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-background[selected="true"],
|
||||
:root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode]
|
||||
#tabbrowser-tabs:not([movingtab])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-background[selected="true"] {
|
||||
background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
|
||||
}
|
||||
|
||||
:root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::before,
|
||||
:root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::after,
|
||||
:root:not([customizing="true"])[lwt-default-theme-in-dark-mode] tab[visuallyselected] > stack::before,
|
||||
:root:not([customizing="true"])[lwt-default-theme-in-dark-mode] tab[visuallyselected] > stack::after {
|
||||
fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -13,605 +13,7 @@
|
|||
@import "theme/os_compatibility";
|
||||
|
||||
/** System Default Theme ******************************************************/
|
||||
/*= Common - URL Bar focus color =============================================*/
|
||||
// TODO: `OS` Not covered case
|
||||
@media (-moz-windows-accent-color-in-titlebar), (-moz-gtk-csd-available) {
|
||||
/* URL Bar */
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme),
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) {
|
||||
--focus-outline-color: -moz-accent-color !important;
|
||||
}
|
||||
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #urlbar[open] > #urlbar-background,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #urlbar[open] > #urlbar-background {
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
-moz-accent-color 50%,
|
||||
transparent
|
||||
) !important; /* Like: --toolbar-field-focus-border-color */
|
||||
}
|
||||
}
|
||||
|
||||
/*= Windows7 - Aero Based Theme ==============================================*/
|
||||
@include OS($win7) {
|
||||
#TabsToolbar:not(:-moz-lwtheme) {
|
||||
--background-color: rgb(229, 229, 235);
|
||||
}
|
||||
#TabsToolbar:not(:-moz-lwtheme)
|
||||
.tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-background:not([selected="true"], [multiselected]) {
|
||||
color: var(--background-color);
|
||||
background-color: color-mix(in srgb, currentColor 60%, transparent);
|
||||
}
|
||||
#TabsToolbar:not(:-moz-lwtheme)
|
||||
.tabbrowser-tab:hover
|
||||
> .tab-stack
|
||||
> .tab-background:not([selected="true"], [multiselected]) {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
currentColor 85%,
|
||||
transparent
|
||||
) !important; /* Original: color-mix(in srgb, currentColor 11%, transparent) */
|
||||
}
|
||||
#scrollbutton-up:not(:-moz-lwtheme),
|
||||
#scrollbutton-down:not(:-moz-lwtheme),
|
||||
#alltabs-button:not(:-moz-lwtheme) > .toolbarbutton-badge-stack,
|
||||
#TabsToolbar:not(:-moz-lwtheme) .toolbarbutton-1 > .toolbarbutton-icon {
|
||||
color: var(--background-color) !important;
|
||||
background-color: color-mix(in srgb, currentColor 50%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
/*= Windows10 - UWP like color ===============================================*/
|
||||
@include OS($win10) {
|
||||
:root:not(:-moz-lwtheme) {
|
||||
--win-text-color: rgba(0, 0, 0);
|
||||
--win-bgcolor: rgb(204, 204, 204);
|
||||
--win-disabled-color: rgb(145, 145, 145); /* also button-active-color */
|
||||
--win-disabled-bgcolor: transparent;
|
||||
--win-hover-bgcolor: rgb(218, 218, 218);
|
||||
--win-hover-active-bgcolor: #c2c2c2; /* also button-bgcolor */
|
||||
--win-field-bgcolor: #ffffff;
|
||||
--win-component-bgcolor: #f2f2f2;
|
||||
--win-border-color: #8a8a8a;
|
||||
--win-tab-seperator-color: #a3a3a3;
|
||||
--win-sidebar-bgcolor: #e6e6e6;
|
||||
--win-sidebar-hover-bgcolor: #cfcfcf;
|
||||
--win-sidebar-button-hover-bgcolor: #b8b8b8;
|
||||
--win-sidebar-button-hover-active-bgcolor: #a3a3a3;
|
||||
--win-button-border: #747474;
|
||||
--win-button-hover-bgcolor: rgba(145, 145, 145, 0.66);
|
||||
--win-shorcut-text-color: #757575;
|
||||
--win-error-color: #b31616;
|
||||
--win-red-border-color: #ff4343;
|
||||
--win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, -moz-accent-color);
|
||||
--win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, -moz-accent-color);
|
||||
--win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, -moz-accent-color);
|
||||
--win-accent-active-color: -moz-accent-color;
|
||||
}
|
||||
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
|
||||
:root:not(:-moz-lwtheme),
|
||||
:root[lwt-default-theme-in-dark-mode] {
|
||||
--win-text-color: #ffffff;
|
||||
--win-bgcolor: #2b2b2b;
|
||||
--win-disabled-color: #747474; /* also button-active-color */
|
||||
--win-disabled-bgcolor: transparent;
|
||||
--win-hover-bgcolor: #2e2e2e;
|
||||
--win-hover-active-bgcolor: #454545; /* also button-bgcolor */
|
||||
--win-field-bgcolor: #373737;
|
||||
--win-component-bgcolor: #171717;
|
||||
--win-border-color: #5b5b5b;
|
||||
--win-tab-seperator-color: #555555;
|
||||
--win-sidebar-bgcolor: #1f1f1f;
|
||||
--win-sidebar-hover-bgcolor: #353535;
|
||||
--win-sidebar-button-hover-bgcolor: #353535;
|
||||
--win-sidebar-button-hover-active-bgcolor: #4c4c4c;
|
||||
--win-button-border: #8f8f8f;
|
||||
--win-button-hover-bgcolor: rgba(116, 116, 116, 0.66);
|
||||
--win-shorcut-text-color: #adadad;
|
||||
--win-error-color: #ffb900;
|
||||
--win-red-border-color: #ff4343;
|
||||
--win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, -moz-accent-color);
|
||||
--win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, -moz-accent-color);
|
||||
--win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, -moz-accent-color);
|
||||
--win-accent-active-color: -moz-accent-color;
|
||||
}
|
||||
}
|
||||
|
||||
:root:not(:-moz-lwtheme),
|
||||
:root[lwt-default-theme-in-dark-mode] {
|
||||
/* Text, Icon Color */
|
||||
--menu-color: var(--win-text-color) !important;
|
||||
--lwt-text-color: var(--win-text-color) !important;
|
||||
--button-color: var(--win-text-color) !important;
|
||||
--input-color: var(--win-text-color) !important;
|
||||
--toolbar-color: var(--win-text-color) !important;
|
||||
--toolbar-non-lwt-textcolor: var(--win-text-color) !important;
|
||||
--toolbarbutton-icon-fill: var(--win-text-color) !important;
|
||||
--toolbar-field-focus-color: var(--win-text-color) !important;
|
||||
--urlbar-popup-action-color: var(--win-text-color) !important;
|
||||
--toolbar-field-color: var(--win-text-color) !important;
|
||||
--autocomplete-popup-highlight-color: var(--win-text-color) !important;
|
||||
--tab-icon-overlay-fill: var(--win-text-color) !important;
|
||||
--panel-banner-item-color: var(--win-text-color) !important;
|
||||
--arrowpanel-color: var(--win-text-color) !important;
|
||||
--autocomplete-popup-color: var(--win-text-color) !important;
|
||||
|
||||
/* Text Disabled Color */
|
||||
--menu-disabled-color: var(--win-disabled-color) !important;
|
||||
--button-active-bgcolor: var(--win-disabled-color) !important;
|
||||
--checkbox-unchecked-active-bgcolor: var(--win-disabled-color) !important;
|
||||
--panel-disabled-color: var(--win-disabled-color) !important;
|
||||
--download-progress-paused-color: var(--win-disabled-color) !important;
|
||||
|
||||
/* Text Shortcut Color */
|
||||
--panel-shortcut-color: var(--win-shorcut-text-color) !important;
|
||||
--panel-description-color: var(--win-shorcut-text-color) !important;
|
||||
|
||||
/* Title Background, Border Color */
|
||||
--menu-border-color: var(--win-bgcolor) !important;
|
||||
--lwt-accent-color: var(--win-bgcolor) !important;
|
||||
--toolbar-field-border-color: var(--win-bgcolor) !important;
|
||||
--chrome-content-separator-color: var(--win-bgcolor) !important;
|
||||
|
||||
/* Component Background Color */
|
||||
--menu-background-color: var(--win-component-bgcolor) !important;
|
||||
--toolbar-bgcolor: var(--win-component-bgcolor) !important;
|
||||
--toolbar-non-lwt-bgcolor: var(--win-component-bgcolor) !important;
|
||||
--arrowpanel-background: var(--win-component-bgcolor) !important;
|
||||
--autocomplete-popup-background: var(--win-component-bgcolor) !important;
|
||||
|
||||
/* Seperator */
|
||||
--toolbarseparator-color: var(--win-tab-seperator-color) !important;
|
||||
|
||||
/* Field Backround Color */
|
||||
--input-bgcolor: var(--win-field-bgcolor) !important;
|
||||
--toolbar-field-background-color: var(--win-field-bgcolor) !important;
|
||||
--toolbar-field-focus-background-color: var(--win-field-bgcolor) !important;
|
||||
--tab-icon-overlay-stroke: var(--win-field-bgcolor) !important;
|
||||
--button-primary-color: var(--win-field-bgcolor) !important;
|
||||
--checkbox-checked-color: var(--win-field-bgcolor) !important;
|
||||
|
||||
/* Hover Background Color */
|
||||
--menuitem-hover-background-color: var(--win-hover-bgcolor) !important;
|
||||
--toolbarbutton-hover-background: var(--win-hover-bgcolor) !important;
|
||||
--panel-banner-item-hover-bgcolor: var(--win-hover-bgcolor) !important;
|
||||
|
||||
/* Hover Active, Button Color */
|
||||
--button-bgcolor: var(--win-hover-active-bgcolor) !important;
|
||||
--checkbox-unchecked-bgcolor: var(--win-hover-active-bgcolor) !important;
|
||||
--panel-banner-item-background-color: var(--win-hover-active-bgcolor) !important;
|
||||
--urlbar-box-bgcolor: var(--win-hover-active-bgcolor) !important;
|
||||
--urlbar-box-focus-bgcolor: var(--win-hover-active-bgcolor) !important;
|
||||
--panel-banner-item-active-bgcolor: var(--win-hover-active-bgcolor) !important;
|
||||
--toolbarbutton-active-background: var(--win-hover-active-bgcolor) !important;
|
||||
--urlbar-box-active-bgcolor: var(--win-hover-active-bgcolor) !important;
|
||||
--autocomplete-popup-highlight-background: var(--win-hover-active-bgcolor) !important;
|
||||
|
||||
/* Disabled Background Color */
|
||||
--menuitem-disabled-hover-background-color: var(--win-disabled-bgcolor) !important;
|
||||
|
||||
/* Button Hover Color */
|
||||
--button-hover-bgcolor: var(--win-button-hover-bgcolor) !important;
|
||||
--checkbox-unchecked-hover-bgcolor: var(--win-button-hover-bgcolor) !important;
|
||||
--urlbar-box-hover-bgcolor: var(--win-button-hover-bgcolor) !important;
|
||||
--autocomplete-popup-hover-background: var(--win-button-hover-bgcolor) !important;
|
||||
|
||||
/* Button Border Color */
|
||||
--checkbox-border-color: var(--win-button-border) !important;
|
||||
--input-border-color: var(--win-button-border) !important;
|
||||
--autocomplete-popup-separator-color: var(--win-button-border) !important;
|
||||
|
||||
/* Accent Color */
|
||||
--button-primary-bgcolor: var(--win-accent-color) !important;
|
||||
--focus-outline-color: var(--win-accent-color) !important;
|
||||
--checkbox-checked-bgcolor: var(--win-accent-color) !important;
|
||||
|
||||
/* Accent Content Color */
|
||||
--toolbarbutton-icon-fill-attention: var(--win-accent-content-color) !important;
|
||||
--urlbar-popup-url-color: var(--win-accent-content-color) !important;
|
||||
--download-progress-fill-color: var(--win-accent-content-color) !important;
|
||||
|
||||
/* Accent Hover Color */
|
||||
--button-primary-hover-bgcolor: var(--win-accent-hover-color) !important;
|
||||
--checkbox-checked-hover-bgcolor: var(--win-accent-hover-color) !important;
|
||||
|
||||
/* Accent Hover Active Color */
|
||||
--button-primary-active-bgcolor: var(--win-accent-active-color) !important;
|
||||
--checkbox-checked-active-bgcolor: var(--win-accent-active-color) !important;
|
||||
|
||||
/* Error Color */
|
||||
--error-text-color: var(--win-error-color) !important;
|
||||
--input-error-border-color: var(--win-error-color) !important;
|
||||
|
||||
/* Others */
|
||||
--tab-line-color: Highlight !important;
|
||||
--tab-selected-bgcolor: unset !important;
|
||||
--tabs-border-color: transparent !important;
|
||||
--checkbox-checked-border-color: transparent !important;
|
||||
|
||||
/* Other Defaults */
|
||||
--arrowpanel-dimmed: color-mix(in srgb, currentColor 12%, transparent) !important;
|
||||
--arrowpanel-dimmed-further: color-mix(in srgb, currentColor 20%, transparent) !important;
|
||||
--arrowpanel-dimmed-even-further: color-mix(in srgb, currentColor 27%, transparent) !important;
|
||||
|
||||
--download-progress-flare-color: rgba(255, 255, 255, 0.75) !important;
|
||||
|
||||
--panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px var(--focus-outline-color) !important;
|
||||
}
|
||||
#navigator-toolbox:not(:-moz-lwtheme) {
|
||||
background: var(--lwt-accent-color) !important;
|
||||
}
|
||||
|
||||
/*- Separator --------------------------------------------------------------*/
|
||||
:root:not(:-moz-lwtheme) {
|
||||
--arrowpanel-border-color: var(--win-bgcolor) !important;
|
||||
--panel-separator-color: var(--win-bgcolor) !important;
|
||||
}
|
||||
:root[lwt-default-theme-in-dark-mode] {
|
||||
--arrowpanel-border-color: var(--win-border-color) !important;
|
||||
--panel-separator-color: var(--win-border-color) !important;
|
||||
}
|
||||
|
||||
/*- Menu -------------------------------------------------------------------*/
|
||||
html#main-window menupopup:not(:-moz-lwtheme) {
|
||||
--menu-color: var(--win-text-color) !important;
|
||||
--menu-background-color: var(--win-component-bgcolor) !important;
|
||||
--menu-border-color: var(--win-bgcolor) !important;
|
||||
--menuitem-hover-background-color: var(--win-hover-bgcolor) !important;
|
||||
--menu-disabled-color: var(--win-disabled-color) !important;
|
||||
--menuitem-disabled-hover-background-color: var(--win-disabled-bgcolor) !important;
|
||||
}
|
||||
|
||||
/*- Toolbar ----------------------------------------------------------------*/
|
||||
:root:not(:-moz-lwtheme) #titlebar,
|
||||
:root[lwt-default-theme-in-dark-mode] #titlebar {
|
||||
--button-hover-bgcolor: var(--win-sidebar-button-hover-bgcolor);
|
||||
--button-active-bgcolor: var(--win-sidebar-button-hover-active-bgcolor);
|
||||
--toolbarbutton-hover-background: var(--win-sidebar-button-hover-bgcolor);
|
||||
--toolbarbutton-active-background: var(--win-sidebar-button-hover-active-bgcolor);
|
||||
}
|
||||
|
||||
/*- Sidebar ----------------------------------------------------------------*/
|
||||
#sidebar-box:not([lwt-sidebar]) {
|
||||
appearance: none !important;
|
||||
}
|
||||
:root:not(:-moz-lwtheme) #sidebar-box,
|
||||
:root[lwt-default-theme-in-dark-mode] #sidebar-box {
|
||||
--sidebar-background-color: var(--win-sidebar-bgcolor) !important;
|
||||
--sidebar-text-color: var(--win-text-color) !important;
|
||||
--sidebar-border-color: var(--win-border-color) !important;
|
||||
}
|
||||
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
|
||||
.sidebar-panel[style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
|
||||
body[lwt-sidebar][style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
|
||||
.sidebar-panel[style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], /* Nightly */
|
||||
body[lwt-sidebar][style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"] {
|
||||
/* Only darkmode has more: --newtab-background-color-secondary: rgba(66, 65, 77, 1); */
|
||||
--lwt-sidebar-background-color: transparent !important;
|
||||
--lwt-sidebar-text-color: var(--win-text-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
:root:not(:-moz-lwtheme)
|
||||
.subviewbutton:not(#appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2),
|
||||
:root[lwt-default-theme-in-dark-mode]
|
||||
.subviewbutton:not(#appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2) {
|
||||
--button-hover-bgcolor: var(--win-hover-bgcolor) !important;
|
||||
--button-active-bgcolor: var(--win-hover-active-bgcolor) !important;
|
||||
}
|
||||
|
||||
/*- Others -----------------------------------------------------------------*/
|
||||
/* For overwrite */
|
||||
:root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]):not(:-moz-lwtheme), /* Legacy */
|
||||
:root:not(:-moz-lwtheme) {
|
||||
/* Light Theme */
|
||||
--lwt-accent-color: var(--win-bgcolor) !important;
|
||||
}
|
||||
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
|
||||
:root[lwt-default-theme-in-dark-mode][lwthemetextcolor="bright"] {
|
||||
--toolbar-bgcolor: var(--win-component-bgcolor) !important; /* Original: rgba(43, 42, 51, 1) */
|
||||
}
|
||||
}
|
||||
|
||||
#tabbrowser-tabs:not([movingtab])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-background[multiselected]:not([selected]):not(:-moz-lwtheme),
|
||||
:root[lwtheme-mozlightdark] /* Legacy */
|
||||
#tabbrowser-tabs:not([movingtab])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-background[multiselected]:not([selected]),
|
||||
:root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
|
||||
#tabbrowser-tabs:not([movingtab])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-background[multiselected]:not([selected]) {
|
||||
background-image: linear-gradient(
|
||||
color-mix(in srgb, currentColor 11%, transparent),
|
||||
color-mix(in srgb, currentColor 11%, transparent)
|
||||
),
|
||||
linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*= Windows10 - Titlebar accent color ========================================*/
|
||||
@media (-moz-windows-accent-color-in-titlebar) {
|
||||
/* Tab Bar */
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .titlebar-color,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .titlebar-color {
|
||||
color: -moz-accent-color-foreground;
|
||||
background-color: -moz-accent-color;
|
||||
}
|
||||
|
||||
:root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .toolbar-items,
|
||||
:root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .toolbar-items {
|
||||
--toolbarbutton-icon-fill: currentColor;
|
||||
--toolbarbutton-hover-background: color-mix(in srgb, -moz-accent-color-foreground 10%, transparent);
|
||||
--toolbarbutton-active-background: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
/*= GTK - URL View url accent color ==========================================*/
|
||||
@include OS($linux) {
|
||||
:root:not(:-moz-lwtheme) .urlbarView-url {
|
||||
--urlbar-popup-url-color: -moz-accent-color;
|
||||
}
|
||||
|
||||
/* Nightly Compatibility */
|
||||
:root:not(:-moz-lwtheme) #urlbar {
|
||||
--toolbar-field-focus-color: var(--toolbar-field-color); /* Nightly: rgba(0, 0, 0, 1) */
|
||||
--toolbar-field-focus-background-color: var(--toolbar-field-background-color); /* Nightly: white */
|
||||
}
|
||||
}
|
||||
|
||||
/*= Mac - Default like color =================================================*/
|
||||
@include OS($mac) {
|
||||
:root:not(:-moz-lwtheme),
|
||||
:root[lwt-default-theme-in-dark-mode] {
|
||||
/* Colors */
|
||||
--mac-text-color: -moz-dialogtext;
|
||||
--mac-disabled-color: GrayText;
|
||||
--mac-bgcolor: Window;
|
||||
--mac-selected-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog);
|
||||
--mac-field-bgcolor: Window;
|
||||
--mac-panel-bgcolor: Menu;
|
||||
--mac-sidebar-bgcolor: -moz-mac-source-list;
|
||||
--mac-sidebar-hover-bgcolor: color-mix(in srgb, ButtonFace 60%, var(--mac-sidebar-bgcolor));
|
||||
--mac-hover-bgcolor: Window;
|
||||
--mac-disabled-bgcolor: transparent;
|
||||
--mac-primary-button-color: -moz-accent-color-foreground; /* or -moz-mac-menutextselect */
|
||||
--mac-accent-color: -moz-accent-color; /* or LinkText */
|
||||
--mac-accent-content-color: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-accent-color);
|
||||
--mac-accent-hover-color: color-mix(
|
||||
in srgb,
|
||||
rgb(0, 0, 0) 10%,
|
||||
-moz-accent-color
|
||||
); /* or -moz-mac-menuselect, Highlight */
|
||||
--mac-accent-active-color: color-mix(in srgb, rgb(0, 0, 0) 20%, -moz-accent-color); /* or ActiveBorder */
|
||||
|
||||
/* Text, Icon Color */
|
||||
--menu-color: var(--mac-text-color) !important;
|
||||
--lwt-text-color: var(--mac-text-color) !important;
|
||||
--button-color: var(--mac-text-color) !important;
|
||||
--input-color: var(--mac-text-color) !important;
|
||||
--toolbar-color: var(--mac-text-color) !important;
|
||||
--toolbar-non-lwt-textcolor: var(--mac-text-color) !important;
|
||||
--toolbarbutton-icon-fill: var(--mac-text-color) !important;
|
||||
--toolbar-field-focus-color: var(--mac-text-color) !important;
|
||||
--urlbar-popup-action-color: var(--mac-text-color) !important;
|
||||
--toolbar-field-color: var(--mac-text-color) !important;
|
||||
--autocomplete-popup-highlight-color: var(--mac-text-color) !important;
|
||||
--tab-icon-overlay-fill: var(--mac-text-color) !important;
|
||||
--panel-banner-item-color: var(--mac-text-color) !important;
|
||||
--arrowpanel-color: var(--mac-text-color) !important;
|
||||
--autocomplete-popup-color: var(--mac-text-color) !important;
|
||||
--panel-shortcut-color: var(--mac-text-color) !important;
|
||||
--panel-description-color: var(--mac-text-color) !important;
|
||||
|
||||
/* Text Disabled Color */
|
||||
--menu-disabled-color: var(--mac-disabled-color) !important;
|
||||
--button-active-bgcolor: var(--mac-disabled-color) !important;
|
||||
--checkbox-unchecked-active-bgcolor: var(--mac-disabled-color) !important;
|
||||
--panel-disabled-color: var(--mac-disabled-color) !important;
|
||||
--download-progress-paused-color: var(--mac-disabled-color) !important;
|
||||
|
||||
/* Background Color */
|
||||
--lwt-accent-color: var(--mac-bgcolor) !important;
|
||||
--menu-background-color: var(--mac-bgcolor) !important;
|
||||
--autocomplete-popup-background: var(--mac-bgcolor) !important;
|
||||
|
||||
/* Selected Background Color */
|
||||
--toolbar-bgcolor: var(--mac-selected-bgcolor) !important;
|
||||
--toolbar-non-lwt-bgcolor: var(--mac-selected-bgcolor) !important;
|
||||
|
||||
/* Field Backround Color */
|
||||
--input-bgcolor: var(--mac-field-bgcolor) !important;
|
||||
--toolbar-field-background-color: var(--mac-field-bgcolor) !important;
|
||||
--tab-icon-overlay-stroke: var(--mac-field-bgcolor) !important;
|
||||
|
||||
/* Panel Backround Color */
|
||||
--arrowpanel-background: var(--mac-panel-bgcolor) !important;
|
||||
|
||||
/* Hover Background Color */
|
||||
--menuitem-hover-background-color: var(--mac-hover-bgcolor) !important;
|
||||
--toolbarbutton-hover-background: var(--mac-hover-bgcolor) !important;
|
||||
--panel-banner-item-hover-bgcolor: var(--mac-hover-bgcolor) !important;
|
||||
|
||||
--button-bgcolor: var(--mac-hover-bgcolor) !important;
|
||||
--checkbox-unchecked-bgcolor: var(--mac-hover-bgcolor) !important;
|
||||
--panel-banner-item-background-color: var(--mac-hover-bgcolor) !important;
|
||||
--urlbar-box-bgcolor: var(--mac-hover-bgcolor) !important;
|
||||
--urlbar-box-focus-bgcolor: var(--mac-hover-bgcolor) !important;
|
||||
--panel-banner-item-active-bgcolor: var(--mac-hover-bgcolor) !important;
|
||||
--toolbarbutton-active-background: var(--mac-hover-bgcolor) !important;
|
||||
--urlbar-box-active-bgcolor: var(--mac-hover-bgcolor) !important;
|
||||
--autocomplete-popup-highlight-background: var(--mac-hover-bgcolor) !important;
|
||||
|
||||
--button-hover-bgcolor: var(--mac-hover-bgcolor) !important;
|
||||
--checkbox-unchecked-hover-bgcolor: var(--mac-hover-bgcolor) !important;
|
||||
--urlbar-box-hover-bgcolor: var(--mac-hover-bgcolor) !important;
|
||||
--autocomplete-popup-hover-background: var(--mac-hover-bgcolor) !important;
|
||||
|
||||
/* Disabled Background Color */
|
||||
--menuitem-disabled-hover-background-color: var(--mac-disabled-bgcolor) !important;
|
||||
|
||||
/* Border Color */
|
||||
/*
|
||||
--menu-border-color: var(--mac-bgcolor) !important;
|
||||
--toolbar-field-border-color: var(--mac-bgcolor) !important;
|
||||
--arrowpanel-border-color: var(--mac-bgcolor) !important;
|
||||
--chrome-content-separator-color: var(--mac-bgcolor) !important;
|
||||
--toolbarseparator-color: var(--mac-bgcolor) !important;
|
||||
--panel-separator-color: var(--mac-bgcolor) !important;
|
||||
*/
|
||||
|
||||
/* Button Border Color */
|
||||
/*
|
||||
--tab-line-color: var(---mac-bgcolor) !important;
|
||||
--checkbox-border-color: var(--mac-bgcolor) !important;
|
||||
--input-border-color: var(--mac-bgcolor) !important;
|
||||
--autocomplete-popup-separator-color: var(--mac-bgcolor) !important;
|
||||
*/
|
||||
|
||||
/* Accent Color Forground */
|
||||
--button-primary-color: var(--mac-primary-button-color) !important;
|
||||
--checkbox-checked-color: var(--mac-primary-button-color) !important;
|
||||
|
||||
/* Accent Color */
|
||||
--button-primary-bgcolor: var(--mac-accent-color) !important;
|
||||
--focus-outline-color: var(--mac-accent-color) !important;
|
||||
--checkbox-checked-bgcolor: var(--mac-accent-color) !important;
|
||||
|
||||
/* Accent Content Color */
|
||||
--toolbarbutton-icon-fill-attention: var(--mac-accent-content-color) !important;
|
||||
--urlbar-popup-url-color: var(--mac-accent-content-color) !important;
|
||||
--download-progress-fill-color: var(--mac-accent-content-color) !important;
|
||||
|
||||
/* Accent Hover Color */
|
||||
--button-primary-hover-bgcolor: var(--mac-accent-hover-color) !important;
|
||||
--checkbox-checked-hover-bgcolor: var(--mac-accent-hover-color) !important;
|
||||
|
||||
/* Accent Hover Active Color */
|
||||
--button-primary-active-bgcolor: var(--mac-accent-active-color) !important;
|
||||
--checkbox-checked-active-bgcolor: var(--mac-accent-active-color) !important;
|
||||
|
||||
/* Error Color */
|
||||
/*
|
||||
--error-text-color: var(--win-error-color) !important;
|
||||
--input-error-border-color: var(--win-error-color) !important;
|
||||
*/
|
||||
|
||||
/* Others */
|
||||
--tab-selected-bgcolor: unset !important;
|
||||
--tabs-border-color: transparent !important;
|
||||
--checkbox-checked-border-color: transparent !important;
|
||||
|
||||
/* Other Defaults */
|
||||
--arrowpanel-dimmed: color-mix(in srgb, currentColor 12%, transparent) !important;
|
||||
--arrowpanel-dimmed-further: color-mix(in srgb, currentColor 20%, transparent) !important;
|
||||
--arrowpanel-dimmed-even-further: color-mix(in srgb, currentColor 27%, transparent) !important;
|
||||
|
||||
--download-progress-flare-color: rgba(255, 255, 255, 0.75) !important;
|
||||
|
||||
--panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px var(--focus-outline-color) !important;
|
||||
}
|
||||
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
|
||||
:root:not(:-moz-lwtheme),
|
||||
:root[lwt-default-theme-in-dark-mode] {
|
||||
--mac-field-bgcolor: Field;
|
||||
--mac-panel-bgcolor: -moz-CellHighlight;
|
||||
--mac-hover-bgcolor: ButtonFace;
|
||||
|
||||
--toolbar-field-focus-background-color: var(--mac-bgcolor) !important;
|
||||
--toolbar-field-background-color: var(--mac-sidebar-bgcolor) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*- Toolbar ----------------------------------------------------------------*/
|
||||
:root:not(:-moz-lwtheme) #navigator-toolbox,
|
||||
:root[lwt-default-theme-in-dark-mode] #navigator-toolbox {
|
||||
appearance: auto !important;
|
||||
}
|
||||
|
||||
:root:not(:-moz-lwtheme) #titlebar {
|
||||
--mac-hover-bgcolor: ButtonFace;
|
||||
}
|
||||
:root:not(:-moz-lwtheme) #titlebar,
|
||||
:root[lwt-default-theme-in-dark-mode] #titlebar {
|
||||
--button-hover-bgcolor: var(--mac-hover-bgcolor);
|
||||
--button-active-bgcolor: var(--mac-hover-bgcolor);
|
||||
--toolbarbutton-hover-background: var(--mac-hover-bgcolor);
|
||||
--toolbarbutton-active-background: var(--mac-hover-bgcolor);
|
||||
}
|
||||
|
||||
:root[lwt-default-theme-in-dark-mode] #urlbar {
|
||||
--autocomplete-popup-highlight-background: var(--mac-hover-bgcolor) !important;
|
||||
--autocomplete-popup-hover-background: var(--mac-hover-bgcolor) !important;
|
||||
}
|
||||
|
||||
/*- Sidebar ----------------------------------------------------------------*/
|
||||
#sidebar-box:not([lwt-sidebar]) {
|
||||
appearance: none !important;
|
||||
}
|
||||
:root:not(:-moz-lwtheme) #sidebar-box,
|
||||
:root[lwt-default-theme-in-dark-mode] #sidebar-box {
|
||||
--sidebar-background-color: var(--mac-sidebar-bgcolor) !important;
|
||||
--sidebar-text-color: var(--mac-text-color) !important;
|
||||
/* --sidebar-border-color: var(--win-sidebar-border-color) !important; */
|
||||
}
|
||||
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
|
||||
.sidebar-panel[style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
|
||||
body[lwt-sidebar][style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
|
||||
.sidebar-panel[style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], /* Nightly */
|
||||
body[lwt-sidebar][style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"] {
|
||||
/* Only darkmode has more: --newtab-background-color-secondary: rgba(66, 65, 77, 1); */
|
||||
--lwt-sidebar-background-color: transparent !important;
|
||||
--lwt-sidebar-text-color: var(--mac-text-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
:root[lwt-default-theme-in-dark-mode] #sidebarMenu-popup {
|
||||
--button-hover-bgcolor: var(--mac-sidebar-hover-bgcolor);
|
||||
--button-active-bgcolor: var(--mac-sidebar-hover-bgcolor);
|
||||
}
|
||||
|
||||
/*- Others -----------------------------------------------------------------*/
|
||||
/* For Overwrite */
|
||||
@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
|
||||
:root[lwt-default-theme-in-dark-mode][lwthemetextcolor="bright"] {
|
||||
--toolbar-bgcolor: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hard Coded */
|
||||
:root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy */
|
||||
#tabbrowser-tabs:not([movingtab])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-background[selected="true"],
|
||||
:root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode]
|
||||
#tabbrowser-tabs:not([movingtab])
|
||||
> #tabbrowser-arrowscrollbox
|
||||
> .tabbrowser-tab
|
||||
> .tab-stack
|
||||
> .tab-background[selected="true"] {
|
||||
background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
|
||||
}
|
||||
|
||||
:root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::before,
|
||||
:root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::after,
|
||||
:root:not([customizing="true"])[lwt-default-theme-in-dark-mode] tab[visuallyselected] > stack::before,
|
||||
:root:not([customizing="true"])[lwt-default-theme-in-dark-mode] tab[visuallyselected] > stack::after {
|
||||
fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important;
|
||||
}
|
||||
}
|
||||
@import "theme/system_default_theme";
|
||||
|
||||
/** Fully Theme Mode **********************************************************/
|
||||
/* Default Themes
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue