Acellus Nord Theme by burntninjas

==/UserStyle== */
/* ==UserStyle==
@name         Acellus Nord Theme
@version      20221022
@namespace    userstyles.world/user/burntninjas
@description  W.I.P Acellus based on https://www.nordtheme.com/

@author       burntninjas
@license      No License
==/UserStyle== */
@-moz-document domain("admin261.acellus.com") {
        :root {
        --nordx:#20242c;
        --nordy:#242933;
        --nord0:#2e3440;	/*dark1*/
        --nord1:#3b4252;	/*dark2*/
        --nord2: #434c5e;	/*dark3*/
        --nord3: #4c566a;	/*dark4*/
        --nord4: #d8dee9;	/*light1*/
        --nord5: #e5e9f0;	/*light2*/
        --nord6: #eceff4;	/*light3*/
        --nord7: #8fbcbb;	/*frost1*/
        --nord8: #88c0d0;	/*frost2*/
        --nord9: #81a1c1;	/*frost3*/
        --nord10: #5e81ac;	/*frost3*/
        --nord11: #bf616a;	/*red*/
        --nord12: #d08770;	/*orange*/
        --nord13: #ebcb8b;	/*yellow*/
        --nord14: #a3be8c;	/*green*/
        --nord15: #b48ead;	/*purple*/
        --nord3-4: #929AAA;
        --nord1blur: #3b4252cc;
        --nord0blur: #2e3440cc;
    }

    /*||Body*/
    .body {
        background: var(--nord0);
    }

    .body, .page, .page-wrapper {
        scrollbar-width: thin;
        scrollbar-color: var(--nord2)var(--nord1);
    }
    /*main style*/
    #text {
        color:	var(--nord5)
    }

    div#text div {
        color:	var(--nord5)
    }

    /*||Classes*/
    /*Header*/
    .recovery, .acellus-logo, .helpvideo, .review, .grammar_header, .exam {
        background: var(--nord1);
        border-bottom: var(--nord1);
        z-index: 2;
        box-shadow: 1px 1px 8px var(--nordx);
    }
    /*counter*/
	.counter{
	margin-right: 24px
	}
    .counter > span {
        background: var(--nord3)
    }

    .counter > span.counter_decor.counter_bottom {
        box-shadow:none
    }

    .counter > span span {
        color: var(--nord5)
    }
    /*Container*/
   @media only screen and (max-width: 960px){
       .background-book .container{
           width:calc(100% - 48px)!important;
       }
    }
    @media (max-width:100vh){ 
        .playerWrapper{
            max-width:100vw!important;
    }
    }
    .container{
        width:auto
    }
    
    /*Footer*/
    #bottom-navbar {
        background: var(--nord0);
        font: italic bold 14px/50px Roboto, Roboto, Arial, sans-serif;
    }
    #bottom-navbar > div:nth-child(1){
        margin: 0
    }

    /*"book"*/
    .playerWrapper .background-book{
        max-width:100%!important
    }
    .background-book {
        background: var(--nord0)
    }

    .scrolling-book {
        scrollbar-width: thin;
        scrollbar-color: var(--nord1)var(--nord2);
        height: auto;
        overflow: visible
    }

    .scrollabletext p {
        text-align: justify;
        text-justify: inter-character;
    }

    .scrolling-book-question, .scrolling-book {
        width: 100em;
        max-width: fit-content;
    }
    .scrolling-book-question{
        margin: 0 auto;
            padding:12px
    }
    /*text*/
    h1, h2, h3, h4, h5, h6, blockquote, blockquote p {
        color: var(--nord5)
    }
    /*Answer block*/
    #_A1{
        
    }
    .playerWrapper{
        background-color: var(--nord1);
        border-radius: 8px;
        box-shadow: 1px 1px 8px var(--nordx);
    }
    .book-question-wrapper{
        background-color: var(--nord1);
        border-radius: 8px;
        box-shadow: 1px 1px 8px var(--nordx);
		padding:12px;
	}
    .imgAnswer_text {
        border: 3px solid var(--nord2);
        background: var(--nord2);
        color: var(--nord6);
        position: absolute;
        margin: 0;
        margin-top: -18px;
        margin-left: -25px
    }

    .text-answer {
        background: var(--nord2);
        border: 1px solid var(--nord2);
        border-radius: 4px;
    }

    .text-answer:hover {
        border: 1px solid var(--nord8);
        transition: .25s ease;
    }

    .text-answer *:hover {
        color: var(--nord6)!important
    }

    .image-answer {
        background: var(--nord2);
        border: 1px solid var(--nord2);
        border-radius: 4px;
    }

    .image-answer:hover {
        border: 1px solid var(--nord8);
        transition: .25s ease;
    }

    .image-answer *:hover {
        color: var(--nord6)!important
    }

    #answerText {
        background: var(--nord2);
        border: 1px solid var(--nord0);
        color: var(--nord6);
        transform: scale(1);
    }

    .keyboard_button {
        color: var(--nord6);
        background: none;
        margin: auto
    }

    /*images*/
    #_A1 {
        padding: 20px;
        background: none;
        border: none;
    }

    .image-question {
        border: none
    }

    /*||Note Container*/
    #menu_items {
        transition: 167ms right Cubic-bezier(0.55, 0.55, 0, 1);
    }

    .menu {
        background: var(--nord1);
        transition: 167ms right Cubic-bezier(0.55, 0.55, 0, 1);
        border: none;
        position: fixed;
        height: 100%;
        bottom: -12px;
    }

    #notecontainer {
        scrollbar-color: var(--nord0)var(--nord1);
        scrollbar-width: thin;
        transition: scrollbar-color 0.3s ease-out;
    }

    /*Menu Items*/
    #menu_items {
        z-index: 1002 !important;
        padding-right: 0 !important;
        margin-right: 290px
    }

    /*help*/
    #student_help .menu h3, #student_help .menu h2 {
        background: var(--nord1)
    }

    #student_help .menu {
        border-left: none;
        border-left-color: var(--nord1);
    }

    /*writing instructions*/
    #writing_instructions .menu h3 {
        background: none;
    }

    /**/
    #student_resources .menu h3, #student_resources .menu h2 {
        background: none;
        background-image: none
    }

    /*text*/
    .Notebook_Key {
        background-color: var(--nord3);
        border: solid 2px var(--nord1);
    }

    .Notebook_Key strong {
        color: var(--nord13) !important
    }

    div#notecontainer * {
        color: var(--nord5);
        background-color: transparent !important
    }
    /*buttons*/
    .menu a:not(.back-button), .teacherInfo {
        padding-left: 16px;
        margin-bottom: 2px;
        background: var(--nord1);
        color: var(--nord5);
        border-bottom: none;
    }

    .menu a:not(.back-button):hover, .teacherInfo:hover {

        background: var(--nord2);
        color: var(--nord5);
        border-radius: 4px;
    }

    .button, input[type="submit"], input[type="reset"], input[type="button"] {
        background-color: rgba(0, 0, 0, 0);
        background-image: var(--nord1);
        border: none;
        text-shadow: var(--nord0);
    }

    .button:hover {
        background-color: rgba(0, 0, 0, 0);
        background-image: var(--nord1);
        border: none;
    }

    .button, input, optgroup, select, textarea {
        color: var(--nord6);
    }

    .button:hover, input:hover, optgroup:hover, select:hover, textarea:hover {
        color: var(--nord8);
        transition: .1s ease;
    }

    .notebuttons {
        background-color: var(--nord0)
    }

    #printButton, #printButtonIcon {
        background: var(--nord1);
        border: 1px solid var(--nord1);
    }

    #printButton:hover, #printButton:hover {
        transition: .1s ease;
        border: 1px solid var(--nord8)
    }

    #backIcon:hover {
        color: var(--nord8);
    }

    /*||English "Book"/
/*text*/
    div.scrolling-book * {
        color: var(--nord4)!important
    }

    /*||Print Scr*/
    .lightbox_content {
        background: var(--nord0)
    }

    /*buttons*/
    .lightbox_close {
        color: var(--nord6)
    }

    .lightbox_close:hover {
        transition: .1s ease;
        transform: scale(1.1);
        color: var(--nord8)
    }
  /*||Video Player*/
    .plyr--video .plyr__controls {
        background: var(--nord0blur);
        backdrop-filter: blur(30px);
        color: var(--nord6);		
    }
    .plyr__video-wrapper {
        background-color: var(--nordx)
    }

    .plyr__control--overlaid {
        background: none;
        box-shadow: none;
        color: var(--nord5)
    }

    .plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:after {
        border-left-color: var(--nord4)
    }

    .plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded="true"] {
        color: var(--nord8);
        background: none;
        box-shadow: none;
    }

    .plyr__menu__container {
		margin:auto;
        background: var(--nord1blur);
        border-radius: 8px;
        padding: 0;
        bottom: 64px;
        backdrop-filter: blur(30px);
    }

    .plyr__menu__container .plyr__control, .plyr__control .plyr__control--forward {
        color: var(--nord6)!important
    }

    .plyr__menu__container::after {
        display: none
    }

    .plyr__captions .plyr__caption {
        background: none;
        color: var(--nord13);
        font-family: Trebuchet MS;
        text-shadow: 2px 1px var(--nord1);
    }

    .plyr__menu__container [role="menu"] {
        padding: 4px;
    }

    /*||Word Processor*/
    /*page*/
	.page-wrapper > .page{
		background:none
	}
    @media (max-width: 800px){
        .page-wrapper {
        background: none;
        }
    }
    #writingSection {

        padding: 0
    }

    .page {
        border: none;
        box-shadow: none;
        padding: 0;
        max-width: 75em;
        margin: 24px;
        max-height: none;
    }

    .page_wrappe...