Merge pull request #1094 from irhdevel/supernova_contextline_fix

css/leptonChrome.css

@@ -7615,73 +7615,66 @@
     margin: unset !important;
   }
 }
+/*= Selected Tab - Supernova like contextline ===================================*/
 @media not -moz-pref("userChrome.tab.photon_like_contextline") {
   @media -moz-pref("userChrome.tab.supernova_like_contextline") {
-    .tab-context-line {
+    /* context line styles */
+    tabs tab.tabbrowser-tab > .tab-stack > .tab-background > .tab-context-line {
       display: inline-flex !important;
       display: -moz-inline-box !important;
+    }
+    tabs tab.tabbrowser-tab > .tab-stack > .tab-background > .tab-context-line::before {
+      content: "";
       height: 1px !important;
       border-radius: 9999px !important;
       transform: translateY(5px);
       margin-top: -1px !important;
       margin-left: 5px;
       margin-right: 5px;
+      width: 100%;
     }
-    /* Override container tab style */
+    /* Override container-tab style */
     tabs tab.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
-      margin-top: 3px !important;
+      margin: unset !important;
-      margin-left: 5px !important;
-      margin-right: 5px !important;
-    }
-    tab.tabbrowser-tab[usercontextid]:not([selected="true"], [multiselected])
-      > .tab-stack
-      > .tab-background
-      > .tab-context-line {
-      opacity: 0;
-      transition: all 0.2s cubic-bezier(0, 0.9, 0.15, 1) !important;
     }
+    /* 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[lwtheme-mozlightdark][lwthemetextcolor="bright"],
     :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] .tab-context-line {
       --tab-line-color: #45a1ff;
     }
-    .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line {
+    .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line::before {
-      background-color: var(--tab-line-color, #45a1ff) !important;
+      background-color: var(--tab-line-color, var(--lwt-tab-line-color, #45a1ff)) !important;
     }
     /* Set the active effect */
-    tabs tab.tabbrowser-tab[usercontextid]:active > .tab-stack > .tab-background > .tab-context-line {
+    .tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line::before {
-      margin-left: 6px !important;
+      filter: brightness(70%);
-      margin-right: 6px !important;
-    }
-    .tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line {
-      background: #217ddb !important;
       margin-left: 6px;
       margin-right: 6px;
     }
     /* Set the hover effect */
-    .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
+    .tabbrowser-tab:hover:not([selected="true"], [multiselected])
-      background-color: rgba(0, 0, 0, 0.2) !important;
+      > .tab-stack
+      > .tab-background
+      > .tab-context-line::before {
+      background-color: rgba(0, 0, 0, 0.4) !important;
       opacity: 1 !important;
     }
     #TabsToolbar[brighttext]
       .tabbrowser-tab:hover:not([selected="true"], [multiselected])
       > .tab-stack
       > .tab-background
-      > .tab-context-line {
+      > .tab-context-line::before {
-      background-color: rgba(255, 255, 255, 0.3137254902) !important;
+      background-color: rgba(255, 255, 255, 0.4) !important;
     }
     /* Animation */
     @media (prefers-reduced-motion: no-preference) {
-      .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
+      .tabbrowser-tab:hover:not([selected="true"], [multiselected])
-        animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1);
-      }
-      /* Animation for container tab can't have width change... */
-      tab.tabbrowser-tab[usercontextid]:hover:not([selected="true"], [multiselected])
         > .tab-stack
         > .tab-background
-        > .tab-context-line {
+        > .tab-context-line::before {
-        opacity: 1;
+        animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1);
       }
     }
     /* Animation for hover effect */
@@ -7724,6 +7717,23 @@
       > .tab-background {
       box-shadow: 0 0 1px var(--tabs-border-color), 0 0 4px rgba(128, 128, 142, 0.5) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
     }
+    @media -moz-pref("userChrome.tab.contextline_blue_accent") {
+      #tabbrowser-tabs .tab-context-line {
+        --tab-line-color: #45a1ff !important;
+      }
+    }
+    @media not -moz-pref("userChrome.tab.contextline_blue_accent") {
+      @media (-moz-gtk-csd-available) {
+        :root:is(:not([lwtheme]), :not(:-moz-lwtheme)) #tabbrowser-tabs .tab-context-line {
+          --tab-line-color: AccentColor !important; /* -moz-accent-color */
+        }
+        @media -moz-pref("userChrome.compatibility.accent_color") {
+          :root:is(:not([lwtheme]), :not(:-moz-lwtheme)) #tabbrowser-tabs .tab-context-line {
+            --tab-line-color: Highlight !important; /* -moz-accent-color */
+          }
+        }
+      }
+    }
   }
 }
 /*= Unselected Tab - Divide line =============================================*/
