Work toward bringing dark theme closer to a stable release

Related issue:
- https://github.com/uBlockOrigin/uBlock-issues/issues/401
This commit is contained in:
Raymond Hill 2022-01-30 18:35:26 -05:00
parent 2a91ecd6e1
commit 4ee8a5948d
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
38 changed files with 823 additions and 760 deletions

View File

@ -26,11 +26,11 @@
<p class="vverbose"><span data-i18n="1pFormatHint"></span> <a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-My-filters" target="_blank">question-circle</a></p>
<p>
<button id="userFiltersApply" class="important iconifiable" type="button" disabled><span class="fa-icon">check</span><span data-i18n="1pApplyChanges"></span></button>
<button id="userFiltersRevert" class="iconifiable" type="button" disabled><span class="fa-icon">undo</span><span data-i18n="genericRevert"></span></button>
<button id="userFiltersApply" class="preferred iconified" type="button" disabled><span class="fa-icon">check</span><span data-i18n="1pApplyChanges">_</span><span class="hover"></span></button>
<button id="userFiltersRevert" class="iconified" type="button" disabled><span class="fa-icon">undo</span><span data-i18n="genericRevert">_</span><span class="hover"></span></button>
&ensp;
<button id="importUserFiltersFromFile" class="iconifiable" type="button"><span class="fa-icon">download-alt</span><span data-i18n="1pImport"></span></button>
<button id="exportUserFiltersToFile" class="iconifiable" type="button"><span class="fa-icon">upload-alt</span><span data-i18n="1pExport"></span></button>
<button id="importUserFiltersFromFile" class="iconified" type="button"><span class="fa-icon">download-alt</span><span data-i18n="1pImport">_</span><span class="hover"></span></button>
<button id="exportUserFiltersToFile" class="iconified" type="button"><span class="fa-icon">upload-alt</span><span data-i18n="1pExport">_</span><span class="hover"></span></button>
</p>
</div>
<div id="userFilters" class="codeMirrorContainer codeMirrorBreakAll" spellcheck="false"></div>

View File

@ -18,24 +18,24 @@
<div id="cloudWidget" class="hide" data-cloud-entry="tpFiltersPane"></div>
<div id="actions">
<button id="buttonApply" class="important disabled iconifiable" type="button" data-i18n-title="3pApplyChanges"><span class="fa-icon">check</span><span data-i18n="3pApplyChanges"></span></button>
<button id="buttonUpdate" class="important disabled iconifiable" type="button" data-i18n-title="3pUpdateNow"><span class="fa-icon">refresh</span><span data-i18n="3pUpdateNow"></span></button>
<button id="buttonPurgeAll" class="disabled iconifiable" type="button" data-i18n-title="3pPurgeAll"><span class="fa-icon">clock-o</span><span data-i18n="3pPurgeAll"></span></button>
<button id="buttonApply" class="preferred disabled iconified" type="button" data-i18n-title="3pApplyChanges"><span class="fa-icon">check</span><span data-i18n="3pApplyChanges">_</span><span class="hover"></span></button>
<button id="buttonUpdate" class="preferred disabled iconified" type="button" data-i18n-title="3pUpdateNow"><span class="fa-icon">refresh</span><span data-i18n="3pUpdateNow">_</span><span class="hover"></span></button>
<button id="buttonPurgeAll" class="disabled iconified" type="button" data-i18n-title="3pPurgeAll"><span class="fa-icon">clock-o</span><span data-i18n="3pPurgeAll">_</span><span class="hover"></span></button>
</div>
<div>
<div class="li">
<label><span class="input checkbox"><input type="checkbox" id="autoUpdate"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="3pAutoUpdatePrompt1"></span></label>
</div>
<div class="li">
<label><span class="input checkbox"><input type="checkbox" id="suspendUntilListsAreLoaded"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="3pSuspendUntilListsAreLoaded"></span></label>
</div>
<div class="li">
<label><span class="input checkbox"><input type="checkbox" id="parseCosmeticFilters"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="3pParseAllABPHideFiltersPrompt1"></span>&nbsp;<span class="fa-icon info" data-i18n-title="3pParseAllABPHideFiltersInfo">question-circle</span></span></label>
</div>
<div class="li">
<label><span class="input checkbox"><input type="checkbox" id="ignoreGenericCosmeticFilters"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="3pIgnoreGenericCosmeticFilters"></span>&nbsp;<span class="fa-icon info" data-i18n-title="3pIgnoreGenericCosmeticFiltersInfo">question-circle</span></span></label>
</div>
<div class="li">
<label><span class="input checkbox"><input type="checkbox" id="suspendUntilListsAreLoaded"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="3pSuspendUntilListsAreLoaded"></span></label>
</div>
</div>
<div>

View File

@ -20,7 +20,7 @@
<div class="body">
<p><span data-i18n="advancedSettingsWarning"></span> <a class="fa-icon info important" href="https://github.com/gorhill/uBlock/wiki/Advanced-settings" target="_blank">info-circle</a>
<p>
<button id="advancedSettingsApply" class="important" type="button" disabled data-i18n="genericApplyChanges"></button>&ensp;
<button id="advancedSettingsApply" class="preferred" type="button" disabled data-i18n="genericApplyChanges">_<span class="hover"></span></button>&ensp;
</div>
<div id="advancedSettings" class="codeMirrorContainer"></div>

View File

@ -16,12 +16,12 @@
</head>
<body class="loading">
<div id="subscribe" class="hide">
<section id="subscribe" class="hide notice">
<span class="logo"><img data-i18n-title="extName" src="img/ublock.svg"></span>
<span id="subscribePrompt"><span></span><a></a></span>
<span class="fa-icon">spinner</span>
<button id="subscribeButton" type="button" data-i18n="subscribeButton"></button>
</div>
<button id="subscribeButton" type="button" data-i18n="subscribeButton">_<span class="hover"></span></button>
</section>
<div id="content" class="codeMirrorContainer codeMirrorBreakAll"></div>

View File

@ -7,14 +7,14 @@
<body>
<div id="cloudToolbar">
<div>
<button id="cloudPush" type="button" data-i18n-title="cloudPush"><span class="fa-icon">cloud-upload</span></button>
<button id="cloudPush" class="iconified notext" type="button" data-i18n-title="cloudPush"><span class="fa-icon">cloud-upload</span><span class="hover"></span></button>
<span id="cloudInfo" data-i18n="cloudNoData"></span>
<button id="cloudPull" type="button" data-i18n-title="cloudPull" disabled><span class="fa-icon">cloud-download</span></button>
<button id="cloudPullAndMerge" type="button" data-i18n-title="cloudPullAndMerge" disabled><span class="fa-icon">cloud-download</span><span class="fa-icon">plus</span></button>
<button id="cloudPull" class="iconified notext" type="button" data-i18n-title="cloudPull" disabled><span class="fa-icon">cloud-download</span><span class="hover"></span></button>
<button id="cloudPullAndMerge" class="iconified notext" type="button" data-i18n-title="cloudPullAndMerge" disabled><span class="fa-icon">cloud-download</span><span class="fa-icon">plus</span><span class="hover"></span></button>
</div>
<div id="cloudCog" class="fa-icon">cog</div>
<div id="cloudOptions">
<label data-i18n="cloudDeviceNamePrompt">_<input id="cloudDeviceName" type="text" value=""></label>&nbsp;<button id="cloudOptionsSubmit" type="button" data-i18n="genericSubmit"></button>
<label data-i18n="cloudDeviceNamePrompt">_<input id="cloudDeviceName" type="text" value=""></label>&nbsp;<button id="cloudOptionsSubmit" type="button" data-i18n="genericSubmit">_<span class="hover"></span></button>
</div>
</div>
<div id="cloudError"></div>

View File

@ -6,7 +6,7 @@ body {
margin-bottom: 6rem;
}
#actions {
background-color: var(--default-surface);
background-color: var(--surface-1);
padding: var(--default-gap-small) 0 var(--default-gap-xsmall) 0;
position: sticky;
top: 0;
@ -28,7 +28,7 @@ body {
}
#listsOfBlockedHostsPrompt::before,
.groupEntry:not([data-groupkey="user"]) .geDetails::before {
color: var(--fg-0-50);
color: var(--ink-3);
content: '\2212';
font-family: monospace;
font-size: large;
@ -49,7 +49,7 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
pointer-events: none;
}
.groupEntry .geCount {
color: var(--fg-0-60);
color: var(--ink-3);
font-size: 90%;
pointer-events: none;
}
@ -74,17 +74,17 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
.listEntry.toRemove .listname {
text-decoration: line-through;
}
.listEntry a,
.listEntry .fa-icon,
.listEntry .counts {
color: var(--fg-0-50);
color: var(--info0-ink);
fill: var(--info0-ink);
display: none;
fill: var(--fg-0-50);
font-size: 120%;
margin: 0 0.2em 0 0;
}
.listEntry .fa-icon:hover {
color: inherit;
fill: inherit;
transform: scale(1.25);
}
.listEntry .content {
display: inline-flex;
@ -98,30 +98,19 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
.listEntry .remove,
.listEntry .unsecure,
.listEntry .failed {
color: var(--fg-icon-info-lvl-4-dimmed);
color: var(--info3-ink);
fill: var(--info3-ink);
cursor: pointer;
fill: var(--fg-icon-info-lvl-4-dimmed);
}
.listEntry .remove:hover,
.listEntry .unsecure:hover,
.listEntry .failed:hover {
color: var(--fg-icon-info-lvl-4);
fill: var(--fg-icon-info-lvl-4);
}
.listEntry.external .remove {
display: inline-flex;
}
.listEntry.mustread a.mustread {
color: var(--fg-icon-info-lvl-1-dimmed);
color: var(--info1-ink);
fill: var(--info1-ink);
display: inline-flex;
fill: var(--fg-icon-info-lvl-1-dimmed);
}
.listEntry.mustread a.mustread:hover {
color: var(--fg-icon-info-lvl-1);
fill: var(--fg-icon-info-lvl-1);
}
.listEntry .counts {
color: var(--fg-0-60);
font-size: smaller;
}
.listEntry.checked .counts {
@ -131,9 +120,6 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
cursor: default;
display: none;
}
.listEntry .status:hover {
color: inherit;
}
.listEntry.checked.unsecure .unsecure {
display: inline-flex;
}
@ -147,12 +133,8 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
display: inline-flex;
}
.listEntry .obsolete {
color: var(--info-lvl-2-ink);
fill: var(--info-lvl-2-ink);
}
.listEntry .obsolete:hover {
color: var(--info-lvl-2-ink-hover);
fill: var(--info-lvl-2-ink-hover);
color: var(--info2-ink);
fill: var(--info2-ink);
}
body:not(.updating) .listEntry.checked.obsolete .obsolete {
display: inline-flex;
@ -193,7 +175,7 @@ body.updating .listEntry.checked.obsolete .updating {
-webkit-margin-start: 0;
}
:root.mobile .li.listEntry {
background-color: var(--bg-1);
/* background-color: var(--bg-1); */
overflow-x: auto;
}
:root.mobile .li.listEntry label > span:not([class]) {

View File

@ -18,7 +18,7 @@ body {
flex-grow: 1;
}
#advancedSettings {
border-top: 1px solid #ddd;
border: var(--default-gap-xxsmall) solid var(--surface-2);
text-align: left;
}
.CodeMirror-wrap pre {

View File

@ -29,24 +29,24 @@ body {
width: 100vw;
}
#subscribe {
background-color: var(--bg-transient-notice);
display: flex;
flex-shrink: 0;
padding: 4px;
justify-content: space-between;
max-height: 6em;
padding-inline-end: 0.5em;
}
#subscribe.hide {
display: none;
}
.logo {
background-color: #fffa;
flex-shrink: 0;
width: 2em;
}
#subscribePrompt {
display: inline-flex;
flex-direction: column;
padding: 0 0.5em;
padding: 0.5em;
}
#subscribePrompt > span {
font-weight: bold;
@ -59,6 +59,8 @@ body {
align-self: center;
}
#subscribe > .fa-icon {
color: var(--accent-ink-1);
fill: var(--accent-ink-1);
font-size: 20px;
}
body.loading #subscribe > button,

View File

@ -20,7 +20,6 @@
body {
align-items: center;
background-color: var(--default-surface);
border: 1px solid var(--ubo-red);
box-sizing: border-box;
display: flex;

View File

@ -1,5 +1,5 @@
#cloudWidget {
background-color: var(--cloud-widget-surface);
background-color: var(--surface-2);
margin: 0.5em 0;
min-width: max-content;
position: relative;
@ -29,7 +29,7 @@
visibility: hidden;
}
#cloudToolbar button.error {
color: var(--fg-icon-info-lvl-4);
color: var(--info3-ink);
}
#cloudPullAndMerge {
margin-left: 0.25em;
@ -49,17 +49,17 @@
white-space: pre-line;
}
#cloudCapacity {
background-color: var(--light-gray-30);
background-color: var(--surface-3);
height: 4px;
}
#cloudCapacity > div {
background-color: var(--light-gray-60);
background-color: var(--cloud-total-used-surface);
}
#cloudCapacity > div > div {
background-color: var(--violet-60);
background-color: var(--cloud-used-surface);
}
#cloudError {
color: var(--fg-icon-info-lvl-4);
color: var(--info3-ink);
flex-grow: 1;
flex-shrink: 2;
font-size: small;
@ -69,9 +69,9 @@
display: none;
}
#cloudCog {
color: var(--fg-0-50);
color: var(--ink-3);
fill: var(--ink-3);
cursor: pointer;
fill: var(--fg-0-50);
font-size: 110%;
justify-content: flex-end;
padding: 0.4em;
@ -82,8 +82,7 @@
}
#cloudWidget #cloudOptions {
align-items: center;
background-color: var(--default-surface);
border: 1px solid var(--bg-1-border);
background-color: var(--surface-1);
bottom: 2px;
display: none;
font-size: small;

View File

