Phoronix - dark theme by alan

/* ==UserStyle==
@name           Phoronix - dark theme
@namespace      alan
@version        1.13
@description    Dark theme with some options
@author         alan
@homepageURL    https://codeberg.org/alan2b7/firefox
@license        MIT
@preprocessor   stylus
@var            select select-theme "Colors preset" ["Black","Dark-Gray"]
@var            select custom-colors "Custom colors" ["Off","On"]
@var            color main-bg-color "Main background color" #0d0d0d
@var            color secondary-bg-color "Secondary background color" #1a1a1a
@var            color main-font-color "Main font color" #e6e6e6
@var            color secondary-font-color "Secondary font color" #ccc
@var            color thread-bg-color "Thread background color" #333
@var            color borders-color "Borders color" #262626
@var            select brightness-level "Images brightness level" {
                    "100% (default)": "none",
                    "80%": "brightness(80%)",
                    "60%": "brightness(60%)",
                    "50%": "brightness(50%)"
                    }
@var            select hide-author "Articles: 'About the author'" {
                    "Show(default)": "block",
                    "Hide": "none"
                    }
@var            select hide-search "Google search" {
                    "Show(default)": "block",
                    "Hide": "none"
                    }
@var            select hide-notices "Forum notices (some)" {
                    "Show(default)": "block",
                    "Hide": "none"
                    }
@var            select hide-thread-search "Threads: search bar" {
                    "Show(default)": "flex",
                    "Hide": "none"
                    }
==/UserStyle== */

@-moz-document url-prefix("https://www.phoronix.com/") {

    :root {

        --green: #459d68; /* lighter phoronix green */
        --green2: #3e783b; /* phoronix forum banner */

        --brightness-level: brightness-level;
        --hide-notices: hide-notices;
        --hide-author: hide-author;
        --hide-search: hide-search;
        --hide-thread-search: hide-thread-search;

        if select-theme == "Black" {
            --deep-dark: #0d0d0d;
            --lighter-deep-dark: #1a1a1a;
            --font1: #e6e6e6;
            --font2: #ccc;
            --text-bg: #333;
            --small-borders: #404040;
        }
        if select-theme == "Dark-Gray" {
            --deep-dark: #15141a; /* dark-gray-90 */
            --lighter-deep-dark: #1c1b22; /* dark-gray-80 */
            --font1: #e0e0e6; /* light-gray-30 */
            --font2: #bfbfc9; /* light-gray-50 */
            --text-bg: #2b2a33; /* dark-gray-60 */
            --small-borders: #23222b; /* dark-gray-70 */
        }

        if custom-colors == "On" {
            --deep-dark: main-bg-color;
            --lighter-deep-dark: secondary-bg-color;
            --font1: main-font-color;
            --font2: secondary-font-color;
            --text-bg: thread-bg-color;
            --small-borders: borders-color;
        }
    }
}


@-moz-document url-prefix("https://www.phoronix.com/") {

    /* ---- general ---- */

    html,
    body {
        background-color: var(--deep-dark);
        color: var(--font1);
    }
    a {
        color: var(--green);
    }
    article a,
    #sidebar a,
    #litemenu a {
        color: var(--green);
    }


    /* ---- header menu ---- */

    #headerwrap {
        background-color: var(--lighter-deep-dark);
    }
    #categories-content::before {
        border-color: transparent transparent var(--small-borders);
    }
    #categories-content {
        background-color: var(--deep-dark);
        border-color: var(--small-borders);
    }
    #categories-content a {
        color: var(--font1);
    }


    /* ---- content ---- */

    #content-bg {
        background-color: var(--deep-dark);
    }
    #content {
        background-color: var(--lighter-deep-dark);
        border-left-color: var(--small-borders);
        border-right-color: var(--small-borders);
    }
    #main {
        border-right-color: var(--small-borders);
    }
    #sidebar-wrap {
        border-left-color: var(--small-borders);
    }
    #sidebar aside {
        color: var(--font2);
    }


    /* ---- article ---- */

    article {
        border-bottom-color: var(--small-borders);
        color: var(--font1);
    }
    article .details,
    article .details a {
        color: var(--font2);
    }
    article.full img {
        background-color: var(--font1);
        border-color: var(--small-borders);
        filter: var(--brightness-level);
    }
    article.full .author,
    #about-author p {
        color: var(--font2);
    }
    #sidebar aside header,
    .article-box header,
    #about-author header,
    .wide-article-box header {
        color: var(--font1);
    }
    article p[align="center"] em {
        color: var(--font2);
    }
    blockquote {
        color: var(--font1);
    }
    object[type="image/svg+xml"] {
        background-color: var(--font1);
        filter: var(--brightness-level);
    }


    /* ---- hidden ---- */

    #about-author {
        display: var(--hide-author);
    }
    #search {
        display: var(--hide-search);
    }


    /* ---- footer ---- */

    #footer {
        border-top-color: var(--small-borders);
    }
    .extra-info,
    .extra-info a {
        color: var(--font2);
    }
    .extra-info hr {
        border-color: var(--small-borders);
    }
}


