/* ===================================================================== Pegasus Copilot — Modern Theme --------------------------------------------------------------------- Eigenständiges Theme parallel zu Retro-Light & Retro-Dark. Aktivierung: . Charakter: clean, flat, contemporary — kein Gold/Cream/Editorial. Inspiration: Linear / Vercel / Notion (subtile Borders statt Shadows, neutrale Slate-Palette, Electric-Blue als Akzent, Inter-Typo). ===================================================================== */ body.theme-modern { /* ── Surfaces ──────────────────────────────────────────────────── */ --bg-base: #F8FAFC; /* slate-50 */ --bg-elevated: #FFFFFF; --bg-hover: #F1F5F9; /* slate-100 */ --bg-card: #FFFFFF; --bg: #F8FAFC; --card-bg: #FFFFFF; --sidebar-bg: #FFFFFF; --header-bg: #FFFFFF; /* ── Text ──────────────────────────────────────────────────────── */ --text-primary: #0F172A; /* slate-900 */ --text-secondary:#475569; /* slate-600 */ --text-muted: #64748B; /* slate-500 */ --text-subtle: #94A3B8; /* slate-400 */ /* ── Borders ───────────────────────────────────────────────────── */ --border: #E2E8F0; /* slate-200 */ --border-strong: #CBD5E1; /* slate-300 */ --sidebar-border:#E2E8F0; /* ── Accent (Electric Blue) ────────────────────────────────────── */ --accent: #2563EB; /* blue-600 */ --accent-hover: #1D4ED8; /* blue-700 */ --accent-subtle: rgba(37,99,235,0.08); /* ── Status colors ─────────────────────────────────────────────── */ --success: #16A34A; /* green-600 */ --success-bg: rgba(22,163,74,0.08); --warning: #D97706; /* amber-600 */ --warning-bg: rgba(217,119,6,0.08); --danger: #DC2626; /* red-600 */ --danger-bg: rgba(220,38,38,0.08); --homeoffice: #7C3AED; /* violet-600 */ --homeoffice-bg: rgba(124,58,237,0.08); /* ── Shadows (deutlich subtiler als Retro) ────────────────────── */ --shadow: 0 1px 2px rgba(15,23,42,0.04); --shadow-md: 0 2px 4px rgba(15,23,42,0.04), 0 1px 2px rgba(15,23,42,0.04); --shadow-lg: 0 8px 16px rgba(15,23,42,0.06), 0 2px 4px rgba(15,23,42,0.04); --shadow-card: 0 1px 2px rgba(15,23,42,0.04); --glow-accent: 0 0 0 1px rgba(37,99,235,0.18), 0 2px 8px rgba(37,99,235,0.06); --inner-shadow: none; --card-hover-glow: 0 0 0 1px rgba(37,99,235,0.16), 0 4px 12px rgba(15,23,42,0.06); /* ── Geometry: schärfer, weniger rund ─────────────────────────── */ --radius: 10px; --radius-lg: 14px; /* ── Typo: clean sans, Display = Body (kein Outfit/DM Sans-Mix) ─ */ --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* ── Body & Page-Level ─────────────────────────────────────────────── */ body.theme-modern { background: var(--bg-base); color: var(--text-primary); font-family: var(--font-body); letter-spacing: -0.005em; } body.theme-modern h1, body.theme-modern h2, body.theme-modern h3, body.theme-modern h4, body.theme-modern h5, body.theme-modern h6, body.theme-modern .card-title, body.theme-modern .page-head-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; } /* ── Cards: flatter, klare Borders statt Schatten ─────────────────── */ body.theme-modern .card, body.theme-modern .stat-card { background: var(--bg-card); border: 1px solid var(--border); box-shadow: none; border-radius: var(--radius); } body.theme-modern .card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); } body.theme-modern .stat-value { font-weight: 600; letter-spacing: -0.025em; color: var(--text-primary); } /* ── Buttons: flat, klare Farbflächen statt Gradienten ────────────── */ body.theme-modern .btn, body.theme-modern button.btn { border-radius: 8px; font-weight: 500; letter-spacing: 0; transition: background 120ms ease, border-color 120ms ease; box-shadow: none; } body.theme-modern .btn-primary { background: var(--accent); color: #FFFFFF; border: 1px solid var(--accent); } body.theme-modern .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } body.theme-modern .btn-secondary { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border); } body.theme-modern .btn-secondary:hover { background: var(--bg-hover); border-color: var(--border-strong); } /* ── Inputs: subtile Borders, fokussiert klar ─────────────────────── */ body.theme-modern input, body.theme-modern textarea, body.theme-modern select { background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-primary); border-radius: 8px; transition: border-color 120ms ease, box-shadow 120ms ease; } body.theme-modern input:focus, body.theme-modern textarea:focus, body.theme-modern select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); outline: none; } /* ── Sidebar: clean, minimal divider statt Gold-Glow ─────────────── */ body.theme-modern .sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); box-shadow: none; } body.theme-modern .menu-item { color: var(--text-secondary); font-weight: 500; border-radius: 8px; } body.theme-modern .menu-item:hover { background: var(--bg-hover); color: var(--text-primary); } body.theme-modern .menu-item.active { background: var(--accent-subtle); color: var(--accent); font-weight: 600; } body.theme-modern .menu-item.active::before { background: var(--accent); } /* ── Tables: clean grid, keine Zebra-Streifen ─────────────────────── */ body.theme-modern table { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } body.theme-modern thead { background: var(--bg-base); border-bottom: 1px solid var(--border); } body.theme-modern th { color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; } body.theme-modern tbody tr { border-bottom: 1px solid var(--border); } body.theme-modern tbody tr:nth-child(even) { background: var(--bg-card); } body.theme-modern tbody tr:hover { background: var(--bg-hover); } /* ── Badges & Pills: flat colored ─────────────────────────────────── */ body.theme-modern .badge, body.theme-modern .menu-count, body.theme-modern .menu-group-badge { border-radius: 6px; font-weight: 600; font-size: 0.72rem; letter-spacing: 0; box-shadow: none; padding: 2px 8px; } /* ── Modal-Overlay: klarer dunkler Slate ──────────────────────────── */ body.theme-modern .modal-overlay { background: rgba(15,23,42,0.6); backdrop-filter: blur(4px); } body.theme-modern .modal, body.theme-modern .modal-content { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } /* ── Toast / Notifications ────────────────────────────────────────── */ body.theme-modern .toast { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); } /* ── Approvals (apv2 / son) — minimaler Modern-Override ──────────── */ body.theme-modern .apv2-page, body.theme-modern .son-page { background: var(--bg-base); } body.theme-modern .apv2-h1, body.theme-modern .son-h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; } body.theme-modern .apv2-row, body.theme-modern .son-row { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; } body.theme-modern .apv2-row:hover, body.theme-modern .son-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow); } body.theme-modern .apv2-chip, body.theme-modern .son-chip { background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-secondary); border-radius: 999px; font-weight: 500; } body.theme-modern .apv2-chip.is-active, body.theme-modern .son-chip.is-active { background: var(--accent); border-color: var(--accent); color: #FFFFFF; } body.theme-modern .apv2-btn-primary, body.theme-modern .son-btn-primary { background: var(--accent); border: 1px solid var(--accent); color: #FFFFFF; } /* ── Theme-Picker Swatch (Settings-Panel) ─────────────────────────── */ .theme-swatch.theme-swatch-modern { background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%); border: 1px solid #E2E8F0; overflow: hidden; position: relative; } .theme-swatch.theme-swatch-modern .ts-sidebar { background: #FFFFFF; border-right: 1px solid #E2E8F0; } .theme-swatch.theme-swatch-modern .ts-content { background: #F8FAFC; } .theme-swatch.theme-swatch-modern .ts-topbar { background: #FFFFFF; border-bottom: 1px solid #E2E8F0; } .theme-swatch.theme-swatch-modern .ts-row { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 4px; } .theme-swatch.theme-swatch-modern .ts-row-a { background: #2563EB; } .theme-swatch.theme-swatch-modern .ts-row-b { background: #FFFFFF; } .theme-swatch.theme-swatch-modern .ts-row-c { background: #F1F5F9; }