ABTech Moodle Styles (v4) by jonathansross

/* ==UserStyle==
@name         ABTech Moodle Styles
@version      20230821.02.05
@namespace    userstyles.world/user/jonathansross
@description  Styles for branding for ABTech Moodle.
@author       jonathansross
@license      No License
==/UserStyle== */

@-moz-document domain("moodle.abtech.edu") {
/* 
To use: 
Click on this text, press Ctrl+A to select all, and then Ctrl+C to copy.
In your browser, install Stylus extension for Chrome, Edge, or Firefox. Amino Editor is another option. 
Once activated, go to moodle.abtech.edu.
Click on the extension panel (top right) and choose “Write style for:” moodle.abtech.edu.
In the code window, paste the CSS code with Ctrl+V. 
Save the styles and activate!
Note, you can turn on/off the styles at any time in the extension panel. 
*/
/* VARIABLES */
:root {
    --navbar-height: 60px !important;

    --abtech-gold1: #FECA49;
    --abtech-gold2: #FFC025;
    --abtech-blue1: #E2F8FD;
    --abtech-maroon1: #880D28;
    --abtech-maroon2: #6C0820;
    --abtech-maroon3: #53051A;
    --edit-bg: #ff000030;
    --edit: #ff0000;
    --link: #177fdb;
    --link-hover: #ac2323;
    --section-head-bg: #dae8f7;
    --section-0-bg: #f4f4f4;
    --highlight: #ff9d00;
    --success: #25a325;
    --badge-light: #ffe4a2;
}
/* GLOBAL */
body {
    font-weight: 400;
}
a {
    color: var(--link) !important;
    text-decoration: underline !important;
    background-color: transparent;
    transition: .2s ease;
}
a:hover {
    color: var(--link-hover) !important;
    text-decoration: none !important;
}
.activity-description ul {
    padding-left: 2.5rem;
}

/* LOGIN */
#page-login-index #region-main .login-wrapper {
    justify-content: center;
    background: maroon url(https://abtech.edu/sites/default/files/styles/hero_xl/public/2020-07/hero-autumn-campus.jpg.webp) center center no-repeat;
    background-size: cover;
}
#page-login-index #region-main .login-wrapper .login-container {
    height: auto !important;
    max-width: 900px;
    background-color: #ffffffe3 !important;
}
/* CLEAR PAD/MAR */
#page-header h2 {
    margin-left: 0 !important;
}
#page-header .page-context-header {
    padding-left: 0 !important;
}
.section .label .contentwithoutlink,
.section .label .activityinstance {
    padding-right: 0px;
}
/* TOPBAR */
nav.navbar.fixed-top {
    background-color: var(--abtech-maroon1) !important;
    border-color: white;
    box-shadow: 0 0 20px #00000080;
}
nav.navbar.fixed-top .logo {
    transition: .2s ease;
}
nav.navbar.fixed-top .logo:hover {
    opacity: .7;
}
.primary-navigation .navigation .nav-item a.nav-link {
    border-bottom-color: transparent;
    background-color: var(--maroon-dark);
    color: white !important;
    padding: .75rem .5rem;
    margin-right: .5rem;
    text-decoration: none !important;
}
.primary-navigation .navigation .more-nav.navbar-nav .nav-item a.nav-link:hover,
.primary-navigation .navigation .more-nav.navbar-nav .nav-item a.nav-link:focus {
    background-color: var(--abtech-maroon2);
    color: #fff !important;
}
.primary-navigation .navigation .more-nav.navbar-nav .nav-item .nav-link.active {
    border-bottom-color: transparent !important;
    background-color: white;
    color: var(--abtech-maroon1) !important;
}
.primary-navigation .navigation .more-nav.navbar-nav .nav-item a.nav-link {
    color: #fff;
    font-weight: 500;
    height: calc(var(--navbar-height) - 60px);
    background-color: transparent;
}
.dropdown-item:active,
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:focus-within {
    outline: 0;
    background-color: #00000021;
}
#usernavigation.navbar-nav .popover-region .nav-link,
#usernavigation.navbar-nav .usermenu-container .dropdown > a.btn.dropdown-toggle,
#usernavigation.navbar-nav .usermenu-container .login > a {
    color: #ffffff !important;
    text-decoration: none !important;
}
#usernavigation.navbar-nav .popover-region .nav-link:hover,
#usernavigation.navbar-nav .popover-region .nav-link:focus,
#usernavigation.navbar-nav .usermenu-container .dropdown > a.btn.dropdown-toggle:hover {
    color: var(--abtech-gold1) !important;
}
#usernavigation.navbar-nav .usermenu-container .dropdown > a.btn.dropdown-toggle:hover img {
    opacity: .8;
}
.popover-region-toggle::before,
.popover-region-toggle::after {
    bottom: -12px;
}
/* DRAWERS */
.drawer-toggles .drawer-toggler .btn {
    padding: 5px 8px !important;
}
.drawer-left,
.drawer-right {
    background-color: #939eb4;
}
.drawercontent {
    height: calc(100% - 40px);
}

