Mirrors/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2024-09-15 07:22:28 +02:00
Code Issues Releases Wiki Activity

Sixth pass to re-design the dashboard

Browse Source 
Related commits:
- 0662767dd6
- 99b2a0a761
- a8e3118fea
- 453f5450b6
- a45a21f337

This commit focuses on implementing the use of
CSS `var(...)` throughout so as to make it easy
to create themes -- a requirement for uBO to
support a dark theme.

There is still work to do regarding converting
uBO's CSS to completely support `var(...)` but
being able to start using theming will help
complete and fine tune CSS `var(...)` support.

Related issue:
- https://github.com/uBlockOrigin/uBlock-issues/issues/401
This commit is contained in:
Raymond Hill 2020-04-13 09:19:58 -04:00
parent cb08c978f0
commit e917213e81
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
21 changed files with 381 additions and 352 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/3p-filters.html
View File

@ -41,7 +41,7 @@
<div id="templates" style="display: none;"> <div id="templates" style="display: none;">
<div class="groupEntry"> <div class="groupEntry">
<div class="geDetails"><span class="geName"></span> <span class="geCount dim"></span></div> <div class="geDetails"><span class="geName"></span> <span class="geCount"></span></div>
<div class="listEntries"></div> <div class="listEntries"></div>
</div> </div>
<div class="li listEntry"> <div class="li listEntry">

7
src/cloud-ui.html
View File

@ -9,13 +9,10 @@
<span id="cloudInfo" data-i18n="cloudNoData"></span> <span id="cloudInfo" data-i18n="cloudNoData"></span>
<button id="cloudPull" type="button" class="custom" data-i18n-title="cloudPull" disabled><span class="fa-icon">cloud-download</span></button> <button id="cloudPull" type="button" class="custom" data-i18n-title="cloudPull" disabled><span class="fa-icon">cloud-download</span></button>
<button id="cloudPullAndMerge" type="button" class="custom" data-i18n-title="cloudPullAndMerge" disabled><span class="fa-icon">cloud-download</span><span class="fa-icon">plus</span></button> <button id="cloudPullAndMerge" type="button" class="custom" data-i18n-title="cloudPullAndMerge" disabled><span class="fa-icon">cloud-download</span><span class="fa-icon">plus</span></button>
<p id="cloudError"></p> <span id="cloudError"></span>
<span id="cloudCog" class="fa-icon">cog</span> <span id="cloudCog" class="fa-icon">cog</span>
<div id="cloudOptions"> <div id="cloudOptions">
<div> <label data-i18n="cloudDeviceNamePrompt"></label> <input id="cloudDeviceName" type="text" value=""> <button id="cloudOptionsSubmit" class="custom vflex" type="button" data-i18n="genericSubmit"></button>
<p><label data-i18n="cloudDeviceNamePrompt"></label> <input id="cloudDeviceName" type="text" value="">
<p><button id="cloudOptionsSubmit" type="button" data-i18n="genericSubmit"></button>
</div>
</div> </div>
</body> </body>
</html> </html>

10
src/css/3p-filters.css
View File

@ -46,6 +46,7 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
pointer-events: none; pointer-events: none;
} }
.groupEntry .geCount { .groupEntry .geCount {
color: var(--fg-0-60);
font-size: 90%; font-size: 90%;
pointer-events: none; pointer-events: none;
} }
@ -125,9 +126,6 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
.listEntry.checked .counts { .listEntry.checked .counts {
display: inline; display: inline;
} }
.dim {
color: #666;
}
.listEntry .status { .listEntry .status {
cursor: default; cursor: default;
display: none; display: none;
@ -165,6 +163,9 @@ body.updating .listEntry.checked.obsolete .updating {
animation: spin 1s steps(8) infinite; animation: spin 1s steps(8) infinite;
display: inline-flex; display: inline-flex;
} }
.listEntry.toImport {
margin: 0.5em 0;
}
.listEntry.toImport textarea { .listEntry.toImport textarea {
border: 1px solid #ccc; border: 1px solid #ccc;
box-sizing: border-box; box-sizing: border-box;
@ -190,7 +191,8 @@ body.updating .listEntry.checked.obsolete .updating {
-webkit-margin-start: 0; -webkit-margin-start: 0;
} }
.li.listEntry { .li.listEntry {
background-color: var(--bg-dashboard-nav); background-color: var(--bg-1);
overflow-x: auto;
} }
.li.listEntry label > span { .li.listEntry label > span {
flex-grow: 1; flex-grow: 1;

65
src/css/cloud-ui.css
View File

@ -2,6 +2,7 @@
background: url("../img/cloud.png") hsl(216, 100%, 93%); background: url("../img/cloud.png") hsl(216, 100%, 93%);
border-radius: 3px; border-radius: 3px;
margin: 0.5em 0; margin: 0.5em 0;
overflow: auto;
padding: 0.5em; padding: 0.5em;
position: relative; position: relative;
} }
@ -22,7 +23,7 @@
visibility: hidden; visibility: hidden;
} }
#cloudWidget button.error { #cloudWidget button.error {
color: red; color: var(--fg-icon-info-lvl-4);
} }
#cloudPullAndMerge { #cloudPullAndMerge {
margin-left: 0.25em; margin-left: 0.25em;
@ -34,61 +35,51 @@
top: 0; top: 0;
} }
#cloudInfo { #cloudInfo {
color: gray; color: var(--fg-0-60);
display: inline-block; flex-shrink: 0;
font-size: 90%; font-size: 90%;
margin: 0 1em; margin: 0 1em;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
white-space: pre; white-space: pre-line;
} }
#cloudError { #cloudError {
color: red; color: var(--fg-icon-info-lvl-4);
flex-grow: 1;
flex-shrink: 2;
font-size: x-small; font-size: x-small;
margin: 0.5em 0 0 0; margin: 0 1em;
} }
#cloudError:empty { #cloudWidget #cloudCog {
display: none; color: var(--fg-0-50);
}
#cloudWidget > #cloudCog {
cursor: pointer; cursor: pointer;
display: inline-block; fill: var(--fg-0-50);
font-size: 110%; font-size: 110%;
margin: 0; padding: 0.4em;
opacity: 0.5;
padding: 4px;
position: absolute;
top: 0;
} }
body[dir="ltr"] #cloudWidget > #cloudCog { #cloudWidget #cloudCog:hover {
right: 0; color: inherit;
fill: inherit;
} }
body[dir="rtl"] #cloudWidget > #cloudCog { #cloudWidget #cloudOptions {
left: 0; background-color: var(--bg-0);
} border: 1px solid var(--bg-1-border);
#cloudWidget > #cloudCog:hover {
opacity: 1;
}
#cloudWidget > #cloudOptions {
align-items: center;
-webkit-align-items: center;
background-color: rgba(0, 0, 0, 0.75);
bottom: 0; bottom: 0;
display: none; display: none;
justify-content: center;
-webkit-justify-content: center;
left: 0; left: 0;
position: fixed; margin: 0.4em;
padding: 0.4em;
position: absolute;
right: 0; right: 0;
text-align: center;
top: 0; top: 0;
z-index: 2000; z-index: 10;
} }
#cloudWidget > #cloudOptions.show { #cloudWidget #cloudOptions.show {
display: flex; display: block;
display: -webkit-flex;
} }
#cloudWidget > #cloudOptions > div { #cloudWidget #cloudOptions > div {
background-color: white; background-color: var(--bg-0);
border-radius: 3px; border-radius: 3px;
padding: 1em; padding: 1em;
text-align: center; text-align: center;

20
src/css/common.css
View File

