WIP: Dashboard redesign — design system overhaul and component updates
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:
43
docs/design-system-redesign/preview/components-groups.html
Normal file
43
docs/design-system-redesign/preview/components-groups.html
Normal file
@@ -0,0 +1,43 @@
|
||||
<!doctype html><html><head><meta charset="utf-8"><title>Stat cards</title><link rel="stylesheet" href="_card.css"><style>
|
||||
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
|
||||
.stat-card {
|
||||
background: linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(51,65,85,0.9) 100%);
|
||||
border: 1.5px solid rgba(14,165,233,0.35);
|
||||
border-radius: 8px; padding: 14px 16px;
|
||||
position: relative; overflow: hidden;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
.stat-card::before {
|
||||
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--intel-accent), transparent);
|
||||
opacity: 0.8; box-shadow: 0 0 8px rgba(14,165,233,0.5);
|
||||
}
|
||||
.stat-label {
|
||||
font: 500 11px/1 var(--font-mono); letter-spacing: 0.05em;
|
||||
text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;
|
||||
}
|
||||
.stat-val { font: 700 24px/1 var(--font-mono); color: var(--text-primary); }
|
||||
.stat-delta-up { color: var(--intel-success); font: 500 11px var(--font-mono); }
|
||||
.stat-delta-down { color: var(--intel-danger); font: 500 11px var(--font-mono); }
|
||||
</style></head><body>
|
||||
<div class="card">
|
||||
<div class="stat-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Open Findings</div>
|
||||
<div class="stat-val">1,247</div>
|
||||
<div class="stat-delta-up">↑ 12 vs last sync</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">FP Pending</div>
|
||||
<div class="stat-val">38</div>
|
||||
<div class="stat-delta-down">↓ 4 today</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Compliance %</div>
|
||||
<div class="stat-val">94.2</div>
|
||||
<div class="stat-delta-up">↑ 0.8% wk</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="t-meta">Top accent rail · gradient surface · sky inner highlight · 4-px lift on hover.</div>
|
||||
</div>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user