Merge pull request #922 from Tanay-Kar/patch-1

themes/ae7868dc-1fa1-469e-8b89-a5edf7ab1f24/chrome.css

@@ -1,49 +1,54 @@
 
+
 @media (-moz-bool-pref: "zen.view.use-single-toolbar") {
   #zen-appcontent-wrapper {
     position: relative !important;
-    background-color: transparent !important; /* The rest of the div remains transparent */
+    background-color: transparent !important;
   }
 
-#zen-appcontent-wrapper::before {
+  #zen-appcontent-wrapper::before {
     content: "" !important;
     position: absolute !important;
     top: 2px !important;
     left: 6px !important;
-    height: 4px !important; /* Height of the top background */
-    max-width: calc(100% - 16px) !important; /* Adjust for margins */
-    width: var(--bar-pcent) !important; /* Ensure full width or customizable width */
-    background-color: var(--bar-colour) !important; /* Solid color for the bar */
-    border-radius: 4px; /* Adjust this value to control the roundness of the ends */
+    height: 4px !important;
+    max-width: calc(100% - 16px) !important;
+    width: var(--bar-pcent) !important;
+    background-color: var(--bar-colour) !important;
+    border-radius: 4px;
     pointer-events: none !important;
-    transition: width 0.5s ease-in-out, background 0.2s ease-in !important; /* Apply smooth transition on width and background */
+    transition: background-color 0.2s ease-in-out, width 0.5s ease-in-out !important;
   }
 
-/* Current tab loading progress and muted status */
   #main-window {
     &:has(.tabbrowser-tab[selected][busy]) {
       --bar-colour: white;
-      --bar-pcent: 15%;
+      --bar-pcent: 10%;
     }
 
-&:has(.tabbrowser-tab[selected][busy][pendingicon]) {
+    &:has(.tabbrowser-tab[selected][busy][pendingicon]) {
       --bar-colour: white;
-      --bar-pcent: 45%;
+      --bar-pcent: 50%;
     }
 
-&:has(.tabbrowser-tab[selected][busy][pendingicon][progress]) {
+    &:has(.tabbrowser-tab[selected][busy][pendingicon][progress]) {
       --bar-colour: white;
-      --bar-pcent: 85%;
+      --bar-pcent: 80%;
     }
 
-&:has(.tabbrowser-tab[selected][busy][progress]) {
+    &:has(.tabbrowser-tab[selected][busy][progress]) {
       --bar-colour: white;
-      --bar-pcent: 95%;
+      --bar-pcent: 100%;
     }
 
-&:has(.tabbrowser-tab[selected][muted]:not([busy])) {
+    &:has(.tabbrowser-tab[selected][muted]:not([busy])) {
       --bar-colour: orangered;
       --bar-pcent: 100%;
     }
+
+    &:has(.tabbrowser-tab[selected]:not([muted]):not([busy])) {
+      --bar-colour: transparent;
+      --bar-pcent: 0%;
+    }
   }
 }