Hitonabi/mission-control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Refactor design system to align with dense mockup

Browse Source
This commit is contained in:
Hitonabi
2026-06-20 22:53:48 +02:00
parent a51f6ee88a
commit c76bcc7293
9 changed files with 940 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/components.css
+48 -17
View File
@@ -5,7 +5,7 @@
/* ---- Karte (Grundbaustein) ---- */
.card{
background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
padding:18px 20px;
padding:var(--sp-3) var(--sp-4);
}
.card-h{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.card-h h3{font-size:15px;font-weight:600;margin:0;flex:1;color:var(--tx)}
@@ -14,11 +14,9 @@
/* ---- Hero (Overview-Kopf) ---- */
.hero{
background:
radial-gradient(120% 140% at 100% 0%,rgba(68,147,224,.10),transparent 60%),
var(--panel);
background:var(--panel);
border:1px solid var(--line);border-radius:var(--radius);
padding:26px 28px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
padding:var(--sp-4) var(--sp-5);display:flex;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap;
}
.hero .eyebrow{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
.hero h1{font-size:26px;font-weight:650;margin:8px 0 6px}
@@ -34,24 +32,24 @@
/* ---- KPI-Kacheln ---- */
.kpi{
position:relative;border-radius:var(--radius);padding:18px 20px;
position:relative;border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);
border:1px solid var(--line);background:var(--panel);overflow:hidden;
}
.kpi .k-h{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.kpi .k-t{font-size:13.5px;color:var(--mut)}
.kpi .k-h{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-2)}
.kpi .k-t{font-size:var(--text-sm);color:var(--mut)}
.kpi .k-ic{color:var(--mut);opacity:.85}
.kpi .k-ic svg{width:20px;height:20px}
.kpi .k-v{font-family:var(--mono);font-size:32px;font-weight:600;line-height:1.1;margin:14px 0 4px;color:var(--tx)}
.kpi .k-v small{font-size:15px;color:var(--mut);font-weight:400}
.kpi .k-s{font-size:12px;color:var(--mut)}
/* Farb-Varianten */
.kpi.green {background:linear-gradient(160deg,var(--t-green),transparent 70%);border-color:var(--b-green)}
.kpi .k-ic svg{width:18px;height:18px}
.kpi .k-v{font-family:var(--mono);font-size:var(--text-2xl);font-weight:600;line-height:1.1;margin:var(--sp-3) 0 var(--sp-1);color:var(--tx)}
.kpi .k-v small{font-size:var(--text-base);color:var(--mut);font-weight:400}
.kpi .k-s{font-size:var(--text-xs);color:var(--mut)}
/* Farb-Varianten (flach) */
.kpi.green {border-top:2px solid var(--on)}
.kpi.green .k-v,.kpi.green .k-ic{color:var(--on)}
.kpi.blue {background:linear-gradient(160deg,var(--t-blue),transparent 70%);border-color:var(--b-blue)}
.kpi.blue {border-top:2px solid var(--act)}
.kpi.blue .k-v,.kpi.blue .k-ic{color:var(--act)}
.kpi.purple{background:linear-gradient(160deg,var(--t-purple),transparent 70%);border-color:var(--b-purple)}
.kpi.purple{border-top:2px solid var(--purple)}
.kpi.purple .k-v,.kpi.purple .k-ic{color:var(--purple)}
.kpi.red {background:linear-gradient(160deg,var(--t-red),transparent 70%);border-color:var(--b-red)}
.kpi.red {border-top:2px solid var(--err)}
.kpi.red .k-v,.kpi.red .k-ic{color:var(--err)}
.kpi.muted .k-v{color:var(--dim)}
@@ -157,3 +155,36 @@ button:disabled{opacity:.5;cursor:not-allowed}
.guide-acc summary::after { content: "▼"; font-size: 10px; color: var(--mut); transition: transform 0.2s; }
.guide-acc[open] summary::after { transform: rotate(180deg); }
.guide-acc .acc-body { padding: 0 20px 20px 20px; }
/* ---- Utilities & Layout Helpers ---- */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.text-mut { color: var(--mut); }
.text-act { color: var(--act); }
/* ---- Interaktive Karten (A11y) ---- */
.card-btn {
display: block; width: 100%; text-align: left;
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
padding: var(--sp-3) var(--sp-4); cursor: pointer; transition: border-color 0.15s, background 0.15s;
color: var(--tx); font-family: var(--sans);
}
.card-btn:hover, .card-btn:focus {
border-color: var(--act);
background: var(--bg2);
outline: none;
}
.card-btn h3 { margin: 0; font-size: var(--text-lg); font-weight: 600; }
.card-btn p { margin: var(--sp-2) 0 0; font-size: var(--text-sm); color: var(--mut); }