GIBB AiO Darkmode by trgamer-tech

/* ==UserStyle==
@name           GIBB AiO Darkmode
@namespace      github.com/TRGamer-Tech/openstyles
@version        1.0.1
@description    Darkmode for all of the GIBB Websites I created so far. This includes DEUPS, Webmail, SFTP, WebUntis and Smartlearn Exam Page. More is coming soon!
@author         TRGYT
@license        CC Zero
==/UserStyle== */

@-moz-document domain("deups.gibb.ch") {
    @font-face {
        font-family: 'Product Sans';
        font-style: normal;
        font-weight: 400;
        src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/productsans/v5/HYvgU2fE2nRJvZ5JFAumwegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
    }

    :root {
        --background: #2f2f2f;
        --sidebar: #1a1a1a69;
        --footerheader: #282828;
        --main: #2a2a2a;
        --mainborder: #454545;
        --mainhover: #454545;
        --mainfont: #6280ff!important;
        --hoverfont: #8699ed!important;
    }

    html {
        font-family: Product Sans;
    }

    main {
        background-color: var(--background);
    }

    .footer.container,
    footer.container a,
    nav.top-nav,
    body {
        background-color: var(--footerheader);
        color: #6280ff!important;
    }

    a.page-title,
    .mdi-navigation-menu:before,
    a#logo-container {
        color: #6280ff!important;
    }

    .mdi-navigation-menu {
        line-height: 0px;
        margin-top: 57px;
        padding-top: 25px;
        padding-bottom: 25px;
        padding-left: 9px;
        padding-right: 9px;
        border-radius: 50px;
    }

    .mdi-navigation-menu:hover {
        background-color: var(--mainhover);
    }

    .side-nav {
        color: #fff;
        background-color: var(--sidebar);
        border: 1px solid #5c5c5c;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        overflow: hidden!important;
    }

    .side-nav a {
        color: rgba(255, 255, 255, .87);
    }

    ul.side-nav li.logo {
        border-bottom: 1px solid #5a5a5a!important;
    }

    ul.side-nav li a:hover {
        background-color: #363636!important;
    }

    div.section.content,
    .dropdown-content {
        background-color: var(--main);
        border: 1px solid var(--mainborder);
        margin-top: 20px;
        border-radius: 10px;
    }

    .dropdown-content li.active,
    .dropdown-content li:hover {
        background-color: var(--mainhover);
    }

    .dropdown-content li:hover span {
        color: var(--hoverfont);
    }

    .collection {
        background-color: var(--main);
        border: 1px solid var(--mainborder);
    }

    .collection .collection-item {
        background-color: var(--main);
        border-bottom: 1px solid var(--mainborder);
    }

    .card {
        background-color: var(--mainhover);
    }

    @media only screen and (min-width: 993px) {
        div.section.content {
            padding: 1em;
        }
    }
}

@-moz-document regexp("https?:\\/\\/deups\\.gibb\\.ch.*\\/practice.*"), regexp("http?:\\/\\/deups\\.gibb\\.ch.*\\/practice.*") {
    .container > .section > .row:first-of-type {
        position: sticky;
        top: -60px;
        z-index: 99;
        background-color: var(--main);
        margin-top: 0;
        border-bottom: 2px solid #fff;
    }
}

@-moz-document regexp("https?:\\/\\/deups\\.gibb\\.ch.*\\/exam.*"), regexp("http?:\\/\\/deups\\.gibb\\.ch.*\\/exam.*") {
    .container > .section > .row:first-of-type {
        position: sticky;
        top: -150px;
        z-index: 99;
        background-color: var(--main);
        margin-top: 0;
        border-bottom: 2px solid #fff;
    }
}

