Gradescope Dark User Accent WIP by zadencodes

/* ==UserStyle==
@name           Gradescope Dark User Accent WIP
@namespace      github.com/openstyles/stylus
@version        2.2.1
@description    Makes Gradescope Prettier
@author         Zaden
@var            color accent "Accent Color" #092b29
@var            color backgroundColor "Background Color" #151515
@var            checkbox customLogo 'Custom Logo Color' 1
@var            color logoColor "Logo Color" #00b380

@preprocessor   stylus
==/UserStyle== */
/* My favorite color presets:
Light aqua blue: #289588
*/
@-moz-document url-prefix("https://www.gradescope.com/"), url-prefix("http://www.gradescope.com/") {
    
    

    /*@var            range logoColor "Logo Color" [0,0,359,'deg']*/
    .sidebar--menuItemIcon::after {
        border-color: #e7e7e700;
    }
    
    if customLogo {
        .svgLogo > a > img, .sidebar--collapsedHomeIcon > a > svg, .logo > a > img {
        filter: brightness(luminosity(logoColor) * 10) hue-rotate(hue(logoColor) + hue(#00535b)) grayscale(100% - saturation(logoColor));
        opacity: alpha(logoColor);
        }
    }
    else {
        .svgLogo > a > img, .sidebar--collapsedHomeIcon > a > svg, .logo > a > img {
            filter: brightness(luminosity(accent) * 70) hue-rotate(hue(accent) + hue(#00535b)) grayscale(100% - saturation(accent));
            opacity: alpha(accent);
        }
    }

    .l-mobileTopNav {
        border-bottom: 1px solid accent;
        background: accent;
    }

    .l-mobileTopNav {
        box-shadow: 4px -2px 16px accent;
    }

    html,
    body {
        background-color: backgroundColor;
        --text-color: var(--textColor) !important;
    }
    
    ::selection {
  /* Change highlight background color to black */
  background: lighten(accent,15);
  /* Change highlight text color to red */
  color: black;
}

    :root {
        --textColor: lighten(accent,25);
        
        --tdl-color-on-inverse-on-surface: #cfcfcf;
        --tdl-color-on-color: #cfcfcf;
        
        
        --tdl-system-gray-100: #3a3a3a;
        --tdl-system-gray-900: var(--textColor);
        --tdl-system-gray-500: lighten(accent,15);
        --tdl-system-gray-700: var(--text-color);
        --tdl-system-gray-200: #0a1a1900;
        --tdl-system-gray-400: darken(accent,15);
        --tdl-brand-primary-800: lighten(accent,20);
        --tdl-brand-secondary-400: lighten(accent,17);
        --tdl-system-gray-0: #1a1a1a;
        --tdl-system-gray-50: shade(accent,15)
        --tdl-brand-secondary-75: tint(accent,2); /* sidebar button */
        --tdl-color-state-hover-surface: shade(accent,30); /* sidebar button hover shade */
        --tdl-system-light-blue-400: lighten(accent,35);
        --tdl-color-state-hover-primary-container: accent;
        --tdl-color-state-hover-primary: darken(accent,2);
        --tdl-system-red-50: shade(backgroundColor,15);
        
        --tdl-system-teal-400: lighten(accent,13);
        
        --tdl-system-indigo-400: shade(accent,50);
        /*--tdl-color-state-hover-secondary-container: #ff0017;*/
       
    }
    
    /*.tiiBtn-inverse {
    border-color: var(--tdl-color-inverse-surface);
    background-color: var(--tdl-color-inverse-surface);
    color: #cfcfcf;
    }*/
    
    .submissionStatus {
    color: tint(lighten(accent,30),10) !important;
    }
    
    .table {
        background: transparent;
    }
    .form--textInput {
        background-color: accent;
        border-bottom: 2px solid accent;
    }

    .l-actionBar,
    .sidebar--userProfile {
        background-color: shade(accent,50);
    }


    .l-sidebar {
        background-color: accent;
    }

    .l-rightSidebar-outline {
        background-color: accent;
    }

    .selectPages--pages {
        border-left: 2px solid #444;
        background-color: #151515;
    }

    .selectPagesHeading {
        border-bottom: 2px solid #444;
    }

    .slider--input-rtl {
        background-color: #15151500;
    }

    .selectPagesQuestionOutline--questions {
        border: 2px solid lighten(accent,10);
        background-color: accent;
    }

    .selectPagesQuestionOutline--item-selected,
    .selectPagesQuestionOutline--item:focus,
    .selectPagesQuestionOutline--item:hover {
        border-left-color: darken(accent,10);
        background-color: desaturate(accent,5) !important;
        
        /* text color when focused or hovered */
        color: lighten(accent,35);
    }
    
    
    
    .selectPagesQuestionOutline--item-selected, .selectPagesQuestionOutline--item-selected:focus, .selectPagesQuestionOutline--item-selected:hover {
    border-left-color: darken(accent,30);
    background-color: darken(accent,10) !important;
    }
    

    

    .selectPagesQuestionOutline--item {
        border-left: 2px solid accent;
    }

    .keyboardShortcut--icon {
        background-color: accent;
        box-shadow: 0 1px #051514;
    }

    .selectPagesQuestionOutline--item:hover {
        background-color: accent;
    }

    .selectPagesQuestionOutline--itemRow {
        border-bottom: 1px solid lighten(accent,15);
    }

    .selectPagesQuestionOutline--item {
        color: var(--text-color);
    }

    .courseBox {
        background-color: accent !important;
    }
    .courseBox:focus,
    .courseBox:hover:not(.disabled) {
        background-color: lighten(accent,7) !important;
    }

    .modal {
        background-color: backgroundColor;
    }

    .modal--footer-closeButton:hover {
        background-color: darken(accent,2);
        color: lighten(accent,10);
    }
    
    .modal-subtitle-text {
        color: var(--textColor);
    }

    .modal--footer-closeButton {
        background-color: accent;
        color: lighten(accent,20);
    }

    .msg-info {
        border: 1px solid accent;
        background: accent;
        color: var(--text-color);
    }

    .modal--heading {
        color: var(--text-color)
    }

    .modal--subheading {
        background-color: accent;
        color: #fff;
    }

    .form--radioOptions {
        color: #219792;
    }
    
    .js-dropzoneMessage, .dz-clickable {
        color: #219792;
    }
    
    .dropzonePreview--progressContainer {
    background-color: #383838;
    }
    
    .dropzonePreview--fileList {
    color: #219792;
    border-top: 3px solid #e1e5eb00;
    border-bottom: 3px solid #e1e5eb00;
}

    .courseHeader--title {
        border-right: 1px solid #e1e5eb00;
        color: var(--text-color, #219792);
    }

    .courseDashboard--panelHeading {
        border-bottom: 2px solid accent;
        color: var(--text-color, #219792);
    }
    
    .modal-body, .modal--body {
        color: #219792;
    }

    .progressBar--background {
        background-color: #2c2c2c;
    }

    .table > tbody > tr {
        height: 54px;
        border-bottom: 1px solid accent;
        border-top: 1px solid accent !important;
    }

    .table > thead > tr {
        height: 40px;
        border-bottom: 2px solid accent;
    }

    .table--primaryLink > a,
    .table--secondaryLink > a,
    .table--primaryLink button,
    .table--secondaryLink button {
        color: var(--text-color);
    }

    .testCase--header {
        background-color: accent;
    }

    .testCase {
        border: 1px solid #219792;
    }

    .submissionOutline--sectionHeading {
        color: lighten(accent,53);
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
    }
    
    .onlineAssignment--footer {
    border-top: 1px solid #219792;
    background-color: accent;
}

    .form--textArea {
        background: accent;
        border-color: #219792
    }
    
    .form--textArea:hover {
        border-color: lighten(accent,20);
    }
    
    .statusBar {
        background: accent;
        border-color: accent
    }
    
    .testCase--body {
        border-top: 1px solid #219792;
    }

    /* buttons */
    .btnv7-secondary, .btnv7-primary, .actionBar--action-next {
    padding: 8px 16px;
    border-radius: 2px;
    border-color: #27b4ac;
    background-color: #135753;
    color: white;
}

.btnv7-secondary:hover, .btnv7-primary:hover, .actionBar--action-next:hover:not(.disabled) {
    border-color: lighten(accent,20);
    background-color: lighten(accent,20);
    color: white;
}

.btnv7-primary.disabled, .btnv7-primary:disabled {
    border-color: #1e958e;
    background-color: #1e8d86;
}
    
    
    .btnGroup-segmented .btnGroup--btn:not(.btnGroup--btn-is-selected) {
        border-color: #1b807c;
        background-color: #3c3c3c;
        color: #1b807c;
    }

    .fileViewer {
        border: 1px solid lighten(accent,20);
        background-color: accent;
    }

    .fileViewerBody {
        border-top: 1px solid lighten(accent,20);
    }

    .hljs {
        background: #151515;
        color: #219792
    }

    .textFileRow--lineNumber {
        border-right: 1px solid #219792;
    }

    .submissionTimeChart-warning .progressBar--fill {
        background-color: #d29b07;
    }

    .submissionStatus-warning > .submissionStatus--bullet {
        background-color: #d29b07;
    }

    .progressBar--caption {
        color: var(--text-color);
    }

    .table thead th.sorting:hover,
    .table thead th.sorting:focus,
    .table thead th.sorting:hover::before,
    .table thead th.sorting:focus::before,
    .table thead th.sorting_desc,
    .table thead th.sorting_asc {
        color: var(--text-color);
    }

    .submissionStatus {
        color: #85989f;
    }

    .onlineAssignment {
        background-color: accent;
    }

    .onlineAssignment-submit,
    .onlineAssignment-view {
        border: 1px solid accent;
    }

    .fileViewerHeader--downloadLink {
        color: lighten(accent,20);
    }

    .fileUpload .fa-file-text-o,
    .fileUpload .fa-file-image-o,
    .fileUpload--prompt {
        color: var(--textColor);
    }

    .btn-fileUpload {
        border-radius: 2px;
        padding: 10px 20px;
        border-color: accent;
        background-color: accent;
      ...