Nyaa Superior Dark Mode by Galathorne

/* ==UserStyle==
@name       Nyaa Superior Dark Mode
@version    20250411.10.19
@namespace  ?
==/UserStyle== */

@-moz-document domain("nyaa.si"), domain("nyaa.land") {
/* CSS Reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1.01em;
    /* Remove the font property, font-size is already set */
    vertical-align: baseline;
}

@font-face {
    font-family: 'Proxima Soft';
    src: url('https://stellenboschpetsitter.co.za/wp-content/uploads/Fonts/ProximaSoft-Medium.ttf') format('truetype');
    font-weight: 500;
    /* Medium */
}

@font-face {
    font-family: 'Proxima Soft Black';
    src: url('https://stellenboschpetsitter.co.za/wp-content/uploads/Fonts/ProximaSoft-BlackIt.ttf') format('truetype');
}

body {
    font-family: 'Proxima Soft Medium', sans-serif !important;
    font-weight: 500;
    /* Default to Medium */
    margin: 0 !important;
    box-sizing: border-box !important;
    background-color: #111 !important;
}

/*  */
.navbar {
    margin: 0 0 10px 0!important;
    padding: 0px 15px !important;
    line-height: 18px !important;
}

.dropdown-menu,
.navbar-nav > li > .dropdown-menu {
    background-color: #222;
    border: 1px solid #000;
    border-radius: 7px;
    margin: 2px;
    left: 0;
}

.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
    background-color: #222;
    color: #fff;
}


.dropdown-menu a {
    color: #9d9d9d !important;
    /* Normal state with higher specificity */
}

.dropdown-menu a:hover {
    color: #fff !important;
    /* Hover state */
    background-color: #000 !important;
}

.dropdown-menu a:focus {
    color: #fff !important;
    /* Hover state */
    background-color: #000 !important;
}

.dropdown-menu a:active {
    color: #000 !important;
    /* Active state */
    background-color: #9d9d9d !important;
}

.input-group.search-container.hidden-xs.hidden-sm {
    border: 1px solid #444;
    border-radius: 4px;
    color: #ffffff;
    background-color: #444;
}


.form-control {
    border: 1px solid #444 !important;
    color: #fff !important;
    background-color: #000 !important;
}

.btn-default {
    color: #ffffff;
    background-color: #333;
    border-color: #444;
}

.btn-success {
    color: #fff !important;
    background-color: #33994d !important;
    border-color: #004d1a !important;
}



/* Ensure shadow appears for both dropdown-menu and dropdown-menu.open */
.dropdown-menu,
.dropdown-menu.open {
    box-shadow: 4px 4px 20px 5px rgba(0, 0, 0, 0.5) !important;
}

h3 {
    vertical-align: middle;
    font-weight: bold !important;
    margin: 0 25px;
    color: #9d9d9d;
}

.table {
    width: calc(100% - 40px);
    /* Subtracts the horizontal margins from the width */
    margin: 10px 15px;
    /* Adds left and right margins */
    background-color: #fff !important;
    /*   !!!!!   CHANGE TO #000 FOR DARK MODE    !!!!!   */
}

.table th {
    text-align: left;
    border: 1px solid #111 !important;
}

.table td {
    padding: 0px 10px !important;
    border-bottom: 1px solid #ddd;
    line-height: 18px !important;
    vertical-align: middle !important;
    background-color: #222 !important;
    /* Darker background for the first column */
    border: 1px solid #111 !important;
    /* Add border for the first column */
    color: #9d9d9d;
}

a {
    color: #648FB4 !important;
    /* Change to your desired link color */
    text-decoration: none;
    /* Optional: Removes underline */
}

a:hover {
    color: #1077D1 !important;
    /* Color when hovering */
    text-decoration: underline;
    /* Optional: Underline on hover */
}

a:visited {
    color: #a145a1 !important;
    /* Color for visited links */
}

a:active {
    color: orange !important;
    /* Color when clicking */
}





.table td:nth-child(1) {
    background-color: #222 !important;
    /* Darker background for the first column */
    border: 1px solid #111 !important;
    /* Add border for the first column */
    text-align: center !important;
    /* Centre-aligns the text horizontally */
    vertical-align: bottom !important;
    padding: 3px 5px 0 5px !important;
}


.row {
    margin: 0;
    padding: 0;
}

thead th {
    height: 30px;
    vertical-align: middle;
    text-align: center;
    background-color: #714b4b;
    color: #f2dede;
}

