Mirrors
/
uBlock
mirror of https://github.com/gorhill/uBlock.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add more CSS variables in preparation of dark mode support 

Related issue:
- https://github.com/uBlockOrigin/uBlock-issues/issues/401
This commit is contained in:
Raymond Hill 2020-10-02 12:18:13 -04:00
parent db0d200fcb
commit 266a170beb
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
2 changed files with 77 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/css/codemirror.css
View File

@ -12,6 +12,13 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.CodeMirror-gutters {
background-color: var(--cm-gutter-surface);
border-color: var(--cm-gutter-border);
}
.CodeMirror-linenumber {
color: var(--cm-gutter-ink);
}
/* For when panels are used */ /* For when panels are used */
.codeMirrorContainer > div:not([class^="CodeMirror"]) { .codeMirrorContainer > div:not([class^="CodeMirror"]) {
@ -25,27 +32,23 @@
} }
/* CodeMirror theme overrides */ /* CodeMirror theme overrides */
.cm-s-default .cm-variable { color: var(--sf-variable-ink); } .cm-s-default .cm-comment {
.cm-s-default .cm-value { color: #930; } color: var(--sf-comment-ink);
.cm-s-default .cm-comment { color: var(--sf-comment-ink); } }
.cm-s-default .cm-keyword { color: #90b; } .cm-s-default .cm-def {
.cm-s-default .cm-regex { color: var(--sf-def-ink);
text-underline-position: under; }
text-decoration-color: darkgray; .cm-s-default .cm-directive {
text-decoration-style: solid; color: var(--sf-directive-ink);
text-decoration-line: underline; font-weight: bold;
} }
.cm-s-default .cm-error { .cm-s-default .cm-error {
color: inherit; color: inherit;
} }
.cm-s-default .cm-error, .cm-s-default .cm-error,
.CodeMirror-linebackground.error { .CodeMirror-linebackground.error {
background-color: #ff000016; background-color: var(--sf-error-surface);
text-decoration: underline red; text-decoration: underline var(--sf-error-ink);
text-underline-position: under;
}
.cm-s-default .cm-warning {
text-decoration: underline var(--sf-warning-ink);
text-underline-position: under; text-underline-position: under;
} }
.cm-s-default .cm-link { .cm-s-default .cm-link {
@ -54,28 +57,42 @@
.cm-s-default .cm-link:hover { .cm-s-default .cm-link:hover {
color: var(--link-ink); color: var(--link-ink);
} }
.cm-s-default .cm-keyword {
.cm-directive { color: #333; font-weight: bold; } color: var(--sf-keyword-ink);
.cm-staticext { color: #008; } }
.cm-staticnetBlock { color: #800; } .cm-s-default .cm-regex {
.cm-staticnetAllow { color: #004f00; } text-underline-position: under;
.cm-staticOpt { background-color: #ddd; font-weight: bold; } text-decoration-color: var(--sf-regex-ink);
text-decoration-style: solid;
text-decoration-line: underline;
}
.cm-s-default .cm-tag {
color: var(--sf-tag-ink);
}
.cm-s-default .cm-value { color: var(--sf-value-ink); }
.cm-s-default .cm-variable {
color: var(--sf-variable-ink);
}
.cm-s-default .cm-warning {
text-decoration: underline var(--sf-warning-ink);
text-underline-position: under;
}
/* Rules */ /* Rules */
.cm-s-default .cm-allowrule { .cm-s-default .cm-allowrule {
color: green; color: var(--df-allow-ink);
font-weight: bold; font-weight: bold;
} }
.cm-s-default .cm-blockrule { .cm-s-default .cm-blockrule {
color: red; color: var(--df-block-ink);
font-weight: bold; font-weight: bold;
} }
.cm-s-default .cm-nooprule { .cm-s-default .cm-nooprule {
color: darkslategray; color: var(--df-noop-ink);
font-weight: bold; font-weight: bold;
} }
.cm-s-default .cm-sortkey { .cm-s-default .cm-sortkey {
color: #708; color: var(--sf-keyword-ink);
} }
div.CodeMirror span.CodeMirror-matchingbracket { div.CodeMirror span.CodeMirror-matchingbracket {
@ -89,7 +106,8 @@ div.CodeMirror span.CodeMirror-matchingbracket {
.cm-search-widget { .cm-search-widget {
align-items: center; align-items: center;
background-color: var(--bg-code); background-color: var(--cm-gutter-surface);
border-bottom: 1px solid var(--cm-gutter-border);
cursor: default; cursor: default;
direction: ltr; direction: ltr;
display: flex; display: flex;
@ -106,14 +124,14 @@ div.CodeMirror span.CodeMirror-matchingbracket {
flex-grow: 1; flex-grow: 1;
} }
.cm-search-widget .fa-icon { .cm-search-widget .fa-icon {
fill: #888; fill: var(--cm-gutter-ink);
font-size: 140%; font-size: 140%;
} }
.cm-search-widget .fa-icon:not(.fa-icon-ro):hover { .cm-search-widget .fa-icon:not(.fa-icon-ro):hover {
fill: #000; fill: #000;
} }
.cm-search-widget-input input { .cm-search-widget-input input {
border: 1px solid gray; border: 1px solid var(--cm-gutter-ink);
display: inline-flex; display: inline-flex;
flex-grow: 1; flex-grow: 1;
max-width: 16em; max-width: 16em;
@ -139,6 +157,9 @@ div.CodeMirror span.CodeMirror-matchingbracket {
border: 1px dotted black; border: 1px dotted black;
} }
.CodeMirror-merge {
border-color: var(--cm-gutter-border);
}
.CodeMirror-merge-l-deleted { .CodeMirror-merge-l-deleted {
background-image: none; background-image: none;
} }
@ -147,10 +168,12 @@ div.CodeMirror span.CodeMirror-matchingbracket {
} }
/* This probably needs to be added to CodeMirror repo */ /* This probably needs to be added to CodeMirror repo */
.CodeMirror-merge-gap { .CodeMirror-merge-gap {
background-color: var(--cm-gutter-surface);
border-color: var(--cm-gutter-border);
vertical-align: top; vertical-align: top;
} }
.CodeMirror-merge-spacer { .CodeMirror-merge-spacer {
background-color: var(--bg-code); background-color: var(--cm-gutter-surface);
} }
.CodeMirror-hints { .CodeMirror-hints {

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

@ -12,9 +12,12 @@
*/ */
:root { :root {
--blue-10: #80ebff; --blue-10: #80ebff;
--blue-40: #0090ed;
--blue-50: #0060df; --blue-50: #0060df;
--blue-60: #0250bb; --blue-60: #0250bb;
--dark-gray-10: #52525e;
--dark-gray-30: #42414d; --dark-gray-30: #42414d;
--dark-gray-40: #3a3944;
--dark-gray-50: #32313c; --dark-gray-50: #32313c;
--dark-gray-80: #1c1b22; --dark-gray-80: #1c1b22;
--dark-gray-90: #15141a; --dark-gray-90: #15141a;
@ -29,13 +32,17 @@
--light-gray-10-a12: #f9f9fb1f; --light-gray-10-a12: #f9f9fb1f;
--light-gray-10-a16: #f9f9fb29; --light-gray-10-a16: #f9f9fb29;
--light-gray-20: #f0f0f4; --light-gray-20: #f0f0f4;
--light-gray-25: #e8e8ed;
--light-gray-30: #e0e0e6; --light-gray-30: #e0e0e6;
--light-gray-30-a50: #e0e0e680; --light-gray-30-a50: #e0e0e680;
--light-gray-40: #cfcfd8; --light-gray-40: #cfcfd8;
--light-gray-50: #bfbfc9; --light-gray-50: #bfbfc9;
--light-gray-60: #afafba; --light-gray-60: #afafba;
--light-gray-70: #9f9fad; --light-gray-70: #9f9fad;
--light-gray-80: #8f8f9e;
--light-gray-90: #80808f; --light-gray-90: #80808f;
--orange-80: #9e280b;
--purple-60: #952bb9;
--red-60: #e22850; --red-60: #e22850;
--violet-40: #ab71ff; --violet-40: #ab71ff;
--violet-60: #7542e5; --violet-60: #7542e5;
@ -160,12 +167,29 @@
--bg-popup-cell-label-mixed: hsla(45, 100%, 38%, 1); --bg-popup-cell-label-mixed: hsla(45, 100%, 38%, 1);
--popup-icon-x-ink: var(--red-60); --popup-icon-x-ink: var(--red-60);
/* codemirror */
--cm-gutter-border: var(--light-gray-40);
--cm-gutter-ink: var(--light-gray-90);
--cm-gutter-surface: var(--light-gray-25);
/* syntax highlight: static filtering */ /* syntax highlight: static filtering */
--sf-variable-ink: var(--default-ink);
--sf-comment-ink: var(--light-gray-90); --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-regex-ink: var(--light-gray-60);
--sf-tag-ink: #117700;
--sf-value-ink: var(--orange-80);
--sf-variable-ink: var(--default-ink);
--sf-warning-ink: var(--yellow-50); --sf-warning-ink: var(--yellow-50);
/* syntax highlight: dynamic filtering */ /* 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);
} }
/** /**