liveconfig dark by s-light

/* ==UserStyle==
@name           liveconfig dark
@namespace      github.com/openstyles/stylus
@version        2.0.0
@description    dark mode..
@author         Me
==/UserStyle== */
@-moz-document regexp(".*/liveconfig/.*") {
    /* global */
    :root {
        --bg: hsl(250, 100%, 3%);
        --bg-light: hsl(250, 100%, 10%);
        --bg-highlight: hsl(250, 100%, 30%);
        --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-dark: hsl(42, 100%, 25%);
        --text-light: hsl(42, 100%, 70%);
        --text-highlight: hsl(170, 100%, 50%);
    }
}

@-moz-document regexp(".*/liveconfig/.*") {
    html,
    body {
        background-color: var(--bg);
        color: var(--text);
    }

    main {
        background: inherit;
    }

    header {
        background: var(--bg-gradient-dark);
        border-bottom: none;
    }

    .dBox {
        background: inherit;
        border: 1px solid var(--bg-highlight2);
    }

    .dBox > h2 {
        background-color: var(--bg-highlight);
        color: inherit;
    }

    table.thLeft > tbody > tr > th {
        color: var(--text-dark);
    }

    small,
    div.small,
    p.small {
        color: var(--text-light);
    }


    body > nav > ul > li > span {
        color: var(--text);
        background: var(--bg-gradient-dark);
    }

    body > nav > ul > li > span::before {
        color: inherit;
    }

    body > nav > ul > li > ul > li > a {

        color: var(--text);
    }

    body > nav > ul > li > ul > li > a:hover {
        background-color: var(--bg-highlight);
    }



    .dPopup {
        background: var(--bg);
    }

    .dPopup > h2 {
        background-color: var(--bg-highlight);
        color: inherit;
    }


    input[readonly],
    select[readonly],
    textarea[readonly],
    input[type="email"],
    input[type="number"],
    input[type="text"],
    input[type="password"],
    input[type="search"],
    select,
    textarea {
        background: var(--bg-light);
        color: var(--text);
    }


    button,
    button.ico.ico-add,
    a.button {
        background: var(--bg-gradient-dark);
        color: var(--text);
    }

    button:hover,
    button.ico.ico-add:hover,
    a.button:hover {
        background: var(--bg-gradient);
    }

    button:disabled,
    button.ico:disabled {
        background: var(--bg-dark);
        color: var(--text-dark);
    }

    table.tabData,
    table.tabData.clickable > tbody > tr > td > a {
        background: transparent;
        color: inherit;
    }

    table.tabData.clickable > tbody > tr:nth-child(2n) {
        background: var(--bg-light);
        color: inherit;
    }

    table.tabData.clickable > tbody > tr:hover:not(.deleted):not(.disabled) > td {
        background: var(--bg-highlight);
    }


    table.tabData > thead > tr > th.sort {
        background: var(--bg-gradient);
    }

    table.tabData > thead > tr {
        background: var(--bg-gradient-dark);
    }

    table.tabData > thead > tr > th.sortable:hover {
        background: var(--bg-gradient);
    }

    /**/
    .dPopup {
        width: 98vw !important;
        height: 90vh !important;
        position: fixed;
        left: 0.2vw !important;
        top: 2vh !important;
    }

    .dPopupData > iframe {
        width: 100% !important;
        height: 85vh !important;
    }

    html.iframe > body {
        height: 100%;
    }

    #dLogview {
        width: auto;
        height: 87vh;
        margin: 6px 0px;
        padding: 6px;
        border: none;
        box-shadow: none;
        background: var(--bg-gradient-dark);
        overflow: scroll;
        white-space: pre;
    }
}