rssguard/resources/skins/nudus-dark/html_style.scss

@charset "utf-8";

$qtbg-base:     #373A3D !default; // clr_basbg
$qtbg-button:   #323437 !default; // clr_altbg // button bg (scrollbar, alt bg)
$qcselbg:       #8291AD !default; // clr_selbg

//
// Emulate fusion colour processing (dark only)
//

//
// Scrollbar colours
//

//$qcbgbg:    lighten($qtbg-button, 6%); // See toolbar bg
$bgscroll:      lighten($qtbg-button, 2%) !default; // track and corner bg
$tr-border:     darken($qtbg-button, 4%) !default; // track brdr

//
// Scrollbar thumb
//

// bg gradient

// Normal
$thscrlin:      lighten($qtbg-button, 6%) !default;
$thscrlout:     lighten($qtbg-button, 4%) !default;

// Hover
$thscrlhvin:    lighten($qtbg-button, 7%) !default;
$thscrlhvout:   $thscrlout;

// Light outline
$th-border:     lighten($qtbg-button, 15%) !default;

//
// HTML palette (Colours)
//

$cbg00: $qtbg-base;

// Irrelevant, because fg is overridden by the switcher ~~~
$cfg00: #f5f5f5 !default;
$cfg10: #D8D8D8 !default;
$cfg11: $cfg10;
// ~~~

$cbor2: #545556 !default;

$ccodeblock:    rgba(33, 35, 39, 0.4) !default;
$ccode:         $ccodeblock;
$cbor3:         $tr-border;
$cmark:         #f8d08c66 !default; // 40% transparency

$clink: $qcselbg;

//
// Other
//

$radius-unit: .3em !default;

@import
    "../nudus-base/html_style_base"
;

//
// Dark HTML-style has following additions:
//

//
// Border around viewport

//  https://csswizardry.com/2010/12/simplified-page-borders-in-pure-css/
//

html::before,
html::after,
body::before,
body::after {
    content: "";
    background-color: $tr-border;
    display: block;
    position: fixed;
    z-index: 5;
}

html::before {
    height: 1px;
    left: 0;
    right: 0;
    top: 0;
}

html::after {
    width: 1px;
    top: 0;
    right: 0;
    bottom: 0;
}

body::before {
    height: 1px;
    right: 0;
    bottom: 0;
    left: 0;
}

body::after {
    width: 1px;
    top: 0;
    bottom: 0;
    left: 0;
}

//
// Enhanced scrollbar
//

::-webkit-scrollbar {
    height: 13px;
    width: 14px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background-color: $bgscroll;
    box-shadow: inset 1px 1px lighten($tr-border, 4%);
}

// Part where vertical and horizontal scrollbars meet
::-webkit-scrollbar-corner {
    border-radius: 0 0 $radius-unit 0;
}

// TODO: Can be simplified to @include and function
$th-outline:
    inset 1px 1px   $th-border,
    inset -1px -1px $th-border,

    inset 0px 1px   $th-border,
    inset 0px -1px  $th-border,

    inset 1px 0px   $th-border,
    inset 1px -1px  $th-border,

    inset -1px 0px  $th-border,
    inset -1px 1px  $th-border
;

::-webkit-scrollbar-thumb {
    $th-min-unit: 25px;
    box-shadow: $th-outline;

    &:horizontal {
        background-image: linear-gradient($thscrlin 5%, $thscrlout);
        min-width: $th-min-unit;

        &:hover {
            background-image: linear-gradient($thscrlhvin 25%, $thscrlhvout);
        }
    }

    &:vertical {
        background-image: linear-gradient(to right, $thscrlin 5%, $thscrlout);
        min-height: $th-min-unit;

        &:hover {
            background-image: linear-gradient(to right, $thscrlhvin 25%, $thscrlhvout);
        }
    }

    &:active {
        background-image: linear-gradient($thscrlout, $thscrlout) !important;
    }
}

// Light and dark borders to outline the thumb
// Clockwise (x y)
:not(body)::-webkit-scrollbar-thumb {

    &:horizontal {
        box-shadow:
            $th-outline,
            1px 0px   $tr-border,
            1px 1px   $tr-border,
            -1px 1px  $tr-border,
            -1px 0px  $tr-border
        ;
    }

    &:vertical {
        box-shadow:
            $th-outline,
            0px -1px  $tr-border,
            1px -1px  $tr-border,
            1px 1px   $tr-border,
            0px 1px   $tr-border
        ;
    }
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {

    &:horizontal {
        border-top: 1px solid $tr-border;
    }

    &:vertical {
        border-left: 1px solid $tr-border;
    }
}

// More complete borders for `body` scrollbar
body::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-track {

    &:horizontal,
    &:vertical {
        border: 1px solid $tr-border;
    }

    &:horizontal {
        border-top: none;
    }

    &:vertical {
        border-left: none;
    }
}

body::-webkit-scrollbar-corner {
    border: 1px solid $tr-border;
    border-top: none;
    border-left: none;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {

    &:corner-present {

        &:horizontal {
            border-radius: 0 0 0 $radius-unit;
        }

        &:vertical {
            border-radius: 0 $radius-unit 0 0;
        }
    }

    &:horizontal {
        border-radius: 0 0 $radius-unit $radius-unit;
    }

    &:vertical {
        border-radius: 0 $radius-unit $radius-unit 0;
    }
}

//
// Font colour switcher

//  Thank you so much!!
//  https://css-tricks.com/switch-font-color-for-different-backgrounds-with-css/
//

/* Please enable JS for additional font-colouring features */
:root {
    // Default RGB values for background colour
    --rssguard-red: 0;
    --rssguard-green: 0;
    --rssguard-blue: 0;
    // The threshold at which colours are considered "light
    // Range: decimals from 0 to 1, recommended 0.5 - 0.6
    --rssguard-threshold: 0.5;
}

:root {
    // Calculates perceived lightness using the sRGB Luma method
    // Luma = (red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255
    --rssguard-r: calc(var(--rssguard-red) * 0.2126);
    --rssguard-g: calc(var(--rssguard-green) * 0.7152);
    --rssguard-b: calc(var(--rssguard-blue) * 0.0722);
    --rssguard-sum:
        calc(
            var(--rssguard-r) +
            var(--rssguard-g) +
            var(--rssguard-b)
        );
    --rssguard-perceived-lightness: calc(var(--rssguard-sum) / 255);
}

// Shows either white or black colour depending on perceived lightness
body,
::selection,
mark, code, pre, pre > code,
blockquote {
    color:
        hsla(
            0,
            0%,
            calc(
                (
                    var(--rssguard-perceived-lightness) -
                    var(--rssguard-threshold)
                ) *
                -10000000%
            ),
            .9
        );
}