[mv3] Have the slider button size dictates all other dimensions

platform/mv3/extension/css/filtering-mode.css

@@ -1,20 +1,24 @@
+:root {
+    --filtering-mode-button-size: 60px; /* should be multiple of 4 */
+    --filtering-mode-slider-width: calc(4 * var(--filtering-mode-button-size) + 3px);
+    }
+
 .filteringModeSlider {
     align-items: center;
     container-type: size;
     display: flex;
-    height: 60px;
+    height: var(--filtering-mode-button-size);
     justify-content: center;
     position: relative;
-    width: 240px;
+    width: var(--filtering-mode-slider-width);
     }
 
 .filteringModeButton {
     background-color: var(--surface-1);
-    box-sizing: border-box;
+    border-radius: 20%;
-    border-radius: 30% 15% / 15% 30%;
+    height: var(--filtering-mode-button-size);
-    height: calc(25cqw + 2px);
     position: absolute;
-    width: calc(25cqw + 2px);
+    width: var(--filtering-mode-button-size);
     z-index: 10;
     }
 
@@ -23,9 +27,8 @@
     border: 4px solid var(--accent-surface-1);
     border-radius: inherit;
     box-sizing: border-box;
-    height: calc(100% - 2px);
+    height: 100%;
-    margin: 1px;
+    width: 100%;
-    width: calc(100% - 2px);
     }
 
 .filteringModeSlider.moving .filteringModeButton > div,
@@ -40,14 +43,12 @@
 
 .filteringModeSlider span[data-level] {
     background-color: var(--accent-surface-1);
-    border: 1px solid var(--accent-surface-1);
-    box-sizing: border-box;
     display: inline-flex;
+    flex-shrink: 0;
     height: 30%;
     margin-left: 1px;
-    width: 25%;
+    width: var(--filtering-mode-button-size);
     }
-
 .filteringModeSlider span[data-level]:first-of-type {
     margin-left: 0;
     }
@@ -60,25 +61,33 @@
     left: 0;
     }
 .filteringModeSlider[data-level="1"] .filteringModeButton {
-    left: calc(25% - 1px);
+    left: calc(var(--filtering-mode-button-size) + 1px);
     }
 .filteringModeSlider[data-level="2"] .filteringModeButton {
-    left: calc(50% - 1px);
+    left: calc(var(--filtering-mode-button-size) * 2 + 2px);
     }
 .filteringModeSlider[data-level="3"] .filteringModeButton {
-    left: calc(75% - 1px);
+    left: calc(var(--filtering-mode-button-size) * 3 + 3px);
+    }
+
+[dir="rtl"] .filteringModeSlider span[data-level] {
+    margin-left: 0;
+    margin-right: 1px;
+    }
+[dir="rtl"] .filteringModeSlider span[data-level]:first-of-type {
+    margin-right: 0;
     }
 [dir="rtl"] .filteringModeSlider[data-level="0"] .filteringModeButton {
-    left: 75%;
+    right: 0;
     }
 [dir="rtl"] .filteringModeSlider[data-level="1"] .filteringModeButton {
-    left: 50%;
+    right: calc(var(--filtering-mode-button-size) + 1px);
     }
 [dir="rtl"] .filteringModeSlider[data-level="2"] .filteringModeButton {
-    left: 25%;
+    right: calc(var(--filtering-mode-button-size) * 2 + 2px);
     }
 [dir="rtl"] .filteringModeSlider[data-level="3"] .filteringModeButton {
-    left: 0;
+    right: calc(var(--filtering-mode-button-size) * 3 + 3px);
     }
 
 

platform/mv3/extension/css/popup.css

@@ -10,7 +10,10 @@
     --popup-gap: var(--font-size);
     --popup-gap-thin: calc(0.5 * var(--popup-gap));
     --popup-gap-extra-thin: calc(0.25 * var(--popup-gap));
-    --popup-main-min-width: 18em;
+    --popup-main-min-width: calc(
+        var(--filtering-mode-slider-width) +
+        var(--filtering-mode-button-size) / 2
+    );
     --popup-firewall-min-width: 30em;
     --popup-rule-cell-width: 5em;
     font-size: var(--font-size);
@@ -34,11 +37,14 @@ a {
     display: flex;
     flex-direction: column;
     max-width: 340px;
-    min-width: 100%;
+    min-width: var(--popup-main-min-width);
     }
 :root.portrait #main {
     align-self: inherit;
     }
+:root.mobile #main {
+    min-width: 100%;
+    }
 hr {
     border: 0;
     border-top: 1px solid var(--hr-ink);
@@ -70,11 +76,6 @@ body[data-forbid~="dashboard"] #gotoDashboard {
     display: none;
     }
 
-.lrspacer {
-    padding-left: var(--default-gap-small);
-    padding-right: var(--default-gap-small);
-    }
-
 #filteringModeText {
     color: var(--ink-3);
     margin-bottom: var(--default-gap-small);
@@ -102,7 +103,6 @@ body[data-forbid~="dashboard"] #gotoDashboard {
     align-self: center;
     margin-bottom: var(--popup-gap);
     margin-top: var(--popup-gap);
-    width: calc(var(--popup-main-min-width) - 1em);
     }
 
 .rulesetTools {

platform/mv3/extension/css/settings.css

@@ -1,3 +1,7 @@
+:root {
+    --filtering-mode-button-size: 32px;
+    }
+
 body.loading {
     visibility: hidden;
     }
@@ -67,9 +71,7 @@ label:has(input[type="checkbox"][disabled]) + legend {
     white-space: pre-line;
     }
 .filteringModeSlider {
-    height: calc(60px / 2);
     pointer-events: none;
-    width: calc(240px / 2);
     }
 
 h3[data-i18n="filteringMode0Name"]::first-letter {

platform/mv3/extension/popup.html

@@ -18,19 +18,15 @@
 <div id="main">
     <div id="hostname"><span></span>&shy;<span></span></div>
     <!-- -------- -->
-    <div class="lrspacer">
+    <div class="filteringModeSlider">
-        <div class="filteringModeSlider">
+        <div class="filteringModeButton"><div></div></div>
-            <div class="filteringModeButton"><div></div></div>
+        <span data-level="0"></span>
-            <span data-level="0"></span>
+        <span data-level="1"></span>
-            <span data-level="1"></span>
+        <span data-level="2"></span>
-            <span data-level="2"></span>
+        <span data-level="3"></span>
-            <span data-level="3"></span>
-        </div>
     </div>
     <!-- -------- -->
-    <div class="lrspacer">
+    <div id="filteringModeText"><label data-i18n="popupFilteringModeLabel">_</label><br><span>_</span><span></span></div>
-        <div id="filteringModeText"><label data-i18n="popupFilteringModeLabel">_</label><br><span>_</span><span></span></div>
-    </div>
     <!-- -------- -->
     <div class="toolRibbon pageTools">
         <span id="gotoZapper" class="fa-icon tool enabled" data-i18n-title="zapperTipEnter">bolt<span class="caption" data-i18n="zapperTipEnter"></span></span>