doc.traefik.io by s-light

/* ==UserStyle==
@name           doc.traefik.io/traefik/ - März 2024
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */
@-moz-document url-prefix("https://doc.traefik.io/traefik/") {
    /* Insert code here... */
    :root,
    [data-md-color-primary="cyan"] {
        --md-default-fg-color: hsla(0, 0%, 100%, .87);
        --md-default-fg-color--light: hsla(0, 0%, 100%, .54);
        --md-default-fg-color--lighter: hsla(0, 0%, 100%, .32);
        --md-default-fg-color--lightest: hsla(0, 0%, 100%, 0.07);

        --md-default-bg-color: hsl(250, 100%, 8%);
        --md-default-bg-color--light: hsla(250, 100%, 16%, 0.7);
        --md-default-bg-color--lighter: hsla(250, 100%, 30%, 0.3);
        --md-default-bg-color--lightest: hsla(250, 100%, 30%, 0.12);

        /*primary*/
        --md-primary-fg-color: hsl(231, 50%, 60%);
        --md-primary-fg-color--light: hsla(231, 50%, 70%, 1);
        --md-primary-fg-color--dark: hsla(232, 50%, 40%, 1);

        --md-primary-bg-color: hsla(250, 100%, 100%, 1);
        --md-primary-bg-color--light: hsla(250, 100%, 100%, 0.7);

        /*accent*/
        --md-accent-fg-color: hsl(79, 100%, 50%);
        --md-accent-fg-color--transparent: hsla(79, 100%, 50%, 0.1);

        --md-accent-bg-color: hsl(220, 100%, 30%);
        --md-accent-bg-color--light: hsla(220, 100%, 30%, 0.7);

        /*footer*/
        --md-footer-fg-color: var(--md-default-fg-color--light);
        --md-footer-bg-color: var(--md-default-bg-color--light);

        /*code*/
        --md-code-fg-color: var(--md-primary-fg-color);
    }

    :root,
    [data-md-color-primary="cyan"] {
        --dark: hsl(37, 98%, 85%);
        --blue: #1E54D5;
        --light-blue: #EFF6FE;
        --input-bg-color: var(--md-default-bg-color);
        --input-color: var(--md-default-fg-color);
        --input-placeholder-color: var(--md-default-fg-color--lighter);
        --input-border-color: var(--md-default-bg-color--lightest);
    }

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


    .md-sidebar--primary,
    .md-nav--secondary,
    .md-sidebar__inner .md-nav--secondary {
        background-color: var(--md-default-bg-color--light) !important;
    }



    .md-nav__link {
        color: inherit !important;
        background-color: inherit !important;
    }

    .md-nav__toggle:checked + .md-nav__link,
    .md-nav__link--active,
    .md-nav__link:hover,
    .md-nav__item.md-nav__item--nested .md-nav__link:hover {
        color: var(--md-accent-fg-color) !important;
        background-color: var(--md-accent-bg-color) !important;
    }

    .md-footer-nav,
    .md-footer-meta {
        background-color: inherit;
    }

    /*shadow dom - not working.. :-(*/
    header-app div nav div div,
    .hFuYfs,
    .sc-dFdIVH.sc-eVQfli.cSnVnB.hFuYfs {
        color: inherit !important;
        background-color: inherit !important;
    }
}