changedetection.io Dark Mode by gboudreau

/* ==UserStyle==
@name       changedetection-io.home.patati.ca
@version    20240817.20.30
@namespace  ?
==/UserStyle== */

@-moz-document domain("changedetection-io.home.patati.ca") {
:root {
    --main-bg-color: radial-gradient(circle farthest-side at 0% 100%, rgb(47, 47, 47) 0%, rgba(47, 47, 47, 0) 100%), radial-gradient(circle farthest-side at 100% 100%, rgb(63, 63, 63) 0%, rgba(63, 63, 63, 0) 100%), radial-gradient(circle farthest-side at 100% 0%, rgb(76, 76, 76) 0%, rgba(76, 76, 76, 0) 100%), radial-gradient(circle farthest-side at 0% 0%, rgb(58, 58, 58) 0%, rgba(58, 58, 58, 0) 100%), black center center/cover no-repeat fixed;
    --modal-bg-color: #282828;
    --modal-header-color: #323232;
    --modal-footer-color: #323232;
    --drop-down-menu-bg: #191a1c;
    --button-color: #cc7b19;
    --button-color-hover: #e59029;
    --button-text: #eee;
    --button-text-hover: #fff;
    --accent-color: 229, 160, 13;
    --accent-color-hover: #ffc107;
    --link-color: #e5a00d;
    --link-color-hover: #fff;
    --label-text-color: #333;
    --text: #ddd;
    --text-hover: #fff;
    --text-muted: #999;
    --arr-queue-color: #27c24c;
    --plex-poster-unwatched: #e5a00d;
    --petio-spinner: invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(100%) contrast(100%);
    --gitea-color-primary-dark-4: 255, 193, 7;
    --overseerr-gradient: radial-gradient(circle farthest-side at 0% 100%, rgb(47, 47, 47) 0%, rgba(47, 47, 47, 0) 100%), radial-gradient(circle farthest-side at 100% 100%, rgb(63, 63, 63) 0%, rgba(63, 63, 63, 0) 100%), radial-gradient(circle farthest-side at 100% 0%, rgb(76, 76, 76) 0%, rgba(76, 76, 76, 0) 100%), radial-gradient(circle farthest-side at 0% 0%, rgb(58, 58, 58) 0%, rgba(58, 58, 58, 0) 100%), rgba(0, 0, 0, 0.5) center center/cover no-repeat fixed;
    --transparency-dark-35: rgba(0, 0, 0, .35);
}

html .watch-table .title-col a[target="_blank"]::after,
html .watch-table .current-diff-url::after {
    filter: invert(0.5) hue-rotate(10deg) brightness(2);
}

body {
    color: var(--text);
    background: var(--modal-header-color);
}

#diff-ui {
    background: var(--modal-bg-color);
}

#diff-ui .snapshot-age {
    background: var(--modal-header-color);
}

body::before,
body::after {
    background: none;
    clip-path: none;
}

a {
    color: var(--link-color);
}

a:hover {
    text-decoration: underline;
}

.pure-button-primary,
a.pure-button-primary,
.pure-button-selected,
a.pure-button-selected {
    color: var(--button-text);
    background-color: var(--button-color);
}

.pure-button-hover,
.pure-button:focus,
.pure-button:hover {
    text-decoration: none;
}

.pure-menu-horizontal {
    background: var(--transparency-dark-35);
}

.pure-menu-link {
    color: var(--text);
}

.sticky-tab {
    background: var(--transparency-dark-35);
}

#new-watch-form input:not(.pure-button) {
    background-color: var(--transparency-dark-35);
    color: var(--text-muted);
}

.pure-table thead {
    background-color: var(--modal-header-color);
    color: var(--text);
}

.pure-table-odd,
.pure-table-even,
.pure-table-striped tr:nth-child(2n-1) td,
.watch-table tr {
    background: transparent;
    color: var(--text);
}

.pure-table,
.pure-table td,
.pure-table th {
    border: none;
    border-bottom: 1px solid var(--text-muted);
}

.watch-tag-list {
    color: var(--text-muted);
    white-space: nowrap;
}

#hosted-sticky {
    display: none;
}
}