@@ -22453,60 +22463,57 @@
     margin: unset !important;
   }
 }
+/*= Selected Tab - Supernova like contextline ===================================*/
 @media (not (-moz-bool-pref: "userChrome.tab.photon_like_contextline")) and (-moz-bool-pref: "userChrome.tab.supernova_like_contextline") {
-  .tab-context-line {
+  /* context line styles */
+  tabs tab.tabbrowser-tab > .tab-stack > .tab-background > .tab-context-line {
     display: inline-flex !important;
     display: -moz-inline-box !important;
+  }
+  tabs tab.tabbrowser-tab > .tab-stack > .tab-background > .tab-context-line::before {
+    content: "";
     height: 1px !important;
     border-radius: 9999px !important;
     transform: translateY(5px);
     margin-top: -1px !important;
     margin-left: 5px;
     margin-right: 5px;
+    width: 100%;
   }
-  /* Override container tab style */
+  /* Override container-tab style */
   tabs tab.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
-    margin-top: 3px !important;
+    margin: unset !important;
-    margin-left: 5px !important;
-    margin-right: 5px !important;
-  }
-  tab.tabbrowser-tab[usercontextid]:not([selected="true"], [multiselected])
-    > .tab-stack
-    > .tab-background
-    > .tab-context-line {
-    opacity: 0;
-    transition: all 0.2s cubic-bezier(0, 0.9, 0.15, 1) !important;
   }
+  /* 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[lwtheme-mozlightdark][lwthemetextcolor="bright"],
   :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] .tab-context-line {
     --tab-line-color: #45a1ff;
   }
-  .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line {
+  .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line::before {
-    background-color: var(--tab-line-color, #45a1ff) !important;
+    background-color: var(--tab-line-color, var(--lwt-tab-line-color, #45a1ff)) !important;
   }
   /* Set the active effect */
-  tabs tab.tabbrowser-tab[usercontextid]:active > .tab-stack > .tab-background > .tab-context-line {
+  .tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line::before {
-    margin-left: 6px !important;
+    filter: brightness(70%);
-    margin-right: 6px !important;
-  }
-  .tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line {
-    background: #217ddb !important;
     margin-left: 6px;
     margin-right: 6px;
   }
   /* Set the hover effect */
-  .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
+  .tabbrowser-tab:hover:not([selected="true"], [multiselected])
-    background-color: rgba(0, 0, 0, 0.2) !important;
+    > .tab-stack
+    > .tab-background
+    > .tab-context-line::before {
+    background-color: rgba(0, 0, 0, 0.4) !important;
     opacity: 1 !important;
   }
   #TabsToolbar[brighttext]
     .tabbrowser-tab:hover:not([selected="true"], [multiselected])
     > .tab-stack
     > .tab-background
-    > .tab-context-line {
+    > .tab-context-line::before {
-    background-color: rgba(255, 255, 255, 0.3137254902) !important;
+    background-color: rgba(255, 255, 255, 0.4) !important;
   }
   /* Animation */
   /* Animation for hover effect */
@@ -22515,15 +22522,11 @@
   /* Remove side's background color border */
 }
 @media (not (-moz-bool-pref: "userChrome.tab.photon_like_contextline")) and (-moz-bool-pref: "userChrome.tab.supernova_like_contextline") and (prefers-reduced-motion: no-preference) {
-  .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
+  .tabbrowser-tab:hover:not([selected="true"], [multiselected])
-    animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1);
-  }
-  /* Animation for container tab can't have width change... */
-  tab.tabbrowser-tab[usercontextid]:hover:not([selected="true"], [multiselected])
     > .tab-stack
     > .tab-background
-    > .tab-context-line {
+    > .tab-context-line::before {
-    opacity: 1;
+    animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1);
   }
 }
 @media (not (-moz-bool-pref: "userChrome.tab.photon_like_contextline")) and (-moz-bool-pref: "userChrome.tab.supernova_like_contextline") {
@@ -22572,6 +22575,21 @@
     box-shadow: 0 0 1px var(--tabs-border-color), 0 0 4px rgba(128, 128, 142, 0.5) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
   }
 }
