/* ============================================================================= Persistent chrome (shell layout + header + left sidebar) for the dmweb SPA. The SPA shell (index.html) links this RENDER-BLOCKING in so the header and sidebar are styled on the first paint — no flash of unstyled chrome / no giant-icon flicker. sidebar.js injectStyles() holds a byte-identical copy that it injects only on legacy standalone pages (which don't link this file) and skips when this stylesheet is present (it carries id="dm-sidebar-css"). Keep the two in sync; once all pages are migrated, the injectStyles copy is removed and this file is the single source. ========================================================================== */ /* Fixed-viewport shell: the page itself never scrolls — only
does, so the header and sidebar stay put. Any sticky content inside main then sticks relative to main's scrollport, i.e. just below the header — no overlap. */ body { height: 100vh; overflow: hidden; display: flex; flex-direction: column; } header { flex: 0 0 auto; position: relative; z-index: 50; background: var(--card); } /* Full header box. The --sp-5 (16px) left aligns the brand with the 200px sidebar's content inset; the vertical padding + bottom border match the legacy app pages. */ header { padding: 10px 32px 10px var(--sp-5); border-bottom: 1px solid var(--border); } /* 18px→10px: ~20% shorter bar */ header .brand { display: flex; align-items: center; gap: 12px; } header .brand .brand-logo { width: auto; display: block; } header .brand .brand-sub { font-size: var(--fs-body); font-weight: 500; color: var(--muted); padding-left: 12px; border-left: 1px solid var(--border); white-space: nowrap; } /* The shell is the horizontal row (sidebar + body). */ .shell { display: flex; flex: 1 1 auto; min-height: 0; align-items: stretch; overflow: hidden; } /* scrollbar-gutter keeps main's content width identical whether or not the current view is tall enough to scroll — without it, switching between a short and a tall view (e.g. the object page's tabs) pops the scrollbar in and out and the centered content shifts sideways. Same treatment as the sidebar's own scroller below. */ main { flex: 1 1 auto; min-width: 0; overflow-y: auto; min-height: 0; scrollbar-gutter: stable; } /* Fixed 200px sidebar column. Fixing the width on the host (the real flex child) keeps the width stable regardless of project/cycle name lengths. */ #sidebarHost { flex: 0 0 200px; align-self: stretch; min-height: 0; } #dmSidebar { width: 100%; height: 100%; box-sizing: border-box; background: var(--card); border-right: 1px solid var(--border); padding: 12px 0; font-size: var(--fs-meta); display: flex; flex-direction: column; /* No scrollbar-gutter reservation here: the selection highlight and the section dividers must reach the right edge (the ETL row's square-right corner is meant to bleed to it). macOS overlay scrollbars reserve nothing; a classic scrollbar reflows the column ~1 scrollbar-width when the list overflows — an acceptable trade for the flush edge. */ overflow: auto; } #dmTopNav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 2px; } #dmTopNav a { display: inline-flex; align-items: center; padding: 8px 16px; font-size: var(--fs-sm); border-radius: 6px; color: var(--fg); text-decoration: none; white-space: nowrap; } #dmTopNav a:hover { background: var(--surface-hover); } #dmTopNav a.is-current { font-weight: 600; color: var(--accent); } /* Cross-page links pinned to the bottom of the sidebar just above the user panel. */ #dmSidebar .sb-nav { padding: 10px 0 0; margin-top: 10px; border-top: 1px solid var(--border); } #dmSidebar .sb-nav a { display: block; padding: 5px var(--sp-5); color: var(--fg); text-decoration: none; white-space: nowrap; } #dmSidebar .sb-nav a:hover { background: var(--surface-hover); } #dmSidebar .sb-nav a.is-current { font-weight: 600; color: var(--accent); } /* Admin-only destinations (Settings / Users / Usage / API reference) sit in their own section below Help: a divider sets the global-/deployment-admin links apart from the everyone-links above. */ #dmSidebar .sb-nav-admin { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); } #dmSidebar .sb-group { padding-bottom: 10px; } #dmSidebar .sb-label { font-size: var(--fs-nano); color: var(--muted); font-weight: 600; padding: 4px var(--sp-5); } /* The "Projects" label hosts a trailing "+" (new project), shown on hover. */ #dmSidebar .sb-proj-header { display: flex; align-items: center; gap: 4px; } #dmSidebar .sb-proj-header .sb-label-text { flex: 1 1 auto; min-width: 0; } #dmSidebar .sb-proj-header:hover .sb-add { visibility: visible; } #dmSidebar .sb-list { list-style: none; margin: 0; padding: 0; } #dmSidebar .sb-list li { padding: 4px var(--sp-5); cursor: pointer; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #dmSidebar .sb-list li:hover { background: var(--surface-hover); } #dmSidebar .sb-list li.is-selected { background: var(--bg); } /* ETL cycles render indented directly under their selected project. */ #dmSidebar .sb-list li.sb-etl { position: relative; margin-left: 16px; padding-left: var(--sp-5); color: var(--muted); border-radius: 4px 0 0 4px; } #dmSidebar .sb-list li.sb-etl.is-selected { color: var(--fg); } /* A cycle with a description reads by its description; the ETLnn number drops back to a muted secondary label beside it. Without one the number is the label. */ #dmSidebar .sb-list li.sb-etl .sb-etl-desc { margin-left: 6px; } #dmSidebar .sb-list li.sb-etl.has-desc .sb-etl-num { color: var(--muted); } /* Rounded vertical blue accent inside the active cycle's highlight. */ #dmSidebar .sb-list li.sb-etl.is-selected::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 3px; background: var(--accent); border-radius: 999px; } /* Small green dot pinned right marking the project's active cycle (is_active). */ #dmSidebar .sb-list li.sb-etl.is-active { padding-right: 24px; } #dmSidebar .sb-list li.sb-etl.is-active::after { content: ""; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--ok, #168f4b); } /* Space between the last ETL cycle and the next project. */ #dmSidebar .sb-list li.sb-etl + li:not(.sb-etl) { margin-top: 8px; } #dmSidebar .sb-list li.sb-empty { color: var(--muted); cursor: default; } #dmSidebar .sb-list li.sb-empty:hover { background: transparent; } /* No-projects empty state: a short hint + a quiet icon+text "New project" button. */ #dmSidebar .sb-empty-state { padding: 4px var(--sp-5); display: flex; flex-direction: column; align-items: flex-start; text-align: left; } #dmSidebar .sb-empty-state .sb-empty-hint { color: var(--muted); margin-bottom: 8px; white-space: normal; line-height: 1.4; } #dmSidebar .btn-quiet { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--fg); border: 1px solid transparent; padding: 6px 10px; border-radius: 4px; font-size: var(--fs-sm); font-family: inherit; font-weight: 500; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; } #dmSidebar .btn-quiet svg { width: 13px; height: 13px; flex: 0 0 auto; display: block; } #dmSidebar .btn-quiet:hover:not(:disabled) { background: var(--surface-hover); color: var(--fg); border-color: var(--border); filter: none; } #dmSidebar .btn-quiet.accent { color: var(--accent); } #dmSidebar .btn-quiet.accent:hover:not(:disabled) { background: var(--accent-icon-hover-bg); color: var(--accent); border-color: var(--accent); filter: none; } #dmSidebar .sb-spacer { flex: 1 1 auto; } #dmSidebar .sb-user { padding: 10px var(--sp-5); margin-top: 5px; border-top: 1px solid var(--border); } /* Username links to the My-account page, styled like a cross-page menu item (.sb-nav a — e.g. "Help"): full-width row with a grey hover band, text inset --sp-5. It stays in the bottom user panel, so a negative side margin cancels .sb-user's padding to let the hover band span full width. Kept bold. */ #dmSidebar .sb-user-name { display: block; margin: 0 calc(-1 * var(--sp-5)) 14px; padding: 5px var(--sp-5); font-size: var(--fs-sm); font-weight: 600; color: var(--fg); text-decoration: none; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #dmSidebar .sb-user-name:hover { background: var(--surface-hover); } #dmSidebar .sb-logout { width: 100%; padding: 5px 8px; font-size: var(--fs-meta); border: 1px solid var(--border); border-radius: 4px; background: #fff; color: var(--fg); cursor: pointer; } #dmSidebar .sb-logout:hover { background: var(--surface-hover); } /* Project rows host a trailing "+" (new ETL cycle). */ #dmSidebar .sb-list li.sb-proj { display: flex; align-items: center; gap: 4px; position: relative; } /* On project-level pages (project overview / settings) the cycle rows carry no selection bar — the project row wears it instead (same rounded accent bar as li.sb-etl.is-selected::before, drawn inside the row's --sp-5 padding). */ #dmSidebar .sb-list li.sb-proj.is-context::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 3px; background: var(--accent); border-radius: 999px; } #dmSidebar .sb-proj-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Soft-deleted projects (global-admin view only) — struck through, muted. */ #dmSidebar .sb-list li.sb-proj.is-deleted .sb-proj-name { text-decoration: line-through; color: var(--muted); } /* The "Deleted" segment header: small + muted, with a disclosure chevron + count. */ #dmSidebar .sb-deleted-group { padding-bottom: 10px; } #dmSidebar .sb-deleted-header { display: flex; align-items: center; gap: 6px; width: 100%; box-sizing: border-box; padding: 4px var(--sp-5); margin: 0; border: 0; background: transparent; text-align: left; cursor: pointer; font-family: inherit; font-size: var(--fs-nano); font-weight: 600; color: var(--muted); } #dmSidebar .sb-deleted-header:hover { color: var(--fg); } #dmSidebar .sb-deleted-header .sb-disclosure { flex: 0 0 auto; display: inline-flex; color: var(--muted); transition: transform 0.12s; } #dmSidebar .sb-deleted-header .sb-disclosure svg { width: 9px; height: 9px; display: block; } #dmSidebar .sb-deleted-group.is-expanded .sb-deleted-header .sb-disclosure { transform: rotate(90deg); } #dmSidebar .sb-deleted-header .sb-label-text { flex: 1 1 auto; min-width: 0; } #dmSidebar .sb-deleted-header .sb-deleted-count { flex: 0 0 auto; font-weight: 600; } #dmSidebar .sb-add { flex: 0 0 auto; display: inline-flex; visibility: hidden; box-sizing: border-box; width: 18px; height: 18px; padding: 0; margin: 0; background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--muted); cursor: pointer; align-items: center; justify-content: center; transition: background 0.12s, color 0.12s, border-color 0.12s; } /* Shown only for the open (selected) project, and only on hover. */ #dmSidebar .sb-proj.is-selected:hover .sb-add { visibility: visible; } #dmSidebar .sb-add:hover { background: var(--surface-hover); color: var(--accent); border-color: transparent; filter: none; } #dmSidebar .sb-add svg { width: 13px; height: 13px; display: block; } /* Inline ETL-cycle name editor (create + rename share this row). */ #dmSidebar .sb-list li.sb-editing { display: flex; align-items: center; gap: 2px; cursor: default; padding-right: 6px; } #dmSidebar .sb-list li.sb-editing:hover { background: transparent; } #dmSidebar .sb-edit-input { flex: 1 1 auto; min-width: 0; font-family: inherit; font-size: var(--fs-meta); padding: 2px 6px; border: 1px solid var(--accent); border-radius: 4px; background: #fff; color: var(--fg); } #dmSidebar .sb-edit-input.invalid { border-color: var(--err); background: var(--err-soft-bg); } #dmSidebar .sb-icon-btn { flex: 0 0 auto; padding: 2px; background: transparent; border: 0; border-radius: 4px; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } #dmSidebar .sb-icon-btn:hover { background: var(--hover-strong); color: var(--fg); } #dmSidebar .sb-icon-btn.save:hover { color: var(--ok); } #dmSidebar .sb-icon-btn.cancel:hover { color: var(--err); } #dmSidebar .sb-icon-btn svg { width: 13px; height: 13px; display: block; } #dmSidebar .sb-icon-btn:disabled, #dmSidebar .sb-icon-btn:disabled:hover { background: transparent; opacity: 0.4; cursor: default; }