kodi/podman-mvp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat (ui): Light/Dark Theme added

Browse Source
This commit is contained in:
kodi
2026-03-03 15:17:52 +01:00
parent 3a80ba09af
commit 1d5bdd5089
4 changed files with 255 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/html/assets/css/app.css
+176 -80
View File
@@ -3,6 +3,7 @@
--panel: #111a2e;
--panel2: #0e1730;
--text: #e8eefc;
--fg: #e8eefc;
--muted:#9bb0da;
--border:#24345f;
--ok:#2dd4bf;
@@ -12,22 +13,117 @@
--btn2:#223564;
--accent:#60a5fa;
--shadow: 0 10px 30px rgba(0,0,0,.35);
--bg-grad-start: #18244a;
--header-bg: rgba(11,18,32,.7);
--header-border: rgba(36,52,95,.7);
--tab-bg: rgba(17,26,46,.6);
--tab-active-bg: linear-gradient(135deg, rgba(96,165,250,.25), rgba(17,26,46,.6));
--tab-active-border: rgba(96,165,250,.5);
--card-bg: linear-gradient(180deg, rgba(17,26,46,.85), rgba(14,23,48,.85));
--card-border: rgba(36,52,95,.9);
--soft-line: rgba(36,52,95,.6);
--hover-bg: rgba(96,165,250,.06);
--input-bg: rgba(8,12,25,.6);
--input-placeholder: rgba(200,210,255,.45);
--overlay-bg: rgba(0,0,0,.55);
--pre-bg: rgba(0,0,0,.35);
--pre-text: #d9e6ff;
--pod-row-bg: rgba(255,255,255,0.04);
--pod-row-top: rgba(255,255,255,0.08);
--pod-row-hover: rgba(255,255,255,0.07);
--menu-hover-bg: rgba(96,165,250,.10);
--menu-hover-border: rgba(96,165,250,.25);
--sidebar-bg: rgba(11,18,32,.55);
--folder-bg: rgba(17,26,46,.35);
--folder-hover: rgba(96,165,250,.08);
--folder-toggle-bg: rgba(8,12,25,.35);
--map-border: rgba(255,255,255,0.10);
--map-bg: rgba(0,0,0,0.18);
--map-line: rgba(255,255,255,0.22);
--map-line-strong: rgba(255,255,255,0.28);
--map-node-stroke: rgba(255,255,255,0.18);
--map-node-net: rgba(80,160,255,0.35);
--map-node-ctr: rgba(150,230,150,0.30);
--map-label: rgba(255,255,255,0.82);
--map-active: rgba(255,255,255,0.55);
--legend-row-border: rgba(255,255,255,0.12);
--legend-row-bg: rgba(255,255,255,0.03);
--legend-row-border-hover: rgba(255,255,255,0.25);
--legend-row-bg-hover: rgba(255,255,255,0.06);
--badge-green-bg: #2ecc71;
--badge-green-text: #ffffff;
--badge-yellow-bg: #f1c40f;
--badge-yellow-text: #111111;
--radius: 14px;
--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
[data-theme="light"]{
--bg: #f3f6fb;
--panel: #ffffff;
--panel2: #eef3fb;
--text: #111827;
--fg: #111827;
--muted:#51617d;
--border:#c7d4ea;
--btn:#e8eef9;
--btn2:#dce7f8;
--accent:#2563eb;
--shadow: 0 10px 28px rgba(13, 27, 54, .12);
--bg-grad-start: #dfeafe;
--header-bg: rgba(243,246,251,.88);
--header-border: rgba(146,169,205,.55);
--tab-bg: rgba(255,255,255,.92);
--tab-active-bg: linear-gradient(135deg, rgba(37,99,235,.16), rgba(255,255,255,.95));
--tab-active-border: rgba(37,99,235,.42);
--card-bg: linear-gradient(180deg, rgba(255,255,255,.96), rgba(238,243,251,.96));
--card-border: rgba(176,196,226,.9);
--soft-line: rgba(176,196,226,.8);
--hover-bg: rgba(37,99,235,.08);
--input-bg: rgba(255,255,255,.94);
--input-placeholder: rgba(81,97,125,.72);
--overlay-bg: rgba(17,24,39,.36);
--pre-bg: rgba(223,234,254,.72);
--pre-text: #0f172a;
--pod-row-bg: rgba(148,163,184,0.12);
--pod-row-top: rgba(148,163,184,0.25);
--pod-row-hover: rgba(148,163,184,0.18);
--menu-hover-bg: rgba(37,99,235,.12);
--menu-hover-border: rgba(37,99,235,.28);
--sidebar-bg: rgba(236,242,252,.82);
--folder-bg: rgba(236,242,252,.9);
--folder-hover: rgba(37,99,235,.08);
--folder-toggle-bg: rgba(232,238,249,.92);
--map-border: rgba(148,163,184,.34);
--map-bg: rgba(255,255,255,.86);
--map-line: rgba(71,85,105,.33);
--map-line-strong: rgba(71,85,105,.42);
--map-node-stroke: rgba(71,85,105,.34);
--map-node-net: rgba(37,99,235,.28);
--map-node-ctr: rgba(34,197,94,.25);
--map-label: rgba(17,24,39,.9);
--map-active: rgba(37,99,235,.58);
--legend-row-border: rgba(148,163,184,.4);
--legend-row-bg: rgba(226,236,252,.9);
--legend-row-border-hover: rgba(100,116,139,.46);
--legend-row-bg-hover: rgba(210,224,248,.9);
--badge-green-bg: #166534;
--badge-green-text: #f8fafc;
--badge-yellow-bg: #b45309;
--badge-yellow-text: #fffbeb;
}
*{box-sizing:border-box}
body{
margin:0;
font-family: var(--sans);
background: radial-gradient(1200px 600px at 20% 0%, #18244a 0%, var(--bg) 55%);
background: radial-gradient(1200px 600px at 20% 0%, var(--bg-grad-start) 0%, var(--bg) 55%);
color: var(--text);
}
header{
position: sticky; top:0; z-index:10;
background: rgba(11,18,32,.7);
background: var(--header-bg);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(36,52,95,.7);
border-bottom: 1px solid var(--header-border);
}
.wrap{max-width:1700px;margin:0 auto;padding:16px}
.topbar{
@@ -55,7 +151,7 @@ header{
}
.tab{
border:1px solid var(--border);
background: rgba(17,26,46,.6);
background: var(--tab-bg);
color: var(--text);
padding:10px 12px;
border-radius: 999px;
@@ -64,8 +160,8 @@ header{
font-size:14px;
}
.tab.active{
background: linear-gradient(135deg, rgba(96,165,250,.25), rgba(17,26,46,.6));
border-color: rgba(96,165,250,.5);
background: var(--tab-active-bg);
border-color: var(--tab-active-border);
}
.grid{
display:grid;
@@ -77,8 +173,8 @@ header{
.grid{grid-template-columns: 1fr 1fr}
}
.card{
background: linear-gradient(180deg, rgba(17,26,46,.85), rgba(14,23,48,.85));
border: 1px solid rgba(36,52,95,.9);
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow:hidden;
@@ -91,7 +187,7 @@ header{
.cardHeader{
display:flex; align-items:center; justify-content:space-between;
padding:14px 14px;
border-bottom:1px solid rgba(36,52,95,.7);
border-bottom:1px solid var(--soft-line);
}
.cardTitle{
font-weight:700;
@@ -99,7 +195,7 @@ header{
}
.cardBody{padding:14px}
.btn{
border:1px solid rgba(36,52,95,.9);
border:1px solid var(--card-border);
background: var(--btn);
color: var(--text);
padding:9px 10px;
@@ -130,7 +226,7 @@ header{
display:inline-flex; align-items:center; gap:8px;
padding:6px 10px;
border-radius:999px;
border:1px solid rgba(36,52,95,.9);
border:1px solid var(--card-border);
color: var(--muted);
font-size:12px;
}
@@ -142,19 +238,19 @@ table{
}
th,td{
padding:10px 8px;
border-bottom:1px solid rgba(36,52,95,.6);
border-bottom:1px solid var(--soft-line);
text-align:left;
vertical-align: top;
}
th{color: var(--muted); font-weight:600}
tr:hover td{background: rgba(96,165,250,.06)}
tr:hover td{background: var(--hover-bg)}
.badge {
display: inline-flex;
align-items: center;
vertical-align: middle;
line-height: 1;
padding: 4px 8px;
border: 1px solid rgba(36, 52, 95, .9);
border: 1px solid var(--card-border);
border-radius: 999px;
font-size: 12px;
color: var(--muted);
@@ -163,7 +259,7 @@ tr:hover td{background: rgba(96,165,250,.06)}
pre.code{
padding:10px;
border-radius:10px;
border:1px solid rgba(255,255,255,.15);
border:1px solid var(--soft-line);
}
.badge.ok{border-color: rgba(45,212,191,.6); color: var(--ok)}
.badge.bad{border-color: rgba(251,113,133,.6); color: var(--bad)}
@@ -178,8 +274,8 @@ pre.code{
.flex{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.input, .textarea{
width: 100%;
background: rgba(8,12,25,.6);
border:1px solid rgba(36,52,95,.9);
background: var(--input-bg);
border:1px solid var(--card-border);
color: var(--text);
border-radius: 12px;
padding:10px 12px;
@@ -206,8 +302,8 @@ pre.code{
.statGrid{grid-template-columns: repeat(4, 1fr)}
}
.statCard{
background: rgba(8,12,25,.45);
border:1px solid rgba(36,52,95,.9);
background: var(--input-bg);
border:1px solid var(--card-border);
border-radius: 14px;
padding:10px 12px;
}
@@ -231,14 +327,14 @@ pre.code{
/* Modal */
.modalBack{
position: fixed; inset:0;
background: rgba(0,0,0,.55);
background: var(--overlay-bg);
display:none; align-items:center; justify-content:center;
padding:18px; z-index: 99;
}
.modal{
width:min(980px, 100%);
background: linear-gradient(180deg, rgba(17,26,46,.95), rgba(14,23,48,.95));
border:1px solid rgba(36,52,95,.9);
background: var(--card-bg);
border:1px solid var(--card-border);
border-radius: 18px;
box-shadow: var(--shadow);
overflow:hidden;
@@ -246,7 +342,7 @@ pre.code{
.modalHeader{
padding:12px 14px;
display:flex; align-items:center; justify-content:space-between;
border-bottom:1px solid rgba(36,52,95,.7);
border-bottom:1px solid var(--soft-line);
}
.modalTitle{font-weight:700}
.modalBody{padding:14px}
@@ -256,9 +352,9 @@ pre{
word-break: break-word;
font-family: var(--mono);
font-size: 12.5px;
color: #d9e6ff;
background: rgba(0,0,0,.35);
border:1px solid rgba(36,52,95,.7);
color: var(--pre-text);
background: var(--pre-bg);
border:1px solid var(--soft-line);
border-radius: 14px;
padding: 12px;
max-height: 60vh;
@@ -266,12 +362,12 @@ pre{
}
.hint{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.35}
.pod-group-row td {
background: rgba(255,255,255,0.04);
border-top: 1px solid rgba(255,255,255,0.08);
background: var(--pod-row-bg);
border-top: 1px solid var(--pod-row-top);
font-weight: 600;
}
.pod-group-row:hover td {
background: rgba(255,255,255,0.07);
background: var(--pod-row-hover);
}
.stale {
opacity: 0.65;
@@ -285,8 +381,8 @@ pre{
right: 0;
top: 34px;
min-width: 140px;
background: linear-gradient(180deg, rgba(17,26,46,.98), rgba(14,23,48,.98));
border: 1px solid rgba(36,52,95,.9);
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 12px;
box-shadow: var(--shadow);
padding: 6px;
@@ -309,8 +405,8 @@ pre{
}
.menuItem:hover{
background: rgba(96,165,250,.10);
border-color: rgba(96,165,250,.25);
background: var(--menu-hover-bg);
border-color: var(--menu-hover-border);
}
.menuItem.ok{ border-color: rgba(45,212,191,.35); }
@@ -321,14 +417,14 @@ pre{
/* Toolbar controls */
.toolbar .input,
.toolbar .select{
background: rgba(8,12,25,.45);
border:1px solid rgba(36,52,95,.9);
background: var(--input-bg);
border:1px solid var(--card-border);
color: var(--fg);
border-radius: 12px;
padding:8px 10px;
outline: none;
}
.toolbar .input::placeholder{ color: rgba(200,210,255,.45); }
.toolbar .input::placeholder{ color: var(--input-placeholder); }
.chip{
display:inline-flex;
@@ -336,8 +432,8 @@ pre{
gap:8px;
padding:7px 10px;
border-radius: 999px;
border:1px solid rgba(36,52,95,.9);
background: rgba(8,12,25,.35);
border:1px solid var(--card-border);
background: var(--input-bg);
color: var(--fg);
cursor:pointer;
user-select:none;
@@ -358,8 +454,8 @@ pre{
.sidebar {
width: 220px;
flex: 0 0 220px;
border-right: 1px solid rgba(36,52,95,.7);
background: rgba(11,18,32,.55);
border-right: 1px solid var(--soft-line);
background: var(--sidebar-bg);
backdrop-filter: blur(10px);
min-height: calc(100vh - 72px); /* header hoogte approx; mag iets afwijken */
position: sticky;
@@ -450,14 +546,14 @@ pre{
user-select:none;
padding: 10px 12px;
border: 1px solid rgba(36,52,95,.75);
border: 1px solid var(--card-border);
border-radius: 12px;
background: rgba(17,26,46,.35);
background: var(--folder-bg);
transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
.file-folder-row:hover{
background: rgba(96,165,250,.08);
background: var(--folder-hover);
border-color: rgba(96,165,250,.35);
}
@@ -479,8 +575,8 @@ pre{
width: 18px;
height: 18px;
border-radius: 6px;
border: 1px solid rgba(36,52,95,.8);
background: rgba(8,12,25,.35);
border: 1px solid var(--card-border);
background: var(--folder-toggle-bg);
font-size: 12px;
opacity: .9;
flex: 0 0 auto;
@@ -496,7 +592,7 @@ pre{
margin-left: 0;
margin-top: 6px;
padding-left: 12px;
border-left: 1px dashed rgba(36,52,95,.55);
border-left: 1px dashed var(--soft-line);
}
/* File rows inside folders (werkt ook met inline styles die je nu al hebt) */
@@ -505,7 +601,7 @@ pre{
}
.file-folder-files > div:hover{
background: rgba(96,165,250,.06);
background: var(--hover-bg);
}
.data-table {
width: 100%;
@@ -515,18 +611,18 @@ pre{
.data-table th,
.data-table td {
padding: 8px;
border-bottom: 1px solid #ddd;
border-bottom: 1px solid var(--soft-line);
text-align: left;
}
.badge-green {
background: #2ecc71;
color: white;
background: var(--badge-green-bg);
color: var(--badge-green-text);
}
.badge-yellow {
background: #f1c40f;
color: black;
background: var(--badge-yellow-bg);
color: var(--badge-yellow-text);
}
.sortable {
cursor: pointer;
@@ -544,8 +640,8 @@ pre{
/* ===== Netwerken: Tabel/Kaart toggle + kaart placeholders (STAP 3A-1) ===== */
.segToggle{
display:inline-flex;
border:1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.04);
border:1px solid var(--legend-row-border);
background: var(--legend-row-bg);
border-radius: 12px;
overflow:hidden;
}
@@ -565,13 +661,13 @@ pre{
.segToggle .seg:hover{ opacity: 1; }
.segToggle .seg.active{
background: rgba(255,255,255,0.08);
background: var(--menu-hover-bg);
opacity: 1;
}
.mapHost{
border: 1px solid rgba(255,255,255,0.10);
background: rgba(0,0,0,0.18);
border: 1px solid var(--map-border);
background: var(--map-bg);
border-radius: 14px;
min-height: 420px;
overflow: hidden;
@@ -580,8 +676,8 @@ pre{
.mapLegend{
margin-top: 10px;
padding: 10px 12px;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(0,0,0,0.18);
border: 1px solid var(--map-border);
background: var(--map-bg);
border-radius: 14px;
max-width: 360px;
}
@@ -603,7 +699,7 @@ pre{
height: 14px;
border-radius: 6px;
display:inline-block;
border: 1px solid rgba(255,255,255,0.14);
border: 1px solid var(--map-border);
}
.mapLegend .legendSwatch.link{
@@ -611,7 +707,7 @@ pre{
height: 2px;
border-radius: 2px;
border: 0;
background: rgba(255,255,255,0.22);
background: var(--map-line);
}
.mapLegend .legendSwatch.shared{
@@ -619,47 +715,47 @@ pre{
height: 2px;
border-radius: 0;
border: 0;
background: rgba(255,255,255,0.22);
background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0.22) 6px, transparent 6px, transparent 10px);
background: var(--map-line);
background-image: repeating-linear-gradient(90deg, var(--map-line), var(--map-line) 6px, transparent 6px, transparent 10px);
}
.mapLegend .legendSwatch.net{ background: rgba(80,160,255,0.35); }
.mapLegend .legendSwatch.ctr{ background: rgba(150,230,150,0.30); }
.mapLegend .legendSwatch.net{ background: var(--map-node-net); }
.mapLegend .legendSwatch.ctr{ background: var(--map-node-ctr); }
/* ===== Netwerken kaart (D3) ===== */
.mapHost svg { width: 100%; height: 100%; display:block; }
.graphLink{
stroke: rgba(255,255,255,0.22);
stroke: var(--map-line);
stroke-width: 1.2;
}
.graphLink.shared{
stroke-dasharray: 6 4;
stroke: rgba(255,255,255,0.28);
stroke: var(--map-line-strong);
}
.graphNode circle{
stroke: rgba(255,255,255,0.18);
stroke: var(--map-node-stroke);
stroke-width: 1;
}
.graphNode.network circle{ fill: rgba(80,160,255,0.35); }
.graphNode.container circle{ fill: rgba(150,230,150,0.30); }
.graphNode.network circle{ fill: var(--map-node-net); }
.graphNode.container circle{ fill: var(--map-node-ctr); }
.graphLabel{
fill: rgba(255,255,255,0.82);
fill: var(--map-label);
font-size: 12px;
pointer-events: none;
}
.graphDim{ opacity: 0.18; }
.graphActive{ opacity: 1; stroke: rgba(255,255,255,0.55); stroke-width: 2; }
.graphActive{ opacity: 1; stroke: var(--map-active); stroke-width: 2; }
/* ===== Netwerken detailpaneel ===== */
.mapDetail{
margin-top: 10px;
padding: 10px 12px;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(0,0,0,0.18);
border: 1px solid var(--map-border);
background: var(--map-bg);
border-radius: 14px;
}
@@ -768,17 +864,17 @@ pre{
align-items:center;
gap:8px;
padding:6px 10px;
border:1px solid rgba(255,255,255,0.12);
border:1px solid var(--legend-row-border);
border-radius:20px;
background:rgba(255,255,255,0.03);
background:var(--legend-row-bg);
font-size:13px;
white-space:nowrap;
transition:all .15s ease;
}
.mapLegend .legendRow:hover{
border-color:rgba(255,255,255,0.25);
background:rgba(255,255,255,0.06);
border-color:var(--legend-row-border-hover);
background:var(--legend-row-bg-hover);
}
@@ -807,8 +903,8 @@ pre{
gap:6px;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid rgba(36,52,95,.8);
background: rgba(8,12,25,.35);
border: 1px solid var(--card-border);
background: var(--folder-toggle-bg);
font-size: 12px;
opacity: .92;
}