jramos/cve-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: Dashboard redesign — design system overhaul and component updates

Browse Source 
Frontend redesign in progress: updated styles, layout, and components
across all pages to align with new design system. Includes Jira API
compliance specs, property tests, and load test script.
This commit is contained in:
root
2026-04-29 14:20:23 +00:00
parent 37119b9c8a
commit 27192dd69f
78 changed files with 9902 additions and 1368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
docs/design-system-redesign/preview/colors-severity.html Normal file
View File

@@ -0,0 +1,54 @@
<!doctype html><html><head><meta charset="utf-8"><title>Severity</title><link rel="stylesheet" href="_card.css"><style>
.sev-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px; border-radius: 6px;
font: 700 12px/1 var(--font-mono);
letter-spacing: 0.5px; text-transform: uppercase;
border: 2px solid;
box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}
.sev-badge::before {
content: ''; width: 8px; height: 8px; border-radius: 50%;
animation: pulse-glow 2s ease-in-out infinite;
}
.sev-critical {
background: linear-gradient(135deg, rgba(239,68,68,0.20) 0%, rgba(239,68,68,0.15) 100%);
border-color: rgba(239,68,68,0.6); color: var(--sev-critical-text);
text-shadow: 0 0 8px rgba(239,68,68,0.4);
}
.sev-critical::before { background: var(--sev-critical); box-shadow: var(--glow-danger); }
.sev-high {
background: linear-gradient(135deg, rgba(245,158,11,0.20) 0%, rgba(245,158,11,0.15) 100%);
border-color: rgba(245,158,11,0.6); color: var(--sev-high-text);
text-shadow: 0 0 8px rgba(245,158,11,0.4);
}
.sev-high::before { background: var(--sev-high); box-shadow: var(--glow-warning); }
.sev-med {
background: linear-gradient(135deg, rgba(14,165,233,0.20) 0%, rgba(14,165,233,0.15) 100%);
border-color: rgba(14,165,233,0.6); color: var(--sev-medium-text);
text-shadow: 0 0 8px rgba(14,165,233,0.4);
}
.sev-med::before { background: var(--sev-medium); box-shadow: var(--glow-info); }
.sev-low {
background: linear-gradient(135deg, rgba(16,185,129,0.20) 0%, rgba(16,185,129,0.15) 100%);
border-color: rgba(16,185,129,0.6); color: var(--sev-low-text);
text-shadow: 0 0 8px rgba(16,185,129,0.4);
}
.sev-low::before { background: var(--sev-low); box-shadow: var(--glow-success); }
</style></head><body>
<div class="card">
<div class="card-row" style="gap:10px">
<span class="sev-badge sev-critical">CRITICAL</span>
<span class="sev-badge sev-high">HIGH</span>
<span class="sev-badge sev-med">MEDIUM</span>
<span class="sev-badge sev-low">LOW</span>
</div>
<div class="card-row" style="gap:14px;font:400 12px var(--font-mono);color:var(--fg-muted)">
<span><span style="color:var(--sev-critical)">●</span> #EF4444</span>
<span><span style="color:var(--sev-high)">●</span> #F59E0B</span>
<span><span style="color:var(--sev-medium)">●</span> #0EA5E9</span>
<span><span style="color:var(--sev-low)">●</span> #10B981</span>
</div>
<div class="t-meta">Pulsing dots + gradient fills + glow text-shadow. Mono uppercase, never remap.</div>
</div>
</body></html>