/* ============================================================================ bausync Menü-Redesign — Kopfleiste + linkes Menü (ersetzt die alte Optik). Retargetiert auf die echten IDs #menu_top_big_1 / #menu_left_big_1 / #main_field_1 (fixed+absolut-Architektur bleibt). Zustands-Klassen (nav-collapsed / nav-peek / nav-locked / nav-open) liegen auf . Quelle: mockups/menu_redesign_mockup.html. Wird als LETZTES geladen -> gewinnt per Quell-Reihenfolge über bs_style_main_big.css / _small.css. ============================================================================ */ :root{ --green:#72AE74; --green-d:#5f9862; --green-bg:#EAF4E9; --green-tx:#4c8150; --ink:#242424; --grey:#5c5c5c; --grey2:#6a706c; --line:#E7E9E8; --side:#F7F8F8; --bg:#EDEDED; --top:#F1F2F2; --surface:#ffffff; --hover:#E7E9E8; --logout:#b1544c; --top-h:43px; --crumb-h:44px; --fs0:12px; --fs1:16px; --fs2:18px; --fs3:20px; --fs4:23px; --fs5:26px; } /* box-sizing nur im Menü (nicht app-weit) */ #menu_top_big_1, #menu_top_big_1 *, #menu_left_big_1, #menu_left_big_1 *, #bs-scrim{ box-sizing:border-box; } /* Beim Seitenaufbau (html.bs-noanim, gesetzt vor dem Paint, entfernt nach dem ersten Frame) laufen KEINE Übergänge: das aktive Untermenü steht sofort offen da, statt aufzuklappen — die Aufklapp-Animation lief bereits beim Klick auf der vorherigen Seite. */ html.bs-noanim #menu_left_big_1, html.bs-noanim #menu_left_big_1 *, html.bs-noanim #menu_top_big_1 *, html.bs-noanim #bs_crumb{ transition:none !important; animation:none !important; } /* alte Positionsregeln überschreiben + auf allen Viewports sichtbar (small.css setzt visibility:hidden) */ #menu_top_big_1, #menu_left_big_1{ visibility:visible !important; } #menu_top_small_1, #menu_top_small_1_grey{ display:none !important; } /* ===================== Kopfleiste (#menu_top_big_1) ===================== */ #menu_top_big_1{ position:fixed; top:0; left:0; width:100%; min-width:0; height:var(--top-h); z-index:120; background:var(--top); color:var(--ink); display:flex; align-items:center; justify-content:flex-start; gap:16px; padding:0 18px; text-align:left; border-bottom:1px solid var(--line); box-shadow:0 1px 3px rgba(0,0,0,.05); font-family:Abel,Helvetica,Arial,sans-serif; } #menu_top_big_1 .bs-brand{ display:flex; align-items:center; } /* mail_logo_4.png ist bereits horizontal (686x197) -> keine Drehung, Höhe steuert die Grösse */ #menu_top_big_1 .logo-box{ display:inline-flex; align-items:center; } #menu_top_big_1 .logo-img{ display:block; width:auto; height:29px; } #menu_top_big_1 .sp{ flex:1; } #menu_top_big_1 .tico{ width:34px;height:34px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;position:relative;color:var(--grey);text-decoration:none; } #menu_top_big_1 .tico:hover{ background:var(--hover); color:var(--ink); } /* Support: grauer Button mit reinem Headset-Icon (support_headset_1.svg, Motiv wie publictender aber ohne den gestrichelten Kreis), ganz rechts (order schiebt es hinter das Benutzer-Menü) */ #menu_top_big_1 .bs-support-btn{ order:10; margin-left:6px; display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px 0 8px; border-radius:8px; background:var(--hover); border:1px solid #D3D8D4; color:var(--ink); text-decoration:none; cursor:pointer; transition:background .15s ease, border-color .15s ease; } #menu_top_big_1 .bs-support-btn:hover{ background:#DBDFDC; border-color:#C3C9C4; } #menu_top_big_1 .bs-support-btn img{ width:22px; height:22px; display:block; flex:none; } #menu_top_big_1 .bs-support-btn .tico-txt{ font-family:Abel,Helvetica,Arial,sans-serif; font-size:var(--fs1); line-height:1; } #menu_top_big_1 .bs-toplogin{ font-size:var(--fs1); color:var(--ink); text-decoration:none; padding:6px 12px; border-radius:8px; } #menu_top_big_1 .bs-toplogin:hover{ background:var(--hover); } #menu_top_big_1 .bs-user{ position:relative; display:flex; align-items:center; gap:8px; cursor:pointer; padding:4px 6px 4px 4px; border-radius:20px; color:var(--ink); } #menu_top_big_1 .bs-user:hover{ background:var(--hover); } /* Avatar rund 15% kleiner als urspruenglich (34 -> 29px) — gilt fuer das Profilbild UND den Initialen-Platzhalter, damit beide gleich gross bleiben. */ #menu_top_big_1 .bs-user .av{ width:29px;height:29px;border-radius:50%;background:var(--green);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs1);overflow:hidden; } #menu_top_big_1 .bs-user .av img{ width:100%;height:100%;object-fit:cover; } #menu_top_big_1 .bs-user .un{ font-size:var(--fs1); } #menu_top_big_1 .bs-user>svg{ transition:transform .18s ease; } #menu_top_big_1 .bs-user.open>svg{ transform:rotate(180deg); } .bs-user-menu{ position:absolute; top:calc(100% + 8px); right:0; min-width:232px; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.14); padding:6px; z-index:130; display:none; cursor:default; font-family:Abel,Helvetica,Arial,sans-serif; } #menu_top_big_1 .bs-user.open .bs-user-menu{ display:block; } .bs-udd-head{ display:flex; align-items:center; gap:10px; padding:8px 10px 10px; } .bs-udd-head .av2{ width:36px;height:36px;border-radius:50%;background:var(--green);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs1);overflow:hidden; } .bs-udd-head .av2 img{ width:100%;height:100%;object-fit:cover; } .bs-udd-head b{ font-weight:normal; font-size:var(--fs1); color:var(--ink); } .bs-udd-div{ height:1px; background:var(--line); margin:4px 6px; } .bs-udd-item{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; text-decoration:none; color:var(--ink); font-size:var(--fs1); cursor:pointer; } .bs-udd-item:hover{ background:var(--hover); } .bs-udd-item svg{ color:var(--grey2); flex:none; } .bs-udd-item .ar{ margin-left:auto; color:var(--grey2); } .bs-udd-item.logout{ color:var(--logout); } .bs-udd-item.logout svg{ color:var(--logout); } .bs-udd-item.logout:hover{ background:rgba(226,133,122,.12); } /* Fuer diesen Nutzer gesperrt: gleiche Optik wie die deaktivierten Menuepunkte (gestrichelt + schraffiert, grau/kursiv). Kein Link, aber pointer-events bleiben aktiv — sonst zeigt der Microtip "gesperrt" nichts an. */ .bs-udd-item.is-locked{ color:var(--grey2); font-style:italic; cursor:default; border:1px dashed #C4C9C5; border-radius:8px; background:repeating-linear-gradient(-45deg,#f7f7f7,#f7f7f7 8px,#efefef 8px,#efefef 16px); } .bs-udd-item.is-locked:hover{ background:repeating-linear-gradient(-45deg,#f7f7f7,#f7f7f7 8px,#efefef 8px,#efefef 16px); } .bs-udd-item.is-locked svg{ color:var(--grey2); opacity:.6; } /* ===================== Linkes Menü (#menu_left_big_1) ===================== */ #menu_left_big_1{ position:fixed; top:var(--top-h); left:0; height:calc(100vh - var(--top-h)); width:244px; z-index:100; background:var(--side); border-right:1px solid var(--line); border-radius:0; box-shadow:none; overflow:visible; padding:12px 10px 24px; display:flex; flex-direction:column; transition:width .5s ease, padding .5s ease; font-family:Abel,Helvetica,Arial,sans-serif; } html.nav-peek #menu_left_big_1{ transition:width .2s ease, padding .2s ease; } /* Projekt-Kopf */ #menu_left_big_1 .bs-side-proj{ display:flex; align-items:center; gap:6px; padding:0 4px 12px; margin-bottom:6px; border-bottom:1px solid var(--line); height:48px; } #menu_left_big_1 .bs-side-proj .bs-proj-wrap{ position:relative; flex:1; min-width:0; } #menu_left_big_1 .bs-side-proj .bs-proj{ flex:1; min-width:0; } #menu_left_big_1 .bs-side-proj .bs-proj > span:not(.pn){ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #menu_left_big_1 .bs-side-proj .bs-proj-gear{ margin-left:0; flex:none; } #menu_left_big_1 .bs-proj{ display:flex; align-items:center; gap:8px; font-size:var(--fs1); background:var(--surface); border:1px solid var(--line); color:var(--ink); padding:6px 12px; border-radius:8px; cursor:pointer; text-decoration:none; } #menu_left_big_1 .bs-proj:hover{ border-color:#cfd3d1; } #menu_left_big_1 .bs-proj .pn{ font-size:var(--fs0); background:var(--green-bg); color:var(--green-tx); padding:2px 7px; border-radius:6px; } #menu_left_big_1 .bs-proj svg{ opacity:.7; } #menu_left_big_1 .bs-proj-gear{ width:34px;height:34px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center; cursor:pointer; color:var(--grey); margin-left:-4px; text-decoration:none; } #menu_left_big_1 .bs-proj-gear:hover{ background:var(--hover); color:var(--ink); } /* Projekt-Dropdown — alle dem Benutzer zugewiesenen Projekte */ #menu_left_big_1 .bs-proj-wrap > .bs-proj{ width:100%; } #menu_left_big_1 .bs-proj > svg{ margin-left:auto; transition:transform .18s ease; } #menu_left_big_1 .bs-proj-wrap.open > .bs-proj{ border-color:var(--green); } #menu_left_big_1 .bs-proj-wrap.open > .bs-proj > svg{ transform:rotate(180deg); } #menu_left_big_1 .bs-proj-menu{ display:none; position:absolute; top:calc(100% + 6px); left:0; width:270px; max-width:calc(100vw - 30px); background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.14); padding:6px; z-index:130; cursor:default; } #menu_left_big_1 .bs-proj-wrap.open .bs-proj-menu{ display:block; } #menu_left_big_1 .bs-proj-search{ display:flex; align-items:center; gap:7px; padding:6px 9px; margin-bottom:4px; border:1px solid var(--line); border-radius:8px; color:var(--grey2); } #menu_left_big_1 .bs-proj-search input{ flex:1; min-width:0; border:none; outline:none; background:none; box-shadow:none; font-family:inherit; font-size:var(--fs1); color:var(--ink); padding:0; margin:0; height:auto; } #menu_left_big_1 .bs-proj-list{ max-height:320px; overflow-y:auto; } #menu_left_big_1 .bs-proj-item{ display:flex; align-items:center; gap:8px; padding:8px 9px; border-radius:8px; text-decoration:none; color:var(--ink); font-size:var(--fs1); } #menu_left_big_1 .bs-proj-item:hover{ background:var(--hover); } #menu_left_big_1 .bs-proj-item .pn{ font-size:var(--fs0); background:var(--green-bg); color:var(--green-tx); padding:2px 7px; border-radius:6px; flex:none; } #menu_left_big_1 .bs-proj-item .pnm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #menu_left_big_1 .bs-proj-item.on{ background:var(--green-bg); color:var(--green-tx); } #menu_left_big_1 .bs-proj-item.on .pn{ background:var(--green); color:#fff; } #menu_left_big_1 .bs-proj-empty{ padding:12px 10px; font-size:var(--fs1); color:var(--grey2); text-align:center; } #menu_left_big_1 .bs-proj-foot{ border-top:1px solid var(--line); margin-top:4px; padding-top:4px; } #menu_left_big_1 .bs-proj-foot a{ display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:8px; text-decoration:none; color:var(--ink); font-size:var(--fs1); } #menu_left_big_1 .bs-proj-foot a:hover{ background:var(--hover); } #menu_left_big_1 .bs-proj-foot svg{ color:var(--grey2); flex:none; } /* Nav-Gruppen */ #menu_left_big_1 .bs-nav{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; color:var(--ink); text-decoration:none; cursor:pointer; height:56px; } #menu_left_big_1 .bs-nav:hover{ background:var(--hover); } /* Nicht nutzbar, weil kein Projekt gewaehlt ist: nur dezent ausgegraut (wie bisher). */ #menu_left_big_1 .bs-nav.bs-disabled{ opacity:.4; pointer-events:none; } /* BEWUSST abgeschaltete Gruppe (MenuConfig 'disabled' => true): gleiche Sprache wie die "bald verfügbar"-Untermenuepunkte (.bs-subitem.soon-row) — gestrichelter Rahmen + schraege Streifen. Etwas weniger blass, sonst ist es mit den Streifen kaum lesbar. */ #menu_left_big_1 .bs-nav.bs-off{ opacity:.55; border:1px dashed #C4C9C5; border-radius:8px; background-image:repeating-linear-gradient(-45deg, transparent 0, transparent 6px, rgba(107,155,98,.07) 6px, rgba(107,155,98,.07) 12px); } /* Hover MUSS ankommen, sonst zeigt der Microtip "bald verfügbar" nicht. Der Klick laeuft ins Leere (href=javascript:void(0)) und der Gruppen-Handler steigt bei .bs-disabled aus. */ #menu_left_big_1 .bs-nav.bs-off{ pointer-events:auto; cursor:default; } /* Ana ist der einzige Menuepunkt mit RUNDEM Icon: das Portrait fuellt es deckend aus. Der Punkt selbst wird nur gerendert, solange man in Ana ist (MenuConfig 'hidden'). */ #menu_left_big_1 #m20 .bs-nav .ni{ border-radius:50%; overflow:hidden; padding:0; border-color:transparent; background:transparent; } #menu_left_big_1 #m20 .bs-nav .ni .ni-img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; border-radius:50%; } #menu_left_big_1 .bs-nav.bs-off:hover{ background-color:transparent; } #menu_left_big_1 .bs-nav .ni{ width:34px;height:34px;border-radius:9px;background:var(--surface);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--grey);flex:none; } #menu_left_big_1 .bs-nav .ni-img{ width:28px; height:28px; display:block; } #menu_left_big_1 .bs-nav .ni-b{ display:none; } #menu_left_big_1 .bs-nav.active .ni-c{ display:none; } #menu_left_big_1 .bs-nav.active .ni-b{ display:block; } #menu_left_big_1 .bs-nav .nl{ display:flex; flex-direction:column; line-height:1.15; flex:1; min-width:0; overflow:hidden; } #menu_left_big_1 .bs-nav .nl b{ font-weight:normal; font-size:var(--fs2); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Untertitel im linken Menü ausgeblendet (nur Titel, grösser) */ #menu_left_big_1 .bs-nav .nl span{ display:none; } #menu_left_big_1 .bs-nav.active{ background:var(--green-bg); } #menu_left_big_1 .bs-nav.active .ni{ background:var(--green-bg); border-color:var(--green); } #menu_left_big_1 .bs-nav.active .nl b{ color:var(--green-tx); } /* Gruppen-Icon als inline SVG (Gruppen ohne buttonNc.svg) — Grösse wie die Bild-Icons */ #menu_left_big_1 .bs-nav .ni-svg{ width:22px; height:22px; display:block; fill:none; stroke:currentColor; } #menu_left_big_1 .bs-nav.active .ni{ color:var(--green); } #menu_left_big_1 .bs-nav .chev{ margin-left:auto; flex:none; color:var(--grey2); transition:transform .2s ease; } #menu_left_big_1 .bs-group.open .chev{ transform:rotate(180deg); } /* Untermenü — Akkordeon (max-height per JS) */ #menu_left_big_1 .bs-sub{ margin:0 0 0 20px; border-left:1px solid var(--line); padding:0 0 0 8px; max-height:0; overflow:hidden; transition:max-height .3s ease; } #menu_left_big_1 .bs-sub .bs-subitem:first-child{ margin-top:8px; } #menu_left_big_1 .bs-sub .bs-subitem:last-child{ margin-bottom:8px; } #menu_left_big_1 .bs-subitem{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px; font-size:var(--fs1); color:#3a3f3c; cursor:pointer; text-decoration:none; height:37px; white-space:nowrap; } #menu_left_big_1 .bs-subitem:hover{ background:var(--hover); } #menu_left_big_1 .bs-subitem .sil{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #menu_left_big_1 .bs-subitem.on{ background:var(--green-bg); color:var(--green-tx); } #menu_left_big_1 .bs-subitem svg{ color:var(--grey2); flex:none; width:18px; height:18px; } #menu_left_big_1 .bs-subitem.on svg{ color:var(--green); } /* Farbe/Deckkraft exakt wie bei den abgeschalteten HAUPTpunkten (.bs-nav.bs-off), damit "bald verfügbar" in beiden Ebenen gleich grau wirkt. */ #menu_left_big_1 .bs-subitem.soon-row{ font-style:italic; color:var(--ink); opacity:.55; cursor:default; border:1px dashed #C4C9C5; border-radius:8px; background-image:repeating-linear-gradient(-45deg, transparent 0, transparent 6px, rgba(107,155,98,.07) 6px, rgba(107,155,98,.07) 12px); } #menu_left_big_1 .bs-subitem.soon-row:hover{ background-color:transparent; } #menu_left_big_1 .bs-subitem.soon-row svg{ opacity:.6; } #menu_left_big_1 .bs-sep{ height:1px; background:var(--line); margin:12px 8px; } /* Fuss: Abmelden + Einklappen + Sperren */ /* Mittlerer Menuebereich scrollt, Projekt-Kopf und Fuss bleiben stehen. Die Sidebar selbst behaelt overflow:visible — sonst clippt das Projekt-Dropdown (.bs-proj-menu, absolut positioniert). min-height:0 ist im Flex-Container Pflicht, sonst waechst das Kind ueber die Hoehe hinaus statt zu scrollen. */ /* Standard: KEIN overflow — sonst schneidet der Container die Microtip-Tooltips ab, die nach rechts aus dem Menue ragen ("bald verfügbar"). `overflow-x:clip` hilft nicht: in Kombination mit `overflow-y:auto` normalisiert der Browser clip zu hidden. Das Scrollen wird per JS (bsSyncSideScroll) nur eingeschaltet, wenn der Inhalt wirklich hoeher ist als die Leiste — dann ist Erreichbarkeit wichtiger als der Tooltip-Ueberhang. */ #menu_left_big_1 .bs-side-scroll{ flex:1 1 auto; min-height:0; overflow:visible; scrollbar-width:thin; scrollbar-color:#C9CFCA transparent; overscroll-behavior:contain; } #menu_left_big_1 .bs-side-scroll.is-scrolling{ overflow-y:auto; overflow-x:hidden; } #menu_left_big_1 .bs-side-scroll::-webkit-scrollbar{ width:6px; } #menu_left_big_1 .bs-side-scroll::-webkit-scrollbar-track{ background:transparent; } #menu_left_big_1 .bs-side-scroll::-webkit-scrollbar-thumb{ background:#C9CFCA; border-radius:3px; } #menu_left_big_1 .bs-side-scroll::-webkit-scrollbar-thumb:hover{ background:#AEB5AF; } /* Eingeklappt (64px): keine Scrollbar einblenden, sie wuerde die Icons zur Seite druecken. */ html.nav-collapsed:not(.nav-peek) #menu_left_big_1 .bs-side-scroll{ scrollbar-width:none; } html.nav-collapsed:not(.nav-peek) #menu_left_big_1 .bs-side-scroll::-webkit-scrollbar{ width:0; } /* Fuss bleibt unten stehen und schrumpft nicht weg. */ #menu_left_big_1 .bs-side-foot{ margin-top:auto; padding-top:10px; flex:0 0 auto; } #menu_left_big_1 .bs-side-toggle{ display:flex; align-items:center; gap:12px; width:100%; padding:11px 12px; border:none; background:none; cursor:pointer; border-radius:10px; color:var(--grey); font-family:inherit; font-size:var(--fs0); text-align:left; } #menu_left_big_1 .bs-side-toggle:hover{ background:var(--hover); } /* Beschriftung gleich gross wie die uebrigen Menuepunkte / "Abmelden" (.bs-nav .nl b). */ #menu_left_big_1 .bs-side-toggle .tgl-label{ font-size:var(--fs2); color:var(--ink); } #menu_left_big_1 .bs-side-toggle .ni{ width:34px;height:34px;border-radius:9px;background:var(--surface);border:1px solid var(--line); display:inline-flex;align-items:center;justify-content:center;color:var(--grey);flex:none; } #menu_left_big_1 .bs-side-toggle .ni svg{ transition:transform .18s ease; } #menu_left_big_1 .bs-logout .ni{ color:var(--logout); } #menu_left_big_1 .bs-logout .nl b{ color:var(--logout); } #menu_left_big_1 .bs-logout:hover{ background:rgba(226,133,122,.12); } #menu_left_big_1 .bs-lock .lk-closed{ display:none; } html.nav-locked #menu_left_big_1 .bs-lock .lk-open{ display:none; } html.nav-locked #menu_left_big_1 .bs-lock .lk-closed{ display:inline; } /* Fixiert: der GANZE Button deckend rot (Signalfarbe #92383D wie .bs23_table_info_red), Icon und Beschriftung weiss. */ html.nav-locked #menu_left_big_1 .bs-lock{ background:#92383D; border-radius:9px; } html.nav-locked #menu_left_big_1 .bs-lock:hover{ background:#7E3035; } html.nav-locked #menu_left_big_1 .bs-lock .ni{ background:transparent; border-color:transparent; color:#fff; } html.nav-locked #menu_left_big_1 .bs-lock .tgl-label, html.nav-locked #menu_left_big_1 .bs-lock .nl b{ color:#fff; } /* ---- Eingeklappt (Icon-Leiste 64px) ---- */ html.nav-collapsed #menu_left_big_1{ width:64px; padding-left:8px; padding-right:8px; } html.nav-collapsed #main_field_1{ left:64px; width:calc(100% - 64px); } html.nav-collapsed #menu_left_big_1 .bs-nav, html.nav-collapsed #menu_left_big_1 .bs-side-toggle{ justify-content:center; padding-left:0; padding-right:0; } html.nav-collapsed #menu_left_big_1 .bs-nav .nl, html.nav-collapsed #menu_left_big_1 .bs-nav .chev, html.nav-collapsed #menu_left_big_1 .bs-side-toggle .tgl-label{ display:none; } html.nav-collapsed #menu_left_big_1 #bs-toggle .ni svg{ transform:rotate(180deg); } /* Untermenü im eingeklappten Zustand ausblenden (wie im Mockup) -> beim Hover/Peek erscheint es wieder */ html.nav-collapsed:not(.nav-peek) #menu_left_big_1 .bs-sub{ max-height:0 !important; overflow:hidden !important; } html.nav-collapsed #menu_left_big_1 .bs-side-proj{ justify-content:center; padding-left:0; padding-right:0; } html.nav-collapsed #menu_left_big_1 .bs-side-proj .bs-proj-wrap{ flex:none; } html.nav-collapsed #menu_left_big_1 .bs-side-proj .bs-proj{ flex:none; background:none; border:none; padding:0; } html.nav-collapsed #menu_left_big_1 .bs-side-proj .bs-proj > span:not(.pn), html.nav-collapsed #menu_left_big_1 .bs-side-proj .bs-proj > svg, html.nav-collapsed #menu_left_big_1 .bs-side-proj .bs-proj-gear{ display:none; } /* ---- Eingeklappt + Hover (Peek) -> temporär ausfahren, Inhalt bleibt bei left:64 ---- */ html.nav-collapsed.nav-peek:not(.nav-locked) #menu_left_big_1{ width:244px; padding-left:10px; padding-right:10px; box-shadow:2px 0 14px rgba(0,0,0,.08); z-index:110; } html.nav-collapsed.nav-peek:not(.nav-locked) #menu_left_big_1 .bs-nav, html.nav-collapsed.nav-peek:not(.nav-locked) #menu_left_big_1 .bs-side-toggle{ justify-content:flex-start; padding:11px 12px; } html.nav-collapsed.nav-peek:not(.nav-locked) #menu_left_big_1 .bs-nav .nl{ display:flex; } html.nav-collapsed.nav-peek:not(.nav-locked) #menu_left_big_1 .bs-nav .chev, html.nav-collapsed.nav-peek:not(.nav-locked) #menu_left_big_1 .bs-side-toggle .tgl-label{ display:inline; } html.nav-collapsed.nav-peek:not(.nav-locked) #menu_left_big_1 .bs-sub{ border-left:1px solid var(--line); padding-left:8px; margin-left:20px; } html.nav-collapsed.nav-peek:not(.nav-locked) #menu_left_big_1 .bs-subitem{ justify-content:flex-start; padding:8px 10px; font-size:var(--fs1); gap:9px; } html.nav-collapsed.nav-peek:not(.nav-locked) #menu_left_big_1 .bs-subitem.soon-row{ border:1px dashed #C4C9C5; background-image:repeating-linear-gradient(-45deg, transparent 0, transparent 6px, rgba(107,155,98,.07) 6px, rgba(107,155,98,.07) 12px); } html.nav-collapsed.nav-peek:not(.nav-locked) #menu_left_big_1 .bs-side-proj{ justify-content:flex-start; } html.nav-collapsed.nav-peek:not(.nav-locked) #menu_left_big_1 .bs-side-proj .bs-proj-wrap{ flex:1; } html.nav-collapsed.nav-peek:not(.nav-locked) #menu_left_big_1 .bs-side-proj .bs-proj{ flex:1; background:var(--surface); border:1px solid var(--line); padding:6px 12px; } html.nav-collapsed.nav-peek:not(.nav-locked) #menu_left_big_1 .bs-side-proj .bs-proj > span:not(.pn){ display:inline; } html.nav-collapsed.nav-peek:not(.nav-locked) #menu_left_big_1 .bs-side-proj .bs-proj > svg{ display:inline; } html.nav-collapsed.nav-peek:not(.nav-locked) #menu_left_big_1 .bs-side-proj .bs-proj-gear{ display:inline-flex; } /* ---- SETTINGS-MODUS ---- Auf Einstellungs-Seiten (Menuegruppe 5) wird das klassische Menue ausgeblendet. Sichtbar bleiben nur "Projekte" (Projektauswahl-Pille oben bzw. #m12) sowie "Einstellungen" (#m5, sonst hidden) — aufgeklappt mit allen Untermenues. Die Klasse .nav-settings setzt die Aktiv-Bruecke im Layout, wenn bsmenu_activ==5. Im Settings-Modus wird nav-collapsed per JS entfernt -> Menue immer ausgeklappt. */ html.nav-settings #menu_left_big_1 .bs-group:not(#m12):not(#m5){ display:none; } html.nav-settings #menu_left_big_1 #m5{ display:block !important; } /* ---- Microtip (aria-label + data-microtip-position + role=tooltip) ---- */ #menu_left_big_1 [role~="tooltip"][aria-label], #menu_top_big_1 [role~="tooltip"][aria-label]{ position:relative; } #menu_left_big_1 [role~="tooltip"][aria-label]::after, #menu_left_big_1 [role~="tooltip"][aria-label]::before, #menu_top_big_1 [role~="tooltip"][aria-label]::after, #menu_top_big_1 [role~="tooltip"][aria-label]::before{ opacity:0; pointer-events:none; z-index:1000; transition:opacity .15s ease, transform .15s ease; } #menu_left_big_1 [role~="tooltip"][aria-label]::after, #menu_top_big_1 [role~="tooltip"][aria-label]::after{ content:attr(aria-label); position:absolute; white-space:nowrap; background:rgba(17,17,17,.92); color:#fff; font-size:var(--fs0); font-style:normal; line-height:1.2; padding:5px 9px; border-radius:6px; } #menu_left_big_1 [role~="tooltip"][aria-label]::before, #menu_top_big_1 [role~="tooltip"][aria-label]::before{ content:''; position:absolute; width:0; height:0; border:5px solid transparent; } #menu_left_big_1 [role~="tooltip"][aria-label]:hover::after, #menu_left_big_1 [role~="tooltip"][aria-label]:hover::before, #menu_top_big_1 [role~="tooltip"][aria-label]:hover::after, #menu_top_big_1 [role~="tooltip"][aria-label]:hover::before{ opacity:1; } [data-microtip-position="right"]::after{ left:100%; top:50%; margin-left:6px; transform:translateY(-50%) translateX(4px); } [data-microtip-position="right"]:hover::after{ transform:translateY(-50%) translateX(0); } [data-microtip-position="right"]::before{ left:100%; top:50%; margin-left:1px; transform:translateY(-50%); border-right-color:rgba(17,17,17,.92); } [data-microtip-position="bottom"]::after{ top:100%; left:50%; margin-top:6px; transform:translateX(-50%) translateY(-4px); } [data-microtip-position="bottom"]:hover::after{ transform:translateX(-50%) translateY(0); } [data-microtip-position="bottom"]::before{ top:100%; left:50%; transform:translateX(-50%); border-bottom-color:rgba(17,17,17,.92); } /* ---- Inhaltsbereich versetzt (beginnt UNTER der Breadcrumb-Leiste) ---- */ #main_field_1{ top:calc(var(--top-h) + var(--crumb-h)); left:244px; width:calc(100% - 244px); height:calc(100% - var(--top-h) - var(--crumb-h)); } /* ---- Breadcrumb: eigenständige Leiste unter der Kopfleiste (wie .bs-crumb im Mockup). Fix positioniert, damit der absolut gesetzte Seiteninhalt (.bs23_frame_0 / .bs23_frame_1) darunter startet statt darüber zu liegen. ---- */ #bs_crumb{ position:fixed; top:var(--top-h); left:244px; right:0; height:var(--crumb-h); z-index:110; display:flex; align-items:center; gap:8px; padding:0 20px; box-sizing:border-box; background:var(--top); border-bottom:1px solid var(--line); transition:left .5s ease; font-family:Abel,Helvetica,Arial,sans-serif; font-size:var(--fs1); color:var(--grey2); } #bs_crumb #bs_crumb_group{ white-space:nowrap; flex:none; } #bs_crumb #bs_crumb_group:hover{ color:var(--ink); } #bs_crumb b{ color:var(--ink); font-weight:normal; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #bs_crumb svg{ width:13px; height:13px; flex:none; opacity:.6; } html.nav-collapsed #bs_crumb{ left:64px; } /* Beim Peek (eingeklappt + Hover) fährt das Menü auf 244 aus -> Breadcrumb mitziehen (synchron .2s wie das Menü), sonst liegt bs_crumb_group über dem ausgefahrenen Menü. */ html.nav-collapsed.nav-peek:not(.nav-locked) #bs_crumb{ left:244px; transition:left .2s ease; } /* kein aktives Menü (JS) oder Gast -> Leiste weg, Inhalt direkt unter der Kopfleiste */ html.bs-nocrumb #bs_crumb, html.bs-noauth #bs_crumb{ display:none; } /* Bei offenem Mobil-Menue (Vollbild-Overlay) den Breadcrumb ausblenden — sonst liegt er (gleicher z-index, spaeter im DOM) ueber dem oberen Menue-Bereich und verdeckt ihn. */ html.nav-open #bs_crumb{ display:none; } html.bs-nocrumb #main_field_1, html.bs-noauth #main_field_1{ top:var(--top-h); height:calc(100% - var(--top-h)); } /* Alte Seiten-Navi (, position:fixed top:1.5px z-index:999) lag über der neuen Kopfleiste — sie ist durch #bs_crumb ersetzt. */ .style_screen_js_nav_1{ display:none !important; } /* ===================== Hamburger + Scrim (Basis) ===================== */ #menu_top_big_1 .bs-burger{ display:none; width:44px;height:44px;border:none;background:none;cursor:pointer;color:var(--ink); border-radius:8px; align-items:center; justify-content:center; flex:none; } #menu_top_big_1 .bs-burger:hover{ background:var(--hover); } #menu_top_big_1 .bs-burger svg.ic{ width:26px; height:26px; stroke-width:2.6; } #menu_top_big_1 .bs-burger .burger-close{ display:none; } html.nav-open #menu_top_big_1 .bs-burger .burger-open{ display:none; } html.nav-open #menu_top_big_1 .bs-burger .burger-close{ display:inline; } #bs-scrim{ display:none; position:fixed; inset:var(--top-h) 0 0 0; background:rgba(0,0,0,.42); z-index:105; } /* ===================== MOBILE (wie die App: <=1000px ODER <=660px Höhe) ===================== */ @media (max-width:1000px), (max-height:660px){ :root{ --crumb-h:38px; } #menu_top_big_1 .bs-burger{ display:inline-flex; } #menu_top_big_1{ gap:10px; padding:0 10px; } #menu_top_big_1 .logo-img{ height:22px; } #menu_top_big_1 .bs-user .un, #menu_top_big_1 .bs-user>svg{ display:none; } #menu_top_big_1 .tico{ display:none; } #menu_top_big_1 .bs-support-btn{ display:none; } html.nav-open #bs-scrim{ display:block; } /* Menü als VOLLFLÄCHIGES POPUP unter der Kopfleiste */ #menu_left_big_1{ position:fixed; top:var(--top-h); left:0; right:0; bottom:0; width:100%; max-width:none; z-index:110; background:var(--surface); border-right:none; border-radius:0; overflow-y:auto; box-shadow:none; padding:14px 14px calc(16px + env(safe-area-inset-bottom)); transform:translateY(100%); transition:transform .3s cubic-bezier(.22,.61,.36,1); } html.nav-open #menu_left_big_1{ transform:translateY(0); } #menu_left_big_1 .bs-sub{ overflow:hidden !important; } /* reduziert/touch-optimiert */ #menu_left_big_1 .bs-nav .nl span{ display:none; } #menu_left_big_1 .bs-nav .nl b{ font-size:var(--fs2); } #menu_left_big_1 .bs-nav{ height:52px; } #menu_left_big_1 .bs-subitem{ height:44px; } #menu_left_big_1 #bs-toggle, #menu_left_big_1 #bs-lock{ display:none; } #menu_left_big_1 .bs-side-proj{ margin-bottom:4px; } /* Breadcrumb-Leiste volle Breite, kompakter */ #bs_crumb{ left:0; padding:0 10px; } /* MOBIL zeigt die Navigation NUR den aktuellen Titel — alle vorgelagerten Ebenen und die Pfeile dazwischen entfallen (zu wenig Platz). Zurueck-Button und Info bleiben. Deckt beide Mechaniken ab: neue Kette (.bph-crumb-step) und alte (#bs_crumb_group). */ #bs_crumb .bph-crumb-step:not(.is-active), #bs_crumb .bph-crumb-step-arrow, #bs_crumb .bph-crumb-extra, #bs_crumb .bph-crumb-extra-arrow, #bs_crumb #bs_crumb_group, #bs_crumb #bs_crumb_arrow{ display:none !important; } /* Der Titel darf den verbleibenden Platz nutzen und kuerzt mit "…" */ #bs_crumb .bph-crumb-step.is-active, #bs_crumb #bs_crumb_page{ min-width:0; max-width:none; flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Inhalt volle Breite unter Kopfleiste + Breadcrumb (überschreibt small.css top:48) */ #main_field_1{ top:calc(var(--top-h) + var(--crumb-h)); left:0; width:100%; height:calc(100% - var(--top-h) - var(--crumb-h)); padding:0 5px; padding-left:max(5px, env(safe-area-inset-left)); padding-right:max(5px, env(safe-area-inset-right)); box-sizing:border-box; } html.bs-nocrumb #main_field_1, html.bs-noauth #main_field_1{ top:var(--top-h); height:calc(100% - var(--top-h)); } } /* Generische Icons (im Menü) */ #menu_top_big_1 svg.ic, #menu_left_big_1 svg.ic, .bs-user-menu svg.ic{ width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; } #menu_top_big_1 svg.ic.sm, #menu_left_big_1 svg.ic.sm, .bs-user-menu svg.ic.sm{ width:15px;height:15px; } /* Gast / unverifiziert: kein linkes Menü, Inhalt volle Breite (Kopfleiste bleibt mit Login-Link) */ html.bs-noauth #menu_left_big_1{ display:none !important; } html.bs-noauth #menu_top_big_1 .bs-burger{ display:none !important; } html.bs-noauth #main_field_1{ left:0 !important; width:100% !important; } html.bs-noauth #bs-scrim{ display:none !important; } /* ================================================================ POPUP-EBENEN (z-index-Skala) — POPUPS LIEGEN IMMER ZUOBERST ---------------------------------------------------------------- Ausgangslage (fehlerhaft): - Navigation: Kopfleiste 120, Breadcrumb 110, Scrim 105, Sidebar 100, Sidebar-Dropdowns 130. - jQuery-UI-Dialog: setzt INLINE z-index 101 (Dialog) / 100 (Overlay) — jQuery UI 1.13 zaehlt ab `.ui-front` (100) hoch. Kopfleiste und Breadcrumb lagen also VOR dem Dialog. Wegen der Inline-Werte hilft nur `!important`. - Lity: .lity 99990 (bs23_white.css), aber Hilfe-Dropdown (bs_style_main_big.css:763), mobiles Benutzer-Dropdown (app.blade.php inline) und schedule.css nutzen 99999 — die lagen VOR dem Popup. Verbindliche Reihenfolge ab hier. Neue Overlays NICHT mehr auf 99999 setzen, sondern hier einordnen: 200000 Lity Overlay/Wrap 200002 Lity Container 200004 Lity Schliessen-Button 200010 jQuery-UI Overlay (.ui-widget-overlay) 200020 jQuery-UI Dialog / .ui-front 200030 Datepicker, Tooltip, Autocomplete (auch IM Dialog) 200035 Select2-Dropdown (auch IM Popup/Dialog) 200040 #bsload1 (ganzseitiges Lade-Overlay, immer zuoberst) jQuery-UI-Dialoge liegen bewusst UEBER Lity: eine Bestaetigung wird oft aus einem offenen Lity-Popup heraus geoeffnet. ================================================================ */ html.lity-active .lity{ z-index:200000 !important; } html.lity-active .lity-wrap{ z-index:200000 !important; } html.lity-active .lity-container{ z-index:200002 !important; } html.lity-active .lity-close{ z-index:200004 !important; } /* jQuery-UI-Dialog: Inline-z-index (101/100) mit !important ueberschreiben. Folge: mehrere gleichzeitig offene Dialoge stapeln nicht mehr ueber $.ui.dialog.maxZ, sondern ueber die DOM-Reihenfolge — der zuletzt geoeffnete haengt weiter hinten am body und liegt damit oben. */ /* ACHTUNG: das Overlay traegt selbst die Klasse `ui-front` — muss per :not() ausgenommen werden, sonst liegen Overlay und Dialog auf der gleichen Ebene und die DOM-Reihenfolge entscheidet (Dialog kann dann vom eigenen Overlay verdeckt und unklickbar werden). */ .ui-widget-overlay{ z-index:200010 !important; } .ui-dialog, .ui-front:not(.ui-widget-overlay){ z-index:200020 !important; } #ui-datepicker-div, .ui-tooltip, .ui-autocomplete, .ui-selectmenu-menu{ z-index:200030 !important; } /* Select2 muss ueber Popup UND Dialog bleiben (dropdownParent: document.body). */ .select2-container--open{ z-index:200035 !important; } /* Ganzseitiges Lade-Overlay bleibt wie bisher ueber allem. */ #bsload1{ z-index:200040 !important; } /* Solange ein Lity-Popup offen ist, zusaetzlich die Navigations-Schichten zurueckstufen. Noetig, weil ein Element mit eigenem Stacking-Context (transform/isolation) sonst trotz kleinerem z-index durchscheint. */ html.lity-active #menu_top_big_1, html.lity-active #menu_left_big_1, html.lity-active #bs_crumb, html.lity-active #bs-scrim, html.lity-active #menu_top_small_1{ z-index:90 !important; }