Fix: Tab - Boxshadow -> Dropshadow

The anti-aliasing of the SVG stroke is insufficient.
black7375 · Dec 17, 2022 · e10db8d · e10db8d
1 parent ce55d26
commit e10db8d
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 112 deletions.
diff --git a/css/leptonChrome.css b/css/leptonChrome.css
@@ -6004,39 +6004,23 @@
 /*= 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]
     #tabbrowser-tabs:not([noshadowfortests])
     .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,15 +6041,17 @@
     > .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]
     #tabbrowser-tabs:not([noshadowfortests])
     .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
@@ -110,20 +110,15 @@
       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;
-      // 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
@@ -1,37 +1,25 @@
+$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);"])
   #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .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: $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;
 }