mirror of
https://github.com/gorhill/uBlock.git
synced 2024-11-10 09:07:54 +01:00
Sixth pass to re-design the dashboard
Related commits: -0662767dd6-99b2a0a761-a8e3118fea-453f5450b6-a45a21f337This 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
parent
cb08c978f0
commit
e917213e81
21 changed files with 381 additions and 352 deletions
|
|
@ -41,7 +41,7 @@
|
|||
|
||||
<div id="templates" style="display: none;">
|
||||
<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>
|
||||
<div class="li listEntry">
|
||||
|
|
|
|||
|
|
@ -9,13 +9,10 @@
|
|||
<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="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>
|
||||
<div id="cloudOptions">
|
||||
<div>
|
||||
<p><label data-i18n="cloudDeviceNamePrompt"></label> <input id="cloudDeviceName" type="text" value="">
|
||||
<p><button id="cloudOptionsSubmit" type="button" data-i18n="genericSubmit"></button>
|
||||
</div>
|
||||
<label data-i18n="cloudDeviceNamePrompt"></label> <input id="cloudDeviceName" type="text" value=""> <button id="cloudOptionsSubmit" class="custom vflex" type="button" data-i18n="genericSubmit"></button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
|
|||
pointer-events: none;
|
||||
}
|
||||
.groupEntry .geCount {
|
||||
color: var(--fg-0-60);
|
||||
font-size: 90%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -125,9 +126,6 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
|
|||
.listEntry.checked .counts {
|
||||
display: inline;
|
||||
}
|
||||
.dim {
|
||||
color: #666;
|
||||
}
|
||||
.listEntry .status {
|
||||
cursor: default;
|
||||
display: none;
|
||||
|
|
@ -165,6 +163,9 @@ body.updating .listEntry.checked.obsolete .updating {
|
|||
animation: spin 1s steps(8) infinite;
|
||||
display: inline-flex;
|
||||
}
|
||||
.listEntry.toImport {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
.listEntry.toImport textarea {
|
||||
border: 1px solid #ccc;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -190,7 +191,8 @@ body.updating .listEntry.checked.obsolete .updating {
|
|||
-webkit-margin-start: 0;
|
||||
}
|
||||
.li.listEntry {
|
||||
background-color: var(--bg-dashboard-nav);
|
||||
background-color: var(--bg-1);
|
||||
overflow-x: auto;
|
||||
}
|
||||
.li.listEntry label > span {
|
||||
flex-grow: 1;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
background: url("../img/cloud.png") hsl(216, 100%, 93%);
|
||||
border-radius: 3px;
|
||||
margin: 0.5em 0;
|
||||
overflow: auto;
|
||||
padding: 0.5em;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -22,7 +23,7 @@
|
|||
visibility: hidden;
|
||||
}
|
||||
#cloudWidget button.error {
|
||||
color: red;
|
||||
color: var(--fg-icon-info-lvl-4);
|
||||
}
|
||||
#cloudPullAndMerge {
|
||||
margin-left: 0.25em;
|
||||
|
|
@ -34,61 +35,51 @@
|
|||
top: 0;
|
||||
}
|
||||
#cloudInfo {
|
||||
color: gray;
|
||||
display: inline-block;
|
||||
color: var(--fg-0-60);
|
||||
flex-shrink: 0;
|
||||
font-size: 90%;
|
||||
margin: 0 1em;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
white-space: pre;
|
||||
white-space: pre-line;
|
||||
}
|
||||
#cloudError {
|
||||
color: red;
|
||||
color: var(--fg-icon-info-lvl-4);
|
||||
flex-grow: 1;
|
||||
flex-shrink: 2;
|
||||
font-size: x-small;
|
||||
margin: 0.5em 0 0 0;
|
||||
margin: 0 1em;
|
||||
}
|
||||
#cloudError:empty {
|
||||
display: none;
|
||||
}
|
||||
#cloudWidget > #cloudCog {
|
||||
#cloudWidget #cloudCog {
|
||||
color: var(--fg-0-50);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
fill: var(--fg-0-50);
|
||||
font-size: 110%;
|
||||
margin: 0;
|
||||
opacity: 0.5;
|
||||
padding: 4px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
padding: 0.4em;
|
||||
}
|
||||
body[dir="ltr"] #cloudWidget > #cloudCog {
|
||||
right: 0;
|
||||
#cloudWidget #cloudCog:hover {
|
||||
color: inherit;
|
||||
fill: inherit;
|
||||
}
|
||||
body[dir="rtl"] #cloudWidget > #cloudCog {
|
||||
left: 0;
|
||||
}
|
||||
#cloudWidget > #cloudCog:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
#cloudWidget > #cloudOptions {
|
||||
align-items: center;
|
||||
-webkit-align-items: center;
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
#cloudWidget #cloudOptions {
|
||||
background-color: var(--bg-0);
|
||||
border: 1px solid var(--bg-1-border);
|
||||
bottom: 0;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
-webkit-justify-content: center;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
margin: 0.4em;
|
||||
padding: 0.4em;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
z-index: 2000;
|
||||
z-index: 10;
|
||||
}
|
||||
#cloudWidget > #cloudOptions.show {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
#cloudWidget #cloudOptions.show {
|
||||
display: block;
|
||||
}
|
||||
#cloudWidget > #cloudOptions > div {
|
||||
background-color: white;
|
||||
#cloudWidget #cloudOptions > div {
|
||||
background-color: var(--bg-0);
|
||||
border-radius: 3px;
|
||||
padding: 1em;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ body {
|
|||
padding: 0;
|
||||
}
|
||||
code {
|
||||
background-color: #eee;
|
||||
background-color: var(--bg-code);
|
||||
padding: 0 0.25em;
|
||||
}
|
||||
textarea {
|
||||
|
|
@ -43,14 +43,19 @@ button.custom {
|
|||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
button.custom.vflex {
|
||||
height: 100%;
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
button.custom:hover {
|
||||
background-color: #d4d4d4;
|
||||
background-color: var(--bg-button-hover);
|
||||
}
|
||||
button.custom.important {
|
||||
background-color: #ffddaa;
|
||||
background-color: var(--bg-button-important);
|
||||
}
|
||||
button.custom.important:hover {
|
||||
background-color: #ffcc80;
|
||||
background-color: var(--bg-button-important-hover);
|
||||
}
|
||||
button.custom.disabled,
|
||||
button.custom[disabled],
|
||||
|
|
@ -106,7 +111,7 @@ input[type="checkbox"] {
|
|||
@media (max-width: 640px) {
|
||||
button.custom.iconifiable > .fa,
|
||||
button.custom.iconifiable > .fa-icon {
|
||||
font-size: 120%;
|
||||
font-size: 1.2rem;
|
||||
padding: 0;
|
||||
}
|
||||
button.custom.iconifiable > [data-i18n] {
|
||||
|
|
@ -131,9 +136,8 @@ input[type="checkbox"] {
|
|||
.disabled > .ubo-icon,
|
||||
.ubo-icon[disabled],
|
||||
[disabled] > .ubo-icon {
|
||||
color: #000;
|
||||
fill: #000;
|
||||
opacity: 0.25;
|
||||
color: var(--fg-button-disabled);
|
||||
fill: var(--fg-button-disabled);
|
||||
stroke: var(--fg-button-disabled);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,15 +45,7 @@ input[type="number"] {
|
|||
width: 5em;
|
||||
}
|
||||
input[type="checkbox"][disabled] + * {
|
||||
color: #888;
|
||||
}
|
||||
.para {
|
||||
width: 40em;
|
||||
}
|
||||
.warn {
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
background-color: #FEDAE0;
|
||||
color: var(--fg-0-50);
|
||||
}
|
||||
@media (max-height: 640px), (max-height: 800px) and (max-width: 480px) {
|
||||
.body > p,
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@ html, body {
|
|||
width: 100%;
|
||||
}
|
||||
#dashboard-nav {
|
||||
background-color: var(--bg-dashboard-nav);
|
||||
background-color: var(--bg-1);
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--dashboard-nav-border);
|
||||
border-bottom: 1px solid var(--bg-1-border);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -32,7 +32,7 @@ html, body {
|
|||
}
|
||||
.tabButton {
|
||||
border: 0;
|
||||
border-bottom: 3px solid var(--bg-dashboard-nav);
|
||||
border-bottom: 3px solid var(--bg-1);
|
||||
color: var(--fg-dashboard-nav-off);
|
||||
fill: var(--fg-dashboard-nav-off);
|
||||
cursor: pointer;
|
||||
|
|
@ -67,7 +67,7 @@ iframe {
|
|||
display: initial;
|
||||
}
|
||||
#unsavedWarning > div:first-of-type {
|
||||
background-color: #ffffcc;
|
||||
background-color: var(--bg-transient-notice);
|
||||
padding: 0.5em;
|
||||
}
|
||||
#unsavedWarning > div:last-of-type {
|
||||
|
|
|
|||
|
|
@ -52,18 +52,17 @@ select {
|
|||
padding: 2px;
|
||||
}
|
||||
.code {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
background-color: var(--bg-code);
|
||||
font-family: monospace;
|
||||
line-height: 1;
|
||||
padding: 4px;
|
||||
word-break: break-all;
|
||||
}
|
||||
#warningSign {
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
}
|
||||
#warningSign > a {
|
||||
fill: #f2a500;
|
||||
fill: var(--large-icon-info-lvl-2);
|
||||
font-size: 10em;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -81,8 +80,9 @@ select {
|
|||
background-color: transparent;
|
||||
top: 100%;
|
||||
box-sizing: border-box;
|
||||
color: var(--fg-0-60);
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
fill: var(--fg-0-60);
|
||||
padding: 0.2em;
|
||||
position: absolute;
|
||||
transform: translate(0, -50%);
|
||||
|
|
@ -94,7 +94,8 @@ body[dir="rtl"] #theURL > p > span {
|
|||
left: 0;
|
||||
}
|
||||
#theURL > p:hover > span {
|
||||
opacity: 1;
|
||||
color: var(--fg-0);
|
||||
fill: var(--fg-0);
|
||||
}
|
||||
#theURL > p > span:before {
|
||||
content: '\f010';
|
||||
|
|
@ -103,10 +104,10 @@ body[dir="rtl"] #theURL > p > span {
|
|||
content: '\f00e';
|
||||
}
|
||||
#parsed {
|
||||
background-color: #f8f8f8;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
background-color: var(--bg-1);
|
||||
border: 1px solid var(--bg-code);
|
||||
border-top: none;
|
||||
color: gray;
|
||||
color: var(--fg-0-80);
|
||||
font-size: small;
|
||||
overflow-x: hidden;
|
||||
padding: 4px;
|
||||
|
|
@ -135,12 +136,6 @@ body[dir="rtl"] #theURL > p > span {
|
|||
text-align: left;
|
||||
}
|
||||
|
||||
.filterList a {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.filterList a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.filterList:first-child .filterListSeparator {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,25 +37,27 @@ body {
|
|||
text-align: center;
|
||||
}
|
||||
#ruleFilter .fa {
|
||||
color: #888;
|
||||
color: var(--fg-0-60);
|
||||
}
|
||||
#revertButton,
|
||||
#commitButton,
|
||||
#diff.editing #exportButton,
|
||||
#diff.editing #importButton {
|
||||
background-color: #eee;
|
||||
color: #aaa;
|
||||
body.editing #diff #exportButton,
|
||||
body.editing #diff #importButton {
|
||||
background-color: var(--bg-button-disabled);
|
||||
color: var(--fg-button-disabled);
|
||||
fill: var(--fg-button-disabled);
|
||||
pointer-events: none;
|
||||
}
|
||||
#diff.dirty:not(.editing) #revertButton,
|
||||
#diff.dirty:not(.editing) #commitButton {
|
||||
background-color: #e6e6e6;
|
||||
color: #20123a;
|
||||
body:not(.editing) #diff.dirty #revertButton,
|
||||
body:not(.editing) #diff.dirty #commitButton {
|
||||
background-color: var(--bg-button);
|
||||
color: var(--fg-button);
|
||||
fill: var(--fg-button);
|
||||
pointer-events: auto;
|
||||
}
|
||||
#diff.dirty:not(.editing) #revertButton:hover,
|
||||
#diff.dirty:not(.editing) #commitButton:hover {
|
||||
background-color: #d4d4d4;
|
||||
body:not(.editing) #diff.dirty #revertButton:hover,
|
||||
body:not(.editing) #diff.dirty #commitButton:hover {
|
||||
background-color: var(--bg-button-hover);
|
||||
}
|
||||
|
||||
.codeMirrorContainer {
|
||||
|
|
@ -65,15 +67,15 @@ body {
|
|||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
#diff.editing .CodeMirror-merge-copy,
|
||||
#diff.editing .CodeMirror-merge-copy-reverse {
|
||||
body.editing .CodeMirror-merge-copy,
|
||||
body.editing .CodeMirror-merge-copy-reverse {
|
||||
display: none;
|
||||
}
|
||||
#diff.editing .CodeMirror-merge-left .CodeMirror {
|
||||
color: #888;
|
||||
body.editing .CodeMirror-merge-left .CodeMirror {
|
||||
color: var(--fg-0-60);
|
||||
}
|
||||
#diff.editing .CodeMirror-merge-editor .CodeMirror {
|
||||
background-color: #ffe;
|
||||
body.editing .CodeMirror-merge-editor .CodeMirror {
|
||||
background-color: var(--bg-transient-notice);
|
||||
}
|
||||
body[dir="rtl"] .CodeMirror-merge-pane-rightmost {
|
||||
right: unset;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,4 @@
|
|||
/* External CSS values override */
|
||||
body {
|
||||
color: #20123a;
|
||||
fill: #20123a;
|
||||
}
|
||||
.fa-icon {
|
||||
padding: 0 0.1em;
|
||||
}
|
||||
|
|
@ -13,10 +9,6 @@ body {
|
|||
|
||||
/* Internal CSS values */
|
||||
body {
|
||||
background-color: white;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
|
@ -47,7 +39,7 @@ hr {
|
|||
}
|
||||
|
||||
#sticky {
|
||||
background-color: white;
|
||||
background-color: var(--bg-0);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
|
|
@ -64,17 +56,19 @@ hr {
|
|||
margin: 0.5em 0;
|
||||
}
|
||||
#switch .fa-icon {
|
||||
fill: #0060df;
|
||||
color: var(--fg-popup-power);
|
||||
fill: var(--fg-popup-power);
|
||||
cursor: pointer;
|
||||
font-size: 700%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#switch .fa-icon:hover {
|
||||
opacity: 0.9;
|
||||
filter: var(--fg-popup-power-hover);
|
||||
}
|
||||
body.off #switch .fa-icon {
|
||||
fill: #ccc;
|
||||
color: var(--fg-0-20);
|
||||
fill: var(--fg-0-20);
|
||||
}
|
||||
.rulesetTools {
|
||||
background-color: transparent;
|
||||
|
|
@ -87,7 +81,7 @@ body.off #switch .fa-icon {
|
|||
padding: 0.5em;
|
||||
}
|
||||
.rulesetTools [id] {
|
||||
background-color: #ffe;
|
||||
background-color: var(--bg-transient-notice);
|
||||
border: 1px solid #ddc;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
|
@ -151,6 +145,9 @@ body.needSave #revertRules {
|
|||
.tool.enabled {
|
||||
visibility: visible;
|
||||
}
|
||||
.tool [data-i18n] {
|
||||
display: var(--fg-popup-icon-caption-display);
|
||||
}
|
||||
|
||||
.statValue {
|
||||
margin: 0;
|
||||
|
|
@ -162,7 +159,7 @@ body.needSave #revertRules {
|
|||
#extraTools .fa-icon > .nope {
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
stroke: red;
|
||||
stroke: var(--fg-popup-icon-x);
|
||||
stroke-width: 2;
|
||||
transform: translateX(-50%);
|
||||
visibility: hidden;
|
||||
|
|
@ -177,12 +174,12 @@ body.needSave #revertRules {
|
|||
}
|
||||
|
||||
#tooltip {
|
||||
background-color: #ffffee;
|
||||
background-color: var(--bg-tooltip);
|
||||
border: 1px solid gray;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 3px gray;
|
||||
box-sizing: border-box;
|
||||
color: black;
|
||||
color: var(--fg-tooltip);
|
||||
cursor: pointer;
|
||||
direction: ltr;
|
||||
font: 12px sans-serif;
|
||||
|
|
@ -242,11 +239,10 @@ body[dir="rtl"] #tooltip {
|
|||
display: none;
|
||||
}
|
||||
#firewallContainer > div > span {
|
||||
background-color: #e0e0e6;
|
||||
background-color: var(--bg-popup-cell);
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
color: #000;
|
||||
display: inline-flex;
|
||||
padding: 0.4em 0;
|
||||
position: relative;
|
||||
|
|
@ -266,7 +262,7 @@ body[dir="rtl"] #tooltip {
|
|||
word-break: break-word;
|
||||
}
|
||||
#firewallContainer > div.isCname > span:first-of-type {
|
||||
color: mediumblue;
|
||||
color: var(--fg-popup-fwcell-cname);
|
||||
}
|
||||
#firewallContainer > div > span:first-of-type > sub {
|
||||
display: inline-block;
|
||||
|
|
@ -287,7 +283,7 @@ body[dir="rtl"] #tooltip {
|
|||
}
|
||||
#firewallContainer > div > span:nth-of-type(3),
|
||||
#firewallContainer > div > span:nth-of-type(4) {
|
||||
color: #444;
|
||||
color: var(--fg-0-70);
|
||||
display: none;
|
||||
font-family: monospace;
|
||||
text-align: center;
|
||||
|
|
@ -296,7 +292,7 @@ body[dir="rtl"] #tooltip {
|
|||
font-weight: bold;
|
||||
}
|
||||
#firewallContainer > div:first-of-type > span:first-of-type::before {
|
||||
color: #aaa;
|
||||
color: var(--fg-0-50);
|
||||
content: '+';
|
||||
padding-right: 0.25em;
|
||||
}
|
||||
|
|
@ -314,33 +310,41 @@ body[dir="rtl"] #tooltip {
|
|||
justify-content: space-between;
|
||||
}
|
||||
#firewallContainer > div > span[data-acount]::before,
|
||||
#firewallContainer > div > span[data-bcount]::after {
|
||||
align-items: center;
|
||||
#firewallContainer > div > span[data-bcount]::after,
|
||||
#firewallContainer > div > span[data-acount] > #actionSelector > #dynaCounts::before,
|
||||
#firewallContainer > div > span[data-acount] > #actionSelector > #dynaCounts::after {
|
||||
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;
|
||||
}
|
||||
#firewallContainer > div > span[data-acount="1"]::before {
|
||||
#firewallContainer > div > span[data-acount="1"]::before,
|
||||
#firewallContainer > div > span[data-acount="1"] > #actionSelector > #dynaCounts::before {
|
||||
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: '++';
|
||||
}
|
||||
#firewallContainer > div > span[data-acount="3"]::before {
|
||||
#firewallContainer > div > span[data-acount="3"]::before,
|
||||
#firewallContainer > div > span[data-acount="3"] > #actionSelector > #dynaCounts::before {
|
||||
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;
|
||||
}
|
||||
#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';
|
||||
}
|
||||
#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';
|
||||
}
|
||||
#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';
|
||||
}
|
||||
|
||||
|
|
@ -370,78 +374,62 @@ body.advancedUser #firewallContainer > div > span:first-of-type ~ span {
|
|||
box-sizing: border-box;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
filter: var(--bg-popup-cell-label-filter);
|
||||
height: 100%;
|
||||
left: 0;
|
||||
opacity: 0.4;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 7px;
|
||||
}
|
||||
#firewallContainer > div.isRootContext > span:first-of-type::before {
|
||||
background-color: rgb(127, 127, 127);
|
||||
background-color: var(--fg-0-50);
|
||||
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.isDomain.totalAllowed > span:first-of-type::before {
|
||||
background-color: rgb(0, 160, 0);
|
||||
}
|
||||
#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);
|
||||
background-color: var(--bg-popup-cell-allow-own);
|
||||
}
|
||||
#firewallContainer > div.blocked > span:first-of-type::before,
|
||||
#firewallContainer > div.isDomain.totalBlocked > span:first-of-type::before {
|
||||
background-color: rgb(192, 0, 0);
|
||||
}
|
||||
#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);
|
||||
background-color: var(--bg-popup-cell-block-own);
|
||||
}
|
||||
#firewallContainer > div.allowed.blocked > 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 */
|
||||
body.advancedUser #firewallContainer > div > span.allowRule {
|
||||
background-color: rgba(0, 160, 0, 0.3);
|
||||
body.advancedUser #firewallContainer > div > span.allowRule,
|
||||
#actionSelector > #dynaAllow {
|
||||
background-color: var(--bg-popup-cell-allow);
|
||||
}
|
||||
body.advancedUser #firewallContainer.colorBlind > div > span.allowRule {
|
||||
background-color: rgba(255, 194, 57, 0.4);
|
||||
body.advancedUser #firewallContainer > div > span.blockRule,
|
||||
#actionSelector > #dynaBlock {
|
||||
background-color: var(--bg-popup-cell-block);
|
||||
}
|
||||
body.advancedUser #firewallContainer > div > span.blockRule {
|
||||
background-color: rgba(192, 0, 0, 0.3);
|
||||
body.advancedUser #firewallContainer > div > span.noopRule,
|
||||
#actionSelector > #dynaNoop {
|
||||
background-color: var(--bg-popup-cell-noop);
|
||||
}
|
||||
body.advancedUser #firewallContainer.colorBlind > div > span.blockRule {
|
||||
background-color: rgba(0, 19, 110, 0.4);
|
||||
body.advancedUser #firewallContainer > div > span.ownRule,
|
||||
#firewallContainer > div > span.ownRule {
|
||||
color: var(--bg-0);
|
||||
}
|
||||
body.advancedUser #firewallContainer > div > span.noopRule {
|
||||
background-color: rgba(96, 96, 96, 0.4);
|
||||
body.advancedUser #firewallContainer > div > span.allowRule.ownRule,
|
||||
#actionSelector > #dynaAllow:hover {
|
||||
background-color: var(--bg-popup-cell-allow-own);
|
||||
}
|
||||
body.advancedUser #firewallContainer > div > span.ownRule {
|
||||
color: white;
|
||||
body.advancedUser #firewallContainer > div > span.blockRule.ownRule,
|
||||
#actionSelector > #dynaBlock:hover {
|
||||
background-color: var(--bg-popup-cell-block-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(96, 96, 96, 1);
|
||||
body.advancedUser #firewallContainer > div > span.noopRule.ownRule,
|
||||
#actionSelector > #dynaNoop:hover {
|
||||
background-color: var(--bg-popup-cell-noop-own);
|
||||
}
|
||||
|
||||
#actionSelector {
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -451,32 +439,25 @@ body.advancedUser #firewallContainer > div > span.noopRule.ownRule {
|
|||
#actionSelector > span {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
opacity: 0.2;
|
||||
}
|
||||
#actionSelector > span:first-of-type {
|
||||
#actionSelector > #dynaAllow {
|
||||
width: 33%;
|
||||
}
|
||||
#actionSelector > span:nth-of-type(2) {
|
||||
#actionSelector > #dynaNoop {
|
||||
width: 33.5%;
|
||||
}
|
||||
#actionSelector > span:nth-of-type(3) {
|
||||
#actionSelector > #dynaBlock {
|
||||
width: 33.5%;
|
||||
}
|
||||
#actionSelector > span:hover {
|
||||
opacity: 0.75;
|
||||
}
|
||||
#actionSelector > span:first-of-type {
|
||||
background-color: rgb(0, 160, 0);
|
||||
}
|
||||
#actionSelector.colorBlind > span:first-of-type {
|
||||
background-color: rgb(255, 194, 57);
|
||||
}
|
||||
#actionSelector > span:nth-of-type(2) {
|
||||
background-color: rgb(108, 108, 108);
|
||||
}
|
||||
#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);
|
||||
#actionSelector > #dynaCounts {
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
display: inline-flex;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,16 @@
|
|||
body {
|
||||
background-color: white;
|
||||
border: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
width: fit-content;
|
||||
width: -moz-fit-content;
|
||||
}
|
||||
|
||||
h2 {
|
||||
background-color: #eee;
|
||||
background-color: var(--bg-popup-cell);
|
||||
border: 0;
|
||||
color: #666;
|
||||
color: var(--fg-0-70);
|
||||
cursor: pointer;
|
||||
font-size: 100%;
|
||||
font-weight: normal;
|
||||
|
|
@ -96,17 +91,19 @@ p {
|
|||
margin: 0.8em 0;
|
||||
}
|
||||
#switch .fa-icon {
|
||||
fill: #0046ff;
|
||||
color: var(--fg-popup-power);
|
||||
fill: var(--fg-popup-power);
|
||||
cursor: pointer;
|
||||
font-size: 700%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#switch .fa-icon:hover {
|
||||
opacity: 0.9;
|
||||
filter: var(--fg-popup-power-hover);
|
||||
}
|
||||
body.off #switch .fa-icon {
|
||||
fill: #ccc;
|
||||
color: var(--fg-0-20);
|
||||
fill: var(--fg-0-20);
|
||||
}
|
||||
#basicTools {
|
||||
margin: 1.2em 0 0.5em 0;
|
||||
|
|
@ -115,9 +112,9 @@ body.off #switch .fa-icon {
|
|||
margin-left: 0;
|
||||
}
|
||||
.tool {
|
||||
color: #aaa;
|
||||
color: var(--fg-0-40);
|
||||
cursor: pointer;
|
||||
fill: #aaa;
|
||||
fill: var(--fg-0-40);
|
||||
margin-left: 0.8em;
|
||||
min-width: 1em;
|
||||
padding: 0 0.2em;
|
||||
|
|
@ -128,14 +125,14 @@ body.off #switch .fa-icon {
|
|||
visibility: visible;
|
||||
}
|
||||
.tool.enabled:hover {
|
||||
color: #444;
|
||||
fill: #444;
|
||||
color: inherit;
|
||||
fill: inherit;
|
||||
}
|
||||
#page-blocked {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
.statName {
|
||||
color: #888;
|
||||
color: var(--fg-0-70);
|
||||
font-size: 85%;
|
||||
margin: 0.8em 0.2em 0.4em 0.2em;
|
||||
}
|
||||
|
|
@ -143,11 +140,9 @@ body.off #switch .fa-icon {
|
|||
margin: 0;
|
||||
}
|
||||
#extraTools {
|
||||
background-color: #eee;
|
||||
background-color: var(--bg-popup-cell);
|
||||
border: 0;
|
||||
color: #888;
|
||||
display: flex;
|
||||
fill: #888;
|
||||
justify-content: center;
|
||||
margin: 0.8em 0 0 0;
|
||||
padding: 0.2em 0;
|
||||
|
|
@ -156,7 +151,9 @@ body.responsive #extraTools {
|
|||
justify-content: space-evenly;
|
||||
}
|
||||
#extraTools > span {
|
||||
color: var(--fg-0-40);
|
||||
cursor: pointer;
|
||||
fill: var(--fg-0-40);
|
||||
font-size: 1.2em;
|
||||
margin: 0 0.8em 0 0;
|
||||
position: relative;
|
||||
|
|
@ -167,7 +164,7 @@ body.responsive #extraTools {
|
|||
#extraTools > span > .nope {
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
stroke: red;
|
||||
stroke: var(--fg-popup-icon-x);
|
||||
stroke-width: 2;
|
||||
transform: translateX(-50%);
|
||||
visibility: hidden;
|
||||
|
|
@ -177,17 +174,17 @@ body.responsive #extraTools {
|
|||
visibility: visible;
|
||||
}
|
||||
#extraTools > span:hover {
|
||||
color: #222;
|
||||
fill: #222;
|
||||
color: inherit;
|
||||
fill: inherit;
|
||||
}
|
||||
|
||||
#refresh {
|
||||
background-color: #ffe;
|
||||
background-color: var(--bg-transient-notice);
|
||||
border: 1px solid #ddc;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
fill: #888;
|
||||
fill: var(--fg-0-50);
|
||||
font-size: 3em;
|
||||
justify-content: center;
|
||||
left: 4px;
|
||||
|
|
@ -200,16 +197,16 @@ body.dirty #refresh {
|
|||
display: flex;
|
||||
}
|
||||
body.dirty #refresh:hover {
|
||||
fill: #000
|
||||
fill: inherit
|
||||
}
|
||||
|
||||
#tooltip {
|
||||
background-color: #ffffee;
|
||||
background-color: var(--bg-tooltip);
|
||||
border: 1px solid gray;
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 3px gray;
|
||||
box-sizing: border-box;
|
||||
color: black;
|
||||
color: var(--fg-tooltip);
|
||||
cursor: pointer;
|
||||
direction: ltr;
|
||||
font: 12px sans-serif;
|
||||
|
|
@ -239,6 +236,7 @@ body[dir="rtl"] #tooltip {
|
|||
#firewallContainer {
|
||||
border: 0;
|
||||
font-size: 85%;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: right;
|
||||
|
|
@ -263,11 +261,9 @@ body[dir="rtl"] #tooltip {
|
|||
display: none;
|
||||
}
|
||||
#firewallContainer > div > span {
|
||||
background-color: #e6e6e6;
|
||||
background-color: var(--bg-popup-cell);
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
color: #000;
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
padding: 0.33em 0;
|
||||
|
|
@ -287,7 +283,7 @@ body[dir="rtl"] #tooltip {
|
|||
word-break: break-word;
|
||||
}
|
||||
#firewallContainer > div.isCname > span:first-of-type {
|
||||
color: mediumblue;
|
||||
color: var(--fg-popup-fwcell-cname);
|
||||
}
|
||||
#firewallContainer > div > span:first-of-type > sub {
|
||||
display: inline-block;
|
||||
|
|
@ -307,7 +303,7 @@ body[dir="rtl"] #tooltip {
|
|||
}
|
||||
#firewallContainer > div > span:nth-of-type(3),
|
||||
#firewallContainer > div > span:nth-of-type(4) {
|
||||
color: #444;
|
||||
color: var(--fg-0-70);
|
||||
display: none;
|
||||
font-family: monospace;
|
||||
text-align: center;
|
||||
|
|
@ -316,7 +312,7 @@ body[dir="rtl"] #tooltip {
|
|||
font-weight: bold;
|
||||
}
|
||||
#firewallContainer > div:first-of-type > span:first-of-type::before {
|
||||
color: #aaa;
|
||||
color: var(--fg-0-50);
|
||||
content: '+';
|
||||
padding-right: 0.25em;
|
||||
}
|
||||
|
|
@ -334,31 +330,41 @@ body[dir="rtl"] #tooltip {
|
|||
justify-content: space-between;
|
||||
}
|
||||
#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: ' ';
|
||||
}
|
||||
#firewallContainer > div > span[data-acount]::before {
|
||||
#firewallContainer > div > span[data-acount]::before,
|
||||
#firewallContainer > div > span[data-acount] > #actionSelector > #dynaCounts::before {
|
||||
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: '+';
|
||||
}
|
||||
#firewallContainer > div > span[data-acount="2"]::before {
|
||||
#firewallContainer > div > span[data-acount="2"]::before,
|
||||
#firewallContainer > div > span[data-acount="2"] > #actionSelector > #dynaCounts::before {
|
||||
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: '+++';
|
||||
}
|
||||
#firewallContainer > div > span[data-bcount]::after {
|
||||
#firewallContainer > div > span[data-bcount]::after,
|
||||
#firewallContainer > div > span[data-bcount] > #actionSelector > #dynaCounts::after {
|
||||
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';
|
||||
}
|
||||
#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';
|
||||
}
|
||||
#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';
|
||||
}
|
||||
|
||||
|
|
@ -388,124 +394,97 @@ body.advancedUser #firewallContainer > div > span:first-of-type ~ span {
|
|||
box-sizing: border-box;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
filter: var(--bg-popup-cell-label-filter);
|
||||
height: 100%;
|
||||
left: 0;
|
||||
opacity: 0.4;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 7px;
|
||||
}
|
||||
#firewallContainer > div.isRootContext > span:first-of-type::before {
|
||||
background-color: rgb(127, 127, 127);
|
||||
background-color: var(--fg-0-50);
|
||||
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.isDomain.totalAllowed > span:first-of-type::before {
|
||||
background-color: rgb(0, 160, 0);
|
||||
}
|
||||
#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);
|
||||
background-color: var(--bg-popup-cell-allow-own);
|
||||
}
|
||||
#firewallContainer > div.blocked > span:first-of-type::before,
|
||||
#firewallContainer > div.isDomain.totalBlocked > span:first-of-type::before {
|
||||
background-color: rgb(192, 0, 0);
|
||||
}
|
||||
#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);
|
||||
background-color: var(--bg-popup-cell-block-own);
|
||||
}
|
||||
#firewallContainer > div.allowed.blocked > 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 */
|
||||
body.advancedUser #firewallContainer > div > span.allowRule {
|
||||
background-color: rgba(0, 160, 0, 0.3);
|
||||
body.advancedUser #firewallContainer > div > span.allowRule,
|
||||
#actionSelector > #dynaAllow {
|
||||
background-color: var(--bg-popup-cell-allow);
|
||||
}
|
||||
body.advancedUser #firewallContainer.colorBlind > div > span.allowRule {
|
||||
background-color: rgba(255, 194, 57, 0.4);
|
||||
body.advancedUser #firewallContainer > div > span.blockRule,
|
||||
#actionSelector > #dynaBlock {
|
||||
background-color: var(--bg-popup-cell-block);
|
||||
}
|
||||
body.advancedUser #firewallContainer > div > span.blockRule {
|
||||
background-color: rgba(192, 0, 0, 0.3);
|
||||
body.advancedUser #firewallContainer > div > span.noopRule,
|
||||
#actionSelector > #dynaNoop {
|
||||
background-color: var(--bg-popup-cell-noop);
|
||||
}
|
||||
body.advancedUser #firewallContainer.colorBlind > div > span.blockRule {
|
||||
background-color: rgba(0, 19, 110, 0.4);
|
||||
body.advancedUser #firewallContainer > div > span.ownRule,
|
||||
#firewallContainer > div > span.ownRule {
|
||||
color: var(--bg-0);
|
||||
}
|
||||
body.advancedUser #firewallContainer > div > span.noopRule {
|
||||
background-color: rgba(108, 108, 108, 0.3);
|
||||
body.advancedUser #firewallContainer > div > span.allowRule.ownRule,
|
||||
#actionSelector > #dynaAllow:hover {
|
||||
background-color: var(--bg-popup-cell-allow-own);
|
||||
}
|
||||
body.advancedUser #firewallContainer.colorBlind > div > span.noopRule {
|
||||
background-color: rgba(96, 96, 96, 0.4);
|
||||
body.advancedUser #firewallContainer > div > span.blockRule.ownRule,
|
||||
#actionSelector > #dynaBlock:hover {
|
||||
background-color: var(--bg-popup-cell-block-own);
|
||||
}
|
||||
body.advancedUser #firewallContainer > div > span.ownRule {
|
||||
color: white;
|
||||
}
|
||||
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);
|
||||
body.advancedUser #firewallContainer > div > span.noopRule.ownRule,
|
||||
#actionSelector > #dynaNoop:hover {
|
||||
background-color: var(--bg-popup-cell-noop-own);
|
||||
}
|
||||
|
||||
#actionSelector {
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 4em;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
#actionSelector > span {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
opacity: 0.2;
|
||||
}
|
||||
#actionSelector > span:first-of-type {
|
||||
#actionSelector > #dynaAllow {
|
||||
width: 33%;
|
||||
}
|
||||
#actionSelector > span:nth-of-type(2) {
|
||||
#actionSelector > #dynaNoop {
|
||||
width: 33.5%;
|
||||
}
|
||||
#actionSelector > span:nth-of-type(3) {
|
||||
#actionSelector > #dynaBlock {
|
||||
width: 33.5%;
|
||||
}
|
||||
#actionSelector > span:hover {
|
||||
opacity: 0.75;
|
||||
}
|
||||
#actionSelector > span:first-of-type {
|
||||
background-color: rgb(0, 160, 0);
|
||||
}
|
||||
#actionSelector.colorBlind > span:first-of-type {
|
||||
background-color: rgb(255, 194, 57);
|
||||
}
|
||||
#actionSelector > span:nth-of-type(2) {
|
||||
background-color: rgb(108, 108, 108);
|
||||
}
|
||||
#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);
|
||||
#actionSelector > #dynaCounts {
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
display: inline-flex;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#rulesetTools {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
fill: #888;
|
||||
display: none;
|
||||
left: 4px;
|
||||
padding: 0;
|
||||
|
|
@ -513,11 +492,12 @@ body.advancedUser #firewallContainer > div > span.noopRule.ownRule {
|
|||
top: 4px;
|
||||
}
|
||||
#rulesetTools > span {
|
||||
background-color: #ffe;
|
||||
background-color: var(--bg-transient-notice);
|
||||
border: 1px solid #ddc;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
fill: var(--fg-0-50);
|
||||
font-size: 1.8em;
|
||||
line-height: 1.0;
|
||||
margin: 0;
|
||||
|
|
@ -530,10 +510,9 @@ body.advancedUser #firewallContainer > div > span.noopRule.ownRule {
|
|||
display: block;
|
||||
}
|
||||
#firewallContainer.dirty ~ #rulesetTools > span:hover {
|
||||
fill: black;
|
||||
fill: inherit;
|
||||
}
|
||||
|
||||
|
||||
body.responsive {
|
||||
overflow-y: auto;
|
||||
width: auto;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
hr {
|
||||
border: 0;
|
||||
border-top: 1px solid var(--fg-hline-1);
|
||||
border-top: 1px solid var(--hline-1);
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
.body {
|
||||
|
|
|
|||
|
|
@ -43,18 +43,12 @@
|
|||
}
|
||||
|
||||
.commandEntries td.commandShortcut input ~ .commandReset {
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
font-size: 150%;
|
||||
padding: 0 0.2em;
|
||||
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:focus ~ .commandReset {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
--bg-0: #fff;
|
||||
--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-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);
|
||||
--bg-button-disabled: #eee;
|
||||
--fg-button-disabled: #888;
|
||||
--bg-button-disabled: hsla(0, 0%, 93%, 1);
|
||||
--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-on: #592acb;
|
||||
--dashboard-nav-border: rgba(14, 13, 26, 0.12);
|
||||
|
||||
--fg-icon-info-lvl-0-dimmed: #888;
|
||||
--fg-icon-info-lvl-0: inherit;
|
||||
|
|
@ -25,6 +50,54 @@
|
|||
--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);
|
||||
--fg-icon-info-lvl-4-dimmed: hsla(0, 100%, 35%, 0.5);
|
||||
--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 {
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -433,18 +433,20 @@ const selectFilterLists = async function() {
|
|||
messaging.send('dashboard', {
|
||||
what: 'userSettings',
|
||||
name: 'parseAllABPHideFilters',
|
||||
value: document.getElementById('parseCosmeticFilters').checked,
|
||||
value: uDom.nodeFromId('parseCosmeticFilters').checked,
|
||||
});
|
||||
messaging.send('dashboard', {
|
||||
what: 'userSettings',
|
||||
name: 'ignoreGenericCosmeticFilters',
|
||||
value: document.getElementById('ignoreGenericCosmeticFilters').checked,
|
||||
value: uDom.nodeFromId('ignoreGenericCosmeticFilters').checked,
|
||||
});
|
||||
|
||||
// Filter lists to select
|
||||
const toSelect = [];
|
||||
let liEntries = document.querySelectorAll('#lists .listEntry[data-listkey]:not(.toRemove)');
|
||||
for ( const liEntry of liEntries ) {
|
||||
for (
|
||||
const liEntry of
|
||||
document.querySelectorAll('#lists .listEntry[data-listkey]:not(.toRemove)')
|
||||
) {
|
||||
if ( liEntry.querySelector('input[type="checkbox"]:checked') !== null ) {
|
||||
toSelect.push(liEntry.getAttribute('data-listkey'));
|
||||
}
|
||||
|
|
@ -452,16 +454,22 @@ const selectFilterLists = async function() {
|
|||
|
||||
// External filter lists to remove
|
||||
const toRemove = [];
|
||||
liEntries = document.querySelectorAll('#lists .listEntry.toRemove[data-listkey]');
|
||||
for ( const liEntry of liEntries ) {
|
||||
for (
|
||||
const liEntry of
|
||||
document.querySelectorAll('#lists .listEntry.toRemove[data-listkey]')
|
||||
) {
|
||||
toRemove.push(liEntry.getAttribute('data-listkey'));
|
||||
}
|
||||
|
||||
// External filter lists to import
|
||||
const externalListsElem = document.getElementById('externalLists');
|
||||
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', {
|
||||
what: 'applyFilterListSelection',
|
||||
|
|
|
|||
|
|
@ -373,7 +373,7 @@ const onTextChanged = (( ) => {
|
|||
cleanEditToken = mergeView.editor().changeGeneration();
|
||||
isClean = true;
|
||||
}
|
||||
diff.classList.toggle('editing', isClean === false);
|
||||
document.body.classList.toggle('editing', isClean === false);
|
||||
diff.classList.toggle('dirty', mergeView.leftChunks().length !== 0);
|
||||
document.getElementById('editSaveButton')
|
||||
.classList.toggle('disabled', isClean);
|
||||
|
|
|
|||
|
|
@ -265,11 +265,10 @@ const updateAllFirewallCells = function() {
|
|||
const buildAllFirewallRows = function() {
|
||||
// Do this before removing the rows
|
||||
if ( dfHotspots === null ) {
|
||||
dfHotspots = uDom('#actionSelector')
|
||||
.toggleClass('colorBlind', popupData.colorBlindFriendly)
|
||||
.on('click', 'span', setFirewallRuleHandler);
|
||||
dfHotspots =
|
||||
uDom('#actionSelector').on('click', 'span', setFirewallRuleHandler);
|
||||
}
|
||||
dfHotspots.detach();
|
||||
dfHotspots.remove();
|
||||
|
||||
// Update incrementally: reuse existing rows if possible.
|
||||
const rowContainer = document.getElementById('firewallContainer');
|
||||
|
|
@ -479,7 +478,7 @@ const renderPopup = function() {
|
|||
dfPaneVisible === true
|
||||
);
|
||||
|
||||
uDom.nodeFromId('firewallContainer').classList.toggle(
|
||||
document.documentElement.classList.toggle(
|
||||
'colorBlind',
|
||||
popupData.colorBlindFriendly === true
|
||||
);
|
||||
|
|
@ -734,7 +733,7 @@ const mouseenterCellHandler = function() {
|
|||
};
|
||||
|
||||
const mouseleaveCellHandler = function() {
|
||||
dfHotspots.detach();
|
||||
dfHotspots.remove();
|
||||
};
|
||||
|
||||
/******************************************************************************/
|
||||
|
|
@ -759,6 +758,12 @@ const setFirewallRule = async function(src, des, type, action, 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);
|
||||
updateAllFirewallCells();
|
||||
hashFromPopupData();
|
||||
|
|
@ -801,7 +806,7 @@ const setFirewallRuleHandler = function(ev) {
|
|||
action,
|
||||
ev.ctrlKey || ev.metaKey
|
||||
);
|
||||
dfHotspots.detach();
|
||||
dfHotspots.remove();
|
||||
};
|
||||
|
||||
/******************************************************************************/
|
||||
|
|
|
|||
|
|
@ -300,11 +300,10 @@ const updateAllFirewallCells = function() {
|
|||
const buildAllFirewallRows = function() {
|
||||
// Do this before removing the rows
|
||||
if ( dfHotspots === null ) {
|
||||
dfHotspots = uDom('#actionSelector')
|
||||
.toggleClass('colorBlind', popupData.colorBlindFriendly)
|
||||
.on('click', 'span', setFirewallRuleHandler);
|
||||
dfHotspots =
|
||||
uDom('#actionSelector').on('click', 'span', setFirewallRuleHandler);
|
||||
}
|
||||
dfHotspots.detach();
|
||||
dfHotspots.remove();
|
||||
|
||||
// Update incrementally: reuse existing rows if possible.
|
||||
const rowContainer = document.getElementById('firewallContainer');
|
||||
|
|
@ -523,7 +522,7 @@ const renderPopup = function() {
|
|||
dfPaneVisible === true
|
||||
);
|
||||
|
||||
uDom.nodeFromId('firewallContainer').classList.toggle(
|
||||
document.documentElement.classList.toggle(
|
||||
'colorBlind',
|
||||
popupData.colorBlindFriendly === true
|
||||
);
|
||||
|
|
@ -827,7 +826,7 @@ const mouseenterCellHandler = function() {
|
|||
};
|
||||
|
||||
const mouseleaveCellHandler = function() {
|
||||
dfHotspots.detach();
|
||||
dfHotspots.remove();
|
||||
};
|
||||
|
||||
/******************************************************************************/
|
||||
|
|
@ -852,6 +851,12 @@ const setFirewallRule = async function(src, des, type, action, 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);
|
||||
updateAllFirewallCells();
|
||||
hashFromPopupData();
|
||||
|
|
@ -894,7 +899,7 @@ const setFirewallRuleHandler = function(ev) {
|
|||
action,
|
||||
ev.ctrlKey || ev.metaKey
|
||||
);
|
||||
dfHotspots.detach();
|
||||
dfHotspots.remove();
|
||||
};
|
||||
|
||||
/******************************************************************************/
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@
|
|||
|
||||
<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 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="tooltip"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
|
||||
<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 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="tooltip"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<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/dashboard-common.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/shortcuts.css">
|
||||
|
|
@ -21,7 +22,7 @@
|
|||
<td class="commandDesc">
|
||||
<td class="commandShortcut">
|
||||
<input type="text" placeholder="shortcutCapturePlaceholder">
|
||||
<span class="commandReset">×</span>
|
||||
<button class="commandReset custom" type="button">×</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue