Boardgamegeek Dark Theme by novron

/* ==UserStyle==
@name           BGG Dark Mode
@namespace      GrauGeist
@version        1.1.21
@description    Dark Mode for BoardGameGeek.com
@author         GrauGeist
@homepageURL	https://github.com/GrauGeist/bgg-dark
@supportURL 	https://boardgamegeek.com/article/32693209#32693209

@preprocessor stylus

== colors ==
@var	color		blackBg				'BLACK Background'						#000
@var	color		textColor			'Body text'								#eee

@var 	color		headerBg			'Header background'						#336
@var	color		headerColor			'Header text'							#fff

@var	color		quoteTitleBg		'Sub-Header background'					#446
@var	color		quoteColor			'Subdued text'							#ccc

@var	color		zebraBg2n1			'Zebra contrast'						#111
@var	color		menuBg				'Menu & dropdown background'			#222
@var	color		popupBg				'Pop-up background'						#333

== highlight borders ==
@var	color		borderColor			'Color of regular borders'				#555
@var	color		colorSelected		'Color of selected item'				#dc6
@var	color		colorHighlight		'Color of highlighted item(s)'			#bbd

== links ==
@var	color		linkColor			'Links'									#a9f
@var	checkbox	linkUnderline		'Link underline?'						0

== fonts ==
@var	range		fontSize			"Font Size (basic text)"				[15,10,20,1,"px"]
@var	select		fontFamily			"Font Family"							["verdana*", "arial", "sans-serif", "proportional", "default"]

== options ==
@var	checkbox	maxWidth			'Full screen width?'					1
@var	checkbox	floatLeftNav		'Float left navigator lists?'			1
@var	checkbox	geekpreviewHide		'Hide geekpreviews (GenCon, Essen)?'	0
@var	checkbox	promotedVideoHide	'Hide promoted videos on game pages?'	1
@var	checkbox	recommendationsHide	'Hide recommended "Fans Also Like"?'	1

== "fixed" text colors ==
@var	color		textPositive		'Text: positive values'					#4a4
@var	color		textError			'Text: negative values, errors'			#f50
@var	color		buttonBg			'Button background'						#777
@var	color		buttonColor			'Button text'							#bbb


==/UserStyle== */
@-moz-document domain("boardgamegeek.com"),
domain("bgg.cc"),
domain("rpggeek.com"),
domain("videogamegeek.com") {
    :root {
        --blackBg: blackBg;
        --borderBasic: 1px solid borderColor;
        --borderNew: 2px solid colorHighlight;
        --borderSelected: 2px solid colorSelected;
        --buttonBg: buttonBg;
        --buttonColor: buttonColor;
        --floatLeftNav: floatLeftNav;
        --fontFamily: fontFamily;
        --fontSize: fontSize;
        --headerBg: headerBg;
        --headerColor: headerColor;
        --itemSelected: colorSelected;
        --linkColor: linkColor;
        --linkHover: colorSelected;
        --linkSelected: colorSelected;
        --linkVisited: colorHighlight;
        --maxWidth: maxWidth;
        --menuBg: menuBg;
        --popupBg: popupBg;
        --quoteTitleBg: quoteTitleBg;
        --quoteTitleColor: textColor;
        --quoteBg: menuBg;
        --quoteColor: quoteColor;
        --textColor: textColor;
        --textError: textError;
        --textGold: #990;
        --textPositive: textPositive;
        --zebraBg2n: blackBg;
        --zebraBg2n1: zebraBg2n1;
    }


    /* ========----  ENTIRE BODY  ----======== */
    html {
        color: var(--textColor);
    }

    body,
    footer.global-footer {
        background: var(--blackBg);
        color: var(--textColor);
    }



    /* ====--------  TOP header  --------==== */
    .global-header-nav-primary {
        .dropdown-toggle,
        button.btn,
        a.btn,
        .global-header-site-selector,
        > button.btn,
        a.global-header-icon,
        a.global-header-icon.is-active i,
        button.btn.global-header-icon.is-active i {
            color: var(--headerColor) !important;
        }
    }
    .form-control {
        color: var(--textColor);
    }
    .ui-select-bootstrap .ui-select-choices-row.active > a {
        background: var(--headerBg);
        color: var(--headerColor);
    }
    .btn-primary,
    .badge-primary {
        background: var(--buttonBg);
        border-color: var(--buttonBg);
        color: var(--buttonColor);
    }
    .btn-primary:hover {
        background: var(--buttonBg);
        border-color: var(--buttonBg);
        color: var(--linkHover);
    }
    .btn-default:not(.active):not(:disabled),
    .btn-default:not(.active):not(:disabled):focus,
    .btn-default:not(.active):not(:disabled):active,
    .btn-default:not(.active):not(:disabled):visited,
    .summary-item-tag a,
    .summary-item-pagination.pagination > li > a,
    .summary-item-pagination.pagination > li > span,
    .summary-file-type a {
        background: var(--menuBg) !important;
        border-color: var(--menuBg);
    }
    .btn-default,
    .btn-subtle,
    .summary-item-tag a,
    .summary-item-pagination.pagination > li > a,
    .summary-item-pagination.pagination > li > span,
    .summary-file-type a {
        color: var(--textColor) !important;
    }
    .btn-subtle {
        background: var(--buttonBg);
        filter: opacity(80%);
    }
    .btn-default:not(.active):not(:disabled):hover {
        color: var(--linkHover);
    }
    .btn-success {
        background: var(--textPositive);
    }
    .global-header-nav-search-advanced a:hover {
        background: var(--blackBg);
    }


    /* ====--------  FULL global body  --------==== */
    /* max width? */
    if maxWidth {
        .container-fluid {
            max-width: none;
        }
    }


    /* ==--  LEFT nav - Quickbar, Recent, Hotness  --== */
    /* floating navigation? */
    if floatLeftNav {
        .global-body-content-container .global-secondary-nav,
        .sidebar-type-embedded {
            width: 200px !important;
            position: sticky;
            top: 72px;
        }
    }
    .nav.nav-tabs,
    [class*="tw-bg"],
    .tw-block .forum-header,
    .pagination .page-item .page-link {
        background: #000;
        border-color: #3f3a60;
    }
    .pagination .page-item.active .page-link {
        background-color: #3f3a60;
    }

    .nav.nav-tabs .nav-link,
    .nav.nav-tabs .nav-link.active {
        color: #fff !important;
    }


    /* navigation bar borders */
    .global-secondary-nav-section,
    .geeksidebar-section {
        background: var(--menuBg);
        border: var(--borderBasic);
    }
    .sidebar-type-overlay[_nghost-ppq-c128] {
        background: #000;
    }

    /* headers */
    .global-secondary-nav-section-header,
    .geeksidebar-section-header {
        background: var(--headerBg);
        color: var(--headerColor);
    }
    .quickbar-header {
        background-color: var(--menuBg);
    }
    /* Files version */
    .geeksidebar-section-body {
        background-color: var(--blackBg) !important;
        .geeksidebar-links a {
            color: var(--headerColor) !important;
        }
    }

    /* link background & color overrides */
    a.toggler-caret,
    a.global-secondary-nav-section-header {
        color: var(--headerColor) !important;
    }
    .global-secondary-nav-section .toggler-caret-target,
    {
        background: var(--blackBg);
        color: var(--headerColor) !important;
    }
    /* list item separators */
    ul.global-secondary-nav-links > li {
        border-bottom: var(--borderBasic);
    }

    /* "+" marker */
    .glyphicon-plus {
        color: var(--buttonColor);
        font-size: 0.70em !important;
    }


    /* ====--------  CENTER content  --------==== */
    [class*="tw-bg"],
    [class*="tw-border"],
    [class*="global-secondary"] {
        border-color: #3f3a60 !important;
    }
    .global-body-content [class*="tw-bg"],
    .legacy [id*="blog"] * {
        background: none !important;
        border-color: #3f3a60 !important;
        border-right: none;
        border-left: none;
    }

    .tw-text-black,
    .dropdown button {
        color: #fff !important;
    }

    /*-- table rows --*/
    
    .mb5 div[style*="background:#eeeeee"]{
        background:black !important;
    }
    
    .comment-header{
        background-color:rgb(34,34,34);
    }
    
    .collfilter_table label{
        color:#fff;
    }



    /* ====--------  BGG Front page  --------==== */
    /* hide specific modules if set */
    if geekpreviewHide {
        div.geekcentral_module > center > a[href*="/geekpreview"] {
            display: none;
        }
    }

    /* editbox */
    .geekcentral-controls {
        background-color: var(--menuBg);
        .geekcentral-controls__edit-link {
            color: var(--buttonColor);
        }
    }

    /* panels */
    .panel {
        .panel-header,
        panel-header-lg {
            background-color: var(--headerBg);
            color: var(--headerColor);
            .panel-title > a:link {
                color: var(--headerColor) !important;
            }
        }
    }
    .panel-default > .panel-heading,
    .panel-primary > .panel-heading {
        background: var(--headerBg);
        border: var(--borderBasic);
        color: var(--headerColor);
    }
    .panel-header-sm {
        background: transparent !important;
    }

    /* text-colors */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    .dropdown-header,
    .panel-heading,
    .text-muted,
    .summary-sale-item-price,
    .close {
        color: var(--textColor) !important;
    }
    .text-muted,
    .link-muted-color,
    .link-muted-border-muted {
        filter: opacity(80%);
    }

    /* links */
    a,
    a:link,
    .nav-tabs-more-dropdown a,
    .summary-image-item .summary-item-title a,
    .panel-body-toolbar > a,
    .advertisement-text-body a,
    .btn.btn-text-link,
    .btn.btn-text-link.active,
    .quickbar-pagination button.btn,
    .global-header-nav-primary .dropdown-menu li a,
    .panel-inline-links > a:link:not(.btn),
    .global-footer-item a,
    .nav.nav-tabs > li > a,
    .panel-expandable .expandable-body a:link {
        color: var(--linkColor);
    }
    ul.global-secondary-nav-links a,
    .panel-title,
    .panel-body,
    .ng-binding,
    .link-muted-border-muted,
    .question {
        color: va...