convert popup panel icons (uBlockOrigin/uMatrix-issues#68)

gorhill · Oct 3, 2018 · 52246a5 · 52246a5
1 parent 3ce4846
commit 52246a5
Show file tree

Hide file tree

Showing 10 changed files with 221 additions and 113 deletions.
diff --git a/src/css/common.css b/src/css/common.css
@@ -30,34 +30,6 @@
     vertical-align: baseline;
     display: inline-block;
     }
-.fa-icon {
-    align-self: center;
-    background-color: transparent;
-    border: border: 1px solid transparent;
-    display: inline-block;
-    height: 1.2em;
-    overflow: visible;
-    vertical-align: middle;
-    width: 1.2em;
-    }
-.fa-icon:hover {
-    background-color: #eee;
-    }
-.fa-icon.disabled {
-    fill: #888;
-    opacity: 0.4;
-    stroke: #fff;
-    pointer-events: none;
-    }
-.fa-icon > .badge {
-    font-family: sans-serif;
-    font-size: 80%;
-    pointer-events: none;
-    transform: translate(100%, 110%);
-    }
-.fa-icon.disabled > .badge {
-    display: none;
-    }
 
 body {
     font-size: 14px;

diff --git a/src/css/fa-icons.css b/src/css/fa-icons.css
@@ -0,0 +1,72 @@
+.fa-icon {
+    align-items: center;
+    background-color: transparent;
+    border: 0;
+    display: inline-flex;
+    justify-content: flex-start;
+    margin: 0;
+    padding: 0.1em;
+    position: relative;
+    }
+.fa-icon:hover {
+    background-color: #eee;
+    }
+.fa-icon > * {
+    pointer-events: none;
+    }
+.fa-icon.disabled {
+    color: #888;
+    fill: #888;
+    opacity: 0.25;
+    stroke: #888;
+    pointer-events: none;
+    }
+.fa-icon > .fa-icon-badge,
+.fa-icon.disabled > .fa-icon-badge {
+    display: none;
+    }
+.fa-icon.fa-icon-badged > .fa-icon-badge {
+    background-color: rgba(255, 255, 255, 0.7);
+    border-radius: 3px;
+    bottom: 1px;
+    display: inline-block;
+    font-family: sans-serif;
+    font-size: 40%;
+    position: absolute;
+    right: 1px;
+    }
+.fa-icon.disabled > .fa-icon-badge {
+    display: none;
+    }
+
+.fa-icon > svg {
+    height: 1em;
+    }
+.fa-icon_puzzle-piece,
+.fa-icon_reply-all {
+    width: calc(1em * 576 / 512);
+    }
+.fa-icon_download,
+.fa-icon_eraser,
+.fa-icon_filter,
+.fa-icon_list-alt,
+.fa-icon_power-off,
+.fa-icon_reply,
+.fa-icon_sync-alt,
+.fa-icon_th,
+.fa-icon_th-list {
+    width: calc(1em * 512 / 512);
+    }
+.fa-icon_lock {
+    width: calc(1em * 448 / 512);
+    }
+.fa-icon_times {
+    width: calc(1em * 352 / 512);
+    }
+.fa-icon_angle-up,
+.fa-icon_angle-double-up {
+    width: calc(1em * 320 / 512);
+    }
+.fa-icon_ellipsis-v {
+    width: calc(1em * 192 / 512);
+    }
diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css
@@ -11,9 +11,8 @@ body {
     }
 .fa-icon {
     cursor: pointer;
-    height: 1.5em;
-    padding: 0.5em 1em;
-    width: 1.5em;
+    font-size: 150%;
+    padding: 0.4em 0.6em;
     }
 #toolbar {
     background-color: white;
@@ -88,14 +87,15 @@ body.popupPanelOn #popupPanelContainer {
     display: none;
     }
 
-#popupPanelButton > use {
-    transform: scaleY(0.4);
+#popupPanelButton use {
+    transform: scale(1, 0.4);
     }
-body.popupPanelOn #popupPanelButton > use {
-    transform: scaleY(1);
+body.popupPanelOn #popupPanelButton use {
+    transform: scale(1, 1);
     }
-body.compactView #compactViewToggler {
-    transform: rotateZ(180deg);
+body.compactView #compactViewToggler use {
+    transform: scale(1, -1);
+    transform-origin: center;
     }
 #filterButton {
     opacity: 0.25;
