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 @@
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 @@
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 @@
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/js/codemirror/ubo-static-filtering.js b/src/js/codemirror/ubo-static-filtering.js
index 3552d6f80..645879ace 100644
--- a/src/js/codemirror/ubo-static-filtering.js
+++ b/src/js/codemirror/ubo-static-filtering.js
@@ -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 ) {
diff --git a/src/js/dyna-rules.js b/src/js/dyna-rules.js
index aea89a39e..5d042b22c 100644
--- a/src/js/dyna-rules.js
+++ b/src/js/dyna-rules.js
@@ -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');
diff --git a/src/js/i18n.js b/src/js/i18n.js
index b967da464..f5b15ea2e 100644
--- a/src/js/i18n.js
+++ b/src/js/i18n.js
@@ -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 ) {
diff --git a/src/js/messaging.js b/src/js/messaging.js
index f59e8c2fc..3ccf579e8 100644
--- a/src/js/messaging.js
+++ b/src/js/messaging.js
@@ -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;
diff --git a/src/js/udom.js b/src/js/udom.js
index a475b6c5b..fd0c096e8 100644
--- a/src/js/udom.js
+++ b/src/js/udom.js
@@ -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;
diff --git a/src/logger-ui.html b/src/logger-ui.html
index 8b2f57368..7688f2b76 100644
--- a/src/logger-ui.html
+++ b/src/logger-ui.html
@@ -21,9 +21,9 @@