mirror of
https://github.com/gorhill/uBlock.git
synced 2024-11-22 02:12:44 +01:00
Work toward bringing dark theme closer to a stable release
Related issue: - https://github.com/uBlockOrigin/uBlock-issues/issues/401
This commit is contained in:
Raymond Hill
parent
2a91ecd6e1
commit
4ee8a5948d
@ -26,11 +26,11 @@
|
||||
|
||||
<p class="vverbose"><span data-i18n="1pFormatHint"></span> <a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-My-filters" target="_blank">question-circle</a></p>
|
||||
<p>
|
||||
<button id="userFiltersApply" class="important iconifiable" type="button" disabled><span class="fa-icon">check</span><span data-i18n="1pApplyChanges"></span></button>
|
||||
<button id="userFiltersRevert" class="iconifiable" type="button" disabled><span class="fa-icon">undo</span><span data-i18n="genericRevert"></span></button>
|
||||
<button id="userFiltersApply" class="preferred iconified" type="button" disabled><span class="fa-icon">check</span><span data-i18n="1pApplyChanges">_</span><span class="hover"></span></button>
|
||||
<button id="userFiltersRevert" class="iconified" type="button" disabled><span class="fa-icon">undo</span><span data-i18n="genericRevert">_</span><span class="hover"></span></button>
|
||||
 