+@media (not (-moz-bool-pref: "userChrome.tab.photon_like_contextline")) and (-moz-bool-pref: "userChrome.tab.supernova_like_contextline") and (-moz-bool-pref: "userChrome.tab.contextline_blue_accent") {
+  #tabbrowser-tabs .tab-context-line {
+    --tab-line-color: #45a1ff !important;
+  }
+}
+@media (not (-moz-bool-pref: "userChrome.tab.photon_like_contextline")) and (-moz-bool-pref: "userChrome.tab.supernova_like_contextline") and (not (-moz-bool-pref: "userChrome.tab.contextline_blue_accent")) and (-moz-gtk-csd-available) {
+  :root:is(:not([lwtheme]), :not(:-moz-lwtheme)) #tabbrowser-tabs .tab-context-line {
+    --tab-line-color: AccentColor !important; /* -moz-accent-color */
+  }
+}
+@media (not (-moz-bool-pref: "userChrome.tab.photon_like_contextline")) and (-moz-bool-pref: "userChrome.tab.supernova_like_contextline") and (not (-moz-bool-pref: "userChrome.tab.contextline_blue_accent")) and (-moz-gtk-csd-available) and (-moz-bool-pref: "userChrome.compatibility.accent_color") {
+  :root:is(:not([lwtheme]), :not(:-moz-lwtheme)) #tabbrowser-tabs .tab-context-line {
+    --tab-line-color: Highlight !important; /* -moz-accent-color */
+  }
+}
 /*= Unselected Tab - Divide line =============================================*/
 /*= Unselected Tab - Dynamic Separator =======================================*/
 @media (-moz-bool-pref: "userChrome.tab.dynamic_separator") {

css/leptonChromeESR.css

@@ -8057,73 +8057,66 @@
     margin: unset !important;
   }
 }
