Mirrors/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2024-07-08 04:49:12 +02:00
Code Issues Releases Wiki Activity

Work toward bringing dark theme closer to a stable release

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/1p-filters.html
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 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> <p>
<button id="userFiltersApply" class="important iconifiable" type="button" disabled><span class="fa-icon">check</span><span data-i18n="1pApplyChanges"></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="iconifiable" type="button" disabled><span class="fa-icon">undo</span><span data-i18n="genericRevert"></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; &ensp;
<button id="importUserFiltersFromFile" class="iconifiable" type="button"><span class="fa-icon">download-alt</span><span data-i18n="1pImport"></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="iconifiable" type="button"><span class="fa-icon">upload-alt</span><span data-i18n="1pExport"></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> </p>
</div> </div>
<div id="userFilters" class="codeMirrorContainer codeMirrorBreakAll" spellcheck="false"></div> <div id="userFilters" class="codeMirrorContainer codeMirrorBreakAll" spellcheck="false"></div>

12
src/3p-filters.html
View File

@ -18,24 +18,24 @@
<div id="cloudWidget" class="hide" data-cloud-entry="tpFiltersPane"></div> <div id="cloudWidget" class="hide" data-cloud-entry="tpFiltersPane"></div>
<div id="actions"> <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="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="important disabled iconifiable" type="button" data-i18n-title="3pUpdateNow"><span class="fa-icon">refresh</span><span data-i18n="3pUpdateNow"></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 iconifiable" type="button" data-i18n-title="3pPurgeAll"><span class="fa-icon">clock-o</span><span data-i18n="3pPurgeAll"></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> <div>
<div class="li"> <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> <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>
<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"> <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> <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>
<div class="li"> <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> <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>
<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>
<div> <div>

2
src/advanced-settings.html
View File

@ -20,7 +20,7 @@
<div class="body"> <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><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> <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>
<div id="advancedSettings" class="codeMirrorContainer"></div> <div id="advancedSettings" class="codeMirrorContainer"></div>

6
src/asset-viewer.html
View File

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

8
src/cloud-ui.html
View File

@ -7,14 +7,14 @@
<body> <body>
<div id="cloudToolbar"> <div id="cloudToolbar">
<div> <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> <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="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" type="button" data-i18n-title="cloudPullAndMerge" disabled><span class="fa-icon">cloud-download</span><span class="fa-icon">plus</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>
<div id="cloudCog" class="fa-icon">cog</div> <div id="cloudCog" class="fa-icon">cog</div>
<div id="cloudOptions"> <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> </div>
<div id="cloudError"></div> <div id="cloudError"></div>

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

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

2
src/css/advanced-settings.css
View File

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

8
src/css/asset-viewer.css
View File

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

1
src/css/click2load.css
View File

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

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

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

92
src/css/codemirror.css
View File

