/* ===================================================================== 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); }