@ -5,23 +5,59 @@
position: relative;
}
.CodeMirror {
background-color: var(--default-surface);
background-color: var(--surface-0);
box-sizing: border-box;
color: var(--default-ink);
color: var(--ink-1);
flex-grow: 1;
height: 100%;
width: 100%;
}
.CodeMirror-lines {
padding-bottom: 6rem;
.CodeMirror-activeline-background {
background-color: var(--cm-active-line);
}
.CodeMirror-cursor {
border-color: var(--cm-cursor);
}
.CodeMirror-focused .CodeMirror-selected {
background: var(--cm-selection-surface);
color: var(--cm-selection-ink);
}
.CodeMirror-foldmarker {
color: var(--cm-foldmarker-ink);
font-size: large;
text-shadow: none;
}
.CodeMirror-gutters {
background-color: var(--cm-gutter-surface);
border-color: var(--cm-gutter-border);
}
.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
background: var(--cm-selection-surface);
color: var(--cm-selection-ink);
}
.CodeMirror-linenumber {
color: var(--cm-gutter-ink);
}
.CodeMirror-lines {
padding-bottom: 6rem;
}
.CodeMirror-matchingbracket {
color: unset;
}
.CodeMirror-matchingbracket {
background-color: var(--cm-matchingbracket) !important;
color: inherit !important;
font-weight: bold;
}
.CodeMirror-search-match {
background: none;
background-color: var(--cm-search-match-surface);
border: 0;
opacity: 1;
}
/* For when panels are used */
.codeMirrorContainer > div:not([class^="CodeMirror"]) {
@ -34,18 +70,6 @@
word-break: break-all;
}
/* CodeMirror theme overrides */
.CodeMirror-focused .CodeMirror-selected {
background: var(--cm-selection-surface);
color: var(--cm-selection-ink);
}
.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
background: var(--cm-selection-surface);
color: var(--cm-selection-ink);
}
.cm-s-default .cm-comment {
color: var(--sf-comment-ink);
}
@ -74,6 +98,12 @@
.cm-s-default .cm-keyword {
color: var(--sf-keyword-ink);
}
.cm-s-default .cm-negative {
color: var(--cm-negative);
}
.cm-s-default .cm-positive {
color: var(--cm-positive);
}
.cm-s-default .cm-notice {
text-underline-position: under;
text-decoration-color: var(--sf-notice-ink);
@ -112,15 +142,6 @@
color: var(--sf-keyword-ink);
}
div.CodeMirror span.CodeMirror-matchingbracket {
color: unset;
}
.CodeMirror-matchingbracket {
background-color: #afa;
color: inherit !important;
font-weight: bold;
}
.cm-search-widget {
align-items: center;
background-color: var(--cm-gutter-surface);
@ -170,14 +191,26 @@ div.CodeMirror span.CodeMirror-matchingbracket {
.cm-search-widget .sourceURL[href=""] {
display: none;
}
.cm-searching {
background-color: var(--cm-searching-surface) !important;
border: 1px dotted black;
.cm-searching.cm-overlay {
background-color: var(--cm-searching-surface);
border: 0;
color: var(--cm-searching-ink);
}
.CodeMirror-merge {
border-color: var(--cm-gutter-border);
}
.CodeMirror-merge-copy,
.CodeMirror-merge-copy-reverse {
color: var(--cm-merge-copy-ink);
}
.CodeMirror-merge-l-chunk {
background-color: var(--cm-merge-l-chunk-surface);
}
.CodeMirror-merge-l-chunk-start,
.CodeMirror-merge-l-chunk-end {
border-color: var(--cm-merge-l-chunk-border);
}
.CodeMirror-merge-l-deleted {
background-image: none;
}
@ -191,7 +224,8 @@ div.CodeMirror span.CodeMirror-matchingbracket {
vertical-align: top;
}
.CodeMirror-merge-spacer {
background-color: var(--cm-gutter-surface);
background-color: var(--surface-0);
opacity: 40%;
}
.CodeMirror-hints {

View File

@ -40,11 +40,11 @@
/* Common uBO styles */
body {
background-color: var(--default-surface);
background-color: var(--surface-1);
border: 0;
box-sizing: border-box;
color: var(--default-ink);
fill: var(--default-ink);
color: var(--ink-1);
fill: var(--ink-1);
font-family: Inter, sans-serif;
font-size: var(--font-size);
line-height: 1.5;
@ -53,16 +53,17 @@ body {
}
a {
color: var(--link-ink);
fill: var(--link-ink);
}
code, .code {
background-color: var(--button-surface);
background-color: var(--surface-2);
font-family: monospace;
font-size: smaller;
padding: 2px 4px;
}
hr {
border: 0;
border-top: 1px solid var(--hr-ink);
border-top: 1px solid var(--surface-2);
margin: 1em 0;
}
textarea {
@ -73,8 +74,8 @@ button {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
border: 1px solid transparent;
border-radius: 5px;
border: 0;
border-radius: var(--button-border-radius);
background-color: var(--button-surface);
color: var(--button-ink);
display: inline-flex;
@ -83,6 +84,7 @@ button {
justify-content: center;
min-height: 36px;
padding: 0 var(--font-size);
position: relative;
vertical-align: middle;
}
button.vflex {
@ -91,52 +93,72 @@ button.vflex {
padding-bottom: 0;
padding-top: 0;
}
button:hover {
background-color: var(--button-surface-hover);
button > .hover {
background-color: var(--elevation-up-surface);
border-radius: var(--button-border-radius);
height: 100%;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
z-index: 100;
}
button:not(.disabled):not([disabled]):hover > .hover {
opacity: var(--elevation-up1-opacity);
}
button.notext:not(.disabled):not([disabled]):hover > .hover {
opacity: var(--elevation-up2-opacity);
}
button.active {
background-color: var(--button-active-surface);
}
button.important {
background-color: var(--button-important-surface);
}
button.important:hover {
background-color: var(--button-important-surface-hover);
}
button.disabled,
button[disabled],
button.important.disabled,
button.important[disabled] {
background-color: var(--button-disabled-surface);
color: var(--button-disabled-ink);
fill: var(--button-disabled-ink);
button[disabled] {
background-color: var(--button-surface);
color: var(--button-ink);
fill: var(--button-ink);
filter: var(--button-disabled-filter);
pointer-events: none;
}
button.preferred {
button.preferred:not(.disabled):not([disabled]) {
background-color: var(--button-preferred-surface);
color: var(--button-preferred-ink);
fill: var(--button-preferred-ink);
}
button.iconifiable > .fa-icon {
padding-left: 0;
padding-right: 0.4em;
button.preferred:not(.disabled):not([disabled]):hover > .hover {
background-color: var(--elevation-down-surface);
opacity: var(--elevation-down1-opacity);
}
button.iconifiable > .fa-icon {
button.iconified.notext {
background-color: transparent;
}
button.iconified > .fa-icon {
font-size: 120%;
}
body[dir="rtl"] button.iconifiable > .fa-icon {
padding-left: 0.4em;
padding-right: 0;
}
body[dir] button.iconifiable > .fa-icon:last-child {
padding-left: 0;
padding-right: 0;
}
}
button.iconified > .fa-icon + [data-i18n] {
padding-right: 0;
padding-left: 0.4em;
}
body[dir="rtl"] button.iconified > .fa-icon + [data-i18n] {
padding-right: 0.4em;
padding-left: 0;
}
label {
align-items: center;
display: inline-flex;
position: relative;
}
section.notice {
background-color: var(--notice-surface);
box-shadow: var(--notice-surface-shadow);
color: var(--notice-ink);
}
:root:not(.classic) section.notice a {
color: var(--surface-2);
}
/**
Checkbox design borrowed from:
@ -183,11 +205,11 @@ label {
.checkbox > input[type="checkbox"]:checked + svg {
background-color: var(--checkbox-checked-ink);
border-color: var(--checkbox-checked-ink);
stroke: var(--default-surface);
stroke: var(--surface-1);
}
.checkbox[disabled],
.checkbox[disabled] ~ span {
opacity: 0.5;
filter: var(--checkbox-disabled-filter);
}
select {
@ -223,11 +245,11 @@ select {
-webkit-margin-start: 2em;
}
@media (max-width: 640px) {
button.iconifiable > .fa-icon {
button.iconified > .fa-icon {
font-size: 1.2rem;
padding: 0;
}
button.iconifiable > [data-i18n] {
button.iconified > [data-i18n] {
display: none;
}
}
@ -242,34 +264,6 @@ select {
width: 100%;
}
.ubo-icon {
align-items: center;
background-color: transparent;
border: 0;
display: inline-flex;
justify-content: center;
margin: 0;
padding: 0.1em;
position: relative;
}
.ubo-icon > * {
pointer-events: none;
}
.ubo-icon.disabled,
.disabled > .ubo-icon,
.ubo-icon[disabled],
[disabled] > .ubo-icon {
color: var(--button-disabled-ink);
fill: var(--button-disabled-ink);
filter: var(--button-disabled-filter);
stroke: var(--button-disabled-ink);
pointer-events: none;
}
.ubo-icon > svg {
height: 1em;
width: 1em;
}
/* high dpi devices */
:root.hidpi button {
font-family: Metropolis, sans-serif;

View File

@ -14,28 +14,20 @@ a {
text-decoration: none;
}
.fa-icon.info {
color: var(--fg-icon-info-lvl-0-dimmed);
fill: var(--fg-icon-info-lvl-0-dimmed);
color: var(--info0-ink);
fill: var(--info0-ink);
font-size: 115%;
}
.fa-icon.info:hover {
color: inherit;
fill: inherit;
transform: scale(1.25);
}
.fa-icon.info.important {
color: var(--fg-icon-info-lvl-3-dimmed);
fill: var(--fg-icon-info-lvl-3-dimmed);
}
.fa-icon.info.important:hover {
color: var(--fg-icon-info-lvl-3);
fill: var(--fg-icon-info-lvl-3);
color: var(--info2-ink);
fill: var(--info2-ink);
}
input[type="number"] {
width: 5em;
}
input[type="checkbox"][disabled] + * {
color: var(--fg-0-50);
}
@media (max-height: 640px), (max-height: 800px) and (max-width: 480px) {
.body > p,
.body > ul {

View File

@ -8,9 +8,8 @@ html, body {
width: 100vw;
}
#dashboard-nav {
background-color: var(--default-surface);
border: 0;
box-shadow: var(--dashboard-bar-shadow);
border-bottom: 1px solid var(--border-1);
display: flex;
flex-shrink: 0;
flex-wrap: wrap;
@ -23,11 +22,10 @@ html, body {
}
.tabButton {
border: 0;
border-bottom: 3px solid var(--bg-1);
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
color: var(--dashboard-tab-ink);
fill: var(--dashboard-tab-ink);
padding: 0.5em 1.4em calc(0.5em - 3px);
fill: var(--dashboard-tab-ink);
padding: 0.7em 1.4em calc(0.7em - 3px);
text-decoration: none;
user-select: none;
white-space: nowrap;
@ -36,9 +34,10 @@ html, body {
outline: 0;
}
.tabButton.selected {
background-color: var(--primary-surface-2);
border-bottom: 3px solid var(--dashboard-tab-active-ink);
color: var(--dashboard-tab-active-ink);
fill: var(--dashboard-tab-active-ink);
fill: var(--dashboard-tab-active-ink);
}
iframe {
background-color: transparent;
@ -49,7 +48,6 @@ iframe {
width: 100%;
}
#unsavedWarning {
box-shadow: rgba(128,128,128,0.4) 0 4px 4px;
display: none;
left: 0;
position: absolute;
@ -60,7 +58,6 @@ iframe {
display: initial;
}
#unsavedWarning > div:first-of-type {
background-color: var(--bg-transient-notice);
padding: 0.5em;
}
#unsavedWarning > div:last-of-type {
@ -95,7 +92,7 @@ body.noDashboard #dashboard-nav {
}
:root.desktop .tabButton:not(.selected):hover {
background-color: var(--dashboard-tab-surface-hover);
border-bottom-color: var(--dashboard-tab-surface-hover);
border-bottom-color: var(--dashboard-tab-border-hover);
}
/* touch-screen devices */

View File

@ -41,7 +41,7 @@ a {
width: 100%;
}
#warningSign > a {
fill: var(--yellow-50);
fill: rgb(var(--yellow-50));
font-size: 96px;
}
#theURL {
@ -58,9 +58,9 @@ a {
background-color: transparent;
top: 100%;
box-sizing: border-box;
color: var(--fg-0-60);
color: var(--ink-4);
fill: var(--ink-4);
cursor: pointer;
fill: var(--fg-0-60);
font-size: 1.2rem;
padding: var(--default-gap-xxsmall);
position: absolute;
@ -79,14 +79,12 @@ body[dir="rtl"] #theURL > p > span:last-of-type {
left: 0;
}
#theURL > p:hover > span {
color: var(--default-ink);
fill: var(--default-ink);
color: var(--ink-1);
fill: var(--ink-1);
}
#parsed {
background-color: var(--bg-1);
border: 1px solid var(--bg-code);
border-top: none;
color: var(--fg-0-80);
background-color: var(--surface-1);
border: 4px solid var(--surface-2);
font-size: small;
overflow-x: auto;
padding: var(--default-gap-xxsmall);

View File

@ -16,11 +16,10 @@ body {
}
#diff {
border: 0;
border-top: 1px solid #eee;
white-space: nowrap;
}
#diff .tools > * {
margin-bottom: 0.5em;
margin-bottom: 1em;
}
#diff .ruleActions {
border: 0;
@ -35,34 +34,14 @@ body {
#diff .ruleActions .fieldset-header {
margin: 0.5em 0;
}
#revertButton,
#commitButton,
body.editing #diff #exportButton,
body.editing #diff #importButton {
background-color: var(--button-disabled-surface);
color: var(--button-disabled-ink);
fill: var(--button-disabled-ink);
filter: var(--button-disabled-filter);
pointer-events: none;
}
body:not(.editing) #diff.dirty #revertButton,
body:not(.editing) #diff.dirty #commitButton {
background-color: var(--button-surface);
color: var(--button-ink);
fill: var(--button-ink);
filter: none;
pointer-events: auto;
}
body:not(.editing) #diff.dirty #revertButton:hover,
body:not(.editing) #diff.dirty #commitButton:hover {
background-color: var(--button-surface-hover);
}
#ruleFilter {
align-items: center;
background-color: var(--surface-2);
direction: ltr;
display: flex;
justify-content: center;
padding: 0.5em 0;
}
#ruleFilter #diffCollapse {
padding: 0 0.5em;
@ -75,6 +54,9 @@ body:not(.editing) #diff.dirty #commitButton:hover {
.codeMirrorContainer {
flex-grow: 1;
}
.codeMirrorContainer .CodeMirror {
background-color: var(--surface-1);
}
.CodeMirror-merge, .CodeMirror-merge-pane, .CodeMirror-merge .CodeMirror {
box-sizing: border-box;
height: 100%;
@ -83,11 +65,8 @@ body.editing .CodeMirror-merge-copy,
body.editing .CodeMirror-merge-copy-reverse {
display: none;
}
body.editing .CodeMirror-merge-left .CodeMirror {
color: var(--fg-0-60);
}
body.editing .CodeMirror-merge-editor .CodeMirror {
background-color: var(--bg-transient-notice);
background-color: var(--surface-0);
}
body[dir="rtl"] .CodeMirror-merge-pane-rightmost {
right: unset;

View File

@ -1,7 +1,6 @@
html#ublock0-epicker,
#ublock0-epicker body {
background: transparent;
color: var(--default-ink);
cursor: not-allowed;
font: 12px sans-serif;
height: 100vh;
@ -13,8 +12,8 @@ html#ublock0-epicker,
outline: none;
}
#ublock0-epicker aside {
background-color: var(--default-surface);
border: 1px solid var(--default-surface-border);
background-color: var(--surface-1);
border: 1px solid var(--border-2);
bottom: 2px;
box-sizing: border-box;
cursor: default;
@ -39,27 +38,9 @@ html#ublock0-epicker,
margin: 0.25em 0 0 0;
}
#ublock0-epicker button {
background-color: var(--button-surface);
border: 0;
border-radius: 3px;
box-sizing: border-box;
box-shadow: none;
color: var(--button-ink);
cursor: pointer;
padding: 0.4em 0.8em;
}
#ublock0-epicker button:disabled {
color: var(--button-disabled-ink);
background-color: var(--button-disabled-surface);
}
#ublock0-epicker button:not(:disabled):hover {
background-color: var(--button-surface-hover);
}
#ublock0-epicker #create:not(:disabled) {
background-color: var(--button-important-surface);
}
#ublock0-epicker #create:not(:disabled):hover {
background-color: var(--button-important-surface-hover);
min-height: 32px;
padding: 0 0.8em;
}
#ublock0-epicker.preview #preview {
background-color: var(--button-preferred-surface);
@ -82,7 +63,7 @@ html#ublock0-epicker,
width: 100%;
}
#ublock0-epicker section > div:first-child {
border: 1px solid var(--default-surface-border);
border: 1px solid var(--border-2);
margin: 0;
position: relative;
}
@ -222,10 +203,10 @@ html#ublock0-epicker,
white-space: nowrap;
}
#ublock0-epicker #candidateFilters .changeFilter li.active {
border: 1px dotted var(--blue-50);
border: 1px dotted rgb(var(--blue-50));
}
#ublock0-epicker #candidateFilters .changeFilter li:hover {
background-color: var(--default-surface-hover);
background-color: var(--surface-2);
}
/**

View File

@ -14,6 +14,7 @@
.fa-icon > * {
pointer-events: none;
}
/*
.fa-icon.disabled,
.fa-icon[disabled] {
color: var(--button-disabled-ink);
@ -22,6 +23,7 @@
stroke: var(--button-disabled-ink);
pointer-events: none;
}
*/
.fa-icon > .fa-icon-badge,
.fa-icon.disabled > .fa-icon-badge {
visibility: hidden;

View File

@ -14,7 +14,7 @@
padding-left: 0.5em;
}
#domInspector ul {
background-color: var(--default-surface);
background-color: var(--surface-1);
margin: 0;
padding-left: 1em;
}
@ -25,7 +25,7 @@
#domInspector li.isCosmeticHide,
#domInspector li.isCosmeticHide ul,
#domInspector li.isCosmeticHide li {
background-color: #fee;
background-color: var(--surface-2);
}
#domInspector li > * {
display: inline-block;
@ -37,7 +37,7 @@
color: #aaa;
}
#domInspector li > span:first-child {
color: var(--default-ink);
color: var(--ink-1);
cursor: default;
font-size: 1rem;
margin-right: 0;

