27192dd69f
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.
55 lines
2.5 KiB
HTML
55 lines
2.5 KiB
HTML
<!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>
|