mirror of
https://github.com/elicpeter/nyx.git
synced 2026-06-06 19:35:13 +02:00
9241 lines
192 KiB
CSS
9241 lines
192 KiB
CSS
:root {
|
|
--bg: #f9f8f4;
|
|
--bg-secondary: #f2f0ea;
|
|
--bg-tertiary: #ebe7dc;
|
|
--bg-soft: #f2f0ea;
|
|
--surface: #ffffff;
|
|
--bg-hover: #f2f0ea;
|
|
--text: #0d0c0a;
|
|
--text-secondary: #3c3830;
|
|
--text-tertiary: #6c6660;
|
|
--muted: #6c6660;
|
|
--subtle: #9c9690;
|
|
--border: #e5e1d7;
|
|
--border-light: #ede9df;
|
|
--line: #e5e1d7;
|
|
--line-strong: #cac5b8;
|
|
--accent: #0b3d2a;
|
|
--accent-hover: #0f4e35;
|
|
--accent-light: #ecf3ee;
|
|
--accent-contrast: #ffffff;
|
|
--sev-high: #9d2f25;
|
|
--sev-high-bg: #f8ece9;
|
|
--sev-medium: #8c6310;
|
|
--sev-medium-bg: #f6eedb;
|
|
--sev-low: #1c5c38;
|
|
--sev-low-bg: #ecf3ee;
|
|
--success: #1c5c38;
|
|
--success-bg: #ecf3ee;
|
|
--green: #1c5c38;
|
|
--amber: #8c6310;
|
|
--red: #9d2f25;
|
|
--terminal-bg: #0d0e12;
|
|
--terminal-bar: #181a21;
|
|
--terminal-line: #2a2d37;
|
|
--terminal-text: #f4f2eb;
|
|
--terminal-muted: #9fa3ad;
|
|
--shadow: 0 1px 3px rgba(13, 12, 10, 0.07);
|
|
--shadow-lg: 0 20px 56px rgba(13, 12, 10, 0.13);
|
|
--radius: 8px;
|
|
--radius-sm: 4px;
|
|
--radius-lg: 12px;
|
|
--font-display: 'Playfair Display', Georgia, serif;
|
|
--font:
|
|
ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
|
sans-serif;
|
|
--font-sans: var(--font);
|
|
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
|
|
/* Spacing scale */
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-7: 32px;
|
|
--space-8: 48px;
|
|
|
|
/* Typography scale */
|
|
--text-xs: 0.75rem;
|
|
--text-sm: 0.875rem;
|
|
--text-base: 1rem;
|
|
--text-lg: 1.0625rem;
|
|
--text-xl: 1.375rem;
|
|
--text-2xl: 2rem;
|
|
|
|
/* Font weights */
|
|
--weight-normal: 400;
|
|
--weight-medium: 500;
|
|
--weight-semibold: 600;
|
|
--weight-bold: 700;
|
|
--font-medium: var(--weight-medium);
|
|
--font-semibold: var(--weight-semibold);
|
|
--font-bold: var(--weight-bold);
|
|
|
|
/* Confidence colors */
|
|
--conf-high: #1c5c38;
|
|
--conf-high-bg: #ecf3ee;
|
|
--conf-medium: #8c6310;
|
|
--conf-medium-bg: #f6eedb;
|
|
--conf-low: #6c6660;
|
|
--conf-low-bg: #f2f0ea;
|
|
|
|
/* Shadows (refined scale) */
|
|
--shadow-sm: 0 1px 3px rgba(13, 12, 10, 0.07);
|
|
--shadow-md: 0 4px 14px rgba(13, 12, 10, 0.09);
|
|
--shadow-xl: 0 20px 56px rgba(13, 12, 10, 0.13);
|
|
|
|
/* Transitions */
|
|
--transition-fast: 0.1s ease;
|
|
--transition-base: 0.15s ease;
|
|
|
|
/* Layout */
|
|
--sidebar-width: 200px;
|
|
--header-height: 47px;
|
|
--explorer-header-height: 96px;
|
|
|
|
/* Header frosted-glass bg (overridden per theme) */
|
|
--header-bg: rgba(249, 248, 244, 0.84);
|
|
}
|
|
|
|
/* ── Reset & Base ──────────────────────────────────────────────────── */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
html {
|
|
font-size: 16px;
|
|
}
|
|
body {
|
|
font-family: var(--font);
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.65;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
a {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ── Layout ────────────────────────────────────────────────────────── */
|
|
#app {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
background: var(--bg);
|
|
}
|
|
.sidebar {
|
|
width: var(--sidebar-width);
|
|
background: var(--bg);
|
|
border-right: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 10;
|
|
}
|
|
.main-panel {
|
|
margin-left: var(--sidebar-width);
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
background: var(--bg);
|
|
}
|
|
.sidebar-header {
|
|
padding: 14px 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
gap: var(--space-2);
|
|
}
|
|
.sidebar-logo-img {
|
|
width: 44px;
|
|
height: 44px;
|
|
object-fit: contain;
|
|
flex-shrink: 0;
|
|
}
|
|
.logo {
|
|
font-family: var(--font-display);
|
|
font-size: 1.4rem;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
letter-spacing: 0;
|
|
line-height: 1;
|
|
}
|
|
.version {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-tertiary);
|
|
font-family: var(--font-mono);
|
|
}
|
|
.target-switcher {
|
|
position: relative;
|
|
padding: 0 var(--space-3) var(--space-2);
|
|
}
|
|
.target-trigger,
|
|
.target-option,
|
|
.target-add-button {
|
|
appearance: none;
|
|
border: 0;
|
|
font: inherit;
|
|
cursor: pointer;
|
|
}
|
|
.target-trigger {
|
|
width: 100%;
|
|
min-height: 48px;
|
|
display: grid;
|
|
grid-template-columns: 32px minmax(0, 1fr) 12px;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: 7px 8px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
text-align: left;
|
|
}
|
|
.target-trigger:hover,
|
|
.target-trigger[aria-expanded='true'] {
|
|
border-color: var(--line-strong);
|
|
background: var(--bg-secondary);
|
|
}
|
|
.target-avatar,
|
|
.target-option-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: var(--radius-sm);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--accent-light);
|
|
color: var(--accent);
|
|
font-weight: var(--weight-semibold);
|
|
flex-shrink: 0;
|
|
}
|
|
.target-trigger-copy,
|
|
.target-option-copy {
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
line-height: 1.25;
|
|
}
|
|
.target-name,
|
|
.target-option-name {
|
|
color: var(--text);
|
|
font-size: var(--text-sm);
|
|
font-weight: var(--weight-semibold);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.target-path,
|
|
.target-option-path {
|
|
color: var(--text-tertiary);
|
|
font-size: 0.7rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.target-caret {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-right: 1.5px solid var(--text-tertiary);
|
|
border-bottom: 1.5px solid var(--text-tertiary);
|
|
transform: rotate(45deg) translateY(-2px);
|
|
transition: transform var(--transition-base);
|
|
}
|
|
.target-caret.open {
|
|
transform: rotate(225deg) translateY(-2px);
|
|
}
|
|
.target-menu {
|
|
position: absolute;
|
|
left: var(--space-3);
|
|
right: var(--space-3);
|
|
top: calc(100% - var(--space-1));
|
|
z-index: 30;
|
|
padding: var(--space-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
.target-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
max-height: 220px;
|
|
overflow-y: auto;
|
|
}
|
|
.target-option {
|
|
display: grid;
|
|
grid-template-columns: 28px minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
width: 100%;
|
|
min-height: 42px;
|
|
padding: 5px 6px;
|
|
border-radius: var(--radius-sm);
|
|
background: transparent;
|
|
color: var(--text);
|
|
text-align: left;
|
|
}
|
|
.target-option:hover:not(:disabled) {
|
|
background: var(--bg-secondary);
|
|
}
|
|
.target-option.active {
|
|
background: var(--accent-light);
|
|
}
|
|
.target-option:disabled {
|
|
cursor: default;
|
|
opacity: 0.7;
|
|
}
|
|
.target-option-avatar {
|
|
width: 28px;
|
|
height: 28px;
|
|
font-size: 0.8rem;
|
|
}
|
|
.target-add-form {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 30px;
|
|
gap: var(--space-1);
|
|
margin-top: var(--space-2);
|
|
padding-top: var(--space-2);
|
|
border-top: 1px solid var(--border-light);
|
|
}
|
|
.target-add-form input {
|
|
min-width: 0;
|
|
height: 30px;
|
|
padding: 5px 8px;
|
|
font-size: 0.75rem;
|
|
}
|
|
.target-add-button {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--accent);
|
|
color: var(--accent-contrast);
|
|
font-size: 1rem;
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
.target-add-button:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
}
|
|
.target-error {
|
|
margin-top: var(--space-2);
|
|
color: var(--sev-high);
|
|
font-size: 0.72rem;
|
|
line-height: 1.3;
|
|
}
|
|
.nav-list {
|
|
list-style: none;
|
|
padding: var(--space-3) var(--space-3);
|
|
flex: 1;
|
|
}
|
|
.nav-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: 6px 10px;
|
|
border-radius: var(--radius-sm);
|
|
color: var(--text-secondary);
|
|
font-size: var(--text-sm);
|
|
font-weight: var(--weight-medium);
|
|
transition:
|
|
background var(--transition-base),
|
|
color var(--transition-base);
|
|
}
|
|
.nav-link:hover {
|
|
background: var(--bg-secondary);
|
|
color: var(--text);
|
|
text-decoration: none;
|
|
}
|
|
.nav-link.active {
|
|
background: var(--accent-light);
|
|
color: var(--accent);
|
|
}
|
|
.nav-section-header {
|
|
padding: 16px 10px 4px;
|
|
font-size: 0.7rem;
|
|
font-weight: var(--weight-semibold);
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--text-tertiary);
|
|
}
|
|
.nav-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
.nav-icon svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
.nav-separator {
|
|
height: 1px;
|
|
background: var(--border);
|
|
margin: var(--space-2) var(--space-3);
|
|
}
|
|
.content {
|
|
flex: 1;
|
|
padding: 34px 42px 56px;
|
|
max-width: 1280px;
|
|
width: 100%;
|
|
}
|
|
|
|
/* ── Sidebar Footer & Meta ─────────────────────────────────────────── */
|
|
.sidebar-footer {
|
|
border-top: 1px solid var(--border);
|
|
padding: var(--space-1) var(--space-3);
|
|
}
|
|
.sidebar-footer .nav-list {
|
|
padding: 0;
|
|
}
|
|
.sidebar-meta {
|
|
padding: var(--space-3) var(--space-4);
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
.sidebar-meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-size: var(--text-xs);
|
|
color: var(--text-tertiary);
|
|
margin-bottom: var(--space-1);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.sidebar-meta-item svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
flex-shrink: 0;
|
|
}
|
|
.scan-indicator {
|
|
display: none;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-size: var(--text-xs);
|
|
color: var(--sev-medium);
|
|
margin-top: var(--space-1);
|
|
}
|
|
.scan-indicator.visible {
|
|
display: flex;
|
|
}
|
|
|
|
/* ── Header Bar ────────────────────────────────────────────────────── */
|
|
.header-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: var(--header-height);
|
|
padding: 0 42px;
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--header-bg);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 5;
|
|
backdrop-filter: blur(14px);
|
|
-webkit-backdrop-filter: blur(14px);
|
|
}
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
min-width: 0;
|
|
}
|
|
.header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
flex-shrink: 0;
|
|
}
|
|
.header-right .btn {
|
|
height: 26px;
|
|
padding: 0 10px;
|
|
font-size: 0.8rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* ── Breadcrumbs ───────────────────────────────────────────────────── */
|
|
.breadcrumbs {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
font-size: var(--text-xs);
|
|
min-width: 0;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
.breadcrumb-link {
|
|
color: var(--text-tertiary);
|
|
white-space: nowrap;
|
|
}
|
|
.breadcrumb-link:hover {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
.breadcrumb-sep {
|
|
color: var(--text-tertiary);
|
|
font-size: var(--text-xs);
|
|
user-select: none;
|
|
margin: 0 var(--space-2);
|
|
}
|
|
.breadcrumb-current {
|
|
color: var(--text);
|
|
font-weight: var(--weight-semibold);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.header-search-input {
|
|
width: 200px;
|
|
padding: 6px 10px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg-secondary);
|
|
color: var(--text-tertiary);
|
|
font-family: var(--font);
|
|
font-size: var(--text-sm);
|
|
}
|
|
.header-search-input:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* ── Layout Primitives ─────────────────────────────────────────────── */
|
|
.split-pane {
|
|
display: flex;
|
|
height: 100%;
|
|
}
|
|
.pane {
|
|
flex: 1;
|
|
overflow: auto;
|
|
}
|
|
.pane-resizer {
|
|
width: 4px;
|
|
background: var(--border);
|
|
cursor: col-resize;
|
|
flex-shrink: 0;
|
|
}
|
|
.pane-resizer:hover {
|
|
background: var(--accent);
|
|
}
|
|
|
|
/* ── Tabs Base ─────────────────────────────────────────────────────── */
|
|
.tabs {
|
|
display: flex;
|
|
gap: 0;
|
|
border-bottom: 1px solid var(--border);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
.tab {
|
|
padding: var(--space-2) var(--space-4);
|
|
font-size: var(--text-sm);
|
|
font-weight: var(--weight-medium);
|
|
color: var(--text-secondary);
|
|
border-bottom: 2px solid transparent;
|
|
cursor: pointer;
|
|
transition:
|
|
color var(--transition-base),
|
|
border-color var(--transition-base);
|
|
background: none;
|
|
border-top: none;
|
|
border-left: none;
|
|
border-right: none;
|
|
font-family: var(--font);
|
|
}
|
|
.tab:hover {
|
|
color: var(--text);
|
|
}
|
|
.tab.active {
|
|
color: var(--accent);
|
|
border-bottom-color: var(--accent);
|
|
}
|
|
|
|
/* ── Cards ─────────────────────────────────────────────────────────── */
|
|
.card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 20px;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
.card-header {
|
|
font-weight: 600;
|
|
font-size: 0.72rem;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
margin-bottom: 8px;
|
|
}
|
|
.card-value {
|
|
font-size: 2.25rem;
|
|
font-weight: 700;
|
|
font-family: var(--font-display);
|
|
}
|
|
.card-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
/* ── Badges ────────────────────────────────────────────────────────── */
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 2px 7px;
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid currentColor;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
line-height: 1.4;
|
|
}
|
|
.badge-high {
|
|
background: var(--sev-high-bg);
|
|
color: var(--sev-high);
|
|
}
|
|
.badge-medium {
|
|
background: var(--sev-medium-bg);
|
|
color: var(--sev-medium);
|
|
}
|
|
.badge-low {
|
|
background: var(--sev-low-bg);
|
|
color: var(--sev-low);
|
|
}
|
|
.badge-success {
|
|
background: var(--success-bg);
|
|
color: var(--success);
|
|
}
|
|
|
|
/* ── Tables ────────────────────────────────────────────────────────── */
|
|
.table-wrap {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
th {
|
|
text-align: left;
|
|
padding: 11px 16px;
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
td {
|
|
padding: 11px 16px;
|
|
border-bottom: 1px solid var(--border-light);
|
|
font-size: 0.9rem;
|
|
}
|
|
tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
tr:hover td {
|
|
background: var(--bg-secondary);
|
|
}
|
|
.clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ── Buttons ───────────────────────────────────────────────────────── */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 16px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
border: 1px solid var(--border);
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
transition:
|
|
background var(--transition-base),
|
|
border-color var(--transition-base);
|
|
}
|
|
.btn:hover {
|
|
background: var(--bg-secondary);
|
|
border-color: var(--line-strong);
|
|
}
|
|
.btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
.btn:disabled:hover {
|
|
background: var(--bg);
|
|
border-color: var(--border);
|
|
}
|
|
.btn-primary {
|
|
background: var(--accent);
|
|
color: var(--accent-contrast);
|
|
border-color: var(--accent);
|
|
}
|
|
.btn-primary:hover {
|
|
background: var(--accent-hover);
|
|
border-color: var(--accent-hover);
|
|
}
|
|
.btn-primary:disabled:hover {
|
|
opacity: 0.5;
|
|
background: var(--accent);
|
|
}
|
|
.btn-danger {
|
|
color: var(--sev-high);
|
|
border-color: var(--sev-high);
|
|
}
|
|
.btn-sm {
|
|
padding: 4px 10px;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* ── Forms ─────────────────────────────────────────────────────────── */
|
|
.form-group {
|
|
margin-bottom: 16px;
|
|
}
|
|
.form-group label {
|
|
display: block;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 4px;
|
|
}
|
|
input,
|
|
select {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
font-family: var(--font);
|
|
font-size: 0.9rem;
|
|
}
|
|
input:focus,
|
|
select:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 2px var(--accent-light);
|
|
}
|
|
input.input-error,
|
|
select.input-error {
|
|
border-color: var(--sev-high);
|
|
box-shadow: 0 0 0 2px var(--sev-high-bg);
|
|
}
|
|
.search-input {
|
|
max-width: 320px;
|
|
}
|
|
|
|
/* ── Filter Bar ────────────────────────────────────────────────────── */
|
|
.filter-bar {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.filter-bar select,
|
|
.filter-bar input {
|
|
width: auto;
|
|
min-width: 140px;
|
|
}
|
|
|
|
/* ── Code Context ──────────────────────────────────────────────────── */
|
|
.code-block {
|
|
background: var(--terminal-bg);
|
|
border: 1px solid var(--terminal-line);
|
|
border-radius: var(--radius);
|
|
overflow-x: auto;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.82rem;
|
|
line-height: 1.6;
|
|
color: var(--terminal-text);
|
|
}
|
|
.code-line {
|
|
display: flex;
|
|
padding: 0 16px;
|
|
}
|
|
.code-line.highlight {
|
|
background: rgba(140, 99, 16, 0.26);
|
|
}
|
|
.line-number {
|
|
color: var(--terminal-muted);
|
|
min-width: 40px;
|
|
text-align: right;
|
|
padding-right: 16px;
|
|
user-select: none;
|
|
}
|
|
.line-content {
|
|
white-space: pre;
|
|
}
|
|
|
|
/* ── Finding Detail ────────────────────────────────────────────────── */
|
|
.detail-header {
|
|
margin-bottom: 24px;
|
|
}
|
|
.detail-header h2 {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
font-family: var(--font-display);
|
|
}
|
|
.detail-meta {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
color: var(--text-secondary);
|
|
font-size: 0.85rem;
|
|
}
|
|
.detail-section {
|
|
margin-bottom: 24px;
|
|
}
|
|
.detail-section h3 {
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.label-list {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.label-item {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
padding: 4px 10px;
|
|
font-size: 0.82rem;
|
|
}
|
|
.label-key {
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
}
|
|
.label-value {
|
|
color: var(--text);
|
|
}
|
|
|
|
/* ── Page Header ───────────────────────────────────────────────────── */
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
gap: var(--space-4);
|
|
}
|
|
.page-header h2 {
|
|
font-family: var(--font-display);
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
/* (Pagination styles moved to Enhanced Pagination section below) */
|
|
|
|
/* ── Empty/Loading/Error States ────────────────────────────────────── */
|
|
.loading,
|
|
.empty-state,
|
|
.error-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 60px 20px;
|
|
color: var(--text-tertiary);
|
|
text-align: center;
|
|
}
|
|
.empty-state h3 {
|
|
font-size: 1.1rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 8px;
|
|
}
|
|
.error-state {
|
|
color: var(--sev-high);
|
|
}
|
|
|
|
/* ── Status Indicator ──────────────────────────────────────────────── */
|
|
.status-dot {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
margin-right: 6px;
|
|
}
|
|
.status-dot.running {
|
|
background: var(--sev-medium);
|
|
animation: pulse 1.5s infinite;
|
|
}
|
|
.status-dot.completed {
|
|
background: var(--success);
|
|
}
|
|
.status-dot.failed {
|
|
background: var(--sev-high);
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
/* ── Sortable Headers ──────────────────────────────────────────────── */
|
|
th.sortable {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: color var(--transition-base);
|
|
}
|
|
th.sortable:hover {
|
|
color: var(--accent);
|
|
}
|
|
th.sortable.active {
|
|
color: var(--accent);
|
|
}
|
|
th.sortable .sort-arrow {
|
|
margin-left: 4px;
|
|
font-size: var(--text-xs);
|
|
}
|
|
|
|
/* ── Alternating Rows ─────────────────────────────────────────────── */
|
|
tbody tr:nth-child(even) td {
|
|
background: var(--bg-secondary);
|
|
}
|
|
tbody tr:hover td {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
/* ── Checkbox Column ──────────────────────────────────────────────── */
|
|
.col-checkbox {
|
|
width: 40px;
|
|
text-align: center;
|
|
}
|
|
.col-checkbox input[type='checkbox'] {
|
|
width: auto;
|
|
min-width: auto;
|
|
cursor: pointer;
|
|
}
|
|
tr.selected td {
|
|
background: var(--accent-light);
|
|
}
|
|
|
|
/* ── Confidence Badges ────────────────────────────────────────────── */
|
|
.badge-conf-high {
|
|
background: var(--conf-high-bg);
|
|
color: var(--conf-high);
|
|
}
|
|
.badge-conf-medium {
|
|
background: var(--conf-medium-bg);
|
|
color: var(--conf-medium);
|
|
}
|
|
.badge-conf-low {
|
|
background: var(--conf-low-bg);
|
|
color: var(--conf-low);
|
|
}
|
|
|
|
/* ── Status Badges ────────────────────────────────────────────────── */
|
|
.badge-status-open {
|
|
background: var(--sev-high-bg);
|
|
color: var(--sev-high);
|
|
}
|
|
.badge-status-validated {
|
|
background: var(--conf-high-bg);
|
|
color: var(--conf-high);
|
|
}
|
|
.badge-status-suppressed {
|
|
background: var(--conf-low-bg);
|
|
color: var(--conf-low);
|
|
}
|
|
|
|
/* ── Triage State Badges ─────────────────────────────────────────── */
|
|
.badge-triage-open {
|
|
background: var(--sev-high-bg);
|
|
color: var(--sev-high);
|
|
}
|
|
.badge-triage-investigating {
|
|
background: var(--sev-medium-bg);
|
|
color: var(--sev-medium);
|
|
}
|
|
.badge-triage-false_positive {
|
|
background: var(--bg-secondary);
|
|
color: var(--muted);
|
|
}
|
|
.badge-triage-accepted_risk {
|
|
background: var(--sev-medium-bg);
|
|
color: var(--sev-medium);
|
|
}
|
|
.badge-triage-suppressed {
|
|
background: var(--conf-low-bg);
|
|
color: var(--conf-low);
|
|
}
|
|
.badge-triage-fixed {
|
|
background: var(--success-bg);
|
|
color: var(--success);
|
|
}
|
|
|
|
/* ── Triage Actions Panel (Finding Detail) ───────────────────────── */
|
|
.triage-actions {
|
|
margin: var(--space-4) 0;
|
|
padding: var(--space-4);
|
|
background: var(--bg-secondary);
|
|
border-radius: var(--radius);
|
|
border: 1px solid var(--border);
|
|
}
|
|
.triage-current-note {
|
|
margin-bottom: var(--space-3);
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
.triage-buttons {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
flex-wrap: wrap;
|
|
}
|
|
.btn-triage {
|
|
text-transform: capitalize;
|
|
font-size: var(--text-xs);
|
|
}
|
|
.btn-triage-investigating {
|
|
border-color: var(--sev-medium);
|
|
color: var(--sev-medium);
|
|
}
|
|
.btn-triage-false_positive {
|
|
border-color: var(--line-strong);
|
|
color: var(--muted);
|
|
}
|
|
.btn-triage-accepted_risk {
|
|
border-color: var(--sev-medium);
|
|
color: var(--sev-medium);
|
|
}
|
|
.btn-triage-suppressed {
|
|
border-color: var(--conf-low);
|
|
color: var(--conf-low);
|
|
}
|
|
.btn-triage-fixed {
|
|
border-color: var(--success);
|
|
color: var(--success);
|
|
}
|
|
.btn-triage-open {
|
|
border-color: var(--sev-high);
|
|
color: var(--sev-high);
|
|
}
|
|
.triage-note-input {
|
|
margin-top: var(--space-3);
|
|
}
|
|
.triage-note-input textarea {
|
|
width: 100%;
|
|
padding: var(--space-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
font-family: inherit;
|
|
font-size: var(--text-sm);
|
|
resize: vertical;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
.triage-note-input textarea:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 2px var(--accent-light);
|
|
}
|
|
.triage-note-actions {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
margin-top: var(--space-2);
|
|
}
|
|
|
|
/* ── Triage Page ─────────────────────────────────────────────────── */
|
|
.triage-page {
|
|
max-width: 1400px;
|
|
}
|
|
|
|
/* Hero / summary */
|
|
.triage-hero {
|
|
margin-bottom: var(--space-5);
|
|
padding-bottom: var(--space-4);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.triage-hero-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-4);
|
|
margin-bottom: 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
.triage-hero-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
color: var(--text);
|
|
letter-spacing: 0;
|
|
margin: 0;
|
|
}
|
|
.triage-hero-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
font-size: var(--text-sm);
|
|
cursor: pointer;
|
|
padding: 4px 6px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.triage-hero-toggle:hover {
|
|
color: var(--text);
|
|
background: var(--bg-secondary);
|
|
}
|
|
.triage-caret {
|
|
display: inline-block;
|
|
font-size: 0.7rem;
|
|
line-height: 1;
|
|
transition: transform 120ms ease-out;
|
|
}
|
|
.triage-caret.open {
|
|
transform: rotate(-180deg);
|
|
}
|
|
|
|
.triage-hero-severity {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-5);
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
.triage-sev-stat {
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 6px;
|
|
}
|
|
.triage-sev-dot {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
align-self: center;
|
|
}
|
|
.triage-sev-high .triage-sev-dot {
|
|
background: var(--sev-high);
|
|
}
|
|
.triage-sev-medium .triage-sev-dot {
|
|
background: var(--sev-medium);
|
|
}
|
|
.triage-sev-low .triage-sev-dot {
|
|
background: var(--sev-low);
|
|
}
|
|
.triage-sev-count {
|
|
font-size: var(--text-base);
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.triage-sev-name {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
font-size: var(--text-xs);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.triage-state-row {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
margin-top: var(--space-4);
|
|
flex-wrap: wrap;
|
|
}
|
|
.triage-state-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 10px;
|
|
border: 1px solid var(--border);
|
|
background: var(--bg);
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
font-size: var(--text-xs);
|
|
color: var(--text-secondary);
|
|
transition:
|
|
border-color var(--transition-base),
|
|
background var(--transition-base);
|
|
}
|
|
.triage-state-chip:hover {
|
|
border-color: var(--text-tertiary);
|
|
color: var(--text);
|
|
}
|
|
.triage-state-chip.active {
|
|
background: var(--accent-light);
|
|
color: var(--accent);
|
|
border-color: var(--accent);
|
|
}
|
|
.triage-state-chip.muted {
|
|
opacity: 0.55;
|
|
}
|
|
.triage-state-chip .triage-state-count {
|
|
font-weight: 600;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--text);
|
|
}
|
|
.triage-state-chip.active .triage-state-count {
|
|
color: var(--accent);
|
|
}
|
|
.triage-state-chip .triage-state-label {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
/* Tabs */
|
|
.triage-tabs-row {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid var(--border);
|
|
margin-bottom: var(--space-4);
|
|
gap: var(--space-4);
|
|
flex-wrap: wrap;
|
|
}
|
|
.triage-tabs {
|
|
display: flex;
|
|
gap: var(--space-1);
|
|
padding-bottom: 0;
|
|
}
|
|
.triage-tab {
|
|
padding: var(--space-2) var(--space-4);
|
|
background: none;
|
|
border: none;
|
|
border-bottom: 2px solid transparent;
|
|
margin-bottom: -1px;
|
|
cursor: pointer;
|
|
font-size: var(--text-sm);
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
transition:
|
|
color 0.15s,
|
|
border-color 0.15s;
|
|
}
|
|
.triage-tab:hover {
|
|
color: var(--text);
|
|
}
|
|
.triage-tab.active {
|
|
color: var(--text);
|
|
border-bottom-color: var(--accent);
|
|
}
|
|
.triage-tab.empty {
|
|
color: var(--text-tertiary);
|
|
}
|
|
.triage-tab.empty:hover {
|
|
color: var(--text-secondary);
|
|
}
|
|
.triage-tab-count {
|
|
font-size: var(--text-xs);
|
|
padding: 1px 6px;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-secondary);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.triage-tab.active .triage-tab-count {
|
|
background: var(--accent-light);
|
|
color: var(--accent);
|
|
}
|
|
|
|
/* Controls row */
|
|
.triage-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
margin-bottom: var(--space-3);
|
|
flex-wrap: wrap;
|
|
}
|
|
.triage-control-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.triage-control-btn strong {
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
.triage-search {
|
|
flex: 1;
|
|
min-width: 200px;
|
|
max-width: 360px;
|
|
padding: 6px 10px;
|
|
font-size: var(--text-sm);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
.triage-search:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 2px var(--accent-light);
|
|
}
|
|
.triage-result-count {
|
|
margin-left: auto;
|
|
font-size: var(--text-xs);
|
|
color: var(--text-secondary);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Rule filter chips */
|
|
.triage-rule-filter {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
margin-bottom: var(--space-3);
|
|
flex-wrap: wrap;
|
|
font-size: var(--text-sm);
|
|
}
|
|
.triage-rule-filter-label {
|
|
color: var(--text-secondary);
|
|
font-weight: 500;
|
|
}
|
|
.rule-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 3px 10px;
|
|
border: 1px solid var(--border);
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
font-size: var(--text-xs);
|
|
font-family: var(--font-mono);
|
|
transition:
|
|
border-color var(--transition-base),
|
|
background var(--transition-base);
|
|
}
|
|
.rule-chip:hover {
|
|
border-color: var(--text-tertiary);
|
|
background: var(--bg-secondary);
|
|
}
|
|
.rule-chip.active {
|
|
background: var(--accent-light);
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
.rule-chip-count {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-secondary);
|
|
padding: 0 6px;
|
|
border-radius: var(--radius-sm);
|
|
font-family: var(--font);
|
|
font-weight: 600;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.rule-chip.active .rule-chip-count {
|
|
background: var(--bg);
|
|
color: var(--accent);
|
|
}
|
|
.rule-chip-x {
|
|
font-size: 0.9rem;
|
|
line-height: 1;
|
|
opacity: 0.8;
|
|
}
|
|
.triage-rule-more,
|
|
.triage-rule-clear {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
font-size: var(--text-xs);
|
|
cursor: pointer;
|
|
padding: 3px 8px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.triage-rule-more:hover,
|
|
.triage-rule-clear:hover {
|
|
color: var(--text);
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
/* Sticky bulk bar for triage */
|
|
.triage-bulk-bar {
|
|
position: sticky;
|
|
top: var(--header-height);
|
|
z-index: 4;
|
|
}
|
|
|
|
/* Finding list */
|
|
.finding-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
}
|
|
.finding-list-more {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-3);
|
|
padding: var(--space-4) 0;
|
|
color: var(--text-secondary);
|
|
font-size: var(--text-xs);
|
|
}
|
|
.finding-list-more-count {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Group */
|
|
.finding-group {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
background: var(--bg);
|
|
overflow: hidden;
|
|
}
|
|
.finding-group-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: var(--space-2) var(--space-3);
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border);
|
|
font-size: var(--text-sm);
|
|
}
|
|
.finding-group-header.collapsed {
|
|
border-bottom: none;
|
|
}
|
|
.finding-group-check {
|
|
width: auto;
|
|
min-width: auto;
|
|
cursor: pointer;
|
|
}
|
|
.finding-group-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 2px 4px;
|
|
color: var(--text);
|
|
font-size: var(--text-sm);
|
|
font-weight: 500;
|
|
}
|
|
.finding-group-toggle:hover {
|
|
color: var(--accent);
|
|
}
|
|
.finding-group-label {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-sm);
|
|
color: var(--text);
|
|
}
|
|
.finding-group-count {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-secondary);
|
|
padding: 1px 8px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: var(--text-xs);
|
|
font-weight: 600;
|
|
font-variant-numeric: tabular-nums;
|
|
font-family: var(--font);
|
|
}
|
|
.finding-group-sev {
|
|
margin-left: auto;
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
}
|
|
.finding-group-sev-pill {
|
|
font-size: var(--text-xs);
|
|
font-weight: 500;
|
|
padding: 1px 8px;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
color: var(--text-secondary);
|
|
}
|
|
.finding-group-sev-pill.sev-high {
|
|
color: var(--sev-high);
|
|
border-color: var(--sev-high-bg);
|
|
background: var(--sev-high-bg);
|
|
}
|
|
.finding-group-sev-pill.sev-medium {
|
|
color: var(--sev-medium);
|
|
border-color: var(--sev-medium-bg);
|
|
background: var(--sev-medium-bg);
|
|
}
|
|
.finding-group-sev-pill.sev-low {
|
|
color: var(--sev-low);
|
|
border-color: var(--sev-low-bg);
|
|
background: var(--sev-low-bg);
|
|
}
|
|
.finding-group-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Finding row */
|
|
.finding-row {
|
|
border-bottom: 1px solid var(--border-light);
|
|
background: var(--bg);
|
|
transition: background var(--transition-base);
|
|
}
|
|
.finding-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.finding-row.selected {
|
|
background: var(--accent-light);
|
|
}
|
|
.finding-row:hover:not(.selected) {
|
|
background: var(--bg-secondary);
|
|
}
|
|
.finding-row-main {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: var(--space-3) var(--space-4);
|
|
cursor: pointer;
|
|
}
|
|
.finding-row-check {
|
|
width: auto;
|
|
min-width: auto;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
}
|
|
.finding-row-sev {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 3px 10px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
min-width: 60px;
|
|
flex-shrink: 0;
|
|
}
|
|
.finding-row-sev.sev-high {
|
|
background: var(--sev-high-bg);
|
|
color: var(--sev-high);
|
|
}
|
|
.finding-row-sev.sev-medium {
|
|
background: var(--sev-medium-bg);
|
|
color: var(--sev-medium);
|
|
}
|
|
.finding-row-sev.sev-low {
|
|
background: var(--sev-low-bg);
|
|
color: var(--sev-low);
|
|
}
|
|
.finding-row-body {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
.finding-row-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
min-width: 0;
|
|
}
|
|
.finding-row-rule {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-sm);
|
|
color: var(--text);
|
|
font-weight: 500;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.finding-row-state {
|
|
text-transform: uppercase;
|
|
font-size: 0.65rem;
|
|
letter-spacing: 0.05em;
|
|
padding: 1px 6px;
|
|
border-radius: var(--radius-sm);
|
|
flex-shrink: 0;
|
|
}
|
|
.finding-row-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
font-size: var(--text-xs);
|
|
color: var(--text-tertiary);
|
|
min-width: 0;
|
|
}
|
|
.finding-row-path {
|
|
font-family: var(--font-mono);
|
|
color: var(--text-secondary);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.finding-row-line {
|
|
color: var(--text-tertiary);
|
|
}
|
|
.finding-row-conf {
|
|
text-transform: uppercase;
|
|
font-size: 0.65rem;
|
|
letter-spacing: 0.04em;
|
|
color: var(--text-tertiary);
|
|
}
|
|
.finding-row-conf.conf-medium {
|
|
color: var(--conf-medium);
|
|
}
|
|
.finding-row-conf.conf-low {
|
|
color: var(--conf-low);
|
|
}
|
|
.finding-row-lang {
|
|
text-transform: uppercase;
|
|
font-size: 0.65rem;
|
|
letter-spacing: 0.04em;
|
|
color: var(--text-tertiary);
|
|
}
|
|
.finding-row-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
flex-shrink: 0;
|
|
}
|
|
.finding-row-investigate {
|
|
padding: 4px 12px;
|
|
}
|
|
.finding-row-kebab {
|
|
padding: 2px 8px;
|
|
font-size: 1rem;
|
|
line-height: 1;
|
|
color: var(--text-secondary);
|
|
background: transparent;
|
|
border-color: transparent;
|
|
}
|
|
.finding-row-kebab:hover {
|
|
background: var(--bg-secondary);
|
|
border-color: var(--border);
|
|
}
|
|
.finding-row-chevron {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-tertiary);
|
|
cursor: pointer;
|
|
padding: 4px 6px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.finding-row-chevron:hover {
|
|
background: var(--bg-secondary);
|
|
color: var(--text);
|
|
}
|
|
.chev {
|
|
display: inline-block;
|
|
font-size: 0.75rem;
|
|
line-height: 1;
|
|
transition: transform 120ms ease-out;
|
|
}
|
|
.chev.open {
|
|
transform: rotate(-180deg);
|
|
}
|
|
|
|
/* Row details */
|
|
.finding-row-details {
|
|
padding: var(--space-3) var(--space-4) var(--space-4) 96px;
|
|
background: var(--bg-secondary);
|
|
border-top: 1px solid var(--border-light);
|
|
}
|
|
.finding-row-details-grid {
|
|
display: grid;
|
|
grid-template-columns: 90px 1fr;
|
|
gap: var(--space-3) var(--space-4);
|
|
align-items: baseline;
|
|
}
|
|
.finding-row-details-item {
|
|
display: contents;
|
|
}
|
|
.finding-row-details-label {
|
|
text-transform: uppercase;
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-tertiary);
|
|
font-weight: 600;
|
|
padding-top: 2px;
|
|
}
|
|
.finding-row-details-path {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xs);
|
|
color: var(--text);
|
|
word-break: break-all;
|
|
}
|
|
.finding-row-details-text {
|
|
font-size: var(--text-sm);
|
|
color: var(--text);
|
|
line-height: 1.5;
|
|
}
|
|
.finding-row-details-labels {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.finding-row-details-actions {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
/* Misc retained */
|
|
.triage-audit-table td {
|
|
vertical-align: middle;
|
|
}
|
|
.triage-arrow {
|
|
color: var(--text-secondary);
|
|
margin: 0 2px;
|
|
}
|
|
.triage-sync-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding-bottom: var(--space-2);
|
|
font-size: var(--text-xs);
|
|
}
|
|
.triage-sync-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: var(--text-secondary);
|
|
}
|
|
.triage-sync-text {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.triage-sync-dot {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
}
|
|
.triage-sync-dot.synced {
|
|
background: var(--success);
|
|
}
|
|
.triage-sync-dot.unsynced {
|
|
background: var(--text-tertiary);
|
|
}
|
|
|
|
/* ── Suppress by Pattern Modal ───────────────────────────────────── */
|
|
.suppress-modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 2000;
|
|
}
|
|
.suppress-modal {
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-6);
|
|
min-width: 400px;
|
|
max-width: 600px;
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
.suppress-modal h3 {
|
|
margin: 0 0 var(--space-4) 0;
|
|
}
|
|
.suppress-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
.suppress-opt {
|
|
text-align: left;
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
/* ── Bulk Action Bar ──────────────────────────────────────────────── */
|
|
.bulk-action-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: var(--space-2) var(--space-4);
|
|
background: var(--accent-light);
|
|
border: 1px solid var(--accent);
|
|
border-radius: var(--radius);
|
|
margin-bottom: var(--space-3);
|
|
font-size: var(--text-sm);
|
|
color: var(--accent);
|
|
font-weight: var(--weight-medium);
|
|
opacity: 0;
|
|
transform: translateY(-4px);
|
|
max-height: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
margin-bottom: 0;
|
|
border-width: 0;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
transition:
|
|
opacity 120ms ease-out,
|
|
transform 120ms ease-out,
|
|
max-height 160ms ease-out,
|
|
padding 160ms ease-out,
|
|
margin-bottom 160ms ease-out,
|
|
border-width 160ms ease-out;
|
|
}
|
|
.bulk-action-bar.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
max-height: 80px;
|
|
padding-top: var(--space-2);
|
|
padding-bottom: var(--space-2);
|
|
margin-bottom: var(--space-3);
|
|
border-width: 1px;
|
|
pointer-events: auto;
|
|
overflow: visible;
|
|
}
|
|
.bulk-action-bar .bulk-count {
|
|
flex: 1;
|
|
}
|
|
.bulk-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
.bulk-menu-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
.bulk-menu-btn--warning {
|
|
color: var(--sev-high);
|
|
border-color: var(--sev-high);
|
|
}
|
|
.bulk-menu-btn--warning:hover:not(:disabled) {
|
|
background: color-mix(in srgb, var(--sev-high) 8%, transparent);
|
|
border-color: var(--sev-high);
|
|
}
|
|
.bulk-caret {
|
|
display: inline-block;
|
|
font-size: 0.7rem;
|
|
line-height: 1;
|
|
transition: transform 120ms ease-out;
|
|
}
|
|
.bulk-caret--open {
|
|
transform: rotate(-180deg);
|
|
}
|
|
.bulk-divider {
|
|
width: 1px;
|
|
align-self: stretch;
|
|
margin: 0 var(--space-1);
|
|
background: color-mix(in srgb, var(--accent) 30%, transparent);
|
|
}
|
|
.bulk-copy-btn {
|
|
color: var(--text-secondary);
|
|
border-color: transparent;
|
|
background: transparent;
|
|
}
|
|
.bulk-copy-btn:hover:not(:disabled) {
|
|
color: var(--text);
|
|
background: var(--bg-secondary);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
/* ── Dropdown ─────────────────────────────────────────────────────── */
|
|
.dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
.dropdown-trigger {
|
|
display: inline-block;
|
|
}
|
|
.dropdown-menu {
|
|
position: absolute;
|
|
top: calc(100% + 4px);
|
|
min-width: 220px;
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
box-shadow: var(--shadow-lg);
|
|
padding: 4px;
|
|
z-index: 1000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.dropdown-menu--left {
|
|
left: 0;
|
|
}
|
|
.dropdown-menu--right {
|
|
right: 0;
|
|
}
|
|
.dropdown-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
width: 100%;
|
|
padding: 6px 10px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text);
|
|
font-size: var(--text-sm);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
border-radius: var(--radius-sm);
|
|
font-weight: 400;
|
|
}
|
|
.dropdown-item:hover {
|
|
background: var(--bg-secondary);
|
|
}
|
|
.dropdown-item--warning {
|
|
color: var(--sev-high);
|
|
}
|
|
.dropdown-item--warning:hover {
|
|
background: color-mix(in srgb, var(--sev-high) 8%, transparent);
|
|
}
|
|
.dropdown-item-check {
|
|
width: 14px;
|
|
flex-shrink: 0;
|
|
color: var(--accent);
|
|
font-size: 0.85rem;
|
|
text-align: center;
|
|
}
|
|
.dropdown-item-label {
|
|
flex: 1;
|
|
}
|
|
.dropdown-item-hint {
|
|
color: var(--text-tertiary);
|
|
font-size: var(--text-xs);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ── Copy button ────────────────────────────────────────────────── */
|
|
.copy-btn--copied {
|
|
background: var(--success);
|
|
color: var(--bg);
|
|
border-color: var(--success);
|
|
}
|
|
.copy-btn--failed {
|
|
background: var(--sev-high);
|
|
color: var(--bg);
|
|
border-color: var(--sev-high);
|
|
}
|
|
|
|
/* Icon-only variant */
|
|
.copy-btn--icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 4px 6px;
|
|
line-height: 1;
|
|
}
|
|
.copy-btn--icon svg {
|
|
display: block;
|
|
}
|
|
.copy-btn--icon:hover:not(:disabled) {
|
|
background: transparent;
|
|
border-color: var(--border);
|
|
}
|
|
|
|
/* Finding detail header: title + copy button on one row */
|
|
.detail-title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-3);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
.detail-title-row h2 {
|
|
margin: 0;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* ── Enhanced Pagination ──────────────────────────────────────────── */
|
|
.pagination {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 16px;
|
|
color: var(--text-secondary);
|
|
font-size: 0.85rem;
|
|
}
|
|
.pagination-left,
|
|
.pagination-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
.pagination-center {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
.pagination select {
|
|
width: auto;
|
|
min-width: 60px;
|
|
padding: 4px 8px;
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
/* ── Cell Styles ──────────────────────────────────────────────────── */
|
|
.cell-path {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.82rem;
|
|
max-width: 300px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ── Filter Bar Enhancements ──────────────────────────────────────── */
|
|
.filter-bar .filter-count {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
white-space: nowrap;
|
|
}
|
|
.filter-bar .btn-clear {
|
|
font-size: var(--text-sm);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ── Responsive ────────────────────────────────────────────────────── */
|
|
@media (max-width: 768px) {
|
|
.sidebar {
|
|
width: 100%;
|
|
position: static;
|
|
border-right: none;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.sidebar-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 16px;
|
|
}
|
|
.nav-list {
|
|
display: flex;
|
|
gap: 4px;
|
|
padding: 4px 8px;
|
|
overflow-x: auto;
|
|
}
|
|
.nav-link {
|
|
font-size: var(--text-sm);
|
|
padding: 6px 10px;
|
|
white-space: nowrap;
|
|
}
|
|
.nav-link span:not(.nav-icon) {
|
|
display: none;
|
|
}
|
|
.nav-icon {
|
|
margin: 0;
|
|
}
|
|
.nav-separator {
|
|
display: none;
|
|
}
|
|
.sidebar-meta {
|
|
display: none;
|
|
}
|
|
.sidebar-footer {
|
|
border-top: none;
|
|
padding: 0;
|
|
}
|
|
.sidebar-footer .nav-list {
|
|
padding: 0 8px 4px;
|
|
}
|
|
.main-panel {
|
|
margin-left: 0;
|
|
}
|
|
.content {
|
|
padding: 16px;
|
|
}
|
|
.header-bar {
|
|
padding: 0 16px;
|
|
}
|
|
.header-search-input {
|
|
display: none;
|
|
}
|
|
#app {
|
|
flex-direction: column;
|
|
}
|
|
.card-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
/* ── Add Rule Form ─────────────────────────────────────────────────── */
|
|
.inline-form {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: flex-end;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 16px;
|
|
}
|
|
.inline-form .form-group {
|
|
margin-bottom: 0;
|
|
}
|
|
.inline-form input,
|
|
.inline-form select {
|
|
min-width: 120px;
|
|
}
|
|
|
|
/* ── Finding Detail Panel ─────────────────────────────────────────── */
|
|
.detail-panel {
|
|
padding: var(--space-4) 0;
|
|
}
|
|
.detail-panel h2 {
|
|
font-size: var(--text-xl);
|
|
font-weight: var(--weight-semibold);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
.detail-panel .badge-row {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
.detail-panel .file-location {
|
|
display: inline-block;
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-sm);
|
|
color: var(--accent);
|
|
cursor: pointer;
|
|
margin-bottom: var(--space-4);
|
|
text-decoration: none;
|
|
}
|
|
.detail-panel .file-location:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.evidence-card {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
padding: var(--space-3);
|
|
margin-bottom: var(--space-2);
|
|
font-size: var(--text-sm);
|
|
}
|
|
.evidence-card .evidence-kind {
|
|
font-weight: var(--weight-semibold);
|
|
text-transform: uppercase;
|
|
font-size: var(--text-xs);
|
|
letter-spacing: 0.3px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
.evidence-card .evidence-snippet {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xs);
|
|
color: var(--text);
|
|
background: var(--bg);
|
|
padding: var(--space-1) var(--space-2);
|
|
border-radius: var(--radius-sm);
|
|
margin-top: var(--space-1);
|
|
white-space: pre;
|
|
overflow-x: auto;
|
|
}
|
|
.sanitizer-badge-none {
|
|
background: var(--conf-low-bg);
|
|
color: var(--conf-low);
|
|
}
|
|
.sanitizer-badge-bypassed {
|
|
background: var(--sev-medium-bg);
|
|
color: var(--sev-medium);
|
|
}
|
|
.sanitizer-badge-applied {
|
|
background: var(--conf-high-bg);
|
|
color: var(--conf-high);
|
|
}
|
|
.section-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
font-size: 0.85rem;
|
|
font-weight: var(--weight-semibold);
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
margin-bottom: var(--space-2);
|
|
padding: var(--space-1) 0;
|
|
}
|
|
.section-toggle .toggle-arrow {
|
|
font-size: var(--text-xs);
|
|
transition: transform var(--transition-base);
|
|
}
|
|
.section-toggle .toggle-arrow.collapsed {
|
|
transform: rotate(-90deg);
|
|
}
|
|
.section-body.collapsed {
|
|
display: none;
|
|
}
|
|
.detail-panel .related-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-1) var(--space-2);
|
|
border-radius: var(--radius-sm);
|
|
font-size: var(--text-sm);
|
|
cursor: pointer;
|
|
}
|
|
.detail-panel .related-row:hover {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
.evidence-note {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
padding: var(--space-1) 0;
|
|
}
|
|
|
|
/* ── Flow Timeline ───────────────────────────────────────────────── */
|
|
.flow-timeline {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
padding: var(--space-2) 0;
|
|
}
|
|
.flow-step {
|
|
display: flex;
|
|
gap: var(--space-3);
|
|
border-radius: var(--radius-sm);
|
|
padding: var(--space-1) var(--space-2);
|
|
}
|
|
.flow-step-connector {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
.flow-step-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
.flow-step-line {
|
|
width: 2px;
|
|
flex: 1;
|
|
background: var(--border);
|
|
min-height: 8px;
|
|
}
|
|
.flow-step-card {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding-bottom: var(--space-2);
|
|
}
|
|
.flow-step-badge {
|
|
font-weight: var(--weight-semibold);
|
|
text-transform: uppercase;
|
|
font-size: var(--text-xs);
|
|
letter-spacing: 0.3px;
|
|
}
|
|
.flow-step-snippet {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xs);
|
|
color: var(--text);
|
|
background: var(--bg);
|
|
padding: var(--space-1) var(--space-2);
|
|
border-radius: var(--radius-sm);
|
|
margin-top: 4px;
|
|
white-space: pre;
|
|
overflow-x: auto;
|
|
border: 1px solid var(--border);
|
|
}
|
|
.flow-step-cross-file .flow-step-card {
|
|
border-left: 2px solid var(--sev-medium);
|
|
}
|
|
.confidence-limiters {
|
|
list-style: disc;
|
|
padding-left: 20px;
|
|
margin: var(--space-1) 0 0 0;
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
.confidence-limiters li {
|
|
padding: 2px 0;
|
|
}
|
|
|
|
/* ── State Transition Card ────────────────────────────────────────── */
|
|
.state-transition-card {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border);
|
|
border-left: 3px solid var(--accent);
|
|
border-radius: var(--radius-sm);
|
|
padding: var(--space-4);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
.state-machine-label {
|
|
font-weight: var(--weight-semibold);
|
|
text-transform: uppercase;
|
|
font-size: var(--text-xs);
|
|
letter-spacing: 0.3px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
.state-subject {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
margin-bottom: var(--space-3);
|
|
font-size: var(--text-sm);
|
|
}
|
|
.state-subject-label {
|
|
color: var(--text-secondary);
|
|
}
|
|
.state-subject-name {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-sm);
|
|
background: var(--bg);
|
|
padding: var(--space-1) var(--space-2);
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid var(--border);
|
|
}
|
|
.state-transition-visual {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: var(--space-3);
|
|
background: var(--bg);
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid var(--border);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
.state-from,
|
|
.state-to {
|
|
font-family: var(--font-mono);
|
|
font-weight: var(--weight-semibold);
|
|
font-size: var(--text-base);
|
|
padding: var(--space-1) var(--space-3);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.state-from {
|
|
background: var(--sev-low-bg);
|
|
color: var(--sev-low);
|
|
}
|
|
.state-to {
|
|
background: var(--sev-high-bg);
|
|
color: var(--sev-high);
|
|
}
|
|
.state-arrow {
|
|
font-size: var(--text-xl);
|
|
color: var(--text-tertiary);
|
|
}
|
|
.state-acquire-location {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-secondary);
|
|
margin-top: var(--space-2);
|
|
}
|
|
.state-remediation {
|
|
background: var(--accent-light);
|
|
border: 1px solid var(--accent);
|
|
border-radius: var(--radius-sm);
|
|
padding: var(--space-3);
|
|
margin-top: var(--space-3);
|
|
font-size: var(--text-sm);
|
|
color: var(--text);
|
|
line-height: 1.5;
|
|
}
|
|
.state-remediation-label {
|
|
font-weight: var(--weight-semibold);
|
|
font-size: var(--text-xs);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
color: var(--accent);
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
|
|
/* ── Finding Detail: header + meta ─────────────────────────────────── */
|
|
.finding-heading {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
flex-wrap: wrap;
|
|
margin: 0;
|
|
}
|
|
.finding-rule-id {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-lg);
|
|
font-weight: var(--weight-semibold);
|
|
color: var(--text);
|
|
letter-spacing: 0;
|
|
}
|
|
.severity-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 10px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-bold);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.6px;
|
|
line-height: 1.6;
|
|
}
|
|
.severity-pill-high {
|
|
background: var(--sev-high-bg);
|
|
color: var(--sev-high);
|
|
box-shadow: inset 0 0 0 1px
|
|
color-mix(in srgb, var(--sev-high) 25%, transparent);
|
|
}
|
|
.severity-pill-medium {
|
|
background: var(--sev-medium-bg);
|
|
color: var(--sev-medium);
|
|
box-shadow: inset 0 0 0 1px
|
|
color-mix(in srgb, var(--sev-medium) 25%, transparent);
|
|
}
|
|
.severity-pill-low {
|
|
background: var(--sev-low-bg);
|
|
color: var(--sev-low);
|
|
box-shadow: inset 0 0 0 1px
|
|
color-mix(in srgb, var(--sev-low) 25%, transparent);
|
|
}
|
|
.finding-meta {
|
|
margin-bottom: var(--space-5);
|
|
color: var(--text-secondary);
|
|
font-size: var(--text-sm);
|
|
line-height: 1.7;
|
|
}
|
|
.finding-meta-item {
|
|
color: var(--text-secondary);
|
|
}
|
|
.finding-meta-sep {
|
|
margin: 0 var(--space-2);
|
|
color: var(--text-tertiary);
|
|
}
|
|
.finding-detail .detail-section {
|
|
padding-top: var(--space-4);
|
|
margin-top: var(--space-4);
|
|
border-top: 1px solid var(--border-light);
|
|
}
|
|
.finding-detail .detail-section:first-of-type {
|
|
border-top: none;
|
|
padding-top: 0;
|
|
margin-top: 0;
|
|
}
|
|
.finding-detail .section-toggle {
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
/* ── Finding Detail: status control ─────────────────────────────────── */
|
|
.status-control {
|
|
margin: var(--space-4) 0 var(--space-5) 0;
|
|
padding: var(--space-3) var(--space-4);
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
}
|
|
.status-control-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
flex-wrap: wrap;
|
|
}
|
|
.status-label {
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-semibold);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
color: var(--text-secondary);
|
|
}
|
|
.status-trigger {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: 6px 10px;
|
|
min-width: 180px;
|
|
border: 1px solid var(--border);
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
font-size: var(--text-sm);
|
|
text-align: left;
|
|
}
|
|
.status-trigger:hover {
|
|
border-color: var(--text-tertiary);
|
|
}
|
|
.status-trigger:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
.status-value {
|
|
flex: 1;
|
|
text-transform: capitalize;
|
|
}
|
|
.status-caret {
|
|
color: var(--text-tertiary);
|
|
transition: transform var(--transition-base);
|
|
}
|
|
.status-caret.open {
|
|
transform: rotate(180deg);
|
|
}
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
background: var(--text-tertiary);
|
|
}
|
|
.status-dot-open {
|
|
background: var(--sev-high);
|
|
}
|
|
.status-dot-investigating {
|
|
background: var(--sev-medium);
|
|
}
|
|
.status-dot-fixed {
|
|
background: var(--success);
|
|
}
|
|
.status-dot-false_positive,
|
|
.status-dot-accepted_risk,
|
|
.status-dot-suppressed {
|
|
background: var(--conf-low);
|
|
}
|
|
.status-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 2px 0;
|
|
}
|
|
.status-group + .status-group {
|
|
border-top: 1px solid var(--border-light);
|
|
margin-top: 4px;
|
|
padding-top: 6px;
|
|
}
|
|
.status-group-heading {
|
|
padding: 4px 10px 2px;
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-semibold);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.4px;
|
|
color: var(--text-tertiary);
|
|
}
|
|
.status-note-toggle {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
font-size: var(--text-sm);
|
|
color: var(--accent);
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
.status-note-toggle:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.status-current-note {
|
|
margin-top: var(--space-3);
|
|
padding: var(--space-2) var(--space-3);
|
|
background: var(--bg);
|
|
border-radius: var(--radius-sm);
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
border-left: 2px solid var(--border);
|
|
}
|
|
.status-note-input {
|
|
margin-top: var(--space-3);
|
|
}
|
|
.status-note-input textarea {
|
|
width: 100%;
|
|
padding: var(--space-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
font-family: inherit;
|
|
font-size: var(--text-sm);
|
|
resize: vertical;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
.status-note-input textarea:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 2px var(--accent-light);
|
|
}
|
|
.status-note-actions {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
margin-top: var(--space-2);
|
|
}
|
|
|
|
/* ── Finding Detail: structured explanation ─────────────────────────── */
|
|
.struct-expl {
|
|
display: grid;
|
|
grid-template-columns: max-content 1fr;
|
|
gap: var(--space-2) var(--space-4);
|
|
margin: 0;
|
|
font-size: var(--text-sm);
|
|
line-height: 1.6;
|
|
}
|
|
.struct-expl-row {
|
|
display: contents;
|
|
}
|
|
.struct-expl dt {
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-semibold);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
color: var(--text-secondary);
|
|
padding-top: 2px;
|
|
}
|
|
.struct-expl dd {
|
|
margin: 0;
|
|
color: var(--text);
|
|
}
|
|
.struct-expl-code {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-sm);
|
|
background: var(--bg-secondary);
|
|
padding: 1px 6px;
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
/* ── Finding Detail: flow emphasis ──────────────────────────────────── */
|
|
.flow-step-num {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-tertiary);
|
|
}
|
|
.flow-step-endpoint .flow-step-card {
|
|
background: var(--bg-secondary);
|
|
border-radius: var(--radius-sm);
|
|
padding: var(--space-2) var(--space-3);
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
.flow-step-endpoint .flow-step-badge {
|
|
font-size: var(--text-xs);
|
|
padding: 1px 6px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.flow-step-source .flow-step-card {
|
|
border-left: 3px solid var(--success);
|
|
}
|
|
.flow-step-source .flow-step-badge {
|
|
background: var(--success-bg);
|
|
color: var(--success) !important;
|
|
}
|
|
.flow-step-sink .flow-step-card {
|
|
border-left: 3px solid var(--sev-high);
|
|
background: var(--sev-high-bg);
|
|
}
|
|
.flow-step-sink .flow-step-badge {
|
|
background: var(--bg);
|
|
color: var(--sev-high) !important;
|
|
}
|
|
.flow-step-sink .flow-step-dot {
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--sev-high) 20%, transparent);
|
|
}
|
|
.flow-expand-toggle {
|
|
align-self: flex-start;
|
|
margin: var(--space-2) 0 0 28px;
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
color: var(--accent);
|
|
font-size: var(--text-sm);
|
|
cursor: pointer;
|
|
}
|
|
.flow-expand-toggle:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ── Finding Detail: how-to-fix ─────────────────────────────────────── */
|
|
.how-to-fix-list {
|
|
list-style: disc;
|
|
padding-left: 20px;
|
|
margin: 0;
|
|
font-size: var(--text-sm);
|
|
line-height: 1.6;
|
|
}
|
|
.how-to-fix-list li {
|
|
padding: 2px 0;
|
|
color: var(--text);
|
|
}
|
|
|
|
/* ── Finding Detail: dynamic verification ─────────────────────────── */
|
|
.badge-dyn-confirmed {
|
|
background: var(--success-bg);
|
|
color: var(--success);
|
|
}
|
|
.badge-dyn-partiallyconfirmed {
|
|
background: var(--conf-medium-bg);
|
|
color: var(--conf-medium);
|
|
}
|
|
.badge-dyn-notconfirmed {
|
|
background: var(--bg-secondary);
|
|
color: var(--text-secondary);
|
|
}
|
|
.badge-dyn-inconclusive {
|
|
background: var(--sev-medium-bg);
|
|
color: var(--sev-medium);
|
|
}
|
|
.badge-dyn-unsupported {
|
|
background: var(--conf-low-bg);
|
|
color: var(--conf-low);
|
|
}
|
|
.dynamic-verdict-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
font-size: var(--text-sm);
|
|
line-height: 1.45;
|
|
}
|
|
.dynamic-verdict-badge-row {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-2);
|
|
}
|
|
.dynamic-toolchain-match {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 22px;
|
|
padding: 2px 8px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg-secondary);
|
|
color: var(--text-secondary);
|
|
font-size: var(--text-xs);
|
|
}
|
|
.repro-panel,
|
|
.dynamic-verdict-detail,
|
|
.dynamic-attempts {
|
|
border: 1px solid var(--border-light);
|
|
border-radius: 6px;
|
|
background: var(--bg);
|
|
padding: var(--space-3);
|
|
}
|
|
.repro-cmd-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
min-width: 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
.repro-label,
|
|
.dynamic-attempts > strong,
|
|
.dynamic-verdict-detail strong {
|
|
color: var(--text-secondary);
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-semibold);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
.repro-cmd {
|
|
flex: 1 1 220px;
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
padding: 4px 7px;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--terminal-bg);
|
|
color: var(--terminal-text);
|
|
font-size: 0.78rem;
|
|
}
|
|
.repro-copy-btn {
|
|
flex: 0 0 auto;
|
|
}
|
|
.dynamic-verdict-detail {
|
|
display: grid;
|
|
gap: var(--space-2);
|
|
}
|
|
.dynamic-verdict-detail-text {
|
|
color: var(--text-secondary);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.dynamic-attempt-list {
|
|
list-style: none;
|
|
display: grid;
|
|
gap: var(--space-2);
|
|
margin: var(--space-2) 0 0;
|
|
padding: 0;
|
|
}
|
|
.attempt-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto auto;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: 8px 10px;
|
|
border: 1px solid var(--border-light);
|
|
border-radius: 6px;
|
|
background: var(--surface);
|
|
}
|
|
.attempt-row.triggered {
|
|
border-color: color-mix(in srgb, var(--success) 35%, var(--border));
|
|
background: var(--success-bg);
|
|
}
|
|
.attempt-row code {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
font-size: 0.8rem;
|
|
}
|
|
.attempt-outcome,
|
|
.attempt-exit-code {
|
|
color: var(--text-secondary);
|
|
font-size: var(--text-xs);
|
|
white-space: nowrap;
|
|
}
|
|
.attempt-row.triggered .attempt-outcome {
|
|
color: var(--success);
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
@media (max-width: 640px) {
|
|
.attempt-row {
|
|
grid-template-columns: 1fr;
|
|
align-items: start;
|
|
}
|
|
.attempt-outcome,
|
|
.attempt-exit-code {
|
|
white-space: normal;
|
|
}
|
|
}
|
|
|
|
/* ── Code Viewer Modal ────────────────────────────────────────────── */
|
|
.code-modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 100;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.code-modal {
|
|
background: var(--bg);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-xl);
|
|
width: 90vw;
|
|
max-width: 1100px;
|
|
height: 85vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
.code-modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--space-3) var(--space-4);
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--bg-secondary);
|
|
flex-shrink: 0;
|
|
}
|
|
.code-modal-title {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-sm);
|
|
font-weight: var(--weight-medium);
|
|
color: var(--text-secondary);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.code-modal-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
.code-viewer-body {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.82rem;
|
|
line-height: 1.6;
|
|
}
|
|
.code-line.highlight-source {
|
|
border-left: 4px solid var(--success);
|
|
background: var(--success-bg);
|
|
}
|
|
.code-line.highlight-sink {
|
|
border-left: 4px solid var(--sev-high);
|
|
background: var(--sev-high-bg);
|
|
}
|
|
.code-line.highlight-finding {
|
|
background: var(--sev-medium-bg);
|
|
}
|
|
.code-line.highlight-flow {
|
|
background: var(--accent-light);
|
|
}
|
|
|
|
/* Syntax token colors */
|
|
.tok-keyword {
|
|
color: var(--accent);
|
|
font-weight: var(--weight-medium);
|
|
}
|
|
.tok-string {
|
|
color: var(--green);
|
|
}
|
|
.tok-comment {
|
|
color: var(--text-tertiary);
|
|
font-style: italic;
|
|
}
|
|
.tok-number {
|
|
color: var(--amber);
|
|
}
|
|
.tok-function {
|
|
color: var(--accent);
|
|
}
|
|
|
|
/* ── Scan Modal ───────────────────────────────────────────────────── */
|
|
.scan-modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
}
|
|
.scan-modal {
|
|
background: var(--bg);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-lg);
|
|
width: min(480px, 90vw);
|
|
max-height: 85vh;
|
|
overflow-y: auto;
|
|
padding: var(--space-6);
|
|
}
|
|
.scan-modal h3 {
|
|
margin: 0 0 var(--space-4);
|
|
font-size: var(--text-xl);
|
|
}
|
|
.scan-modal-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
}
|
|
.scan-modal-form .form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
}
|
|
.scan-modal-form .form-group label {
|
|
font-size: var(--text-sm);
|
|
font-weight: var(--weight-medium);
|
|
color: var(--text-secondary);
|
|
}
|
|
.scan-modal-form .form-group input,
|
|
.scan-modal-form .form-group textarea,
|
|
.scan-modal-form .form-group select {
|
|
padding: var(--space-2) var(--space-3);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-sm);
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
.scan-modal-form .form-group .form-hint {
|
|
margin-top: var(--space-1);
|
|
font-size: var(--text-xs);
|
|
color: var(--text-secondary);
|
|
font-family: var(--font-sans);
|
|
}
|
|
.scan-modal-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--space-2);
|
|
margin-top: var(--space-2);
|
|
}
|
|
|
|
/* ── Scan Progress ────────────────────────────────────────────────── */
|
|
.scan-progress {
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: var(--space-4);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
.scan-progress-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
.scan-progress-header h3 {
|
|
margin: 0;
|
|
font-size: var(--text-lg);
|
|
}
|
|
|
|
/* Stage pipeline */
|
|
.stage-pipeline {
|
|
display: flex;
|
|
gap: 0;
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
.stage-step {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
padding: var(--space-2) var(--space-1);
|
|
}
|
|
.stage-step::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
right: -1px;
|
|
width: 2px;
|
|
height: 60%;
|
|
transform: translateY(-50%);
|
|
background: var(--border);
|
|
}
|
|
.stage-step:last-child::after {
|
|
display: none;
|
|
}
|
|
.stage-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: var(--border);
|
|
margin-bottom: var(--space-1);
|
|
transition: background 0.3s;
|
|
}
|
|
.stage-step.active .stage-dot {
|
|
background: var(--accent);
|
|
box-shadow: 0 0 0 3px var(--accent-light);
|
|
}
|
|
.stage-step.done .stage-dot {
|
|
background: var(--success);
|
|
}
|
|
.stage-label {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-tertiary);
|
|
text-align: center;
|
|
}
|
|
.stage-step.active .stage-label {
|
|
color: var(--accent);
|
|
font-weight: var(--weight-medium);
|
|
}
|
|
.stage-step.done .stage-label {
|
|
color: var(--success);
|
|
}
|
|
|
|
/* Progress bar */
|
|
.progress-bar {
|
|
height: 6px;
|
|
background: var(--bg-tertiary);
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
.progress-bar-fill {
|
|
height: 100%;
|
|
background: var(--accent);
|
|
border-radius: 3px;
|
|
transition: width 0.3s ease;
|
|
min-width: 0;
|
|
}
|
|
|
|
.progress-stats {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: var(--text-xs);
|
|
color: var(--text-secondary);
|
|
}
|
|
.progress-current-file {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-tertiary);
|
|
font-family: var(--font-mono);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
margin-top: var(--space-1);
|
|
}
|
|
|
|
/* ── Scan Detail Tabs ─────────────────────────────────────────────── */
|
|
.scan-detail-tabs {
|
|
display: flex;
|
|
gap: 0;
|
|
border-bottom: 1px solid var(--border);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
.scan-detail-tab {
|
|
padding: var(--space-2) var(--space-4);
|
|
font-size: var(--text-sm);
|
|
font-weight: var(--weight-medium);
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
border-bottom: 2px solid transparent;
|
|
transition:
|
|
color 0.2s,
|
|
border-color 0.2s;
|
|
background: none;
|
|
border-top: none;
|
|
border-left: none;
|
|
border-right: none;
|
|
}
|
|
.scan-detail-tab:hover {
|
|
color: var(--text);
|
|
}
|
|
.scan-detail-tab.active {
|
|
color: var(--accent);
|
|
border-bottom-color: var(--accent);
|
|
}
|
|
.scan-detail-tab-content {
|
|
display: none;
|
|
}
|
|
.scan-detail-tab-content.active {
|
|
display: block;
|
|
}
|
|
|
|
/* ── Log Viewer ───────────────────────────────────────────────────── */
|
|
.log-viewer {
|
|
max-height: 500px;
|
|
overflow-y: auto;
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xs);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.log-entry {
|
|
padding: var(--space-1) var(--space-3);
|
|
border-bottom: 1px solid var(--border-light);
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
align-items: flex-start;
|
|
}
|
|
.log-entry:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.log-entry.log-warn {
|
|
background: var(--sev-medium-bg);
|
|
}
|
|
.log-entry.log-error {
|
|
background: var(--sev-high-bg);
|
|
}
|
|
.log-level {
|
|
font-weight: var(--weight-semibold);
|
|
text-transform: uppercase;
|
|
font-size: 0.65rem;
|
|
padding: 1px 4px;
|
|
border-radius: 2px;
|
|
flex-shrink: 0;
|
|
min-width: 36px;
|
|
text-align: center;
|
|
}
|
|
.log-level.info {
|
|
background: var(--accent-light);
|
|
color: var(--accent);
|
|
}
|
|
.log-level.warn {
|
|
background: var(--sev-medium-bg);
|
|
color: var(--sev-medium);
|
|
}
|
|
.log-level.error {
|
|
background: var(--sev-high-bg);
|
|
color: var(--sev-high);
|
|
}
|
|
.log-time {
|
|
color: var(--text-tertiary);
|
|
flex-shrink: 0;
|
|
font-size: 0.65rem;
|
|
}
|
|
.log-message {
|
|
color: var(--text);
|
|
word-break: break-all;
|
|
}
|
|
.log-filters {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
.log-filter-btn {
|
|
padding: var(--space-1) var(--space-3);
|
|
font-size: var(--text-xs);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg);
|
|
cursor: pointer;
|
|
color: var(--text-secondary);
|
|
}
|
|
.log-filter-btn.active {
|
|
background: var(--accent-light);
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
|
|
/* ── Metric Cards Grid ────────────────────────────────────────────── */
|
|
.metric-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
gap: var(--space-3);
|
|
}
|
|
.metric-card {
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: var(--space-4);
|
|
text-align: center;
|
|
}
|
|
.metric-card-label {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
.metric-card-value {
|
|
font-size: var(--text-2xl);
|
|
font-weight: var(--weight-semibold);
|
|
color: var(--text);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* ── Scan List Enhancements ───────────────────────────────────────── */
|
|
.lang-badge {
|
|
display: inline-block;
|
|
padding: 1px 6px;
|
|
font-size: 0.65rem;
|
|
background: var(--bg-tertiary);
|
|
border-radius: 3px;
|
|
color: var(--text-secondary);
|
|
margin-right: 2px;
|
|
}
|
|
.status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
padding: 2px 8px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-medium);
|
|
}
|
|
.status-badge.running {
|
|
background: var(--accent-light);
|
|
color: var(--accent);
|
|
}
|
|
.status-badge.completed {
|
|
background: var(--success-bg);
|
|
color: var(--success);
|
|
}
|
|
.status-badge.failed {
|
|
background: var(--sev-high-bg);
|
|
color: var(--sev-high);
|
|
}
|
|
.status-badge .status-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
/* Pulse animation for running status */
|
|
@keyframes pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
.status-badge.running .status-dot {
|
|
animation: pulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
/* Timing breakdown bar */
|
|
.timing-bar {
|
|
display: flex;
|
|
height: 24px;
|
|
border-radius: var(--radius-sm);
|
|
overflow: hidden;
|
|
margin: var(--space-2) 0;
|
|
}
|
|
.timing-bar-segment {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.6rem;
|
|
font-weight: var(--weight-medium);
|
|
color: white;
|
|
min-width: 2px;
|
|
transition: width 0.3s;
|
|
}
|
|
.timing-bar-segment.walk {
|
|
background: var(--sev-low);
|
|
}
|
|
.timing-bar-segment.pass1 {
|
|
background: var(--accent);
|
|
}
|
|
.timing-bar-segment.callgraph {
|
|
background: var(--sev-medium);
|
|
}
|
|
.timing-bar-segment.pass2 {
|
|
background: var(--success);
|
|
}
|
|
.timing-bar-segment.postprocess {
|
|
background: var(--text-tertiary);
|
|
}
|
|
.timing-legend {
|
|
display: flex;
|
|
gap: var(--space-3);
|
|
flex-wrap: wrap;
|
|
font-size: var(--text-xs);
|
|
color: var(--text-secondary);
|
|
margin-top: var(--space-1);
|
|
}
|
|
.timing-legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
}
|
|
.timing-legend-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* Scan detail stat cards */
|
|
.scan-stat-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: var(--space-3);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
.scan-stat-card {
|
|
background: var(--bg-secondary);
|
|
border-radius: var(--radius);
|
|
padding: var(--space-3) var(--space-4);
|
|
}
|
|
.scan-stat-label {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
.scan-stat-value {
|
|
font-size: var(--text-lg);
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
|
|
/* ── Scan Comparison ──────────────────────────────────────────────── */
|
|
.compare-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
flex-wrap: wrap;
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
.compare-scan-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: var(--space-2) var(--space-3);
|
|
font-size: var(--text-sm);
|
|
}
|
|
.compare-scan-pill .pill-id {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xs);
|
|
color: var(--text-secondary);
|
|
}
|
|
.compare-scan-pill .pill-count {
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
.compare-vs {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-tertiary);
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
.compare-summary-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: var(--space-3);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
.compare-card {
|
|
background: var(--bg-secondary);
|
|
border-radius: var(--radius);
|
|
padding: var(--space-3) var(--space-4);
|
|
border-left: 3px solid var(--border);
|
|
}
|
|
.compare-card--new {
|
|
border-left-color: var(--success);
|
|
}
|
|
.compare-card--fixed {
|
|
border-left-color: var(--sev-high);
|
|
}
|
|
.compare-card--changed {
|
|
border-left-color: var(--sev-medium);
|
|
}
|
|
.compare-card--unchanged {
|
|
border-left-color: var(--text-tertiary);
|
|
}
|
|
.compare-card .compare-card-label {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
.compare-card .compare-card-value {
|
|
font-size: var(--text-lg);
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
.compare-card--new .compare-card-value {
|
|
color: var(--success);
|
|
}
|
|
.compare-card--fixed .compare-card-value {
|
|
color: var(--sev-high);
|
|
}
|
|
.compare-card--changed .compare-card-value {
|
|
color: var(--sev-medium);
|
|
}
|
|
|
|
.severity-delta {
|
|
display: flex;
|
|
gap: var(--space-4);
|
|
margin-bottom: var(--space-4);
|
|
font-size: var(--text-sm);
|
|
}
|
|
.severity-delta-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
}
|
|
.severity-delta-item .delta-positive {
|
|
color: var(--sev-high);
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
.severity-delta-item .delta-negative {
|
|
color: var(--success);
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
.severity-delta-item .delta-zero {
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.compare-badge--new {
|
|
background: var(--success-bg);
|
|
color: var(--green);
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-semibold);
|
|
padding: 1px 6px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.compare-badge--fixed {
|
|
background: var(--sev-high-bg);
|
|
color: var(--sev-high);
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-semibold);
|
|
padding: 1px 6px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.compare-badge--changed {
|
|
background: var(--sev-medium-bg);
|
|
color: var(--sev-medium);
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-semibold);
|
|
padding: 1px 6px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.compare-badge--unchanged {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-tertiary);
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-semibold);
|
|
padding: 1px 6px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.compare-section {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
.compare-section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-2) var(--space-3);
|
|
background: var(--bg-secondary);
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
font-size: var(--text-sm);
|
|
font-weight: var(--weight-medium);
|
|
}
|
|
.compare-section-header:hover {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
.compare-section-header .section-toggle {
|
|
transition: transform 0.15s;
|
|
font-size: var(--text-xs);
|
|
color: var(--text-tertiary);
|
|
}
|
|
.compare-section-header .section-toggle.collapsed {
|
|
transform: rotate(-90deg);
|
|
}
|
|
.compare-section-body {
|
|
padding-top: var(--space-2);
|
|
}
|
|
.compare-finding-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: var(--space-2) var(--space-3);
|
|
border-left: 3px solid transparent;
|
|
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
|
|
font-size: var(--text-sm);
|
|
cursor: pointer;
|
|
}
|
|
.compare-finding-row:hover {
|
|
background: var(--bg-secondary);
|
|
}
|
|
.compare-finding-row--new {
|
|
border-left-color: var(--success);
|
|
}
|
|
.compare-finding-row--fixed {
|
|
border-left-color: var(--sev-high);
|
|
}
|
|
.compare-finding-row--changed {
|
|
border-left-color: var(--sev-medium);
|
|
}
|
|
.compare-finding-row--unchanged {
|
|
border-left-color: var(--bg-tertiary);
|
|
}
|
|
.compare-finding-row .finding-path {
|
|
color: var(--text-secondary);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xs);
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.compare-delta-inline {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
font-size: var(--text-xs);
|
|
color: var(--sev-medium);
|
|
font-family: var(--font-mono);
|
|
}
|
|
.compare-delta-inline .delta-arrow {
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.compare-select-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: var(--space-2) var(--space-3);
|
|
background: var(--accent-light);
|
|
border: 1px solid var(--accent);
|
|
border-radius: var(--radius);
|
|
margin-bottom: var(--space-3);
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
.compare-group-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-2) var(--space-3);
|
|
background: var(--bg-secondary);
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
font-size: var(--text-sm);
|
|
font-weight: var(--weight-medium);
|
|
margin-top: var(--space-2);
|
|
}
|
|
.compare-group-header:hover {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
.compare-group-summary {
|
|
font-weight: var(--weight-normal);
|
|
color: var(--text-secondary);
|
|
font-size: var(--text-xs);
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* ── Rules Page ───────────────────────────────────────────────────── */
|
|
.rules-layout {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr;
|
|
gap: 0;
|
|
height: calc(100vh - 160px);
|
|
min-height: 400px;
|
|
}
|
|
.rules-list-panel {
|
|
overflow-y: auto;
|
|
border-right: 1px solid var(--border);
|
|
padding-right: var(--space-4);
|
|
}
|
|
.rules-detail-panel {
|
|
overflow-y: auto;
|
|
padding-left: var(--space-4);
|
|
}
|
|
.rules-filters {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
margin-bottom: var(--space-3);
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
.rules-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
}
|
|
/* Fixed pixel widths for stable columns; col-title has no explicit width -> takes remainder */
|
|
.rules-table .col-toggle {
|
|
width: 60px;
|
|
}
|
|
.rules-table .col-lang {
|
|
width: 100px;
|
|
}
|
|
.rules-table .col-kind {
|
|
width: 110px;
|
|
}
|
|
.rules-table .col-cap {
|
|
width: 100px;
|
|
}
|
|
.rules-table .col-finds {
|
|
width: 64px;
|
|
}
|
|
.rules-table th,
|
|
.rules-table td {
|
|
padding: 8px 12px;
|
|
font-size: var(--text-sm);
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border-light);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
vertical-align: middle;
|
|
}
|
|
/* Title cell: let the inner .rule-title-text handle truncation */
|
|
.rules-table .col-title-cell {
|
|
overflow: hidden;
|
|
}
|
|
.rule-title-text {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.rules-table th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
background: var(--bg-secondary);
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-semibold);
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
/* display: table-row is explicit so no global .rule-row flex can bleed in */
|
|
.rule-row {
|
|
display: table-row;
|
|
cursor: pointer;
|
|
}
|
|
.rule-row:hover td {
|
|
background: var(--bg-secondary);
|
|
}
|
|
.rule-row.selected td {
|
|
background: var(--accent-light);
|
|
}
|
|
.rule-row.rule-disabled {
|
|
opacity: 0.55;
|
|
}
|
|
.rules-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
.rules-table tbody tr:hover td {
|
|
background: var(--bg-secondary);
|
|
}
|
|
.rule-toggle {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
padding: 1px 6px;
|
|
font-size: var(--text-xs);
|
|
cursor: pointer;
|
|
background: var(--bg-secondary);
|
|
}
|
|
.rule-toggle.toggle-on {
|
|
background: var(--success-bg);
|
|
color: var(--success);
|
|
border-color: var(--success);
|
|
}
|
|
.rule-toggle.toggle-off {
|
|
background: var(--bg-secondary);
|
|
color: var(--text-tertiary);
|
|
}
|
|
.matcher-tag {
|
|
display: inline-block;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
padding: 2px 8px;
|
|
margin: 2px;
|
|
font-size: var(--text-sm);
|
|
}
|
|
.detail-meta {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--space-2);
|
|
margin-top: var(--space-3);
|
|
}
|
|
.detail-meta > div {
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
/* ── Rule Detail Card ─────────────────────────────────────────────── */
|
|
.rule-detail-card h3 {
|
|
margin: 0 0 var(--space-3) 0;
|
|
font-size: var(--text-lg);
|
|
word-break: break-word;
|
|
}
|
|
.rule-detail-grid {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: var(--space-1) var(--space-3);
|
|
font-size: var(--text-sm);
|
|
}
|
|
.rule-detail-label {
|
|
color: var(--text-secondary);
|
|
font-weight: var(--weight-medium);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ── Config Page ──────────────────────────────────────────────────── */
|
|
.config-section {
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
.config-section-header {
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-2) var(--space-3);
|
|
background: var(--bg-secondary);
|
|
border-radius: var(--radius);
|
|
user-select: none;
|
|
font-size: var(--text-base);
|
|
}
|
|
.config-section-header:hover {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
.config-section-header-static {
|
|
cursor: default;
|
|
}
|
|
.config-section-header-static:hover {
|
|
background: var(--bg-secondary);
|
|
}
|
|
.config-collapse-arrow {
|
|
font-size: 10px;
|
|
display: inline-block;
|
|
transition: transform 0.15s ease;
|
|
}
|
|
.config-section-header.collapsed .config-collapse-arrow {
|
|
transform: rotate(-90deg);
|
|
}
|
|
.config-section-header.collapsed + .config-section-body {
|
|
display: none;
|
|
}
|
|
.config-section-body {
|
|
padding: var(--space-3) 0;
|
|
}
|
|
|
|
/* Label entry tables */
|
|
.label-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
.label-table td,
|
|
.label-table th {
|
|
padding: 6px 10px;
|
|
text-align: left;
|
|
}
|
|
.label-builtin {
|
|
opacity: 0.7;
|
|
}
|
|
.add-label-form {
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
/* ── Config form rows (aligned inputs/buttons) ───────────────────────── */
|
|
.config-form-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(140px, 180px) 1fr minmax(140px, 200px) auto;
|
|
gap: var(--space-3);
|
|
align-items: end;
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
.config-form-row .form-group {
|
|
margin-bottom: 0;
|
|
min-width: 0;
|
|
}
|
|
.config-form-row .form-group-grow {
|
|
/* placeholder for cases where the matcher should stretch */
|
|
}
|
|
.config-form-row.config-form-row-2col {
|
|
grid-template-columns: minmax(200px, 320px) auto;
|
|
justify-content: start;
|
|
}
|
|
.config-form-row input,
|
|
.config-form-row select,
|
|
.config-form-row .btn {
|
|
height: 38px;
|
|
box-sizing: border-box;
|
|
line-height: 1.2;
|
|
}
|
|
.config-form-row .btn {
|
|
align-self: end;
|
|
padding-left: var(--space-4);
|
|
padding-right: var(--space-4);
|
|
}
|
|
@media (max-width: 720px) {
|
|
.config-form-row {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
.config-form-row .btn {
|
|
grid-column: 1 / -1;
|
|
}
|
|
}
|
|
|
|
/* ── Config tabs ─────────────────────────────────────────────────────── */
|
|
.config-tabs {
|
|
display: flex;
|
|
gap: var(--space-1);
|
|
border-bottom: 1px solid var(--border);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
.config-tab {
|
|
background: transparent;
|
|
border: none;
|
|
border-bottom: 2px solid transparent;
|
|
padding: var(--space-2) var(--space-3);
|
|
font-size: var(--text-sm);
|
|
font-weight: var(--weight-medium);
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
margin-bottom: -1px;
|
|
}
|
|
.config-tab:hover {
|
|
color: var(--text);
|
|
}
|
|
.config-tab.active {
|
|
color: var(--accent);
|
|
border-bottom-color: var(--accent);
|
|
}
|
|
|
|
.page-header-sub {
|
|
color: var(--text-secondary);
|
|
font-size: var(--text-sm);
|
|
margin-left: var(--space-3);
|
|
}
|
|
|
|
.config-help {
|
|
color: var(--text-secondary);
|
|
font-size: var(--text-sm);
|
|
margin: 0 0 var(--space-3) 0;
|
|
}
|
|
.config-help code {
|
|
font-size: 0.95em;
|
|
padding: 1px 4px;
|
|
background: var(--bg-secondary);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.config-mono {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
.config-profile-settings {
|
|
font-size: var(--text-xs);
|
|
font-family: var(--font-mono);
|
|
max-width: 360px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* ── Effective config kv grid ────────────────────────────────────────── */
|
|
.config-kv-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: var(--space-2) var(--space-4);
|
|
}
|
|
.config-kv-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding: var(--space-2) 0;
|
|
border-bottom: 1px solid var(--border);
|
|
min-width: 0;
|
|
}
|
|
.config-kv-key {
|
|
font-size: var(--text-xs);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--text-secondary);
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
.config-kv-val {
|
|
font-size: var(--text-sm);
|
|
word-break: break-word;
|
|
}
|
|
.config-kv-val .muted {
|
|
color: var(--text-secondary);
|
|
font-style: italic;
|
|
}
|
|
.config-list-inline {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
}
|
|
.config-tag {
|
|
background: var(--bg-secondary);
|
|
color: var(--text);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xs);
|
|
padding: 1px 6px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.pill {
|
|
display: inline-block;
|
|
padding: 1px 8px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-medium);
|
|
}
|
|
.pill-on {
|
|
background: var(--success-bg, var(--accent-light));
|
|
color: var(--success, var(--accent));
|
|
}
|
|
.pill-off {
|
|
background: var(--bg-secondary);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* ── Raw nyx.local editor ────────────────────────────────────────────── */
|
|
.raw-editor {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
.raw-editor-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: var(--space-2) var(--space-3);
|
|
background: var(--bg-secondary);
|
|
border-radius: var(--radius);
|
|
flex-wrap: wrap;
|
|
}
|
|
.raw-editor-path {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-xs);
|
|
color: var(--text-secondary);
|
|
margin-top: 2px;
|
|
}
|
|
.raw-editor-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
.raw-editor-dirty {
|
|
color: var(--sev-medium, var(--accent));
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-medium);
|
|
}
|
|
.raw-editor-saved {
|
|
color: var(--success, var(--accent));
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-medium);
|
|
}
|
|
.raw-editor-error {
|
|
background: var(--sev-high-bg);
|
|
color: var(--sev-high);
|
|
padding: var(--space-2) var(--space-3);
|
|
border-radius: var(--radius);
|
|
font-size: var(--text-sm);
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
.raw-editor-textarea {
|
|
width: 100%;
|
|
min-height: 480px;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.85rem;
|
|
line-height: 1.5;
|
|
padding: var(--space-3);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
resize: vertical;
|
|
white-space: pre;
|
|
tab-size: 2;
|
|
}
|
|
.raw-editor-textarea:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
/* Badges */
|
|
.badge-custom {
|
|
background: var(--accent-light);
|
|
color: var(--accent);
|
|
padding: 2px 6px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-medium);
|
|
}
|
|
.badge-builtin {
|
|
background: var(--bg-secondary);
|
|
color: var(--text-secondary);
|
|
padding: 2px 6px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: var(--text-xs);
|
|
}
|
|
.badge-source {
|
|
background: var(--sev-low-bg);
|
|
color: var(--sev-low);
|
|
}
|
|
.badge-sanitizer {
|
|
background: var(--success-bg);
|
|
color: var(--success);
|
|
}
|
|
.badge-sink {
|
|
background: var(--sev-high-bg);
|
|
color: var(--sev-high);
|
|
}
|
|
|
|
/* Toggle switch inline */
|
|
.toggle-inline {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-size: var(--text-sm);
|
|
}
|
|
.toggle-inline input[type='checkbox'] {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* Settings panel rows (theme picker etc.) */
|
|
.settings-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
font-size: var(--text-sm);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
.settings-row-label {
|
|
min-width: 80px;
|
|
font-weight: var(--weight-medium);
|
|
}
|
|
.settings-row-control {
|
|
flex: 1;
|
|
min-width: 160px;
|
|
height: 32px;
|
|
box-sizing: border-box;
|
|
}
|
|
.settings-row-toggle {
|
|
margin-top: var(--space-2);
|
|
}
|
|
|
|
/* ── Code Modal Responsive ────────────────────────────────────────── */
|
|
@media (max-width: 768px) {
|
|
.code-modal {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
border-radius: 0;
|
|
}
|
|
.scan-modal {
|
|
width: 100vw;
|
|
margin: 0;
|
|
border-radius: 0;
|
|
max-height: 100vh;
|
|
}
|
|
.metric-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
/* ── Overview Page ───────────────────────────────────────────────── */
|
|
.overview-stat-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: var(--space-3);
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
.overview-stat-grid-5 {
|
|
grid-template-columns: repeat(5, 1fr);
|
|
}
|
|
.card-full {
|
|
grid-column: 1 / -1;
|
|
}
|
|
.backlog-empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
padding: var(--space-3) 0;
|
|
}
|
|
.overview-stat-card {
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: var(--space-4);
|
|
text-align: center;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
.stat-label {
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-semibold);
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
.stat-value {
|
|
font-size: var(--text-2xl);
|
|
font-weight: var(--weight-bold);
|
|
font-family: var(--font-mono);
|
|
color: var(--text);
|
|
}
|
|
.stat-delta {
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-semibold);
|
|
margin-left: 4px;
|
|
vertical-align: middle;
|
|
}
|
|
.delta-up {
|
|
color: var(--sev-high);
|
|
}
|
|
.delta-down {
|
|
color: var(--success);
|
|
}
|
|
.delta-neutral {
|
|
color: var(--text-tertiary);
|
|
}
|
|
.stat-subtitle {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-tertiary);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.overview-chart-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--space-4);
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
.overview-chart-grid .card {
|
|
padding: var(--space-4);
|
|
}
|
|
.overview-chart-grid .card-header {
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
.overview-table-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--space-4);
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
.overview-table-grid .card {
|
|
overflow: hidden;
|
|
}
|
|
.overview-table-grid table {
|
|
font-size: var(--text-sm);
|
|
}
|
|
.overview-table-grid td:last-child,
|
|
.overview-table-grid th:last-child {
|
|
text-align: right;
|
|
}
|
|
|
|
.overview-fresh-banner {
|
|
background: var(--success-bg);
|
|
border: 1px solid var(--success);
|
|
border-radius: var(--radius);
|
|
padding: var(--space-3) var(--space-4);
|
|
margin-bottom: var(--space-5);
|
|
font-size: var(--text-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
}
|
|
.overview-fresh-banner strong {
|
|
color: var(--success);
|
|
}
|
|
.overview-fresh-banner a {
|
|
margin-left: auto;
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
font-weight: var(--weight-medium);
|
|
}
|
|
.overview-fresh-banner a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.overview-empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 80px 20px;
|
|
text-align: center;
|
|
}
|
|
.overview-empty h2 {
|
|
margin: var(--space-5) 0 var(--space-2);
|
|
font-size: var(--text-xl);
|
|
}
|
|
.overview-empty p {
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--space-5);
|
|
}
|
|
.overview-empty svg {
|
|
width: 64px;
|
|
height: 64px;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.overview-insights {
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
.insight-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
padding: var(--space-3);
|
|
}
|
|
.insight-card {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--space-3) var(--space-4);
|
|
border-radius: var(--radius-sm);
|
|
font-size: var(--text-sm);
|
|
gap: var(--space-3);
|
|
}
|
|
.insight-warning {
|
|
background: var(--sev-medium-bg);
|
|
border-left: 3px solid var(--sev-medium);
|
|
}
|
|
.insight-info {
|
|
background: var(--sev-low-bg);
|
|
border-left: 3px solid var(--sev-low);
|
|
}
|
|
.insight-success {
|
|
background: var(--success-bg);
|
|
border-left: 3px solid var(--success);
|
|
}
|
|
.insight-card a {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
font-weight: var(--weight-medium);
|
|
white-space: nowrap;
|
|
}
|
|
.insight-card a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* SVG chart styles */
|
|
.chart-container {
|
|
width: 100%;
|
|
min-height: 120px;
|
|
}
|
|
.chart-container svg {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
/* Overview responsive */
|
|
@media (max-width: 1200px) {
|
|
.overview-stat-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
.overview-posture-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
@media (max-width: 768px) {
|
|
.overview-stat-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.overview-chart-grid,
|
|
.overview-table-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* ── Overview: health, posture, backlog ────────────────────────────── */
|
|
|
|
.health-card {
|
|
padding: var(--space-4) var(--space-5);
|
|
margin-bottom: var(--space-5);
|
|
}
|
|
.health-eyebrow {
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-semibold);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-tertiary);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
.health-headline {
|
|
display: grid;
|
|
grid-template-columns: auto auto 1fr;
|
|
gap: var(--space-4);
|
|
align-items: stretch;
|
|
}
|
|
.health-grade-block {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
color: white;
|
|
flex-shrink: 0;
|
|
width: 64px;
|
|
height: 64px;
|
|
}
|
|
.health-grade-letter {
|
|
font-size: 40px;
|
|
line-height: 1;
|
|
font-weight: var(--weight-bold);
|
|
font-family: var(--font-mono);
|
|
letter-spacing: 0;
|
|
}
|
|
.grade-a {
|
|
background: var(--green);
|
|
}
|
|
.grade-b {
|
|
background: var(--green);
|
|
}
|
|
.grade-c {
|
|
background: var(--amber);
|
|
}
|
|
.grade-d {
|
|
background: var(--red);
|
|
}
|
|
.grade-f {
|
|
background: var(--red);
|
|
}
|
|
.health-headline-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
justify-content: center;
|
|
}
|
|
.health-summary {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: var(--space-2);
|
|
}
|
|
.health-number {
|
|
font-size: 40px;
|
|
line-height: 1;
|
|
font-weight: var(--weight-bold);
|
|
font-family: var(--font-mono);
|
|
color: var(--text);
|
|
letter-spacing: 0;
|
|
}
|
|
.health-of {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-tertiary);
|
|
font-family: var(--font-mono);
|
|
}
|
|
.health-posture {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
line-height: 1.4;
|
|
}
|
|
.health-posture.posture-success {
|
|
color: var(--green);
|
|
}
|
|
.health-posture.posture-warning {
|
|
color: var(--amber);
|
|
}
|
|
.health-posture.posture-danger {
|
|
color: var(--red);
|
|
}
|
|
.health-posture.posture-info {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.health-components {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: var(--space-1);
|
|
border-left: 1px solid var(--border);
|
|
padding-left: var(--space-5);
|
|
}
|
|
.health-component {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding: 0 var(--space-2);
|
|
}
|
|
.health-component-score {
|
|
font-size: var(--text-xl);
|
|
font-weight: var(--weight-semibold);
|
|
font-family: var(--font-mono);
|
|
color: var(--text);
|
|
line-height: 1.1;
|
|
}
|
|
.health-component-label {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-tertiary);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* Backlog card */
|
|
.backlog-card {
|
|
margin-bottom: var(--space-5);
|
|
padding: var(--space-4) var(--space-5);
|
|
}
|
|
.backlog-body {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, auto) 1fr;
|
|
align-items: center;
|
|
gap: var(--space-6);
|
|
}
|
|
.backlog-stat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
.backlog-stat-value {
|
|
font-size: var(--text-xl);
|
|
font-weight: var(--weight-semibold);
|
|
font-family: var(--font-mono);
|
|
}
|
|
.backlog-stat-label {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-tertiary);
|
|
}
|
|
.backlog-bucket .bucket-bar {
|
|
margin-top: 0;
|
|
}
|
|
.bucket-bar {
|
|
display: flex;
|
|
height: 6px;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
background: var(--bg-secondary);
|
|
}
|
|
.bucket-segment {
|
|
height: 100%;
|
|
}
|
|
|
|
/* Confidence distribution */
|
|
.confidence-dist {
|
|
padding: var(--space-2);
|
|
}
|
|
.confidence-bar {
|
|
display: flex;
|
|
height: 18px;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
background: var(--bg-secondary);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
.confidence-segment {
|
|
height: 100%;
|
|
}
|
|
.confidence-legend {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--space-1) var(--space-3);
|
|
font-size: var(--text-xs);
|
|
}
|
|
.confidence-legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.confidence-swatch {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 2px;
|
|
}
|
|
.confidence-count {
|
|
margin-left: auto;
|
|
font-family: var(--font-mono);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Definition list used by Scanner Quality + Suppression Hygiene */
|
|
.kv-list {
|
|
margin: 0;
|
|
padding: var(--space-2) var(--space-4) var(--space-3);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.kv-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
align-items: baseline;
|
|
gap: var(--space-4);
|
|
padding: var(--space-3) 0;
|
|
border-bottom: 1px solid var(--border-light);
|
|
}
|
|
.kv-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.kv-row-emphasis {
|
|
padding-bottom: var(--space-3);
|
|
margin-bottom: var(--space-1);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.kv-row-emphasis .kv-number {
|
|
font-size: var(--text-2xl);
|
|
font-weight: var(--weight-bold);
|
|
}
|
|
.kv-label {
|
|
font-size: var(--text-sm);
|
|
color: var(--text);
|
|
margin: 0;
|
|
font-weight: var(--weight-medium);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
.kv-hint {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-tertiary);
|
|
font-weight: var(--weight-regular, 400);
|
|
}
|
|
.kv-value {
|
|
margin: 0;
|
|
text-align: right;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
.kv-number {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-lg);
|
|
font-weight: var(--weight-semibold);
|
|
color: var(--text);
|
|
line-height: 1.1;
|
|
}
|
|
.kv-detail {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-tertiary);
|
|
font-family: var(--font);
|
|
}
|
|
|
|
/* OWASP */
|
|
.owasp-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: var(--space-2);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
.owasp-row {
|
|
display: grid;
|
|
grid-template-columns: 40px minmax(0, 1fr) minmax(30px, 80px) 28px;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-size: var(--text-sm);
|
|
}
|
|
.owasp-code {
|
|
font-family: var(--font-mono);
|
|
font-weight: var(--weight-semibold);
|
|
color: var(--accent);
|
|
}
|
|
.owasp-label {
|
|
color: var(--text-secondary);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.owasp-bar {
|
|
height: 6px;
|
|
background: var(--bg-secondary);
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
.owasp-fill {
|
|
height: 100%;
|
|
background: var(--accent);
|
|
}
|
|
.owasp-count {
|
|
text-align: right;
|
|
font-family: var(--font-mono);
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
|
|
/* Severity stack */
|
|
.severity-stack {
|
|
display: flex;
|
|
height: 18px;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
background: var(--bg-secondary);
|
|
min-width: 80px;
|
|
}
|
|
.sev-segment {
|
|
font-size: 10px;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: var(--weight-semibold);
|
|
font-family: var(--font-mono);
|
|
}
|
|
.sev-segment.sev-high {
|
|
background: var(--sev-high);
|
|
}
|
|
.sev-segment.sev-medium {
|
|
background: var(--sev-medium);
|
|
}
|
|
.sev-segment.sev-low {
|
|
background: var(--sev-low);
|
|
}
|
|
|
|
/* Baseline strip */
|
|
.baseline-strip {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: var(--space-2) var(--space-4);
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
margin-bottom: var(--space-3);
|
|
font-size: var(--text-sm);
|
|
}
|
|
.baseline-strip-empty {
|
|
color: var(--text-secondary);
|
|
}
|
|
.baseline-label {
|
|
font-weight: var(--weight-semibold);
|
|
color: var(--text-secondary);
|
|
}
|
|
.baseline-link {
|
|
background: none;
|
|
border: none;
|
|
color: var(--accent);
|
|
font-family: var(--font-mono);
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
.baseline-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.baseline-action {
|
|
margin-left: auto;
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
padding: 2px 10px;
|
|
font-size: var(--text-xs);
|
|
cursor: pointer;
|
|
color: var(--text);
|
|
}
|
|
.baseline-action:hover {
|
|
background: var(--bg-secondary);
|
|
}
|
|
.baseline-action:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
.baseline-drift-good {
|
|
color: var(--success);
|
|
}
|
|
.baseline-drift-bad {
|
|
color: var(--sev-high);
|
|
}
|
|
.baseline-drift-flat {
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
/* Empty-state CLI hint */
|
|
.cli-hint {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
padding: var(--space-3);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-sm);
|
|
color: var(--text);
|
|
display: inline-block;
|
|
}
|
|
|
|
/* ── Explorer Page ─────────────────────────────────────────────────── */
|
|
|
|
/* Override .content padding/max-width when explorer is inside it */
|
|
.content:has(.explorer-page) {
|
|
padding: 0;
|
|
max-width: none;
|
|
}
|
|
.explorer-page {
|
|
height: calc(100vh - 48px);
|
|
overflow: hidden;
|
|
}
|
|
.explorer-page-code {
|
|
display: grid;
|
|
grid-template-columns: 220px minmax(0, 1fr) 300px;
|
|
}
|
|
.explorer-page-analysis {
|
|
display: grid;
|
|
grid-template-columns: 220px minmax(0, 1fr);
|
|
}
|
|
|
|
/* Left panel */
|
|
.explorer-left {
|
|
border-right: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
background: var(--bg);
|
|
}
|
|
.explorer-left-header {
|
|
padding: var(--space-2) var(--space-3);
|
|
border-bottom: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
}
|
|
.explorer-left-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Mode toggle */
|
|
.explorer-mode-toggle {
|
|
display: flex;
|
|
gap: 1px;
|
|
background: var(--border);
|
|
border-radius: var(--radius-sm);
|
|
overflow: hidden;
|
|
}
|
|
.mode-btn {
|
|
flex: 1;
|
|
padding: var(--space-1) var(--space-2);
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-medium);
|
|
border: none;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
transition:
|
|
background 0.15s,
|
|
color 0.15s;
|
|
}
|
|
.mode-btn:hover {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
.mode-btn.active {
|
|
background: var(--accent);
|
|
color: var(--accent-contrast);
|
|
}
|
|
|
|
/* File tree */
|
|
.file-tree {
|
|
padding: var(--space-1) 0;
|
|
}
|
|
.tree-node {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
padding: 3px 8px;
|
|
cursor: pointer;
|
|
font-size: 0.78rem;
|
|
color: var(--text);
|
|
user-select: none;
|
|
border-left: 3px solid transparent;
|
|
transition: background 0.1s;
|
|
}
|
|
.tree-node:hover {
|
|
background: var(--bg-secondary);
|
|
}
|
|
.tree-node.selected {
|
|
background: var(--accent-light);
|
|
}
|
|
.tree-node.sev-high {
|
|
border-left-color: var(--sev-high);
|
|
}
|
|
.tree-node.sev-medium {
|
|
border-left-color: var(--sev-medium);
|
|
}
|
|
.tree-node.sev-low {
|
|
border-left-color: var(--sev-low);
|
|
}
|
|
.tree-chevron {
|
|
width: 14px;
|
|
flex-shrink: 0;
|
|
font-size: var(--text-xs);
|
|
color: var(--text-tertiary);
|
|
text-align: center;
|
|
}
|
|
.tree-chevron.invisible {
|
|
visibility: hidden;
|
|
}
|
|
.tree-node-icon {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--text-secondary);
|
|
}
|
|
.tree-node-name {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.tree-node-badge {
|
|
flex-shrink: 0;
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-semibold);
|
|
padding: 0 6px;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--accent-light);
|
|
color: var(--accent);
|
|
line-height: 1.6;
|
|
}
|
|
.file-icon {
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-bold);
|
|
font-family: var(--font-mono);
|
|
width: 14px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Main shell */
|
|
.explorer-main-shell {
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--bg);
|
|
min-width: 0;
|
|
height: 100%;
|
|
}
|
|
.explorer-file-header {
|
|
padding: var(--space-3) var(--space-4);
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: var(--space-3);
|
|
flex-shrink: 0;
|
|
background: var(--bg);
|
|
min-height: var(--explorer-header-height);
|
|
box-sizing: border-box;
|
|
}
|
|
.explorer-file-header-top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-4);
|
|
flex-wrap: wrap;
|
|
}
|
|
.explorer-file-header-copy {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: var(--space-2);
|
|
min-width: 0;
|
|
flex-wrap: nowrap;
|
|
flex: 0 1 auto;
|
|
}
|
|
.explorer-file-label {
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-semibold);
|
|
color: var(--text-tertiary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
flex-shrink: 0;
|
|
}
|
|
.explorer-file-path {
|
|
font-size: var(--text-sm);
|
|
font-family: var(--font-mono);
|
|
color: var(--text);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.explorer-function-picker {
|
|
min-width: 0;
|
|
width: min(460px, 100%);
|
|
max-width: 100%;
|
|
flex: 0 1 460px;
|
|
}
|
|
.explorer-function-picker .function-selector {
|
|
padding: 0;
|
|
flex-wrap: nowrap;
|
|
width: 100%;
|
|
}
|
|
.function-selector-flat {
|
|
display: contents;
|
|
}
|
|
.function-selector-flat > .function-selector-field {
|
|
padding: 0;
|
|
flex: 0 1 auto;
|
|
}
|
|
.explorer-view-tabs {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: var(--space-4);
|
|
overflow-x: auto;
|
|
scrollbar-width: thin;
|
|
}
|
|
.explorer-view-tab {
|
|
padding: var(--space-2) 0;
|
|
border: 0;
|
|
border-bottom: 2px solid transparent;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
font-size: var(--text-sm);
|
|
font-weight: var(--weight-medium);
|
|
transition:
|
|
color 0.12s,
|
|
border-color 0.12s;
|
|
}
|
|
.explorer-view-tab:hover {
|
|
color: var(--text);
|
|
}
|
|
.explorer-view-tab.active {
|
|
color: var(--accent);
|
|
border-bottom-color: var(--accent);
|
|
}
|
|
.explorer-inline-notice {
|
|
padding: var(--space-2) var(--space-3);
|
|
border-radius: var(--radius);
|
|
background: var(--accent-light);
|
|
color: var(--text-secondary);
|
|
font-size: var(--text-sm);
|
|
}
|
|
.explorer-inline-notice-warning {
|
|
background: var(--sev-medium-bg);
|
|
color: var(--sev-medium);
|
|
}
|
|
.explorer-main-body {
|
|
flex: 1;
|
|
overflow: auto;
|
|
min-height: 0;
|
|
}
|
|
.explorer-main-body .code-viewer-body {
|
|
min-height: 100%;
|
|
}
|
|
.explorer-main-body .empty-state {
|
|
padding: var(--space-8) var(--space-4);
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
/* Gutter markers */
|
|
.line-gutter {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
.gutter-marker {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
}
|
|
.gutter-marker-spacer {
|
|
width: 8px;
|
|
height: 8px;
|
|
display: inline-block;
|
|
}
|
|
.gutter-marker.sev-high {
|
|
background: var(--sev-high);
|
|
}
|
|
.gutter-marker.sev-medium {
|
|
background: var(--sev-medium);
|
|
}
|
|
.gutter-marker.sev-low {
|
|
background: var(--sev-low);
|
|
}
|
|
|
|
/* Right panel */
|
|
.explorer-right {
|
|
border-left: 1px solid var(--border);
|
|
overflow-y: auto;
|
|
background: var(--bg);
|
|
}
|
|
.explorer-right-section {
|
|
padding: var(--space-3) var(--space-4);
|
|
border-bottom: 1px solid var(--border-light);
|
|
}
|
|
.explorer-right > .explorer-right-section:first-child {
|
|
border-bottom-color: var(--border);
|
|
min-height: var(--explorer-header-height);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
}
|
|
.explorer-right-section h3 {
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-semibold);
|
|
color: var(--text-tertiary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin: 0 0 var(--space-2) 0;
|
|
}
|
|
.explorer-file-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
.meta-text {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
.explorer-sev-breakdown {
|
|
display: flex;
|
|
gap: var(--space-1);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Severity badges */
|
|
.badge-sev {
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-medium);
|
|
padding: 1px 8px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.badge-sev-high {
|
|
background: var(--sev-high-bg);
|
|
color: var(--sev-high);
|
|
}
|
|
.badge-sev-medium {
|
|
background: var(--sev-medium-bg);
|
|
color: var(--sev-medium);
|
|
}
|
|
.badge-sev-low {
|
|
background: var(--sev-low-bg);
|
|
color: var(--sev-low);
|
|
}
|
|
|
|
/* Symbol items */
|
|
.explorer-symbol-list {
|
|
padding: var(--space-2);
|
|
}
|
|
.explorer-symbol-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-1) var(--space-2);
|
|
font-size: var(--text-sm);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.explorer-symbol-item:hover {
|
|
background: var(--bg-secondary);
|
|
}
|
|
.explorer-symbol-item.compact {
|
|
padding: 2px var(--space-2);
|
|
font-size: var(--text-xs);
|
|
}
|
|
.symbol-kind {
|
|
font-family: var(--font-mono);
|
|
font-weight: var(--weight-bold);
|
|
font-size: var(--text-xs);
|
|
width: 16px;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.symbol-kind-function {
|
|
color: var(--accent);
|
|
}
|
|
.symbol-kind-method {
|
|
color: var(--sev-medium);
|
|
}
|
|
.symbol-name {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-family: var(--font-mono);
|
|
}
|
|
.symbol-arity {
|
|
color: var(--text-tertiary);
|
|
font-size: var(--text-xs);
|
|
}
|
|
.explorer-symbol-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-2);
|
|
font-size: var(--text-xs);
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
.explorer-symbol-toggle-link {
|
|
display: block;
|
|
margin-top: var(--space-2);
|
|
background: none;
|
|
border: none;
|
|
color: var(--accent);
|
|
font-size: var(--text-xs);
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
.explorer-symbol-toggle-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.summary-toggle,
|
|
.function-selector-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
margin-left: var(--space-3);
|
|
font-size: var(--text-xs);
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
font-weight: var(--weight-normal, 400);
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
.function-selector-flat .function-selector-toggle {
|
|
margin-left: 0;
|
|
}
|
|
.function-selector-toggle > span {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Explorer findings sidebar list */
|
|
.explorer-findings-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
}
|
|
.explorer-finding-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-1) var(--space-2);
|
|
cursor: pointer;
|
|
border-radius: var(--radius-sm);
|
|
font-size: var(--text-xs);
|
|
transition: background 0.1s;
|
|
}
|
|
.explorer-finding-item:hover {
|
|
background: var(--bg-secondary);
|
|
}
|
|
.explorer-finding-item.active {
|
|
background: var(--accent-light);
|
|
}
|
|
.finding-sev-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
.finding-sev-dot.sev-high {
|
|
background: var(--sev-high);
|
|
}
|
|
.finding-sev-dot.sev-medium {
|
|
background: var(--sev-medium);
|
|
}
|
|
.finding-sev-dot.sev-low {
|
|
background: var(--sev-low);
|
|
}
|
|
.finding-line {
|
|
font-family: var(--font-mono);
|
|
color: var(--text-tertiary);
|
|
flex-shrink: 0;
|
|
min-width: 36px;
|
|
}
|
|
.finding-rule {
|
|
font-family: var(--font-mono);
|
|
font-weight: var(--weight-medium);
|
|
color: var(--text);
|
|
flex-shrink: 0;
|
|
}
|
|
.finding-msg {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Hotspot view */
|
|
.explorer-hotspot-list {
|
|
padding: var(--space-1) 0;
|
|
}
|
|
.hotspot-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--space-1) var(--space-3);
|
|
cursor: pointer;
|
|
font-size: var(--text-sm);
|
|
transition: background 0.1s;
|
|
}
|
|
.hotspot-item:hover {
|
|
background: var(--bg-secondary);
|
|
}
|
|
.hotspot-item.selected {
|
|
background: var(--accent-light);
|
|
}
|
|
.hotspot-name {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: var(--text);
|
|
}
|
|
.hotspot-count {
|
|
flex-shrink: 0;
|
|
margin-left: var(--space-2);
|
|
}
|
|
|
|
/* Explorer hint text */
|
|
.explorer-hint {
|
|
padding: var(--space-4);
|
|
font-size: var(--text-sm);
|
|
color: var(--text-tertiary);
|
|
text-align: center;
|
|
}
|
|
|
|
/* Explorer flow timeline, compact variant */
|
|
.explorer-flow .flow-step {
|
|
padding: var(--space-1) var(--space-2);
|
|
}
|
|
.explorer-flow .flow-step-card {
|
|
padding-bottom: var(--space-1);
|
|
}
|
|
.flow-step-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
margin-bottom: 1px;
|
|
}
|
|
.flow-step-var {
|
|
font-size: var(--text-sm);
|
|
font-family: var(--font-mono);
|
|
}
|
|
.flow-step-callee {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-secondary);
|
|
}
|
|
.flow-step-loc {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-tertiary);
|
|
}
|
|
.analysis-workspace {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: var(--space-3);
|
|
height: 100%;
|
|
min-height: 0;
|
|
padding: var(--space-3) var(--space-4);
|
|
}
|
|
.analysis-workspace-with-inspector {
|
|
grid-template-columns: 320px minmax(0, 1fr);
|
|
}
|
|
.analysis-workspace-inspector-right {
|
|
grid-template-columns: minmax(0, 1fr) 320px;
|
|
}
|
|
.analysis-inspector {
|
|
overflow-y: auto;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
background: var(--bg);
|
|
padding: var(--space-3);
|
|
}
|
|
.analysis-inspector h3 {
|
|
margin: 0 0 var(--space-2);
|
|
font-size: var(--text-base);
|
|
}
|
|
.analysis-canvas {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
.analysis-graph-frame {
|
|
height: 100%;
|
|
min-height: 560px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
background: var(--bg);
|
|
}
|
|
.analysis-node-detail {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
.explorer-analysis-content {
|
|
padding: var(--space-3) var(--space-4);
|
|
}
|
|
|
|
/* Explorer responsive */
|
|
@media (max-width: 1200px) {
|
|
.explorer-page-code {
|
|
grid-template-columns: 260px 1fr;
|
|
}
|
|
.explorer-page-analysis {
|
|
grid-template-columns: 260px 1fr;
|
|
}
|
|
.explorer-page-code .explorer-right {
|
|
display: none;
|
|
}
|
|
.analysis-workspace-with-inspector {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
}
|
|
@media (max-width: 768px) {
|
|
.explorer-page-code {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.explorer-page-analysis {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.explorer-left {
|
|
display: none;
|
|
}
|
|
.explorer-file-header-top {
|
|
flex-direction: column;
|
|
}
|
|
.explorer-file-header-copy {
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
}
|
|
.explorer-function-picker {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
.function-selector-flat > .function-selector-field {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
Debug Views
|
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
|
|
/* Override .content padding/max-width when debug layout is inside it */
|
|
.content:has(.debug-layout) {
|
|
padding: 0;
|
|
max-width: none;
|
|
}
|
|
.debug-layout {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 0;
|
|
height: calc(100vh - var(--header-height));
|
|
}
|
|
|
|
/* Sidebar file tree */
|
|
.debug-sidebar {
|
|
width: 260px;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-right: 1px solid var(--border);
|
|
background: var(--bg);
|
|
overflow: hidden;
|
|
transition: width 0.15s ease;
|
|
}
|
|
.debug-sidebar.collapsed {
|
|
width: 0;
|
|
border-right: none;
|
|
}
|
|
.debug-sidebar-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--space-2) var(--space-3);
|
|
border-bottom: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
font-size: var(--text-sm);
|
|
font-weight: var(--font-medium);
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.debug-sidebar-toggle {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--text-tertiary);
|
|
padding: 2px 4px;
|
|
font-size: var(--text-base);
|
|
line-height: 1;
|
|
}
|
|
.debug-sidebar-toggle:hover {
|
|
color: var(--text);
|
|
}
|
|
.debug-sidebar-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
.debug-sidebar-expand {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-left: none;
|
|
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
|
|
cursor: pointer;
|
|
color: var(--text-tertiary);
|
|
padding: var(--space-2) 4px;
|
|
font-size: var(--text-base);
|
|
line-height: 1;
|
|
z-index: 10;
|
|
}
|
|
.debug-sidebar-expand:hover {
|
|
color: var(--text);
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
/* Main content area */
|
|
.debug-main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
padding: var(--space-3) var(--space-4);
|
|
}
|
|
|
|
/* Tab navigation */
|
|
.debug-tabs {
|
|
display: flex;
|
|
gap: var(--space-1);
|
|
border-bottom: 1px solid var(--border);
|
|
padding-bottom: 0;
|
|
overflow-x: auto;
|
|
}
|
|
.debug-tab {
|
|
padding: var(--space-2) var(--space-3);
|
|
font-size: var(--text-sm);
|
|
font-weight: var(--font-medium);
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
border-bottom: 2px solid transparent;
|
|
white-space: nowrap;
|
|
transition:
|
|
color var(--transition-fast),
|
|
border-color var(--transition-fast);
|
|
}
|
|
.debug-tab:hover {
|
|
color: var(--text);
|
|
}
|
|
.debug-tab-active {
|
|
color: var(--accent);
|
|
border-bottom-color: var(--accent);
|
|
}
|
|
|
|
/* Function selector */
|
|
.function-selector {
|
|
display: flex;
|
|
gap: var(--space-3);
|
|
align-items: center;
|
|
padding: var(--space-2) 0;
|
|
min-width: 0;
|
|
}
|
|
.function-selector-path {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
min-width: 0;
|
|
}
|
|
.function-selector-path-label {
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--font-medium);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
flex-shrink: 0;
|
|
}
|
|
.function-selector-path-value {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-sm);
|
|
color: var(--text);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 400px;
|
|
}
|
|
.function-selector-field {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
}
|
|
.function-selector-field label {
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--font-medium);
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
flex-shrink: 0;
|
|
}
|
|
.function-selector-select {
|
|
min-width: 0;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
padding: var(--space-1) var(--space-2);
|
|
font-size: var(--text-sm);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg);
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.explorer-file-header-top {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.explorer-file-header-copy,
|
|
.explorer-function-picker {
|
|
width: 100%;
|
|
flex-basis: 100%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.function-selector {
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.function-selector-field {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.function-selector-select {
|
|
min-width: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.debug-content {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
/* Split layout (graph + sidebar) */
|
|
.debug-split {
|
|
display: grid;
|
|
gap: var(--space-3);
|
|
height: 100%;
|
|
min-height: 500px;
|
|
}
|
|
.debug-split-full {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
.debug-split-with-sidebar {
|
|
grid-template-columns: minmax(0, 1fr) 300px;
|
|
}
|
|
.debug-split-main {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
background: var(--bg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.debug-split-sidebar {
|
|
overflow-y: auto;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
background: var(--bg);
|
|
padding: var(--space-3);
|
|
}
|
|
.debug-split-sidebar h3 {
|
|
margin: 0 0 var(--space-2);
|
|
font-size: var(--text-base);
|
|
}
|
|
|
|
/* Toolbar */
|
|
.debug-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: var(--space-2) var(--space-3);
|
|
border-bottom: 1px solid var(--border);
|
|
font-size: var(--text-sm);
|
|
}
|
|
.debug-toolbar label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
}
|
|
.debug-toolbar-label {
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--font-medium);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-secondary);
|
|
}
|
|
.debug-toolbar select {
|
|
padding: 2px var(--space-1);
|
|
font-size: var(--text-sm);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg);
|
|
}
|
|
|
|
/* Node detail */
|
|
.debug-node-detail {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
.debug-detail-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
.debug-detail-label {
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--font-medium);
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.debug-detail-value {
|
|
font-size: var(--text-sm);
|
|
word-break: break-all;
|
|
}
|
|
|
|
/* Graph renderer */
|
|
.graph-renderer-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 400px;
|
|
overflow: hidden;
|
|
background: var(--surface);
|
|
}
|
|
.graph-renderer {
|
|
flex: 1;
|
|
width: 100%;
|
|
min-height: 0;
|
|
background: var(--bg-secondary);
|
|
background-image: none;
|
|
background-size: 20px 20px;
|
|
}
|
|
.graph-surface {
|
|
position: relative;
|
|
flex: 1;
|
|
min-height: 0;
|
|
background: var(--surface);
|
|
}
|
|
.graph-surface > canvas {
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
.graph-loading-overlay {
|
|
position: absolute;
|
|
right: var(--space-3);
|
|
bottom: var(--space-3);
|
|
z-index: 3;
|
|
padding: 6px 10px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface);
|
|
color: var(--text-secondary);
|
|
font-size: var(--text-xs);
|
|
box-shadow: var(--shadow-sm);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
/* Graph toolbar */
|
|
.graph-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
padding: var(--space-1) var(--space-2);
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--bg-secondary);
|
|
flex-shrink: 0;
|
|
min-height: 40px;
|
|
}
|
|
.graph-toolbar-group,
|
|
.graph-toolbar-extras {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
flex-wrap: wrap;
|
|
}
|
|
.graph-toolbar-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
padding: 3px 6px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg);
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
font-size: 11px;
|
|
font-family: var(--font-mono);
|
|
line-height: 1;
|
|
transition:
|
|
background 100ms,
|
|
color 100ms,
|
|
border-color 100ms;
|
|
}
|
|
.graph-toolbar-btn:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
}
|
|
.graph-toolbar-btn:hover {
|
|
background: var(--bg-secondary);
|
|
color: var(--text);
|
|
border-color: var(--text-tertiary);
|
|
}
|
|
.graph-toolbar-btn-active {
|
|
background: var(--accent-light);
|
|
color: var(--accent);
|
|
border-color: var(--accent);
|
|
}
|
|
.graph-toolbar-zoom {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
color: var(--text-tertiary);
|
|
min-width: 36px;
|
|
text-align: center;
|
|
user-select: none;
|
|
}
|
|
.graph-toolbar-sep {
|
|
width: 1px;
|
|
height: 16px;
|
|
background: var(--border);
|
|
margin: 0 var(--space-1);
|
|
}
|
|
.graph-toolbar-field,
|
|
.graph-toolbar-check {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 0 4px;
|
|
color: var(--text-secondary);
|
|
font-size: 11px;
|
|
font-family: var(--font-mono);
|
|
}
|
|
.graph-toolbar-field span,
|
|
.graph-toolbar-check span {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.graph-toolbar-field-compact strong {
|
|
min-width: 10px;
|
|
color: var(--text);
|
|
font-size: 11px;
|
|
}
|
|
.graph-toolbar-input,
|
|
.graph-toolbar-select {
|
|
min-height: 26px;
|
|
padding: 4px 8px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
font-size: 12px;
|
|
font-family: var(--font-mono);
|
|
}
|
|
.graph-toolbar-input {
|
|
min-width: 150px;
|
|
}
|
|
.graph-toolbar-select {
|
|
max-width: 220px;
|
|
}
|
|
.graph-toolbar-range {
|
|
width: 72px;
|
|
}
|
|
.graph-toolbar-check input {
|
|
accent-color: var(--accent);
|
|
}
|
|
.graph-toolbar-status {
|
|
margin-left: auto;
|
|
}
|
|
.graph-toolbar-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4px 8px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface);
|
|
color: var(--text-secondary);
|
|
font-size: 11px;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* SSA viewer */
|
|
.ssa-viewer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
}
|
|
.ssa-header {
|
|
padding: var(--space-1) 0;
|
|
}
|
|
.ssa-block {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
background: var(--bg);
|
|
overflow: hidden;
|
|
}
|
|
.ssa-block-entry {
|
|
border-left: 3px solid var(--success);
|
|
}
|
|
.ssa-block-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-2) var(--space-3);
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border);
|
|
font-size: var(--text-sm);
|
|
}
|
|
.ssa-block-id {
|
|
font-family: var(--font-mono);
|
|
font-weight: var(--font-bold);
|
|
font-size: var(--text-sm);
|
|
}
|
|
.ssa-block-preds,
|
|
.ssa-block-succs {
|
|
font-size: var(--text-xs);
|
|
font-family: var(--font-mono);
|
|
}
|
|
.ssa-phi-section {
|
|
padding: var(--space-1) var(--space-3);
|
|
background: var(--accent-light);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.ssa-body-section {
|
|
padding: var(--space-1) var(--space-3);
|
|
}
|
|
.ssa-inst {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-sm);
|
|
line-height: 1.6;
|
|
white-space: nowrap;
|
|
}
|
|
.ssa-inst-phi {
|
|
color: var(--accent);
|
|
}
|
|
.ssa-value {
|
|
color: var(--accent);
|
|
font-weight: var(--font-semibold);
|
|
}
|
|
.ssa-eq {
|
|
color: var(--text-secondary);
|
|
}
|
|
.ssa-op {
|
|
color: var(--text);
|
|
font-weight: var(--font-medium);
|
|
}
|
|
.ssa-operands {
|
|
color: var(--text-secondary);
|
|
}
|
|
.ssa-var-name {
|
|
color: var(--text-tertiary);
|
|
font-style: italic;
|
|
}
|
|
.ssa-line-ref {
|
|
color: var(--text-tertiary);
|
|
font-size: var(--text-xs);
|
|
margin-left: var(--space-2);
|
|
}
|
|
.ssa-terminator {
|
|
padding: var(--space-1) var(--space-3);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
border-top: 1px solid var(--border);
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
/* Badge helpers */
|
|
.badge-info {
|
|
display: inline-block;
|
|
padding: 1px 6px;
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--font-medium);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--accent-light);
|
|
color: var(--accent);
|
|
}
|
|
.badge-success {
|
|
display: inline-block;
|
|
padding: 1px 6px;
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--font-medium);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--success-bg);
|
|
color: var(--success);
|
|
}
|
|
|
|
/* Cap badges */
|
|
.cap-badge {
|
|
display: inline-block;
|
|
padding: 1px 6px;
|
|
margin: 1px 2px;
|
|
font-size: var(--text-xs);
|
|
font-family: var(--font-mono);
|
|
font-weight: var(--font-medium);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-secondary);
|
|
}
|
|
.cap-badge-source {
|
|
background: var(--success-bg);
|
|
color: var(--success);
|
|
}
|
|
.cap-badge-sanitizer {
|
|
background: var(--accent-light);
|
|
color: var(--accent);
|
|
}
|
|
.cap-badge-sink {
|
|
background: var(--sev-high-bg);
|
|
color: var(--sev-high);
|
|
}
|
|
|
|
/* Taint viewer */
|
|
.taint-viewer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
}
|
|
.taint-events-section h3,
|
|
.taint-blocks-section h3 {
|
|
margin: 0 0 var(--space-2);
|
|
font-size: var(--text-base);
|
|
}
|
|
.taint-event {
|
|
border: 1px solid var(--sev-high);
|
|
border-radius: var(--radius);
|
|
padding: var(--space-2) var(--space-3);
|
|
margin-bottom: var(--space-2);
|
|
background: var(--sev-high-bg);
|
|
}
|
|
.taint-event-validated {
|
|
border-color: var(--success);
|
|
background: var(--success-bg);
|
|
}
|
|
.taint-event-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-weight: var(--font-medium);
|
|
font-size: var(--text-sm);
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
.taint-event-caps {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
font-size: var(--text-sm);
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
.taint-event-values {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
.taint-block-state {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
margin-bottom: var(--space-2);
|
|
overflow: hidden;
|
|
}
|
|
.taint-block-state-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-1) var(--space-3);
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border);
|
|
font-size: var(--text-sm);
|
|
}
|
|
.taint-block-state-values {
|
|
padding: var(--space-1) var(--space-3);
|
|
}
|
|
.taint-value {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-size: var(--text-sm);
|
|
padding: 2px 0;
|
|
}
|
|
.taint-value-id {
|
|
font-family: var(--font-mono);
|
|
font-weight: var(--font-semibold);
|
|
color: var(--accent);
|
|
min-width: 40px;
|
|
}
|
|
.taint-value-name {
|
|
font-family: var(--font-mono);
|
|
color: var(--text-secondary);
|
|
min-width: 80px;
|
|
}
|
|
.taint-value-caps {
|
|
display: flex;
|
|
gap: 2px;
|
|
}
|
|
|
|
/* Abstract interpretation */
|
|
.abstract-interp-viewer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
}
|
|
.abstract-block {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
}
|
|
.abstract-block-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-2) var(--space-3);
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border);
|
|
font-size: var(--text-sm);
|
|
}
|
|
.abstract-block-header:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
.abstract-subtitle {
|
|
margin: 0;
|
|
padding: var(--space-2) var(--space-3);
|
|
background: var(--bg);
|
|
border-bottom: 1px solid var(--border);
|
|
font-size: var(--text-xs);
|
|
color: var(--text-secondary);
|
|
line-height: 1.4;
|
|
}
|
|
.abstract-empty {
|
|
margin: 0;
|
|
padding: var(--space-2) var(--space-3);
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
.abstract-table {
|
|
width: 100%;
|
|
font-size: var(--text-sm);
|
|
border-collapse: collapse;
|
|
}
|
|
.abstract-table th {
|
|
text-align: left;
|
|
padding: var(--space-2);
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-medium, 500);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--text-secondary);
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.abstract-table td {
|
|
padding: var(--space-2);
|
|
border-top: 1px solid var(--border);
|
|
vertical-align: middle;
|
|
}
|
|
.abstract-table tbody tr:first-child td {
|
|
border-top: 0;
|
|
}
|
|
.abstract-table tbody tr:hover {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
/* Auth analysis (within abstract-block layout) */
|
|
.auth-detail-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: var(--space-1) 0;
|
|
background: var(--bg);
|
|
}
|
|
.auth-detail-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(160px, max-content) 1fr;
|
|
gap: var(--space-3);
|
|
align-items: baseline;
|
|
padding: var(--space-1) var(--space-3);
|
|
}
|
|
.auth-detail-label {
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-medium, 500);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--text-secondary);
|
|
}
|
|
.auth-detail-value {
|
|
font-size: var(--text-sm);
|
|
word-break: break-word;
|
|
color: var(--text);
|
|
}
|
|
.auth-subsection {
|
|
border-top: 1px solid var(--border);
|
|
background: var(--bg);
|
|
}
|
|
.abstract-block-header + .auth-subsection {
|
|
border-top: 0;
|
|
}
|
|
.auth-subsection-title {
|
|
padding: var(--space-2) var(--space-3);
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-semibold, 600);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-secondary);
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.auth-subject-chips {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
}
|
|
|
|
/* Symex viewer */
|
|
.symex-viewer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
}
|
|
.symex-section h3 {
|
|
margin: 0 0 var(--space-2);
|
|
font-size: var(--text-base);
|
|
}
|
|
.symex-roots {
|
|
display: flex;
|
|
gap: var(--space-1);
|
|
flex-wrap: wrap;
|
|
}
|
|
.symex-constraint {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
padding: var(--space-1) 0;
|
|
font-size: var(--text-sm);
|
|
}
|
|
.symex-polarity {
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--font-bold);
|
|
padding: 1px 6px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.symex-true {
|
|
background: var(--success-bg);
|
|
color: var(--success);
|
|
}
|
|
.symex-false {
|
|
background: var(--sev-high-bg);
|
|
color: var(--sev-high);
|
|
}
|
|
.symex-table {
|
|
width: 100%;
|
|
font-size: var(--text-sm);
|
|
border-collapse: collapse;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
}
|
|
.symex-table th {
|
|
text-align: left;
|
|
padding: var(--space-2);
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-medium, 500);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--text-secondary);
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.symex-table td {
|
|
padding: var(--space-2);
|
|
border-top: 1px solid var(--border);
|
|
vertical-align: middle;
|
|
}
|
|
.symex-table tbody tr:first-child td {
|
|
border-top: 0;
|
|
}
|
|
.symex-table tbody tr:hover {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
/* Summary explorer */
|
|
.summary-explorer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
.summary-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: var(--space-1) 0 var(--space-2);
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
.summary-table {
|
|
width: 100%;
|
|
font-size: var(--text-sm);
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
}
|
|
.summary-table th {
|
|
text-align: left;
|
|
padding: var(--space-1) var(--space-2);
|
|
font-size: var(--text-xs);
|
|
text-transform: uppercase;
|
|
color: var(--text-secondary);
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.summary-table td {
|
|
padding: var(--space-1) var(--space-2);
|
|
border-bottom: 1px solid var(--border);
|
|
vertical-align: top;
|
|
}
|
|
.summary-table tbody tr:hover {
|
|
background: var(--bg-secondary);
|
|
}
|
|
.summary-detail {
|
|
padding: var(--space-2) var(--space-3);
|
|
background: var(--bg-tertiary);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
.summary-ssa-detail {
|
|
margin-top: var(--space-2);
|
|
padding-top: var(--space-2);
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
.summary-ssa-detail h4 {
|
|
margin: 0 0 var(--space-1);
|
|
font-size: var(--text-sm);
|
|
color: var(--accent);
|
|
}
|
|
|
|
/* Debug landing */
|
|
.debug-landing {
|
|
text-align: center;
|
|
padding: var(--space-6) 0;
|
|
}
|
|
.debug-landing h2 {
|
|
margin: 0 0 var(--space-2);
|
|
}
|
|
.debug-landing-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
gap: var(--space-3);
|
|
margin-top: var(--space-4);
|
|
text-align: left;
|
|
}
|
|
.debug-landing-grid .card {
|
|
padding: var(--space-3);
|
|
}
|
|
.debug-landing-grid .card h3 {
|
|
margin: 0 0 var(--space-1);
|
|
font-size: var(--text-sm);
|
|
font-weight: var(--font-semibold);
|
|
}
|
|
.debug-landing-grid .card p {
|
|
margin: 0;
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Mono helper */
|
|
.mono {
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* ── Dark Theme ────────────────────────────────────────────────────── */
|
|
[data-theme='dark'] {
|
|
--bg: #15130f;
|
|
--bg-secondary: #1f1c16;
|
|
--bg-tertiary: #2a251d;
|
|
--bg-soft: #1f1c16;
|
|
--surface: #201d18;
|
|
--bg-hover: #2a251d;
|
|
--text: #f4f2eb;
|
|
--text-secondary: #d4cec3;
|
|
--text-tertiary: #a49b8c;
|
|
--muted: #a49b8c;
|
|
--subtle: #7c7468;
|
|
--border: #3b352a;
|
|
--border-light: #2f2a22;
|
|
--line: #3b352a;
|
|
--line-strong: #5a5042;
|
|
--accent: #98b8a3;
|
|
--accent-hover: #b4cdbb;
|
|
--accent-light: #223228;
|
|
--accent-contrast: #0d0c0a;
|
|
--sev-high: #dc7c72;
|
|
--sev-high-bg: #351d1a;
|
|
--sev-medium: #d2ad61;
|
|
--sev-medium-bg: #322719;
|
|
--sev-low: #98b8a3;
|
|
--sev-low-bg: #223228;
|
|
--success: #98b8a3;
|
|
--success-bg: #223228;
|
|
--conf-high: #98b8a3;
|
|
--conf-high-bg: #223228;
|
|
--conf-medium: #d2ad61;
|
|
--conf-medium-bg: #322719;
|
|
--conf-low: #a49b8c;
|
|
--conf-low-bg: #2a251d;
|
|
--shadow: 0 1px 3px rgba(0, 0, 0, 0.36);
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
--shadow-md: 0 4px 14px rgba(0, 0, 0, 0.34);
|
|
--shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.45);
|
|
--shadow-xl: 0 20px 56px rgba(0, 0, 0, 0.5);
|
|
--header-bg: rgba(21, 19, 15, 0.84);
|
|
color-scheme: dark;
|
|
}
|
|
|
|
[data-theme='dark'] body {
|
|
background: var(--bg);
|
|
}
|
|
|
|
[data-theme='dark'] .sidebar-logo-img,
|
|
[data-theme='hc-dark'] .sidebar-logo-img {
|
|
filter: invert(1);
|
|
}
|
|
|
|
/* ── High-Contrast Light Theme ─────────────────────────────────────── */
|
|
[data-theme='hc-light'] {
|
|
--bg: #ffffff;
|
|
--bg-secondary: #f2f2f2;
|
|
--bg-tertiary: #e2e2e2;
|
|
--text: #000000;
|
|
--text-secondary: #1a1a1a;
|
|
--text-tertiary: #2b2b2b;
|
|
--border: #000000;
|
|
--border-light: #4a4a4a;
|
|
--accent: #0000c8;
|
|
--accent-light: #d8d8ff;
|
|
--accent-contrast: #ffffff;
|
|
--sev-high: #b30000;
|
|
--sev-high-bg: #ffe0e0;
|
|
--sev-medium: #8a3b00;
|
|
--sev-medium-bg: #ffe7d2;
|
|
--sev-low: #00408a;
|
|
--sev-low-bg: #d6e8ff;
|
|
--success: #006e2e;
|
|
--success-bg: #d6f5dc;
|
|
--conf-high: #006e2e;
|
|
--conf-high-bg: #d6f5dc;
|
|
--conf-medium: #8a3b00;
|
|
--conf-medium-bg: #ffe7d2;
|
|
--conf-low: #2b2b2b;
|
|
--conf-low-bg: #e2e2e2;
|
|
--bg-soft: #f2f2f2;
|
|
--surface: #ffffff;
|
|
--bg-hover: #e2e2e2;
|
|
--muted: #2b2b2b;
|
|
--subtle: #4a4a4a;
|
|
--line: #000000;
|
|
--line-strong: #4a4a4a;
|
|
--accent-hover: #0000a0;
|
|
--green: #006e2e;
|
|
--amber: #8a3b00;
|
|
--red: #b30000;
|
|
--shadow: 0 0 0 1px #000000;
|
|
--shadow-sm: 0 0 0 1px #000000;
|
|
--shadow-md: 0 0 0 1px #000000;
|
|
--shadow-lg: 0 0 0 2px #000000;
|
|
--shadow-xl: 0 0 0 2px #000000;
|
|
--header-bg: rgba(255, 255, 255, 0.92);
|
|
color-scheme: light;
|
|
}
|
|
|
|
[data-theme='hc-light'] body {
|
|
background: var(--bg);
|
|
}
|
|
|
|
/* ── High-Contrast Dark Theme ──────────────────────────────────────── */
|
|
[data-theme='hc-dark'] {
|
|
--bg: #000000;
|
|
--bg-secondary: #0d0d0d;
|
|
--bg-tertiary: #1a1a1a;
|
|
--text: #ffffff;
|
|
--text-secondary: #ededed;
|
|
--text-tertiary: #d4d4d4;
|
|
--border: #ffffff;
|
|
--border-light: #b8b8b8;
|
|
--accent: #8ab4ff;
|
|
--accent-light: #1a2540;
|
|
--accent-contrast: #000000;
|
|
--sev-high: #ff8a80;
|
|
--sev-high-bg: #3a0000;
|
|
--sev-medium: #ffc266;
|
|
--sev-medium-bg: #3a2200;
|
|
--sev-low: #82c8ff;
|
|
--sev-low-bg: #00263d;
|
|
--success: #7cf09a;
|
|
--success-bg: #002e15;
|
|
--conf-high: #7cf09a;
|
|
--conf-high-bg: #002e15;
|
|
--conf-medium: #ffc266;
|
|
--conf-medium-bg: #3a2200;
|
|
--conf-low: #d4d4d4;
|
|
--conf-low-bg: #1a1a1a;
|
|
--bg-soft: #0d0d0d;
|
|
--surface: #0d0d0d;
|
|
--bg-hover: #1a1a1a;
|
|
--muted: #d4d4d4;
|
|
--subtle: #b8b8b8;
|
|
--line: #ffffff;
|
|
--line-strong: #b8b8b8;
|
|
--accent-hover: #b8d4ff;
|
|
--green: #7cf09a;
|
|
--amber: #ffc266;
|
|
--red: #ff8a80;
|
|
--shadow: 0 0 0 1px #ffffff;
|
|
--shadow-sm: 0 0 0 1px #ffffff;
|
|
--shadow-md: 0 0 0 1px #ffffff;
|
|
--shadow-lg: 0 0 0 2px #ffffff;
|
|
--shadow-xl: 0 0 0 2px #ffffff;
|
|
--header-bg: rgba(0, 0, 0, 0.92);
|
|
color-scheme: dark;
|
|
}
|
|
|
|
[data-theme='hc-dark'] body {
|
|
background: var(--bg);
|
|
}
|
|
|
|
/* High-contrast: bolder borders and focus rings on common surfaces. */
|
|
[data-theme='hc-light'] .btn,
|
|
[data-theme='hc-dark'] .btn,
|
|
[data-theme='hc-light'] input,
|
|
[data-theme='hc-dark'] input,
|
|
[data-theme='hc-light'] select,
|
|
[data-theme='hc-dark'] select,
|
|
[data-theme='hc-light'] textarea,
|
|
[data-theme='hc-dark'] textarea {
|
|
border-width: 2px;
|
|
}
|
|
[data-theme='hc-light'] :focus-visible,
|
|
[data-theme='hc-dark'] :focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ── Loading Spinner ───────────────────────────────────────────────── */
|
|
.loading {
|
|
flex-direction: row;
|
|
gap: var(--space-3);
|
|
}
|
|
.spinner {
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid var(--border);
|
|
border-top-color: var(--accent);
|
|
border-radius: 50%;
|
|
animation: spinner-rotate 0.7s linear infinite;
|
|
flex-shrink: 0;
|
|
}
|
|
.loading-message {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-tertiary);
|
|
}
|
|
@keyframes spinner-rotate {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* ── Error State Polish ────────────────────────────────────────────── */
|
|
.error-state {
|
|
color: var(--text);
|
|
}
|
|
.error-state h3 {
|
|
font-size: var(--text-lg);
|
|
color: var(--sev-high);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
.error-state p {
|
|
color: var(--text-secondary);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
.error-state .error-hint {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-tertiary);
|
|
}
|
|
.error-state .error-retry {
|
|
margin-top: var(--space-3);
|
|
}
|
|
|
|
/* ── Buttons: ghost + icon variants ────────────────────────────────── */
|
|
.btn-secondary {
|
|
background: var(--bg);
|
|
color: var(--text-secondary);
|
|
border-color: var(--border);
|
|
}
|
|
.btn-secondary:hover {
|
|
background: var(--bg-secondary);
|
|
color: var(--text);
|
|
}
|
|
.btn-ghost {
|
|
background: transparent;
|
|
border-color: transparent;
|
|
color: var(--text-secondary);
|
|
}
|
|
.btn-ghost:hover {
|
|
background: var(--bg-secondary);
|
|
border-color: transparent;
|
|
color: var(--text);
|
|
}
|
|
.btn-icon {
|
|
padding: 6px;
|
|
width: 30px;
|
|
height: 30px;
|
|
justify-content: center;
|
|
}
|
|
.btn-icon.btn-sm {
|
|
padding: 4px;
|
|
width: 26px;
|
|
height: 26px;
|
|
}
|
|
|
|
/* ── Toaster ───────────────────────────────────────────────────────── */
|
|
.toaster {
|
|
position: fixed;
|
|
bottom: var(--space-5);
|
|
right: var(--space-5);
|
|
z-index: 1000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
pointer-events: none;
|
|
max-width: 420px;
|
|
}
|
|
.toast {
|
|
pointer-events: auto;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--space-3);
|
|
padding: var(--space-3) var(--space-4);
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-left: 3px solid var(--text-tertiary);
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow-lg);
|
|
font-size: var(--text-sm);
|
|
animation: toast-in 0.16s ease-out;
|
|
}
|
|
.toast-info {
|
|
border-left-color: var(--sev-low);
|
|
}
|
|
.toast-success {
|
|
border-left-color: var(--success);
|
|
}
|
|
.toast-warning {
|
|
border-left-color: var(--sev-medium);
|
|
}
|
|
.toast-error {
|
|
border-left-color: var(--sev-high);
|
|
}
|
|
.toast-body {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.toast-title {
|
|
font-weight: var(--weight-semibold);
|
|
margin-bottom: 2px;
|
|
color: var(--text);
|
|
}
|
|
.toast-message {
|
|
color: var(--text-secondary);
|
|
word-wrap: break-word;
|
|
}
|
|
.toast-close {
|
|
flex-shrink: 0;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-tertiary);
|
|
cursor: pointer;
|
|
padding: 2px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.toast-close:hover {
|
|
color: var(--text);
|
|
background: var(--bg-secondary);
|
|
}
|
|
@keyframes toast-in {
|
|
from {
|
|
transform: translateY(8px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* ── Theme Toggle ──────────────────────────────────────────────────── */
|
|
.theme-toggle {
|
|
color: var(--text-secondary);
|
|
}
|
|
.theme-toggle:hover {
|
|
color: var(--text);
|
|
}
|
|
|
|
/* ── Palette Trigger Button ────────────────────────────────────────── */
|
|
.palette-trigger {
|
|
color: var(--text-tertiary);
|
|
gap: 8px;
|
|
background: var(--bg-secondary);
|
|
border-color: var(--border);
|
|
}
|
|
.palette-trigger:hover {
|
|
color: var(--text);
|
|
background: var(--bg-tertiary);
|
|
}
|
|
.palette-trigger kbd {
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
padding: 1px 5px;
|
|
font-size: var(--text-xs);
|
|
font-family: var(--font);
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
/* ── Command Palette ───────────────────────────────────────────────── */
|
|
.palette-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 999;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding-top: 12vh;
|
|
}
|
|
.palette-backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(10, 10, 14, 0.45);
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
.palette {
|
|
position: relative;
|
|
width: min(560px, 92vw);
|
|
max-height: 70vh;
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-xl);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
.palette-input {
|
|
width: 100%;
|
|
border: 0;
|
|
outline: 0;
|
|
padding: var(--space-4) var(--space-5);
|
|
font-size: var(--text-lg);
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
border-bottom: 1px solid var(--border);
|
|
font-family: var(--font);
|
|
}
|
|
.palette-input::placeholder {
|
|
color: var(--text-tertiary);
|
|
}
|
|
.palette-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: var(--space-2) 0;
|
|
overflow-y: auto;
|
|
}
|
|
.palette-list ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.palette-group-label {
|
|
font-size: var(--text-xs);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-tertiary);
|
|
padding: var(--space-2) var(--space-5) var(--space-1);
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
.palette-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: var(--space-2) var(--space-5);
|
|
cursor: pointer;
|
|
font-size: var(--text-base);
|
|
color: var(--text);
|
|
}
|
|
.palette-item.active {
|
|
background: var(--accent-light);
|
|
color: var(--text);
|
|
}
|
|
.palette-icon {
|
|
flex-shrink: 0;
|
|
display: inline-flex;
|
|
color: var(--text-tertiary);
|
|
}
|
|
.palette-label {
|
|
flex: 1;
|
|
min-width: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.palette-hint {
|
|
color: var(--text-tertiary);
|
|
font-size: var(--text-sm);
|
|
}
|
|
.palette-shortcut {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
padding: 1px 6px;
|
|
font-family: var(--font);
|
|
font-size: var(--text-xs);
|
|
color: var(--text-tertiary);
|
|
}
|
|
.palette-empty {
|
|
padding: var(--space-4) var(--space-5);
|
|
color: var(--text-tertiary);
|
|
font-size: var(--text-sm);
|
|
text-align: center;
|
|
}
|
|
|
|
/* ── Shortcuts Help Modal ──────────────────────────────────────────── */
|
|
.shortcuts-modal {
|
|
position: relative;
|
|
width: min(560px, 92vw);
|
|
max-height: 80vh;
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-xl);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
.shortcuts-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--space-4) var(--space-5);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.shortcuts-header h2 {
|
|
font-size: var(--text-xl);
|
|
font-weight: var(--weight-semibold);
|
|
color: var(--text);
|
|
margin: 0;
|
|
}
|
|
.shortcuts-body {
|
|
padding: var(--space-4) var(--space-5);
|
|
overflow-y: auto;
|
|
}
|
|
.shortcuts-body section {
|
|
margin-bottom: var(--space-5);
|
|
}
|
|
.shortcuts-body section:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.shortcuts-body h3 {
|
|
font-size: var(--text-xs);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-tertiary);
|
|
margin-bottom: var(--space-2);
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
.shortcuts-body dl {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
.shortcut-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-4);
|
|
font-size: var(--text-sm);
|
|
}
|
|
.shortcut-row dt {
|
|
flex: 0 0 130px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
}
|
|
.shortcut-row dd {
|
|
flex: 1;
|
|
color: var(--text-secondary);
|
|
}
|
|
.shortcut-row kbd,
|
|
.shortcuts-body kbd {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border);
|
|
border-bottom-width: 2px;
|
|
border-radius: var(--radius-sm);
|
|
padding: 2px 6px;
|
|
font-family: var(--font);
|
|
font-size: var(--text-xs);
|
|
color: var(--text);
|
|
}
|
|
.shortcut-sep {
|
|
color: var(--text-tertiary);
|
|
font-size: var(--text-xs);
|
|
margin: 0 var(--space-1);
|
|
}
|
|
|
|
/* ── Findings Row Cursor (j/k navigation) ──────────────────────────── */
|
|
tr.cursor {
|
|
box-shadow: inset 3px 0 0 var(--accent);
|
|
}
|
|
tr.cursor td {
|
|
background: var(--accent-light);
|
|
}
|
|
|
|
/* Editorial shell refinements */
|
|
h1,
|
|
h2 {
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
h3 {
|
|
font-family: var(--font);
|
|
font-size: 1rem;
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
|
|
.nav-label {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.nav-badge {
|
|
margin-left: auto;
|
|
min-width: 26px;
|
|
padding: 1px 7px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface);
|
|
color: var(--muted);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.68rem;
|
|
line-height: 1.45;
|
|
text-align: center;
|
|
}
|
|
|
|
.nav-link.active .nav-badge {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.filter-count,
|
|
.page-header-sub {
|
|
color: var(--muted);
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
.filter-bar,
|
|
.rules-filters,
|
|
.triage-controls,
|
|
.log-filters {
|
|
gap: 10px;
|
|
padding: 0;
|
|
}
|
|
|
|
.filter-bar select,
|
|
.filter-bar input,
|
|
.rules-filters select,
|
|
.rules-filters input,
|
|
.triage-search {
|
|
min-height: 36px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tabs,
|
|
.triage-tabs-row,
|
|
.config-tabs,
|
|
.scan-detail-tabs,
|
|
.debug-tabs,
|
|
.explorer-view-tabs {
|
|
border-bottom-color: var(--line);
|
|
}
|
|
|
|
.tab.active,
|
|
.triage-tab.active,
|
|
.config-tab.active,
|
|
.scan-detail-tab.active,
|
|
.debug-tab-active,
|
|
.explorer-view-tab.active {
|
|
color: var(--accent);
|
|
border-bottom-color: var(--accent);
|
|
}
|
|
|
|
.triage-hero {
|
|
margin-bottom: var(--space-6);
|
|
padding-bottom: var(--space-5);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.triage-hero-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
color: var(--text);
|
|
letter-spacing: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.triage-hero-toggle,
|
|
.triage-rule-more,
|
|
.triage-rule-clear,
|
|
.status-note-toggle,
|
|
.baseline-link,
|
|
.explorer-symbol-toggle-link,
|
|
.flow-expand-toggle {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.triage-state-chip,
|
|
.rule-chip,
|
|
.triage-tab-count,
|
|
.finding-group-count,
|
|
.finding-group-sev-pill,
|
|
.badge-sev,
|
|
.tree-node-badge,
|
|
.graph-toolbar-pill,
|
|
.pill,
|
|
.lang-badge,
|
|
.compare-scan-pill,
|
|
.compare-badge--new,
|
|
.compare-badge--fixed,
|
|
.compare-badge--changed,
|
|
.compare-badge--unchanged {
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.triage-state-chip,
|
|
.rule-chip,
|
|
.finding-group-sev-pill,
|
|
.baseline-strip,
|
|
.compare-select-bar,
|
|
.bulk-action-bar,
|
|
.scan-progress,
|
|
.status-control,
|
|
.triage-actions,
|
|
.config-section-header,
|
|
.raw-editor-header {
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.triage-state-chip.active,
|
|
.rule-chip.active,
|
|
.log-filter-btn.active,
|
|
.graph-toolbar-btn-active,
|
|
.mode-btn.active,
|
|
.tree-node.selected,
|
|
.explorer-finding-item.active,
|
|
.hotspot-item.selected {
|
|
background: var(--accent-light);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.rule-row.selected td,
|
|
tr.selected td {
|
|
background: var(--accent-light);
|
|
}
|
|
|
|
.bulk-action-bar,
|
|
.compare-select-bar {
|
|
color: var(--accent);
|
|
background: var(--accent-light);
|
|
border-color: var(--line);
|
|
}
|
|
|
|
.finding-group {
|
|
background: var(--surface);
|
|
border-color: var(--line);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.finding-group-header,
|
|
.finding-row-details,
|
|
.config-section-header,
|
|
.raw-editor-header,
|
|
.rules-table th,
|
|
.graph-toolbar,
|
|
.ssa-block-header,
|
|
.abstract-block-header,
|
|
.taint-block-state-header,
|
|
.auth-subsection-title,
|
|
.summary-table th,
|
|
.symex-table th,
|
|
.abstract-table th {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.finding-row {
|
|
background: var(--surface);
|
|
border-bottom-color: var(--border-light);
|
|
}
|
|
|
|
.finding-row:hover:not(.selected) {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.finding-row-sev,
|
|
.severity-pill,
|
|
.status-badge,
|
|
.finding-row-state,
|
|
.badge-info,
|
|
.badge-success,
|
|
.cap-badge,
|
|
.badge-custom,
|
|
.badge-builtin,
|
|
.badge-source,
|
|
.badge-sanitizer,
|
|
.badge-sink,
|
|
.sanitizer-badge-none,
|
|
.sanitizer-badge-bypassed,
|
|
.sanitizer-badge-applied {
|
|
border-radius: var(--radius-sm);
|
|
border: 1px solid currentColor;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.severity-pill {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.finding-rule-id {
|
|
font-family: var(--font-mono);
|
|
font-size: 1rem;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.file-location {
|
|
color: var(--accent);
|
|
border-bottom: 1px solid var(--line-strong);
|
|
}
|
|
|
|
.path-trace {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
|
gap: var(--space-3);
|
|
align-items: stretch;
|
|
margin: var(--space-4) 0 var(--space-5);
|
|
}
|
|
|
|
.path-trace-card {
|
|
min-width: 0;
|
|
padding: var(--space-3) var(--space-4);
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.path-trace-label {
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
color: var(--muted);
|
|
font-size: 0.72rem;
|
|
font-weight: var(--weight-semibold);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.path-trace-path {
|
|
display: block;
|
|
overflow-wrap: anywhere;
|
|
color: var(--text);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-sm);
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.path-trace-arrow {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--subtle);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-lg);
|
|
}
|
|
|
|
.overview-stat-card,
|
|
.metric-card,
|
|
.scan-stat-card,
|
|
.compare-card,
|
|
.evidence-card,
|
|
.state-transition-card,
|
|
.debug-split-main,
|
|
.debug-split-sidebar,
|
|
.analysis-inspector,
|
|
.analysis-graph-frame,
|
|
.ssa-block,
|
|
.abstract-block,
|
|
.taint-event,
|
|
.taint-block-state,
|
|
.symex-table,
|
|
.abstract-table,
|
|
.symex-constraint,
|
|
.summary-table {
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.overview-stat-card {
|
|
text-align: left;
|
|
}
|
|
|
|
.stat-label,
|
|
.metric-card-label,
|
|
.scan-stat-label,
|
|
.health-eyebrow,
|
|
.state-machine-label,
|
|
.detail-section h3,
|
|
.section-toggle,
|
|
.rule-detail-label,
|
|
.config-kv-key,
|
|
.debug-toolbar-label,
|
|
.debug-detail-label,
|
|
.function-selector-path-label,
|
|
.function-selector-field label,
|
|
.explorer-file-label,
|
|
.explorer-right-section h3,
|
|
.palette-group-label,
|
|
.shortcuts-body h3 {
|
|
color: var(--muted);
|
|
font-size: 0.72rem;
|
|
font-weight: var(--weight-semibold);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.stat-value,
|
|
.metric-card-value,
|
|
.scan-stat-value,
|
|
.health-number,
|
|
.health-grade-letter,
|
|
.kv-number,
|
|
.backlog-stat-value {
|
|
font-family: var(--font-display);
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.health-card,
|
|
.backlog-card {
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.health-grade-block,
|
|
.grade-a,
|
|
.grade-b {
|
|
background: var(--green);
|
|
}
|
|
|
|
.grade-c {
|
|
background: var(--amber);
|
|
}
|
|
|
|
.grade-d,
|
|
.grade-f {
|
|
background: var(--red);
|
|
}
|
|
|
|
.health-posture.posture-success {
|
|
color: var(--green);
|
|
}
|
|
|
|
.health-posture.posture-warning {
|
|
color: var(--amber);
|
|
}
|
|
|
|
.health-posture.posture-danger {
|
|
color: var(--red);
|
|
}
|
|
|
|
.overview-fresh-banner,
|
|
.insight-success {
|
|
background: var(--accent-light);
|
|
border-color: var(--line);
|
|
}
|
|
|
|
.insight-warning {
|
|
background: var(--sev-medium-bg);
|
|
border-left-color: var(--amber);
|
|
}
|
|
|
|
.insight-info {
|
|
background: var(--accent-light);
|
|
border-left-color: var(--accent);
|
|
}
|
|
|
|
.badge-high,
|
|
.severity-pill-high,
|
|
.finding-row-sev.sev-high,
|
|
.badge-sev-high,
|
|
.finding-group-sev-pill.sev-high,
|
|
.badge-sink,
|
|
.cap-badge-sink {
|
|
background: var(--sev-high-bg);
|
|
color: var(--red);
|
|
}
|
|
|
|
.badge-medium,
|
|
.severity-pill-medium,
|
|
.finding-row-sev.sev-medium,
|
|
.badge-sev-medium,
|
|
.finding-group-sev-pill.sev-medium,
|
|
.badge-sanitizer,
|
|
.cap-badge-sanitizer {
|
|
background: var(--sev-medium-bg);
|
|
color: var(--amber);
|
|
}
|
|
|
|
.badge-low,
|
|
.severity-pill-low,
|
|
.finding-row-sev.sev-low,
|
|
.badge-sev-low,
|
|
.finding-group-sev-pill.sev-low,
|
|
.badge-source,
|
|
.cap-badge-source {
|
|
background: var(--accent-light);
|
|
color: var(--green);
|
|
}
|
|
|
|
.badge-status-open,
|
|
.badge-triage-open {
|
|
background: var(--sev-high-bg);
|
|
color: var(--red);
|
|
}
|
|
|
|
.badge-status-validated,
|
|
.badge-triage-fixed,
|
|
.status-badge.completed {
|
|
background: var(--success-bg);
|
|
color: var(--green);
|
|
}
|
|
|
|
.badge-status-suppressed,
|
|
.badge-triage-suppressed,
|
|
.badge-triage-false_positive,
|
|
.badge-triage-accepted_risk {
|
|
background: var(--bg-secondary);
|
|
color: var(--muted);
|
|
}
|
|
|
|
.badge-triage-investigating,
|
|
.status-badge.running {
|
|
background: var(--sev-medium-bg);
|
|
color: var(--amber);
|
|
}
|
|
|
|
.status-dot.completed,
|
|
.status-dot-fixed {
|
|
background: var(--green);
|
|
}
|
|
|
|
.status-dot.running,
|
|
.status-dot-running,
|
|
.status-dot-investigating {
|
|
background: var(--amber);
|
|
}
|
|
|
|
.status-dot-false_positive,
|
|
.status-dot-accepted_risk,
|
|
.status-dot-suppressed {
|
|
background: var(--muted);
|
|
}
|
|
|
|
.status-dot,
|
|
.triage-sev-dot,
|
|
.finding-sev-dot,
|
|
.gutter-marker,
|
|
.stage-dot,
|
|
.timing-legend-dot,
|
|
.confidence-swatch {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.progress-bar,
|
|
.confidence-bar,
|
|
.bucket-bar,
|
|
.owasp-bar,
|
|
.severity-stack,
|
|
.timing-bar {
|
|
border-radius: var(--radius-sm);
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.progress-bar-fill,
|
|
.owasp-fill {
|
|
background: var(--accent);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.stage-step.active .stage-dot {
|
|
background: var(--accent);
|
|
box-shadow: 0 0 0 3px var(--accent-light);
|
|
}
|
|
|
|
.stage-step.done .stage-dot {
|
|
background: var(--green);
|
|
}
|
|
|
|
.tok-keyword {
|
|
color: #b8d5c3;
|
|
}
|
|
|
|
.tok-string {
|
|
color: #b7d88b;
|
|
}
|
|
|
|
.tok-comment {
|
|
color: #858b96;
|
|
}
|
|
|
|
.tok-number {
|
|
color: #d1bc83;
|
|
}
|
|
|
|
.tok-function {
|
|
color: #e6c07b;
|
|
}
|
|
|
|
.code-viewer-body,
|
|
.code-block,
|
|
.log-viewer,
|
|
.raw-editor-textarea,
|
|
.evidence-snippet,
|
|
.flow-step-snippet {
|
|
background: var(--terminal-bg);
|
|
border-color: var(--terminal-line);
|
|
color: var(--terminal-text);
|
|
}
|
|
|
|
.evidence-snippet {
|
|
border: 1px solid var(--terminal-line);
|
|
}
|
|
|
|
.code-viewer-body {
|
|
overflow: auto;
|
|
}
|
|
|
|
.code-viewer-body .code-line,
|
|
.code-block .code-line {
|
|
color: var(--terminal-text);
|
|
}
|
|
|
|
.code-viewer-body .line-number,
|
|
.code-block .line-number,
|
|
.log-time {
|
|
color: var(--terminal-muted);
|
|
}
|
|
|
|
.code-viewer-body .line-content,
|
|
.code-block .line-content {
|
|
color: var(--terminal-text);
|
|
}
|
|
|
|
.code-line.highlight-source {
|
|
background: rgba(28, 92, 56, 0.32);
|
|
border-left-color: var(--green);
|
|
}
|
|
|
|
.code-line.highlight-sink {
|
|
background: rgba(157, 47, 37, 0.32);
|
|
border-left-color: var(--red);
|
|
}
|
|
|
|
.code-line.highlight-finding,
|
|
.code-line.highlight-flow {
|
|
background: rgba(140, 99, 16, 0.28);
|
|
}
|
|
|
|
.code-modal {
|
|
background: var(--terminal-bg);
|
|
border: 1px solid var(--terminal-line);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.code-modal-header {
|
|
background: var(--terminal-bar);
|
|
border-bottom-color: var(--terminal-line);
|
|
}
|
|
|
|
.code-modal-title {
|
|
color: var(--terminal-text);
|
|
}
|
|
|
|
.log-entry {
|
|
border-bottom-color: var(--terminal-line);
|
|
}
|
|
|
|
.log-entry.log-warn {
|
|
background: rgba(140, 99, 16, 0.18);
|
|
}
|
|
|
|
.log-entry.log-error {
|
|
background: rgba(157, 47, 37, 0.22);
|
|
}
|
|
|
|
.log-message {
|
|
color: var(--terminal-text);
|
|
}
|
|
|
|
.raw-editor-textarea {
|
|
min-height: 520px;
|
|
}
|
|
|
|
.graph-renderer-container,
|
|
.graph-surface,
|
|
.graph-toolbar {
|
|
background: var(--surface);
|
|
background-image: none;
|
|
}
|
|
|
|
.graph-renderer {
|
|
background: var(--bg-secondary);
|
|
background-image: none;
|
|
}
|
|
|
|
.graph-loading-overlay,
|
|
.graph-toolbar-input,
|
|
.graph-toolbar-select,
|
|
.graph-toolbar-pill {
|
|
background: var(--surface);
|
|
backdrop-filter: none;
|
|
}
|
|
|
|
.mode-btn.active {
|
|
background: var(--accent);
|
|
color: var(--accent-contrast);
|
|
}
|
|
|
|
.palette,
|
|
.shortcuts-modal,
|
|
.scan-modal,
|
|
.suppress-modal,
|
|
.dropdown-menu {
|
|
background: var(--surface);
|
|
border-color: var(--line);
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.palette-backdrop,
|
|
.scan-modal-overlay,
|
|
.suppress-modal-overlay,
|
|
.code-modal-overlay {
|
|
background: rgba(13, 12, 10, 0.42);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.sidebar-header {
|
|
min-height: 64px;
|
|
padding: 10px 16px;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.content {
|
|
padding: 22px 16px 40px;
|
|
}
|
|
|
|
.header-bar {
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.triage-hero-title {
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.path-trace {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.path-trace-arrow {
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Route layout refinement
|
|
-------------------------------------------------------------------------- */
|
|
|
|
body {
|
|
font-size: 16px;
|
|
line-height: 1.58;
|
|
}
|
|
|
|
.content:has(.page-shell) {
|
|
max-width: none;
|
|
}
|
|
|
|
.page-shell {
|
|
width: min(100%, 1160px);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.overview-page {
|
|
width: min(100%, 1240px);
|
|
}
|
|
|
|
.findings-page,
|
|
.scans-page,
|
|
.scan-detail-page,
|
|
.scan-compare-page,
|
|
.rules-page,
|
|
.config-page {
|
|
width: min(100%, 1140px);
|
|
}
|
|
|
|
.triage-page {
|
|
width: min(100%, 1260px);
|
|
}
|
|
|
|
.finding-detail {
|
|
width: min(100%, 940px);
|
|
}
|
|
|
|
.page-action-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.page-action-push {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.page-header {
|
|
align-items: flex-end;
|
|
padding-bottom: var(--space-4);
|
|
margin-bottom: var(--space-5);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.page-header h2 {
|
|
font-size: 1.85rem;
|
|
line-height: 1.05;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.page-header-sub {
|
|
display: block;
|
|
max-width: 640px;
|
|
margin-left: 0;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.card,
|
|
.table-wrap,
|
|
.scan-progress,
|
|
.bulk-action-bar,
|
|
.compare-select-bar,
|
|
.config-section,
|
|
.finding-group,
|
|
.status-control {
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.card {
|
|
padding: var(--space-4);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.card-header {
|
|
padding-bottom: var(--space-2);
|
|
margin-bottom: var(--space-3);
|
|
border-bottom: 1px solid var(--line);
|
|
color: var(--muted);
|
|
font-size: 0.68rem;
|
|
}
|
|
|
|
.table-wrap {
|
|
overflow: auto;
|
|
box-shadow: none;
|
|
}
|
|
|
|
th {
|
|
padding: 10px 14px;
|
|
font-size: 0.68rem;
|
|
}
|
|
|
|
td {
|
|
padding: 10px 14px;
|
|
font-size: 0.875rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
tbody tr:nth-child(even) td {
|
|
background: transparent;
|
|
}
|
|
|
|
tbody tr.clickable:hover td,
|
|
tbody tr.clickable:nth-child(even):hover td {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.badge,
|
|
.severity-pill,
|
|
.status-badge,
|
|
.lang-badge,
|
|
.badge-sev,
|
|
.badge-builtin,
|
|
.badge-custom,
|
|
.badge-source,
|
|
.badge-sanitizer,
|
|
.badge-sink {
|
|
border-radius: 4px;
|
|
font-size: 0.66rem;
|
|
letter-spacing: 0.09em;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.status-badge {
|
|
border: 1px solid currentColor;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
|
|
.filter-bar {
|
|
padding: 10px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.filter-bar input,
|
|
.filter-bar select,
|
|
.rules-filters input,
|
|
.rules-filters select,
|
|
.triage-search,
|
|
.function-selector-select {
|
|
min-height: 34px;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.btn {
|
|
min-height: 34px;
|
|
padding: 7px 13px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.btn-sm {
|
|
min-height: 28px;
|
|
padding: 4px 9px;
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.stat-value,
|
|
.metric-card-value,
|
|
.scan-stat-value,
|
|
.compare-card .compare-card-value,
|
|
.health-number,
|
|
.health-grade-letter,
|
|
.kv-number,
|
|
.backlog-stat-value {
|
|
font-family: var(--font-mono);
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
/* Overview */
|
|
.overview-page .baseline-strip {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.overview-page .overview-stat-grid {
|
|
gap: 10px;
|
|
margin-bottom: var(--space-5);
|
|
}
|
|
|
|
.overview-page .overview-stat-grid-5 {
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
}
|
|
|
|
.overview-page .overview-stat-card {
|
|
min-height: 82px;
|
|
padding: 14px 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.overview-page .stat-value {
|
|
font-size: 1.45rem;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.overview-page .stat-subtitle {
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.overview-page .health-card {
|
|
padding: 22px 28px;
|
|
margin-bottom: var(--space-5);
|
|
border-top: 3px solid var(--health-accent, var(--accent));
|
|
}
|
|
|
|
.overview-page .health-headline {
|
|
grid-template-columns: auto minmax(180px, 0.55fr) minmax(360px, 1.45fr);
|
|
gap: var(--space-5);
|
|
align-items: center;
|
|
}
|
|
|
|
.overview-page .health-grade-block {
|
|
width: 96px;
|
|
height: 96px;
|
|
}
|
|
|
|
.overview-page .health-grade-letter {
|
|
font-size: 4rem;
|
|
}
|
|
|
|
.overview-page .health-number {
|
|
font-size: 3.25rem;
|
|
}
|
|
|
|
.overview-page .health-of {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.overview-page .health-posture {
|
|
font-size: 0.85rem;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.overview-page .health-eyebrow {
|
|
margin-bottom: var(--space-3);
|
|
font-size: 0.65rem;
|
|
}
|
|
|
|
.overview-page .health-components {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding-left: var(--space-5);
|
|
border-left: 1px solid var(--border);
|
|
justify-content: center;
|
|
}
|
|
|
|
.overview-page .health-component {
|
|
display: grid;
|
|
grid-template-columns: minmax(120px, 1.1fr) 1fr auto;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: 0;
|
|
background: none;
|
|
}
|
|
|
|
.overview-page .health-component-label {
|
|
font-size: 0.72rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.overview-page .health-component-bar-track {
|
|
height: 4px;
|
|
background: var(--line);
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.overview-page .health-component-fill {
|
|
height: 100%;
|
|
background: var(--health-accent, var(--accent));
|
|
border-radius: 2px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.overview-page .health-component-score {
|
|
font-size: 0.82rem;
|
|
font-family: var(--font-mono);
|
|
color: var(--text);
|
|
text-align: right;
|
|
min-width: 26px;
|
|
}
|
|
|
|
.overview-page .overview-fresh-banner {
|
|
margin-bottom: var(--space-4);
|
|
padding: 12px 16px;
|
|
border-color: var(--line);
|
|
}
|
|
|
|
.overview-page .overview-chart-grid {
|
|
grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.72fr) minmax(
|
|
220px,
|
|
0.68fr
|
|
);
|
|
gap: var(--space-4);
|
|
margin-bottom: var(--space-5);
|
|
}
|
|
|
|
.overview-page .overview-chart-grid .card {
|
|
min-height: 210px;
|
|
}
|
|
|
|
.overview-page .overview-chart-grid .card:nth-child(1) {
|
|
grid-column: 1;
|
|
grid-row: 1 / 3;
|
|
min-height: 430px;
|
|
}
|
|
|
|
.overview-page .overview-chart-grid .card:nth-child(2) {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.overview-page .overview-chart-grid .card:nth-child(3) {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
}
|
|
|
|
.overview-page .overview-chart-grid .card:nth-child(4) {
|
|
grid-column: 3;
|
|
grid-row: 1 / 3;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.overview-page .chart-container {
|
|
min-height: 180px;
|
|
}
|
|
|
|
.overview-page .overview-table-grid {
|
|
gap: var(--space-4);
|
|
margin-bottom: var(--space-5);
|
|
}
|
|
|
|
.overview-page .overview-table-grid .card {
|
|
padding: 0;
|
|
}
|
|
|
|
.overview-page .overview-table-grid .card-header {
|
|
margin: 0;
|
|
padding: 13px 16px 10px;
|
|
}
|
|
|
|
.overview-page .overview-table-grid table {
|
|
min-width: 0;
|
|
}
|
|
|
|
.overview-page .overview-table-grid th,
|
|
.overview-page .overview-table-grid td {
|
|
padding: 9px 16px;
|
|
}
|
|
|
|
.overview-page .insight-list,
|
|
.overview-page .owasp-list,
|
|
.overview-page .confidence-dist,
|
|
.overview-page .kv-list {
|
|
padding: var(--space-3) var(--space-4);
|
|
}
|
|
|
|
.overview-page .backlog-card {
|
|
padding: 16px 20px;
|
|
margin-bottom: var(--space-5);
|
|
}
|
|
|
|
/* Findings list */
|
|
.findings-page .filter-bar {
|
|
position: sticky;
|
|
top: calc(var(--header-height) + 1px);
|
|
z-index: 3;
|
|
}
|
|
|
|
.findings-page .search-input {
|
|
flex: 1 1 260px;
|
|
max-width: 360px;
|
|
}
|
|
|
|
.findings-page table {
|
|
min-width: 1080px;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.findings-page .col-checkbox {
|
|
width: 42px;
|
|
}
|
|
|
|
.findings-page th:nth-child(2) {
|
|
width: 88px;
|
|
}
|
|
|
|
.findings-page th:nth-child(3) {
|
|
width: 118px;
|
|
}
|
|
|
|
.findings-page th:nth-child(4) {
|
|
width: 168px;
|
|
}
|
|
|
|
.findings-page th:nth-child(5) {
|
|
width: 160px;
|
|
}
|
|
|
|
.findings-page th:nth-child(7) {
|
|
width: 70px;
|
|
}
|
|
|
|
.findings-page th:nth-child(8) {
|
|
width: 96px;
|
|
}
|
|
|
|
.findings-page th:nth-child(9) {
|
|
width: 150px;
|
|
}
|
|
|
|
.findings-page td:nth-child(4),
|
|
.findings-page .cell-path {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.findings-page td:nth-child(4) {
|
|
color: var(--text);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.findings-page td:nth-child(5),
|
|
.findings-page td:nth-child(8) {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.findings-page .bulk-action-bar.visible {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.findings-page .pagination {
|
|
padding-top: var(--space-3);
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
tr.cursor td {
|
|
background: var(--accent-light);
|
|
}
|
|
|
|
/* Finding detail */
|
|
.finding-detail.detail-panel {
|
|
padding: 0;
|
|
}
|
|
|
|
.finding-detail .detail-title-row {
|
|
align-items: flex-start;
|
|
padding-bottom: var(--space-3);
|
|
margin-bottom: var(--space-3);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.finding-detail .finding-heading {
|
|
align-items: baseline;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.finding-detail .finding-rule-id {
|
|
font-size: 1rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.finding-detail .file-location {
|
|
margin-bottom: var(--space-2);
|
|
padding-bottom: 2px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.finding-detail .finding-meta {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.finding-detail .path-trace {
|
|
margin: var(--space-4) 0;
|
|
}
|
|
|
|
.finding-detail .path-trace-card {
|
|
padding: 12px 14px;
|
|
}
|
|
|
|
.finding-detail .status-control {
|
|
margin: var(--space-4) 0;
|
|
background: var(--surface);
|
|
}
|
|
|
|
.finding-detail .detail-section {
|
|
padding: 0;
|
|
margin: 0 0 var(--space-3);
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.finding-detail .detail-section:first-of-type {
|
|
padding: 0;
|
|
margin-top: 0;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.finding-detail .section-toggle {
|
|
margin: 0;
|
|
padding: 12px 14px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.finding-detail .section-body {
|
|
padding: 14px;
|
|
}
|
|
|
|
.finding-detail .section-body.collapsed {
|
|
display: none;
|
|
}
|
|
|
|
.finding-detail .evidence-card,
|
|
.finding-detail .state-transition-card {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.finding-detail .flow-step {
|
|
padding: 0 0 var(--space-2);
|
|
}
|
|
|
|
.finding-detail .flow-step-card {
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
/* Triage */
|
|
.triage-page .triage-hero {
|
|
padding: 0 0 var(--space-4);
|
|
margin-bottom: var(--space-4);
|
|
background: none;
|
|
border: none;
|
|
border-radius: 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.triage-page .triage-hero-row {
|
|
align-items: center;
|
|
gap: var(--space-5);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.triage-page .triage-hero-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
font-family: var(--font);
|
|
line-height: 1.2;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.triage-page .triage-hero-severity {
|
|
gap: var(--space-4);
|
|
flex-wrap: wrap;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.triage-page .triage-state-row {
|
|
margin-top: var(--space-3);
|
|
}
|
|
|
|
.triage-page .triage-tabs-row {
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
.triage-page .triage-controls {
|
|
padding: 10px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.triage-page .triage-search {
|
|
max-width: none;
|
|
background: var(--surface);
|
|
}
|
|
|
|
.triage-page .triage-rule-filter {
|
|
padding: 2px 0 var(--space-2);
|
|
}
|
|
|
|
.triage-page .finding-list {
|
|
gap: 10px;
|
|
}
|
|
|
|
.triage-page .finding-group-header {
|
|
padding: 10px 14px;
|
|
}
|
|
|
|
.triage-page .finding-row-main {
|
|
padding: 10px 14px;
|
|
}
|
|
|
|
.triage-page .finding-row-details {
|
|
padding: 12px 16px 14px 86px;
|
|
}
|
|
|
|
.triage-page .finding-row-sev {
|
|
min-width: 58px;
|
|
padding: 2px 8px;
|
|
}
|
|
|
|
.triage-page .finding-row-rule {
|
|
font-size: 0.84rem;
|
|
}
|
|
|
|
/* Scans and comparison */
|
|
.scans-page table {
|
|
min-width: 900px;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.scans-page th:nth-child(2) {
|
|
width: 150px;
|
|
}
|
|
|
|
.scans-page th:nth-child(4),
|
|
.scans-page th:nth-child(5) {
|
|
width: 110px;
|
|
}
|
|
|
|
.scans-page th:last-child {
|
|
width: 88px;
|
|
}
|
|
|
|
.scan-progress {
|
|
padding: 16px;
|
|
background: var(--surface);
|
|
}
|
|
|
|
.scan-progress-header h3 {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.stage-pipeline {
|
|
padding: 4px 0 8px;
|
|
}
|
|
|
|
.stage-step::after {
|
|
top: 13px;
|
|
left: calc(50% + 10px);
|
|
right: calc(-50% + 10px);
|
|
width: auto;
|
|
height: 1px;
|
|
transform: none;
|
|
}
|
|
|
|
.stage-label {
|
|
font-size: 0.68rem;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.scan-detail-page .scan-stat-grid {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 10px;
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.scan-detail-page .scan-stat-card {
|
|
padding: 14px 16px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
}
|
|
|
|
.scan-detail-page .scan-stat-value {
|
|
font-size: 1.15rem;
|
|
}
|
|
|
|
.scan-summary-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
|
|
gap: var(--space-4);
|
|
align-items: start;
|
|
}
|
|
|
|
.scan-summary-grid .card {
|
|
min-width: 0;
|
|
}
|
|
|
|
.scan-detail-card table {
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.scan-detail-card td:first-child {
|
|
color: var(--muted);
|
|
font-size: 0.78rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.scan-detail-card td:last-child {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.scan-timing-card {
|
|
align-self: stretch;
|
|
}
|
|
|
|
.timing-bar {
|
|
height: 18px;
|
|
border: 1px solid var(--line);
|
|
}
|
|
|
|
.timing-bar-segment {
|
|
font-size: 0;
|
|
}
|
|
|
|
.timing-legend {
|
|
gap: var(--space-2);
|
|
margin-top: var(--space-3);
|
|
}
|
|
|
|
.scan-detail-tabs,
|
|
.config-tabs,
|
|
.triage-tabs-row {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
|
|
.scan-compare-page .compare-header {
|
|
padding: 12px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.compare-summary-grid {
|
|
gap: 10px;
|
|
}
|
|
|
|
.compare-card {
|
|
padding: 14px 16px;
|
|
border-left-width: 2px;
|
|
}
|
|
|
|
.compare-card .compare-card-value {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.severity-delta {
|
|
padding-bottom: var(--space-3);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.compare-section {
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
background: var(--surface);
|
|
}
|
|
|
|
.compare-section-header,
|
|
.compare-group-header {
|
|
border-radius: 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.compare-section-body {
|
|
padding: 8px;
|
|
}
|
|
|
|
.compare-finding-row {
|
|
padding: 8px 10px;
|
|
border-left-width: 2px;
|
|
}
|
|
|
|
/* Rules */
|
|
.rules-page {
|
|
width: min(100%, 1240px);
|
|
}
|
|
|
|
.rules-layout {
|
|
grid-template-columns: minmax(0, 1fr) 380px;
|
|
gap: 0;
|
|
height: calc(100vh - 190px);
|
|
min-height: 520px;
|
|
overflow: hidden;
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.rules-list-panel,
|
|
.rules-detail-panel {
|
|
padding: 0;
|
|
background: var(--surface);
|
|
}
|
|
|
|
.rules-list-panel {
|
|
border-right: 1px solid var(--line);
|
|
}
|
|
|
|
.rules-filters {
|
|
margin: 0;
|
|
padding: 12px;
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
#rules-table-wrap {
|
|
height: calc(100% - 59px);
|
|
overflow: auto;
|
|
}
|
|
|
|
.rules-table {
|
|
min-width: 780px;
|
|
}
|
|
|
|
.rules-table th,
|
|
.rules-table td {
|
|
padding: 9px 11px;
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.rules-table th {
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.rules-detail-panel {
|
|
padding: 18px;
|
|
}
|
|
|
|
.rule-detail-card h3 {
|
|
font-family: var(--font-display);
|
|
font-size: 1.25rem;
|
|
line-height: 1.15;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.rule-detail-grid {
|
|
gap: 8px 14px;
|
|
}
|
|
|
|
/* Config */
|
|
.config-page {
|
|
width: min(100%, 1060px);
|
|
}
|
|
|
|
.config-tabs {
|
|
gap: var(--space-4);
|
|
margin-bottom: var(--space-5);
|
|
}
|
|
|
|
.config-tab {
|
|
padding: 9px 0;
|
|
}
|
|
|
|
.config-section {
|
|
margin-bottom: var(--space-4);
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.config-section-header {
|
|
padding: 13px 16px;
|
|
border: 0;
|
|
border-radius: 0;
|
|
border-bottom: 1px solid var(--line);
|
|
background: var(--surface);
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
|
|
.config-section-header:hover,
|
|
.config-section-header-static:hover {
|
|
background: var(--surface);
|
|
}
|
|
|
|
.config-section-body {
|
|
padding: 16px;
|
|
}
|
|
|
|
.config-help {
|
|
max-width: 760px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.config-kv-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 0 var(--space-5);
|
|
}
|
|
|
|
.config-kv-row {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.config-form-row {
|
|
grid-template-columns:
|
|
minmax(120px, 170px) minmax(220px, 1fr) minmax(120px, 180px)
|
|
auto;
|
|
}
|
|
|
|
.label-table th,
|
|
.label-table td {
|
|
padding: 9px 12px;
|
|
}
|
|
|
|
.raw-editor-textarea {
|
|
min-height: 560px;
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
/* Explorer */
|
|
.content:has(.explorer-page) {
|
|
padding: 0;
|
|
max-width: none;
|
|
}
|
|
|
|
.explorer-page {
|
|
height: calc(100vh - var(--header-height));
|
|
background: var(--bg-soft);
|
|
}
|
|
|
|
.explorer-page-code {
|
|
grid-template-columns: 300px minmax(0, 1fr) 320px;
|
|
}
|
|
|
|
.explorer-page-analysis {
|
|
grid-template-columns: 300px minmax(0, 1fr);
|
|
}
|
|
|
|
.explorer-left,
|
|
.explorer-main-shell,
|
|
.explorer-right {
|
|
background: var(--surface);
|
|
}
|
|
|
|
.explorer-left-header {
|
|
padding: 12px;
|
|
}
|
|
|
|
.explorer-mode-toggle {
|
|
background: transparent;
|
|
border: 1px solid var(--line);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.mode-btn {
|
|
padding: 7px 9px;
|
|
background: var(--surface);
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
.tree-node,
|
|
.hotspot-item {
|
|
padding: 4px 8px;
|
|
font-size: 0.75rem;
|
|
border-left-width: 2px;
|
|
}
|
|
|
|
.explorer-file-header {
|
|
min-height: 108px;
|
|
padding: 16px 20px 14px;
|
|
background: rgba(255, 255, 255, 0.86);
|
|
backdrop-filter: blur(14px);
|
|
-webkit-backdrop-filter: blur(14px);
|
|
}
|
|
|
|
.explorer-file-header-top {
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.explorer-file-label {
|
|
font-size: 0.68rem;
|
|
}
|
|
|
|
.explorer-file-path {
|
|
font-size: 0.86rem;
|
|
}
|
|
|
|
.explorer-view-tabs {
|
|
gap: var(--space-5);
|
|
}
|
|
|
|
.explorer-view-tab {
|
|
padding: 7px 0;
|
|
font-size: 0.84rem;
|
|
}
|
|
|
|
.explorer-main-body .empty-state {
|
|
min-height: 100%;
|
|
}
|
|
|
|
.explorer-right-section {
|
|
padding: 15px 18px;
|
|
}
|
|
|
|
.explorer-right > .explorer-right-section:first-child {
|
|
min-height: 108px;
|
|
}
|
|
|
|
.explorer-symbol-item,
|
|
.explorer-finding-item {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.explorer-analysis-content,
|
|
.analysis-workspace {
|
|
padding: 16px 18px;
|
|
}
|
|
|
|
.analysis-workspace-with-inspector,
|
|
.analysis-workspace-inspector-right {
|
|
grid-template-columns: minmax(280px, 0.34fr) minmax(0, 1fr);
|
|
}
|
|
|
|
.analysis-workspace-inspector-right {
|
|
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.34fr);
|
|
}
|
|
|
|
.analysis-inspector,
|
|
.analysis-graph-frame {
|
|
background: var(--surface);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* Debug */
|
|
.content:has(.debug-layout) {
|
|
padding: 0;
|
|
max-width: none;
|
|
}
|
|
|
|
.debug-layout {
|
|
background: var(--bg-soft);
|
|
}
|
|
|
|
.debug-main {
|
|
padding: 18px 22px;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.debug-tabs {
|
|
padding: 0 14px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.debug-tab {
|
|
padding: 10px 0;
|
|
margin-right: 22px;
|
|
font-size: 0.84rem;
|
|
}
|
|
|
|
.debug-content {
|
|
background: transparent;
|
|
}
|
|
|
|
.debug-split {
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.debug-split-main,
|
|
.debug-split-sidebar {
|
|
background: var(--surface);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.debug-toolbar {
|
|
padding: 12px;
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.overview-page .overview-stat-grid-5 {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.overview-page .overview-chart-grid,
|
|
.scan-summary-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.overview-page .overview-chart-grid .card:first-child,
|
|
.overview-page .overview-chart-grid .card:nth-child(4) {
|
|
grid-column: auto;
|
|
grid-row: auto;
|
|
min-height: 240px;
|
|
}
|
|
|
|
.rules-layout {
|
|
grid-template-columns: 1fr;
|
|
height: auto;
|
|
}
|
|
|
|
.rules-list-panel {
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
#rules-table-wrap {
|
|
height: 440px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.content:has(.page-shell) {
|
|
padding: 24px 18px 44px;
|
|
}
|
|
|
|
.page-header {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.overview-page .overview-stat-grid-5,
|
|
.scan-detail-page .scan-stat-grid,
|
|
.compare-summary-grid,
|
|
.config-kv-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.overview-page .health-headline {
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
}
|
|
|
|
.overview-page .health-components {
|
|
grid-column: 1 / -1;
|
|
border-left: 0;
|
|
border-top: 1px solid var(--line);
|
|
padding: var(--space-4) 0 0;
|
|
}
|
|
|
|
.triage-page .finding-row-main {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.triage-page .finding-row-actions {
|
|
display: none;
|
|
}
|
|
|
|
.triage-page .finding-row-details {
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.config-form-row,
|
|
.config-form-row.config-form-row-2col {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.overview-page .overview-stat-grid-5,
|
|
.scan-detail-page .scan-stat-grid,
|
|
.compare-summary-grid,
|
|
.config-kv-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.page-header h2 {
|
|
font-size: 1.55rem;
|
|
}
|
|
|
|
.triage-page .triage-hero-title {
|
|
font-size: 1.55rem;
|
|
}
|
|
|
|
.triage-page .triage-hero-severity {
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.path-trace {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.path-trace-arrow {
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
|
|
/* --------------------------------------------------------------------------
|
|
Targeted page fixes from visual QA
|
|
-------------------------------------------------------------------------- */
|
|
|
|
input[type='checkbox'] {
|
|
width: 16px;
|
|
height: 16px;
|
|
min-width: 16px;
|
|
min-height: 16px;
|
|
padding: 0;
|
|
margin: 0;
|
|
accent-color: var(--accent);
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Scans: compact operational table */
|
|
.scans-page {
|
|
width: min(100%, 1180px);
|
|
}
|
|
|
|
.scans-page .table-wrap {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.scans-table {
|
|
min-width: 940px;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.scans-table .scan-select-col {
|
|
width: 38px;
|
|
}
|
|
|
|
.scans-table .scan-status-col {
|
|
width: 140px;
|
|
}
|
|
|
|
.scans-table .scan-root-col {
|
|
width: auto;
|
|
}
|
|
|
|
.scans-table .scan-duration-col,
|
|
.scans-table .scan-findings-col {
|
|
width: 108px;
|
|
}
|
|
|
|
.scans-table .scan-languages-col {
|
|
width: 230px;
|
|
}
|
|
|
|
.scans-table .scan-started-col {
|
|
width: 110px;
|
|
}
|
|
|
|
.scans-table .scan-actions-col {
|
|
width: 82px;
|
|
}
|
|
|
|
.scans-table th,
|
|
.scans-table td {
|
|
padding: 12px 14px;
|
|
}
|
|
|
|
.scans-table tbody tr {
|
|
height: 62px;
|
|
}
|
|
|
|
.scans-table td {
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.scan-root-cell {
|
|
overflow: hidden;
|
|
color: var(--text);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.82rem;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.scan-number-cell {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.86rem;
|
|
color: var(--text);
|
|
}
|
|
|
|
.scan-language-list {
|
|
display: flex;
|
|
max-width: 100%;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
}
|
|
|
|
.scans-page .lang-badge {
|
|
margin: 0;
|
|
padding: 1px 6px;
|
|
border: 1px solid var(--line);
|
|
background: var(--bg-secondary);
|
|
color: var(--text-secondary);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.72rem;
|
|
line-height: 1.35;
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.scans-page .lang-badge-more {
|
|
color: var(--accent);
|
|
background: var(--accent-light);
|
|
}
|
|
|
|
.scan-actions-cell {
|
|
overflow: visible;
|
|
text-align: right;
|
|
}
|
|
|
|
.scan-actions-cell .btn-danger {
|
|
color: var(--red);
|
|
background: var(--surface);
|
|
}
|
|
|
|
/* Triage: compact single-row hero */
|
|
.triage-page .triage-hero-title {
|
|
font-size: 1.05rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.triage-page .triage-sev-count {
|
|
font-size: 0.98rem;
|
|
}
|
|
|
|
.triage-page .triage-sev-name {
|
|
font-size: 0.68rem;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.triage-page .triage-tab {
|
|
padding: 8px 12px;
|
|
font-size: 0.88rem;
|
|
}
|
|
|
|
.triage-page .triage-controls {
|
|
padding: 8px;
|
|
}
|
|
|
|
.triage-page .triage-control-btn {
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.triage-page .triage-search {
|
|
font-size: 0.86rem;
|
|
}
|
|
|
|
.triage-page .triage-result-count {
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.triage-page .triage-rule-filter {
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.84rem;
|
|
}
|
|
|
|
.triage-page .rule-chip {
|
|
padding: 3px 8px;
|
|
font-size: 0.74rem;
|
|
}
|
|
|
|
.triage-page .rule-chip-count {
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.triage-page .finding-row-main {
|
|
min-height: 56px;
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.triage-page .finding-row-title {
|
|
gap: 8px;
|
|
}
|
|
|
|
.triage-page .finding-row-rule {
|
|
max-width: min(58vw, 620px);
|
|
font-size: 0.82rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.triage-page .finding-row-meta {
|
|
gap: 10px;
|
|
font-size: 0.76rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.triage-page .finding-row-sev {
|
|
min-width: 52px;
|
|
padding: 2px 7px;
|
|
font-size: 0.64rem;
|
|
}
|
|
|
|
.triage-page .finding-row-investigate {
|
|
min-height: 30px;
|
|
padding: 5px 12px;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* Explorer and code: code surfaces stay intentionally dark */
|
|
.explorer-page-code .explorer-main-body,
|
|
.explorer-page-code .code-viewer-body,
|
|
.code-viewer-body,
|
|
.code-block,
|
|
.evidence-card .evidence-snippet,
|
|
.flow-step-snippet,
|
|
.raw-editor-textarea {
|
|
background: var(--terminal-bg);
|
|
color: var(--terminal-text);
|
|
}
|
|
|
|
.code-viewer-body,
|
|
.code-block,
|
|
.evidence-card .evidence-snippet,
|
|
.flow-step-snippet {
|
|
border-color: var(--terminal-line);
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.explorer-page-code .explorer-main-body {
|
|
border-top: 1px solid var(--terminal-line);
|
|
}
|
|
|
|
.explorer-page-code .code-line {
|
|
color: var(--terminal-text);
|
|
}
|
|
|
|
.explorer-page-code .line-number,
|
|
.code-viewer-body .line-number,
|
|
.code-block .line-number {
|
|
color: var(--terminal-muted);
|
|
}
|
|
|
|
.explorer-file-header .explorer-view-tabs {
|
|
gap: 16px;
|
|
overflow-x: visible;
|
|
}
|
|
|
|
.explorer-file-header .explorer-view-tab {
|
|
flex: 0 0 auto;
|
|
padding: 6px 0;
|
|
font-size: 0.74rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* Debug: make summary/analysis tables fit without horizontal wandering */
|
|
.debug-content .summary-table,
|
|
.debug-content .abstract-table,
|
|
.debug-content .symex-table {
|
|
min-width: 0;
|
|
table-layout: fixed;
|
|
font-size: 0.76rem;
|
|
}
|
|
|
|
.debug-content .summary-table th,
|
|
.debug-content .summary-table td,
|
|
.debug-content .abstract-table th,
|
|
.debug-content .abstract-table td,
|
|
.debug-content .symex-table th,
|
|
.debug-content .symex-table td {
|
|
padding: 5px 6px;
|
|
font-size: 0.74rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.summary-table th:nth-child(1) {
|
|
width: 27%;
|
|
}
|
|
|
|
.summary-table th:nth-child(2) {
|
|
width: 8%;
|
|
}
|
|
|
|
.summary-table th:nth-child(3) {
|
|
width: 6%;
|
|
}
|
|
|
|
.summary-table th:nth-child(4),
|
|
.summary-table th:nth-child(5),
|
|
.summary-table th:nth-child(6) {
|
|
width: 16%;
|
|
}
|
|
|
|
.summary-table th:nth-child(7) {
|
|
width: 11%;
|
|
}
|
|
|
|
.summary-table td {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.summary-table td:first-child,
|
|
.summary-table .mono {
|
|
font-size: 0.74rem;
|
|
}
|
|
|
|
.debug-content .cap-badge {
|
|
margin: 1px;
|
|
padding: 1px 5px;
|
|
font-size: 0.6rem;
|
|
line-height: 1.35;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.debug-detail-row {
|
|
gap: 8px;
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.debug-detail-label {
|
|
font-size: 0.66rem;
|
|
}
|
|
|
|
.debug-detail-value {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
/* Rules: custom-only checkbox */
|
|
.rules-custom-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: 34px;
|
|
padding: 0 10px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 4px;
|
|
background: var(--surface);
|
|
color: var(--text-secondary);
|
|
font-size: 0.84rem;
|
|
font-weight: var(--weight-medium);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ── Light-mode code surfaces ──────────────────────────────────────── */
|
|
[data-theme='light'] .code-block,
|
|
[data-theme='light'] .evidence-card .evidence-snippet,
|
|
[data-theme='light'] .flow-step-snippet,
|
|
[data-theme='light'] .log-viewer,
|
|
[data-theme='light'] .raw-editor-textarea {
|
|
background: var(--bg-secondary);
|
|
border-color: var(--border);
|
|
color: var(--text);
|
|
}
|
|
|
|
[data-theme='light'] .code-block,
|
|
[data-theme='light'] .evidence-card .evidence-snippet,
|
|
[data-theme='light'] .flow-step-snippet {
|
|
border-color: var(--border);
|
|
}
|
|
|
|
[data-theme='light'] .code-viewer-body,
|
|
[data-theme='light'] .explorer-page-code .explorer-main-body {
|
|
background: var(--bg-secondary);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
[data-theme='light'] .code-viewer-body .code-line,
|
|
[data-theme='light'] .code-block .code-line,
|
|
[data-theme='light'] .explorer-page-code .code-line {
|
|
color: var(--text);
|
|
}
|
|
|
|
[data-theme='light'] .code-viewer-body .line-number,
|
|
[data-theme='light'] .code-block .line-number,
|
|
[data-theme='light'] .explorer-page-code .line-number,
|
|
[data-theme='light'] .log-time {
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
[data-theme='light'] .code-viewer-body .line-content,
|
|
[data-theme='light'] .code-block .line-content {
|
|
color: var(--text);
|
|
}
|
|
|
|
[data-theme='light'] .log-message {
|
|
color: var(--text);
|
|
}
|
|
|
|
[data-theme='light'] .log-entry {
|
|
border-bottom-color: var(--border);
|
|
}
|
|
|
|
[data-theme='light'] .code-modal {
|
|
background: var(--surface);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
[data-theme='light'] .code-modal-header {
|
|
background: var(--bg-secondary);
|
|
border-bottom-color: var(--border);
|
|
}
|
|
|
|
[data-theme='light'] .code-modal-title {
|
|
color: var(--text);
|
|
}
|
|
|
|
/* SurfacePage */
|
|
.surface-header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: var(--space-4);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
.surface-header h1 {
|
|
margin: 0;
|
|
}
|
|
.surface-header-summary {
|
|
color: var(--text-tertiary);
|
|
font-size: var(--text-sm);
|
|
}
|
|
.surface-filter-row {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
margin-bottom: var(--space-3);
|
|
flex-wrap: wrap;
|
|
}
|
|
.surface-filter-input {
|
|
flex: 1 1 220px;
|
|
padding: var(--space-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-1);
|
|
background: var(--surface-1);
|
|
color: var(--text-primary);
|
|
}
|
|
.surface-filter-select {
|
|
padding: var(--space-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-1);
|
|
background: var(--surface-1);
|
|
color: var(--text-primary);
|
|
}
|
|
.surface-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.4fr);
|
|
gap: var(--space-4);
|
|
align-items: flex-start;
|
|
}
|
|
.surface-node-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
max-height: 70vh;
|
|
overflow-y: auto;
|
|
}
|
|
.surface-node-list-empty {
|
|
color: var(--text-tertiary);
|
|
}
|
|
.surface-sidebar {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-2);
|
|
padding: var(--space-4);
|
|
background: var(--surface-1);
|
|
}
|
|
.surface-node-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--space-1);
|
|
padding: var(--space-3);
|
|
border-radius: var(--radius-2);
|
|
cursor: pointer;
|
|
text-align: left;
|
|
width: 100%;
|
|
}
|
|
.surface-node-card-meta {
|
|
font-size: var(--text-2xs);
|
|
color: var(--text-tertiary);
|
|
}
|
|
.surface-node-card-title {
|
|
font-weight: 600;
|
|
font-size: var(--text-sm);
|
|
}
|
|
.surface-node-card-subtitle {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-secondary);
|
|
}
|
|
.surface-node-card-loc {
|
|
font-size: var(--text-2xs);
|
|
color: var(--text-tertiary);
|
|
}
|
|
.surface-neighbor-empty {
|
|
color: var(--text-tertiary);
|
|
}
|
|
.surface-neighbor-title {
|
|
margin-top: 0;
|
|
}
|
|
.surface-neighbor-subtitle {
|
|
color: var(--text-secondary);
|
|
margin-top: 0;
|
|
}
|
|
.surface-neighbor-edges {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
}
|
|
.surface-neighbor-edge {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
font-size: var(--text-xs);
|
|
}
|
|
.surface-neighbor-edge-kind {
|
|
padding: 2px 6px;
|
|
border-radius: var(--radius-1);
|
|
background: var(--surface-2);
|
|
color: var(--text-secondary);
|
|
}
|
|
.surface-neighbor-edge-loc {
|
|
font-size: var(--text-2xs);
|
|
color: var(--text-tertiary);
|
|
}
|
|
.surface-view-toggle {
|
|
display: inline-flex;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-1);
|
|
overflow: hidden;
|
|
background: var(--surface-1);
|
|
}
|
|
.surface-view-toggle-button {
|
|
padding: var(--space-2) var(--space-3);
|
|
background: transparent;
|
|
border: 0;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
font-size: var(--text-xs);
|
|
}
|
|
.surface-view-toggle-button:not(:last-child) {
|
|
border-right: 1px solid var(--border);
|
|
}
|
|
.surface-view-toggle-button.selected {
|
|
background: var(--surface-2);
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
}
|
|
.surface-graph-frame {
|
|
position: relative;
|
|
min-height: 70vh;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-2);
|
|
background: var(--surface-1);
|
|
overflow: hidden;
|
|
}
|