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

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

@ -12,9 +12,12 @@
*/
: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-80: #1c1b22;
--dark-gray-90: #15141a;
@ -29,13 +32,17 @@
--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;
@ -160,12 +167,29 @@
--bg-popup-cell-label-mixed: hsla(45, 100%, 38%, 1);
--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 */
--sf-variable-ink: var(--default-ink);
--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);
/* 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);
}
/**