fizzlepoof/truenas-stacks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve Doris dashboard lead warrant controls

Browse Source
This commit is contained in:
Fizzlepoof
2026-05-21 23:20:51 +00:00
parent c227628bb1
commit 2c14d32208
3 changed files with 721 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

327
home/doris-dashboard/public/style.css
View File

@@ -1,23 +1,27 @@
:root{
color-scheme:dark;
--bg:#08090a;
--bg-accent:#121826;
--hf-red:#d53600;
--hf-red-deep:#910f3f;
--hf-amber:#f2c14e;
--hf-blue:#7b8fb2;
--bg:#090b10;
--bg-accent:#131824;
--panel:#11151d;
--panel-soft:#171d27;
--panel-raise:#1d2430;
--text:#f3f6fb;
--muted:#94a3b8;
--line:rgba(255,255,255,.08);
--line-soft:rgba(255,255,255,.05);
--accent:#7c8cff;
--accent-soft:rgba(124,140,255,.16);
--space:#9f8cff;
--home:#4fd1a5;
--local:#ffd166;
--text:#f2efdd;
--muted:#cbbda7;
--line:rgba(242,239,221,.11);
--line-soft:rgba(242,239,221,.06);
--accent:var(--hf-red);
--accent-soft:rgba(213,54,0,.16);
--space:#7b8fb2;
--home:#5c7f69;
--local:#f2c14e;
--warn:#ff7b72;
--ok:#5ee787;
--ok:#82c29a;
--attention:#ffd166;
--shadow:0 14px 34px rgba(0,0,0,.26);
--shadow:0 20px 48px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
@@ -26,14 +30,33 @@ body{
margin:0;
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
background:
radial-gradient(circle at top left,rgba(124,140,255,.16),transparent 28rem),
radial-gradient(circle at top right,rgba(79,209,165,.08),transparent 22rem),
var(--bg);
radial-gradient(circle at top left,rgba(213,54,0,.22),transparent 24rem),
radial-gradient(circle at top right,rgba(123,143,178,.16),transparent 22rem),
linear-gradient(180deg,#07090d 0%,#0d1017 52%,#131824 100%);
color:var(--text);
}
a{color:inherit}
main{max-width:1380px;margin:0 auto;padding:18px}
.incident-tape{height:14px;background:repeating-linear-gradient(135deg,var(--hf-amber) 0 18px,#111 18px 36px);box-shadow:0 3px 14px rgba(0,0,0,.32)}
.casefile-header{position:relative}
.hot-fuzz-art{position:relative;max-width:320px;margin:14px 0 0}
.poster-illustration{width:100%;height:auto;display:block;filter:drop-shadow(0 24px 30px rgba(0,0,0,.35))}
.poster-frame{fill:rgba(10,12,18,.88);stroke:rgba(242,239,221,.2);stroke-width:2}
.poster-halo{fill:url(#dashboard-sunset);opacity:.9}
.poster-tape{fill:rgba(242,193,78,.88);stroke:rgba(17,17,17,.8);stroke-width:2}
.constable-silhouette{fill:rgba(8,10,15,.92);stroke:rgba(242,239,221,.12);stroke-width:1.5}
.constable-silhouette.partner{fill:rgba(24,30,42,.94)}
.swan-stamp{fill:rgba(123,143,178,.2);stroke:rgba(242,239,221,.42);stroke-width:2}
.swan-mark,.dossier-strip{fill:rgba(242,239,221,.94)}
.poster-callout{fill:rgba(242,239,221,.82);font-size:18px;font-weight:800;letter-spacing:.24em;text-anchor:middle}
.film-grain,.cinematic-glow{position:absolute;inset:0;pointer-events:none;border-radius:28px}
.film-grain{background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 2px,transparent 2px 5px),repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px);mix-blend-mode:soft-light;opacity:.35}
.cinematic-glow{background:radial-gradient(circle at 16% 18%, rgba(123,143,178,.22), transparent 24%),radial-gradient(circle at 84% 24%, rgba(213,54,0,.24), transparent 26%),linear-gradient(115deg, rgba(242,193,78,.05), transparent 40%, rgba(145,15,63,.1) 78%, transparent 100%);animation:emergencyPulse 8s ease-in-out infinite alternate}
.app-casefile{position:relative;overflow:hidden;isolation:isolate}
.casefile-stamp{display:inline-flex;align-items:center;margin:0 0 .85rem;padding:.35rem .7rem;border:1px solid rgba(242,193,78,.45);border-radius:999px;color:#ffe5b0;background:rgba(242,193,78,.1);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem}
.operator-evidence-tag{box-shadow:0 0 0 1px rgba(213,54,0,.12),0 0 28px rgba(123,143,178,.18)}
@keyframes emergencyPulse{0%{opacity:.72;transform:scale(1)}50%{opacity:.92;transform:scale(1.015)}100%{opacity:.78;transform:scale(1.03)}}
.hero,
.status div,
@@ -55,12 +78,41 @@ main{max-width:1380px;margin:0 auto;padding:18px}
.hero{
display:grid;
grid-template-columns:minmax(0,1.4fr) minmax(320px,.85fr);
grid-template-columns:minmax(0,1.55fr) minmax(280px,.85fr);
gap:14px;
align-items:stretch;
border-radius:24px;
padding:16px 18px;
padding:18px 18px 16px;
margin-bottom:14px;
background:
radial-gradient(circle at 82% 18%, rgba(213,54,0,.18), transparent 18rem),
radial-gradient(circle at 14% 10%, rgba(123,143,178,.16), transparent 16rem),
linear-gradient(145deg, rgba(17,21,29,.97), rgba(11,14,20,.98));
overflow:hidden;
}
.hero::before{
content:'';
position:absolute;
inset:0;
background:
linear-gradient(125deg, rgba(242,193,78,.09), transparent 20%, transparent 78%, rgba(213,54,0,.12)),
repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 2px, transparent 2px 5px);
mix-blend-mode:screen;
opacity:.45;
pointer-events:none;
}
.hero::after{
content:'';
position:absolute;
right:22px;
top:18px;
width:120px;
height:26px;
border-radius:4px;
transform:rotate(3deg);
background:linear-gradient(135deg, rgba(242,193,78,.9), rgba(242,193,78,.65));
opacity:.18;
pointer-events:none;
}
.hero-main,
@@ -89,9 +141,9 @@ main{max-width:1380px;margin:0 auto;padding:18px}
}
.hero-chip{
border:1px solid rgba(124,140,255,.28);
background:rgba(124,140,255,.10);
color:#d9deff;
border:1px solid rgba(242,193,78,.26);
background:rgba(242,193,78,.12);
color:#ffe9b3;
border-radius:999px;
padding:7px 10px;
font-size:.8rem;
@@ -100,7 +152,7 @@ main{max-width:1380px;margin:0 auto;padding:18px}
.eyebrow{
margin:0 0 6px;
color:#b7c0ff;
color:var(--hf-amber);
text-transform:uppercase;
letter-spacing:.18em;
font-size:.72rem;
@@ -126,7 +178,164 @@ h1{
gap:10px;
align-items:center;
flex-wrap:wrap;
margin-top:12px;
margin-top:0;
}
.hero-board{
display:grid;
grid-template-columns:minmax(280px,330px) minmax(0,1fr);
gap:14px;
align-items:stretch;
margin-top:10px;
}
.hero-poster-stack,
.hero-dossier-stack{
display:flex;
flex-direction:column;
gap:10px;
min-width:0;
}
.hero-poster-stack .hot-fuzz-art{
max-width:none;
margin:0;
}
.hero-badges{justify-content:flex-start}
.hero-dossier-stack{justify-content:stretch}
.hero-dossier-card{
position:relative;
padding:14px 16px;
border-radius:18px;
background:
linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
rgba(15,18,25,.96);
border:1px solid rgba(242,239,221,.1);
box-shadow:0 16px 30px rgba(0,0,0,.26);
overflow:hidden;
}
.hero-dossier-card::before{
content:'';
position:absolute;
inset:0 auto auto 0;
width:100%;
height:4px;
background:linear-gradient(90deg, var(--hf-red), var(--hf-amber), var(--hf-blue));
opacity:.95;
}
.hero-dossier-card h2,
.hero-dossier-card strong{
margin:0;
display:block;
}
.hero-dossier-card h2{
font-size:1.45rem;
line-height:1.08;
margin-bottom:8px;
}
.hero-dossier-card p{
margin:0;
color:#d7deea;
line-height:1.42;
}
.hero-dossier-card small{
display:block;
margin-top:6px;
color:var(--muted);
line-height:1.35;
}
.hero-dossier-meta,
.hero-slip-grid{
display:grid;
gap:10px;
}
.hero-dossier-meta{
grid-template-columns:repeat(auto-fit,minmax(120px,max-content));
margin:10px 0 12px;
}
.hero-dossier-meta span,
.hero-slip-label,
.hero-dossier-link{
font-size:.76rem;
letter-spacing:.12em;
text-transform:uppercase;
}
.hero-dossier-meta span{
display:inline-flex;
align-items:center;
padding:5px 8px;
border-radius:999px;
border:1px solid rgba(242,193,78,.2);
background:rgba(242,193,78,.08);
color:#ffe6b1;
}
.hero-dossier-link{
display:inline-flex;
align-items:center;
justify-content:center;
align-self:flex-start;
text-decoration:none;
border-radius:999px;
padding:9px 12px;
color:#0f172a;
background:#f2efdd;
font-weight:800;
}
.hero-dossier-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
}
.hero-dossier-btn{
padding:9px 12px;
font-size:.76rem;
letter-spacing:.12em;
text-transform:uppercase;
}
.hero-dossier-link.disabled{
color:var(--muted);
background:rgba(255,255,255,.05);
border:1px solid rgba(242,239,221,.08);
}
.hero-slip-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.hero-slip-label{
display:inline-block;
margin-bottom:8px;
color:rgba(242,193,78,.78);
}
.lead-warrant{
min-height:182px;
}
.hero-rail{
display:flex;
align-items:stretch;
}
.hero-rail .status{
width:100%;
}
.reset-btn,
@@ -156,6 +365,32 @@ h1{
.snapshot-block{
margin:0 0 16px;
}
.evidence-board,
.dossier-grid,
.case-legend{position:relative}
.case-legend{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
flex-wrap:wrap;
margin-bottom:10px;
}
.case-legend::after{
content:'FOR THE GREATER GOOD';
font-size:.67rem;
letter-spacing:.16em;
color:rgba(242,193,78,.7);
}
.evidence-board::after{
content:'';
position:absolute;
inset:14px;
border:1px dashed rgba(242,193,78,.09);
border-radius:16px;
pointer-events:none;
}
.dossier-grid{align-items:stretch}
.section-heading-inline{
display:flex;
@@ -318,6 +553,24 @@ section header p{
.focus-card,
.summary-card{padding:12px}
.focus-card{border-top:3px solid var(--accent)}
.focus-card-link{
display:block;
color:inherit;
text-decoration:none;
}
.focus-card-link .focus-card{
height:100%;
cursor:pointer;
transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.focus-card-link:hover .focus-card,
.focus-card-link:focus-visible .focus-card{
transform:translateY(-1px);
box-shadow:0 10px 24px rgba(0,0,0,.22);
}
.focus-card-link:focus-visible{
outline:none;
}
.focus-card.local{border-top-color:var(--local)}
.focus-card.ok{border-top-color:var(--ok)}
.focus-card.attention{border-top-color:var(--attention)}
@@ -369,6 +622,13 @@ section header p{
border-color:var(--line-soft);
min-width:0;
}
.task-card[data-task-url]{cursor:pointer;transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease}
.task-card[data-task-url]:hover,
.task-card[data-task-url]:focus-visible{
transform:translateY(-1px);
box-shadow:0 10px 24px rgba(0,0,0,.22);
}
.task-card[data-task-url]:focus-visible{outline:1px solid rgba(183,192,255,.75);outline-offset:2px}
.task-top{display:flex;justify-content:space-between;gap:6px;align-items:center;margin-bottom:3px}
.task-state-dot{width:8px;height:8px;border-radius:999px;background:var(--muted);flex:0 0 auto;box-shadow:0 0 0 2px rgba(255,255,255,.03)}
.task-card.overdue .task-state-dot{background:var(--warn)}
@@ -617,13 +877,13 @@ footer p{margin:.25rem 0}
gap:14px;
margin-bottom:14px;
padding:12px 14px;
border-radius:18px;
background:rgba(17,21,29,.88);
border-radius:20px;
background:rgba(17,21,29,.9);
border:1px solid var(--line);
box-shadow:var(--shadow);
}
.nav-brand{display:flex;flex-direction:column;gap:2px}
.nav-kicker{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#b7c0ff}
.nav-kicker{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--hf-amber)}
.nav-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.nav-link{
text-decoration:none;
@@ -634,8 +894,12 @@ footer p{margin:.25rem 0}
color:var(--muted);
font-size:.88rem;
}
.nav-link:hover{border-color:rgba(124,140,255,.55);color:var(--text)}
.nav-link.active{color:var(--text);border-color:rgba(124,140,255,.6);background:rgba(124,140,255,.14)}
.nav-link:hover{border-color:rgba(242,193,78,.55);color:var(--text);background:rgba(242,193,78,.08)}
.nav-link.active{color:var(--text);border-color:rgba(242,193,78,.58);background:linear-gradient(135deg,rgba(213,54,0,.24),rgba(145,15,63,.24))}
.brand-badges{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.pill{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:.8rem;color:var(--muted)}
.badge-hotfuzz{background:linear-gradient(135deg,var(--hf-red),var(--hf-red-deep));color:#fff4ea;border-color:transparent}
.for-the-greater-good{letter-spacing:.08em;text-transform:uppercase}
.services-shell{align-items:start}
.services-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.service-card{
@@ -823,12 +1087,13 @@ footer p{margin:.25rem 0}
}
@media (max-width:980px){
.focus-grid,.summary-grid,.forecast-grid,.metrics.metrics-compact,.snapshot-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
.feature-body{grid-template-columns:1fr}
.focus-grid,.summary-grid,.forecast-grid,.metrics.metrics-compact,.snapshot-strip,.hero-slip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.feature-body,.hero-board{grid-template-columns:1fr}
}
@media (max-width:920px){
.hero{grid-template-columns:1fr}
.hero-title-row,.section-heading-inline{align-items:flex-start}
.hero-chips{justify-content:flex-start}
.snapshot-strip{grid-template-columns:1fr}
.snapshot-strip,.hero-slip-grid{grid-template-columns:1fr}
}