Allow customization of some popup panel CSS properties

gorhill · gorhill · commit 1cdffea6186a · 2020-09-21T07:18:11.000-04:00
Related issue: - uBlockOrigin/uBlock-issues#1254 The advanced setting `uiStyles`[1] can be used to control the minimum width of both the main and firewall panes in the popup panel: - `--popup-main-min-width`, default to `18em` - `--popup-firewall-min-width`, default to `30em` * * * [1] https://github.com/gorhill/uBlock/wiki/Advanced-settings#uistyles
diff --git a/src/css/popup-fenix.css b/src/css/popup-fenix.css
@@ -13,7 +13,10 @@
     --font-size: 14px;
     --popup-gap: var(--font-size);
     --popup-gap-thin: calc(0.5 * var(--popup-gap));
-    --popup-gap-extra-thin: calc(0.25 * var(--font-size));
+    --popup-gap-extra-thin: calc(0.25 * var(--popup-gap));
+    --popup-main-min-width: 18em;
+    --popup-firewall-min-width: 30em;
+    --popup-rule-cell-width: 5em;
     font-size: var(--font-size);
     line-height: 20px;
     }
@@ -38,7 +41,7 @@ a {
 #main {
     align-self: flex-start;
     max-width: 340px;
-    min-width: 18em;
+    min-width: var(--popup-main-min-width);
     }
 :root.portrait #main {
     align-self: inherit;
@@ -258,11 +261,10 @@ body[data-more=""] #lessButton {
     margin: 0;
     max-height: 600px;
     max-width: 460px;
-    min-width: 30em;
+    min-width: var(--popup-firewall-min-width);
     padding: 0;
     overflow-y: auto;
     text-align: right;
-    --rule-cell-width: 5em;
     }
 :root.desktop body.vMin #firewall {
     max-height: 100vh;
@@ -306,7 +308,7 @@ body[data-more=""] #lessButton {
     justify-content: flex-end;
     padding-right: 2px;
     white-space: normal;
-    width: calc(100% - var(--rule-cell-width));
+    width: calc(100% - var(--popup-rule-cell-width));
     word-break: break-word;
     }
 #firewall > div.isCname > span:first-of-type {
@@ -324,7 +326,7 @@ body[data-more=""] #lessButton {
 #firewall > div > span:first-of-type ~ span {
     flex-shrink: 0;
     margin-left: 1px;
-    width: var(--rule-cell-width);
+    width: var(--popup-rule-cell-width);
     }
 #firewall > div > span:nth-of-type(2) {
     display: none;
@@ -398,7 +400,7 @@ body[data-more=""] #lessButton {
     }
 
 body.advancedUser #firewall > div > span:first-of-type {
-    width: calc(100% - 2 * var(--rule-cell-width));
+    width: calc(100% - 2 * var(--popup-rule-cell-width));
     }
 body.advancedUser #firewall > div > span:nth-of-type(2) {
     display: inline-flex;
