/* PrJ/public/assets/css/app.css - VOLLSTÄNDIG (mit 2-Spalten-Fixtures, ohne Desktop-Zentrierung) */ /* ============================================= */ /* === GLOBALE VARIABLEN & BASIS-STILE === */ /* ============================================= */ :root { /* Farben (Light Mode) */ --brand-orange: #f0c93a; --brand-gray-light: #e0e0e0; --brand-gray-medium: #ccc; --brand-gray-dark: #aaa; --bg-primary: #f3f4f6; /* bg-gray-100 */ --bg-secondary: #ffffff; --bg-secondary-rgb: 255, 255, 255; /* <-- NEU HINZUGEFÜGT (RGB für Weiß) */ /* bg-white */ --text-primary: #1f2937; /* text-gray-800 */ --text-secondary: #6b7280; /* text-gray-500 */ --text-secondary-plus: #565c68; /* text-gray-500 */ --text-accent: #333; --text-on-accent: #000; --border-color-light: #e5e7eb; /* border-gray-200 */ --border-color-medium: var(--brand-gray-medium); --table-row-even: #ececec; --shadow-color: rgba(0, 0, 0, 0.05); --shadow-color-strong: rgba(0, 0, 0, 0.1); --highlight-bg: #f5ebc4; --highlight-border: var(--brand-orange); /* Bleibt deine Brand-Farbe */ --error-bg: #fef2f2; /* red-50 */ --error-text: #b91c1c; /* red-700 */ --error-border: #fca5a5; /* red-300 */ /* ... (andere Variablen) ... */ --font-family-base: 'Roboto', sans-serif; --font-size-base: 0.875rem; --font-size-small: 0.8rem; --font-size-xs: 0.75rem; --font-size-lg: 1rem; --font-size-xl: 1.125rem; --font-size-xxl: 1.25rem; --font-size-xxxl: 1.5rem; --radius-full: 9999px; --radius-md: 6px; --radius-sm: 3px; /* NEU: Fehlende Variablen aus dashboard.css */ --brand-orange-accent: #fffaf5; /* z.B. für Tie-Break */ --table-row-hover: #f0f0f0; /* Hover-Effekt für Tabellen */ --status-success: #38a169; /* "W" in Form (Grün) */ --status-error: #e53e3e; /* "L" in Form (Rot) */ /* NEU: Empfehlung für fixtures.css */ --highlight-text: #1f2937; /* Dunkler Text auf hellem Highlight */ /*Header im Normalen M ode = Header im Darkmode*/ --header-bg: #ffffff; /* Fester weißer Hintergrund */ --header-text-primary: #1f2937; /* Fester dunkler Text */ --header-text-secondary: #6b7280; /* Fester grauer Text (Burger-Icon) */ --header-hover-bg: #f3f4f6; /* Fester Hover-Hintergrund (bg-gray-100) */ --header-shadow-color: rgba(0, 0, 0, 0.05); /* Fester leichter Schatten */ /*index.php */ --weekday-accent: var(--text-primary); --weekday-accent-on-accent: var(--text-on-accent); /* i.d.R. schwarz */ --table-header-bg: #f5f5f5; /* leichtes Grau */ --table-row-bg: #ffffff; /* normaler Row-Hintergrund */ --table-row-alt-bg: #fafafa; /* alternating row */ } /* ============================================= */ /* === DARK MODE VARIABLEN === */ /* ============================================= */ /* Wird aktiv, wenn gesetzt ist */ html.dark { /* Farben (Dark Mode) */ /* Brand-Farben bleiben oft gleich */ /* --brand-orange: #f0c93a; */ /* Bleibt gleich */ --bg-secondary-rgb: 31, 41, 55; --brand-gray-light: #4b5563; /* Tailwind gray-600 */ --brand-gray-medium: #6b7280; /* Tailwind gray-500 */ --brand-gray-dark: #9ca3af; /* Tailwind gray-400 */ --bg-primary: #111827; /* gray-900 (Hintergrund der Seite) */ --bg-secondary: #1f2937; /* gray-800 (Header, Karten, Overlays) */ --text-primary: #f3f4f6; /* gray-100 (Haupttext) */ --text-secondary: #9ca3af; /* gray-400 (Sekundärtext) */ --text-secondary-plus: #c7d0df; /* gray-400 (Sekundärtext) */ --text-accent: #e5e7eb; /* gray-200 */ /* --text-on-accent: #000; */ /* Bleibt gleich (Schwarz auf Orange) */ --border-color-light: #374151; /* gray-700 */ /* --border-color-medium: var(--brand-gray-medium); */ /* Aktualisiert automatisch */ --table-row-even: #1a2431; /* Etwas dunkler als bg-secondary */ --table-row-hover: #374151; /* gray-700 (Hover-Effekt) */ /* Schatten sind im Dark Mode oft subtiler oder stärker */ --shadow-color: rgba(0, 0, 0, 0.2); --shadow-color-strong: rgba(0, 0, 0, 0.4); /* Highlights */ --highlight-bg: #3f3201; --highlight-text: var(--text-primary); /* Errors */ --error-bg: #450a0a; /* red-950 */ --error-text: #fca5a5; /* red-300 */ --error-border: #ef4444; /* red-500 */ /* Dashboard-spezifisch */ --brand-orange-accent: #2e2409; /* Dunkles Orange/Braun für Tie-Break */ --status-success: #4ade80; /* green-400 (Helles Grün) */ --status-error: #f87171; /* red-400 (Helles Rot) */ /*Header (identisch zu normalem Mode) */ --header-bg: #f0c93a; /* Fester weißer Hintergrund */ --header-text-primary: #1f2937; /* Fester dunkler Text */ --header-text-secondary: #6b7280; /* Fester grauer Text (Burger-Icon) */ --header-hover-bg: #f3f4f6; /* Fester Hover-Hintergrund (bg-gray-100) */ --header-shadow-color: rgba(0, 0, 0, 0.05); /* Fester leichter Schatten */ /*index.php */ --weekday-accent: var(--text-primary); --weekday-accent-on-accent: var(--text-on-accent); --table-header-bg: #2a2a2a; /* etwas heller als der Hintergrund */ --table-row-bg: #1d1d1d; --table-row-alt-bg: #262626; } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { font-family: var(--font-family-base); font-size: var(--font-size-base); color: var(--text-primary); background-color: var(--bg-primary); overscroll-behavior-y: none; min-height: 100vh; margin: 0; padding: 0; display: flex; flex-direction: column; overflow-x: hidden; max-width: 60rem } main#main-content { flex-grow: 1; overflow-y: auto; width: 100%; padding: 1rem; /* p-4 */ padding-bottom: calc(70px + 1rem); } .scrollable-content { overflow-y: auto; -webkit-overflow-scrolling: touch; } /* In main.css / app.css */ #overlay-content { display: flex; flex-direction: column; /* Stellt sicher, dass der Inhaltsbereich die Höhe des Modal-Fensters (abzüglich des Overlay-Headers) füllt. Dies funktioniert, wenn das Elternelement (#overlay-box) bereits Flexbox oder eine feste Höhe hat. */ flex-grow: 1; min-height: 0; /* Verhindert Flexbox-Probleme */ padding: 1rem; /* OK */ padding-bottom: 1rem; /* OK */ } html.no-playerlisting .playerlisting-gate { display: none !important; } /* ============================================= */ /* === LAYOUT-KOMPONENTEN (Header, Nav, Menü, Overlay) === */ /* ============================================= */ #top-header { background-color: var(--brand-orange); /* WAR: --bg-secondary */ box-shadow: 0 1px 3px 0 var(--header-shadow-color), 0 1px 2px -1px var(--header-shadow-color); /* WAR: --shadow-color */ z-index: 20; height: 4rem; display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; flex-shrink: 0; width: 100%; } #header-title { font-size: var(--font-size-xxl); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 1rem; color: var(--header-text-primary); /* <-- NEU: Setzt die Textfarbe fest */ } #burger-menu-btn { padding: 0.5rem; border-radius: var(--radius-full); color: var(--header-text-secondary); /* WAR: --text-secondary */ background: none; border: none; cursor: pointer; } #burger-menu-btn:hover { background-color: var(--header-hover-bg); /* WAR: --bg-primary */ color: var(--header-text-primary); /* WAR: --text-primary */ } #bottom-nav { position: sticky; bottom: 0; height: 70px; background-color: var(--bg-secondary); border-top: 1px solid var(--border-color-light); box-shadow: 0 -2px 10px var(--shadow-color); display: flex; justify-content: space-around; align-items: center; z-index: 20; flex-shrink: 0; width: 100%; } .nav-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: var(--font-size-xs); font-weight: 500; color: var(--text-secondary); text-decoration: none; padding: 4px 8px; border-radius: var(--radius-md); transition: all 0.2s ease; flex: 1; text-align: center; background: none; border: none; } .nav-button:hover { color: var(--text-primary); background-color: var(--bg-primary); } .nav-button.active { color: var(--brand-orange); font-weight: 700; } .nav-button.active svg { stroke: var(--brand-orange); } #menu-backdrop { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 30; opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out; } #side-menu { position: fixed; top: 0; right: 0; height: 100%; width: clamp(280px, 75%, 320px); background-color: var(--bg-secondary); z-index: 40; box-shadow: -2px 0 10px var(--shadow-color-strong); transform: translateX(100%); transition: transform 0.3s ease-in-out; display: flex; flex-direction: column; } #side-menu header { display: flex; align-items: center; justify-content: space-between; height: 4rem; padding: 0 1rem; border-bottom: 1px solid var(--border-color-light); flex-shrink: 0; } #side-menu header h2 { font-size: var(--font-size-lg); font-weight: 700;} #side-menu nav { padding: 1rem; overflow-y: auto; flex-grow: 1; } .menu-link { display: flex; align-items: center; padding: 0.75rem 1rem; font-size: 1rem; font-weight: 500; color: var(--text-primary); text-decoration: none; border-radius: var(--radius-md); transition: background-color 0.2s ease; margin-bottom: 0.5rem; } .menu-link:hover { background-color: var(--bg-primary); } .menu-link svg { color: var(--text-secondary); margin-right: 0.75rem;} body.menu-open #menu-backdrop { opacity: 1; pointer-events: auto; } body.menu-open #side-menu { transform: translateX(0); } #overlay-container { position: fixed; inset: 0; z-index: 40; background-color: var(--bg-primary); display: flex; flex-direction: column; } #overlay-header { background: var(--bg-secondary); box-shadow: 0 1px 3px 0 var(--shadow-color), 0 1px 2px -1px var(--shadow-color); height: 4rem; padding: 0 1rem; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; width: 100%; } #overlay-title { font-size: var(--font-size-xl); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 1rem; } #overlay-close-btn { padding: 0.5rem; border-radius: var(--radius-full); color: var(--text-secondary); background: none; border: none; cursor: pointer; } #overlay-close-btn:hover { background-color: var(--bg-primary); color: var(--text-primary); } #overlay-content { flex-grow: 1; overflow-y: auto; width: 100%; max-width: 100%; padding: 1rem; padding-bottom: 1rem; } #overlay-loader { display: none; margin: 40px auto; border: 4px solid var(--brand-gray-light); border-top: 4px solid var(--brand-orange); border-radius: 50%; width: 40px; height: 40px; animation: spin 1.5s linear infinite; } /* ============================================= */ /* === WIEDERVERWENDBARE UI-KOMPONENTEN === */ /* ============================================= */ .loader { border: 4px solid var(--brand-gray-light); border-top: 4px solid var(--brand-orange); border-radius: 50%; width: 40px; height: 40px; animation: spin 1.5s linear infinite; margin: 40px auto; } @keyframes spin { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } } /* Generelle Tabellenstile (Angepasst für festes Layout & Umbruch) */ .data-table-wrapper { border: 1px solid var(--brand-orange); border-radius: var(--radius-sm); overflow-x: auto; background-color: var(--bg-secondary); margin-bottom: 1rem; width: 100%; max-width: 100%; } .data-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .data-table th, .data-table td { padding: 0.375rem 0.25rem; text-align: center; border-bottom: 1px solid var(--border-color-light); word-wrap: break-word; overflow-wrap: break-word; } .data-table th { background-color: var(--bg-primary); color: var(--text-secondary); font-size: var(--font-size-xs); text-transform: uppercase; font-weight: 600; border-bottom-width: 2px; border-color: var(--brand-orange); position: sticky; top: 0; z-index: 1; white-space: nowrap; vertical-align: bottom; } .data-table tbody tr:nth-child(even) { background-color: var(--table-row-even); } .data-table tbody tr:hover { background-color: var(--brand-gray-light); } /* Globale Spalten-Typ-Klassen */ .col-type-id, .col-type-week, .col-type-pos { width: 8%; min-width:20px; text-align: center; white-space: nowrap; } .col-type-pos-indicator { width: 12%; min-width:40px; text-align: center; white-space: nowrap; } .col-type-numeric-short { width: 8%; min-width:20px; text-align: center; white-space: nowrap; } .col-type-numeric-medium, .col-type-result { width: 16%; min-width:40px; text-align: center; white-space: nowrap; } .data-table .points { font-weight: 700; } .data-table .col-result { font-weight: 700; } .col-type-date { width: 16%; min-width: 40px; text-align: center; white-space: nowrap; } .col-type-text-long { width: auto; text-align: left; white-space: normal; } .data-table .team-name-col { font-weight: 500; } /* Sortierbare Tabellen-Header Stile */ .data-table th.sortable { cursor: pointer; position: relative; padding-right: 18px; } .data-table th.sortable:hover { background-color: var(--brand-gray-light); } .data-table th.sortable::after { content: ''; position: absolute; right: 4px; top: 50%; margin-top: -7px; border: 4px solid transparent; opacity: 0.3; } .data-table th.sortable.sort-asc::after { border-bottom-color: var(--text-secondary); margin-top: -3px; opacity: 1; } .data-table th.sortable.sort-desc::after { border-top-color: var(--text-secondary); margin-top: -5px; opacity: 1; } .data-table tbody tr.is-highlighted td { background-color: var(--highlight-bg); } .data-table tbody tr.is-highlighted td { background-color: var(--highlight-bg); /* Ändert nur den Hintergrund */ /* NEU: Wichtig! Stellt sicher, dass die Textfarbe und Randfarbe die normalen Theme-Werte verwenden. */ color: var(--text-primary) !important; border-color: var(--border-color-light) !important; } /* Spezialregeln für die Liga-Tabelle (Rahmen & Fett), falls gewünscht */ .league-table tbody tr.is-highlighted td { font-weight: 600; /* Macht die Schrift fett in der Liga-Tabelle */ } .league-link.active { transform: translateY(-2px); box-shadow: 0 4px 10px var(--shadow-color-strong); background: var(--brand-orange); color: var(--text-on-accent, #000); border-color: var(--brand-orange); } /* ============================================= */ /* === HILFSKLASSEN & FEHLERBEHANDLUNG === */ /* ============================================= */ .hidden { display: none !important; } .error-message { padding: 1rem; background-color: var(--error-bg); border: 1px solid var(--error-border); color: var(--error-text); border-radius: var(--radius-md); margin: 1rem; } .error-message strong { font-weight: bold; display: block; margin-bottom: 0.5rem; } /* Icon Wechsel im Header Button */ #burger-menu-btn .icon-close { display: none; } #burger-menu-btn .icon-menu { display: block; } body.menu-open #burger-menu-btn .icon-menu { display: none; } body.menu-open #burger-menu-btn .icon-close { display: block; } /* ============================================= */ /* === HIGHLIGHT SELECTOR DARK MODE FIX === */ /* ============================================= */ /* Wendet die Dark-Mode-Variablen auf das Label an */ html.dark #highlight-team-section label { color: var(--text-secondary); } /* Wendet die Dark-Mode-Variablen auf das Dropdown-Menü an */ html.dark #highlight-team-select { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color-light); /* Nutzt den helleren Rand im Dark Mode */ } /* Stellt die Optionen-Liste (Dropdown) auch dunkel */ html.dark #highlight-team-select option { background-color: var(--bg-secondary); color: var(--text-primary); } .highlight-team-checkbox { width: 1rem; height: 1rem; accent-color: var(--brand-orange); /* Wichtig! */ cursor: pointer; } /* * STIL FÜR DIE HERVORHEBUNG (HIGHLIGHT) * * Definiert das Aussehen für jeden Text, * den JavaScript als Treffer markiert. */ /* ================================= Standard App Button (NEU) ================================= */ .btn-primary { /* (Basiert auf deinen Tailwind-Klassen bg-brand-orange, px-4, py-2, etc.) */ background-color: var(--brand-orange); color: var(--text-on-accent); /* (Wir nehmen an, 'rounded-lg' ist 0.5rem) */ border-radius: var(--radius-md, 0.5rem); /* (px-4 py-2) */ padding: 0.5rem 1rem; /* (font-medium) */ font-weight: 500; /* (w-full text-center) */ width: 100%; text-align: center; /* (hover:opacity-90 transition) */ transition: opacity 0.2s ease; cursor: pointer; } .btn-primary:hover { opacity: 0.9; } #net-status-banner { position: fixed; left: 0; right: 0; top: 0; z-index: 1000; } #net-status-banner .netbar { display:flex; gap:.75rem; align-items:center; justify-content:center; padding:.5rem .75rem; border-bottom:1px solid var(--border-color-light); background: var(--bg-secondary); } #net-status-banner.hidden { display:none; } #net-status-banner.offline .netbar { background: #2b2b2b; color:#fff; } #net-status-banner.down .netbar { background: #5d0a0a; color:#fff; } #net-status-banner.ok .netbar { background: var(--bg-secondary); color: var(--text-primary); } .netbtn { padding:.25rem .6rem; border:1px solid var(--border-color-light); border-radius:.35rem; } /* ============================================= */ /* === ANDROID APP MODAL (Finales Overlay-Design) === */ /* ============================================= */ /* 1. Der halb-transparente Hintergrund */ .app-modal-backdrop { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem; animation: fadeIn 0.3s ease-out; } /* 2. Die Modal-Box (nutzt deine Variablen) */ .app-modal { background-color: var(--bg-secondary); color: var(--text-primary); border-radius: var(--radius-md); box-shadow: 0 10px 25px var(--shadow-color-strong); padding: 1.5rem; width: 100%; max-width: 400px; text-align: center; animation: zoomIn 0.3s ease-out; } /* 3. Icon (nutzt deine Akzentfarbe) */ .app-modal-icon { margin: 0 auto 1rem; color: var(--brand-orange); } /* 4. Text-Styling (nutzt deine Schriftgrößen & Farben) */ .app-modal-text strong { display: block; font-size: var(--font-size-xl); font-weight: 700; margin-bottom: 0.5rem; color: var(--text-primary); } .app-modal-text span { display: block; font-size: var(--font-size-base); color: var(--text-secondary); margin-bottom: 1.5rem; } /* 5. Button-Container */ .app-modal-actions { display: flex; flex-direction: column; gap: 0.75rem; } /* * 6. SEKUNDÄR-BUTTON (Dieser muss in deiner app.css sein) * Er ist so designt, dass er zu deinem .btn-primary passt. */ .btn-secondary { /* Layout von .btn-primary übernommen */ width: 100%; text-align: center; padding: 0.5rem 1rem; font-weight: 500; border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; /* Sekundäre Farben (deine Variablen) */ background-color: var(--bg-primary); color: var(--text-secondary); border: 1px solid var(--border-color-light); } .btn-secondary:hover { background-color: var(--table-row-even); color: var(--text-primary); border-color: var(--border-color-medium); } /* 7. Animationen */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* ============================================= */ /* === FONT-SETUP MODAL (Angepasste Version) === */ /* ============================================= */ #font-setup-modal-backdrop { /* HINTERGRUND (Kaum sichtbar, damit man den Text lesen kann) */ background-color: rgba(0, 0, 0, 0.1); /* POSITION (Unten am Bildschirm) */ align-items: flex-end; /* (1) NEU: Animation auf 1s verlangsamt */ animation-duration: 1s; /* (Diese Stile bleiben gleich) */ position: fixed; inset: 0; display: flex; justify-content: center; z-index: 100; padding: 1rem; animation-name: fadeIn; animation-timing-function: ease-out; } #font-setup-modal { /* (1) NEU: Animation auf 1s verlangsamt */ animation-duration: 1s; /* (2) NEU: Dickerer Rahmen in Markenfarbe */ border: 3px solid var(--brand-orange); /* (3) NEU: Kompakter (weniger Innenabstand) */ padding: 1rem; /* (Diese Stile bleiben von .app-modal erhalten) */ background-color: var(--bg-secondary); color: var(--text-primary); border-radius: var(--radius-md); box-shadow: 0 10px 25px var(--shadow-color-strong); width: 100%; max-width: 400px; text-align: center; animation-name: slideInUp; animation-timing-function: ease-out; } /* (3) NEU: Kompakter (Text-Abstände reduziert) */ #font-setup-modal .app-modal-text strong { margin-bottom: 0.25rem; /* Weniger Abstand */ } #font-setup-modal .app-modal-text span { margin-bottom: 0.75rem; /* Weniger Abstand */ } /* (4) NEU: Stil für den Settings-Hinweis */ .modal-settings-hint { display: flex; align-items: center; justify-content: center; gap: 0.5rem; /* Abstand zwischen Icon und Text */ margin-top: 1rem; /* Abstand zum Button */ padding: 0.5rem; background-color: var(--bg-primary); /* Leichter Hintergrund (fast wie "weiß" auf dunkel) */ color: var(--text-secondary); /* Dezente Textfarbe */ font-size: var(--font-size-xs); /* Kleinere Schrift */ border-radius: var(--radius-sm); border: 1px solid var(--border-color-light); } .modal-settings-hint svg { flex-shrink: 0; /* Verhindert, dass das Icon gequetscht wird */ } /* (Diese Animationen sollten schon existieren, aber hier zur Sicherheit) */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInUp { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }