/* Seitenleiste. Alles greift nur ab 768 px und nur auf Seiten mit WebODM-Menue (#side-menu) -- Login, oeffentliche Karten und Handy bleiben wie sie sind. html.lcs + html.lcs-narrow setzt nav.js schon im , damit beim Laden nichts springt. */ :root { --lcs-open: 232px; --lcs-narrow: 56px; --lcs-bg: #0B3B59; --lcs-accent: #2f6fdb; } html.lcs { --lcs-w: var(--lcs-open); } html.lcs.lcs-narrow { --lcs-w: var(--lcs-narrow); } #lcs-nav { display: none; } @media (min-width: 768px) { html.lcs #wrapper:has(#side-menu) > #navbar-top { display: none; } /* Platzhalter in Leistenfarbe, bis nav.js die Leiste gebaut hat */ html.lcs #wrapper:has(#side-menu)::before { content: ''; position: fixed; left: 0; top: 0; bottom: 0; width: var(--lcs-w); background: var(--lcs-bg); z-index: 1029; } /* z-index 0 = eigener Stapelkontext: Leaflet (bis 1000) und Potree bleiben unter der aufgeklappten Leiste. min-height setzt WebODM per JS inline. */ html.lcs #wrapper:has(#side-menu) > #page-wrapper { margin: 0 0 0 var(--lcs-w); border-left: 0; min-height: 100vh !important; position: relative; z-index: 0; } html.lcs-anim #wrapper > #page-wrapper, html.lcs-anim #wrapper::before { transition: margin-left .18s ease, width .18s ease; } /* Karte und 3D rechnen mit 50 px Kopfleiste (main.scss) -- die gibt es nicht mehr */ html.lcs #wrapper:has(#side-menu) [data-mapview] { height: calc(100vh - 50px); height: calc(100dvh - 50px); } html.lcs #wrapper:has(#side-menu) .full-height { height: calc(100vh - 10px); height: calc(100dvh - 10px); } html.lcs #lcs-nav { display: flex; } } #lcs-nav { position: fixed; left: 0; top: 0; bottom: 0; z-index: 1030; width: var(--lcs-w); flex-direction: column; background: var(--lcs-bg); color: rgba(255, 255, 255, .78); font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; } html.lcs-anim #lcs-nav { transition: width .18s ease, box-shadow .18s ease; } html.lcs-peek #lcs-nav { width: var(--lcs-open); box-shadow: 6px 0 24px rgba(0, 0, 0, .28); } #lcs-nav *, #lcs-nav *::before { box-sizing: border-box; } /* Logo: dunkles Logo -> hell (invert), hue-rotate holt den Blauton zurueck. Schmal: nur der obere Teil (Bildmarke ueber dem Schriftzug). */ .lcs-brand { flex: none; display: flex; align-items: center; justify-content: center; height: 84px; padding: 10px 14px; } .lcs-brand:hover, .lcs-brand:focus { outline: none; } .lcs-logo { display: block; max-width: 100%; max-height: 62px; filter: invert(1) hue-rotate(180deg); } .lcs-mark { display: none; width: 38px; height: 24px; background: no-repeat 50% 26% / 216% auto; filter: invert(1) hue-rotate(180deg); } .lcs-brand.text .lcs-mark { display: none !important; } .lcs-apptxt { color: #fff; font-size: 14px; overflow: hidden; text-overflow: ellipsis; } .lcs-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 2px 8px 8px; scrollbar-width: thin; } .lcs-bottom { flex: none; padding: 6px 8px 8px; border-top: 1px solid rgba(255, 255, 255, .12); } .lcs-it { display: flex; align-items: center; gap: 12px; width: 100%; height: 38px; margin: 1px 0; padding: 0 11px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; position: relative; } .lcs-it:hover, .lcs-it:focus { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; outline: none; } .lcs-it:focus-visible { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); } .lcs-it.on { background: rgba(255, 255, 255, .16); color: #fff; } .lcs-ic { flex: 0 0 18px; width: 18px; text-align: center; font-size: 15px; } .lcs-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; transition: opacity .12s; } .lcs-mut { color: rgba(255, 255, 255, .6); } .lcs-sec { height: 32px; padding: 14px 11px 0; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .45); position: relative; } .lcs-badge { flex: none; min-width: 19px; padding: 0 6px; border-radius: 10px; background: var(--lcs-accent); color: #fff; font-size: 11px; font-weight: 600; line-height: 19px; text-align: center; } .lcs-badge.wait { background: rgba(255, 255, 255, .22); } .lcs-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .3); } .lcs-dot.ok { background: #34c77b; } .lcs-dot.off { background: #ff5d52; } .lcs-ch { flex: none; font-size: 11px; opacity: .6; transition: transform .15s; } .lcs-grp[aria-expanded="true"] .lcs-ch { transform: rotate(180deg); } .lcs-sub { padding: 0 0 4px; } .lcs-sub .lcs-it { height: 32px; padding-left: 41px; gap: 10px; font-size: 12.5px; } .lcs-sub .lcs-ic { flex-basis: 14px; width: 14px; font-size: 12px; opacity: .8; } .lcs-user { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 4px 0 7px; } .lcs-av { flex: 0 0 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; letter-spacing: .02em; } .lcs-uname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #fff; } .lcs-logout { flex: none; width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: inherit; } .lcs-logout:hover, .lcs-logout:focus { background: rgba(255, 255, 255, .1); color: #fff; outline: none; } /* ---- schmal (und nicht aufgeklappt): nur Symbole ---- */ html.lcs-narrow:not(.lcs-peek) .lcs-logo { display: none; } html.lcs-narrow:not(.lcs-peek) .lcs-mark { display: block; flex: none; } html.lcs-narrow:not(.lcs-peek) .lcs-brand { padding-left: 6px; padding-right: 6px; } html.lcs-narrow:not(.lcs-peek) .lcs-brand.text .lcs-apptxt { display: none; } html.lcs-narrow:not(.lcs-peek) .lcs-scroll, html.lcs-narrow:not(.lcs-peek) .lcs-bottom { padding-left: 6px; padding-right: 6px; } html.lcs-narrow:not(.lcs-peek) .lcs-it { padding: 0 13px; } html.lcs-narrow:not(.lcs-peek) .lcs-l, html.lcs-narrow:not(.lcs-peek) .lcs-ch, html.lcs-narrow:not(.lcs-peek) .lcs-uname, html.lcs-narrow:not(.lcs-peek) .lcs-logout { opacity: 0; pointer-events: none; } html.lcs-narrow:not(.lcs-peek) .lcs-sec { color: transparent; } html.lcs-narrow:not(.lcs-peek) .lcs-sec::after { content: ''; position: absolute; left: 12px; right: 12px; top: 19px; border-top: 1px solid rgba(255, 255, 255, .16); } html.lcs-narrow:not(.lcs-peek) .lcs-sub { display: none; } html.lcs-narrow:not(.lcs-peek) .lcs-grp.has-on { background: rgba(255, 255, 255, .16); color: #fff; } html.lcs-narrow:not(.lcs-peek) .lcs-badge { position: absolute; top: 3px; left: 25px; min-width: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; } html.lcs-narrow:not(.lcs-peek) .lcs-dot { position: absolute; top: 9px; left: 29px; box-shadow: 0 0 0 2px var(--lcs-bg); } html.lcs-narrow:not(.lcs-peek) .lcs-user { padding-left: 9px; }