Fix: Container Tab - Positions

black7375 · Nov 13, 2022 · 88b17b4 · 88b17b4
1 parent e092cb1
commit 88b17b4
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 54 deletions.
diff --git a/css/leptonChrome.css b/css/leptonChrome.css
@@ -7336,20 +7336,23 @@
         display: none;
       }
     }
-    .tabbrowser-tab {
-      --container-position-x: 9px;
-      --container-position-y: 11px;
+    #tabbrowser-tabs {
+      --uc-container-position-x: 9px;
+      --uc-container-position-y-default: 11.5px;
+      --uc-container-position-y: calc(50% + var(--uc-container-position-y-default));
+      --uc-titlechanged-container-position-x: 32%, 50%, 70%;
     }
-    .tabbrowser-tab:-moz-locale-dir(rtl) {
-      --container-position-x: -9px;
+    #tabbrowser-tabs:-moz-locale-dir(rtl) {
+      --uc-container-position-x: -9px;
     }
 
-    :root[uidensity="compact"] .tabbrowser-tab {
-      --container-position-y: 10px;
+    :root[uidensity="compact"] #tabbrowser-tabs {
+      --uc-container-position-y-default: 10.5px;
+      --uc-titlechanged-container-position-x: 30%, 50%, 70%;
     }
 
-    :root[uidensity="touch"] .tabbrowser-tab {
-      --container-position-y: 12px;
+    :root[uidensity="touch"] #tabbrowser-tabs {
+      --uc-container-position-y-default: 12.5px;
     }
 
     .tab-content:not([titlechanged])::before {
@@ -7358,7 +7361,7 @@
       display: block;
       position: absolute;
       top: 50%;
-      transform: translate(var(--container-position-x), var(--container-position-y));
+      transform: translate(var(--uc-container-position-x), var(--uc-container-position-y));
       /* Shape */
       border-bottom: 2px solid var(--identity-icon-color);
       width: 25%;
@@ -7383,7 +7386,7 @@
     }
     /* Pinned Tab */
     .tabbrowser-tab[pinned] .tab-content::before {
-      transform: translateY(var(--container-position-y));
+      transform: translateY(var(--uc-container-position-y));
       width: 16px;
     }
 
@@ -7402,26 +7405,14 @@
         var(--identity-icon-color) 2px,
         transparent 2px
       );
-      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]
-      > .tab-stack
-      > .tab-content[attention]:not([selected="true"]),
-    :root[uidensity="compact"]
-      .tabbrowser-tab[usercontextid]
-      > .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%;
+      background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important;
+      background-position-x: var(--uc-titlechanged-container-position-x) !important;
     }
 
     .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));
+      background-position-y: top var(--uc-container-position-y) !important;
     }
 
     /* Pinned Tab - Titlechanged & soundplaying */
@@ -7431,7 +7422,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);
+      --uc-titlechanged-container-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px);
     }
 
     :root[uidensity="compact"]
@@ -7442,7 +7433,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);
+      --uc-titlechanged-container-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
@@ -4,27 +4,34 @@
   }
 }
 
-.tabbrowser-tab {
+#tabbrowser-tabs {
   $containerPositionX: 9px;
-  --container-position-x: #{ $containerPositionX };
-  --container-position-y: 11px;
+  --uc-container-position-x: #{ $containerPositionX };
   &:-moz-locale-dir(rtl) {
-    --container-position-x: #{ $containerPositionX * -1 };
+    --uc-container-position-x: #{ $containerPositionX * -1 };
   }
+
+  --uc-container-position-y-default: 11.5px;
+  --uc-container-position-y: calc(50% + var(--uc-container-position-y-default));
+
+  // Pinned Tab - Titlechanged Indicator override
+  --uc-titlechanged-container-position-x: 32%, 50%, 70%;
 }
-:root[uidensity="compact"] .tabbrowser-tab {
-  --container-position-y: 10px;
+:root[uidensity="compact"] #tabbrowser-tabs {
+  --uc-container-position-y-default: 10.5px;
+
+  --uc-titlechanged-container-position-x: 30%, 50%, 70%;
 }
-:root[uidensity="touch"] .tabbrowser-tab {
-  --container-position-y: 12px;
+:root[uidensity="touch"] #tabbrowser-tabs {
+  --uc-container-position-y-default: 12.5px;
 }
 .tab-content:not([titlechanged])::before {
   /* Box Model */
   content: "";
   display: block;
   position: absolute;
   top: 50%;
-  transform: translate(var(--container-position-x), var(--container-position-y));
+  transform: translate(var(--uc-container-position-x), var(--uc-container-position-y));
 
   /* Shape */
   border-bottom: 2px solid var(--identity-icon-color);
@@ -49,7 +56,7 @@
 
 /* Pinned Tab */
 .tabbrowser-tab[pinned] .tab-content::before {
-  transform: translateY(var(--container-position-y));
+  transform: translateY(var(--uc-container-position-y));
   width: 16px;
 }
 @include Option("userChrome.tab.close_button_at_pinned") {
@@ -69,25 +76,14 @@
     var(--identity-icon-color) 2px,
     transparent 2px
   );
-  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]
-  > .tab-stack
-  > .tab-content[attention]:not([selected="true"]),
-:root[uidensity="compact"]
-  .tabbrowser-tab[usercontextid]
-  > .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%;
+  background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important;
+  background-position-x: var(--uc-titlechanged-container-position-x) !important;
 }
 
 .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));
+  background-position-y: top var(--uc-container-position-y) !important;
 }
 
 /* Pinned Tab - Titlechanged & soundplaying */
@@ -97,7 +93,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);
+  --uc-titlechanged-container-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])
@@ -107,5 +103,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);
+  --uc-titlechanged-container-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px);
 }