View File

@ -12,7 +12,7 @@ textarea {
width: 100%;
}
.permatoolbar {
background-color: var(--default-surface);
background-color: var(--surface-1);
border: 0;
box-sizing: border-box;
display: flex;
@ -25,29 +25,21 @@ textarea {
.permatoolbar > div {
display: flex;
}
.permatoolbar .button {
cursor: pointer;
font-size: 150%;
padding: 0.25em;
.permatoolbar button.iconified {
padding-left: var(--default-gap-xsmall);
padding-right: var(--default-gap-xsmall);
}
.permatoolbar .button.active {
fill: #5F9EA0;
.permatoolbar button.active {
fill: rgb(var(--primary-color-50));
}
.permatoolbar .button:hover {
background-color: var(--default-surface-hover);
.permatoolbar button > .fa-icon {
font-size: 180%;
}
#pageSelector {
min-width: 10em;
padding: 0.25em 0;
width: 50vw;
}
body[dir="ltr"] #pageSelector {
margin-right: 1em;
}
body[dir="rtl"] #pageSelector {
margin-left: 1em;
}
#showpopup {
display: inline-flex;
align-items: center;
@ -85,10 +77,10 @@ body[dir="rtl"] #pageSelector {
overflow-y: auto;
}
.inspector:not(.vExpanded) .vCompactToggler.button {
.inspector:not(.vExpanded) button.vCompactToggler > .fa-icon {
transform: scaleY(-1)
}
.hCompact .hCompactToggler.button {
.hCompact button.hCompactToggler > .fa-icon {
transform: scaleX(-1)
}
@ -96,13 +88,13 @@ body[dir="rtl"] #pageSelector {
display: none;
}
#netInspector #pause > span:last-of-type {
#netInspector #pause > .fa-icon[data-i18n-title="loggerUnpauseTip"] {
display: none;
}
#netInspector.paused #pause > span:first-of-type {
#netInspector.paused #pause > .fa-icon[data-i18n-title="loggerPauseTip"] {
display: none;
}
#netInspector.paused #pause > span:last-of-type {
#netInspector.paused #pause > .fa-icon[data-i18n-title="loggerUnpauseTip"] {
display: inline-flex;
fill: #5F9EA0;
}
@ -135,7 +127,7 @@ body[dir="rtl"] #pageSelector {
transform: scaleY(1);
}
#netInspector #filterExprPicker {
background-color: var(--default-surface);
background-color: var(--surface-1);
border: 1px solid gray;
display: none;
position: absolute;
@ -183,12 +175,12 @@ body[dir="rtl"] #netInspector #filterExprPicker {
margin: 0;
}
#netInspector #filterExprPicker span[data-filtex]:hover {
background-color: aliceblue;
border: 1px solid lightblue;
background-color: rgb(var(--primary-color-70) / 25%);
border: 1px solid rgb(var(--primary-color-70));
}
#netInspector #filterExprPicker span.on[data-filtex] {
background-color: lightblue;
border: 1px solid lightblue;
background-color: rgb(var(--primary-color-70) / 40%);
border: 1px solid rgb(var(--primary-color-70));
}
#netInspector .vscrollable {
@ -262,7 +254,7 @@ body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] {
}
#vwRenderer .logEntry > div.extendedRealm,
#vwRenderer .logEntry > div.redirect {
background-color: rgba(255, 255, 0, 0.1);
background-color: var(--logger-redirected-surface);
}
body.colorBlind #vwRenderer .logEntry > div.extendedRealm,
body.colorBlind #vwRenderer .logEntry > div.redirect {
@ -289,7 +281,7 @@ body.colorBlind #vwRenderer .logEntry > div.redirect {
}
#vwRenderer .logEntry > div > span {
border: 1px solid #ccc;
border: 1px dotted var(--border-1);
border-top: 0;
border-right: 0;
box-sizing: border-box;
@ -453,7 +445,7 @@ body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] b
}
#popupContainer {
background-color: var(--default-surface);
background-color: var(--surface-1);
border: 1px solid gray;
bottom: 0;
display: none;
@ -489,7 +481,7 @@ body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] b
position: relative;
}
#modalOverlay > div > div:nth-of-type(1) {
background-color: var(--default-surface);
background-color: var(--surface-1);
border: 0;
box-sizing: border-box;
padding: 1em;
@ -498,13 +490,13 @@ body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] b
width: 90vw;
}
#modalOverlay > div > div:nth-of-type(2) {
stroke: var(--default-ink);
stroke: var(--ink-1);
stroke-width: 3px;
position: absolute;
width: 1.6em;
height: 1.6em;
bottom: calc(100% + 2px);
background-color: var(--default-surface);
background-color: var(--surface-1);
}
body[dir="ltr"] #modalOverlay > div > div:nth-of-type(2) {
right: 0;
@ -513,7 +505,7 @@ body[dir="rtl"] #modalOverlay > div > div:nth-of-type(2) {
left: 0;
}
#modalOverlay > div > div:nth-of-type(2):hover {
background-color: var(--default-surface-hover);
background-color: var(--surface-2);
}
#modalOverlay > div > div:nth-of-type(2) > * {
pointer-events: none;
@ -569,17 +561,16 @@ body[dir="rtl"] #modalOverlay > div > div:nth-of-type(2) {
}
#netFilteringDialog > .headers {
border-bottom: 1px solid #888;
border-bottom: 1px solid var(--border-4);
line-height: 2;
position: relative;
}
#netFilteringDialog > .headers > .header {
background-color: #eee;
border: 1px solid #aaa;
border-bottom: 1px solid #888;
border: 1px solid var(--border-2);
border-bottom: 1px solid var(--border-4);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: #888;
color: var(--border-2);
cursor: pointer;
display: inline-block;
padding: 0 1em;
@ -590,10 +581,10 @@ body[dir="rtl"] #modalOverlay > div > div:nth-of-type(2) {
#netFilteringDialog[data-pane="details"] > .headers > [data-pane="details"],
#netFilteringDialog[data-pane="dynamic"] > .headers > [data-pane="dynamic"],
#netFilteringDialog[data-pane="static"] > .headers > [data-pane="static"] {
background-color: white;
border-color: #888;
border-bottom: 1px solid white;
color: black;
background-color: var(--surface-1);
border-color: var(--border-4);
border-bottom: 1px solid transparent;
color: var(--ink-1);
}
#netFilteringDialog > .headers > .tools {
bottom: 0;
@ -640,9 +631,9 @@ body[dir="rtl"] #netFilteringDialog > .headers > .tools {
}
#netFilteringDialog > .panes > .details > div {
align-items: stretch;
background-color: #e6e6e6;
background-color: var(--surface-2);
border: 0;
border-bottom: 1px solid white;
border-bottom: 1px solid var(--surface-0);
display: flex;
}
#netFilteringDialog > .panes > .details > div > span {
@ -656,10 +647,10 @@ body[dir="rtl"] #netFilteringDialog > .headers > .tools {
width: 8em;
}
body[dir="ltr"] #netFilteringDialog > .panes > .details > div > span:nth-of-type(1) {
border-right: 1px solid white;
border-right: 1px solid var(--surface-0);
}
body[dir="rtl"] #netFilteringDialog > .panes > .details > div > span:nth-of-type(1) {
border-left: 1px solid white;
border-left: 1px solid var(--surface-0);
}
#netFilteringDialog > .panes > .details > div > span:nth-of-type(2) {
flex-grow: 1;
@ -680,7 +671,7 @@ body[dir="rtl"] #netFilteringDialog > .panes > .details > div > span:nth-of-type
}
#netFilteringDialog > .panes > .details .exceptor {
align-items: center;
border-left: 1px solid white;
border-left: 1px solid var(--surface-0);
cursor: pointer;
display: inline-flex;
font-family: monospace;
@ -693,7 +684,7 @@ body[dir="rtl"] #netFilteringDialog > .panes > .details > div > span:nth-of-type
text-decoration: line-through;
}
#netFilteringDialog > .panes > .details .exceptored .exceptor {
background-color: lightblue;
background-color: rgb(var(--primary-color-50) / 50%);
}
#netFilteringDialog > .panes > .details .exceptor::before {
content: '#@#';
@ -715,10 +706,10 @@ body[dir="rtl"] #netFilteringDialog > .panes > .details > div > span:nth-of-type
width: 4.5em;
}
body[dir="ltr"] #netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(1) {
border-right: 1px solid white;
border-right: 1px solid var(--surface-0);
}
body[dir="rtl"] #netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(1) {
border-left: 1px solid white;
border-left: 1px solid var(--surface-0);
}
#netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(2) {
align-self: center;
@ -744,12 +735,12 @@ body.dirty #netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules {
display: none;
}
#netFilteringDialog > div.panes > .dynamic .entry {
background-color: #e6e6e6;
background-color: var(--surface-2);
border: 0;
border-bottom: 1px solid white;
border-bottom: 1px solid var(--surface-0);
}
#netFilteringDialog > div.panes > .dynamic .entry:hover {
background-color: #f0f0f0;
background-color: var(--surface-3);
}
#netFilteringDialog > div.panes > .dynamic .entry > .action {
background-color: transparent;
@ -913,7 +904,7 @@ body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action > .
display: inline-flex;
}
#loggerExportDialog .options span[data-i18n] {
border: 1px solid lightblue;
border: 1px solid rgb(var(--primary-color-70));
cursor: pointer;
font-size: 90%;
margin: 0;
@ -921,11 +912,11 @@ body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action > .
white-space: nowrap;
}
#loggerExportDialog .options span[data-i18n]:hover {
background-color: aliceblue;
background-color: rgb(var(--primary-color-70) / 40%);
}
#loggerExportDialog .options span.on[data-i18n],
#loggerExportDialog .options span.pushbutton:active {
background-color: lightblue;
background-color: rgb(var(--primary-color-70) / 40%);
}
#loggerExportDialog .output {
font: smaller mono;

