netacad dark by us3rn4me

/* ==UserStyle==
@name           dark netacad
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         jas
==/UserStyle== */

@-moz-document domain("contenthub.netacad.com") {

    :root {
        --dark: #1f1d2b;
        --darker: #171621;
        --darker2: #0e0d14;
        --darker3: #100f17;
        --text: #d4d8dc;
        --light: #ffffff4f;
        --hl: #39355c;
        --h2: #7478ba;
        --chap: #272a43;
    }

    body {
        border-color: red !important;
    }
    
    .cui .main-content-wrapper .layout-wrapper, .cui .header,
    .sidebar .main-sidebar__nav {
        background: var(--dark) !important;
        opacity: 100%;
    }
    
    /* chapters */
    .sidebar .navlink.modulelink .navlink_namecontainer-wrapper .navlink_namecontainer,
    .sidebar .navlink.modulelink .navlink_chevronbutton,
    .sidebar .navlink.modulelink .navlink_labelcontainer,
     .block-chunk.sidebar__item span.navlink_namecontainer {
        background: var(--chap) !important;
        
    }
    
    /* sub chapters */
    
     .sidebar .navlink.blocklink:first-child .navlink_namecontainer-wrapper .navlink_namecontainer,
     .sidebar .navlink.blocklink:first-child .navlink_namecontainer-wrapper .navlink_namecontainer,
     .sidebar .navlink.blocklink:first-child .navlink_chevronbutton-wrapper .navlink_chevronbutton,
     .sidebar .navlink.blocklink:first-child .navlink_labelcontainer-wrapper .navlink_labelcontainer {
        background: var(--darker) !important;
     }
    
    /* mini sections */
    .sidebar .navlink.chunklink .navlink_namecontainer-wrapper .navlink_namecontainer,
    .sidebar .navlink.chunklink .navlink_labelcontainer {
        background: var(--darker3) !important;
    }
    
    
    
    
    
     body.cui {
        background: var(--darker) !important;
        
    }
    
    /* middle section - content */
    .chunk-container.chunk {
        border-bottom: 1px solid #e8efff42;
    }
    
    .chunk-container.chunk .current-li,.cui .label--tiny {
        background-color: var(--darker) !important;
        color: var(--text) !important;
        border: none !important;
        border-radius: 5px;
    }
    
    .block-container .inline-command, .block-container li code, .block-container p code, .block-container pre code {
        background-color: var(--darker2) !important;
    }
    
    .block-container h1 {
        background-color: var(--chap) !important;
        font-weight: bold;
        background: linear-gradient(90deg,#37484c00 0,#017cad00);
    }
    
    /* chapter headers */
      
    .sidebar__header, .footer-navigation, .footer-navigation a,
    .cui .card, .cui a.card, .form-controls.buttons button.btn.btn--secondary {
        background-color: var(--chap) !important;
        color: var(--text) !important;
        border: none !important;
    }
    
    .footer-navigation .label.label--tiny {
        display: none;
    }
    
    .footer-navigation {
        border: none;
    }
    
    .cui .label--small, .cui .label--tiny {
        padding: 15px 10px !important;
    }
    
    .cui .main-content-wrapper .layout-wrapper {
        border: none;
    }
    
    /* tables */
    
    th {
        background-color: transparent !important;
    }
    
    
    .cui .table th {
        background-color: var(--hl) !important;
    }
    
    
    .cui .table--bordered, td th {
        border: 1px solid var(--light);
    }
    
    .radio__label, .alert__message, .checkbox__label {
        color: var(--text) !important;
    }
    
    .cui .btn.btn--secondary {
        color: var(--text) !important;
        background-color: var(--dark) !important;
        border: none;
    }
    
    /* active chapter section */
    .sidebar .navlink.chunklink.chunklink-active .navlink_namecontainer-wrapper .navlink_namecontainer,
    .sidebar .navlink.chunklink.chunklink-active .navlink_labelcontainer {
        background-color: var(--hl) !important;
        color: var(--text) !important;
    }
    
    .svg-container.card {
        background-color: white !important;
    }
    
    
    /* header */
    
    .cui, body.cui, .cui .header, .cui .sidebar {
        color: var(--text) !important;
        border: none;
        box-shadow: 0px 0px 15px #0000008f;
    }
    
    h2, .chunk-container.chunk>.container h2 {
        color: var(--h2) !important;
        font-weight: bold;
    }
    
    .cui .btn, .cui button {
        background-color: var(--darker);
        color: var(--text);
    }
    
    .body-gradient-overlay {
        background-image: linear-gradient(-180deg,#f2f2f200 17%,hsla(0, 0%, 95%, 0));
    }
    
   .cui .sidebar li.sidebar__drawer.sidebar__drawer--opened, .sidebar__items,
   .navlink.modulelink, .sidebar .navlink.chunklink, .navlink_labelcontainer-wrapper,
   .cui .radio .radio__input:before, .cui .checkbox .checkbox__input:before {
        background-color: transparent !important;
   }
    
    
    
}