SLS Dark Theme by fluffygura

/* ==UserStyle==
@name         sls thing
@version      20220503.04.18
@namespace    userstyles.world/user/xuhenggaming
@description  dark theme for sls or something. some shit doesnt work in some places but nobody uses those features anyways. will update when the new avatar update drops.


@author       xuhenggaming
@license      No License
==/UserStyle== */
@-moz-document domain("vle.learning.moe.edu.sg") {
    /*xu heng was here*/
    :root {
        /*change this if you want (upload a link)*/
        --bg: url(https://i.ytimg.com/vi/1YxHBVzK4Fo/maxresdefault.jpg);
        --rgbaTrans: rgba(0, 0, 0, 0.3);
         background-size: contain; 
    }
    
    /*unsupported browser annoying ass shit*/
    .app-message-banner[data-v-4b425b55]{
        opacity:0;
        /*this makes a gap between the header and the body but at least it works*/
    }

    /*background shit*/
    /*i just broke the first rule of coding*/
    /*surprised i havent fucked this up yet*/
    body {
        background: var(--bg);
        background-attachment: fixed;
        background-size: cover;
        background-color: var(--rgbaTrans);
        color: #fff;
    }

    .page .page-main[data-v-063b6b0a] {
        background: var(--bg);
        background-attachment: fixed;
        background-size: cover;
        background-color: var(--rgbaTrans);
    }

    /*greetings*/
    .user-greeting[data-v-09533a7a],
    .user-greeting .name strong[data-v-24324a9e] {
        color: #fff;
    }

    /*assignments and class groups*/
    .widget-multi-tab[data-v-ae620d96],
    .card-component.assignment-card .schedule,
    .card-component .card-footer {
        background-color: var(--rgbaTrans);
    }
    .card-component.assignment-card .schedule .field-value {
        color: white;
    }
    .label-component.class-group span[data-v-24e531f8],
    .label-component.level-and-course span[data-v-24e531f8] {
        background-color: var(--rgbaTrans);
        color: white;
    }
    /*notifications*/
    .bx--header-panel,
    .notification-panel[data-v-6106909e],
    .list-component.bx--tile {
        background-color: black;
    }
    .notification-panel{
        background-color: var(--rgbaTransh)
    }

    /*announcements*/
    .side-section .widget[data-v-15e5f4dd],
    .announcement-widget .list-component.announcement-list-item {
        background-color: var(--rgbaTrans);
    }
    .widget .widget-content .info-message,
    .bx--tile--clickable {
        color: #fff
    }

    /*header*/
    .bx--header.light-theme.app-header .logo {
        background-image: url("https://vle.learning.moe.edu.sg/mrv/assets/LogoSecondaryDark.4ac0a309.svg");
        background-size: 254px 48px;
    }
    .bx--header .logo {
        background-position: left;
    }
    .bx--header.light-theme {
        background-color: var(--rgbaTrans);
    }
    .bx--header.light-theme .bx--header__name,
    .bx--header.light-theme .bx--header__name:hover,
    .bx--header.light-theme {
        color: white;
    }
    .bx--header.light-theme .logo {
        background-image: url(https://vle.learning.moe.edu.sg/mrv/assets/LogoCompressedDark.374395c1.svg);
    }

    /*helpdesk*/
    .page[data-v-063b6b0a] {
        height: inherit;
    }
    .page.static-page .content {
        color: #fff;
    }
    .page.static-page .content h5,
    .page.static-page .content h6 {
        color: #fff;
    }

    /*content stuff*/
    /*lol i accidentally did what i wanted to do anyway so here it is*/
    .bx--content {
        background-color: transparent;
    }

    /*assignment cover*/
    .bx--form .field-value {
        color: white;
    }
    .assignment-submenu .meta-info .schedule,
    .lesson-viewer .meta-info .schedule {
        background-color: var(--rgbaTrans);
    }

    .lesson-viewer .page-lesson-viewer-cover .meta-info .status {
        background-color: var(--rgbaTrans);
    }

    /*assignment embeds from external sources*/
    .media.audio[data-v-125255c4],
    .media.embed[data-v-125255c4],
    .media.html5[data-v-125255c4],
    .media.image[data-v-125255c4],
    .media.video[data-v-125255c4],
    .media.youtube[data-v-125255c4] {
        background-color: var(--rgbaTrans);
    }

    /*assignment page stuff*/
    .lesson-viewer .page-nav,
    .lesson-viewer .section-nav {
        background-color: var(--rgbaTrans);
    }
    .lesson-viewer .page-nav .page-label .current,
    .lesson-viewer .page-nav .section-label .current,
    .lesson-viewer .section-nav .page-label .current,
    .lesson-viewer .section-nav .section-label .current {
        color: white;
    }

    /*quiz stuff*/
    .quiz-cover .instructions[data-v-6a51195a],
    .quiz-cover .bx--form.quiz-status[data-v-6a51195a] {
        background-color: var(--rgbaTrans);
    }

    /*form stuff????*/
    .bx--form .field-label {
        color: #d3d3d3;
    }
    /*timer on assignments*/
    .assignment-attempt .schedule {
        background-color: var(--rgbaTrans);
    }
    /*question component*/
    .lesson-viewer .question-component .recommended-time p,
    .lesson-viewer .question-component .mark .field-label,
    .lesson-viewer .question-component .tries .field-label,
    .lesson-viewer .question-component .recommended-time time {
        color: white;
    }
    .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
        color: lightgrey;
    }

    .lesson-viewer .question-component .question-options .input-checkbox,
    .lesson-viewer .question-component .question-options .input-radio,
    .quiz-status[data-v-2f8230b1] {
        background-color: var(--rgbaTrans);
    }
    .lesson-viewer .question-component .response-option.correct > .content,
    .rich-text-card[data-v-72fce64c] {
        background-color: var(--rgbaTrans);
        color: white;
    }
    .rich-text-editor .mce-content-body {
        border-top-color: white;
        border-top-style: solid;
        border-top-width: 1px;
        border-right-color: white;
        border-right-style: solid;
        border-right-width: 1px;
        border-bottom-color: white;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-left-color: white;
        border-left-style: solid;
        border-left-width: 1px;
        border-image-source: initial;
        border-image-slice: initial;
        border-image-width: initial;
        border-image-outset: initial;
        border-image-repeat: initial;
    }
    /*polls*/
    .poll-component .poll-option .input-checkbox,
    .poll-component .poll-option .input-radio {
        background-color: var(--rgbaTrans);
    }
    .common-space-poll .results[data-v-2a1eed12] {
        background-color: transparent;
    }
    /*instructions*/
    .lesson-viewer .question-component .instructions {
        background-color: var(--rgbaTrans);
    }
    /*after marking the thingy*/
    .fill-in-blank-input .answer[data-v-d31c4a1e] {
        background-color: var(--rgbaTrans);
    }
    /*suggestion stuff*/
    .rich-text-editor .mce-content-body,
    .lesson-viewer .question-component .question-response,
    .lesson-viewer .question-component .feedback-section .teacher-feedback,
    .bx--content-switcher-btn {
        background-color: var(--rgbaTrans);
    }

    /*end of assignment*/
    .page-lesson-viewer-end .details,
    .page-lesson-viewer-end .lesson-status {
        background-color: var(--rgbaTrans);
    }
    .bx--modal-content,
    .bx--modal-header__heading {
        color: white;
    }
    .bx--modal .bx--modal-footer {
        background-color: transparent;
    }

    /*attached tool bar*/
    .attached-toolbar[data-v-14c4cc2a] {
        background-color: var(--rgbaTrans);
        border: 0px
    }
    /*assignment card on main menu*/
    .card-component {
        background-color: var(--rgbaTrans);
    }

    /*marks*/
    .lesson-viewer .question-component .mark .field-value,
    .lesson-viewer .question-component .tries .field-value {
        background-color: var(--rgbaTrans);
    }

    /*when you get the question wrong and stuff*/
    .lesson-viewer .question-component .response-option.wrong > .content,
    .fill-in-blank-response-option .answer-list .answer[data-v-52d5a12c] {
        background-color: var(--rgbaTrans);
    }
    .lesson-viewer .question-component .response-option.correctOption > .content {
        background-color: var(--rgbaTrans);
        color: white;
    }
    .fill-in-blank-response-option .answer-list .answer[data-v-52d5a12c] {
        border: 0px
    }
    /*interactive thinking tool*/
    .thinking-tool .section:first-child > .label {
        color: white;
    }
    .thinking-tool-component .thinking-tool-result[data-v-48f23ce4],
    .common-space-thinking-tool .content-switcher .content-switcher-section > .results {
        background-color: var(--rgbaTrans);
    }

    /*annotations and card component(and also any popups that appear)*/
    .page-side[data-v-063b6b0a],
    .content-popup-container .content-popup > .wrapper[data-v-d9ef4d1c],
    .annotation-list .empty-placeholder[data-v-1ec7425b],
    .bx--tooltip__trigger:not(.bx--btn--icon-only) {
        background-color: transparent;
    }
    .card-component.annotation-list-item .info[data-v-1d0f2a5c],
    .content-subpage.light-theme .bx--modal-container > .header,
    .card-component .card-header .timestamp,
    time,
    .comment-summary[data-v-3eef150b] {
        color: white;
    }
    .rich-text-editor .mce-content-body,
    .content-subpage .comment-section,
    .content-subpage .bx--modal-container > .content .sub[data-v-5f46d281],
    .content-subpage.light-theme .bx--modal-container > .header {
        background-color: transparent;
    }
    .card-component {
        border: 0px;
    }
    .bx--modal .bx--modal-container {
        background-color: black;
    }
    /*side nav*/
    .bx--side-nav,
    .bx--side-nav__item:not(.bx--side-nav__item--active) > .bx--side-nav__link:hover {
        background-color: var(--rgbaTrans);
    }

    /*assignment list*/
    .page...