logs.tf Dark Theme by JackyLegs

/* ==UserStyle==
@name         logs.tf Dark Theme
@namespace    USO Archive
@author       minicircle
@description  A dark theme for logs.tf, a website for viewing logs from competitive Team Fortress 2 games.
@version      20180830.01.15
@license      CC-BY-NC-4.0
@preprocessor uso
==/UserStyle== */
@-moz-document domain("logs.tf") {
/* colors */
:root {
    --blu: hsl(210, 30%, 40%);
    --red: hsl(0, 30%, 40%);
    --blu-hue: 210;
    --red-hue: 0;
    --primary-hue: 70;
    --success-hue: 160;
    --background-hue: 220;
}

.blu {
    background: var(--blu) !important;
}

.red {
    background: var(--red) !important;
}

.blu-text {
    color: hsl(var(--blu-hue), 50%, 70%) !important;
}
.red-text {
    color: hsl(var(--red-hue), 50%, 70%) !important;
}

a {
    color: hsl(var(--primary-hue), 30%, 60%);
}

a:hover {
    color: hsl(var(--primary-hue), 30%, 40%);
}

a.rating span.tooltip {
    background-color: hsl(var(--background-hue), 5%, 20%) !important;
    border: 1px solid hsl(var(--background-hue), 5%, 15%) !important;
}
.accordion-group {
    border: 1px solid hsl(var(--background-hue), 5%, 25%);
}
.accordion-heading {
    background: hsl(var(--background-hue), 5%, 20%);
}
.accordion-inner {
    border-top: 1px solid hsl(var(--background-hue), 5%, 25%);
}
body {
    background-color: hsl(var(--background-hue), 5%, 20%);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p {
    color: hsl(var(--background-hue), 5%, 90%);
}
.btn {
    background-color: hsl(var(--background-hue), 5%, 30%);
    color: hsl(var(--background-hue), 5%, 90%);
}
.btn:hover,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
    background-color: hsl(var(--background-hue), 5%, 20%);
    color: hsl(var(--background-hue), 5%, 90%);
}
.btn-group.open .btn.dropdown-toggle {
    background-color: hsl(var(--background-hue), 5%, 15%);
}
.btn-primary {
    color: hsl(var(--background-hue), 5%, 90%);
    background-color: hsl(var(--primary-hue), 20%, 50%);
    border-color: hsl(var(--primary-hue), 50%, 50%) hsl(var(--primary-hue), 50%, 50%) hsl(var(--primary-hue), 50%, 30%);
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.btn-success {
    color: hsl(var(--background-hue), 5%, 90%);
    background-color: hsl(var(--success-hue), 20%, 50%);
    border-color: hsl(var(--success-hue), 50%, 50%) hsl(var(--success-hue), 50%, 50%) hsl(var(--success-hue), 50%, 30%);
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

#chat tr:nth-child(odd) {
    background: hsl(var(--background-hue), 5%, 15%);
}
[class^="icon-"],
[class*=" icon-"] {
    filter: invert(100%);
}
.controls {
    background: hsl(var(--background-hue), 5%, 20%);
    border-bottom: none;
}
.dropdown-menu {
    background: hsl(var(--background-hue), 5%, 20%);
}
.dropdown-menu .divider {
    background-color: hsl(var(--background-hue), 5%, 15%);
    border-bottom: none;
}
.event-charge {
    background: hsl(var(--red-hue), 20%, 35%);
}
.event-mdeath {
    background: hsl(var(--red-hue), 20%, 25%);
}
.event-mdrop {
    background: hsl(var(--red-hue), 20%, 50%);
}
.event-pointcap {
    background: hsl(var(--red-hue), 20%, 10%);
}
.events {
    border: 1px solid hsl(var(--background-hue), 5%, 25%);
}
.expanded {
    background: hsl(var(--background-hue), 5%, 25%) !important;
}
.footer {
    border-top: none;
}
.highlight {
    background: hsl(var(--background-hue), 5%, 30%) !important;
}
hr {
    border-top: 1px solid hsl(var(--background-hue), 5%, 20%);
}
input:-moz-placeholder,
textarea:-moz-placeholder {
    color: hsl(var(--background-hue), 5%, 65%);
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: hsl(var(--background-hue), 5%, 65%);
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: hsl(var(--background-hue), 5%, 65%);
}
.log tbody > tr:nth-child(odd),
.loglist tbody > tr:nth-child(odd) {
    background: hsl(var(--background-hue), 5%, 25%);
}

/* row highlighting */
/* .log:not(.table-players) tbody > tr:not(.events):hover,
#teams tbody tr:nth-child(odd):hover {
    background: rgba(255, 255, 255, 0.1);
} */

/* player stat highlighting */
/* .log:not(.table-players) tr:not(.events)>td:hover {
    box-shadow: 0px 0px 5px hsl(var(--background-hue), 5%, 90%);
    color: hsl(var(--background-hue), 5%, 90%);
    position: relative;
    z-index: 1;
} */

/* column highlighting */
/* .log:not(.table-players) tr:not(.events)>td:not(.badge):not(.log-player-name):hover::after {
    background: rgba(255, 255, 255, 0.1);
    color: hsl(var(--background-hue), 5%, 90%);
    content: "";
    height: 10000px;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: -5000px;
    width: 100%;
} */

.log td a {
    color: hsl(var(--background-hue), 5%, 90%);
}

.log td.log-player-name,
.log td.classes {
    cursor: default;
}

.log-header {
    background: hsl(var(--background-hue), 5%, 20%);
    border-bottom: none;
}

#log-name {
    font-size: 32px;
    line-height: 34px;
}

.log-section {
    border-bottom: none;
    position: relative;
}
.log-section:nth-child(even) {
    background: hsl(var(--background-hue), 5%, 20%);
}
#log-settings {
    background-color: hsl(var(--background-hue), 5%, 20%);
    color: hsl(var(--background-hue), 5%, 90%);
}

