Skip to content

UC3M - Dark by alonso-herreros

Details

Authoralonso-herreros

LicenseCC-SA

Categoryuc3m.es

Created

Updated

Size36 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Dark theme for UC3M sites - inspired by Google Drive dark theme

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         UC3M - Dark
@version      20250219.16.33
@namespace    https://userstyles.world/user/alonso-herreros
@description  Dark theme for UC3M sites - inspired by Google Drive dark theme
@author       alonso-herreros
@license      CC-SA
==/UserStyle== */

@-moz-document domain("uc3m.es") {
/* ===== Definitions ===== */

: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(".*aplicaciones.uc3m.es((?!atenea).)*$"), regexp(".*uc3m.es/(bachelor-degree|grado)/.*") {
/* ===== Common ===== */

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

/* General elemens */

header, footer {
    background-color: var(--dt-surface-container-high);
    color: var(--dt-on-background);
    margin: 0;
}

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

hr, hr.barra {
    border-color: var(--dt-outline);
}

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


}

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

/* General */

header {
    background-color: transparent;
}

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

pre {
    color: inherit;
}

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...

Reviews

No reviews yet.