View File

@ -24,8 +24,8 @@
opacity: 0;
}
a {
color: var(--default-ink);
fill: var(--default-ink);
color: var(--ink-1);
fill: var(--ink-1);
text-decoration: none;
}
:focus {
@ -55,7 +55,7 @@ hr {
}
#sticky {
background-color: var(--default-surface);
background-color: var(--surface-1);
position: sticky;
top: 0;
z-index: 100;
@ -83,7 +83,7 @@ hr {
stroke-width: 64;
}
body.off #switch {
fill: var(--default-surface);
fill: var(--surface-1);
stroke: var(--checkbox-ink);
}
.rulesetTools {
@ -96,11 +96,11 @@ body.off #switch {
width: 25%;
}
.rulesetTools [id] {
background-color: var(--bg-transient-notice);
border: 1px solid #ddc;
background-color: var(--popup-ruleset-tool-surface);
border-radius: 4px;
box-shadow: var(--popup-ruleset-tool-shadow) 0 1px 1px;
cursor: pointer;
fill: var(--default-ink-a50);
fill: var(--popup-ruleset-tool-ink);
flex-grow: 1;
font-size: 2.2em;
padding: 0;
@ -109,6 +109,9 @@ body.off #switch {
.rulesetTools [id]:not(:first-of-type) {
margin-top: 0.2em;
}
.rulesetTools [id] > svg {
fill: var(--ink-4);
}
body.needReload #refresh,
body.needSave #saveRules,
body.needSave #revertRules {
@ -290,7 +293,7 @@ body[data-more=""] #lessButton {
}
#firewall > div > span,
#actionSelector > #dynaCounts {
background-color: var(--bg-popup-cell-2);
background-color: var(--popup-cell-surface);
border: none;
box-sizing: border-box;
display: inline-flex;
@ -347,7 +350,7 @@ body[data-more=""] #lessButton {
opacity: 0.5;
}
#firewall > div.isCname > span:first-of-type {
color: var(--fg-popup-cell-cname);
color: var(--popup-cell-cname-ink);
}
#firewall > div > span:first-of-type > sub {
display: inline-block;
@ -368,7 +371,7 @@ body[data-more=""] #lessButton {
}
#firewall > div > span:nth-of-type(3),
#firewall > div > span:nth-of-type(4) {
color: var(--fg-0-70);
color: var(--ink-2);
display: none;
font-family: monospace;
text-align: center;
@ -381,11 +384,11 @@ body[data-more=""] #lessButton {
pointer-events: auto;
}
#firewall > div.isDomain.hasSubdomains > span:first-of-type > span::before {
color: var(--default-ink-a40);
color: var(--ink-3);
content: '\2026\A0';
}
#firewall > div:first-of-type > span:first-of-type::before {
color: var(--fg-0-50);
color: var(--ink-3);
content: '+';
padding-right: 0.25em;
}
@ -468,7 +471,7 @@ body.advancedUser #firewall > div > span:first-of-type ~ span {
box-sizing: border-box;
content: '';
display: inline-block;
filter: var(--bg-popup-cell-label-filter);
filter: var(--popup-cell-label-filter);
height: 100%;
left: 0;
position: absolute;
@ -476,49 +479,49 @@ body.advancedUser #firewall > div > span:first-of-type ~ span {
width: 7px;
}
#firewall > div.isRootContext > span:first-of-type::before {
background: var(--fg-0-50);
background: var(--ink-3);
width: 14px !important;
}
#firewall > div.allowed > span:first-of-type::before,
#firewall > div.isDomain.totalAllowed > span:first-of-type::before {
background: var(--bg-popup-cell-allow-own);
background: var(--popup-cell-allow-own-surface);
}
#firewall > div.blocked > span:first-of-type::before,
#firewall > div.isDomain.totalBlocked > span:first-of-type::before {
background: var(--bg-popup-cell-block-own);
background: var(--popup-cell-block-own-surface);
}
#firewall > div.allowed.blocked > span:first-of-type::before,
#firewall > div.isDomain.totalAllowed.totalBlocked > span:first-of-type::before {
background: var(--bg-popup-cell-label-mixed);
background: var(--popup-cell-label-mixed-surface);
}
/* Rule cells */
body.advancedUser #firewall > div > span.allowRule,
#actionSelector > #dynaAllow {
background: var(--bg-popup-cell-allow);
background: var(--popup-cell-allow-surface);
}
body.advancedUser #firewall > div > span.blockRule,
#actionSelector > #dynaBlock {
background: var(--bg-popup-cell-block);
background: var(--popup-cell-block-surface);
}
body.advancedUser #firewall > div > span.noopRule,
#actionSelector > #dynaNoop {
background: var(--bg-popup-cell-noop);
background: var(--popup-cell-noop-surface);
}
body.advancedUser #firewall > div > span.ownRule,
#firewall > div > span.ownRule {
color: var(--default-surface);
color: var(--surface-1);
}
body.advancedUser #firewall > div > span.allowRule.ownRule,
:root:not(.mobile) #actionSelector > #dynaAllow:hover {
background: var(--bg-popup-cell-allow-own);
background: var(--popup-cell-allow-own-surface);
}
body.advancedUser #firewall > div > span.blockRule.ownRule,
:root:not(.mobile) #actionSelector > #dynaBlock:hover {
background: var(--bg-popup-cell-block-own);
background: var(--popup-cell-block-own-surface);
}
body.advancedUser #firewall > div > span.noopRule.ownRule,
:root:not(.mobile) #actionSelector > #dynaNoop:hover {
background: var(--bg-popup-cell-noop-own);
background: var(--popup-cell-noop-own-surface);
}
#actionSelector {
@ -651,19 +654,25 @@ body:not([data-more~="e"]) [data-more="e"] {
:root.desktop body {
--popup-gap: calc(var(--font-size) * 0.875);
}
:root.desktop #switch:hover {
background-color: var(--default-surface-hover);
:root.desktop body:not(.off) #switch:hover {
fill: rgb(var(--popup-power-ink-rgb) / 90%);
}
:root.desktop body.off #switch:hover {
stroke: var(--popup-power-ink);
}
:root.desktop .rulesetTools [id]:hover {
fill: var(--default-ink);
background-color: var(--popup-ruleset-tool-surface-hover);
}
:root.desktop .rulesetTools [id]:hover > svg {
fill: var(--ink-3);
}
:root.desktop #firewall {
direction: rtl;
line-height: 1.4;
}
:root.desktop .tool:hover {
background-color: var(--default-surface-hover);
background-color: var(--surface-2);
}
:root.desktop #moreOrLess > span:hover {
background-color: var(--default-surface-hover);
background-color: var(--surface-2);
}

View File

@ -1,3 +1,13 @@
:root {
--bg-tooltip: hsla(60, 100%, 97%, 1);
--popup-power-ink: rgb(0 110 254);
--popup-power-ink-hover: rgb(var(--blue-60));
--ink-5: rgb(var(--ink-rgb) / 20%);
}
:root.dark {
--popup-power-ink-hover: rgb(var(--blue-30));
}
body {
display: flex;
flex-direction: column;
@ -8,9 +18,9 @@ body {
}
h2 {
background-color: var(--bg-popup-cell-1);
background-color: var(--surface-2);
border: 0;
color: var(--fg-0-70);
color: var(--ink-3);
cursor: pointer;
font-size: 100%;
font-weight: normal;
@ -100,11 +110,11 @@ p {
}
#switch .fa-icon:hover {
color: var(--popup-power-ink-hover);
fill: var(--popup-power-ink-hover);
fill: var(--popup-power-ink-hover);
}
body.off #switch .fa-icon {
color: var(--fg-0-20);
fill: var(--fg-0-20);
color: var(--ink-5);
fill: var(--ink-5);
}
#basicTools {
margin: 1.2em 0 0.5em 0;
@ -113,9 +123,9 @@ body.off #switch .fa-icon {
margin-left: 0;
}
.tool {
color: var(--fg-0-40);
color: var(--ink-4);
fill: var(--ink-4);
cursor: pointer;
fill: var(--fg-0-40);
margin-left: 0.8em;
min-width: 1em;
padding: 0 0.2em;
@ -133,7 +143,7 @@ body.off #switch .fa-icon {
font-size: 1.25em;
}
.statName {
color: var(--fg-0-70);
color: var(--ink-3);
font-size: 85%;
margin: 0.8em 0.2em 0.4em 0.2em;
}
@ -141,7 +151,7 @@ body.off #switch .fa-icon {
margin: 0;
}
#extraTools {
background-color: var(--bg-popup-cell-1);
background-color: var(--surface-2);
border: 0;
display: flex;
justify-content: center;
@ -152,9 +162,9 @@ body.responsive #extraTools {
justify-content: space-evenly;
}
#extraTools > span {
color: var(--fg-0-40);
color: var(--ink-4);
fill: var(--ink-4);
cursor: pointer;
fill: var(--fg-0-40);
font-size: 1.2em;
margin: 0 0.8em 0 0;
position: relative;
@ -180,12 +190,12 @@ body.responsive #extraTools {
}
#refresh {
background-color: var(--bg-transient-notice);
background-color: var(--notice-surface);
border: 1px solid #ddc;
border-radius: 4px;
cursor: pointer;
display: none;
fill: var(--fg-0-50);
fill: var(--ink-3);
font-size: 3em;
justify-content: center;
left: 4px;
@ -207,7 +217,7 @@ body.dirty #refresh:hover {
border-radius: 3px;
box-shadow: 1px 1px 3px gray;
box-sizing: border-box;
color: var(--fg-tooltip);
color: var(--ink-1);
cursor: pointer;
direction: ltr;
font: 12px sans-serif;
@ -262,7 +272,7 @@ body[dir="rtl"] #tooltip {
display: none;
}
#firewallContainer > div > span {
background-color: var(--bg-popup-cell-1);
background-color: var(--surface-2);
border: none;
box-sizing: border-box;
display: inline-flex;
@ -284,7 +294,7 @@ body[dir="rtl"] #tooltip {
word-break: break-word;
}
#firewallContainer > div.isCname > span:first-of-type {
color: var(--fg-popup-cell-cname);
color: var(--popup-cell-cname-ink);
}
#firewallContainer > div > span:first-of-type > sub {
display: inline-block;
@ -304,7 +314,7 @@ body[dir="rtl"] #tooltip {
}
#firewallContainer > div > span:nth-of-type(3),
#firewallContainer > div > span:nth-of-type(4) {
color: var(--fg-0-70);
color: var(--ink-3);
display: none;
font-family: monospace;
text-align: center;
@ -313,7 +323,7 @@ body[dir="rtl"] #tooltip {
font-weight: bold;
}
#firewallContainer > div:first-of-type > span:first-of-type::before {
color: var(--fg-0-50);
color: var(--ink-3);
content: '+';
padding-right: 0.25em;
}
@ -395,7 +405,7 @@ body.advancedUser #firewallContainer > div > span:first-of-type ~ span {
box-sizing: border-box;
content: '';
display: inline-block;
filter: var(--bg-popup-cell-label-filter);
filter: var(--popup-cell-label-filter);
height: 100%;
left: 0;
position: absolute;
@ -403,49 +413,49 @@ body.advancedUser #firewallContainer > div > span:first-of-type ~ span {
width: 7px;
}
#firewallContainer > div.isRootContext > span:first-of-type::before {
background-color: var(--fg-0-50);
background-color: var(--ink-3);
width: 14px !important;
}
#firewallContainer > div.allowed > span:first-of-type::before,
#firewallContainer > div.isDomain.totalAllowed > span:first-of-type::before {
background-color: var(--bg-popup-cell-allow-own);
background-color: var(--popup-cell-allow-own-surface);
}
#firewallContainer > div.blocked > span:first-of-type::before,
#firewallContainer > div.isDomain.totalBlocked > span:first-of-type::before {
background-color: var(--bg-popup-cell-block-own);
background-color: var(--popup-cell-block-own-surface);
}
#firewallContainer > div.allowed.blocked > span:first-of-type::before,
#firewallContainer > div.isDomain.totalAllowed.totalBlocked > span:first-of-type::before {
background-color: var(--bg-popup-cell-label-mixed);
background-color: var(--popup-cell-label-mixed-surface);
}
/* Rule cells */
body.advancedUser #firewallContainer > div > span.allowRule,
#actionSelector > #dynaAllow {
background-color: var(--bg-popup-cell-allow);
background-color: var(--popup-cell-allow-surface);
}
body.advancedUser #firewallContainer > div > span.blockRule,
#actionSelector > #dynaBlock {
background-color: var(--bg-popup-cell-block);
background-color: var(--popup-cell-block-surface);
}
body.advancedUser #firewallContainer > div > span.noopRule,
#actionSelector > #dynaNoop {
background-color: var(--bg-popup-cell-noop);
background-color: var(--popup-cell-noop-surface);
}
body.advancedUser #firewallContainer > div > span.ownRule,
#firewallContainer > div > span.ownRule {
color: var(--default-surface);
color: var(--surface-1);
}
body.advancedUser #firewallContainer > div > span.allowRule.ownRule,
#actionSelector > #dynaAllow:hover {
background-color: var(--bg-popup-cell-allow-own);
background-color: var(--popup-cell-allow-own-surface);
}
body.advancedUser #firewallContainer > div > span.blockRule.ownRule,
#actionSelector > #dynaBlock:hover {
background-color: var(--bg-popup-cell-block-own);
background-color: var(--popup-cell-block-own-surface);
}
body.advancedUser #firewallContainer > div > span.noopRule.ownRule,
#actionSelector > #dynaNoop:hover {
background-color: var(--bg-popup-cell-noop-own);
background-color: var(--popup-cell-noop-own-surface);
}
#actionSelector {
@ -493,12 +503,12 @@ body.advancedUser #firewallContainer > div > span.noopRule.ownRule,
top: 4px;
}
#rulesetTools > span {
background-color: var(--bg-transient-notice);
background-color: var(--notice-surface);
border: 1px solid #ddc;
border-radius: 4px;
cursor: pointer;
display: inline-block;
fill: var(--fg-0-50);
fill: var(--ink-3);
font-size: 1.8em;
line-height: 1.0;
margin: 0;

