reichelt.de dark mode by s-light

/* ==UserStyle==
@name           reichelt.de dark mode
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    reichelt website in dark/night mode
@author         Stefan Krüger s-light.eu
==/UserStyle== */
@-moz-document domain("reichelt.de") {
    /* global */
    :root {
        --bg: black;
        --bg-light: hsl(250, 100%, 10%);
        --bg-highlight: hsl(250, 100%, 15%);
        --bg-highlight2: hsl(250, 100%, 50%);
        --bg-gradient: linear-gradient( to bottom,
        var(--bg-highlight),
        var(--bg-highlight2));
        --bg-gradient-dark: linear-gradient( to bottom,
        var(--bg-light),
        var(--bg-highlight));

        --text: hsl(42, 65%, 50%);
        --text-highlight: hsl(170, 100%, 50%);

        --back-color-2: transparent;
    }

    /*added after shop update 30.12.2024*/
    :root.light-mode {
        --text-color-3: var(--text);
        --border-color-9: var(--text);
        --back-color-2: var(--bg-light);
        --back-color-3: var(--bg-highlight);
    }

    html,
    body {
        background-color: var(--bg);
        color: var(--text);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: var(--text);
    }

    a {
        color: inherit;
    }

    select {
        border-color: var(--bg-highlight2);
        background-color: var(--bg-highlight);

        color: inherit;
    }

    .mfp-bg {
        background: inherit;
        filter: opacity(99%);
    }

    .mfp-figure::after {
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
        background: inherit;
    }


    .stickyheader {
        background: var(--bg-gradient-dark);
    }

    .searcharea select,
    .searcharea input {
        background: inherit;
        color: inherit
    }

    .breadcrumb {
        color: inherit;
    }

    #al_pagetitle .al_title_xofy {
        color: inherit;
    }

    .article .priceinfodiv {
        color: inherit;
    }

    #av_price_discount td {
        border-right: 1px solid var(--text);
    }

    #av_articletext {
        color: inherit;
    }

    .av_fontnormal {
        color: inherit;
    }


    .article .av_propview {
        color: inherit;
    }

    .article .av_propview:nth-of-type(2n+1) {
        background-color: var(--bg-light);
    }

    .article .av_inbasket_amount input {
        border-color: var(--text-highlight);
        color: inherit;
        background-color: inherit;
    }

    .quantity-button {
        border-color: var(--bg-highlight2);
        background-color: var(--bg-highlight);
        background-image: var(--bg-gradient);
    }


    .backLightGrey {
        background-color: inherit;
    }

    .backDarkGrey {
        background-color: var(--bg-light);
    }

    .oopen:nth-of-type(2n) {
        background-color: var(--bg-light);
    }

    .open-modal {
        background: hsla(0, 0%, 0%, 0.8);
    }

    .open-modal-image-big-slider {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
    }


    #modal-content-open-modal-image-big-slider {
        width: 100%;
        height: 100%;

        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-content: stretch;
        align-items: stretch;
    }


    .swiper-wrapper {
        height: 100%;
    }

    .swiper-slide.swiper-slide-active > div {
        height: 100%;
    }

    .open-modal-image-big-slider .gallery-top img {
        max-height: 80vw;
        max-width: 100%;
        height: 100%
    }
}