diff --git a/src/cloud-ui.html b/src/cloud-ui.html index 3053d7a..ed97d53 100644 --- a/src/cloud-ui.html +++ b/src/cloud-ui.html @@ -5,12 +5,12 @@ - + - - + +

- +cog

diff --git a/src/css/cloud-ui.css b/src/css/cloud-ui.css index 609b3cd..9508416 100644 --- a/src/css/cloud-ui.css +++ b/src/css/cloud-ui.css @@ -9,15 +9,9 @@ display: none; } #cloudWidget > button { - display: inline-block; - font-family: FontAwesome; - font-size: 160%; - font-style: normal; - font-weight: normal; - line-height: 1; - padding: 0.2em 0.25em 0.1em 0.25em; + font-size: 180%; + padding: 0 0.25em; position: relative; - vertical-align: baseline; } #cloudWidget > button[disabled] { visibility: hidden; @@ -25,22 +19,14 @@ #cloudWidget > button.error { color: red; } -#cloudPush:after { - content: '\f0ee'; - } -#cloudPull:before, -#cloudPullAndMerge:before { - content: '\f0ed'; -} #cloudPullAndMerge { margin: 0 0.25em; } -#cloudPullAndMerge:after { - content: '\f067'; +#cloudPullAndMerge > span:nth-of-type(2) { font-size: 50%; position: absolute; right: 0; - top: 10%; + top: 0; } #cloudWidget > span { color: gray; @@ -61,11 +47,10 @@ } #cloudWidget > #cloudCog { cursor: pointer; - display: inline-block; font-size: 110%; margin: 0; opacity: 0.5; - padding: 4px; + padding: 0.2em; position: absolute; top: 0; } diff --git a/src/css/common.css b/src/css/common.css index ce51448..e7c7d51 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -16,20 +16,6 @@ font-weight: 100; src: local('httpsb'), url(fonts/Roboto_Condensed/RobotoCondensed-Light.ttf) format('truetype'); } -@font-face { - font-family: 'FontAwesome'; - src: url('fonts/fontawesome-webfont.ttf') format('truetype'); - font-weight: normal; - font-style: normal; -} -.fa { - font-family: FontAwesome; - font-style: normal; - font-weight: normal; - line-height: 1; - vertical-align: baseline; - display: inline-block; - } body { font-size: 14px; diff --git a/src/css/dashboard-common.css b/src/css/dashboard-common.css index 67d8814..e094148 100644 --- a/src/css/dashboard-common.css +++ b/src/css/dashboard-common.css @@ -22,6 +22,8 @@ a { text-decoration: none; } button { + align-items: center; + display: inline-flex; padding: 0.3em 0.5em; } input[disabled] + label { @@ -31,16 +33,24 @@ input[disabled] + label { width: 40em; } +.fa-icon.info { + opacity: 0.25; + vertical-align: middle; + } +.fa-icon.info:hover { + opacity: 1; + } +.fa-icon.info.important { + color: red; + fill: red; + } + .whatisthis { - margin: 0 0 0 8px; border: 0; - font-family: FontAwesome; - padding: 0 0 4px 0; cursor: pointer; - opacity: 0.4; - } -.whatisthis:before { - content: '\f059'; + margin: 0 0 0 0.2em; + opacity: 0.25; + vertical-align: middle; } .whatisthis:hover { opacity: 1.0; diff --git a/src/css/fa-icons.css b/src/css/fa-icons.css index f56bb6a..87a5a23 100644 --- a/src/css/fa-icons.css +++ b/src/css/fa-icons.css @@ -8,15 +8,15 @@ padding: 0.1em; position: relative; } -.fa-icon:hover { - background-color: #eee; - } .fa-icon > * { pointer-events: none; } -.fa-icon.disabled { - color: #888; - fill: #888; +.fa-icon.disabled, +.disabled > .fa-icon, +.fa-icon[disabled], +[disabled] > .fa-icon { + color: #000; + fill: #000; opacity: 0.25; stroke: #888; pointer-events: none; @@ -41,32 +41,50 @@ .fa-icon > svg { height: 1em; + width: 1em; + } +.fa-icon > .fa-icon_cloud-download-alt, +.fa-icon > .fa-icon_cloud-upload-alt { + width: calc(1em * 640 / 512); } -.fa-icon_puzzle-piece, -.fa-icon_reply-all { +.fa-icon > .fa-icon_exclamation-triangle, +.fa-icon > .fa-icon_home, +.fa-icon > .fa-icon_puzzle-piece, +.fa-icon > .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 { +.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_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_lock { +.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_times { +.fa-icon > .fa-icon_times { width: calc(1em * 352 / 512); } -.fa-icon_angle-up, -.fa-icon_angle-double-up { +.fa-icon > .fa-icon_angle-up, +.fa-icon > .fa-icon_angle-double-up { width: calc(1em * 320 / 512); } -.fa-icon_ellipsis-v { +.fa-icon > .fa-icon_ellipsis-v { width: calc(1em * 192 / 512); } diff --git a/src/css/fonts/fontawesome-webfont.ttf b/src/css/fonts/fontawesome-webfont.ttf deleted file mode 100755 index 96a3639..0000000 Binary files a/src/css/fonts/fontawesome-webfont.ttf and /dev/null differ diff --git a/src/css/hosts-files.css b/src/css/hosts-files.css index 1aa982d..25af6d8 100644 --- a/src/css/hosts-files.css +++ b/src/css/hosts-files.css @@ -1,12 +1,6 @@ @keyframes spin { - 0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); } - 12.5% { transform: rotate(45deg); -webkit-transform: rotate(45deg); } - 25% { transform: rotate(90deg); -webkit-transform: rotate(90deg); } - 37.5% { transform: rotate(135deg); -webkit-transform: rotate(135deg); } - 50% { transform: rotate(180deg); -webkit-transform: rotate(180deg); } - 67.5% { transform: rotate(225deg); -webkit-transform: rotate(225deg); } - 75% { transform: rotate(270deg); -webkit-transform: rotate(270deg); } - 87.5% { transform: rotate(315deg); -webkit-transform: rotate(315deg); } + 0% { transform: rotate(0); } + 100% { transform: rotate(360deg); } } ul { padding: 0; @@ -36,6 +30,8 @@ ul#lists { padding: 0; } li.listEntry { + align-items: baseline; + display: flex; margin: 0 auto 0 auto; padding: 0.2em 0; } @@ -52,93 +48,95 @@ li.listEntry > * { text-indent: 0; unicode-bidi: embed; } -li.listEntry > a:nth-of-type(2) { - opacity: 0.5; +li.listEntry .content { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; } li.listEntry.toRemove > input[type="checkbox"] { visibility: hidden; } -li.listEntry.toRemove > a.content { +li.listEntry.toRemove .content { text-decoration: line-through; } -li.listEntry > .fa { - color: inherit; +li.listEntry > .fa-icon { + align-self: flex-end; + color: #444; display: none; - font-size: 110%; + fill: #444; opacity: 0.5; - vertical-align: baseline; - } -li.listEntry > a.fa:hover { - opacity: 1; - } -li.listEntry > a.support { - display: inline-block; + padding: 0.2em; } -li.listEntry > a.support[href=""] { +li.listEntry > .status { display: none; } -li.listEntry > a.remove, -li.listEntry > a.remove:visited { +li.listEntry .fa-icon.status { + cursor: default; +} +li.listEntry > .fa-icon:hover { + opacity: 1; + } +li.listEntry.external .remove { color: darkred; + fill: darkred; } -li.listEntry.external > a.remove { - display: inline-block; +li.listEntry.external .remove { + display: inline-flex; } -li.listEntry.mustread > a.mustread { - display: inline-block; +li.listEntry > a.fa-icon:not([href=""]) { + display: inline-flex; } -li.listEntry.mustread > a.mustread:hover { +li.listEntry > a.mustread:hover { color: mediumblue; + fill: mediumblue; } li.listEntry > .counts { - display: none; font-size: smaller; } li.listEntry > input[type="checkbox"]:checked ~ .counts { display: inline; -} -li.listEntry span.status { - color: #444; - cursor: default; - display: none; -} -li.listEntry span.status:hover { - opacity: 1; - } -li.listEntry span.unsecure { - color: darkred; - } -li.listEntry.unsecure > input[type="checkbox"]:checked ~ span.unsecure { - display: inline-block; } -li.listEntry span.failed { +li.listEntry .unsecure { color: darkred; + fill: darkred; } -li.listEntry.failed span.failed { - display: inline-block; +li.listEntry.unsecure input[type="checkbox"]:checked ~ .unsecure { + display: inline-flex; } -li.listEntry span.cache { +li.listEntry .fa-icon.remove, +li.listEntry .fa-icon.cache { cursor: pointer; } -li.listEntry.cached:not(.obsolete) > input[type="checkbox"]:checked ~ span.cache { - display: inline-block; +li.listEntry.cached:not(.obsolete) input[type="checkbox"]:checked ~ .cache { + display: inline-flex; } -li.listEntry span.obsolete { +li.listEntry .obsolete { color: hsl(36, 100%, 40%); + fill: hsl(36, 100%, 40%); } -body:not(.updating) li.listEntry.obsolete > input[type="checkbox"]:checked ~ span.obsolete { - display: inline-block; +body:not(.updating) li.listEntry.obsolete input[type="checkbox"]:checked ~ .obsolete { + display: inline-flex; } -li.listEntry span.updating { - transform-origin: 50% 46%; +li.listEntry .updating { + animation: spin 1s steps(8) infinite; + transform-origin: 50%; } -body.updating li.listEntry.obsolete > input[type="checkbox"]:checked ~ span.updating { - animation: spin 1s step-start infinite; - display: inline-block; +body.updating li.listEntry.obsolete input[type="checkbox"]:checked ~ .updating { + display: inline-flex; + } +li.listEntry .failed { + color: darkred; + fill: darkred; + } +li.listEntry.failed input[type="checkbox"]:checked ~ .failed { + display: inline-flex; } .dim { opacity: 0.5; } +li.listEntry.notAnAsset { + flex-wrap: wrap; + } li.listEntry.notAnAsset > input[type="checkbox"] ~ textarea { display: none; margin-left: 1.6em; diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css index d49c03e..01c8f1d 100644 --- a/src/css/logger-ui.css +++ b/src/css/logger-ui.css @@ -14,6 +14,9 @@ body { font-size: 150%; padding: 0.4em 0.6em; } +.fa-icon:hover { + background-color: #eee; + } #toolbar { background-color: white; border: 0; @@ -61,22 +64,6 @@ body.popupPanelOn #popupPanelContainer { #popupPanelContainer.hide { width: 6em !important; } -#popupPanelContainer > div { - background: #888; - border: 0; - display: none; - text-align: right; - } -#popupPanelContainer > div > span { - color: #ccc; - cursor: pointer; - display: inline-block; - font: 14px FontAwesome; - padding: 3px; - } -#popupPanelContainer > div > span:hover { - color: white; - } #popupPanelContainer > iframe { border: 0; padding: 0; diff --git a/src/css/popup.css b/src/css/popup.css index 6efc6a9..acc901d 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -41,6 +41,10 @@ a { text-decoration: none; } +.fa-icon:hover { + background-color: #eee; + } + #version { font-size: 10px; font-weight: normal; @@ -124,10 +128,6 @@ body .toolbar button:hover { body .toolbar button.disabled { color: #ccc; } -body .toolbar button.fa { - font: 1.7em FontAwesome; - min-width: 1.4em; - } #mtxSwitch_matrix-off.switchTrue { color: #a00; fill: #a00; @@ -306,6 +306,7 @@ button.disabled > span.badge { cursor: pointer; display: none; font-size: 100%; + padding-right: 0.5em; text-align: center; } .recipe.mustImport .importer, diff --git a/src/css/user-rules.css b/src/css/user-rules.css index 578ac12..4bce53b 100644 --- a/src/css/user-rules.css +++ b/src/css/user-rules.css @@ -20,38 +20,33 @@ html { vertical-align: top; width: 50%; } -#diff .ruleActions h3 { +#diff .ruleActions > h3 { font-weight: normal; margin: 0 0 0.5em 0; } +#diff .ruleActions > div { + display: flex; + justify-content: center; + } +#diff .ruleActions > div > button { + margin-right: 1em; + } #ruleFilter { + align-items: center; direction: ltr; - text-align: center; + display: flex; + justify-content: center; } -#ruleFilter .fa { +#ruleFilter .fa-icon { color: #888; + fill: #888; } -#revertButton:after, -#commitButton:before { - font-family: FontAwesome; - font-style: normal; - font-weight: normal; - line-height: 1; - vertical-align: baseline; - display: inline-block; - } -body[dir="ltr"] #revertButton:after { - content: '\2009\f061'; - } -body[dir="rtl"] #revertButton:after { - content: '\2009\f060'; - } -body[dir="ltr"] #commitButton:before { - content: '\f060\2009'; - } -body[dir="rtl"] #commitButton:before { - content: '\f061\2009'; +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="rtl"] #commitButton > span:nth-of-type(1) { + display: none; } #revertButton, #commitButton, diff --git a/src/hosts-files.html b/src/hosts-files.html index 3978743..8a623b7 100644 --- a/src/hosts-files.html +++ b/src/hosts-files.html @@ -3,9 +3,10 @@ uMatrix — Hosts files - - - + + + + @@ -22,7 +23,7 @@

