Sixth pass to re-design the dashboard

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

View file

@ -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">

View file

@ -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>

View file

@ -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;

View file

@ -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;

View file

@ -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;
}

View file

@ -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,

View file

@ -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 {

View file

@ -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;
}

View file

@ -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;

View file

@ -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%;
}

View file

@ -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;

View file

@ -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 {

View file

@ -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;

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 {
--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 {
}
}

View file

@ -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',

View file

@ -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);

View file

@ -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();
};
/******************************************************************************/

View file

@ -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();
};
/******************************************************************************/

View file

@ -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>

View file

@ -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>

View file

@ -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">&times;</span>
<button class="commandReset custom" type="button">&times;</button>
</div>
</div>