.main {
    background: hsl(var(--background-hue), 5%, 20%);
}
.modal {
    background: hsl(var(--background-hue), 5%, 20%);
}
.modal-header {
    border-bottom: none;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background-color: hsl(var(--background-hue), 5%, 20%);
    border: 1px solid hsl(var(--background-hue), 5%, 25%);
    color: hsl(var(--background-hue), 5%, 90%);
}
.popover {
    background: hsl(var(--background-hue), 5%, 20%) !important;
}
.popover.top .arrow {
    border-top-color: hsl(var(--background-hue), 5%, 20%);
}
.popover-title {
    background: hsl(var(--background-hue), 5%, 20%);
    border-bottom: none;
}
.pagination ul>li>a,
.pagination ul>li>span {
    background-color: hsl(var(--background-hue), 5%, 20%);
    border: 1px solid hsl(var(--background-hue), 5%, 25%);
}
.sellout {
    background-color: hsl(var(--background-hue), 5%, 20%) !important;
}
.table {
    background: hsl(var(--background-hue), 5%, 20%);
}

/* .table.log:not(.table-players) {
    cursor: none;
} */

.table th, .table td {
    border-right: 1px solid hsl(var(--background-hue), 5%, 30%);
}

.tablesorter-headerDesc,
.tablesorter-headerAsc {
    background: hsl(var(--background-hue), 5%, 20%);
}
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
    background-color: hsl(var(--background-hue), 5%, 20%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: hsl(var(--background-hue), 5%, 90%);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
}
.topbar {
    background: hsl(var(--background-hue), 5%, 30%);
    border-bottom: hsl(var(--background-hue), 5%, 25%);
}
.welcome {
    border-bottom: none;
}
.zero {
    color: hsl(var(--background-hue), 5%, 30%) !important;
}

.zero:hover {
    color: hsl(var(--background-hue), 5%, 90%) !important;
}
}