/* ========================================================================== # 1. GLOBALE VARIABLEN & COLOR-THEMES Hier werden die zentralen Farbwerte definiert. Sie passen sich automatisch an, wenn dem die Klasse "dark" hinzugefügt wird. ========================================================================== */ :root { --bg: #f5f7fa; --card: #ffffff; --text: #1c1c1c; --border: #e2e8f0; } body.dark { --bg: #121417; --card: #1f2329; --text: #f4f4f4; --border: #333; } /* ========================================================================== # 2. SCHRIFTARTEN (TYPOGRAFIE) Lädt die lokale Schriftart 'Roboto Mono' für die Stoppuhr-Zahlen. ========================================================================== */ @font-face { font-family: 'Roboto Mono'; src: url('../fonts/RobotoMono-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Roboto Mono'; src: url('../fonts/RobotoMono-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Roboto Mono'; src: url('../fonts/RobotoMono-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; } /* ========================================================================== # 3. BASIS-LAYOUTS & GRUNDSTYLING Standard-Einstellungen für HTML, Body und allgemeine Klassen. ========================================================================== */ * { box-sizing: border-box; /* Padding & Border werden in die Breite eingerechnet */ } html, body { overflow-x: hidden; /* Verhindert horizontales Scrollen bei Layout-Fehlern */ } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Segoe UI", sans-serif; transition: background 0.3s ease, color 0.3s ease; /* Sanfter Wechsel bei Theme-Umschaltung */ } /* Haupt-Container, der Sidebar und Content umschließt */ .app { display: flex; min-height: 100vh; } /* Der rechte Haupt-Inhaltsbereich */ .content { flex: 1; padding: 40px; } /* Untertitel auf dem Dashboard */ .subtitle { color: #666; } body.dark .subtitle { color: #aaa; } /* ========================================================================== # 4. SIDEBAR (LINKE NAVIGATIONSLEISTE) ========================================================================== */ .sidebar { width: 260px; background: var(--card); padding: 25px; border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; transition: width 0.3s ease; } /* Zustand, wenn die Sidebar eingeklappt ist */ .sidebar.collapsed { width: 80px; } /* Logo-Schriftzug oben in der Sidebar */ .logo { font-size: 26px; font-weight: 700; margin-bottom: 30px; } /* ========================================================================== # 5. CARDS (DASHBOARD-GITTER & CONTAINER) Allgemeine Karten-Elemente für das Dashboard und die Tools. ========================================================================== */ .cards { display: flex; gap: 20px; flex-wrap: wrap; /* Bricht Karten auf schmalen Bildschirmen um */ } /* Kombinierte Standardregeln für alle Kartentypen */ .app-card, .timer-card, .rounds-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 25px; } /* Breite für die Dashboard-Karten */ .app-card { width: 300px; } /* ========================================================================== # 6. STOPUHR & TIMER (SPEZIFISCH) Steuerung für die Ziffern und Bedienelemente der stopwatch.php. ========================================================================== */ .stopwatch-page { display: block; min-height: calc(100vh - 80px); } .stopwatch-wrapper { min-height: 60vh; display: flex; justify-content: center; align-items: center; } .timer-card { text-align: center; } /* Äußeres Display der Zeitanzeige */ #timerDisplay { display: flex; justify-content: center; align-items: flex-end; } /* Haupt-Zeitblock (Stunden, Minuten, Sekunden) */ .time-main { display: flex; align-items: center; } /* Erzwingt, dass alle Ziffern (Zahlen) in Monospace die exakt gleiche Breite haben. Verhindert ein "Flackern" oder "Springen" der Zeitanzeige während des Laufens. */ #timerDisplay span, #hours, #minutes, #seconds, #milliTime { font-family: 'Roboto Mono', monospace; font-variant-numeric: tabular-nums; } #hours, #minutes, #seconds { font-size: 6rem; font-weight: 300; line-height: 1; } /* Der Doppelpunkt zwischen den Zeiteinheiten */ .separator { font-family: 'Roboto Mono', monospace; font-size: 4rem; font-weight: 300; opacity: .65; margin-left: -6px; margin-right: -6px; align-self: center; } /* Die kleineren Millisekunden-Ziffern */ #milliTime { font-size: 2.5rem; line-height: 1; position: relative; bottom: 6px; opacity: .7; } /* Statistik-Bereich unter der Uhr */ .stats { display: flex; justify-content: center; gap: 40px; margin-top: 20px; } /* Knopfreihe (Start, Stop, Runde, etc.) */ .button-row { margin-top: 30px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* Grüne Schaltfläche (Start) */ .btn-start { background: #32d74b; color: white; } .btn-start:hover { background: #28c840; } /* Gelbe/Orange Schaltfläche (Reset / Pause) */ .btn-warning { background: #ffcc00; color: #000; } .btn-warning:hover { background: #e6b800; } /* ========================================================================== # 7. RUNDEN-TABELLE (STOPUHR) Tabelle für die Zwischenzeiten bei Rundenerfassung. ========================================================================== */ .rounds-card { display: none; /* Wird per JS eingeblendet, sobald Runden vorhanden sind */ width: 100%; margin-top: 30px; padding: 20px 30px; box-sizing: border-box; } .rounds-card table { width: 100%; border-collapse: collapse; } /* Tabellenkopf-Spalten */ .rounds-card th { text-align: center; font-size: .9rem; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: #888; padding-bottom: 15px; } /* Tabellenzellen */ .rounds-card td { text-align: center; padding: 15px 10px; } .rounds-card tbody tr { transition: background .15s ease; } /* Hover-Effekt für Tabellenzeilen (nur im Light-Mode dezent sichtbar) */ .rounds-card tbody tr:hover { background: rgba(0,0,0,.03); } /* Trennlinie zwischen den Runden-Zeilen */ .rounds-card tbody tr:not(:last-child) { border-bottom: 1px solid var(--border); } #laps { padding-left: 20px; } /* ========================================================================== # 8. GLOBAL SETTINGS MENU (ZAHNRAD DROPDOWN) Das Steuerungszahnrad oben rechts im Bild und dessen Dropdown-Verhalten. ========================================================================== */ /* Fixierter Außencontainer oben rechts im Browserfenster */ .settings-menu-container { position: fixed; top: 20px; right: 20px; z-index: 1010; /* Höchste Ebene, liegt immer über dem Rest */ } /* Der runde Klick-Button mit dem Zahnrad-Icon */ .settings-trigger { border-radius: 50% !important; /* Erzwingt runden Button */ width: 45px; height: 45px; padding: 0 !important; /* Entfernt UIkit-Padding, um das Icon exakt zu zentrieren */ display: flex; align-items: center; justify-content: center; /* Nutzt deine CSS-Variablen, damit sich der Button farblich anpasst */ background: var(--card); border: 1px solid var(--border); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Weiche Animation für Hover-Effekte */ transition: transform 0.3s ease, background-color 0.3s ease; } /* Hover-Interaktion: Zahnrad dreht sich leicht um 45 Grad */ .settings-trigger:hover { transform: rotate(45deg); background-color: var(--bg); /* Wechselt dezent zur globalen Hintergrundfarbe */ } /* Design-Anpassungen für das UIkit-Dropdown-Menü */ .settings-menu-container .uk-dropdown { min-width: 180px; background: var(--card); /* Nutzt die Theme-Variable */ border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } /* --- DARK MODE TEXTFARBEN --- */ /* Alle Überschriften im Dark Mode heller machen */ body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6 { color: #f3f4f6 !important; /* Ein weiches, augenfreundliches Weiß */ } /* Fließtext, Untertitel und normale Texte */ body.dark p, body.dark span, body.dark div, body.dark .subtitle { color: #d1d5db !important; /* Ein gut lesbares Hellgrau */ } /* Speziell für das "Coming Soon" Label im Darkmode */ body.dark .uk-label { background-color: #374151 !important; /* Dunkelgrauer Hintergrund */ color: #f3f4f6 !important; /* Helle Schrift */ } /* --- FARBPALETTE (Leralf Blau) --- */ :root { --primary-blue: #0056b3; /* Dein Haupt-Blau (hier ein klassisches Royalblau als Startwert) */ --hover-blue: #004494; /* Etwas dunkleres Blau für Hover-Effekte */ --text-grey: #6b7280; /* Neutrales Grau für inaktive Icons/Links */ } /* --- SIDEBAR LAYOUT (Icon über Text) --- */ .sidebar-link { display: flex; flex-direction: column; /* Stapelt Icon und Text übereinander */ align-items: center; justify-content: center; padding: 15px 10px; color: var(--text-grey); transition: all 0.3s ease; text-decoration: none; gap: 8px; /* Abstand zwischen Icon und Text */ } /* Hover-Effekt */ .sidebar-link:hover, .sidebar-link:hover .sidebar-icon { color: var(--primary-blue) !important; } /* Speziell für das SVG, damit es beim Hovern auch blau wird */ .sidebar-link:hover .stopwatch-svg { stroke: var(--primary-blue) !important; } /* --- LOGO HANDLING --- */ .logo-container { padding: 10px 0 20px 0; } .sidebar-logo-full { max-width: 140px; /* Schönes, großes Logo */ width: 100%; transition: opacity 0.3s ease; } /* Das kleine Logo verstecken wir im offenen Zustand */ .sidebar-logo-small { display: none; max-width: 40px; margin: 0 auto; } /* --- WENN SIDEBAR EINGEKLAPPT IST (.collapsed) --- */ #sidebar.collapsed .sidebar-text { display: none; } /* Großes Logo verstecken, kleines Logo zeigen */ #sidebar.collapsed .sidebar-logo-full { display: none; } #sidebar.collapsed .sidebar-logo-small { display: block; /* Zeigt das kleine Icon an, sobald eingeklappt */ } /* Anpassung der Links im eingeklappten Zustand */ #sidebar.collapsed .sidebar-link { padding: 20px 0; /* Ordentlich Abstand zwischen den Icons */ gap: 0; } /* --- BUTTON FARBEN (Nur im Dashboard) --- */ .app-card .uk-button-primary { background-color: var(--primary-blue); color: #ffffff; border: none; transition: background-color 0.3s ease; } .app-card .uk-button-primary:hover { background-color: var(--hover-blue); color: #ffffff; } /* --- DROPDOWN MENÜ STYLING --- */ .dropdown-link { display: flex; align-items: center; color: var(--text-grey) !important; transition: color 0.3s ease; padding: 8px 0; /* Ein kleines bisschen mehr Luft zwischen den Klicks */ } /* Hover-Effekt für Text und Icon */ .dropdown-link:hover, .dropdown-link:hover .drop-icon { color: var(--primary-blue) !important; } /* Sicherstellen, dass die Icons Platz einnehmen und sichtbar sind */ .drop-icon { display: inline-flex !important; /* Wichtig! */ width: 24px; height: 24px; } /* Standard: Mond zeigen, Sonne weg */ .theme-icon-sun { display: none !important; } .theme-icon-moon { display: inline-flex !important; } /* Dark Mode aktiv: Mond weg, Sonne zeigen */ body.dark .theme-icon-moon { display: none !important; } body.dark .theme-icon-sun { display: inline-flex !important; }