/* Shared page chrome for the brip4 web micro-apps. * * Structure ported from brip1's .brip-nav (logo, page links, active * underline, spacer, project title on the right). Light-first (unified * 2026-07-30); dark follows the app theme — html[data-theme] set by * static/theme.js, or the OS preference on auto. * * LAYOUT CONTRACT: the nav is a flex row of fixed height at the top of a * column-flex ; page content is the flex:1 sibling BELOW it. The nav * never overlays content — the canvas page in particular must not have the * nav floating over the imgui surface (mouse events would be swallowed). */ :root { color-scheme: light; --nav-h: 42px; --bg: #ffffff; --nav-bg: #fafafa; --border: #e0e0e0; --fg: #212121; --dim: #757575; --accent: #1e88e5; --accent2: #1e88e5; --logo: #e65100; } @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { color-scheme: dark; --bg: #1b1b1b; --nav-bg: #232323; --border: #3a3a3a; --fg: #e8e8e8; --dim: #8a8a8a; --accent: #e8a33d; --accent2: #8cbef0; --logo: #e8a33d; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #1b1b1b; --nav-bg: #232323; --border: #3a3a3a; --fg: #e8e8e8; --dim: #8a8a8a; --accent: #e8a33d; --accent2: #8cbef0; --logo: #e8a33d; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 15px/1.5 system-ui, sans-serif; } /* page = nav on top, content filling the rest */ body.brip-page { display: flex; flex-direction: column; overflow: hidden; } .brip-nav { flex: 0 0 var(--nav-h); height: var(--nav-h); display: flex; align-items: center; gap: 2px; padding: 0 14px; background: var(--nav-bg); border-bottom: 1px solid var(--border); z-index: 100; } .brip-nav .logo { font-weight: 700; font-size: 15px; color: var(--logo); margin-right: 16px; letter-spacing: 1px; text-decoration: none; white-space: nowrap; } .brip-nav a { color: var(--dim); text-decoration: none; padding: 0 11px; line-height: calc(var(--nav-h) - 3px); font-size: 13px; font-weight: 500; border-bottom: 2px solid transparent; transition: color .12s, border-color .12s; white-space: nowrap; } .brip-nav a:hover { color: var(--fg); } .brip-nav a.active { color: var(--fg); border-bottom-color: var(--accent); } /* pages not built yet — visible but inert, so the map is legible */ .brip-nav a.todo { color: #5a5a5a; cursor: default; } .brip-nav a.todo:hover { color: #5a5a5a; } .brip-nav .spacer { flex: 1; } .brip-nav button.theme { background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--dim); font: 12px/1.4 system-ui, sans-serif; padding: 2px 9px; margin-left: 12px; cursor: pointer; white-space: nowrap; } .brip-nav button.theme:hover { color: var(--fg); border-color: var(--accent); } .brip-nav .version { font-family: ui-monospace, monospace; font-size: 11px; color: var(--dim); margin-left: 10px; white-space: nowrap; } .brip-nav .project-title { font-size: 14px; font-weight: 600; color: var(--fg); white-space: nowrap; } .brip-nav .project-code { font-family: ui-monospace, monospace; font-size: 12px; color: var(--accent2); margin-left: 8px; } /* the content area below the nav */ .brip-content { flex: 1 1 auto; min-height: 0; /* so children can scroll rather than push the nav off */ position: relative; }