Revert to Fontawesome 4.7 icons

Found out Fonteawesome 5 is a different project than former Fontawesome (of which 4.7 is latest). See uBlockOrigin/uBlock-issues#249 (comment)
Noxgrim · Dec 26, 2018 · 2f1a9af · 2f1a9af
1 parent 698076b
commit 2f1a9af
Show file tree

Hide file tree

Showing 10 changed files with 124 additions and 99 deletions.
diff --git a/src/cloud-ui.html b/src/cloud-ui.html
@@ -5,10 +5,10 @@
 <title></title>
 </head>
 <body>
-<button id="cloudPush" type="button" title="cloudPush"><span class="fa-icon">cloud-upload-alt</span></button>
+<button id="cloudPush" type="button" title="cloudPush"><span class="fa-icon">cloud-upload</span></button>
 <span data-i18n="cloudNoData"></span>
-<button id="cloudPull" type="button" title="cloudPull" disabled><span class="fa-icon">cloud-download-alt</span></button>
-<button id="cloudPullAndMerge" type="button" title="cloudPullAndMerge" disabled><span class="fa-icon">cloud-download-alt</span><span class="fa-icon">plus</span></button>
+<button id="cloudPull" type="button" title="cloudPull" disabled><span class="fa-icon">cloud-download</span></button>
+<button id="cloudPullAndMerge" type="button" title="cloudPullAndMerge" disabled><span class="fa-icon">cloud-download</span><span class="fa-icon">plus</span></button>
 <p id="cloudError"><span></span></p>
 <span id="cloudCog" class="fa-icon">cog</span>
 <div id="cloudOptions">

diff --git a/src/css/fa-icons.css b/src/css/fa-icons.css
@@ -3,10 +3,12 @@
     background-color: transparent;
     border: 0;
     display: inline-flex;
-    justify-content: flex-start;
+    justify-content: center;
     margin: 0;
     padding: 0.1em;
     position: relative;
+    user-select: none;
+    -webkit-user-select: none;
     }
 .fa-icon > * {
     pointer-events: none;
@@ -44,49 +46,61 @@
     width: 1em;
     }
 .fa-icon > .fa-icon_cloud-download-alt,