@ -25,7 +25,7 @@ body {
padding: 0; padding: 0;
} }
code { code {
background-color: #eee; background-color: var(--bg-code);
padding: 0 0.25em; padding: 0 0.25em;
} }
textarea { textarea {
@ -43,14 +43,19 @@ button.custom {
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
} }
button.custom.vflex {
height: 100%;
padding-bottom: 0;
padding-top: 0;
}
button.custom:hover { button.custom:hover {
background-color: #d4d4d4; background-color: var(--bg-button-hover);
} }
button.custom.important { button.custom.important {
background-color: #ffddaa; background-color: var(--bg-button-important);
} }
button.custom.important:hover { button.custom.important:hover {
background-color: #ffcc80; background-color: var(--bg-button-important-hover);
} }
button.custom.disabled, button.custom.disabled,
button.custom[disabled], button.custom[disabled],
@ -106,7 +111,7 @@ input[type="checkbox"] {
@media (max-width: 640px) { @media (max-width: 640px) {
button.custom.iconifiable > .fa, button.custom.iconifiable > .fa,
button.custom.iconifiable > .fa-icon { button.custom.iconifiable > .fa-icon {
font-size: 120%; font-size: 1.2rem;
padding: 0; padding: 0;
} }
button.custom.iconifiable > [data-i18n] { button.custom.iconifiable > [data-i18n] {
@ -131,9 +136,8 @@ input[type="checkbox"] {
.disabled > .ubo-icon, .disabled > .ubo-icon,
.ubo-icon[disabled], .ubo-icon[disabled],
[disabled] > .ubo-icon { [disabled] > .ubo-icon {
color: #000; color: var(--fg-button-disabled);
fill: #000; fill: var(--fg-button-disabled);
opacity: 0.25;
stroke: var(--fg-button-disabled); stroke: var(--fg-button-disabled);
pointer-events: none; pointer-events: none;
} }

10
src/css/dashboard-common.css
View File

@ -45,15 +45,7 @@ input[type="number"] {
width: 5em; width: 5em;
} }
input[type="checkbox"][disabled] + * { input[type="checkbox"][disabled] + * {
color: #888; color: var(--fg-0-50);
}
.para {
width: 40em;
}
.warn {
margin: 0;
padding: 5px;
background-color: #FEDAE0;
} }
@media (max-height: 640px), (max-height: 800px) and (max-width: 480px) { @media (max-height: 640px), (max-height: 800px) and (max-width: 480px) {
.body > p, .body > p,

8
src/css/dashboard.css
View File

@ -9,9 +9,9 @@ html, body {
width: 100%; width: 100%;
} }
#dashboard-nav { #dashboard-nav {
background-color: var(--bg-dashboard-nav); background-color: var(--bg-1);
border: 0; border: 0;
border-bottom: 1px solid var(--dashboard-nav-border); border-bottom: 1px solid var(--bg-1-border);
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
overflow-x: hidden; overflow-x: hidden;
@ -32,7 +32,7 @@ html, body {
} }
.tabButton { .tabButton {
border: 0; border: 0;
border-bottom: 3px solid var(--bg-dashboard-nav); border-bottom: 3px solid var(--bg-1);
color: var(--fg-dashboard-nav-off); color: var(--fg-dashboard-nav-off);
fill: var(--fg-dashboard-nav-off); fill: var(--fg-dashboard-nav-off);
cursor: pointer; cursor: pointer;
@ -67,7 +67,7 @@ iframe {
display: initial; display: initial;
} }
#unsavedWarning > div:first-of-type { #unsavedWarning > div:first-of-type {
background-color: #ffffcc; background-color: var(--bg-transient-notice);
padding: 0.5em; padding: 0.5em;
} }
#unsavedWarning > div:last-of-type { #unsavedWarning > div:last-of-type {

23
src/css/document-blocked.css
View File

@ -52,18 +52,17 @@ select {
padding: 2px; padding: 2px;
} }
.code { .code {
background-color: rgba(0, 0, 0, 0.1); background-color: var(--bg-code);
font-family: monospace; font-family: monospace;
line-height: 1; line-height: 1;
padding: 4px; padding: 4px;
word-break: break-all; word-break: break-all;
} }
#warningSign { #warningSign {
opacity: 1;
width: 100%; width: 100%;
} }
#warningSign > a { #warningSign > a {
fill: #f2a500; fill: var(--large-icon-info-lvl-2);
font-size: 10em; font-size: 10em;
padding: 0; padding: 0;
} }
@ -81,8 +80,9 @@ select {
background-color: transparent; background-color: transparent;
top: 100%; top: 100%;
box-sizing: border-box; box-sizing: border-box;
color: var(--fg-0-60);
cursor: pointer; cursor: pointer;
opacity: 0.5; fill: var(--fg-0-60);
padding: 0.2em; padding: 0.2em;
position: absolute; position: absolute;
transform: translate(0, -50%); transform: translate(0, -50%);
@ -94,7 +94,8 @@ body[dir="rtl"] #theURL > p > span {
left: 0; left: 0;
} }
#theURL > p:hover > span { #theURL > p:hover > span {
opacity: 1; color: var(--fg-0);
fill: var(--fg-0);
} }
#theURL > p > span:before { #theURL > p > span:before {
content: '\f010'; content: '\f010';
@ -103,10 +104,10 @@ body[dir="rtl"] #theURL > p > span {
content: '\f00e'; content: '\f00e';
} }
#parsed { #parsed {
background-color: #f8f8f8; background-color: var(--bg-1);
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid var(--bg-code);
border-top: none; border-top: none;
color: gray; color: var(--fg-0-80);
font-size: small; font-size: small;
overflow-x: hidden; overflow-x: hidden;
padding: 4px; padding: 4px;
@ -135,12 +136,6 @@ body[dir="rtl"] #theURL > p > span {
text-align: left; text-align: left;
} }
.filterList a {
opacity: 0.8;
}
.filterList a:hover {
opacity: 1;
}
.filterList:first-child .filterListSeparator { .filterList:first-child .filterListSeparator {
display: none; display: none;
} }

38
src/css/dyna-rules.css
View File

