113 lines
4.9 KiB
CSS
113 lines
4.9 KiB
CSS
|
/* ============================================================
|
||
|
|
DATEIEN — Marken-Skin für die Dateiablage (Files Gallery, /dateien)
|
||
|
|
|
||
|
|
KEIN Teil des Seiten-Layouts und deshalb bewusst die 7. CSS-Datei: geladen wird
|
||
|
|
sie ausschließlich von storage/dateien/system/include/head.html, also in einem
|
||
|
|
fremden Dokument, das wir nicht rendern. Sie steht NACH der files.css der App und
|
||
|
|
gewinnt damit über die Variablen.
|
||
|
|
|
||
|
|
Zusammen mit tokens.css geladen (Farbwerte kommen von dort, nie als Hex von hier).
|
||
|
|
Die App ist durchgängig variablengesteuert — wir setzen deshalb ihre Variablen und
|
||
|
|
fassen ihre Selektoren fast nicht an. Das übersteht Updates.
|
||
|
|
============================================================ */
|
||
|
|
|
||
|
|
/* Die Schrift bleibt bewusst die der App (system-ui): ein Datei-Manager ist ein
|
||
|
|
Werkzeug, nicht eine Seite der Website — nah am Standard heißt hier vertraute
|
||
|
|
Bedienung, und die Systemschrift ist in kleinen Größen und langen Dateinamen
|
||
|
|
ohnehin robuster als unsere Abel. Die Marke tragen Wappen und Rot. */
|
||
|
|
|
||
|
|
:root {
|
||
|
|
/* Farbton der App auf das Markenrot ziehen. Die App leitet daraus Flächen,
|
||
|
|
Ränder und Ordnerfarben ab (hsl(var(--hue), 20%, …)) — alles bekommt einen
|
||
|
|
warmen Rotstich statt Blau, ohne dass wir einzelne Regeln überschreiben. */
|
||
|
|
--hue: var(--clr-accent-h);
|
||
|
|
|
||
|
|
/* Der Akzent selbst (Buttons, Links, Auswahl) exakt auf --clr-accent.
|
||
|
|
Die App wählt je Theme eine der drei Varianten. */
|
||
|
|
--hsl-primary-dark: var(--clr-accent-hsl);
|
||
|
|
--hsl-primary-light: var(--clr-accent-hsl);
|
||
|
|
--hsl-primary-contrast: var(--clr-accent-hsl);
|
||
|
|
|
||
|
|
/* --- Kontrast (gemessen, nicht geschätzt) ---
|
||
|
|
Die App leitet Flächen UND Ordnerfarben aus --hue ab. Mit dem Markenrot als
|
||
|
|
Farbton stand ein dunkelroter Ordner auf dunkelroter Fläche: 1,07:1, praktisch
|
||
|
|
unsichtbar. Deshalb hier drei Korrekturen. */
|
||
|
|
|
||
|
|
/* Flächen etwas tiefer als das Seiten-Grau (#222 ≈ 13 %): der Ordner ist ein
|
||
|
|
gefülltes Rot, und Rot ist von Natur aus dunkel — es braucht den Abstand nach
|
||
|
|
unten. Bei 13 % kommt das Rot nur auf 3,03:1, bei 10 % auf 3,30:1. */
|
||
|
|
--surface-base-lightness-dark: 10%;
|
||
|
|
|
||
|
|
/* Text heller als die Vorgabe der App (80 %): hebt Dateinamen auf 11,97:1 und
|
||
|
|
zieht die abgeleiteten Meta-Töne (Brotkrumen, Anzahl-Badge) mit nach oben. */
|
||
|
|
--text-base-lightness-dark: 88%;
|
||
|
|
|
||
|
|
/* Ordner im Markenrot. Vorderseite ist die große Fläche und trägt die Erkennbarkeit
|
||
|
|
(gemessen 3,91:1 — über den 3:1, die WCAG 1.4.11 für Grafik verlangt), Rückseite dunkler
|
||
|
|
als Kante. Erste Zeile ist der Fallback für Browser ohne color-mix(). */
|
||
|
|
--svg-folder-fg-dark: var(--clr-accent);
|
||
|
|
--svg-folder-fg-dark: color-mix(in srgb, var(--clr-accent) 80%, white);
|
||
|
|
--svg-folder-fg-large-dark: var(--clr-accent);
|
||
|
|
--svg-folder-fg-large-dark: color-mix(in srgb, var(--clr-accent) 80%, white);
|
||
|
|
--svg-folder-bg-dark: var(--clr-accent-dark);
|
||
|
|
--svg-folder-bg-large-dark: var(--clr-accent-dark);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --- Login-Seite ---
|
||
|
|
Die Login-Seite der App rendert nur „Einloggen" und ihr Formular; sie bindet
|
||
|
|
include/footer.html nicht ein (index.php:561 rendert eine eigene, knappe Seite) und
|
||
|
|
kennt keinen Platz für eigenes Markup. Damit man sieht, wessen Ablage das ist, kommt
|
||
|
|
das Vereinswappen als dekorative Fläche darüber — Bild statt CSS-Textinhalt, damit
|
||
|
|
nichts Sinntragendes im Stylesheet landet. */
|
||
|
|
.page-login-body .login-container::before {
|
||
|
|
content: '';
|
||
|
|
display: block;
|
||
|
|
width: 96px;
|
||
|
|
height: 124px;
|
||
|
|
margin: 0 auto 1.5rem;
|
||
|
|
background: url('../img/logo.svg') center / contain no-repeat;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --- Fußzeile (storage/dateien/system/include/footer.html) ---
|
||
|
|
.custom-footer-fixed ist der Hook der App (fest am unteren Rand, volle Breite).
|
||
|
|
Wir geben ihm nur Typografie und Abstand. */
|
||
|
|
.tsv-footer {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
padding: 0.375rem 1rem;
|
||
|
|
border-top: 2px solid hsl(var(--clr-accent-hsl));
|
||
|
|
line-height: 1.4;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tsv-footer a {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
color: var(--text1);
|
||
|
|
text-decoration: none;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Wappen in der Fußzeile: echtes <img> mit Maßen (kein Layout-Sprung), dekorativ —
|
||
|
|
der Linktext trägt die Bedeutung. Die offizielle `logo`-Option der App fällt hier
|
||
|
|
aus: sie wird über _c.config in js/custom.js gesetzt, und dieser Hook braucht wie
|
||
|
|
css/custom.css eine öffentliche URL, die unser storage_path nicht hat. */
|
||
|
|
.tsv-footer a img {
|
||
|
|
height: 2.6em; /* darunter wird das Wappen zum Fleck */
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tsv-footer a:hover,
|
||
|
|
.tsv-footer a:focus-visible {
|
||
|
|
color: hsl(var(--clr-accent-hsl));
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Die App reserviert keinen Platz für die feste Fußzeile — sonst verschwindet die
|
||
|
|
letzte Dateizeile bzw. der letzte Menüpunkt darunter. */
|
||
|
|
#files-container,
|
||
|
|
#sidebar-inner {
|
||
|
|
padding-bottom: 4rem;
|
||
|
|
}
|