Fix: Tab - Container position to botton at FFv108 #485

black7375 · Oct 21, 2022 · c5c0a2f · c5c0a2f
1 parent de33b0f
commit c5c0a2f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 20 deletions.
diff --git a/css/leptonChrome.css b/css/leptonChrome.css
@@ -7345,8 +7345,9 @@
       /* Box Model */
       content: "";
       display: block;
-      position: absolute !important;
-      transform: translate(var(--container-position-x), var(--container-position-y)) !important;
+      position: absolute;
+      top: 50%;
+      transform: translate(var(--container-position-x), var(--container-position-y));
       /* Shape */
       border-bottom: 2px solid var(--identity-icon-color);
       width: 25%;
@@ -7365,13 +7366,13 @@
     /* Animate */
     @media (prefers-reduced-motion: no-preference) {
       .tab-content:not([titlechanged])::before {
-        transition: 0.15s var(--animation-easing-function) !important;
+        transition: 0.15s var(--animation-easing-function);
         transition-property: width, opacity;
       }
     }
     /* Pinned Tab */
     .tabbrowser-tab[pinned] .tab-content::before {
-      transform: translateY(var(--container-position-y)) !important;
+      transform: translateY(var(--container-position-y));
       width: 16px;
     }
 
@@ -7390,8 +7391,8 @@
         var(--identity-icon-color) 2px,
         transparent 2px
       );
-      background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important;
-      background-position-x: 32%, 50%, 70% !important;
+      background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image);
+      background-position-x: 32%, 50%, 70%;
     }
 
     :root[uidensity="compact"]
@@ -7403,13 +7404,13 @@
       > .tab-stack
       > .tab-content[pinned][titlechanged]:not([selected="true"]) {
       /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
-      background-position-x: 30%, 50%, 70% !important;
+      background-position-x: 30%, 50%, 70%;
     }
 
     .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
     .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
       /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
-      background-position-y: top calc(0.5px + 50% + var(--container-position-y)) !important;
+      background-position-y: top calc(0.5px + 50% + var(--container-position-y));
     }
 
     /* Pinned Tab - Titlechanged & soundplaying */
@@ -7419,7 +7420,7 @@
     .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
       > .tab-stack
       > .tab-content[pinned][titlechanged]:not([selected="true"]) {
-      background-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px) !important;
+      background-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px);
     }
 
     :root[uidensity="compact"]
@@ -7430,7 +7431,7 @@
       .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
       > .tab-stack
       > .tab-content[pinned][titlechanged]:not([selected="true"]) {
-      background-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px) !important;
+      background-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px);
     }
   }
 }

diff --git a/src/tab/_container_tab.scss b/src/tab/_container_tab.scss
@@ -22,8 +22,9 @@
   /* Box Model */
   content: "";
   display: block;
-  position: absolute !important;
-  transform: translate(var(--container-position-x), var(--container-position-y)) !important;
+  position: absolute;
+  top: 50%;
+  transform: translate(var(--container-position-x), var(--container-position-y));
 
   /* Shape */
   border-bottom: 2px solid var(--identity-icon-color);
@@ -41,14 +42,14 @@
 /* Animate */
 @include Animate {
   .tab-content:not([titlechanged])::before {
-    transition: 0.15s var(--animation-easing-function) !important;
+    transition: 0.15s var(--animation-easing-function);
     transition-property: width, opacity;
   }
 }
 
 /* Pinned Tab */
 .tabbrowser-tab[pinned] .tab-content::before {
-  transform: translateY(var(--container-position-y)) !important;
+  transform: translateY(var(--container-position-y));
   width: 16px;
 }
 @include Option("userChrome.tab.close_button_at_pinned") {
@@ -68,8 +69,8 @@
     var(--identity-icon-color) 2px,
     transparent 2px
   );
-  background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important;
-  background-position-x: 32%, 50%, 70% !important;
+  background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image);
+  background-position-x: 32%, 50%, 70%;
 }
 :root[uidensity="compact"]
   .tabbrowser-tab:is([image], [pinned])[usercontextid]
@@ -80,13 +81,13 @@
   > .tab-stack
   > .tab-content[pinned][titlechanged]:not([selected="true"]) {
   /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
-  background-position-x: 30%, 50%, 70% !important;
+  background-position-x: 30%, 50%, 70%;
 }
 
 .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
   /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
-  background-position-y: top calc(0.5px + 50% + var(--container-position-y)) !important;
+  background-position-y: top calc(0.5px + 50% + var(--container-position-y));
 }
 
 /* Pinned Tab - Titlechanged & soundplaying */
@@ -96,7 +97,7 @@
 .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
   > .tab-stack
   > .tab-content[pinned][titlechanged]:not([selected="true"]) {
-  background-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px) !important;
+  background-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px);
 }
 :root[uidensity="compact"]
   .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
@@ -106,5 +107,5 @@
   .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked])
   > .tab-stack
   > .tab-content[pinned][titlechanged]:not([selected="true"]) {
-  background-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px) !important;
+  background-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px);
 }