diff --git a/CREDITS b/CREDITS index d7b8fbf..2d7b29d 100644 --- a/CREDITS +++ b/CREDITS @@ -71,6 +71,9 @@ W: https://github.com/engelju N: kanlukasz W: https://github.com/kanlukasz +N: Kevin Ernst +W: https://github.com/ernstki + N: Mike-Kennelly W: https://github.com/Mike-Kennelly @@ -149,6 +152,9 @@ N: Filip Š E: filip.stamcar@hotmail.com W: https://www.filips.si/ +N: hdk5 +W: https://github.com/hdk5 + N: hellojaccc E: kim@taekyeong.me W: https://github.com/hellojaccc @@ -225,6 +231,9 @@ N: sean z E: ean@vsxd.com W: https://vsxd.com/ +N: Seth Kinast +W: https://github.com/sethkinast + N: Sylvain E: B00ze64@hotmail.com W: https://github.com/B00ze64 diff --git a/README.org b/README.org index 022eb03..e97ec87 100644 --- a/README.org +++ b/README.org @@ -221,6 +221,7 @@ Thanks to all sponsors & contributors to this project for providing help and dev - [[https://ko-fi.com/home/coffeeshop?txid=97e5fa0d-c73e-4308-a2fd-6b44b08cd828][Safira]] - [[https://ko-fi.com/duncanyoyo1][duncanyoyo1]] - [[https://ko-fi.com/home/coffeeshop?txid=a84c4838-f0e8-45b4-8b61-46684697e9b2][Minithra]] + - [[https://github.com/black7375/Firefox-UI-Fix/issues/1095#issuecomment-3682151859][Kevin Ernst]] - Private sponsors: 5 *Contributors* diff --git a/__tests__/theme.test.scss b/__tests__/theme.test.scss index 329a6d2..81ed02f 100644 --- a/__tests__/theme.test.scss +++ b/__tests__/theme.test.scss @@ -59,7 +59,7 @@ } } @include expect { - :root[lwtheme-mozlightdark], :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);"]) { + :root[lwtheme-mozlightdark], :root:is(:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [builtintheme][devtoolstheme=light]), :is([style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], [builtintheme][devtoolstheme=dark])) { @include example_property; } } @@ -74,7 +74,7 @@ } } @include expect { - :root[lwtheme-mozlightdark][inFullscreen=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);"])[inFullscreen=true] { + :root[lwtheme-mozlightdark][inFullscreen=true], :root:is(:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [builtintheme][devtoolstheme=light]), :is([style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], [builtintheme][devtoolstheme=dark]))[inFullscreen=true] { @include example_property; } } @@ -89,7 +89,7 @@ } } @include expect { - :root[lwtheme-mozlightdark] #navigator-toolbox, :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);"]) #navigator-toolbox { + :root[lwtheme-mozlightdark] #navigator-toolbox, :root:is(:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [builtintheme][devtoolstheme=light]), :is([style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], [builtintheme][devtoolstheme=dark])) #navigator-toolbox { @include example_property; } } @@ -106,7 +106,7 @@ } } @include expect { - :root[lwtheme-mozlightdark]:not([lwthemetextcolor=bright]), :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] { + :root[lwtheme-mozlightdark]:not([lwthemetextcolor=bright]), :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [builtintheme][devtoolstheme=light]) { @include example_property; } } @@ -121,7 +121,7 @@ } } @include expect { - :root[lwtheme-mozlightdark]:not([lwthemetextcolor=bright])[inFullscreen=true], :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][inFullscreen=true] { + :root[lwtheme-mozlightdark]:not([lwthemetextcolor=bright])[inFullscreen=true], :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [builtintheme][devtoolstheme=light])[inFullscreen=true] { @include example_property; } } @@ -136,7 +136,7 @@ } } @include expect { - :root[lwtheme-mozlightdark]:not([lwthemetextcolor=bright]) #navigator-toolbox, :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] #navigator-toolbox { + :root[lwtheme-mozlightdark]:not([lwthemetextcolor=bright]) #navigator-toolbox, :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [builtintheme][devtoolstheme=light]) #navigator-toolbox { @include example_property; } } @@ -153,7 +153,7 @@ } } @include expect { - :root[lwtheme-mozlightdark][lwthemetextcolor=bright], :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { + :root[lwtheme-mozlightdark][lwthemetextcolor=bright], :root:is([style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], [builtintheme][devtoolstheme=dark]) { @include example_property; } } @@ -168,7 +168,7 @@ } } @include expect { - :root[lwtheme-mozlightdark][lwthemetextcolor=bright][inFullscreen=true], :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][inFullscreen=true] { + :root[lwtheme-mozlightdark][lwthemetextcolor=bright][inFullscreen=true], :root:is([style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], [builtintheme][devtoolstheme=dark])[inFullscreen=true] { @include example_property; } } @@ -183,7 +183,7 @@ } } @include expect { - :root[lwtheme-mozlightdark][lwthemetextcolor=bright] #navigator-toolbox, :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] #navigator-toolbox { + :root[lwtheme-mozlightdark][lwthemetextcolor=bright] #navigator-toolbox, :root:is([style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], [builtintheme][devtoolstheme=dark]) #navigator-toolbox { @include example_property; } } diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 2fbb895..4cbc056 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5,24 +5,38 @@ @media -moz-pref("userChrome.theme.built_in_contrast") { /*= Lightmode - Color darker =================================================*/ :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]), - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] { + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) { --lwt-accent-color: rgb(229, 229, 235) !important; /* Original: rgb(240, 240, 244) */ } @media (-moz-platform: windows) { :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] #navigator-toolbox { + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + #navigator-toolbox { background-color: var(--lwt-accent-color) !important; } } @media -moz-pref("layout.css.osx-font-smoothing.enabled") { :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] #navigator-toolbox { + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + #navigator-toolbox { background-color: var(--lwt-accent-color) !important; } } /*= Darkmode - Color lighter =================================================*/ :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) { --toolbar-bgcolor: rgba(43, 42, 51, 5) !important; /* Original: rgba(43, 42, 51, 1) */ } } @@ -765,9 +779,16 @@ > .tabbrowser-tab > .tab-stack > .tab-background[multiselected]:not([selected]), + :root[lwtheme-mozlightdark], :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);"] + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ), + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) ) #tabbrowser-tabs:not([movingtab]) > #pinned-tabs-container @@ -786,9 +807,16 @@ > .tabbrowser-tab > .tab-stack > .tab-background[multiselected]:not([selected]), + :root[lwtheme-mozlightdark], :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);"] + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ), + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) ) #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox @@ -1099,7 +1127,10 @@ > .tabbrowser-tab > .tab-stack > .tab-background[selected], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #tabbrowser-tabs:not([movingtab]) > #pinned-tabs-container > .tabbrowser-tab @@ -1111,7 +1142,10 @@ > .tabbrowser-tab > .tab-stack > .tab-background[selected], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -1747,7 +1781,10 @@ --in-content-link-color-visited: var(--blue-40) !important; } :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) { --button-primary-color: var(--in-content-page-color) !important; --button-primary-bgcolor: var(--blue-60) !important; --button-primary-hover-bgcolor: var(--blue-50) !important; @@ -1760,7 +1797,11 @@ } @media -moz-pref("userChrome.decoration.download_panel") { :root[lwtheme-mozlightdark][lwthemetextcolor="bright"] #downloadsListBox, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] #downloadsListBox { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) + #downloadsListBox { --button-primary-bgcolor: var(--blue-30); --button-primary-hover-bgcolor: var(--blue-20); } @@ -1771,9 +1812,15 @@ @media -moz-pref("userChrome.theme.private") { :root[privatebrowsingmode="temporary"], :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"], - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"], + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"], :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] { --lwt-additional-images: none !important; --lwt-header-image: none !important; --lwt-tab-text: rgba(232, 224, 255) !important; @@ -1807,17 +1854,17 @@ [lwtheme] ) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"]:is( - :-moz-lwtheme, - [lwtheme] - ) + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"]:is( - :-moz-lwtheme, - [lwtheme] - ) + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox { --lwt-tabs-border-color: var(--focus-outline-color) !important; } @@ -1829,12 +1876,15 @@ [lwtheme] ) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"] #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"][lwtheme-image]:is( - :-moz-lwtheme, - [lwtheme] - ) + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"][lwtheme-image]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] #navigator-toolbox, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"][lwtheme-image]:is( @@ -1842,42 +1892,63 @@ [lwtheme] ) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"][lwtheme-image]:is( - :-moz-lwtheme, - [lwtheme] - ) + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"][lwtheme-image]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox { background-color: var(--lwt-accent-color) !important; } :root[privatebrowsingmode="temporary"] #TabsToolbar, :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"] #TabsToolbar, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"] #TabsToolbar, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] #TabsToolbar, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] #TabsToolbar { --lwt-tab-line-color: var(--focus-outline-color) !important; } :root[privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"], :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"], - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"], :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"] { --message-bar-text-color: var(--lwt-tab-text) !important; --in-content-page-color: var(--lwt-tab-text) !important; } :root[privatebrowsingmode="temporary"] menupopup, :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"] menupopup, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"] menupopup, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] menupopup, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] menupopup { --menuitem-hover-background-color: #413d54 !important; --menu-background-color: #1d1935 !important; @@ -2025,16 +2096,28 @@ */ } /* Default theme color preservation */ - :root[lwtheme-mozlightdark] menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), - :root[lwtheme-mozlightdark] menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup), + :root[lwtheme-mozlightdark], :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);"] + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ), + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) ) menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), + :root[lwtheme-mozlightdark], :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);"] + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ), + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) ) menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) { --menu-color: var(--toolbar-color, var(--in-content-page-color)) !important; @@ -3962,7 +4045,7 @@ @media -moz-pref("userChrome.rounding.square_tab") { :root { - --tab-border-radius: 0 !important; /* Original: 4px */ + --tab-border-radius: 0px !important; /* Original: 4px */ } } @media not -moz-pref("userChrome.rounding.square_tab") { @@ -3972,7 +4055,7 @@ } @media -moz-pref("userChrome.rounding.square_button") { :root { - --urlbar-icon-border-radius: 0 !important; /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */ + --urlbar-icon-border-radius: 0px !important; /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */ } .toolbarbutton-1, .toolbarbutton-icon, @@ -3983,7 +4066,7 @@ .urlbarView-action, toolbarbutton.bookmark-item:not(.subviewbutton), #sidebar-switcher-target { - --toolbarbutton-border-radius: 0; /* Original: 4px */ + --toolbarbutton-border-radius: 0px; /* Original: 4px */ } button, .close-icon, @@ -3992,7 +4075,7 @@ findbar toolbarbutton, .notification-button, #main-menubar > menu { - border-radius: 0 !important; + border-radius: 0px !important; } } @media -moz-pref("userChrome.rounding.square_tab") or -moz-pref("userChrome.rounding.square_button") { @@ -4004,13 +4087,13 @@ } @media -moz-pref("userChrome.rounding.square_panel") { :root { - --arrowpanel-border-radius: 0 !important; + --arrowpanel-border-radius: 0px !important; } } @media -moz-pref("userChrome.rounding.square_panelitem") { :root { - --arrowpanel-menuitem-border-radius: 0 !important; - --subviewbutton-border-radius: 0 !important; + --arrowpanel-menuitem-border-radius: 0px !important; + --subviewbutton-border-radius: 0px !important; } } @media -moz-pref("userChrome.rounding.square_menupopup") { @@ -4024,17 +4107,17 @@ xul|menulist > xul|menupopup xul|menu, xul|menulist > xul|menupopup xul|menuitem, .customization-uidensity-menuitem { - border-radius: 0 !important; + border-radius: 0px !important; } } @media -moz-pref("userChrome.rounding.square_infobox") { #sanitizeEverythingWarningBox { - border-radius: 0 !important; + border-radius: 0px !important; } } @media -moz-pref("userChrome.rounding.square_toolbar") { :root { - --uc-rounding-toolbar: 0; + --uc-rounding-toolbar: 0px; } .container.infobar, .container.infobar::before, @@ -4058,19 +4141,19 @@ #urlbar-input-container, #urlbar-background, #searchbar { - --toolbarbutton-border-radius: 0; + --toolbarbutton-border-radius: 0px; } } @media -moz-pref("userChrome.rounding.square_urlView_item") { .urlbarView-row, .urlbarView-row-inner { - --toolbarbutton-border-radius: 0; + --toolbarbutton-border-radius: 0px; } } @media -moz-pref("userChrome.rounding.square_checklabel") { input[type="checkbox"], .checkbox-check { - border-radius: 0 !important; + border-radius: 0px !important; } } @media -moz-pref("userChrome.rounding.square_dialog") { @@ -4539,7 +4622,8 @@ } } @media -moz-pref("userChrome.padding.urlView_expanding") or -moz-pref("userChrome.urlView.as_commandbar") { - #urlbar[breakout][breakout-extend] { + /* .browser-titlebar is Vertical Tabbar */ + #nav-bar:not(.browser-titlebar) #urlbar[breakout][breakout-extend] { top: calc(var(--urlbar-container-height) * 2 - var(--urlbar-height)) !important; width: var(--urlbar-width) !important; position: relative !important; @@ -4808,8 +4892,7 @@ padding: unset !important; padding-top: 4px !important; } -} -/*= Popup Panel - Reduce padding =============================================*/ +} /*= Popup Panel - Reduce padding =============================================*/ @media -moz-pref("userChrome.padding.popup_panel") { #protections-popup-main-header-label { height: unset !important; /* Original: 37.6px */ @@ -7228,14 +7311,37 @@ ); --uc-tab-shadow-color-bundle: var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))); } + #tabbrowser-tabs:not([noshadowfortests]) { + /* filter create new stacking context */ + } + #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { + box-shadow: unset !important; + filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); + } + #tabbrowser-tabs:not([noshadowfortests])[orient="vertical"] + .tab-background:is([selected], [multiselected]) + .tab-group-line { + height: calc(100% + 6px + var(--tab-block-margin)); + transform: translateY(-2px); + } + #tabbrowser-tabs:not([noshadowfortests])[expanded][orient="vertical"] + .tab-background:is([selected], [multiselected]) + .tab-group-line { + inset-inline-start: calc(-1 * var(--tab-inner-inline-margin)) !important; + } + #tabbrowser-tabs:not([noshadowfortests]):not([expanded])[orient="vertical"] + .tab-background:is([selected], [multiselected]) + .tab-group-line { + inset-inline-start: calc(-1 * var(--tab-inner-inline-margin) + 2px) !important; + } #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { box-shadow: unset !important; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); } :root:is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([selected], [multiselected]) @@ -7244,16 +7350,16 @@ filter: drop-shadow(0 0 1px var(--uc-tab-shadow-color, transparent)); } :root:is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected]:not(:focus), :root:is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[multiselected]:not([visuallyselected]) { @@ -7262,9 +7368,11 @@ /* For themes outside of Light and Dark (which are curated by Mozilla), show a thicker border around the tab to help themes that are dependent on tab_line to show the selected tab. */ :root:not( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] - ):is(:-moz-lwtheme, [lwtheme]) + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + ) #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) @@ -7275,9 +7383,11 @@ drop-shadow(1px -1px 0px var(--uc-tab-shadow-color, transparent)) drop-shadow(0 0 2px rgba(128, 128, 142, 0.5)); } :root:not( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) @@ -7384,18 +7494,18 @@ opacity: 0.3; } } - :root:not([customizing="true"])::is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + :root:not([customizing="true"]):is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] .tab-background::before, - :root:not([customizing="true"])::is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + :root:not([customizing="true"]):is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] @@ -7666,9 +7776,17 @@ border-radius: var(--tab-border-radius, 4px) var(--tab-border-radius, 4px) 0 0 !important; } :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]), - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] .tab-context-line, + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + .tab-context-line, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] .tab-context-line { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) + .tab-context-line { --tab-line-color: rgb(10, 132, 255); } .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line { @@ -7756,9 +7874,17 @@ } /* selected tab style */ :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]), - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] .tab-context-line, + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + .tab-context-line, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] .tab-context-line { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) + .tab-context-line { --tab-line-color: #45a1ff; } .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line::before { @@ -8512,6 +8638,18 @@ padding-inline-start: 3px !important; /* Original: 0px */ width: 19px !important; /* Redefine from 19px !important, Original: 17px = (width - padding) */ } + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-close-button { + padding: 2px !important; + width: 16px !important; + height: 16px !important; + background-image: linear-gradient(var(--close-button-extra-background)), + linear-gradient(var(--tab-selected-bgcolor, var(--toolbar-bgcolor))), linear-gradient(var(--toolbox-bgcolor)) !important; + } + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-close-button:-moz-window-inactive { + background-image: linear-gradient(var(--close-button-extra-background)), + linear-gradient(var(--tab-selected-bgcolor, var(--toolbar-bgcolor))), + linear-gradient(var(--toolbox-bgcolor-inactive)) !important; + } } /** Clipped tabs - Show close button at pinned tab ****************************/ @media -moz-pref("userChrome.tab.close_button_at_pinned") { @@ -8935,10 +9073,11 @@ display: block; position: absolute; top: 50%; + left: var(--tab-inline-padding); transform: translate(var(--uc-container-position-x), var(--uc-container-position-y)); /* Shape */ border-bottom: 2px solid var(--identity-icon-color); - width: calc(100% - 30px); + width: calc(100% - (var(--tab-inline-padding) + var(--tab-inner-inline-margin)) * 2); opacity: 0.75; } .tabbrowser-tab[visuallyselected] .tab-content::before { @@ -8949,7 +9088,7 @@ width: 25%; } .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { - width: calc(100% - 30px); + width: calc(100% - (var(--tab-inline-padding) + var(--tab-inner-inline-margin)) * 2); } #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { width: calc(100% - 33px); @@ -8963,12 +9102,17 @@ } } /* Pinned Tab */ - .tabbrowser-tab[pinned] .tab-content::before { + .tabbrowser-tab[pinned] .tab-content::before, + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-content::before { + left: unset; transform: translateY(var(--uc-container-position-y)); - width: 16px; + width: 16px !important; } @media -moz-pref("userChrome.tab.close_button_at_pinned") { - .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before { + .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before, + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[visuallyselected]:not([busy]):hover + .tab-content::before { opacity: 0; } } @@ -8976,12 +9120,28 @@ .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected])::before, - .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image][usercontextid] + > .tab-stack + > .tab-content[attention]:not([selected])::before, + .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before, + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[usercontextid] + > .tab-stack + > .tab-content[titlechanged]:not([selected])::before { opacity: 0; } /* Pinned Tab - Titlechanged Indicator override */ .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected]), - .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image][usercontextid] + > .tab-stack + > .tab-content[attention]:not([selected]), + .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[usercontextid] + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ --dotted-identity-image: radial-gradient( circle, @@ -8993,7 +9153,15 @@ background-position-x: var(--uc-titlechanged-container-position-x) !important; } .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]), - .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image] + > .tab-stack + > .tab-content[attention]:not([selected]), + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ background-position-y: top var(--uc-container-position-y) !important; } @@ -9001,25 +9169,51 @@ .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[attention]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[attention]:not([selected]), .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected]) { + > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { --uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px); } :root[uidensity="compact"] .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[attention]:not([selected]), + :root[uidensity="compact"] + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[attention]:not([selected]), :root[uidensity="compact"] .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected]) { + > .tab-content[pinned][titlechanged]:not([selected]), + :root[uidensity="compact"] + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { --uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px); } } @media -moz-pref("userChrome.tab.container.on_top") { .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]), - .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image] + > .tab-stack + > .tab-content[attention]:not([selected]), + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ background-position-y: top var(--uc-container-position-y-bottom) !important; } @@ -12471,12 +12665,72 @@ padding-inline-start: var(--menu-background-padding-default) !important; margin-left: 0 !important; } + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup:not(.in-menulist) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup:not(.in-menulist) + > menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #menu_FilePopup, + #menu_EditPopup, + #menu_viewPopup, + #goPopup, + #historyMenuPopup, + #bookmarksMenuPopup, + #menu_ProfilesPopup, + #menu_ToolsPopup, + #windowPopup, + #menu_HelpPopup, + #usercssloader-menupopup, + #sidebar-context-menu + ) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #menu_FilePopup, + #menu_EditPopup, + #menu_viewPopup, + #goPopup, + #historyMenuPopup, + #bookmarksMenuPopup, + #menu_ProfilesPopup, + #menu_ToolsPopup, + #windowPopup, + #menu_HelpPopup, + #usercssloader-menupopup, + #sidebar-context-menu + ) + menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) + > menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #context_sendTabToDevicePopupMenu, + #context-sendpagetodevice-popup, + #context-sendlinktodevice-popup, + #frame > menupopup, + #spell-dictionaries-menu, + #context-ask-chat > menupopup + ) + > menuitem:not([type="checkbox"][checked="true"], [type="radio"]) + > .menu-icon, + .openintabs-menuitem > .menu-icon, + #blockedPopupDontShowMessage > .menu-icon, + #BMB_viewBookmarksToolbar > .menu-icon, + #sidebarMenu-popup:is(menupopup) > .menu-icon, + #context_openANewTab.tabmix-newtab-menu-icon > .menu-icon { + display: none !important; + } .menupopup-arrowscrollbox { padding-inline: 0 !important; /* Original: padding: var(--panel-padding); --panel-padding-block: 4px; */ } - menupopup[needsgutter] > :is(menu, menuitem) > .menu-icon { - display: none !important; - } } @media (-moz-platform: windows), (-moz-gtk-csd-available) { @media -moz-pref("userChrome.theme.non_native_menu") { @@ -12548,12 +12802,72 @@ padding-inline-start: var(--menu-background-padding-default) !important; margin-left: 0 !important; } + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup:not(.in-menulist) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup:not(.in-menulist) + > menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #menu_FilePopup, + #menu_EditPopup, + #menu_viewPopup, + #goPopup, + #historyMenuPopup, + #bookmarksMenuPopup, + #menu_ProfilesPopup, + #menu_ToolsPopup, + #windowPopup, + #menu_HelpPopup, + #usercssloader-menupopup, + #sidebar-context-menu + ) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #menu_FilePopup, + #menu_EditPopup, + #menu_viewPopup, + #goPopup, + #historyMenuPopup, + #bookmarksMenuPopup, + #menu_ProfilesPopup, + #menu_ToolsPopup, + #windowPopup, + #menu_HelpPopup, + #usercssloader-menupopup, + #sidebar-context-menu + ) + menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) + > menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #context_sendTabToDevicePopupMenu, + #context-sendpagetodevice-popup, + #context-sendlinktodevice-popup, + #frame > menupopup, + #spell-dictionaries-menu, + #context-ask-chat > menupopup + ) + > menuitem:not([type="checkbox"][checked="true"], [type="radio"]) + > .menu-icon, + .openintabs-menuitem > .menu-icon, + #blockedPopupDontShowMessage > .menu-icon, + #BMB_viewBookmarksToolbar > .menu-icon, + #sidebarMenu-popup:is(menupopup) > .menu-icon, + #context_openANewTab.tabmix-newtab-menu-icon > .menu-icon { + display: none !important; + } .menupopup-arrowscrollbox { padding-inline: 0 !important; /* Original: padding: var(--panel-padding); --panel-padding-block: 4px; */ } - menupopup[needsgutter] > :is(menu, menuitem) > .menu-icon { - display: none !important; - } } } } @@ -14362,26 +14676,40 @@ @media (-moz-bool-pref: "userChrome.theme.built_in_contrast") { /*= Lightmode - Color darker =================================================*/ :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]), - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] { + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) { --lwt-accent-color: rgb(229, 229, 235) !important; /* Original: rgb(240, 240, 244) */ } /*= Darkmode - Color lighter =================================================*/ } @media (-moz-bool-pref: "userChrome.theme.built_in_contrast") and (-moz-platform: windows) { :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] #navigator-toolbox { + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + #navigator-toolbox { background-color: var(--lwt-accent-color) !important; } } @media (-moz-bool-pref: "userChrome.theme.built_in_contrast") and (-moz-bool-pref: "layout.css.osx-font-smoothing.enabled") { :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] #navigator-toolbox { + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + #navigator-toolbox { background-color: var(--lwt-accent-color) !important; } } @media (-moz-bool-pref: "userChrome.theme.built_in_contrast") { :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) { --toolbar-bgcolor: rgba(43, 42, 51, 5) !important; /* Original: rgba(43, 42, 51, 1) */ } } @@ -15151,9 +15479,16 @@ > .tabbrowser-tab > .tab-stack > .tab-background[multiselected]:not([selected]), + :root[lwtheme-mozlightdark], :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);"] + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ), + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) ) #tabbrowser-tabs:not([movingtab]) > #pinned-tabs-container @@ -15172,9 +15507,16 @@ > .tabbrowser-tab > .tab-stack > .tab-background[multiselected]:not([selected]), + :root[lwtheme-mozlightdark], :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);"] + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ), + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) ) #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox @@ -15497,7 +15839,10 @@ > .tabbrowser-tab > .tab-stack > .tab-background[selected], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #tabbrowser-tabs:not([movingtab]) > #pinned-tabs-container > .tabbrowser-tab @@ -15509,7 +15854,10 @@ > .tabbrowser-tab > .tab-stack > .tab-background[selected], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -16141,7 +16489,10 @@ --in-content-link-color-visited: var(--blue-40) !important; } :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) { --button-primary-color: var(--in-content-page-color) !important; --button-primary-bgcolor: var(--blue-60) !important; --button-primary-hover-bgcolor: var(--blue-50) !important; @@ -16155,7 +16506,11 @@ } @media (-moz-bool-pref: "userChrome.theme.proton_color") and (-moz-bool-pref: "userChrome.theme.proton_color.dark_blue_accent") and (prefers-color-scheme: dark) and (-moz-bool-pref: "userChrome.decoration.download_panel") { :root[lwtheme-mozlightdark][lwthemetextcolor="bright"] #downloadsListBox, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] #downloadsListBox { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) + #downloadsListBox { --button-primary-bgcolor: var(--blue-30); --button-primary-hover-bgcolor: var(--blue-20); } @@ -16163,9 +16518,15 @@ @media (-moz-bool-pref: "userChrome.theme.private") { :root[privatebrowsingmode="temporary"], :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"], - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"], + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"], :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] { --lwt-additional-images: none !important; --lwt-header-image: none !important; --lwt-tab-text: rgba(232, 224, 255) !important; @@ -16199,17 +16560,17 @@ [lwtheme] ) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"]:is( - :-moz-lwtheme, - [lwtheme] - ) + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"]:is( - :-moz-lwtheme, - [lwtheme] - ) + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox { --lwt-tabs-border-color: var(--focus-outline-color) !important; } @@ -16221,12 +16582,15 @@ [lwtheme] ) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"] #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"][lwtheme-image]:is( - :-moz-lwtheme, - [lwtheme] - ) + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"][lwtheme-image]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] #navigator-toolbox, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"][lwtheme-image]:is( @@ -16234,42 +16598,63 @@ [lwtheme] ) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"][lwtheme-image]:is( - :-moz-lwtheme, - [lwtheme] - ) + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"][lwtheme-image]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox { background-color: var(--lwt-accent-color) !important; } :root[privatebrowsingmode="temporary"] #TabsToolbar, :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"] #TabsToolbar, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"] #TabsToolbar, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] #TabsToolbar, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] #TabsToolbar { --lwt-tab-line-color: var(--focus-outline-color) !important; } :root[privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"], :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"], - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"], :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"] { --message-bar-text-color: var(--lwt-tab-text) !important; --in-content-page-color: var(--lwt-tab-text) !important; } :root[privatebrowsingmode="temporary"] menupopup, :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"] menupopup, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"] menupopup, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] menupopup, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] menupopup { --menuitem-hover-background-color: #413d54 !important; --menu-background-color: #1d1935 !important; @@ -16424,16 +16809,28 @@ } } @media (-moz-bool-pref: "userChrome.theme.fully_color") { - :root[lwtheme-mozlightdark] menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), - :root[lwtheme-mozlightdark] menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup), + :root[lwtheme-mozlightdark], :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);"] + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ), + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) ) menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), + :root[lwtheme-mozlightdark], :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);"] + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ), + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) ) menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) { --menu-color: var(--toolbar-color, var(--in-content-page-color)) !important; @@ -18494,7 +18891,7 @@ @media (-moz-bool-pref: "userChrome.rounding.square_tab") { :root { - --tab-border-radius: 0 !important; /* Original: 4px */ + --tab-border-radius: 0px !important; /* Original: 4px */ } } @media not (-moz-bool-pref: "userChrome.rounding.square_tab") { @@ -18504,7 +18901,7 @@ } @media (-moz-bool-pref: "userChrome.rounding.square_button") { :root { - --urlbar-icon-border-radius: 0 !important; /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */ + --urlbar-icon-border-radius: 0px !important; /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */ } .toolbarbutton-1, .toolbarbutton-icon, @@ -18515,7 +18912,7 @@ .urlbarView-action, toolbarbutton.bookmark-item:not(.subviewbutton), #sidebar-switcher-target { - --toolbarbutton-border-radius: 0; /* Original: 4px */ + --toolbarbutton-border-radius: 0px; /* Original: 4px */ } button, .close-icon, @@ -18524,7 +18921,7 @@ findbar toolbarbutton, .notification-button, #main-menubar > menu { - border-radius: 0 !important; + border-radius: 0px !important; } } @media (-moz-bool-pref: "userChrome.rounding.square_tab"), (-moz-bool-pref: "userChrome.rounding.square_button") { @@ -18536,13 +18933,13 @@ } @media (-moz-bool-pref: "userChrome.rounding.square_panel") { :root { - --arrowpanel-border-radius: 0 !important; + --arrowpanel-border-radius: 0px !important; } } @media (-moz-bool-pref: "userChrome.rounding.square_panelitem") { :root { - --arrowpanel-menuitem-border-radius: 0 !important; - --subviewbutton-border-radius: 0 !important; + --arrowpanel-menuitem-border-radius: 0px !important; + --subviewbutton-border-radius: 0px !important; } } @media (-moz-bool-pref: "userChrome.rounding.square_menupopup") { @@ -18556,17 +18953,17 @@ xul|menulist > xul|menupopup xul|menu, xul|menulist > xul|menupopup xul|menuitem, .customization-uidensity-menuitem { - border-radius: 0 !important; + border-radius: 0px !important; } } @media (-moz-bool-pref: "userChrome.rounding.square_infobox") { #sanitizeEverythingWarningBox { - border-radius: 0 !important; + border-radius: 0px !important; } } @media (-moz-bool-pref: "userChrome.rounding.square_toolbar") { :root { - --uc-rounding-toolbar: 0; + --uc-rounding-toolbar: 0px; } .container.infobar, .container.infobar::before, @@ -18590,19 +18987,19 @@ #urlbar-input-container, #urlbar-background, #searchbar { - --toolbarbutton-border-radius: 0; + --toolbarbutton-border-radius: 0px; } } @media (-moz-bool-pref: "userChrome.rounding.square_urlView_item") { .urlbarView-row, .urlbarView-row-inner { - --toolbarbutton-border-radius: 0; + --toolbarbutton-border-radius: 0px; } } @media (-moz-bool-pref: "userChrome.rounding.square_checklabel") { input[type="checkbox"], .checkbox-check { - border-radius: 0 !important; + border-radius: 0px !important; } } @media (-moz-bool-pref: "userChrome.rounding.square_dialog") { @@ -19087,7 +19484,8 @@ } } @media (-moz-bool-pref: "userChrome.padding.urlView_expanding"), (-moz-bool-pref: "userChrome.urlView.as_commandbar") { - #urlbar[breakout][breakout-extend] { + /* .browser-titlebar is Vertical Tabbar */ + #nav-bar:not(.browser-titlebar) #urlbar[breakout][breakout-extend] { top: calc(var(--urlbar-container-height) * 2 - var(--urlbar-height)) !important; width: var(--urlbar-width) !important; position: relative !important; @@ -22203,14 +22601,37 @@ ); --uc-tab-shadow-color-bundle: var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))); } + #tabbrowser-tabs:not([noshadowfortests]) { + /* filter create new stacking context */ + } + #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { + box-shadow: unset !important; + filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); + } + #tabbrowser-tabs:not([noshadowfortests])[orient="vertical"] + .tab-background:is([selected], [multiselected]) + .tab-group-line { + height: calc(100% + 6px + var(--tab-block-margin)); + transform: translateY(-2px); + } + #tabbrowser-tabs:not([noshadowfortests])[expanded][orient="vertical"] + .tab-background:is([selected], [multiselected]) + .tab-group-line { + inset-inline-start: calc(-1 * var(--tab-inner-inline-margin)) !important; + } + #tabbrowser-tabs:not([noshadowfortests]):not([expanded])[orient="vertical"] + .tab-background:is([selected], [multiselected]) + .tab-group-line { + inset-inline-start: calc(-1 * var(--tab-inner-inline-margin) + 2px) !important; + } #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { box-shadow: unset !important; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); } :root:is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([selected], [multiselected]) @@ -22219,16 +22640,16 @@ filter: drop-shadow(0 0 1px var(--uc-tab-shadow-color, transparent)); } :root:is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected]:not(:focus), :root:is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[multiselected]:not([visuallyselected]) { @@ -22237,9 +22658,11 @@ /* For themes outside of Light and Dark (which are curated by Mozilla), show a thicker border around the tab to help themes that are dependent on tab_line to show the selected tab. */ :root:not( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] - ):is(:-moz-lwtheme, [lwtheme]) + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + ) #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) @@ -22250,9 +22673,11 @@ drop-shadow(1px -1px 0px var(--uc-tab-shadow-color, transparent)) drop-shadow(0 0 2px rgba(128, 128, 142, 0.5)); } :root:not( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) @@ -22359,18 +22784,18 @@ } } @media (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner") and (not (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.wave")) and (not (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.australis")) and (not (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome")) and (not (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.chrome_legacy")) and (not (-moz-bool-pref: "userChrome.tab.bottom_rounded_corner.edge")) { - :root:not([customizing="true"])::is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + :root:not([customizing="true"]):is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] .tab-background::before, - :root:not([customizing="true"])::is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + :root:not([customizing="true"]):is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] @@ -22760,9 +23185,17 @@ border-radius: var(--tab-border-radius, 4px) var(--tab-border-radius, 4px) 0 0 !important; } :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]), - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] .tab-context-line, + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + .tab-context-line, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] .tab-context-line { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) + .tab-context-line { --tab-line-color: rgb(10, 132, 255); } .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line { @@ -22855,9 +23288,17 @@ } /* selected tab style */ :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]), - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] .tab-context-line, + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + .tab-context-line, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] .tab-context-line { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) + .tab-context-line { --tab-line-color: #45a1ff; } .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line::before { @@ -23656,6 +24097,20 @@ width: 19px !important; /* Redefine from 19px !important, Original: 17px = (width - padding) */ } } +@media (-moz-bool-pref: "userChrome.tab.close_button_at_hover") { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-close-button { + padding: 2px !important; + width: 16px !important; + height: 16px !important; + background-image: linear-gradient(var(--close-button-extra-background)), + linear-gradient(var(--tab-selected-bgcolor, var(--toolbar-bgcolor))), linear-gradient(var(--toolbox-bgcolor)) !important; + } + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-close-button:-moz-window-inactive { + background-image: linear-gradient(var(--close-button-extra-background)), + linear-gradient(var(--tab-selected-bgcolor, var(--toolbar-bgcolor))), + linear-gradient(var(--toolbox-bgcolor-inactive)) !important; + } +} /** Clipped tabs - Show close button at pinned tab ****************************/ @media (-moz-bool-pref: "userChrome.tab.close_button_at_pinned") and (not (-moz-bool-pref: "userChrome.tabbar.as_titlebar")) { #tabbrowser-tabs { @@ -24110,10 +24565,11 @@ display: block; position: absolute; top: 50%; + left: var(--tab-inline-padding); transform: translate(var(--uc-container-position-x), var(--uc-container-position-y)); /* Shape */ border-bottom: 2px solid var(--identity-icon-color); - width: calc(100% - 30px); + width: calc(100% - (var(--tab-inline-padding) + var(--tab-inner-inline-margin)) * 2); opacity: 0.75; } } @@ -24127,7 +24583,7 @@ width: 25%; } .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { - width: calc(100% - 30px); + width: calc(100% - (var(--tab-inline-padding) + var(--tab-inner-inline-margin)) * 2); } #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { width: calc(100% - 33px); @@ -24140,24 +24596,45 @@ } } @media (-moz-bool-pref: "userChrome.tab.container") and (not (-moz-bool-pref: "userChrome.tabbar.as_titlebar")) { - .tabbrowser-tab[pinned] .tab-content::before { + .tabbrowser-tab[pinned] .tab-content::before, + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-content::before { + left: unset; transform: translateY(var(--uc-container-position-y)); - width: 16px; + width: 16px !important; } } @media (-moz-bool-pref: "userChrome.tab.container") and (not (-moz-bool-pref: "userChrome.tabbar.as_titlebar")) and (-moz-bool-pref: "userChrome.tab.close_button_at_pinned") { - .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before { + .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before, + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[visuallyselected]:not([busy]):hover + .tab-content::before { opacity: 0; } } @media (-moz-bool-pref: "userChrome.tab.container") and (not (-moz-bool-pref: "userChrome.tabbar.as_titlebar")) and (not (-moz-bool-pref: "userChrome.tab.container.on_top")) { .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected])::before, - .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image][usercontextid] + > .tab-stack + > .tab-content[attention]:not([selected])::before, + .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before, + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[usercontextid] + > .tab-stack + > .tab-content[titlechanged]:not([selected])::before { opacity: 0; } /* Pinned Tab - Titlechanged Indicator override */ .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected]), - .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image][usercontextid] + > .tab-stack + > .tab-content[attention]:not([selected]), + .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[usercontextid] + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ --dotted-identity-image: radial-gradient( circle, @@ -24169,7 +24646,15 @@ background-position-x: var(--uc-titlechanged-container-position-x) !important; } .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]), - .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image] + > .tab-stack + > .tab-content[attention]:not([selected]), + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ background-position-y: top var(--uc-container-position-y) !important; } @@ -24177,25 +24662,51 @@ .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[attention]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[attention]:not([selected]), .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected]) { + > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { --uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px); } :root[uidensity="compact"] .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[attention]:not([selected]), + :root[uidensity="compact"] + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[attention]:not([selected]), :root[uidensity="compact"] .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected]) { + > .tab-content[pinned][titlechanged]:not([selected]), + :root[uidensity="compact"] + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { --uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px); } } @media (-moz-bool-pref: "userChrome.tab.container") and (not (-moz-bool-pref: "userChrome.tabbar.as_titlebar")) and (-moz-bool-pref: "userChrome.tab.container.on_top") { .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]), - .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image] + > .tab-stack + > .tab-content[attention]:not([selected]), + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ background-position-y: top var(--uc-container-position-y-bottom) !important; } @@ -28260,12 +28771,72 @@ padding-inline-start: var(--menu-background-padding-default) !important; margin-left: 0 !important; } + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup:not(.in-menulist) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup:not(.in-menulist) + > menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #menu_FilePopup, + #menu_EditPopup, + #menu_viewPopup, + #goPopup, + #historyMenuPopup, + #bookmarksMenuPopup, + #menu_ProfilesPopup, + #menu_ToolsPopup, + #windowPopup, + #menu_HelpPopup, + #usercssloader-menupopup, + #sidebar-context-menu + ) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #menu_FilePopup, + #menu_EditPopup, + #menu_viewPopup, + #goPopup, + #historyMenuPopup, + #bookmarksMenuPopup, + #menu_ProfilesPopup, + #menu_ToolsPopup, + #windowPopup, + #menu_HelpPopup, + #usercssloader-menupopup, + #sidebar-context-menu + ) + menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) + > menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #context_sendTabToDevicePopupMenu, + #context-sendpagetodevice-popup, + #context-sendlinktodevice-popup, + #frame > menupopup, + #spell-dictionaries-menu, + #context-ask-chat > menupopup + ) + > menuitem:not([type="checkbox"][checked="true"], [type="radio"]) + > .menu-icon, + .openintabs-menuitem > .menu-icon, + #blockedPopupDontShowMessage > .menu-icon, + #BMB_viewBookmarksToolbar > .menu-icon, + #sidebarMenu-popup:is(menupopup) > .menu-icon, + #context_openANewTab.tabmix-newtab-menu-icon > .menu-icon { + display: none !important; + } .menupopup-arrowscrollbox { padding-inline: 0 !important; /* Original: padding: var(--panel-padding); --panel-padding-block: 4px; */ } - menupopup[needsgutter] > :is(menu, menuitem) > .menu-icon { - display: none !important; - } } @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-platform: windows) and (-moz-bool-pref: "userChrome.theme.non_native_menu") and (-moz-gtk-csd-available), (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-gtk-csd-available) and (-moz-bool-pref: "userChrome.theme.non_native_menu") and (-moz-gtk-csd-available) { @@ -28332,12 +28903,72 @@ padding-inline-start: var(--menu-background-padding-default) !important; margin-left: 0 !important; } + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup:not(.in-menulist) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup:not(.in-menulist) + > menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #menu_FilePopup, + #menu_EditPopup, + #menu_viewPopup, + #goPopup, + #historyMenuPopup, + #bookmarksMenuPopup, + #menu_ProfilesPopup, + #menu_ToolsPopup, + #windowPopup, + #menu_HelpPopup, + #usercssloader-menupopup, + #sidebar-context-menu + ) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #menu_FilePopup, + #menu_EditPopup, + #menu_viewPopup, + #goPopup, + #historyMenuPopup, + #bookmarksMenuPopup, + #menu_ProfilesPopup, + #menu_ToolsPopup, + #windowPopup, + #menu_HelpPopup, + #usercssloader-menupopup, + #sidebar-context-menu + ) + menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) + > menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #context_sendTabToDevicePopupMenu, + #context-sendpagetodevice-popup, + #context-sendlinktodevice-popup, + #frame > menupopup, + #spell-dictionaries-menu, + #context-ask-chat > menupopup + ) + > menuitem:not([type="checkbox"][checked="true"], [type="radio"]) + > .menu-icon, + .openintabs-menuitem > .menu-icon, + #blockedPopupDontShowMessage > .menu-icon, + #BMB_viewBookmarksToolbar > .menu-icon, + #sidebarMenu-popup:is(menupopup) > .menu-icon, + #context_openANewTab.tabmix-newtab-menu-icon > .menu-icon { + display: none !important; + } .menupopup-arrowscrollbox { padding-inline: 0 !important; /* Original: padding: var(--panel-padding); --panel-padding-block: 4px; */ } - menupopup[needsgutter] > :is(menu, menuitem) > .menu-icon { - display: none !important; - } } @media (not (-moz-bool-pref: "userChrome.icon.disabled")) and (-moz-bool-pref: "userChrome.icon.menu") and (-moz-platform: windows) { :root { diff --git a/css/leptonChromeESR.css b/css/leptonChromeESR.css index bba6411..4d03477 100644 --- a/css/leptonChromeESR.css +++ b/css/leptonChromeESR.css @@ -5,24 +5,38 @@ @supports -moz-bool-pref("userChrome.theme.built_in_contrast") { /*= Lightmode - Color darker =================================================*/ :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]), - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] { + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) { --lwt-accent-color: rgb(229, 229, 235) !important; /* Original: rgb(240, 240, 244) */ } @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] #navigator-toolbox { + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + #navigator-toolbox { background-color: var(--lwt-accent-color) !important; } } @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] #navigator-toolbox { + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + #navigator-toolbox { background-color: var(--lwt-accent-color) !important; } } /*= Darkmode - Color lighter =================================================*/ :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) { --toolbar-bgcolor: rgba(43, 42, 51, 5) !important; /* Original: rgba(43, 42, 51, 1) */ } } @@ -988,9 +1002,16 @@ > .tabbrowser-tab > .tab-stack > .tab-background[multiselected]:not([selected]), + :root[lwtheme-mozlightdark], :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);"] + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ), + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) ) #tabbrowser-tabs:not([movingtab]) > #pinned-tabs-container @@ -1009,9 +1030,16 @@ > .tabbrowser-tab > .tab-stack > .tab-background[multiselected]:not([selected]), + :root[lwtheme-mozlightdark], :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);"] + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ), + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) ) #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox @@ -1322,7 +1350,10 @@ > .tabbrowser-tab > .tab-stack > .tab-background[selected], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #tabbrowser-tabs:not([movingtab]) > #pinned-tabs-container > .tabbrowser-tab @@ -1334,7 +1365,10 @@ > .tabbrowser-tab > .tab-stack > .tab-background[selected], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -1973,7 +2007,10 @@ --in-content-link-color-visited: var(--blue-40) !important; } :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) { --button-primary-color: var(--in-content-page-color) !important; --button-primary-bgcolor: var(--blue-60) !important; --button-primary-hover-bgcolor: var(--blue-50) !important; @@ -1986,7 +2023,11 @@ } @supports -moz-bool-pref("userChrome.decoration.download_panel") { :root[lwtheme-mozlightdark][lwthemetextcolor="bright"] #downloadsListBox, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] #downloadsListBox { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) + #downloadsListBox { --button-primary-bgcolor: var(--blue-30); --button-primary-hover-bgcolor: var(--blue-20); } @@ -1997,9 +2038,15 @@ @supports -moz-bool-pref("userChrome.theme.private") { :root[privatebrowsingmode="temporary"], :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"], - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"], + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"], :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] { --lwt-additional-images: none !important; --lwt-header-image: none !important; --lwt-tab-text: rgba(232, 224, 255) !important; @@ -2033,17 +2080,17 @@ [lwtheme] ) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"]:is( - :-moz-lwtheme, - [lwtheme] - ) + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"]:is( - :-moz-lwtheme, - [lwtheme] - ) + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox { --lwt-tabs-border-color: var(--focus-outline-color) !important; } @@ -2055,12 +2102,15 @@ [lwtheme] ) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"] #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"][lwtheme-image]:is( - :-moz-lwtheme, - [lwtheme] - ) + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"][lwtheme-image]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] #navigator-toolbox, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"][lwtheme-image]:is( @@ -2068,42 +2118,63 @@ [lwtheme] ) #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] #navigator-toolbox, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"][lwtheme-image]:is( - :-moz-lwtheme, - [lwtheme] - ) + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"][lwtheme-image]:is(:-moz-lwtheme, [lwtheme]) #navigator-toolbox { background-color: var(--lwt-accent-color) !important; } :root[privatebrowsingmode="temporary"] #TabsToolbar, :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"] #TabsToolbar, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"] #TabsToolbar, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] #TabsToolbar, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] #TabsToolbar { --lwt-tab-line-color: var(--focus-outline-color) !important; } :root[privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"], :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"], - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"], :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] notification-message[message-bar-type="infobar"] { --message-bar-text-color: var(--lwt-tab-text) !important; --in-content-page-color: var(--lwt-tab-text) !important; } :root[privatebrowsingmode="temporary"] menupopup, :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"])[privatebrowsingmode="temporary"] menupopup, - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + )[privatebrowsingmode="temporary"] menupopup, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"][privatebrowsingmode="temporary"] menupopup, - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][privatebrowsingmode="temporary"] + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + )[privatebrowsingmode="temporary"] menupopup { --menuitem-hover-background-color: #413d54 !important; --menu-background-color: #1d1935 !important; @@ -2253,16 +2324,28 @@ */ } /* Default theme color preservation */ - :root[lwtheme-mozlightdark] menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), - :root[lwtheme-mozlightdark] menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup), + :root[lwtheme-mozlightdark], :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);"] + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ), + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) ) menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), + :root[lwtheme-mozlightdark], :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);"] + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ), + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) ) menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) { --menu-color: var(--toolbar-color, var(--in-content-page-color)) !important; @@ -4283,7 +4366,7 @@ @supports -moz-bool-pref("userChrome.rounding.square_tab") { :root { - --tab-border-radius: 0 !important; /* Original: 4px */ + --tab-border-radius: 0px !important; /* Original: 4px */ } } @supports not -moz-bool-pref("userChrome.rounding.square_tab") { @@ -4293,7 +4376,7 @@ } @supports -moz-bool-pref("userChrome.rounding.square_button") { :root { - --urlbar-icon-border-radius: 0 !important; /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */ + --urlbar-icon-border-radius: 0px !important; /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */ } .toolbarbutton-1, .toolbarbutton-icon, @@ -4304,7 +4387,7 @@ .urlbarView-action, toolbarbutton.bookmark-item:not(.subviewbutton), #sidebar-switcher-target { - --toolbarbutton-border-radius: 0; /* Original: 4px */ + --toolbarbutton-border-radius: 0px; /* Original: 4px */ } button, .close-icon, @@ -4313,7 +4396,7 @@ findbar toolbarbutton, .notification-button, #main-menubar > menu { - border-radius: 0 !important; + border-radius: 0px !important; } } @supports -moz-bool-pref("userChrome.rounding.square_tab") or -moz-bool-pref("userChrome.rounding.square_button") { @@ -4325,13 +4408,13 @@ } @supports -moz-bool-pref("userChrome.rounding.square_panel") { :root { - --arrowpanel-border-radius: 0 !important; + --arrowpanel-border-radius: 0px !important; } } @supports -moz-bool-pref("userChrome.rounding.square_panelitem") { :root { - --arrowpanel-menuitem-border-radius: 0 !important; - --subviewbutton-border-radius: 0 !important; + --arrowpanel-menuitem-border-radius: 0px !important; + --subviewbutton-border-radius: 0px !important; } } @supports -moz-bool-pref("userChrome.rounding.square_menupopup") { @@ -4345,17 +4428,17 @@ xul|menulist > xul|menupopup xul|menu, xul|menulist > xul|menupopup xul|menuitem, .customization-uidensity-menuitem { - border-radius: 0 !important; + border-radius: 0px !important; } } @supports -moz-bool-pref("userChrome.rounding.square_infobox") { #sanitizeEverythingWarningBox { - border-radius: 0 !important; + border-radius: 0px !important; } } @supports -moz-bool-pref("userChrome.rounding.square_toolbar") { :root { - --uc-rounding-toolbar: 0; + --uc-rounding-toolbar: 0px; } .container.infobar, .container.infobar::before, @@ -4379,19 +4462,19 @@ #urlbar-input-container, #urlbar-background, #searchbar { - --toolbarbutton-border-radius: 0; + --toolbarbutton-border-radius: 0px; } } @supports -moz-bool-pref("userChrome.rounding.square_urlView_item") { .urlbarView-row, .urlbarView-row-inner { - --toolbarbutton-border-radius: 0; + --toolbarbutton-border-radius: 0px; } } @supports -moz-bool-pref("userChrome.rounding.square_checklabel") { input[type="checkbox"], .checkbox-check { - border-radius: 0 !important; + border-radius: 0px !important; } } @supports -moz-bool-pref("userChrome.rounding.square_dialog") { @@ -4885,7 +4968,8 @@ } } @supports -moz-bool-pref("userChrome.padding.urlView_expanding") or -moz-bool-pref("userChrome.urlView.as_commandbar") { - #urlbar[breakout][breakout-extend] { + /* .browser-titlebar is Vertical Tabbar */ + #nav-bar:not(.browser-titlebar) #urlbar[breakout][breakout-extend] { top: calc(var(--urlbar-container-height) * 2 - var(--urlbar-height)) !important; width: var(--urlbar-width) !important; position: relative !important; @@ -7665,14 +7749,37 @@ ); --uc-tab-shadow-color-bundle: var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))); } + #tabbrowser-tabs:not([noshadowfortests]) { + /* filter create new stacking context */ + } + #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { + box-shadow: unset !important; + filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); + } + #tabbrowser-tabs:not([noshadowfortests])[orient="vertical"] + .tab-background:is([selected], [multiselected]) + .tab-group-line { + height: calc(100% + 6px + var(--tab-block-margin)); + transform: translateY(-2px); + } + #tabbrowser-tabs:not([noshadowfortests])[expanded][orient="vertical"] + .tab-background:is([selected], [multiselected]) + .tab-group-line { + inset-inline-start: calc(-1 * var(--tab-inner-inline-margin)) !important; + } + #tabbrowser-tabs:not([noshadowfortests]):not([expanded])[orient="vertical"] + .tab-background:is([selected], [multiselected]) + .tab-group-line { + inset-inline-start: calc(-1 * var(--tab-inner-inline-margin) + 2px) !important; + } #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { box-shadow: unset !important; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); } :root:is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([selected], [multiselected]) @@ -7681,16 +7788,16 @@ filter: drop-shadow(0 0 1px var(--uc-tab-shadow-color, transparent)); } :root:is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected]:not(:focus), :root:is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[multiselected]:not([visuallyselected]) { @@ -7699,9 +7806,11 @@ /* For themes outside of Light and Dark (which are curated by Mozilla), show a thicker border around the tab to help themes that are dependent on tab_line to show the selected tab. */ :root:not( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] - ):is(:-moz-lwtheme, [lwtheme]) + :is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + ) #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) @@ -7712,9 +7821,11 @@ drop-shadow(1px -1px 0px var(--uc-tab-shadow-color, transparent)) drop-shadow(0 0 2px rgba(128, 128, 142, 0.5)); } :root:not( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + :is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) @@ -7821,18 +7932,18 @@ opacity: 0.3; } } - :root:not([customizing="true"])::is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + :root:not([customizing="true"]):is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] .tab-background::before, - :root:not([customizing="true"])::is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ):is(:-moz-lwtheme, [lwtheme]) + :root:not([customizing="true"]):is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] @@ -8109,9 +8220,17 @@ border-radius: var(--tab-border-radius, 4px) var(--tab-border-radius, 4px) 0 0 !important; } :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]), - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] .tab-context-line, + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + .tab-context-line, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] .tab-context-line { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) + .tab-context-line { --tab-line-color: rgb(10, 132, 255); } .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line { @@ -8199,9 +8318,17 @@ } /* selected tab style */ :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]), - :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"] .tab-context-line, + :root:is( + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [builtintheme][devtoolstheme="light"] + ) + .tab-context-line, :root[lwtheme-mozlightdark][lwthemetextcolor="bright"], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] .tab-context-line { + :root:is( + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], + [builtintheme][devtoolstheme="dark"] + ) + .tab-context-line { --tab-line-color: #45a1ff; } .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line::before { @@ -8971,6 +9098,18 @@ padding-inline-start: 3px !important; /* Original: 0px */ width: 19px !important; /* Redefine from 19px !important, Original: 17px = (width - padding) */ } + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-close-button { + padding: 2px !important; + width: 16px !important; + height: 16px !important; + background-image: linear-gradient(var(--close-button-extra-background)), + linear-gradient(var(--tab-selected-bgcolor, var(--toolbar-bgcolor))), linear-gradient(var(--toolbox-bgcolor)) !important; + } + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-close-button:-moz-window-inactive { + background-image: linear-gradient(var(--close-button-extra-background)), + linear-gradient(var(--tab-selected-bgcolor, var(--toolbar-bgcolor))), + linear-gradient(var(--toolbox-bgcolor-inactive)) !important; + } } /** Clipped tabs - Show close button at pinned tab ****************************/ @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") { @@ -9394,10 +9533,11 @@ display: block; position: absolute; top: 50%; + left: var(--tab-inline-padding); transform: translate(var(--uc-container-position-x), var(--uc-container-position-y)); /* Shape */ border-bottom: 2px solid var(--identity-icon-color); - width: calc(100% - 30px); + width: calc(100% - (var(--tab-inline-padding) + var(--tab-inner-inline-margin)) * 2); opacity: 0.75; } .tabbrowser-tab[visuallyselected] .tab-content::before { @@ -9408,7 +9548,7 @@ width: 25%; } .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { - width: calc(100% - 30px); + width: calc(100% - (var(--tab-inline-padding) + var(--tab-inner-inline-margin)) * 2); } #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { width: calc(100% - 33px); @@ -9422,12 +9562,17 @@ } } /* Pinned Tab */ - .tabbrowser-tab[pinned] .tab-content::before { + .tabbrowser-tab[pinned] .tab-content::before, + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-content::before { + left: unset; transform: translateY(var(--uc-container-position-y)); - width: 16px; + width: 16px !important; } @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") { - .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before { + .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before, + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[visuallyselected]:not([busy]):hover + .tab-content::before { opacity: 0; } } @@ -9435,12 +9580,28 @@ .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected])::before, - .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image][usercontextid] + > .tab-stack + > .tab-content[attention]:not([selected])::before, + .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before, + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[usercontextid] + > .tab-stack + > .tab-content[titlechanged]:not([selected])::before { opacity: 0; } /* Pinned Tab - Titlechanged Indicator override */ .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected]), - .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image][usercontextid] + > .tab-stack + > .tab-content[attention]:not([selected]), + .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[usercontextid] + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ --dotted-identity-image: radial-gradient( circle, @@ -9452,7 +9613,15 @@ background-position-x: var(--uc-titlechanged-container-position-x) !important; } .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]), - .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image] + > .tab-stack + > .tab-content[attention]:not([selected]), + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ background-position-y: top var(--uc-container-position-y) !important; } @@ -9460,25 +9629,51 @@ .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[attention]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[attention]:not([selected]), .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected]) { + > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { --uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px); } :root[uidensity="compact"] .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[attention]:not([selected]), + :root[uidensity="compact"] + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[attention]:not([selected]), :root[uidensity="compact"] .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected]) { + > .tab-content[pinned][titlechanged]:not([selected]), + :root[uidensity="compact"] + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { --uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px); } } @supports -moz-bool-pref("userChrome.tab.container.on_top") { .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]), - .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab[image] + > .tab-stack + > .tab-content[attention]:not([selected]), + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) + .tabbrowser-tab + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ background-position-y: top var(--uc-container-position-y-bottom) !important; } @@ -12960,12 +13155,72 @@ padding-inline-start: var(--menu-background-padding-default) !important; margin-left: 0 !important; } + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup:not(.in-menulist) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup:not(.in-menulist) + > menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #menu_FilePopup, + #menu_EditPopup, + #menu_viewPopup, + #goPopup, + #historyMenuPopup, + #bookmarksMenuPopup, + #menu_ProfilesPopup, + #menu_ToolsPopup, + #windowPopup, + #menu_HelpPopup, + #usercssloader-menupopup, + #sidebar-context-menu + ) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #menu_FilePopup, + #menu_EditPopup, + #menu_viewPopup, + #goPopup, + #historyMenuPopup, + #bookmarksMenuPopup, + #menu_ProfilesPopup, + #menu_ToolsPopup, + #windowPopup, + #menu_HelpPopup, + #usercssloader-menupopup, + #sidebar-context-menu + ) + menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) + > menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #context_sendTabToDevicePopupMenu, + #context-sendpagetodevice-popup, + #context-sendlinktodevice-popup, + #frame > menupopup, + #spell-dictionaries-menu, + #context-ask-chat > menupopup + ) + > menuitem:not([type="checkbox"][checked="true"], [type="radio"]) + > .menu-icon, + .openintabs-menuitem > .menu-icon, + #blockedPopupDontShowMessage > .menu-icon, + #BMB_viewBookmarksToolbar > .menu-icon, + #sidebarMenu-popup:is(menupopup) > .menu-icon, + #context_openANewTab.tabmix-newtab-menu-icon > .menu-icon { + display: none !important; + } .menupopup-arrowscrollbox { padding-inline: 0 !important; /* Original: padding: var(--panel-padding); --panel-padding-block: 4px; */ } - menupopup[needsgutter] > :is(menu, menuitem) > .menu-icon { - display: none !important; - } } @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8), @@ -13044,12 +13299,72 @@ padding-inline-start: var(--menu-background-padding-default) !important; margin-left: 0 !important; } + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup:not(.in-menulist) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + :not(menu, #ContentSelectDropdown, #context-navigation) + > menupopup:not(.in-menulist) + > menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #menu_FilePopup, + #menu_EditPopup, + #menu_viewPopup, + #goPopup, + #historyMenuPopup, + #bookmarksMenuPopup, + #menu_ProfilesPopup, + #menu_ToolsPopup, + #windowPopup, + #menu_HelpPopup, + #usercssloader-menupopup, + #sidebar-context-menu + ) + menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #menu_FilePopup, + #menu_EditPopup, + #menu_viewPopup, + #goPopup, + #historyMenuPopup, + #bookmarksMenuPopup, + #menu_ProfilesPopup, + #menu_ToolsPopup, + #windowPopup, + #menu_HelpPopup, + #usercssloader-menupopup, + #sidebar-context-menu + ) + menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is(#organizeButtonPopup, #maintenanceButtonPopup) + > menuitem:not(.menuitem-iconic, .bookmark-item, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is(#viewMenuPopup, #maintenanceButtonPopup) + > menu:not(.menu-iconic, .in-menulist, [checked="true"]) + > .menu-icon, + menupopup:is( + #context_sendTabToDevicePopupMenu, + #context-sendpagetodevice-popup, + #context-sendlinktodevice-popup, + #frame > menupopup, + #spell-dictionaries-menu, + #context-ask-chat > menupopup + ) + > menuitem:not([type="checkbox"][checked="true"], [type="radio"]) + > .menu-icon, + .openintabs-menuitem > .menu-icon, + #blockedPopupDontShowMessage > .menu-icon, + #BMB_viewBookmarksToolbar > .menu-icon, + #sidebarMenu-popup:is(menupopup) > .menu-icon, + #context_openANewTab.tabmix-newtab-menu-icon > .menu-icon { + display: none !important; + } .menupopup-arrowscrollbox { padding-inline: 0 !important; /* Original: padding: var(--panel-padding); --panel-padding-block: 4px; */ } - menupopup[needsgutter] > :is(menu, menuitem) > .menu-icon { - display: none !important; - } } } } diff --git a/install.sh b/install.sh index ab47194..c051d24 100755 --- a/install.sh +++ b/install.sh @@ -345,6 +345,7 @@ firefoxProfileDirPaths=( "${HOME}/.local/opt/tor-browser/app/Browser/TorBrowser/Data/Browser" "${HOME}/.var/app/org.mozilla.firefox/.mozilla/firefox" "${HOME}/.var/app/io.gitlab.librewolf-community/.librewolf" + "${HOME}/.var/app/net.waterfox.waterfox/.waterfox" "${HOME}/snap/firefox/common/.mozilla/firefox" "${HOME}/Library/Application Support/Firefox" "${HOME}/Library/Application Support/Waterfox" diff --git a/src/icons/layout/_menu.scss b/src/icons/layout/_menu.scss index 1807962..8dd626c 100644 --- a/src/icons/layout/_menu.scss +++ b/src/icons/layout/_menu.scss @@ -102,17 +102,17 @@ $_layoutCommonMenus: ( @include _layout_root_non_native; @include _layoutIconMenus { @include _layout_init_non_native(); + + // FF v141 #1128 + > .menu-icon { + display: none !important; + } } // FF v121 .menupopup-arrowscrollbox { padding-inline: 0 !important; /* Original: padding: var(--panel-padding); --panel-padding-block: 4px; */ } - - // FF v141 #1128 - menupopup[needsgutter] > :is(menu, menuitem) > .menu-icon { - display: none !important; - } } } diff --git a/src/padding/_index.scss b/src/padding/_index.scss index 32328f1..4b73926 100644 --- a/src/padding/_index.scss +++ b/src/padding/_index.scss @@ -50,7 +50,8 @@ } } @include Option("userChrome.padding.urlView_expanding", "userChrome.urlView.as_commandbar") { - #urlbar[breakout][breakout-extend] { + /* .browser-titlebar is Vertical Tabbar */ + #nav-bar:not(.browser-titlebar) #urlbar[breakout][breakout-extend] { top: calc(var(--urlbar-container-height) * 2 - var(--urlbar-height)) !important; width: var(--urlbar-width) !important; position: relative !important; diff --git a/src/rounding/_square.scss b/src/rounding/_square.scss index 3140184..a2a0341 100644 --- a/src/rounding/_square.scss +++ b/src/rounding/_square.scss @@ -1,6 +1,6 @@ @include Option("userChrome.rounding.square_tab") { :root { - --tab-border-radius: 0 !important; /* Original: 4px */ + --tab-border-radius: 0px !important; /* Original: 4px */ } } @include NotOption("userChrome.rounding.square_tab") { @@ -10,7 +10,7 @@ } @include Option("userChrome.rounding.square_button") { :root { - --urlbar-icon-border-radius: 0 !important; /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */ + --urlbar-icon-border-radius: 0px !important; /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */ } .toolbarbutton-1, @@ -22,7 +22,7 @@ .urlbarView-action, toolbarbutton.bookmark-item:not(.subviewbutton), #sidebar-switcher-target { - --toolbarbutton-border-radius: 0; /* Original: 4px */ + --toolbarbutton-border-radius: 0px; /* Original: 4px */ } button, @@ -32,7 +32,7 @@ findbar toolbarbutton, .notification-button, #main-menubar > menu { - border-radius: 0 !important; + border-radius: 0px !important; } } @include Option("userChrome.rounding.square_tab", "userChrome.rounding.square_button") { @@ -45,13 +45,13 @@ @include Option("userChrome.rounding.square_panel") { :root { - --arrowpanel-border-radius: 0 !important; + --arrowpanel-border-radius: 0px !important; } } @include Option("userChrome.rounding.square_panelitem") { :root { - --arrowpanel-menuitem-border-radius: 0 !important; - --subviewbutton-border-radius: 0 !important; + --arrowpanel-menuitem-border-radius: 0px !important; + --subviewbutton-border-radius: 0px !important; } } @@ -66,19 +66,19 @@ xul|menulist > xul|menupopup xul|menu, xul|menulist > xul|menupopup xul|menuitem, .customization-uidensity-menuitem { - border-radius: 0 !important; + border-radius: 0px !important; } } @include Option("userChrome.rounding.square_infobox") { #sanitizeEverythingWarningBox { - border-radius: 0 !important; + border-radius: 0px !important; } } @include Option("userChrome.rounding.square_toolbar") { :root { - --uc-rounding-toolbar: 0; + --uc-rounding-toolbar: 0px; } .container.infobar, @@ -105,20 +105,20 @@ #urlbar-input-container, #urlbar-background, #searchbar { - --toolbarbutton-border-radius: 0; + --toolbarbutton-border-radius: 0px; } } @include Option("userChrome.rounding.square_urlView_item") { .urlbarView-row, // At FF v111 #668 .urlbarView-row-inner { - --toolbarbutton-border-radius: 0; + --toolbarbutton-border-radius: 0px; } } @include Option("userChrome.rounding.square_checklabel") { input[type="checkbox"], .checkbox-check { - border-radius: 0 !important; + border-radius: 0px !important; } } diff --git a/src/tab/_container_tab.scss b/src/tab/_container_tab.scss index 311680b..4f132eb 100644 --- a/src/tab/_container_tab.scss +++ b/src/tab/_container_tab.scss @@ -35,11 +35,12 @@ display: block; position: absolute; top: 50%; + left: var(--tab-inline-padding); transform: translate(var(--uc-container-position-x), var(--uc-container-position-y)); /* Shape */ border-bottom: 2px solid var(--identity-icon-color); - width: calc(100% - 30px); + width: calc(100% - (var(--tab-inline-padding) + var(--tab-inner-inline-margin)) * 2); opacity: 0.75; } .tabbrowser-tab[visuallyselected] .tab-content::before { @@ -51,7 +52,7 @@ width: 25%; } .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { - width: calc(100% - 30px); + width: calc(100% - (var(--tab-inline-padding) + var(--tab-inner-inline-margin)) * 2); } #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { width: calc(100% - 33px); @@ -67,12 +68,15 @@ } /* Pinned Tab */ -.tabbrowser-tab[pinned] .tab-content::before { +.tabbrowser-tab[pinned] .tab-content::before, +#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-content::before { + left: unset; transform: translateY(var(--uc-container-position-y)); - width: 16px; + width: 16px !important; } @include Option("userChrome.tab.close_button_at_pinned") { - .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before { + .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before, + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[visuallyselected]:not([busy]):hover .tab-content::before { opacity: 0; } // Don't hide at userChrome.tab.close_button_at_pinned.background @@ -80,13 +84,17 @@ @include NotOption("userChrome.tab.container.on_top") { .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected])::before, - .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image][usercontextid] > .tab-stack > .tab-content[attention]:not([selected])::before, + .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected])::before, + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[titlechanged]:not([selected])::before { opacity: 0; } /* Pinned Tab - Titlechanged Indicator override */ .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected]), - .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image][usercontextid] > .tab-stack > .tab-content[attention]:not([selected]), + .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[titlechanged]:not([selected]) { /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ --dotted-identity-image: radial-gradient( circle, @@ -99,7 +107,9 @@ } .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]), - .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([selected]), + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab > .tab-stack > .tab-content[titlechanged]:not([selected]) { /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ background-position-y: top var(--uc-container-position-y) !important; } @@ -108,26 +118,42 @@ .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[attention]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[attention]:not([selected]), .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected]) { + > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { --uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px); } :root[uidensity="compact"] .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[attention]:not([selected]), + :root[uidensity="compact"] + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image][usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[attention]:not([selected]), :root[uidensity="compact"] .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected]) { + > .tab-content[pinned][titlechanged]:not([selected]), + :root[uidensity="compact"] + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[titlechanged]:not([selected]) { --uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px); } } @include Option("userChrome.tab.container.on_top") { .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]), - .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) { + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([selected]), + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]), + #tabbrowser-tabs[orient="vertical"]:not([expanded]) .tabbrowser-tab > .tab-stack > .tab-content[titlechanged]:not([selected]) { /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ background-position-y: top var(--uc-container-position-y-bottom) !important; } diff --git a/src/tab/clipped_tab/_show_close_button_at_hover.scss b/src/tab/clipped_tab/_show_close_button_at_hover.scss index 34bda20..a1a44f4 100644 --- a/src/tab/clipped_tab/_show_close_button_at_hover.scss +++ b/src/tab/clipped_tab/_show_close_button_at_hover.scss @@ -79,3 +79,14 @@ padding-inline-start: 3px !important; /* Original: 0px */ width: 19px !important; /* Redefine from 19px !important, Original: 17px = (width - padding) */ } + +#tabbrowser-tabs[orient="vertical"]:not([expanded]) .tab-close-button { + padding: 2px !important; + width: 16px !important; + height: 16px !important; + background-image: linear-gradient(var(--close-button-extra-background)), linear-gradient(var(--tab-selected-bgcolor, var(--toolbar-bgcolor))), linear-gradient(var(--toolbox-bgcolor)) !important; + + &:-moz-window-inactive { + background-image: linear-gradient(var(--close-button-extra-background)), linear-gradient(var(--tab-selected-bgcolor, var(--toolbar-bgcolor))), linear-gradient(var(--toolbox-bgcolor-inactive)) !important; + } +} \ No newline at end of file diff --git a/src/tab/selected_tab/_bottom_rounded_corner.scss b/src/tab/selected_tab/_bottom_rounded_corner.scss index 533f73a..de1333f 100644 --- a/src/tab/selected_tab/_bottom_rounded_corner.scss +++ b/src/tab/selected_tab/_bottom_rounded_corner.scss @@ -94,8 +94,7 @@ } } - &::is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])#{$lwtheme} - #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] .tab-background { + &#{$builtInDarkStyle} #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] .tab-background { &::before, &::after { /* As Selected Tab - Box Shadow */ diff --git a/src/tab/selected_tab/_box_shadow.scss b/src/tab/selected_tab/_box_shadow.scss index 86a07ed..fb9b3b0 100644 --- a/src/tab/selected_tab/_box_shadow.scss +++ b/src/tab/selected_tab/_box_shadow.scss @@ -12,12 +12,30 @@ $ucTabBackgroundShadowHard: drop-shadow(-1px 0px 0px var(--uc-tab-shadow-color, --uc-tab-shadow-color-bundle: var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))); } +#tabbrowser-tabs:not([noshadowfortests]) { + .tab-background:is([selected], [multiselected]) { + box-shadow: unset !important; + filter: $ucTabBasicShadow; + } + + /* filter create new stacking context */ + &[orient="vertical"] .tab-background:is([selected], [multiselected]) .tab-group-line { + height: calc(100% + 6px + var(--tab-block-margin)); // 6px: .tab-group-line's inset-block size + transform: translateY(-2px); // .tab-group-line 's inset-inline-start size + } + &[expanded][orient="vertical"] .tab-background:is([selected], [multiselected]) .tab-group-line { + inset-inline-start: calc(-1 * var(--tab-inner-inline-margin)) !important; + } + &:not([expanded])[orient="vertical"] .tab-background:is([selected], [multiselected]) .tab-group-line { + inset-inline-start: calc(-1 * var(--tab-inner-inline-margin) + 2px) !important; + } +} #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { box-shadow: unset !important; filter: $ucTabBasicShadow; } -:root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])#{$lwtheme} +:root#{$builtInDarkStyle} #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab { &:is([selected], [multiselected]) { > .tab-stack @@ -37,7 +55,7 @@ $ucTabBackgroundShadowHard: drop-shadow(-1px 0px 0px var(--uc-tab-shadow-color, /* For themes outside of Light and Dark (which are curated by Mozilla), show a thicker border around the tab to help themes that are dependent on tab_line to show the selected tab. */ -:root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"])#{$lwtheme} +:root:not(#{$builtInLightStyle}) #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) @@ -48,7 +66,7 @@ $ucTabBackgroundShadowHard: drop-shadow(-1px 0px 0px var(--uc-tab-shadow-color, $ucTabAdditionalShadow; } -:root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])#{$lwtheme} +:root:not(#{$builtInDarkStyle}) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) diff --git a/src/theme/_fully_color.scss b/src/theme/_fully_color.scss index 2808b0a..03ee6a1 100644 --- a/src/theme/_fully_color.scss +++ b/src/theme/_fully_color.scss @@ -100,10 +100,8 @@ html#main-window menupopup:not(.in-menulist) { } /* Default theme color preservation */ -: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) { +#{built-in-default-theme()} menupopup:not(#BMB_bookmarksPopup, [placespopup="true"]), +#{built-in-default-theme()} menupopup:is(#goPopup, #historyMenuPopup, #bookmarksMenuPopup) { --menu-color: var(--toolbar-color, var(--in-content-page-color)) !important; --arrowpanel-background: var( --toolbar-bgcolor, diff --git a/src/theme/system_default_theme/_mac.scss b/src/theme/system_default_theme/_mac.scss index 8f34b91..b32aa10 100644 --- a/src/theme/system_default_theme/_mac.scss +++ b/src/theme/system_default_theme/_mac.scss @@ -247,7 +247,7 @@ > .tabbrowser-tab > .tab-stack > .tab-background[selected], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode] + :root#{$builtInDarkStyle} #tabbrowser-tabs:not([movingtab]) > #pinned-tabs-container > .tabbrowser-tab @@ -259,7 +259,7 @@ > .tabbrowser-tab > .tab-stack > .tab-background[selected], - :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"][lwt-default-theme-in-dark-mode] + :root#{$builtInDarkStyle} #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab diff --git a/src/theme/system_default_theme/_win10.scss b/src/theme/system_default_theme/_win10.scss index 0b5f1b4..42167db 100644 --- a/src/theme/system_default_theme/_win10.scss +++ b/src/theme/system_default_theme/_win10.scss @@ -354,7 +354,7 @@ > .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);"]) + #{built-in-default-theme()} #tabbrowser-tabs:not([movingtab]) > #pinned-tabs-container > .tabbrowser-tab @@ -372,7 +372,7 @@ > .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);"]) + #{built-in-default-theme()} #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab diff --git a/src/utils/_theme.scss b/src/utils/_theme.scss index 509baf9..2df04b2 100644 --- a/src/utils/_theme.scss +++ b/src/utils/_theme.scss @@ -9,13 +9,13 @@ $_lightText: '[lwthemetextcolor="bright"]'; $_darkText: ":not(#{$_lightText})"; $_sysDark: "[lwt-default-theme-in-dark-mode]"; -$_lightStyle: '[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"]'; -$_darkStyle: '[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]'; +$builtInLightStyle: ':is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [builtintheme][devtoolstheme="light"])'; +$builtInDarkStyle: ':is([style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"], [builtintheme][devtoolstheme="dark"])'; //== Mixin ===================================================================== @function built-in-default-theme() { $oldDefault: selector.append(":root", $_lightdark); - $newDefault: selector.append(":root", ":is(#{$_lightStyle}, #{$_darkStyle})"); + $newDefault: selector.append(":root", ":is(#{$builtInLightStyle}, #{$builtInDarkStyle})"); @return "#{$oldDefault}, #{$newDefault}"; } @@ -29,14 +29,14 @@ $_darkStyle: '[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rg @function built-in-light-theme() { $oldLight: selector.append(":root", $_lightdark, $_darkText); - $newLight: selector.append(":root", $_lightStyle); + $newLight: selector.append(":root", $builtInLightStyle); @return "#{$oldLight}, #{$newLight}"; } @function built-in-dark-theme() { $oldDark: selector.append(":root", $_lightdark, $_lightText); - $newDark: selector.append(":root", $_darkStyle); + $newDark: selector.append(":root", $builtInDarkStyle); @return "#{$oldDark}, #{$newDark}"; }