Dark qBittorrent WebUI by thesuperhiro

/* ==UserStyle==
@name           Dark qBittorrent WebUI
@version        1.0.0
@namespace      https://github.com/iFelix18/
@description    A darker theme for qBittorrent WebUI (ispired by Cozzy's theme: userstyles.org/styles/152766)
@author         Felix
@homepageURL    https://github.com/iFelix18/Dark-qBittorrent-WebUI/
@supportURL     https://github.com/iFelix18/Dark-qBittorrent-WebUI/issues/
@license        CC-BY-SA-4.0
@preprocessor   stylus
==/UserStyle== */
@-moz-document url-prefix("http://192.168.1.67:8080/") {
    /*              Change ▲ ▲ ▲ ▲ ▲ THIS URL ▲ ▲ ▲ ▲ ▲ with what you use to access to the qBittorrent WebUI, this is an example.
----------------------------------------------------------------------------------------------*/
    /* Dark qBittorrent WebUI by Felix
    
            1.0.0 (03/06/2018) - first release
    
----------------------------------------------------------------------------------------------*/
    /* COLORS */
     :root {
        --color-Dark: #1D1D1D;
        --color-Grey: #3A3A3A;
        --color-White: #C4C4C4;
    }
    /* THEME */
    html,
    body,
    #desktopHeader,
    #desktopNavbar,
    #mochaToolbar,
    #Filters {
        background: var(--color-Dark) !important;
        color: var(--color-White);
    }
    a {
        color: var(--color-White) !important;
    }
    #desktopNavbar li a {
        color: var(--color-White) !important;
        border-bottom-color: var(--color-Grey) !important;
    }
    #desktopNavbar li a:hover {
        background: var(--color-Grey) !important;
    }
    #desktopNavbar li ul {
        background: var(--color-Dark) !important;
        background-image: none !important;
    }
    #desktopNavbar li ul .divider {
        border-top-color: var(--color-Grey) !important;
    }
    #pageWrapper {
        border-top-color: var(--color-Grey) !important;
    }
    .torrentTable,
    .dynamicTable {
        border-color: var(--color-Grey) !important;
    }
    .torrentTable th,
    .dynamicTable th {
        background: var(--color-Dark) !important;
        color: var(--color-White) !important;
    }
    .dynamicTable th {
        border-right-color: var(--color-Grey) !important;
    }
    .torrentTable tr,
    .dynamicTable tr {
        background: var(--color-Dark) !important;
    }
    .torrentTable tr:nth-child(even),
    .dynamicTable tr:nth-child(even) {
        background: var(--color-Dark) !important;
    }
    .torrentTable tr.selected,
    .torrentTable tr:hover,
    .dynamicTable tr.selected,
    .dynamicTable tr:hover {
        color: var(--color-White) !important;
    }
    .torrentTable tr.selected,
    .dynamicTable tr.selected {
        background: var(--color-Grey) !important;
    }
    .torrentTable tr:hover,
    .dynamicTable tr:hover,
    ul.filterList li:hover,
    .selectedFilter {
        background: var(--color-Grey) !important;
    }
    .toolbarTabs {
        padding-bottom: 0 !important;
    }
    .toolbarTabs li,
    .toolbarTabs li a {
        background-image: none !important;
        color: var(--color-White) !important;
    }
    .toolbarTabs li {
        margin-left: 2px !important;
        margin-right: 2px !important;
        margin-bottom: 0 !important;
        background: var(--color-Grey) !important;
        border-radius: 2px 2px 0 0;
        box-shadow: none;
        background-position: left -70px
    }
    .toolbarTabs li.selected {
        background: var(--color-Dark) !important;
    }
    .toolbarTabs li a {
        margin-left: 0 !important;
        padding: 4px 9px !important;
    }
    #propertiesPanel_header {
        height: 27px !important;
    }
    #propertiesPanel_headerContent {
        padding-top: 3px !important;
    }
    #prop_general fieldset,
    #watched_folders_tab tr,
    #watched_folders_tab th,
    #watched_folders_tab td {
        border-color: var(--color-White) !important;
    }
    #desktopFooter {
        background: var(--color-Dark) !important;
        border: 1px solid var(--color-Grey) !important;
        color: var(--color-White) !important;
    }
    .panel {
        background: var(--color-Dark) !important;
        border-bottom-color: var(--color-Grey) !important;
        color: var(--color-White) !important;
    }
    .panel-header,
    .panel-headerContent,
    .toolbarTabs {
        background-image: none !important;
        background-color: var(--color-Grey) !important;
    }
    .panel-header {
        border-bottom-color: var(--color-Dark) !important;
    }
    .horizontalHandle,
    .columnHandle {
        background: var(--color-Grey) !important;
        border-color: var(--color-Grey) !important;
    }
    .horizontalHandle .handleIcon {
        background: none !important;
    }
    .columnHandle:after {
        transform: rotate(90deg) !important;
    }
    .horizontalHandle {
        background-image: none !important;
    }
    .mochaCanvas {
        display: none !important;
    }
    .mochaTitlebar,
    .mochaTitlebar.replaced {
        background: var(--color-Grey) !important;
        border-radius: 7px 7px 0 0;
    }
    .mochaTitle {
        color: var(--color-White) !important;
    }
    .mochaToolbarWrapper {
        border-top-color: var(--color-Grey) !important;
    }
    .mochaToolbar {
        border-top-color: var(--color-Grey) !important;
        background: var(--color-Grey) !important;
        padding-top: 4px;
    }
    .mochaContentBorder {
        border-top-color: var(--color-Dark) !important;
        border-bottom-color: var(--color-Grey) !important;
        border-bottom-width: 23px !important;
        border-radius: 0 0 7px 7px;
    }
    .mochaContentWrapper {
        background: var(--color-Dark) !important;
    }
    .mochaContent fieldset {
        border-color: var(--color-White) !important;
    }
    .mocha::after {
        content: "";
        display: block;
        position: absolute;
        top: 4px;
        left: 5px;
        bottom: 7px;
        right: 5px;
        border-radius: 7px;
        box-shadow: 0 0 10px #000;
        z-index: -1000;
    }
    .mocha#preferencesPage::after {
        bottom: 6px;
    }
    .contextMenu,
    .contextMenu li ul {
        background: var(--color-Dark) !important;
        border-color: var(--color-Grey) !important;
    }
    .contextMenu li a {
        color: var(--color-White) !important;
    }
    .contextMenu li a:hover {
        background: var(--color-Grey) !important;
    }
    h2,
    h3 {
        color: var(--color-White);
    }
    .filterList a {
        color: var(--color-White) !important;
    }
    /*Makes the toolbar buttons, rightclick menu and menu bar white*/
    .mochaToolButton,
    .contextMenu img,
    #desktopNavbar img,
    #addTrackersPlus {
        filter: grayscale(100%) brightness(249%) !important;
    }
    /*Adjusts images in the footer and filter menu and torrents section (e.g. the downloading, seeding and paused icons) to be slightly brighter*/
    #filtersColumn img,
    #transferList_wrapper img,
    #desktopFooter img {
        filter: brightness(100%);
    }
    /*progressbar border*/
    div.progressbar_wrapper {
        border-color: var(--color-White) !important;
    }
    /* % of download completed*/
    .progressbar_dark {
        background: var(--color-Grey) !important;
        color: var(--color-White) !important;
    }
    /* % of download uncompleted*/
    .progressbar_light {
        background: var(--color-Dark) !important;
        color: var(--color-White) !important;
    }
    .panel-collapse {
        filter: grayscale(100%) brightness(60%) !important;
    }
    select {
        background: var(--color-Dark);
        border-color: var(--color-White);
        color: var(--color-White) !important;
    }
    input,
    textarea {
        background: var(--color-Grey) !important;
        color: var(--color-White) !important;
        border: 0px;
        white-space: nowrap;
    }
    input::placeholder {
        color: var(--color-White) !important;
    }
    #error_div {
        color: red;
    }
    /* SCROLLBARS
----------------------------------------------------------------------------------------------*/
     ::-webkit-scrollbar-corner {
        background-color: #333333;
    }
     ::-webkit-scrollbar {
        background-color: #333333;
        height: 10px;
        width: 10px;
    }
     ::-webkit-scrollbar-thumb {
        background: #555555;
        -webkit-border-radius: 2px;
        border-radius: 2px;
    }
    /* VERSION
----------------------------------------------------------------------------------------------*/
    div#aboutpage_content.mochaContent h3:nth-child(2)::after {
        content: '\Awith "Dark qBittorrent WebUI" v1.0.0 by Felix';
        white-space: pre;
        font-weight: normal;
        color: darkgreen;
    }
}