diff --git a/src/1p-filters.html b/src/1p-filters.html
index 01aecf1d6..e9093624e 100644
--- a/src/1p-filters.html
+++ b/src/1p-filters.html
@@ -8,6 +8,7 @@
+
diff --git a/src/3p-filters.html b/src/3p-filters.html
index eef7728af..997e614fa 100644
--- a/src/3p-filters.html
+++ b/src/3p-filters.html
@@ -4,6 +4,7 @@
uBlock — Filter lists
+
@@ -24,9 +25,9 @@
-
question-circle
+
-
@@ -40,11 +41,11 @@
diff --git a/src/about.html b/src/about.html
index df4f542bb..13abb242b 100644
--- a/src/about.html
+++ b/src/about.html
@@ -4,6 +4,7 @@
uBlock — About
+
@@ -31,10 +32,10 @@
diff --git a/src/advanced-settings.html b/src/advanced-settings.html
index 583596b86..868733b32 100644
--- a/src/advanced-settings.html
+++ b/src/advanced-settings.html
@@ -7,6 +7,7 @@
+
diff --git a/src/asset-viewer.html b/src/asset-viewer.html
index 0aaf7721b..e4aedc4d8 100644
--- a/src/asset-viewer.html
+++ b/src/asset-viewer.html
@@ -6,6 +6,7 @@
+
diff --git a/src/css/3p-filters.css b/src/css/3p-filters.css
index 5559bea67..2d4db462c 100644
--- a/src/css/3p-filters.css
+++ b/src/css/3p-filters.css
@@ -2,14 +2,8 @@
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
-body {
- border: 0;
- font: 14px/1.5 sans-serif;
- margin: 0;
- padding: 0;
- }
.root {
- background-color: white;
+ background-color: var(--bg-0);
overflow: auto;
padding: 0.5em 0;
}
@@ -31,7 +25,7 @@ body.updating #buttonUpdate .fa-icon svg {
}
#listsOfBlockedHostsPrompt::before,
.groupEntry:not([data-groupkey="user"]) .geDetails::before {
- color: #888;
+ color: var(--fg-0-50);
content: '\2212';
font-family: monospace;
font-size: large;
@@ -56,12 +50,8 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
pointer-events: none;
}
.listEntries {
- margin-inline-start: 0.7em;
- -webkit-margin-start: 0.7em;
- }
-.listEntry {
- margin: 0.5em 0;
- white-space: nowrap;
+ margin-inline-start: 0.6em;
+ -webkit-margin-start: 0.6em;
}
.groupEntry:not([data-groupkey="user"]) .listEntry.unused {
display: none;
@@ -71,6 +61,9 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
margin-right: 0;
unicode-bidi: embed;
}
+.listEntry .listname {
+ white-space: nowrap;
+ }
.listEntry.toRemove input[type="checkbox"] {
visibility: hidden;
}
@@ -80,11 +73,11 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
.listEntry .fa,
.listEntry .fa-icon,
.listEntry .counts {
- color: #888;
+ color: var(--fg-0-50);
display: none;
- fill: #888;
+ fill: var(--fg-0-50);
font-size: 110%;
- margin: 0 0.25em;
+ margin: 0 0.2em 0 0;
}
.listEntry .fa:hover,
.listEntry .fa-icon:hover {
@@ -100,28 +93,33 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
.listEntry.support > a.support {
display: inline-flex;
}
-.listEntry .remove {
- color: hsla(0, 100%, 27%, 0.5);
+.listEntry .remove,
+.listEntry .unsecure,
+.listEntry .failed {
+ color: var(--fg-icon-info-lvl-4-dimmed);
cursor: pointer;
- fill: hsla(0, 100%, 27%, 0.5);
+ fill: var(--fg-icon-info-lvl-4-dimmed);
}
-.listEntry .remove:hover {
- color: hsla(0, 100%, 27%, 1);
- fill: hsla(0, 100%, 27%, 1);
+.listEntry .remove:hover,
+.listEntry .unsecure:hover,
+.listEntry .failed:hover {
+ color: var(--fg-icon-info-lvl-4);
+ fill: var(--fg-icon-info-lvl-4);
}
.listEntry.external .remove {
display: inline-flex;
}
.listEntry.mustread a.mustread {
- color: hsla(240, 100%, 40%, 0.5);
+ color: var(--fg-icon-info-lvl-1-dimmed);
display: inline-flex;
- fill: hsla(240, 100%, 40%, 0.5);
+ fill: var(--fg-icon-info-lvl-1-dimmed);
}
.listEntry.mustread a.mustread:hover {
- color: hsla(240, 100%, 40%, 1);
- fill: hsla(240, 100%, 40%, 1);
+ color: var(--fg-icon-info-lvl-1);
+ fill: var(--fg-icon-info-lvl-1);
}
.listEntry .counts {
+ color: var(--fg-0-60);
font-size: smaller;
}
.listEntry.checked .counts {
@@ -137,25 +135,9 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
.listEntry .status:hover {
color: inherit;
}
-.listEntry .unsecure {
- color: hsla(0, 100%, 27%, 0.5);
- fill: hsla(0, 100%, 27%, 0.5);
- }
-.listEntry .unsecure:hover {
- color: hsla(0, 100%, 27%, 1);
- fill: hsla(0, 100%, 27%, 1);
- }
.listEntry.checked.unsecure .unsecure {
display: inline-flex;
}
-.listEntry .failed {
- color: hsla(0, 100%, 27%, 0.5);
- fill: hsla(0, 100%, 27%, 0.5);
- }
-.listEntry .failed:hover {
- color: hsla(0, 100%, 27%, 1);
- fill: hsla(0, 100%, 27%, 1);
- }
.listEntry.failed .failed {
display: inline-flex;
}
@@ -166,12 +148,12 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
display: inline-flex;
}
.listEntry .obsolete {
- color: hsla(36, 100%, 40%, 0.5);
- fill: hsla(36, 100%, 40%, 0.5);
+ color: var(--fg-icon-info-lvl-2-dimmed);
+ fill: var(--fg-icon-info-lvl-2-dimmed);
}
.listEntry .obsolete:hover {
- color: hsla(36, 100%, 40%, 1);
- fill: hsla(36, 100%, 40%, 1);
+ color: var(--fg-icon-info-lvl-2);
+ fill: var(--fg-icon-info-lvl-2);
}
body:not(.updating) .listEntry.checked.obsolete .obsolete {
display: inline-flex;
@@ -203,4 +185,20 @@ body.updating .listEntry.checked.obsolete .updating {
body {
font: 16px/1.5 sans-serif;
}
+ .listEntries {
+ margin-inline-start: 0;
+ -webkit-margin-start: 0;
+ }
+ .li.listEntry {
+ background-color: var(--bg-dashboard-nav);
+ }
+ .li.listEntry label > span {
+ flex-grow: 1;
+ padding-inline-start: 0.3em;
+ }
+ .li.listEntry .listname,
+ .li.listEntry .iconbar,
+ .li.listEntry.checked .counts {
+ display: block;
+ }
}
diff --git a/src/css/common.css b/src/css/common.css
index 7afd08fc9..0db14c56d 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -15,9 +15,14 @@
-webkit-user-select: none;
}
body {
- background-color: white;
- color: black;
+ background-color: var(--bg-0);
+ border: 0;
+ box-sizing: border-box;
+ color: var(--fg-0);
+ fill: var(--fg-0);
font: 14px/1.5 sans-serif;
+ margin: 0;
+ padding: 0;
}
code {
background-color: #eee;
@@ -31,7 +36,8 @@ button.custom {
align-items: flex-end;
border: 1px solid transparent;
border-radius: 3px;
- background-color: #e6e6e6;
+ background-color: var(--bg-button);
+ color: var(--fg-button)
display: inline-flex;
padding: 0.6em 1em;
-moz-appearance: none;
@@ -50,8 +56,8 @@ button.custom.disabled,
button.custom[disabled],
button.custom.important.disabled,
button.custom.important[disabled] {
- background-color: #eee;
- color: #888;
+ background-color: var(--bg-button-disabled);
+ color: var(--fg-button-disabled);
pointer-events: none;
}
button.custom.iconifiable > .fa,
@@ -72,6 +78,11 @@ label {
align-items: center;
display: inline-flex;
}
+@media (pointer: coarse) {
+ label {
+ flex-grow: 1
+ }
+}
input[type="checkbox"] {
margin: 0;
margin-inline-start: 0.4em;
@@ -123,7 +134,7 @@ input[type="checkbox"] {
color: #000;
fill: #000;
opacity: 0.25;
- stroke: #888;
+ stroke: var(--fg-button-disabled);
pointer-events: none;
}
.ubo-icon > svg {
diff --git a/src/css/dashboard-common.css b/src/css/dashboard-common.css
index 4f306aa32..49e7a9c47 100644
--- a/src/css/dashboard-common.css
+++ b/src/css/dashboard-common.css
@@ -1,11 +1,3 @@
-body {
- background-color: #fff;
- box-sizing: border-box;
- color: #20123a;
- fill: #20123a;
- margin: 0;
- padding: 0;
- }
body > div.body {
padding: 0 0.5em;
}
@@ -29,8 +21,8 @@ a {
}
.fa.info,
.fa-icon.info {
- color: #888;
- fill: #888;
+ color: var(--fg-icon-info-lvl-0-dimmed);
+ fill: var(--fg-icon-info-lvl-0-dimmed);
font-size: 110%;
}
.fa.info:hover,
@@ -40,11 +32,11 @@ a {
}
.fa.info.important,
.fa-icon.info.important {
- color: #ffa280;
+ color: var(--fg-icon-info-lvl-3-dimmed);
}
.fa.info.important:hover,
.fa-icon.info.important:hover {
- color: orangered;
+ color: var(--fg-icon-info-lvl-3);
}
button {
padding: 0.33em;
diff --git a/src/css/dashboard.css b/src/css/dashboard.css
index 87a382782..0ea973c34 100644
--- a/src/css/dashboard.css
+++ b/src/css/dashboard.css
@@ -9,9 +9,9 @@ html, body {
width: 100%;
}
#dashboard-nav {
- background-color: #f9f9fb;
+ background-color: var(--bg-dashboard-nav);
border: 0;
- border-bottom: 1px solid rgba(14, 13, 26, 0.12);
+ border-bottom: 1px solid var(--dashboard-nav-border);
display: flex;
flex-wrap: wrap;
overflow-x: hidden;
@@ -32,7 +32,9 @@ html, body {
}
.tabButton {
border: 0;
- border-bottom: 3px solid #f9f9fb;
+ border-bottom: 3px solid var(--bg-dashboard-nav);
+ color: var(--fg-dashboard-nav-off);
+ fill: var(--fg-dashboard-nav-off);
cursor: pointer;
padding: 0.5em 1.4em 0.3em 1.4em;
text-decoration: none;
@@ -42,8 +44,9 @@ html, body {
outline: 0;
}
.tabButton.selected {
- border-bottom: 3px solid #592acb;
- color: #592acb;
+ border-bottom: 3px solid var(--fg-dashboard-nav-on);
+ color: var(--fg-dashboard-nav-on);
+ fill: var(--fg-dashboard-nav-on);
}
iframe {
background-color: transparent;
diff --git a/src/css/fa-icons.css b/src/css/fa-icons.css
index a451cd6c2..9759c1363 100644
--- a/src/css/fa-icons.css
+++ b/src/css/fa-icons.css
@@ -8,6 +8,7 @@
padding: 0.1em;
position: relative;
user-select: none;
+ vertical-align: text-bottom;
-webkit-user-select: none;
}
.fa-icon > * {
@@ -17,9 +18,9 @@
.disabled > .fa-icon,
.fa-icon[disabled],
[disabled] > .fa-icon {
- color: #888;
- fill: #888;
- stroke: #888;
+ color: var(--fg-button-disabled);
+ fill: var(--fg-button-disabled);
+ stroke: var(--fg-button-disabled);
pointer-events: none;
}
.fa-icon > .fa-icon-badge,
diff --git a/src/css/settings.css b/src/css/settings.css
index 8ef31b4a1..21d040914 100644
--- a/src/css/settings.css
+++ b/src/css/settings.css
@@ -1,12 +1,6 @@
-body {
- border: 0;
- font: 14px/1.5 sans-serif;
- margin: 0;
- padding: 0;
- }
hr {
border: 0;
- border-top: 1px solid #ccc;
+ border-top: 1px solid var(--fg-hline-1);
margin: 1.5em 0;
}
.body {
diff --git a/src/css/themes/default.css b/src/css/themes/default.css
new file mode 100644
index 000000000..550b5de84
--- /dev/null
+++ b/src/css/themes/default.css
@@ -0,0 +1,30 @@
+:root {
+ --bg-0: #fff;
+ --fg-0: hsla(261, 53%, 15%, 1);
+
+ --fg-0-60: hsla(261, 53%, 15%, 0.6);
+ --fg-0-50: hsla(261, 53%, 15%, 0.5);
+
+ --fg-hline-1: #ccc;
+
+ --bg-button: #e6e6e6;
+ --fg-button: var(--fg-0);
+ --bg-button-disabled: #eee;
+ --fg-button-disabled: #888;
+
+ --bg-dashboard-nav: #f9f9fb;
+ --fg-dashboard-nav-off: var(--fg-0);
+ --fg-dashboard-nav-on: #592acb;
+ --dashboard-nav-border: rgba(14, 13, 26, 0.12);
+
+ --fg-icon-info-lvl-0-dimmed: #888;
+ --fg-icon-info-lvl-0: inherit;
+ --fg-icon-info-lvl-1-dimmed: hsla(240, 100%, 40%, 0.5);
+ --fg-icon-info-lvl-1: hsla(240, 100%, 40%, 1);
+ --fg-icon-info-lvl-2-dimmed: hsla(36, 100%, 40%, 0.5);
+ --fg-icon-info-lvl-2: hsla(36, 100%, 40%, 1);
+ --fg-icon-info-lvl-3-dimmed: hsla(16, 100%, 50%, 0.5);
+ --fg-icon-info-lvl-3: hsla(16, 100%, 50%, 1);
+ --fg-icon-info-lvl-4-dimmed: hsla(0, 100%, 40%, 0.5);
+ --fg-icon-info-lvl-4: hsla(0, 100%, 40%, 1);
+}
diff --git a/src/dashboard.html b/src/dashboard.html
index 24e760308..d50ffe453 100644
--- a/src/dashboard.html
+++ b/src/dashboard.html
@@ -4,6 +4,7 @@
+
diff --git a/src/document-blocked.html b/src/document-blocked.html
index c9bc8d51d..90d39a1a2 100644
--- a/src/document-blocked.html
+++ b/src/document-blocked.html
@@ -4,6 +4,7 @@
+
diff --git a/src/dyna-rules.html b/src/dyna-rules.html
index c6a2d58be..b264050cc 100644
--- a/src/dyna-rules.html
+++ b/src/dyna-rules.html
@@ -7,6 +7,7 @@
+
diff --git a/src/js/3p-filters.js b/src/js/3p-filters.js
index 9e6379f0f..a147b76f4 100644
--- a/src/js/3p-filters.js
+++ b/src/js/3p-filters.js
@@ -394,22 +394,19 @@ const onFilteringSettingsChanged = function() {
/******************************************************************************/
-const onRemoveExternalList = function() {
- const liEntry = uDom(this).ancestors('[data-listkey]');
- const listKey = liEntry.attr('data-listkey');
- if ( listKey ) {
- liEntry.toggleClass('toRemove');
- renderWidgets();
- }
+const onRemoveExternalList = function(ev) {
+ const liEntry = ev.target.closest('[data-listkey]');
+ if ( liEntry === null ) { return; }
+ liEntry.classList.toggle('toRemove');
+ renderWidgets();
};
/******************************************************************************/
const onPurgeClicked = function(ev) {
- const button = uDom(ev.target);
- const liEntry = button.ancestors('[data-listkey]');
- const listKey = liEntry.attr('data-listkey');
- if ( !listKey ) { return; }
+ const liEntry = ev.target.closest('[data-listkey]');
+ const listKey = liEntry.getAttribute('data-listkey') || '';
+ if ( listKey === '' ) { return; }
messaging.send('dashboard', {
what: 'purgeCache',
@@ -421,10 +418,10 @@ const onPurgeClicked = function(ev) {
// https://github.com/gorhill/uBlock/issues/1733
// An external filter list must not be marked as obsolete, they will
// always be fetched anyways if there is no cached copy.
- liEntry.addClass('obsolete');
- liEntry.removeClass('cached');
+ liEntry.classList.add('obsolete');
+ liEntry.classList.remove('cached');
- if ( liEntry.descendants('input').first().prop('checked') ) {
+ if ( liEntry.querySelector('input[type="checkbox"]').checked ) {
renderWidgets();
}
};
@@ -674,6 +671,11 @@ uDom('#lists').on('click', '.listEntry .remove', onRemoveExternalList);
uDom('#lists').on('click', 'span.cache', onPurgeClicked);
uDom('#externalLists').on('input', onFilteringSettingsChanged);
+uDom('#lists').on('click', '.listEntry label *', ev => {
+ if ( ev.target.matches('a,input,.forinput') ) { return; }
+ ev.preventDefault();
+});
+
/******************************************************************************/
renderFilterLists();
diff --git a/src/logger-ui.html b/src/logger-ui.html
index 5d8f052f3..9193a8ead 100644
--- a/src/logger-ui.html
+++ b/src/logger-ui.html
@@ -3,6 +3,7 @@
+
diff --git a/src/popup-fenix.html b/src/popup-fenix.html
index 3cbdb8a68..f50e1ace4 100644
--- a/src/popup-fenix.html
+++ b/src/popup-fenix.html
@@ -4,6 +4,7 @@
+
diff --git a/src/popup.html b/src/popup.html
index 85e05218b..3108e8269 100644
--- a/src/popup.html
+++ b/src/popup.html
@@ -4,6 +4,7 @@
+
diff --git a/src/settings.html b/src/settings.html
index 0152d9ea7..4365e0b13 100644
--- a/src/settings.html
+++ b/src/settings.html
@@ -4,6 +4,7 @@
uBlock — Settings
+
@@ -18,23 +19,23 @@
-
-
+
+
diff --git a/src/whitelist.html b/src/whitelist.html
index 191540287..db2777620 100644
--- a/src/whitelist.html
+++ b/src/whitelist.html
@@ -8,6 +8,7 @@
+