tabs: fix borders for high dpi screens matcornic#550

static/css/theme.css

@@ -6,60 +6,90 @@
 need a way to calculate them ourself */
 :root {
     --dpr: 1;
+    --bpx: 1;
 }
 @media (min-resolution: 105dpi) {
     :root {
         --dpr: 1.1;
+        --bpx: 1.1;
     }
 }
 @media (min-resolution: 115dpi) {
-        :root {
-            --dpr: 1.2;
-        }
+    :root {
+        --dpr: 1.2;
+        --bpx: 1.2;
     }
+}
 @media (min-resolution: 120dpi) {
     :root {
         --dpr: 1.25;
+        --bpx: 1.25;
     }
 }
 @media (min-resolution: 128dpi) {
     :root {
         --dpr: 1.333;
+        --bpx: 1.333;
     }
 }
 @media (min-resolution: 144dpi) {
     :root {
         --dpr: 1.5;
+        --bpx: 1.5;
     }
 }
 @media (min-resolution: 160dpi) {
     :root {
         --dpr: 1.666;
+        --bpx: 1.666;
     }
 }
 @media (min-resolution: 168dpi) {
     :root {
         --dpr: 1.75;
+        --bpx: 1.75;
     }
 }
 @media (min-resolution: 192dpi) {
     :root {
         --dpr: 2;
+        --bpx: 1;
     }
 }
 @media (min-resolution: 240dpi) {
     :root {
         --dpr: 2.5;
+        --bpx: 1.25;
     }
 }
 @media (min-resolution: 288dpi) {
     :root {
         --dpr: 3;
+        --bpx: 1;
     }
 }
 @media (min-resolution: 384dpi) {
     :root {
         --dpr: 4;
+        --bpx: 1;
+    }
+}
+@media (min-resolution: 480dpi) {
+    :root {
+        --dpr: 5;
+        --bpx: 1.25;
+    }
+}
+@media (min-resolution: 576dpi) {
+    :root {
+        --dpr: 6;
+        --bpx: 1.5;
+    }
+}
+@media (min-resolution: 768dpi) {
+    :root {
+        --dpr: 8;
+        --bpx: 1;
     }
 }
 
@@ -1909,7 +1939,7 @@ html[dir="rtl"] #sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
     display: none;
     /* if setting a border to 1px, a browser instead sets it to 1dppx which is not
     usable as a unit yet, so we have to calculate it ourself */
-    margin-top: calc( -1px / var(--dpr) );
+    margin-top: calc( -1px / var(--bpx) );
     z-index: 10;
 }