/* L4D2node — full design system. Two themes via [data-theme] on . Indigo accent across both modes; true near-black background in dark, off- white in light. Inspired by Vercel/Linear-style dashboards. */ :root, :root[data-theme="light"] { --bg: #f7f8fb; --bg-elevated: #ffffff; --card-bg: #ffffff; --hover-bg: #f1f3f8; --fg: #0f172a; --fg-strong: #0a0f1c; --fg-muted: #64748b; --fg-faint: #94a3b8; --line: #e4e8ef; --line-strong: #cdd4de; --accent: #6366f1; /* indigo-500 */ --accent-hover: #5558e6; --accent-soft: #eef0ff; --accent-fg: #4338ca; --red: #ef4444; --red-soft: #fee2e2; --red-fg: #b91c1c; --amber: #f59e0b; --amber-soft: #fef3c7; --amber-fg: #b45309; --green: #10b981; --green-soft: #d1fae5; --green-fg: #047857; --code-bg: #f5f7fa; --code-fg: #1e293b; --chart-line: #6366f1; --chart-grid: #e4e8ef; --chart-label: #94a3b8; --cat-engine: #818cf8; /* indigo */ --cat-extension: #34d399; /* emerald */ --cat-system: #fbbf24; /* amber */ --cat-unknown: #94a3b8; /* slate */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10); } :root[data-theme="dark"] { --bg: #0a0a0c; --bg-elevated: #111114; --card-bg: #14141a; --hover-bg: #1c1c24; --fg: #e2e8f0; --fg-strong: #f8fafc; --fg-muted: #94a3b8; --fg-faint: #64748b; --line: #23232c; --line-strong: #2e2e38; --accent: #818cf8; /* indigo-400 */ --accent-hover: #a5b0ff; --accent-soft: #1c1c2c; --accent-fg: #c7d2fe; --red: #f87171; --red-soft: #2c1416; --red-fg: #fca5a5; --amber: #fbbf24; --amber-soft: #2a1f0a; --amber-fg: #fcd34d; --green: #34d399; --green-soft: #0f2a20; --green-fg: #6ee7b7; --code-bg: #0e0e12; --code-fg: #cbd5e1; --chart-line: #818cf8; --chart-grid: #23232c; --chart-label: #64748b; --cat-engine: #a5b4fc; --cat-extension: #6ee7b7; --cat-system: #fcd34d; --cat-unknown: #94a3b8; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5); } :root { --mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif; } /* Density modes — set by data-density on . comfortable is the default. compact = denser like Ghidra/IDA listings; spacious = roomier for reading. */ :root, :root[data-density="comfortable"] { --base-fs: 14px; --tree-fs: 12px; --tree-pad-y: 3px; --tree-pad-x: 12px; --tree-leaf-pad: 28px; --table-pad-y: 6px; --table-pad-x: 12px; --table-fs: 13px; --code-fs: 12.5px; --code-line: 1.5; --code-pad-y: 16px; --code-pad-x: 20px; --card-pad-y: 14px; --card-pad-x: 18px; --page-head-mb: 22px; --section-gap: 16px; } :root[data-density="compact"] { --base-fs: 13px; --tree-fs: 11px; --tree-pad-y: 1px; --tree-pad-x: 8px; --tree-leaf-pad: 22px; --table-pad-y: 3px; --table-pad-x: 9px; --table-fs: 11.5px; --code-fs: 11.5px; --code-line: 1.4; --code-pad-y: 10px; --code-pad-x: 14px; --card-pad-y: 8px; --card-pad-x: 12px; --page-head-mb: 12px; --section-gap: 10px; } :root[data-density="spacious"] { --base-fs: 15px; --tree-fs: 13.5px; --tree-pad-y: 5px; --tree-pad-x: 14px; --tree-leaf-pad: 32px; --table-pad-y: 11px; --table-pad-x: 16px; --table-fs: 14px; --code-fs: 14px; --code-line: 1.65; --code-pad-y: 22px; --code-pad-x: 26px; --card-pad-y: 20px; --card-pad-x: 22px; --page-head-mb: 30px; --section-gap: 22px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font: var(--base-fs)/1.5 var(--sans); -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } code, pre { font-family: var(--mono); font-size: 13px; color: var(--code-fg); } pre { background: var(--code-bg); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; overflow-x: auto; } .muted { color: var(--fg-muted); } .small { font-size: 12px; } .nowrap { white-space: nowrap; } .right { text-align: right; } .num { font-variant-numeric: tabular-nums; } /* ---------------- topbar ---------------- */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; background: var(--bg-elevated); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg-strong); font-weight: 500; font-size: 15px; } .brand:hover { text-decoration: none; color: var(--fg-strong); } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--accent); color: white; border-radius: 7px; font-weight: 700; font-size: 13px; box-shadow: 0 1px 3px rgba(99, 102, 241, 0.4); } .brand-name { letter-spacing: -0.01em; } .topbar-right { display: inline-flex; align-items: center; gap: 14px; } .theme-toggle { background: transparent; border: 1px solid transparent; color: var(--fg-muted); padding: 6px 9px; border-radius: 7px; cursor: pointer; font-size: 16px; line-height: 1; } .theme-toggle:hover { background: var(--hover-bg); color: var(--fg); } .theme-toggle-light { display: none; } .theme-toggle-dark { display: inline; } [data-theme="dark"] .theme-toggle-light { display: inline; } [data-theme="dark"] .theme-toggle-dark { display: none; } /* Density toggle — three-segment selector. Active mode highlighted. */ .density-group { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; background: var(--bg-elevated); overflow: hidden; } .density-btn { background: transparent; border: 0; padding: 5px 8px; cursor: pointer; color: var(--fg-muted); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px; transition: background .12s, color .12s; } .density-btn:hover { background: var(--hover-bg); color: var(--fg); } .density-btn.is-active { background: var(--accent-soft); color: var(--accent-fg); } .density-btn + .density-btn { border-left: 1px solid var(--line); } .density-icon { display: inline-block; width: 12px; position: relative; } .density-icon::before, .density-icon::after, .density-icon-comfortable::before { content: ""; } /* compact: 4 thin lines */ .density-icon-compact { height: 9px; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-repeat: repeat-y; background-position: 0 0; background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 0, 0 3px, 0 6px, 0 9px; background-repeat: no-repeat; } /* comfortable: 3 lines */ .density-icon-comfortable { height: 9px; background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 0, 0 4px, 0 8px; background-repeat: no-repeat; } /* spacious: 2 thicker lines, more spacing */ .density-icon-spacious { height: 9px; background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 100% 2px; background-position: 0 0, 0 7px; background-repeat: no-repeat; } .user-menu { position: relative; } .user-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elevated); user-select: none; } .user-menu summary::-webkit-details-marker { display: none; } .user-menu[open] summary { background: var(--hover-bg); } .user-avatar { width: 26px; height: 26px; border-radius: 50%; display: block; } .user-avatar-fallback { display: inline-block; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #f87171, #ec4899); } .user-menu-name { font-size: 13px; color: var(--fg); font-weight: 500; } .user-menu-caret { color: var(--fg-faint); font-size: 10px; } .user-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-md); padding: 6px; z-index: 100; } .user-menu-id { padding: 8px 10px 6px; font-size: 11px; font-family: var(--mono); color: var(--fg-faint); border-bottom: 1px solid var(--line); margin-bottom: 4px; } .user-menu-panel a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--fg); font-size: 13px; } .user-menu-panel a:hover { background: var(--hover-bg); text-decoration: none; } .user-menu-panel a.menu-danger { color: var(--red); } .user-menu-panel a.menu-danger:hover { background: var(--red-soft); } .menu-icon { width: 16px; display: inline-block; text-align: center; opacity: 0.8; } /* ---------------- footer ---------------- */ footer { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 32px 24px 40px; color: var(--fg-faint); font-size: 11px; } footer a, .footer-link { color: var(--fg-muted); transition: color .12s; } footer a:hover { color: var(--accent); text-decoration: none; } .footer-sep { color: var(--fg-faint); user-select: none; } .footer-mark { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: var(--accent); color: white; border-radius: 4px; font-weight: 700; font-size: 9px; margin-right: 4px; opacity: 0.85; } /* ---------------- main layout ---------------- */ main { max-width: 1200px; margin: 24px auto; padding: 0 24px; } h1 { font-size: 26px; font-weight: 600; margin: 0; letter-spacing: -0.01em; color: var(--fg-strong); } h2 { font-size: 16px; font-weight: 600; margin: 0; color: var(--fg-strong); letter-spacing: -0.005em; } /* Reusable card */ .card { background: var(--card-bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-sm); overflow: hidden; } .card-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); } .card-title { font-size: 14px; font-weight: 600; color: var(--fg-strong); margin: 0; } /* ---------------- buttons ---------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border: 1px solid var(--line); background: var(--bg-elevated); color: var(--fg); border-radius: 8px; font: inherit; font-weight: 500; font-size: 13px; cursor: pointer; text-decoration: none; transition: background .12s, border-color .12s, color .12s; } .btn:hover { background: var(--hover-bg); text-decoration: none; } .btn-primary { background: var(--accent); border-color: var(--accent); color: white; } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: white; } .btn-ghost { background: var(--bg-elevated); border-color: var(--line); color: var(--fg); } .btn-ghost:hover { background: var(--hover-bg); } .btn-danger { background: var(--bg-elevated); border-color: var(--red); color: var(--red); } .btn-danger:hover { background: var(--red); color: white; } .btn-sm { padding: 6px 12px; font-size: 12px; } .btn-block { display: flex; width: 100%; padding: 12px; font-size: 14px; } .btn-go { padding: 9px 18px; } /* ---------------- hero / landing ---------------- */ .hero { max-width: 720px; margin: 60px auto 0; text-align: center; } .hero-badge { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--line); font-size: 11px; color: var(--fg-muted); letter-spacing: 0.01em; margin-bottom: 20px; } .hero-title { font-size: 38px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg-strong); margin: 0 0 12px; } .hero-sub { color: var(--fg-muted); font-size: 13px; margin: 0 auto 28px; max-width: 520px; } .hero-sub a { color: var(--accent); } .hero-stats { display: flex; justify-content: center; gap: 64px; margin-bottom: 40px; flex-wrap: wrap; } .hero-stat { text-align: center; } .hero-stat-num { font-size: 32px; font-weight: 700; color: var(--fg-strong); letter-spacing: -0.02em; line-height: 1.1; } .hero-stat-label { margin-top: 4px; color: var(--fg-muted); font-size: 12px; } .lookup-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: 12px; padding: 18px; box-shadow: var(--shadow-md); } .lookup-form { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg-elevated); } .lookup-label { padding: 9px 12px; background: var(--code-bg); color: var(--fg-muted); font-family: var(--mono); font-size: 12px; border-right: 1px solid var(--line); white-space: nowrap; } .lookup-form input { flex: 1; border: none; outline: none; padding: 9px 14px; font-family: var(--mono); font-size: 13px; color: var(--fg); background: transparent; } .lookup-form input::placeholder { color: var(--fg-faint); } .lookup-form .btn-go { border-radius: 0; border: none; } .lookup-or { text-align: center; margin: 14px 0; position: relative; color: var(--fg-faint); font-size: 11px; letter-spacing: 0.06em; } .lookup-or::before, .lookup-or::after { content: ''; position: absolute; top: 50%; width: calc(50% - 28px); height: 1px; background: var(--line); } .lookup-or::before { left: 0; } .lookup-or::after { right: 0; } .lookup-or span { background: var(--card-bg); padding: 0 8px; } .lookup-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; } .lookup-stats-link { font-size: 12px; } /* ---------------- dashboard ---------------- */ .dash-head { display: flex; align-items: flex-end; justify-content: space-between; margin: 8px 0 22px; gap: 24px; flex-wrap: wrap; } .dash-head h1 { margin-bottom: 12px; } .dash-meta { display: inline-flex; align-items: center; gap: 14px; } .copy-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 999px; font-size: 12px; cursor: pointer; user-select: none; transition: background .12s, border-color .12s; } .copy-chip:hover { background: var(--hover-bg); border-color: var(--line-strong); } .copy-chip code { font-family: var(--mono); font-size: 12px; color: var(--fg); } .copy-icon { color: var(--fg-faint); font-size: 12px; } .dash-head-right { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; } .search-input { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 8px; min-width: 240px; } .search-input:focus-within { border-color: var(--accent); } .search-icon { color: var(--fg-faint); font-size: 14px; } .search-input input { border: none; outline: none; background: transparent; flex: 1; font-size: 13px; color: var(--fg); } .search-input input::placeholder { color: var(--fg-faint); } .filter-pills, .range-pills { display: inline-flex; align-items: center; gap: 4px; padding: 3px; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 8px; } .pill { padding: 5px 14px; border-radius: 6px; color: var(--fg-muted); font-size: 12px; font-weight: 500; text-decoration: none; cursor: pointer; } .pill:hover { color: var(--fg); text-decoration: none; } .pill.active { background: var(--card-bg); color: var(--fg-strong); box-shadow: var(--shadow-sm); } /* report table — used on dashboard, /sig/, and stats top sigs */ .report-table { width: 100%; border-collapse: collapse; } .report-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); font-weight: 500; text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); background: var(--code-bg); } .report-table thead th.right { text-align: right; } .report-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; } .report-table tbody tr:last-child td { border-bottom: none; } .report-row { cursor: pointer; transition: background .12s; } .report-row:hover td { background: var(--hover-bg); } .report-table .chev { width: 28px; color: var(--fg-faint); text-align: right; font-size: 16px; } .report-table code { font-family: var(--mono); } .report-table code.sig { color: var(--fg-muted); font-size: 12px; } .dash-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; } .dash-stats-link { font-size: 12px; color: var(--accent); } /* severity badge */ .sev { display: inline-block; padding: 2px 9px; border-radius: 4px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid transparent; } .sev-fatal { background: var(--red-soft); color: var(--red-fg); border-color: var(--red); } .sev-warn { background: var(--amber-soft); color: var(--amber-fg); border-color: var(--amber); } .sev-forced { background: var(--accent-soft); color: var(--accent-fg); border-color: var(--accent); } /* ---------------- /stats ---------------- */ .stats-page h1 { margin-bottom: 4px; } .subtitle { margin: 0 0 24px; } .kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; } .kpi-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: 10px; padding: 18px; box-shadow: var(--shadow-sm); } .kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); margin-bottom: 8px; } .kpi-num { font-size: 36px; font-weight: 700; color: var(--fg-strong); letter-spacing: -0.02em; line-height: 1; } .kpi-trend { margin-top: 10px; font-size: 11px; } .trend-up { color: var(--red); } .trend-down { color: var(--green); } .trend-flat { color: var(--fg-muted); } /* chart */ .chart-card { margin: 20px 0; } .chart-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); } .chart-title { font-size: 14px; font-weight: 600; color: var(--fg-strong); margin: 0 0 2px; } .chart { display: block; width: 100%; height: 240px; padding: 0; } .chart-line { fill: none; stroke: var(--chart-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .chart-fill { stroke: none; } .chart-point { fill: var(--chart-line); } .chart-grid { stroke: var(--chart-grid); stroke-width: 1; stroke-dasharray: 2 4; } .chart-y-label, .chart-x-label, .chart-empty { font: 10px var(--sans); fill: var(--chart-label); } /* signatures table on stats page */ .sig-card { margin-bottom: 30px; } .empty.muted { padding: 40px; text-align: center; } /* ---------------- crash detail ---------------- */ .back-link { display: inline-flex; align-items: center; color: var(--fg-muted); font-size: 12px; margin-bottom: 18px; } .back-link:hover { color: var(--fg); text-decoration: none; } .crash-head { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "meta actions" "title actions" "crumb actions"; align-items: center; margin-bottom: 22px; gap: 6px 20px; } .crash-head-meta { grid-area: meta; display: inline-flex; align-items: center; gap: 12px; } .crash-id { grid-area: title; font-family: var(--mono); font-size: 30px; font-weight: 700; color: var(--fg-strong); margin: 0; letter-spacing: -0.01em; } .crash-breadcrumb { grid-area: crumb; display: inline-flex; align-items: center; gap: 8px; color: var(--fg-muted); font-size: 13px; } .crash-breadcrumb code { color: var(--fg-muted); font-size: 12px; } .crash-actions { grid-area: actions; display: inline-flex; gap: 8px; } .crash-actions form { display: inline-flex; } .visitor-notice { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin: 0 0 16px; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 8px; color: var(--accent-fg); font-size: 13px; } .vn-icon { color: var(--accent); } .vn-action { margin-left: auto; color: var(--accent); font-weight: 500; } .pruned-notice code { background: rgba(99, 102, 241, 0.12); padding: 1px 6px; border-radius: 3px; color: var(--accent-fg); font-family: var(--mono); font-size: 12px; } .sig-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin: 0 0 18px; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 8px; color: var(--accent-fg); font-size: 13px; text-decoration: none; } .sig-banner.clickable:hover { background: var(--accent); color: white; } .sig-banner.clickable:hover .muted { color: rgba(255,255,255,0.85); } .sig-banner strong { font-weight: 600; } .sb-icon { color: var(--accent); } .sig-banner.clickable:hover .sb-icon { color: white; } .sb-close { margin-left: auto; opacity: 0.6; } /* tabs */ .crash-tabs { display: flex; align-items: center; gap: 4px; margin: 22px 0 18px; border-bottom: 1px solid var(--line); } .crash-tabs .tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 13px; color: var(--fg-muted); font-weight: 500; cursor: pointer; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; } .crash-tabs .tab:hover { color: var(--fg); text-decoration: none; } .crash-tabs .tab.active { color: var(--accent); border-bottom-color: var(--accent); } .tab-count { display: inline-block; min-width: 20px; padding: 1px 7px; background: var(--accent-soft); color: var(--accent-fg); border-radius: 999px; font-size: 11px; font-weight: 600; text-align: center; } .crash-tabs .tab.active .tab-count { background: var(--accent); color: white; } .tab-panel { display: none; } .tab-panel.visible { display: block; } /* metadata card */ .meta-card { margin-bottom: 16px; } .meta-table { width: 100%; border-collapse: collapse; } .meta-table th, .meta-table td { padding: 11px 18px; vertical-align: middle; border-bottom: 1px solid var(--line); font-size: 13px; } .meta-table th { text-align: left; color: var(--fg-muted); font-weight: 400; width: 200px; } .meta-table tr:last-child th, .meta-table tr:last-child td { border-bottom: none; } .meta-value { font-family: var(--mono); font-size: 12px; color: var(--fg); word-break: break-all; } .cmdline-block { background: var(--code-bg); border: none; border-radius: 0; padding: 16px 18px; margin: 0; white-space: pre-wrap; word-break: break-all; color: var(--fg); font-size: 12px; } /* stack trace — code-style list */ .stack-card { padding: 0; } .stack-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--code-bg); } .stack-title { font: 11px/1 var(--mono); color: var(--fg-muted); letter-spacing: 0.05em; } .stack-legend { display: inline-flex; gap: 14px; font-size: 11px; color: var(--fg-muted); } .lg-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .lg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .lg-engine { background: var(--cat-engine); } .lg-extension { background: var(--cat-extension); } .lg-system { background: var(--cat-system); } .lg-unknown { background: var(--cat-unknown); } .stack-list { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: 12px; background: var(--bg-elevated); } .frame { padding: 6px 18px; border-bottom: 1px solid transparent; cursor: pointer; transition: background .1s; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; overflow-x: hidden; } .frame:hover { background: var(--hover-bg); } .frame.selected { background: var(--amber-soft); border-color: var(--amber); } .frame-num { color: var(--fg-faint); width: 32px; flex-shrink: 0; } .frame-mod { font-weight: 500; } .cat-engine .frame-mod { color: var(--cat-engine); } .cat-extension .frame-mod { color: var(--cat-extension); } .cat-system .frame-mod { color: var(--cat-system); } .cat-unknown .frame-mod { color: var(--cat-unknown); } .frame-plus { color: var(--fg-faint); } .frame-off { color: var(--amber); } .frame-arrow { color: var(--fg-faint); } .frame-func { color: var(--accent); font-weight: 500; overflow: hidden; text-overflow: ellipsis; } .frame-comment { color: var(--fg-faint); font-style: italic; margin-left: auto; } /* expand/collapse rows for the stack list */ .stack-list .row-extra { display: none; } .stack-list .collapse-row { display: none; } .stack-list.expanded .row-extra { display: flex; } .stack-list.expanded .expand-row { display: none; } .stack-list.expanded .collapse-row { display: list-item; } .frame-toggle { list-style: none; padding: 12px 18px; text-align: center; background: var(--code-bg); border-top: 1px solid var(--line); color: var(--fg-muted); cursor: pointer; user-select: none; font-family: var(--sans); font-size: 12px; font-weight: 500; } .frame-toggle:hover { background: var(--hover-bg); color: var(--accent); } /* modules table */ .module-table .mod-name-cell { font-family: var(--mono); font-size: 12px; font-weight: 500; } .mod-cat-engine { color: var(--cat-engine); } .mod-cat-extension { color: var(--cat-extension); } .mod-cat-system { color: var(--cat-system); } .mod-cat-unknown { color: var(--cat-unknown); } .sym-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; border: 1px solid transparent; } .sym-loaded { background: var(--green-soft); color: var(--green-fg); border-color: var(--green); } .sym-none { background: var(--code-bg); color: var(--fg-faint); border-color: var(--line); } /* raw view */ .raw-body { background: transparent; border: none; padding: 18px; white-space: pre; color: var(--fg); font-size: 12px; line-height: 1.5; overflow-x: auto; margin: 0; } /* ---------------- error page ---------------- */ .error { max-width: 640px; margin: 80px auto; text-align: center; } .error h1 { font-size: 72px; color: var(--fg-faint); margin: 0; font-weight: 700; } .error .lede { color: var(--fg-muted); margin: 0 0 20px; font-size: 18px; } .error-detail { color: var(--fg); } /* ---------------- responsive ---------------- */ @media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .crash-head { grid-template-columns: 1fr; grid-template-areas: "meta" "title" "crumb" "actions"; } .crash-actions { margin-top: 12px; } } @media (max-width: 720px) { main { padding: 0 16px; } .topbar { padding: 10px 14px; } .hero-stats { gap: 32px; } .hero-stat-num { font-size: 26px; } .hero-title { font-size: 28px; } .kpi-grid { grid-template-columns: 1fr 1fr; } .report-table th:nth-child(4), .report-table td:nth-child(4), .report-table th:nth-child(5), .report-table td:nth-child(5) { display: none; } .meta-table th { width: auto; } .stack-legend { display: none; } } /* ======================================================================== l4d2node cross-property additions: cross-property nav, landing grid, netprops table, binary class browser, function decomp page. ====================================================================== */ .topbar-left { display: inline-flex; align-items: center; gap: 24px; } .property-nav { display: inline-flex; gap: 4px; } .prop-link { padding: 6px 10px; border-radius: 6px; color: var(--fg-muted); font-size: 13px; font-weight: 500; transition: background .12s, color .12s; } .prop-link:hover { background: var(--hover-bg); color: var(--fg); text-decoration: none; } .prop-link.is-active { color: var(--accent-fg); background: var(--accent-soft); } /* ----- landing property grid ----- */ .property-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin: 40px auto 0; max-width: 980px; } .property-card { position: relative; /* anchor for .property-card-link overlay */ display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 18px; background: var(--card-bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); color: var(--fg); transition: border-color .12s, transform .12s, box-shadow .12s; } .property-card:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow-md); } /* Invisible overlay link covering the whole card. Inner links (.inline-link) bump z-index above it so they trump the card's click target. */ .property-card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .property-card .inline-link { position: relative; z-index: 2; color: var(--accent); border-bottom: 1px dotted currentColor; } .property-card .inline-link:hover { color: var(--accent-hover); border-bottom-style: solid; text-decoration: none; } .property-card-head { display: flex; align-items: center; gap: 12px; } .property-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--pi-color, var(--accent)); color: white; border-radius: 8px; font-size: 18px; font-weight: 700; opacity: 0.9; } .property-card-title { font-size: 18px; margin: 0; color: var(--fg-strong); letter-spacing: -0.01em; } .property-card-desc { margin: 0; color: var(--fg-muted); font-size: 13px; line-height: 1.55; } .property-card-cta { margin-top: auto; color: var(--accent); font-size: 12px; font-weight: 500; } .landing-meta { margin: 50px auto 0; max-width: 720px; text-align: center; } .landing-stack-pill { display: inline-block; padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elevated); font-size: 12px; font-weight: 500; color: var(--fg-muted); letter-spacing: 0.01em; } /* ----- generic page-head ----- */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 24px 0 22px; } .page-head h1 { letter-spacing: -0.01em; margin: 0; } .breadcrumb { margin: 0 0 4px; font-size: 12px; color: var(--fg-muted); } .breadcrumb a { color: var(--fg-muted); } .breadcrumb a:hover { color: var(--accent); } /* Search form (used on netprops + binaries) */ .search-form { display: flex; gap: 8px; align-items: stretch; flex-shrink: 0; } .search-input { width: 280px; max-width: 50vw; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-elevated); color: var(--fg); font-family: var(--mono); font-size: 13px; outline: none; transition: border-color .12s; } .search-input:focus { border-color: var(--accent); } /* Generic data-table (netprops + binaries) */ .data-table { width: 100%; border-collapse: collapse; font-size: var(--table-fs); } .data-table th, .data-table td { padding: var(--table-pad-y) var(--table-pad-x); text-align: left; border-bottom: 1px solid var(--line); } .data-table th { font-weight: 500; color: var(--fg-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; background: var(--bg-elevated); } .data-table tbody tr:hover { background: var(--hover-bg); } .data-table tbody tr:last-child td { border-bottom: 0; } .data-table .right { text-align: right; } .data-table-tight th, .data-table-tight td { padding: calc(var(--table-pad-y) - 1px) var(--table-pad-x); } .mono { font-family: var(--mono); } /* Sortable-column header (used on netprops index) */ .np-sortable { cursor: pointer; user-select: none; transition: color .12s, background .12s; } .np-sortable:hover { color: var(--fg); background: var(--hover-bg); } .np-sort-arrow { display: inline-block; width: 10px; font-size: 9px; color: var(--accent); margin-left: 4px; } /* Tag chips for prop flags / search-result kind labels */ .tag { display: inline-block; margin: 0 2px 2px 0; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-fg); font-size: 10px; font-family: var(--mono); letter-spacing: 0.02em; } .tag-soft { background: var(--code-bg); color: var(--fg-muted); } .prop-type { display: inline-block; padding: 1px 7px; border-radius: 4px; background: var(--code-bg); color: var(--fg); font-family: var(--mono); font-size: 11px; } .prop-type-int { background: #6366f126; color: var(--accent-fg); } .prop-type-float { background: #10b98126; color: var(--green-fg); } .prop-type-vec3, .prop-type-vec2 { background: #f59e0b26; color: var(--amber-fg); } .prop-type-str { background: #8b5cf626; color: #6d28d9; } .prop-type-table { background: #ec489926; color: #be185d; } .prop-type-array { background: #06b6d426; color: #0e7490; } [data-theme="dark"] .prop-type-str { color: #c4b5fd; } [data-theme="dark"] .prop-type-table { color: #f9a8d4; } [data-theme="dark"] .prop-type-array { color: #67e8f9; } /* Empty-state shell */ .empty-state { margin: 36px auto; padding: 36px 28px; max-width: 640px; text-align: center; background: var(--card-bg); border: 1px dashed var(--line); border-radius: 12px; } .empty-state h2 { margin: 0 0 8px; } .empty-state p { margin: 0 auto; color: var(--fg-muted); font-size: 13px; max-width: 480px; } /* Card body padding shim */ .card-body { padding: var(--card-pad-y) var(--card-pad-x); } .card-head { padding: var(--card-pad-y) var(--card-pad-x); } /* ----- binaries: catalog grid ----- */ .binary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } .binary-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; background: var(--card-bg); border: 1px solid var(--line); border-radius: 10px; color: var(--fg); transition: border-color .12s, transform .12s; } .binary-card:hover { border-color: var(--accent); transform: translateY(-1px); text-decoration: none; color: var(--fg); } .binary-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .binary-card-name { font-size: 15px; font-family: var(--mono); margin: 0; color: var(--fg-strong); } .binary-card-stats { display: flex; gap: 18px; } .binary-card-stats > div { display: flex; flex-direction: column; gap: 2px; } .binary-card-stats .num { font-size: 18px; font-weight: 600; color: var(--fg-strong); } /* Server / client / both kind tag — sits to the right of the binary name on the catalog card. Same chip is reusable in the binary header. */ .bin-kind { display: inline-block; padding: 2px 9px; border-radius: 999px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid transparent; } .bin-kind-server { background: rgba(16, 185, 129, 0.14); color: var(--green-fg); border-color: rgba(16, 185, 129, 0.35); } .bin-kind-client { background: var(--accent-soft); color: var(--accent-fg); border-color: rgba(99, 102, 241, 0.35); } .bin-kind-both { background: rgba(245, 158, 11, 0.14); color: var(--amber-fg); border-color: rgba(245, 158, 11, 0.35); } [data-theme="dark"] .bin-kind-server { background: rgba(52, 211, 153, 0.14); color: var(--green-fg); } [data-theme="dark"] .bin-kind-client { background: rgba(129, 140, 248, 0.14); color: var(--accent-fg); } [data-theme="dark"] .bin-kind-both { background: rgba(251, 191, 36, 0.16); color: var(--amber-fg); } /* ----- binaries: Ghidra-style shell with symbol-tree sidebar ----- */ /* When the page contains a binary-shell, escape
's 1200-wide centered content area entirely — Ghidra-feel wants the full viewport. */ main:has(.binary-shell) { max-width: none; margin: 0; padding: 0; } /* Density-driven defaults; drag-resize sets --tree-width / --refs-width on to override (persisted in localStorage). Falls back to density default when unset, so density and drag compose: change density → defaults shift unless the user has dragged. */ :root, :root[data-density="comfortable"] { --tree-width-default: 320px; --refs-width-default: 340px; } :root[data-density="compact"] { --tree-width-default: 260px; --refs-width-default: 280px; } :root[data-density="spacious"] { --tree-width-default: 380px; --refs-width-default: 380px; } .binary-shell { display: grid; grid-template-columns: var(--tree-width, var(--tree-width-default)) minmax(0, 1fr); gap: 0; min-height: calc(100vh - 110px); } .binary-shell-3col { grid-template-columns: var(--tree-width, var(--tree-width-default)) minmax(0, 1fr) var(--refs-width, var(--refs-width-default)); } /* Drag handles for column resize. Sit on the boundary between two columns, thin neutral state, accent on hover/drag. Captured by JS to drive --tree-width / --refs-width. */ .col-resize-handle { position: absolute; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 5; background: transparent; } .col-resize-handle::after { content: ''; position: absolute; top: 0; bottom: 0; left: 3px; width: 1px; background: transparent; transition: background .12s, width .12s, left .12s; } .col-resize-handle:hover::after, .col-resize-handle.is-dragging::after { background: var(--accent); width: 2px; left: 2.5px; } .col-resize-handle.handle-tree { right: -3px; } .col-resize-handle.handle-refs { left: -3px; } body.is-resizing, body.is-resizing * { cursor: col-resize !important; user-select: none !important; } .symbol-tree { border-right: 1px solid var(--line); background: var(--bg-elevated); display: flex; flex-direction: column; position: sticky; top: 53px; /* below sticky topbar */ align-self: flex-start; height: calc(100vh - 54px); min-height: 400px; overflow: visible; /* let resize handle stick out of edge */ } .symbol-tree-body { overflow-y: auto; } .symbol-tree-inner { /* unused, removed in favor of body class above */ } .symbol-tree-head { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; } .symbol-tree-binary { font-size: 12px; color: var(--fg-strong); font-weight: 500; letter-spacing: -0.005em; } .symbol-tree-binary:hover { color: var(--accent); text-decoration: none; } .symbol-tree-filter { width: 100%; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--card-bg); color: var(--fg); font-family: var(--mono); font-size: 12px; outline: none; transition: border-color .12s; } .symbol-tree-filter:focus { border-color: var(--accent); } .symbol-tree-body { flex: 1; overflow-y: auto; padding: 6px 0; font-size: var(--tree-fs); } .symbol-tree-body::-webkit-scrollbar { width: 8px; } .symbol-tree-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; } .symbol-tree-body::-webkit-scrollbar-track { background: transparent; } .tree-group { margin: 0; } .tree-group > .tree-summary { display: flex; align-items: center; gap: 6px; padding: var(--tree-pad-y) var(--tree-pad-x); cursor: pointer; user-select: none; list-style: none; color: var(--fg); border-radius: 0; position: relative; } .tree-group > .tree-summary::-webkit-details-marker { display: none; } .tree-group > .tree-summary:hover { background: var(--hover-bg); } .tree-caret { display: inline-block; width: 10px; flex-shrink: 0; color: var(--fg-faint); font-size: 9px; transition: transform .1s ease; } .tree-group[open] > .tree-summary > .tree-caret { transform: rotate(90deg); } .tree-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tree-count { color: var(--fg-faint); font-size: 10px; font-variant-numeric: tabular-nums; flex-shrink: 0; } .tree-group-top > .tree-summary { padding: 5px 12px; font-weight: 600; color: var(--fg-strong); background: transparent; } .tree-group-top > .tree-summary > .tree-label { font-size: 12.5px; } /* indented children */ .tree-children { padding-left: 0; } .tree-children .tree-group > .tree-summary { padding-left: 28px; } .tree-children .tree-children .tree-group > .tree-summary { padding-left: 40px; } .tree-children .tree-children .tree-children .tree-group > .tree-summary { padding-left: 52px; } .tree-children .tree-children .tree-children .tree-children .tree-group > .tree-summary { padding-left: 64px; } .tree-children .tree-children .tree-children .tree-children .tree-children .tree-group > .tree-summary { padding-left: 76px; } .tree-leaves { list-style: none; margin: 0; padding: 0; } .tree-leaves li { padding: 0; } .tree-leaf { display: block; padding: var(--tree-pad-y) var(--tree-pad-x) var(--tree-pad-y) var(--tree-leaf-pad); color: var(--fg); font-size: var(--tree-fs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 2px solid transparent; } .tree-leaf:hover { background: var(--hover-bg); color: var(--accent-fg); text-decoration: none; } .tree-leaf.is-current { background: var(--accent-soft); color: var(--accent-fg); border-left-color: var(--accent); font-weight: 500; } /* deeper-nested leaves */ .tree-children .tree-leaves .tree-leaf { padding-left: 40px; } .tree-children .tree-children .tree-leaves .tree-leaf { padding-left: 52px; } .tree-children .tree-children .tree-children .tree-leaves .tree-leaf { padding-left: 64px; } .tree-children .tree-children .tree-children .tree-children .tree-leaves .tree-leaf { padding-left: 76px; } .tree-children .tree-children .tree-children .tree-children .tree-children .tree-leaves .tree-leaf { padding-left: 88px; } /* ----- binary-main + refs panes ----- */ .binary-main { padding: 24px 28px; min-width: 0; } .binary-refs { border-left: 1px solid var(--line); padding: 24px 18px; background: var(--bg-elevated); display: flex; flex-direction: column; gap: 14px; align-self: flex-start; position: sticky; top: 53px; max-height: calc(100vh - 54px); overflow-y: auto; } /* keep refs container itself relative so its handle anchors */ .binary-refs-wrap { position: relative; } .binary-refs .card { box-shadow: none; } .fn-title { font-size: 16px; line-height: 1.4; word-break: break-all; } .code-block { margin: 0; border-radius: 0; border: 0; padding: var(--code-pad-y) var(--code-pad-x); font-size: var(--code-fs); line-height: var(--code-line); max-height: calc(100vh - 220px); overflow: auto; white-space: pre; } .refs-list { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; } .ref-link { display: flex; gap: 10px; align-items: baseline; padding: 4px 8px; border-radius: 5px; color: var(--fg); font-size: 12px; } .ref-link:hover { background: var(--hover-bg); text-decoration: none; } .ref-link .mono.num { color: var(--fg-muted); flex-shrink: 0; min-width: 76px; } .param-list { margin: 0; padding-left: 20px; } .param-list li { font-size: 12px; line-height: 1.7; } /* ---- gamedata generator card ---- */ .gamedata-body { padding: 12px 14px 14px; } .gamedata-body .gd-row { display: grid; grid-template-columns: 110px minmax(0, 280px) minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px 0; } .gd-row-label { font-size: 12px; color: var(--fg-muted); font-weight: 500; letter-spacing: 0.02em; } .gd-input { padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-elevated); color: var(--fg); font-family: var(--mono); font-size: 13px; outline: none; transition: border-color .12s; } .gd-input:focus { border-color: var(--accent); } .gd-output { margin: 8px 0 0 !important; border-radius: 6px !important; border: 1px solid var(--line) !important; background: var(--code-bg) !important; font-size: 12px; line-height: 1.5; } .gd-output-pawn { font-size: 12px; max-height: 480px; } .gd-section-label { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 0; font-size: 11px; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; } .gd-help summary { cursor: pointer; } .gd-help summary:hover { color: var(--accent); } .gd-help[open] summary { color: var(--fg); } .gd-help ol { padding-left: 22px; margin: 8px 0; } /* Mode tabs (Simple Signature / Advanced DHooks) */ .gd-mode-tabs { display: grid; grid-template-columns: auto auto; column-gap: 6px; align-items: start; margin: 14px 0 6px; } .gd-mode-tab { padding: 6px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-elevated); color: var(--fg-muted); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .gd-mode-tab:hover { background: var(--hover-bg); color: var(--fg); } .gd-mode-tab.is-active { background: var(--accent-soft); color: var(--accent-fg); border-color: var(--accent); } .gd-mode-desc { grid-column: 1 / -1; margin: 6px 0 0; } /* Return-type cheatsheet table inside .gd-help */ .gd-cheat-table { width: 100%; border-collapse: collapse; font-size: 11.5px; margin: 8px 0; } .gd-cheat-table th, .gd-cheat-table td { padding: 5px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } .gd-cheat-table th { font-weight: 500; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-muted); } .gd-cheat-table td code { background: transparent; padding: 0; font-size: 11.5px; white-space: pre-wrap; } .gd-cheat-table tr.is-current { background: var(--accent-soft); } .gd-cheat-table tr.is-current td:first-child code { color: var(--accent-fg); font-weight: 600; } .gd-cheat-h { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-muted); margin: 12px 0 4px; } .gd-cheat-h:first-child { margin-top: 6px; } .gd-cheat-table.mres-table td:nth-child(2) { width: 32px; text-align: right; color: var(--fg-muted); font-variant-numeric: tabular-nums; } .gd-cheat-table.mres-table td:nth-child(3), .gd-cheat-table.mres-table td:nth-child(4) { width: 80px; text-align: center; color: var(--fg-muted); } @media (max-width: 800px) { .gamedata-body .gd-row { grid-template-columns: 1fr; gap: 4px; } } @media (max-width: 1100px) { .binary-shell-3col { grid-template-columns: 240px minmax(0, 1fr); } .binary-refs { display: none; } } @media (max-width: 800px) { .binary-shell, .binary-shell-3col { grid-template-columns: 1fr; margin: 0 -16px; } .symbol-tree { position: static; height: auto; max-height: 320px; border-right: 0; border-bottom: 1px solid var(--line); } } @media (max-width: 720px) { .topbar-left { flex-direction: column; align-items: flex-start; gap: 8px; } .property-nav { font-size: 12px; } .page-head { flex-direction: column; align-items: stretch; gap: 12px; } .search-input { width: 100%; max-width: none; } }