// userContent.css for Waterfox with GTK dark theme enabled.
// put the compiled css into "chrome/userContent.css" in your profile folder.

$text-base-color: #ccc;
$background-base-color: #1c2126;

@namespace html "http://www.w3.org/1999/xhtml";
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";

#{"*|*"}:root {

    // For reference, the original values:
    // --in-content-page-color: #424e5a; // lighter than base color (+0F1B27)
    // --in-content-page-background: #fbfbfb; // background base color
    // --in-content-text-color: #333; // text base color.
    // --in-content-selected-text: #fff;
    // --in-content-header-border-color: #c8c8c8;
    // --in-content-box-background: #fff; // lighter than base color (+040404)
    // --in-content-box-background-odd: #f3f6fa;
    // --in-content-box-background-hover: #ebebeb; // darker than base color (-101010)
    // --in-content-box-background-active: #dadada; // darker than base color (-212121)
    // --in-content-box-border-color: #c1c1c1;
    // --in-content-item-hover: rgba(0,149,221,0.25);
    // --in-content-item-selected: #0a84ff;
    // --in-content-border-highlight: #ff9500;
    // --in-content-border-focus: #0a84ff;
    // --in-content-border-color: #c1c1c1;
    // --in-content-category-text: #c1c1c1;
    // --in-content-category-border-focus: 1px dotted #fff;
    // --in-content-category-text-selected: #f2f2f2;
    // --in-content-category-background: #424f5a;
    // --in-content-category-background-hover: #5e6972;
    // --in-content-category-background-active: #343f48;
    // --in-content-tab-color: #424f5a;
    // --in-content-link-color: #0a84ff;
    // --in-content-link-color-hover: #0060df;
    // --in-content-link-color-active: #ff9500;
    // --in-content-link-color-visited: #551a8b;
    // --in-content-primary-button-background: #0a84ff;
    // --in-content-primary-button-background-hover: #0060df;
    // --in-content-primary-button-background-active: #003EAA;
    // --in-content-table-border-dark-color: #d1d1d1;
    // --in-content-table-header-background: #0a84ff;

    #{"-"}-in-content-page-color: adjust-color($text-base-color, $red: 15, $green: 27, $blue: 39) !important; // lighter
    #{"-"}-in-content-page-background: $background-base-color !important; // base
    #{"-"}-in-content-text-color: $text-base-color !important; // base
    #{"-"}-in-content-selected-text: #fff;
    #{"-"}-in-content-header-border-color: #c8c8c8;
    #{"-"}-in-content-box-background: adjust-color($background-base-color, $red: 4, $green: 4, $blue: 4) !important;
    #{"-"}-in-content-box-background-odd: #f3f6fa;
    #{"-"}-in-content-box-background-hover: adjust-color($background-base-color, $red: 16, $green: 16, $blue: 16) !important;
    #{"-"}-in-content-box-background-active: adjust-color($background-base-color, $red: 33, $green: 33, $blue: 33) !important;
    #{"-"}-in-content-box-border-color: #c1c1c1;
    #{"-"}-in-content-item-hover: rgba(0,149,221,0.25);
    #{"-"}-in-content-item-selected: #0a84ff;
    #{"-"}-in-content-border-highlight: #ff9500;
    #{"-"}-in-content-border-focus: #0a84ff;
    #{"-"}-in-content-border-color: #c1c1c1;
    #{"-"}-in-content-category-text: #c1c1c1;
    #{"-"}-in-content-category-border-focus: 1px dotted #fff;
    #{"-"}-in-content-category-text-selected: #f2f2f2;
    #{"-"}-in-content-category-background: #424f5a;
    #{"-"}-in-content-category-background-hover: #5e6972;
    #{"-"}-in-content-category-background-active: #343f48;
    #{"-"}-in-content-tab-color: #424f5a;
    #{"-"}-in-content-link-color: #0a84ff;
    #{"-"}-in-content-link-color-hover: #0060df;
    #{"-"}-in-content-link-color-active: #ff9500;
    #{"-"}-in-content-link-color-visited: #551a8b;
    #{"-"}-in-content-primary-button-background: #0a84ff;
    #{"-"}-in-content-primary-button-background-hover: #0060df;
    #{"-"}-in-content-primary-button-background-active: #003EAA;
    #{"-"}-in-content-table-border-dark-color: #d1d1d1;
    #{"-"}-in-content-table-header-background: darken(#0a84ff, 10) !important;
}

xul:link, xul|*#aboutDialog:link {
    color: #4183C4 !important;
}

