From 4ee8a5948ddac6cb9a28c32a085076a7d4f7dc3f Mon Sep 17 00:00:00 2001 From: Raymond Hill Date: Sun, 30 Jan 2022 18:35:26 -0500 Subject: [PATCH] Work toward bringing dark theme closer to a stable release Related issue: - https://github.com/uBlockOrigin/uBlock-issues/issues/401 --- src/1p-filters.html | 8 +- src/3p-filters.html | 12 +- src/advanced-settings.html | 2 +- src/asset-viewer.html | 6 +- src/cloud-ui.html | 8 +- src/css/3p-filters.css | 46 +- src/css/advanced-settings.css | 2 +- src/css/asset-viewer.css | 8 +- src/css/click2load.css | 1 - src/css/cloud-ui.css | 19 +- src/css/codemirror.css | 92 ++- src/css/common.css | 126 ++-- src/css/dashboard-common.css | 18 +- src/css/dashboard.css | 17 +- src/css/document-blocked.css | 16 +- src/css/dyna-rules.css | 35 +- src/css/epicker-ui.css | 33 +- src/css/fa-icons.css | 2 + src/css/logger-ui-inspector.css | 6 +- src/css/logger-ui.css | 103 ++- src/css/popup-fenix.css | 67 +- src/css/popup.css | 74 +- src/css/support.css | 1 + src/css/themes/default.css | 690 +++++++++++-------- src/dashboard.html | 8 +- src/devtools.html | 12 +- src/document-blocked.html | 8 +- src/dyna-rules.html | 16 +- src/js/codemirror/ubo-static-filtering.js | 4 +- src/js/dyna-rules.js | 11 +- src/js/i18n.js | 2 +- src/js/messaging.js | 4 +- src/js/udom.js | 49 +- src/logger-ui.html | 36 +- src/settings.html | 8 +- src/support.html | 16 +- src/web_accessible_resources/epicker-ui.html | 9 +- src/whitelist.html | 8 +- 38 files changed, 823 insertions(+), 760 deletions(-) diff --git a/src/1p-filters.html b/src/1p-filters.html index 29d615501..b57e42e31 100644 --- a/src/1p-filters.html +++ b/src/1p-filters.html @@ -26,11 +26,11 @@

question-circle

- - + +   - - + +

diff --git a/src/3p-filters.html b/src/3p-filters.html index 2eca266e8..9be69f77a 100644 --- a/src/3p-filters.html +++ b/src/3p-filters.html @@ -18,24 +18,24 @@
- - - + + +
+
+ +
-
- -
diff --git a/src/advanced-settings.html b/src/advanced-settings.html index 718731ad3..fde43961a 100644 --- a/src/advanced-settings.html +++ b/src/advanced-settings.html @@ -20,7 +20,7 @@

info-circle

-   +  

