cphipps/changedetection.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dark mode - Make watches with errors easier to read

Browse Source
This commit is contained in:
dgtlmoon
2022-12-05 09:53:53 +01:00
parent 378d7b7362
commit 9e67a572c5
4 changed files with 25 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
changedetectionio/static/styles/diff.css
View File

@@ -18,6 +18,8 @@
--color-grey-850: #eee;
--color-grey-900: #f2f2f2;
--color-black: #000;
--color-dark-red: #a00;
--color-light-red: #dd0000;
--color-background-page: var(--color-grey-100);
--color-background-gradient-first: #5ad8f7;
--color-background-gradient-second: #2f50af;
@@ -27,9 +29,9 @@
--color-link: #1b98f8;
--color-menu-accent: #ed5900;
--color-background-code: var(--color-grey-850);
--color-error: #a00;
--color-error: var(--color-dark-red);
--color-error-input: #ffebeb;
--color-error-list: #dd0000;
--color-error-list: var(--color-light-red);
--color-table-background: var(--color-background);
--color-table-stripe: var(--color-grey-900);
--color-text-tab: var(--color-white);
@@ -84,7 +86,8 @@
--color-text-menu-link-hover: var(--color-grey-300);
--color-shadow-jump: var(--color-grey-500);
--color-icon-github: var(--color-black);
--color-icon-github-hover: var(--color-grey-300); }
--color-icon-github-hover: var(--color-grey-300);
--color-watch-table-error: var(--color-dark-red); }
html[data-darkmode="true"] {
--color-link: #59bdfb;
@@ -114,7 +117,8 @@ html[data-darkmode="true"] {
--color-background-snapshot-age: var(--color-grey-200);
--color-shadow-jump: var(--color-grey-200);
--color-icon-github: var(--color-white);
--color-icon-github-hover: var(--color-grey-700); }
--color-icon-github-hover: var(--color-grey-700);
--color-watch-table-error: var(--color-light-red); }
html[data-darkmode="true"] .watch-controls img {
opacity: 0.4; }
html[data-darkmode="true"] .icon-spread {

9
changedetectionio/static/styles/scss/parts/_variables.scss
View File

@@ -19,6 +19,8 @@
--color-grey-850: #eee;
--color-grey-900: #f2f2f2;
--color-black: #000;
--color-dark-red: #a00;
--color-light-red: #dd0000;
--color-background-page: var(--color-grey-100);
--color-background-gradient-first: #5ad8f7;
@@ -29,9 +31,9 @@
--color-link: #1b98f8;
--color-menu-accent: #ed5900;
--color-background-code: var(--color-grey-850);
--color-error: #a00;
--color-error: var(--color-dark-red);
--color-error-input: #ffebeb;
--color-error-list: #dd0000;
--color-error-list: var(--color-light-red);
--color-table-background: var(--color-background);
--color-table-stripe: var(--color-grey-900);
--color-text-tab: var(--color-white);
@@ -96,6 +98,8 @@
--color-shadow-jump: var(--color-grey-500);
--color-icon-github: var(--color-black);
--color-icon-github-hover: var(--color-grey-300);
--color-watch-table-error: var(--color-dark-red);
}
html[data-darkmode="true"] {
@@ -133,6 +137,7 @@ html[data-darkmode="true"] {
--color-shadow-jump: var(--color-grey-200);
--color-icon-github: var(--color-white);
--color-icon-github-hover: var(--color-grey-700);
--color-watch-table-error: var(--color-light-red);
// Anything that can't be manipulated through variables follows.
.watch-controls {

2
changedetectionio/static/styles/scss/styles.scss
View File

@@ -126,7 +126,7 @@ code {
}
.error {
color: var(--color-error);
color: var(--color-watch-table-error);
}
td {

14
changedetectionio/static/styles/styles.css
View File

@@ -21,6 +21,8 @@
--color-grey-850: #eee;
--color-grey-900: #f2f2f2;
--color-black: #000;
--color-dark-red: #a00;
--color-light-red: #dd0000;
--color-background-page: var(--color-grey-100);
--color-background-gradient-first: #5ad8f7;
--color-background-gradient-second: #2f50af;
@@ -30,9 +32,9 @@
--color-link: #1b98f8;
--color-menu-accent: #ed5900;
--color-background-code: var(--color-grey-850);
--color-error: #a00;
--color-error: var(--color-dark-red);
--color-error-input: #ffebeb;
--color-error-list: #dd0000;
--color-error-list: var(--color-light-red);
--color-table-background: var(--color-background);
--color-table-stripe: var(--color-grey-900);
--color-text-tab: var(--color-white);
@@ -87,7 +89,8 @@
--color-text-menu-link-hover: var(--color-grey-300);
--color-shadow-jump: var(--color-grey-500);
--color-icon-github: var(--color-black);
--color-icon-github-hover: var(--color-grey-300); }
--color-icon-github-hover: var(--color-grey-300);
--color-watch-table-error: var(--color-dark-red); }
html[data-darkmode="true"] {
--color-link: #59bdfb;
@@ -117,7 +120,8 @@ html[data-darkmode="true"] {
--color-background-snapshot-age: var(--color-grey-200);
--color-shadow-jump: var(--color-grey-200);
--color-icon-github: var(--color-white);
--color-icon-github-hover: var(--color-grey-700); }
--color-icon-github-hover: var(--color-grey-700);
--color-watch-table-error: var(--color-light-red); }
html[data-darkmode="true"] .watch-controls img {
opacity: 0.4; }
html[data-darkmode="true"] .icon-spread {
@@ -334,7 +338,7 @@ code {
.watch-table tr.unviewed {
font-weight: bold; }
.watch-table .error {
color: var(--color-error); }
color: var(--color-watch-table-error); }
.watch-table td {
white-space: nowrap; }
.watch-table td.title-col {