HM Moodle DarkTheme by ingodingo

/* ==UserStyle==
@name           HM Moodle DarkTheme
@namespace      -
@version        0.1.0
@description    Dark Theme for Moodle from Hochschule München
@author         IngoDingo
==/UserStyle== */
@-moz-document regexp(".*moodle.hm.edu.*") {
    /*
    Surface Color: #121212
    White: 
    Moodle Blue: #2e456d
*/
    body {
        color: #FFF;
        background-color: rgba(12, 12, 12, 100) !important;
        @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@300&display=swap');
        font-family: 'Inconsolata', monospace;
        font-weight: 300;
    }

    .navbar {
        background-color: #2e456d !important;
    }

    #block-region-side-pre,
    .coursebox.odd,
    
    #page-header .card {
        background-color: rgba(255, 255, 255, .02) !important;
    }


    #nav-drawer {
        background-color: rgba(18, 18, 18, 100) !important;
    }
    
    #page-footer,
    #region-main,
    #block-region-side-pre {
        background-color: rgba(12, 12, 12, 100) !important;
    }
    .singlebutton {
        background-color: rgba(255, 255, 255, .02) !important;
        color: white !important;
    }

    .dropdown-menu {
        background-color: RGBA(24, 24, 24, 1) !important;
        color: white !important;
    }
    .dropdown-item {
        color: white !important;
    }

    .list-group-item,
    .btn-secondary,
    .nav-link,
    .message,
    .bg-white,
    .editor_atto_toolbar {
        background-color: rgba(255, 255, 255, .02) !important;
        border-color: rgba(255, 255, 255, .02) !important;
        color: white !important;
    }

    .card,
    .bg-pulse-grey,
    .form-control,
    .atto-title-h1,
    .current,
    .custom-select,
    .atto_group,
    .editor_atto_content_wrap,
    input {
        background-color: rgba(255, 255, 255, .05) !important;
        border-color: rgba(255, 255, 255, .02) !important;
        color: white !important;
    }

    .card-img,
    [src="https://moodle.hm.edu/theme/image.php/boost_campus/url/1615395674/icon"],
    img {
        filter: brightness(.7) contrast(1.2);
    }
    [alt="Moodle-Lernplattform"] {
        filter: none;
    }

    .page-link {
        background-color: rgba(255, 255, 255, .05) !important;
        border-color: rgba(255, 255, 255, .02) !important;
        color: white !important;
    }

    .disabled > .page-link {
        background-color: rgba(255, 255, 255, .05) !important;
        border-color: rgba(255, 255, 255, .02) !important;
        color: rgba(255, 255, 255, .05) !important;
    }
    
    .modal-dialog > .modal-content {
        background-color: #121212;
    }

    .border {
        border-color: rgba(255, 255, 255, .1) !important;
    }

    option {
        background-color: #121212;
    }
    .custom-select.singleselect,
    .custom-select.urlselect {
        color: white !important;
        background: rgba(255, 255, 255, .02) url("data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'4\' height=\'5\' viewBox=\'0 0 4 5\'%3e%3cpath fill=\'%23343a40\' d=\'M2 0L0 2h4zm0 5L0 3h4z\'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
        border-color: rgba(255, 255, 255, .02) !important;
    }

    .alert-success {
        background-color: #3D513C !important;
        border-color: rgba(61, 81, 60, 1) !important;
        color: #FFFFFF;
    }
    .alert-warning {
        background-color: #514F3C !important;
        border-color: rgb(80, 81, 60) !important;
        color: #FFFFFF;
    }

    .close,
    .icon {
        color: white !important;
    }

    .message-app,
    .popover-region-container,
    .popover-region-footer-container {
        background-color: #121212 !important;
        color: white !important;
    }
    .alert-warning a {
        filter: brightness(3);
    }
}


@-moz-document regexp(".*moodle.hm.edu.course.*") {
    #region-main.mb-3,
    #region-main,
    .image_holder,
    li.currentselected {
        background-color: rgba(255, 255, 255, .05) !important;
        border-color: rgba(255, 255, 255, .02) !important;
        color: white !important;
    }
    a[target=_blank] {
        background-color: rgba(255, 255, 255, .00) !important;
    }

    .icon_content {
        background-color: rgba(255, 255, 255, .0) !important;
        color: turquoise !important;
    }
    .vjs-big-play-button,
    .vjs-poster {
        filter: brightness(.7) contrast(1.2);
    }

    #gridshadebox_content {
        color: #FFF;
        background-color: rgba(24, 24, 24, 100) !important;
        border-color: rgba(255, 255, 255, .2) !important;
    }
}


@-moz-document regexp(".*moodle.hm.edu.mod.*") {
    #region-main,
    #intro {
        background-color: rgba(255, 255, 255, .02) !important;
        border-color: rgba(255, 255, 255, .02) !important;
        color: white !important;
    }

    .region_main_settings_menu_proxy {
        opacity: 0;
    }

    .px-3 {
        color: white !important;
    }
    .p-0 {
        color: grey !important;
    }

    th {
        border-color: rgba(255, 255, 255, .15) !important;
    }
    td {
        border-color: rgba(255, 255, 255, .15) !important;
    }
}

@-moz-document regexp(".*moodle.hm.edu.message.*") {
    #region-main,
    .hover-tooltip {
        background-color: rgba(12, 12, 12, 100) !important;
    }

    .preference-row {
        background-color: rgba(255, 255, 255, .06) !important;
        border-color: rgba(255, 255, 255, .1) !important;
        color: white !important;
    }

    .table th,
    .table td {
        background-color: rgba(255, 255, 255, .06) !important;
        border-color: rgba(255, 255, 255, .1) !important;
        color: white !important;
    }

    .preference-state-status-container {
        filter: brightness(.7) contrast(1.2);
    }
}

@-moz-document domain("sso.hm.edu") {
    body {
        color: #FFF;
        background-color: rgba(12, 12, 12, 100) !important;
        /*@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@300&display=swap');*/
        font-family: 'Inconsolata', monospace;
        font-weight: 300;
    }
    .aai_login_field,
    .aai_box {
        background-color: rgba(255, 255, 255, .05) !important;
        border-color: rgba(255, 255, 255, .02) !important;
        box-shadow: 1px 1px 8px #000000;
        color: white !important;
    }
    img {
        filter: invert();
    }
    a {
        color: turquoise !important;
    }
}