/* Dark theme (default). Every colour is a variable so a single `data-theme` attribute on repaints the whole viewer; see [data-theme="light"] below and the matching graph-canvas variables read by js/app.js (cyStyle). */ :root { color-scheme: dark; /* Left sidebar width; the collapse toggle sits at this seam. */ --sidebar-width: 300px; --bg: #0f172a; --surface: #111c33; --surface-raised: #1e293b; --surface-hover: #334155; --border: #1e293b; --border-control: #334155; --border-subtle: #475569; --input-bg: #0f172a; --text: #cbd5e1; --heading: #f1f5f9; --muted: #64748b; --muted-strong: #94a3b8; --text-on-control: #e2e8f0; --accent: #4f8cff; --link: #7db2ff; --tooltip-bg: #0b1424; --tooltip-text: #e2e8f0; --overlay-bg: rgba(15, 23, 42, .85); --shadow: 0 4px 14px rgba(0, 0, 0, .45); --on-swatch: #0f172a; --num: #f59e0b; --unmeasured-fill: #243044; --unmeasured-border: #475569; /* Graph canvas colours, read from JS so the graph tracks the theme. */ --graph-label: #cbd5e1; --graph-label-bg: #0f172a; --graph-sel-border: #ffffff; --graph-node-border: #334155; --graph-node-border-width: 0; } [data-theme="light"] { color-scheme: light; --bg: #f8fafc; --surface: #f1f5f9; --surface-raised: #e2e8f0; --surface-hover: #cbd5e1; --border: #e2e8f0; --border-control: #cbd5e1; --border-subtle: #94a3b8; --input-bg: #ffffff; --text: #334155; --heading: #0f172a; --muted: #64748b; --muted-strong: #475569; --text-on-control: #1e293b; --accent: #2563eb; --link: #2563eb; --tooltip-bg: #ffffff; --tooltip-text: #1e293b; --overlay-bg: rgba(226, 232, 240, .85); --shadow: 0 4px 14px rgba(15, 23, 42, .18); --on-swatch: #0f172a; --num: #b45309; --unmeasured-fill: #e2e8f0; --unmeasured-border: #94a3b8; --graph-label: #334155; --graph-label-bg: #f8fafc; --graph-sel-border: #0f172a; --graph-node-border: #cbd5e1; --graph-node-border-width: 1; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; font: 13px/1.45 -apple-system, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); } body { display: flex; } #sidebar { width: var(--sidebar-width); flex: none; height: 100%; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--border); } .sidebar-top { position: sticky; top: 0; z-index: 5; padding: 14px 14px 10px; background: var(--surface); border-bottom: 1px solid var(--border); } .sidebar-body { padding: 8px 14px 14px; } .sidebar-body > section + section { padding-top: 6px; border-top: 1px solid var(--border); } .sidebar-head { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; } #sidebar h1 { font-size: 15px; margin: 0; flex: 1; color: var(--heading); } #sidebar h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 16px 0 6px; } #sidebar section { margin-top: 8px; } .subgroup { padding-left: 7px; margin-top: 6px; } .subsection { padding-left: 7px; margin-top: 4px; } .subgroup > h3.foldable { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 8px 0 5px; } .subsection > h4.foldable { font-size: 12px; color: var(--muted-strong); font-weight: 400; margin: 8px 0 3px; } .theme-toggle { flex: none; width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; border-radius: 6px; background: var(--surface-raised); color: var(--text-on-control); border: 1px solid var(--border-control); cursor: pointer; } .theme-toggle:hover { background: var(--surface-hover); } .repo-link { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--surface-raised); color: var(--text-on-control); border: 1px solid var(--border-control); } .repo-link:hover { background: var(--surface-hover); } .sidebar-toggle { position: fixed; top: 12px; left: var(--sidebar-width); z-index: 50; width: 22px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; border: 1px solid var(--border-control); border-left: none; border-radius: 0 6px 6px 0; background: var(--surface-raised); color: var(--text-on-control); cursor: pointer; } .sidebar-toggle:hover { background: var(--surface-hover); } body.sidebar-collapsed #sidebar { display: none; } body.sidebar-collapsed .sidebar-toggle { left: 0; border-left: 1px solid var(--border-control); } .sidebar-resize { position: fixed; top: 0; left: var(--sidebar-width); z-index: 40; width: 7px; height: 100%; transform: translateX(-3px); cursor: col-resize; touch-action: none; } .sidebar-resize::after { content: ''; position: absolute; top: 0; left: 3px; width: 1px; height: 100%; background: transparent; transition: background .12s; } .sidebar-resize:hover::after, .sidebar-resize.dragging::after { background: var(--accent); } body.sidebar-collapsed .sidebar-resize { display: none; } #sidebar .foldable { display: flex; align-items: center; gap: 7px; line-height: 1; cursor: pointer; user-select: none; } #sidebar .foldable:hover { color: var(--muted-strong); } #sidebar .foldable::before { content: ''; flex: none; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .12s ease; } #sidebar .foldable:not(.collapsed)::before { transform: rotate(90deg); } #sidebar .foldable.collapsed ~ * { display: none; } #status { font-size: 11px; color: var(--muted); } .status-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .status-row > #status { flex: 1; min-width: 0; } .reset-view { flex: none; padding: 2px 8px; font-size: 11px; } #search { width: 100%; padding: 6px 8px; border: 1px solid var(--border-control); border-radius: 6px; background: var(--input-bg); color: var(--text-on-control); } #search:focus { outline: none; border-color: var(--accent); } #search-results { margin-top: 4px; max-height: 42vh; overflow-y: auto; } #search-results .hit { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 4px; cursor: pointer; font-size: 12px; } #search-results .hit:hover { background: var(--surface-raised); } #search-results .hit .hit-name { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #search-results .hit .loc { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; } .legend label { display: flex; align-items: center; gap: 6px; padding: 1px 0; cursor: pointer; user-select: none; } .legend .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; } .legend .count { margin-left: auto; color: var(--muted); font-size: 11px; } .help-badge { flex: none; width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--border-subtle); color: var(--muted-strong); font-size: 9px; font-weight: 600; line-height: 11px; letter-spacing: normal; text-align: center; text-transform: none; user-select: none; opacity: 0.5; } .help-badge:hover, .help-badge:focus { background: var(--surface-hover); color: var(--text-on-control); border-color: var(--muted); outline: none; } .legend label.master { margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--border); color: var(--muted-strong); } .legend .swatch.spacer { background: transparent; } .more-toggle { margin: 3px 0 1px; padding: 1px 2px; font-size: 11px; background: transparent; border: none; color: var(--link); cursor: pointer; } .more-toggle:hover { background: transparent; text-decoration: underline; } .kind-tooltip { position: fixed; z-index: 1000; max-width: 390px; padding: 9px 14px; border-radius: 9px; background: var(--tooltip-bg); border: 1px solid var(--border-control); color: var(--tooltip-text); font-size: 17px; line-height: 1.4; box-shadow: var(--shadow); pointer-events: none; } .kind-tooltip[hidden] { display: none; } .kind-tooltip .kind-tag { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 15px; color: var(--on-swatch); font-weight: 600; } .kind-tooltip .node-tip-doc { margin-top: 8px; color: var(--tooltip-text); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .kind-tooltip .node-tip-loc { margin-top: 6px; color: var(--muted-strong); word-break: break-all; } .kind-tooltip .node-tip-id { margin-top: 3px; color: var(--muted); font-size: 15px; word-break: break-all; } .row { display: flex; align-items: center; gap: 6px; margin: 4px 0; } select, button { background: var(--surface-raised); color: var(--text-on-control); border: 1px solid var(--border-control); border-radius: 6px; padding: 4px 8px; font: inherit; cursor: pointer; } button:hover { background: var(--surface-hover); } button:disabled { opacity: .4; cursor: default; } button:disabled:hover { background: var(--surface-raised); } select { flex: 1; } .selection-nav { display: flex; gap: 6px; margin: 4px 0 6px; } .selection-nav button { flex: none; width: 30px; padding: 3px 0; text-align: center; line-height: 1.2; } .colour-by label { font-size: 12px; color: var(--muted-strong); white-space: nowrap; } #details-body { font-size: 12px; } #details-body .detail-doc { margin: 4px 0; color: var(--text); line-height: 1.45; } #details-body .id { color: var(--muted); font-size: 10px; word-break: break-all; } #details-body .kind-tag { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 10px; color: var(--on-swatch); font-weight: 600; } #details-body h3 { font-size: 11px; color: var(--muted); margin: 10px 0 3px; } #details-body .edge-row { display: flex; align-items: center; gap: 4px; padding: 1px 0; } #details-body .edge-kind { flex: none; color: var(--muted); font-size: 10px; } #details-body .edge-count { flex: none; color: var(--num); font-size: 10px; font-variant-numeric: tabular-nums; } #details-body .edge-arrow { flex: none; color: var(--muted); } #details-body .edge-target { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } #details-body a { color: var(--link); cursor: pointer; text-decoration: none; } #details-body a:hover { text-decoration: underline; } #details-body .file-loc { word-break: break-all; } #details-body a.file-link { display: inline-flex; vertical-align: middle; margin-left: 5px; color: var(--muted); text-decoration: none; } #details-body a.file-link:hover { color: var(--link); text-decoration: none; } #details-body a.file-link svg { display: block; width: 14px; height: 14px; } #runtime.empty .heat-legend, #runtime.empty .heat-note, #runtime.empty .hotspots-title, #runtime.empty #hotspots, #runtime.empty label.row { display: none; } #communities.empty { display: none; } #coverage { font-size: 11px; color: var(--muted-strong); margin: 2px 0 6px; } #runtime label.row { font-size: 12px; } .heat-legend { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; } .heat-bar { flex: 1; height: 10px; border-radius: 3px; background: linear-gradient(90deg, #64748b, #fde047, #dc2626); } .heat-legend .heat-min, .heat-legend .heat-max { font-size: 10px; color: var(--muted); } .heat-note { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--muted); } .heat-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; } .heat-swatch.unmeasured { background: var(--unmeasured-fill); border: 1px dashed var(--unmeasured-border); } .hotspots-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 12px 0 4px; } #hotspots .hotspot { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 4px; cursor: pointer; font-size: 12px; } #hotspots .hotspot:hover { background: var(--surface-raised); } .hotspot-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hotspot-ms { margin-left: auto; flex: none; color: var(--num); font-size: 11px; font-variant-numeric: tabular-nums; } #details-body .runtime-block { margin-top: 8px; } #details-body .runtime-block .metric { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; } #details-body .runtime-block .metric span { color: var(--muted); } #cy { flex: 1; height: 100%; } #dropzone { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--text-on-control); background: var(--overlay-bg); border: 3px dashed var(--accent); pointer-events: none; opacity: 0; transition: opacity .15s; } #dropzone.active { opacity: 1; } #dropzone code { color: var(--link); }