/** * shared/style.css * --------------------------------------------------------------------- * Gemeinsames Design-System aller Seiten. Warme Nougat/Karamell-Palette, * bestaetigter Akzentton #e0a458. Eigene Custom Properties unter dem * --ng-*-Namensschema (allgemeines Portal-Praefix, unterscheidet sich * bewusst von Feature-eigenen Praefixen wie --nj-* bei NougatJump oder * --rl-* / --reg-* bei den Registrierungslinks). * --------------------------------------------------------------------- */ :root { --ng-bg: #fbf3e7; --ng-surface: #ffffff; --ng-text: #3f2d1f; --ng-text-muted: #8a7360; --ng-accent: #e0a458; --ng-accent-dark: #b9793a; --ng-accent-light: #f3d9ae; --ng-border: #ecdcc0; --ng-error-bg: #fbe4e0; --ng-error-text: #9a3b2c; --ng-success-bg: #e3f0dc; --ng-success-text: #3c6b2a; --ng-radius: 14px; --ng-shadow: 0 4px 18px rgba(63, 45, 31, 0.08); } /* Dunkelmodus: dieselben Variablennamen, andere Werte - jede Komponente unten nutzt bereits var(--ng-*), daher kaskadiert das automatisch ueberallhin, ohne dass Komponenten-Regeln selbst angefasst werden muessen. [data-theme="dark"] wird vom Inline-Skript im jeder Seite VOR dem ersten Rendern gesetzt (liest ein Cookie, faellt ohne explizite Wahl - Cookie fehlt oder steht auf 'auto' - auf prefers-color-scheme zurueck), verhindert so ein Aufblitzen des falschen Modus. */ [data-theme="dark"] { --ng-bg: #201812; --ng-surface: #2b221a; --ng-text: #f0e2d2; --ng-text-muted: #b6a189; --ng-accent: #e0a458; --ng-accent-dark: #f0c383; --ng-accent-light: #43331f; --ng-border: #4a3a2b; --ng-error-bg: #4a2a22; --ng-error-text: #f0a88f; --ng-success-bg: #23361f; --ng-success-text: #a3d492; --ng-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); } * { box-sizing: border-box; } body { margin: 0; font-family: 'Segoe UI', Roboto, system-ui, sans-serif; background: var(--ng-bg); color: var(--ng-text); transition: background-color 0.2s ease, color 0.2s ease; } a { color: var(--ng-accent-dark); } .page { min-height: 100vh; display: flex; flex-direction: column; } .page-body { flex: 1; max-width: 1100px; width: 100%; margin: 0 auto; padding: 28px 20px 60px; } /* Top-Leiste */ .top-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: var(--ng-surface); border-bottom: 1px solid var(--ng-border); } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--ng-text); } .brand-mark { width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(135deg, var(--ng-accent), var(--ng-accent-dark)); } .top-bar-actions { display: flex; align-items: center; gap: 12px; } .top-bar-user { color: var(--ng-text-muted); font-size: 0.9rem; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: 10px; border: none; font-size: 0.95rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: transform 0.08s ease, opacity 0.15s ease; } .btn:active { transform: scale(0.97); } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .btn-primary { background: var(--ng-accent); color: #fff; } .btn-primary:hover { background: var(--ng-accent-dark); } .btn-secondary { background: var(--ng-accent-light); color: var(--ng-accent-dark); } .btn-secondary:hover { background: #eccb92; } [data-theme="dark"] .btn-secondary:hover { background: #5a4630; } .btn-ghost { background: transparent; color: var(--ng-text); border: 1px solid var(--ng-border); } .btn-ghost:hover { background: var(--ng-bg); } .btn-sm { padding: 6px 12px; font-size: 0.85rem; } /* Kacheln (Startseite) mit "torn foil corner"-Motiv: eine abgeschnittene Ecke oben rechts per clip-path, dahinter ein zweites, leicht versetztes Pseudo-Element als "Folie", die durchschimmert. */ .tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin-top: 24px; } .tile { position: relative; display: block; background: var(--ng-surface); border: 1px solid var(--ng-border); border-radius: var(--ng-radius); padding: 22px; text-decoration: none; color: var(--ng-text); box-shadow: var(--ng-shadow); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); transition: transform 0.12s ease, box-shadow 0.12s ease; } .tile::after { content: ''; position: absolute; top: 0; right: 0; width: 22px; height: 22px; background: var(--ng-accent-light); clip-path: polygon(100% 0, 0 0, 100% 100%); } .tile:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(63, 45, 31, 0.14); } .tile-icon { font-size: 2rem; display: block; margin-bottom: 10px; } .tile-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 4px; } .tile-desc { color: var(--ng-text-muted); font-size: 0.88rem; } /* ============ "Belebte" Foto-Banner-Kacheln ============ Gemeinsame Grundlage fuer Kacheln mit Foto-Hintergrund statt Icon - Startseite (Minecraft/Among Us/ETS2) UND Casino-Spielauswahl (Poker/ Blackjack/Roulette/Gluecksrad), deshalb hier statt in home/style.css. .tile-minigame (NougatJump-Deko-Szene) baut ebenfalls auf .tile-scene auf, bleibt aber wegen der Animation in home/style.css. Bild-URL kommt pro Kachel per --tile-banner-image (Custom Property). */ .tile-scene { position: relative; overflow: hidden; min-height: 168px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; } /* Verlauf als eigene Ebene (::before) statt Teil des Hintergrunds - funktioniert dadurch identisch ueber einem statischen Bild UND ueber der animierten Mini-Spiel-Szene, ohne dass Text/Szene sich um den Verlauf kuemmern muessen. */ .tile-scene::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(12, 10, 8, 0.92) 0%, rgba(12, 10, 8, 0.6) 38%, rgba(12, 10, 8, 0.1) 68%, rgba(12, 10, 8, 0) 100%); } .tile-scene:hover::before, .tile-scene:focus-visible::before { background: linear-gradient(to top, rgba(12, 10, 8, 0.95) 0%, rgba(12, 10, 8, 0.68) 38%, rgba(12, 10, 8, 0.15) 68%, rgba(12, 10, 8, 0) 100%); } .tile-scene .tile-title, .tile-scene .tile-desc { position: relative; z-index: 2; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); } .tile-scene .tile-desc { color: rgba(255, 255, 255, 0.88); } .tile-banner { background-image: var(--tile-banner-image); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Karten / Tabellen */ .card { background: var(--ng-surface); border: 1px solid var(--ng-border); border-radius: var(--ng-radius); padding: 20px; margin-bottom: 20px; box-shadow: var(--ng-shadow); } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ng-border); } th { color: var(--ng-text-muted); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.02em; } /* Formulare */ label { display: block; font-size: 0.85rem; color: var(--ng-text-muted); margin: 14px 0 6px; font-weight: 600; } input[type="text"], input[type="password"], input[type="number"], input[type="datetime-local"], input[type="email"], select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--ng-border); border-radius: 8px; font-size: 0.95rem; background: var(--ng-surface); color: var(--ng-text); font-family: inherit; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--ng-accent); outline-offset: 1px; } /* Meldungen */ .alert { padding: 10px 14px; border-radius: 8px; font-size: 0.9rem; margin-top: 10px; } .alert-error { background: var(--ng-error-bg); color: var(--ng-error-text); } .alert-success { background: var(--ng-success-bg); color: var(--ng-success-text); } /* ============ Toasts (Nougat.showToast(), shared/app.js) - oben links, fest positioniert unterhalb der .top-bar (die selbst NICHT fixed ist, also mit hochscrollt - der Versatz hier ist deshalb ein fester Pixelwert statt "top:0", per echtem Rendering gegen die tatsaechliche .top-bar-Hoehe abgemessen). Bewusst NICHT wie .alert-success eingefaerbt ("normales Theme" statt Gruen/Rot) - eine neutrale Karte, die nach ein paar Sekunden von selbst wegfaded oder sich per Kreuz sofort schliessen laesst. Mehrere Toasts stapeln sich als Spalte. */ #ng-toast-layer { position: fixed; top: 70px; left: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .ng-toast { display: flex; align-items: center; gap: 10px; background: var(--ng-surface); border: 1px solid var(--ng-border); box-shadow: var(--ng-shadow); border-radius: 10px; padding: 10px 12px 10px 16px; color: var(--ng-text); font-size: 0.9rem; max-width: min(360px, calc(100vw - 32px)); pointer-events: auto; opacity: 0; transform: translateY(-6px); transition: opacity 0.25s ease, transform 0.25s ease; } .ng-toast.ng-toast-visible { opacity: 1; transform: translateY(0); } .ng-toast-close { background: none; border: none; color: var(--ng-text-muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 2px 4px; margin-left: auto; flex: 0 0 auto; } .ng-toast-close:hover { color: var(--ng-text); } /* ============ Info-Modal (Nougat.showInfoModal(), shared/app.js) ============ EIN gemeinsames Modal-Geruest fuer alle "Wie spielt man?"-Buttons (jede Spiel-Lobby/-Auswahlseite) UND den Poker-Hand-Rangfolge-Button am Tisch - Inhalt wird bei jedem Aufruf ausgetauscht, das DOM bleibt (siehe showInfoModal()-Kommentar). z-index hoeher als Toast (2000) UND Rotate-Lock (3000), damit ein Modal auch ueber einer aktiven "Handy drehen"-Aufforderung sichtbar waere (Randfall, aber so garantiert nie unter etwas anderem versteckt). */ #ng-modal-backdrop { display: none; position: fixed; inset: 0; z-index: 4000; background: rgba(0, 0, 0, 0.55); align-items: center; justify-content: center; padding: 20px; } #ng-modal-backdrop.ng-modal-open { display: flex; } .ng-modal { background: var(--ng-surface); border: 1px solid var(--ng-border); border-radius: 14px; width: 100%; max-width: 540px; max-height: 85vh; display: flex; flex-direction: column; box-shadow: var(--ng-shadow); } .ng-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--ng-border); flex: 0 0 auto; } .ng-modal-header h2 { margin: 0; font-size: 1.1rem; } .ng-modal-close { border: none; background: none; font-size: 1.4rem; line-height: 1; color: var(--ng-text-muted); cursor: pointer; padding: 2px 6px; flex: 0 0 auto; } .ng-modal-close:hover { color: var(--ng-text); } .ng-modal-body { padding: 6px 18px 18px; overflow-y: auto; color: var(--ng-text); font-size: 0.92rem; line-height: 1.5; } .ng-modal-body h3 { margin: 14px 0 6px; font-size: 0.95rem; color: var(--ng-accent-dark); } .ng-modal-body h3:first-child { margin-top: 0; } .ng-modal-body ul { margin: 4px 0 12px; padding-left: 20px; } .ng-modal-body li { margin: 3px 0; } .ng-modal-body table { width: 100%; border-collapse: collapse; margin: 6px 0 12px; } .ng-modal-body th, .ng-modal-body td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--ng-border); font-size: 0.85rem; } .ng-modal-body th { color: var(--ng-text-muted); font-weight: 600; } .ng-modal-body p { margin: 6px 0; } .ng-modal-body strong { color: var(--ng-text); } @media (max-width: 480px) { .ng-modal-body table, .ng-modal-body th, .ng-modal-body td { font-size: 0.78rem; } } /* ============ "Bitte Handy drehen"-Overlay (Nougat.initOrientationLock(), shared/app.js) - fuer Casino-Spiele, deren Layout in der "falschen" Ausrichtung auf einem Handy nicht sinnvoll Platz findet (Poker/ Blackjack/Roulette wollen Querformat, das ovale Tisch-/Tableau-Layout braucht Breite; das Gluecksrad will umgekehrt Hochformat). Volldeckend (deckt die Seite komplett ab, blockt dadurch auch Klicks auf das Spiel darunter, ohne dass jede Seite ihr eigenes .page extra ausblenden muesste) - welche der zwei Richtungen greift, entscheidet die vom jeweiligen initOrientationLock()-Aufruf gesetzte Modifier-Klasse: .ng-rotate-lock-landscape erscheint im Hochformat (fordert Querformat an), .ng-rotate-lock-portrait erscheint im (kurzen) Querformat (fordert Hochformat an) - jeweils nur unterhalb der Handy-Schwellwerte, auf Tablet/Desktop bleibt das Overlay in beiden Faellen unsichtbar per display:none als Grundzustand. */ #ng-rotate-lock { display: none; position: fixed; inset: 0; z-index: 3000; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 32px; text-align: center; background: var(--ng-bg); } .ng-rotate-lock-icon { display: inline-block; font-size: 2.6rem; animation: ng-rotate-lock-spin 1.8s ease-in-out infinite; } #ng-rotate-lock p { margin: 0; max-width: 280px; color: var(--ng-text-muted); font-size: 0.95rem; } @keyframes ng-rotate-lock-spin { 0%, 15% { transform: rotate(0deg); } 50%, 65% { transform: rotate(-90deg); } 100% { transform: rotate(-90deg); } } /* Gleicher 640px-Mobile-Schwellwert wie ueberall sonst im Casino (siehe z.B. poker/style.css) fuer die Hochformat-Variante. */ @media (max-width: 640px) and (orientation: portrait) { #ng-rotate-lock.ng-rotate-lock-landscape { display: flex; } } /* Gleicher max-height-Schwellwert wie die Querformat-Kompakt-Layouts der Tisch-Spiele (siehe z.B. `@media (orientation: landscape) and (max-height: 500px)` in poker/style.css) - ein Tablet im Querformat hat genug Hoehe und faellt hier bewusst NICHT drunter. */ @media (orientation: landscape) and (max-height: 500px) { #ng-rotate-lock.ng-rotate-lock-portrait { display: flex; } } /* Tabs (generisch, von mehreren Seiten wie /admin genutzt) */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ng-border); margin-bottom: 20px; flex-wrap: wrap; } .tab-btn { padding: 10px 16px; background: none; border: none; border-bottom: 3px solid transparent; font-weight: 600; color: var(--ng-text-muted); cursor: pointer; font-size: 0.92rem; } .tab-btn.active { color: var(--ng-accent-dark); border-bottom-color: var(--ng-accent); } .tab-panel { animation: ng-fade-in 0.15s ease; } @keyframes ng-fade-in { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 640px) { .page-body { padding: 20px 14px 40px; } .top-bar { padding: 12px 16px; } } /* Hell/Dunkel-Umschalt-Button - wird von shared/app.js dynamisch in .top-bar-actions eingehaengt (eine Stelle statt neun HTML-Dateien einzeln pflegen zu muessen). Bewusst ein kompakter Icon-Button (nutzt die bestehende .btn.btn-ghost.btn-sm-Optik) statt eines breiten Pill-Sliders - braucht weniger Platz in der Leiste. */ .theme-toggle-btn { font-size: 1rem; line-height: 1; padding: 6px 10px; } /* Schmale Bildschirme: Abstaende verkleinern und den Nutzernamen ausblenden (steht dem Nutzer ohnehin schon selbst gegenueber) - verhindert, dass Marke + Schalter + Nutzername + zwei Buttons in einer Zeile ueberlappen. */ @media (max-width: 480px) { .top-bar { gap: 8px; flex-wrap: wrap; } .top-bar-actions { gap: 6px; } .top-bar-user { display: none; } .btn-sm { padding: 6px 10px; font-size: 0.82rem; } }