mpv.io -Dark by arsmoriendy

/* ==UserStyle==
@name         mpv.io -Dark
@version      20220108.00.01
@namespace    userstyles.world/user/arsmoriendy
@description  dark mode mpv.io website
@author       arsmoriendy
@license      No License
==/UserStyle== */

@-moz-document url-prefix("https://mpv.io") {
html {
    --main-bg: hsl(300, 15%, 8%);
    --hi-bg: hsl(300, 30%, 50%);
    --pre-bg: hsl(300, 0%, 8%);
    --code-bg: hsl(346, 50%, 20%);
    --cl1: hsl(0, 0%, 100%);
    --cl2: hsl(346, 70%, 49%);
    --cl3: hsl(50, 60%, 50%);
    --text-highlight: hsl(300, 45%, 31%);
    --border: hsl(300, 0%, 35%);
}

body {
    background: var(--main-bg);
}

.main-content {
    background: var(--main-bg);
    color: white;
}
a {
    color: white;
}
.sticky li a {
    border-bottom: 1px solid var(--border);
}
.sticky li a:hover {
    background: var(--hi-bg);
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--text-highlight);
}
pre {
    background: var(--pre-bg);
    color: white;
}
code {
    background: var(--code-bg);
    color: var(--cl2);
}
footer {
    background: var(--main-bg);
}

hr {
    border-top: 1px solid var(--border);
}

.next-steps + footer > .container {
    border-top: 1px solid var(--border);
}

.warning {
    background: var(--code-bg);
}
.note {
    background: var(--cl3);
}

/* /installation */
.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td {
    border-top: 1px solid var(--border);
}
}