-

 

+

 info-circle

  • @@ -49,21 +50,22 @@
  • ​​​​​​​​​ + -->home​trash-alt​info-circle​unlock​​exclamation-triangle​clock​spinner​unlink
+ diff --git a/src/img/fontawesome/fontawesome-defs.svg b/src/img/fontawesome/fontawesome-defs.svg index 47ceae4..adba022 100644 --- a/src/img/fontawesome/fontawesome-defs.svg +++ b/src/img/fontawesome/fontawesome-defs.svg @@ -4,22 +4,37 @@ License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL --> - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/js/cloud-ui.js b/src/js/cloud-ui.js index 02f3822..4394d58 100644 --- a/src/js/cloud-ui.js +++ b/src/js/cloud-ui.js @@ -19,7 +19,7 @@ Home: https://github.com/gorhill/uBlock */ -/* global uDom */ +/* global uDom, faIconsInit */ 'use strict'; @@ -59,7 +59,7 @@ var onCloudDataReceived = function(entry) { uDom.nodeFromId('cloudPull').removeAttribute('disabled'); uDom.nodeFromId('cloudPullAndMerge').removeAttribute('disabled'); - var timeOptions = { + let timeOptions = { weekday: 'short', year: 'numeric', month: 'short', @@ -70,8 +70,8 @@ var onCloudDataReceived = function(entry) { timeZoneName: 'short' }; - var time = new Date(entry.tstamp); - widget.querySelector('span').textContent = + let time = new Date(entry.tstamp); + widget.querySelector('[data-i18n="cloudNoData"]').textContent = entry.source + '\n' + time.toLocaleString('fullwide', timeOptions); }; @@ -125,7 +125,7 @@ var pullAndMergeData = function() { /******************************************************************************/ var openOptions = function() { - var input = uDom.nodeFromId('cloudDeviceName'); + let input = uDom.nodeFromId('cloudDeviceName'); input.value = self.cloud.options.deviceName; input.setAttribute('placeholder', self.cloud.options.defaultDeviceName); uDom.nodeFromId('cloudOptions').classList.add('show'); @@ -134,7 +134,7 @@ var openOptions = function() { /******************************************************************************/ var closeOptions = function(ev) { - var root = uDom.nodeFromId('cloudOptions'); + let root = uDom.nodeFromId('cloudOptions'); if ( ev.target !== root ) { return; } @@ -144,7 +144,7 @@ var closeOptions = function(ev) { /******************************************************************************/ var submitOptions = function() { - var onOptions = function(options) { + let onOptions = function(options) { if ( typeof options !== 'object' || options === null ) { return; } @@ -163,22 +163,18 @@ var submitOptions = function() { /******************************************************************************/ var onInitialize = function(options) { - if ( typeof options !== 'object' || options === null ) { - return; - } + if ( typeof options !== 'object' || options === null ) { return; } - if ( !options.enabled ) { - return; - } + if ( !options.enabled ) { return; } self.cloud.options = options; - var xhr = new XMLHttpRequest(); + let xhr = new XMLHttpRequest(); xhr.open('GET', 'cloud-ui.html', true); xhr.overrideMimeType('text/html;charset=utf-8'); xhr.responseType = 'text'; xhr.onload = function() { this.onload = null; - var parser = new DOMParser(), + let parser = new DOMParser(), parsed = parser.parseFromString(this.responseText, 'text/html'), fromParent = parsed.body; while ( fromParent.firstElementChild !== null ) { @@ -187,6 +183,8 @@ var onInitialize = function(options) { ); } + faIconsInit(widget); + vAPI.i18n.render(widget); widget.classList.remove('hide'); diff --git a/src/js/fa-icons.js b/src/js/fa-icons.js index dde6f94..b39665a 100644 --- a/src/js/fa-icons.js +++ b/src/js/fa-icons.js @@ -23,8 +23,8 @@ /******************************************************************************/ -(function() { - let icons = document.querySelectorAll('.fa-icon'); +let faIconsInit = function(root) { + let icons = (root || document).querySelectorAll('.fa-icon'); for ( let icon of icons ) { if ( icon.childElementCount !== 0 ) { continue; } let name = icon.textContent; @@ -43,4 +43,6 @@ icon.appendChild(badge); } } -})(); +}; + +faIconsInit(); diff --git a/src/js/hosts-files.js b/src/js/hosts-files.js index 5c930e2..39bc81c 100644 --- a/src/js/hosts-files.js +++ b/src/js/hosts-files.js @@ -1,7 +1,7 @@ /******************************************************************************* uMatrix - a browser extension to black/white list requests. - Copyright (C) 2014-2018 Raymond Hill + Copyright (C) 2014-present Raymond Hill This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by @@ -453,8 +453,8 @@ uDom('#buttonUpdate').on('click', buttonUpdateHandler); uDom('#buttonPurgeAll').on('click', buttonPurgeAllHandler); uDom('.assets').on('change', '.listEntry > input', onHostsFilesSettingsChanged); uDom('.assets').on('input', '.listEntry > textarea', onHostsFilesSettingsChanged); -uDom('.assets').on('click', '.listEntry > a.remove', onRemoveExternalAsset); -uDom('.assets').on('click', 'span.cache', onPurgeClicked); +uDom('.assets').on('click', '.listEntry > .remove', onRemoveExternalAsset); +uDom('.assets').on('click', '.status.cache', onPurgeClicked); renderHostsFiles(); diff --git a/src/popup.html b/src/popup.html index d86174d..2a73555 100644 --- a/src/popup.html +++ b/src/popup.html @@ -4,10 +4,10 @@ - - - - + + + + uMatrix panel diff --git a/src/raw-settings.html b/src/raw-settings.html index 9fd5ec1..bfa7948 100644 --- a/src/raw-settings.html +++ b/src/raw-settings.html @@ -3,16 +3,17 @@ - - - + + + +
-

+

info-circle

 

@@ -21,6 +22,7 @@
+ diff --git a/src/settings.html b/src/settings.html index e76b95a..b7f583c 100644 --- a/src/settings.html +++ b/src/settings.html @@ -3,8 +3,9 @@ uMatrix — Settings - - + + +