m17hr1l/psyc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stage-31 polish: featured-threat banner — uniform tint, full width

Browse Source 
The banner gradient was a horizontal accent → dark fade, so visually
only the left ~30% read as a banner; the right looked unstyled. Swapped
for a uniform severity-tinted background (subtle top-to-bottom gradient
for depth, but no horizontal falloff). Border + inset shadow on the
bottom edge give it a real divider between the banner and the hero
beneath. Per-severity tints (CRITICAL red, HIGH amber) get the same
treatment — full-width, uniform.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
m17hr1l
2026-05-25 19:28:26 +02:00
parent 04e0d3323f
commit 3f1f7cc420
1 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/psyc/cockpit/static/cockpit.css
View File

@@ -933,14 +933,27 @@ body.wide .net-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr
.featured-section-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
padding: 10px 16px; margin-bottom: 1px;
background: linear-gradient(90deg, rgba(30,200,255,0.10), rgba(15,17,21,0.4));
border: 1px solid var(--border); border-bottom: none;
padding: 12px 18px; margin-bottom: 0;
/* uniform tint across the whole width with a subtle vertical depth */
background:
linear-gradient(180deg, rgba(30,200,255,0.18), rgba(30,200,255,0.08)),
var(--panel-2);
border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--border));
border-bottom: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
border-radius: 14px 14px 0 0;
position: relative;
box-shadow: inset 0 -1px 0 rgba(30,200,255,0.18);
}
.featured-section-head.sev-critical {
background: linear-gradient(180deg, rgba(248,113,113,0.20), rgba(248,113,113,0.09)), var(--panel-2);
border-color: color-mix(in oklab, var(--red) 50%, var(--border));
box-shadow: inset 0 -1px 0 rgba(248,113,113,0.25);
}
.featured-section-head.sev-high {
background: linear-gradient(180deg, rgba(251,191,36,0.20), rgba(251,191,36,0.09)), var(--panel-2);
border-color: color-mix(in oklab, var(--amber) 50%, var(--border));
box-shadow: inset 0 -1px 0 rgba(251,191,36,0.25);
}
.featured-section-head.sev-critical { background: linear-gradient(90deg, rgba(248,113,113,0.16), rgba(15,17,21,0.4)); border-color: var(--red); }
.featured-section-head.sev-high { background: linear-gradient(90deg, rgba(251,191,36,0.14), rgba(15,17,21,0.4)); border-color: var(--amber); }
.featured-section-title { display: inline-flex; align-items: center; gap: 10px; }
.featured-bracket {
font-family: var(--font-display); color: var(--accent); font-size: 18px;