Fine tune various visuals

Related feedback:
- e917213e81 (commitcomment-38533349)

src/1p-filters.html

@@ -26,7 +26,7 @@
     <p>
         <button id="userFiltersApply" class="custom important iconifiable" type="button" disabled><span class="fa">&#xf00c;</span><span data-i18n="1pApplyChanges"></span></button>
         <button id="userFiltersRevert" class="custom iconifiable" type="button" disabled><span class="fa">&#xf0e2;</span><span data-i18n="genericRevert"></span></button>
-        &emsp;&emsp;
+        &ensp;
         <button id="importUserFiltersFromFile" class="custom iconifiable" type="button"><span class="fa">&#xf019;</span><span data-i18n="1pImport"></span></button>
         <button id="exportUserFiltersToFile" class="custom iconifiable" type="button"><span class="fa">&#xf093;</span><span data-i18n="1pExport"></span></button>
     </p>

src/css/3p-filters.css

@@ -77,7 +77,7 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
     color: var(--fg-0-50);
     display: none;
     fill: var(--fg-0-50);
-    font-size: 110%;
+    font-size: 120%;
     margin: 0 0.2em 0 0;
     }
 .listEntry .fa:hover,
@@ -91,7 +91,7 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
 .listEntry a.towiki {
     display: inline-flex;
     }
-.listEntry.support > a.support {
+.listEntry.support a.support {
     display: inline-flex;
     }
 .listEntry .remove,

src/css/codemirror.css

@@ -31,17 +31,14 @@
 
 .cm-search-widget {
     align-items: center;
-    background-color: #eee;
+    background-color: var(--bg-code);
     cursor: default;
     direction: ltr;
     display: flex;
     flex-shrink: 0;
     font-size: 110%;
     justify-content: center;
-    padding: 4px 8px;
-    /* position: absolute; */
-    right: 2em;
-    top: 0;
+    padding: 0.5em;
     user-select: none;
       -moz-user-select: none;
       -webkit-user-select: none;
@@ -58,11 +55,13 @@
     border: 1px solid gray;
     border-radius: 3px;
     display: inline-flex;
-    min-width: 16em;
+    max-width: 50vw;
+    width: 16em;
     }
 .cm-search-widget-input > input {
     border: 0;
     flex-grow: 1;
+    width: 100%;
     }
 .cm-search-widget-input > .cm-search-widget-count {
     align-items: center;

src/css/common.css

@@ -74,7 +74,11 @@ button.custom.important[disabled] {
     }
 button.custom.iconifiable > .fa,
 button.custom.iconifiable > .fa-icon {
-    padding-right: 0.5em;
+    padding-left: 0;
+    padding-right: 0.4em;
+    }
+button.custom.iconifiable > .fa-icon {
+    font-size: 120%;
     }
 body[dir="rtl"] button.custom.iconifiable > .fa,
 body[dir="rtl"] button.custom.iconifiable > .fa-icon {

src/css/dashboard-common.css

@@ -23,7 +23,7 @@ a {
 .fa-icon.info {
     color: var(--fg-icon-info-lvl-0-dimmed);
     fill: var(--fg-icon-info-lvl-0-dimmed);
-    font-size: 110%;
+    font-size: 120%;
     }
 .fa.info:hover,
 .fa-icon.info:hover {

src/css/fa-icons.css

@@ -5,7 +5,7 @@
     display: inline-flex;
     justify-content: center;
     margin: 0;
-    padding: 0.1em;
+    padding: 0 0.1em;
     position: relative;
     user-select: none;
     vertical-align: text-bottom;

src/css/popup-fenix.css

@@ -15,7 +15,8 @@ body {
     }
 @media (pointer: coarse) {
     body {
-        min-width: 100vw;
+        min-width: unset;
+        width: 100%;
     }
 }
 a {
@@ -148,7 +149,7 @@ body.needSave #revertRules {
 .tool [data-i18n] {
     display: var(--fg-popup-icon-caption-display);
     font: 10px/12px sans-serif;
-    margin-top: 0.8em;
+    margin-top: 0.5em;
     text-align: center;
     }