/* ==========================================================================
Embyx Design-System · Version 1.0.0
"Die Glut in der Tiefe" – dunkel, ruhig, ein blaues Licht als Akzent.
Einbinden:
Aufbau:
1. Variablen (Tokens) – hier änderst du Farben, Abstände usw. zentral
2. Grundlagen – Seite, Schrift, Überschriften, Links
3. Bausteine – Buttons, Eingabefelder, Seitenleiste, Karten,
Dialoge, Tabs, Badges, Hinweise, Tabellen
4. Animationen
5. Hilfsklassen
Alle Klassen beginnen mit "ex-" (für Embyx), damit nichts mit anderem
CSS kollidiert.
========================================================================== */
/* --------------------------------------------------------------------------
1. VARIABLEN
-------------------------------------------------------------------------- */
:root {
/* ---- Hintergründe: von ganz tief (fast schwarz) nach oben ---- */
--ex-bg-0: #05070d; /* tiefste Ebene, Fensterrand, Video-Hintergrund */
--ex-bg-1: #0a0f1a; /* Seitenhintergrund */
--ex-bg-2: #0f1626; /* Flächen: Panels, Karten, Seitenleiste */
--ex-bg-3: #152036; /* erhöht: Hover, Eingabefelder, Menüs */
--ex-bg-4: #1b2944; /* aktiv / ausgewählt */
/* ---- Linien ---- */
--ex-border: #1c2840; /* normale Trennlinie */
--ex-border-strong: #2a3a58; /* Rahmen von Eingabefeldern */
/* ---- Text ---- */
--ex-text: #e8edf5; /* Haupttext */
--ex-text-2: #a3b0c5; /* Nebentext */
--ex-text-3: #6b7a93; /* Hinweise, deaktiviert */
--ex-text-on-accent: #ffffff;
/* ---- Akzent: die blaue Flamme. Sparsam verwenden! ---- */
--ex-accent: #2f8cff;
--ex-accent-hover: #5aa6ff;
--ex-accent-pressed: #1f6fe0;
--ex-accent-soft: rgba(47, 140, 255, 0.14); /* zarte Hinterlegung */
--ex-accent-glow: rgba(47, 140, 255, 0.35); /* Leuchten / Fokus */
/* ---- Statusfarben ---- */
--ex-success: #2fbf71;
--ex-warning: #e5a93b;
--ex-danger: #e5484d;
--ex-danger-hover: #f0646a;
/* ---- Schrift ----
Es werden keine Webfonts geladen (funktioniert auch offline auf dem Pi).
"Inter" wird genutzt, wenn installiert, sonst Segoe UI (Windows). */
--ex-font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
--ex-font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, "SF Mono", monospace;
--ex-text-xs: 12px; /* Badges, Zeitstempel */
--ex-text-sm: 13px; /* Beschriftungen, Tabellen */
--ex-text-md: 14px; /* Standard-Text */
--ex-text-lg: 16px; /* hervorgehobener Text */
--ex-text-xl: 20px; /* Überschrift 3 */
--ex-text-2xl: 24px; /* Überschrift 2 */
--ex-text-3xl: 32px; /* Überschrift 1 */
--ex-weight-regular: 400;
--ex-weight-medium: 500;
--ex-weight-semibold: 600;
--ex-line-height: 1.5;
--ex-line-height-tight: 1.25;
/* ---- Abstände (4er-Raster) ---- */
--ex-space-1: 4px;
--ex-space-2: 8px;
--ex-space-3: 12px;
--ex-space-4: 16px;
--ex-space-5: 24px;
--ex-space-6: 32px;
--ex-space-7: 48px;
--ex-space-8: 64px;
/* ---- Rundungen: bewusst klein ---- */
--ex-radius-sm: 4px; /* Badges, Checkboxen */
--ex-radius-md: 6px; /* Buttons, Eingabefelder */
--ex-radius-lg: 10px; /* Karten, Dialoge */
--ex-radius-full: 999px;
/* ---- Schatten: nur für Dinge, die wirklich "schweben" ---- */
--ex-shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.45);
--ex-shadow-dialog: 0 24px 64px rgba(0, 0, 0, 0.6);
--ex-focus-ring: 0 0 0 3px var(--ex-accent-glow);
/* ---- Größen ---- */
--ex-control-height: 36px;
--ex-control-height-sm: 28px;
--ex-sidebar-width: 240px;
/* ---- Animationen ---- */
--ex-duration-fast: 120ms; /* Hover, Farbwechsel */
--ex-duration-base: 180ms; /* Einblenden, Aufklappen */
--ex-duration-slow: 260ms; /* Dialoge, Seitenwechsel */
--ex-ease: cubic-bezier(0.2, 0, 0, 1); /* weich abbremsen */
--ex-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
color-scheme: dark;
}
/* --------------------------------------------------------------------------
2. GRUNDLAGEN
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.ex, .ex-root {
background-color: var(--ex-bg-1);
/* dezenter tiefblauer Schimmer von oben – kein bunter Verlauf */
background-image: radial-gradient(1200px 600px at 50% -200px, rgba(47, 140, 255, 0.07), transparent 70%);
background-attachment: fixed;
color: var(--ex-text);
font-family: var(--ex-font);
font-size: var(--ex-text-md);
line-height: var(--ex-line-height);
-webkit-font-smoothing: antialiased;
min-height: 100vh;
}
.ex h1, .ex-h1 { font-size: var(--ex-text-3xl); font-weight: var(--ex-weight-semibold); line-height: var(--ex-line-height-tight); letter-spacing: -0.01em; margin: 0 0 var(--ex-space-3); }
.ex h2, .ex-h2 { font-size: var(--ex-text-2xl); font-weight: var(--ex-weight-semibold); line-height: var(--ex-line-height-tight); margin: 0 0 var(--ex-space-3); }
.ex h3, .ex-h3 { font-size: var(--ex-text-xl); font-weight: var(--ex-weight-semibold); line-height: var(--ex-line-height-tight); margin: 0 0 var(--ex-space-2); }
.ex p { margin: 0 0 var(--ex-space-4); color: var(--ex-text-2); }
.ex a:not([class*="ex-"]), .ex-link { color: var(--ex-accent); text-decoration: none; transition: color var(--ex-duration-fast) var(--ex-ease); }
.ex a:not([class*="ex-"]):hover, .ex-link:hover { color: var(--ex-accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.ex code, .ex-code { font-family: var(--ex-font-mono); font-size: 0.92em; background: var(--ex-bg-3); border: 1px solid var(--ex-border); border-radius: var(--ex-radius-sm); padding: 1px 6px; }
.ex ::selection { background: var(--ex-accent-glow); }
.ex-label { display: block; font-size: var(--ex-text-sm); font-weight: var(--ex-weight-medium); color: var(--ex-text-2); margin-bottom: var(--ex-space-2); }
.ex-overline { font-size: var(--ex-text-xs); font-weight: var(--ex-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ex-text-3); }
.ex-muted { color: var(--ex-text-3); }
/* Sichtbarer Fokus nur bei Tastaturbedienung */
.ex :focus-visible { outline: none; box-shadow: var(--ex-focus-ring); }
/* --------------------------------------------------------------------------
3. BAUSTEINE
-------------------------------------------------------------------------- */
/* ---- Buttons ----
Varianten: --primary --secondary (Standard) --ghost --danger
Größe: --sm Nur Icon: --icon */
.ex-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--ex-space-2);
height: var(--ex-control-height); padding: 0 var(--ex-space-4);
font: inherit; font-size: var(--ex-text-md); font-weight: var(--ex-weight-medium);
color: var(--ex-text); background: var(--ex-bg-3);
border: 1px solid var(--ex-border-strong); border-radius: var(--ex-radius-md);
cursor: pointer; user-select: none; white-space: nowrap;
transition: background-color var(--ex-duration-fast) var(--ex-ease),
border-color var(--ex-duration-fast) var(--ex-ease),
box-shadow var(--ex-duration-fast) var(--ex-ease),
transform var(--ex-duration-fast) var(--ex-ease);
}
.ex-btn:hover { background: var(--ex-bg-4); border-color: #34476b; }
.ex-btn:active { transform: translateY(1px); }
.ex-btn:disabled, .ex-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.ex-btn--primary { background: var(--ex-accent); border-color: var(--ex-accent); color: var(--ex-text-on-accent); }
.ex-btn--primary:hover { background: var(--ex-accent-hover); border-color: var(--ex-accent-hover); box-shadow: 0 0 16px var(--ex-accent-glow); }
.ex-btn--primary:active { background: var(--ex-accent-pressed); border-color: var(--ex-accent-pressed); }
.ex-btn--ghost { background: transparent; border-color: transparent; color: var(--ex-text-2); }
.ex-btn--ghost:hover { background: var(--ex-bg-3); border-color: transparent; color: var(--ex-text); }
.ex-btn--danger { background: transparent; border-color: rgba(229, 72, 77, 0.5); color: var(--ex-danger); }
.ex-btn--danger:hover { background: rgba(229, 72, 77, 0.12); border-color: var(--ex-danger); color: var(--ex-danger-hover); }
.ex-btn--sm { height: var(--ex-control-height-sm); padding: 0 var(--ex-space-3); font-size: var(--ex-text-sm); }
.ex-btn--icon { width: var(--ex-control-height); padding: 0; }
.ex-btn--icon.ex-btn--sm { width: var(--ex-control-height-sm); }
.ex-btn svg { width: 16px; height: 16px; flex: none; }
/* ---- Eingabefelder ----
*/
.ex-input, .ex-select, .ex-textarea {
width: 100%; height: var(--ex-control-height); padding: 0 var(--ex-space-3);
font: inherit; font-size: var(--ex-text-md); color: var(--ex-text);
background: var(--ex-bg-0); border: 1px solid var(--ex-border-strong); border-radius: var(--ex-radius-md);
transition: border-color var(--ex-duration-fast) var(--ex-ease), box-shadow var(--ex-duration-fast) var(--ex-ease);
}
.ex-textarea { height: auto; min-height: 96px; padding: var(--ex-space-2) var(--ex-space-3); resize: vertical; }
.ex-input::placeholder, .ex-textarea::placeholder { color: var(--ex-text-3); }
.ex-input:hover, .ex-select:hover, .ex-textarea:hover { border-color: #3a4d72; }
.ex-input:focus, .ex-select:focus, .ex-textarea:focus { outline: none; border-color: var(--ex-accent); box-shadow: var(--ex-focus-ring); }
.ex-input:disabled { opacity: 0.5; cursor: not-allowed; }
.ex-input--error { border-color: var(--ex-danger); }
.ex-input--error:focus { box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.3); border-color: var(--ex-danger); }
.ex-help { font-size: var(--ex-text-xs); color: var(--ex-text-3); margin-top: var(--ex-space-1); }
.ex-help--error { color: var(--ex-danger); }
.ex-select {
appearance: none; padding-right: 36px; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23a3b0c5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center;
}
.ex-field { margin-bottom: var(--ex-space-4); }
/* Checkbox & Schalter */
.ex-check { display: inline-flex; align-items: center; gap: var(--ex-space-2); cursor: pointer; color: var(--ex-text); font-size: var(--ex-text-md); }
.ex-check input { appearance: none; width: 16px; height: 16px; margin: 0; border: 1px solid var(--ex-border-strong); border-radius: var(--ex-radius-sm); background: var(--ex-bg-0); display: grid; place-content: center; cursor: pointer; transition: background-color var(--ex-duration-fast) var(--ex-ease), border-color var(--ex-duration-fast) var(--ex-ease); }
.ex-check input::after { content: ""; width: 8px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) scale(0); transition: transform var(--ex-duration-fast) var(--ex-ease); margin-top: -2px; }
.ex-check input:checked { background: var(--ex-accent); border-color: var(--ex-accent); }
.ex-check input:checked::after { transform: rotate(-45deg) scale(1); }
.ex-switch { display: inline-flex; align-items: center; gap: var(--ex-space-3); cursor: pointer; }
.ex-switch input { appearance: none; position: relative; width: 34px; height: 20px; margin: 0; border-radius: var(--ex-radius-full); background: var(--ex-bg-4); border: 1px solid var(--ex-border-strong); cursor: pointer; transition: background-color var(--ex-duration-base) var(--ex-ease); }
.ex-switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ex-text-2); transition: transform var(--ex-duration-base) var(--ex-ease), background-color var(--ex-duration-base) var(--ex-ease); }
.ex-switch input:checked { background: var(--ex-accent); border-color: var(--ex-accent); }
.ex-switch input:checked::after { transform: translateX(14px); background: #fff; }
/* ---- App-Layout mit Seitenleiste ----
…
*/
.ex-app { display: grid; grid-template-columns: var(--ex-sidebar-width) 1fr; min-height: 100vh; }
.ex-main { padding: var(--ex-space-6) var(--ex-space-7); min-width: 0; }
.ex-sidebar {
position: sticky; top: 0; height: 100vh; overflow-y: auto;
display: flex; flex-direction: column; gap: var(--ex-space-1);
padding: var(--ex-space-4) var(--ex-space-3);
background: var(--ex-bg-0); border-right: 1px solid var(--ex-border);
}
.ex-sidebar__brand { display: flex; align-items: center; gap: var(--ex-space-3); padding: var(--ex-space-2) var(--ex-space-3) var(--ex-space-5); font-weight: var(--ex-weight-semibold); font-size: var(--ex-text-lg); letter-spacing: 0.01em; }
.ex-sidebar__brand img, .ex-sidebar__brand svg { width: 28px; height: 28px; }
.ex-sidebar__section { padding: var(--ex-space-4) var(--ex-space-3) var(--ex-space-2); }
.ex-sidebar__footer { margin-top: auto; padding-top: var(--ex-space-4); border-top: 1px solid var(--ex-border); }
.ex-nav-item {
position: relative; display: flex; align-items: center; gap: var(--ex-space-3);
height: 36px; padding: 0 var(--ex-space-3); border-radius: var(--ex-radius-md);
color: var(--ex-text-2); font-size: var(--ex-text-md); font-weight: var(--ex-weight-medium);
text-decoration: none !important; cursor: pointer;
transition: background-color var(--ex-duration-fast) var(--ex-ease), color var(--ex-duration-fast) var(--ex-ease);
}
.ex-nav-item svg { width: 18px; height: 18px; flex: none; opacity: 0.85; }
.ex-nav-item:hover { background: var(--ex-bg-2); color: var(--ex-text); }
.ex-nav-item.is-active { background: var(--ex-accent-soft); color: var(--ex-text); }
/* schmale leuchtende Linie am aktiven Eintrag */
.ex-nav-item.is-active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ex-accent); box-shadow: 0 0 10px var(--ex-accent-glow); }
.ex-nav-item.is-active svg { color: var(--ex-accent); opacity: 1; }
/* Obere Leiste */
.ex-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--ex-space-4); margin-bottom: var(--ex-space-6); }
/* ---- Karten ----
Flach mit Linie, kein Schatten. Nur verwenden, wenn Inhalte wirklich
gruppiert werden müssen. */
.ex-card { background: var(--ex-bg-2); border: 1px solid var(--ex-border); border-radius: var(--ex-radius-lg); padding: var(--ex-space-5); }
.ex-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--ex-space-4); }
.ex-card__title { font-size: var(--ex-text-lg); font-weight: var(--ex-weight-semibold); margin: 0; }
.ex-card--interactive { cursor: pointer; transition: border-color var(--ex-duration-base) var(--ex-ease), background-color var(--ex-duration-base) var(--ex-ease); }
.ex-card--interactive:hover { border-color: var(--ex-border-strong); background: #111a2d; }
/* ---- Dialoge ----
Nutzt das eingebaute