TV Maze by davidcraig

/* ==UserStyle==
@name         TV Maze
@version      20250330.19.20
@namespace    ?
@description  Dark mode theme using CSS variables.
@license      No License
==/UserStyle== */

@-moz-document domain("tvmaze.com") {
:root {
    --hue: 260;
    
    --primary-bg: hsl(var(--hue, 120), 80%, 5%);
    --bg-lighter-1: hsl(var(--hue, 120), 80%, 15%);
    --bg-lighter-2: hsl(var(--hue, 120), 80%, 25%);
}

#logo {
    filter: hue-rotate(90deg);
}

.progress {
    background: var(--bg-lighter-1);
}

.progress-meter {
    background-color: var(--bg-lighter-2);
}

#searchform-q {
    background: hsl(var(--hue, 120), 80%, 15%);
}

#site-header {
    background: hsl(var(--hue, 120), 80%, 5%);
}

body, html, * {
    background: var(--primary-bg);
    color: hsl(var(--hue, 120), 80%, 80%);
}

nav.page-subnav * {
    background: hsl(var(--hue, 120), 100%, 25%) !important;
    color: hsl(var(--hue, 120), 100%, 90%);
}

.top-bar, .button {
    background: hsl(var(--hue, 120), 100%, 15%);
}

.top-bar-left * {
    background: hsl(var(--hue, 120), 100%, 15%) !important;
    color: hsl(var(--hue, 120), 100%, 90%);
}

.breadcrumbs {
    background: hsl(var(--hue, 120), 100%, 5%) !important;
}

.breadcrumbs *, .button * {
    background: unset !important;
}

#calendar .day .show header, #countdown .day .show header {
    background: var(--bg-lighter-1);
}

#calendar .day .show header > div, #countdown .day .show header > div {
    background: unset;
}

#calendar .day .show > div, #countdown .day .show > div {
    background: var(--primary-bg);
}

.card .image .title {
    background: var(--bg-lighter-1);
}

.schedule header .hours div {
    background: var(--bg-lighter-1);
}

.schedule div.network {
    background: var(--bg-lighter-1);
}

.schedule .shows div {
    background: var(--primary-bg);
}

.schedule .shows div.followed {
    background: var(--bg-lighter-2);
}

a {
    color: hsl(var(--hue, 120), 100%, 70%);
}

a:hover {
    color: hsl(var(--hue, 120), 100%, 80%);
}

* {
    border-color: transparent !important;
}

.tributton-watch .button {
    background: hsl(var(--hue, 120), 100%, 5%) !important;
}

.button.success {
    background: hsl(var(--hue, 120), 100%, 25%) !important;
}


.tributton-watch .button.watched.active {
    background: hsl(var(--hue, 120), 100%, 15%) !important;
}

.card.article {
    border-bottom: solid 3px var(--bg-lighter-2);
    background-color: var(--bg-lighter-2);
}

#airing-today th {
    background-color: var(--bg-lighter-2);
    color: hsl(var(--hue, 120), 100%, 80%);
}

.label {
    background-color: var(--bg-lighter-2);
}

label {
    color: hsl(var(--hue, 120), 100%, 80%);
}

.button.negative {
    background-color: var(--bg-lighter-1);
    color: hsl(var(--hue, 120), 100%, 80%);
}

.button.negative:hover {
    background-color: var(--bg-lighter-2);
}

.calendar-time, .calendar-time strong {
    background-color: var(--bg-lighter-2);
    color: hsl(var(--hue, 120), 100%, 80%);
}

#countdown-shows-today .calendar-time em {
    background-color: var(--bg-lighter-2);
    color: hsl(var(--hue, 120), 100%, 85%);
}

.calendar-time strong {
    box-shadow: unset;
}


/* User Tools (Profile Dropdown) */
#user-tools *, #user-tools #tools {
    background: var(--primary-bg);
}

#contributor-points, #user-tools #user-thumb #contributor-points.no-points {
    background: var(--bg-lighter-1);
}

#contributor-points a {
    background: transparent;
}

#user-thumb h3 {
    color: hsl(var(--hue, 120), 80%, 80%);
}

#user-tools li a:hover {
    background: var(--bg-lighter-1);
}

/* Forms */
select, select:focus, input, input:focus {
    background: var(--bg-lighter-2) !important;
    color: hsl(var(--hue, 120), 80%, 80%) !important;
}

/* User Avatar */
#user-menu img[src="https://static.tvmaze.com/images/no-img/no-avatar.jpg"]::before {
    content: ' ';
    width: 100%;
    height: 100%;
    background: var(--bg-lighter-1);
}

/* Pagination */
.pagination .current, .pagination .active {
    background: var(--bg-lighter-2);
}

}