SAE Student Portal Dark Theme / Modern Design by p0isonouspurple

/* ==UserStyle==
@name           SAE Student Portal Dark Theme / Modern Design
@namespace      student.sae.edu
@version        1.2.1
@description    Rest your eyes here with the calming dark blue tones combined with an clean and modern design :)
@author         PoisonousPurple
==/UserStyle== */


@-moz-document domain("student.sae.edu") {
    :root {
    --dtheme-color-primary: #efefef;
    --dtheme-bg-primary: #0d1117;
    --dtheme-bg-secondary: #151a21;
    --dtheme-color-sae-orange: #ff6900;
}

body,
.content {
    background: var(--dtheme-bg-primary);
}
    
    
    /* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--dtheme-bg-primary);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #151a21a1;
    border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--dtheme-bg-secondary);
}

#banner {
    background: var(--dtheme-bg-secondary);
}

#content, #iframes {
    background:var(--dtheme-bg-primary);
}

#content .wrapper {
    background:url(https://otto-spaude.me/canvas-content/shadow.png) repeat-y center;
}

.btn_main_menu_center_active,
.btn_main_menu_right_active,
.btn_main_menu_left_active,
.btn_main_menu_center_over,
.btn_main_menu_right_over,
.btn_main_menu_left_over {
    background: url(https://otto-spaude.me/canvas-content/nav_button_bg.png) repeat-x center;
}

.btn_main_menu_center_active {
    color: var(--dtheme-color-sae-orange);
}

.btn_main_menu_center_over {
    color: var(--dtheme-color-sae-orange);
}

.btn_main_menu_center {
    color: var(--dtheme-color-primary);
}



#main_menu font {
    line-height: 3.2;
}

#banner .btn_red {
    background: var(--dtheme-bg-secondary);
    padding: 8px !important;
    margin: 9.8px 4px 0px;
    text-shadow: none;
    box-shadow: none;
    font-size: 1rem;
    border: 1px #fd4239 solid;
    transition: .2s;
}

#banner .btn_red:hover {
    background: #fd4239;
}

#banner .logo {
    background: url(https://otto-spaude.me/canvas-content/student_portal.svg) no-repeat;
    height:34px;
    top:7px;
}

#main_menu img {
    display:none;
}

.section_banner {
    background: var(--dtheme-bg-secondary);
}

.section_menu a:link,
.section_menu a:visited,
.section_menu a:active {
    background: var(--dtheme-bg-primary);
    color: var(--dtheme-color-primary);
    border: 1px var(--dtheme-bg-primary) solid;
    transition: .2s;
}

.section_menu .img_left,
.section_menu .img_right,
.section_menu .img_spacer {
    background: transparent;
}

.section_menu a:hover {
    border: 1px var(--dtheme-color-primary) solid;
}

.active_section_menu,
.active {
    color: var(--dtheme-color-primary) !important;
    background: var(--dtheme-color-sae-orange) !important;
    border: 1px var(--dtheme-color-sae-orange) solid !important;
}

.left_areas,
.right_areas {
    background: var(--dtheme-bg-primary);
    border-radius: 0.25rem;
}

.area {
    border: none;
    box-shadow: none;
    padding: 10px;
}

.area .headline .text,
#cover_content .form_title {
    color: var(--dtheme-color-sae-orange);
}

.request_target {
    background: var(--dtheme-bg-secondary);
}


.boxed .body,
.boxed .head,
.boxed .foot {
    background: var(--dtheme-bg-primary);
}

.area .content {
    color: var(--dtheme-color-primary);
}

.area .content .boxed {
    border: none;
}

.footer {
    background-color: var(--dtheme-bg-secondary);    
    background-image: url(https://otto-spaude.me/canvas-content/sae_skyline_h50.png);
    background-repeat:no-repeat;
    background-position:center top;
}

.footer .content {
    background: var(--dtheme-color-sae-orange);
}

.footer .content * {
    color:var(--dtheme-color-primary);
}

.simple_info {
    padding:10px;
    border-radius: .25rem;
}

.area .content table, #area_curriculum .headline .visible.until, #area_financial_information .balance {
    color:var(--dtheme-color-primary);
}

#area_curriculum .title {
    color:var(--dtheme-color-primary);
}

#area_curriculum .exercises, #area_curriculum_overview .exercises {
    color:var(--dtheme-color-primary)!important;
    text-shadow:none;
}

#area_curriculum .exercise {
    background:var(--dtheme-bg-secondary);
}

#area_curriculum .vacation, #area_curriculum_overview .vacation {
    background: #ff6900af;
    opacity: 1;
}

.tree .dot_line {
    background:var(--dtheme-color-primary);
    height:2px;
}

.area .content table {
    padding:10px;
}

#study_page .drop_down {
    background:var(--dtheme-bg-primary);
    border:none;
    padding:8px;
    border-radius: .25rem;
    
}

#study_page .drop_down.open {
    box-shadow: 0px 0px 8px var(--dtheme-bg-secondary);
    border:1px var(--dtheme-color-primary) solid;
}

#book_student{
    width: 100%!important;
    margin: 0;
}

.x-toolbar {
    background:var(--dtheme-bg-secondary);
    border:none!important;
}

ul.x-tab-strip-top {
    background:var(--dtheme-bg-secondary);
}

#clock {
    color:var(--dtheme-color-sae-orange);
}

#panel-title {
    color:var(--dtheme-color-primary);
}

.x-tab-strip-top .x-tab-right, .x-tab-strip-top .x-tab-left, .x-tab-strip-top .x-tab-strip-inner {
    background:var(--dtheme-bg-primary);
    padding:2px;
}

.x-tab-strip-active .x-tab-right, .x-tab-strip-active .x-tab-left, .x-tab-strip-active .x-tab-strip-inner {
    background:var(--dtheme-color-sae-orange);
}

.x-tab-strip li:not(.x-tab-strip-active) {
    border:1px var(--dtheme-bg-primary) solid;
}

.x-tab-strip-over {
    border-color:var(--dtheme-color-primary)!important;
}

.x-tab-strip-active {
    border:1px var(--dtheme-color-sae-orange) solid!important;
}

.x-tab-strip span, .x-toolbar-cell {
    color:var(--dtheme-color-primary)!important
}

.x-tab-panel-body {
    background:var(--dtheme-bg-primary);
}

.x-panel-body {
    border:none;
    background:var(--dtheme-bg-primary)!important;
    color:var(--dtheme-color-primary);
}

ul.x-tab-strip {
    width:100%;
}

.x-tab-strip {
    border:none;
}

.x-form {
    background:var(--dtheme-bg-secondary)!important;
    border-radius:.25rem;
}

.x-panel-bwrap {
    border-radius:.25rem;
}
    
.x-form-text, textarea.x-form-field {
    background:var(--dtheme-bg-secondary)!important;
    border: none;
    padding: 5px;
    border-radius: .25rem;
}
    
.x-btn-tl, .x-btn-tr, .x-btn-tc, .x-btn-ml, .x-btn-mr, .x-btn-mc, .x-btn-bl, .x-btn-br, .x-btn-bc {
    background-image: none;
    background-color: var(--dtheme-bg-secondary);
}

.x-btn button {
    color: var(--dtheme-color-primary);
}
    
.x-superboxselect-input input {
    background:var(--dtheme-bg-secondary)!important;
}
    
    .x-combo-list-inner {
        background: var(--dtheme-bg-secondary);
        color: var(--dtheme-color-primary);
    }
    
    
    .x-combo-list .x-combo-selected {
        background: var(--dtheme-bg-secondary);
        color: var(--dtheme-color-sae-orange);
        border: none;
    }
    
    .x-combo-list-item, .x-combo-list .x-combo-selected {
        border: none!important;
        padding: 5px;
    }
    

#ext-comp-1056, #ext-comp-1081, #ext-comp-1030, #ext-comp-1106, #ext-comp-1010 {
    background-image: url(https://otto-spaude.me/canvas-content/slot_map_week_bg_H.png)!important;
    background-size:cover;
}

.dv-box {
    border:1px solid var(--dtheme-bg-secondary);
}

.dv-box[style*="background-color: rgb(225, 225, 225)"] {
    background:#2d3541!important;
}

.dv-box[style*="background-color: rgb(200, 255, 200)"] {
    background:#0d1117!important;
}

#area_curriculum .subjects .dark[style*="background-color: #F9F9F9"], #area_curriculum_overview .subjects .dark[style*="background-color: #FFFFFF"], #area_curriculum .exercises[style*="background-color: #F9F9F9"], #area_curriculum_overview .exercises[style*="background-color: #F9F9F9"], #area_curriculum_overview .subjects .dark[style*="background-color: #F9F9F9"] {
    background-color:var(--dtheme-bg-secondary)!important;
    text-shadow:none;
    color:var(--dtheme-color-secondary)!important;
    border:none;
    }
    #area_subject_details > div.content > table.simple_table.details > tbody > tr {
        background-color:var(--dtheme-color-secondary)!important;
    }
    
    #area_subject_details .location_name {
        display:table-cell;
    }
    #cover_content .head, #cover_content .body, #cover_content .foot {
        background:var(--dtheme-bg-primary);
        border:none!important;
    }
    #cover_content .head {
        padding:10px;
    }
    #cover_content, #area_curriculum_overview .content {
        border:none!important;
    }
    #area_curriculum .bgr_a, #area_curriculum_overview .bgr_a, #area_curriculum_overview .row.day, #cms_content.fullscreen, #area_curriculum_overview.fullscreen {
        background:var(--dtheme-bg-primary)!important;
    }
    #area_curriculum .bgr_b, #area_curriculum_overview .bgr_b, #area_curriculum_overview .course.code {
        background:var(--dtheme-bg-primary)!important;
    }
    #area_curriculum .day.lecture, #area_curriculum_overview .day.lecture {
        color:var(--dtheme-color-primary)!important;
    }
    #cover {
        background:var(--dtheme-bg-secondary)!important;
        opacity:0.7;
    }
    #area_subject_details > div.content > span {
        letter-spacing:initial!important;
        color:var(--dtheme-color-sae-orange)!important;
    }
    .area a:link, .area a:visited, .area a:hover, .area a:active {
        color:var(--dtheme-color-sae-orange)!important;
    }
    #area_curriculum .bar.today.top, #area_curriculum .bar.today.bottom, #area_curriculum_overview .bar.today.top, #area_curriculum_ove...