diff --git a/userChrome.css b/userChrome.css index 71518f3..41966b5 100644 --- a/userChrome.css +++ b/userChrome.css @@ -57,23 +57,23 @@ /*= Remove Tab Border ========================================================*/ @supports -moz-bool-pref("userChrome.tab.connect_to_window") { /* TARGET: original, photon */ -/* Light Theme */ -#TabsToolbar:not([brighttext]) - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) - > .tab-stack - > .tab-background { - border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */ -} + /* Light Theme */ + #TabsToolbar:not([brighttext]) + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background { + border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */ + } -/* Dark Theme */ -#TabsToolbar[brighttext] - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) - > .tab-stack - > .tab-background:-moz-lwtheme { - border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)) */ -} + /* Dark Theme */ + #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + > .tab-stack + > .tab-background:-moz-lwtheme { + border: unset !important; /* Nigtly 96: 1px solid var(--tab-line-color, rgba(128,128,142,0.9)) */ + } } /*= Light Weight Theme =======================================================*/ @@ -823,7 +823,7 @@ /* Hard Coded */ @supports -moz-bool-pref("userChrome.tab.connect_to_window") { - :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy */ + :root[lwtheme-mozlightdark][lwt-default-theme-in-dark-mode] /* Legacy */ #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab @@ -835,8 +835,8 @@ > .tabbrowser-tab > .tab-stack > .tab-background[selected="true"] { - background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; - } + background: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; + } } :root:not([customizing="true"]):not(:-moz-lwtheme) tab[visuallyselected] > stack::before, @@ -2708,11 +2708,11 @@ menuitem.openintabs-menuitem, /** Reduce Padding ************************************************************/ /*= Root - Reduce Padding ====================================================*/ @supports -moz-bool-pref("userChrome.tab.original") { -:root { - /* Tab Bar */ - --proton-tab-block-margin: 2px !important; /* Original: 4px, Legacy */ - --tab-block-margin: 2px !important; /* New version of --proton-tab-block-margin */ -} + :root { + /* Tab Bar */ + --proton-tab-block-margin: 2px !important; /* Original: 4px, Legacy */ + --tab-block-margin: 2px !important; /* New version of --proton-tab-block-margin */ + } } :root { --inline-tab-padding: 6px !important; /* Original: 8px */ @@ -2835,19 +2835,19 @@ menuitem.openintabs-menuitem, } @supports -moz-bool-pref("userChrome.tab.original") { -.toolbar-items, -.tabbrowser-tab { - --tabbar-max-height: 38px; - max-height: calc(var(--tabbar-max-height) + var(--space-above-tabbar)); -} -:root[uidensity="compact"] .toolbar-items, -:root[uidensity="compact"] .tabbrowser-tab { - --tabbar-max-height: 36px; -} -:root[uidensity="touch"] .toolbar-items, -:root[uidensity="touch"] .tabbrowser-tab { - --tabbar-max-height: 45px; -} + .toolbar-items, + .tabbrowser-tab { + --tabbar-max-height: 38px; + max-height: calc(var(--tabbar-max-height) + var(--space-above-tabbar)); + } + :root[uidensity="compact"] .toolbar-items, + :root[uidensity="compact"] .tabbrowser-tab { + --tabbar-max-height: 36px; + } + :root[uidensity="touch"] .toolbar-items, + :root[uidensity="touch"] .tabbrowser-tab { + --tabbar-max-height: 45px; + } } /* Scroll Button - Size Fix */ @@ -3139,45 +3139,45 @@ menupopup > menu { /** Tab Bar - Connect to window ***********************************************/ @supports -moz-bool-pref("userChrome.tab.connect_to_window") { -.tab-background { - border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important; - margin-bottom: 0px !important; -} + .tab-background { + border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important; + margin-bottom: 0px !important; + } -.tab-content { - margin-top: var(--tab-block-margin); -} + .tab-content { + margin-top: var(--tab-block-margin); + } -.tab-stack { - margin-top: 0px !important; - margin-bottom: 0px !important; -} + .tab-stack { + margin-top: 0px !important; + margin-bottom: 0px !important; + } -/* Remove line at Toolbar's top */ -#tabbrowser-tabs { - z-index: 1 !important; -} -#tabbrowser-arrowscrollbox[overflowing] .tabbrowser-tab[pinned]:is([visuallyselected], [multiselected]) { - overflow: hidden; -} + /* Remove line at Toolbar's top */ + #tabbrowser-tabs { + z-index: 1 !important; + } + #tabbrowser-arrowscrollbox[overflowing] .tabbrowser-tab[pinned]:is([visuallyselected], [multiselected]) { + overflow: hidden; + } } /** Selected Tab - Color like toolbar *****************************************/ @supports -moz-bool-pref("userChrome.tab.connect_to_window") { -:root:not(:-moz-lwtheme) { - /* Fix for windows's system default theme. Using --toolbar-bgcolor fallback */ - --tab-selected-bgcolor: unset !important; /* Original: rgb(255,255,255); */ -} -#tabbrowser-tabs:not([movingtab]) - > #tabbrowser-arrowscrollbox - > .tabbrowser-tab - > .tab-stack - > .tab-background[selected="true"]:-moz-lwtheme { - /* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) + :root:not(:-moz-lwtheme) { + /* Fix for windows's system default theme. Using --toolbar-bgcolor fallback */ + --tab-selected-bgcolor: unset !important; /* Original: rgb(255,255,255); */ + } + #tabbrowser-tabs:not([movingtab]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab + > .tab-stack + > .tab-background[selected="true"]:-moz-lwtheme { + /* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) */ - background-image: linear-gradient(transparent, transparent), - linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; -} + background-image: linear-gradient(transparent, transparent), + linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; + } } /** Multi Selected Color - More Contrast **************************************/ @@ -3202,130 +3202,136 @@ menupopup > menu { /** Selected Tab - Box Shadow *************************************************/ @supports -moz-bool-pref("userChrome.tab.original") { -#TabsToolbar[brighttext] - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab[visuallyselected="true"]:not(:focus) - > .tab-stack - > .tab-background:-moz-lwtheme { - /* Origina: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) + #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab[visuallyselected="true"]:not(:focus) + > .tab-stack + > .tab-background:-moz-lwtheme { + /* Origina: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) Bright: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */ - box-shadow: 0 0 1px var(--toolbar-color) !important; -} -#TabsToolbar[brighttext] - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab[multiselected]:not([visuallyselected]) - > .tab-stack - > .tab-background:-moz-lwtheme { - box-shadow: 0 0 1px color-mix(in srgb, var(--toolbar-color) 80%, transparent) !important; -} + box-shadow: 0 0 1px var(--toolbar-color) !important; + } + #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab[multiselected]:not([visuallyselected]) + > .tab-stack + > .tab-background:-moz-lwtheme { + box-shadow: 0 0 1px color-mix(in srgb, var(--toolbar-color) 80%, transparent) !important; + } -/* Pinned Tab - tabbrowser-arrowscrollbox overflowing */ -#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { - z-index: 0 !important; -} + /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */ + #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { + z-index: 0 !important; + } } /** Selected Tab - Bottom Rounded Corner **************************************/ @supports -moz-bool-pref("userChrome.tab.original") { -#tabbrowser-tabs { - --tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ - --tab-corner-padding: 0px; - --tab-corner-position: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)); -} + #tabbrowser-tabs { + --tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ + --tab-corner-padding: 0px; + --tab-corner-position: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)); + } -:root:not([customizing="true"]) tab[visuallyselected] > stack::before, -:root:not([customizing="true"]) tab[visuallyselected] > stack::after { - content: "" !important; + :root:not([customizing="true"]) tab[visuallyselected] > stack::before, + :root:not([customizing="true"]) tab[visuallyselected] > stack::after { + content: "" !important; - /* Box */ - display: block !important; - position: absolute !important; - z-index: 1 !important; + /* Box */ + display: block !important; + position: absolute !important; + z-index: 1 !important; - /* Shape */ - width: var(--tab-corner-rounding) !important; - height: 100% !important; + /* Shape */ + width: var(--tab-corner-rounding) !important; + height: 100% !important; - /* Color */ - fill: var(--toolbar-bgcolor) !important; - stroke: var(--tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9))) !important; - -moz-context-properties: fill, stroke !important; + /* Color */ + fill: var(--toolbar-bgcolor) !important; + stroke: var(--tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9))) !important; + -moz-context-properties: fill, stroke !important; - /* Image */ - background-size: var(--tab-corner-rounding); - background-repeat: no-repeat; - background-position-y: bottom; -} -:root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::before, -:root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::after { - /* As Selected Tab - Box Shadow */ - stroke: var(--toolbar-color) !important; -} + /* Image */ + background-size: var(--tab-corner-rounding); + background-repeat: no-repeat; + background-position-y: bottom; + } + :root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::before, + :root:not([customizing="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::after { + /* As Selected Tab - Box Shadow */ + stroke: var(--toolbar-color) !important; + } -tab[visuallyselected] > stack::before { - left: var(--tab-corner-position) !important; - background-image: url("./icons/tab-bottom-corner-left.svg"); -} -tab[visuallyselected] > stack::after { - left: auto; - right: var(--tab-corner-position); - background-image: url("./icons/tab-bottom-corner-right.svg"); -} + tab[visuallyselected] > stack::before { + left: var(--tab-corner-position) !important; + background-image: url("./icons/tab-bottom-corner-left.svg"); + } + tab[visuallyselected] > stack::after { + left: auto; + right: var(--tab-corner-position); + background-image: url("./icons/tab-bottom-corner-right.svg"); + } -@media (-moz-gtk-csd-available) { - /* Fill color for GTK */ - :root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::before, - :root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::after { - /* As GTK Toolbar's background-color + backround-image + @media (-moz-gtk-csd-available) { + /* Fill color for GTK */ + :root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::before, + :root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::after { + /* As GTK Toolbar's background-color + backround-image * --toolbar-non-lwt-bgcolor: -moz-dialog; * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)); */ - fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; - stroke: transparent !important; + fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; + stroke: transparent !important; + } + :root:not([customizing="true"]):not([lwtheme="true"]) + #TabsToolbar[brighttext] + tab[visuallyselected] + > stack::before, + :root:not([customizing="true"]):not([lwtheme="true"]) + #TabsToolbar[brighttext] + tab[visuallyselected] + > stack::after { + stroke: transparent !important; + } } - :root:not([customizing="true"]):not([lwtheme="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::before, - :root:not([customizing="true"]):not([lwtheme="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::after { - stroke: transparent !important; - } -} } /** Unselected Tab - Divide line **********************************************/ @supports -moz-bool-pref("userChrome.tab.original") { -#tabbrowser-arrowscrollbox { - position: absolute; -} + #tabbrowser-arrowscrollbox { + position: absolute; + } } @supports -moz-bool-pref("userChrome.tab.original") { -.tab-background::before, -#tabs-newtab-button::before { - /* Box Model */ - content: ""; - display: block; - position: absolute; + .tab-background::before, + #tabs-newtab-button::before { + /* Box Model */ + content: ""; + display: block; + position: absolute; - /* Position */ - top: 50%; - transform: translateX(-2.5px) translateY(calc(-50% + 1px)); + /* Position */ + top: 50%; + transform: translateX(-2.5px) translateY(calc(-50% + 1px)); - /* Bar shape */ - width: 1px; - height: 20px; + /* Bar shape */ + width: 1px; + height: 20px; - /* Bar Color */ - opacity: 0; - background-color: var(--toolbarseparator-color); -} + /* Bar Color */ + opacity: 0; + background-color: var(--toolbarseparator-color); + } } .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before { opacity: var(--tab-separator-opacity); } @supports -moz-bool-pref("userChrome.tab.original") { -#tabs-newtab-button:not(:hover, [open])::before { - opacity: var(--tab-separator-opacity); -} + #tabs-newtab-button:not(:hover, [open])::before { + opacity: var(--tab-separator-opacity); + } } #navigator-toolbox:not([movingtab]) @@ -3338,19 +3344,19 @@ tab[visuallyselected] > stack::after { opacity: 0 !important; } @supports -moz-bool-pref("userChrome.tab.original") { -#navigator-toolbox:not([movingtab]) - .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) - + .tabbrowser-tab - .tab-background::before, -#navigator-toolbox:not([movingtab]) - .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) - ~ .tabbrowser-tab[afterhovered] - .tab-background::before, -#navigator-toolbox:not([movingtab]) - .tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover) - ~ #tabs-newtab-button::before { - opacity: 0 !important; -} + #navigator-toolbox:not([movingtab]) + .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + + .tabbrowser-tab + .tab-background::before, + #navigator-toolbox:not([movingtab]) + .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + ~ .tabbrowser-tab[afterhovered] + .tab-background::before, + #navigator-toolbox:not([movingtab]) + .tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover) + ~ #tabs-newtab-button::before { + opacity: 0 !important; + } } /* Animate */ @@ -3359,9 +3365,9 @@ tab[visuallyselected] > stack::after { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } @supports -moz-bool-pref("userChrome.tab.original") { - #tabs-newtab-button::before { - transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ - } + #tabs-newtab-button::before { + transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ + } } } @@ -3372,68 +3378,68 @@ tab[visuallyselected] > stack::after { /* New tab button - Looks like tab ********************************************/ @supports -moz-bool-pref("userChrome.tab.original") { -#tabs-newtab-button { - /* Original: + #tabs-newtab-button { + /* Original: margin: 0 0 var(--tabs-navbar-shadow-size) !important => Can't ovrride style. Therefore, we should approach it by bypass. */ - --tabs-navbar-shadow-size: -1px; /* Original: 1px */ - --tabs-navbar-original-shadow-size: 1px; - --tab-corner-rounding: 4px; /* Hardcorded */ + --tabs-navbar-shadow-size: -1px; /* Original: 1px */ + --tabs-navbar-original-shadow-size: 1px; + --tab-corner-rounding: 4px; /* Hardcorded */ - /* Size */ - -moz-box-align: stretch !important; - padding-top: var(--tab-block-margin) !important; + /* Size */ + -moz-box-align: stretch !important; + padding-top: var(--tab-block-margin) !important; - /* Corner Rounding Image */ - --newtab-position: calc((var(--tab-corner-rounding) / 2) * -1); - background-image: url("./icons/tab-bottom-corner-left.svg"), url("./icons/tab-bottom-corner-right.svg"); - background-repeat: no-repeat; - background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size), - right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size); - background-size: var(--tab-corner-rounding); + /* Corner Rounding Image */ + --newtab-position: calc((var(--tab-corner-rounding) / 2) * -1); + background-image: url("./icons/tab-bottom-corner-left.svg"), url("./icons/tab-bottom-corner-right.svg"); + background-repeat: no-repeat; + background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size), + right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size); + background-size: var(--tab-corner-rounding); + + /* Corner Rounding Color */ + fill: transparent !important; + -moz-context-properties: fill !important; + } /* Corner Rounding Color */ - fill: transparent !important; - -moz-context-properties: fill !important; -} - -/* Corner Rounding Color */ -#tabs-newtab-button:hover { - fill: var(--toolbarbutton-hover-background) !important; -} -#tabs-newtab-button:hover:active { - fill: var(--toolbarbutton-active-background) !important; -} -@media (-moz-windows-accent-color-in-titlebar) { - :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover, - :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover { - fill: color-mix( - in srgb, - -moz-accent-color-foreground 10%, - transparent - ) !important; /* Hardcorded for compatibility */ + #tabs-newtab-button:hover { + fill: var(--toolbarbutton-hover-background) !important; } - :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active, - :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active { - fill: color-mix( - in srgb, - -moz-accent-color-foreground 15%, - transparent - ) !important; /* Hardcorded for compatibility */ + #tabs-newtab-button:hover:active { + fill: var(--toolbarbutton-active-background) !important; + } + @media (-moz-windows-accent-color-in-titlebar) { + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover { + fill: color-mix( + in srgb, + -moz-accent-color-foreground 10%, + transparent + ) !important; /* Hardcorded for compatibility */ + } + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active { + fill: color-mix( + in srgb, + -moz-accent-color-foreground 15%, + transparent + ) !important; /* Hardcorded for compatibility */ + } } -} -/* '+'Icon */ -#tabs-newtab-button .toolbarbutton-icon { - border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */ + /* '+'Icon */ + #tabs-newtab-button .toolbarbutton-icon { + border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */ - padding: calc(var(--toolbarbutton-inner-padding) - (var(--tab-block-margin) / 4)) var(--toolbarbutton-inner-padding) - calc(var(--toolbarbutton-inner-padding) + (var(--tab-block-margin) / 4) + var(--tabs-navbar-original-shadow-size)) !important; - -moz-context-properties: fill, fill-opacity; - fill: var(--toolbarbutton-icon-fill); - fill-opacity: var(--toolbarbutton-icon-fill-opacity); -} + padding: calc(var(--toolbarbutton-inner-padding) - (var(--tab-block-margin) / 4)) var(--toolbarbutton-inner-padding) + calc(var(--toolbarbutton-inner-padding) + (var(--tab-block-margin) / 4) + var(--tabs-navbar-original-shadow-size)) !important; + -moz-context-properties: fill, fill-opacity; + fill: var(--toolbarbutton-icon-fill); + fill-opacity: var(--toolbarbutton-icon-fill-opacity); + } } /* Unloaded Tab - Contents Opacity ********************************************/