rule34.xxx - amoled by xiggi

/* ==UserStyle==
@name           rule34.xxx - amoled
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Deep dark theme for R34
@author         xgg
==/UserStyle== */

@-moz-document domain("rule34.xxx") {
    :root {
        /** Backgrounds **/
        --main-bg: rgb(12, 12, 12);;
        --second-bg: rgb(21, 21, 21);
        --second-bg-opacity: rgba(12, 12, 12, .45);
        --second-bg-rgb: 12, 12, 12;
        --third-bg: rgb(31, 31, 31);
        --third-bg-hover: rgb(31 31 31 / 80%);;
        --third-bg-opacity: rgb(41, 41, 41);
        
        /** Colors **/
        --white: #fff;
        --gray: #a8a6a6;
        --ccc: #ccc;
        --green: #aae5a4;
    }
    
body {
    background: var(--main-bg);
    color: var(--gray);
}
    
    a:link, a:visited, #header *, #header #subnavbar *  {
        color: var(--green);
    }
    
    a:hover, div#header ul#subnavbar li a:hover, #header *:hover, #header #subnavbar li a:hover {
        color: var(--white) !important;
        transition: 0.2s;
        text-shadow: none !important;
    }
    
    a:hover {
        text-shadow: none;
    }
    
    input[type="submit"], input[type="button"]{
        background:  var(--third-bg);
        color: var(--white);
        padding: 10px;
        box-shadow: none;
        border: none;
        line-height: 10px;
        border-radius: 5px;
    }
    
    input[type="submit"]:hover, input[type="button"]:hover,
    div.tag-search input[type=submit]:hover, .manual-page-chooser>input[type=text]:hover, .manual-page-chooser>input[type=submit]:hover, select#type:hover, select#order:hover {
        background:  var(--third-bg-opacity);
        outline: 1px solid var(--green);
        color: var(--green);
        transition: 0.2s;
    }
    
    input[type="submit"]:hover,     div.tag-search input[type=submit]:hover, input[type="button"]:hover {
        background:  var(--third-bg-opacity);
        color: var(--green);
        transition: 0.2s;
    }
    
    input#tags, input[type="text"], input[type="password"], textarea#tags, textarea {
        background:  var(--third-bg);
        color: var(--white);
        border: 1px solid transparent;
        line-height: 10px;
        border-radius: 5px;
    }
    
input#tags:hover, input[type="text"]:hover, input[type="password"]:hover, textarea#tags:hover, textarea:hover {
        background:  var(--third-bg-opacity);
        outline: 1px solid var(--green);
        color: var(--green);
        transition: 0.2s;
    }
    
    input#tags:active, input[type="text"]:active, input[type="password"]:active, textarea#tags:active, textarea:active {
        outline: 1px solid var(--green);
    }
    
    input[type="checkbox"], input[type=checkbox], input[type=radio] {
        background:  var(--third-bg);
        color: var(--white);
        border: 1px solid transparent;
        line-height: 10px;
    }
    
    input#fileUpload, input[type="file" i] {
        background:  var(--third-bg);
        color: var(--white);
        border: 1px solid transparent;
        line-height: 10px;
    }
    
input.input::-webkit-file-upload-button {
    background: var(--third-bg);
    border: 1px solid transparent;
    color: var(--white);
}
    
    div.tag-search input[type=submit], .manual-page-chooser>input[type=text], .manual-page-chooser>input[type=submit], select#type, select#order {
        background:  var(--third-bg);
        color: var(--white);
        border: 1px solid transparent;
        margin-top: 10px;
        margin-bottom: 10px;
        line-height: 10px;
        padding: 10px;
        border-radius: 5px;
    }
    
    div.tag-search input[type=text] {
        padding: 10px;
    }
    
    input#tags, input[type="text"], input[type="password"], textarea#tags, textarea {
        padding: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
    input[type=text]:focus, input[type=password]:focus {
        background: var(--third-bg-opacity);
    }
    
    div#header ul#subnavbar, #header, #header>* {
        background:  var(--second-bg);
    }
    
h1, h2, h3, h4, h5, h6 {
        color: var(--white);
    font-family: verdana,sans-serif;
    margin-bottom: 1em;
    margin-top: 1em;
    }
    
h6 {
    margin-top: 5px;
    margin-bottom: 5px;
}
    
    div.help h4 {
        color: var(--green);
    }
    
tr.tableheader, thead tr {
    background: var(--second-bg) !important;
}
    
    div#header ul#navbar li.current-page {
        background:  var(--second-bg);
        color: var(--green);
    }
    
    table.form th {
        color: var(--white);
    }
    
    .awesomplete {
        margin-bottom: 10px;
        margin-top: 10px;
    }
    
.awesomplete>ul:before {
    background: var(--third-bg);
}
    
.awesomplete>ul {
    background: var(--third-bg);
    border: 1px solid rgba(0,0,0,.3);
    box-shadow: 1px 1px 20px var(--third-bg)
}

.awesomplete>ul {
    background: var(--third-bg);
}
    
