diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 4aaf925f..5ca74327 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6004,31 +6004,15 @@ /*= Selected Tab - Box Shadow ================================================*/ @supports -moz-bool-pref("userChrome.tab.box_shadow") { #TabsToolbar { - --uc-tab-background-shadow-soft: 0 0 1px; - --uc-tab-background-shadow-hard: 0 0 0 1px; --uc-tab-shadow-color: var( --tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9))) ); --uc-tab-shadow-color-bundle: var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))); - --uc-tab-basic-shadow: 0 0 4px rgba(0, 0, 0, 0.4); - --uc-tab-additional-shadow: 0 0 4px rgba(128, 128, 142, 0.5); - } - @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") { - @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref( - "userChrome.tab.bottom_rounded_corner.australis" - ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref( - "userChrome.tab.bottom_rounded_corner.chrome" - ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { - #TabsToolbar { - --uc-tab-background-shadow-hard: 0 -1px 0; - --uc-tab-basic-shadow: 0 -1px 0px rgba(0, 0, 0, 0.4); - --uc-tab-additional-shadow: 0 0 0 transparent; - } - } } #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { - box-shadow: var(--uc-tab-basic-shadow) !important; + 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);"]) #TabsToolbar[brighttext] @@ -6036,7 +6020,7 @@ .tabbrowser-tab:is([selected], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { - box-shadow: var(--uc-tab-background-shadow-soft) var(--uc-tab-shadow-color) !important; + 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);"]) #TabsToolbar[brighttext] @@ -6057,7 +6041,8 @@ > .tab-stack > .tab-background:-moz-lwtheme { --uc-tab-shadow-color: var(--uc-tab-shadow-color-bundle); - box-shadow: var(--uc-tab-background-shadow-hard) var(--uc-tab-shadow-color), var(--uc-tab-additional-shadow) !important; + filter: drop-shadow(-1px -0.5px 0px var(--uc-tab-shadow-color, transparent)) + 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);"]) #TabsToolbar[brighttext] @@ -6065,7 +6050,8 @@ .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { - box-shadow: var(--uc-tab-background-shadow-hard) var(--uc-tab-shadow-color) !important; + filter: drop-shadow(-1px -0.5px 0px var(--uc-tab-shadow-color, transparent)) + drop-shadow(1px -1px 0px var(--uc-tab-shadow-color, transparent)); } } /*= Selected Tab - Bottom Rounded Corner =====================================*/ @@ -6308,14 +6294,13 @@ display: block; position: absolute; z-index: -1; - bottom: 0; + bottom: -1px; /* Shape */ width: var(--uc-tab-corner-size); height: var(--uc-tab-corner-height); /* Color */ fill: transparent; - stroke: transparent; - -moz-context-properties: fill, stroke, stroke-opacity; + -moz-context-properties: fill; /* Image */ background-size: cover, auto auto; background-repeat: no-repeat, no-repeat; @@ -6364,12 +6349,6 @@ .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::after { fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); } - @supports -moz-bool-pref("userChrome.tab.box_shadow") { - .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::before, - .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::after { - stroke: var(--uc-tab-shadow-color); - } - } .tabbrowser-tab:hover:not([visuallyselected], [multiselected]) .tab-background::before, .tabbrowser-tab:hover:not([visuallyselected], [multiselected]) .tab-background::after { fill: color-mix(in srgb, currentColor 11%, transparent); @@ -6383,24 +6362,8 @@ #tabbrowser-tabs[movingtab] .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background:-moz-lwtheme { --uc-tab-corner-bgimage: none; } - @supports -moz-bool-pref("userChrome.tab.box_shadow") { - :root:is([lwtheme-mozlightdark], [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);"]) - #TabsToolbar[brighttext] - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab:is([visuallyselected], [multiselected]) - .tab-background::before, - :root:is([lwtheme-mozlightdark], [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);"]) - #TabsToolbar[brighttext] - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab:is([visuallyselected], [multiselected]) - .tab-background::after { - stroke-opacity: 0.3; - } - } @media (-moz-gtk-csd-available) { - :root { - /* Fill color for GTK */ - } + /* Fill color for GTK */ @supports -moz-bool-pref("userChrome.tab.box_shadow") { :root:not([lwtheme="true"]) .tabbrowser-tab { --uc-tab-shadow-color: rgba(0, 0, 0, 0.4); diff --git a/src/tab/selected_tab/_bottom_rounded_corner_others.scss b/src/tab/selected_tab/_bottom_rounded_corner_others.scss index c8d7a113..dff49073 100644 --- a/src/tab/selected_tab/_bottom_rounded_corner_others.scss +++ b/src/tab/selected_tab/_bottom_rounded_corner_others.scss @@ -110,7 +110,7 @@ display: block; position: absolute; z-index: -1; - bottom: 0; + bottom: -1px; /* Shape */ width: var(--uc-tab-corner-size); @@ -118,12 +118,7 @@ /* Color */ fill: transparent; - stroke: transparent; - -moz-context-properties: fill, stroke, stroke-opacity; - // For stroke - // box-shadow: 0 0 4px rgba(0,0,0,.4); - // box-shadow: 0 0 1px var(--toolbar-color) !important; - // box-shadow: 0 0 1px var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))) !important + -moz-context-properties: fill; /* Image */ // background-size: var(--tab-corner-rounding); @@ -174,10 +169,6 @@ &::before, &::after { fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); - - @include Option("userChrome.tab.box_shadow") { - stroke: var(--uc-tab-shadow-color); - } } } &:hover:not([visuallyselected], [multiselected]) .tab-background { @@ -199,39 +190,25 @@ --uc-tab-corner-bgimage: none; } -:root { - &:is( - [lwtheme-mozlightdark], - [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);"] - ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background { +@include OS($linux) { + /* Fill color for GTK */ + :root:not([lwtheme="true"]) .tabbrowser-tab { @include Option("userChrome.tab.box_shadow") { - &::before, - &::after { - stroke-opacity: 0.3; - } + --uc-tab-shadow-color: rgba(0,0,0, 0.4); } - } - @include OS($linux) { - /* Fill color for GTK */ - &:not([lwtheme="true"]) .tabbrowser-tab { - @include Option("userChrome.tab.box_shadow") { - --uc-tab-shadow-color: rgba(0,0,0, 0.4); - } - &[visuallyselected] .tab-background { - background-clip: content-box; + &[visuallyselected] .tab-background { + background-clip: content-box; - &::before, - &::after { - /* As GTK Toolbar's background-color + background-image - * --toolbar-non-lwt-bgcolor: -moz-dialog; - * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)); - */ - --uc-tab-corner-bgimage: linear-gradient(var(--toolbar-non-lwt-bgcolor), var(--toolbar-non-lwt-bgcolor)); - fill: rgba(255, 255, 255, .075); - @include NotOption("userChrome.tab.color_like_toolbar") { - fill: rgba(255, 255, 255, .15); - } + &::before, + &::after { + /* As GTK Toolbar's background-color + background-image + * --toolbar-non-lwt-bgcolor: -moz-dialog; + * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)); + */ + --uc-tab-corner-bgimage: linear-gradient(var(--toolbar-non-lwt-bgcolor), var(--toolbar-non-lwt-bgcolor)); + fill: rgba(255, 255, 255, .075); + @include NotOption("userChrome.tab.color_like_toolbar") { + fill: rgba(255, 255, 255, .15); } } } diff --git a/src/tab/selected_tab/_box_shadow.scss b/src/tab/selected_tab/_box_shadow.scss index 74837e76..864d5328 100644 --- a/src/tab/selected_tab/_box_shadow.scss +++ b/src/tab/selected_tab/_box_shadow.scss @@ -1,29 +1,17 @@ +$ucTabBasicShadow: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); +$ucTabAdditionalShadow: drop-shadow(0 0 2px rgba(128, 128, 142, 0.5)); +$ucTabBackgroundShadowSoft: drop-shadow(0 0 1px var(--uc-tab-shadow-color, transparent)); +$ucTabBackgroundShadowHard: drop-shadow(-1px -0.5px 0px var(--uc-tab-shadow-color, transparent)) + drop-shadow(1px -1px 0px var(--uc-tab-shadow-color, transparent)); + #TabsToolbar { - --uc-tab-background-shadow-soft: 0 0 1px; - --uc-tab-background-shadow-hard: 0 0 0 1px; --uc-tab-shadow-color: var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))); --uc-tab-shadow-color-bundle: var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))); - --uc-tab-basic-shadow: 0 0 4px rgba(0,0,0, 0.4); - --uc-tab-additional-shadow: 0 0 4px rgba(128, 128, 142, 0.5); - - @include Option("userChrome.tab.bottom_rounded_corner") { - @include Option( - "userChrome.tab.bottom_rounded_corner.wave", - "userChrome.tab.bottom_rounded_corner.australis", - "userChrome.tab.bottom_rounded_corner.chrome_legacy", - "userChrome.tab.bottom_rounded_corner.chrome", - "userChrome.tab.bottom_rounded_corner.edge" - ) { - // --uc-tab-background-shadow-soft: 0 -1px 1px -1px; - --uc-tab-background-shadow-hard: 0 -1px 0; - --uc-tab-basic-shadow: 0 -1px 0px rgba(0,0,0, 0.4); - --uc-tab-additional-shadow: 0 0 0 transparent; - } - } } #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { - box-shadow: var(--uc-tab-basic-shadow) !important; + 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);"]) @@ -31,7 +19,7 @@ &:is([selected], [multiselected]) { > .tab-stack > .tab-background:-moz-lwtheme { - box-shadow: var(--uc-tab-background-shadow-soft) var(--uc-tab-shadow-color) !important; + filter: $ucTabBackgroundShadowSoft; } } @@ -53,8 +41,8 @@ > .tab-stack > .tab-background:-moz-lwtheme { --uc-tab-shadow-color: var(--uc-tab-shadow-color-bundle); - box-shadow: var(--uc-tab-background-shadow-hard) var(--uc-tab-shadow-color), - var(--uc-tab-additional-shadow) !important; + filter: $ucTabBackgroundShadowHard + $ucTabAdditionalShadow; } :root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) @@ -63,5 +51,5 @@ .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { - box-shadow: var(--uc-tab-background-shadow-hard) var(--uc-tab-shadow-color) !important; + filter: $ucTabBackgroundShadowHard; }