update firefox theming

[dotfiles.git] / firefox / chrome / theme.as.css

/*** Dark theme ***/
/* inspired by https://github.com/Izheil/Quantum-Nox-Firefox-Dark-Full-Theme */

*|*:root {
    /*TODO: eventually change to use lwt/chrome/-moz colors*/
    --in-content-page-color: #ccc !important;
    --in-content-page-background: #222 !important;
    --in-content-text-color: #ccc !important;
    /* --in-content-selected-text: #fff; */
    --in-content-box-background: #444 !important;
    --in-content-box-background-odd: #3a3a3a !important;
    --in-content-box-background-hover: #555 !important;
    --in-content-box-background-active: #333 !important;
    --in-content-box-border-color: #777 !important;
    /* --in-content-item-hover: rgba(0,149,221,0.25); */
    --in-content-item-selected: -moz-cellhighlight !important;
    /* --in-content-border-highlight: #0a84ff; */
    /* --in-content-border-focus: #0a84ff; */
    --in-content-border-color: #777 !important;
    /* --in-content-category-outline-focus: 1px dotted #0a84ff; */
    --in-content-category-text: #ccc !important;
    --in-content-category-text-active: #c0c0c0 !important;
    /* --in-content-category-text-selected: #0a84ff; */
    /* --in-content-category-text-selected-active: #0060df; */
    /* --in-content-category-background-hover: rgba(12,12,13,0.1); */
    /* --in-content-category-background-active: rgba(12,12,13,0.15); */
    /* --in-content-category-background-selected-hover: rgba(12,12,13,0.15); */
    /* --in-content-category-background-selected-active: rgba(12,12,13,0.2); */
    /* --in-content-tab-color: #424f5a; */
    --in-content-link-color: #09f !important;
    --in-content-link-color-hover: #0ff !important;
    --in-content-link-color-active: #0070aa !important;
    --in-content-link-color-visited: #0050aa !important;
    --in-content-primary-button-background: #05a !important;
    --in-content-primary-button-background-hover: #0040aa !important;
    --in-content-primary-button-background-active: #002070 !important;
    --in-content-table-background: #444 !important;
    /* --in-content-table-border-dark-color: #d1d1d1; */
    /* --in-content-table-header-background: #0a84ff; */
}
@-moz-document url(about:debugging) {
    .addon-target-container {
        background: var(--in-content-box-background) !important;
    }
}
@-moz-document url(about:performance) {
    #subprocess-reports td { /*no table-background??*/
        background: var(--in-content-box-background) !important;
    }
}
@-moz-document url(about:plugins) {
    body {
        background-color: var(--in-content-background-color) !important;
    }
}
/*todo: RESTARTREQUIRED*/

/* These variable changes the scrollbars size and color.
 * The scrollbars-width only has 3 acceptable values:
 *     auto: default OS size
 *     thin: half the width (will be hidden in about: pages)
 *     none: hidden scrollbar
 */
*|*:root {
    --scrollbars-width: thin;
    --scrollbars-thumb-color: #05a;
    --scrollbars-track-color: #252525;
    scrollbar-color: var(--scrollbars-thumb-color) var(--scrollbars-track-color) !important;
    scrollbar-width: var(--scrollbars-width) !important;
}
*|* {
    scrollbar-width: var(--scrollbars-width) !important;
}

/* This should change the "not found" page image colors */
.illustrated #errorPageContainer:not(.button-container),
#lic-info .license-header:not(a) {
    filter: invert(95%) hue-rotate(200deg)
}
@-moz-document url(about:devtools) {
    .left-pane {
        filter: invert(95%) hue-rotate(200deg)
    }
}
/* This fixes the inverted colors caused by the image filter */
.illustrated #errorPageContainer .button-container,
.illustrated #errorPageContainer #text-container,
#lic-info .license-header p,
#lic-info .license-header h1 {
    filter: invert(95%) hue-rotate(-200deg)
}

/* View source */
@-moz-document url-prefix(view-source:){
html {
    background: #222 !important;
    color: #ccc !important}

    .attribute-name {color: #093 !important}
    .start-tag, .end-tag {color: #f93 !important}
    .attribute-value {color: #09f !important}
}