.awesomplete mark {
    background: var(--main-bg);
    color: var(--green);
}
    
    .tag-count {
        color: var(--gray);
    }
    
    .tag-type-copyright>a, .tag-type-copyright {
    color: var(--green);
    }
    
    #site-title {
        background:  var(--second-bg);
        margin-bottom: 10px;
    }
    
#rnomenu1:checked~#rlmainmenu, #rnomenu1:checked~#rlsubmenu, #rnomenu2:checked~#rlmainmenu, #rnomenu2:checked~#rlsubmenu {
    color: var(--green);
    }
    
    .tnomenu {
        background:  var(--third-bg);
    }
    
    #navbar li {
        background:  var(--second-bg);
    }
    
#navbar li {
    border-color: transparent;
}

#subnavbar li {
    border-color: transparent;
}
    
table.highlightable td {
    border-color: transparent;
} 
    
table.highlightable>tbody>tr:hover {
    background: var(--third-bg-opacity);
}
    
    .thumb img:hover {
        opacity: 50%;
    transition: 0.2s ease-in-out;
    }
    
    .thumb img:focus, .thumb img:active {
        opacity: 30%;
    }
    
div#paginator a:hover {
    background: var(--third-bg-opacity);
    color: var(--green);
    transition: 0.2s;
        border-radius: 5px;
}
    
.awesomplete>ul>li:hover, .awesomplete>ul>li[aria-selected=true] {
    background: var(--third-bg-opacity);
    color: var(--white);
    text-shadow: none;
    transition: 0.2s;
}
    
div.status-notice {
    border-color: var(--third-bg);
    background: var(--second-bg);
}
    
    .sidebar {
        background: transparent;
    }
    
.link-list>* {
    border-top-style: solid;
    border-top-width: 1px;
    border-color: transparent;
}

.tlabel {
    background-color: var(--third-bg) !important;
    outline: .2rem solid transparent
}
    
input[type=submit]:not([disabled]):active, input[type=button]:not([disabled]):active, button:not([disabled]):active {
    filter: none;
    background: var(--third-bg-opacity);
    color: var(--green);
    outline: 1px solid var(--green);
}

#navbar li.current-page a:hover, div#header ul#navbar li.current-page a:hover {
color: var(--white);
}
    
hr {
    border-color:transparent;
}
    
    div#notice {
    text-align: center;
    color: #fd6363;
    text-shadow: 1px 1px 10px black;
    font-family: verdana,sans-serif;
    background-color: rgb(21 21 21 / 80%);
    padding: 10px 0;
    justify-content: center;
    margin-top: 25px;
    margin-bottom: 25px;
    line-height: 25px;
    position: sticky!important;
    top: 0;
    backdrop-filter: blur(9px);
    }
    
    div#notice:before {
        content: "❤";
         color: #fd6363;
        font-size: 20px;
        margin-right: 10px;
    }
    
    div#stats {
    margin: 0;
    padding-left: 5px;
    padding-right: 5px;
    border: 0;
    }
    
.toptencont {
    border-color: var(--third-bg);
    margin-bottom: 10px;
    margin-right: 10px;
}
    
#header li.current-page a:not(:hover), #header #subnavbar a:not(:hover) {
    text-shadow: none;
}
    
    div#footer>#label, div#footer {
        color: var(--gray);
    }
    
div.sidebar li {
    margin-bottom: 5px;
}
    
    label.block {
        color: #fff;
    }
    
    div#paginator a {
        border-color: transparent;
    }
    
    div#paginator b {
        color: #fff;
        background-color: rgb(170 229 164 / 50%);
        border-radius: 5px;
        padding: 2px 6px;
margin: 0 3px;
    border: 1px solid;
        border-color: transparent;
    }
    
    input#pageid {
        margin-top: 0;
        margin-bottom: 0;
    }
    
textarea {
    font-family: verdana,sans-serif;
}
    
    table.form p {
        font-size: revert;
    }
    
    ::marker {
        display: none;
    }
    
:focus-visible {
    outline: 1px solid var(--green);
}
    
div#header #site-title {
    margin-top: inherit;
}
    
#rmainmenu:checked~#navbar, #rmainmenu:checked~#rlnomenu1, #rmainmenu:checked~#rlsubmenu,  ul#subnavbar {
    padding-bottom: 10px;
}
    
    div.horizontalFlexWithMargins {
        display: none;
    }
    
span.blacklisted-image {
    background: var(--second-bg);
    background-size: cover;
    content: "Blacklisted";
    font-weight: 600;
    color: #fff;
    vertical-align: top;
    border-radius: 10px;
}

.blacklisted-image {
    filter: none;
    display: none;
}
    
span.blacklisted-image:before {
    content: "Blacklisted";
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    height: inherit;
    position: relative;
}
    
div#blacklisted-sidebar {
    align-items: center;
    text-align: center;
    justify-content: center;
    height: inherit;
    position: relative;
    background: var(--third-bg);
    padding-top: 1px;
    padding-bottom: 1px;
    line-height: 10px;
    border-radius: 30px;
    margin-bottom: 1em;
}
    
    div#user-index {
        padding: 0 10px;
    }
    
h4.image-sublinks {
    justify-content: center;
    text-align: center;
}
    
    p.index-header {
        margin-top: 1rem;
    }
    
p.index-header:hov...