@media (min-width: 992px) {
    #page.drawers.show-drawer-left {
        margin-left: 295px;
        margin-right: 0;
        padding-left: 1rem;
    }
}
@media (min-width: 992px) {
    #page-mod-assign-grading #page.drawers {
        padding-left: 0rem !important;
        padding-right: 0rem !important;
    }
}
.drawer.drawer-left {
    width: 285px;
    max-width: 285px;
    left: calc(-285px + -10px);
    visibility: hidden;
}
.drawer-toggles .drawer-toggler .btn {
    padding: 15px;
    background-color: var(--abtech-maroon1);
    color: #ffffff;
}
.drawerheader {
    padding: 0;
    height: 40px;
    background: var(--abtech-maroon1);
    display: flex;
    align-items: center;
}
.drawer-left .drawerheader button.btn.drawertoggle,
.drawer-right .drawerheader button.btn.drawertoggle {
    color: #ffffff;
}
/* COURSE CARDS */
.dashboard-card-deck .card.dashboard-card .course-info-container a.coursename {
    color: inherit;
    font-weight: 600;
    font-size: 21px;
    line-height: 1.2rem;
}
.dashboard-card-deck .card.dashboard-card .course-info-container a.coursename:hover {
    color: var(--link-hover);
    text-decoration: none !important;
}
/* BUTTONS */
.dashboard-card-deck .card.dashboard-card .dashboard-card-footer .dropdown button.btn.btn-link.btn-icon {
    background-color: var(--edit-bg) !important;
}
.block .block-cards span.categoryname,
.block .block-cards .btn-link {
    color: var(--edit) !important;
}
.btn.btn-secondary:not(.btn-sm) {
    color: #FFFFFF !important;
    background-color: dimgrey !important;
    border-color: dimgrey !important;
}
/* EDITING */
.tag-info,
.badge-info {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0);
    color: red;
    font-style: italic;
    font-size: 85%;
    padding: 0;
    margin-left: 0px;
}
.section .activity .commands .btn.btn-icon {
    height: 28px !important;
    width: 28px !important;
}
.activity-actions .actions .btn.btn-icon,
.message-app .btn.btn-link.btn-icon,
.action-menu .btn.btn-icon {
    background-color: red !important;
    color: white !important;
    text-decoration: none !important;
    transition: .1s ease;
    border: 2px solid #b5b5b5;
}
.action-menu .btn.btn-icon:hover,
.action-menu .btn.btn-icon:focus {
    border: 2px solid black;
}
.secondary-navigation .navigation .more-nav.nav-tabs .nav-link.active {
    background-color: var(--edit-bg);
    color: inherit;
    border-bottom-color: var(--edit);
}
.secondary-navigation .navigation .more-nav.nav-tabs .nav-link:hover,
.secondary-navigation .navigation .more-nav.nav-tabs .nav-link:focus {
    background-color: var(--edit-bg);
    color: inherit;
}
.editing .section .activity .contentwithoutlink,
.editing .section .activity .activityinstance {
    padding-right: 0px;
}
#usernavigation.navbar-nav .editmode-switch-form label {
    color: white !important;
    font-size: 90%;
}
.custom-switch .custom-control-label::after {
    background-color: #a7a7a7;
}
.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #ff0000;
    background-color: #ff0000;
}
.editing .activity-item:hover {
    color: inherit;
    border-color: #ff0000;
}
.block .block-controls .dropdown-toggle .icon {
    color: red;
}
.section .activity .actions {
    position: absolute;
    right: -20px;
    top: -5px;
    display: flex;
}
.quickeditlink .icon,
.dragicon .icon {
    color: #ff0000 !important;
}
.activity-add,
.block-add {
    border-radius: 0.5rem;
    color: #ff0000;
    background-color: #ffefef;
    border-color: #ff0000;
    border-width: 1px;
    width: 100%;
}
.icons-collapse-expand .expanded-icon * {
    color: inherit !important;
}
.activity.draggable:hover {
    background-color: #0000000f;
}
.activity.dragging:hover {
    background-color: #ff000030;
    border:3px dashed red;
}
.activitytitle.media {
    transition: .2s ease;
}
.activitytitle.media:hover {
    opacity: .8;
    filter: brightness(120%);
}
/* BUTTONS */
.btn:hover {
    cursor: pointer;
}
.btn.btn-primary {
    color: #FFFFFF !important;
    background-color: var(--link) !important;
    border-color: var(--link) !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus {
    color: #FFFFFF !important;
    background-color: var(--activitycontent) !important;
    border-color: var(--activitycontent) !important;
    opacity: .7;
}
.btn.btn-secondary:not(.btn-sm) {
    color: #FFFFFF !important;
    background-color: dimgrey !important;
    border-color: dimgrey !important;
}
.btn.btn-secondary:not(.btn-sm):hover {
    color: #FFFFFF !important;
    background-color: grey !important;
    border-color: grey !important;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff !important;
    background-color: var(--link);
}
/* MAIN CONTENT*/
#region-main {
    overflow-x: visible;
}
.courseindex .courseindex-section {
    border-left: none !important;
    background: white;
    margin: 8px;
}
.courseindex .courseindex-item {
    padding: 0.25rem;
    border-radius: 0rem;
}
.courseindex .courseindex-section:first-child {
    background: var(--section-0-bg);
}
.courseindex .courseindex-section div:first-child {
    background: var(--section-head-bg);
}
.courseindex .courseindex-item.pageitem {
    background-color: #346daa !important;
}
/* PAGE CONTENT */
#region-main img,
#id_pageeditable img {
    max-width: 100%;
    height: auto;
}
#id_pageeditable {
    padding: 1rem;
}
/* MESSAGING */
.message-app .list-group .list-group-it...