View File

@ -6,6 +6,7 @@ body {
max-width: 800px;
}
h3 {
color: var(--fieldset-header-ink);
margin-bottom: 0;
}
.supportEntry {

View File

@ -4,64 +4,127 @@
https://protocol.mozilla.org/
https://material.io/
*/
/**
Color names from:
https://protocol.mozilla.org/fundamentals/color.html
Tools:
Lightness validator: https://www.hsluv.org/
Contrast validator: https://bernaferrari.github.io/color-studio/#/
*/
:root {
--blue-10: #80ebff;
--blue-40: #0090ed;
--blue-50: #0060df;
--blue-60: #0250bb;
--dark-gray-10: #52525e;
--dark-gray-30: #42414d;
--dark-gray-40: #3a3944;
--dark-gray-50: #32313c;
--dark-gray-70: #23222b;
--dark-gray-80: #1c1b22;
--dark-gray-90: #15141a;
--ink-20: #312a65;
--ink-50: #291d4f;
--ink-80: #20123a;
--ink-80-a4: #20123a0a;
--ink-80-a40: #20123a66;
--ink-80-a50: #20123a80;
--ink-90: #1d1133;
--light-gray-10: #f9f9fb;
--light-gray-10-a4: #f9f9fb0a;
--light-gray-10-a12: #f9f9fb1f;
--light-gray-10-a16: #f9f9fb29;
--light-gray-20: #f0f0f4;
--light-gray-25: #e8e8ed;
--light-gray-30: #e0e0e6;
--light-gray-30-a50: #e0e0e680;
--light-gray-40: #cfcfd8;
--light-gray-50: #bfbfc9;
--light-gray-60: #afafba;
--light-gray-70: #9f9fad;
--light-gray-80: #8f8f9e;
--light-gray-90: #80808f;
--orange-80: #9e280b;
--purple-60: #952bb9;
--red-60: #e22850;
--violet-40: #ab71ff;
--violet-60: #7542e5;
--violet-70: #592acb;
--violet-80: #45278d;
--yellow-10: #ffff98;
--yellow-30: #ffd567;
--yellow-40: #ffbd4f;
--yellow-50: #ffa436;
--yellow-60: #e27f2e;
--black: #000;
--white: #fff;
--blue-5: 170 242 255;
--blue-10: 128 235 255;
--blue-20: 0 221 255;
--blue-30: 0 179 244;
--blue-40: 0 144 237;
--blue-50: 0 96 223;
--blue-60: 2 80 187;
--blue-70: 5 64 150;
--blue-80: 7 48 114;
--blue-90: 9 32 77;
--dark-gray-10: 82 82 94;
--dark-gray-20: 74 74 85;
--dark-gray-30: 66 65 77;
--dark-gray-40: 58 57 68;
--dark-gray-50: 50 49 60;
--dark-gray-60: 43 42 51;
--dark-gray-70: 35 34 43;
--dark-gray-80: 28 27 34;
--dark-gray-90: 21 20 26;
--green-30: 136 255 209;
--green-40: 84 255 189;
--green-50: 63 225 176;
--green-60: 42 195 162;
--green-70: 0 135 135;
--green-80: 0 94 94;
--ink-10: 57 52 115;
--ink-80: 32 18 58;
--light-gray-10: 249 249 251;
--light-gray-20: 240 240 244;
--light-gray-30: 224 224 230;
--light-gray-40: 207 207 216;
--light-gray-50: 191 191 201;
--light-gray-60: 175 175 186;
--light-gray-70: 159 159 173;
--light-gray-80: 143 143 158;
--light-gray-90: 128 128 143;
--orange-5: 255 244 222;
--orange-10: 255 213 178;
--orange-20: 255 181 135;
--orange-30: 255 162 102;
--orange-40: 255 138 80;
--orange-50: 255 113 57;
--orange-60: 226 89 32;
--orange-70: 204 61 0;
--orange-80: 158 40 11;
--orange-90: 124 21 4;
--purple-5: 247 226 255;
--purple-10: 246 184 255;
--purple-20: 246 143 255;
--purple-30: 247 112 255;
--purple-40: 215 76 240;
--purple-50: 184 51 225;
--purple-60: 149 43 185;
--purple-70: 114 34 145;
--purple-80: 78 26 105;
--purple-90: 43 17 65;
--red-20: 255 154 162;
--red-30: 255 132 139;
--red-40: 255 106 117;
--red-50: 255 79 94;
--red-60: 226 40 80;
--red-70: 197 0 66;
--violet-5: 231 223 255;
--violet-10: 217 191 255;
--violet-20: 203 158 255;
--violet-30: 198 137 255;
--violet-40: 171 113 255;
--violet-50: 144 89 255;
--violet-60: 117 66 229;
--violet-70: 89 42 203;
--violet-80: 69 39 141;
--violet-90: 50 28 100;
--yellow-5: 255 255 204;
--yellow-10: 255 255 152;
--yellow-20: 255 234 128;
--yellow-30: 255 213 103;
--yellow-40: 255 189 79;
--yellow-50: 255 164 54;
--yellow-60: 226 127 46;
--yellow-70: 196 90 39;
--yellow-80: 167 52 31;
--yellow-90: 150 14 24;
/*
* Reference gray: -light-gray-90, then calibrated with hsluv.org, where
* the number is Luv.
*
* */
--gray-5: 16 16 22;
--gray-10: 27 27 35;
--gray-15: 37 37 47;
--gray-20: 47 47 59;
--gray-25: 58 58 72;
--gray-30: 69 69 85;
--gray-35: 81 81 98;
--gray-40: 93 93 110;
--gray-45: 105 105 121;
--gray-50: 118 118 133;
--gray-55: 131 131 145;
--gray-60: 144 144 156;
--gray-65: 157 157 168;
--gray-70: 170 170 180;
--gray-75: 184 184 192;
--gray-80: 198 198 204;
--gray-85: 212 212 217;
--gray-90: 226 226 229;
--gray-95: 240 240 242;
}
/**
Font size
*/
/*
* Font size
*
* */
:root {
--font-size: 14px;
}
@ -70,301 +133,338 @@
--font-size: 16px;
}
/**
Components
*/
/*
* Color themes
*
* Tool: hsluv.org
*
* */
:root.h0 {
--primary-color-30: 139 18 60; /* S:90 Luv:30 */
--primary-color-40: 181 27 81; /* S:90 Luv:40 */
--primary-color-50: 226 37 102; /* S:90 Luv:50 */
--primary-color-60: 247 87 130; /* S:90 Luv:60 */
--primary-color-70: 248 138 162; /* S:90 Luv:70 */
--primary-color-70: 248 138 162; /* S:90 Luv:70 */
--primary-color-80: 250 180 193; /* S:90 Luv:80 */
}
:root.h45 {
--primary-color-30: 98 63 17; /* S:90 Luv:30 */
--primary-color-40: 130 85 25; /* S:90 Luv:40 */
--primary-color-50: 162 107 34; /* S:90 Luv:50 */
--primary-color-60: 196 131 43; /* S:90 Luv:60 */
--primary-color-70: 232 155 53; /* S:90 Luv:70 */
--primary-color-80: 251 185 123; /* S:90 Luv:80 */
}
:root.h180 {
--primary-color-30: 18 79 73; /* S:90 Luv:30 */
--primary-color-40: 27 105 98; /* S:90 Luv:40 */
--primary-color-50: 37 132 123; /* S:90 Luv:50 */
--primary-color-60: 47 161 150; /* S:90 Luv:60 */
--primary-color-70: 57 190 177; /* S:90 Luv:70 */
--primary-color-80: 67 220 205; /* S:90 Luv:80 */
}
:root.h225 {
--primary-color-30: 20 77 95; /* S:90 Luv:30 */
--primary-color-40: 29 102 125; /* S:90 Luv:40 */
--primary-color-50: 39 128 157; /* S:90 Luv:50 */
--primary-color-60: 50 156 190; /* S:90 Luv:60 */
--primary-color-70: 60 184 224; /* S:90 Luv:70 */
--primary-color-80: 110 211 250; /* S:90 Luv:80 */
}
:root /* .h270 default */ {
--primary-color-30: 72 31 194; /* S:90 Luv:30 */
--primary-color-40: 96 56 234; /* S:90 Luv:40 */
--primary-color-50: 120 95 240; /* S:90 Luv:50 */
--primary-color-60: 146 128 244; /* S:90 Luv:60 */
--primary-color-70: 172 160 247; /* S:90 Luv:70 */
--primary-color-80: 199 192 250; /* S:90 Luv:80 */
}
:root.h315 {
--primary-color-10: 54 5 49; /* S:90 Luv:10 */
--primary-color-30: 126 22 115; /* S:90 Luv:30 */
--primary-color-40: 165 32 151; /* S:90 Luv:40 */
--primary-color-50: 205 43 189; /* S:90 Luv:50 */
--primary-color-60: 244 61 225; /* S:90 Luv:60 */
--primary-color-70: 247 127 231; /* S:90 Luv:70 */
--primary-color-80: 250 174 238; /* S:90 Luv:80 */
}
/*
* Components
*
* */
:root {
--font-size: 14px;
--ubo-red: #800000;
--default-ink: var(--ink-80);
--default-ink-a4: var(--ink-80-a4);
--default-ink-a40: var(--ink-80-a40);
--default-ink-a50: var(--ink-80-a50);
--default-surface: var(--light-gray-10);
--default-surface-border: var(--light-gray-70);
--default-surface-hover: var(--light-gray-30-a50);
--elevation-up-surface: black;
--elevation-up1-opacity: 4%;
--elevation-up2-opacity: 8%;
--elevation-down-surface: white;
--elevation-down1-opacity: 16%;
--elevation-down2-opacity: 32%;
--bg-1: hsla(240, 20%, 98%, 1);
--bg-1-border: hsla(240, 20%, 90%, 1);
--ink-rgb: var(--ink-80);
--ink-0: black;
--ink-1: rgb(var(--ink-rgb));
--ink-2: rgb(var(--ink-rgb) / 80%);
--ink-3: rgb(var(--ink-rgb) / 60%);
--ink-4: rgb(var(--ink-rgb) / 40%);
--bg-overlay-50: #0008;
--surface-0: white;
--surface-1: rgb(var(--gray-95));
--surface-2: rgb(var(--gray-90));
--surface-3: rgb(var(--gray-80));
--surface-4: rgb(var(--gray-75));
--bg-code: hsla(240, 20%, 93%, 1);
--primary-surface-2: rgb(var(--primary-color-70) / 15%);
/* 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);
--border-1: rgb(var(--gray-75));
--border-2: rgb(var(--gray-70));
--border-3: rgb(var(--gray-65));
--border-4: rgb(var(--gray-60));
--link-ink: var(--violet-70);
--accent-ink-1: var(--surface-1);
--accent-ink-3: var(--ink-1);
--accent-surface-1: rgb(var(--primary-color-30));
--accent-surface-2: rgb(var(--primary-color-50));
--accent-surface-3: rgb(var(--primary-color-70));
--link-ink: var(--accent-surface-1);
--fieldset-header-surface: transparent;
--fieldset-header-ink: var(--ink-20);
--fieldset-header-ink: var(--ink-2);
--button-surface: var(--light-gray-30);
--button-ink: var(--ink-20);
--button-surface-hover: var(--light-gray-40);
--button-active-surface: var(--blue-10);
--button-important-surface: var(--yellow-30);
--button-important-surface-hover: var(--yellow-40);
/* https://material.io/design/interaction/states.html#disabled */
--button-disabled-filter: opacity(38%);
--button-disabled-surface: var(--light-gray-30);
--button-disabled-ink: var(--ink-20);
--button-preferred-surface: var(--ink-20);
--button-preferred-ink: white;
--button-ink: var(--ink-1);
--button-surface: var(--surface-3);
--button-border-radius: 5px;
--button-preferred-ink: var(--accent-ink-1);
--button-preferred-surface: var(--accent-surface-1);
--button-disabled-filter: opacity(50%);
--checkbox-size: calc(var(--font-size) + 2px);
--checkbox-ink: var(--light-gray-90);
--checkbox-checked-ink: var(--ink-20);
--checkbox-ink: var(--ink-3);
--checkbox-checked-ink: var(--accent-surface-1);
--checkbox-disabled-filter: opacity(50%);
--select-surface: white;
--bg-transient-notice: hsla(60, 100%, 95%, 1);
--notice-ink: var(--accent-ink-1);
--notice-surface: var(--accent-surface-1);
--notice-surface-shadow: #000 0 2px 8px;
--dashboard-bar-shadow:
0px 0px 0px 1px var(--default-ink-a4),
0px 1px 2px 0px #2200330a,
0px 2px 1px -1px #0730721f,
0px 1px 6px 0px #0e0d1a1f;
--dashboard-tab-ink: var(--default-ink);
--dashboard-tab-active-ink: var(--violet-70);
--dashboard-tab-surface-hover: var(--default-surface-hover);
0px 0px 0px 1px rgb(var(--ink-rgb) / 4%),
0px 1px 2px 0px rgb(var(--ink-rgb) / 4%),
0px 2px 1px -1px rgb(var(--ink-rgb) / 12%),
0px 1px 6px 0px rgb(var(--ink-rgb) / 12%);
--dashboard-tab-ink: var(--ink-1);
--dashboard-tab-active-ink: var(--accent-surface-1);
--dashboard-tab-surface-hover: var(--surface-2);
--dashboard-tab-border-hover: var(--surface-3);
--fg-icon-info-lvl-0-dimmed: #888;
--fg-icon-info-lvl-0: inherit;
--fg-icon-info-lvl-1-dimmed: hsla(240, 100%, 40%, 0.5);
--fg-icon-info-lvl-1: hsla(240, 100%, 40%, 1);
--info-lvl-2-ink: var(--yellow-50);
--info-lvl-2-ink-hover: var(--yellow-60);
--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%, 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(--ink-80);
/* info levels: normal, fyi, warn, error -- we want same Luv */
--info0-ink-rgb: 119 119 119; /* h: 0 S: 0 Luv:60 */
--info1-ink-rgb: 72 143 255; /* h:255 S:100 Luv:60 */
--info2-ink-rgb: 227 113 0; /* h: 30 S:100 Luv:60 */
--info3-ink-rgb: 255 68 166; /* h:330 S:100 Luv:60 */
--info0-ink: rgb(var(--info0-ink-rgb));
--info1-ink: rgb(var(--info1-ink-rgb));
--info2-ink: rgb(var(--info2-ink-rgb));
--info3-ink: rgb(var(--info3-ink-rgb));
/* popup panel */
/* classic */
--bg-popup-cell-1: hsla(261, 0%, 93%, 1);
/* fenix */
--popup-power-ink: var(--blue-50);
--popup-power-disabled-ink: var(--light-gray-70);
--popup-power-ink-hover: var(--blue-60);
--bg-popup-cell-2: var(--light-gray-30);
--bg-popup-cell-label-filter: opacity(40%);
--fg-popup-cell-cname: hsla(240, 100%, 40%, 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);
--popup-icon-x-ink: var(--red-60);
--popup-cell-surface: var(--surface-2);
--popup-cell-label-filter: opacity(40%);
--popup-cell-cname-ink: rgb(var(--blue-50));
--popup-cell-allow-surface-rgb: 0 153 0;
--popup-cell-allow-own-surface: rgb(var(--popup-cell-allow-surface-rgb));
--popup-cell-allow-surface: rgb(var(--popup-cell-allow-surface-rgb) / 35%);
--popup-cell-noop-surface-rgb: 132 132 132;
--popup-cell-noop-own-surface: rgb(var(--popup-cell-noop-surface-rgb));
--popup-cell-noop-surface: rgb(var(--popup-cell-noop-surface-rgb) / 35%);
--popup-cell-block-surface-rgb: 255 40 40;
--popup-cell-block-own-surface: rgb(var(--popup-cell-block-surface-rgb));
--popup-cell-block-surface: rgb(var(--popup-cell-block-surface-rgb) / 35%);
--popup-cell-label-mixed-surface: #c29100;
--popup-icon-x-ink: rgb(var(--red-60));
--popup-power-ink-rgb: var(--primary-color-40);
--popup-power-ink: rgb(var(--popup-power-ink-rgb));
--popup-ruleset-tool-ink: var(--ink-1);
--popup-ruleset-tool-surface: rgb(var(--primary-color-70) / 20%);
--popup-ruleset-tool-surface-hover: rgb(var(--primary-color-70) / 40%);
--popup-ruleset-tool-shadow: rgb(var(--primary-color-30) / 20%);
/* horizontal line separator */
--hr-ink: var(--light-gray-30);
--hr-ink: var(--surface-2);
/* cloud widget */
--cloud-widget-surface: var(--light-gray-20);
--cloud-total-used-surface: rgb(var(--violet-60) / 25%);
--cloud-used-surface: rgb(var(--violet-60));
/* codemirror */
--cm-gutter-border: var(--light-gray-40);
--cm-gutter-ink: var(--light-gray-90);
--cm-gutter-surface: var(--light-gray-25);
--cm-selection-surface: #d7d4f0;
--cm-selection-ink: var(--default-ink);
--cm-searching-surface: #ffff0066;
--cm-active-line: var(--surface-1);
--cm-cursor: var(--ink-0);
--cm-foldmarker-ink: rgb(var(--blue-40));
--cm-gutter-border: var(--surface-1);
--cm-gutter-ink: var(--ink-3);
--cm-gutter-surface: var(--surface-2);
--cm-matchingbracket: rgb(var(--green-30));
--cm-merge-copy-ink: rgb(var(--blue-50));
--cm-merge-l-chunk-border: rgb(var(--blue-5));
--cm-merge-l-chunk-surface: rgb(var(--blue-5) / 20%);
--cm-negative: #c00;
--cm-positive: #080;
--cm-selection-surface: #8cf4;
--cm-selection-ink: var(--ink-1);
--cm-searching-ink: inherit;
--cm-searching-surface: rgb(var(--yellow-20) / 80%);
--cm-search-match-surface: rgb(var(--yellow-40) / 50%);
/* syntax highlight: static filtering */
--sf-comment-ink: var(--light-gray-90);
--sf-def-ink: #0000ff;
--sf-directive-ink: var(--dark-gray-40);
--sf-error-ink: #ff0000;
--sf-error-surface: #ff000016;
--sf-keyword-ink: var(--purple-60);
--sf-notice-ink: var(--light-gray-60);
--sf-readonly-ink: var(--light-gray-80);
--sf-tag-ink: #117700;
--sf-value-ink: var(--orange-80);
--sf-variable-ink: var(--default-ink);
--sf-warning-ink: var(--yellow-50);
--sf-comment-ink: var(--ink-3);
--sf-def-ink: rgb(var(--blue-50));
--sf-directive-ink: var(--ink-1);
--sf-error-ink: rgb(var(--red-60));
--sf-error-surface: rgb(var(--red-60) / 10%);
--sf-keyword-ink: rgb(var(--purple-60));
--sf-notice-ink: var(--border-2);
--sf-readonly-ink: var(--ink-3);
--sf-tag-ink: rgb(var(--green-60));
--sf-value-ink: rgb(var(--orange-70));
--sf-variable-ink: var(--ink-1);
--sf-warning-ink: rgb(var(--yellow-50));
/* syntax highlight: dynamic filtering */
--df-allow-ink: #117700;
--df-block-ink: #ff0000;
--df-noop-ink: var(--dark-gray-10);
--df-key-ink: var(--violet-70);
--df-allow-ink: var(--cm-positive);
--df-block-ink: var(--cm-negative);
--df-noop-ink: rgb(var(--dark-gray-10));
/* logger */
--logger-allowed-surface: #00a00014;
--logger-blocked-surface: #c0000014;
--logger-modified-surface: #0000c010;
--logger-allowed-surface: #00a00014;
--logger-redirected-surface: rgb(var(--yellow-5) / 50%);
--logger-blocked-em-surface: #c0000036;
--logger-modified-em-surface: #0000c028;
--logger-allowed-em-surface: #00a00036;
}
/**
Use slightly darker inks on lower pixel-density devices to improve
contrast.
*/
:root:not(.hidpi) {
--default-ink: var(--ink-90);
--button-ink: var(--ink-90);
--fieldset-header-ink: var(--ink-50);
--link-ink: var(--violet-80);
}
/**
Source for color-blind color scheme from https://github.com/WyohKnott:
https://github.com/chrisaljoudi/uBlock/issues/467#issuecomment-95177219
*/
/*
* 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);
--popup-cell-allow-surface-rgb: 225 157 0;
--popup-cell-block-surface-rgb: 14 55 255;
--popup-cell-label-mixed-surface: #ff6a00;
}
/**
Default dark theme starts here
Assign a default background color if dark mode is enabled -- hopefully
this will avoid flashes of white background until the document's own CSS
overrides the default color value below.
https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-629641072
*/
@media (prefers-color-scheme: dark) {
body {
background-color: var(--dark-gray-90);
}
}
/*
* Default dark theme starts here
*
* https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-629641072
* Assign a default background color if dark mode is enabled -- hopefully
* this will avoid flashes of white background until the document's own CSS
* overrides the default color value below.
*
* */
/* https://material.io/design/color/dark-theme.html */
:root.dark {
--default-ink: var(--light-gray-10);
--default-ink-a4: var(--light-gray-10-a4);
--default-ink-a50: var(--light-gray-30-a50);
--default-surface: var(--dark-gray-90);
--default-surface-hover: var(--dark-gray-50);
--bg-1: hsla(250, 13%, 9%, 1);
--bg-1-border: hsla(250, 13%, 16%, 1);
--bg-overlay-50: #0008;
--bg-code: hsla(0, 2%, 0%, 0.8);
--fg-0-80: hsla(0, 0%, 53%, 0.8);
--fg-0-70: hsla(0, 0%, 53%, 0.7);
--fg-0-60: hsla(0, 0%, 53%, 0.6);
--fg-0-50: hsla(0, 0%, 53%, 0.5);
--fg-0-40: hsla(0, 0%, 53%, 0.4);
--fg-0-30: hsla(0, 0%, 53%, 0.3);
--fg-0-20: hsla(0, 0%, 53%, 0.2);
--link-ink: #bb86fc;
--fieldset-header-surface: transparent;
--fieldset-header-ink: var(--light-gray-30);
--hr-ink: var(--dark-gray-50);
--button-surface: var(--light-gray-10-a12);
--button-ink: var(--default-ink);
--button-surface-hover: var(--light-gray-10-a12);
--button-active-surface: var(--light-gray-70);
--button-important-surface: var(--dark-gray-30);
--button-important-surface-hover: var(--light-gray-60);
--button-disabled-filter: opacity(38%);
--button-disabled-surface: var(--dark-gray-50);
--button-disabled-ink: var(--light-gray-30-a50);
--button-preferred-surface: var(--dark-gray-50);
--button-preferred-ink: var(--light-gray-70);
--checkbox-size: calc(var(--font-size) + 2px);
--checkbox-ink: var(--default-ink);
--checkbox-checked-ink: #bb86fc;
/*--select-surface:*/
--bg-transient-notice: var(--dark-gray-50);
--dashboard-bar-shadow: 0px 0px 0px 1px var(--default-ink-a4);
--dashboard-tab-active-ink: #bb86fc;
--dashboard-tab-surface-hover: var(--default-surface-hover);
--fg-icon-info-lvl-0-dimmed: #888;
--fg-icon-info-lvl-0: inherit;
--fg-icon-info-lvl-1-dimmed: hsla(258, 57%, 35%, 1);
--fg-icon-info-lvl-1: hsla(258, 66%, 48%, 1);
--info-lvl-2-ink: var(--yellow-50);
--info-lvl-2-ink-hover: var(--yellow-60);
--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%, 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: var(--dark-gray-50);
--fg-tooltip: var(--light-gray-30);
--bg-popup-cell-1: var(--dark-gray-50);
--popup-power-disabled-ink: var(--light-gray-60);
--popup-power-ink-hover: var(--dark-gray-30);
--bg-popup-cell-2: var(--dark-gray-50);
--bg-popup-cell-label-filter: opacity(40%);
--fg-popup-cell-cname: hsla(0, 0%, 53%, 0.3);
--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);
--popup-icon-x-ink: #e22850;
--elevation-down-surface: black;
--elevation-down1-opacity: 16%;
--elevation-down2-opacity: 32%;
--elevation-up-surface: white;
--elevation-up1-opacity: 12%;
--elevation-up2-opacity: 24%;
--ink-rgb: var(--gray-95);
--ink-0: white;
--surface-0: black;
--surface-1: rgb(var(--gray-10));
--surface-2: rgb(var(--gray-20));
--surface-3: rgb(var(--gray-30));
--surface-4: rgb(var(--gray-40));
--border-1: rgb(var(--gray-35));
--border-2: rgb(var(--gray-40));
--border-3: rgb(var(--gray-45));
--border-4: rgb(var(--gray-50));
--accent-ink-1: rgb(var(--ink-80));
--accent-surface-1: rgb(var(--primary-color-70));
--accent-ink-1: var(--surface-1);
--accent-ink-3: var(--ink-1);
--accent-surface-1: rgb(var(--primary-color-70));
--accent-surface-3: rgb(var(--primary-color-30));
/* popup panel */
--popup-cell-label-filter: opacity(40%);
--popup-cell-cname-ink: hsla(0, 0%, 53%, 0.3);
--popup-cell-allow-surface: rgb(var(--popup-cell-allow-surface-rgb) / 65%);
--popup-cell-noop-surface: rgb(var(--popup-cell-noop-surface-rgb) / 65%);
--popup-cell-block-surface: rgb(var(--popup-cell-block-surface-rgb) / 65%);
--popup-cell-label-mixed-surface: hsla(45, 100%, 38%, 1);
--popup-icon-x-ink: rgb(var(--red-50));
--popup-power-ink-rgb: var(--primary-color-60);
--popup-ruleset-tool-shadow: -surface-0;
/* cloud widget */
--cloud-widget-surface: var(--dark-gray-80);
--cloud-total-used-surface: rgb(var(--violet-20) / 25%);
--cloud-used-surface: rgb(var(--violet-20));
/* codemirror */
--cm-merge-copy-ink: rgb(var(--blue-30));
--cm-foldmarker-ink: rgb(var(--blue-20));
--cm-matchingbracket: rgb(var(--green-30) / 50%);
--cm-merge-l-chunk-border: rgb(var(--blue-70));
--cm-merge-l-chunk-surface: rgb(var(--blue-90));
--cm-negative: #f44;
--cm-positive: #0c0;
--cm-searching-ink: var(--surface-0);
--cm-searching-surface: rgb(var(--yellow-20));
/* Need to set colors in forms.css for moz-field stuffz
-moz-FieldText: #888888 !important; change from these names to either HEX value or variables. default-ink
-moz-Field: #15141a !important; var would be var(--dark-gray-90) hex value might be easiest though.
/* TO DO
1. Epicker window box color Variables needed;
#ublock0-epicker aside
background-color: var(--dark-gray-90)
outer border: var(--dark-gray-90)
inner order: var (
color: #999999a0
html#ublock0-epicker, #ublock0-epicker body
background: transparent !important;
color: #777 !important;
/* syntax highlight: static filtering */
--sf-comment-ink: var(--ink-3);
--sf-def-ink: rgb(var(--blue-20));
--sf-error-ink: rgb(var(--red-40));
--sf-error-surface: rgb(var(--red-40) / 40%);
--sf-keyword-ink: rgb(var(--purple-10));
--sf-notice-ink: var(--border-2);
--sf-tag-ink: rgb(var(--green-50));
--sf-value-ink: rgb(var(--orange-20));
--sf-variable-ink: var(--ink-1);
--sf-warning-ink: rgb(var(--yellow-50));
2. CodeMirror (my filters and Whitelist) ADVANCED SETTINGS (background and color need variables)
.CodeMirror background: (currenty set to white) need a var
my Rules tab
codemirror panes CodeMirror-merge-pane CodeMirror-merge-left
CodeMirror-merge-pane CodeMirror-merge-editor CodeMirror-merge-pane-rightmost
***** file used is codemirror.css *********
/* syntax highlight: dynamic filtering */
--df-noop-ink: var(--ink-3);
3. #cloudWidget background (linked to img) background is hsl - would be better if we had a background color instead of hsl.
***** file used is cloud-ui.css ********
4. Logger UI screen. .permatoolbar, modalOverlayContainer : background-color;
headers background-color, color border-color
#netFilteringDialog > div.panes > .dynamic .entry background-color: border-bottom: ;
#netFilteringDialog > div.panes > .dynamic .entry > .action > .allow .noop .block
background-color.
#modalOverlayClose stoke: background-color
****** file used is logger-ui.css *******
*//*
5. Seperator bar - element/selector is hr in common.css a variable is assigned. popup-fenix.css
border-top - assigned HEX of #e3e2e3 variable should be assinged like in common.css
var(--hor-separator-color)
6. .rulesetTools border color needs a variable
**** popup-fenix.css *****
*/
/* logger */
--logger-allowed-surface: #24a71960;
--logger-blocked-surface: #ff4c2b60;
--logger-modified-surface: #663efd60;
--logger-redirected-surface: rgb(var(--yellow-5) / 40%);
}
:root.dark.colorBlind {
}
:root.classic:not(.dark) {
--notice-ink: rgb(var(--ink-80));
--notice-surface: rgb(var(--yellow-5));
--popup-power-ink-rgb: 0 110 254;
--popup-ruleset-tool-ink: var(--ink-1);
--popup-ruleset-tool-surface: rgb(var(--yellow-5) / 50%);
--popup-ruleset-tool-surface-hover: rgb(var(--yellow-5) / 75%);
--popup-ruleset-tool-shadow: rgb(var(--gray-85));
}