diff --git a/src/asset-viewer.html b/src/asset-viewer.html index 126cbc6e4..66baf4e14 100644 --- a/src/asset-viewer.html +++ b/src/asset-viewer.html @@ -16,12 +16,12 @@ -
+
spinner - -
+ +
diff --git a/src/cloud-ui.html b/src/cloud-ui.html index 62f120206..366cf72a6 100644 --- a/src/cloud-ui.html +++ b/src/cloud-ui.html @@ -7,14 +7,14 @@
- + - - + +
cog
-   +  
diff --git a/src/css/3p-filters.css b/src/css/3p-filters.css index 4a64e91e3..6da4e08e1 100644 --- a/src/css/3p-filters.css +++ b/src/css/3p-filters.css @@ -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]) { diff --git a/src/css/advanced-settings.css b/src/css/advanced-settings.css index b112e66a4..c67e75070 100644 --- a/src/css/advanced-settings.css +++ b/src/css/advanced-settings.css @@ -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 { diff --git a/src/css/asset-viewer.css b/src/css/asset-viewer.css index 8fb6ee337..8b6f1da18 100644 --- a/src/css/asset-viewer.css +++ b/src/css/asset-viewer.css @@ -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, diff --git a/src/css/click2load.css b/src/css/click2load.css index 69f2ac6b2..b6d39249e 100644 --- a/src/css/click2load.css +++ b/src/css/click2load.css @@ -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; diff --git a/src/css/cloud-ui.css b/src/css/cloud-ui.css index 4944fda03..1891a1dd3 100644 --- a/src/css/cloud-ui.css +++ b/src/css/cloud-ui.css @@ -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; diff --git a/src/css/codemirror.css b/src/css/codemirror.css index e00879821..89100fa67 100644 --- a/src/css/codemirror.css +++ b/src/css/codemirror.css @@ -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 { diff --git a/src/css/common.css b/src/css/common.css index 4ff179059..1a850e5c6 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -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; diff --git a/src/css/dashboard-common.css b/src/css/dashboard-common.css index 581a6c341..c5caa9284 100644 --- a/src/css/dashboard-common.css +++ b/src/css/dashboard-common.css @@ -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 { diff --git a/src/css/dashboard.css b/src/css/dashboard.css index fa17451a7..1a410bcdf 100644 --- a/src/css/dashboard.css +++ b/src/css/dashboard.css @@ -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 */ diff --git a/src/css/document-blocked.css b/src/css/document-blocked.css index d7011be80..ae1b65fef 100644 --- a/src/css/document-blocked.css +++ b/src/css/document-blocked.css @@ -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); diff --git a/src/css/dyna-rules.css b/src/css/dyna-rules.css index c709bedd4..35e0f8cbb 100644 --- a/src/css/dyna-rules.css +++ b/src/css/dyna-rules.css @@ -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; diff --git a/src/css/epicker-ui.css b/src/css/epicker-ui.css index 59519e42f..9110cb30e 100644 --- a/src/css/epicker-ui.css +++ b/src/css/epicker-ui.css @@ -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); } /** diff --git a/src/css/fa-icons.css b/src/css/fa-icons.css index 807a7f39c..a212889a5 100644 --- a/src/css/fa-icons.css +++ b/src/css/fa-icons.css @@ -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; diff --git a/src/css/logger-ui-inspector.css b/src/css/logger-ui-inspector.css index acfd5c563..9d50fbdd8 100644 --- a/src/css/logger-ui-inspector.css +++ b/src/css/logger-ui-inspector.css @@ -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; diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css index 9ea2b3317..9eef96a73 100644 --- a/src/css/logger-ui.css +++ b/src/css/logger-ui.css @@ -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; diff --git a/src/css/popup-fenix.css b/src/css/popup-fenix.css index 40922807f..84f39853b 100644 --- a/src/css/popup-fenix.css +++ b/src/css/popup-fenix.css @@ -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); } diff --git a/src/css/popup.css b/src/css/popup.css index 4537769d6..76e0f78a9 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -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; diff --git a/src/css/support.css b/src/css/support.css index deb780bd9..782463f68 100644 --- a/src/css/support.css +++ b/src/css/support.css @@ -6,6 +6,7 @@ body { max-width: 800px; } h3 { + color: var(--fieldset-header-ink); margin-bottom: 0; } .supportEntry { diff --git a/src/css/themes/default.css b/src/css/themes/default.css index df64e2c4d..4f3b78011 100644 --- a/src/css/themes/default.css +++ b/src/css/themes/default.css @@ -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)); +} + diff --git a/src/dashboard.html b/src/dashboard.html index e34627341..262b80278 100644 --- a/src/dashboard.html +++ b/src/dashboard.html @@ -23,14 +23,14 @@ -->
-
+
  -   - +   +
-
+ diff --git a/src/devtools.html b/src/devtools.html index dd0fe8cb5..8ec79999e 100644 --- a/src/devtools.html +++ b/src/devtools.html @@ -22,12 +22,12 @@

- - - - - - + + + + + +

diff --git a/src/document-blocked.html b/src/document-blocked.html index a4a954019..8712cb19b 100644 --- a/src/document-blocked.html +++ b/src/document-blocked.html @@ -27,15 +27,15 @@
- - + +

- - + +

diff --git a/src/dyna-rules.html b/src/dyna-rules.html index 752f997f4..32958d266 100644 --- a/src/dyna-rules.html +++ b/src/dyna-rules.html @@ -25,21 +25,21 @@
- - + +
- - - -
-
- filter    double-angle-up + + +
+
+ filter    double-angle-up +
info-circle @@ -34,11 +34,11 @@
- double-angle-up - double-angle-left + + - eraser - floppy-o + +
@@ -48,12 +48,12 @@
- double-angle-up - times - eraser - pause-circle-oplay-circle-o + + + + - filter + angle-up @@ -72,9 +72,9 @@
- - clipboard - cog + + +
@@ -141,8 +141,8 @@
-
- +
+
@@ -159,7 +159,7 @@
- +
diff --git a/src/settings.html b/src/settings.html index caee92978..6c3c1fa0f 100644 --- a/src/settings.html +++ b/src/settings.html @@ -25,7 +25,7 @@
-
+
@@ -47,9 +47,9 @@
- - - + + +
diff --git a/src/support.html b/src/support.html index dc2cc7366..858ffc49c 100644 --- a/src/support.html +++ b/src/support.html @@ -23,7 +23,7 @@

- +
@@ -33,7 +33,7 @@

- +
@@ -45,7 +45,7 @@

- +

@@ -55,7 +55,7 @@

- +
@@ -66,7 +66,7 @@

- +

@@ -89,7 +89,7 @@

- +
@@ -97,8 +97,8 @@

- - + +

diff --git a/src/web_accessible_resources/epicker-ui.html b/src/web_accessible_resources/epicker-ui.html index a99e0d764..2c7ed39b7 100644 --- a/src/web_accessible_resources/epicker-ui.html +++ b/src/web_accessible_resources/epicker-ui.html @@ -8,6 +8,7 @@ + @@ -33,13 +34,13 @@
- +
- - - + + +
diff --git a/src/whitelist.html b/src/whitelist.html index 53167ced7..74554fbf9 100644 --- a/src/whitelist.html +++ b/src/whitelist.html @@ -25,11 +25,11 @@

info-circle

- - + +    - - + +