lee/changedetection.io
1
0
Fork 0
mirror of https://github.com/dgtlmoon/changedetection.io.git synced 2026-09-23 22:06:58 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Dark mode - make watch list easier to read when theres 'unviewed' entries

Browse Source
This commit is contained in:
dgtlmoon
2022-12-05 15:13:47 +01:00
parent 2345b6b558
commit 7b94ba6f23
4 changed files with 27 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
changedetectionio/static/styles/diff.css
+6 -2
View File
@@ -87,7 +87,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); }
--color-watch-table-error: var(--color-dark-red);
--color-watch-table-row-text: var(--color-grey-100); }
html[data-darkmode="true"] {
--color-link: #59bdfb;
@@ -118,9 +119,12 @@ 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); }
--color-watch-table-error: var(--color-light-red);
--color-watch-table-row-text: var(--color-grey-800); }
html[data-darkmode="true"] .watch-controls img {
opacity: 0.4; }
html[data-darkmode="true"] .watch-table .unviewed {
color: #fff; }
html[data-darkmode="true"] .icon-spread {
filter: hue-rotate(-10deg) brightness(1.5); }
html[data-darkmode="true"] .watch-table .title-col a[target="_blank"]::after,
changedetectionio/static/styles/scss/parts/_variables.scss
+5 -2
View File
@@ -100,6 +100,7 @@
--color-icon-github-hover: var(--color-grey-300);
--color-watch-table-error: var(--color-dark-red);
--color-watch-table-row-text: var(--color-grey-100);
}
html[data-darkmode="true"] {
@@ -127,7 +128,6 @@ html[data-darkmode="true"] {
--color-text-input-description: var(--color-grey-600);
--color-text-input-placeholder: var(--color-grey-600);
--color-text-watch-tag-list: #fa3e92;
--color-background-code: var(--color-grey-200);
--color-background-tab: rgba(0, 0, 0, 0.2);
@@ -138,6 +138,7 @@ html[data-darkmode="true"] {
--color-icon-github: var(--color-white);
--color-icon-github-hover: var(--color-grey-700);
--color-watch-table-error: var(--color-light-red);
--color-watch-table-row-text: var(--color-grey-800);
// Anything that can't be manipulated through variables follows.
.watch-controls {
@@ -145,7 +146,9 @@ html[data-darkmode="true"] {
opacity: 0.4;
}
}
.watch-table .unviewed {
color: #fff;
}
.icon-spread {
filter: hue-rotate(-10deg) brightness(1.5);
}
changedetectionio/static/styles/scss/styles.scss
+6 -2
View File
@@ -121,10 +121,14 @@ code {
width: 100%;
font-size: 80%;
tr.unviewed {
font-weight: bold;
tr {
&.unviewed {
font-weight: bold;
}
color: var(--color-watch-table-row-text);
}
.error {
color: var(--color-watch-table-error);
}
changedetectionio/static/styles/styles.css
+10 -4
View File
@@ -90,7 +90,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); }
--color-watch-table-error: var(--color-dark-red);
--color-watch-table-row-text: var(--color-grey-100); }
html[data-darkmode="true"] {
--color-link: #59bdfb;
@@ -121,9 +122,12 @@ 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); }
--color-watch-table-error: var(--color-light-red);
--color-watch-table-row-text: var(--color-grey-800); }
html[data-darkmode="true"] .watch-controls img {
opacity: 0.4; }
html[data-darkmode="true"] .watch-table .unviewed {
color: #fff; }
html[data-darkmode="true"] .icon-spread {
filter: hue-rotate(-10deg) brightness(1.5); }
html[data-darkmode="true"] .watch-table .title-col a[target="_blank"]::after,
@@ -335,8 +339,10 @@ code {
.watch-table {
width: 100%;
font-size: 80%; }
.watch-table tr.unviewed {
font-weight: bold; }
.watch-table tr {
color: var(--color-watch-table-row-text); }
.watch-table tr.unviewed {
font-weight: bold; }
.watch-table .error {
color: var(--color-watch-table-error); }
.watch-table td {