MIS dark by s-light

/* ==UserStyle==
@name           MIS dark
@namespace      github.com/s-light/
@version        1.0.0
@description    *dark-theme* for MIS
@author         Stefan Krüger s-light.eu
==/UserStyle== */
@-moz-document regexp("[^.]*\\.montessori-is\\.de/.*"),
regexp("[^.]*\\.fraldo\\.de/.*"),
regexp("^(?!.*pma).*\\.lisda\\.de.*"),
regexp("^(?!.*pma).*\\.lisda\\.org/.*"),
regexp("^(?!.*pma).*\\.misdev\\.local/.*") {
    /* global */
    :root {
        --bg: hsla(254, 60%, 15%, 1);
        ;

        --bg-dark: var(--bg);
        --bg-dark-transparent: hsla(254, 60%, 15%, .8);
        --bg-dark-highlight: hsla(254, 60%, 40%, .85);

        --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-highlight: hsl(170, 100%, 50%);
    }
}

@-moz-document regexp("[^.]*\\.montessori-is\\.de/.*"),
regexp("[^.]*\\.fraldo\\.de/.*"),
regexp("^(?!.*pma).*\\.lisda\\.de.*"),
regexp("^(?!.*pma).*\\.lisda\\.org/.*"),
regexp("^(?!.*pma).*\\.misdev\\.local/.*") {
    /*
    body {
        filter: invert(87%) hue-rotate(200deg);
    }
    */
    body {
        background-image: none;
        background-color: hsl(270, 100%, 7%);
        color: var(--text);
    }

    #main {
        background-color: var(--bg-dark-transparent);
        color: var(--text) !important;
    }

    .header {
        background-color: var(--bg-dark-transparent);
        color: var(--text);
    }

    .header .mode-navigation .switch-to-mode {
        color: inherit
    }

    .popup_navigation {
        background: var(--bg-gradient-dark);
        color: var(--text);
    }

    .popup_navigation a {
        color: inherit;
    }

    .main-content {
        background-color: var(--bg-dark-transparent);
    }

    table.CTable {
        background-color: transparent;
    }

    table.CTable tr.subhead td a {
        color: var(--text);
    }

    form.form2 table.Form2 tr.even td,
    table.content tr.even td,
    table.CTable tr.even td {
        color: inherit;
    }

    form.form2 table.Form2 tr.odd td,
    table.content tr.odd td,
    table.CTable tr.odd td {
        color: inherit;
    }

    form.form2 table.Form2 tr td input:not(.inline),
    form.form2 table.Form2 tr td select:not(.inline):not(#termselection_termselection_term),
    form.form2 table.Form2 tr td textarea:not(.inline) {
        background-color: transparent;
        color: var(--text) !important;
    }

    form.form2 .odd td,
    form.form2 .even td {
        background-color: transparent !important;
    }

    form.form2 tr.even:not(.skillgroup):not(.compact) td {
        background-color: var(--bg-dark-transparent) !important;
    }

    form.form2 .wizard_fullwidth tr.even:not(.skillgroup):not(.compact),
    form.form2 .wizard_fullwidth tr.even:not(.skillgroup):not(.compact) td {
        background-color: var(--bg-dark-highlight) !important;
    }

    form.form2 > table:not(#termselection_table0) .odd td,
    form.form2 > table:not(#termselection_table0) .even td {
        border-bottom: 3px solid var(--bg-dark-highlight) !important;
    }


    table.CTable tr.even {
        background-color: hsla(0, 0%, 95%, .09) !important;
    }

    table.CTable tr.even td a,
    table.CTable tr.odd td a {
        color: inherit;
    }

    /* automation.montessori-is.de */
    .select2-dropdown,
    .select2-container--default .select2-selection--single,
    .select2-container--default .select2-search--dropdown .select2-search__field,
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        background-color: var(--bg-dark);
        color: inherit;
    }

    .select2-container--default .select2-results__option[aria-selected="true"] {
        background-color: var(--bg-dark-highlight);
    }

    .form-control {
        background-color: var(--bg-dark-transparent);
        color: inherit;
    }

    textarea {
        background-color: var(--bg-dark);
        color: var(--text);
        border-radius: 0.5em;
        padding: 0.5em;
    }

    /*login*/
    #content #content2 {
        background: transparent;
    }

    #content #content2::after {

        opacity: 0.2;
    }

    #content2 .Form2 .subhead,
    #content2 .Form2 .odd,
    #content2 .odd .roundCorners_content {
        background-color: transparent;
    }

    input,
    #content2 .odd input[type="text"],
    #content2 .odd input[type="password"],
    #login_username {
        /*this somewhat does not work..*/
        background: var(--bg-gradient);
        color: var(--text);
        border: none 1px;
        padding: 0.1rem 0.5rem;
        box-shadow: 0 0 0.1rem 0 inset black;
    }


    .introjs-tooltip {
        background-color: var(--bg-dark-highlight);
    }


    #mode_communication table.CTable tr.odd td {
        background: var(--bg-light) !important;
    }

    #mode_communication #reportdetails tr.odd > td[colspan="2"]:last-child .roundCorners_content {
        background: inherit;
    }

    td .report_grid_editor {
        background-color: inherit !important;
    }

    .report_grid_editor .course {
        background-color: var(--bg);
        border-radius: 10px;
        border: 1px solid #ddd;
        margin: 5px 0;
    }

    form.form2 table.Form2 tr.subhead td,
    table.content tr.subhead td,
    table.CTable tr.subhead td {
        color: var(--text-highlight);
    }


    /*status*/
    table.CTable {
        min-width: 50%;
        width: auto;
    }

    #main {
        margin: 0;
    }

    #main > colgroup > col:nth-child(2) {
        width: 99.5%;
        min-width: 0 !important;
    }

    #content2 #logo,
    #content #content2,
    #content #content_body {
        margin-left: 0;
        min-width: auto !important;
        width: 99%;
    }

    table#ctable-pupils > colgroup > col:nth-child(8) {
        width: 2rem;
        min-width: 0 !important;
    }

    tr > td:nth-child(10) > span {
        overflow: scroll;
        max-height: 25em;
        display: inline-block;
        /* position: absolute; */
    }

    table.CTable tr.subhead td,
    table.CTable tr.odd td,
    table.CTable tr.even td {
        background: inherit;
        color: inherit;
    }

    .querypage details:not(.results) {
        color: var(--text);
    }

    .querypage details[open]:not(.results) {
        background-color: var(--bg-light);
        border: 1px dashed blue;
        padding: 9px;
    }

    #content #content_body > span {
        background-color: var(--bg-light);
    }

    table.CTable tr td a {
        color: var(--text-highlight);
    }


    colgroup col {
        width: auto;
        min-width: auto;
        max-width: none;
        display: none;
    }


    table#main > tbody > tr:nth-child(1) > td:nth-child(1),
    table#main > tbody > tr:nth-child(1) > td:nth-child(3) {
        display: none;
    }

    /*format error messages with linebreaks if not normal mis*/
    body:not([class~=mis]) {
        white-space: pre;
    }
}


@-moz-document url-prefix("https://akademie.montessori-is.de") {
    body.bg-type-color,
    body #wrapper-container.bg-type-color,
    #learn-press-course-curriculum .section-content,
    .navigation,
    header#masthead.site-header {
        background-color: var(--bg);
    }

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

    #learn-press-course-curriculum .section .course-item,
    .course-curriculum ul.curriculum-sections .section-content .course-item > a,
    header#masthead .width-navigation .navbar > li > a,
    header#masthead .width-navigation .navbar > li > span {
        color: var(--text);
    }

    body.course-item-popup #learn-press-content-item,
    #course-item-content-header {
        background-color: var(--bg);
    }

    #comments .comment-respond,
    #comments .list-comments {
        background-color: var(--bg);
    }

    body.course-item-popup #learn-press-course-curriculum,
    #learn-press-course-curriculum .section-content {
        background: var(--bg);
    }
}