|
||||
<button id="importUserFiltersFromFile" class="iconifiable" type="button"><span class="fa-icon">download-alt</span><span data-i18n="1pImport"></span></button>
|
||||
<button id="exportUserFiltersToFile" class="iconifiable" type="button"><span class="fa-icon">upload-alt</span><span data-i18n="1pExport"></span></button>
|
||||
<button id="importUserFiltersFromFile" class="iconified" type="button"><span class="fa-icon">download-alt</span><span data-i18n="1pImport">_</span><span class="hover"></span></button>
|
||||
<button id="exportUserFiltersToFile" class="iconified" type="button"><span class="fa-icon">upload-alt</span><span data-i18n="1pExport">_</span><span class="hover"></span></button>
|
||||
</p>
|
||||
</div>
|
||||
<div id="userFilters" class="codeMirrorContainer codeMirrorBreakAll" spellcheck="false"></div>
|
||||
|
||||
@ -18,24 +18,24 @@
|
||||
|
||||
<div id="cloudWidget" class="hide" data-cloud-entry="tpFiltersPane"></div>
|
||||
<div id="actions">
|
||||
<button id="buttonApply" class="important disabled iconifiable" type="button" data-i18n-title="3pApplyChanges"><span class="fa-icon">check</span><span data-i18n="3pApplyChanges"></span></button>
|
||||
<button id="buttonUpdate" class="important disabled iconifiable" type="button" data-i18n-title="3pUpdateNow"><span class="fa-icon">refresh</span><span data-i18n="3pUpdateNow"></span></button>
|
||||
<button id="buttonPurgeAll" class="disabled iconifiable" type="button" data-i18n-title="3pPurgeAll"><span class="fa-icon">clock-o</span><span data-i18n="3pPurgeAll"></span></button>
|
||||
<button id="buttonApply" class="preferred disabled iconified" type="button" data-i18n-title="3pApplyChanges"><span class="fa-icon">check</span><span data-i18n="3pApplyChanges">_</span><span class="hover"></span></button>
|
||||
<button id="buttonUpdate" class="preferred disabled iconified" type="button" data-i18n-title="3pUpdateNow"><span class="fa-icon">refresh</span><span data-i18n="3pUpdateNow">_</span><span class="hover"></span></button>
|
||||
<button id="buttonPurgeAll" class="disabled iconified" type="button" data-i18n-title="3pPurgeAll"><span class="fa-icon">clock-o</span><span data-i18n="3pPurgeAll">_</span><span class="hover"></span></button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="li">
|
||||
<label><span class="input checkbox"><input type="checkbox" id="autoUpdate"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="3pAutoUpdatePrompt1"></span></label>
|
||||
</div>
|
||||
<div class="li">
|
||||
<label><span class="input checkbox"><input type="checkbox" id="suspendUntilListsAreLoaded"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="3pSuspendUntilListsAreLoaded"></span></label>
|
||||
</div>
|
||||
<div class="li">
|
||||
<label><span class="input checkbox"><input type="checkbox" id="parseCosmeticFilters"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="3pParseAllABPHideFiltersPrompt1"></span> <span class="fa-icon info" data-i18n-title="3pParseAllABPHideFiltersInfo">question-circle</span></span></label>
|
||||
</div>
|
||||
<div class="li">
|
||||
<label><span class="input checkbox"><input type="checkbox" id="ignoreGenericCosmeticFilters"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="3pIgnoreGenericCosmeticFilters"></span> <span class="fa-icon info" data-i18n-title="3pIgnoreGenericCosmeticFiltersInfo">question-circle</span></span></label>
|
||||
</div>
|
||||
<div class="li">
|
||||
<label><span class="input checkbox"><input type="checkbox" id="suspendUntilListsAreLoaded"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="3pSuspendUntilListsAreLoaded"></span></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
<div class="body">
|
||||
<p><span data-i18n="advancedSettingsWarning"></span> <a class="fa-icon info important" href="https://github.com/gorhill/uBlock/wiki/Advanced-settings" target="_blank">info-circle</a>
|
||||
<p>
|
||||
<button id="advancedSettingsApply" class="important" type="button" disabled data-i18n="genericApplyChanges"></button> 
|
||||
<button id="advancedSettingsApply" class="preferred" type="button" disabled data-i18n="genericApplyChanges">_<span class="hover"></span></button> 
|
||||
</div>
|
||||
|
||||
<div id="advancedSettings" class="codeMirrorContainer"></div>
|
||||
|
||||
@ -16,12 +16,12 @@
|
||||
</head>
|
||||
<body class="loading">
|
||||
|
||||
<div id="subscribe" class="hide">
|
||||
<section id="subscribe" class="hide notice">
|
||||
<span class="logo"><img data-i18n-title="extName" src="img/ublock.svg"></span>
|
||||
<span id="subscribePrompt"><span></span><a></a></span>
|
||||
<span class="fa-icon">spinner</span>
|
||||
<button id="subscribeButton" type="button" data-i18n="subscribeButton"></button>
|
||||
</div>
|
||||
<button id="subscribeButton" type="button" data-i18n="subscribeButton">_<span class="hover"></span></button>
|
||||
</section>
|
||||
|
||||
<div id="content" class="codeMirrorContainer codeMirrorBreakAll"></div>
|
||||
|
||||
|
||||
@ -7,14 +7,14 @@
|
||||
<body>
|
||||
<div id="cloudToolbar">
|
||||
<div>
|
||||
<button id="cloudPush" type="button" data-i18n-title="cloudPush"><span class="fa-icon">cloud-upload</span></button>
|
||||
<button id="cloudPush" class="iconified notext" type="button" data-i18n-title="cloudPush"><span class="fa-icon">cloud-upload</span><span class="hover"></span></button>
|
||||
<span id="cloudInfo" data-i18n="cloudNoData"></span>
|
||||
<button id="cloudPull" type="button" data-i18n-title="cloudPull" disabled><span class="fa-icon">cloud-download</span></button>
|
||||
<button id="cloudPullAndMerge" type="button" data-i18n-title="cloudPullAndMerge" disabled><span class="fa-icon">cloud-download</span><span class="fa-icon">plus</span></button>
|
||||
<button id="cloudPull" class="iconified notext" type="button" data-i18n-title="cloudPull" disabled><span class="fa-icon">cloud-download</span><span class="hover"></span></button>
|
||||
<button id="cloudPullAndMerge" class="iconified notext" type="button" data-i18n-title="cloudPullAndMerge" disabled><span class="fa-icon">cloud-download</span><span class="fa-icon">plus</span><span class="hover"></span></button>
|
||||
</div>
|
||||
<div id="cloudCog" class="fa-icon">cog</div>
|
||||
<div id="cloudOptions">
|
||||
<label data-i18n="cloudDeviceNamePrompt">_<input id="cloudDeviceName" type="text" value=""></label> <button id="cloudOptionsSubmit" type="button" data-i18n="genericSubmit"></button>
|
||||
<label data-i18n="cloudDeviceNamePrompt">_<input id="cloudDeviceName" type="text" value=""></label> <button id="cloudOptionsSubmit" type="button" data-i18n="genericSubmit">_<span class="hover"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cloudError"></div>
|
||||
|
||||
@ -6,7 +6,7 @@ body {
|
||||
margin-bottom: 6rem;
|
||||
}
|
||||
#actions {
|
||||
background-color: var(--default-surface);
|
||||
background-color: var(--surface-1);
|
||||
padding: var(--default-gap-small) 0 var(--default-gap-xsmall) 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
@ -28,7 +28,7 @@ body {
|
||||
}
|
||||
#listsOfBlockedHostsPrompt::before,
|
||||
.groupEntry:not([data-groupkey="user"]) .geDetails::before {
|
||||
color: var(--fg-0-50);
|
||||
color: var(--ink-3);
|
||||
content: '\2212';
|
||||
font-family: monospace;
|
||||
font-size: large;
|
||||
@ -49,7 +49,7 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
|
||||
pointer-events: none;
|
||||
}
|
||||
.groupEntry .geCount {
|
||||
color: var(--fg-0-60);
|
||||
color: var(--ink-3);
|
||||
font-size: 90%;
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -74,17 +74,17 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
|
||||
.listEntry.toRemove .listname {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.listEntry a,
|
||||
.listEntry .fa-icon,
|
||||
.listEntry .counts {
|
||||
color: var(--fg-0-50);
|
||||
color: var(--info0-ink);
|
||||
fill: var(--info0-ink);
|
||||
display: none;
|
||||
fill: var(--fg-0-50);
|
||||
font-size: 120%;
|
||||
margin: 0 0.2em 0 0;
|
||||
}
|
||||
.listEntry .fa-icon:hover {
|
||||
color: inherit;
|
||||
fill: inherit;
|
||||
transform: scale(1.25);
|
||||
}
|
||||
.listEntry .content {
|
||||
display: inline-flex;
|
||||
@ -98,30 +98,19 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
|
||||
.listEntry .remove,
|
||||
.listEntry .unsecure,
|
||||
.listEntry .failed {
|
||||
color: var(--fg-icon-info-lvl-4-dimmed);
|
||||
color: var(--info3-ink);
|
||||
fill: var(--info3-ink);
|
||||
cursor: pointer;
|
||||
fill: var(--fg-icon-info-lvl-4-dimmed);
|
||||
}
|
||||
.listEntry .remove:hover,
|
||||
.listEntry .unsecure:hover,
|
||||
.listEntry .failed:hover {
|
||||
color: var(--fg-icon-info-lvl-4);
|
||||
fill: var(--fg-icon-info-lvl-4);
|
||||
}
|
||||
.listEntry.external .remove {
|
||||
display: inline-flex;
|
||||
}
|
||||
.listEntry.mustread a.mustread {
|
||||
color: var(--fg-icon-info-lvl-1-dimmed);
|
||||
color: var(--info1-ink);
|
||||
fill: var(--info1-ink);
|
||||
display: inline-flex;
|
||||
fill: var(--fg-icon-info-lvl-1-dimmed);
|
||||
}
|
||||
.listEntry.mustread a.mustread:hover {
|
||||
color: var(--fg-icon-info-lvl-1);
|
||||
fill: var(--fg-icon-info-lvl-1);
|
||||
}
|
||||
.listEntry .counts {
|
||||
color: var(--fg-0-60);
|
||||
font-size: smaller;
|
||||
}
|
||||
.listEntry.checked .counts {
|
||||
@ -131,9 +120,6 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
|
||||
cursor: default;
|
||||
display: none;
|
||||
}
|
||||
.listEntry .status:hover {
|
||||
color: inherit;
|
||||
}
|
||||
.listEntry.checked.unsecure .unsecure {
|
||||
display: inline-flex;
|
||||
}
|
||||
@ -147,12 +133,8 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
|
||||
display: inline-flex;
|
||||
}
|
||||
.listEntry .obsolete {
|
||||
color: var(--info-lvl-2-ink);
|
||||
fill: var(--info-lvl-2-ink);
|
||||
}
|
||||
.listEntry .obsolete:hover {
|
||||
color: var(--info-lvl-2-ink-hover);
|
||||
fill: var(--info-lvl-2-ink-hover);
|
||||
color: var(--info2-ink);
|
||||
fill: var(--info2-ink);
|
||||
}
|
||||
body:not(.updating) .listEntry.checked.obsolete .obsolete {
|
||||
display: inline-flex;
|
||||
@ -193,7 +175,7 @@ body.updating .listEntry.checked.obsolete .updating {
|
||||
-webkit-margin-start: 0;
|
||||
}
|
||||
:root.mobile .li.listEntry {
|
||||
background-color: var(--bg-1);
|
||||
/* background-color: var(--bg-1); */
|
||||
overflow-x: auto;
|
||||
}
|
||||
:root.mobile .li.listEntry label > span:not([class]) {
|
||||
|
||||
@ -18,7 +18,7 @@ body {
|
||||
flex-grow: 1;
|
||||
}
|
||||
#advancedSettings {
|
||||
border-top: 1px solid #ddd;
|
||||
border: var(--default-gap-xxsmall) solid var(--surface-2);
|
||||
text-align: left;
|
||||
}
|
||||
.CodeMirror-wrap pre {
|
||||
|
||||
@ -29,24 +29,24 @@ body {
|
||||
width: 100vw;
|
||||
}
|
||||
#subscribe {
|
||||
background-color: var(--bg-transient-notice);
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
padding: 4px;
|
||||
justify-content: space-between;
|
||||
max-height: 6em;
|
||||
padding-inline-end: 0.5em;
|
||||
}
|
||||
#subscribe.hide {
|
||||
display: none;
|
||||
}
|
||||
.logo {
|
||||
background-color: #fffa;
|
||||
flex-shrink: 0;
|
||||
width: 2em;
|
||||
}
|
||||
#subscribePrompt {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
padding: 0 0.5em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
#subscribePrompt > span {
|
||||
font-weight: bold;
|
||||
@ -59,6 +59,8 @@ body {
|
||||
align-self: center;
|
||||
}
|
||||
#subscribe > .fa-icon {
|
||||
color: var(--accent-ink-1);
|
||||
fill: var(--accent-ink-1);
|
||||
font-size: 20px;
|
||||
}
|
||||
body.loading #subscribe > button,
|
||||
|
||||
@ -20,7 +20,6 @@
|
||||
|
||||
body {
|
||||
align-items: center;
|
||||
background-color: var(--default-surface);
|
||||
border: 1px solid var(--ubo-red);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
#cloudWidget {
|
||||
background-color: var(--cloud-widget-surface);
|
||||
background-color: var(--surface-2);
|
||||
margin: 0.5em 0;
|
||||
min-width: max-content;
|
||||
position: relative;
|
||||
@ -29,7 +29,7 @@
|
||||
visibility: hidden;
|
||||
}
|
||||
#cloudToolbar button.error {
|
||||
color: var(--fg-icon-info-lvl-4);
|
||||
color: var(--info3-ink);
|
||||
}
|
||||
#cloudPullAndMerge {
|
||||
margin-left: 0.25em;
|
||||
@ -49,17 +49,17 @@
|
||||
white-space: pre-line;
|
||||
}
|
||||
#cloudCapacity {
|
||||
background-color: var(--light-gray-30);
|
||||
background-color: var(--surface-3);
|
||||
height: 4px;
|
||||
}
|
||||
#cloudCapacity > div {
|
||||
background-color: var(--light-gray-60);
|
||||
background-color: var(--cloud-total-used-surface);
|
||||
}
|
||||
#cloudCapacity > div > div {
|
||||
background-color: var(--violet-60);
|
||||
background-color: var(--cloud-used-surface);
|
||||
}
|
||||
#cloudError {
|
||||
color: var(--fg-icon-info-lvl-4);
|
||||
color: var(--info3-ink);
|
||||
flex-grow: 1;
|
||||
flex-shrink: 2;
|
||||
font-size: small;
|
||||
@ -69,9 +69,9 @@
|
||||
display: none;
|
||||
}
|
||||
#cloudCog {
|
||||
color: var(--fg-0-50);
|
||||
color: var(--ink-3);
|
||||
fill: var(--ink-3);
|
||||
cursor: pointer;
|
||||
fill: var(--fg-0-50);
|
||||
font-size: 110%;
|
||||
justify-content: flex-end;
|
||||
padding: 0.4em;
|
||||
@ -82,8 +82,7 @@
|
||||
}
|
||||
#cloudWidget #cloudOptions {
|
||||
align-items: center;
|
||||
background-color: var(--default-surface);
|
||||
border: 1px solid var(--bg-1-border);
|
||||
background-color: var(--surface-1);
|
||||
bottom: 2px;
|
||||
display: none;
|
||||
font-size: small;
|
||||
|
||||
@ -5,23 +5,59 @@
|
||||
position: relative;
|
||||
}
|
||||
.CodeMirror {
|
||||
background-color: var(--default-surface);
|
||||
background-color: var(--surface-0);
|
||||
box-sizing: border-box;
|
||||
color: var(--default-ink);
|
||||
color: var(--ink-1);
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.CodeMirror-lines {
|
||||
padding-bottom: 6rem;
|
||||
.CodeMirror-activeline-background {
|
||||
background-color: var(--cm-active-line);
|
||||
}
|
||||
.CodeMirror-cursor {
|
||||
border-color: var(--cm-cursor);
|
||||
}
|
||||
.CodeMirror-focused .CodeMirror-selected {
|
||||
background: var(--cm-selection-surface);
|
||||
color: var(--cm-selection-ink);
|
||||
}
|
||||
.CodeMirror-foldmarker {
|
||||
color: var(--cm-foldmarker-ink);
|
||||
font-size: large;
|
||||
text-shadow: none;
|
||||
}
|
||||
.CodeMirror-gutters {
|
||||
background-color: var(--cm-gutter-surface);
|
||||
border-color: var(--cm-gutter-border);
|
||||
}
|
||||
.CodeMirror-line::selection,
|
||||
.CodeMirror-line > span::selection,
|
||||
.CodeMirror-line > span > span::selection {
|
||||
background: var(--cm-selection-surface);
|
||||
color: var(--cm-selection-ink);
|
||||
}
|
||||
.CodeMirror-linenumber {
|
||||
color: var(--cm-gutter-ink);
|
||||
}
|
||||
.CodeMirror-lines {
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
.CodeMirror-matchingbracket {
|
||||
color: unset;
|
||||
}
|
||||
.CodeMirror-matchingbracket {
|
||||
background-color: var(--cm-matchingbracket) !important;
|
||||
color: inherit !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.CodeMirror-search-match {
|
||||
background: none;
|
||||
background-color: var(--cm-search-match-surface);
|
||||
border: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* For when panels are used */
|
||||
.codeMirrorContainer > div:not([class^="CodeMirror"]) {
|
||||
@ -34,18 +70,6 @@
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* CodeMirror theme overrides */
|
||||
.CodeMirror-focused .CodeMirror-selected {
|
||||
background: var(--cm-selection-surface);
|
||||
color: var(--cm-selection-ink);
|
||||
}
|
||||
.CodeMirror-line::selection,
|
||||
.CodeMirror-line > span::selection,
|
||||
.CodeMirror-line > span > span::selection {
|
||||
background: var(--cm-selection-surface);
|
||||
color: var(--cm-selection-ink);
|
||||
}
|
||||
|
||||
.cm-s-default .cm-comment {
|
||||
color: var(--sf-comment-ink);
|
||||
}
|
||||
@ -74,6 +98,12 @@
|
||||
.cm-s-default .cm-keyword {
|
||||
color: var(--sf-keyword-ink);
|
||||
}
|
||||
.cm-s-default .cm-negative {
|
||||
color: var(--cm-negative);
|
||||
}
|
||||
.cm-s-default .cm-positive {
|
||||
color: var(--cm-positive);
|
||||
}
|
||||
.cm-s-default .cm-notice {
|
||||
text-underline-position: under;
|
||||
text-decoration-color: var(--sf-notice-ink);
|
||||
@ -112,15 +142,6 @@
|
||||
color: var(--sf-keyword-ink);
|
||||
}
|
||||
|
||||
div.CodeMirror span.CodeMirror-matchingbracket {
|
||||
color: unset;
|
||||
}
|
||||
.CodeMirror-matchingbracket {
|
||||
background-color: #afa;
|
||||
color: inherit !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.cm-search-widget {
|
||||
align-items: center;
|
||||
background-color: var(--cm-gutter-surface);
|
||||
@ -170,14 +191,26 @@ div.CodeMirror span.CodeMirror-matchingbracket {
|
||||
.cm-search-widget .sourceURL[href=""] {
|
||||
display: none;
|
||||
}
|
||||
.cm-searching {
|
||||
background-color: var(--cm-searching-surface) !important;
|
||||
border: 1px dotted black;
|
||||
.cm-searching.cm-overlay {
|
||||
background-color: var(--cm-searching-surface);
|
||||
border: 0;
|
||||
color: var(--cm-searching-ink);
|
||||
}
|
||||
|
||||
.CodeMirror-merge {
|
||||
border-color: var(--cm-gutter-border);
|
||||
}
|
||||
.CodeMirror-merge-copy,
|
||||
.CodeMirror-merge-copy-reverse {
|
||||
color: var(--cm-merge-copy-ink);
|
||||
}
|
||||
.CodeMirror-merge-l-chunk {
|
||||
background-color: var(--cm-merge-l-chunk-surface);
|
||||
}
|
||||
.CodeMirror-merge-l-chunk-start,
|
||||
.CodeMirror-merge-l-chunk-end {
|
||||
border-color: var(--cm-merge-l-chunk-border);
|
||||
}
|
||||
.CodeMirror-merge-l-deleted {
|
||||
background-image: none;
|
||||
}
|
||||
@ -191,7 +224,8 @@ div.CodeMirror span.CodeMirror-matchingbracket {
|
||||
vertical-align: top;
|
||||
}
|
||||
.CodeMirror-merge-spacer {
|
||||
background-color: var(--cm-gutter-surface);
|
||||
background-color: var(--surface-0);
|
||||
opacity: 40%;
|
||||
}
|
||||
|
||||
.CodeMirror-hints {
|
||||
|
||||
@ -40,11 +40,11 @@
|
||||
|
||||
/* Common uBO styles */
|
||||
body {
|
||||
background-color: var(--default-surface);
|
||||
background-color: var(--surface-1);
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
color: var(--default-ink);
|
||||
fill: var(--default-ink);
|
||||
color: var(--ink-1);
|
||||
fill: var(--ink-1);
|
||||
font-family: Inter, sans-serif;
|
||||
font-size: var(--font-size);
|
||||
line-height: 1.5;
|
||||
@ -53,16 +53,17 @@ body {
|
||||
}
|
||||
a {
|
||||
color: var(--link-ink);
|
||||
fill: var(--link-ink);
|
||||
}
|
||||
code, .code {
|
||||
background-color: var(--button-surface);
|
||||
background-color: var(--surface-2);
|
||||
font-family: monospace;
|
||||
font-size: smaller;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: 1px solid var(--hr-ink);
|
||||
border-top: 1px solid var(--surface-2);
|
||||
margin: 1em 0;
|
||||
}
|
||||
textarea {
|
||||
@ -73,8 +74,8 @@ button {
|
||||
appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
border: 0;
|
||||
border-radius: var(--button-border-radius);
|
||||
background-color: var(--button-surface);
|
||||
color: var(--button-ink);
|
||||
display: inline-flex;
|
||||
@ -83,6 +84,7 @@ button {
|
||||
justify-content: center;
|
||||
min-height: 36px;
|
||||
padding: 0 var(--font-size);
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
}
|
||||
button.vflex {
|
||||
@ -91,52 +93,72 @@ button.vflex {
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
button:hover {
|
||||
background-color: var(--button-surface-hover);
|
||||
button > .hover {
|
||||
background-color: var(--elevation-up-surface);
|
||||
border-radius: var(--button-border-radius);
|
||||
height: 100%;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
button:not(.disabled):not([disabled]):hover > .hover {
|
||||
opacity: var(--elevation-up1-opacity);
|
||||
}
|
||||
button.notext:not(.disabled):not([disabled]):hover > .hover {
|
||||
opacity: var(--elevation-up2-opacity);
|
||||
}
|
||||
button.active {
|
||||
background-color: var(--button-active-surface);
|
||||
}
|
||||
button.important {
|
||||
background-color: var(--button-important-surface);
|
||||
}
|
||||
button.important:hover {
|
||||
background-color: var(--button-important-surface-hover);
|
||||
}
|
||||
button.disabled,
|
||||
button[disabled],
|
||||
button.important.disabled,
|
||||
button.important[disabled] {
|
||||
background-color: var(--button-disabled-surface);
|
||||
color: var(--button-disabled-ink);
|
||||
fill: var(--button-disabled-ink);
|
||||
button[disabled] {
|
||||
background-color: var(--button-surface);
|
||||
color: var(--button-ink);
|
||||
fill: var(--button-ink);
|
||||
filter: var(--button-disabled-filter);
|
||||
pointer-events: none;
|
||||
}
|
||||
button.preferred {
|
||||
button.preferred:not(.disabled):not([disabled]) {
|
||||
background-color: var(--button-preferred-surface);
|
||||
color: var(--button-preferred-ink);
|
||||
fill: var(--button-preferred-ink);
|
||||
}
|
||||
button.iconifiable > .fa-icon {
|
||||
padding-left: 0;
|
||||
padding-right: 0.4em;
|
||||
button.preferred:not(.disabled):not([disabled]):hover > .hover {
|
||||
background-color: var(--elevation-down-surface);
|
||||
opacity: var(--elevation-down1-opacity);
|
||||
}
|
||||
button.iconifiable > .fa-icon {
|
||||
button.iconified.notext {
|
||||
background-color: transparent;
|
||||
}
|
||||
button.iconified > .fa-icon {
|
||||
font-size: 120%;
|
||||
}
|
||||
body[dir="rtl"] button.iconifiable > .fa-icon {
|
||||
padding-left: 0.4em;
|
||||
padding-right: 0;
|
||||
}
|
||||
body[dir] button.iconifiable > .fa-icon:last-child {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
button.iconified > .fa-icon + [data-i18n] {
|
||||
padding-right: 0;
|
||||
padding-left: 0.4em;
|
||||
}
|
||||
body[dir="rtl"] button.iconified > .fa-icon + [data-i18n] {
|
||||
padding-right: 0.4em;
|
||||
padding-left: 0;
|
||||
}
|
||||
label {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
}
|
||||
section.notice {
|
||||
background-color: var(--notice-surface);
|
||||
box-shadow: var(--notice-surface-shadow);
|
||||
color: var(--notice-ink);
|
||||
}
|
||||
:root:not(.classic) section.notice a {
|
||||
color: var(--surface-2);
|
||||
}
|
||||
|
||||
/**
|
||||
Checkbox design borrowed from:
|
||||
@ -183,11 +205,11 @@ label {
|
||||
.checkbox > input[type="checkbox"]:checked + svg {
|
||||
background-color: var(--checkbox-checked-ink);
|
||||
border-color: var(--checkbox-checked-ink);
|
||||
stroke: var(--default-surface);
|
||||
stroke: var(--surface-1);
|
||||
}
|
||||
.checkbox[disabled],
|
||||
.checkbox[disabled] ~ span {
|
||||
opacity: 0.5;
|
||||
filter: var(--checkbox-disabled-filter);
|
||||
}
|
||||
|
||||
select {
|
||||
@ -223,11 +245,11 @@ select {
|
||||
-webkit-margin-start: 2em;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
button.iconifiable > .fa-icon {
|
||||
button.iconified > .fa-icon {
|
||||
font-size: 1.2rem;
|
||||
padding: 0;
|
||||
}
|
||||
button.iconifiable > [data-i18n] {
|
||||
button.iconified > [data-i18n] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -242,34 +264,6 @@ select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ubo-icon {
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding: 0.1em;
|
||||
position: relative;
|
||||
}
|
||||
.ubo-icon > * {
|
||||
pointer-events: none;
|
||||
}
|
||||
.ubo-icon.disabled,
|
||||
.disabled > .ubo-icon,
|
||||
.ubo-icon[disabled],
|
||||
[disabled] > .ubo-icon {
|
||||
color: var(--button-disabled-ink);
|
||||
fill: var(--button-disabled-ink);
|
||||
filter: var(--button-disabled-filter);
|
||||
stroke: var(--button-disabled-ink);
|
||||
pointer-events: none;
|
||||
}
|
||||
.ubo-icon > svg {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
/* high dpi devices */
|
||||
:root.hidpi button {
|
||||
font-family: Metropolis, sans-serif;
|
||||
|
||||
@ -14,28 +14,20 @@ a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.fa-icon.info {
|
||||
color: var(--fg-icon-info-lvl-0-dimmed);
|
||||
fill: var(--fg-icon-info-lvl-0-dimmed);
|
||||
color: var(--info0-ink);
|
||||
fill: var(--info0-ink);
|
||||
font-size: 115%;
|
||||
}
|
||||
.fa-icon.info:hover {
|
||||
color: inherit;
|
||||
fill: inherit;
|
||||
transform: scale(1.25);
|
||||
}
|
||||
.fa-icon.info.important {
|
||||
color: var(--fg-icon-info-lvl-3-dimmed);
|
||||
fill: var(--fg-icon-info-lvl-3-dimmed);
|
||||
}
|
||||
.fa-icon.info.important:hover {
|
||||
color: var(--fg-icon-info-lvl-3);
|
||||
fill: var(--fg-icon-info-lvl-3);
|
||||
color: var(--info2-ink);
|
||||
fill: var(--info2-ink);
|
||||
}
|
||||
input[type="number"] {
|
||||
width: 5em;
|
||||
}
|
||||
input[type="checkbox"][disabled] + * {
|
||||
color: var(--fg-0-50);
|
||||
}
|
||||
@media (max-height: 640px), (max-height: 800px) and (max-width: 480px) {
|
||||
.body > p,
|
||||
.body > ul {
|
||||
|
||||
@ -8,9 +8,8 @@ html, body {
|
||||
width: 100vw;
|
||||
}
|
||||
#dashboard-nav {
|
||||
background-color: var(--default-surface);
|
||||
border: 0;
|
||||
box-shadow: var(--dashboard-bar-shadow);
|
||||
border-bottom: 1px solid var(--border-1);
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-wrap: wrap;
|
||||
@ -23,11 +22,10 @@ html, body {
|
||||
}
|
||||
.tabButton {
|
||||
border: 0;
|
||||
border-bottom: 3px solid var(--bg-1);
|
||||
border-top: 3px solid transparent;
|
||||
border-bottom: 3px solid transparent;
|
||||
color: var(--dashboard-tab-ink);
|
||||
fill: var(--dashboard-tab-ink);
|
||||
padding: 0.5em 1.4em calc(0.5em - 3px);
|
||||
fill: var(--dashboard-tab-ink);
|
||||
padding: 0.7em 1.4em calc(0.7em - 3px);
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
@ -36,9 +34,10 @@ html, body {
|
||||
outline: 0;
|
||||
}
|
||||
.tabButton.selected {
|
||||
background-color: var(--primary-surface-2);
|
||||
border-bottom: 3px solid var(--dashboard-tab-active-ink);
|
||||
color: var(--dashboard-tab-active-ink);
|
||||
fill: var(--dashboard-tab-active-ink);
|
||||
fill: var(--dashboard-tab-active-ink);
|
||||
}
|
||||
iframe {
|
||||
background-color: transparent;
|
||||
@ -49,7 +48,6 @@ iframe {
|
||||
width: 100%;
|
||||
}
|
||||
#unsavedWarning {
|
||||
box-shadow: rgba(128,128,128,0.4) 0 4px 4px;
|
||||
display: none;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
@ -60,7 +58,6 @@ iframe {
|
||||
display: initial;
|
||||
}
|
||||
#unsavedWarning > div:first-of-type {
|
||||
background-color: var(--bg-transient-notice);
|
||||
padding: 0.5em;
|
||||
}
|
||||
#unsavedWarning > div:last-of-type {
|
||||
@ -95,7 +92,7 @@ body.noDashboard #dashboard-nav {
|
||||
}
|
||||
:root.desktop .tabButton:not(.selected):hover {
|
||||
background-color: var(--dashboard-tab-surface-hover);
|
||||
border-bottom-color: var(--dashboard-tab-surface-hover);
|
||||
border-bottom-color: var(--dashboard-tab-border-hover);
|
||||
}
|
||||
|
||||
/* touch-screen devices */
|
||||
|
||||
@ -41,7 +41,7 @@ a {
|
||||
width: 100%;
|
||||
}
|
||||
#warningSign > a {
|
||||
fill: var(--yellow-50);
|
||||
fill: rgb(var(--yellow-50));
|
||||
font-size: 96px;
|
||||
}
|
||||
#theURL {
|
||||
@ -58,9 +58,9 @@ a {
|
||||
background-color: transparent;
|
||||
top: 100%;
|
||||
box-sizing: border-box;
|
||||
color: var(--fg-0-60);
|
||||
color: var(--ink-4);
|
||||
fill: var(--ink-4);
|
||||
cursor: pointer;
|
||||
fill: var(--fg-0-60);
|
||||
font-size: 1.2rem;
|
||||
padding: var(--default-gap-xxsmall);
|
||||
position: absolute;
|
||||
@ -79,14 +79,12 @@ body[dir="rtl"] #theURL > p > span:last-of-type {
|
||||
left: 0;
|
||||
}
|
||||
#theURL > p:hover > span {
|
||||
color: var(--default-ink);
|
||||
fill: var(--default-ink);
|
||||
color: var(--ink-1);
|
||||
fill: var(--ink-1);
|
||||
}
|
||||
#parsed {
|
||||
background-color: var(--bg-1);
|
||||
border: 1px solid var(--bg-code);
|
||||
border-top: none;
|
||||
color: var(--fg-0-80);
|
||||
background-color: var(--surface-1);
|
||||
border: 4px solid var(--surface-2);
|
||||
font-size: small;
|
||||
overflow-x: auto;
|
||||
padding: var(--default-gap-xxsmall);
|
||||
|
||||
@ -16,11 +16,10 @@ body {
|
||||
}
|
||||
#diff {
|
||||
border: 0;
|
||||
border-top: 1px solid #eee;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#diff .tools > * {
|
||||
margin-bottom: 0.5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
#diff .ruleActions {
|
||||
border: 0;
|
||||
@ -35,34 +34,14 @@ body {
|
||||
#diff .ruleActions .fieldset-header {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
#revertButton,
|
||||
#commitButton,
|
||||
body.editing #diff #exportButton,
|
||||
body.editing #diff #importButton {
|
||||
background-color: var(--button-disabled-surface);
|
||||
color: var(--button-disabled-ink);
|
||||
fill: var(--button-disabled-ink);
|
||||
filter: var(--button-disabled-filter);
|
||||
pointer-events: none;
|
||||
}
|
||||
body:not(.editing) #diff.dirty #revertButton,
|
||||
body:not(.editing) #diff.dirty #commitButton {
|
||||
background-color: var(--button-surface);
|
||||
color: var(--button-ink);
|
||||
fill: var(--button-ink);
|
||||
filter: none;
|
||||
pointer-events: auto;
|
||||
}
|
||||
body:not(.editing) #diff.dirty #revertButton:hover,
|
||||
body:not(.editing) #diff.dirty #commitButton:hover {
|
||||
background-color: var(--button-surface-hover);
|
||||
}
|
||||
|
||||
#ruleFilter {
|
||||
align-items: center;
|
||||
background-color: var(--surface-2);
|
||||
direction: ltr;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
#ruleFilter #diffCollapse {
|
||||
padding: 0 0.5em;
|
||||
@ -75,6 +54,9 @@ body:not(.editing) #diff.dirty #commitButton:hover {
|
||||
.codeMirrorContainer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.codeMirrorContainer .CodeMirror {
|
||||
background-color: var(--surface-1);
|
||||
}
|
||||
.CodeMirror-merge, .CodeMirror-merge-pane, .CodeMirror-merge .CodeMirror {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
@ -83,11 +65,8 @@ body.editing .CodeMirror-merge-copy,
|
||||
body.editing .CodeMirror-merge-copy-reverse {
|
||||
display: none;
|
||||
}
|
||||
body.editing .CodeMirror-merge-left .CodeMirror {
|
||||
color: var(--fg-0-60);
|
||||
}
|
||||
body.editing .CodeMirror-merge-editor .CodeMirror {
|
||||
background-color: var(--bg-transient-notice);
|
||||
background-color: var(--surface-0);
|
||||
}
|
||||
body[dir="rtl"] .CodeMirror-merge-pane-rightmost {
|
||||
right: unset;
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
html#ublock0-epicker,
|
||||
#ublock0-epicker body {
|
||||
background: transparent;
|
||||
color: var(--default-ink);
|
||||
cursor: not-allowed;
|
||||
font: 12px sans-serif;
|
||||
height: 100vh;
|
||||
@ -13,8 +12,8 @@ html#ublock0-epicker,
|
||||
outline: none;
|
||||
}
|
||||
#ublock0-epicker aside {
|
||||
background-color: var(--default-surface);
|
||||
border: 1px solid var(--default-surface-border);
|
||||
background-color: var(--surface-1);
|
||||
border: 1px solid var(--border-2);
|
||||
bottom: 2px;
|
||||
box-sizing: border-box;
|
||||
cursor: default;
|
||||
@ -39,27 +38,9 @@ html#ublock0-epicker,
|
||||
margin: 0.25em 0 0 0;
|
||||
}
|
||||
#ublock0-epicker button {
|
||||
background-color: var(--button-surface);
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: none;
|
||||
color: var(--button-ink);
|
||||
cursor: pointer;
|
||||
padding: 0.4em 0.8em;
|
||||
}
|
||||
#ublock0-epicker button:disabled {
|
||||
color: var(--button-disabled-ink);
|
||||
background-color: var(--button-disabled-surface);
|
||||
}
|
||||
#ublock0-epicker button:not(:disabled):hover {
|
||||
background-color: var(--button-surface-hover);
|
||||
}
|
||||
#ublock0-epicker #create:not(:disabled) {
|
||||
background-color: var(--button-important-surface);
|
||||
}
|
||||
#ublock0-epicker #create:not(:disabled):hover {
|
||||
background-color: var(--button-important-surface-hover);
|
||||
min-height: 32px;
|
||||
padding: 0 0.8em;
|
||||
}
|
||||
#ublock0-epicker.preview #preview {
|
||||
background-color: var(--button-preferred-surface);
|
||||
@ -82,7 +63,7 @@ html#ublock0-epicker,
|
||||
width: 100%;
|
||||
}
|
||||
#ublock0-epicker section > div:first-child {
|
||||
border: 1px solid var(--default-surface-border);
|
||||
border: 1px solid var(--border-2);
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
@ -222,10 +203,10 @@ html#ublock0-epicker,
|
||||
white-space: nowrap;
|
||||
}
|
||||
#ublock0-epicker #candidateFilters .changeFilter li.active {
|
||||
border: 1px dotted var(--blue-50);
|
||||
border: 1px dotted rgb(var(--blue-50));
|
||||
}
|
||||
#ublock0-epicker #candidateFilters .changeFilter li:hover {
|
||||
background-color: var(--default-surface-hover);
|
||||
background-color: var(--surface-2);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
.fa-icon > * {
|
||||
pointer-events: none;
|
||||
}
|
||||
/*
|
||||
.fa-icon.disabled,
|
||||
.fa-icon[disabled] {
|
||||
color: var(--button-disabled-ink);
|
||||
@ -22,6 +23,7 @@
|
||||
stroke: var(--button-disabled-ink);
|
||||
pointer-events: none;
|
||||
}
|
||||
*/
|
||||
.fa-icon > .fa-icon-badge,
|
||||
.fa-icon.disabled > .fa-icon-badge {
|
||||
visibility: hidden;
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
#domInspector ul {
|
||||
background-color: var(--default-surface);
|
||||
background-color: var(--surface-1);
|
||||
margin: 0;
|
||||
padding-left: 1em;
|
||||
}
|
||||
@ -25,7 +25,7 @@
|
||||
#domInspector li.isCosmeticHide,
|
||||
#domInspector li.isCosmeticHide ul,
|
||||
#domInspector li.isCosmeticHide li {
|
||||
background-color: #fee;
|
||||
background-color: var(--surface-2);
|
||||
}
|
||||
#domInspector li > * {
|
||||
display: inline-block;
|
||||
@ -37,7 +37,7 @@
|
||||
color: #aaa;
|
||||
}
|
||||
#domInspector li > span:first-child {
|
||||
color: var(--default-ink);
|
||||
color: var(--ink-1);
|
||||
cursor: default;
|
||||
font-size: 1rem;
|
||||
margin-right: 0;
|
||||
|
||||
@ -12,7 +12,7 @@ textarea {
|
||||
width: 100%;
|
||||
}
|
||||
.permatoolbar {
|
||||
background-color: var(--default-surface);
|
||||
background-color: var(--surface-1);
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
@ -25,29 +25,21 @@ textarea {
|
||||
.permatoolbar > div {
|
||||
display: flex;
|
||||
}
|
||||
.permatoolbar .button {
|
||||
cursor: pointer;
|
||||
font-size: 150%;
|
||||
padding: 0.25em;
|
||||
.permatoolbar button.iconified {
|
||||
padding-left: var(--default-gap-xsmall);
|
||||
padding-right: var(--default-gap-xsmall);
|
||||
}
|
||||
.permatoolbar .button.active {
|
||||
fill: #5F9EA0;
|
||||
.permatoolbar button.active {
|
||||
fill: rgb(var(--primary-color-50));
|
||||
}
|
||||
.permatoolbar .button:hover {
|
||||
background-color: var(--default-surface-hover);
|
||||
.permatoolbar button > .fa-icon {
|
||||
font-size: 180%;
|
||||
}
|
||||
#pageSelector {
|
||||
min-width: 10em;
|
||||
padding: 0.25em 0;
|
||||
width: 50vw;
|
||||
}
|
||||
body[dir="ltr"] #pageSelector {
|
||||
margin-right: 1em;
|
||||
}
|
||||
body[dir="rtl"] #pageSelector {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
#showpopup {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@ -85,10 +77,10 @@ body[dir="rtl"] #pageSelector {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.inspector:not(.vExpanded) .vCompactToggler.button {
|
||||
.inspector:not(.vExpanded) button.vCompactToggler > .fa-icon {
|
||||
transform: scaleY(-1)
|
||||
}
|
||||
.hCompact .hCompactToggler.button {
|
||||
.hCompact button.hCompactToggler > .fa-icon {
|
||||
transform: scaleX(-1)
|
||||
}
|
||||
|
||||
@ -96,13 +88,13 @@ body[dir="rtl"] #pageSelector {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#netInspector #pause > span:last-of-type {
|
||||
#netInspector #pause > .fa-icon[data-i18n-title="loggerUnpauseTip"] {
|
||||
display: none;
|
||||
}
|
||||
#netInspector.paused #pause > span:first-of-type {
|
||||
#netInspector.paused #pause > .fa-icon[data-i18n-title="loggerPauseTip"] {
|
||||
display: none;
|
||||
}
|
||||
#netInspector.paused #pause > span:last-of-type {
|
||||
#netInspector.paused #pause > .fa-icon[data-i18n-title="loggerUnpauseTip"] {
|
||||
display: inline-flex;
|
||||
fill: #5F9EA0;
|
||||
}
|
||||
@ -135,7 +127,7 @@ body[dir="rtl"] #pageSelector {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
#netInspector #filterExprPicker {
|
||||
background-color: var(--default-surface);
|
||||
background-color: var(--surface-1);
|
||||
border: 1px solid gray;
|
||||
display: none;
|
||||
position: absolute;
|
||||
@ -183,12 +175,12 @@ body[dir="rtl"] #netInspector #filterExprPicker {
|
||||
margin: 0;
|
||||
}
|
||||
#netInspector #filterExprPicker span[data-filtex]:hover {
|
||||
background-color: aliceblue;
|
||||
border: 1px solid lightblue;
|
||||
background-color: rgb(var(--primary-color-70) / 25%);
|
||||
border: 1px solid rgb(var(--primary-color-70));
|
||||
}
|
||||
#netInspector #filterExprPicker span.on[data-filtex] {
|
||||
background-color: lightblue;
|
||||
border: 1px solid lightblue;
|
||||
background-color: rgb(var(--primary-color-70) / 40%);
|
||||
border: 1px solid rgb(var(--primary-color-70));
|
||||
}
|
||||
|
||||
#netInspector .vscrollable {
|
||||
@ -262,7 +254,7 @@ body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] {
|
||||
}
|
||||
#vwRenderer .logEntry > div.extendedRealm,
|
||||
#vwRenderer .logEntry > div.redirect {
|
||||
background-color: rgba(255, 255, 0, 0.1);
|
||||
background-color: var(--logger-redirected-surface);
|
||||
}
|
||||
body.colorBlind #vwRenderer .logEntry > div.extendedRealm,
|
||||
body.colorBlind #vwRenderer .logEntry > div.redirect {
|
||||
@ -289,7 +281,7 @@ body.colorBlind #vwRenderer .logEntry > div.redirect {
|
||||
}
|
||||
|
||||
#vwRenderer .logEntry > div > span {
|
||||
border: 1px solid #ccc;
|
||||
border: 1px dotted var(--border-1);
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
box-sizing: border-box;
|
||||
@ -453,7 +445,7 @@ body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] b
|
||||
}
|
||||
|
||||
#popupContainer {
|
||||
background-color: var(--default-surface);
|
||||
background-color: var(--surface-1);
|
||||
border: 1px solid gray;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
@ -489,7 +481,7 @@ body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] b
|
||||
position: relative;
|
||||
}
|
||||
#modalOverlay > div > div:nth-of-type(1) {
|
||||
background-color: var(--default-surface);
|
||||
background-color: var(--surface-1);
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 1em;
|
||||
@ -498,13 +490,13 @@ body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] b
|
||||
width: 90vw;
|
||||
}
|
||||
#modalOverlay > div > div:nth-of-type(2) {
|
||||
stroke: var(--default-ink);
|
||||
stroke: var(--ink-1);
|
||||
stroke-width: 3px;
|
||||
position: absolute;
|
||||
width: 1.6em;
|
||||
height: 1.6em;
|
||||
bottom: calc(100% + 2px);
|
||||
background-color: var(--default-surface);
|
||||
background-color: var(--surface-1);
|
||||
}
|
||||
body[dir="ltr"] #modalOverlay > div > div:nth-of-type(2) {
|
||||
right: 0;
|
||||
@ -513,7 +505,7 @@ body[dir="rtl"] #modalOverlay > div > div:nth-of-type(2) {
|
||||
left: 0;
|
||||
}
|
||||
#modalOverlay > div > div:nth-of-type(2):hover {
|
||||
background-color: var(--default-surface-hover);
|
||||
background-color: var(--surface-2);
|
||||
}
|
||||
#modalOverlay > div > div:nth-of-type(2) > * {
|
||||
pointer-events: none;
|
||||
@ -569,17 +561,16 @@ body[dir="rtl"] #modalOverlay > div > div:nth-of-type(2) {
|
||||
}
|
||||
|
||||
#netFilteringDialog > .headers {
|
||||
border-bottom: 1px solid #888;
|
||||
border-bottom: 1px solid var(--border-4);
|
||||
line-height: 2;
|
||||
position: relative;
|
||||
}
|
||||
#netFilteringDialog > .headers > .header {
|
||||
background-color: #eee;
|
||||
border: 1px solid #aaa;
|
||||
border-bottom: 1px solid #888;
|
||||
border: 1px solid var(--border-2);
|
||||
border-bottom: 1px solid var(--border-4);
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
color: #888;
|
||||
color: var(--border-2);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 0 1em;
|
||||
@ -590,10 +581,10 @@ body[dir="rtl"] #modalOverlay > div > div:nth-of-type(2) {
|
||||
#netFilteringDialog[data-pane="details"] > .headers > [data-pane="details"],
|
||||
#netFilteringDialog[data-pane="dynamic"] > .headers > [data-pane="dynamic"],
|
||||
#netFilteringDialog[data-pane="static"] > .headers > [data-pane="static"] {
|
||||
background-color: white;
|
||||
border-color: #888;
|
||||
border-bottom: 1px solid white;
|
||||
color: black;
|
||||
background-color: var(--surface-1);
|
||||
border-color: var(--border-4);
|
||||
border-bottom: 1px solid transparent;
|
||||
color: var(--ink-1);
|
||||
}
|
||||
#netFilteringDialog > .headers > .tools {
|
||||
bottom: 0;
|
||||
@ -640,9 +631,9 @@ body[dir="rtl"] #netFilteringDialog > .headers > .tools {
|
||||
}
|
||||
#netFilteringDialog > .panes > .details > div {
|
||||
align-items: stretch;
|
||||
background-color: #e6e6e6;
|
||||
background-color: var(--surface-2);
|
||||
border: 0;
|
||||
border-bottom: 1px solid white;
|
||||
border-bottom: 1px solid var(--surface-0);
|
||||
display: flex;
|
||||
}
|
||||
#netFilteringDialog > .panes > .details > div > span {
|
||||
@ -656,10 +647,10 @@ body[dir="rtl"] #netFilteringDialog > .headers > .tools {
|
||||
width: 8em;
|
||||
}
|
||||
body[dir="ltr"] #netFilteringDialog > .panes > .details > div > span:nth-of-type(1) {
|
||||
border-right: 1px solid white;
|
||||
border-right: 1px solid var(--surface-0);
|
||||
}
|
||||
body[dir="rtl"] #netFilteringDialog > .panes > .details > div > span:nth-of-type(1) {
|
||||
border-left: 1px solid white;
|
||||
border-left: 1px solid var(--surface-0);
|
||||
}
|
||||
#netFilteringDialog > .panes > .details > div > span:nth-of-type(2) {
|
||||
flex-grow: 1;
|
||||
@ -680,7 +671,7 @@ body[dir="rtl"] #netFilteringDialog > .panes > .details > div > span:nth-of-type
|
||||
}
|
||||
#netFilteringDialog > .panes > .details .exceptor {
|
||||
align-items: center;
|
||||
border-left: 1px solid white;
|
||||
border-left: 1px solid var(--surface-0);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
font-family: monospace;
|
||||
@ -693,7 +684,7 @@ body[dir="rtl"] #netFilteringDialog > .panes > .details > div > span:nth-of-type
|
||||
text-decoration: line-through;
|
||||
}
|
||||
#netFilteringDialog > .panes > .details .exceptored .exceptor {
|
||||
background-color: lightblue;
|
||||
background-color: rgb(var(--primary-color-50) / 50%);
|
||||
}
|
||||
#netFilteringDialog > .panes > .details .exceptor::before {
|
||||
content: '#@#';
|
||||
@ -715,10 +706,10 @@ body[dir="rtl"] #netFilteringDialog > .panes > .details > div > span:nth-of-type
|
||||
width: 4.5em;
|
||||
}
|
||||
body[dir="ltr"] #netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(1) {
|
||||
border-right: 1px solid white;
|
||||
border-right: 1px solid var(--surface-0);
|
||||
}
|
||||
body[dir="rtl"] #netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(1) {
|
||||
border-left: 1px solid white;
|
||||
border-left: 1px solid var(--surface-0);
|
||||
}
|
||||
#netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(2) {
|
||||
align-self: center;
|
||||
@ -744,12 +735,12 @@ body.dirty #netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules {
|
||||
display: none;
|
||||
}
|
||||
#netFilteringDialog > div.panes > .dynamic .entry {
|
||||
background-color: #e6e6e6;
|
||||
background-color: var(--surface-2);
|
||||
border: 0;
|
||||
border-bottom: 1px solid white;
|
||||
border-bottom: 1px solid var(--surface-0);
|
||||
}
|
||||
#netFilteringDialog > div.panes > .dynamic .entry:hover {
|
||||
background-color: #f0f0f0;
|
||||
background-color: var(--surface-3);
|
||||
}
|
||||
#netFilteringDialog > div.panes > .dynamic .entry > .action {
|
||||
background-color: transparent;
|
||||
@ -913,7 +904,7 @@ body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action > .
|
||||
display: inline-flex;
|
||||
}
|
||||
#loggerExportDialog .options span[data-i18n] {
|
||||
border: 1px solid lightblue;
|
||||
border: 1px solid rgb(var(--primary-color-70));
|
||||
cursor: pointer;
|
||||
font-size: 90%;
|
||||
margin: 0;
|
||||
@ -921,11 +912,11 @@ body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action > .
|
||||
white-space: nowrap;
|
||||
}
|
||||
#loggerExportDialog .options span[data-i18n]:hover {
|
||||
background-color: aliceblue;
|
||||
background-color: rgb(var(--primary-color-70) / 40%);
|
||||
}
|
||||
#loggerExportDialog .options span.on[data-i18n],
|
||||
#loggerExportDialog .options span.pushbutton:active {
|
||||
background-color: lightblue;
|
||||
background-color: rgb(var(--primary-color-70) / 40%);
|
||||
}
|
||||
#loggerExportDialog .output {
|
||||
font: smaller mono;
|
||||
|
||||
@ -24,8 +24,8 @@
|
||||
opacity: 0;
|
||||
}
|
||||
a {
|
||||
color: var(--default-ink);
|
||||
fill: var(--default-ink);
|
||||
color: var(--ink-1);
|
||||
fill: var(--ink-1);
|
||||
text-decoration: none;
|
||||
}
|
||||
:focus {
|
||||
@ -55,7 +55,7 @@ hr {
|
||||
}
|
||||
|
||||
#sticky {
|
||||
background-color: var(--default-surface);
|
||||
background-color: var(--surface-1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
@ -83,7 +83,7 @@ hr {
|
||||
stroke-width: 64;
|
||||
}
|
||||
body.off #switch {
|
||||
fill: var(--default-surface);
|
||||
fill: var(--surface-1);
|
||||
stroke: var(--checkbox-ink);
|
||||
}
|
||||
.rulesetTools {
|
||||
@ -96,11 +96,11 @@ body.off #switch {
|
||||
width: 25%;
|
||||
}
|
||||
.rulesetTools [id] {
|
||||
background-color: var(--bg-transient-notice);
|
||||
border: 1px solid #ddc;
|
||||
background-color: var(--popup-ruleset-tool-surface);
|
||||
border-radius: 4px;
|
||||
box-shadow: var(--popup-ruleset-tool-shadow) 0 1px 1px;
|
||||
cursor: pointer;
|
||||
fill: var(--default-ink-a50);
|
||||
fill: var(--popup-ruleset-tool-ink);
|
||||
flex-grow: 1;
|
||||
font-size: 2.2em;
|
||||
padding: 0;
|
||||
@ -109,6 +109,9 @@ body.off #switch {
|
||||
.rulesetTools [id]:not(:first-of-type) {
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
.rulesetTools [id] > svg {
|
||||
fill: var(--ink-4);
|
||||
}
|
||||
body.needReload #refresh,
|
||||
body.needSave #saveRules,
|
||||
body.needSave #revertRules {
|
||||
@ -290,7 +293,7 @@ body[data-more=""] #lessButton {
|
||||
}
|
||||
#firewall > div > span,
|
||||
#actionSelector > #dynaCounts {
|
||||
background-color: var(--bg-popup-cell-2);
|
||||
background-color: var(--popup-cell-surface);
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
@ -347,7 +350,7 @@ body[data-more=""] #lessButton {
|
||||
opacity: 0.5;
|
||||
}
|
||||
#firewall > div.isCname > span:first-of-type {
|
||||
color: var(--fg-popup-cell-cname);
|
||||
color: var(--popup-cell-cname-ink);
|
||||
}
|
||||
#firewall > div > span:first-of-type > sub {
|
||||
display: inline-block;
|
||||
@ -368,7 +371,7 @@ body[data-more=""] #lessButton {
|
||||
}
|
||||
#firewall > div > span:nth-of-type(3),
|
||||
#firewall > div > span:nth-of-type(4) {
|
||||
color: var(--fg-0-70);
|
||||
color: var(--ink-2);
|
||||
display: none;
|
||||
font-family: monospace;
|
||||
text-align: center;
|
||||
@ -381,11 +384,11 @@ body[data-more=""] #lessButton {
|
||||
pointer-events: auto;
|
||||
}
|
||||
#firewall > div.isDomain.hasSubdomains > span:first-of-type > span::before {
|
||||
color: var(--default-ink-a40);
|
||||
color: var(--ink-3);
|
||||
content: '\2026\A0';
|
||||
}
|
||||
#firewall > div:first-of-type > span:first-of-type::before {
|
||||
color: var(--fg-0-50);
|
||||
color: var(--ink-3);
|
||||
content: '+';
|
||||
padding-right: 0.25em;
|
||||
}
|
||||
@ -468,7 +471,7 @@ body.advancedUser #firewall > div > span:first-of-type ~ span {
|
||||
box-sizing: border-box;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
filter: var(--bg-popup-cell-label-filter);
|
||||
filter: var(--popup-cell-label-filter);
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
@ -476,49 +479,49 @@ body.advancedUser #firewall > div > span:first-of-type ~ span {
|
||||
width: 7px;
|
||||
}
|
||||
#firewall > div.isRootContext > span:first-of-type::before {
|
||||
background: var(--fg-0-50);
|
||||
background: var(--ink-3);
|
||||
width: 14px !important;
|
||||
}
|
||||
#firewall > div.allowed > span:first-of-type::before,
|
||||
#firewall > div.isDomain.totalAllowed > span:first-of-type::before {
|
||||
background: var(--bg-popup-cell-allow-own);
|
||||
background: var(--popup-cell-allow-own-surface);
|
||||
}
|
||||
#firewall > div.blocked > span:first-of-type::before,
|
||||
#firewall > div.isDomain.totalBlocked > span:first-of-type::before {
|
||||
background: var(--bg-popup-cell-block-own);
|
||||
background: var(--popup-cell-block-own-surface);
|
||||
}
|
||||
#firewall > div.allowed.blocked > span:first-of-type::before,
|
||||
#firewall > div.isDomain.totalAllowed.totalBlocked > span:first-of-type::before {
|
||||
background: var(--bg-popup-cell-label-mixed);
|
||||
background: var(--popup-cell-label-mixed-surface);
|
||||
}
|
||||
/* Rule cells */
|
||||
body.advancedUser #firewall > div > span.allowRule,
|
||||
#actionSelector > #dynaAllow {
|
||||
background: var(--bg-popup-cell-allow);
|
||||
background: var(--popup-cell-allow-surface);
|
||||
}
|
||||
body.advancedUser #firewall > div > span.blockRule,
|
||||
#actionSelector > #dynaBlock {
|
||||
background: var(--bg-popup-cell-block);
|
||||
background: var(--popup-cell-block-surface);
|
||||
}
|
||||
body.advancedUser #firewall > div > span.noopRule,
|
||||
#actionSelector > #dynaNoop {
|
||||
background: var(--bg-popup-cell-noop);
|
||||
background: var(--popup-cell-noop-surface);
|
||||
}
|
||||
body.advancedUser #firewall > div > span.ownRule,
|
||||
#firewall > div > span.ownRule {
|
||||
color: var(--default-surface);
|
||||
color: var(--surface-1);
|
||||
}
|
||||
body.advancedUser #firewall > div > span.allowRule.ownRule,
|
||||
:root:not(.mobile) #actionSelector > #dynaAllow:hover {
|
||||
background: var(--bg-popup-cell-allow-own);
|
||||
background: var(--popup-cell-allow-own-surface);
|
||||
}
|
||||
body.advancedUser #firewall > div > span.blockRule.ownRule,
|
||||
:root:not(.mobile) #actionSelector > #dynaBlock:hover {
|
||||
background: var(--bg-popup-cell-block-own);
|
||||
background: var(--popup-cell-block-own-surface);
|
||||
}
|
||||
body.advancedUser #firewall > div > span.noopRule.ownRule,
|
||||
:root:not(.mobile) #actionSelector > #dynaNoop:hover {
|
||||
background: var(--bg-popup-cell-noop-own);
|
||||
background: var(--popup-cell-noop-own-surface);
|
||||
}
|
||||
|
||||
#actionSelector {
|
||||
@ -651,19 +654,25 @@ body:not([data-more~="e"]) [data-more="e"] {
|
||||
:root.desktop body {
|
||||
--popup-gap: calc(var(--font-size) * 0.875);
|
||||
}
|
||||
:root.desktop #switch:hover {
|
||||
background-color: var(--default-surface-hover);
|
||||
:root.desktop body:not(.off) #switch:hover {
|
||||
fill: rgb(var(--popup-power-ink-rgb) / 90%);
|
||||
}
|
||||
:root.desktop body.off #switch:hover {
|
||||
stroke: var(--popup-power-ink);
|
||||
}
|
||||
:root.desktop .rulesetTools [id]:hover {
|
||||
fill: var(--default-ink);
|
||||
background-color: var(--popup-ruleset-tool-surface-hover);
|
||||
}
|
||||
:root.desktop .rulesetTools [id]:hover > svg {
|
||||
fill: var(--ink-3);
|
||||
}
|
||||
:root.desktop #firewall {
|
||||
direction: rtl;
|
||||
line-height: 1.4;
|
||||
}
|
||||
:root.desktop .tool:hover {
|
||||
background-color: var(--default-surface-hover);
|
||||
background-color: var(--surface-2);
|
||||
}
|
||||
:root.desktop #moreOrLess > span:hover {
|
||||
background-color: var(--default-surface-hover);
|
||||
background-color: var(--surface-2);
|
||||
}
|
||||
|
||||
@ -1,3 +1,13 @@
|
||||
:root {
|
||||
--bg-tooltip: hsla(60, 100%, 97%, 1);
|
||||
--popup-power-ink: rgb(0 110 254);
|
||||
--popup-power-ink-hover: rgb(var(--blue-60));
|
||||
--ink-5: rgb(var(--ink-rgb) / 20%);
|
||||
}
|
||||
:root.dark {
|
||||
--popup-power-ink-hover: rgb(var(--blue-30));
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -8,9 +18,9 @@ body {
|
||||
}
|
||||
|
||||
h2 {
|
||||
background-color: var(--bg-popup-cell-1);
|
||||
background-color: var(--surface-2);
|
||||
border: 0;
|
||||
color: var(--fg-0-70);
|
||||
color: var(--ink-3);
|
||||
cursor: pointer;
|
||||
font-size: 100%;
|
||||
font-weight: normal;
|
||||
@ -100,11 +110,11 @@ p {
|
||||
}
|
||||
#switch .fa-icon:hover {
|
||||
color: var(--popup-power-ink-hover);
|
||||
fill: var(--popup-power-ink-hover);
|
||||
fill: var(--popup-power-ink-hover);
|
||||
}
|
||||
body.off #switch .fa-icon {
|
||||
color: var(--fg-0-20);
|
||||
fill: var(--fg-0-20);
|
||||
color: var(--ink-5);
|
||||
fill: var(--ink-5);
|
||||
}
|
||||
#basicTools {
|
||||
margin: 1.2em 0 0.5em 0;
|
||||
@ -113,9 +123,9 @@ body.off #switch .fa-icon {
|
||||
margin-left: 0;
|
||||
}
|
||||
.tool {
|
||||
color: var(--fg-0-40);
|
||||
color: var(--ink-4);
|
||||
fill: var(--ink-4);
|
||||
cursor: pointer;
|
||||
fill: var(--fg-0-40);
|
||||
margin-left: 0.8em;
|
||||
min-width: 1em;
|
||||
padding: 0 0.2em;
|
||||
@ -133,7 +143,7 @@ body.off #switch .fa-icon {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
.statName {
|
||||
color: var(--fg-0-70);
|
||||
color: var(--ink-3);
|
||||
font-size: 85%;
|
||||
margin: 0.8em 0.2em 0.4em 0.2em;
|
||||
}
|
||||
@ -141,7 +151,7 @@ body.off #switch .fa-icon {
|
||||
margin: 0;
|
||||
}
|
||||
#extraTools {
|
||||
background-color: var(--bg-popup-cell-1);
|
||||
background-color: var(--surface-2);
|
||||
border: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -152,9 +162,9 @@ body.responsive #extraTools {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
#extraTools > span {
|
||||
color: var(--fg-0-40);
|
||||
color: var(--ink-4);
|
||||
fill: var(--ink-4);
|
||||
cursor: pointer;
|
||||
fill: var(--fg-0-40);
|
||||
font-size: 1.2em;
|
||||
margin: 0 0.8em 0 0;
|
||||
position: relative;
|
||||
@ -180,12 +190,12 @@ body.responsive #extraTools {
|
||||
}
|
||||
|
||||
#refresh {
|
||||
background-color: var(--bg-transient-notice);
|
||||
background-color: var(--notice-surface);
|
||||
border: 1px solid #ddc;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
fill: var(--fg-0-50);
|
||||
fill: var(--ink-3);
|
||||
font-size: 3em;
|
||||
justify-content: center;
|
||||
left: 4px;
|
||||
@ -207,7 +217,7 @@ body.dirty #refresh:hover {
|
||||
border-radius: 3px;
|
||||
box-shadow: 1px 1px 3px gray;
|
||||
box-sizing: border-box;
|
||||
color: var(--fg-tooltip);
|
||||
color: var(--ink-1);
|
||||
cursor: pointer;
|
||||
direction: ltr;
|
||||
font: 12px sans-serif;
|
||||
@ -262,7 +272,7 @@ body[dir="rtl"] #tooltip {
|
||||
display: none;
|
||||
}
|
||||
#firewallContainer > div > span {
|
||||
background-color: var(--bg-popup-cell-1);
|
||||
background-color: var(--surface-2);
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
@ -284,7 +294,7 @@ body[dir="rtl"] #tooltip {
|
||||
word-break: break-word;
|
||||
}
|
||||
#firewallContainer > div.isCname > span:first-of-type {
|
||||
color: var(--fg-popup-cell-cname);
|
||||
color: var(--popup-cell-cname-ink);
|
||||
}
|
||||
#firewallContainer > div > span:first-of-type > sub {
|
||||
display: inline-block;
|
||||
@ -304,7 +314,7 @@ body[dir="rtl"] #tooltip {
|
||||
}
|
||||
#firewallContainer > div > span:nth-of-type(3),
|
||||
#firewallContainer > div > span:nth-of-type(4) {
|
||||
color: var(--fg-0-70);
|
||||
color: var(--ink-3);
|
||||
display: none;
|
||||
font-family: monospace;
|
||||
text-align: center;
|
||||
@ -313,7 +323,7 @@ body[dir="rtl"] #tooltip {
|
||||
font-weight: bold;
|
||||
}
|
||||
#firewallContainer > div:first-of-type > span:first-of-type::before {
|
||||
color: var(--fg-0-50);
|
||||
color: var(--ink-3);
|
||||
content: '+';
|
||||
padding-right: 0.25em;
|
||||
}
|
||||
@ -395,7 +405,7 @@ body.advancedUser #firewallContainer > div > span:first-of-type ~ span {
|
||||
box-sizing: border-box;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
filter: var(--bg-popup-cell-label-filter);
|
||||
filter: var(--popup-cell-label-filter);
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
@ -403,49 +413,49 @@ body.advancedUser #firewallContainer > div > span:first-of-type ~ span {
|
||||
width: 7px;
|
||||
}
|
||||
#firewallContainer > div.isRootContext > span:first-of-type::before {
|
||||
background-color: var(--fg-0-50);
|
||||
background-color: var(--ink-3);
|
||||
width: 14px !important;
|
||||
}
|
||||
#firewallContainer > div.allowed > span:first-of-type::before,
|
||||
#firewallContainer > div.isDomain.totalAllowed > span:first-of-type::before {
|
||||
background-color: var(--bg-popup-cell-allow-own);
|
||||
background-color: var(--popup-cell-allow-own-surface);
|
||||
}
|
||||
#firewallContainer > div.blocked > span:first-of-type::before,
|
||||
#firewallContainer > div.isDomain.totalBlocked > span:first-of-type::before {
|
||||
background-color: var(--bg-popup-cell-block-own);
|
||||
background-color: var(--popup-cell-block-own-surface);
|
||||
}
|
||||
#firewallContainer > div.allowed.blocked > span:first-of-type::before,
|
||||
#firewallContainer > div.isDomain.totalAllowed.totalBlocked > span:first-of-type::before {
|
||||
background-color: var(--bg-popup-cell-label-mixed);
|
||||
background-color: var(--popup-cell-label-mixed-surface);
|
||||
}
|
||||
/* Rule cells */
|
||||
body.advancedUser #firewallContainer > div > span.allowRule,
|
||||
#actionSelector > #dynaAllow {
|
||||
background-color: var(--bg-popup-cell-allow);
|
||||
background-color: var(--popup-cell-allow-surface);
|
||||
}
|
||||
body.advancedUser #firewallContainer > div > span.blockRule,
|
||||
#actionSelector > #dynaBlock {
|
||||
background-color: var(--bg-popup-cell-block);
|
||||
background-color: var(--popup-cell-block-surface);
|
||||
}
|
||||
body.advancedUser #firewallContainer > div > span.noopRule,
|
||||
#actionSelector > #dynaNoop {
|
||||
background-color: var(--bg-popup-cell-noop);
|
||||
background-color: var(--popup-cell-noop-surface);
|
||||
}
|
||||
body.advancedUser #firewallContainer > div > span.ownRule,
|
||||
#firewallContainer > div > span.ownRule {
|
||||
color: var(--default-surface);
|
||||
color: var(--surface-1);
|
||||
}
|
||||
body.advancedUser #firewallContainer > div > span.allowRule.ownRule,
|
||||
#actionSelector > #dynaAllow:hover {
|
||||
background-color: var(--bg-popup-cell-allow-own);
|
||||
background-color: var(--popup-cell-allow-own-surface);
|
||||
}
|
||||
body.advancedUser #firewallContainer > div > span.blockRule.ownRule,
|
||||
#actionSelector > #dynaBlock:hover {
|
||||
background-color: var(--bg-popup-cell-block-own);
|
||||
background-color: var(--popup-cell-block-own-surface);
|
||||
}
|
||||
body.advancedUser #firewallContainer > div > span.noopRule.ownRule,
|
||||
#actionSelector > #dynaNoop:hover {
|
||||
background-color: var(--bg-popup-cell-noop-own);
|
||||
background-color: var(--popup-cell-noop-own-surface);
|
||||
}
|
||||
|
||||
#actionSelector {
|
||||
@ -493,12 +503,12 @@ body.advancedUser #firewallContainer > div > span.noopRule.ownRule,
|
||||
top: 4px;
|
||||
}
|
||||
#rulesetTools > span {
|
||||
background-color: var(--bg-transient-notice);
|
||||
background-color: var(--notice-surface);
|
||||
border: 1px solid #ddc;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
fill: var(--fg-0-50);
|
||||
fill: var(--ink-3);
|
||||
font-size: 1.8em;
|
||||
line-height: 1.0;
|
||||
margin: 0;
|
||||
|
||||
@ -6,6 +6,7 @@ body {
|
||||
max-width: 800px;
|
||||
}
|
||||
h3 {
|
||||
color: var(--fieldset-header-ink);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.supportEntry {
|
||||
|
||||
@ -4,64 +4,127 @@
|
||||
https://protocol.mozilla.org/
|
||||
https://material.io/
|
||||
|
||||
*/
|
||||
|
||||
/**
|
||||
Color names from:
|
||||
https://protocol.mozilla.org/fundamentals/color.html
|
||||
|
||||
Tools:
|
||||
Lightness validator: https://www.hsluv.org/
|
||||
Contrast validator: https://bernaferrari.github.io/color-studio/#/
|
||||
*/
|
||||
:root {
|
||||
--blue-10: #80ebff;
|
||||
--blue-40: #0090ed;
|
||||
--blue-50: #0060df;
|
||||
--blue-60: #0250bb;
|
||||
--dark-gray-10: #52525e;
|
||||
--dark-gray-30: #42414d;
|
||||
--dark-gray-40: #3a3944;
|
||||
--dark-gray-50: #32313c;
|
||||
--dark-gray-70: #23222b;
|
||||
--dark-gray-80: #1c1b22;
|
||||
--dark-gray-90: #15141a;
|
||||
--ink-20: #312a65;
|
||||
--ink-50: #291d4f;
|
||||
--ink-80: #20123a;
|
||||
--ink-80-a4: #20123a0a;
|
||||
--ink-80-a40: #20123a66;
|
||||
--ink-80-a50: #20123a80;
|
||||
--ink-90: #1d1133;
|
||||
--light-gray-10: #f9f9fb;
|
||||
--light-gray-10-a4: #f9f9fb0a;
|
||||
--light-gray-10-a12: #f9f9fb1f;
|
||||
--light-gray-10-a16: #f9f9fb29;
|
||||
--light-gray-20: #f0f0f4;
|
||||
--light-gray-25: #e8e8ed;
|
||||
--light-gray-30: #e0e0e6;
|
||||
--light-gray-30-a50: #e0e0e680;
|
||||
--light-gray-40: #cfcfd8;
|
||||
--light-gray-50: #bfbfc9;
|
||||
--light-gray-60: #afafba;
|
||||
--light-gray-70: #9f9fad;
|
||||
--light-gray-80: #8f8f9e;
|
||||
--light-gray-90: #80808f;
|
||||
--orange-80: #9e280b;
|
||||
--purple-60: #952bb9;
|
||||
--red-60: #e22850;
|
||||
--violet-40: #ab71ff;
|
||||
--violet-60: #7542e5;
|
||||
--violet-70: #592acb;
|
||||
--violet-80: #45278d;
|
||||
--yellow-10: #ffff98;
|
||||
--yellow-30: #ffd567;
|
||||
--yellow-40: #ffbd4f;
|
||||
--yellow-50: #ffa436;
|
||||
--yellow-60: #e27f2e;
|
||||
--black: #000;
|
||||
--white: #fff;
|
||||
--blue-5: 170 242 255;
|
||||
--blue-10: 128 235 255;
|
||||
--blue-20: 0 221 255;
|
||||
--blue-30: 0 179 244;
|
||||
--blue-40: 0 144 237;
|
||||
--blue-50: 0 96 223;
|
||||
--blue-60: 2 80 187;
|
||||
--blue-70: 5 64 150;
|
||||
--blue-80: 7 48 114;
|
||||
--blue-90: 9 32 77;
|
||||
--dark-gray-10: 82 82 94;
|
||||
--dark-gray-20: 74 74 85;
|
||||
--dark-gray-30: 66 65 77;
|
||||
--dark-gray-40: 58 57 68;
|
||||
--dark-gray-50: 50 49 60;
|
||||
--dark-gray-60: 43 42 51;
|
||||
--dark-gray-70: 35 34 43;
|
||||
--dark-gray-80: 28 27 34;
|
||||
--dark-gray-90: 21 20 26;
|
||||
--green-30: 136 255 209;
|
||||
--green-40: 84 255 189;
|
||||
--green-50: 63 225 176;
|
||||
--green-60: 42 195 162;
|
||||
--green-70: 0 135 135;
|
||||
--green-80: 0 94 94;
|
||||
--ink-10: 57 52 115;
|
||||
--ink-80: 32 18 58;
|
||||
--light-gray-10: 249 249 251;
|
||||
--light-gray-20: 240 240 244;
|
||||
--light-gray-30: 224 224 230;
|
||||
--light-gray-40: 207 207 216;
|
||||
--light-gray-50: 191 191 201;
|
||||
--light-gray-60: 175 175 186;
|
||||
--light-gray-70: 159 159 173;
|
||||
--light-gray-80: 143 143 158;
|
||||
--light-gray-90: 128 128 143;
|
||||
--orange-5: 255 244 222;
|
||||
--orange-10: 255 213 178;
|
||||
--orange-20: 255 181 135;
|
||||
--orange-30: 255 162 102;
|
||||
--orange-40: 255 138 80;
|
||||
--orange-50: 255 113 57;
|
||||
--orange-60: 226 89 32;
|
||||
--orange-70: 204 61 0;
|
||||
--orange-80: 158 40 11;
|
||||
--orange-90: 124 21 4;
|
||||
--purple-5: 247 226 255;
|
||||
--purple-10: 246 184 255;
|
||||
--purple-20: 246 143 255;
|
||||
--purple-30: 247 112 255;
|
||||
--purple-40: 215 76 240;
|
||||
--purple-50: 184 51 225;
|
||||
--purple-60: 149 43 185;
|
||||
--purple-70: 114 34 145;
|
||||
--purple-80: 78 26 105;
|
||||
--purple-90: 43 17 65;
|
||||
--red-20: 255 154 162;
|
||||
--red-30: 255 132 139;
|
||||
--red-40: 255 106 117;
|
||||
--red-50: 255 79 94;
|
||||
--red-60: 226 40 80;
|
||||
--red-70: 197 0 66;
|
||||
--violet-5: 231 223 255;
|
||||
--violet-10: 217 191 255;
|
||||
--violet-20: 203 158 255;
|
||||
--violet-30: 198 137 255;
|
||||
--violet-40: 171 113 255;
|
||||
--violet-50: 144 89 255;
|
||||
--violet-60: 117 66 229;
|
||||
--violet-70: 89 42 203;
|
||||
--violet-80: 69 39 141;
|
||||
--violet-90: 50 28 100;
|
||||
--yellow-5: 255 255 204;
|
||||
--yellow-10: 255 255 152;
|
||||
--yellow-20: 255 234 128;
|
||||
--yellow-30: 255 213 103;
|
||||
--yellow-40: 255 189 79;
|
||||
--yellow-50: 255 164 54;
|
||||
--yellow-60: 226 127 46;
|
||||
--yellow-70: 196 90 39;
|
||||
--yellow-80: 167 52 31;
|
||||
--yellow-90: 150 14 24;
|
||||
|
||||
/*
|
||||
* Reference gray: -light-gray-90, then calibrated with hsluv.org, where
|
||||
* the number is Luv.
|
||||
*
|
||||
* */
|
||||
--gray-5: 16 16 22;
|
||||
--gray-10: 27 27 35;
|
||||
--gray-15: 37 37 47;
|
||||
--gray-20: 47 47 59;
|
||||
--gray-25: 58 58 72;
|
||||
--gray-30: 69 69 85;
|
||||
--gray-35: 81 81 98;
|
||||
--gray-40: 93 93 110;
|
||||
--gray-45: 105 105 121;
|
||||
--gray-50: 118 118 133;
|
||||
--gray-55: 131 131 145;
|
||||
--gray-60: 144 144 156;
|
||||
--gray-65: 157 157 168;
|
||||
--gray-70: 170 170 180;
|
||||
--gray-75: 184 184 192;
|
||||
--gray-80: 198 198 204;
|
||||
--gray-85: 212 212 217;
|
||||
--gray-90: 226 226 229;
|
||||
--gray-95: 240 240 242;
|
||||
}
|
||||
|
||||
/**
|
||||
Font size
|
||||
*/
|
||||
/*
|
||||
* Font size
|
||||
*
|
||||
* */
|
||||
:root {
|
||||
--font-size: 14px;
|
||||
}
|
||||
@ -70,301 +133,338 @@
|
||||
--font-size: 16px;
|
||||
}
|
||||
|
||||
/**
|
||||
Components
|
||||
*/
|
||||
/*
|
||||
* Color themes
|
||||
*
|
||||
* Tool: hsluv.org
|
||||
*
|
||||
* */
|
||||
:root.h0 {
|
||||
--primary-color-30: 139 18 60; /* S:90 Luv:30 */
|
||||
--primary-color-40: 181 27 81; /* S:90 Luv:40 */
|
||||
--primary-color-50: 226 37 102; /* S:90 Luv:50 */
|
||||
--primary-color-60: 247 87 130; /* S:90 Luv:60 */
|
||||
--primary-color-70: 248 138 162; /* S:90 Luv:70 */
|
||||
--primary-color-70: 248 138 162; /* S:90 Luv:70 */
|
||||
--primary-color-80: 250 180 193; /* S:90 Luv:80 */
|
||||
}
|
||||
|
||||
:root.h45 {
|
||||
--primary-color-30: 98 63 17; /* S:90 Luv:30 */
|
||||
--primary-color-40: 130 85 25; /* S:90 Luv:40 */
|
||||
--primary-color-50: 162 107 34; /* S:90 Luv:50 */
|
||||
--primary-color-60: 196 131 43; /* S:90 Luv:60 */
|
||||
--primary-color-70: 232 155 53; /* S:90 Luv:70 */
|
||||
--primary-color-80: 251 185 123; /* S:90 Luv:80 */
|
||||
}
|
||||
|
||||
:root.h180 {
|
||||
--primary-color-30: 18 79 73; /* S:90 Luv:30 */
|
||||
--primary-color-40: 27 105 98; /* S:90 Luv:40 */
|
||||
--primary-color-50: 37 132 123; /* S:90 Luv:50 */
|
||||
--primary-color-60: 47 161 150; /* S:90 Luv:60 */
|
||||
--primary-color-70: 57 190 177; /* S:90 Luv:70 */
|
||||
--primary-color-80: 67 220 205; /* S:90 Luv:80 */
|
||||
}
|
||||
|
||||
:root.h225 {
|
||||
--primary-color-30: 20 77 95; /* S:90 Luv:30 */
|
||||
--primary-color-40: 29 102 125; /* S:90 Luv:40 */
|
||||
--primary-color-50: 39 128 157; /* S:90 Luv:50 */
|
||||
--primary-color-60: 50 156 190; /* S:90 Luv:60 */
|
||||
--primary-color-70: 60 184 224; /* S:90 Luv:70 */
|
||||
--primary-color-80: 110 211 250; /* S:90 Luv:80 */
|
||||
}
|
||||
|
||||
:root /* .h270 default */ {
|
||||
--primary-color-30: 72 31 194; /* S:90 Luv:30 */
|
||||
--primary-color-40: 96 56 234; /* S:90 Luv:40 */
|
||||
--primary-color-50: 120 95 240; /* S:90 Luv:50 */
|
||||
--primary-color-60: 146 128 244; /* S:90 Luv:60 */
|
||||
--primary-color-70: 172 160 247; /* S:90 Luv:70 */
|
||||
--primary-color-80: 199 192 250; /* S:90 Luv:80 */
|
||||
}
|
||||
|
||||
:root.h315 {
|
||||
--primary-color-10: 54 5 49; /* S:90 Luv:10 */
|
||||
--primary-color-30: 126 22 115; /* S:90 Luv:30 */
|
||||
--primary-color-40: 165 32 151; /* S:90 Luv:40 */
|
||||
--primary-color-50: 205 43 189; /* S:90 Luv:50 */
|
||||
--primary-color-60: 244 61 225; /* S:90 Luv:60 */
|
||||
--primary-color-70: 247 127 231; /* S:90 Luv:70 */
|
||||
--primary-color-80: 250 174 238; /* S:90 Luv:80 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Components
|
||||
*
|
||||
* */
|
||||
:root {
|
||||
--font-size: 14px;
|
||||
|
||||
--ubo-red: #800000;
|
||||
|
||||
--default-ink: var(--ink-80);
|
||||
--default-ink-a4: var(--ink-80-a4);
|
||||
--default-ink-a40: var(--ink-80-a40);
|
||||
--default-ink-a50: var(--ink-80-a50);
|
||||
--default-surface: var(--light-gray-10);
|
||||
--default-surface-border: var(--light-gray-70);
|
||||
--default-surface-hover: var(--light-gray-30-a50);
|
||||
--elevation-up-surface: black;
|
||||
--elevation-up1-opacity: 4%;
|
||||
--elevation-up2-opacity: 8%;
|
||||
--elevation-down-surface: white;
|
||||
--elevation-down1-opacity: 16%;
|
||||
--elevation-down2-opacity: 32%;
|
||||
|
||||
--bg-1: hsla(240, 20%, 98%, 1);
|
||||
--bg-1-border: hsla(240, 20%, 90%, 1);
|
||||
--ink-rgb: var(--ink-80);
|
||||
--ink-0: black;
|
||||
--ink-1: rgb(var(--ink-rgb));
|
||||
--ink-2: rgb(var(--ink-rgb) / 80%);
|
||||
--ink-3: rgb(var(--ink-rgb) / 60%);
|
||||
--ink-4: rgb(var(--ink-rgb) / 40%);
|
||||
|
||||
--bg-overlay-50: #0008;
|
||||
--surface-0: white;
|
||||
--surface-1: rgb(var(--gray-95));
|
||||
--surface-2: rgb(var(--gray-90));
|
||||
--surface-3: rgb(var(--gray-80));
|
||||
--surface-4: rgb(var(--gray-75));
|
||||
|
||||
--bg-code: hsla(240, 20%, 93%, 1);
|
||||
--primary-surface-2: rgb(var(--primary-color-70) / 15%);
|
||||
|
||||
/* these fg colors are meant to render over bg colors */
|
||||
--fg-0-80: hsla(261, 53%, 15%, 0.8);
|
||||
--fg-0-70: hsla(261, 53%, 15%, 0.7);
|
||||
--fg-0-60: hsla(261, 53%, 15%, 0.6);
|
||||
--fg-0-50: hsla(261, 53%, 15%, 0.5);
|
||||
--fg-0-40: hsla(261, 53%, 15%, 0.4);
|
||||
--fg-0-30: hsla(261, 53%, 15%, 0.3);
|
||||
--fg-0-20: hsla(261, 53%, 15%, 0.2);
|
||||
--border-1: rgb(var(--gray-75));
|
||||
--border-2: rgb(var(--gray-70));
|
||||
--border-3: rgb(var(--gray-65));
|
||||
--border-4: rgb(var(--gray-60));
|
||||
|
||||
--link-ink: var(--violet-70);
|
||||
--accent-ink-1: var(--surface-1);
|
||||
--accent-ink-3: var(--ink-1);
|
||||
--accent-surface-1: rgb(var(--primary-color-30));
|
||||
--accent-surface-2: rgb(var(--primary-color-50));
|
||||
--accent-surface-3: rgb(var(--primary-color-70));
|
||||
|
||||
--link-ink: var(--accent-surface-1);
|
||||
|
||||
--fieldset-header-surface: transparent;
|
||||
--fieldset-header-ink: var(--ink-20);
|
||||
--fieldset-header-ink: var(--ink-2);
|
||||
|
||||
--button-surface: var(--light-gray-30);
|
||||
--button-ink: var(--ink-20);
|
||||
--button-surface-hover: var(--light-gray-40);
|
||||
--button-active-surface: var(--blue-10);
|
||||
--button-important-surface: var(--yellow-30);
|
||||
--button-important-surface-hover: var(--yellow-40);
|
||||
/* https://material.io/design/interaction/states.html#disabled */
|
||||
--button-disabled-filter: opacity(38%);
|
||||
--button-disabled-surface: var(--light-gray-30);
|
||||
--button-disabled-ink: var(--ink-20);
|
||||
--button-preferred-surface: var(--ink-20);
|
||||
--button-preferred-ink: white;
|
||||
--button-ink: var(--ink-1);
|
||||
--button-surface: var(--surface-3);
|
||||
--button-border-radius: 5px;
|
||||
--button-preferred-ink: var(--accent-ink-1);
|
||||
--button-preferred-surface: var(--accent-surface-1);
|
||||
--button-disabled-filter: opacity(50%);
|
||||
|
||||
--checkbox-size: calc(var(--font-size) + 2px);
|
||||
--checkbox-ink: var(--light-gray-90);
|
||||
--checkbox-checked-ink: var(--ink-20);
|
||||
--checkbox-ink: var(--ink-3);
|
||||
--checkbox-checked-ink: var(--accent-surface-1);
|
||||
--checkbox-disabled-filter: opacity(50%);
|
||||
|
||||
--select-surface: white;
|
||||
|
||||
--bg-transient-notice: hsla(60, 100%, 95%, 1);
|
||||
--notice-ink: var(--accent-ink-1);
|
||||
--notice-surface: var(--accent-surface-1);
|
||||
--notice-surface-shadow: #000 0 2px 8px;
|
||||
|
||||
--dashboard-bar-shadow:
|
||||
0px 0px 0px 1px var(--default-ink-a4),
|
||||
0px 1px 2px 0px #2200330a,
|
||||
0px 2px 1px -1px #0730721f,
|
||||
0px 1px 6px 0px #0e0d1a1f;
|
||||
--dashboard-tab-ink: var(--default-ink);
|
||||
--dashboard-tab-active-ink: var(--violet-70);
|
||||
--dashboard-tab-surface-hover: var(--default-surface-hover);
|
||||
0px 0px 0px 1px rgb(var(--ink-rgb) / 4%),
|
||||
0px 1px 2px 0px rgb(var(--ink-rgb) / 4%),
|
||||
0px 2px 1px -1px rgb(var(--ink-rgb) / 12%),
|
||||
0px 1px 6px 0px rgb(var(--ink-rgb) / 12%);
|
||||
--dashboard-tab-ink: var(--ink-1);
|
||||
--dashboard-tab-active-ink: var(--accent-surface-1);
|
||||
--dashboard-tab-surface-hover: var(--surface-2);
|
||||
--dashboard-tab-border-hover: var(--surface-3);
|
||||
|
||||
--fg-icon-info-lvl-0-dimmed: #888;
|
||||
--fg-icon-info-lvl-0: inherit;
|
||||
--fg-icon-info-lvl-1-dimmed: hsla(240, 100%, 40%, 0.5);
|
||||
--fg-icon-info-lvl-1: hsla(240, 100%, 40%, 1);
|
||||
--info-lvl-2-ink: var(--yellow-50);
|
||||
--info-lvl-2-ink-hover: var(--yellow-60);
|
||||
--fg-icon-info-lvl-3-dimmed: hsla(16, 100%, 50%, 0.5);
|
||||
--fg-icon-info-lvl-3: hsla(16, 100%, 50%, 1);
|
||||
--fg-icon-info-lvl-4-dimmed: hsla(0, 100%, 35%, 0.5);
|
||||
--fg-icon-info-lvl-4: hsla(0, 100%, 35%, 1);
|
||||
|
||||
--large-icon-info-lvl-2: hsla(41, 100%, 47%, 1);
|
||||
|
||||
--bg-tooltip: hsla(60, 100%, 97%, 1);
|
||||
--fg-tooltip: var(--ink-80);
|
||||
/* info levels: normal, fyi, warn, error -- we want same Luv */
|
||||
--info0-ink-rgb: 119 119 119; /* h: 0 S: 0 Luv:60 */
|
||||
--info1-ink-rgb: 72 143 255; /* h:255 S:100 Luv:60 */
|
||||
--info2-ink-rgb: 227 113 0; /* h: 30 S:100 Luv:60 */
|
||||
--info3-ink-rgb: 255 68 166; /* h:330 S:100 Luv:60 */
|
||||
--info0-ink: rgb(var(--info0-ink-rgb));
|
||||
--info1-ink: rgb(var(--info1-ink-rgb));
|
||||
--info2-ink: rgb(var(--info2-ink-rgb));
|
||||
--info3-ink: rgb(var(--info3-ink-rgb));
|
||||
|
||||
/* popup panel */
|
||||
/* classic */
|
||||
--bg-popup-cell-1: hsla(261, 0%, 93%, 1);
|
||||
/* fenix */
|
||||
--popup-power-ink: var(--blue-50);
|
||||
--popup-power-disabled-ink: var(--light-gray-70);
|
||||
--popup-power-ink-hover: var(--blue-60);
|
||||
--bg-popup-cell-2: var(--light-gray-30);
|
||||
--bg-popup-cell-label-filter: opacity(40%);
|
||||
--fg-popup-cell-cname: hsla(240, 100%, 40%, 1);
|
||||
--bg-popup-cell-allow: hsla(120, 40%, 75%, 1);
|
||||
--bg-popup-cell-allow-own: hsla(120, 100%, 30%, 1);
|
||||
--bg-popup-cell-noop: hsla(0, 0%, 75%, 1);
|
||||
--bg-popup-cell-noop-own: hsla(0, 0%, 45%, 1);
|
||||
--bg-popup-cell-block: hsla(0, 50%, 80%, 1);
|
||||
--bg-popup-cell-block-own: hsla(0, 100%, 40%, 1);
|
||||
--bg-popup-cell-label-mixed: hsla(45, 100%, 38%, 1);
|
||||
--popup-icon-x-ink: var(--red-60);
|
||||
--popup-cell-surface: var(--surface-2);
|
||||
--popup-cell-label-filter: opacity(40%);
|
||||
--popup-cell-cname-ink: rgb(var(--blue-50));
|
||||
--popup-cell-allow-surface-rgb: 0 153 0;
|
||||
--popup-cell-allow-own-surface: rgb(var(--popup-cell-allow-surface-rgb));
|
||||
--popup-cell-allow-surface: rgb(var(--popup-cell-allow-surface-rgb) / 35%);
|
||||
--popup-cell-noop-surface-rgb: 132 132 132;
|
||||
--popup-cell-noop-own-surface: rgb(var(--popup-cell-noop-surface-rgb));
|
||||
--popup-cell-noop-surface: rgb(var(--popup-cell-noop-surface-rgb) / 35%);
|
||||
--popup-cell-block-surface-rgb: 255 40 40;
|
||||
--popup-cell-block-own-surface: rgb(var(--popup-cell-block-surface-rgb));
|
||||
--popup-cell-block-surface: rgb(var(--popup-cell-block-surface-rgb) / 35%);
|
||||
--popup-cell-label-mixed-surface: #c29100;
|
||||
--popup-icon-x-ink: rgb(var(--red-60));
|
||||
--popup-power-ink-rgb: var(--primary-color-40);
|
||||
--popup-power-ink: rgb(var(--popup-power-ink-rgb));
|
||||
--popup-ruleset-tool-ink: var(--ink-1);
|
||||
--popup-ruleset-tool-surface: rgb(var(--primary-color-70) / 20%);
|
||||
--popup-ruleset-tool-surface-hover: rgb(var(--primary-color-70) / 40%);
|
||||
--popup-ruleset-tool-shadow: rgb(var(--primary-color-30) / 20%);
|
||||
|
||||
/* horizontal line separator */
|
||||
--hr-ink: var(--light-gray-30);
|
||||
--hr-ink: var(--surface-2);
|
||||
|
||||
/* cloud widget */
|
||||
--cloud-widget-surface: var(--light-gray-20);
|
||||
--cloud-total-used-surface: rgb(var(--violet-60) / 25%);
|
||||
--cloud-used-surface: rgb(var(--violet-60));
|
||||
|
||||
/* codemirror */
|
||||
--cm-gutter-border: var(--light-gray-40);
|
||||
--cm-gutter-ink: var(--light-gray-90);
|
||||
--cm-gutter-surface: var(--light-gray-25);
|
||||
--cm-selection-surface: #d7d4f0;
|
||||
--cm-selection-ink: var(--default-ink);
|
||||
--cm-searching-surface: #ffff0066;
|
||||
--cm-active-line: var(--surface-1);
|
||||
--cm-cursor: var(--ink-0);
|
||||
--cm-foldmarker-ink: rgb(var(--blue-40));
|
||||
--cm-gutter-border: var(--surface-1);
|
||||
--cm-gutter-ink: var(--ink-3);
|
||||
--cm-gutter-surface: var(--surface-2);
|
||||
--cm-matchingbracket: rgb(var(--green-30));
|
||||
--cm-merge-copy-ink: rgb(var(--blue-50));
|
||||
--cm-merge-l-chunk-border: rgb(var(--blue-5));
|
||||
--cm-merge-l-chunk-surface: rgb(var(--blue-5) / 20%);
|
||||
--cm-negative: #c00;
|
||||
--cm-positive: #080;
|
||||
--cm-selection-surface: #8cf4;
|
||||
--cm-selection-ink: var(--ink-1);
|
||||
--cm-searching-ink: inherit;
|
||||
--cm-searching-surface: rgb(var(--yellow-20) / 80%);
|
||||
--cm-search-match-surface: rgb(var(--yellow-40) / 50%);
|
||||
|
||||
/* syntax highlight: static filtering */
|
||||
--sf-comment-ink: var(--light-gray-90);
|
||||
--sf-def-ink: #0000ff;
|
||||
--sf-directive-ink: var(--dark-gray-40);
|
||||
--sf-error-ink: #ff0000;
|
||||
--sf-error-surface: #ff000016;
|
||||
--sf-keyword-ink: var(--purple-60);
|
||||
--sf-notice-ink: var(--light-gray-60);
|
||||
--sf-readonly-ink: var(--light-gray-80);
|
||||
--sf-tag-ink: #117700;
|
||||
--sf-value-ink: var(--orange-80);
|
||||
--sf-variable-ink: var(--default-ink);
|
||||
--sf-warning-ink: var(--yellow-50);
|
||||
--sf-comment-ink: var(--ink-3);
|
||||
--sf-def-ink: rgb(var(--blue-50));
|
||||
--sf-directive-ink: var(--ink-1);
|
||||
--sf-error-ink: rgb(var(--red-60));
|
||||
--sf-error-surface: rgb(var(--red-60) / 10%);
|
||||
--sf-keyword-ink: rgb(var(--purple-60));
|
||||
--sf-notice-ink: var(--border-2);
|
||||
--sf-readonly-ink: var(--ink-3);
|
||||
--sf-tag-ink: rgb(var(--green-60));
|
||||
--sf-value-ink: rgb(var(--orange-70));
|
||||
--sf-variable-ink: var(--ink-1);
|
||||
--sf-warning-ink: rgb(var(--yellow-50));
|
||||
|
||||
/* syntax highlight: dynamic filtering */
|
||||
--df-allow-ink: #117700;
|
||||
--df-block-ink: #ff0000;
|
||||
--df-noop-ink: var(--dark-gray-10);
|
||||
--df-key-ink: var(--violet-70);
|
||||
--df-allow-ink: var(--cm-positive);
|
||||
--df-block-ink: var(--cm-negative);
|
||||
--df-noop-ink: rgb(var(--dark-gray-10));
|
||||
|
||||
/* logger */
|
||||
--logger-allowed-surface: #00a00014;
|
||||
--logger-blocked-surface: #c0000014;
|
||||
--logger-modified-surface: #0000c010;
|
||||
--logger-allowed-surface: #00a00014;
|
||||
--logger-redirected-surface: rgb(var(--yellow-5) / 50%);
|
||||
--logger-blocked-em-surface: #c0000036;
|
||||
--logger-modified-em-surface: #0000c028;
|
||||
--logger-allowed-em-surface: #00a00036;
|
||||
}
|
||||
|
||||
/**
|
||||
Use slightly darker inks on lower pixel-density devices to improve
|
||||
contrast.
|
||||
*/
|
||||
:root:not(.hidpi) {
|
||||
--default-ink: var(--ink-90);
|
||||
--button-ink: var(--ink-90);
|
||||
--fieldset-header-ink: var(--ink-50);
|
||||
--link-ink: var(--violet-80);
|
||||
}
|
||||
|
||||
/**
|
||||
Source for color-blind color scheme from https://github.com/WyohKnott:
|
||||
https://github.com/chrisaljoudi/uBlock/issues/467#issuecomment-95177219
|
||||
*/
|
||||
/*
|
||||
* Source for color-blind color scheme from https://github.com/WyohKnott:
|
||||
* https://github.com/chrisaljoudi/uBlock/issues/467#issuecomment-95177219
|
||||
*
|
||||
* */
|
||||
:root.colorBlind {
|
||||
--bg-popup-cell-allow: hsla(42, 100%, 80%, 1);
|
||||
--bg-popup-cell-allow-own: hsla(42, 100%, 50%, 1);
|
||||
--bg-popup-cell-noop: hsla(0, 0%, 75%, 1);
|
||||
--bg-popup-cell-noop-own: hsla(0, 0%, 45%, 1);
|
||||
--bg-popup-cell-block: hsla(230, 25%, 75%, 1);
|
||||
--bg-popup-cell-block-own: hsla(230, 100%, 25%, 1);
|
||||
--bg-popup-cell-label-mixed: hsla(25, 100%, 50%, 1);
|
||||
--popup-cell-allow-surface-rgb: 225 157 0;
|
||||
--popup-cell-block-surface-rgb: 14 55 255;
|
||||
--popup-cell-label-mixed-surface: #ff6a00;
|
||||
}
|
||||
|
||||
/**
|
||||
Default dark theme starts here
|
||||
|
||||
Assign a default background color if dark mode is enabled -- hopefully
|
||||
this will avoid flashes of white background until the document's own CSS
|
||||
overrides the default color value below.
|
||||
https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-629641072
|
||||
*/
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background-color: var(--dark-gray-90);
|
||||
}
|
||||
}
|
||||
/*
|
||||
* Default dark theme starts here
|
||||
*
|
||||
* https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-629641072
|
||||
* Assign a default background color if dark mode is enabled -- hopefully
|
||||
* this will avoid flashes of white background until the document's own CSS
|
||||
* overrides the default color value below.
|
||||
*
|
||||
* */
|
||||
|
||||
/* https://material.io/design/color/dark-theme.html */
|
||||
:root.dark {
|
||||
--default-ink: var(--light-gray-10);
|
||||
--default-ink-a4: var(--light-gray-10-a4);
|
||||
--default-ink-a50: var(--light-gray-30-a50);
|
||||
--default-surface: var(--dark-gray-90);
|
||||
--default-surface-hover: var(--dark-gray-50);
|
||||
--bg-1: hsla(250, 13%, 9%, 1);
|
||||
--bg-1-border: hsla(250, 13%, 16%, 1);
|
||||
--bg-overlay-50: #0008;
|
||||
--bg-code: hsla(0, 2%, 0%, 0.8);
|
||||
--fg-0-80: hsla(0, 0%, 53%, 0.8);
|
||||
--fg-0-70: hsla(0, 0%, 53%, 0.7);
|
||||
--fg-0-60: hsla(0, 0%, 53%, 0.6);
|
||||
--fg-0-50: hsla(0, 0%, 53%, 0.5);
|
||||
--fg-0-40: hsla(0, 0%, 53%, 0.4);
|
||||
--fg-0-30: hsla(0, 0%, 53%, 0.3);
|
||||
--fg-0-20: hsla(0, 0%, 53%, 0.2);
|
||||
--link-ink: #bb86fc;
|
||||
--fieldset-header-surface: transparent;
|
||||
--fieldset-header-ink: var(--light-gray-30);
|
||||
--hr-ink: var(--dark-gray-50);
|
||||
--button-surface: var(--light-gray-10-a12);
|
||||
--button-ink: var(--default-ink);
|
||||
--button-surface-hover: var(--light-gray-10-a12);
|
||||
--button-active-surface: var(--light-gray-70);
|
||||
--button-important-surface: var(--dark-gray-30);
|
||||
--button-important-surface-hover: var(--light-gray-60);
|
||||
--button-disabled-filter: opacity(38%);
|
||||
--button-disabled-surface: var(--dark-gray-50);
|
||||
--button-disabled-ink: var(--light-gray-30-a50);
|
||||
--button-preferred-surface: var(--dark-gray-50);
|
||||
--button-preferred-ink: var(--light-gray-70);
|
||||
--checkbox-size: calc(var(--font-size) + 2px);
|
||||
--checkbox-ink: var(--default-ink);
|
||||
--checkbox-checked-ink: #bb86fc;
|
||||
/*--select-surface:*/
|
||||
--bg-transient-notice: var(--dark-gray-50);
|
||||
--dashboard-bar-shadow: 0px 0px 0px 1px var(--default-ink-a4);
|
||||
--dashboard-tab-active-ink: #bb86fc;
|
||||
--dashboard-tab-surface-hover: var(--default-surface-hover);
|
||||
--fg-icon-info-lvl-0-dimmed: #888;
|
||||
--fg-icon-info-lvl-0: inherit;
|
||||
--fg-icon-info-lvl-1-dimmed: hsla(258, 57%, 35%, 1);
|
||||
--fg-icon-info-lvl-1: hsla(258, 66%, 48%, 1);
|
||||
--info-lvl-2-ink: var(--yellow-50);
|
||||
--info-lvl-2-ink-hover: var(--yellow-60);
|
||||
--fg-icon-info-lvl-3-dimmed: hsla(16, 100%, 50%, 0.5);
|
||||
--fg-icon-info-lvl-3: hsla(16, 100%, 50%, 1);
|
||||
--fg-icon-info-lvl-4-dimmed: hsla(0, 100%, 35%, 0.5);
|
||||
--fg-icon-info-lvl-4: hsla(0, 100%, 35%, 1);
|
||||
--large-icon-info-lvl-2: hsla(41, 100%, 47%, 1);
|
||||
--bg-tooltip: var(--dark-gray-50);
|
||||
--fg-tooltip: var(--light-gray-30);
|
||||
--bg-popup-cell-1: var(--dark-gray-50);
|
||||
--popup-power-disabled-ink: var(--light-gray-60);
|
||||
--popup-power-ink-hover: var(--dark-gray-30);
|
||||
--bg-popup-cell-2: var(--dark-gray-50);
|
||||
--bg-popup-cell-label-filter: opacity(40%);
|
||||
--fg-popup-cell-cname: hsla(0, 0%, 53%, 0.3);
|
||||
--bg-popup-cell-allow: hsla(120, 40%, 75%, 1);
|
||||
--bg-popup-cell-allow-own: hsla(120, 100%, 30%, 1);
|
||||
--bg-popup-cell-noop: hsla(0, 0%, 75%, 1);
|
||||
--bg-popup-cell-noop-own: hsla(0, 0%, 45%, 1);
|
||||
--bg-popup-cell-block: hsla(0, 50%, 80%, 1);
|
||||
--bg-popup-cell-block-own: hsla(0, 100%, 40%, 1);
|
||||
--bg-popup-cell-label-mixed: hsla(45, 100%, 38%, 1);
|
||||
--popup-icon-x-ink: #e22850;
|
||||
--elevation-down-surface: black;
|
||||
--elevation-down1-opacity: 16%;
|
||||
--elevation-down2-opacity: 32%;
|
||||
--elevation-up-surface: white;
|
||||
--elevation-up1-opacity: 12%;
|
||||
--elevation-up2-opacity: 24%;
|
||||
|
||||
--ink-rgb: var(--gray-95);
|
||||
--ink-0: white;
|
||||
|
||||
--surface-0: black;
|
||||
--surface-1: rgb(var(--gray-10));
|
||||
--surface-2: rgb(var(--gray-20));
|
||||
--surface-3: rgb(var(--gray-30));
|
||||
--surface-4: rgb(var(--gray-40));
|
||||
|
||||
--border-1: rgb(var(--gray-35));
|
||||
--border-2: rgb(var(--gray-40));
|
||||
--border-3: rgb(var(--gray-45));
|
||||
--border-4: rgb(var(--gray-50));
|
||||
|
||||
--accent-ink-1: rgb(var(--ink-80));
|
||||
--accent-surface-1: rgb(var(--primary-color-70));
|
||||
|
||||
--accent-ink-1: var(--surface-1);
|
||||
--accent-ink-3: var(--ink-1);
|
||||
--accent-surface-1: rgb(var(--primary-color-70));
|
||||
--accent-surface-3: rgb(var(--primary-color-30));
|
||||
|
||||
/* popup panel */
|
||||
--popup-cell-label-filter: opacity(40%);
|
||||
--popup-cell-cname-ink: hsla(0, 0%, 53%, 0.3);
|
||||
--popup-cell-allow-surface: rgb(var(--popup-cell-allow-surface-rgb) / 65%);
|
||||
--popup-cell-noop-surface: rgb(var(--popup-cell-noop-surface-rgb) / 65%);
|
||||
--popup-cell-block-surface: rgb(var(--popup-cell-block-surface-rgb) / 65%);
|
||||
--popup-cell-label-mixed-surface: hsla(45, 100%, 38%, 1);
|
||||
--popup-icon-x-ink: rgb(var(--red-50));
|
||||
--popup-power-ink-rgb: var(--primary-color-60);
|
||||
--popup-ruleset-tool-shadow: -surface-0;
|
||||
|
||||
/* cloud widget */
|
||||
--cloud-widget-surface: var(--dark-gray-80);
|
||||
--cloud-total-used-surface: rgb(var(--violet-20) / 25%);
|
||||
--cloud-used-surface: rgb(var(--violet-20));
|
||||
|
||||
/* codemirror */
|
||||
--cm-merge-copy-ink: rgb(var(--blue-30));
|
||||
--cm-foldmarker-ink: rgb(var(--blue-20));
|
||||
--cm-matchingbracket: rgb(var(--green-30) / 50%);
|
||||
--cm-merge-l-chunk-border: rgb(var(--blue-70));
|
||||
--cm-merge-l-chunk-surface: rgb(var(--blue-90));
|
||||
--cm-negative: #f44;
|
||||
--cm-positive: #0c0;
|
||||
--cm-searching-ink: var(--surface-0);
|
||||
--cm-searching-surface: rgb(var(--yellow-20));
|
||||
|
||||
/* Need to set colors in forms.css for moz-field stuffz
|
||||
-moz-FieldText: #888888 !important; change from these names to either HEX value or variables. default-ink
|
||||
-moz-Field: #15141a !important; var would be var(--dark-gray-90) hex value might be easiest though.
|
||||
/* TO DO
|
||||
1. Epicker window box color Variables needed;
|
||||
#ublock0-epicker aside
|
||||
background-color: var(--dark-gray-90)
|
||||
outer border: var(--dark-gray-90)
|
||||
inner order: var (
|
||||
color: #999999a0
|
||||
html#ublock0-epicker, #ublock0-epicker body
|
||||
background: transparent !important;
|
||||
color: #777 !important;
|
||||
/* syntax highlight: static filtering */
|
||||
--sf-comment-ink: var(--ink-3);
|
||||
--sf-def-ink: rgb(var(--blue-20));
|
||||
--sf-error-ink: rgb(var(--red-40));
|
||||
--sf-error-surface: rgb(var(--red-40) / 40%);
|
||||
--sf-keyword-ink: rgb(var(--purple-10));
|
||||
--sf-notice-ink: var(--border-2);
|
||||
--sf-tag-ink: rgb(var(--green-50));
|
||||
--sf-value-ink: rgb(var(--orange-20));
|
||||
--sf-variable-ink: var(--ink-1);
|
||||
--sf-warning-ink: rgb(var(--yellow-50));
|
||||
|
||||
2. CodeMirror (my filters and Whitelist) ADVANCED SETTINGS (background and color need variables)
|
||||
.CodeMirror background: (currenty set to white) need a var
|
||||
my Rules tab
|
||||
codemirror panes CodeMirror-merge-pane CodeMirror-merge-left
|
||||
CodeMirror-merge-pane CodeMirror-merge-editor CodeMirror-merge-pane-rightmost
|
||||
***** file used is codemirror.css *********
|
||||
/* syntax highlight: dynamic filtering */
|
||||
--df-noop-ink: var(--ink-3);
|
||||
|
||||
3. #cloudWidget background (linked to img) background is hsl - would be better if we had a background color instead of hsl.
|
||||
***** file used is cloud-ui.css ********
|
||||
4. Logger UI screen. .permatoolbar, modalOverlayContainer : background-color;
|
||||
headers background-color, color border-color
|
||||
#netFilteringDialog > div.panes > .dynamic .entry background-color: border-bottom: ;
|
||||
#netFilteringDialog > div.panes > .dynamic .entry > .action > .allow .noop .block
|
||||
background-color.
|
||||
#modalOverlayClose stoke: background-color
|
||||
****** file used is logger-ui.css *******
|
||||
*//*
|
||||
5. Seperator bar - element/selector is hr in common.css a variable is assigned. popup-fenix.css
|
||||
border-top - assigned HEX of #e3e2e3 variable should be assinged like in common.css
|
||||
var(--hor-separator-color)
|
||||
6. .rulesetTools border color needs a variable
|
||||
**** popup-fenix.css *****
|
||||
*/
|
||||
/* logger */
|
||||
--logger-allowed-surface: #24a71960;
|
||||
--logger-blocked-surface: #ff4c2b60;
|
||||
--logger-modified-surface: #663efd60;
|
||||
--logger-redirected-surface: rgb(var(--yellow-5) / 40%);
|
||||
}
|
||||
|
||||
:root.dark.colorBlind {
|
||||
}
|
||||
|
||||
:root.classic:not(.dark) {
|
||||
--notice-ink: rgb(var(--ink-80));
|
||||
--notice-surface: rgb(var(--yellow-5));
|
||||
--popup-power-ink-rgb: 0 110 254;
|
||||
--popup-ruleset-tool-ink: var(--ink-1);
|
||||
--popup-ruleset-tool-surface: rgb(var(--yellow-5) / 50%);
|
||||
--popup-ruleset-tool-surface-hover: rgb(var(--yellow-5) / 75%);
|
||||
--popup-ruleset-tool-shadow: rgb(var(--gray-85));
|
||||
}
|
||||
|
||||
|
||||
@ -23,14 +23,14 @@
|
||||
--><span class="tabButton" data-pane="about.html" data-i18n="aboutPageName"></span><!--
|
||||
--><span class="tabButton" data-pane="no-dashboard.html"></span>
|
||||
</div>
|
||||
<div id="unsavedWarning">
|
||||
<section id="unsavedWarning" class="notice">
|
||||
<div>
|
||||
<span data-i18n="dashboardUnsavedWarning"></span> 
|
||||
<button data-i18n="dashboardUnsavedWarningStay"></button> 
|
||||
<button data-i18n="dashboardUnsavedWarningIgnore"></button>
|
||||
<button type="button" data-i18n="dashboardUnsavedWarningStay">_<span class="hover"></span></button> 
|
||||
<button type="button" data-i18n="dashboardUnsavedWarningIgnore">_<span class="hover"></span></button>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<iframe id="iframe" src=""></iframe>
|
||||
|
||||
|
||||
@ -22,12 +22,12 @@
|
||||
|
||||
<div class="body">
|
||||
<p>
|
||||
<button id="console-clear" class="iconifiable" type="button"><span class="fa-icon">trash-o</span></button>
|
||||
<button id="console-fold" class="iconifiable" type="button"><span class="fa-icon">double-angle-up</span></button>
|
||||
<button id="console-unfold" class="iconifiable" type="button"><span class="fa-icon fa-icon-vflipped">double-angle-up</span></button>
|
||||
<button id="snfe-dump" type="button">SNFE: Dump</button>
|
||||
<button id="snfe-benchmark" type="button" disabled>SNFE: Benchmark</button>
|
||||
<button id="cfe-dump" type="button">CFE: Dump</button>
|
||||
<button id="console-clear" class="iconified" type="button"><span class="fa-icon">trash-o</span><span class="hover"></span></button>
|
||||
<button id="console-fold" class="iconified" type="button"><span class="fa-icon">double-angle-up</span><span class="hover"></span></button>
|
||||
<button id="console-unfold" class="iconified" type="button"><span class="fa-icon fa-icon-vflipped">double-angle-up</span><span class="hover"></span></button>
|
||||
<button id="snfe-dump" type="button">SNFE: Dump<span class="hover"></span></button>
|
||||
<button id="snfe-benchmark" type="button" disabled>SNFE: Benchmark<span class="hover"></span></button>
|
||||
<button id="cfe-dump" type="button">CFE: Dump<span class="hover"></span></button>
|
||||
</div>
|
||||
<div id="console" class="codeMirrorContainer"></div>
|
||||
|
||||
|
||||
@ -27,15 +27,15 @@
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button id="back" class="preferred" data-i18n="docblockedBack" type="button"></button>
|
||||
<button id="bye" class="preferred" data-i18n="docblockedClose" type="button"></button>
|
||||
<button id="back" class="preferred" data-i18n="docblockedBack" type="button">_<span class="hover"></span></button>
|
||||
<button id="bye" class="preferred" data-i18n="docblockedClose" type="button">_<span class="hover"></span></button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p id="proceed"></p>
|
||||
<p class="proceedButtons">
|
||||
<button id="proceedTemporary" data-i18n="docblockedDisableTemporary" type="button"></button>
|
||||
<button id="proceedPermanent" data-i18n="docblockedDisablePermanent" type="button"></button>
|
||||
<button id="proceedTemporary" data-i18n="docblockedDisableTemporary" type="button">_<span class="hover"></span></button>
|
||||
<button id="proceedPermanent" data-i18n="docblockedDisablePermanent" type="button">_<span class="hover"></span></button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
@ -25,21 +25,21 @@
|
||||
<div class="tools">
|
||||
<div class="ruleActions">
|
||||
<div class="fieldset-header" data-i18n="rulesPermanentHeader"></div>
|
||||
<button type="button" class="iconifiable" id="exportButton"><span class="fa-icon">upload-alt</span><span data-i18n="rulesExport"></span></button>
|
||||
<button type="button" class="iconifiable" id="revertButton"><span class="fa-icon">arrow-right</span><span data-i18n="rulesRevert"></span></button>
|
||||
<button type="button" class="iconified" id="exportButton"><span class="fa-icon">upload-alt</span><span data-i18n="rulesExport">_</span><span class="hover"></span></button>
|
||||
<button type="button" class="iconified" id="revertButton"><span class="fa-icon">arrow-right</span><span data-i18n="rulesRevert">_</span><span class="hover"></span></button>
|
||||
</div>
|
||||
<div class="ruleActions">
|
||||
<div class="fieldset-header" data-i18n="rulesTemporaryHeader"></div>
|
||||
<button type="button" class="iconifiable" id="commitButton"><span class="fa-icon fa-icon-hflipped">arrow-right</span><span data-i18n="rulesCommit"></span></button>
|
||||
<button type="button" class="iconifiable" id="importButton"><span class="fa-icon">download-alt</span><span data-i18n="rulesImport"></span></button>
|
||||
<button type="button" class="iconifiable important disabled" id="editSaveButton"><span class="fa-icon">save</span><span data-i18n="rulesEditSave"></span></button>
|
||||
</div>
|
||||
<div id="ruleFilter">
|
||||
<span><span class="fa-icon">filter</span> <input type="search" size="16"></span> <span data-i18n="rulesSort"></span> <select><option value="0" selected data-i18n="rulesSortByType"><option value="1" data-i18n="rulesSortBySource"><option value="2" data-i18n="rulesSortByDestination"></select> <span id="diffCollapse" class="fa-icon">double-angle-up</span>
|
||||
<button type="button" class="iconified" id="commitButton"><span class="fa-icon fa-icon-hflipped">arrow-right</span><span data-i18n="rulesCommit">_</span><span class="hover"></span></button>
|
||||
<button type="button" class="iconified" id="importButton"><span class="fa-icon">download-alt</span><span data-i18n="rulesImport">_</span><span class="hover"></span></button>
|
||||
<button type="button" class="iconified preferred disabled" id="editSaveButton"><span class="fa-icon">save</span><span data-i18n="rulesEditSave">_</span><span class="hover"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="ruleFilter">
|
||||
<span><span class="fa-icon">filter</span> <input type="search" size="16"></span> <span data-i18n="rulesSort"></span> <select><option value="0" selected data-i18n="rulesSortByType"><option value="1" data-i18n="rulesSortBySource"><option value="2" data-i18n="rulesSortByDestination"></select> <span id="diffCollapse" class="fa-icon">double-angle-up</span>
|
||||
</div>
|
||||
<div class="codeMirrorContainer codeMirrorMergeContainer"></div>
|
||||
|
||||
<div id="templates" style="display: none;">
|
||||
|
||||
@ -66,11 +66,11 @@ CodeMirror.defineMode('ubo-static-filtering', function() {
|
||||
const match = rePreparseIfDirective.exec(string);
|
||||
if ( match === null ) {
|
||||
stream.skipToEnd();
|
||||
return 'variable strong';
|
||||
return 'directive';
|
||||
}
|
||||
if ( pos < match[1].length ) {
|
||||
stream.pos += match[1].length;
|
||||
return 'variable strong';
|
||||
return 'directive';
|
||||
}
|
||||
stream.skipToEnd();
|
||||
if ( match[1].endsWith(' ') === false ) {
|
||||
|
||||
@ -537,10 +537,15 @@ const onTextChanged = (( ) => {
|
||||
cleanEditToken = mergeView.editor().changeGeneration();
|
||||
isClean = true;
|
||||
}
|
||||
const isDirty = mergeView.leftChunks().length !== 0;
|
||||
document.body.classList.toggle('editing', isClean === false);
|
||||
diff.classList.toggle('dirty', mergeView.leftChunks().length !== 0);
|
||||
document.getElementById('editSaveButton')
|
||||
.classList.toggle('disabled', isClean);
|
||||
diff.classList.toggle('dirty', isDirty);
|
||||
uDom('#editSaveButton')
|
||||
.toggleClass('disabled', isClean);
|
||||
uDom('#exportButton,#importButton')
|
||||
.toggleClass('disabled', isClean === false);
|
||||
uDom('#revertButton,#commitButton')
|
||||
.toggleClass('disabled', isClean === false || isDirty === false);
|
||||
const input = document.querySelector('#ruleFilter input');
|
||||
if ( isClean ) {
|
||||
input.removeAttribute('disabled');
|
||||
|
||||
@ -96,7 +96,7 @@ const safeTextToDOM = function(text, parent) {
|
||||
// Fast path (most common).
|
||||
if ( text.indexOf('<') === -1 ) {
|
||||
const toInsert = safeTextToTextNode(text);
|
||||
let toReplace = parent.childElementCount !== 0
|
||||
let toReplace = parent.childCount !== 0
|
||||
? parent.firstChild
|
||||
: null;
|
||||
while ( toReplace !== null ) {
|
||||
|
||||
@ -222,9 +222,7 @@ const onMessage = function(request, sender, callback) {
|
||||
case 'uiStyles':
|
||||
response = {
|
||||
uiStyles: µb.hiddenSettings.uiStyles,
|
||||
uiTheme: vAPI.webextFlavor.soup.has('devbuild')
|
||||
? µb.hiddenSettings.uiTheme
|
||||
: 'unset',
|
||||
uiTheme: µb.hiddenSettings.uiTheme,
|
||||
};
|
||||
break;
|
||||
|
||||
|
||||
@ -98,11 +98,13 @@ DOMListFactory.nodeFromSelector = function(selector) {
|
||||
vAPI.messaging.send('uDom', { what: 'uiStyles' }).then(response => {
|
||||
if ( typeof response !== 'object' || response === null ) { return; }
|
||||
if ( response.uiTheme !== 'unset' ) {
|
||||
if ( response.uiTheme === 'light' ) {
|
||||
if ( /\blight\b/.test(response.uiTheme) ) {
|
||||
root.classList.remove('dark');
|
||||
} else if ( response.uiTheme === 'dark' ) {
|
||||
root.classList.add('dark');
|
||||
}
|
||||
if ( /\bdark\b/.test(response.uiTheme) ) {
|
||||
root.classList.remove('dark');
|
||||
}
|
||||
root.classList.add(...response.uiTheme.split(/\s+/));
|
||||
}
|
||||
if ( response.uiStyles !== 'unset' ) {
|
||||
document.body.style.cssText = response.uiStyles;
|
||||
@ -552,18 +554,11 @@ DOMList.prototype.text = function(text) {
|
||||
/******************************************************************************/
|
||||
|
||||
const toggleClass = function(node, className, targetState) {
|
||||
var tokenList = node.classList;
|
||||
if ( tokenList instanceof DOMTokenList === false ) {
|
||||
return;
|
||||
}
|
||||
var currentState = tokenList.contains(className);
|
||||
var newState = targetState;
|
||||
if ( newState === undefined ) {
|
||||
newState = !currentState;
|
||||
}
|
||||
if ( newState === currentState ) {
|
||||
return;
|
||||
}
|
||||
const tokenList = node.classList;
|
||||
if ( tokenList instanceof DOMTokenList === false ) { return; }
|
||||
const currentState = tokenList.contains(className);
|
||||
const newState = targetState !== undefined ? targetState : !currentState;
|
||||
if ( newState === currentState ) { return; }
|
||||
tokenList.toggle(className, newState);
|
||||
};
|
||||
|
||||
@ -573,7 +568,7 @@ DOMList.prototype.hasClass = function(className) {
|
||||
if ( !this.nodes.length ) {
|
||||
return false;
|
||||
}
|
||||
var tokenList = this.nodes[0].classList;
|
||||
const tokenList = this.nodes[0].classList;
|
||||
return tokenList instanceof DOMTokenList &&
|
||||
tokenList.contains(className);
|
||||
};
|
||||
@ -587,9 +582,8 @@ DOMList.prototype.removeClass = function(className) {
|
||||
if ( className !== undefined ) {
|
||||
return this.toggleClass(className, false);
|
||||
}
|
||||
var i = this.nodes.length;
|
||||
while ( i-- ) {
|
||||
this.nodes[i].className = '';
|
||||
for ( const node of this.nodes ) {
|
||||
node.className = '';
|
||||
}
|
||||
return this;
|
||||
};
|
||||
@ -600,9 +594,8 @@ DOMList.prototype.toggleClass = function(className, targetState) {
|
||||
if ( className.indexOf(' ') !== -1 ) {
|
||||
return this.toggleClasses(className, targetState);
|
||||
}
|
||||
var i = this.nodes.length;
|
||||
while ( i-- ) {
|
||||
toggleClass(this.nodes[i], className, targetState);
|
||||
for ( const node of this.nodes ) {
|
||||
toggleClass(node, className, targetState);
|
||||
}
|
||||
return this;
|
||||
};
|
||||
@ -610,14 +603,10 @@ DOMList.prototype.toggleClass = function(className, targetState) {
|
||||
/******************************************************************************/
|
||||
|
||||
DOMList.prototype.toggleClasses = function(classNames, targetState) {
|
||||
var tokens = classNames.split(/\s+/);
|
||||
var i = this.nodes.length;
|
||||
var node, j;
|
||||
while ( i-- ) {
|
||||
node = this.nodes[i];
|
||||
j = tokens.length;
|
||||
while ( j-- ) {
|
||||
toggleClass(node, tokens[j], targetState);
|
||||
const tokens = classNames.split(/\s+/);
|
||||
for ( const node of this.nodes ) {
|
||||
for ( const token of tokens ) {
|
||||
toggleClass(node, token, targetState);
|
||||
}
|
||||
}
|
||||
return this;
|
||||
|
||||
@ -21,9 +21,9 @@
|
||||
<option value="-1" data-i18n="logBehindTheScene">
|
||||
<option value="_" data-i18n="loggerCurrentTab">
|
||||
</select>
|
||||
<span id="refresh" class="button fa-icon disabled needdom" data-i18n-title="loggerReloadTip">refresh</span>
|
||||
<span id="showdom" class="button fa-icon disabled needdom" data-i18n-title="loggerDomInspectorTip">code</span>
|
||||
<span id="showpopup" class="button ubo-icon disabled needdom" data-i18n-title="loggerPopupPanelTip"><svg><use href="/img/ublock-defs.svg#ubo-solid"></use></svg></span>
|
||||
<button id="refresh" class="iconified notext disabled needdom" data-i18n-title="loggerReloadTip" type="button"><span class="fa-icon">refresh</span><span class="hover"></span></button>
|
||||
<button id="showdom" class="iconified notext disabled needdom" data-i18n-title="loggerDomInspectorTip" type="button"><span class="fa-icon">code</span><span class="hover"></span></button>
|
||||
<button id="showpopup" class="iconified notext disabled needdom" data-i18n-title="loggerPopupPanelTip" type="button"><span class="fa-icon"><svg><use href="/img/ublock-defs.svg#ubo-solid"></use></svg></span><span class="hover"></span></button>
|
||||
</div>
|
||||
<div>
|
||||
<a id="info" class="button fa-icon" href="https://github.com/gorhill/uBlock/wiki/The-logger" target="_blank" data-i18n-title="loggerInfoTip">info-circle</a>
|
||||
@ -34,11 +34,11 @@
|
||||
<div id="domInspector" class="inspector hCompact">
|
||||
<div class="permatoolbar">
|
||||
<div>
|
||||
<span class="button fa-icon vCompactToggler">double-angle-up</span>
|
||||
<span class="button fa-icon hCompactToggler">double-angle-left</span>
|
||||
<button class="iconified notext vCompactToggler"><span class="fa-icon">double-angle-up</span><span class="hover"></span></button>
|
||||
<button class="iconified notext hCompactToggler"><span class="fa-icon">double-angle-left</span><span class="hover"></span></button>
|
||||
<!-- <span class="button fa highlightMode" style="display: none"></span> -->
|
||||
<span class="button fa-icon revert disabled">eraser</span>
|
||||
<span class="button fa-icon commit disabled">floppy-o</span>
|
||||
<button class="iconified notext revert disabled"><span class="fa-icon">eraser</span><span class="hover"></span></button>
|
||||
<button class="iconified notext commit disabled"><span class="fa-icon">floppy-o</span><span class="hover"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vscrollable">
|
||||
@ -48,12 +48,12 @@
|
||||
<div id="netInspector" class="inspector f">
|
||||
<div class="permatoolbar">
|
||||
<div>
|
||||
<span class="button fa-icon vCompactToggler">double-angle-up</span>
|
||||
<span id="clean" class="button fa-icon disabled">times</span>
|
||||
<span id="clear" class="button fa-icon disabled" data-i18n-title="loggerClearTip">eraser</span>
|
||||
<span id="pause"><span class="button fa-icon" data-i18n-title="loggerPauseTip">pause-circle-o</span><span class="button fa-icon" data-i18n-title="loggerUnpauseTip">play-circle-o</span></span>
|
||||
<button class="iconified notext vCompactToggler"><span class="fa-icon">double-angle-up</span><span class="hover"></span></button>
|
||||
<button id="clean" class="iconified notext disabled"><span class="fa-icon">times</span><span class="hover"></span></button>
|
||||
<button id="clear" class="iconified notext disabled" data-i18n-title="loggerClearTip"><span class="fa-icon">eraser</span><span class="hover"></span></button>
|
||||
<button id="pause" class="iconified notext"><span class="fa-icon" data-i18n-title="loggerPauseTip">pause-circle-o</span><span class="fa-icon" data-i18n-title="loggerUnpauseTip">play-circle-o</span><span class="hover"></span></button>
|
||||
<span id="filterExprGroup">
|
||||
<span id="filterButton" class="button fa-icon" data-i18n-title="loggerRowFiltererButtonTip">filter</span>
|
||||
<button id="filterButton" class="iconified notext" data-i18n-title="loggerRowFiltererButtonTip"><span class="fa-icon">filter</span><span class="hover"></span></button>
|
||||
<span id="filterInput">
|
||||
<input type="search" placeholder="logFilterPrompt">
|
||||
<span id="filterExprButton" class="button fa-icon expanded" data-i18n-title="loggerRowFiltererBuiltinTip">angle-up</span>
|
||||
@ -72,9 +72,9 @@
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span id="loggerStats" class="button fa-icon" style="display: none;">bar-chart</span>
|
||||
<span id="loggerExport" class="button fa-icon">clipboard</span>
|
||||
<span id="loggerSettings" class="button fa-icon">cog</span>
|
||||
<button id="loggerStats" class="iconified notext" style="display: none;"><span class="fa-icon">bar-chart</span><span class="hover"></span></button>
|
||||
<button id="loggerExport" class="iconified notext"><span class="fa-icon">clipboard</span><span class="hover"></span></button>
|
||||
<button id="loggerSettings" class="iconified notext"><span class="fa-icon">cog</span><span class="hover"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vscrollable">
|
||||
@ -141,8 +141,8 @@
|
||||
</div>
|
||||
<div class="pane static" data-pane="static">
|
||||
<div></div>
|
||||
<div><textarea class="staticFilter" spellcheck="false" value=""></textarea>
|
||||
<button id="createStaticFilter" class="important" type="button" data-i18n="pickerCreate"></button>
|
||||
<div><textarea class="staticFilter" spellcheck="false"></textarea>
|
||||
<button id="createStaticFilter" class="important" type="button" data-i18n="pickerCreate">_<span class="hover"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -159,7 +159,7 @@
|
||||
</div>
|
||||
|
||||
<div id="cosmeticFilteringDialog" class="modalDialog">
|
||||
<textarea class="cosmeticFilters" value=""></textarea>
|
||||
<textarea class="cosmeticFilters"></textarea>
|
||||
<button id="createCosmeticFilters" class="important" type="button" data-i18n="pickerCreate"></button>
|
||||
</div>
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
<div class="fieldset">
|
||||
<div class="fieldset-header" data-i18n="3pGroupPrivacy"></div>
|
||||
<div class="li"><label><span class="input checkbox"><input type="checkbox" data-setting-name="prefetchingDisabled" data-setting-type="bool"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span><span data-i18n="settingsPrefetchingDisabledPrompt"></span> <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> <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> <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> <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> <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> <a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#uncloak-canonical-names" target="_blank">info-circle</a></span></label></div>
|
||||
@ -47,9 +47,9 @@
|
||||
<div class="li" id="settingsLastRestorePrompt" style="display:none;"></div>
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" id="export" data-i18n="aboutBackupDataButton"></button>
|
||||
<button type="button" id="import" data-i18n="aboutRestoreDataButton"></button>
|
||||
<button type="button" id="reset" data-i18n="aboutResetDataButton"></button>
|
||||
<button type="button" id="export" data-i18n="aboutBackupDataButton">_<span class="hover"></span></button>
|
||||
<button type="button" id="import" data-i18n="aboutRestoreDataButton">_<span class="hover"></span></button>
|
||||
<button type="button" id="reset" data-i18n="aboutResetDataButton">_<span class="hover"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
<div>
|
||||
<p data-i18n="supportS1P1">
|
||||
</div>
|
||||
<button type="button" data-url="https://github.com/gorhill/uBlock/wiki" data-i18n="supportOpenButton"></button>
|
||||
<button type="button" data-url="https://github.com/gorhill/uBlock/wiki" data-i18n="supportOpenButton">_<span class="hover"></span></button>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
@ -33,7 +33,7 @@
|
||||
<div>
|
||||
<p data-i18n="supportS2P1">
|
||||
</div>
|
||||
<button type="button" data-url="https://old.reddit.com/r/uBlockOrigin/" data-i18n="supportOpenButton"></button>
|
||||
<button type="button" data-url="https://old.reddit.com/r/uBlockOrigin/" data-i18n="supportOpenButton">_<span class="hover"></span></button>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
@ -45,7 +45,7 @@
|
||||
<p data-i18n="supportS3P2">
|
||||
<p data-i18n="supportS3P3">
|
||||
</div>
|
||||
<button id="filterReport" type="button" data-url="https://github.com/uBlockOrigin/uAssets/issues/new?template=report_from_ubo.yml" data-i18n="supportOpenButton"></button>
|
||||
<button id="filterReport" type="button" data-url="https://github.com/uBlockOrigin/uAssets/issues/new?template=report_from_ubo.yml" data-i18n="supportOpenButton">_<span class="hover"></span></button>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
@ -55,7 +55,7 @@
|
||||
<div>
|
||||
<p data-i18n="supportS4P1">
|
||||
</div>
|
||||
<button id="bugReport" type="button" data-url="https://github.com/uBlockOrigin/uBlock-issues/issues/new?template=bug_report_from_ubo.yml" data-i18n="supportOpenButton"></button>
|
||||
<button id="bugReport" type="button" data-url="https://github.com/uBlockOrigin/uBlock-issues/issues/new?template=bug_report_from_ubo.yml" data-i18n="supportOpenButton">_<span class="hover"></span></button>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
@ -66,7 +66,7 @@
|
||||
<p data-i18n="supportS3P1">
|
||||
<p data-i18n="supportS6P1S1">
|
||||
</div>
|
||||
<button type="button" data-i18n="supportFindSpecificButton"></button>
|
||||
<button type="button" data-i18n="supportFindSpecificButton">_<span class="hover"></span></button>
|
||||
</div>
|
||||
<div class="supportEntry">
|
||||
<div>
|
||||
@ -89,7 +89,7 @@
|
||||
<p>
|
||||
<label><span class="input checkbox"><input id="isNSFW" type="checkbox"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="supportS6Checkbox1"></span></label>
|
||||
</div>
|
||||
<button type="button" data-i18n="supportReportSpecificButton"></button>
|
||||
<button type="button" data-i18n="supportReportSpecificButton">_<span class="hover"></span></button>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
@ -97,8 +97,8 @@
|
||||
<h3 data-i18n="supportS5H"></h3>
|
||||
<p data-i18n="supportS5P1">
|
||||
<p>
|
||||
<button id="selectAllButton" type="button" data-i18n="genericSelectAll"></button>
|
||||
<button id="moreButton" type="button" data-i18n="popupMoreButton_v2" data-url="/devtools.html"></button>
|
||||
<button id="selectAllButton" type="button" data-i18n="genericSelectAll">_<span class="hover"></span></button>
|
||||
<button id="moreButton" type="button" data-i18n="popupMoreButton_v2" data-url="/devtools.html">_<span class="hover"></span></button>
|
||||
<div id="supportData" class="codeMirrorContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
<link rel="stylesheet" href="../lib/codemirror/addon/hint/show-hint.css">
|
||||
|
||||
<link rel="stylesheet" href="../css/themes/default.css">
|
||||
<link rel="stylesheet" href="../css/common.css">
|
||||
<link rel="stylesheet" href="../css/epicker-ui.css">
|
||||
<link rel="stylesheet" href="../css/codemirror.css">
|
||||
</head>
|
||||
@ -33,13 +34,13 @@
|
||||
</div>
|
||||
<div id="toolbar">
|
||||
<div>
|
||||
<button id="preview" type="button" data-i18n="pickerPreview"></button>
|
||||
<button id="preview" type="button" data-i18n="pickerPreview">_<span class="hover"></span></button>
|
||||
</div>
|
||||
<div id="move"></div>
|
||||
<div>
|
||||
<button id="create" type="button" disabled data-i18n="pickerCreate"></button>
|
||||
<button id="pick" type="button" data-i18n="pickerPick"></button>
|
||||
<button id="quit" type="button" data-i18n="pickerQuit"></button>
|
||||
<button id="create" type="button" class="preferred" disabled data-i18n="pickerCreate">_<span class="hover"></span></button>
|
||||
<button id="pick" type="button" data-i18n="pickerPick">_<span class="hover"></span></button>
|
||||
<button id="quit" type="button" data-i18n="pickerQuit">_<span class="hover"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -25,11 +25,11 @@
|
||||
<p class="vverbose"><span data-i18n="whitelistPrompt"></span> <a class="fa-icon info important" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Trusted-sites">info-circle</a>
|
||||
</p>
|
||||
<p>
|
||||
<button id="whitelistApply" class="important iconifiable" type="button" disabled><span class="fa-icon">check</span><span data-i18n="whitelistApply"></span></button>
|
||||
<button id="whitelistRevert" class="iconifiable" type="button" disabled><span class="fa-icon">undo</span><span data-i18n="genericRevert"></span></button>
|
||||
<button id="whitelistApply" class="preferred iconified" type="button" disabled><span class="fa-icon">check</span><span data-i18n="whitelistApply">_</span><span class="hover"></span></button>
|
||||
<button id="whitelistRevert" class="iconified" type="button" disabled><span class="fa-icon">undo</span><span data-i18n="genericRevert">_</span><span class="hover"></span></button>
|
||||
  
|
||||
<button id="importWhitelistFromFile" class="iconifiable" type="button"><span class="fa-icon">download-alt</span><span data-i18n="whitelistImport"></span></button>
|
||||
<button id="exportWhitelistToFile" class="iconifiable" type="button"><span class="fa-icon">upload-alt</span><span data-i18n="whitelistExport"></span></button>
|
||||
<button id="importWhitelistFromFile" class="iconified" type="button"><span class="fa-icon">download-alt</span><span data-i18n="whitelistImport">_</span><span class="hover"></span></button>
|
||||
<button id="exportWhitelistToFile" class="iconified" type="button"><span class="fa-icon">upload-alt</span><span data-i18n="whitelistExport">_</span><span class="hover"></span></button>
|
||||
</p>
|
||||
</div>
|
||||
<div id="whitelist" class="codeMirrorContainer"></div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user