/* ===================================================================== MS MÖBEL – ZENTRALES DESIGN (v2) EINE Datei für alle Module. Farben, Schrift, Logo, Navigation und gemeinsame Bausteine stehen NUR hier. Ein Modul bindet sie ein mit: REGELN (mit Michael Schenk festgelegt): - GENAU EIN Gelb: #ffd33d. Kein zweites "Gold". - Gelb ist Fläche / Rand / Hover / Text auf DUNKLEM Grund. - Wo Text auf HELLEM Grund stehen müsste -> SCHWARZ, nie gelb. - Buttons leicht abgerundet (8px). - HELL/DUNKEL umschaltbar: kippt die ganze App. ===================================================================== */ /* ---- 1. FARB-TOKENS: HELLER MODUS (Standard) ---------------------- */ :root{ /* Marke – EIN Gelb, überall gleich */ --ms-gelb: #ffd33d; --ms-gelb-soft: #fff6d6; /* sehr helle Gelbfläche (Hover, Markierung) */ --ms-schwarz: #111111; /* Navigation, Kopf, dunkle Flächen */ --ms-weiss: #ffffff; /* Flächen */ --paper: #f5f5f3; /* Seitenhintergrund */ --paper-deep: #e9e9e6; /* abgesetzte Fläche */ --field: #fafaf8; /* Eingabefeld */ --card: #ffffff; /* Karte/Panel */ /* Text */ --ink: #111111; /* Haupttext */ --ink-soft: #555555; /* Sekundärtext */ --ink-mute: #8a8a86; /* Hinweis, Platzhalter */ --on-gelb: #111111; /* Text AUF Gelb -> immer schwarz */ /* Linien */ --line: #dddad2; --line-strong: #c7c4bb; /* Status */ --ok:#3f7d54; --warn:#c08a1e; --danger:#b23b2e; --info:#3a6ea5; --ok-bg:#e7f1ea; --ok-tx:#2f6641; --warn-bg:#faf0d8; --warn-tx:#8a640f; --danger-bg:#f7e3e0; --danger-tx:#8f2b20; /* PRÜF-SIGNALE (abgestuft, bewusst GETRENNT vom Marken-Gelb, damit Firmenakzent und Warnung nicht verwechselt werden). Drei Stufen: watch = "im Blick behalten" (ruhig, grau) pruefen = "zu prüfen" (deutlich, bernstein) dringend= "jetzt handeln" (auffällig, warm-rot) Jede Stufe: Flächenfarbe (-bg), Textfarbe (-tx), Balkenfarbe (-bar). */ --sig-watch-bg:#eeeeec; --sig-watch-tx:#4a4a48; --sig-watch-bar:#9a9a9a; --sig-pruefen-bg:#fdeecb; --sig-pruefen-tx:#7a5606; --sig-pruefen-bar:#e0a021; --sig-dringend-bg:#f7e0d6; --sig-dringend-tx:#8f3a1e; --sig-dringend-bar:#d0552f; --sig-pruefen-field-bg:#fffaf0; /* Feldhintergrund bei Prüf-Hinweis */ /* Rückwärtskompatibel zu bestehenden Modulen: alte Namen weiterreichen. WICHTIG: --gold zeigt jetzt auf das EINE Gelb (kein Extra-Gold mehr). */ --gold: var(--ms-gelb); --gold-deep: var(--ms-gelb); --gold-text: var(--on-gelb); /* wer früher goldene Schrift wollte -> schwarz */ /* Typografie */ --sans: 'Aptos','Inter','Segoe UI',system-ui,sans-serif; --display: 'Aptos','Inter','Segoe UI',sans-serif; --mono: 'IBM Plex Mono','Consolas',monospace; /* Maße */ --radius: 8px; /* Buttons/Felder: leicht abgerundet */ --radius-card: 12px; --nav-h: 52px; --shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04); } /* ---- 2. FARB-TOKENS: DUNKLER MODUS ------------------------------- Nur die Farben werden umgeschaltet – alle Bausteine erben automatisch. Gelb bleibt exakt gleich; Text auf Gelb bleibt schwarz (Gelb ist hell). ------------------------------------------------------------------- */ :root[data-theme="dark"]{ --paper: #16161a; --paper-deep: #202027; --field: #1d1d22; --card: #1b1b20; --ink: #ececec; --ink-soft: #b6b6b6; --ink-mute: #7d7d82; /* --on-gelb bleibt schwarz: Gelb ist auch im Dark Mode eine helle Fläche */ --line: #33333a; --line-strong: #45454d; --ok-bg:#1e3327; --ok-tx:#7fc79b; --warn-bg:#3a3117; --warn-tx:#e5bf6a; --danger-bg:#3a221f; --danger-tx:#e39a8f; /* Prüf-Signale im Dunkelmodus (Balkenfarben bleiben kräftig genug) */ --sig-watch-bg:#2a2a30; --sig-watch-tx:#c2c2c6; --sig-watch-bar:#7a7a80; --sig-pruefen-bg:#3a3117; --sig-pruefen-tx:#e5bf6a; --sig-pruefen-bar:#c9922a; --sig-dringend-bg:#3a221f; --sig-dringend-tx:#e39a8f; --sig-dringend-bar:#c9542f; --sig-pruefen-field-bg:#2a2416; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.35); } /* ---- 3. GRUNDLAGEN ------------------------------------------------ */ *{box-sizing:border-box} body{ margin:0; font-family:var(--sans); color:var(--ink); background:var(--paper); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; transition:background .15s, color .15s; } a{color:var(--info); text-decoration:none} a:hover{text-decoration:underline} /* ---- 4. LOGO (Textmarke) ----------------------------------------- Auf DUNKLEM Grund (Kopfzeile): "MS" weiß + "Möbel" gelb. Auf HELLEM Grund (.ms-logo--auf-hell): "MS" schwarz + "Möbel" schwarz, weil gelber Text auf Weiß nicht lesbar ist (deine Regel). ------------------------------------------------------------------- */ .ms-logo{ display:inline-flex; align-items:baseline; gap:2px; font-family:var(--display); font-weight:700; letter-spacing:-.02em; font-size:20px; line-height:1; } .ms-logo .ms{ color:var(--ms-weiss); } .ms-logo .moebel{ color:var(--ms-gelb); } .ms-logo__sub{ display:block; font-size:9px; letter-spacing:.18em; color:#888; margin-top:3px; font-weight:400; } /* Variante für helle Flächen: alles schwarz (kein gelber Text auf Weiß) */ .ms-logo--auf-hell .ms{ color:var(--ink); } .ms-logo--auf-hell .moebel{ color:var(--ink); } .ms-logo--auf-hell .ms-logo__sub{ color:var(--ink-mute); } /* ---- 5. KOPFZEILE (Navigation oben) ------------------------------- VERBINDLICH: Jedes Modul bindet EXAKT diese Navigation ein – gleiche Einträge, gleiche Reihenfolge. Das eigene Modul bekommt class="aktiv" und href="#". So ist von jedem Modul aus jedes andere erreichbar.
Hauptmenü Stammdaten Artikel Vertrieb Buchhaltung
– – Abmelden
Kommt ein neues Modul dazu: Eintrag HIER ergänzen und in ALLEN Modulen nachziehen (Skript: vereinheitliche_nav.py). ------------------------------------------------------------------- */ .ms-topbar{ height:var(--nav-h); background:var(--ms-schwarz); display:flex; align-items:center; gap:24px; padding:0 18px; color:var(--ms-weiss); } .ms-topbar__nav{ display:flex; gap:22px; font-size:13px; margin-left:8px; } .ms-topbar__nav a{ color:#bbb; padding:16px 0; } .ms-topbar__nav a:hover{ color:#fff; text-decoration:none; } .ms-topbar__nav a.aktiv{ color:var(--ms-gelb); border-bottom:2px solid var(--ms-gelb); } .ms-topbar__right{ margin-left:auto; display:flex; align-items:center; gap:14px; } /* ---- 6. HELL/DUNKEL-SCHALTER -------------------------------------- */ .ms-theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--radius); background:transparent; border:1px solid #3a3a3a; color:#eee; cursor:pointer; font-size:16px; line-height:1; } .ms-theme-toggle:hover{ background:rgba(255,255,255,.08); } /* ---- 7. MODUL-LAYOUT MIT SEITENLEISTE ----------------------------- VERBINDLICH für jedes Modul, das eine linke Navigation braucht (Stammdaten, Buchhaltung, …). Module ohne Seitenleiste (Vertrieb, Artikel) nutzen stattdessen direkt
mit Tabs. Diese Klassen stehen ZENTRAL hier – nicht mehr im einzelnen Modul duplizieren, sonst laufen die Module optisch auseinander. AUFBAU (nach der ms-topbar): ------------------------------------------------------------------- */ .modul-body{ display:flex; min-height:calc(100vh - var(--nav-h)); } .subnav-spalte{ width:210px; flex:0 0 210px; border-right:1px solid var(--line); background:var(--card); padding:16px 12px; } .subnav-grp{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); padding:12px 10px 6px; } .inhalt{ flex:1; padding:24px 28px; max-width:1200px; } /* Schaltflächen der linken Navigation */ .ms-subnav{ display:flex; flex-direction:column; gap:2px; } .ms-subnav button{ text-align:left; background:none; border:0; padding:9px 12px; border-radius:var(--radius); font:inherit; color:var(--ink-soft); cursor:pointer; } .ms-subnav button:hover{ background:var(--paper-deep); } .ms-subnav button.on{ background:var(--ms-gelb-soft); color:var(--on-gelb); font-weight:500; } :root[data-theme="dark"] .ms-subnav button.on{ background:var(--ms-gelb); color:var(--on-gelb); } .ms-subnav .lock{ font-size:11px; color:var(--ink-mute); margin-left:6px; } /* ---- 8. NUTZER-CHIP ----------------------------------------------- */ .ms-user{ display:flex; align-items:center; gap:8px; font-size:12px; color:#eee; } .ms-user__avatar{ width:26px; height:26px; border-radius:50%; background:var(--ms-gelb); color:var(--on-gelb); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11px; } .ms-user__logout{ color:#aaa; text-decoration:underline; cursor:pointer; font-size:12px; } /* ---- 9. INHALT + KARTEN ------------------------------------------- */ .ms-content{ padding:20px 24px; } .ms-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-card); padding:16px 18px; box-shadow:var(--shadow); } /* ---- 10. BUTTONS (leicht abgerundet, CI) -------------------------- */ .ms-btn{ display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:13px; padding:8px 14px; cursor:pointer; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--card); color:var(--ink); transition:background .12s, border-color .12s, transform .05s; } .ms-btn:hover{ background:var(--paper); } .ms-btn:active{ transform:scale(.98); } /* Primärbutton = CI: gelbe Fläche, schwarze Schrift (auch im Dark Mode) */ .ms-btn--primär{ background:var(--ms-gelb); border-color:var(--ms-gelb); color:var(--on-gelb); font-weight:500; } .ms-btn--primär:hover{ background:#ffdd66; border-color:#ffdd66; } .ms-btn--still{ background:none; border-color:transparent; color:var(--ink-soft); } .ms-btn--still:hover{ background:var(--paper-deep); } /* ---- 11. FORMULARFELDER ------------------------------------------- */ .ms-input, .ms-select, .ms-textarea{ font:inherit; font-size:13px; width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:var(--radius); background:var(--field); color:var(--ink); } .ms-input:focus, .ms-select:focus, .ms-textarea:focus{ outline:none; border-color:var(--ms-gelb); box-shadow:0 0 0 3px var(--ms-gelb-soft); } :root[data-theme="dark"] .ms-input:focus, :root[data-theme="dark"] .ms-select:focus, :root[data-theme="dark"] .ms-textarea:focus{ box-shadow:0 0 0 3px rgba(255,211,61,.25); } .ms-label{ font-size:12px; color:var(--ink-soft); margin-bottom:4px; display:block; } /* ---- 12. TABELLEN ------------------------------------------------- */ .ms-table{ width:100%; border-collapse:collapse; font-size:13px; } .ms-table th{ text-align:left; font-weight:500; color:var(--ink-soft); padding:10px 12px; border-bottom:2px solid var(--line-strong); background:var(--paper); position:sticky; top:0; } .ms-table td{ padding:9px 12px; border-bottom:1px solid var(--line); } .ms-table tr:hover td{ background:var(--ms-gelb-soft); color:var(--on-gelb); } :root[data-theme="dark"] .ms-table tr:hover td{ background:rgba(255,211,61,.14); color:var(--ink); } /* ---- 13. STATUS-PILLEN -------------------------------------------- */ /* Pillen richten Icon + Text sauber aus (inline-flex). WICHTIG (offline-fest): Die Icons kommen NICHT aus einer externen Icon-Schrift/CDN (die im internen Netz/Homeoffice fehlen könnte -> leere Kästchen), sondern als kleines Inline-SVG direkt im Modul. Muster: zu prüfen Die SVG-Symbole (ms-ico-watch / -pruefen / -dringend / -ok) werden EINMAL pro Seite als …-Block eingebunden (siehe unten im Kommentar 'SVG-SYMBOLE'). So sind sie überall verfügbar, ohne Internet. */ .ms-pill{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:500; padding:3px 10px; border-radius:20px; background:var(--paper-deep); color:var(--ink-soft); } .ms-ico{ width:14px; height:14px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .ms-pill--ok{ background:var(--ok-bg); color:var(--ok-tx); } .ms-pill--warn{ background:var(--warn-bg); color:var(--warn-tx); } .ms-pill--danger{ background:var(--danger-bg); color:var(--danger-tx); } .ms-pill--gelb{ background:var(--ms-gelb); color:var(--on-gelb); } /* --- Prüf-Signale, abgestuft (einheitlich in allen Modulen) --- */ .ms-pill--watch{ background:var(--sig-watch-bg); color:var(--sig-watch-tx); } .ms-pill--pruefen{ background:var(--sig-pruefen-bg); color:var(--sig-pruefen-tx); } .ms-pill--dringend{ background:var(--sig-dringend-bg); color:var(--sig-dringend-tx); } /* ---- 13b. TABELLEN-ZEILENSIGNAL (Balken links an der Zeile) ------- Ganze zu prüfende Zeile auf einen Blick auffindbar, ohne sie grell zu färben. Anwendung: der ERSTEN Spalte bekommt die Balkenklasse, z.B. 3806. Wirkt zusammen mit .ms-table. */ .ms-bar--watch, .ms-bar--pruefen, .ms-bar--dringend, .ms-bar--ok{ border-left:3px solid transparent; } .ms-bar--watch{ border-left-color:var(--sig-watch-bar); } .ms-bar--pruefen{ border-left-color:var(--sig-pruefen-bar); } .ms-bar--dringend{ border-left-color:var(--sig-dringend-bar); } .ms-bar--ok{ border-left-color:var(--ok); } /* ---- 13c. PRÜF-FELD (Formular) ----------------------------------- Eingabefeld/Anzeige mit Prüf-Hinweis: dezenter Signalrahmen + Icon, darunter ein Hinweis, WAS zu tun ist. Aufbau:
Wert
Vom StB zu bestätigen
*/ .ms-field-pruefen{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; padding:9px 11px; border-radius:var(--radius); border:1px solid var(--sig-pruefen-bar); background:var(--sig-pruefen-field-bg); color:var(--ink); } .ms-field-pruefen .ms-ico{ width:16px; height:16px; color:var(--sig-pruefen-tx); } .ms-field-hint{ display:flex; align-items:center; gap:5px; font-size:12px; margin-top:5px; color:var(--sig-pruefen-tx); } .ms-field-hint .ms-ico{ width:14px; height:14px; } /* ---- 14. HILFSKLASSEN --------------------------------------------- */ .ms-muted{ color:var(--ink-mute); } .ms-row{ display:flex; align-items:center; gap:8px; } .ms-spread{ display:flex; align-items:center; justify-content:space-between; } .ms-app{ display:flex; min-height:100vh; } .ms-app__main{ flex:1; display:flex; flex-direction:column; } /* ---- 15. RESPONSIVE ----------------------------------------------- */ @media (max-width:820px){ .ms-topbar__nav{ gap:14px; font-size:12px; } } /* ---- 16. FOKUS-SICHTBARKEIT --------------------------------------- */ :focus-visible{ outline:2px solid var(--ms-gelb); outline-offset:1px; } /* ===================================================================== SVG-SYMBOLE für die Prüf-Signale (offline-fest, kein CDN nötig) --------------------------------------------------------------------- Diesen Block EINMAL pro HTML-Seite direkt nach einfügen. Danach überall referenzieren mit z.B.: ===================================================================== */