@ -37,25 +37,27 @@ body {
text-align: center; text-align: center;
} }
#ruleFilter .fa { #ruleFilter .fa {
color: #888; color: var(--fg-0-60);
} }
#revertButton, #revertButton,
#commitButton, #commitButton,
#diff.editing #exportButton, body.editing #diff #exportButton,
#diff.editing #importButton { body.editing #diff #importButton {
background-color: #eee; background-color: var(--bg-button-disabled);
color: #aaa; color: var(--fg-button-disabled);
fill: var(--fg-button-disabled);
pointer-events: none; pointer-events: none;
} }
#diff.dirty:not(.editing) #revertButton, body:not(.editing) #diff.dirty #revertButton,
#diff.dirty:not(.editing) #commitButton { body:not(.editing) #diff.dirty #commitButton {
background-color: #e6e6e6; background-color: var(--bg-button);
color: #20123a; color: var(--fg-button);
fill: var(--fg-button);
pointer-events: auto; pointer-events: auto;
} }
#diff.dirty:not(.editing) #revertButton:hover, body:not(.editing) #diff.dirty #revertButton:hover,
#diff.dirty:not(.editing) #commitButton:hover { body:not(.editing) #diff.dirty #commitButton:hover {
background-color: #d4d4d4; background-color: var(--bg-button-hover);
} }
.codeMirrorContainer { .codeMirrorContainer {
@ -65,15 +67,15 @@ body {
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
} }
#diff.editing .CodeMirror-merge-copy, body.editing .CodeMirror-merge-copy,
#diff.editing .CodeMirror-merge-copy-reverse { body.editing .CodeMirror-merge-copy-reverse {
display: none; display: none;
} }
#diff.editing .CodeMirror-merge-left .CodeMirror { body.editing .CodeMirror-merge-left .CodeMirror {
color: #888; color: var(--fg-0-60);
} }
#diff.editing .CodeMirror-merge-editor .CodeMirror { body.editing .CodeMirror-merge-editor .CodeMirror {
background-color: #ffe; background-color: var(--bg-transient-notice);
} }
body[dir="rtl"] .CodeMirror-merge-pane-rightmost { body[dir="rtl"] .CodeMirror-merge-pane-rightmost {
right: unset; right: unset;

175
src/css/popup-fenix.css
View File

@ -1,8 +1,4 @@
/* External CSS values override */ /* External CSS values override */
body {
color: #20123a;
fill: #20123a;
}
.fa-icon { .fa-icon {
padding: 0 0.1em; padding: 0 0.1em;
} }
@ -13,10 +9,6 @@ body {
/* Internal CSS values */ /* Internal CSS values */
body { body {
background-color: white;
border: 0;
margin: 0;
padding: 0;
white-space: nowrap; white-space: nowrap;
} }
@ -47,7 +39,7 @@ hr {
} }
#sticky { #sticky {
background-color: white; background-color: var(--bg-0);
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 100;
@ -64,17 +56,19 @@ hr {
margin: 0.5em 0; margin: 0.5em 0;
} }
#switch .fa-icon { #switch .fa-icon {
fill: #0060df; color: var(--fg-popup-power);
fill: var(--fg-popup-power);
cursor: pointer; cursor: pointer;
font-size: 700%; font-size: 700%;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
#switch .fa-icon:hover { #switch .fa-icon:hover {
opacity: 0.9; filter: var(--fg-popup-power-hover);
} }
body.off #switch .fa-icon { body.off #switch .fa-icon {
fill: #ccc; color: var(--fg-0-20);
fill: var(--fg-0-20);
} }
.rulesetTools { .rulesetTools {
background-color: transparent; background-color: transparent;
@ -87,7 +81,7 @@ body.off #switch .fa-icon {
padding: 0.5em; padding: 0.5em;
} }
.rulesetTools [id] { .rulesetTools [id] {
background-color: #ffe; background-color: var(--bg-transient-notice);
border: 1px solid #ddc; border: 1px solid #ddc;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
@ -151,6 +145,9 @@ body.needSave #revertRules {
.tool.enabled { .tool.enabled {
visibility: visible; visibility: visible;
} }
.tool [data-i18n] {
display: var(--fg-popup-icon-caption-display);
}
.statValue { .statValue {
margin: 0; margin: 0;
@ -162,7 +159,7 @@ body.needSave #revertRules {
#extraTools .fa-icon > .nope { #extraTools .fa-icon > .nope {
left: 50%; left: 50%;
position: absolute; position: absolute;
stroke: red; stroke: var(--fg-popup-icon-x);
stroke-width: 2; stroke-width: 2;
transform: translateX(-50%); transform: translateX(-50%);
visibility: hidden; visibility: hidden;
@ -177,12 +174,12 @@ body.needSave #revertRules {
} }
#tooltip { #tooltip {
background-color: #ffffee; background-color: var(--bg-tooltip);
border: 1px solid gray; border: 1px solid gray;
border-radius: 3px; border-radius: 3px;
box-shadow: 1px 1px 3px gray; box-shadow: 1px 1px 3px gray;
box-sizing: border-box; box-sizing: border-box;
color: black; color: var(--fg-tooltip);
cursor: pointer; cursor: pointer;
direction: ltr; direction: ltr;
font: 12px sans-serif; font: 12px sans-serif;
@ -242,11 +239,10 @@ body[dir="rtl"] #tooltip {
display: none; display: none;
} }
#firewallContainer > div > span { #firewallContainer > div > span {
background-color: #e0e0e6; background-color: var(--bg-popup-cell);
border: none; border: none;
box-sizing: border-box; box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
color: #000;
display: inline-flex; display: inline-flex;
padding: 0.4em 0; padding: 0.4em 0;
position: relative; position: relative;
@ -266,7 +262,7 @@ body[dir="rtl"] #tooltip {
word-break: break-word; word-break: break-word;
} }
#firewallContainer > div.isCname > span:first-of-type { #firewallContainer > div.isCname > span:first-of-type {
color: mediumblue; color: var(--fg-popup-fwcell-cname);
} }
#firewallContainer > div > span:first-of-type > sub { #firewallContainer > div > span:first-of-type > sub {
display: inline-block; display: inline-block;
@ -287,7 +283,7 @@ body[dir="rtl"] #tooltip {
} }
#firewallContainer > div > span:nth-of-type(3), #firewallContainer > div > span:nth-of-type(3),
#firewallContainer > div > span:nth-of-type(4) { #firewallContainer > div > span:nth-of-type(4) {
color: #444; color: var(--fg-0-70);
display: none; display: none;
font-family: monospace; font-family: monospace;
text-align: center; text-align: center;
@ -296,7 +292,7 @@ body[dir="rtl"] #tooltip {
font-weight: bold; font-weight: bold;
} }
#firewallContainer > div:first-of-type > span:first-of-type::before { #firewallContainer > div:first-of-type > span:first-of-type::before {
color: #aaa; color: var(--fg-0-50);
content: '+'; content: '+';
padding-right: 0.25em; padding-right: 0.25em;
} }
@ -314,33 +310,41 @@ body[dir="rtl"] #tooltip {
justify-content: space-between; justify-content: space-between;
} }
#firewallContainer > div > span[data-acount]::before, #firewallContainer > div > span[data-acount]::before,
#firewallContainer > div > span[data-bcount]::after { #firewallContainer > div > span[data-bcount]::after,
align-items: center; #firewallContainer > div > span[data-acount] > #actionSelector > #dynaCounts::before,
#firewallContainer > div > span[data-acount] > #actionSelector > #dynaCounts::after {
content: ' '; content: ' ';
display: inline-flex;
} }
#firewallContainer > div > span[data-acount]::before { #firewallContainer > div > span[data-acount]::before,
#firewallContainer > div > span[data-acount] > #actionSelector > #dynaCounts::before {
padding-left: 0.1em; padding-left: 0.1em;
} }
#firewallContainer > div > span[data-acount="1"]::before { #firewallContainer > div > span[data-acount="1"]::before,
#firewallContainer > div > span[data-acount="1"] > #actionSelector > #dynaCounts::before {
content: '+'; content: '+';
} }
#firewallContainer > div > span[data-acount="2"]::before { #firewallContainer > div > span[data-acount="2"]::before,
#firewallContainer > div > span[data-acount="2"] > #actionSelector > #dynaCounts::before {
content: '++'; content: '++';
} }
#firewallContainer > div > span[data-acount="3"]::before { #firewallContainer > div > span[data-acount="3"]::before,
#firewallContainer > div > span[data-acount="3"] > #actionSelector > #dynaCounts::before {
content: '+++'; content: '+++';
} }
#firewallContainer > div > span[data-bcount]::after { #firewallContainer > div > span[data-bcount]::after,
#firewallContainer > div > span[data-bcount] > #actionSelector > #dynaCounts::after {
padding-right: 0.1em; padding-right: 0.1em;
} }
#firewallContainer > div > span[data-bcount="1"]::after { #firewallContainer > div > span[data-bcount="1"]::after,
#firewallContainer > div > span[data-bcount="1"] > #actionSelector > #dynaCounts::after {
content: '\2212'; content: '\2212';
} }
#firewallContainer > div > span[data-bcount="2"]::after { #firewallContainer > div > span[data-bcount="2"]::after,
#firewallContainer > div > span[data-bcount="2"] > #actionSelector > #dynaCounts::after {
content: '\2212\2212'; content: '\2212\2212';
} }
#firewallContainer > div > span[data-bcount="3"]::after { #firewallContainer > div > span[data-bcount="3"]::after,
#firewallContainer > div > span[data-bcount="3"] > #actionSelector > #dynaCounts::after {
content: '\2212\2212\2212'; content: '\2212\2212\2212';
} }
@ -370,78 +374,62 @@ body.advancedUser #firewallContainer > div > span:first-of-type ~ span {
box-sizing: border-box; box-sizing: border-box;
content: ''; content: '';
display: inline-block; display: inline-block;
filter: var(--bg-popup-cell-label-filter);
height: 100%; height: 100%;
left: 0; left: 0;
opacity: 0.4;
position: absolute; position: absolute;
top: 0; top: 0;
width: 7px; width: 7px;
} }
#firewallContainer > div.isRootContext > span:first-of-type::before { #firewallContainer > div.isRootContext > span:first-of-type::before {
background-color: rgb(127, 127, 127); background-color: var(--fg-0-50);
width: 14px !important; width: 14px !important;
} }
/**
Source for color-blind color scheme from https://github.com/WyohKnott:
https://github.com/chrisaljoudi/uBlock/issues/467#issuecomment-95177219
*/
#firewallContainer > div.allowed > span:first-of-type::before, #firewallContainer > div.allowed > span:first-of-type::before,
#firewallContainer > div.isDomain.totalAllowed > span:first-of-type::before { #firewallContainer > div.isDomain.totalAllowed > span:first-of-type::before {
background-color: rgb(0, 160, 0); background-color: var(--bg-popup-cell-allow-own);
}
#firewallContainer.colorBlind > div.allowed > span:first-of-type::before,
#firewallContainer.colorBlind > div.isDomain.totalAllowed > span:first-of-type::before {
background-color: rgb(255, 194, 57);
} }
#firewallContainer > div.blocked > span:first-of-type::before, #firewallContainer > div.blocked > span:first-of-type::before,
#firewallContainer > div.isDomain.totalBlocked > span:first-of-type::before { #firewallContainer > div.isDomain.totalBlocked > span:first-of-type::before {
background-color: rgb(192, 0, 0); background-color: var(--bg-popup-cell-block-own);
}
#firewallContainer.colorBlind > div.blocked > span:first-of-type::before,
#firewallContainer.colorBlind > div.isDomain.totalBlocked > span:first-of-type::before {
background-color: rgb(0, 19, 110);
} }
#firewallContainer > div.allowed.blocked > span:first-of-type::before, #firewallContainer > div.allowed.blocked > span:first-of-type::before,
#firewallContainer > div.isDomain.totalAllowed.totalBlocked > span:first-of-type::before { #firewallContainer > div.isDomain.totalAllowed.totalBlocked > span:first-of-type::before {
background-color: rgb(192, 160, 0); background-color: var(--bg-popup-cell-label-mixed);
} }
/* Rule cells */ /* Rule cells */
body.advancedUser #firewallContainer > div > span.allowRule { body.advancedUser #firewallContainer > div > span.allowRule,
background-color: rgba(0, 160, 0, 0.3); #actionSelector > #dynaAllow {
background-color: var(--bg-popup-cell-allow);
} }
body.advancedUser #firewallContainer.colorBlind > div > span.allowRule { body.advancedUser #firewallContainer > div > span.blockRule,
background-color: rgba(255, 194, 57, 0.4); #actionSelector > #dynaBlock {
background-color: var(--bg-popup-cell-block);
} }
body.advancedUser #firewallContainer > div > span.blockRule { body.advancedUser #firewallContainer > div > span.noopRule,
background-color: rgba(192, 0, 0, 0.3); #actionSelector > #dynaNoop {
background-color: var(--bg-popup-cell-noop);
} }
body.advancedUser #firewallContainer.colorBlind > div > span.blockRule { body.advancedUser #firewallContainer > div > span.ownRule,
background-color: rgba(0, 19, 110, 0.4); #firewallContainer > div > span.ownRule {
color: var(--bg-0);
} }
body.advancedUser #firewallContainer > div > span.noopRule { body.advancedUser #firewallContainer > div > span.allowRule.ownRule,
background-color: rgba(96, 96, 96, 0.4); #actionSelector > #dynaAllow:hover {
background-color: var(--bg-popup-cell-allow-own);
} }
body.advancedUser #firewallContainer > div > span.ownRule { body.advancedUser #firewallContainer > div > span.blockRule.ownRule,
color: white; #actionSelector > #dynaBlock:hover {
background-color: var(--bg-popup-cell-block-own);
} }
body.advancedUser #firewallContainer > div > span.allowRule.ownRule { body.advancedUser #firewallContainer > div > span.noopRule.ownRule,
background-color: rgba(0, 160, 0, 1); #actionSelector > #dynaNoop:hover {
} background-color: var(--bg-popup-cell-noop-own);
body.advancedUser #firewallContainer.colorBlind > div > span.allowRule.ownRule {
background-color: rgba(255, 194, 57, 1);
}
body.advancedUser #firewallContainer > div > span.blockRule.ownRule {
background-color: rgba(192, 0, 0, 1);
}
body.advancedUser #firewallContainer.colorBlind > div > span.blockRule.ownRule {
background-color: rgba(0, 19, 110, 1);
}
body.advancedUser #firewallContainer > div > span.noopRule.ownRule {
background-color: rgba(96, 96, 96, 1);
} }
#actionSelector { #actionSelector {
bottom: 0; box-sizing: border-box;
height: 100%;
left: 0; left: 0;
position: absolute; position: absolute;
top: 0; top: 0;
@ -451,32 +439,25 @@ body.advancedUser #firewallContainer > div > span.noopRule.ownRule {
#actionSelector > span { #actionSelector > span {
display: inline-block; display: inline-block;
height: 100%; height: 100%;
opacity: 0.2;
} }
#actionSelector > span:first-of-type { #actionSelector > #dynaAllow {
width: 33%; width: 33%;
} }
#actionSelector > span:nth-of-type(2) { #actionSelector > #dynaNoop {
width: 33.5%; width: 33.5%;
} }
#actionSelector > span:nth-of-type(3) { #actionSelector > #dynaBlock {
width: 33.5%; width: 33.5%;
} }
#actionSelector > span:hover { #actionSelector > #dynaCounts {
opacity: 0.75; align-items: center;
} background-color: transparent;
#actionSelector > span:first-of-type { display: inline-flex;
background-color: rgb(0, 160, 0); height: 100%;
} justify-content: space-between;
#actionSelector.colorBlind > span:first-of-type { left: 0;
background-color: rgb(255, 194, 57); pointer-events: none;
} position: absolute;
#actionSelector > span:nth-of-type(2) { top: 0;
background-color: rgb(108, 108, 108); width: 100%;
}
#actionSelector > span:nth-of-type(3) {
background-color: rgb(192, 0, 0);
}
#actionSelector.colorBlind > span:nth-of-type(3) {
background-color: rgb(0, 19, 110);
} }