+/*= Selected Tab - Supernova like contextline ===================================*/
 @supports not -moz-bool-pref("userChrome.tab.photon_like_contextline") {
   @supports -moz-bool-pref("userChrome.tab.supernova_like_contextline") {
-    .tab-context-line {
+    /* context line styles */
+    tabs tab.tabbrowser-tab > .tab-stack > .tab-background > .tab-context-line {
       display: inline-flex !important;
       display: -moz-inline-box !important;
+    }
+    tabs tab.tabbrowser-tab > .tab-stack > .tab-background > .tab-context-line::before {
+      content: "";
       height: 1px !important;
       border-radius: 9999px !important;
       transform: translateY(5px);
       margin-top: -1px !important;
       margin-left: 5px;
       margin-right: 5px;
+      width: 100%;
     }
-    /* Override container tab style */
+    /* Override container-tab style */
     tabs tab.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
-      margin-top: 3px !important;
+      margin: unset !important;
-      margin-left: 5px !important;
-      margin-right: 5px !important;
-    }
-    tab.tabbrowser-tab[usercontextid]:not([selected="true"], [multiselected])
-      > .tab-stack
-      > .tab-background
-      > .tab-context-line {
-      opacity: 0;
-      transition: all 0.2s cubic-bezier(0, 0.9, 0.15, 1) !important;
     }
+    /* 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[lwtheme-mozlightdark][lwthemetextcolor="bright"],
     :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] .tab-context-line {
       --tab-line-color: #45a1ff;
     }
-    .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line {
+    .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line::before {
-      background-color: var(--tab-line-color, #45a1ff) !important;
+      background-color: var(--tab-line-color, var(--lwt-tab-line-color, #45a1ff)) !important;
     }
     /* Set the active effect */
-    tabs tab.tabbrowser-tab[usercontextid]:active > .tab-stack > .tab-background > .tab-context-line {
+    .tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line::before {
-      margin-left: 6px !important;
+      filter: brightness(70%);
-      margin-right: 6px !important;
-    }
-    .tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line {
-      background: #217ddb !important;
       margin-left: 6px;
       margin-right: 6px;
     }
     /* Set the hover effect */
-    .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
+    .tabbrowser-tab:hover:not([selected="true"], [multiselected])
-      background-color: rgba(0, 0, 0, 0.2) !important;
+      > .tab-stack
+      > .tab-background
+      > .tab-context-line::before {
+      background-color: rgba(0, 0, 0, 0.4) !important;
       opacity: 1 !important;
     }
     #TabsToolbar[brighttext]
       .tabbrowser-tab:hover:not([selected="true"], [multiselected])
       > .tab-stack
       > .tab-background
-      > .tab-context-line {
+      > .tab-context-line::before {
-      background-color: rgba(255, 255, 255, 0.3137254902) !important;
+      background-color: rgba(255, 255, 255, 0.4) !important;
     }
     /* Animation */
     @media (prefers-reduced-motion: no-preference) {
-      .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
+      .tabbrowser-tab:hover:not([selected="true"], [multiselected])
-        animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1);
-      }
-      /* Animation for container tab can't have width change... */
-      tab.tabbrowser-tab[usercontextid]:hover:not([selected="true"], [multiselected])
         > .tab-stack
         > .tab-background
-        > .tab-context-line {
+        > .tab-context-line::before {
-        opacity: 1;
+        animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1);
       }
     }
     /* Animation for hover effect */
@@ -8166,6 +8159,23 @@
       > .tab-background {
       box-shadow: 0 0 1px var(--tabs-border-color), 0 0 4px rgba(128, 128, 142, 0.5) !important; /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
     }
+    @supports -moz-bool-pref("userChrome.tab.contextline_blue_accent") {
+      #tabbrowser-tabs .tab-context-line {
+        --tab-line-color: #45a1ff !important;
+      }
+    }
+    @supports not -moz-bool-pref("userChrome.tab.contextline_blue_accent") {
+      @media (-moz-gtk-csd-available) {
+        :root:is(:not([lwtheme]), :not(:-moz-lwtheme)) #tabbrowser-tabs .tab-context-line {
+          --tab-line-color: AccentColor !important; /* -moz-accent-color */
+        }
+        @supports -moz-bool-pref("userChrome.compatibility.accent_color") {
+          :root:is(:not([lwtheme]), :not(:-moz-lwtheme)) #tabbrowser-tabs .tab-context-line {
+            --tab-line-color: Highlight !important; /* -moz-accent-color */
+          }
+        }
+      }
+    }
   }
 }
 /*= Unselected Tab - Divide line =============================================*/

src/tab/_selected_tab.scss

@@ -68,8 +68,26 @@
   @import "selected_tab/photon_like_contextline";
 }
 