@@ -254,15 +254,20 @@ body.compactView #content tr:not(.vExpanded) td {
     flex-direction: column;
     justify-content: space-around;
     margin-left: 0.5em;
+    padding: 0.2em;
+    }
+.ruleEditorToolbar .fa-icon {
+    padding: 0.4em;
     }
 
 .fa-icon.scopeRel {
+    color: #24c;
     fill: #24c;
     }
 body[data-scope="*"] .fa-icon.scopeRel {
+    color: #000;
     fill: #000;
     }
-
 .ruleWidgets {
     display: flex;
     flex-direction: column;

diff --git a/src/css/popup.css b/src/css/popup.css
@@ -58,16 +58,6 @@ a {
     position: relative;
     text-align: center;
     }
-#gotoDashboard > span:last-of-type {
-    opacity: 0.5;
-    position: absolute;
-    }
-body[dir="ltr"] #gotoDashboard > span:last-of-type {
-    left: 3px;
-    }
-body[dir="rtl"] #gotoDashboard > span:last-of-type {
-    right: 3px;
-    }
 
 .paneHead {
     background-color: white;
@@ -107,6 +97,18 @@ body[dir="rtl"] #gotoDashboard > span:last-of-type {
     padding: 0;
     }
 
+.toolbar .fa-icon {
+    cursor: pointer;
+    font-size: 150%;
+    padding: 0.3em 0.4em;
+    }
+.toolbar .fa-icon.scopeRel {
+    fill: #24c;
+    }
+body[data-scope="*"] .toolbar .fa-icon.scopeRel {
+    fill: #000;
+}
+
 body .toolbar button {
     background-color: white;
     border: 0;
@@ -128,6 +130,7 @@ body .toolbar button.fa {
     }
 #mtxSwitch_matrix-off.switchTrue {
     color: #a00;
+    fill: #a00;
     }
 
 #mtxSwitches > li  {
@@ -274,9 +277,11 @@ button.disabled > span.badge {
     }
 .recipe > div > span {
     color: #888;
+    fill: #888;
     }
 .recipe > div > span:hover {
     color: #000;
+    fill: #000;
     }
 .recipe .expander {
     display: inline-block;
@@ -300,14 +305,12 @@ button.disabled > span.badge {
 .recipe .committer {
     cursor: pointer;
     display: none;
-    font-size: 120%;
-    padding: 0.4em;
+    font-size: 100%;
     text-align: center;
-    width: 1em;
     }
 .recipe.mustImport .importer,
 .recipe.mustCommit:not(.mustImport) .committer {
-    display: inline;
+    display: inline-block;
     }
 .recipe:hover {
     background-color: #eef;
@@ -588,38 +591,31 @@ body.colorblind .rw .matCell.t2 #blacklist:hover {
     background-color: transparent;
     }
 #domainOnly {
-    margin: 0;
-    border: 1px solid gray;
+    align-items: center;
+    background-color: white;
+    border: 1px solid #ccc;
     border-radius: 3px;
-    padding: 0 1px;
-    position: absolute;
-    font-size: 1.1em;
-    left: 20%;
     bottom: -20%;
-    display: none;
     color: black;
-    background-color: white;
+    cursor: pointer;
+    display: none;
+    fill: black;
+    font-size: 100%;
+    left: 20%;
+    margin: 0;
     opacity: 0.25;
+    padding: 3px;
+    position: absolute;
     z-index: 10000;
-    cursor: pointer;
-    }
-.matSection #domainOnly .fa:before {
-    content: '\f106';
-    }
-.matSection.collapsed #domainOnly .fa:before {
-    content: '\f107';
-    }
-.matSection.collapsible .matRow.l1 .matCell:nth-of-type(1):hover #domainOnly {
-    display: block;
-    }
-#matHead #domainOnly .fa:before {
-    content: '\f106';
     }
-#matHead.collapsed #domainOnly .fa:before {
-    content: '\f107';
+.matSection.collapsed #domainOnly,
+#matHead.collapsed #domainOnly {
+    transform: rotate(0.5turn);
+    transform-origin: center;
     }
+.matSection.collapsible .matRow.l1 .matCell:nth-of-type(1):hover #domainOnly,
 #matHead.collapsible .matRow .matCell:nth-of-type(1):hover #domainOnly {
-    display: block;
+    display: inline-flex;
     }
 #domainOnly:hover {
     opacity: 1;