From b20e33ff18f3761044a7ed7a84e819784a1d2645 Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Tue, 14 Apr 2020 09:15:36 -0400
Subject: [PATCH] Fine tune CSS to restore intended visuals on fenix

---
 src/css/popup-fenix.css    | 21 ++++++++++++---------
 src/css/popup.css          |  8 ++++----
 src/css/themes/default.css |  6 +++---
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/css/popup-fenix.css b/src/css/popup-fenix.css
index fdf45b478..3a75456ef 100644
--- a/src/css/popup-fenix.css
+++ b/src/css/popup-fenix.css
@@ -9,10 +9,15 @@
 
 /* Internal CSS values */
 body {
+    font: 14px/20px sans-serif;
+    min-width: 360px;
     white-space: nowrap;
-    min-width: 375px;
     }
-
+@media (pointer: coarse) {
+    body {
+        min-width: 100vw;
+    }
+}
 a {
     color: inherit;
     text-decoration: none;
@@ -130,11 +135,6 @@ body.needSave #revertRules {
     flex-direction: column;
     font-size: 1.4em;
     }
-.toolRibbon [data-i18n] {
-    font-size: x-small;
-    margin-top: 0.8em;
-    text-align: center;
-    }
 
 .tool {
     cursor: pointer;
@@ -147,6 +147,9 @@ body.needSave #revertRules {
     }
 .tool [data-i18n] {
     display: var(--fg-popup-icon-caption-display);
+    font: 10px/12px sans-serif;
+    margin-top: 0.8em;
+    text-align: center;
     }
 
 .statValue {
@@ -239,7 +242,7 @@ body[dir="rtl"] #tooltip {
     display: none;
     }
 #firewallContainer > div > span {
-    background-color: var(--bg-popup-cell);
+    background-color: var(--bg-popup-cell-2);
     border: none;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
@@ -262,7 +265,7 @@ body[dir="rtl"] #tooltip {
     word-break: break-word;
     }
 #firewallContainer > div.isCname > span:first-of-type {
-    color: var(--fg-popup-fwcell-cname);
+    color: var(--fg-popup-cell-cname);
     }
 #firewallContainer > div > span:first-of-type > sub {
     display: inline-block;
diff --git a/src/css/popup.css b/src/css/popup.css
index a347a45b8..602fbb6eb 100644
--- a/src/css/popup.css
+++ b/src/css/popup.css
@@ -8,7 +8,7 @@ body {
     }
 
 h2 {
-    background-color: var(--bg-popup-cell);
+    background-color: var(--bg-popup-cell-1);
     border: 0;
     color: var(--fg-0-70);
     cursor: pointer;
@@ -140,7 +140,7 @@ body.off #switch .fa-icon {
     margin: 0;
     }
 #extraTools {
-    background-color: var(--bg-popup-cell);
+    background-color: var(--bg-popup-cell-1);
     border: 0;
     display: flex;
     justify-content: center;
@@ -261,7 +261,7 @@ body[dir="rtl"] #tooltip {
     display: none;
     }
 #firewallContainer > div > span {
-    background-color: var(--bg-popup-cell);
+    background-color: var(--bg-popup-cell-1);
     border: none;
     box-sizing: border-box;
     display: inline-flex;
@@ -283,7 +283,7 @@ body[dir="rtl"] #tooltip {
     word-break: break-word;
     }
 #firewallContainer > div.isCname > span:first-of-type {
-    color: var(--fg-popup-fwcell-cname);
+    color: var(--fg-popup-cell-cname);
     }
 #firewallContainer > div > span:first-of-type > sub {
     display: inline-block;
diff --git a/src/css/themes/default.css b/src/css/themes/default.css
index 76ec67b44..337c61c02 100644
--- a/src/css/themes/default.css
+++ b/src/css/themes/default.css
@@ -59,12 +59,12 @@
     --fg-tooltip: var(--fg-0);
 
     /* popup panel */
-    --bg-popup-1: hsla(261, 0%, 93%, 1);
     --fg-popup-power: hsla(214, 100%, 44%, 1);
     --fg-popup-power-hover: opacity(80%);
+    --bg-popup-cell-1: hsla(261, 0%, 93%, 1);
+    --bg-popup-cell-2: rgb(224, 224, 230);
     --bg-popup-cell-label-filter: opacity(40%);
-    --fg-popup-fwcell-cname: hsla(240, 100%, 40%, 1);
-    --bg-popup-cell: var(--bg-popup-1);
+    --fg-popup-cell-cname: hsla(240, 100%, 40%, 1);
     --bg-popup-cell-allow: hsla(120, 40%, 75%, 1);
     --bg-popup-cell-allow-own: hsla(120, 100%, 30%, 1);
     --bg-popup-cell-noop: hsla(0, 0%, 75%, 1);