207
src/css/popup.css
View File

@ -1,21 +1,16 @@
body { body {
background-color: white;
border: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0;
opacity: 1;
overflow: hidden; overflow: hidden;
padding: 0;
white-space: nowrap; white-space: nowrap;
width: fit-content; width: fit-content;
width: -moz-fit-content; width: -moz-fit-content;
} }
h2 { h2 {
background-color: #eee; background-color: var(--bg-popup-cell);
border: 0; border: 0;
color: #666; color: var(--fg-0-70);
cursor: pointer; cursor: pointer;
font-size: 100%; font-size: 100%;
font-weight: normal; font-weight: normal;
@ -96,17 +91,19 @@ p {
margin: 0.8em 0; margin: 0.8em 0;
} }
#switch .fa-icon { #switch .fa-icon {
fill: #0046ff; color: var(--fg-popup-power);
fill: var(--fg-popup-power);
cursor: pointer; cursor: pointer;
font-size: 700%; font-size: 700%;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
#switch .fa-icon:hover { #switch .fa-icon:hover {
opacity: 0.9; filter: var(--fg-popup-power-hover);
} }
body.off #switch .fa-icon { body.off #switch .fa-icon {
fill: #ccc; color: var(--fg-0-20);
fill: var(--fg-0-20);
} }
#basicTools { #basicTools {
margin: 1.2em 0 0.5em 0; margin: 1.2em 0 0.5em 0;
@ -115,9 +112,9 @@ body.off #switch .fa-icon {
margin-left: 0; margin-left: 0;
} }
.tool { .tool {
color: #aaa; color: var(--fg-0-40);
cursor: pointer; cursor: pointer;
fill: #aaa; fill: var(--fg-0-40);
margin-left: 0.8em; margin-left: 0.8em;
min-width: 1em; min-width: 1em;
padding: 0 0.2em; padding: 0 0.2em;
@ -128,14 +125,14 @@ body.off #switch .fa-icon {
visibility: visible; visibility: visible;
} }
.tool.enabled:hover { .tool.enabled:hover {
color: #444; color: inherit;
fill: #444; fill: inherit;
} }
#page-blocked { #page-blocked {
font-size: 1.25em; font-size: 1.25em;
} }
.statName { .statName {
color: #888; color: var(--fg-0-70);
font-size: 85%; font-size: 85%;
margin: 0.8em 0.2em 0.4em 0.2em; margin: 0.8em 0.2em 0.4em 0.2em;
} }
@ -143,11 +140,9 @@ body.off #switch .fa-icon {
margin: 0; margin: 0;
} }
#extraTools { #extraTools {
background-color: #eee; background-color: var(--bg-popup-cell);
border: 0; border: 0;
color: #888;
display: flex; display: flex;
fill: #888;
justify-content: center; justify-content: center;
margin: 0.8em 0 0 0; margin: 0.8em 0 0 0;
padding: 0.2em 0; padding: 0.2em 0;
@ -156,7 +151,9 @@ body.responsive #extraTools {
justify-content: space-evenly; justify-content: space-evenly;
} }
#extraTools > span { #extraTools > span {
color: var(--fg-0-40);
cursor: pointer; cursor: pointer;
fill: var(--fg-0-40);
font-size: 1.2em; font-size: 1.2em;
margin: 0 0.8em 0 0; margin: 0 0.8em 0 0;
position: relative; position: relative;
@ -167,7 +164,7 @@ body.responsive #extraTools {
#extraTools > span > .nope { #extraTools > span > .nope {
left: 50%; left: 50%;
position: absolute; position: absolute;
stroke: red; stroke: var(--fg-popup-icon-x);
stroke-width: 2; stroke-width: 2;
transform: translateX(-50%); transform: translateX(-50%);
visibility: hidden; visibility: hidden;
@ -177,17 +174,17 @@ body.responsive #extraTools {
visibility: visible; visibility: visible;
} }
#extraTools > span:hover { #extraTools > span:hover {
color: #222; color: inherit;
fill: #222; fill: inherit;
} }
#refresh { #refresh {
background-color: #ffe; background-color: var(--bg-transient-notice);
border: 1px solid #ddc; border: 1px solid #ddc;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
display: none; display: none;
fill: #888; fill: var(--fg-0-50);
font-size: 3em; font-size: 3em;
justify-content: center; justify-content: center;
left: 4px; left: 4px;
@ -200,16 +197,16 @@ body.dirty #refresh {
display: flex; display: flex;
} }
body.dirty #refresh:hover { body.dirty #refresh:hover {
fill: #000 fill: inherit
} }
#tooltip { #tooltip {
background-color: #ffffee; background-color: var(--bg-tooltip);
border: 1px solid gray; border: 1px solid gray;
border-radius: 3px; border-radius: 3px;
box-shadow: 1px 1px 3px gray; box-shadow: 1px 1px 3px gray;
box-sizing: border-box; box-sizing: border-box;
color: black; color: var(--fg-tooltip);
cursor: pointer; cursor: pointer;
direction: ltr; direction: ltr;
font: 12px sans-serif; font: 12px sans-serif;
@ -239,6 +236,7 @@ body[dir="rtl"] #tooltip {
#firewallContainer { #firewallContainer {
border: 0; border: 0;
font-size: 85%; font-size: 85%;
line-height: 1.4;
margin: 0; margin: 0;
padding: 0; padding: 0;
text-align: right; text-align: right;
@ -263,11 +261,9 @@ body[dir="rtl"] #tooltip {
display: none; display: none;
} }
#firewallContainer > div > span { #firewallContainer > div > span {
background-color: #e6e6e6; background-color: var(--bg-popup-cell);
border: none; border: none;
box-sizing: border-box; box-sizing: border-box;
-moz-box-sizing: border-box;
color: #000;
display: inline-flex; display: inline-flex;
flex-shrink: 0; flex-shrink: 0;
padding: 0.33em 0; padding: 0.33em 0;
@ -287,7 +283,7 @@ body[dir="rtl"] #tooltip {
word-break: break-word; word-break: break-word;
} }
#firewallContainer > div.isCname > span:first-of-type { #firewallContainer > div.isCname > span:first-of-type {
color: mediumblue; color: var(--fg-popup-fwcell-cname);
} }
#firewallContainer > div > span:first-of-type > sub { #firewallContainer > div > span:first-of-type > sub {
display: inline-block; display: inline-block;
@ -307,7 +303,7 @@ body[dir="rtl"] #tooltip {
} }
#firewallContainer > div > span:nth-of-type(3), #firewallContainer > div > span:nth-of-type(3),
#firewallContainer > div > span:nth-of-type(4) { #firewallContainer > div > span:nth-of-type(4) {
color: #444; color: var(--fg-0-70);
display: none; display: none;
font-family: monospace; font-family: monospace;
text-align: center; text-align: center;
@ -316,7 +312,7 @@ body[dir="rtl"] #tooltip {
font-weight: bold; font-weight: bold;
} }
#firewallContainer > div:first-of-type > span:first-of-type::before { #firewallContainer > div:first-of-type > span:first-of-type::before {
color: #aaa; color: var(--fg-0-50);
content: '+'; content: '+';
padding-right: 0.25em; padding-right: 0.25em;
} }
@ -334,31 +330,41 @@ body[dir="rtl"] #tooltip {
justify-content: space-between; justify-content: space-between;
} }
#firewallContainer > div > span[data-acount]::before, #firewallContainer > div > span[data-acount]::before,
#firewallContainer > div > span[data-bcount]::after { #firewallContainer > div > span[data-bcount]::after,
#firewallContainer > div > span[data-acount] > #actionSelector > #dynaCounts::before,
#firewallContainer > div > span[data-acount] > #actionSelector > #dynaCounts::after {
content: ' '; content: ' ';
} }
#firewallContainer > div > span[data-acount]::before { #firewallContainer > div > span[data-acount]::before,
#firewallContainer > div > span[data-acount] > #actionSelector > #dynaCounts::before {
padding-left: 0.1em; padding-left: 0.1em;
} }
#firewallContainer > div > span[data-acount="1"]::before { #firewallContainer > div > span[data-acount="1"]::before,
#firewallContainer > div > span[data-acount="1"] > #actionSelector > #dynaCounts::before {
content: '+'; content: '+';
} }
#firewallContainer > div > span[data-acount="2"]::before { #firewallContainer > div > span[data-acount="2"]::before,
#firewallContainer > div > span[data-acount="2"] > #actionSelector > #dynaCounts::before {
content: '++'; content: '++';
} }
#firewallContainer > div > span[data-acount="3"]::before { #firewallContainer > div > span[data-acount="3"]::before,
#firewallContainer > div > span[data-acount="3"] > #actionSelector > #dynaCounts::before {
content: '+++'; content: '+++';
} }
#firewallContainer > div > span[data-bcount]::after { #firewallContainer > div > span[data-bcount]::after,
#firewallContainer > div > span[data-bcount] > #actionSelector > #dynaCounts::after {
padding-right: 0.1em; padding-right: 0.1em;
} }
#firewallContainer > div > span[data-bcount="1"]::after { #firewallContainer > div > span[data-bcount="1"]::after,
#firewallContainer > div > span[data-bcount="1"] > #actionSelector > #dynaCounts::after {
content: '\2212'; content: '\2212';
} }
#firewallContainer > div > span[data-bcount="2"]::after { #firewallContainer > div > span[data-bcount="2"]::after,
#firewallContainer > div > span[data-bcount="2"] > #actionSelector > #dynaCounts::after {
content: '\2212\2212'; content: '\2212\2212';
} }
#firewallContainer > div > span[data-bcount="3"]::after { #firewallContainer > div > span[data-bcount="3"]::after,
#firewallContainer > div > span[data-bcount="3"] > #actionSelector > #dynaCounts::after {
content: '\2212\2212\2212'; content: '\2212\2212\2212';
} }
@ -388,124 +394,97 @@ body.advancedUser #firewallContainer > div > span:first-of-type ~ span {
box-sizing: border-box; box-sizing: border-box;
content: ''; content: '';
display: inline-block; display: inline-block;
filter: var(--bg-popup-cell-label-filter);
height: 100%; height: 100%;
left: 0; left: 0;
opacity: 0.4;
position: absolute; position: absolute;
top: 0; top: 0;
width: 7px; width: 7px;
} }
#firewallContainer > div.isRootContext > span:first-of-type::before { #firewallContainer > div.isRootContext > span:first-of-type::before {
background-color: rgb(127, 127, 127); background-color: var(--fg-0-50);
width: 14px !important; width: 14px !important;
} }
/**
Source for color-blind color scheme from https://github.com/WyohKnott:
https://github.com/chrisaljoudi/uBlock/issues/467#issuecomment-95177219
*/
#firewallContainer > div.allowed > span:first-of-type::before, #firewallContainer > div.allowed > span:first-of-type::before,
#firewallContainer > div.isDomain.totalAllowed > span:first-of-type::before { #firewallContainer > div.isDomain.totalAllowed > span:first-of-type::before {
background-color: rgb(0, 160, 0); background-color: var(--bg-popup-cell-allow-own);
}
#firewallContainer.colorBlind > div.allowed > span:first-of-type::before,
#firewallContainer.colorBlind > div.isDomain.totalAllowed > span:first-of-type::before {
background-color: rgb(255, 194, 57);
} }
#firewallContainer > div.blocked > span:first-of-type::before, #firewallContainer > div.blocked > span:first-of-type::before,
#firewallContainer > div.isDomain.totalBlocked > span:first-of-type::before { #firewallContainer > div.isDomain.totalBlocked > span:first-of-type::before {
background-color: rgb(192, 0, 0); background-color: var(--bg-popup-cell-block-own);
}
#firewallContainer.colorBlind > div.blocked > span:first-of-type::before,
#firewallContainer.colorBlind > div.isDomain.totalBlocked > span:first-of-type::before {
background-color: rgb(0, 19, 110);
} }
#firewallContainer > div.allowed.blocked > span:first-of-type::before, #firewallContainer > div.allowed.blocked > span:first-of-type::before,
#firewallContainer > div.isDomain.totalAllowed.totalBlocked > span:first-of-type::before { #firewallContainer > div.isDomain.totalAllowed.totalBlocked > span:first-of-type::before {
background-color: rgb(192, 160, 0); background-color: var(--bg-popup-cell-label-mixed);
} }
/* Rule cells */ /* Rule cells */
body.advancedUser #firewallContainer > div > span.allowRule { body.advancedUser #firewallContainer > div > span.allowRule,
background-color: rgba(0, 160, 0, 0.3); #actionSelector > #dynaAllow {
background-color: var(--bg-popup-cell-allow);
} }
body.advancedUser #firewallContainer.colorBlind > div > span.allowRule { body.advancedUser #firewallContainer > div > span.blockRule,
background-color: rgba(255, 194, 57, 0.4); #actionSelector > #dynaBlock {
background-color: var(--bg-popup-cell-block);
} }
body.advancedUser #firewallContainer > div > span.blockRule { body.advancedUser #firewallContainer > div > span.noopRule,
background-color: rgba(192, 0, 0, 0.3); #actionSelector > #dynaNoop {
background-color: var(--bg-popup-cell-noop);
} }
body.advancedUser #firewallContainer.colorBlind > div > span.blockRule { body.advancedUser #firewallContainer > div > span.ownRule,
background-color: rgba(0, 19, 110, 0.4); #firewallContainer > div > span.ownRule {
color: var(--bg-0);
} }
body.advancedUser #firewallContainer > div > span.noopRule { body.advancedUser #firewallContainer > div > span.allowRule.ownRule,
background-color: rgba(108, 108, 108, 0.3); #actionSelector > #dynaAllow:hover {
background-color: var(--bg-popup-cell-allow-own);
} }
body.advancedUser #firewallContainer.colorBlind > div > span.noopRule { body.advancedUser #firewallContainer > div > span.blockRule.ownRule,
background-color: rgba(96, 96, 96, 0.4); #actionSelector > #dynaBlock:hover {
background-color: var(--bg-popup-cell-block-own);
} }
body.advancedUser #firewallContainer > div > span.ownRule { body.advancedUser #firewallContainer > div > span.noopRule.ownRule,
color: white; #actionSelector > #dynaNoop:hover {
} background-color: var(--bg-popup-cell-noop-own);
body.advancedUser #firewallContainer > div > span.allowRule.ownRule {
background-color: rgba(0, 160, 0, 1);
}
body.advancedUser #firewallContainer.colorBlind > div > span.allowRule.ownRule {
background-color: rgba(255, 194, 57, 1);
}
body.advancedUser #firewallContainer > div > span.blockRule.ownRule {
background-color: rgba(192, 0, 0, 1);
}
body.advancedUser #firewallContainer.colorBlind > div > span.blockRule.ownRule {
background-color: rgba(0, 19, 110, 1);
}
body.advancedUser #firewallContainer > div > span.noopRule.ownRule {
background-color: rgba(108, 108, 108, 1);
} }
#actionSelector { #actionSelector {
bottom: 0; box-sizing: border-box;
height: 100%;
left: 0; left: 0;
position: absolute; position: absolute;
top: 0; top: 0;
width: 4em; width: 100%;
z-index: 1; z-index: 1;
} }
#actionSelector > span { #actionSelector > span {
display: inline-block; display: inline-block;
height: 100%; height: 100%;
opacity: 0.2;
} }
#actionSelector > span:first-of-type { #actionSelector > #dynaAllow {
width: 33%; width: 33%;
} }
#actionSelector > span:nth-of-type(2) { #actionSelector > #dynaNoop {
width: 33.5%; width: 33.5%;
} }
#actionSelector > span:nth-of-type(3) { #actionSelector > #dynaBlock {
width: 33.5%; width: 33.5%;
} }
#actionSelector > span:hover { #actionSelector > #dynaCounts {
opacity: 0.75; align-items: center;
} background-color: transparent;
#actionSelector > span:first-of-type { display: inline-flex;
background-color: rgb(0, 160, 0); height: 100%;
} justify-content: space-between;
#actionSelector.colorBlind > span:first-of-type { left: 0;
background-color: rgb(255, 194, 57); pointer-events: none;
} position: absolute;
#actionSelector > span:nth-of-type(2) { top: 0;
background-color: rgb(108, 108, 108); width: 100%;
}
#actionSelector > span:nth-of-type(3) {
background-color: rgb(192, 0, 0);
}
#actionSelector.colorBlind > span:nth-of-type(3) {
background-color: rgb(0, 19, 110);
} }
#rulesetTools { #rulesetTools {
background-color: transparent; background-color: transparent;
border: 0; border: 0;
fill: #888;
display: none; display: none;
left: 4px; left: 4px;
padding: 0; padding: 0;
@ -513,11 +492,12 @@ body.advancedUser #firewallContainer > div > span.noopRule.ownRule {
top: 4px; top: 4px;
} }
#rulesetTools > span { #rulesetTools > span {
background-color: #ffe; background-color: var(--bg-transient-notice);
border: 1px solid #ddc; border: 1px solid #ddc;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
fill: var(--fg-0-50);
font-size: 1.8em; font-size: 1.8em;
line-height: 1.0; line-height: 1.0;
margin: 0; margin: 0;
@ -530,10 +510,9 @@ body.advancedUser #firewallContainer > div > span.noopRule.ownRule {
display: block; display: block;
} }
#firewallContainer.dirty ~ #rulesetTools > span:hover { #firewallContainer.dirty ~ #rulesetTools > span:hover {
fill: black; fill: inherit;
} }
body.responsive { body.responsive {
overflow-y: auto; overflow-y: auto;
width: auto; width: auto;

2
src/css/settings.css
View File

@ -1,6 +1,6 @@
hr { hr {
border: 0; border: 0;
border-top: 1px solid var(--fg-hline-1); border-top: 1px solid var(--hline-1);
margin: 1.5em 0; margin: 1.5em 0;
} }
.body { .body {

6
src/css/shortcuts.css
View File

@ -43,18 +43,12 @@
} }
.commandEntries td.commandShortcut input ~ .commandReset { .commandEntries td.commandShortcut input ~ .commandReset {
color: #888;
cursor: pointer; cursor: pointer;
font-size: 150%; font-size: 150%;
padding: 0 0.2em; padding: 0 0.2em;
vertical-align: middle; vertical-align: middle;
} }
.commandEntries td.commandShortcut input ~ .commandReset:hover {
background-color: #eee;
color: black;
}
.commandEntries td.commandShortcut input:placeholder-shown ~ .commandReset, .commandEntries td.commandShortcut input:placeholder-shown ~ .commandReset,
.commandEntries td.commandShortcut input:focus ~ .commandReset { .commandEntries td.commandShortcut input:focus ~ .commandReset {
display: none; display: none;

89
src/css/themes/default.css
View File

@ -1,21 +1,46 @@
/*
Notes:
`--fg-...`: used for color of text or small icons
`--bg-...`: used to color large areas on which text will be rendered
*/
:root { :root {
--bg-0: #fff; --bg-0: #fff;
--fg-0: hsla(261, 53%, 15%, 1); --fg-0: hsla(261, 53%, 15%, 1);
--bg-1: hsla(240, 20%, 98%, 1);
--bg-1-border: hsla(240, 20%, 90%, 1);
--bg-overlay-50: #0008;
--bg-code: hsla(240, 20%, 93%, 1);
/* these fg colors are meant to render over bg colors */
--fg-0-80: hsla(261, 53%, 15%, 0.8);
--fg-0-70: hsla(261, 53%, 15%, 0.7);
--fg-0-60: hsla(261, 53%, 15%, 0.6); --fg-0-60: hsla(261, 53%, 15%, 0.6);
--fg-0-50: hsla(261, 53%, 15%, 0.5); --fg-0-50: hsla(261, 53%, 15%, 0.5);
--fg-0-40: hsla(261, 53%, 15%, 0.4);
--fg-0-30: hsla(261, 53%, 15%, 0.3);
--fg-0-20: hsla(261, 53%, 15%, 0.2);
--fg-hline-1: #ccc; --hline-1: hsla(261, 53%, 15%, 0.2);
--bg-button: #e6e6e6; --bg-button: hsla(0, 0%, 90%, 1);
--bg-button-hover: hsla(0, 0%, 83%, 1);
--bg-button-important: hsla(36, 100%, 85%, 1);
--bg-button-important-hover: hsla(36, 100%, 77%, 1);
--fg-button: var(--fg-0); --fg-button: var(--fg-0);
--bg-button-disabled: #eee; --bg-button-disabled: hsla(0, 0%, 93%, 1);
--fg-button-disabled: #888; --fg-button-disabled: hsla(0, 0%, 60%, 1);
--bg-transient-notice: hsla(60, 100%, 95%, 1);
--bg-dashboard-nav: #f9f9fb;
--fg-dashboard-nav-off: var(--fg-0); --fg-dashboard-nav-off: var(--fg-0);
--fg-dashboard-nav-on: #592acb; --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-dimmed: #888;
--fg-icon-info-lvl-0: inherit; --fg-icon-info-lvl-0: inherit;
@ -25,6 +50,54 @@
--fg-icon-info-lvl-2: hsla(36, 100%, 40%, 1); --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-dimmed: hsla(16, 100%, 50%, 0.5);
--fg-icon-info-lvl-3: hsla(16, 100%, 50%, 1); --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-dimmed: hsla(0, 100%, 35%, 0.5);
--fg-icon-info-lvl-4: hsla(0, 100%, 40%, 1); --fg-icon-info-lvl-4: hsla(0, 100%, 35%, 1);
--large-icon-info-lvl-2: hsla(41, 100%, 47%, 1);
--bg-tooltip: hsla(60, 100%, 97%, 1);
--fg-tooltip: var(--fg-0);
/* popup panel */
--bg-popup-1: hsla(261, 0%, 93%, 1);
--fg-popup-power: hsla(214, 100%, 44%, 1);
--fg-popup-power-hover: opacity(80%);
--bg-popup-cell-label-filter: opacity(40%);
--fg-popup-fwcell-cname: hsla(240, 100%, 40%, 1);
--bg-popup-cell: var(--bg-popup-1);
--bg-popup-cell-allow: hsla(120, 40%, 75%, 1);
--bg-popup-cell-allow-own: hsla(120, 100%, 30%, 1);
--bg-popup-cell-noop: hsla(0, 0%, 75%, 1);
--bg-popup-cell-noop-own: hsla(0, 0%, 45%, 1);
--bg-popup-cell-block: hsla(0, 50%, 80%, 1);
--bg-popup-cell-block-own: hsla(0, 100%, 40%, 1);
--bg-popup-cell-label-mixed: hsla(45, 100%, 38%, 1);
--fg-popup-icon-caption-display: unset;
--fg-popup-icon-x: hsla(0, 100%, 50%, 1);
}
/**
Source for color-blind color scheme from https://github.com/WyohKnott:
https://github.com/chrisaljoudi/uBlock/issues/467#issuecomment-95177219
*/
:root.colorBlind {
--bg-popup-cell-allow: hsla(42, 100%, 80%, 1);
--bg-popup-cell-allow-own: hsla(42, 100%, 50%, 1);
--bg-popup-cell-noop: hsla(0, 0%, 75%, 1);
--bg-popup-cell-noop-own: hsla(0, 0%, 45%, 1);
--bg-popup-cell-block: hsla(230, 25%, 75%, 1);
--bg-popup-cell-block-own: hsla(230, 100%, 25%, 1);
--bg-popup-cell-label-mixed: hsla(25, 100%, 50%, 1);
}
/* Default dark theme starts here */
@media (prefers-color-scheme: dark) {
:root {
}
:root.colorBlind {
}
} }

24
src/js/3p-filters.js
View File

@ -433,18 +433,20 @@ const selectFilterLists = async function() {
messaging.send('dashboard', { messaging.send('dashboard', {
what: 'userSettings', what: 'userSettings',
name: 'parseAllABPHideFilters', name: 'parseAllABPHideFilters',
value: document.getElementById('parseCosmeticFilters').checked, value: uDom.nodeFromId('parseCosmeticFilters').checked,
}); });
messaging.send('dashboard', { messaging.send('dashboard', {
what: 'userSettings', what: 'userSettings',
name: 'ignoreGenericCosmeticFilters', name: 'ignoreGenericCosmeticFilters',
value: document.getElementById('ignoreGenericCosmeticFilters').checked, value: uDom.nodeFromId('ignoreGenericCosmeticFilters').checked,
}); });
// Filter lists to select // Filter lists to select
const toSelect = []; const toSelect = [];
let liEntries = document.querySelectorAll('#lists .listEntry[data-listkey]:not(.toRemove)'); for (
for ( const liEntry of liEntries ) { const liEntry of
document.querySelectorAll('#lists .listEntry[data-listkey]:not(.toRemove)')
) {
if ( liEntry.querySelector('input[type="checkbox"]:checked') !== null ) { if ( liEntry.querySelector('input[type="checkbox"]:checked') !== null ) {
toSelect.push(liEntry.getAttribute('data-listkey')); toSelect.push(liEntry.getAttribute('data-listkey'));
} }
@ -452,16 +454,22 @@ const selectFilterLists = async function() {
// External filter lists to remove // External filter lists to remove
const toRemove = []; const toRemove = [];
liEntries = document.querySelectorAll('#lists .listEntry.toRemove[data-listkey]'); for (
for ( const liEntry of liEntries ) { const liEntry of
document.querySelectorAll('#lists .listEntry.toRemove[data-listkey]')
) {
toRemove.push(liEntry.getAttribute('data-listkey')); toRemove.push(liEntry.getAttribute('data-listkey'));
} }
// External filter lists to import // External filter lists to import
const externalListsElem = document.getElementById('externalLists'); const externalListsElem = document.getElementById('externalLists');
const toImport = externalListsElem.value.trim(); const toImport = externalListsElem.value.trim();
externalListsElem.value = ''; {
uDom.nodeFromId('importLists').checked = false; const liEntry = externalListsElem.closest('.listEntry');
liEntry.classList.remove('checked');
liEntry.querySelector('input[type="checkbox"]').checked = false;
externalListsElem.value = '';
}
await messaging.send('dashboard', { await messaging.send('dashboard', {
what: 'applyFilterListSelection', what: 'applyFilterListSelection',

2
src/js/dyna-rules.js
View File

@ -373,7 +373,7 @@ const onTextChanged = (( ) => {
cleanEditToken = mergeView.editor().changeGeneration(); cleanEditToken = mergeView.editor().changeGeneration();
isClean = true; isClean = true;
} }
diff.classList.toggle('editing', isClean === false); document.body.classList.toggle('editing', isClean === false);
diff.classList.toggle('dirty', mergeView.leftChunks().length !== 0); diff.classList.toggle('dirty', mergeView.leftChunks().length !== 0);
document.getElementById('editSaveButton') document.getElementById('editSaveButton')
.classList.toggle('disabled', isClean); .classList.toggle('disabled', isClean);

19
src/js/popup-fenix.js
View File

@ -265,11 +265,10 @@ const updateAllFirewallCells = function() {
const buildAllFirewallRows = function() { const buildAllFirewallRows = function() {
// Do this before removing the rows // Do this before removing the rows
if ( dfHotspots === null ) { if ( dfHotspots === null ) {
dfHotspots = uDom('#actionSelector') dfHotspots =
.toggleClass('colorBlind', popupData.colorBlindFriendly) uDom('#actionSelector').on('click', 'span', setFirewallRuleHandler);
.on('click', 'span', setFirewallRuleHandler);
} }
dfHotspots.detach(); dfHotspots.remove();
// Update incrementally: reuse existing rows if possible. // Update incrementally: reuse existing rows if possible.
const rowContainer = document.getElementById('firewallContainer'); const rowContainer = document.getElementById('firewallContainer');
@ -479,7 +478,7 @@ const renderPopup = function() {
dfPaneVisible === true dfPaneVisible === true
); );
uDom.nodeFromId('firewallContainer').classList.toggle( document.documentElement.classList.toggle(
'colorBlind', 'colorBlind',
popupData.colorBlindFriendly === true popupData.colorBlindFriendly === true
); );
@ -734,7 +733,7 @@ const mouseenterCellHandler = function() {
}; };
const mouseleaveCellHandler = function() { const mouseleaveCellHandler = function() {
dfHotspots.detach(); dfHotspots.remove();
}; };
/******************************************************************************/ /******************************************************************************/
@ -759,6 +758,12 @@ const setFirewallRule = async function(src, des, type, action, persist) {
persist: persist, persist: persist,
}); });
// Remove action widget if an own rule has been set, this allows to click
// again immediately to remove the rule.
if ( action !== 0 ) {
dfHotspots.remove();
}
cachePopupData(response); cachePopupData(response);
updateAllFirewallCells(); updateAllFirewallCells();
hashFromPopupData(); hashFromPopupData();
@ -801,7 +806,7 @@ const setFirewallRuleHandler = function(ev) {
action, action,
ev.ctrlKey || ev.metaKey ev.ctrlKey || ev.metaKey
); );
dfHotspots.detach(); dfHotspots.remove();
}; };
/******************************************************************************/ /******************************************************************************/

19
src/js/popup.js
View File

@ -300,11 +300,10 @@ const updateAllFirewallCells = function() {
const buildAllFirewallRows = function() { const buildAllFirewallRows = function() {
// Do this before removing the rows // Do this before removing the rows
if ( dfHotspots === null ) { if ( dfHotspots === null ) {
dfHotspots = uDom('#actionSelector') dfHotspots =
.toggleClass('colorBlind', popupData.colorBlindFriendly) uDom('#actionSelector').on('click', 'span', setFirewallRuleHandler);
.on('click', 'span', setFirewallRuleHandler);
} }
dfHotspots.detach(); dfHotspots.remove();
// Update incrementally: reuse existing rows if possible. // Update incrementally: reuse existing rows if possible.
const rowContainer = document.getElementById('firewallContainer'); const rowContainer = document.getElementById('firewallContainer');
@ -523,7 +522,7 @@ const renderPopup = function() {
dfPaneVisible === true dfPaneVisible === true
); );
uDom.nodeFromId('firewallContainer').classList.toggle( document.documentElement.classList.toggle(
'colorBlind', 'colorBlind',
popupData.colorBlindFriendly === true popupData.colorBlindFriendly === true
); );
@ -827,7 +826,7 @@ const mouseenterCellHandler = function() {
}; };
const mouseleaveCellHandler = function() { const mouseleaveCellHandler = function() {
dfHotspots.detach(); dfHotspots.remove();
}; };
/******************************************************************************/ /******************************************************************************/
@ -852,6 +851,12 @@ const setFirewallRule = async function(src, des, type, action, persist) {
persist: persist, persist: persist,
}); });
// Remove action widget if an own rule has been set, this allows to click
// again immediately to remove the rule.
if ( action !== 0 ) {
dfHotspots.remove();
}
cachePopupData(response); cachePopupData(response);
updateAllFirewallCells(); updateAllFirewallCells();
hashFromPopupData(); hashFromPopupData();
@ -894,7 +899,7 @@ const setFirewallRuleHandler = function(ev) {
action, action,
ev.ctrlKey || ev.metaKey ev.ctrlKey || ev.metaKey
); );
dfHotspots.detach(); dfHotspots.remove();
}; };
/******************************************************************************/ /******************************************************************************/

2
src/popup-fenix.html
View File

@ -66,7 +66,7 @@
<div id="templates" style="display: none"> <div id="templates" style="display: none">
<div data-des="" data-type="*"><span><span></span><sub></sub></span><span data-src="/"></span><span data-src="."></span><span data-src="."></span></div> <div data-des="" data-type="*"><span><span></span><sub></sub></span><span data-src="/"></span><span data-src="."></span><span data-src="."></span></div>
<div id="actionSelector"><span id="dynaAllow"></span><span id="dynaNoop"></span><span id="dynaBlock"></span></div> <div id="actionSelector"><span id="dynaAllow"></span><span id="dynaNoop"></span><span id="dynaBlock"></span><span id="dynaCounts"></span></div>
<div id="hotspotTip"></div> <div id="hotspotTip"></div>
<div id="tooltip"></div> <div id="tooltip"></div>
</div> </div>

2
src/popup.html
View File

@ -56,7 +56,7 @@
<div id="templates" style="display: none"> <div id="templates" style="display: none">
<div data-des="" data-type="*"><span><span></span><sub></sub></span><span data-src="/"></span><span data-src="."></span><span data-src="."></span></div> <div data-des="" data-type="*"><span><span></span><sub></sub></span><span data-src="/"></span><span data-src="."></span><span data-src="."></span></div>
<div id="actionSelector"><span id="dynaAllow"></span><span id="dynaNoop"></span><span id="dynaBlock"></span></div> <div id="actionSelector"><span id="dynaAllow"></span><span id="dynaNoop"></span><span id="dynaBlock"></span><span id="dynaCounts"></span></div>
<div id="hotspotTip"></div> <div id="hotspotTip"></div>
<div id="tooltip"></div> <div id="tooltip"></div>
</div> </div>

3
src/shortcuts.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>uBlock Origin — Keyboard shortcuts</title> <title>uBlock Origin — Keyboard shortcuts</title>
<link rel="stylesheet" type="text/css" href="css/themes/default.css">
<link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/dashboard-common.css"> <link rel="stylesheet" type="text/css" href="css/dashboard-common.css">
<link rel="stylesheet" type="text/css" href="css/shortcuts.css"> <link rel="stylesheet" type="text/css" href="css/shortcuts.css">
@ -21,7 +22,7 @@
<td class="commandDesc"> <td class="commandDesc">
<td class="commandShortcut"> <td class="commandShortcut">
<input type="text" placeholder="shortcutCapturePlaceholder"> <input type="text" placeholder="shortcutCapturePlaceholder">
<span class="commandReset">&times;</span> <button class="commandReset custom" type="button">&times;</button>
</div> </div>
</div> </div>