/* Narrow — global navigation (BACKLOG 25c). One bar on every management page; never on the player path (N1). Self-contained: the server pages load only this file, so nothing here relies on planner.css. Tokens (D76) come from .designs/brand/duckweaver/tokens.css and are scoped to the nav's own elements, so the bar never fights the host page over :root. Dark is the default (the Planner and the server pages are dark, N11); `[data-theme="light"]` on switches the whole set. Never a hex in a rule below the token blocks. */ :root { --dw-nav-h: 42px; } /* the bar's height, for hosts that lay out under or beside it (planner.css) */ .dw-nav, .dw-menu, .dw-palette, .dw-note { /* dark set (tokens.css, D76) */ --dw-bg: #11141A; --dw-surface: #1E222B; --dw-raised: #313540; --dw-line: #4D5260; --dw-text: #F2F4F7; --dw-text-muted: #9C9FA3; --dw-brand: #98A0B1; --dw-focus: #406BB3; --dw-concept: #D15E2D; --dw-concept-on: #111418; --dw-concept-ink: #D56B3E; --dw-concept-soft: #30201D; --dw-concept-soft-ink: #D66E42; --dw-concept-border: #5E3222; --dw-live: #406BB3; --dw-live-on: #FFFFFF; --dw-live-ink: #5D89D3; --dw-live-soft: #242F43; --dw-live-soft-ink: #6996E1; --dw-live-border: #2D4368; --dw-danger-ink: #D7646F; /* the monochrome mark: duckweaver-harbor-mono-dark.svg (ink, front ribbon, back ribbon, bill) */ --dw-logo-ink: #B8BDC9; --dw-logo-accent: #838DA2; --dw-logo-accent2: #5A6783; --dw-logo-bill: #D6D9E0; --dw-nav-h: 42px; --dw-nav-shadow: 0 10px 30px rgba(0, 0, 0, .45); } :root[data-theme="light"] .dw-nav, :root[data-theme="light"] .dw-menu, :root[data-theme="light"] .dw-palette, :root[data-theme="light"] .dw-note { /* light set (tokens.css, D76) */ --dw-bg: #F4F6F9; --dw-surface: #FFFFFF; --dw-raised: #ECEFF4; --dw-line: #DDE0E6; --dw-text: #191F2B; --dw-text-muted: #5F646D; --dw-brand: #435272; --dw-focus: #3E68B0; --dw-concept: #D15E2D; --dw-concept-on: #111418; --dw-concept-ink: #B85328; --dw-concept-soft: #F9EAE4; --dw-concept-soft-ink: #AB4D25; --dw-concept-border: #EDBFAB; --dw-live: #3E68B0; --dw-live-on: #FFFFFF; --dw-live-ink: #3E68B0; --dw-live-soft: #E6EBF5; --dw-live-soft-ink: #3E68B0; --dw-live-border: #B2C3DF; --dw-danger-ink: #A83948; /* duckweaver-harbor-mono.svg */ --dw-logo-ink: #435272; --dw-logo-accent: #8A94A8; --dw-logo-accent2: #BFC4CF; --dw-logo-bill: #F4F6F9; --dw-nav-shadow: 0 10px 30px rgba(20, 24, 32, .18); } /* ---- the bar ---- */ .dw-nav { display: flex; align-items: center; gap: 4px; height: var(--dw-nav-h); padding: 0 12px 0 10px; background: var(--dw-surface); color: var(--dw-text); border-bottom: 1px solid var(--dw-line); font: 13px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; box-sizing: border-box; flex: none; position: relative; z-index: 900; } .dw-nav *, .dw-menu *, .dw-palette * { box-sizing: border-box; } .dw-nav button, .dw-nav a, .dw-menu button, .dw-menu a { font: inherit; color: inherit; } .dw-nav.dw-nav-fixed { position: fixed; top: 0; left: 0; right: 0; } .dw-nav-spacer { height: var(--dw-nav-h, 42px); flex: none; } /* the Muur (D61): the bar is part of the overlay that fades when nobody touches the page */ .dw-nav.dw-nav-fades { transition: opacity .35s; } body.idle .dw-nav.dw-nav-fades { opacity: 0; pointer-events: none; } .dw-brand { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; margin-right: 6px; border-radius: 8px; text-decoration: none; color: var(--dw-text); white-space: nowrap; } .dw-brand:hover { background: var(--dw-raised); } .dw-brand:focus-visible { outline: 2px solid var(--dw-focus); outline-offset: 1px; } .dw-logo { width: 28px; height: 28px; display: inline-block; flex: none; } .dw-logo svg { width: 100%; height: 100%; display: block; } .dw-logo .ink { fill: var(--dw-logo-ink); } .dw-logo .accent { fill: var(--dw-logo-accent); } .dw-logo .accent2 { fill: var(--dw-logo-accent2); } .dw-logo .bg { fill: var(--dw-surface); } .dw-logo .bill { fill: var(--dw-logo-bill); } .dw-brand-name { font-weight: 600; letter-spacing: .01em; } .dw-brand-name .thin { font-weight: 400; color: var(--dw-text-muted); } .dw-nav-groups { display: flex; align-items: center; gap: 2px; min-width: 0; } .dw-nav-item { background: transparent; border: 0; border-radius: 7px; padding: 6px 10px; cursor: pointer; white-space: nowrap; color: var(--dw-text); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; line-height: 1.2; } .dw-nav-item:hover, .dw-nav-item[aria-expanded="true"] { background: var(--dw-raised); } .dw-nav-item:focus-visible { outline: 2px solid var(--dw-focus); outline-offset: -2px; } .dw-nav-item.active { box-shadow: inset 0 -2px 0 var(--dw-live-ink); } .dw-nav-item .caret { font-size: 9px; color: var(--dw-text-muted); } .dw-spacer { flex: 1; } .dw-right { display: flex; align-items: center; gap: 4px; } .dw-right .pub-ctl { margin-right: 4px; } /* the Planner's own "Publiceren · N" control, mounted here (D60, N7) */ .dw-btn { background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 5px 9px; cursor: pointer; white-space: nowrap; text-decoration: none; color: var(--dw-text); display: inline-flex; align-items: center; gap: 6px; line-height: 1.2; } .dw-btn:hover { background: var(--dw-raised); } .dw-btn:focus-visible { outline: 2px solid var(--dw-focus); outline-offset: 1px; } .dw-btn.dw-btn-publish { background: var(--dw-concept-soft); color: var(--dw-concept-soft-ink); border-color: var(--dw-concept-border); font-weight: 600; } .dw-btn.dw-btn-publish:hover { background: var(--dw-concept); color: var(--dw-concept-on); } .dw-btn.dw-icon { padding: 5px 7px; font-size: 14px; line-height: 1; } .dw-btn kbd { font: 11px ui-monospace, Menlo, Consolas, monospace; background: var(--dw-raised); border-radius: 4px; padding: 0 5px; } .dw-user { max-width: 220px; } .dw-user .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dw-user .avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--dw-live-soft); color: var(--dw-live-soft-ink); border: 1px solid var(--dw-live-border); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: none; } .dw-nav-burger { display: none; } /* ---- menus (one open at a time; hover switches while one is open, like a menubar) ---- */ .dw-menu { position: fixed; z-index: 950; min-width: 240px; max-width: min(360px, 94vw); background: var(--dw-surface); color: var(--dw-text); border: 1px solid var(--dw-line); border-radius: 10px; box-shadow: var(--dw-nav-shadow); padding: 6px; display: flex; flex-direction: column; font: 13px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; } .dw-menu-title { padding: 6px 10px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--dw-text-muted); } .dw-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 6px; padding: 7px 10px; cursor: pointer; color: var(--dw-text); text-decoration: none; } .dw-menu-item:hover, .dw-menu-item:focus-visible { background: var(--dw-raised); outline: 0; } .dw-menu-item.active { box-shadow: inset 3px 0 0 var(--dw-live-ink); } .dw-menu-item .label { flex: 1; min-width: 0; } .dw-menu-item .hint { color: var(--dw-text-muted); font-size: 11.5px; white-space: nowrap; } .dw-menu-item .check { width: 14px; text-align: center; color: var(--dw-live-ink); } .dw-menu-item.danger { color: var(--dw-danger-ink); } .dw-menu-sep { height: 1px; background: var(--dw-line); margin: 5px 4px; } .dw-menu-note { padding: 6px 10px; font-size: 11.5px; color: var(--dw-text-muted); } .dw-menu-note b { color: var(--dw-text); font-weight: 600; } .dw-menu-section { padding: 8px 10px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--dw-text-muted); } .dw-menu-form { margin: 0; display: contents; } .dw-menu-note.dw-version { border-top: 1px solid var(--dw-line); margin-top: 4px; padding-top: 8px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; } /* ---- the palette for pages without the Planner's own (⌘K, N9): the same list, another door ---- */ .dw-palette { position: fixed; inset: 0; z-index: 990; background: rgba(0, 0, 0, .55); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--dw-text); } .dw-palette-box { width: min(640px, 92vw); background: var(--dw-surface); border: 1px solid var(--dw-line); border-radius: 12px; box-shadow: var(--dw-nav-shadow); overflow: hidden; } .dw-palette-input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--dw-line); padding: 14px 16px; font: inherit; font-size: 15px; color: inherit; outline: 0; } .dw-palette-list { max-height: 50vh; overflow: auto; padding: 6px; } .dw-palette-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; cursor: pointer; } .dw-palette-item.on { background: var(--dw-live-soft); color: var(--dw-live-soft-ink); } .dw-palette-item .label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dw-palette-item .hint { color: var(--dw-text-muted); font-size: 11.5px; white-space: nowrap; } .dw-palette-item.muted { color: var(--dw-text-muted); } .dw-palette-foot { padding: 6px 12px; border-top: 1px solid var(--dw-line); color: var(--dw-text-muted); font-size: 11.5px; } /* ---- small notice (e.g. "niet bewaard: noodsleutel"), the nav's own, independent of planner.css toasts ---- */ .dw-note { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 995; background: var(--dw-surface); color: var(--dw-text); border: 1px solid var(--dw-line); border-radius: 10px; padding: 9px 14px; box-shadow: var(--dw-nav-shadow); font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; max-width: min(560px, 92vw); } .dw-note.warn { border-color: var(--dw-concept-border); color: var(--dw-concept-soft-ink); background: var(--dw-concept-soft); } /* ---- narrow screens (N12): the existing < 720 px layouts must not break; the groups fold into one menu ---- */ @media (max-width: 767px) { /* the Muur's header goes in flow on a phone (planner.css); so does the bar, else it would cover that header */ .dw-nav.dw-nav-fades { position: static; } } @media (max-width: 719px) { .dw-nav { padding: 0 8px; gap: 2px; } .dw-nav-groups { display: none; } .dw-nav-burger { display: inline-flex; } .dw-brand-name .thin { display: none; } .dw-user .name { display: none; } .dw-right .dw-btn-k { display: none; } }