@-moz-document domain("webmail.iet-gibb.ch") {

    :root {
        --new-blue-1: #0063cc;
        --new-blue-2: #007bff;
        --new-blue-3: #37beff;
        --new-blue-4: #85d6ff;
        --new-blue-5: rgba(0,123,255,0.25);
        --new-white-1: #e9e9e9;
        --new-white-2: #9e9e9e;
        --new-black-1: #101010; /* SIDE PANEL */
        --new-black-2: #191919; /* TOP PANEL, BOTTOM PANEL MOBILE */
        --new-black-3: #1f1f1f; /* ALL BODY, BOTTOM PANEL DESKTOP */
        --new-black-4: #303030; /* BORDER */
        --new-black-5: #262626; /* INPUT */
        --new-black-6: rgba(16,16,16,0.8);
        --new-red-1: #d92027;
        --new-orange-1: #bb3b0e;
        --new-green-1: #007944;
    }
    
    /* GLOBAL STYLES */
    
    body {
        color: var(--new-white-1);
        background-color: var(--new-black-3);
    }
    body::before {
        background: transparent;
    }
    a {
        color: var(--new-blue-3);
    }
    a:hover {
        color: var(--new-blue-4);
    }
    
    /* COMBINED STYLES */

    .mce-tabs,
    .mce-panel,
    .mce-window .mce-reset,
    .mce-floatpanel.mce-popover,
    .mce-menu-item.mce-disabled,
    .mce-tabs + .mce-container-body,
    .mce-menu-item.mce-disabled:hover,
    .mce-window .mce-combobox .mce-btn,
    .task-login #messagestack div,
    .task-login #messagestack .loading,
    .popover .menu .dropbutton a.dropdown,
    .ui-widget-content,
    #layout-list,
    #layout-sidebar,
    #layout-content,
    i.mce-i-checkbox {
        background-color: var(--new-black-3);
    }
    .task-login #messagestack .alert-warning,
    #messagestack .alert-warning {
        background-color: var(--new-orange-1);
        color: var(--new-white-1);
    }
    .form-control:focus,
    .recipient-input.focus,
    .multi-input > .content.focused,
    .custom-file-input:focus ~ .custom-file-label {
        border-color: var(--new-blue-1);
        box-shadow: 0 0 .2rem .1rem var(--new-blue-5);
    }
    .form-control:focus,
    .recipient-input.focus {
        background-color: var(--new-black-3);
        color: var(--new-white-1);
    }
    .listing-info,
    .formcontent .hint,
    .file-upload .hint,
    .message-part span.sig,
    .form-control::placeholder,
    .custom-control-input:disabled ~ .custom-control-label,
    #login-footer {
        color: var(--new-white-2);
    }
    .btn-secondary:hover,
    .btn-primary.disabled,
    .btn-primary:disabled,
    .btn-primary:not(:disabled):not(.disabled):active,
    .btn-primary:not(:disabled):not(.disabled).active,
    .btn-secondary:not(:disabled):not(.disabled):active,
    .btn-secondary:not(:disabled):not(.disabled).active,
    .image-selector button:hover,
    .image-selector button:not(:disabled):not(.disabled):active,
    .image-selector button:not(:disabled):not(.disabled).active,
    .mce-window .mce-foot .mce-btn:hover,
    .mce-window .mce-foot .mce-btn.mce-primary:hover,
    .mce-window .mce-foot .mce-btn:not(:disabled):not(.disabled):active,
    .mce-window .mce-foot .mce-btn:not(:disabled):not(.disabled).active,
    .mce-window .mce-foot .mce-btn.mce-primary:not(:disabled):not(.disabled):active,
    .mce-window .mce-foot .mce-btn.mce-primary:not(:disabled):not(.disabled).active {
        background: var(--new-blue-2);
        border-color: var(--new-blue-2);
    }
    .nav-tabs,
    .listing li,
    .listing tbody td,
    .mce-menu .mce-menu-item,
    .ui-datepicker .ui-datepicker-header,
    .menu.pagenav.pagenav-list.expanded + .navlist,
    html.layout-small .popover:not(.select-menu) .listing li:last-child,
    html.layout-phone .popover:not(.select-menu) .listing li:last-child {
        border-bottom: 1px solid var(--new-black-4);
    }
    .image-tools,
    .quota-widget .value,
    .mce-charmap td:hover,
    .mce-menu-item:hover,
    .mce-menu-item:focus,
    .mce-menu-item.mce-selected,
    .menu a:not(.disabled):focus,
    .menu a:not(.disabled):hover,
    .popover .menu .dropbutton a.dropdown:hover,
    .popover .menu .dropbutton:not(.disabled):hover,
    .mce-menu-item.mce-menu-item-preview.mce-active:hover {
        background-color: var(--new-blue-1);
    }
    .btn:focus,
    .btn-danger:focus,
    .btn-primary:focus,
    .btn-secondary:focus,
    .btn-primary:not(:disabled):not(.disabled):active:focus,
    .btn-primary:not(:disabled):not(.disabled).active:focus,
    .btn-secondary:not(:disabled):not(.disabled):active:focus,
    .btn-secondary:not(:disabled):not(.disabled).active:focus,
    .image-selector button:focus,
    .image-selector button:not(:disabled):not(.disabled):active:focus,
    .image-selector button:not(:disabled):not(.disabled).active:focus,
    .mce-window .mce-foot .mce-btn.mce-primary:focus,
    .mce-window .mce-foot .mce-btn:not(:disabled):not(.disabled):active:focus,
    .mce-window .mce-foot .mce-btn:not(:disabled):not(.disabled).active:focus,
    .mce-window .mce-foot .mce-btn.mce-primary:not(:disabled):not(.disabled):active:focus,
    .mce-window .mce-foot .mce-btn.mce-primary:not(:disabled):not(.disabled).active:focus,
    .custom-switch .custom-control-input:focus ~ .custom-control-label:before {
        box-shadow: 0 0 0 .2rem var(--new-blue-5);
    }
    .btn,
    .table,
    .message-partheaders,
    .recipient-input input,
    .form-control-plaintext,
    .html-editor .editor-toolbar .mce-i-html,
    .ui.alert,
    .ui.alert > i.icon,
    .quota-widget,
    .quota-widget .count,
    .searchbar a,
    .searchbar input,
    .searchbar form::before,
    .menu.listing a,
    .menu.pagenav a,
    .menu.toolbar a,
    .menu.pagenav .pagenav-text,
    .listing li a,
    .listing tbody td,
    .listing tbody td a,
    .listing li.disabled,
    .listing tr.disabled td,
    .mce-ico,
    .mce-reset,
    .mce-widget,
    .mce-widget *,
    .mce-container,
    .mce-container *,
    .mce-btn button,
    .mce-btn .mce-txt,
    .mce-content-body,
    .mce-window .mce-label,
    .mce-window .mce-textbox,
    .mce-menu-item:hover .mce-ico,
    .mce-menu-item:focus .mce-ico,
    .mce-menu-item:hover .mce-text,
    .mce-menu-item:focus .mce-text,
    .mce-menu .mce-menu-item .mce-text,
    .mce-menu-item.mce-selected .mce-ico,
    .mce-menu-item.mce-selected .mce-text,
    .mce-window .mce-foot .mce-btn button,
    .mce-window .mce-foot .mce-btn button:hover,
    .mce-window .mce-window-head .mce-title,
 ...