Fix: Theme - :root[lwtheme-mozlightdark] compatibility at nightly #288

Need testing
This commit is contained in:
alstjr7375 2021-12-13 10:58:00 +09:00
parent d41f51fd17
commit 9a45a46c2c

View file

@ -3,18 +3,21 @@
/** Default Thme - Contrast ***************************************************/
/*= Lightmode - Color darker =================================================*/
:root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) {
:root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]), /* Legacy */
:root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] {
--lwt-accent-color: rgb(229, 229, 235) !important; /* Original: rgb(240, 240, 244) */
}
@media not all and ((-moz-os-version: windows-win7) or (-moz-os-version: windows-win8) or (-moz-gtk-csd-available)) {
/* Level 4 */
:root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox {
:root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox, /* Legacy */
:root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] {
background-color: var(--lwt-accent-color) !important;
}
}
/*= Darkmode - Color lighter =================================================*/
:root[lwtheme-mozlightdark][lwthemetextcolor="bright"] {
:root[lwtheme-mozlightdark][lwthemetextcolor="bright"], /* Legacy */
:root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] {
--toolbar-bgcolor: rgba(43, 42, 51, 5) !important; /* Original: rgba(43, 42, 51, 1) */
}
@ -525,7 +528,9 @@
/*- Others -----------------------------------------------------------------*/
/* For overwrite */
:root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]):not(:-moz-lwtheme) {
: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) {
@ -539,12 +544,18 @@
> .tabbrowser-tab
> .tab-stack
> .tab-background[multiselected]:not([selected]):not(:-moz-lwtheme),
:root[lwtheme-mozlightdark]
:root[lwtheme-mozlightdark] /* Legacy */
#tabbrowser-tabs:not([movingtab])
> #tabbrowser-arrowscrollbox
> .tabbrowser-tab
> .tab-stack
> .tab-background[multiselected]:not([selected]) {
> .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)
@ -803,7 +814,13 @@
}
/* Hard Coded */
:root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode]
: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
@ -814,12 +831,8 @@
: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"])[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode]
tab[visuallyselected]
> stack::before,
:root:not([customizing="true"])[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode]
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;
}
}
@ -1035,8 +1048,10 @@ html#main-window menupopup {
}
/* Default theme color preservation */
:root[lwtheme-mozlightdark] menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]),
:root[lwtheme-mozlightdark] menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) {
:root[lwtheme-mozlightdark] menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), /* Legacy */
:root[lwtheme-mozlightdark] menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup), /* Legacy */
: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);"]) menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]),
: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);"]] menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) {
--menu-color: var(--toolbar-color, var(--in-content-page-color)) !important;
--arrowpanel-background: var(
--toolbar-bgcolor,