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 for theming 

Related issue:
- https://github.com/uBlockOrigin/uBlock-issues/issues/401
This commit is contained in:
Raymond Hill 2020-10-03 06:00:48 -04:00
parent 0b37a02e00
commit b179dc0268
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
5 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/cloud-ui.css
View File

@ -1,5 +1,5 @@
#cloudWidget { #cloudWidget {
background: url("../img/cloud.png") hsl(216, 100%, 93%); background-color: var(--cloud-widget-surface);
margin: 0.5em 0; margin: 0.5em 0;
min-width: max-content; min-width: max-content;
position: relative; position: relative;

2
src/css/common.css
View File

@ -79,7 +79,7 @@ code, .code {
} }
hr { hr {
border: 0; border: 0;
border-top: 1px solid var(--hor-separator-color); border-top: 1px solid var(--hr-ink);
margin: 1em 0; margin: 1em 0;
} }
textarea { textarea {

8
src/css/epicker-ui.css
View File

@ -1,7 +1,7 @@
html#ublock0-epicker, html#ublock0-epicker,
#ublock0-epicker body { #ublock0-epicker body {
background: transparent; background: transparent;
color: black; color: var(--default-ink);
cursor: not-allowed; cursor: not-allowed;
font: 12px sans-serif; font: 12px sans-serif;
height: 100vh; height: 100vh;
@ -86,10 +86,10 @@ html#ublock0-epicker,
border-color: red; border-color: red;
} }
#ublock0-epicker section textarea { #ublock0-epicker section textarea {
background-color: #fff; background-color: var(--default-surface);
border: none; border: none;
box-sizing: border-box; box-sizing: border-box;
color: #000; color: var(--default-ink);
font: 11px monospace; font: 11px monospace;
height: 8em; height: 8em;
margin: 0; margin: 0;
@ -225,7 +225,7 @@ html#ublock0-epicker,
border: 1px dotted var(--blue-50); border: 1px dotted var(--blue-50);
} }
#ublock0-epicker #candidateFilters .changeFilter li:hover { #ublock0-epicker #candidateFilters .changeFilter li:hover {
background-color: white; background-color: var(--default-surface-hover);
} }
/** /**

2
src/css/popup-fenix.css
View File

@ -49,7 +49,7 @@ a {
} }
hr { hr {
border: 0; border: 0;
border-top: 1px solid #e3e2e3; border-top: 1px solid var(--hr-ink);
margin: 0; margin: 0;
padding: 0; padding: 0;
} }

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

@ -19,6 +19,7 @@
--dark-gray-30: #42414d; --dark-gray-30: #42414d;
--dark-gray-40: #3a3944; --dark-gray-40: #3a3944;
--dark-gray-50: #32313c; --dark-gray-50: #32313c;
--dark-gray-70: #23222b;
--dark-gray-80: #1c1b22; --dark-gray-80: #1c1b22;
--dark-gray-90: #15141a; --dark-gray-90: #15141a;
--ink-20: #312a65; --ink-20: #312a65;
@ -100,8 +101,6 @@
--fieldset-header-surface: transparent; --fieldset-header-surface: transparent;
--fieldset-header-ink: var(--ink-20); --fieldset-header-ink: var(--ink-20);
--hor-separator-color: var(--light-gray-30);
--button-surface: var(--light-gray-30); --button-surface: var(--light-gray-30);
--button-ink: var(--ink-20); --button-ink: var(--ink-20);
--button-surface-hover: var(--light-gray-40); --button-surface-hover: var(--light-gray-40);
@ -167,6 +166,12 @@
--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);
/* horizontal line separator */
--hr-ink: var(--light-gray-30);
/* cloud widget */
--cloud-widget-surface: var(--light-gray-20);
/* codemirror */ /* codemirror */
--cm-gutter-border: var(--light-gray-40); --cm-gutter-border: var(--light-gray-40);
--cm-gutter-ink: var(--light-gray-90); --cm-gutter-ink: var(--light-gray-90);
@ -252,7 +257,7 @@
--link-ink: #bb86fc; --link-ink: #bb86fc;
--fieldset-header-surface: transparent; --fieldset-header-surface: transparent;
--fieldset-header-ink: var(--light-gray-30); --fieldset-header-ink: var(--light-gray-30);
--hor-separator-color: var(--dark-gray-50); --hr-ink: var(--dark-gray-50);
--button-surface: var(--light-gray-10-a12); --button-surface: var(--light-gray-10-a12);
--button-ink: var(--default-ink); --button-ink: var(--default-ink);
--button-surface-hover: var(--light-gray-10-a12); --button-surface-hover: var(--light-gray-10-a12);