@ -5,23 +5,59 @@
position: relative; position: relative;
} }
.CodeMirror { .CodeMirror {
background-color: var(--default-surface); background-color: var(--surface-0);
box-sizing: border-box; box-sizing: border-box;
color: var(--default-ink); color: var(--ink-1);
flex-grow: 1; flex-grow: 1;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.CodeMirror-lines { .CodeMirror-activeline-background {
padding-bottom: 6rem; 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 { .CodeMirror-gutters {
background-color: var(--cm-gutter-surface); background-color: var(--cm-gutter-surface);
border-color: var(--cm-gutter-border); 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 { .CodeMirror-linenumber {
color: var(--cm-gutter-ink); 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 */ /* For when panels are used */
.codeMirrorContainer > div:not([class^="CodeMirror"]) { .codeMirrorContainer > div:not([class^="CodeMirror"]) {
@ -34,18 +70,6 @@
word-break: break-all; 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 { .cm-s-default .cm-comment {
color: var(--sf-comment-ink); color: var(--sf-comment-ink);
} }
@ -74,6 +98,12 @@
.cm-s-default .cm-keyword { .cm-s-default .cm-keyword {
color: var(--sf-keyword-ink); 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 { .cm-s-default .cm-notice {
text-underline-position: under; text-underline-position: under;
text-decoration-color: var(--sf-notice-ink); text-decoration-color: var(--sf-notice-ink);
@ -112,15 +142,6 @@
color: var(--sf-keyword-ink); 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 { .cm-search-widget {
align-items: center; align-items: center;
background-color: var(--cm-gutter-surface); background-color: var(--cm-gutter-surface);
@ -170,14 +191,26 @@ div.CodeMirror span.CodeMirror-matchingbracket {
.cm-search-widget .sourceURL[href=""] { .cm-search-widget .sourceURL[href=""] {
display: none; display: none;
} }
.cm-searching { .cm-searching.cm-overlay {
background-color: var(--cm-searching-surface) !important; background-color: var(--cm-searching-surface);
border: 1px dotted black; border: 0;
color: var(--cm-searching-ink);
} }
.CodeMirror-merge { .CodeMirror-merge {
border-color: var(--cm-gutter-border); 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 { .CodeMirror-merge-l-deleted {
background-image: none; background-image: none;
} }
@ -191,7 +224,8 @@ div.CodeMirror span.CodeMirror-matchingbracket {
vertical-align: top; vertical-align: top;
} }
.CodeMirror-merge-spacer { .CodeMirror-merge-spacer {
background-color: var(--cm-gutter-surface); background-color: var(--surface-0);
opacity: 40%;
} }
.CodeMirror-hints { .CodeMirror-hints {

126
src/css/common.css
View File

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

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

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

17
src/css/dashboard.css
View File

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

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

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

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

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

33
src/css/epicker-ui.css
View File

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

2
src/css/fa-icons.css
View File

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

6
src/css/logger-ui-inspector.css
View File

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

103
src/css/logger-ui.css
View File

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

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

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

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

1
src/css/support.css
View File

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

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

@ -4,64 +4,127 @@
https://protocol.mozilla.org/ https://protocol.mozilla.org/
https://material.io/ https://material.io/
*/
/**
Color names from: Color names from:
https://protocol.mozilla.org/fundamentals/color.html https://protocol.mozilla.org/fundamentals/color.html
Tools:
Lightness validator: https://www.hsluv.org/
Contrast validator: https://bernaferrari.github.io/color-studio/#/
*/ */
:root { :root {
--blue-10: #80ebff; --blue-5: 170 242 255;
--blue-40: #0090ed; --blue-10: 128 235 255;
--blue-50: #0060df; --blue-20: 0 221 255;
--blue-60: #0250bb; --blue-30: 0 179 244;
--dark-gray-10: #52525e; --blue-40: 0 144 237;
--dark-gray-30: #42414d; --blue-50: 0 96 223;
--dark-gray-40: #3a3944; --blue-60: 2 80 187;
--dark-gray-50: #32313c; --blue-70: 5 64 150;
--dark-gray-70: #23222b; --blue-80: 7 48 114;
--dark-gray-80: #1c1b22; --blue-90: 9 32 77;
--dark-gray-90: #15141a; --dark-gray-10: 82 82 94;
--ink-20: #312a65; --dark-gray-20: 74 74 85;
--ink-50: #291d4f; --dark-gray-30: 66 65 77;
--ink-80: #20123a; --dark-gray-40: 58 57 68;
--ink-80-a4: #20123a0a; --dark-gray-50: 50 49 60;
--ink-80-a40: #20123a66; --dark-gray-60: 43 42 51;
--ink-80-a50: #20123a80; --dark-gray-70: 35 34 43;
--ink-90: #1d1133; --dark-gray-80: 28 27 34;
--light-gray-10: #f9f9fb; --dark-gray-90: 21 20 26;
--light-gray-10-a4: #f9f9fb0a; --green-30: 136 255 209;
--light-gray-10-a12: #f9f9fb1f; --green-40: 84 255 189;
--light-gray-10-a16: #f9f9fb29; --green-50: 63 225 176;
--light-gray-20: #f0f0f4; --green-60: 42 195 162;
--light-gray-25: #e8e8ed; --green-70: 0 135 135;
--light-gray-30: #e0e0e6; --green-80: 0 94 94;
--light-gray-30-a50: #e0e0e680; --ink-10: 57 52 115;
--light-gray-40: #cfcfd8; --ink-80: 32 18 58;
--light-gray-50: #bfbfc9; --light-gray-10: 249 249 251;
--light-gray-60: #afafba; --light-gray-20: 240 240 244;
--light-gray-70: #9f9fad; --light-gray-30: 224 224 230;
--light-gray-80: #8f8f9e; --light-gray-40: 207 207 216;
--light-gray-90: #80808f; --light-gray-50: 191 191 201;
--orange-80: #9e280b; --light-gray-60: 175 175 186;
--purple-60: #952bb9; --light-gray-70: 159 159 173;
--red-60: #e22850; --light-gray-80: 143 143 158;
--violet-40: #ab71ff; --light-gray-90: 128 128 143;
--violet-60: #7542e5; --orange-5: 255 244 222;
--violet-70: #592acb; --orange-10: 255 213 178;
--violet-80: #45278d; --orange-20: 255 181 135;
--yellow-10: #ffff98; --orange-30: 255 162 102;
--yellow-30: #ffd567; --orange-40: 255 138 80;
--yellow-40: #ffbd4f; --orange-50: 255 113 57;
--yellow-50: #ffa436; --orange-60: 226 89 32;
--yellow-60: #e27f2e; --orange-70: 204 61 0;
--black: #000; --orange-80: 158 40 11;
--white: #fff; --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 { :root {
--font-size: 14px; --font-size: 14px;
} }
@ -70,301 +133,338 @@
--font-size: 16px; --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 { :root {
--font-size: 14px; --font-size: 14px;
--ubo-red: #800000; --ubo-red: #800000;
--default-ink: var(--ink-80); --elevation-up-surface: black;
--default-ink-a4: var(--ink-80-a4); --elevation-up1-opacity: 4%;
--default-ink-a40: var(--ink-80-a40); --elevation-up2-opacity: 8%;
--default-ink-a50: var(--ink-80-a50); --elevation-down-surface: white;
--default-surface: var(--light-gray-10); --elevation-down1-opacity: 16%;
--default-surface-border: var(--light-gray-70); --elevation-down2-opacity: 32%;
--default-surface-hover: var(--light-gray-30-a50);
--bg-1: hsla(240, 20%, 98%, 1); --ink-rgb: var(--ink-80);
--bg-1-border: hsla(240, 20%, 90%, 1); --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 */ --border-1: rgb(var(--gray-75));
--fg-0-80: hsla(261, 53%, 15%, 0.8); --border-2: rgb(var(--gray-70));
--fg-0-70: hsla(261, 53%, 15%, 0.7); --border-3: rgb(var(--gray-65));
--fg-0-60: hsla(261, 53%, 15%, 0.6); --border-4: rgb(var(--gray-60));
--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);
--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-surface: transparent;
--fieldset-header-ink: var(--ink-20); --fieldset-header-ink: var(--ink-2);
--button-surface: var(--light-gray-30); --button-ink: var(--ink-1);
--button-ink: var(--ink-20); --button-surface: var(--surface-3);
--button-surface-hover: var(--light-gray-40); --button-border-radius: 5px;
--button-active-surface: var(--blue-10); --button-preferred-ink: var(--accent-ink-1);
--button-important-surface: var(--yellow-30); --button-preferred-surface: var(--accent-surface-1);
--button-important-surface-hover: var(--yellow-40); --button-disabled-filter: opacity(50%);
/* 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;
--checkbox-size: calc(var(--font-size) + 2px); --checkbox-size: calc(var(--font-size) + 2px);
--checkbox-ink: var(--light-gray-90); --checkbox-ink: var(--ink-3);
--checkbox-checked-ink: var(--ink-20); --checkbox-checked-ink: var(--accent-surface-1);
--checkbox-disabled-filter: opacity(50%);
--select-surface: white; --notice-ink: var(--accent-ink-1);
--notice-surface: var(--accent-surface-1);
--bg-transient-notice: hsla(60, 100%, 95%, 1); --notice-surface-shadow: #000 0 2px 8px;
--dashboard-bar-shadow: --dashboard-bar-shadow:
0px 0px 0px 1px var(--default-ink-a4), 0px 0px 0px 1px rgb(var(--ink-rgb) / 4%),
0px 1px 2px 0px #2200330a, 0px 1px 2px 0px rgb(var(--ink-rgb) / 4%),
0px 2px 1px -1px #0730721f, 0px 2px 1px -1px rgb(var(--ink-rgb) / 12%),
0px 1px 6px 0px #0e0d1a1f; 0px 1px 6px 0px rgb(var(--ink-rgb) / 12%);
--dashboard-tab-ink: var(--default-ink); --dashboard-tab-ink: var(--ink-1);
--dashboard-tab-active-ink: var(--violet-70); --dashboard-tab-active-ink: var(--accent-surface-1);
--dashboard-tab-surface-hover: var(--default-surface-hover); --dashboard-tab-surface-hover: var(--surface-2);
--dashboard-tab-border-hover: var(--surface-3);
--fg-icon-info-lvl-0-dimmed: #888; /* info levels: normal, fyi, warn, error -- we want same Luv */
--fg-icon-info-lvl-0: inherit; --info0-ink-rgb: 119 119 119; /* h: 0 S: 0 Luv:60 */
--fg-icon-info-lvl-1-dimmed: hsla(240, 100%, 40%, 0.5); --info1-ink-rgb: 72 143 255; /* h:255 S:100 Luv:60 */
--fg-icon-info-lvl-1: hsla(240, 100%, 40%, 1); --info2-ink-rgb: 227 113 0; /* h: 30 S:100 Luv:60 */
--info-lvl-2-ink: var(--yellow-50); --info3-ink-rgb: 255 68 166; /* h:330 S:100 Luv:60 */
--info-lvl-2-ink-hover: var(--yellow-60); --info0-ink: rgb(var(--info0-ink-rgb));
--fg-icon-info-lvl-3-dimmed: hsla(16, 100%, 50%, 0.5); --info1-ink: rgb(var(--info1-ink-rgb));
--fg-icon-info-lvl-3: hsla(16, 100%, 50%, 1); --info2-ink: rgb(var(--info2-ink-rgb));
--fg-icon-info-lvl-4-dimmed: hsla(0, 100%, 35%, 0.5); --info3-ink: rgb(var(--info3-ink-rgb));
--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);
/* popup panel */ /* popup panel */
/* classic */ --popup-cell-surface: var(--surface-2);
--bg-popup-cell-1: hsla(261, 0%, 93%, 1); --popup-cell-label-filter: opacity(40%);
/* fenix */ --popup-cell-cname-ink: rgb(var(--blue-50));
--popup-power-ink: var(--blue-50); --popup-cell-allow-surface-rgb: 0 153 0;
--popup-power-disabled-ink: var(--light-gray-70); --popup-cell-allow-own-surface: rgb(var(--popup-cell-allow-surface-rgb));
--popup-power-ink-hover: var(--blue-60); --popup-cell-allow-surface: rgb(var(--popup-cell-allow-surface-rgb) / 35%);
--bg-popup-cell-2: var(--light-gray-30); --popup-cell-noop-surface-rgb: 132 132 132;
--bg-popup-cell-label-filter: opacity(40%); --popup-cell-noop-own-surface: rgb(var(--popup-cell-noop-surface-rgb));
--fg-popup-cell-cname: hsla(240, 100%, 40%, 1); --popup-cell-noop-surface: rgb(var(--popup-cell-noop-surface-rgb) / 35%);
--bg-popup-cell-allow: hsla(120, 40%, 75%, 1); --popup-cell-block-surface-rgb: 255 40 40;
--bg-popup-cell-allow-own: hsla(120, 100%, 30%, 1); --popup-cell-block-own-surface: rgb(var(--popup-cell-block-surface-rgb));
--bg-popup-cell-noop: hsla(0, 0%, 75%, 1); --popup-cell-block-surface: rgb(var(--popup-cell-block-surface-rgb) / 35%);
--bg-popup-cell-noop-own: hsla(0, 0%, 45%, 1); --popup-cell-label-mixed-surface: #c29100;
--bg-popup-cell-block: hsla(0, 50%, 80%, 1); --popup-icon-x-ink: rgb(var(--red-60));
--bg-popup-cell-block-own: hsla(0, 100%, 40%, 1); --popup-power-ink-rgb: var(--primary-color-40);
--bg-popup-cell-label-mixed: hsla(45, 100%, 38%, 1); --popup-power-ink: rgb(var(--popup-power-ink-rgb));
--popup-icon-x-ink: var(--red-60); --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 */ /* horizontal line separator */
--hr-ink: var(--light-gray-30); --hr-ink: var(--surface-2);
/* cloud widget */ /* 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 */ /* codemirror */
--cm-gutter-border: var(--light-gray-40); --cm-active-line: var(--surface-1);
--cm-gutter-ink: var(--light-gray-90); --cm-cursor: var(--ink-0);
--cm-gutter-surface: var(--light-gray-25); --cm-foldmarker-ink: rgb(var(--blue-40));
--cm-selection-surface: #d7d4f0; --cm-gutter-border: var(--surface-1);
--cm-selection-ink: var(--default-ink); --cm-gutter-ink: var(--ink-3);
--cm-searching-surface: #ffff0066; --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 */ /* syntax highlight: static filtering */
--sf-comment-ink: var(--light-gray-90); --sf-comment-ink: var(--ink-3);
--sf-def-ink: #0000ff; --sf-def-ink: rgb(var(--blue-50));
--sf-directive-ink: var(--dark-gray-40); --sf-directive-ink: var(--ink-1);
--sf-error-ink: #ff0000; --sf-error-ink: rgb(var(--red-60));
--sf-error-surface: #ff000016; --sf-error-surface: rgb(var(--red-60) / 10%);
--sf-keyword-ink: var(--purple-60); --sf-keyword-ink: rgb(var(--purple-60));
--sf-notice-ink: var(--light-gray-60); --sf-notice-ink: var(--border-2);
--sf-readonly-ink: var(--light-gray-80); --sf-readonly-ink: var(--ink-3);
--sf-tag-ink: #117700; --sf-tag-ink: rgb(var(--green-60));
--sf-value-ink: var(--orange-80); --sf-value-ink: rgb(var(--orange-70));
--sf-variable-ink: var(--default-ink); --sf-variable-ink: var(--ink-1);
--sf-warning-ink: var(--yellow-50); --sf-warning-ink: rgb(var(--yellow-50));
/* syntax highlight: dynamic filtering */ /* syntax highlight: dynamic filtering */
--df-allow-ink: #117700; --df-allow-ink: var(--cm-positive);
--df-block-ink: #ff0000; --df-block-ink: var(--cm-negative);
--df-noop-ink: var(--dark-gray-10); --df-noop-ink: rgb(var(--dark-gray-10));
--df-key-ink: var(--violet-70);
/* logger */ /* logger */
--logger-allowed-surface: #00a00014;
--logger-blocked-surface: #c0000014; --logger-blocked-surface: #c0000014;
--logger-modified-surface: #0000c010; --logger-modified-surface: #0000c010;
--logger-allowed-surface: #00a00014; --logger-redirected-surface: rgb(var(--yellow-5) / 50%);
--logger-blocked-em-surface: #c0000036; --logger-blocked-em-surface: #c0000036;
--logger-modified-em-surface: #0000c028; --logger-modified-em-surface: #0000c028;
--logger-allowed-em-surface: #00a00036; --logger-allowed-em-surface: #00a00036;
} }
/** /*
Use slightly darker inks on lower pixel-density devices to improve * Source for color-blind color scheme from https://github.com/WyohKnott:
contrast. * https://github.com/chrisaljoudi/uBlock/issues/467#issuecomment-95177219
*/ *
: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
*/
:root.colorBlind { :root.colorBlind {
--bg-popup-cell-allow: hsla(42, 100%, 80%, 1); --popup-cell-allow-surface-rgb: 225 157 0;
--bg-popup-cell-allow-own: hsla(42, 100%, 50%, 1); --popup-cell-block-surface-rgb: 14 55 255;
--bg-popup-cell-noop: hsla(0, 0%, 75%, 1); --popup-cell-label-mixed-surface: #ff6a00;
--bg-popup-cell-noop-own: hsla(0, 0%, 45%, 1);
--bg-popup-cell-block: hsla(230, 25%, 75%, 1);
--bg-popup-cell-block-own: hsla(230, 100%, 25%, 1);
--bg-popup-cell-label-mixed: hsla(25, 100%, 50%, 1);
} }
/** /*
Default dark theme starts here * Default dark theme starts here
*
Assign a default background color if dark mode is enabled -- hopefully * https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-629641072
this will avoid flashes of white background until the document's own CSS * Assign a default background color if dark mode is enabled -- hopefully
overrides the default color value below. * this will avoid flashes of white background until the document's own CSS
https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-629641072 * overrides the default color value below.
*/ *
* */
@media (prefers-color-scheme: dark) {
body {
background-color: var(--dark-gray-90);
}
}
/* https://material.io/design/color/dark-theme.html */
:root.dark { :root.dark {
--default-ink: var(--light-gray-10); --elevation-down-surface: black;
--default-ink-a4: var(--light-gray-10-a4); --elevation-down1-opacity: 16%;
--default-ink-a50: var(--light-gray-30-a50); --elevation-down2-opacity: 32%;
--default-surface: var(--dark-gray-90); --elevation-up-surface: white;
--default-surface-hover: var(--dark-gray-50); --elevation-up1-opacity: 12%;
--bg-1: hsla(250, 13%, 9%, 1); --elevation-up2-opacity: 24%;
--bg-1-border: hsla(250, 13%, 16%, 1);
--bg-overlay-50: #0008; --ink-rgb: var(--gray-95);
--bg-code: hsla(0, 2%, 0%, 0.8); --ink-0: white;
--fg-0-80: hsla(0, 0%, 53%, 0.8);
--fg-0-70: hsla(0, 0%, 53%, 0.7); --surface-0: black;
--fg-0-60: hsla(0, 0%, 53%, 0.6); --surface-1: rgb(var(--gray-10));
--fg-0-50: hsla(0, 0%, 53%, 0.5); --surface-2: rgb(var(--gray-20));
--fg-0-40: hsla(0, 0%, 53%, 0.4); --surface-3: rgb(var(--gray-30));
--fg-0-30: hsla(0, 0%, 53%, 0.3); --surface-4: rgb(var(--gray-40));
--fg-0-20: hsla(0, 0%, 53%, 0.2);
--link-ink: #bb86fc; --border-1: rgb(var(--gray-35));
--fieldset-header-surface: transparent; --border-2: rgb(var(--gray-40));
--fieldset-header-ink: var(--light-gray-30); --border-3: rgb(var(--gray-45));
--hr-ink: var(--dark-gray-50); --border-4: rgb(var(--gray-50));
--button-surface: var(--light-gray-10-a12);
--button-ink: var(--default-ink); --accent-ink-1: rgb(var(--ink-80));
--button-surface-hover: var(--light-gray-10-a12); --accent-surface-1: rgb(var(--primary-color-70));
--button-active-surface: var(--light-gray-70);
--button-important-surface: var(--dark-gray-30); --accent-ink-1: var(--surface-1);
--button-important-surface-hover: var(--light-gray-60); --accent-ink-3: var(--ink-1);
--button-disabled-filter: opacity(38%); --accent-surface-1: rgb(var(--primary-color-70));
--button-disabled-surface: var(--dark-gray-50); --accent-surface-3: rgb(var(--primary-color-30));
--button-disabled-ink: var(--light-gray-30-a50);
--button-preferred-surface: var(--dark-gray-50); /* popup panel */
--button-preferred-ink: var(--light-gray-70); --popup-cell-label-filter: opacity(40%);
--checkbox-size: calc(var(--font-size) + 2px); --popup-cell-cname-ink: hsla(0, 0%, 53%, 0.3);
--checkbox-ink: var(--default-ink); --popup-cell-allow-surface: rgb(var(--popup-cell-allow-surface-rgb) / 65%);
--checkbox-checked-ink: #bb86fc; --popup-cell-noop-surface: rgb(var(--popup-cell-noop-surface-rgb) / 65%);
/*--select-surface:*/ --popup-cell-block-surface: rgb(var(--popup-cell-block-surface-rgb) / 65%);
--bg-transient-notice: var(--dark-gray-50); --popup-cell-label-mixed-surface: hsla(45, 100%, 38%, 1);
--dashboard-bar-shadow: 0px 0px 0px 1px var(--default-ink-a4); --popup-icon-x-ink: rgb(var(--red-50));
--dashboard-tab-active-ink: #bb86fc; --popup-power-ink-rgb: var(--primary-color-60);
--dashboard-tab-surface-hover: var(--default-surface-hover); --popup-ruleset-tool-shadow: -surface-0;
--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;
/* cloud widget */ /* 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 /* syntax highlight: static filtering */
-moz-FieldText: #888888 !important; change from these names to either HEX value or variables. default-ink --sf-comment-ink: var(--ink-3);
-moz-Field: #15141a !important; var would be var(--dark-gray-90) hex value might be easiest though. --sf-def-ink: rgb(var(--blue-20));
/* TO DO --sf-error-ink: rgb(var(--red-40));
1. Epicker window box color Variables needed; --sf-error-surface: rgb(var(--red-40) / 40%);
#ublock0-epicker aside --sf-keyword-ink: rgb(var(--purple-10));
background-color: var(--dark-gray-90) --sf-notice-ink: var(--border-2);
outer border: var(--dark-gray-90) --sf-tag-ink: rgb(var(--green-50));
inner order: var ( --sf-value-ink: rgb(var(--orange-20));
color: #999999a0 --sf-variable-ink: var(--ink-1);
html#ublock0-epicker, #ublock0-epicker body --sf-warning-ink: rgb(var(--yellow-50));
background: transparent !important;
color: #777 !important;
2. CodeMirror (my filters and Whitelist) ADVANCED SETTINGS (background and color need variables) /* syntax highlight: dynamic filtering */
.CodeMirror background: (currenty set to white) need a var --df-noop-ink: var(--ink-3);
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 *********
3. #cloudWidget background (linked to img) background is hsl - would be better if we had a background color instead of hsl. /* logger */
***** file used is cloud-ui.css ******** --logger-allowed-surface: #24a71960;
4. Logger UI screen. .permatoolbar, modalOverlayContainer : background-color; --logger-blocked-surface: #ff4c2b60;
headers background-color, color border-color --logger-modified-surface: #663efd60;
#netFilteringDialog > div.panes > .dynamic .entry background-color: border-bottom: ; --logger-redirected-surface: rgb(var(--yellow-5) / 40%);
#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 *****
*/
} }
:root.dark.colorBlind { :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));
}

8
src/dashboard.html
View File

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

12
src/devtools.html
View File

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

8
src/document-blocked.html
View File

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

16
src/dyna-rules.html
View File

@ -25,21 +25,21 @@
<div class="tools"> <div class="tools">
<div class="ruleActions"> <div class="ruleActions">
<div class="fieldset-header" data-i18n="rulesPermanentHeader"></div> <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="iconified" id="exportButton"><span class="fa-icon">upload-alt</span><span data-i18n="rulesExport">_</span><span class="hover"></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="revertButton"><span class="fa-icon">arrow-right</span><span data-i18n="rulesRevert">_</span><span class="hover"></span></button>
</div> </div>
<div class="ruleActions"> <div class="ruleActions">
<div class="fieldset-header" data-i18n="rulesTemporaryHeader"></div> <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="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="iconifiable" id="importButton"><span class="fa-icon">download-alt</span><span data-i18n="rulesImport"></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="iconifiable important disabled" id="editSaveButton"><span class="fa-icon">save</span><span data-i18n="rulesEditSave"></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 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>
</div> </div>
</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 class="codeMirrorContainer codeMirrorMergeContainer"></div>
<div id="templates" style="display: none;"> <div id="templates" style="display: none;">

4
src/js/codemirror/ubo-static-filtering.js
View File

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

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

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

2
src/js/i18n.js
View File

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

4
src/js/messaging.js
View File

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

49
src/js/udom.js
View File

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

36
src/logger-ui.html
View File

@ -21,9 +21,9 @@
<option value="-1" data-i18n="logBehindTheScene"> <option value="-1" data-i18n="logBehindTheScene">
<option value="_" data-i18n="loggerCurrentTab"> <option value="_" data-i18n="loggerCurrentTab">
</select> </select>
<span id="refresh" class="button fa-icon disabled needdom" data-i18n-title="loggerReloadTip">refresh</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>
<span id="showdom" class="button fa-icon disabled needdom" data-i18n-title="loggerDomInspectorTip">code</span> <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>
<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="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>
<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> <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 id="domInspector" class="inspector hCompact">
<div class="permatoolbar"> <div class="permatoolbar">
<div> <div>
<span class="button fa-icon vCompactToggler">double-angle-up</span> <button class="iconified notext vCompactToggler"><span class="fa-icon">double-angle-up</span><span class="hover"></span></button>
<span class="button fa-icon hCompactToggler">double-angle-left</span> <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 highlightMode" style="display: none">&#xf042;</span> -->
<span class="button fa-icon revert disabled">eraser</span> <button class="iconified notext revert disabled"><span class="fa-icon">eraser</span><span class="hover"></span></button>
<span class="button fa-icon commit disabled">floppy-o</span> <button class="iconified notext commit disabled"><span class="fa-icon">floppy-o</span><span class="hover"></span></button>
</div> </div>
</div> </div>
<div class="vscrollable"> <div class="vscrollable">
@ -48,12 +48,12 @@
<div id="netInspector" class="inspector f"> <div id="netInspector" class="inspector f">
<div class="permatoolbar"> <div class="permatoolbar">
<div> <div>
<span class="button fa-icon vCompactToggler">double-angle-up</span> <button class="iconified notext vCompactToggler"><span class="fa-icon">double-angle-up</span><span class="hover"></span></button>
<span id="clean" class="button fa-icon disabled">times</span> <button id="clean" class="iconified notext disabled"><span class="fa-icon">times</span><span class="hover"></span></button>
<span id="clear" class="button fa-icon disabled" data-i18n-title="loggerClearTip">eraser</span> <button id="clear" class="iconified notext disabled" data-i18n-title="loggerClearTip"><span class="fa-icon">eraser</span><span class="hover"></span></button>
<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 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="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"> <span id="filterInput">
<input type="search" placeholder="logFilterPrompt"> <input type="search" placeholder="logFilterPrompt">
<span id="filterExprButton" class="button fa-icon expanded" data-i18n-title="loggerRowFiltererBuiltinTip">angle-up</span> <span id="filterExprButton" class="button fa-icon expanded" data-i18n-title="loggerRowFiltererBuiltinTip">angle-up</span>
@ -72,9 +72,9 @@
</span> </span>
</div> </div>
<div> <div>
<span id="loggerStats" class="button fa-icon" style="display: none;">bar-chart</span> <button id="loggerStats" class="iconified notext" style="display: none;"><span class="fa-icon">bar-chart</span><span class="hover"></span></button>
<span id="loggerExport" class="button fa-icon">clipboard</span> <button id="loggerExport" class="iconified notext"><span class="fa-icon">clipboard</span><span class="hover"></span></button>
<span id="loggerSettings" class="button fa-icon">cog</span> <button id="loggerSettings" class="iconified notext"><span class="fa-icon">cog</span><span class="hover"></span></button>
</div> </div>
</div> </div>
<div class="vscrollable"> <div class="vscrollable">
@ -141,8 +141,8 @@
</div> </div>
<div class="pane static" data-pane="static"> <div class="pane static" data-pane="static">
<div></div> <div></div>
<div><textarea class="staticFilter" spellcheck="false" value=""></textarea> <div><textarea class="staticFilter" spellcheck="false"></textarea>
<button id="createStaticFilter" class="important" type="button" data-i18n="pickerCreate"></button> <button id="createStaticFilter" class="important" type="button" data-i18n="pickerCreate">_<span class="hover"></span></button>
</div> </div>
</div> </div>
</div> </div>
@ -159,7 +159,7 @@
</div> </div>
<div id="cosmeticFilteringDialog" class="modalDialog"> <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> <button id="createCosmeticFilters" class="important" type="button" data-i18n="pickerCreate"></button>
</div> </div>

8
src/settings.html
View File

@ -25,7 +25,7 @@
<div class="fieldset"> <div class="fieldset">
<div class="fieldset-header" data-i18n="3pGroupPrivacy"></div> <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="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" 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="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> <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 class="li" id="settingsLastRestorePrompt" style="display:none;"></div>
</div> </div>
<div> <div>
<button type="button" id="export" data-i18n="aboutBackupDataButton"></button> <button type="button" id="export" data-i18n="aboutBackupDataButton">_<span class="hover"></span></button>
<button type="button" id="import" data-i18n="aboutRestoreDataButton"></button> <button type="button" id="import" data-i18n="aboutRestoreDataButton">_<span class="hover"></span></button>
<button type="button" id="reset" data-i18n="aboutResetDataButton"></button> <button type="button" id="reset" data-i18n="aboutResetDataButton">_<span class="hover"></span></button>
</div> </div>
</div> </div>

16
src/support.html
View File

@ -23,7 +23,7 @@
<div> <div>
<p data-i18n="supportS1P1"> <p data-i18n="supportS1P1">
</div> </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> </div>
<hr> <hr>
</div> </div>
@ -33,7 +33,7 @@
<div> <div>
<p data-i18n="supportS2P1"> <p data-i18n="supportS2P1">
</div> </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> </div>
<hr> <hr>
</div> </div>
@ -45,7 +45,7 @@
<p data-i18n="supportS3P2"> <p data-i18n="supportS3P2">
<p data-i18n="supportS3P3"> <p data-i18n="supportS3P3">
</div> </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> </div>
<hr> <hr>
</div> </div>
@ -55,7 +55,7 @@
<div> <div>
<p data-i18n="supportS4P1"> <p data-i18n="supportS4P1">
</div> </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> </div>
<hr> <hr>
</div> </div>
@ -66,7 +66,7 @@
<p data-i18n="supportS3P1"> <p data-i18n="supportS3P1">
<p data-i18n="supportS6P1S1"> <p data-i18n="supportS6P1S1">
</div> </div>
<button type="button" data-i18n="supportFindSpecificButton"></button> <button type="button" data-i18n="supportFindSpecificButton">_<span class="hover"></span></button>
</div> </div>
<div class="supportEntry"> <div class="supportEntry">
<div> <div>
@ -89,7 +89,7 @@
<p> <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> <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> </div>
<button type="button" data-i18n="supportReportSpecificButton"></button> <button type="button" data-i18n="supportReportSpecificButton">_<span class="hover"></span></button>
</div> </div>
<hr> <hr>
</div> </div>
@ -97,8 +97,8 @@
<h3 data-i18n="supportS5H"></h3> <h3 data-i18n="supportS5H"></h3>
<p data-i18n="supportS5P1"> <p data-i18n="supportS5P1">
<p> <p>
<button id="selectAllButton" type="button" data-i18n="genericSelectAll"></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"></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 id="supportData" class="codeMirrorContainer"></div>
</div> </div>
</div> </div>

9
src/web_accessible_resources/epicker-ui.html
View File

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

8
src/whitelist.html
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 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>
<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="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="iconifiable" type="button" disabled><span class="fa-icon">undo</span><span data-i18n="genericRevert"></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; &emsp;&emsp;
<button id="importWhitelistFromFile" class="iconifiable" type="button"><span class="fa-icon">download-alt</span><span data-i18n="whitelistImport"></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="iconifiable" type="button"><span class="fa-icon">upload-alt</span><span data-i18n="whitelistExport"></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> </p>
</div> </div>
<div id="whitelist" class="codeMirrorContainer"></div> <div id="whitelist" class="codeMirrorContainer"></div>