AulaGlobal - Compact Dark by alonso-herreros

/* ==UserStyle==
@name       AulaGlobal - Compact Dark
@version    20240418.08.43
@namespace  https://userstyles.world/user/Alonso Herreros Copete
@author     Alonso Herreros Copete
@license    CC-SA
==/UserStyle== */

@-moz-document domain("aulaglobal.uc3m.es") {
:root {
    --dt-on-background: #e3e3e3;
    --dt-on-background-secondary: #ababab;
    --dt-background: #131314;
    --dt-on-surface: #e3e3e3;
    --dt-inverse-surface: #e3e3e3;
    --dt-on-surface-secondary: #ababab;
    --dt-on-surface-variant: #c4c7c5;
    --dt-surface-variant: #444746;
    --dt-inverse-on-surface: #303030;
    --dt-surface: #131314;
    --dt-surface-action: #222222;
    --dt-surface-tint: #d1e1ff;
    --dt-shadow-elevation-1: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    --dt-shadow-elevation-2: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
    --dt-shadow-elevation-3: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
    --dt-shadow-elevation-4: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
    --dt-shadow-elevation-5: 0px 8px 10px -6px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
    --dt-surface-container-lowest: #0E0E0E;
    --dt-surface-container-low: #1B1B1B;
    --dt-surface-container: #1E1F20;
    --dt-surface-container-high: #282A2C;
    --dt-surface-container-highest: #333537;
    --dt-surface-dim: #131313;
    --dt-surface-bright: #37393B;
    --dt-scrim: rgba(0, 0, 0, 0.32);
    --dt-scrim-2x: rgba(0, 0, 0, 0.64);
    --dt-on-primary-container: #d3e3fd;
    --dt-primary-container-icon: #d3e3fd;
    --dt-primary-container-link: #d3e3fd;
    --dt-primary: #a8c7fa;
    --dt-primary-action: #a8c7fa;
    --dt-primary-action-stateful: #d4dff1;
    --dt-primary-outline: #a8c7fa;
    --dt-primary-action-state-layer: #1b6ef3;
    --dt-primary-container: #0842a0;
    --dt-on-primary: #062e6f;
    --dt-primary-icon: #062e6f;
    --dt-primary-link: #062e6f;
    --dt-on-secondary-container: #c2e7ff;
    --dt-secondary-container-icon: #c2e7ff;
    --dt-secondary-container-link: #c2e7ff;
    --dt-secondary: #7fcfff;
    --dt-secondary-action: #7fcfff;
    --dt-secondary-action-stateful: #7fcfff;
    --dt-secondary-outline: #7fcfff;
    --dt-secondary-action-state-layer: #047db7;
    --dt-secondary-container: #004a77;
    --dt-on-secondary: #035;
    --dt-secondary-icon: #035;
    --dt-secondary-link: #035;
    --dt-on-tertiary-container: #c4eed0;
    --dt-tertiary-container-icon: #c4eed0;
    --dt-tertiary-container-link: #c4eed0;
    --dt-tertiary: #6dd58c;
    --dt-tertiary-action: #6dd58c;
    --dt-tertiary-action-stateful: #6dd58c;
    --dt-tertiary-outline: #6dd58c;
    --dt-tertiary-action-state-layer: #198639;
    --dt-tertiary-container: #0f5223;
    --dt-on-tertiary: #0a3818;
    --dt-tertiary-icon: #0a3818;
    --dt-tertiary-link: #0a3818;
    --dt-on-neutral-container: #e3e3e3;
    --dt-neutral-container-icon: #e3e3e3;
    --dt-neutral-container-link: #e3e3e3;
    --dt-neutral: #ababab;
    --dt-neutral-action: #ababab;
    --dt-neutral-action-stateful: #ababab;
    --dt-neutral-outline: #ababab;
    --dt-neutral-action-state-layer: #ababab;
    --dt-neutral-container: #474747;
    --dt-on-neutral: #1f1f1f;
    --dt-neutral-icon: #ababab;
    --dt-neutral-link: #ababab;
    --dt-on-warning-container: #fff0d1;
    --dt-warning-container-icon: #fff0d1;
    --dt-warning-container-link: #fff0d1;
    --dt-warning: #ffbb29;
    --dt-warning-action: #ffbb29;
    --dt-warning-action-stateful: #ffbb29;
    --dt-warning-outline: #fff0d1;
    --dt-warning-action-state-layer: #ffbb29;
    --dt-warning-container: #562d00;
    --dt-on-warning: #1f1f1f;
    --dt-warning-icon: #421f00;
    --dt-warning-link: #421f00;
    --dt-on-error-container: #f9dedc;
    --dt-error-container-icon: #f9dedc;
    --dt-error-container-link: #f9dedc;
    --dt-error: #f2b8b5;
    --dt-error-action: #f2b8b5;
    --dt-error-action-stateful: #f2b8b5;
    --dt-error-outline: #f2b8b5;
    --dt-error-action-state-layer: #dc362e;
    --dt-error-container: #8c1d18;
    --dt-on-error: #601410;
    --dt-error-icon: #601410;
    --dt-error-link: #601410;
    --dt-mime-type-blue: rgb(138, 180, 248);
    --dt-mime-type-dark-blue: #5f73e5;
    --dt-mime-type-green: rgb(129, 201, 149);
    --dt-mime-type-grey: rgb(154, 160, 166);
    --dt-mime-type-purple: rgb(197, 138, 249);
    --dt-mime-type-deep-purple: #9575cd;
    --dt-mime-type-red: rgb(242, 139, 130);
    --dt-mime-type-yellow: #FFE082;
    --dt-disabled: rgba(227, 227, 227, 0.12);
    --dt-on-disabled: rgba(227, 227, 227, 0.38);
    --dt-outline: #8e918f;
    --dt-outline-variant: #444746;
    --dt-light-info-banner-button: #a8c7fa;
    --dt-light-neutral-banner-button: #ababab;
    --dt-light-success-banner-button: #6dd58c;
    --dt-light-warning-banner-button: #ffbb29;
    --dt-light-error-banner-button: #f2b8b5;
    --gm3-sys-color-background: #1f1f1f;
    --gm3-sys-color-error: #f2b8b5;
    --gm3-sys-color-error-container: #8c1d18;
    --gm3-sys-color-inverse-on-surface: #303030;
    --gm3-sys-color-inverse-primary: #0b57d0;
    --gm3-sys-color-inverse-surface: #e3e3e3;
    --gm3-sys-color-on-background: #e3e3e3;
    --gm3-sys-color-on-error: #601410;
    --gm3-sys-color-on-error-container: #f9dedc;
    --gm3-sys-color-on-primary: #062e6f;
    --gm3-sys-color-on-primary-container: #d3e3fd;
    --gm3-sys-color-on-primary-fixed: #041e49;
    --gm3-sys-color-on-primary-fixed-variant: #0842a0;
    --gm3-sys-color-on-secondary: #035;
    --gm3-sys-color-on-secondary-container: #c2e7ff;
    --gm3-sys-color-on-secondary-fixed: #001d35;
    --gm3-sys-color-on-secondary-fixed-variant: #004a77;
    --gm3-sys-color-on-surface: #e3e3e3;
    --gm3-sys-color-on-surface-variant: #c4c7c5;
    --gm3-sys-color-on-tertiary: #0a3818;
    --gm3-sys-color-on-tertiary-container: #c4eed0;
    --gm3-sys-color-on-tertiary-fixed: #072711;
    --gm3-sys-color-on-tertiary-fixed-variant: #0f5223;
    --gm3-sys-color-outline: #8e918f;
    --gm3-sys-color-outline-variant: #444746;
    --gm3-sys-color-primary: #a8c7fa;
    --gm3-sys-color-primary-container: #0842a0;
    --gm3-sys-color-primary-fixed: #d3e3fd;
    --gm3-sys-color-primary-fixed-dim: #a8c7fa;
    --gm3-sys-color-scrim: #000;
    --gm3-sys-color-secondary: #7fcfff;
    --gm3-sys-color-secondary-container: #004a77;
    --gm3-sys-color-secondary-fixed: #c2e7ff;
    --gm3-sys-color-secondary-fixed-dim: #7fcfff;
    --gm3-sys-color-shadow: #000;
    --gm3-sys-color-surface: #1f1f1f;
    --gm3-sys-color-surface-bright: #37393b;
    --gm3-sys-color-surface-container: #1e1f20;
    --gm3-sys-color-surface-container-high: #282a2c;
    --gm3-sys-color-surface-container-highest: #333537;
    --gm3-sys-color-surface-container-low: #1b1b1b;
    --gm3-sys-color-surface-container-lowest: #0e0e0e;
    --gm3-sys-color-surface-dim: #131313;
    --gm3-sys-color-surface-tint: #d1e1ff;
    --gm3-sys-color-surface-variant: #444746;
    --gm3-sys-color-tertiary: #6dd58c;
    --gm3-sys-color-tertiary-container: #0f5223;
    --gm3-sys-color-tertiary-fixed: #c4eed0;
    --gm3-sys-color-tertiary-fixed-dim: #6dd58c;
}

body {
    background-color: var(--dt-surface-container-low);
    color: var(--dt-on-background);
}

/* General */

a { color: var(--dt-primary-action); }
a:hover { color: var(--dt-primary-action-stateful); }

img.icon {
    filter: invert(0.7);
}

.bg-white { background-color: var(--dt-surface-container-high) !important; }
.bg-light { background-color: var(--dt-surface-container-low) !important; }
.bg-secondary { background-color: var(--dt-surface-container-highest) !important; }

.text-muted {
    color: var(--dt-on-surface-secondary) !important;
}

.border { border-color: var(--dt-outline-variant) !important; }
.border-bottom { border-bottom-color: var(--dt-outline-variant) !important; }

.btn, .btn:hover { color: var(--dt-on-surface); }
.btn-primary:hover { background-color: var(--dt-secondary-container); }
.btn-secondary { background-color: transparent; }
.btn-secondary:hover { background-color: rgba(128,128,128,0.1); }

.table,
.generaltable {
    color: var(--dt-on-surface);
}
.generaltable tbody tr:hover {
    color: var(--dt-on-surface-variant);
}

.generaltable th, .generaltable td,
.generaltable thead th,
.table th, .table td,
.table thead th {
    vertical-align: bottom;
    border-color: var(--dt-outline-variant);
}

/* Elements */
.site-name,
.page-header-headings>h1 {
    color: var(--dt-primary);
}

.drawercontent,
#page.drawers {
    scrollbar-color: var(--dt-surface-bright) var(--dt-surface-container-low);
}
#page.drawers .main-inner {
    background-color: var(--dt-surface);
}

#region-main {
    background-color: var(--dt-surface);
}

#page-footer {
    background-color: var(--dt-surface) !important;
    box-shadow: none;
}


/* Drawers */
.drawer-toggles .drawer-toggler .btn {
    background-color: var(--dt-surface-container-high);
}

.drawer {
    background-color: var(--dt-surface-container);
}

.courseindex .courseindex-item .courseindex-link,
.courseindex .courseindex-item .courseindex-chevron {
    color: var(--dt-on-surface);
}
.courseindex .courseindex-item:hover .courseindex-link,
.courseindex .courseindex-item:hover .courseindex-chevron {
    color: var(--dt-on-surface-secondary);
}

.card {
    background-color: var(--dt-surface);
}
.alert-info {
    color: var(--dt-primary-action);
    background-color: var(--dt-surface-container-high);
}

.block_xp .xp-bg-gray-200 {
    background-color: var(--dt-surface-container-high);
}
.block_xp .xp-text-gray-600,
.block_xp nav .nav-button {
    color: var(--dt-on-surface-variant);
}

/* Top navbar */
.navbar.fixed-top,
.primary-navigation .navigation .nav-link,
.navbar-light .navbar-nav .nav-link,
.navbar-l...