/* ===================================================================== Skibums Timing System — Zentrale Styles (Single Source of Truth) --------------------------------------------------------------------- Alle Marken-/Format-Vorgaben aus dem Style Guide an EINER Stelle. Zentrale Änderung: Werte hier in :root anpassen — sie gelten dann auf allen Seiten, die diese Datei einbinden. Einbinden: Aktivieren: ... (Basis-Styles greifen nur im .sg-Scope, damit noch nicht migrierte Seiten unverändert bleiben) ===================================================================== */ :root { /* ---- Marke: Puffin's Bill (Orange) = Aktion/Akzent ---- */ --orange: #E4562A; --orange-strong: #C2431C; /* kleiner weißer Text auf Orange */ --orange-tint: #FBE2D6; --on-orange: #FFFFFF; /* ---- Marke: Electric Blue Lemonade (Blau) = Sekundär/Links ---- */ --blue: #0B5FAF; --blue-strong: #084A88; --blue-tint: #D8E8F7; --blue-pale: #E8F2FC; /* sehr helles Blau: Tabellen-Kopfzeilen */ --on-blue: #FFFFFF; /* ---- Neutrale (kühl, eisgetönt) ---- */ --snow: #F4F5F7; /* hinterster Hintergrund / Seite */ --surface: #FFFFFF; /* Kachel-Oberfläche */ --surface-2: #EEF2F6; /* verschachtelt: Vorschau, Insets */ --ink: #12161B; /* Text */ --ink-soft: #4A5561; /* Sekundärtext, Labels */ --ink-faint: #77828F; /* Hinweise, deaktiviert */ --line: #DCE3EA; /* Rahmen, Zeilentrenner */ /* ---- Semantik (Zustand, getrennt vom Akzent) ---- */ --go: #2E7D32; /* Heller Grundton fuer "aktiv" — analog zu --blue-pale. Gedacht als Flaeche hinter einer Zeile, die gerade laeuft (Live-Uebersicht). NICHT fuer leere Platzhalter verwenden: Gruen heisst aktiv, und ein leerer Platz ist kein aktiver Zustand. */ --go-pale: #E8F5E9; --stop: #C62828; --warn: #B26A00; /* ---- Favorit (eigener Ton, bewusst getrennt von --warn) ---- */ --gold: #B8860B; --gold-strong: #8F6A08; /* ---- Manuell/Leitung (Violett) — Rollen-Tag und manuelle Ereignisse im Event Log. Bewusst keine der Semantik-Farben: eine Handeingabe ist weder Erfolg noch Fehler. ---- */ --violet: #6A1B9A; /* ---- Form ---- */ --radius: 10px; /* Kacheln/Karten */ --radius-sm: 8px; /* Tags, Badges, Buttons, Felder */ --shadow: 0 1px 2px rgba(18,22,27,.06), 0 6px 20px rgba(18,22,27,.06); /* Schleier hinter einer Kachel ueber der Seite (.sg-modal). Eigener Token, weil er sich NICHT mit dem Theme umdrehen darf: aus color-mix auf --ink gebaut wurde er im dunklen Theme hell und legte einen weissen Nebel ueber die dunkle Seite. Abdunkeln muss er in beiden Themes, im dunklen sogar etwas kraeftiger -- dort ist der Abstand zwischen Seite und Kachel kleiner. */ --scrim: rgba(18, 22, 27, .68); /* ---- Spalten-Board (TopBar + Kachel-Grids mit umschaltbarer Spaltenzahl) ---- --sg-col-base-w = heutige 1-Spalten-Breite (.container max-width), bleibt bei 1 Spalte unverändert. --sg-col-shrink-max = wie stark eine Spalte bei Platzmangel höchstens schrumpfen darf, bevor auf horizontales Scrollen umgeschaltet wird (0.20 = max. 20%, konfigurierbar an dieser einen Stelle). --sg-col-gap = Abstand ZWISCHEN den Spalten (.sg-col-board gap) — hier zentral einstellen, nicht pro Board/Seite. */ --sg-col-base-w: 800px; --sg-col-shrink-max: 0.20; --sg-col-gap: 16px; /* ---- Typografie ---- */ --ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace; --accent: var(--orange); } /* Dark-Theme über System-Einstellung … */ @media (prefers-color-scheme: dark) { :root { --orange: #F47B4E; --orange-strong: #F9946E; --orange-tint: #3A241B; --on-orange: #1B0F09; --blue: #4D9BE0; --blue-strong: #7FB8EC; --blue-tint: #15293A; --blue-pale: #0C1520; --on-blue: #0A1622; --snow: #12161B; --surface: #1A2027; --surface-2: #222A33; --ink: #EAF0F6; --ink-soft: #A7B3C0; --ink-faint: #78848F; --line: #2B333D; --go: #5CC46A; --go-pale: #14251A; --stop: #F26D6D; --warn: #F0A73D; --gold: #E0B23D; --gold-strong: #F0C863; --violet: #A96BD0; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 26px rgba(0,0,0,.45); --scrim: rgba(0, 0, 0, .72); } } /* … und explizit umschaltbar (gewinnt über die Media-Query) */ :root[data-theme="light"] { --orange: #E4562A; --orange-strong: #C2431C; --orange-tint: #FBE2D6; --on-orange: #FFFFFF; --blue: #0B5FAF; --blue-strong: #084A88; --blue-tint: #D8E8F7; --blue-pale: #E8F2FC; --on-blue: #FFFFFF; --snow: #F4F5F7; --surface: #FFFFFF; --surface-2: #EEF2F6; --ink: #12161B; --ink-soft: #4A5561; --ink-faint: #77828F; --line: #DCE3EA; --go: #2E7D32; --go-pale: #E8F5E9; --stop: #C62828; --warn: #B26A00; --gold: #B8860B; --gold-strong: #8F6A08; --violet: #6A1B9A; --shadow: 0 1px 2px rgba(18,22,27,.06), 0 6px 20px rgba(18,22,27,.06); --scrim: rgba(18, 22, 27, .68); } :root[data-theme="dark"] { --orange: #F47B4E; --orange-strong: #F9946E; --orange-tint: #3A241B; --on-orange: #1B0F09; --blue: #4D9BE0; --blue-strong: #7FB8EC; --blue-tint: #15293A; --blue-pale: #0C1520; --on-blue: #0A1622; --snow: #12161B; --surface: #1A2027; --surface-2: #222A33; --ink: #EAF0F6; --ink-soft: #A7B3C0; --ink-faint: #78848F; --line: #2B333D; --go: #5CC46A; --stop: #F26D6D; --warn: #F0A73D; --gold: #E0B23D; --gold-strong: #F0C863; --violet: #A96BD0; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 26px rgba(0,0,0,.45); --scrim: rgba(0, 0, 0, .72); } /* ===================================================================== BASIS — greift nur unter .sg (Opt-in via ) ===================================================================== */ .sg { background: var(--snow); color: var(--ink); font-family: var(--ui); line-height: 1.6; -webkit-font-smoothing: antialiased; margin: 0; } .sg-container { max-width: 900px; margin: 0 auto; padding: 24px; } .sg h1, .sg h2, .sg h3, .sg h4 { color: var(--ink); text-wrap: balance; } .sg h1 { font-size: 2em; font-weight: 800; letter-spacing: -.01em; margin: 0 0 4px; } /* Headlines nach Style Guide: Ink, fett, keine Markenfarbe, kein Icon. Abschnittstitel mit ruhiger Bottom-Linie statt farbigem Balken. */ .sg h2 { font-size: 1.5em; font-weight: 800; color: var(--ink); margin-top: 28px; padding-bottom: .3em; border-bottom: 1px solid var(--line); } .sg h3 { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin-top: 18px; } .sg p { margin: .6em 0; } .sg a { color: var(--blue); text-decoration: none; font-weight: 600; } .sg a:hover { color: var(--blue-strong); text-decoration: underline; } .sg code { background: var(--surface-2); color: var(--ink); padding: 2px 6px; border-radius: 4px; font-family: var(--mono); font-size: .9em; } .sg hr { border: none; border-top: 1px solid var(--line); margin: 24px 0; } .sg :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .sg .date-badge { color: var(--ink-soft); font-size: .9em; font-weight: 500; } /* ===================================================================== KOMPONENTEN — überall verwendbar (klassenbasiert, kein Scope nötig) ===================================================================== */ /* Kopfleiste / Navigation */ .sg-topnav { margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 15px; } .sg-topnav a { color: var(--blue); text-decoration: none; font-weight: 600; } .sg-topnav a:hover { text-decoration: underline; } /* Karte / Kachel */ .sg-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin: 18px 0; } /* Kachel-Titel nach Style Guide: Ink, fett, 1.15rem, keine Markenfarbe, kein farbiger Balken. Gilt auch für die erste Überschrift in einer Kachel, damit bestehendes Markup automatisch passt. */ .sg-card__title, .sg-card > h2:first-child, .sg-card > h3:first-child, .sg-card > h4:first-child { font-weight: 700; font-size: 1.15rem; color: var(--ink); margin: 0 0 12px; padding: 0; border: none; text-transform: none; letter-spacing: normal; text-wrap: balance; } /* Karte mit Akzent-Kante (ersetzt frühere rule-box / live-status-card) */ .sg-accent { border-left: 5px solid var(--blue); } .sg-accent--orange { border-left-color: var(--orange); } .sg-accent--go { border-left-color: var(--go); } .sg-accent--stop { border-left-color: var(--stop); } /* Tabelle: Kopfzeile hellblau mit runden oberen Ecken, Zeilen durch leichte Linie getrennt, Hover */ .sg-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 16px 0; font-size: .95em; } .sg-table th { text-align: left; background: var(--blue-pale); color: var(--ink-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; padding: 10px; border-bottom: 1px solid var(--line); } .sg-table thead th:first-child { border-top-left-radius: var(--radius-sm); } .sg-table thead th:last-child { border-top-right-radius: var(--radius-sm); } .sg-table td { padding: 10px; border-bottom: 1px solid var(--line); } .sg-table tbody tr { transition: background .12s ease; } .sg-table tbody tr:hover { background: color-mix(in srgb, var(--blue) 7%, var(--surface)); } .sg-table tbody tr:last-child td { border-bottom: none; } .sg-table .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; } /* Buttons */ .sg-btn { font: inherit; font-weight: 700; font-size: .9rem; border-radius: var(--radius-sm); padding: .6rem 1.1rem; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; } .sg-btn--primary { background: var(--orange-strong); color: var(--on-orange); } .sg-btn--primary:hover { filter: brightness(1.05); } .sg-btn--secondary { background: var(--blue); color: var(--on-blue); } .sg-btn--secondary:hover { background: var(--blue-strong); } .sg-btn--ghost { background: transparent; color: var(--blue); border-color: var(--blue); } .sg-btn--danger { background: transparent; color: var(--stop); border-color: color-mix(in srgb, var(--stop) 50%, transparent); } .sg-btn--neutral { background: var(--surface-2); color: var(--ink); border-color: var(--line); } .sg-btn--neutral:hover { background: var(--line); } .sg-btn--sm { padding: .3rem .7rem; font-size: .8rem; } /* Symbol-Buttons (Soft-Tint) — Add/Edit/Delete/Admin für Tabellen & Kacheln. Nur die Klasse setzen; das Icon kommt per CSS-Mask, eingefärbt in der Aktionsfarbe. Farb-Logik: Add = Orange (primär), Edit/Admin = Blau (interaktiv), Delete = Rot (destruktiv). Zustände: Standard 14% Tint -> Hover 24% -> Aktiv/Gedrückt 34% + kräftigerer Text (--act-strong). Inaktiv: neutrale Fläche/Text, kein Hover/Klick (per :disabled oder [aria-disabled="true"]). */ .sg-iconbtn { --act: var(--blue); --act-strong: var(--blue-strong); -webkit-appearance: none; appearance: none; cursor: pointer; padding: 0; border: none; display: inline-flex; align-items: center; justify-content: center; /* Innerer Abstand Icon<->Rand = 2/3 des ursprünglichen Werts (8.5px -> ~5.5px), dadurch kompakteres Feld und niedrigere Zeilenhöhe in Tabellen. */ width: 30px; height: 30px; border-radius: var(--radius-sm); color: var(--act); background: color-mix(in srgb, var(--act) 14%, transparent); transition: background .13s ease, color .13s ease; } .sg-iconbtn:hover { background: color-mix(in srgb, var(--act) 24%, transparent); } .sg-iconbtn:active { background: color-mix(in srgb, var(--act) 34%, transparent); color: var(--act-strong); } .sg-iconbtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .sg-iconbtn:disabled, .sg-iconbtn[aria-disabled="true"] { color: var(--ink-faint); background: var(--surface-2); cursor: not-allowed; pointer-events: none; } .sg-iconbtn::before { content: ""; width: 19px; height: 19px; background: currentColor; -webkit-mask: var(--sg-icon) center / contain no-repeat; mask: var(--sg-icon) center / contain no-repeat; } .sg-iconbtn + .sg-iconbtn { margin-left: 4px; } /* Innerer Abstand = 2/3 des ursprünglichen Werts (7px -> ~4.5px) */ .sg-iconbtn--sm { width: 25px; height: 25px; } .sg-iconbtn--sm::before { width: 16px; height: 16px; } .sg-iconbtn--add { --act: var(--orange); --act-strong: var(--orange-strong); --sg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); } .sg-iconbtn--edit { --act: var(--blue); --act-strong: var(--blue-strong); --sg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4z'/%3E%3Cpath d='M14 6l4 4'/%3E%3C/svg%3E"); } .sg-iconbtn--del { --act: var(--stop); --act-strong: var(--stop); --sg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3Cpath d='M6 7l1.2 13a1 1 0 0 0 1 .9h7.6a1 1 0 0 0 1-.9L18 7'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E"); } .sg-iconbtn--admin { --act: var(--blue); --act-strong: var(--blue-strong); --sg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z'/%3E%3Cpath d='M9.5 12l1.8 1.8L15 10'/%3E%3C/svg%3E"); } /* Logout: neutral (Ink-soft), keine Marken-/Statusfarbe — Verlassen der Sitzung ist weder Aktion noch Fehler. Aktiv/Gedrückt geht dezent Richtung Ink, nicht Rot (keine "Gefahr"). */ .sg-iconbtn--logout { --act: var(--ink-soft); --act-strong: var(--ink); --sg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E"); } /* Details/Home: reine Navigation, keine Statusänderung -> Blau, wie Edit/Admin. */ .sg-iconbtn--details { --act: var(--blue); --act-strong: var(--blue-strong); --sg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Ccircle cx='12' cy='7.5' r='0.9' fill='%23000' stroke='none'/%3E%3C/svg%3E"); } .sg-iconbtn--home { --act: var(--blue); --act-strong: var(--blue-strong); --sg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5L12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M9 21v-7h6v7'/%3E%3C/svg%3E"); } /* Bug/Feedback-Board: BLAU, nicht Rot. Das Symbol zeigt einen Käfer, die Aktion ist aber der Sprung auf eine Übersichtsseite — also Navigation. Rot ist hier reserviert für Destruktives (Löschen); ein Fehlerbericht ist kein Schaden, sondern ein Hinweis. Käfer aus Grundformen: Körper als Ellipse, Trennlinie, zwei Fühler, drei Beinpaare. */ .sg-iconbtn--bug { --act: var(--blue); --act-strong: var(--blue-strong); --sg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='13' rx='5' ry='6.5'/%3E%3Cpath d='M12 8.5v10'/%3E%3Cpath d='M9.6 7.2L8 4.5'/%3E%3Cpath d='M14.4 7.2L16 4.5'/%3E%3Cpath d='M7 10L3.5 8.5'/%3E%3Cpath d='M7 13.5H3.5'/%3E%3Cpath d='M7.4 17L4 18.8'/%3E%3Cpath d='M17 10l3.5-1.5'/%3E%3Cpath d='M17 13.5h3.5'/%3E%3Cpath d='M16.6 17l3.4 1.8'/%3E%3C/svg%3E"); } /* Vollbild: Anzeigetafel-Ansicht einer Kachel. BLAU wie die uebrige Navigation — Vergroessern ist weder die primaere Aktion einer Ansicht (Orange) noch destruktiv (Rot), sondern ein Wechsel der Darstellung. Umschalter: .is-active zeigt das Symbol zum Verlassen (Pfeile nach innen). Die Klasse per classList.toggle() setzen, NIE className/textContent ueberschreiben — das reisst die sg-*-Klassen heraus. */ .sg-iconbtn--expand { --act: var(--blue); --act-strong: var(--blue-strong); --sg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H4v5'/%3E%3Cpath d='M15 4h5v5'/%3E%3Cpath d='M20 15v5h-5'/%3E%3Cpath d='M4 15v5h5'/%3E%3C/svg%3E"); } .sg-iconbtn--expand.is-active { --sg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h5V4'/%3E%3Cpath d='M20 9h-5V4'/%3E%3Cpath d='M15 20v-5h5'/%3E%3Cpath d='M9 20v-5H4'/%3E%3C/svg%3E"); } /* Subscribe/Favorite: Umschalter, nicht nur Aktion. .is-active schaltet Farbe UND Icon (Outline -> gefüllt) um; Klasse per JS auf Klick togglen, z.B.: btn.classList.toggle('is-active'); btn.setAttribute('aria-pressed', btn.classList.contains('is-active')); */ .sg-iconbtn--subscribe { --act: var(--ink-soft); --act-strong: var(--ink); --sg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6z'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E"); } .sg-iconbtn--subscribe.is-active { --act: var(--go); --act-strong: var(--go); --sg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6z' fill='%23000' stroke='none'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E"); } .sg-iconbtn--favorite { --act: var(--ink-soft); --act-strong: var(--ink); --sg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.5 5.5 6 .7-4.4 4 1.2 6-5.3-3-5.3 3 1.2-6-4.4-4 6-.7z'/%3E%3C/svg%3E"); } .sg-iconbtn--favorite.is-active { --act: var(--gold); --act-strong: var(--gold-strong); --sg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.5 5.5 6 .7-4.4 4 1.2 6-5.3-3-5.3 3 1.2-6-4.4-4 6-.7z'/%3E%3C/svg%3E"); } /* Ein-/Ausklappen: neutraler Chevron, der sich um 90° dreht (zeigt rechts = zu, zeigt runter = offen) statt Text/Icon zu tauschen. Für rein visuelle Chevrons (kein eigener Klick-Handler, z.B. als Teil einer klickbaren Kopfzeile) als statt