View File

@ -23,14 +23,14 @@
--><span class="tabButton" data-pane="about.html" data-i18n="aboutPageName"></span><!--
--><span class="tabButton" data-pane="no-dashboard.html"></span>
</div>
<div id="unsavedWarning">
<section id="unsavedWarning" class="notice">
<div>
<span data-i18n="dashboardUnsavedWarning"></span>&emsp;
<button data-i18n="dashboardUnsavedWarningStay"></button>&emsp;
<button data-i18n="dashboardUnsavedWarningIgnore"></button>
<button type="button" data-i18n="dashboardUnsavedWarningStay">_<span class="hover"></span></button>&ensp;
<button type="button" data-i18n="dashboardUnsavedWarningIgnore">_<span class="hover"></span></button>
</div>
<div></div>
</div>
</section>
<iframe id="iframe" src=""></iframe>

View File

@ -22,12 +22,12 @@
<div class="body">
<p>
<button id="console-clear" class="iconifiable" type="button"><span class="fa-icon">trash-o</span></button>
<button id="console-fold" class="iconifiable" type="button"><span class="fa-icon">double-angle-up</span></button>
<button id="console-unfold" class="iconifiable" type="button"><span class="fa-icon fa-icon-vflipped">double-angle-up</span></button>
<button id="snfe-dump" type="button">SNFE: Dump</button>
<button id="snfe-benchmark" type="button" disabled>SNFE: Benchmark</button>
<button id="cfe-dump" type="button">CFE: Dump</button>
<button id="console-clear" class="iconified" type="button"><span class="fa-icon">trash-o</span><span class="hover"></span></button>
<button id="console-fold" class="iconified" type="button"><span class="fa-icon">double-angle-up</span><span class="hover"></span></button>
<button id="console-unfold" class="iconified" type="button"><span class="fa-icon fa-icon-vflipped">double-angle-up</span><span class="hover"></span></button>
<button id="snfe-dump" type="button">SNFE: Dump<span class="hover"></span></button>
<button id="snfe-benchmark" type="button" disabled>SNFE: Benchmark<span class="hover"></span></button>
<button id="cfe-dump" type="button">CFE: Dump<span class="hover"></span></button>
</div>
<div id="console" class="codeMirrorContainer"></div>

