Updated dark theme for the Pi-hole Admin Console (based on themes by 0XE4 and Luke Fenders)

darkpi.css

/* Updated by Brayden Houston on 8/9/19 */

/* == SCROLL BAR == */
::-webkit-scrollbar {
    width: 4px;
    height: 9px;
}

::-webkit-scrollbar-thumb:hover {
    background: #383838;
}

::-webkit-scrollbar-thumb {
    background: #474747;
}

/* == NAVIGATION SIDEBAR == */
.skin-blue .list-group-item:hover {
    background: #00a65a;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.15);
}

.nav-tabs-custom > .tab-content {
    background: #333333eb;
    padding: 10px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

table {
    background-color: #000;
}

/* Main Background & Font Color */
body,
.box,
.box-header.with-border,
.box-footer,
.skin-blue .wrapper,
.skin-blue .main-sidebar,
.skin-blue .sidebar a,
.skin-blue .left-side,
.content-wrapper,
.right-side,
.skin-blue .main-header .logo,
.skin-blue .main-header .navbar,
.skin-blue .sidebar-menu > li.header,
.main-footer,
.form-control,
.list-group-item {
    background-color: #474747;
    color: #fff;
    border-top: none;
}

.layout-boxed .wrapper {
    max-width: 100%;
}

/* Hover Colors */
.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a {
    color: #fff;
    background: #383838;
    border-left-color: #0b9954;
}

/* == STAT BOXES == */
.box-header.with-border {
    border: #00a6e1 !important;
}

/* When Top Domains is hidden, make Advertisers and Clients equal */
.col-lg-4 {
    width: 49.9999999999%;
}

/* Text Alignment */
.small-box {
    padding-left: 3px;
}

/* Icons on the stat boxes */
.icon {
    display: none;
}

/* Box colors */
div#queries-over-time,
div#query-types,
div#forward-destinations,
div#ad-frequency,
div#client-frequency,
.box-header.with-border {
    border-radius: 2px;
    border-left: 3px solid rgba(103, 102, 102, 0.9);
}

.small-box,
.box {
    border: none;
    box-shadow: 5px 6px 15px 2px rgba(23, 23, 23, 0.45);
}

.small-box.bg-aqua,
.small-box.bg-green,
.small-box.bg-yellow,
.small-box.bg-red {
    background-color: #383838 !important;
}

.small-box.bg-aqua {
    border-radius: 2px;
    border-left: 3px solid rgba(0, 166, 225, 0.9);
}

.small-box.bg-green {
    border-radius: 2px;
    border-left: 3px solid rgba(11, 153, 84, 0.9);
}

.small-box.bg-yellow {
    border-radius: 2px;
    border-left: 3px solid rgba(236, 137, 30, 0.9);
}

.small-box.bg-red {
    border-radius: 2px;
    border-left: 3px solid rgba(192, 57, 43, 0.9);
}

h3#ads_blocked_today {
    color: #00a6e1 !important;
}

h3#dns_queries_today {
    color: #0b9954 !important
}

h3#ads_percentage_today {
    color: #ec891e !important
}

h3#domains_being_blocked {
    color: #c0392b !important
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border: none;
}

.progress-bar.progress-bar-yellow {
    background-color: #c0392b !important
}

/* == WHITELIST PAGE == */
.page-header {
    border-bottom: none;
    border-radius: 2px;
    border-left: 3px solid rgba(103, 102, 102, 0.9);
    box-shadow: 5px 6px 15px 2px rgba(23, 23, 23, 0.45);
}

h1 {
    padding-top: 14px;
    padding-bottom: 0px;
    padding-left: 20px;
}

/* Domain input bar */
input#domain,
input[type=text],
select,
.btn-default,
.btn-default:hover,
.btn-default:active,
.btn-default.hover {
    background-color: #2C2C2C;
    color: #E5E5E5;
}

/* == GLOBAL REMOVE RANDOM BORDERS == */
.form-control,
.btn-default,
.list-group-item,
.table-responsive,
div#domain-frequency {
    border: none !important;
}

/* All Queries Fix */
#all-queries > tbody > tr > td:nth-of-type(6) {
    /*color: rgba(255, 255, 255, 0.15);*/
    color: white !important;
}

/* Network Overview Fix */
#network-entries > tbody {
    /*color: rgba(255, 255, 255, 0.15);*/
    color: #000 !important;
}

#network-details > .box-body > table:last-of-type > tbody {
    color: #000;
}

/* Processing popup color fix */
#all-queries_processing {
    color: #000;
}

/* Output pre Color fix */
pre#output {
    color: #fff;
    background-color: #2C2C2C;
}

/* nav-tabs-custom fix*/
.nav-tabs-custom > .nav-tabs > li.active {
    margin-bottom: 0;
}
.nav-tabs-custom > .nav-tabs > li.active > a {
    color: #000 !important;
}
.nav-tabs-custom > .nav-tabs > li > a {
    color: #fff !important;
}
.nav-tabs-custom > .nav-tabs {
    background-color: #000 !important;
}