Canvas LMS Material Dark (Beta) Redux by boehs

/* ==UserStyle==
@name           Canvas LMS Material Dark (Beta)
@namespace      USO Archive
@author         David Bradley
@description    `Changes the look of Canvas LMS to a dark theme that follows the Material Design guidelines for dark themes.Add your school's Canvas URL to the style to activate it.`
@version        20200422.2.35
@license        NO-REDISTRIBUTION
@preprocessor   uso
@advanced color color0 "Choose a main color:" #f19590
==/UserStyle== */
@-moz-document regexp("https:\/\/(?!(www|canvadocs)\.).+\.instructure\.com.*") {
:root {
    /* Text */
    --custom-white: #ffffff;  /* Extra High Emps */
    --custom-text-emp-high-transparent: rgba(255,255,255,0.87);  /* High Emps */
    --custom-text-emp-med-transparent: rgba(255,255,255,0.60);  /* Med Emps */
	/* DPs */
    --custom-00-dp: #121212;
    --custom-01-dp: #1e1e1e;
    --custom-01-dp-transparent: rgba(255,255,255,0.05);
    --custom-02-dp: #222222;
    --custom-02-dp-transparent: rgba(255,255,255,0.07);
    --custom-04-dp: #272727;
    --custom-04-dp-transparent: rgba(255,255,255,0.09);
    --custom-08-dp: #2e2e2e;
    --custom-08-dp-transparent: rgba(255,255,255,0.12);
    --custom-24-dp: #383838;
    /* Buttons */
    --custom-button-container: rgba(255,255,255,0);
    --custom-button-container-hover: rgba(255,255,255,0.04);
    --custom-button-container-focus: rgba(255,255,255,0.12);
    --custom-botton-border: rgba(255,255,255,0.29);
    --custom-botton-border-focus: rgba(255,255,255,1);
    --custom-primary: /*[[color0]]*/;
    --custom-primary-container-faded-transparent: rgba(241, 146, 142, 0.24);
    
    /* Nav */
    --ic-brand-global-nav-bgd: var(--custom-04-dp); /* Nav Background */
    --ic-brand-global-nav-logo-bgd: var(--custom-08-dp-transparent); /* Nav Logo Background */
    --nav-background: var(--custom-02-dp); /* Nav Popout Background */
    /* Nav Icons */
    --ic-brand-global-nav-ic-icon-svg-fill: var(--custom-text-emp-med-transparent);
    --ic-brand-global-nav-avatar-border: var(--custom-text-emp-med-transparent);
    
    /* Icons */
    --eHiXd-iconColor: var(--custom-text-emp-med-transparent);
    --eHiXd-iconHoverColor: var(--custom-text-emp-high-transparent);
    --eHiXd-iconActiveColor: var(--custom-white);
    
    --ic-brand-font-color-dark: var(--custom-text-emp-high-transparent); /* A bunch of section titles */
 	--ic-brand-primary: var(--custom-primary);
    --ic-brand-global-nav-menu-item__text-color: var(--custom-text-emp-med-transparent);
    --cjUyb-secondaryColor: var(--custom-text-emp-med-transparent);
    --dxCCp-inlineColor: var(--custom-text-emp-med-transparent);
    --dxCCp-color: var(--custom-text-emp-med-transparent);
    --ic-brand-font-color-dark-lightened-15: var(--custom-text-emp-med-transparent);
    --ic-brand-font-color-dark-lightened-30: var(--custom-text-emp-med-transparent);
    
    /* Links */
    --eHiXd-linkColor: var(--custom-primary);
    --eHiXd-linkHoverColor: var(--custom-primary);
    --ic-link-color: var(--custom-primary);
    --ic-link-color-darkened-10: var(--custom-primary);
    --ic-brand-button--primary-bgd: var(--custom-primary);
    
    /* Error */
    --custom-error-color: #000000;
    --custom-error-surface: #cf6679;
    --custom-aleart-color: #000000;
    --custom-aleart-surface: #cf6679;
}

/* Nav Selected */
.ic-app-header__menu-list-item.ic-app-header__menu-list-item--active .ic-app-header__menu-list-link {
    background: var(--custom-primary-container-faded-transparent);
}
.ic-app-header__menu-list-item.ic-app-header__menu-list-item--active .ic-avatar {
    border-color: var(--ic-brand-global-nav-ic-icon-svg-fill--active)
}
/* Nav Tooltips */
.menu-item__text {
    background-color: var(--custom-24-dp);
}
.menu-item__text::after {
    border-right-color: var(--custom-24-dp);
}
/* Nav */
.ic-app-header__menu-list-link {
    border: 1px solid transparent;
}
.ic-app-header__menu-list-item.ic-app-header__menu-list-item--active .ic-app-header__menu-list-link:focus {
    border: 1px solid var(--custom-primary);
    box-shadow: none;
}
.global-nav-custom-tray, .fLzZc_bGBk {
	background: var(--nav-background);
}

/* Subnav */
.list-view>ul>li>a, .list-view>nav>ul>li>a {
    border: 1px solid rgba(0,0,0,0);
}
.list-view>ul>li>a:hover, .list-view>nav>ul>li>a:hover {
    background-color: var(--custom-button-container-hover);
    border: 1px solid var(--custom-botton-border);
}
.list-view>ul>li>a:focus, .list-view>nav>ul>li>a:focus {
    background-color: var(--custom-button-container-focus);
    border: 1px solid var(--custom-botton-border-focus);
    outline: none; /* Remove Browser Icon */
}
.list-view a.active, .list-view a.active:hover, .list-view a.active:focus {
    color: var(--custom-primary);
    background-color: var(--custom-primary-container-faded-transparent);
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 8px 0 8px 6px;
}

/* Remove background */
.item-group-container {
	background: none;
}

/* Page background */
body, .ic-Dashboard-header__layout, #breadcrumbs, .header-bar, .module-sequence-footer .module-sequence-footer-content, #questions.assessing, .quiz-submission, .question_editing, table.summary td, table.summary tbody th {
    background: var(--custom-00-dp);
}