View File

@ -27,15 +27,15 @@
</div>
<div>
<button id="back" class="preferred" data-i18n="docblockedBack" type="button"></button>
<button id="bye" class="preferred" data-i18n="docblockedClose" type="button"></button>
<button id="back" class="preferred" data-i18n="docblockedBack" type="button">_<span class="hover"></span></button>
<button id="bye" class="preferred" data-i18n="docblockedClose" type="button">_<span class="hover"></span></button>
</div>
<div>
<p id="proceed"></p>
<p class="proceedButtons">
<button id="proceedTemporary" data-i18n="docblockedDisableTemporary" type="button"></button>
<button id="proceedPermanent" data-i18n="docblockedDisablePermanent" type="button"></button>
<button id="proceedTemporary" data-i18n="docblockedDisableTemporary" type="button">_<span class="hover"></span></button>
<button id="proceedPermanent" data-i18n="docblockedDisablePermanent" type="button">_<span class="hover"></span></button>
</p>
</div>

View File

@ -25,21 +25,21 @@
<div class="tools">
<div class="ruleActions">
<div class="fieldset-header" data-i18n="rulesPermanentHeader"></div>
<button type="button" class="iconifiable" id="exportButton"><span class="fa-icon">upload-alt</span><span data-i18n="rulesExport"></span></button>
<button type="button" class="iconifiable" id="revertButton"><span class="fa-icon">arrow-right</span><span data-i18n="rulesRevert"></span></button>
<button type="button" class="iconified" id="exportButton"><span class="fa-icon">upload-alt</span><span data-i18n="rulesExport">_</span><span class="hover"></span></button>
<button type="button" class="iconified" id="revertButton"><span class="fa-icon">arrow-right</span><span data-i18n="rulesRevert">_</span><span class="hover"></span></button>
</div>
<div class="ruleActions">
<div class="fieldset-header" data-i18n="rulesTemporaryHeader"></div>
<button type="button" class="iconifiable" id="commitButton"><span class="fa-icon fa-icon-hflipped">arrow-right</span><span data-i18n="rulesCommit"></span></button>
<button type="button" class="iconifiable" id="importButton"><span class="fa-icon">download-alt</span><span data-i18n="rulesImport"></span></button>
<button type="button" class="iconifiable important disabled" id="editSaveButton"><span class="fa-icon">save</span><span data-i18n="rulesEditSave"></span></button>
</div>
<div id="ruleFilter">
<span><span class="fa-icon">filter</span>&nbsp;<input type="search" size="16"></span>&emsp;<span data-i18n="rulesSort"></span>&nbsp;<select><option value="0" selected data-i18n="rulesSortByType"><option value="1" data-i18n="rulesSortBySource"><option value="2" data-i18n="rulesSortByDestination"></select>&emsp;<span id="diffCollapse" class="fa-icon">double-angle-up</span>
<button type="button" class="iconified" id="commitButton"><span class="fa-icon fa-icon-hflipped">arrow-right</span><span data-i18n="rulesCommit">_</span><span class="hover"></span></button>
<button type="button" class="iconified" id="importButton"><span class="fa-icon">download-alt</span><span data-i18n="rulesImport">_</span><span class="hover"></span></button>
<button type="button" class="iconified preferred disabled" id="editSaveButton"><span class="fa-icon">save</span><span data-i18n="rulesEditSave">_</span><span class="hover"></span></button>
</div>
</div>
</div>
</div>
<div id="ruleFilter">
<span><span class="fa-icon">filter</span>&nbsp;<input type="search" size="16"></span>&emsp;<span data-i18n="rulesSort"></span>&nbsp;<select><option value="0" selected data-i18n="rulesSortByType"><option value="1" data-i18n="rulesSortBySource"><option value="2" data-i18n="rulesSortByDestination"></select>&emsp;<span id="diffCollapse" class="fa-icon">double-angle-up</span>
</div>
<div class="codeMirrorContainer codeMirrorMergeContainer"></div>
<div id="templates" style="display: none;">

View File

