/* =========================================================================
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 ( Z.190) liegt AUSSERHALB von .topbar
auf der hellen/dunklen Seitenfläche → bleibt UNANGETASTET (sonst weiße
Schrift auf hellem Grund). Bewusste Abweichung vom Mockup-Inline-Breadcrumb.
Markenrot diszipliniert: nur Primary-Aktion, Marken-Punkt, Such-Fokusring.
========================================================================= */
/* ---- 1) Topbar-Grundfläche: dunkles Chrome (Mockup .sho-top) ------------- */
/* minimale Spezifität, die die Shell-Regel #topbar.topbar (1 ID + 1 Klasse)
schlägt: gleiche Spezifität, aber spätere Ladereihenfolge gewinnt. */
#topbar.topbar {
background: #231c17; /* = Mockup .sho-top + Hell-Token --sh-ink; fix in beiden Themes */
color: #ffffff;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* ---- 2) Markenname + roter Punkt (Mockup .sho-top__brand + .dot) --------- */
#topbar .topbar-brand .topbar-company-name {
color: #ffffff; /* überschreibt --sh-ink aus der Shell */
}
/* dezenter roter Marken-Punkt vor dem Firmennamen (Mockup .dot, 9×9, r2).
Greift nur, wenn ein Firmenname gerendert ist (::before am gefüllten Span). */
#topbar .topbar-brand .topbar-company-name::before {
content: "";
display: inline-block;
width: 9px;
height: 9px;
margin-right: 8px;
border-radius: 2px;
background: var(--sh-brand, #E73D25);
vertical-align: baseline;
}
/* ---- 3) Globale Suche: dunkles Feld (Mockup .sho-top__search) ------------ */
#topbar .global-search-wrap .search-input,
#topbar .search-input {
background: #34291f; /* = Mockup-Feldfarbe; fix dunkel in beiden Themes */
border-color: rgba(255, 255, 255, .14);
color: #ffffff;
}
#topbar .global-search-wrap .search-input::placeholder,
#topbar .search-input::placeholder {
color: rgba(255, 255, 255, .58);
}
#topbar .global-search-wrap .search-input:hover,
#topbar .search-input:hover {
border-color: rgba(255, 255, 255, .26);
}
/* Fokus = Aktion → Markenrot erlaubt */
#topbar .global-search-wrap .search-input:focus,
#topbar .search-input:focus {
border-color: var(--sh-brand, #E73D25);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--sh-brand, #E73D25) 30%, transparent);
}
/* ---- 4) User-Box-Texte (Mockup .sho-top__user-Bereich) ------------------- */
#topbar .user-main {
color: #ffffff; /* überschreibt --sh-ink */
}
#topbar .user-sub {
color: rgba(255, 255, 255, .62); /* überschreibt --sh-muted */
}
/* ---- 5) Ghost-Buttons auf dunklem Grund lesbar machen -------------------- */
/* PFLICHT: Shell setzt #topbar .btn-ghost{color:--sh-text-2} = dunkel auf
dunkel = unsichtbar. Betrifft Sidebar-Toggle, KI-Befehl, Logout, Glocken. */
#topbar .btn-ghost {
color: rgba(255, 255, 255, .85);
border-color: rgba(255, 255, 255, .16);
}
#topbar .btn-ghost:hover {
background: rgba(255, 255, 255, .08);
color: #ffffff;
border-color: rgba(255, 255, 255, .30);
}
/* ---- 6) Primary-Aktion bleibt rot (Mockup-Akzent) ----------------------- */
#topbar .btn-primary {
background: var(--sh-brand, #E73D25);
border-color: var(--sh-brand, #E73D25);
color: #ffffff;
}
#topbar .btn-primary:hover {
background: var(--sh-brand-700, #C5331E);
border-color: var(--sh-brand-700, #C5331E);
}
/* ---- 7) Glocken-Icons + Badges ------------------------------------------ */
#topbar .notifications-icon {
color: rgba(255, 255, 255, .82);
}
#topbar .notifications-btn:hover .notifications-icon {
color: #ffffff;
}
/* Zähler-Badge: rote Aktionsfarbe, weiße Ziffer (auch über dunklem Chrome) */
#topbar .notifications-badge {
background: var(--sh-brand, #E73D25);
color: #ffffff;
border-color: #231c17;
}
/* =========================================================================
DARK-MODE
Die Topbar ist absichtlich in beiden Themes dasselbe dunkle Chrome; alle
Regeln oben nutzen entweder fixe dunkle Literale (Topbar-BG/Such-Feld) oder
weiße/rgba-weiße Schrift bzw. invarianten var(--sh-brand). Sie sind damit
bereits dark-mode-sicher und brauchen KEINE [data-theme="dark"]-Inversion.
Einzige defensive Klammer: falls eine spätere Dark-Datei die Topbar-Fläche
aufhellen wollte, fixieren wir BG/Schrift hier nochmals explizit.
========================================================================= */
[data-theme="dark"] #topbar.topbar {
background: #231c17;
color: #ffffff;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
[data-theme="dark"] #topbar .topbar-brand .topbar-company-name,
[data-theme="dark"] #topbar .user-main {
color: #ffffff;
}
[data-theme="dark"] #topbar .user-sub {
color: rgba(255, 255, 255, .62);
}
[data-theme="dark"] #topbar .global-search-wrap .search-input,
[data-theme="dark"] #topbar .search-input {
background: #34291f;
border-color: rgba(255, 255, 255, .14);
color: #ffffff;
}
[data-theme="dark"] #topbar .btn-ghost {
color: rgba(255, 255, 255, .85);
border-color: rgba(255, 255, 255, .16);
}
/* ---- Nachzügler: modul-injizierte Topbar-Controls auf der dunklen Bar lesbar ----
sh-simplify.js (View-Mode-Umschalter) + defensiv weitere injizierte Buttons/Links,
die eine eigene dunkle Textfarbe mitbringen und sonst dunkel-auf-dunkel stünden. */
#topbar .sh-vmode__btn { color: rgba(255,255,255,.74); }
#topbar .sh-vmode__btn.active,
#topbar .sh-vmode__btn[aria-pressed="true"],
#topbar .sh-vmode__btn.is-active { color: #fff; }
#topbar .sh-vmode { border-color: rgba(255,255,255,.22); }