dark-qbittorrent-webui.css

/* Dark qBittorrent WebUI by Felix (ispired by Cozzy's theme: userstyles.org/styles/152766)
    
            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;
}