/* ══════════════════════════════════════════════════════════════════════ shared.css – Gemeinsame Styles für alle Seiten der Lernplattform Florian Stricker · Klavierklasse · PH Heidelberg ══════════════════════════════════════════════════════════════════════ */ /* ── Tabler-Icons-Webfont (gepinnt auf 3.40.0 durch C4) ─────────────── */ /* Lädt den Webfont einmal zentral für die gesamte Plattform. Die einzelnen -Tags in journal/admin.php (Z. 660) und journal/dozent.php (Z. 598) können danach entfernt werden. */ @import url('/tabler-icons.css'); @import url('/fs-toast.css'); /* ── CSS-Variablen ────────────────────────────────────────────────────── */ :root { color-scheme: dark; --bg: #0f0e0c; --surface: #1a1814; --card: #201e1a; --card-active: #fdf6e3; --card-next: #2a2720; --gold: #c9a84c; --gold-rgb: 201, 168, 76; --gold-light: #e8c96a; --gold-dim: rgba(201, 168, 76, 0.12); /* rgba()-Tripel für halbtransparente Hintergrundtöne */ --bg-rgb: 15, 14, 12; /* entspricht --bg #0f0e0c */ --header-tint-rgb: 201, 168, 76; /* Tonfärbung inst-header (Warm: = gold-rgb) */ --text-rgb: 232, 223, 200; /* entspricht --text #e8dfc8 */ --text-muted-rgb: 122, 112, 96; /* entspricht --text-muted #7a7060 */ --text-dark-rgb: 42, 37, 32; /* entspricht --text-dark #2a2520 */ --tint-rgb: 201, 168, 76; /* Theme-Tönung für UI-Flächen (Warm: = gold-rgb), s. v6.4.0-Kommentar unten */ /* --overlay-alpha-dark: einheitliche Deckkraft für Vollbild-Overlays (Count-in u.ä.) im Dark-Mode, für alle drei Dark-Themes gleich (kein Theme-spezifischer Unterschied nötig). War vor v6.4.6 an 8 Stellen uneinheitlich hartcodiert (0.8 bei 5, 0.9 bei 3 Trainern, ohne erkennbaren Grund für den Unterschied). Seit v6.4.7 auf 0.75 wie im light-Mode. */ --overlay-alpha-dark: 0.75; --text: #e8dfc8; --text-muted: #7a7060; --accent: #8b3a2a; --accent-rgb: 139, 58, 42; /* entspricht --accent #8b3a2a, für rgba()-Alpha-Flächen */ --text-dark: #2a2520; /* Kursfarben */ --course-klavier: #7a60a8; --course-klavier-rgb: 122, 96, 168; --course-schupra: #4a7aaa; --course-schupra-rgb: 74, 122, 170; --course-el1: #3a8060; --course-el1-rgb: 58, 128, 96; --course-el2: #a87848; --course-el2-rgb: 168, 120, 72; /* Status */ --success: #3a8060; --success-rgb: 58, 128, 96; /* entspricht --success #3a8060, für rgba()-Alpha-Flächen. Keine eigene Light-Mode-Variante nötig (Light nutzt denselben Wert, anders als Gold). */ --success-light: #5aa888; --success-strong: #2d6650; --danger: #c4402a; --danger-rgb: 196, 64, 42; /* entspricht --danger #c4402a, für rgba()-Alpha-Flächen. Light-Mode-Variante s. :root.light unten (heller/gesättigter abgestimmter Rotton). */ --danger-soft: #e07060; --danger-soft-rgb: 224, 112, 96; /* entspricht --danger-soft #e07060, für rgba()-Alpha-Flächen */ --warning: #e8c46a; } /* ── Dark-Theme-Varianten (v6.2.0, erweitert v6.4.0) ───────────────────── Überschreiben Hintergrund- und Textvariablen sowie (neu, v6.4.0) --tint-rgb für thematisch gefärbte UI-Flächen (Panel-Washes, Hover-/ Active-Flächen, dünne Trennlinien). --gold/--gold-rgb selbst und alle Kurs-/Status-Farben bleiben unverändert — Gold bleibt Markenfarbe für Primär-Buttons, ausgewählte Zustände, Logo, Fokus-Rahmen. dark-theme.php setzt die Klasse auf vor dem ersten Paint. WICHTIG: :root.light steht nach diesen Blöcken, damit es bei gleichzeitig gesetzter Dark-Theme-Klasse + .light gewinnt. ──────────────────────────────────────────────────────────────────────── */ /* Konzerthausnacht: kühles Dunkelblau, Gold bleibt */ :root.dark-konzert { --bg: #0b0d14; --surface: #11141e; --card: #171b2a; --card-next: #1e2438; --card-active: #fafbff; --text: #d4ddf0; --text-muted: #545d78; --text-dark: #171b2a; --bg-rgb: 11, 13, 20; /* entspricht --bg #0b0d14 */ --header-tint-rgb: 110, 135, 200; /* kühles Blau statt Gold-Tint */ --text-rgb: 212, 221, 240; /* entspricht --text #d4ddf0 */ --text-muted-rgb: 84, 93, 120; /* entspricht --text-muted #545d78 */ --text-dark-rgb: 23, 27, 42; /* entspricht --text-dark #171b2a */ --tint-rgb: 110, 135, 200; /* = header-tint-rgb, kühles Blau für UI-Flächen */ } /* Bühne: sehr dunkles Violett, Gold bleibt */ :root.dark-buehne { --bg: #0e0b14; --surface: #141020; --card: #1c1628; --card-next: #231e32; --card-active: #faf8ff; --text: #ddd4f0; --text-muted: #6a5a80; --text-dark: #1c1628; --bg-rgb: 14, 11, 20; /* entspricht --bg #0e0b14 */ --header-tint-rgb: 160, 130, 210; /* Lavendel-Violett — harmoniert mit Bühne-Palette */ --text-rgb: 221, 212, 240; /* entspricht --text #ddd4f0 */ --text-muted-rgb: 106, 90, 128; /* entspricht --text-muted #6a5a80 */ --text-dark-rgb: 28, 22, 40; /* entspricht --text-dark #1c1628 */ --tint-rgb: 160, 130, 210; /* = header-tint-rgb, Lavendel-Violett für UI-Flächen */ } /* Helles Theme — steht bewusst nach den Dark-Theme-Varianten: Bei gleicher Spezifizität gewinnt die spätere Regel. Wenn theme.js .light setzt (Toggle), überschreibt :root.light die Dark-Theme-Variablen auch wenn z.B. .dark-konzert noch auf sitzt. */ :root.light { color-scheme: light; --bg: #d2c8b2; --surface: #e8e2d2; --card: #faf7f0; --card-active: #ffffff; --card-next: #c6bca6; --gold: #836200; --gold-rgb: 131, 98, 0; --gold-light: #a07a10; --gold-dim: rgba(131, 98, 0, 0.1); /* --tint-rgb / --header-tint-rgb fehlten bisher in :root.light (kein Theme-Pendant zu Konzerthausnacht/Bühne), fielen daher auf den dunklen Warm-Wert (201,168,76) zurück — als Textfarbe auf hellem Grund praktisch unlesbar. Hier auf denselben Wert wie --gold-rgb gesetzt, analog zur Dark-Warm-Konvention (--tint-rgb = --gold-rgb). */ --tint-rgb: 131, 98, 0; --header-tint-rgb: 131, 98, 0; /* --overlay-rgb / --overlay-alpha-light: Fläche für Vollbild-Overlays (Count-in u.ä.) im Light-Mode. Dark-Mode nutzt dafür --bg-rgb (Seiten-Hintergrundton, s. --overlay- alpha-dark oben); im Light-Mode wirkt der hellere --surface-Ton lesbarer für die Gold-Ziffer darüber. Alpha war bis v6.4.5 auf 0.95 gesetzt (sogar deckender als Dark-Mode) und ließ dadurch praktisch nichts vom Trainer dahinter durchscheinen — Hell-auf-Hell braucht ohnehin schon weniger Alpha als Dunkel-auf-Dunkel für denselben gefühlten Durchscheineffekt, da der Leuchtdichte-Kontrast geringer ist. Auf 0.75 reduziert. */ --overlay-rgb: 232, 226, 210; --overlay-alpha-light: 0.75; --text: #2a2218; --text-muted: #7a6a50; --accent: #b83020; --accent-rgb: 184, 48, 32; /* entspricht --accent #b83020 Light, für rgba()-Alpha-Flächen */ /* --danger/--danger-rgb: bisher keine eigene Light-Mode-Variante (fiel auf den Dark-Wert #c4402a zurück). Der hier gesetzte Ton #c0392b wurde schon vorher an mehreren Light-Mode-Stellen hartcodiert verwendet (z. B. .ic.red, .sub-delete-btn) — macht das jetzt offiziell, analog zur --gold-Konvention. */ --danger: #c0392b; --danger-rgb: 192, 57, 43; /* Kursfarben Light-Mode — gesättigter als Dark-Mode-Werte */ --course-klavier: #5a3898; --course-schupra: #2a5a8a; --course-el1: #1a6040; --course-el2: #8a5018; } /* ── Light-Theme-Varianten (v6.6.0) ────────────────────────────────────── Beide Varianten setzen IMMER .light + .light-tag/.light-morgen zusammen auf (theme.js). Damit greifen alle :root.light-Regeln der 43 platform-weiten CSS-Dateien weiterhin unverändert — inkl. doc-wrap, tab-bar, gold-overrides in den Materialien. Diese Blöcke überschreiben nur die Variablen, die sich vom Warm-Light unterscheiden. Spezifität :root.light.light-tag > :root.light ✓. ──────────────────────────────────────────────────────────────────────── */ /* Tageslicht: neutrales Warm-Weiß, viel heller als Warm (#d2c8b2) aber gleiche Temperatur — wie weißes Schreibtischpapier unter Tageslicht. Chrome und Dokument-Papier (#faf7f1) harmieren ohne Farbkonflikt. */ :root.light.light-tag { --bg: #f2f0ec; --surface: #f8f7f4; --card: #ffffff; --card-active: #ffffff; --card-next: #e8e6e2; --text: #2a2620; --text-muted: #7a7268; --text-dark: #2a2620; --bg-rgb: 242, 240, 236; --header-tint-rgb: 131, 98, 0; --text-rgb: 42, 38, 32; --text-muted-rgb: 122, 114, 104; --text-dark-rgb: 42, 38, 32; --tint-rgb: 131, 98, 0; --overlay-rgb: 248, 247, 244; } /* Morgen: warmes Rosé-Beige — leicht rötlich-warmer Ton, harmoniert mit dem creme-goldenen Dokument-Papier ohne Farbkonflikt. */ :root.light.light-morgen { --bg: #ede8e2; --surface: #f4f0eb; --card: #faf8f5; --card-active: #ffffff; --card-next: #e4dfd8; --text: #261e18; --text-muted: #7a6558; --text-dark: #261e18; --bg-rgb: 237, 232, 226; --header-tint-rgb: 160, 110, 90; --text-rgb: 38, 30, 24; --text-muted-rgb: 122, 101, 88; --text-dark-rgb: 38, 30, 24; --tint-rgb: 160, 110, 90; --overlay-rgb: 244, 240, 235; } /* ── Reset ────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { max-width: 100vw; overflow-x: hidden; } body { background: var(--bg); color: var(--text); font-family: 'Lato', -apple-system, sans-serif; font-weight: 400; min-height: 100vh; overflow-x: clip; display: flex; flex-direction: column; } /* ── Inst-Header (oberste Zeile: PH · Klavierklasse · Stricker) ──────── */ .inst-header { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 7px 40px; background: rgba(var(--header-tint-rgb), 0.08); border-bottom: 1px solid rgba(var(--header-tint-rgb), 0.2); font-family: 'Lato', sans-serif; font-size: 0.72rem; letter-spacing: 0.1em; color: rgba(var(--gold-rgb), 0.75); position: relative; z-index: 2; } :root.light .inst-header { background: var(--bg); border-bottom-color: rgba(131, 98, 0, 0.12); color: var(--gold); } /* inst-row: auf Desktop transparent (Kinder sind direkte flex-children) */ .inst-row { display: contents; } .inst-center { position: absolute; left: 50%; transform: translateX(-50%); font-style: italic; letter-spacing: 0.12em; } /* ── Main-Header (zweite Zeile: Logo · Nav · Buttons) ────────────────── */ .main-header { padding: 18px 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap; border-bottom: 1px solid rgba(var(--header-tint-rgb), 0.15); background: rgba(var(--bg-rgb), 0.95); backdrop-filter: blur(10px); position: relative; z-index: 2; } :root.light .main-header { background: var(--surface); border-bottom-color: rgba(131, 98, 0, 0.12); } /* ── User-Info (rechts im Header) ────────────────────────────────────── */ .user-info { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--text-muted); } .user-info strong { color: var(--gold); } :root.light .user-info { color: var(--text-muted); } /* ── Logo ─────────────────────────────────────────────────────────────── */ .logo { font-family: 'Playfair Display', Georgia, serif; font-size: 1.1rem; letter-spacing: 0.12em; color: var(--gold); text-transform: uppercase; flex-shrink: 0; text-decoration: none; } .logo span, .logo a { color: var(--text); font-weight: 400; text-decoration: none; } .logo a { color: inherit; } .logo-sub { color: var(--text-muted); font-size: 0.85em; } :root.light .logo span { color: #5a5040; } /* ── Nav-Links ────────────────────────────────────────────────────────── */ .nav-links { display: flex; align-items: center; justify-content: flex-start; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-shrink: 1; flex-wrap: nowrap; min-width: 0; } .nav-links::-webkit-scrollbar { display: none; } /* Dropdown sichtbar machen trotz overflow-x:auto – nur wenn per Klick geöffnet. overflow-x:clip statt overflow:visible: beschneidet horizontal (kein Layout-Shift, kein Wegdrücken von header-right), lässt aber das Menü vertikal durchscheinen. */ .nav-links:has(.el-dropdown-wrap.open) { overflow-x: clip; overflow-y: visible; } /* Im Journal-Header (flex-row): Nav nach rechts schieben */ .main-header .nav-links { margin-left: auto; } .nav-link { padding: 4px 11px; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; border: 1px solid transparent; border-radius: 3px; transition: all 0.18s; white-space: nowrap; flex-shrink: 0; } @media (hover: hover) { .nav-link:hover { color: var(--gold); border-color: rgba(201, 168, 76, 0.3); } } .nav-link:active { color: var(--gold); border-color: rgba(201, 168, 76, 0.3); } /* Aktiv: nur goldene Farbe, kein Rahmen/Hintergrund */ .nav-link.active { color: var(--gold); } :root.light .nav-link { color: var(--text-muted); } @media (hover: hover) { :root.light .nav-link:hover { color: var(--gold); border-color: rgba(131, 98, 0, 0.25); } } :root.light .nav-link:active { color: var(--gold); border-color: rgba(131, 98, 0, 0.25); } :root.light .nav-link.active { color: var(--gold); font-weight: 700; background: rgba(131, 98, 0, 0.08); border-radius: 3px; } .nav-sep { color: rgba(201, 168, 76, 0.2); font-size: 0.7rem; flex-shrink: 0; } :root.light .nav-sep { color: rgba(131, 98, 0, 0.25); } /* ── EL-Dropdown in der Nav ────────────────────────────────────────── */ .el-dropdown-wrap { position: relative; flex-shrink: 0; } .el-dropdown-btn { padding: 4px 11px; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); background: transparent; border: 1px solid transparent; border-radius: 3px; cursor: pointer; font-family: 'Lato', sans-serif; white-space: nowrap; transition: all 0.18s; } @media (hover: hover) { .el-dropdown-btn:hover { color: var(--gold); border-color: rgba(201, 168, 76, 0.3); } } .el-dropdown-btn:active { color: var(--gold); border-color: rgba(201, 168, 76, 0.3); } .el-dropdown-btn.active { color: var(--gold); } .el-dropdown-menu { display: none; position: absolute; top: 100%; padding-top: 6px; left: 50%; transform: translateX(-50%); background: var(--surface); border: 1px solid rgba(201, 168, 76, 0.2); border-radius: 6px; padding: 8px 0; min-width: 220px; z-index: 200; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } .el-dropdown-wrap.open .el-dropdown-menu { display: block; } .el-dropdown-group { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); padding: 4px 14px 2px; opacity: 0.6; } .el-dropdown-item { display: block; padding: 7px 14px; font-size: 0.78rem; color: var(--text-muted); text-decoration: none; white-space: nowrap; transition: background 0.15s, color 0.15s; } @media (hover: hover) { .el-dropdown-item:hover { background: rgba(201, 168, 76, 0.08); color: var(--gold); } } .el-dropdown-item:active { background: rgba(201, 168, 76, 0.08); color: var(--gold); } .el-dropdown-item.active { color: var(--gold); } :root.light .el-dropdown-btn { color: var(--text-muted); } @media (hover: hover) { :root.light .el-dropdown-btn:hover { color: var(--gold); border-color: rgba(131, 98, 0, 0.25); } } :root.light .el-dropdown-btn:active { color: var(--gold); border-color: rgba(131, 98, 0, 0.25); } :root.light .el-dropdown-btn.active { color: var(--gold); font-weight: 700; background: rgba(131, 98, 0, 0.08); border-radius: 3px; } :root.light .el-dropdown-menu { background: var(--card); border-color: rgba(131, 98, 0, 0.2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } @media (hover: hover) { :root.light .el-dropdown-item:hover { background: rgba(131, 98, 0, 0.06); } } :root.light .el-dropdown-item:active { background: rgba(131, 98, 0, 0.06); } :root.light .el-dropdown-item.active { color: var(--gold); font-weight: 700; background: rgba(131, 98, 0, 0.06); } /* ── Header-Right (Zahnrad, Abmelden, Theme-Toggle) ──────────────────── */ .header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; min-width: 0; } .header-right::-webkit-scrollbar { display: none; } /* ── Globale Formular-Konsistenz ──────────────────────────────────────── */ /* Selects in Journal-Seiten: einheitlich schwarz/dunkel im Dark-Theme, hell im Light-Theme. Trainer-Selects (.ctrl-select) haben eigene Regeln. */ .journal-select, select.nav-select { background: var(--card); border: 1px solid rgba(201, 168, 76, 0.25); border-radius: 3px; color: var(--text); padding: 6px 10px; font-family: 'Lato', sans-serif; font-size: 0.82rem; outline: none; cursor: pointer; color-scheme: dark; } :root.light .journal-select, :root.light select.nav-select { background: var(--card); border-color: rgba(131, 98, 0, 0.2); color-scheme: light; } /* ── Theme-Toggle ─────────────────────────────────────────────────────── */ /* ── Nav-Icon-Buttons: Theme-Toggle & Settings — gleiches visuelles Gewicht ── */ /* Beide gedimmt im Ruhezustand, gold beim Hover, keine Border. color auf dem Container reicht — Tabler setzt kein color auf .ti, das Icon erbt via currentColor. Das Lila kam vom Browser-Default für -Links. */ .theme-toggle, .nav-icon-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; font-size: 1.2rem; line-height: 1; padding: 4px 6px; border-radius: 4px; cursor: pointer; text-decoration: none; color: rgba(201, 168, 76, 0.75); vertical-align: middle; transition: color 0.18s, background 0.18s; } @media (hover: hover) { .theme-toggle:hover, .nav-icon-btn:hover { color: var(--gold); background: rgba(201, 168, 76, 0.08); } } .theme-toggle:active, .nav-icon-btn:active { color: var(--gold); background: rgba(201, 168, 76, 0.08); } :root.light .theme-toggle, :root.light .nav-icon-btn { color: rgba(131, 98, 0, 0.75); } @media (hover: hover) { :root.light .theme-toggle:hover, :root.light .nav-icon-btn:hover { color: var(--gold); background: rgba(131, 98, 0, 0.07); } } :root.light .theme-toggle:active, :root.light .nav-icon-btn:active { color: var(--gold); background: rgba(131, 98, 0, 0.07); } /* ── Gemeinsame Light-Mode-Regeln (Trainer-Komponenten) ──────────────────── */ :root.light .card-next { background: var(--surface); border: 1px solid rgba(131, 98, 0, 0.18); color: var(--text); } :root.light .card-next .chord-root { color: var(--text); } :root.light .card-next .chord-type { color: var(--gold); } :root.light .card-next .label-next { color: rgba(131, 98, 0, 0.5); } :root.light .opt-btn { color: #5a5040; border-color: rgba(131, 98, 0, 0.2); } :root.light .opt-btn.selected { background: rgba(131, 98, 0, 0.1); border-color: var(--gold); color: var(--gold); } :root.light .btn-preset { color: #5a5040; border-color: rgba(131, 98, 0, 0.2); } :root.light .btn-preset.active { background: rgba(131, 98, 0, 0.1); border-color: var(--gold); color: var(--gold); } :root.light .preset-bar { background: rgba(131, 98, 0, 0.04); border-color: rgba(131, 98, 0, 0.12); } :root.light .ctrl-select { background: #fff; border-color: rgba(131, 98, 0, 0.25); color: var(--gold); color-scheme: light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238b6914'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-color: #fff; } /* ── Tap-Visualisierung ─────────────────────────────────────────────────── */ .tap-wrap { display: inline-flex; align-items: center; flex-shrink: 0; } /* ── Responsive: Tablet (max 900px) ──────────────────────────────────── */ @media (max-width: 900px) { .main-header { padding: 12px 20px; } .inst-header { padding: 6px 20px; font-size: 0.68rem; } .user-info { display: none; } } /* ── Responsive: Handy Hochformat (max 600px) ────────────────────────── */ @media (max-width: 600px) { /* inst-header: zweizeilig – PH/Stricker in Zeile 1, Klavierklasse zentriert */ .inst-header { flex-direction: column; align-items: center; gap: 3px; padding: 5px 12px; } .inst-row { display: flex; width: 100%; justify-content: space-between; } .inst-center { position: static; transform: none; } .main-header { padding: 10px 16px; } .logo { font-size: 0.9rem; } .header-right { overflow-x: auto; padding-bottom: 2px; } } /* ── Responsive: kleines Handy (max 480px) ───────────────────────────── */ @media (max-width: 480px) { .logo { font-size: 0.82rem; } .logo-sub { display: none; } } /* ── Metronom-Controls (Akkord-, Kadenz-, Skalen-, Begleit-Trainer) ──────── */ .speed-control { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); flex-wrap: wrap; width: 100%; } .speed-control input[type='range'] { -webkit-appearance: none; flex: 1; min-width: 80px; max-width: 200px; height: 2px; background: rgba(201, 168, 76, 0.3); border-radius: 2px; outline: none; cursor: pointer; } .speed-control input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); cursor: pointer; } .speed-val { color: var(--gold-light); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; align-items: center; cursor: pointer; user-select: none; } /* Fixed-width number slot: always holds exactly 3 digit-widths */ .speed-val #speedNum { display: inline-flex; align-items: center; justify-content: center; width: 3ch; gap: 0.2ch; } /* Tap-stroke spans: slightly narrower than 1ch so gaps are visible */ .tap-stroke { display: inline-block; width: 0.65ch; height: 0; border-bottom: 2px solid currentColor; vertical-align: middle; margin-bottom: 0.05em; flex-shrink: 0; } /* Small gap between number and BPM label */ .bpm-unit { padding-left: 0.5ch; } .speed-val.tapping { color: var(--gold); } /* tap-viz hidden – tap display merged into speedNum */ .tap-viz { display: none; } .btn-adj { background: none; border: 1px solid rgba(201, 168, 76, 0.4); border-radius: 3px; color: var(--gold); font-size: 1rem; line-height: 1; width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; flex-shrink: 0; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } @media (hover: hover) { .btn-adj:hover { background: rgba(201, 168, 76, 0.12); } } .btn-adj:active { background: rgba(201, 168, 76, 0.12); } .btn-tap { background: none; border: 1px solid rgba(201, 168, 76, 0.25); border-radius: 3px; color: var(--text-muted); font-family: 'Lato', sans-serif; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; height: 28px; cursor: pointer; transition: all 0.15s; flex-shrink: 0; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .btn-metro { background: none; border: 1px solid rgba(201, 168, 76, 0.3); border-radius: 3px; color: var(--gold); font-size: 1.1rem; width: 28px; height: 28px; padding: 0; line-height: 26px; /* Inhaltshöhe (28px − 2×1px Border) → zentriert Glyph vertikal */ text-align: center; cursor: pointer; transition: all 0.18s; flex-shrink: 0; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .btn-metro .ti { display: inline; /* zurück auf inline — line-height-Zentrierung braucht kein block */ } /* Icons inside trainer .btn buttons: bump to readable size (buttons use 0.78rem font) */ .btn .ti { font-size: 1em; vertical-align: -0.1em; } @media (hover: hover) { .btn-metro:hover { background: rgba(201, 168, 76, 0.12); border-color: var(--gold); } } .btn-metro:active { background: rgba(201, 168, 76, 0.12); border-color: var(--gold); } .btn-metro.muted { opacity: 0.35; } :root.light .speed-control input[type='range'] { background: rgba(131, 98, 0, 0.2); } :root.light .speed-control input[type='range']::-webkit-slider-thumb { background: var(--gold); } :root.light .btn-adj { border-color: rgba(131, 98, 0, 0.45); color: var(--gold); } :root.light .btn-tap { border-color: rgba(131, 98, 0, 0.3); color: var(--text-muted); } :root.light .btn-metro { border-color: rgba(131, 98, 0, 0.3); color: var(--gold); } /* Landscape-Toggle standardmäßig ausblenden (nur sichtbar wenn inst-header weg) */ .theme-toggle-landscape { display: none; } /* ── Landscape mit wenig Höhe: inst-header ausblenden ────────────────── */ @media (orientation: landscape) and (max-height: 450px) { .inst-header { display: none; } /* Theme-Toggle erscheint im Haupt-Header wenn inst-header versteckt ist */ .theme-toggle-landscape { display: inline-flex !important; } } /* ── Journal-Buttons (shared: index, admin, dozent) ──────────────────── */ /* ── Content-Bereich (Basis für alle Journal-Seiten) ─────────────────── */ .content { flex: 1; width: 100%; margin: 0 auto; position: relative; z-index: 1; } .btn { padding: 5px 12px; border: 1px solid var(--gold); background: transparent; color: var(--gold); font-family: 'Lato', -apple-system, sans-serif; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background 0.2s, color 0.2s; border-radius: 3px; text-decoration: none; display: inline-block; } @media (hover: hover) { .btn:hover { background: var(--gold); color: var(--bg); } } .btn:active { background: var(--gold); color: var(--bg); } .btn-primary { background: var(--gold); color: var(--bg); font-weight: 700; } @media (hover: hover) { .btn-primary:hover { background: var(--gold-light); border-color: var(--gold-light); } } .btn-primary:active { background: var(--gold-light); border-color: var(--gold-light); } .btn-small { padding: 3px 8px; font-size: 0.62rem; } .btn-auth { padding: 10px 14px; font-size: 0.78rem; letter-spacing: 0.08em; margin-top: 8px; } .btn-danger { border-color: var(--danger); color: var(--danger); } @media (hover: hover) { .btn-danger:hover { background: var(--danger); color: #fff; } } .btn-danger:active { background: var(--danger); color: #fff; } .btn-sec { border-color: rgba(201, 168, 76, 0.2); color: var(--text-muted); } @media (hover: hover) { .btn-sec:hover { background: rgba(201, 168, 76, 0.08); color: var(--text); border-color: rgba(201, 168, 76, 0.35); } } .btn-sec:active { background: rgba(201, 168, 76, 0.08); color: var(--text); border-color: rgba(201, 168, 76, 0.35); } :root.light .btn-sec { border-color: rgba(131, 98, 0, 0.2); color: var(--text-muted); } @media (hover: hover) { :root.light .btn-sec:hover { background: rgba(131, 98, 0, 0.07); color: var(--text); } } :root.light .btn-sec:active { background: rgba(131, 98, 0, 0.07); color: var(--text); } :root.light .btn-primary { color: #fff; } @media (hover: hover) { :root.light .btn:hover { color: #fff; } } :root.light .btn:active { color: #fff; } /* ── Badges (shared: admin) ──────────────────────────────────────────── */ .badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; } .badge-admin { background: rgba(122, 96, 168, 0.15); color: #7a60a8; border: 1px solid rgba(122, 96, 168, 0.3); } .badge-dozent { background: rgba(201, 168, 76, 0.12); color: #c9a84c; border: 1px solid rgba(201, 168, 76, 0.3); } .badge-active { background: rgba(var(--success-rgb), 0.15); color: var(--success-light); border: 1px solid rgba(var(--success-rgb), 0.3); } .badge-inactive { background: rgba(var(--accent-rgb), 0.1); color: var(--danger-soft); border: 1px solid rgba(var(--accent-rgb), 0.2); } :root.light .badge-admin { background: rgba(96, 64, 160, 0.1); color: #5030a0; border-color: rgba(96, 64, 160, 0.25); } :root.light .badge-dozent { background: rgba(131, 98, 0, 0.1); color: var(--gold); border-color: rgba(131, 98, 0, 0.25); } :root.light .badge-active { background: rgba(var(--success-rgb), 0.1); color: #2d6650; border-color: rgba(var(--success-rgb), 0.25); } :root.light .badge-inactive { background: rgba(var(--accent-rgb), 0.08); color: var(--accent); border-color: rgba(var(--accent-rgb), 0.2); } /* ── Stat-Row (shared: admin, dozent) ────────────────────────────────── */ .stat-row { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } @media (max-width: 600px) { .stat-row { gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; } } /* ── Feedback-Meldungen (shared: alle Journal-Seiten) ────────────────── */ .msg { padding: 10px 14px; border-radius: 4px; font-size: 0.82rem; margin-bottom: 16px; } .success-msg, .msg-success { padding: 10px 14px; background: rgba(var(--success-rgb), 0.12); border: 1px solid rgba(var(--success-rgb), 0.3); border-radius: 4px; color: var(--success-light); font-size: 0.82rem; margin-bottom: 16px; } .error-msg, .msg-error { padding: 10px 14px; background: rgba(var(--accent-rgb), 0.15); border: 1px solid rgba(var(--accent-rgb), 0.3); border-radius: 4px; color: var(--danger-soft); font-size: 0.82rem; margin-bottom: 16px; } :root.light .success-msg, :root.light .msg-success { background: rgba(var(--success-rgb), 0.08); color: var(--success-strong); } :root.light .error-msg, :root.light .msg-error { background: rgba(var(--accent-rgb), 0.08); color: var(--accent); } /* ── Toast-Notifications ─────────────────────────────────────────────── */ /* fs-toast.css wird per @import oben in dieser Datei geladen. */ /* ── Service-Worker-Update-Toast (sw-register.js) ───────────────────── Eigene ID, analog zu #fs-toast, aber: bleibt sichtbar bis zum Klick, trägt einen "Jetzt neu laden"-Button. Farben wie fs-toast--warning. */ #sw-update-toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px); display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 20px; border-radius: 8px; font-size: 0.85rem; font-weight: 500; background: #3a2e10; color: #e8c46a; border: 1px solid #7a5e20; opacity: 0; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; z-index: 9999; max-width: min(420px, 90vw); } #sw-update-toast.sw-update-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .sw-update-toast__text { flex: 1; } .sw-update-toast__btn { background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 5px; padding: 6px 12px; font-size: 0.82rem; font-family: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; } @media (hover: hover) { .sw-update-toast__btn:hover:not(:disabled) { background: rgba(201, 168, 76, 0.12); } } .sw-update-toast__btn:active:not(:disabled) { background: rgba(201, 168, 76, 0.12); } .sw-update-toast__btn:disabled { opacity: 0.6; cursor: default; } :root.light #sw-update-toast { background: #f0e5c0; color: #7a5a10; border-color: rgba(160, 120, 20, 0.4); } @media (hover: hover) { :root.light .sw-update-toast__btn:hover:not(:disabled) { background: rgba(201, 168, 76, 0.12); } } :root.light .sw-update-toast__btn:active:not(:disabled) { background: rgba(201, 168, 76, 0.12); } /* ── Action-Button (Text-Label + optionales Icon, Border im Ruhezustand) ── */ /* Für Aktionen wie "Bearbeiten", "PDF", "Löschen" — hat immer Label-Text. Vereinheitlicht: btn-pdf, et-edit-btn, sp-edit-btn, pp-act-btn → .action-btn */ .action-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid rgba(201, 168, 76, 0.25); border-radius: 4px; background: none; color: var(--text-muted); font-family: 'Lato', sans-serif; font-size: 0.72rem; letter-spacing: 0.06em; text-decoration: none; cursor: pointer; transition: border-color 0.18s, color 0.18s, background 0.18s; white-space: nowrap; } @media (hover: hover) { .action-btn:hover { border-color: rgba(201, 168, 76, 0.5); color: var(--gold); background: rgba(201, 168, 76, 0.07); } } .action-btn:active { border-color: rgba(201, 168, 76, 0.5); color: var(--gold); background: rgba(201, 168, 76, 0.07); } .action-btn.active { border-color: var(--gold); color: var(--gold); background: rgba(201, 168, 76, 0.07); } .action-btn--danger { border-color: rgba(var(--danger-rgb), 0.5); color: var(--danger); } @media (hover: hover) { .action-btn--danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); } } .action-btn--danger:active { background: var(--danger); color: #fff; border-color: var(--danger); } :root.light .action-btn { border-color: rgba(131, 98, 0, 0.2); color: var(--text-muted); } @media (hover: hover) { :root.light .action-btn:hover { border-color: rgba(131, 98, 0, 0.5); color: var(--gold); } } :root.light .action-btn:active { border-color: rgba(131, 98, 0, 0.5); color: var(--gold); } :root.light .action-btn.active { border-color: var(--gold); color: var(--gold); } :root.light .action-btn--danger { border-color: rgba(184, 48, 32, 0.5); color: var(--danger); } @media (hover: hover) { :root.light .action-btn--danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); } } :root.light .action-btn--danger:active { background: var(--danger); color: #fff; border-color: var(--danger); } /* ── Dashboard Icon-Badge (36×36px, farbcodiert nach Kachel-Typ) ─────── */ .card-icon-badge { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: 12px; flex-shrink: 0; /* Default: Gold */ background: rgba(201, 168, 76, 0.1); border: 1px solid rgba(201, 168, 76, 0.2); color: var(--gold); } .card-icon-badge--violet { background: rgba(122, 96, 168, 0.12); border-color: rgba(122, 96, 168, 0.25); color: #7a60a8; } .card-icon-badge--green { background: rgba(var(--success-rgb), 0.12); border-color: rgba(var(--success-rgb), 0.25); color: var(--success-light); } .card-icon-badge--orange { background: rgba(168, 120, 72, 0.12); border-color: rgba(168, 120, 72, 0.25); color: #a87848; } .card-icon-badge--rose { background: rgba(var(--success-rgb), 0.12); border-color: rgba(var(--success-rgb), 0.25); color: var(--success-light); } .card-icon-badge--slate { background: rgba(168, 120, 72, 0.12); border-color: rgba(168, 120, 72, 0.25); color: #a87848; } .card-icon-badge--red { background: rgba(var(--danger-soft-rgb), 0.12); border-color: rgba(var(--danger-soft-rgb), 0.25); color: var(--danger-soft); } :root.light .card-icon-badge { background: rgba(131, 98, 0, 0.12); border-color: rgba(131, 98, 0, 0.22); color: var(--gold); } :root.light .card-icon-badge--violet { background: rgba(96, 64, 160, 0.12); border-color: rgba(96, 64, 160, 0.25); color: #5030a0; } :root.light .card-icon-badge--green { background: rgba(26, 106, 72, 0.12); border-color: rgba(26, 106, 72, 0.25); color: #1a6a48; } :root.light .card-icon-badge--orange { background: rgba(180, 80, 0, 0.1); border-color: rgba(180, 80, 0, 0.25); color: #a03800; } :root.light .card-icon-badge--rose { background: rgba(26, 106, 72, 0.12); border-color: rgba(26, 106, 72, 0.25); color: #1a6a48; } :root.light .card-icon-badge--slate { background: rgba(138, 88, 32, 0.12); border-color: rgba(138, 88, 32, 0.25); color: #8a5820; } :root.light .card-icon-badge--red { background: rgba(var(--danger-rgb), 0.12); border-color: rgba(var(--danger-rgb), 0.25); color: #b02818; } /* ══════════════════════════════════════════════════════════════════════ D16 — Icon-Utility-Klassen für Tabler-Icons ══════════════════════════════════════════════════════════════════════ */ /* ── Icon-Basis-Styling für ────────────────────── */ /* Tabler bringt die Glyphen mit; diese Regeln sorgen für saubere Ausrichtung, currentColor-Erbung und vorhersagbares Verhalten. */ .ti { display: inline-block; vertical-align: -0.125em; line-height: 1; flex-shrink: 0; } /* ── Größen-Varianten ─────────────────────────────────────────────────── */ /* Default ist 1em (folgt der Schriftgröße der Umgebung). Diese Klassen für explizite Icon-Größen: */ .ti-sm { font-size: 0.95rem; } /* kleine Inline-Status (z.B. ✓, ●) */ .ti-md { font-size: 1.15rem; } /* Action-Buttons (Standardgröße) */ .ti-lg { font-size: 1.5rem; } /* Sektion-Header-Icons */ .ti-xl { font-size: 2rem; } /* Empty-State / Erfolgsanzeige */ /* ── Icon-Button (28×28 Klickfläche, mobile-tauglich) ─────────────────── */ /* Wiederverwendbare Klasse für die per-Datei wiederholten Action-Buttons (z.B. .tb-entry-actions, .zl-item-actions, .et-..., .se-tl-del). Mindestens 28px Klickfläche für Touch (vgl. AUDIT D16). Kein Border im Ruhezustand — erscheint beim Hover. */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 28px; min-height: 28px; padding: 3px 8px; background: none; border: none; border-radius: 6px; color: var(--text-muted); font: inherit; font-size: 1rem; line-height: 1; text-decoration: none; cursor: pointer; transition: background 0.15s, color 0.15s; } @media (hover: hover) { .icon-btn:hover, .icon-btn:focus-visible { color: var(--gold); background: rgba(201, 168, 76, 0.1); outline: none; } } .icon-btn:active { color: var(--gold); background: rgba(201, 168, 76, 0.1); } .icon-btn:focus-visible { color: var(--gold); background: rgba(201, 168, 76, 0.1); outline: none; } .icon-btn:disabled, .icon-btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; } /* Variante: Icon ohne Begleittext (kompakt, nur Icon) */ .icon-btn--icon-only { width: 30px; height: 30px; padding: 0; gap: 0; } @media (hover: hover) { .icon-btn--danger:hover, .icon-btn--danger:focus-visible { color: var(--danger); background: rgba(180, 70, 60, 0.1); } } .icon-btn--danger:active { color: var(--danger); background: rgba(180, 70, 60, 0.1); } /* Variante: Explizite Border im Ruhezustand (für Wochennavigation, Add-Buttons) */ .icon-btn--bordered { border: 1px solid rgba(201, 168, 76, 0.2); color: var(--text-muted); } @media (hover: hover) { .icon-btn--bordered:hover, .icon-btn--bordered:focus-visible { color: var(--gold); background: rgba(201, 168, 76, 0.1); border-color: rgba(201, 168, 76, 0.4); } } .icon-btn--bordered:active { color: var(--gold); background: rgba(201, 168, 76, 0.1); border-color: rgba(201, 168, 76, 0.4); } /* Light-Mode-Anpassung */ :root.light .icon-btn { color: var(--text-muted); } @media (hover: hover) { :root.light .icon-btn:hover, :root.light .icon-btn:focus-visible { background: rgba(131, 98, 0, 0.08); color: var(--gold); } :root.light .icon-btn--danger:hover, :root.light .icon-btn--danger:focus-visible { color: var(--danger); background: rgba(var(--danger-rgb), 0.1); } } :root.light .icon-btn:active { background: rgba(131, 98, 0, 0.08); color: var(--gold); } :root.light .icon-btn--danger:active { color: var(--danger); background: rgba(var(--danger-rgb), 0.1); } :root.light .icon-btn--bordered { border-color: rgba(131, 98, 0, 0.2); } @media (hover: hover) { :root.light .icon-btn--bordered:hover, :root.light .icon-btn--bordered:focus-visible { border-color: rgba(131, 98, 0, 0.4); background: rgba(131, 98, 0, 0.08); color: var(--gold); } } :root.light .icon-btn--bordered:active { border-color: rgba(131, 98, 0, 0.4); background: rgba(131, 98, 0, 0.08); color: var(--gold); } /* ── Sektion-Header-Icon (für h1/h2/h3/div mit führendem Icon) ───────── */ /* Verwendung: Container bekommt display:flex + align-items:baseline (Headings) oder align-items:center (kleinere Labels). Das Icon braucht kein vertical-align. Muster:

Übeziele

Text
*/ .section-icon { flex-shrink: 0; color: var(--gold); font-size: 0.9em; /* etwas kleiner als der umgebende Text — wirkt harmonischer */ } .section-icon--top { margin-top: 0.2em; } /* Wiederverwendbare Flex-Helper für Sektion-Headings mit Icon */ .section-heading, h1.section-heading, h2.section-heading, h3.section-heading { display: flex; align-items: baseline; gap: 0.4em; } .section-heading--top { align-items: flex-start; } /* ══════════════════════════════════════════════════════════════════════ Kontext-Ebenen — layer-1 / layer-2 ══════════════════════════════════════════════════════════════════════ Zentrales Farbsystem für Container + Eingabefelder. Prinzip: Inputs immer eine Stufe sunken (kontrastreicher als Container). layer-1 → Haupt-Panels, Sections, Formular-Container Dark: Container = --surface · Inputs = --bg Light: Container = --card · Inputs = --surface layer-2 → eingebettete Box innerhalb layer-1 Dark: Container = --card · Inputs = --surface Light: Container = --surface · Inputs = --card ── SO WIRD LAYER-1 EINGEBAUT ──────────────────────────────────────── HTML: class="meine-klasse layer-1" auf dem Container-Div CSS — Container-Klasse bereinigen: • background / background-color → entfernen (layer-1 übernimmt) • :root.light .klasse { background: … } → entfernen oder auf border-color reduzieren CSS — Inputs innerhalb des Containers: • background / background-color → entfernen (layer-1 übernimmt) • color: var(--text) → entfernen (layer-1 übernimmt) • outline: none → entfernen (layer-1 übernimmt) • :root.light input { background: … } → entfernen • border-color in :root.light behalten (gold-Abstufung bleibt) Sonderfälle: •