@ -66,11 +66,11 @@ CodeMirror.defineMode('ubo-static-filtering', function() {
const match = rePreparseIfDirective.exec(string);
if ( match === null ) {
stream.skipToEnd();
return 'variable strong';
return 'directive';
}
if ( pos < match[1].length ) {
stream.pos += match[1].length;
return 'variable strong';
return 'directive';
}
stream.skipToEnd();
if ( match[1].endsWith(' ') === false ) {

View File

@ -537,10 +537,15 @@ const onTextChanged = (( ) => {
cleanEditToken = mergeView.editor().changeGeneration();
isClean = true;
}
const isDirty = mergeView.leftChunks().length !== 0;
document.body.classList.toggle('editing', isClean === false);
diff.classList.toggle('dirty', mergeView.leftChunks().length !== 0);
document.getElementById('editSaveButton')
.classList.toggle('disabled', isClean);
diff.classList.toggle('dirty', isDirty);
uDom('#editSaveButton')
.toggleClass('disabled', isClean);
uDom('#exportButton,#importButton')
.toggleClass('disabled', isClean === false);
uDom('#revertButton,#commitButton')
.toggleClass('disabled', isClean === false || isDirty === false);
const input = document.querySelector('#ruleFilter input');
if ( isClean ) {
input.removeAttribute('disabled');

View File

@ -96,7 +96,7 @@ const safeTextToDOM = function(text, parent) {
// Fast path (most common).
if ( text.indexOf('<') === -1 ) {
const toInsert = safeTextToTextNode(text);
let toReplace = parent.childElementCount !== 0
let toReplace = parent.childCount !== 0
? parent.firstChild
: null;
while ( toReplace !== null ) {

View File

@ -222,9 +222,7 @@ const onMessage = function(request, sender, callback) {
case 'uiStyles':
response = {
uiStyles: µb.hiddenSettings.uiStyles,
uiTheme: vAPI.webextFlavor.soup.has('devbuild')
? µb.hiddenSettings.uiTheme
: 'unset',
uiTheme: µb.hiddenSettings.uiTheme,
};
break;

View File

@ -98,11 +98,13 @@ DOMListFactory.nodeFromSelector = function(selector) {
vAPI.messaging.send('uDom', { what: 'uiStyles' }).then(response => {
if ( typeof response !== 'object' || response === null ) { return; }
if ( response.uiTheme !== 'unset' ) {
if ( response.uiTheme === 'light' ) {
if ( /\blight\b/.test(response.uiTheme) ) {
root.classList.remove('dark');
} else if ( response.uiTheme === 'dark' ) {
root.classList.add('dark');
}
if ( /\bdark\b/.test(response.uiTheme) ) {
root.classList.remove('dark');
}
root.classList.add(...response.uiTheme.split(/\s+/));
}
if ( response.uiStyles !== 'unset' ) {
document.body.style.cssText = response.uiStyles;
@ -552,18 +554,11 @@ DOMList.prototype.text = function(text) {
/******************************************************************************/
const toggleClass = function(node, className, targetState) {
var tokenList = node.classList;
if ( tokenList instanceof DOMTokenList === false ) {
return;
}
var currentState = tokenList.contains(className);
var newState = targetState;
if ( newState === undefined ) {
newState = !currentState;
}
if ( newState === currentState ) {
return;
}
const tokenList = node.classList;
if ( tokenList instanceof DOMTokenList === false ) { return; }
const currentState = tokenList.contains(className);
const newState = targetState !== undefined ? targetState : !currentState;
if ( newState === currentState ) { return; }
tokenList.toggle(className, newState);
};
@ -573,7 +568,7 @@ DOMList.prototype.hasClass = function(className) {
if ( !this.nodes.length ) {
return false;
}
var tokenList = this.nodes[0].classList;
const tokenList = this.nodes[0].classList;
return tokenList instanceof DOMTokenList &&
tokenList.contains(className);
};
@ -587,9 +582,8 @@ DOMList.prototype.removeClass = function(className) {
if ( className !== undefined ) {
return this.toggleClass(className, false);
}
var i = this.nodes.length;
while ( i-- ) {
this.nodes[i].className = '';
for ( const node of this.nodes ) {
node.className = '';
}
return this;
};
@ -600,9 +594,8 @@ DOMList.prototype.toggleClass = function(className, targetState) {
if ( className.indexOf(' ') !== -1 ) {
return this.toggleClasses(className, targetState);
}
var i = this.nodes.length;
while ( i-- ) {
toggleClass(this.nodes[i], className, targetState);
for ( const node of this.nodes ) {
toggleClass(node, className, targetState);
}
return this;
};
@ -610,14 +603,10 @@ DOMList.prototype.toggleClass = function(className, targetState) {
/******************************************************************************/
DOMList.prototype.toggleClasses = function(classNames, targetState) {
var tokens = classNames.split(/\s+/);
var i = this.nodes.length;
var node, j;
while ( i-- ) {
node = this.nodes[i];
j = tokens.length;
while ( j-- ) {
toggleClass(node, tokens[j], targetState);
const tokens = classNames.split(/\s+/);
for ( const node of this.nodes ) {
for ( const token of tokens ) {
toggleClass(node, token, targetState);
}
}
return this;

View File

@ -21,9 +21,9 @@
<option value="-1" data-i18n="logBehindTheScene">
<option value="_" data-i18n="loggerCurrentTab">
</select>
<span id="refresh" class="button fa-icon disabled needdom" data-i18n-title="loggerReloadTip">refresh</span>
<span id="showdom" class="button fa-icon disabled needdom" data-i18n-title="loggerDomInspectorTip">code</span>
<span id="showpopup" class="button ubo-icon disabled needdom" data-i18n-title="loggerPopupPanelTip"><svg><use href="/img/ublock-defs.svg#ubo-solid"></use></svg></span>
<button id="refresh" class="iconified notext disabled needdom" data-i18n-title="loggerReloadTip" type="button"><span class="fa-icon">refresh</span><span class="hover"></span></button>
<button id="showdom" class="iconified notext disabled needdom" data-i18n-title="loggerDomInspectorTip" type="button"><span class="fa-icon">code</span><span class="hover"></span></button>
<button id="showpopup" class="iconified notext disabled needdom" data-i18n-title="loggerPopupPanelTip" type="button"><span class="fa-icon"><svg><use href="/img/ublock-defs.svg#ubo-solid"></use></svg></span><span class="hover"></span></button>
</div>
<div>
<a id="info" class="button fa-icon" href="https://github.com/gorhill/uBlock/wiki/The-logger" target="_blank" data-i18n-title="loggerInfoTip">info-circle</a>
@ -34,11 +34,11 @@
<div id="domInspector" class="inspector hCompact">
<div class="permatoolbar">
<div>
<span class="button fa-icon vCompactToggler">double-angle-up</span>
<span class="button fa-icon hCompactToggler">double-angle-left</span>
<button class="iconified notext vCompactToggler"><span class="fa-icon">double-angle-up</span><span class="hover"></span></button>
<button class="iconified notext hCompactToggler"><span class="fa-icon">double-angle-left</span><span class="hover"></span></button>
<!-- <span class="button fa highlightMode" style="display: none">&#xf042;</span> -->
<span class="button fa-icon revert disabled">eraser</span>
<span class="button fa-icon commit disabled">floppy-o</span>
<button class="iconified notext revert disabled"><span class="fa-icon">eraser</span><span class="hover"></span></button>
<button class="iconified notext commit disabled"><span class="fa-icon">floppy-o</span><span class="hover"></span></button>
</div>
</div>
<div class="vscrollable">
@ -48,12 +48,12 @@
<div id="netInspector" class="inspector f">
<div class="permatoolbar">
<div>
<span class="button fa-icon vCompactToggler">double-angle-up</span>
<span id="clean" class="button fa-icon disabled">times</span>
<span id="clear" class="button fa-icon disabled" data-i18n-title="loggerClearTip">eraser</span>
<span id="pause"><span class="button fa-icon" data-i18n-title="loggerPauseTip">pause-circle-o</span><span class="button fa-icon" data-i18n-title="loggerUnpauseTip">play-circle-o</span></span>
<button class="iconified notext vCompactToggler"><span class="fa-icon">double-angle-up</span><span class="hover"></span></button>
<button id="clean" class="iconified notext disabled"><span class="fa-icon">times</span><span class="hover"></span></button>
<button id="clear" class="iconified notext disabled" data-i18n-title="loggerClearTip"><span class="fa-icon">eraser</span><span class="hover"></span></button>
<button id="pause" class="iconified notext"><span class="fa-icon" data-i18n-title="loggerPauseTip">pause-circle-o</span><span class="fa-icon" data-i18n-title="loggerUnpauseTip">play-circle-o</span><span class="hover"></span></button>
<span id="filterExprGroup">
<span id="filterButton" class="button fa-icon" data-i18n-title="loggerRowFiltererButtonTip">filter</span>
<button id="filterButton" class="iconified notext" data-i18n-title="loggerRowFiltererButtonTip"><span class="fa-icon">filter</span><span class="hover"></span></button>
<span id="filterInput">
<input type="search" placeholder="logFilterPrompt">
<span id="filterExprButton" class="button fa-icon expanded" data-i18n-title="loggerRowFiltererBuiltinTip">angle-up</span>
@ -72,9 +72,9 @@
</span>
</div>
<div>
<span id="loggerStats" class="button fa-icon" style="display: none;">bar-chart</span>
<span id="loggerExport" class="button fa-icon">clipboard</span>
<span id="loggerSettings" class="button fa-icon">cog</span>
<button id="loggerStats" class="iconified notext" style="display: none;"><span class="fa-icon">bar-chart</span><span class="hover"></span></button>
<button id="loggerExport" class="iconified notext"><span class="fa-icon">clipboard</span><span class="hover"></span></button>
<button id="loggerSettings" class="iconified notext"><span class="fa-icon">cog</span><span class="hover"></span></button>
</div>
</div>
<div class="vscrollable">
@ -141,8 +141,8 @@
</div>
<div class="pane static" data-pane="static">
<div></div>
<div><textarea class="staticFilter" spellcheck="false" value=""></textarea>
<button id="createStaticFilter" class="important" type="button" data-i18n="pickerCreate"></button>
<div><textarea class="staticFilter" spellcheck="false"></textarea>
<button id="createStaticFilter" class="important" type="button" data-i18n="pickerCreate">_<span class="hover"></span></button>
</div>
</div>
</div>
@ -159,7 +159,7 @@
</div>
<div id="cosmeticFilteringDialog" class="modalDialog">
<textarea class="cosmeticFilters" value=""></textarea>
<textarea class="cosmeticFilters"></textarea>
<button id="createCosmeticFilters" class="important" type="button" data-i18n="pickerCreate"></button>
</div>

View File

@ -25,7 +25,7 @@
<div class="fieldset">
<div class="fieldset-header" data-i18n="3pGroupPrivacy"></div>
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="prefetchingDisabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsPrefetchingDisabledPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#disable-pre-fetching" target="_blank">info-circle</a></span></label></div>
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="hyperlinkAuditingDisabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsHyperlinkAuditingDisabledPrompt"></span>&nbsp;<a class="fa-icon info important" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#disable-hyperlink-auditing" target="_blank">info-circle</a></span></label></div>
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="hyperlinkAuditingDisabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsHyperlinkAuditingDisabledPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#disable-hyperlink-auditing" target="_blank">info-circle</a></span></label></div>
<div class="li" style="display:none"><label><span class="input checkbox"><input type="checkbox" data-setting-name="webrtcIPAddressHidden" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsWebRTCIPAddressHiddenPrompt"></span>&nbsp;<a class="fa-icon info important" href="https://github.com/gorhill/uBlock/wiki/Prevent-WebRTC-from-leaking-local-IP-address" target="_blank">info-circle</a></span></label></div>
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="noCSPReports" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsNoCSPReportsPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#block-csp-reports" target="_blank">info-circle</a></span></label></div>
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="cnameUncloakEnabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsUncloakCnamePrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#uncloak-canonical-names" target="_blank">info-circle</a></span></label></div>
@ -47,9 +47,9 @@
<div class="li" id="settingsLastRestorePrompt" style="display:none;"></div>
</div>
<div>
<button type="button" id="export" data-i18n="aboutBackupDataButton"></button>
<button type="button" id="import" data-i18n="aboutRestoreDataButton"></button>
<button type="button" id="reset" data-i18n="aboutResetDataButton"></button>
<button type="button" id="export" data-i18n="aboutBackupDataButton">_<span class="hover"></span></button>
<button type="button" id="import" data-i18n="aboutRestoreDataButton">_<span class="hover"></span></button>
<button type="button" id="reset" data-i18n="aboutResetDataButton">_<span class="hover"></span></button>
</div>
</div>

View File

@ -23,7 +23,7 @@
<div>
<p data-i18n="supportS1P1">
</div>
<button type="button" data-url="https://github.com/gorhill/uBlock/wiki" data-i18n="supportOpenButton"></button>
<button type="button" data-url="https://github.com/gorhill/uBlock/wiki" data-i18n="supportOpenButton">_<span class="hover"></span></button>
</div>
<hr>
</div>
@ -33,7 +33,7 @@
<div>
<p data-i18n="supportS2P1">
</div>
<button type="button" data-url="https://old.reddit.com/r/uBlockOrigin/" data-i18n="supportOpenButton"></button>
<button type="button" data-url="https://old.reddit.com/r/uBlockOrigin/" data-i18n="supportOpenButton">_<span class="hover"></span></button>
</div>
<hr>
</div>
@ -45,7 +45,7 @@
<p data-i18n="supportS3P2">
<p data-i18n="supportS3P3">
</div>
<button id="filterReport" type="button" data-url="https://github.com/uBlockOrigin/uAssets/issues/new?template=report_from_ubo.yml" data-i18n="supportOpenButton"></button>
<button id="filterReport" type="button" data-url="https://github.com/uBlockOrigin/uAssets/issues/new?template=report_from_ubo.yml" data-i18n="supportOpenButton">_<span class="hover"></span></button>
</div>
<hr>
</div>
@ -55,7 +55,7 @@
<div>
<p data-i18n="supportS4P1">
</div>
<button id="bugReport" type="button" data-url="https://github.com/uBlockOrigin/uBlock-issues/issues/new?template=bug_report_from_ubo.yml" data-i18n="supportOpenButton"></button>
<button id="bugReport" type="button" data-url="https://github.com/uBlockOrigin/uBlock-issues/issues/new?template=bug_report_from_ubo.yml" data-i18n="supportOpenButton">_<span class="hover"></span></button>
</div>
<hr>
</div>
@ -66,7 +66,7 @@
<p data-i18n="supportS3P1">
<p data-i18n="supportS6P1S1">
</div>
<button type="button" data-i18n="supportFindSpecificButton"></button>
<button type="button" data-i18n="supportFindSpecificButton">_<span class="hover"></span></button>
</div>
<div class="supportEntry">
<div>
@ -89,7 +89,7 @@
<p>
<label><span class="input checkbox"><input id="isNSFW" type="checkbox"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="supportS6Checkbox1"></span></label>
</div>
<button type="button" data-i18n="supportReportSpecificButton"></button>
<button type="button" data-i18n="supportReportSpecificButton">_<span class="hover"></span></button>
</div>
<hr>
</div>
@ -97,8 +97,8 @@
<h3 data-i18n="supportS5H"></h3>
<p data-i18n="supportS5P1">
<p>
<button id="selectAllButton" type="button" data-i18n="genericSelectAll"></button>
<button id="moreButton" type="button" data-i18n="popupMoreButton_v2" data-url="/devtools.html"></button>
<button id="selectAllButton" type="button" data-i18n="genericSelectAll">_<span class="hover"></span></button>
<button id="moreButton" type="button" data-i18n="popupMoreButton_v2" data-url="/devtools.html">_<span class="hover"></span></button>
<div id="supportData" class="codeMirrorContainer"></div>
</div>
</div>

View File

@ -8,6 +8,7 @@
<link rel="stylesheet" href="../lib/codemirror/addon/hint/show-hint.css">
<link rel="stylesheet" href="../css/themes/default.css">
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/epicker-ui.css">
<link rel="stylesheet" href="../css/codemirror.css">
</head>
@ -33,13 +34,13 @@
</div>
<div id="toolbar">
<div>
<button id="preview" type="button" data-i18n="pickerPreview"></button>
<button id="preview" type="button" data-i18n="pickerPreview">_<span class="hover"></span></button>
</div>
<div id="move"></div>
<div>
<button id="create" type="button" disabled data-i18n="pickerCreate"></button>
<button id="pick" type="button" data-i18n="pickerPick"></button>
<button id="quit" type="button" data-i18n="pickerQuit"></button>
<button id="create" type="button" class="preferred" disabled data-i18n="pickerCreate">_<span class="hover"></span></button>
<button id="pick" type="button" data-i18n="pickerPick">_<span class="hover"></span></button>
<button id="quit" type="button" data-i18n="pickerQuit">_<span class="hover"></span></button>
</div>
</div>
</section>

View File

@ -25,11 +25,11 @@
<p class="vverbose"><span data-i18n="whitelistPrompt"></span> <a class="fa-icon info important" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Trusted-sites">info-circle</a>
</p>
<p>
<button id="whitelistApply" class="important iconifiable" type="button" disabled><span class="fa-icon">check</span><span data-i18n="whitelistApply"></span></button>
<button id="whitelistRevert" class="iconifiable" type="button" disabled><span class="fa-icon">undo</span><span data-i18n="genericRevert"></span></button>
<button id="whitelistApply" class="preferred iconified" type="button" disabled><span class="fa-icon">check</span><span data-i18n="whitelistApply">_</span><span class="hover"></span></button>
<button id="whitelistRevert" class="iconified" type="button" disabled><span class="fa-icon">undo</span><span data-i18n="genericRevert">_</span><span class="hover"></span></button>
&emsp;&emsp;
<button id="importWhitelistFromFile" class="iconifiable" type="button"><span class="fa-icon">download-alt</span><span data-i18n="whitelistImport"></span></button>
<button id="exportWhitelistToFile" class="iconifiable" type="button"><span class="fa-icon">upload-alt</span><span data-i18n="whitelistExport"></span></button>
<button id="importWhitelistFromFile" class="iconified" type="button"><span class="fa-icon">download-alt</span><span data-i18n="whitelistImport">_</span><span class="hover"></span></button>
<button id="exportWhitelistToFile" class="iconified" type="button"><span class="fa-icon">upload-alt</span><span data-i18n="whitelistExport">_</span><span class="hover"></span></button>
</p>
</div>
<div id="whitelist" class="codeMirrorContainer"></div>