xul|*.checkbox-check, xul|*.radio-check {
    background-color: -moz-dialog !important;
}


@-moz-document url("about:profiles") {

    html|html {
        // #{"-"}-aboutProfiles-table-background: #ebebeb; // fbfbfb-101010
        #{"-"}-aboutProfiles-table-background: adjust-color($background-base-color, $red: 16, $green: 16, $blue: 16) !important;
    }

}

@-moz-document url("about:addons") {
    .addon-view[notification="warning"]{
        #{"-"}-view-highlight-color: adjust-color($background-base-color, $red: 6, $green: 10, $blue: 26)!important;
    }

    .addon {
        color: adjust-color($text-base-color, $red: 11, $green: 11, $blue: 11) !important;
        &[selected]{
            background-color: adjust-color($background-base-color, $red: 1, $green: 1, $blue: 1) !important; // darker than base color fafafa, -010101
        }
    }

    #header-utils-btn {
        background-color: $background-base-color !important;
    }

    .detail-view-container {
        color: $text-base-color !important;
    }
    .detail-row,
    .detail-row-complex,
    setting {
        text-shadow: 0 1px 1px adjust-color($background-base-color, $red: -203, $green: -204, $blue: -203) !important; // darker color than base (-CBCCCB)
    }
}

@-moz-document url("about:newtab"), url("about:blank") {
    body {
        background-color: $background-base-color !important;
    }
}

// uBlock
@-moz-document url-prefix("moz-extension://9d6f8c2a-3f2d-42bf-a1c3-18a4c2baa07c") {

    body,
    #firewallContainer > div > span {
        color: $text-base-color !important; // was black
    }

    body,
    h2,
    #extraTools,
    #firewallContainer > div {
        background-color: unset !important; // was white
    }

}

// uMatrix
@-moz-document url-prefix("moz-extension://5808c23a-a5c6-4402-9c52-823298591aec") {
    #content table tr,
    #toolbar,
    #toolbar .button,
    body,
    #popupContainer,
    body .toolbar button,
    #dashboard-nav-widgets,
    .tabButton,
    .whatisthis-expandable,
    #diff li,
    #diff textarea,
    .paneHead
    {
        background: #33393B !important;
        color: whitesmoke !important;
    }

    a {
        color: #4183C4 !important;
    }

    a:hover {
        text-decoration: underline;
    }

    #gotoDashboard {
        text-decoration: none;
        color: whitesmoke !important;
    }

    #diff li:nth-of-type(2n),
    #content table tr:nth-of-type(2n+1)
    {
        background-color: black !important;
    }

    #content table tr:nth-of-type(2n) {
        background-color: #333333 !important;
    }

    #content table tr {
        color: white !important;
    }

    #content table tr.blocked {
        color: #ff4040 !important;
    }

    #content table tr td {
        border-color: gray;
    }

    .t1 {
        background-color: #666 !important;
    }

    .matCell {
        border: unset !important;
    }

    .matRow:not(:last-child){
        border-bottom: 1px solid black;
    }

    .matGroup .matSection {
        margin-top: 0 !important;
        border-top: 2px solid black !important;
    }

}

// CookieAutoDelete
@-moz-document url-prefix("moz-extension://3b865988-d059-4b1f-9c3b-c01d790bc906") {
    body, input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select  {
        color: whitesmoke !important;
        background-color: unset !important;
    }

    .button, button, input[type="submit"], input[type="reset"], input[type="button"], .file-upload {
        color: white !important;;
    }

    .button, button, input[type="submit"], input[type="reset"], input[type="button"] {
        color: whitesmoke !important;
    }

    label:hover, .pure-menu-item:hover, .pure-menu-selected {
        background-color: unset !important;
    }

    .pure-menu-item:hover > * {
        color: white;
    }

    .card {
        background: none !important;
    }

    // stolen from bootstrap
    .btn-light{
        color:#fff !important;
        background-color:#343a40 !important;
        border-color:#343a40 !important;
    }

    .btn-light:hover{
        color:#fff!important;
        background-color:#23272b !important;
        border-color:#1d2124 !important;
    }

    .btn-light.focus,
    .btn-light:focus {
        box-shadow:0 0 0 3px rgba(52,58,64,.5) !important;
    }

    .btn-light.disabled,
    .btn-light:disabled {
        background-color:#343a40 !important;
        border-color:#343a40 !important;
    }

    .btn-light.active,.btn-light:active{
        background-color:#23272b!important;
        background-image:none !important;
        border-color:#1d2124 !important;
    }

}