diff --git a/changedetectionio/static/styles/diff.css b/changedetectionio/static/styles/diff.css index bbdeaaa9..a9d245af 100644 --- a/changedetectionio/static/styles/diff.css +++ b/changedetectionio/static/styles/diff.css @@ -121,17 +121,19 @@ html[data-darkmode="true"] { --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); } - html[data-darkmode="true"] .watch-controls img { - opacity: 0.4; } - html[data-darkmode="true"] .watch-table .unviewed { - color: #fff; } - html[data-darkmode="true"] .watch-table .unviewed.error { - color: var(--color-watch-table-error); } 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, html[data-darkmode="true"] .watch-table .current-diff-url::after { filter: invert(0.5) hue-rotate(10deg) brightness(2); } + html[data-darkmode="true"] .watch-table .watch-controls .state-off img { + opacity: 0.3; } + html[data-darkmode="true"] .watch-table .watch-controls .state-on img { + opacity: 1.0; } + html[data-darkmode="true"] .watch-table .unviewed { + color: #fff; } + html[data-darkmode="true"] .watch-table .unviewed.error { + color: var(--color-watch-table-error); } #diff-ui { background: var(--color-background); diff --git a/changedetectionio/static/styles/scss/parts/_variables.scss b/changedetectionio/static/styles/scss/parts/_variables.scss index ffa3c623..fd015a2f 100644 --- a/changedetectionio/static/styles/scss/parts/_variables.scss +++ b/changedetectionio/static/styles/scss/parts/_variables.scss @@ -140,18 +140,6 @@ html[data-darkmode="true"] { --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 { - img { - opacity: 0.4; - } - } - .watch-table .unviewed { - color: #fff; - &.error { - color: var(--color-watch-table-error); - } - } .icon-spread { filter: hue-rotate(-10deg) brightness(1.5); @@ -163,5 +151,25 @@ html[data-darkmode="true"] { .current-diff-url::after { filter: invert(.5) hue-rotate(10deg) brightness(2); } + + .watch-controls { + .state-off { + img { + opacity: 0.3; + } + } + .state-on { + img { + opacity: 1.0; + } + } + } + + .unviewed { + color: #fff; + &.error { + color: var(--color-watch-table-error); + } + } } } diff --git a/changedetectionio/static/styles/styles.css b/changedetectionio/static/styles/styles.css index c4bfd45e..1fae1681 100644 --- a/changedetectionio/static/styles/styles.css +++ b/changedetectionio/static/styles/styles.css @@ -124,17 +124,19 @@ html[data-darkmode="true"] { --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); } - html[data-darkmode="true"] .watch-controls img { - opacity: 0.4; } - html[data-darkmode="true"] .watch-table .unviewed { - color: #fff; } - html[data-darkmode="true"] .watch-table .unviewed.error { - color: var(--color-watch-table-error); } 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, html[data-darkmode="true"] .watch-table .current-diff-url::after { filter: invert(0.5) hue-rotate(10deg) brightness(2); } + html[data-darkmode="true"] .watch-table .watch-controls .state-off img { + opacity: 0.3; } + html[data-darkmode="true"] .watch-table .watch-controls .state-on img { + opacity: 1.0; } + html[data-darkmode="true"] .watch-table .unviewed { + color: #fff; } + html[data-darkmode="true"] .watch-table .unviewed.error { + color: var(--color-watch-table-error); } /* spinner */ .spinner,