table.torrent-list tbody .comments {
    border-color: #ccc;
    color: #247fcc;
    background-color: #fff;
    position: relative;
    float: right;
    border: 1px solid #d7d7d7;
    border-radius: 5px;
    padding: 2px 5px;
    font-size: small;
}

.gray-row,
.gray-row a {
    color: rgba(0, 0, 0, 0.2) !important;
}

.container {
    padding: 0 !important;
    width: 100% !important;
}

textarea {
    resize: both;
    /* Ensure resizing is enabled */
    overflow-y: scroll;
    /* Ensure scrollbars appear */
    border: 1px solid #444 !important;
    color: #fff !important;
    background-color: #000 !important;
}

.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
    color: #ccc;
    background-color: #333;
    border-color: #444;
    cursor: not-allowed;
}

.pagination > li > a,
.pagination > li > span {
    background-color: #333;
    position: relative;
    float: left;
    padding: 6px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    color: #ccc;
    border: 1px solid #444;
    margin-left: -1px;
}


/* Gray out rows that don't include "1080p" or "1080" */
tr:not(:first-child):not(:has(:contains('1080p'))):not(:has(:contains('1080'))) {
    color: rgba(0, 0, 0, 0.2) !important;
}



/* Scrollbar to the end of this code */
/* Customize scrollbar in WebKit browsers */
textarea::-webkit-resizer {
    background-image: url('https://www.svgrepo.com/show/470964/align-vertical-center-01.svg');
    background-size: contain;
    /* Make sure the image fits the handle */
    background-color: #aaa;
    /* Dark color for the thumb */
    width: 26px !important;
    /* Adjust the width of the resizer */
    height: 26px !important;
    /* Adjust the height of the resizer */
}

html[hide-scrollbar="true"] ::-webkit-scrollbar {
    display: none;
}
::-webkit-scrollbar {
    width: 20px !important;
    height: 20px !important;
}
::-webkit-scrollbar-thumb {
    -webkit-appearance: none !important;
    background: #484848ff !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    width: 20px !important;
    height: 20px !important;
}
::-webkit-scrollbar-thumb:hover {
    -webkit-appearance: none !important;
    background: #777 !important;
}
::-webkit-scrollbar-thumb:active {
    -webkit-appearance: none !important;
    background: #aaa !important;
}
::-webkit-scrollbar-thumb:vertical {
    border-left: 3px solid #171717 !important;
    border-right: 3px solid #171717 !important;
    border-top: 0px solid #171717 !important;
    border-bottom: 0px solid #171717 !important;
}
::-webkit-scrollbar-thumb:horizontal {
    border-top: 1px solid #171717 !important;
    border-bottom: 1px solid #171717 !important;
    border-left: 0px solid #171717 !important;
    border-right: 0px solid #171717 !important;
}
::-webkit-scrollbar-track {
    -webkit-appearance: none !important;
    background: #171717 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 20px !important;
    height: 20px !important;
}
::-webkit-scrollbar-track:vertical {
    -webkit-appearance: none !important;
    border-left: 1px solid #171717 !important;
    border-right: 1px solid #171717 !important;
    border-top: 0px solid #171717 !important;
    border-bottom: 0px solid #171717 !important;
}
::-webkit-scrollbar-track:horizontal {
    -webkit-appearance: none !important;
    border-top: 1px solid #171717 !important;
    border-bottom: 1px solid #171717 !important;
    border-left: 0px solid #171717 !important;
    border-right: 0px solid #171717 !important;
}
::-webkit-scrollbar-track-piece {
    -webkit-appearance: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 20px !important;
    height: 20px !important;
}
::-webkit-scrollbar-corner {
    -webkit-appearance: none !important;
    background: #202020 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
::-webkit-scrollbar-button {
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 0 !important;
}
::-webkit-scrollbar-button:vertical {
    border-left: 1px solid #171717 !important;
    border-right: 1px solid #171717 !important;
    border-top: 0px solid #171717 !important;
    border-bottom: 0px solid #171717 !important;
}
::-webkit-scrollbar-button:horizontal {
    border-top: 1px solid #171717 !important;
    border-bottom: 1px solid #171717 !important;
    border-left: 0px solid #171717 !important;
    border-right: 0px solid #171717 !important;
}
::-webkit-scrollbar-button:vertical:decrement {
    background-image: url('data:image/svg+xml;base64,PD9...