diff --git a/changedetectionio/static/styles/diff.css b/changedetectionio/static/styles/diff.css index 8663c147..ec019a7f 100644 --- a/changedetectionio/static/styles/diff.css +++ b/changedetectionio/static/styles/diff.css @@ -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, diff --git a/changedetectionio/static/styles/scss/parts/_variables.scss b/changedetectionio/static/styles/scss/parts/_variables.scss index 983debd2..bccac914 100644 --- a/changedetectionio/static/styles/scss/parts/_variables.scss +++ b/changedetectionio/static/styles/scss/parts/_variables.scss @@ -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); } diff --git a/changedetectionio/static/styles/scss/styles.scss b/changedetectionio/static/styles/scss/styles.scss index 65b09971..ebedf2da 100644 --- a/changedetectionio/static/styles/scss/styles.scss +++ b/changedetectionio/static/styles/scss/styles.scss @@ -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); } diff --git a/changedetectionio/static/styles/styles.css b/changedetectionio/static/styles/styles.css index 37877828..949ad0a3 100644 --- a/changedetectionio/static/styles/styles.css +++ b/changedetectionio/static/styles/styles.css @@ -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 {