/* ============================================================ TRELONIX – trelonix.css Shared design tokens & base styles Brand: Dark Navy/Anthracite + Blue accent (#2563eb / #3b82f6) ============================================================ */ /* ── Design Tokens ────────────────────────────────────────── */ :root { /* Brand colours (matches trelonix.de) */ --tx-accent: #2563eb; /* Trelonix blue */ --tx-accent-light: #3b82f6; --tx-accent-glow: rgba(37, 99, 235, 0.35); --tx-accent-subtle: rgba(37, 99, 235, 0.08); --tx-accent-border: rgba(37, 99, 235, 0.25); /* Backgrounds */ --tx-bg: #080a0f; --tx-bg-surface: #0d1117; --tx-bg-card: #131720; --tx-bg-card-hover: #181d28; --tx-bg-input: #0d1117; /* Borders */ --tx-border: #1e2433; --tx-border-light: #252d3d; /* Text */ --tx-text: #e8ecf4; --tx-text-muted: #64748b; --tx-text-faint: #334155; /* Fonts */ --font-display: 'Syne', sans-serif; --font-body: 'DM Sans', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Radius */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 24px; /* Transitions */ --ease: 0.15s ease; } /* ════════════════════════════════════════════════════════════ LIGHT THEME Wird aktiviert über . Jeder Kunde kann selbst umschalten (Toggle im Dashboard), die Wahl wird pro Browser in localStorage gespeichert. Alle Farben sind hier bewusst auf dieselben Variablennamen gemappt, damit kein anderes CSS angefasst werden muss. ════════════════════════════════════════════════════════════ */ html[data-theme="light"] { --tx-accent: #2563eb; --tx-accent-light: #1d4ed8; --tx-accent-glow: rgba(37, 99, 235, 0.25); --tx-accent-subtle: rgba(37, 99, 235, 0.07); --tx-accent-border: rgba(37, 99, 235, 0.22); --tx-bg: #f5f6f9; --tx-bg-surface: #ffffff; --tx-bg-card: #ffffff; --tx-bg-card-hover: #f1f3f8; --tx-bg-input: #f7f8fb; --tx-border: #e2e5ec; --tx-border-light: #d8dce5; --tx-text: #14181f; --tx-text-muted: #6b7280; --tx-text-faint: #9ca3af; } /* Im Light-Theme braucht die Scrollbar dunklere statt helle Töne */ html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--tx-bg-surface); } html[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--tx-border-light); } html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--tx-accent); } /* ── Reset & Base ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background-color: var(--tx-bg); color: var(--tx-text); line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Custom Scrollbar ─────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--tx-bg-surface); } ::-webkit-scrollbar-thumb { background: var(--tx-border-light); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--tx-accent); } /* ── Shared Button Styles ─────────────────────────────────── */ .btn-primary { background: linear-gradient(135deg, var(--tx-accent) 0%, #1d4ed8 100%); color: #ffffff; font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; padding: 10px 20px; border-radius: var(--r-md); border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all var(--ease); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; } .btn-primary:hover { background: linear-gradient(135deg, var(--tx-accent-light) 0%, var(--tx-accent) 100%); box-shadow: 0 0 24px var(--tx-accent-glow); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; } .btn-secondary { background: var(--tx-bg-card); border: 1px solid var(--tx-border-light); color: #94a3b8; font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; padding: 10px 16px; border-radius: var(--r-md); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all var(--ease); text-decoration: none; white-space: nowrap; } .btn-secondary:hover { border-color: var(--tx-accent); color: var(--tx-accent-light); background: var(--tx-bg-card-hover); } /* ── Toast Notification ───────────────────────────────────── */ #trelonix-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(16px); z-index: 9999; padding: 12px 24px; border-radius: var(--r-lg); font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; } #trelonix-toast.toast-success { background: var(--tx-accent); color: #fff; } #trelonix-toast.toast-error { background: #dc2626; color: #fff; } #trelonix-toast.toast-visible { opacity: 1; transform: translateX(-50%) translateY(0); }