mirrors/Firefox-UI-Fix
1
Fork 0
mirror of https://github.com/black7375/Firefox-UI-Fix.git synced 2026-01-20 19:41:57 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions
Firefox-UI-Fix/src/theme/system_default_theme/_win10.scss
alstjr7375 aaac164e90
Some checks failed
CI / build (push) Has been cancelled
Details
fix: built-in theme selector #1148
2025-12-14 02:51:56 +09:00

410 lines
18 KiB
SCSS
Raw Blame History

/*= Windows10 - UWP like color ===============================================*/
@include OS($win10) {
@include not_lwtheme {
--win-text-color: rgba(0, 0, 0);
--win-bgcolor: rgb(204, 204, 204);
--win-disabled-color: rgb(145, 145, 145);
--win-disabled-bgcolor: transparent;
--win-hover-bgcolor: rgb(218, 218, 218); /* also button-bgcolor */
--win-hover-active-bgcolor: #c2c2c2; /* also button-hover-bgcolor */
--win-button-hover-bgcolor: rgba(218, 218, 218, 0.66);
--win-button-active-bgcolor: #aaaaaa;
--win-field-bgcolor: #ffffff;
--win-component-bgcolor: #f2f2f2;
--win-border-color: #8a8a8a;
--win-tab-separator-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-shortcut-text-color: #757575;
--win-error-color: #b31616;
--win-red-border-color: #ff4343;
@include AccentColor {
--win-accent-foreground-color: #{$accentTextColor};
--win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, #{$accentColor});
--win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, #{$accentColor});
--win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, #{$accentColor});
--win-accent-active-color: #{$accentColor};
}
@include Option("userChrome.compatibility.os.win11") {
--win-text-color: #1A1A1A;
--win-bgcolor: #E8E8E8;
--win-hover-bgcolor: #EAEAEA; /* also button-bgcolor */ // or #EFEFEF
--win-disabled-color: #9F9F9F;
--win-hover-active-bgcolor: #D9D9D9; /* also button-active-color */
--win-button-hover-bgcolor: #D9D9D9;
--win-button-active-bgcolor: rgba(46, 46, 46, 0.66);
--win-component-bgcolor: #F8F8F8;
--win-border-color: #E9E9E9;
--win-tab-separator-color: #DADADA;
--win-sidebar-bgcolor: #FFFFFF;
--win-button-border: var(--win-border-color);
--win11-chrome-separator-color: #D6D6D6;
--win11-tab-border-color: #DADADA;
}
}
@include Dark {
#{system-default-theme()} {
--win-text-color: #ffffff;
--win-bgcolor: #2b2b2b;
--win-disabled-color: #747474;
--win-disabled-bgcolor: transparent;
--win-hover-bgcolor: #2e2e2e; /* also button-bgcolor */
--win-hover-active-bgcolor: #454545; /* also button-active-color */
--win-button-hover-bgcolor: rgba(46, 46, 46, 0.66);
--win-button-active-bgcolor: #515151;
--win-field-bgcolor: #373737;
--win-component-bgcolor: #171717;
--win-border-color: #5b5b5b;
--win-tab-separator-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-shortcut-text-color: #adadad;
--win-error-color: #ffb900;
--win-red-border-color: #ff4343;
@include AccentColor {
--win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, #{$accentColor});
--win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, #{$accentColor});
--win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, #{$accentColor});
--win-accent-active-color: #{$accentColor};
}
@include Option("userChrome.compatibility.os.win11") {
--win-bgcolor: #202020;
--win-hover-bgcolor: #383838; /* also button-bgcolor */
--win-disabled-color: #797979;
--win-hover-active-bgcolor: #454545; /* also button-active-color */
--win-button-hover-bgcolor: #454545;
--win-button-active-bgcolor: rgba(46, 46, 46, 0.66);
--win-field-bgcolor: #232323;
--win-component-bgcolor: #2C2C2C;
--win-border-color: #3D3D3D;
--win-tab-separator-color: #323232;
--win-sidebar-bgcolor: var(--win-component-bgcolor);
--win-button-border: var(--win-border-color);
--win11-chrome-separator-color: #3A3A3A;
--win11-tab-border-color: #1D1D1D;
}
}
}
#{system-default-theme()} {
/* 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;
--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-shortcut-text-color) !important;
--panel-description-color: var(--win-shortcut-text-color) !important;
/* Title Background */
--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;
/* Border Color */
// --menu-border-color: var(--win-border-color) !important;
/* Separator */
--toolbarseparator-color: var(--win-tab-separator-color) !important;
/* Field Background 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;
/* Hover Background Color, Button Color */
--menuitem-hover-background-color: var(--win-hover-bgcolor) !important;
--toolbarbutton-hover-background: var(--win-hover-bgcolor) !important;
--button-bgcolor: var(--win-hover-bgcolor) !important;
--panel-banner-item-background-color: var(--win-hover-bgcolor) !important;
/* Hover Active, Button Hover Color */
--checkbox-unchecked-bgcolor: 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;
--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;
--panel-banner-item-hover-bgcolor: var(--win-hover-active-bgcolor) !important;
/* Button Hover Active Color */
--button-active-bgcolor: var(--win-button-active-bgcolor) !important;
--panel-banner-item-active-bgcolor: var(--win-button-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 Foreground Color */
--button-primary-color: var(--win-accent-foreground-color) !important;
--checkbox-checked-color: var(--win-accent-foreground-color) !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 */
@include AccentColor("Highlight") {
--tab-line-color: #{$accentColor} !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;
}
@include not_lwtheme {
#navigator-toolbox {
background: var(--lwt-accent-color) !important;
}
}
/*- Separator --------------------------------------------------------------*/
:root:is(#main-window)#{$not_lwtheme} {
--arrowpanel-border-color: var(--win-bgcolor) !important;
--panel-separator-color: var(--win-bgcolor) !important;
}
@include Dark {
:root:is(#main-window)#{$not_lwtheme},
:root[lwt-default-theme-in-dark-mode] {
--arrowpanel-border-color: var(--win-border-color) !important;
--panel-separator-color: var(--win-border-color) !important;
}
}
@include Option("userChrome.theme.system_default") {
@media (-moz-windows-accent-color-in-titlebar) {
:root:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme},
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) {
--toolbarseparator-color: color-mix(in srgb, currentColor 20%, transparent) !important; /* As default */
}
}
}
@include Option("userChrome.compatibility.os.win11") {
#{system-default-theme()} {
--chrome-content-separator-color: var(--win11-chrome-separator-color) !important;
}
#nav-bar {
--lwt-tabs-border-color: var(--win11-tab-border-color) !important;
}
}
/*- Proton Tab Selected ----------------------------------------------------*/
@include NotOption("userChrome.tab.color_like_toolbar") {
#{system-default-theme()} {
--win-proton-tab-selected-bgcolor: color-mix(in srgb, var(--win-bgcolor) 5%, var(--win-component-bgcolor));
}
:root#{$not_lwtheme} {
--tab-selected-color: var(--win-proton-tab-selected-bgcolor) !important;
}
:root[lwt-default-theme-in-dark-mode] {
--lwt-selected-tab-background-color: var(--win-proton-tab-selected-bgcolor) !important;
}
}
/*- Menu -------------------------------------------------------------------*/
@include not_lwtheme {
html#main-window menupopup {
--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 ----------------------------------------------------------------*/
#{selector.nest(system-default-theme(), "#titlebar")},
#{selector.nest(system-default-theme(), "#toolbar-menubar")},
#{selector.nest(system-default-theme(), "#TabsToolbar")} {
--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;
}
#{selector.nest(system-default-theme(), "#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;
}
@include Dark {
.sidebar-panel[style*="--lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
html[lwt-sidebar][style*="--lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
body[lwt-sidebar][style*="--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: var(--win-sidebar-bgcolor) !important;
--lwt-sidebar-text-color: var(--win-text-color) !important;
--panel-separator-color: var(--win-border-color) !important;
}
}
/*- Panel ------------------------------------------------------------------*/
#{selector.nest(system-default-theme(), ".subviewbutton")} {
--button-hover-bgcolor: var(--win-hover-active-bgcolor) !important;
--button-active-bgcolor: var(--win-button-active-bgcolor) !important;
}
$panelZoomButtons: "#appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomReset-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2";
#{selector.nest(system-default-theme(), "toolbarbutton.subviewbutton:not([disabled], [open], :active, #{$panelZoomButtons}, .unified-extensions-item-menu-button):is(:hover)")} {
background-color: var(--win-hover-bgcolor) !important;
}
#{selector.nest(system-default-theme(), "toolbarbutton.subviewbutton:not([disabled], #{$panelZoomButtons}):is([open], :hover:active)")} {
background-color: var(--win-hover-active-bgcolor) !important;
}
/*- Others -----------------------------------------------------------------*/
/* For overwrite */
:root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])#{$not_lwtheme}, /* Legacy */
:root#{$not_lwtheme} {
/* Light Theme */
--lwt-accent-color: var(--win-bgcolor) !important;
}
@include Dark {
:root[lwt-default-theme-in-dark-mode][lwthemetextcolor="bright"] {
--toolbar-bgcolor: var(--win-component-bgcolor) !important; /* Original: rgba(43, 42, 51, 1) */
}
}
:root#{$not_lwtheme}
#tabbrowser-tabs:not([movingtab])
> #pinned-tabs-container
> .tabbrowser-tab
> .tab-stack
> .tab-background[multiselected]:not([selected]),
:root[lwtheme-mozlightdark] /* Legacy */
#tabbrowser-tabs:not([movingtab])
> #pinned-tabs-container
> .tabbrowser-tab
> .tab-stack
> .tab-background[multiselected]:not([selected]),
#{built-in-default-theme()}
#tabbrowser-tabs:not([movingtab])
> #pinned-tabs-container
> .tabbrowser-tab
> .tab-stack
> .tab-background[multiselected]:not([selected]),
:root#{$not_lwtheme}
#tabbrowser-tabs:not([movingtab])
> #tabbrowser-arrowscrollbox
> .tabbrowser-tab
> .tab-stack
> .tab-background[multiselected]:not([selected]),
:root[lwtheme-mozlightdark] /* Legacy */
#tabbrowser-tabs:not([movingtab])
> #tabbrowser-arrowscrollbox
> .tabbrowser-tab
> .tab-stack
> .tab-background[multiselected]:not([selected]),
#{built-in-default-theme()}
#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:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme},
:root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) {
.titlebar-color,
.browser-titlebar {
@include AccentColor {
color: $accentTextColor !important;
background-color: $accentColor !important; // TODO: Use $accentBorder
}
}
.toolbar-items {
--toolbarbutton-icon-fill: currentColor;
@include AccentColor {
--toolbarbutton-hover-background: color-mix(in srgb, #{$accentTextColor} 10%, transparent);
--toolbarbutton-active-background: color-mix(in srgb, #{$accentTextColor} 15%, transparent);
}
}
}
}
Reference in a new issue View git blame Copy permalink