-.fa-icon > .fa-icon_cloud-upload-alt {
-    width: calc(1em * 640 / 512);
+.fa-icon > .fa-icon_cloud-upload-alt,
+.fa-icon > .fa-icon_eraser {
+    width: calc(1em * 1920 / 1792);
     }
-.fa-icon > .fa-icon_exclamation-triangle,
-.fa-icon > .fa-icon_home,
+.fa-icon > .fa-icon_exclamation-triangle {
+    width: calc(1em * 1794 / 1792);
+    }
+.fa-icon > .fa-icon_list-alt,
+.fa-icon > .fa-icon_reply,
+.fa-icon > .fa-icon_reply-all,
+.fa-icon > .fa-icon_th {
+    width: calc(1em * 1792 / 1792);
+    }
+.fa-icon > .fa-icon_spinner {
+    width: calc(1em * 1728 / 1792);
+    }
+.fa-icon > .fa-icon_download,
 .fa-icon > .fa-icon_puzzle-piece,
-.fa-icon > .fa-icon_reply-all {
-    width: calc(1em * 576 / 512);
+.fa-icon > .fa-icon_search-minus,
+.fa-icon > .fa-icon_search-plus,
+.fa-icon > .fa-icon_unlink {
+    width: calc(1em * 1664 / 1792);
+    }
+.fa-icon > .fa-icon_home {
+    width: calc(1em * 1612 / 1792);
     }
 .fa-icon > .fa-icon_clock,
 .fa-icon > .fa-icon_cog,
-.fa-icon > .fa-icon_download,
-.fa-icon > .fa-icon_eraser,
-.fa-icon > .fa-icon_filter,
 .fa-icon > .fa-icon_info-circle,
-.fa-icon > .fa-icon_list-alt,
 .fa-icon > .fa-icon_power-off,
 .fa-icon > .fa-icon_question-circle,
-.fa-icon > .fa-icon_reply,
-.fa-icon > .fa-icon_search-minus,
-.fa-icon > .fa-icon_search-plus,
-.fa-icon > .fa-icon_spinner,
-.fa-icon > .fa-icon_sync-alt,
-.fa-icon > .fa-icon_th,
-.fa-icon > .fa-icon_th-list,
-.fa-icon > .fa-icon_unlink {
-    width: calc(1em * 512 / 512);
+.fa-icon > .fa-icon_refresh {
+    width: calc(1em * 1536 / 1792);
+    }
+.fa-icon > .fa-icon_arrow-left {
+    width: calc(1em * 1472 / 1792);
+    }
+.fa-icon > .fa-icon_filter {
+    width: calc(1em * 1410 / 1792);
     }
-.fa-icon > .fa-icon_arrow-left,
-.fa-icon > .fa-icon_arrow-right,
-.fa-icon > .fa-icon_lock,
 .fa-icon > .fa-icon_plus,
-.fa-icon > .fa-icon_unlock,
-.fa-icon > .fa-icon_trash-alt {
-    width: calc(1em * 448 / 512);
+.fa-icon > .fa-icon_trash-o {
+    width: calc(1em * 1408 / 1792);
     }
 .fa-icon > .fa-icon_times {
-    width: calc(1em * 352 / 512);
+    width: calc(1em * 1188 / 1792);
+    }
+.fa-icon > .fa-icon_lock,
+.fa-icon > .fa-icon_unlock {
+    width: calc(1em *  1152 / 1792);
     }
 .fa-icon > .fa-icon_angle-up,
-.fa-icon > .fa-icon_angle-double-up {
-    width: calc(1em * 320 / 512);
+.fa-icon > .fa-icon_double-angle-up {
+    width: calc(1em *  998 / 1792);
     }
 .fa-icon > .fa-icon_ellipsis-v {
-    width: calc(1em * 192 / 512);
+    width: calc(1em * 384 / 1792);
     }
diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css
@@ -116,7 +116,7 @@ input:focus {
     width: 4.6em;
     }
 #content table > colgroup > col:nth-of-type(2) {
-    width: 30%;
+    width: 25%;
     }
 #content table > colgroup > col:nth-of-type(3) {
     width: 2.2em;
@@ -125,7 +125,7 @@ input:focus {
     width: 5.4em;
     }
 #content table > colgroup > col:nth-of-type(5) {
-    width: calc(100% - 4.6em - 30% - 2.2em - 5.4em - 1.8em);
+    width: calc(100% - 4.6em - 25% - 2.2em - 5.4em - 1.8em);
     }
 #content table > colgroup > col:nth-of-type(6) {
     width: 1.8em;
@@ -185,11 +185,22 @@ body.compactView #content tr:not(.vExpanded) td {
 #content table tr[data-tabid="-1"] td:nth-of-type(2):not([colspan]) {
     position: relative;
     }
-#content table tr[data-tabid="-1"] td:nth-of-type(2):not([colspan])::after {
-    content: '\2B1A';
+#content table tr td:nth-of-type(3) {
+    position: relative;
+    }
+/* visual for tabless network requests */
+#content table tr[data-tabid="-1"] td:nth-of-type(3)::before {
+    border: 5px solid #bbb;
+    border-bottom: 0;
+    border-top: 0;
+    bottom: 0;
+    content: '\00a0';
+    left: 0;
     position: absolute;
-    left: 0.2em;
-}
+    right: 0;
+    top: 0;
+    width: calc(100% - 10px);
+    }
 #content table tr.tab:not(.canMtx) {
     opacity: 0.3;
     }

diff --git a/src/css/user-rules.css b/src/css/user-rules.css
@@ -42,11 +42,9 @@ html {
     fill: #888;
     }
 
-body[dir="ltr"] #revertButton > span:nth-of-type(3),
-body[dir="rtl"] #revertButton > span:nth-of-type(2),
-body[dir="ltr"] #commitButton > span:nth-of-type(2),
+body[dir="ltr"] #revertButton > span:nth-of-type(2),
 body[dir="rtl"] #commitButton > span:nth-of-type(1) {
-    display: none;
+    transform: scale(-1, 1);
     }
 #revertButton,
 #commitButton,

diff --git a/src/hosts-files.html b/src/hosts-files.html
@@ -51,7 +51,7 @@
             <input type="checkbox"><!--
          --><a class="content" type="text/plain" target="_blank" href=""></a>&#8203;<!--
          --><a class="fa-icon support" href="" target="_blank">home</a>&#8203;<!--
-         --><span class="fa-icon remove" href="">trash-alt</span>&#8203;<!--
+         --><span class="fa-icon remove" href="">trash-o</span>&#8203;<!--
          --><a class="fa-icon mustread" href="" target="_blank">info-circle</a>&#8203;<!--
          --><span class="fa-icon status unsecure" title="http">unlock</span>&#8203;<!--
          --><span class="counts dim status"></span>&#8203;<!--