Stylus CSS by trapalot

/* ==UserStyle==
@name           Red/Black CSS
@namespace      Stylus
@author         TYG Trapalot
@description    Red/Black CSS For Stylus, Feel Free To Let Me Know If Any Of You Would Want A Rainbow Themed CSS For This Website And I'll Work On It As Soon As Possible.
@version        1.0
@license        NO-REDISTRIBUTION
@preprocessor   uso
==/UserStyle== */
@-moz-document url-prefix("chrome-extension://clngdbkpkpeebahjckkjfobafhncgmne/manage.html"),
url-prefix("chrome-extension://clngdbkpkpeebahjckkjfobafhncgmne/edit.html") {
    body {
        background: #2b2b2b url('/*[[IMAGE_BG]]*/');
        background-size: cover; }
    #header h1 {
        margin-top: 0px;
        color: black;
        text-shadow: 0px 0px 10px red;
        margin-bottom: 0.3em; }
    a,
    .disabled a:hover {
        color: red;
        transition: color 1s; }
    .disabled h2 .style-name-link,
    .disabled .applies-to,
    .newUI .disabled.entry .svg-icon {
        color: black;
        fill: black;
        text-shadow: 0px 0px 10px red;
        font-weight: normal;
        transition: color .5s .1s, fill .5s .1s; }
    .style-name a,
    .style-edit-link {
        text-decoration: none;
        color: red;
        text-shadow: 0px 0px 10px black; }
    .newUI .entry.enabled .style-name:hover .style-name-link {
        color: #000000;
        text-shadow: 0px 0px 10px red; }
    .CodeMirror-linewidget .applies-to {
        margin: 1em 0;
        background-color: #000000;
        border: 0.1px solid #f00;
        padding: 0.75rem calc(0.25rem + var(--cm-bar-width, 0)) 0.25rem 0.75rem;
        font-family: var(--family); }
    .applies-to input,
    .applies-to select {
        background: #ffa8a8;
        box-shadow: 0px 0px 0px 2px #ff0000;
        transition: none;
        color: rgb(0 0 0);
        text-shadow: 0px 0px 10px red; }
    .applies-to li .applies-value {
        flex-grow: 1;
        padding-left: 0.2rem;
        color: black;
        background-color: #ffa8a8;
        text-shadow: 0px 0px 10px red;
        box-shadow: 0px 0px 0px 2px red; }
    .CodeMirror-scroll,
    .CodeMirror-sizer,
    .CodeMirror-gutter,
    .CodeMirror-gutters,
    .CodeMirror-linenumber {
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        background-color: #353535; }
    .CodeMirror-linewidget {
        position: relative;
        z-index: 2;
        padding: 0.1px;
        background-color: black; }
    input:not([type]),
    input[type=text],
    input[type=number],
    input[type=search] {
        background: #000;
        color: #f00;
        height: var(--input-height);
        min-height: var(--input-height)!important;
        line-height: var(--input-height);
        box-sizing: border-box;
        padding: 0 3px;
        border: 1px solid #f00; }
    button:disabled,
    select:disabled,
    option:disabled,
    select[disabled] > option {
        color: red;
        border: 2px solid red;
        background-color: black; }
    .split-btn-pedal {
        margin-left: -1px !important;
        padding-left: 0.25em !important;
        padding-right: 0.25em !important;
        min-width: 0 !important;
        color: red;
        background-color: black;
        border: 2px solid red; }
    button {
        -webkit-appearance: none;
        -moz-appearance: none;
        user-select: none;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 2px 7px;
        border: 2px solid #ff0000;
        font: inherit;
        font-size: 13px;
        line-height: 1.2;
        color: #ff0000;
        background-color: #000000;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QwGBBwIHvKt6QAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAL0lEQVQI12NoaGgQZ2JgYGBkYmBgYGZiYGBggrMY4VxsYsyoskQQCB2MWAxAMhkADVECDhlW9CoAAAAASUVORK5CYII=);
        background-repeat: repeat-x;
        background-size: 100% 100%;
        transition: background-color .25s, border-color .25s; }
    .CodeMirror-linewidget {
        position: relative;
        z-index: 2;
        padding: 0.1px;
        background-color: black;
        box-shadow: 0px 0px 0px 2px red; }
    label {
        padding-left: 16px;
        position: relative;
        color: black;
        text-shadow: 0px 0px 10px red; }
    label {
        padding-left: 16px;
        position: relative;
        color: red;
        text-shadow: 0px 0px 10px black; 
}
:root {
    --family: Arial, "Helvetica Neue", Helvetica, system-ui, sans-serif;
    --input-height: 22px;
    --cmin: hsl(0deg 0% 0%);
    --c00: hsl(0, 0%, 00%);
    --c10: hsl(0deg 0% 10%);
    --c20: hsl(0deg 0% 20%);
    --c30: hsl(0, 100%, 50%);
    --c40: #f00;
    --c45: #ff0000;
    --c50: hsl(0deg 0% 50%);
    --c60: #f00;
    --c65: #ff0000;
    --c70: hsl(0deg 0% 70%);
    --c75: hsl(0deg 0% 75%);
    --c80: hsl(0deg 0% 80%);
    --c85: #ff0000;
    --c90: #000;
    --c95: hsl(0deg 0% 95%);
    --c100: hsl(0deg 0% 100%);
    --cmax: hsl(0deg 0% 100%);
    --bg: hsl(0deg 0% 100%);
    --fg: #000;
    --accent-1: hsl(0deg 100% 50%);
    --accent-2: hsl(0deg 100% 50%);
    --accent-3: hsl(0deg 100% 50%);
    --red1: hsl(0deg 100% 50%);
}
#basic-info-enabled input, #basic-info-enabled svg {
    margin: auto 0;
    bottom: 0;
    box-shadow: 0px 0px 5px 0px red;
}
input[type="checkbox"]:not(.slider) {
    -webkit-appearance: none;
    -moz-appearance: none;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid #ff0000;
    box-shadow: 0px 0px 5px 0px red;
    height: 12px;
    width: 12px;
    display: inline-flex;
    border-radius: 2px;
    background-color: #ffffff00;
    margin: 0;
    transition: background-color .1s, border-color .1s;
}
#help-popup {
    --pad-x: 1.5rem;
    --pad-y: 1rem;
    --pad-y2: calc(var(--pad-y) / 1.5);
    top: 3rem;
    right: 3rem;
    max-width: 50vw;
    position: fixed;
    display: none;
    background-color: hsl(0deg 0% 0%);
    color: red;
    box-shadow: 0px 0px 30px 0px rgb(255 0 0);
    padding: var(--pad-y) var(--pad-x) 0;
    z-index: 99;
}
input {
    font: inherit;
    border: 1px solid #ff0000;
    color: red;
    background-color: black;
    transition: border-color .1s, box-shadow .1s;
}
.style-settings textarea:not(:placeholder-shown) {
    min-width: 50vw;
    background-color: black;
}
.CodeMirror-linenumber {
    cursor: pointer;
    color: red;
    text-shadow: 0px 0px 5px red;
}
.active #filters-stats {
    background-color: black;
    border-color: red;
    color: red;
    border: 2px solid red;
    font-size: 0.7rem;
    font-weight: normal;
    padding: 2px 5px;
    position: relative;
    white-space: nowrap;
}
.config-dialog #message-box-contents {
    padding: var(--pad);
    background-color: black;
}
#message-box-title {
    font-weight: bold;
    background-color: #000;
    color: red;
    text-shadow: 0px 0px 10px red;
    padding: 0.75rem 24px 0.75rem 52px;
    font-size: 1rem;
    position: relative;
    min-height: 42px;
    box-sizing: border-box;
    cursor: move;
    user-select: none;
    -moz-user-select: none;
}
#message-box-buttons {
    padding: 0.75rem 0.375rem;
    background-color: #000;
    text-align: center;
    color: red;
}
#message-box-title::before {
    content: "";
    width: 0;
    height: 0;
    padding: 0 32px 32px 0;
    background: url(/images/icon/32.png);
    position: absolute;
    left: 0.5rem;
    top: 0;
    bottom: 0;
    box-shadow: 0px 0px 10px 0px red;
    margin: auto;
}
.config-body label {
    display: flex;
    padding: 0.75em 0;
    align-items: center;
    margin-right: calc(-1 * var(--pad));
    color: red;
    text-shadow: 0px 0px 10px red;
}
#message-box-contents {
    background-color: black;
    color: red;
    box-shadow: 0px 0px 20px red;
    overflow: auto;
    padding: 1.5rem 0.75rem;
    position: relative;
    flex-grow: 9;
    overflow-wrap: break-word;
}
.injection-order [data-prio] header {
    background-color: #000000;
    color: red;
}
.injection-order [data-prio] header, .injection-order ol, .injection-order #message-box-buttons, .injection-order-entry:nth-child(n + 2) {
    border-top: 1px solid rgb(255 0 0);
}
.injection-order-toggle:hover::after {
    color: #ff000040;
}
.newUI .entry .style-name:hover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, #ff000036, #ff000000 50%, #00000036);
    pointer-events: none;
    box-shadow: 0px 0px 0px 1px red;
    animation: 1s background;
}
input[type="checkbox"]:not(.slider):hover {
    border-color: var(--c30);
    background-color: hsl(0deg 100% 50% / 57%);
}
button:not(:disabled):hover {
    background-color: hsl(0deg 100% 50%);
    border-color: hsl(0deg 0% 0%);
    color: black;
}
.svg-icon, .svg-icon.info:hover, .svg-icon.settings:hover {
    fill: #f00;
}
#header summary h2, #header summary h2 > :first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0px 0px 10px red;
}
#filters label:hover, #filters .filter-selection:hover {
    background-color: rgb(255 0 0 / 20%);
}
#toc li:hover {
    background-color: #f00;
    transition: background-color 1s;
}
.oldUI .disabled h2::after, .entry.usercss .style-name-link::after {
    font-size: 10px;
    border-radius: 4px;
    margin-left: 1ex;
    position: fixed;
    white-space: nowrap;
    content: "UC";
    background-color: #ff000000;
    box-shadow: 0px 0px 0px 1px red;
    text-shadow: 0 0 5px black;
    paddi...