erikandClaude Opus 5.5
b7e0bd0d92
- Termin aus Mail: Mailtext oder .eml per Drag & Drop/Strg+V auf Terminplan oder Aufgaben, KI schlägt Aufgaben vor, Prüfung im Aufgaben-Panel; neues Notizfeld je Aufgabe (plan_todos.notiz) - Terminplan: Meilensteine ohne Aufgabenbezug je in eigener Zeile, "+ Neu"-Menü klappt neben schmaler Seitenleiste nach rechts, Leistungsphasen - Rollen & Rechte, Abwesenheiten-Seite, Benachrichtigungen, Rundgang - Glas-Darstellung, Logo als Favicon - Pi-Betrieb: PDF-Arbeit im Kindprozess, Wächter, Einrichtungs- und Prüfskript inkl. WLAN-Wächter Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
401 lines
16 KiB
CSS
401 lines
16 KiB
CSS
/* ===========================================================================
|
|
GLAS-DARSTELLUNG (Eriks Wahl: Gestaltungsvorschlag "Projektübersicht in
|
|
Glas", Annäherung an Apple Liquid Glass)
|
|
---------------------------------------------------------------------------
|
|
Eine eigene Schicht über styles.css und plan-styles.css, geladen als LETZTES
|
|
Stylesheet. Alles hängt an der Klasse html.glas, die ein kleines Skript im
|
|
<head> von App.html setzt — ohne sie sieht die App aus wie zuvor. Abschalten
|
|
lässt sie sich je Browser unter Einstellungen → Mein Konto ("Glas-
|
|
Darstellung", localStorage-Schlüssel projuebersicht-glas).
|
|
|
|
Prinzip:
|
|
- Tokens statt Einzelregeln: --surface & Co. werden durchscheinend, damit
|
|
wirken die ~70 Stellen, die var(--surface) als Fläche nutzen, ohne dass
|
|
jede einzeln angefasst wird.
|
|
- Echtes Glas (Unschärfe des Hintergrunds) nur auf den großen Flächen —
|
|
Menüband, Seitenleiste, Karten, Dialoge. Kleine Elemente bleiben ohne
|
|
backdrop-filter: verschachtelte Unschärfe kostet Rechenzeit und bringt
|
|
auf einer bereits gläsernen Karte nichts.
|
|
- Drei Dichten: Rahmen (Menüband/Seitenleiste) am dichtesten, Inhalt
|
|
mittel, Dialoge und Menüs fast deckend (sie liegen über Inhalt, der
|
|
sonst durchscheinen und den Text stören würde).
|
|
- Hintergrund: Lichtflächen in den Logo-Blautönen und das Logo als großes
|
|
Wasserzeichen (logo.svg, vektorisiert aus logo.png), beides fixiert.
|
|
- Die Wandtafel (body.wandtafel-aktiv) bleibt außen vor: eigenes Design,
|
|
und auf dem Kiosk-Rechner wäre Unschärfe zu teuer.
|
|
=========================================================================== */
|
|
|
|
/* ---------- Tokens: hell ---------- */
|
|
html.glas {
|
|
--bg: #e8eef3;
|
|
--surface: rgba(255,255,255,.58);
|
|
--surface-alt: rgba(255,255,255,.40);
|
|
--surface-sunk: rgba(15,90,133,.07);
|
|
--line: rgba(20,45,65,.16);
|
|
--line-soft: rgba(20,45,65,.09);
|
|
|
|
--accent: #0f5a85;
|
|
--accent-hover: #0d5079;
|
|
--accent-active: #0a4565;
|
|
--accent-soft: rgba(15,90,133,.11);
|
|
--band-neu: #0f5a85;
|
|
|
|
--text: #14212b;
|
|
--text-muted: #4b5d6b;
|
|
--text-subtle: #6f8291;
|
|
|
|
--r-md: 10px;
|
|
--r-lg: 18px;
|
|
--r-xl: 22px;
|
|
|
|
--sh-1: 0 8px 28px rgba(21,58,86,.10), 0 1px 4px rgba(21,58,86,.06);
|
|
--sh-2: 0 12px 34px rgba(21,58,86,.13), 0 2px 6px rgba(21,58,86,.07);
|
|
--sh-3: 0 20px 60px rgba(21,58,86,.20), 0 4px 14px rgba(21,58,86,.10);
|
|
|
|
--glas-rahmen: rgba(255,255,255,.62);
|
|
--glas-dicht: rgba(255,255,255,.86);
|
|
--glas-deckend: #f7fafc;
|
|
--glas-kante: rgba(255,255,255,.80);
|
|
--glas-kante-2: rgba(255,255,255,.35);
|
|
--glas-blur: 24px;
|
|
--glas-hell: #94b0cc;
|
|
--glas-tief: #116896;
|
|
--glas-logo: .16;
|
|
}
|
|
|
|
/* ---------- Tokens: dunkel (System und manuell) ---------- */
|
|
@media (prefers-color-scheme: dark) {
|
|
html.glas:not([data-theme="light"]) {
|
|
--bg: #0b141b;
|
|
--surface: rgba(30,46,60,.50);
|
|
--surface-alt: rgba(30,46,60,.34);
|
|
--surface-sunk: rgba(255,255,255,.06);
|
|
--line: rgba(255,255,255,.14);
|
|
--line-soft: rgba(255,255,255,.08);
|
|
--accent: #8cc9e6;
|
|
--accent-hover: #a3d4ec;
|
|
--accent-active: #6fb3d3;
|
|
--accent-soft: rgba(140,201,230,.15);
|
|
--band-neu: #116896;
|
|
--text: #e8f0f5;
|
|
--text-muted: #a9bccb;
|
|
--text-subtle: #7790a2;
|
|
--sh-1: 0 10px 30px rgba(0,0,0,.40), 0 1px 4px rgba(0,0,0,.30);
|
|
--sh-2: 0 14px 38px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.30);
|
|
--sh-3: 0 22px 64px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.35);
|
|
--glas-rahmen: rgba(28,42,54,.58);
|
|
--glas-dicht: rgba(22,34,44,.90);
|
|
--glas-deckend: #15212b;
|
|
--glas-kante: rgba(255,255,255,.18);
|
|
--glas-kante-2: rgba(255,255,255,.07);
|
|
--glas-hell: #2c5675;
|
|
--glas-tief: #1d6f99;
|
|
--glas-logo: .10;
|
|
}
|
|
}
|
|
html.glas[data-theme="dark"] {
|
|
--bg: #0b141b;
|
|
--surface: rgba(30,46,60,.50);
|
|
--surface-alt: rgba(30,46,60,.34);
|
|
--surface-sunk: rgba(255,255,255,.06);
|
|
--line: rgba(255,255,255,.14);
|
|
--line-soft: rgba(255,255,255,.08);
|
|
--accent: #8cc9e6;
|
|
--accent-hover: #a3d4ec;
|
|
--accent-active: #6fb3d3;
|
|
--accent-soft: rgba(140,201,230,.15);
|
|
--band-neu: #116896;
|
|
--text: #e8f0f5;
|
|
--text-muted: #a9bccb;
|
|
--text-subtle: #7790a2;
|
|
--sh-1: 0 10px 30px rgba(0,0,0,.40), 0 1px 4px rgba(0,0,0,.30);
|
|
--sh-2: 0 14px 38px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.30);
|
|
--sh-3: 0 22px 64px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.35);
|
|
--glas-rahmen: rgba(28,42,54,.58);
|
|
--glas-dicht: rgba(22,34,44,.90);
|
|
--glas-deckend: #15212b;
|
|
--glas-kante: rgba(255,255,255,.18);
|
|
--glas-kante-2: rgba(255,255,255,.07);
|
|
--glas-hell: #2c5675;
|
|
--glas-tief: #1d6f99;
|
|
--glas-logo: .10;
|
|
}
|
|
|
|
/* ---------- Hintergrund: Lichtflächen und Logo ---------- */
|
|
html.glas body {
|
|
background:
|
|
radial-gradient(55% 50% at 8% 4%, color-mix(in srgb, var(--glas-hell) 70%, transparent), transparent 70%),
|
|
radial-gradient(45% 45% at 92% 12%, color-mix(in srgb, var(--glas-tief) 26%, transparent), transparent 70%),
|
|
radial-gradient(50% 55% at 72% 96%, color-mix(in srgb, #7fc3b6 26%, transparent), transparent 70%),
|
|
radial-gradient(40% 40% at 28% 82%, color-mix(in srgb, var(--glas-hell) 42%, transparent), transparent 70%),
|
|
var(--bg);
|
|
background-attachment: fixed;
|
|
}
|
|
/* Wasserzeichen: fixiert, links unten, teils unter Seitenleiste und Karten —
|
|
dort schimmert es durch das Glas, daneben ist es klar zu sehen. */
|
|
html.glas body::before {
|
|
content: "";
|
|
position: fixed;
|
|
left: -3vw; bottom: -14vh;
|
|
width: min(1100px, 68vw); aspect-ratio: 256 / 216;
|
|
background: url("/logo.svg") no-repeat center / contain;
|
|
opacity: var(--glas-logo);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
html.glas .app-shell { position: relative; z-index: 1; }
|
|
html.glas body.wandtafel-aktiv::before { display: none; }
|
|
|
|
/* ---------- Das Material ---------- */
|
|
html.glas .app-topbar,
|
|
html.glas #headerMenu.side-menu,
|
|
html.glas .modal,
|
|
html.glas .user-menu-dropdown,
|
|
html.glas .user-menu,
|
|
html.glas .board-list,
|
|
html.glas .abw-team-kopf,
|
|
html.glas .report-card,
|
|
html.glas .load-card,
|
|
html.glas .settings-card,
|
|
html.glas .dash-karte,
|
|
html.glas .dash-band,
|
|
html.glas .bericht-panel,
|
|
html.glas .pc-panel,
|
|
html.glas .table-wrap,
|
|
html.glas .gantt-container,
|
|
html.glas .people-readonly,
|
|
html.glas .bubble-card,
|
|
html.glas .range-picker,
|
|
html.glas .sync-problem-bar,
|
|
html.glas .plan-header,
|
|
html.glas .plan-nav,
|
|
html.glas .plan-panel,
|
|
html.glas .plan-einst-nav,
|
|
html.glas .load-karte,
|
|
html.glas .plan-kpi-tile,
|
|
html.glas .plan-lage-band,
|
|
html.glas .plan-mini-card,
|
|
html.glas .protokoll-liste,
|
|
html.glas .protokoll-schreiben,
|
|
html.glas .plan-toast,
|
|
html.glas .glocke-menue,
|
|
html.glas .wiz {
|
|
background: var(--surface);
|
|
-webkit-backdrop-filter: blur(var(--glas-blur)) saturate(170%);
|
|
backdrop-filter: blur(var(--glas-blur)) saturate(170%);
|
|
border: 1px solid var(--glas-kante-2);
|
|
box-shadow: var(--sh-1), inset 0 1px 0 var(--glas-kante), inset 0 -1px 0 var(--glas-kante-2);
|
|
}
|
|
|
|
/* Rahmen: Menüband und Seitenleiste dichter als der Inhalt. */
|
|
html.glas .app-topbar {
|
|
background: var(--glas-rahmen);
|
|
border-width: 0 0 1px 0;
|
|
box-shadow: 0 1px 0 var(--glas-kante-2), 0 6px 24px rgba(21,58,86,.06);
|
|
}
|
|
html.glas .topbar-logo { height: 26px; }
|
|
|
|
/* Dialoge, Menüs, Hinweise: fast deckend — sie liegen über Inhalt, der sonst
|
|
durchscheint und den Text unruhig macht. */
|
|
html.glas .modal,
|
|
html.glas .user-menu-dropdown,
|
|
html.glas .user-menu,
|
|
html.glas .range-picker,
|
|
html.glas .plan-toast,
|
|
html.glas .glocke-menue,
|
|
html.glas .sync-problem-bar {
|
|
background: var(--glas-dicht);
|
|
box-shadow: var(--sh-3), inset 0 1px 0 var(--glas-kante);
|
|
}
|
|
html.glas .modal-bg {
|
|
background: rgba(15,35,50,.28);
|
|
-webkit-backdrop-filter: blur(6px);
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
|
|
/* ---------- Seitenleiste: schwebende Glasfläche (Desktop) ---------- */
|
|
@media (min-width: 769px) {
|
|
html.glas #headerMenu.side-menu {
|
|
background: var(--glas-rahmen);
|
|
top: calc(52px + 12px);
|
|
height: calc(100vh - 52px - 24px);
|
|
margin: 12px 0 12px 12px;
|
|
border-radius: var(--r-xl);
|
|
border: 1px solid var(--glas-kante-2);
|
|
box-shadow: var(--sh-2), inset 0 1px 0 var(--glas-kante);
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
/* ---------- "Alles schwebt" (Eriks Wahl C, Desktop) ----------
|
|
Vorher stieß der eckige Projektkopf (.plan-header + .plan-nav, ein
|
|
durchgehender Streifen ohne Abstand) an die runde, schwebende
|
|
Seitenleiste. Jetzt schweben Menüband, Seitenleiste und Projektkopf mit
|
|
demselben Abstand (12px) und denselben Rundungen; der aktive Reiter ist
|
|
eine Kapsel wie der aktive Eintrag der Seitenleiste. */
|
|
@media (min-width: 769px) {
|
|
html.glas .app-topbar {
|
|
top: 12px;
|
|
margin: 12px 12px 0;
|
|
border-radius: var(--r-lg);
|
|
border: 1px solid var(--glas-kante-2);
|
|
box-shadow: var(--sh-2), inset 0 1px 0 var(--glas-kante);
|
|
}
|
|
html.glas #headerMenu.side-menu {
|
|
top: calc(52px + 24px);
|
|
height: calc(100vh - 52px - 36px);
|
|
}
|
|
html.glas .plan-kopf {
|
|
margin: 12px 12px 0;
|
|
border-radius: var(--r-xl);
|
|
background: var(--glas-rahmen);
|
|
-webkit-backdrop-filter: blur(var(--glas-blur)) saturate(170%);
|
|
backdrop-filter: blur(var(--glas-blur)) saturate(170%);
|
|
border: 1px solid var(--glas-kante-2);
|
|
box-shadow: var(--sh-2), inset 0 1px 0 var(--glas-kante);
|
|
padding: 4px 12px 10px;
|
|
}
|
|
/* Kopf und Reiter sind innerhalb der Karte keine eigenen Flächen mehr. */
|
|
html.glas .plan-kopf .plan-header,
|
|
html.glas .plan-kopf .plan-nav {
|
|
background: transparent;
|
|
-webkit-backdrop-filter: none;
|
|
backdrop-filter: none;
|
|
border: 0;
|
|
box-shadow: none;
|
|
}
|
|
/* Inhalt bündig unter der Kopfkarte und im selben 12px-Abstand. */
|
|
html.glas .plan-page .plan-main-content { padding-left: 12px; padding-right: 12px; padding-top: 12px; }
|
|
html.glas .plan-kopf .plan-header { padding: 10px 12px 6px; }
|
|
html.glas .plan-kopf .plan-nav { padding: 0; gap: 2px; }
|
|
html.glas .plan-kopf .plan-nav-item {
|
|
border-bottom: 0;
|
|
border-radius: 999px;
|
|
padding: 8px 16px;
|
|
font-size: 13.5px;
|
|
}
|
|
html.glas .plan-kopf .plan-nav-item:hover { background: var(--surface-sunk); }
|
|
html.glas .plan-kopf .plan-nav-item.is-active {
|
|
background: var(--glas-dicht);
|
|
color: var(--accent);
|
|
box-shadow: inset 0 1px 0 var(--glas-kante), 0 2px 10px rgba(21,58,86,.10);
|
|
}
|
|
}
|
|
@media (min-width: 769px) and (prefers-color-scheme: dark) {
|
|
html.glas:not([data-theme="light"]) .plan-kopf .plan-nav-item.is-active { background: rgba(255,255,255,.10); }
|
|
}
|
|
@media (min-width: 769px) {
|
|
html.glas[data-theme="dark"] .plan-kopf .plan-nav-item.is-active { background: rgba(255,255,255,.10); }
|
|
}
|
|
|
|
/* Projektbereich: .plan-main hat in plan-styles.css einen deckenden
|
|
Grund (var(--bg)). Unter Glas verdeckte er die Lichtflächen und das
|
|
Logo-Wasserzeichen — im Projekt sah man nur flaches Dunkelblau bzw.
|
|
Grau, auf allen anderen Seiten den Glas-Hintergrund. */
|
|
html.glas .plan-main { background: transparent; }
|
|
|
|
html.glas .nav-item { border-radius: 999px; }
|
|
html.glas .nav-item:hover,
|
|
html.glas .nav-item:visited:hover { background: var(--surface-sunk); }
|
|
html.glas .nav-item.active {
|
|
background: var(--glas-dicht);
|
|
color: var(--text);
|
|
box-shadow: inset 0 1px 0 var(--glas-kante), 0 2px 10px rgba(21,58,86,.10);
|
|
}
|
|
html.glas .nav-item.active .nav-icon { color: var(--accent); }
|
|
/* Die bestehenden Dunkel-Regeln für die Navigation setzen feste Werte —
|
|
hier auf die Glas-Tokens zurückführen. */
|
|
@media (prefers-color-scheme: dark) {
|
|
html.glas:not([data-theme="light"]) .nav-item:hover { background: var(--surface-sunk); }
|
|
html.glas:not([data-theme="light"]) .nav-item.active { background: rgba(255,255,255,.10); }
|
|
html.glas:not([data-theme="light"]) .app-topbar { background: var(--glas-rahmen); }
|
|
}
|
|
html.glas[data-theme="dark"] .nav-item:hover { background: var(--surface-sunk); }
|
|
html.glas[data-theme="dark"] .nav-item.active { background: rgba(255,255,255,.10); }
|
|
html.glas[data-theme="dark"] .app-topbar { background: var(--glas-rahmen); }
|
|
|
|
/* ---------- Bedienelemente ---------- */
|
|
/* Zweitknöpfe als klare Glaskapsel statt grauer Fläche. */
|
|
html.glas button.secondary {
|
|
background: var(--surface);
|
|
border: 1px solid var(--glas-kante-2);
|
|
box-shadow: inset 0 1px 0 var(--glas-kante);
|
|
color: var(--text);
|
|
}
|
|
html.glas button.secondary:hover { background: var(--glas-dicht); }
|
|
html.glas button:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
|
|
/* Hauptknöpfe (ohne eigene Klasse bzw. .small) mit leichtem Glanz oben —
|
|
bewusst nicht jeder <button>: Kalendertage, Projektköpfe und Kacheln sind
|
|
ebenfalls Knöpfe und bekämen sonst eine helle Kante. */
|
|
html.glas button:not([class]),
|
|
html.glas button.small:not(.secondary):not(.danger) {
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
|
|
}
|
|
/* Text auf Akzentfläche: bisher var(--surface) (deckend weiß), jetzt
|
|
durchscheinend — feste Farbe je Thema statt Flächen-Token. */
|
|
html.glas .dash-kal-tag.ist-gewaehlt,
|
|
html.glas .pt-badge-person { color: #fff; }
|
|
@media (prefers-color-scheme: dark) {
|
|
html.glas:not([data-theme="light"]) .dash-kal-tag.ist-gewaehlt,
|
|
html.glas:not([data-theme="light"]) .pt-badge-person { color: #0b141b; }
|
|
}
|
|
html.glas[data-theme="dark"] .dash-kal-tag.ist-gewaehlt,
|
|
html.glas[data-theme="dark"] .pt-badge-person { color: #0b141b; }
|
|
html.glas input[type=text],
|
|
html.glas input[type=email],
|
|
html.glas input[type=password],
|
|
html.glas input[type=number],
|
|
html.glas input[type=date],
|
|
html.glas input[type=search],
|
|
html.glas select,
|
|
html.glas textarea {
|
|
background-color: var(--glas-dicht);
|
|
border-color: var(--line);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
/* ---------- Kleine Korrekturen an durchscheinenden Flächen ---------- */
|
|
/* Sticky-Leisten bekamen bisher eine deckende Fläche; durchscheinend würde
|
|
der darunter wegscrollende Inhalt den Text überlagern. */
|
|
html.glas .bericht-rail { background: var(--glas-rahmen); }
|
|
/* GANTT: die feststehende Namensspalte muss deckend sein — beim seitlichen
|
|
Scrollen laufen die Balken darunter durch. */
|
|
/* Die feste Namensspalte des GANTT muss DECKEND sein: beim waagerechten
|
|
Scrollen laufen die Balken unter ihr durch, und mit dem halbdurchsichtigen
|
|
--glas-deckend (58 %) schienen sie durch die Namen hindurch (Eriks
|
|
Meldung). --gantt-label-grund ist derselbe Farbton, nur ohne Transparenz. */
|
|
html.glas { --gantt-label-grund: #f6f9fb; }
|
|
@media (prefers-color-scheme: dark) { html.glas:not([data-theme="light"]) { --gantt-label-grund: #15212b; } }
|
|
html.glas[data-theme="dark"] { --gantt-label-grund: #15212b; }
|
|
html.glas .gantt-label,
|
|
html.glas .gantt-row.gantt-header .gantt-label,
|
|
html.glas .gantt-row.gantt-days .gantt-label { background: var(--gantt-label-grund); }
|
|
/* Login: derselbe Hintergrund wie die App, aber deckend — darunter liegt
|
|
die (noch leere) App-Oberfläche, die nicht durchscheinen darf. */
|
|
html.glas .login-seite {
|
|
background:
|
|
radial-gradient(55% 50% at 8% 4%, color-mix(in srgb, var(--glas-hell) 70%, transparent), transparent 70%),
|
|
radial-gradient(45% 45% at 92% 12%, color-mix(in srgb, var(--glas-tief) 26%, transparent), transparent 70%),
|
|
radial-gradient(50% 55% at 72% 96%, color-mix(in srgb, #7fc3b6 26%, transparent), transparent 70%),
|
|
var(--bg);
|
|
}
|
|
|
|
/* ---------- Ohne Glas: Wandtafel, reduzierte Transparenz ---------- */
|
|
html.glas body.wandtafel-aktiv * {
|
|
-webkit-backdrop-filter: none !important;
|
|
backdrop-filter: none !important;
|
|
}
|
|
@media (prefers-reduced-transparency: reduce) {
|
|
html.glas body::before { display: none; }
|
|
html.glas * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
|
|
html.glas {
|
|
--surface: #ffffff; --surface-alt: #fafcfd; --glas-rahmen: #f7f9fb; --glas-dicht: #ffffff;
|
|
}
|
|
}
|
|
|
|
/* Schalter in Einstellungen → Mein Konto (gilt auch ohne html.glas). */
|
|
.settings-glas-schalter { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
|
|
/* Mit Id-Gewicht, weil eine spätere Regel die Aufgabenzeilen wieder auf das
|
|
halbdurchsichtige --surface setzte. Getönte Zeilen (Phasen, Projekt)
|
|
legen ihre Tönung als background-image darüber (plan-styles.css). */
|
|
html.glas #planGanttContainer .gantt-row .gantt-label { background-color: var(--gantt-label-grund); }
|