/* AUTO-GENERIERT via scripts/css-merge.js — zusammenhängender Lauf, Kaskade erhalten. Quellen (Ladereihenfolge): sh-skin-pills.css, sh-skin-kpi.css, sh-skin-sidebar.css, sh-skin-statusbar.css, sh-skin-list.css, sh-skin-topbar.css, sh-topbar-tidy.css, sh-darkfix-pte.css, sh-polish-2026-06.css Regenerieren: node scripts/css-merge.js --out sh-skin.css sh-skin-pills.css sh-skin-kpi.css sh-skin-sidebar.css sh-skin-statusbar.css sh-skin-list.css sh-skin-topbar.css sh-topbar-tidy.css sh-darkfix-pte.css sh-polish-2026-06.css */ /* ===== gemergt aus sh-skin-pills.css ===== */ /* ========================================================================= ServiceHub — Odoo-Skin · Komponente "status-pills" ------------------------------------------------------------------------- ADDITIVE Politur-Schicht. Bildet die Mockup-.sho-pill (weiche Farbfläche + führender Farbpunkt, randlos, Pill-Radius) auf die ECHTEN Status-Badges der App ab: aus internal.js + order-editor-integration.js (ORDER_STATUS_MAP cls). Quelle Mockup: public/_odoo-target-mockup.html Sektion 1 (.sho-pill, Z.96-101). Echte Anker (verifiziert): - internal.css Z.1758 (.status-badge Basis), 1788-1816 (--mod), 4799 (--info), 1818-1840 (legacy .status-ok/.status-warning/.status-failed/.status-running) - internal-modern.css Z.790 (.status-badge Basis), 805-833 (--mod Sammel-Selektoren) - internal.js durchgängig: --neutral/--active/--warning/--success/--danger/--info + legacy status-ok/status-warning/status-failed - order-editor-integration.js ORDER_STATUS_MAP → cls active|neutral|success|danger LADEREIHENFOLGE: dieses File MUSS als LETZTES nach internal.css + internal-modern.css (und nach den sh-odoo-*.css) geladen werden. SPEZIFITÄT: Container-Prefix #mainContent (id 1 + class 1) schlägt die Basis-/Modifier-Regeln (reine Single-Class) sicher per Kaskade — kein globales !important nötig. Nichts wird versteckt, kein Layout-Teardown. Tokens: sh-odoo-tokens.css (+ sh-tokens-brand.css) liefern die --sh-o-*-Skala; alle Farb-Tokens mit Hard-Fallback. ========================================================================= */ /* ── Form & Typografie der Pille (Mockup .sho-pill Z.96) ────────────────── Vereinheitlicht die zwei widersprüchlichen Basis-Definitionen (internal.css 4px/10px/r6/inline-block vs internal-modern.css 3px/9px/r12) auf den Mockup-Wert. Rahmen transparent (Mockup = randlos), Box bleibt stabil. */ #mainContent .status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--sh-o-radius-pill, 999px); font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: 0; border: 1px solid transparent; vertical-align: middle; white-space: nowrap; } /* ── Der führende Farbpunkt (Mockup .sho-pill::before Z.97) ─────────────── nimmt die Vordergrundfarbe der jeweiligen Pille (currentColor). */ #mainContent .status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; flex: 0 0 auto; } /* Punkt-Unterdrückung für leere/Platzhalter-Badges ("—", "–"), damit ein nackter Strich nicht wie ein Status aussieht. */ #mainContent .status-badge:empty::before { content: none; } /* ── Farbpaare: weiche Fläche + Vollton-Text (Mockup Z.98-101) ──────────── --ok / --warn / --info / --neutral + Danger (App-Erweiterung). */ /* ok (grün) — success + alias ok + legacy status-ok */ #mainContent .status-badge--success, #mainContent .status-badge--ok, #mainContent .status-badge.status-ok { background: var(--sh-o-ok-soft, #ecfdf5); color: var(--sh-o-ok, #2f855a); } /* warn (amber) — warning + alias warn + legacy status-warning/status-running */ #mainContent .status-badge--warning, #mainContent .status-badge--warn, #mainContent .status-badge.status-warning, #mainContent .status-badge.status-running { background: var(--sh-o-warn-soft, #fff7e6); color: var(--sh-o-warn, #b7791f); } /* info (blau) — active + info (Alias von active im Render-Code) */ #mainContent .status-badge--active, #mainContent .status-badge--info { background: var(--sh-o-info-soft, #eef4ff); color: var(--sh-o-info, #2b6cb0); } /* neutral (grau) — Standard-/Entwurf-Status */ #mainContent .status-badge--neutral { background: var(--sh-o-surface-soft, #f7f8fa); color: var(--sh-o-text-muted, #6b7280); } /* danger (rot) — Storniert/Fehlgeschlagen (App-Status, nicht Marken-Rot: semantisches Gefahr-Rot --sh-o-danger, klar getrennt von var(--sh-brand)). */ #mainContent .status-badge--danger, #mainContent .status-badge.status-failed { background: var(--sh-o-danger-soft, #fdecec); color: var(--sh-o-danger, #c53030); } /* ── DARK-MODE ─────────────────────────────────────────────────────────── Die -soft-Flächen werden bereits in sh-odoo-tokens.css zu tonalen rgba(...,.16)-Werten auf dunklem Grund invertiert; --sh-o-text-muted invertiert ebenfalls (→ #b3a99e), neutral ist also lesbar. Die saturierten VORDERGRUND-Töne (ok #2f855a / info #2b6cb0 / danger #c53030 / warn #b7791f) invertieren NICHT und wirken auf near-black etwas dunkel → gezielt aufhellen (nur Vordergrund, Fläche bleibt tonal). */ [data-theme="dark"] #mainContent .status-badge--success, [data-theme="dark"] #mainContent .status-badge--ok, [data-theme="dark"] #mainContent .status-badge.status-ok { color: #6ee7a8; } [data-theme="dark"] #mainContent .status-badge--warning, [data-theme="dark"] #mainContent .status-badge--warn, [data-theme="dark"] #mainContent .status-badge.status-warning, [data-theme="dark"] #mainContent .status-badge.status-running { color: #f0c674; } [data-theme="dark"] #mainContent .status-badge--active, [data-theme="dark"] #mainContent .status-badge--info { color: #8ab4f8; } [data-theme="dark"] #mainContent .status-badge--danger, [data-theme="dark"] #mainContent .status-badge.status-failed { color: #f6a6a6; } /* neutral im Dark: --sh-o-text-muted (#b3a99e) genügt — keine Sonderregel. */ /* ===== gemergt aus sh-skin-kpi.css ===== */ /* ============================================================================ sh-skin-kpi — Odoo-Zielbild „KPI-Kacheln" (Mockup Sektion 4, .sho-kpi*). ADDITIVE Politur-Schicht. MUSS ZULETZT laden (nach sh-dashboard-friendly.css, das seinerseits nach sh-odoo-theme.css lädt) — sonst greifen die hier gesetzten Hero-/Surface-Werte nicht über die Friendly-Defaults. Bildet ab (echter Render: dashboard-widget-registry.js kpiCard(), Z.94-102): .dw-kpi-row → Container der KPI-Zeile .dw-kpi-item .dw-kpi--{highlight|warn|ok|danger|info} .dw-kpi-value / .dw-kpi-label / .dw-kpi-meta KEIN .dw-kpi-card — toter Kontrakt (siehe Memory dashboard-kpi-class-contract). Mockup-Quelle (.sho-kpi, Z.158-167): - normal: weiße Kachel + Haarlinie + Radius + Klick-Affordanz + Hover-Schatten - .sho-kpi--hero: Markenrot-Verlauf 135°, weißer Text, randlos - .val 26px/700 · .lab 13px/muted · .delta 12px/600 Hero ohne eigene DOM-Klasse → abgebildet auf die ERSTE highlight-Kachel der Zeile (`.dw-kpi-row > .dw-kpi-item:first-child.dw-kpi--highlight`), damit pro Zeile genau EINE Hero-Kachel entsteht (mehrere highlight möglich). Korrigiert zugleich den Dark-Mode-Defekt des Friendly-Layers: dort sind --dbf-tile-bg / --dbf-ink / Kachel-BG hart hell ohne [data-theme="dark"]. Markenrot diszipliniert: NUR die Hero-Kachel trägt Markenrot-Fläche. Layout unverändert (flex/gap bleibt); nur Farbe/Rahmen/Radius/Schatten/Typo. ============================================================================ */ /* ── Zeile: nur sanfte gap-Angleichung an Mockup (--sh-o-s3); Layout=flex bleibt ── */ #mainContent .dw-kpi-row { gap: var(--sh-o-s3, 12px); } /* ── Normale Kachel: reinweiß + Haarlinie + Radius + ruhiger Schatten (Mockup .sho-kpi) ── Friendly-Layer füllt --dbf-tile-bg(#f8fafc); Mockup will Surface(#fff). */ #mainContent .dw-kpi-row .dw-kpi-item { background: var(--sh-o-surface, #fff); border: 1px solid var(--sh-o-border, #e6e8ec); border-radius: var(--sh-o-r-md, 10px); box-shadow: var(--sh-o-sh-1, 0 1px 2px rgba(16, 24, 40, .06)); cursor: pointer; /* Klick-Affordanz (Mockup; DOM hat kein ) */ } /* Hover = ruhiger Mockup-Hover (sh-o-sh-2), dezenter Lift; dämpft Friendly-Sprung */ #mainContent .dw-kpi-row .dw-kpi-item:hover { box-shadow: var(--sh-o-sh-2, 0 6px 18px rgba(16, 24, 40, .10)); transform: translateY(-1px); border-color: var(--sh-o-border-strong, #d6dae0); } /* ── Typo nach Mockup (val 26px/700 · lab 13px/muted · delta 12px/600) ───────── */ #mainContent .dw-kpi-row .dw-kpi-item .dw-kpi-value { font-size: 1.55rem; /* ≈26px Mockup (Friendly: 1.42rem) */ font-weight: 700; /* Mockup 700 (Friendly: 800) */ color: var(--sh-o-text, #1f2329); } #mainContent .dw-kpi-row .dw-kpi-item .dw-kpi-label { font-size: .8rem; color: var(--sh-o-text-muted, #6b7280); } #mainContent .dw-kpi-row .dw-kpi-item .dw-kpi-meta { font-size: .72rem; font-weight: 600; color: var(--sh-o-text-faint, #9aa1ac); /* neutrale Delta-Optik (kein up/down im DOM) */ } /* ════════════════════════════════════════════════════════════════════════ HERO — erste highlight-Kachel der Zeile (Mockup .sho-kpi--hero) Markenrot-Verlauf 135°, weißer Text, randlos. Überschreibt Friendly-Akzent- streifen + dunkle Wertfarbe, die den Verlauf-Untergrund nicht kennen. ════════════════════════════════════════════════════════════════════════ */ #mainContent .dw-kpi-row > .dw-kpi-item:first-child.dw-kpi--highlight { background: linear-gradient(135deg, var(--sh-brand, #E73D25), var(--sh-brand-700, #C5331E)); border-color: transparent; border-left-color: transparent; /* Friendly-Akzentstreifen neutralisieren */ box-shadow: var(--sh-o-sh-2, 0 6px 18px rgba(16, 24, 40, .10)); color: #fff; } #mainContent .dw-kpi-row > .dw-kpi-item:first-child.dw-kpi--highlight:hover { box-shadow: var(--sh-o-sh-2, 0 6px 18px rgba(16, 24, 40, .10)); border-color: transparent; transform: translateY(-1px); } #mainContent .dw-kpi-row > .dw-kpi-item:first-child.dw-kpi--highlight .dw-kpi-value { color: #fff; } #mainContent .dw-kpi-row > .dw-kpi-item:first-child.dw-kpi--highlight .dw-kpi-label, #mainContent .dw-kpi-row > .dw-kpi-item:first-child.dw-kpi--highlight .dw-kpi-meta { color: rgba(255, 255, 255, .85); } /* Info-Icon der Hero-Kachel mitführen (echtes Markup: .elmetic-info-icon-inner = "i"-Badge, info-icon.js Z.25-26) — sonst zu dunkel auf Rot. Nur Farbgebung, Form/Größe bleibt. */ #mainContent .dw-kpi-row > .dw-kpi-item:first-child.dw-kpi--highlight .dw-kpi-label .elmetic-info-icon-inner { color: #fff; border-color: rgba(255, 255, 255, .55); } /* ════════════════════════════════════════════════════════════════════════ DARK MODE — Friendly-Layer liefert hier NICHTS (hart helle Hex) → hier nötig. Invertierende ELMETIC-Tokens nutzen; Hero bleibt Markenrot (trägt auch dunkel). ════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] #mainContent .dw-kpi-row .dw-kpi-item { background: var(--elmetic-card, #1E1A16); border-color: var(--elmetic-border, #2E2822); box-shadow: var(--sh-o-sh-1, 0 1px 2px rgba(0, 0, 0, .35)); } [data-theme="dark"] #mainContent .dw-kpi-row .dw-kpi-item:hover { box-shadow: var(--sh-o-sh-2, 0 8px 22px rgba(0, 0, 0, .45)); border-color: var(--elmetic-border-strong, #3A332B); } [data-theme="dark"] #mainContent .dw-kpi-row .dw-kpi-item .dw-kpi-value { color: var(--elmetic-text, #F6F1EC); } [data-theme="dark"] #mainContent .dw-kpi-row .dw-kpi-item .dw-kpi-label { color: var(--elmetic-muted-2, #B3A99E); } [data-theme="dark"] #mainContent .dw-kpi-row .dw-kpi-item .dw-kpi-meta { color: var(--elmetic-muted, #8C8175); } /* Status-Tönungen des Friendly-Layers (warn/danger = hart helle Verläufe) dunkel neutralisieren, damit kein heller Block im Dark-UI steht; Status bleibt über den Akzentstreifen erkennbar. */ [data-theme="dark"] #mainContent .dw-kpi-row .dw-kpi-item.dw-kpi--warn, [data-theme="dark"] #mainContent .dw-kpi-row .dw-kpi-item.dw-kpi--danger { background: var(--elmetic-card, #1E1A16); border-color: var(--elmetic-border, #2E2822); } [data-theme="dark"] #mainContent .dw-kpi-row .dw-kpi-item.dw-kpi--warn .dw-kpi-value { color: var(--warn, #E5A33C); } [data-theme="dark"] #mainContent .dw-kpi-row .dw-kpi-item.dw-kpi--danger .dw-kpi-value { color: var(--sh-o-danger, #e5484d); } /* Hero dunkel: Verlauf + weißer Text bleiben (Markenrot trägt auf dunklem Grund) */ [data-theme="dark"] #mainContent .dw-kpi-row > .dw-kpi-item:first-child.dw-kpi--highlight { background: linear-gradient(135deg, var(--sh-brand, #E73D25), var(--sh-brand-700, #C5331E)); border-color: transparent; } [data-theme="dark"] #mainContent .dw-kpi-row > .dw-kpi-item:first-child.dw-kpi--highlight .dw-kpi-value { color: #fff; } [data-theme="dark"] #mainContent .dw-kpi-row > .dw-kpi-item:first-child.dw-kpi--highlight .dw-kpi-label, [data-theme="dark"] #mainContent .dw-kpi-row > .dw-kpi-item:first-child.dw-kpi--highlight .dw-kpi-meta { color: rgba(255, 255, 255, .85); } /* ===== gemergt aus sh-skin-sidebar.css ===== */ /* ===================================================================== sh-skin-sidebar.css — ADDITIV, CSS-ONLY (kein JS, keine DOM-Injektion) --------------------------------------------------------------------- Komponente "sidebar" — Odoo-Zielbild-Politur. ZIELBILD (public/_odoo-target-mockup.html, .sho-side*): .sho-side__grp { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--sh-o-text-faint); padding:s3 s3 s1; } (= ruhige Sektions-Caption) .sho-nav { gap:10px; color:var(--sh-o-text); font-weight:500; } .sho-nav:hover { background:var(--sh-o-surface-soft); } .sho-nav.active{ accent-Feld + inset 3px 0 + Marken-Text; } .sho-nav .ic { opacity:.85; } (= ruhiges Resting-Icon) ECHTE VERANKERUNG (verifiziert in public/views/internal/internal.js Z.1628-1675 + getNavIconSvg Z.68): #sidebarEl section.nav-group[.nav-group--active][.nav-group--collapsed] button.nav-group-header (Favoriten: div.nav-group-header--static) span.nav-item-icon > svg (optionales Gruppen-Icon, inline-SVG) span.nav-group-label span.nav-group-chevron div.nav-group-items a.nav-item.nav-item--child|--favorite[.active] span.nav-item-icon > svg span.nav-item-label button.nav-item-fav KOEXISTENZ (NICHT duplizieren / NICHT bekaempfen): - sh-odoo-sidebar.css : besitzt den AKTIV-Eintrag (.nav-item.active Farbe/ Feld/Balken/Icon) + Hover + Fokus. >> Hier NICHT. - sh-sidebar-polish.css: besitzt Chevron-Opacity (.55/.9) + nav-group-label letter-spacing(.06em) + item padding. >> Hier NICHT erneut setzen. - sh-redesign-02-shell.css: setzt #sidebarEl .nav-group-label{color:--sh-muted} (1-1-1) und #sidebarEl .nav-item .nav-item-icon svg {color:--sh-muted} (1-2-2) sowie .nav-group--active .nav-group-header{color:--sh-text}. DIESE DATEI liefert NUR die additive Lücke zum Mockup: (1) Sektions-Caption noch ruhiger/fainter — NUR fuer NICHT-aktive Gruppen (aktive Gruppe behaelt ihren kraeftigen --sh-text aus dem Shell). (2) Etwas Luft ZWISCHEN den Gruppen (Sektions-Trennung wie im Mockup). (3) Resting-Icon-Ruhe (opacity, NUR nicht-aktive Eintraege). STRIKT NUR Farbe / Opacity / sanftes Spacing (margin/padding). KEIN display/position/float/grid-template. Versteckt NICHTS. LADEREIHENFOLGE: MUSS in index.html NACH sh-redesign-02-shell.css UND NACH sh-odoo-sidebar.css / sh-sidebar-polish.css geladen werden (laedt zuletzt). Spezifitaet bewusst minimal: 1-2-1 schlaegt Shell-1-1-1 ohne !important; reicht fuer (1). (2)+(3) treffen nur ungesetzte Properties. DARK-MODE: alle Farb-/Opacity-Regeln leiten aus theme-bewussten Sidebar- Tokens ab (--sh-muted: hell #9A8F84 / dunkel #8C8175, beide lesbar) bzw. nutzen Opacity (theme-neutral). Zusaetzliche [data-theme="dark"]-Absicherung fuer die Caption unten. ===================================================================== */ /* --------------------------------------------------------------------- 1) SEKTIONS-CAPTION noch ruhiger (Mockup: --sh-o-text-faint) Nur NICHT-aktive Gruppen. Aktive Gruppe -> Shell-Regel (.nav-group--active .nav-group-header{color:--sh-text}) gewinnt weiterhin, weil wir sie hier ausschliessen. Spezifitaet: #sidebarEl .nav-group:not(.nav-group--active) .nav-group-label = 1-2-1 > Shell 1-1-1 (#sidebarEl .nav-group-label). Farbe theme-bewusst aus --sh-muted abgeleitet (Fallback #9aa1ac = Mockup-faint im Light). Im Dark wuerde #9aa1ac zu kalt wirken -> wir bleiben auf dem dunklen --sh-muted (Override unten). --------------------------------------------------------------------- */ #sidebarEl .nav-group:not(.nav-group--active) .nav-group-label { color: var(--sh-muted, #9aa1ac); /* leicht erhoehte Laufweite Richtung Mockup-Caption; sh-sidebar-polish setzt .06em — wir heben minimal an, gleiche Property = klar additiv */ letter-spacing: .07em; } /* Favoriten-Caption (statischer Header, hat nie --active) gleich behandeln. */ #sidebarEl .nav-group--favorites .nav-group-header--static .nav-group-label { color: var(--sh-muted, #9aa1ac); } /* --------------------------------------------------------------------- 2) SEKTIONS-ABSTAND — sanfte Luft zwischen Gruppen (Mockup-Rhythmus). Reines Spacing (Regel 4 erlaubt padding/margin). Trifft nur die Folge- gruppen, nicht die erste -> kein Sprung am Listenkopf. Kein Layout-Umbau. --------------------------------------------------------------------- */ #sidebarEl .nav-group + .nav-group { margin-top: 4px; } /* Der Gruppen-Kopf bekommt minimal mehr Luft nach oben (Caption "atmet"), ohne die Klick-Hoehe zu veraendern. Konservativ. */ #sidebarEl .nav-group:not(:first-child) .nav-group-header { padding-top: 8px; } /* --------------------------------------------------------------------- 3) RESTING-ICON-RUHE (Mockup: .ic{opacity:.85}) Nur NICHT-aktive Eintraege. Aktive Icons gehoeren sh-odoo-sidebar.css (volles Markenrot) -> hier ausgeschlossen, damit sie kraeftig bleiben. Opacity ist theme-neutral und kollidiert mit keiner Farbregel. --------------------------------------------------------------------- */ #sidebarEl .nav-item:not(.active) .nav-item-icon, #sidebarEl .nav-item:not(.active) .nav-item-icon svg { opacity: .9; } /* Gruppen-Icon im Kopf ebenso ruhig halten (nicht-aktive Gruppe). */ #sidebarEl .nav-group:not(.nav-group--active) .nav-group-header .nav-item-icon, #sidebarEl .nav-group:not(.nav-group--active) .nav-group-header .nav-item-icon svg { opacity: .9; } /* --------------------------------------------------------------------- DARK-MODE-ABSICHERUNG --sh-muted ist im Dark bereits lesbar (#8C8175) -> die Caption-Regeln oben greifen korrekt. Wir setzen die Caption im Dark explizit NICHT auf den hellen Mockup-Fallback #9aa1ac, sondern halten den dunklen muted-Ton, falls das Token mal nicht aufgeloest wird. (Opacity-Regeln sind theme-neutral.) --------------------------------------------------------------------- */ [data-theme="dark"] #sidebarEl .nav-group:not(.nav-group--active) .nav-group-label, [data-theme="dark"] #sidebarEl .nav-group--favorites .nav-group-header--static .nav-group-label { color: var(--sh-muted, #8C8175); } /* ===== gemergt aus sh-skin-statusbar.css ===== */ /* ============================================================================ sh-skin-statusbar.css ADDITIVE Optik-Schicht — Komponente "statusbar-ribbon". Bildet den Pfeil-Ribbon-Look aus dem Odoo-Zielbild (public/_odoo-target-mockup.html Sektion 2, .sho-statusbar / .sho-stage) auf die ECHTE App-Statusleiste ab. ECHTE Selektoren (verifiziert in sh-statusbar.js -> ShStatusbar.render): Host-Container : .sh-cp-statusbar (Ids oei- / qei- / iei- / iei-cn-statusbar, gesetzt in order-/quote-/invoice-editor-integration.js) Reihe : .sh-statusbar Stufe : .sh-statusbar__stage (.is-done / .is-current / .is-cancelled) Nummer-Bubble : .sh-statusbar__num NULL Funktionsaenderung. Additiv. Kein Markup, kein display:none, kein Layout- Teardown. Nur Form (clip-path-Pfeil), Farbe, Rahmen, Radius, Abstand, Typo. WARUM DIESES FILE NOETIG IST (Ladereihenfolge + Spezifitaet): Drei Stylesheets stapeln sich, das LETZTE gewinnt: 1. sh-statusbar.css -> Chevron-Basis (clip-path-Pfeil) 2. sh-redesign-ed-stepper.css -> Recolor (warm), Chevron bleibt 3. sh-rd-ed-stepper-flat.css -> HEBT den Chevron auf (clip-path:none), macht flache Pille + runde Dot + Linie ::before. Selektoren = 3 Klassen, laedt zuletzt -> SIEGT. Das Zielbild will aber das CHEVRON-PFEIL-RIBBON. Also muss dieses File die Flat-Datei an genau ihren Punkten ueberstimmen: gleiche 3-Klassen-Spezifitaet + spaeteres Laden, und die Flat-Verbindungslinie (::before) neutralisieren. LADEREIHENFOLGE: Dieses MUSS NACH sh-rd-ed-stepper-flat.css stehen. KLICK-AFFORDANZ: sh-odoo-statusbar-click.js markiert klickbare Stufen mit [data-sh-clickable="1"] und injiziert cursor:pointer + :hover (Helligkeit + Brand-Ring). Dieses File setzt KEIN cursor, KEIN konkurrierendes box-shadow auf die Stufe -> Affordanz bleibt intakt. Token-Hygiene: keine Stern-Slash-Paare im Kommentar; Tokens einzeln im Text. ============================================================================ */ /* =========================================================================== 1) CHEVRON-FORM WIEDERHERSTELLEN (Flat-Reset rueckgaengig) Gleiche 3-Klassen-Spezifitaet wie sh-rd-ed-stepper-flat.css:119-122; laedt spaeter -> gewinnt. Stufe wird wieder zur Pfeil-Pille (Mockup .sho-stage). =========================================================================== */ .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage, .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:first-child, .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:last-child, .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:first-child:last-child { position: relative; display: inline-flex; align-items: center; gap: .4rem; margin: 0 -9px 0 0; padding: 5px 16px 5px 22px; background: var(--sh-o-surface-soft, #f7f8fa); color: var(--sh-o-text-faint, #9aa1ac); border-radius: 0; font-size: 12px; font-weight: 600; white-space: nowrap; /* Pfeil-Ribbon wie Mockup .sho-stage (Z.107) */ -webkit-clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%); clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%); transition: background .16s ease, color .16s ease; } /* Erste Stufe: keine linke Einkerbung, linke Ecken gerundet (Mockup .sho-stage:first-child Z.108) */ .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:first-child { padding-left: 14px; border-top-left-radius: var(--sh-o-r-sm, 6px); border-bottom-left-radius: var(--sh-o-r-sm, 6px); -webkit-clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%); clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%); } /* Letzte Stufe: flacher rechter Abschluss, rechte Ecken gerundet, kein Ueberlapp */ .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:last-child { margin-right: 0; padding-right: 18px; border-top-right-radius: var(--sh-o-r-sm, 6px); border-bottom-right-radius: var(--sh-o-r-sm, 6px); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 11px 50%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 11px 50%); } /* Einzige Stufe: keine Pfeilform, voll gerundet */ .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:first-child:last-child { margin-right: 0; border-radius: var(--sh-o-r-sm, 6px); -webkit-clip-path: none; clip-path: none; } /* =========================================================================== 2) FLAT-VERBINDUNGSLINIE NEUTRALISIEREN sh-rd-ed-stepper-flat.css:147 setzt eine 2px-Linie als ::before; im Chevron ragt sie als Strich-Bruecke heraus. Inhalt entfernen -> sauberer Pfeil. =========================================================================== */ .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage::before, .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:first-child::before, .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-done::before, .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-current::before { content: none; } /* =========================================================================== 3) FLAECHENFARBEN JE ZUSTAND (Mockup Sektion 2) done : Flaeche bleibt soft, nur Text gruen (Mockup .sho-stage.done -> nur color) cur : Markenrot-Flaeche, weisser Text (Mockup .sho-stage.cur) -- diszipliniert, NUR die aktuelle Stufe traegt das Markenrot. =========================================================================== */ .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-done { background: var(--sh-o-surface-soft, #f7f8fa); color: var(--sh-o-ok, #2f855a); font-weight: 600; } .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-current { background: var(--sh-brand, #E73D25); color: #fff; font-weight: 700; } /* Negativer Endzustand (storniert/abgelehnt) — im Mockup nicht gezeigt, tonal konsistent aus Tokens (Semantik der Basis erhalten). */ .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-cancelled { background: var(--sh-o-danger-soft, #fdecec); color: var(--sh-o-danger, #c53030); } .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-current.is-cancelled { background: var(--sh-o-danger, #c53030); color: #fff; } /* =========================================================================== 4) NUMMERN-BUBBLE -> kompakte Plakette Flat machte sie zum 1.7rem-Ring mit Border + Akzent-Ring. Zurueck zur kompakten runden Bubble (Optik der Basis sh-statusbar.css), Farbe folgt Zustand. =========================================================================== */ .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage .sh-statusbar__num { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; margin: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .07); color: inherit; box-shadow: none; font-size: .68rem; font-weight: 600; line-height: 1; } /* Akzent-Ring der Flat-Bubble entfernen (Flat:221) */ .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-current .sh-statusbar__num::before { content: none; } /* Aktuell: helle Bubble auf Markenrot-Flaeche */ .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-current .sh-statusbar__num { background: rgba(255, 255, 255, .26); color: #fff; } /* Erledigt: zarte gruene Bubble, Haken-Glyph bleibt (::after aus Basis) */ .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-done .sh-statusbar__num { background: color-mix(in srgb, var(--sh-o-ok, #2f855a) 18%, transparent); color: var(--sh-o-ok, #2f855a); font-size: 0; /* Ziffer ausblenden — der Haken (::after, .66rem) ersetzt sie; behebt Doppelglyph "1✓" */ } .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-done .sh-statusbar__num::after { content: '\2713'; font-size: .66rem; font-weight: 700; line-height: 1; color: var(--sh-o-ok, #2f855a); } /* Storniert-Bubble tonal */ .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-cancelled .sh-statusbar__num { background: rgba(0, 0, 0, .07); color: inherit; } .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-current.is-cancelled .sh-statusbar__num { background: rgba(255, 255, 255, .26); color: #fff; } /* =========================================================================== 5) REIHE: Abstand + Typo (Mockup .sho-statusbar gap:2px) =========================================================================== */ .sh-cp-statusbar .sh-statusbar { align-items: center; gap: 2px; margin: 0 0 .6rem; font-size: 12px; font-weight: 600; } /* Host-Rahmen ruhig halten (kein eigener Hintergrund, erbt von .ue-toolbar.sh-cp) */ .sh-cp-statusbar { padding: .7rem .8rem .25rem; } /* =========================================================================== 6) DARK MODE Die Token-Fallbacks (#f7f8fa etc.) wuerden im Dark-Theme zu hell wirken. --sh-o-surface-soft / --sh-o-ok-soft / --sh-o-danger-soft kippen unter [data-theme="dark"] bereits korrekt (sh-odoo-tokens.css:70/76/79); hier nur die HARTKODIERTEN Fallback-Werte (kommend/done-Flaeche, schwarze Bubble) gegen lesbare Dark-Werte tauschen. Markenrot (is-current) bleibt; weisser Text darauf ist in beiden Modi kontraststark. =========================================================================== */ [data-theme="dark"] .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage, [data-theme="dark"] .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:first-child, [data-theme="dark"] .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:last-child, [data-theme="dark"] .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:first-child:last-child { background: var(--sh-o-surface-soft, #241f1a); color: var(--sh-o-text-faint, #8c8175); } [data-theme="dark"] .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-done { background: var(--sh-o-surface-soft, #241f1a); color: var(--sh-o-ok, #3bc07a); } [data-theme="dark"] .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-cancelled { background: var(--sh-o-danger-soft, rgba(197, 48, 48, .18)); color: var(--sh-o-danger, #f08a8a); } [data-theme="dark"] .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage .sh-statusbar__num { background: rgba(255, 255, 255, .12); } [data-theme="dark"] .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-done .sh-statusbar__num { background: color-mix(in srgb, var(--sh-o-ok, #3bc07a) 22%, transparent); color: var(--sh-o-ok, #3bc07a); } [data-theme="dark"] .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-done .sh-statusbar__num::after { color: var(--sh-o-ok, #3bc07a); } [data-theme="dark"] .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage.is-cancelled .sh-statusbar__num { background: rgba(255, 255, 255, .12); } /* =========================================================================== 7) MOBILE-FEINSCHLIFF Basis-Reihe bricht bereits um (flex-wrap aus sh-statusbar.css). Bei Umbruch wuerde negatives margin-right + Pfeilspitze unsauber aussehen -> auf schmalen Viewports Pfeil entschaerfen, Stufen leicht kompakter. =========================================================================== */ @media (max-width: 640px) { .sh-cp-statusbar { padding: .55rem .5rem .15rem; } .sh-cp-statusbar .sh-statusbar { flex-wrap: wrap; row-gap: .35rem; } .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage, .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:first-child, .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:last-child { font-size: 11px; padding: 4px 12px 4px 16px; margin-right: 0; border-radius: var(--sh-o-r-sm, 6px); -webkit-clip-path: none; clip-path: none; } .sh-cp-statusbar .sh-statusbar .sh-statusbar__stage:first-child { padding-left: 12px; } } /* ===== gemergt aus sh-skin-list.css ===== */ /* ============================================================================ sh-skin-list.css — Odoo-Skin: Listenansicht (Komponente "list-table") ---------------------------------------------------------------------------- Bildet den LOOK von _odoo-target-mockup.html Sektion 1 (.sho-table) auf die ECHTEN App-Listen ab: #mainContent .table-wrap > table.data-table. ADDITIV, nur Optik (Farbe/Hintergrund/Rahmen/Radius/Typo/Abstand). KEIN Layout-Teardown, versteckt nichts. MUSS ZULETZT geladen werden (nach sh-redesign-01-components.css und sh-design-system.css), siehe Integrations-Spec. Alle Selektoren sind mit #mainContent gescopt (Spezifitaet 0-1-x), schlagen damit die nackten .data-table-Baselines (sh-design-system 0-1-x, sh-redesign-01 0-2-1) ohne globales Lecken und i. d. R. ohne !important. Tokens: sh-odoo-tokens.css + sh-tokens-brand.css (bereits geladen). Fallbacks immer mitgegeben. Dark-Mode: --sh-o-*-Tokens invertieren bereits; zusaetzlich expliziter [data-theme="dark"]-Block, um sh-redesign-01 Dark-Override zu schlagen. KOEXISTENZ: Bespoke-Listen (orders/customers/purchasing/warehouse) nutzen .table-wrap.sh-panel:has(...) (hoehere Spezifitaet durch :has) und behalten bewusst ihre warme Palette. Deshalb werden Rahmen/Radius hier am gesetzt (NICHT am .table-wrap), um nicht gegen deren Panel-Treatment zu kaempfen. ============================================================================ */ /* ---- Tabelle als gerahmte Karte (Mockup: .sho-table border+radius+overflow) ---- */ #mainContent .table-wrap > table.data-table { background: var(--sh-o-surface, #fff); border: 1px solid var(--sh-o-border, #e6e8ec); border-radius: var(--sh-o-r-md, 10px); /* overflow:hidden laesst den Radius greifen; scrollende Wrapper bleiben unberuehrt, da overflow am .table-wrap sitzt, nicht hier. */ overflow: hidden; } /* ---- Kopfzeile (Mockup: .sho-table thead th) ---- Schlaegt sh-redesign-01 (.data-table thead th, 0-2-1, warm-beige) und sh-design-system (.data-table th, border-bottom:2px). */ #mainContent .table-wrap > table.data-table thead th { background: var(--sh-o-surface-soft, #f7f8fa); color: var(--sh-o-text-muted, #6b7280); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; padding: 9px var(--sh-o-s3, 12px); border-bottom: 1px solid var(--sh-o-border, #e6e8ec); white-space: nowrap; } /* aktive Sortierspalte — Markenrot, diszipliniert (Klasse real via sh-odoo-sortable.js gesetzt; Mockup: .sho-table thead th.sorted) */ #mainContent .table-wrap > table.data-table thead th.sorted { color: var(--sh-brand, #E73D25); } /* ---- Datenzellen (Mockup: .sho-table tbody td) ---- vertical-align:middle ist Optik-Feintuning (sh-design-system setzt top), kein Struktur-Layout. */ #mainContent .table-wrap > table.data-table tbody td { padding: 9px var(--sh-o-s3, 12px); border-bottom: 1px solid var(--sh-o-border, #e6e8ec); vertical-align: middle; color: var(--sh-o-text, #1f2329); } /* ---- Zarter, kuehler Hover (Mockup: tr:hover #fafbfc) ---- ersetzt den warm-beige Hover aus sh-redesign-01/sh-design-system. */ #mainContent .table-wrap > table.data-table tbody tr:hover { background: var(--sh-o-surface-soft, #f7f8fa); } /* letzte Zeile randlos, damit der Karten-Radius sauber greift */ #mainContent .table-wrap > table.data-table tbody tr:last-child td { border-bottom: none; } /* ---- Zahlen-/Betragsspalten rechtsbuendig + tabellarische Ziffern ---- (Mockup: .sho-table .num). Real von internal.js NICHT durchgaengig gesetzt; greift defensiv, sobald td.num/th.num vorhanden ist (z. B. neuere Listen). Stoert bestehende Listen ohne .num nicht. */ #mainContent .table-wrap > table.data-table thead th.num, #mainContent .table-wrap > table.data-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; } /* Checkbox-Auswahlspalte schmal halten (Mockup: .sho-table .check) */ #mainContent .table-wrap > table.data-table td.check, #mainContent .table-wrap > table.data-table th.check { width: 34px; } /* ============================================================================ DARK MODE Tokens (--sh-o-surface/-surface-soft/-border/-text/-text-muted) invertieren bereits ueber sh-odoo-tokens.css. Dieser Block hebt die Regeln gezielt ueber sh-redesign-01-components.css [data-theme="dark"] .data-table (warm #241F1A), die vor dieser Datei laedt. Spezifitaet 0-1-(x+1) durch [data-theme]-Attr + #mainContent — schlaegt die Inkumbenten sicher. ============================================================================ */ [data-theme="dark"] #mainContent .table-wrap > table.data-table { background: var(--sh-o-surface, #1c1814); border-color: var(--sh-o-border, #2e2822); } [data-theme="dark"] #mainContent .table-wrap > table.data-table thead th { background: var(--sh-o-surface-soft, #241f1a); color: var(--sh-o-text-muted, #b8ab9d); border-bottom-color: var(--sh-o-border, #2e2822); } [data-theme="dark"] #mainContent .table-wrap > table.data-table thead th.sorted { color: var(--sh-brand, #E73D25); } [data-theme="dark"] #mainContent .table-wrap > table.data-table tbody td { color: var(--sh-o-text, #e2d8ce); border-bottom-color: var(--sh-o-border, #2e2822); } [data-theme="dark"] #mainContent .table-wrap > table.data-table tbody tr:hover { background: var(--sh-o-surface-soft, #241f1a); } [data-theme="dark"] #mainContent .table-wrap > table.data-table tbody tr:last-child td { border-bottom: none; } /* ===== gemergt aus sh-skin-topbar.css ===== */ /* ========================================================================= sh-skin-topbar.css — Odoo-Zielbild „Topbar" auf die ECHTE App gemappt ------------------------------------------------------------------------- ADDITIV. Lädt ZULETZT (nach sh-redesign-02-shell.css, sh-odoo-*). Bildet die dunkle Odoo-Kommandozeile (_odoo-target-mockup.html .sho-top, Z.30–41 / #231c17) auf die statische App-Topbar in index.html ab:
…
Verifizierte echte Selektoren (index.html Z.139–186): #topbar.topbar · .topbar-brand .topbar-company-name · .global-search-wrap .search-input · .user-main / .user-sub · .btn-ghost / .btn-primary .notifications-btn / .notifications-icon / .notifications-badge WICHTIG zur Dark-Mode-Sicherheit: Die Shell-Tokens machen die Topbar im Hellmodus WEISS (--sh-surface) und die Ghost-Buttons DUNKEL (--sh-text-2) → auf dunklem Grund unsichtbar. Diese Datei macht die Topbar zu FIXEM dunklem Chrome (wie Odoo) — in BEIDEN Themes identisch dunkel mit weißer Schrift → inhärent dark-mode-sicher. var(--sh-ink) wird BEWUSST NICHT für den BG genutzt: Hell #231C17 (=Mockup), Dark aber #F6F1EC (würde die Leiste weiß machen). Daher fixe Literale + Token nur dort, wo der Wert in beiden Themes passt. Das Breadcrumb (