/* Card background */
.ic-DashboardCard, .ic-DashboardCard__header_content, .ic-notification__content, div.mce-edit-area, .item-group-condensed .ig-row, .context_module_item.context_module_item_hover, .ui-widget-content, .discussion-entries .entry, .discussion_entry {
	background: var(--custom-01-dp);
}

.ui-dialog .ui-dialog-titlebar.ui-widget-header, .ui-dialog .ui-datepicker .ui-widget-header.ui-datepicker-header, .ui-datepicker .ui-dialog .ui-widget-header.ui-datepicker-header {
	background: var(--custom-04-dp);
}

.ui-widget-overlay {
    background: rgba(0,0,0,0.75);
}

.question, code, pre {
	background: var(--custom-01-dp-transparent);
}

.react-rubric th.rubric-title, .toolbarView .headerBar {
	background: transparent;
}

/* Table Head */
.question .header, #questions.assessment_results .question .header, .rubric_container .rubric_title, .rubric_container thead th, .item-group-condensed .ig-header, .react-rubric thead, .table>thead, .table-bordered th, .table-bordered td, .toolbarView {
	background: var(--custom-02-dp-transparent);
}

/* Line color */
.ic-Dashboard-header__layout, #right-side h2, #right-side .h2, .ic-app-footer, .ic-app-nav-toggle-and-crumbs, hr, .recent-activity-header, .course_details td, .recent_activity>li, .stream-details tr, .ic-item-row, .ic-Table th, #grades_summary th.title, .ic-Table td, #grades_summary tr.final_grade, .module-sequence-footer .module-sequence-footer-content, #quiz_show ul#quiz_student_details, .quiz-header, .question, .question .header, .question.multiple_choice_question .answer, .question.multiple_answers_question .answer, .question.matching_question .answer, .question.true_false_question .answer, .mce-edit-area, .question textarea, code, pre, table.summary td, table.summary tbody th, #right-side>div>div, #assignment_show .student-assignment-overview, .item-group-condensed .ig-header, .ig-list .ig-row, .header-bar, .react-rubric .rating-tier, .rating-all-footer, .ic-unread-badge, .table-bordered, .table-bordered th, .table-bordered td, .ui-dialog .ui-dialog-titlebar.ui-widget-header, .ui-dialog .ui-datepicker .ui-widget-header.ui-datepicker-header, .ui-datepicker .ui-dialog .ui-widget-header.ui-datepicker-header, #token_details_dialog table td, #token_details_dialog table th, table.summary thead th, table.summary caption, .ui-datepicker .ui-datepicker-time, .ui-dialog .ui-dialog-buttonpane, .ui-dialog .ui-datepicker .ui-datepicker-time, .ui-datepicker .ui-dialog .ui-datepicker-time, .toolbarView .headerBar, .topic .entry-content, .discussion_entry>.discussion-entry-reply-area, .pill, .discussion-entries .entry, .entry>.bottom-reply-with-box .discussion-entry-reply-area, .discussion-read-state {
    border-color: var(--custom-08-dp-transparent) !important;
}

/* Table Borders */
.rubric_container td, .rubric_container th, .rubric_container .rubric_title {
	border-color: var(--custom-08-dp) !important;
}


/* Remove some weird shadow */
#right-side .events_list .event-details:after, #right-side .events_list .todo-details:after, #right-side .to-do-list .event-details:after, #right-side .to-do-list .todo-details:after {
    background: none;
}

/* Card Loading */
.ic-DashboardCard__placeholder-svg .ic-DashboardCard__placeholder-animates>* {
    fill: var(--custom-08-dp-transparent);
}

/* Card Button Fix */
.ic-DashboardCard__box {
    display: flex;
    flex-wrap: wrap;
}
.ic-DashboardCard__action-container {
    margin-top: 0;
    height: auto;
}

/* Card Buttons */
.ic-DashboardCard__action {
    border-radius: 0.25em;
}

/* Button Border Padding */
.ic-DashboardCard__action, .ic-app-header__logomark, .ic-app-header__menu-list-link, .list-view a.active, .list-view a.active:hover, .list-view a.active:focus {
    border: 1px solid transparent;
}
/* Button */
.btn, .Button, .ui-button, .eHiXd_ddES, a.eHiXd_ddES, button.eHiXd_ddES, button.eHiXd_ddES[type="button"], button.eHiXd_ddES[type="reset"], button.eHiXd_ddES[type="submit"], .discussion-reply-box {
    color: var(--custom-text-emp-med-transparent);
    background-color: var(--custom-button-container);
    border: 1px solid var(--custom-botton-border);
    transition: none;
    cursor: pointer;
}
/* Button Hover */
.eHiXd_dnnz:hover, a.eHiXd_dnnz:hover, button.eHiXd_dnnz:hover, button.eHiXd_dnnz[type="button"]:hover, button.eHiXd_dnnz[type="reset"]:hover, button.eHiXd_dnnz[type="submit"]:hover, .ic-DashboardCard__action:hover, .btn:hover, .Button:hover, .ui-button:hover, .ui-button.ui-state-hover, .btn:hover, .Button:hover, .ui-button:hover, .ui-button.ui-state-hover, a.eHiXd_ddES:hover, button.eHiXd_ddES:hover, button.eHiXd_ddES[type="button"]:hover, button.eHiXd_ddES[type="reset"]:hover, button.eHiXd_ddES[type="submit"]:hover, .ic-app-header__menu-list-link...