AulaGlobal - Compact Dark by alonso-herreros

/* ==UserStyle==
@name         UC3M - Compact Dark
@version      20250207.16.54
@namespace    https://userstyles.world/user/alonso-herreros
@description  Compact Dark theme for UC3M sites
@author       alonso-herreros
@license      CC-SA
==/UserStyle== */

@-moz-document domain("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;
}

}

@-moz-document domain("aulaglobal.uc3m.es"), regexp(".*uc3m.es/(bachelor-degree|grado)/.*") {
body {
    background-color: var(--dt-surface-container-low);
    color: var(--dt-on-background);
}

/* General elemens */

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

caption, legend {
    color: var(--dt-primary);
}

}

@-moz-document domain("aulaglobal.uc3m.es") {
/* General */

a {
    padding: 0.1rem 0.4rem;
    box-shadow: none;
    border-radius: 0.5rem;
}
a:hover,
.aalink.focus, a.focus.autolink, .aalink:focus, a.autolink:focus {
    color: var(--dt-primary-action-stateful);
    background-color: var(--dt-surface-bright);
    box-shadow: none;
}
a:not([class]):focus {
    color: var(--dt-on-primary);
    background: var(--dt-on-primary-container);
}

aside .card-body 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;
    border-color: var(--dt-outline)
}
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:active,
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: rgba(128,128,128,0.2);
    color: var(--dt-on-surface);
}
.btn.btn-icon:hover, .btn.btn-icon:focus {
    background-color: transparent;
}

.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);
}

/* Footer */
#page-footer {
    background-color: var(--dt-surface) !imp...