+/*= Selected Tab - Supernova like contextline ===================================*/
 @include NotOption("userChrome.tab.photon_like_contextline") {
   @include Option("userChrome.tab.supernova_like_contextline") {
     @import "selected_tab/supernova_like_contextline";
+
+    @include Option("userChrome.tab.contextline_blue_accent") {
+      #tabbrowser-tabs .tab-context-line {
+        --tab-line-color: #45a1ff !important;
+      }
+    }
+    @include NotOption("userChrome.tab.contextline_blue_accent") {
+      @include OS("linux") {
+        @include not_lwtheme {
+          #tabbrowser-tabs .tab-context-line {
+            @include AccentColor("Highlight") {
+              --tab-line-color: #{$accentColor} !important; /* -moz-accent-color */
+            }
+          }
+        }
+      }
+    }
   }
 }

src/tab/selected_tab/_supernova_like_contextline.scss

@@ -1,51 +1,45 @@
-.tab-context-line {
+/* context line styles */
+tabs tab.tabbrowser-tab > .tab-stack > .tab-background > .tab-context-line {
   @include InlineBox(true);
+  &::before {
+    content: "";
     height: 1px !important;
     border-radius: 9999px !important;
     transform: translateY(5px);
     margin-top: -1px !important;
     margin-left: 5px;
     margin-right: 5px;
+    width: 100%;
+  }
 }
 
-/* Override container tab style */
+/* Override container-tab style */
 tabs tab.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
-  margin-top: 3px !important;
+  margin: unset !important;
-  margin-left: 5px !important;
-  margin-right: 5px !important;
-}
-
-tab.tabbrowser-tab[usercontextid]:not([selected="true"], [multiselected])
-  > .tab-stack
-  > .tab-background
-  > .tab-context-line {
-  opacity: 0;
-  transition: all 0.2s cubic-bezier(0, 0.9, 0.15, 1) !important;
 }
 
+/* selected tab style */
 #{built-in-light-theme()} .tab-context-line,
 #{built-in-dark-theme()} .tab-context-line {
   --tab-line-color: #45a1ff;
 }
-.tabbrowser-tab:is([selected], [multiselected]) .tab-context-line {
+.tabbrowser-tab:is([selected], [multiselected]) .tab-context-line::before {
-  background-color: var(--tab-line-color, #45a1ff) !important;
+  background-color: var(--tab-line-color, var(--lwt-tab-line-color, #45a1ff)) !important;
 }
 
 /* Set the active effect */
-tabs tab.tabbrowser-tab[usercontextid]:active > .tab-stack > .tab-background > .tab-context-line {
+.tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line::before {
-  margin-left: 6px !important;
+  filter: brightness(70%);
-  margin-right: 6px !important;
-}
-
-.tabbrowser-tab:active > .tab-stack > .tab-background > .tab-context-line {
-  background: #217ddb !important;
   margin-left: 6px;
   margin-right: 6px;
 }
 
 /* Set the hover effect */
-.tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
+.tabbrowser-tab:hover:not([selected="true"], [multiselected])
-  background-color: rgba(0, 0, 0, 0.2) !important;
+  > .tab-stack
+  > .tab-background
+  > .tab-context-line::before {
+  background-color: rgba(0, 0, 0, 0.4) !important;
   opacity: 1 !important;
 }
 
@@ -53,22 +47,18 @@ tabs tab.tabbrowser-tab[usercontextid]:active > .tab-stack > .tab-background > .
   .tabbrowser-tab:hover:not([selected="true"], [multiselected])
   > .tab-stack
   > .tab-background
-  > .tab-context-line {
+  > .tab-context-line::before {
-  background-color: #ffffff50 !important;
+  background-color: rgba(255, 255, 255, 0.4) !important;
 }
 
+
 /* Animation */
 @media (prefers-reduced-motion: no-preference) {
-  .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
+  .tabbrowser-tab:hover:not([selected="true"], [multiselected])
-    animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1);
-  }
-
-  /* Animation for container tab can't have width change... */
-  tab.tabbrowser-tab[usercontextid]:hover:not([selected="true"], [multiselected])
     > .tab-stack
     > .tab-background
-    > .tab-context-line {
+    > .tab-context-line::before {
-    opacity: 1;
+    animation: toWide 0.2s cubic-bezier(0, 0.9, 0.15, 1);
   }
 }