Fix some issues with fractional scaling

See PROxZIMA#36
iamkroot · Feb 1, 2023 · 14ae1da · 14ae1da
1 parent 1941ecd
commit 14ae1da
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 20 deletions.
diff --git a/css/tabbar.css b/css/tabbar.css
@@ -87,11 +87,11 @@
   /* Border top radius*/
   border-radius: var(--tab-radius) var(--tab-radius) 0 0 !important;
   border-bottom: var(--tab-border-width) solid var(--back-color1) !important;
-  --box-shadow-width: 9999px;
-  box-shadow: 0 calc(0px - var(--box-shadow-width)) 0 calc(var(--box-shadow-width) - var(--tab-border-width) - var(--tab-radius)) var(--back-color1) !important;
+  --box-shadow-width: 624.9375rem;
+  box-shadow: 0 calc(0rem - var(--box-shadow-width)) 0 calc(var(--box-shadow-width) - var(--tab-border-width) - var(--tab-radius)) var(--back-color1) !important;
   background: var(--back-color1) !important;
   background-clip: padding-box !important;
-  padding-inline: 0px !important;
+  padding-inline: 0rem !important;
   position: relative !important;
   z-index: 1 !important;
   overflow: visible !important;
@@ -111,27 +111,27 @@
   height: var(--tab-radius) !important;
   background: var(--back-color1);
   background-clip: content-box;
-  bottom: calc(0px - var(--tab-border-width)) !important;
+  bottom: calc(0rem - var(--tab-border-width)) !important;
   pointer-events: none !important;
   border-bottom: var(--tab-border-width) solid transparent !important;
 }
 
 .tabbrowser-tab[visuallyselected] .tab-stack::before {
   border-bottom-right-radius: var(--tab-radius) !important;
   left: 0 !important;
-  transform: translateX(calc(0px - var(--tab-border-width) - var(--tab-radius))) !important;
+  transform: translateX(calc(0rem - var(--tab-border-width) - var(--tab-radius))) !important;
   border-right: var(--tab-border-width) solid transparent !important;
-  box-shadow: 4px 4px 0 4px var(--back-color1), calc(0px - var(--box-shadow-width) - var(--tab-border-width)) 0 0 var(--box-shadow-width) var(--back-color1) !important;
-  clip-path: polygon(calc(0px - var(--box-shadow-width)) -10px, 100% -10px, 100% 100%, 0 100%, 0 calc(100% - var(--tab-border-width)), calc(0px - var(--box-shadow-width)) calc(100% - var(--tab-border-width)));
+  box-shadow: 0.25rem 0.25rem 0 0.25rem var(--back-color1), calc(0rem - var(--box-shadow-width) - var(--tab-border-width)) 0 0 var(--box-shadow-width) var(--back-color1) !important;
+  clip-path: polygon(calc(0rem - var(--box-shadow-width)) calc(-0.625rem), 100% -0.625rem, 100% 100%, 0 100%, 0 calc(100% - var(--tab-border-width)), calc(0rem - var(--box-shadow-width)) calc(100% - var(--tab-border-width)));
 }
 
 .tabbrowser-tab[visuallyselected] .tab-stack::after {
   border-bottom-left-radius: var(--tab-radius) !important;
   right: 0 !important;
   transform: translateX(calc(var(--tab-border-width) + var(--tab-radius))) !important;
   border-left: var(--tab-border-width) solid transparent !important;
-  box-shadow: -4px 4px 0 4px var(--back-color1), calc(var(--box-shadow-width) + var(--tab-border-width)) 0 0 var(--box-shadow-width) var(--back-color1) !important;
-  clip-path: polygon(var(--box-shadow-width) -10px, 0 -10px, 0 100%, 100% 100%, 100% calc(100% - var(--tab-border-width)), var(--box-shadow-width) calc(100% - var(--tab-border-width)));
+  box-shadow: -0.25rem 0.25rem 0 0.25rem var(--back-color1), calc(var(--box-shadow-width) + var(--tab-border-width)) 0 0 var(--box-shadow-width) var(--back-color1) !important;
+  clip-path: polygon(var(--box-shadow-width) -0.625rem, 0 -0.625rem, 0 100%, 100% 100%, 100% calc(100% - var(--tab-border-width)), var(--box-shadow-width) calc(100% - var(--tab-border-width)));
 }
 
 .tabbrowser-tab:not([visuallyselected]) {
@@ -148,6 +148,17 @@
   margin-right: var(--tab-radius) !important;
 }
 
+/* It seems first-visible-tab attribute isn't available, so use :first-of-type */
+#tabbrowser-tabs .tabbrowser-tab:first-of-type[visuallyselected] {
+  margin-left: var(--tab-radius) !important;
+}
+#tabbrowser-tabs .tabbrowser-tab:last-of-type[visuallyselected] {
+  margin-right: var(--tab-radius) !important;
+}
+#tabbrowser-tabs .tabbrowser-tab:first-of-type[visuallyselected] .tab-stack::before {
+  clip-path: none;
+}
+
 /* The animation in the toolbox*/
 #navigator-toolbox:before {
   content: "";
@@ -208,7 +219,7 @@
 */
 
 #navigator-toolbox {
-  border-bottom: 0px !important;
+  border-bottom: 0rem !important;
 }
 
 /* Glowing tab favicon */
@@ -263,7 +274,7 @@
 #tabs-newtab-button,
 #firefox-view-button {
   background: var(--back-color1) !important;
-  padding: 0px !important;
+  padding: 0rem !important;
 }
 
 #new-tab-button > .toolbarbutton-icon,

diff --git a/css/tweaks.css b/css/tweaks.css
@@ -9,7 +9,7 @@
 }
 
 .titlebar-spacer[type="post-tabs"] {
-  width: 20px !important;
+  width: 1.25rem !important;
   background: var(--back-color1) !important;
   position: relative !important;
 }

diff --git a/userChrome.css b/userChrome.css
@@ -43,18 +43,18 @@
 }
 
 :root {
-  --bookmark-block-padding: 1px !important;
-  /*--tab-min-height: 29px !important;*/
+  --bookmark-block-padding: 0.0625rem !important;
+  /*--tab-min-height: 1.8125rem !important;*/
   --menupopup-height: var(--tab-min-height);
-  --sidebar-menupopup-height: 36px;
-  --navbar-margin-top: calc(0px - var(--tab-min-height));
+  --sidebar-menupopup-height: 2.25rem;
+  --navbar-margin-top: calc(0rem - var(--tab-min-height));
   --navbar-percent: 32vw;
   --subview-height: var(--tab-min-height);
-  --tab-radius: 8px;
-  --tab-border-width: 2px;
+  --tab-radius: 0.5rem;
+  --tab-border-width: 0.125rem;
   --toolbar-percent: 68vw;
-  --toolbarbutton-inner-padding: 6px !important;
-  --toolbarbutton-outer-padding: 3px !important;
+  --toolbarbutton-inner-padding: 0.375rem !important;
+  --toolbarbutton-outer-padding: 0.1875rem !important;
   /* 1px */
   --urlbar-icon-padding: 3px !important;
   --urlbar-min-height: calc(var(--tab-min-height) - 3px) !important;