@-moz-document url-prefix("https://www.phoronix.com/forums/") {

    /* ---- general ---- */

    body {
        background-color: var(--deep-dark);
        color: var(--font1);
    }
    a,
    a:active,
    a:visited,
    .b-link,
    .ui-widget-content a {
        color: var(--green);
    }
    a:hover,
    .b-link:hover,
    .ui-widget-content a:hover {
        color: var(--green2);
    }
    a:focus,
    input:focus,
    textarea:focus,
    button:focus,
    select:focus,
    .js-link:focus,
    .js-button:focus,
    .b-button:focus,
    .ui-state-focus,
    .custom-dropdown:focus,
    .cke_dialog_body .cke_dialog_contents .b-button:focus {
        outline: none;
    }


    /* ---- input ---- */

    input[type="text"],
    input[type="password"],
    textarea,
    select {
        background-color: var(--text-bg);
        border-color: var(--small-borders);
    }
    #sidebar aside header,
    .article-box header,
    #about-author header,
    .wide-article-box header {
        color: var(--font1);
    }
    .b-form-input__input,
    .cke_dialog_body .cke_dialog_contents .b-form-input__input {
        color: var(--font2);
    }
    .b-form-input__input--shadow {
        box-shadow: inset 1px 1px 1px 0px var(--small-borders);
    }
    body .b-form-input__input:focus,
    body .b-form-textarea__textarea:focus {
        border-color: var(--small-borders);
    }
    .b-form-input__inside-button {
        background: none 0 0,linear-gradient(to bottom,var(--small-borders),var(--small-borders)),var(--lighter-deep-dark);
    }
    .textbox {
        color: var(--font2);
    }


    /* ---- top menu ---- */

    .b-top-menu__background {
        background-color: var(--deep-dark);
    }
    .b-top-menu__background::before {
        border-bottom-color: var(--deep-dark);
    }
    .b-comp-menu-dropdown__trigger--headerbar {
        color: var(--font2);
    }
    .b-comp-menu-dropdown__trigger--headerbar:hover {
        color: var(--font2);
    }
    .b-comp-menu-dropdown--open-on-hover .b-comp-menu-dropdown__trigger:hover,
    .b-comp-menu-dropdown--open-on-hover:hover .b-comp-menu-dropdown__trigger,
    .b-comp-menu-dropdown--open .b-comp-menu-dropdown__trigger {
        background-color: var(--deep-dark);
        color: var(--font2);
    }
    .b-comp-menu-dropdown__content {
        background: var(--deep-dark);
    }
    .b-comp-menu-dropdown .b-comp-menu-dropdown__content-item:hover {
        color: var(--font1);
    }


    /* ---- login menu ---- */

    body .canvas-layout-container .activate-user-widget,
    body .canvas-layout-container .activate-email-widget,
    body .canvas-layout-container .forgot-password-widget,
    body .canvas-layout-container .contactus-widget,
    body .canvas-layout-container .registration-widget {
        background-color: var(--deep-dark);
    }


    /* ---- top level forums - headers ---- */

    .canvas-layout-container .canvas-widget.announcement-widget,
    .view-mode .widget-no-border > .widget-header {
        background-color: var(--lighter-deep-dark);
        color: var(--font1);
    }
    .canvas-layout-container .widget-header {
        background-color: var(--lighter-deep-dark);
    }
    .module-title,
    .module-title h1,
    .view-mode .canvas-layout-container .canvas-widget.widget-no-border > .widget-header .module-title,
    .page-title-widget .module-title,
    .page-title-widget .module-title h1 {
        color: var(--font1);
    }
    .widget-tabs .widget-tabs-nav .ui-tabs-nav,
    .widget-tabs .widget-tabs-nav li.ui-tabs-active {
        background-color: var(--lighter-deep-dark);
    }
    .widget-tabs .widget-tabs-nav .ui-tabs-nav li a {
        color: var(--font2)
    }
    .widget-tabs .widget-tabs-nav .ui-tabs-nav li a:hover {
        color: var(--font2);
    }
    .widget-tabs .widget-tabs-nav li.ui-tabs-active a,
    .widget-tabs .widget-tabs-nav li.ui-tabs-active a:hover {
        color: var(--font1);
    }


    /* ---- top level forums - containers ---- */

    body .forum-list-container {
        background-color: var(--lighter-deep-dark);
    }
    body .forum-list-container .forum-item td,
    body .subchannel-widget .forum-list-container .forum-item td[class] {
        border-top-color: var(--small-borders);
    }
    .forum-list-container .forum-list-header {
        background-color: var(--lighter-deep-dark);
        color: var(--font2);
    }
    .forum-list-container .category-header {
        background-color: var(--deep-dark);
    }
  ...