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
control/Dockerfile → control/Containerfile
View File
webui/html/assets/css/app.css
+176 -80
View File
@@ -3,6 +3,7 @@
--panel: #111a2e; --panel: #111a2e;
--panel2: #0e1730; --panel2: #0e1730;
--text: #e8eefc; --text: #e8eefc;
--fg: #e8eefc;
--muted:#9bb0da; --muted:#9bb0da;
--border:#24345f; --border:#24345f;
--ok:#2dd4bf; --ok:#2dd4bf;
@@ -12,22 +13,117 @@
--btn2:#223564; --btn2:#223564;
--accent:#60a5fa; --accent:#60a5fa;
--shadow: 0 10px 30px rgba(0,0,0,.35); --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; --radius: 14px;
--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --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"; --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} *{box-sizing:border-box}
body{ body{
margin:0; margin:0;
font-family: var(--sans); 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); color: var(--text);
} }
header{ header{
position: sticky; top:0; z-index:10; position: sticky; top:0; z-index:10;
background: rgba(11,18,32,.7); background: var(--header-bg);
backdrop-filter: blur(10px); 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} .wrap{max-width:1700px;margin:0 auto;padding:16px}
.topbar{ .topbar{
@@ -55,7 +151,7 @@ header{
} }
.tab{ .tab{
border:1px solid var(--border); border:1px solid var(--border);
background: rgba(17,26,46,.6); background: var(--tab-bg);
color: var(--text); color: var(--text);
padding:10px 12px; padding:10px 12px;
border-radius: 999px; border-radius: 999px;
@@ -64,8 +160,8 @@ header{
font-size:14px; font-size:14px;
} }
.tab.active{ .tab.active{
background: linear-gradient(135deg, rgba(96,165,250,.25), rgba(17,26,46,.6)); background: var(--tab-active-bg);
border-color: rgba(96,165,250,.5); border-color: var(--tab-active-border);
} }
.grid{ .grid{
display:grid; display:grid;
@@ -77,8 +173,8 @@ header{
.grid{grid-template-columns: 1fr 1fr} .grid{grid-template-columns: 1fr 1fr}
} }
.card{ .card{
background: linear-gradient(180deg, rgba(17,26,46,.85), rgba(14,23,48,.85)); background: var(--card-bg);
border: 1px solid rgba(36,52,95,.9); border: 1px solid var(--card-border);
border-radius: var(--radius); border-radius: var(--radius);
box-shadow: var(--shadow); box-shadow: var(--shadow);
overflow:hidden; overflow:hidden;
@@ -91,7 +187,7 @@ header{
.cardHeader{ .cardHeader{
display:flex; align-items:center; justify-content:space-between; display:flex; align-items:center; justify-content:space-between;
padding:14px 14px; padding:14px 14px;
border-bottom:1px solid rgba(36,52,95,.7); border-bottom:1px solid var(--soft-line);
} }
.cardTitle{ .cardTitle{
font-weight:700; font-weight:700;
@@ -99,7 +195,7 @@ header{
} }
.cardBody{padding:14px} .cardBody{padding:14px}
.btn{ .btn{
border:1px solid rgba(36,52,95,.9); border:1px solid var(--card-border);
background: var(--btn); background: var(--btn);
color: var(--text); color: var(--text);
padding:9px 10px; padding:9px 10px;
@@ -130,7 +226,7 @@ header{
display:inline-flex; align-items:center; gap:8px; display:inline-flex; align-items:center; gap:8px;
padding:6px 10px; padding:6px 10px;
border-radius:999px; border-radius:999px;
border:1px solid rgba(36,52,95,.9); border:1px solid var(--card-border);
color: var(--muted); color: var(--muted);
font-size:12px; font-size:12px;
} }
@@ -142,19 +238,19 @@ table{
} }
th,td{ th,td{
padding:10px 8px; padding:10px 8px;
border-bottom:1px solid rgba(36,52,95,.6); border-bottom:1px solid var(--soft-line);
text-align:left; text-align:left;
vertical-align: top; vertical-align: top;
} }
th{color: var(--muted); font-weight:600} th{color: var(--muted); font-weight:600}
tr:hover td{background: rgba(96,165,250,.06)} tr:hover td{background: var(--hover-bg)}
.badge { .badge {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
vertical-align: middle; vertical-align: middle;
line-height: 1; line-height: 1;
padding: 4px 8px; padding: 4px 8px;
border: 1px solid rgba(36, 52, 95, .9); border: 1px solid var(--card-border);
border-radius: 999px; border-radius: 999px;
font-size: 12px; font-size: 12px;
color: var(--muted); color: var(--muted);
@@ -163,7 +259,7 @@ tr:hover td{background: rgba(96,165,250,.06)}
pre.code{ pre.code{
padding:10px; padding:10px;
border-radius: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.ok{border-color: rgba(45,212,191,.6); color: var(--ok)}
.badge.bad{border-color: rgba(251,113,133,.6); color: var(--bad)} .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} .flex{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.input, .textarea{ .input, .textarea{
width: 100%; width: 100%;
background: rgba(8,12,25,.6); background: var(--input-bg);
border:1px solid rgba(36,52,95,.9); border:1px solid var(--card-border);
color: var(--text); color: var(--text);
border-radius: 12px; border-radius: 12px;
padding:10px 12px; padding:10px 12px;
@@ -206,8 +302,8 @@ pre.code{
.statGrid{grid-template-columns: repeat(4, 1fr)} .statGrid{grid-template-columns: repeat(4, 1fr)}
} }
.statCard{ .statCard{
background: rgba(8,12,25,.45); background: var(--input-bg);
border:1px solid rgba(36,52,95,.9); border:1px solid var(--card-border);
border-radius: 14px; border-radius: 14px;
padding:10px 12px; padding:10px 12px;
} }
@@ -231,14 +327,14 @@ pre.code{
/* Modal */ /* Modal */
.modalBack{ .modalBack{
position: fixed; inset:0; position: fixed; inset:0;
background: rgba(0,0,0,.55); background: var(--overlay-bg);
display:none; align-items:center; justify-content:center; display:none; align-items:center; justify-content:center;
padding:18px; z-index: 99; padding:18px; z-index: 99;
} }
.modal{ .modal{
width:min(980px, 100%); width:min(980px, 100%);
background: linear-gradient(180deg, rgba(17,26,46,.95), rgba(14,23,48,.95)); background: var(--card-bg);
border:1px solid rgba(36,52,95,.9); border:1px solid var(--card-border);
border-radius: 18px; border-radius: 18px;
box-shadow: var(--shadow); box-shadow: var(--shadow);
overflow:hidden; overflow:hidden;
@@ -246,7 +342,7 @@ pre.code{
.modalHeader{ .modalHeader{
padding:12px 14px; padding:12px 14px;
display:flex; align-items:center; justify-content:space-between; 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} .modalTitle{font-weight:700}
.modalBody{padding:14px} .modalBody{padding:14px}
@@ -256,9 +352,9 @@ pre{
word-break: break-word; word-break: break-word;
font-family: var(--mono); font-family: var(--mono);
font-size: 12.5px; font-size: 12.5px;
color: #d9e6ff; color: var(--pre-text);
background: rgba(0,0,0,.35); background: var(--pre-bg);
border:1px solid rgba(36,52,95,.7); border:1px solid var(--soft-line);
border-radius: 14px; border-radius: 14px;
padding: 12px; padding: 12px;
max-height: 60vh; max-height: 60vh;
@@ -266,12 +362,12 @@ pre{
} }
.hint{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.35} .hint{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.35}
.pod-group-row td { .pod-group-row td {
background: rgba(255,255,255,0.04); background: var(--pod-row-bg);
border-top: 1px solid rgba(255,255,255,0.08); border-top: 1px solid var(--pod-row-top);
font-weight: 600; font-weight: 600;
} }
.pod-group-row:hover td { .pod-group-row:hover td {
background: rgba(255,255,255,0.07); background: var(--pod-row-hover);
} }
.stale { .stale {
opacity: 0.65; opacity: 0.65;
@@ -285,8 +381,8 @@ pre{
right: 0; right: 0;
top: 34px; top: 34px;
min-width: 140px; min-width: 140px;
background: linear-gradient(180deg, rgba(17,26,46,.98), rgba(14,23,48,.98)); background: var(--card-bg);
border: 1px solid rgba(36,52,95,.9); border: 1px solid var(--card-border);
border-radius: 12px; border-radius: 12px;
box-shadow: var(--shadow); box-shadow: var(--shadow);
padding: 6px; padding: 6px;
@@ -309,8 +405,8 @@ pre{
} }
.menuItem:hover{ .menuItem:hover{
background: rgba(96,165,250,.10); background: var(--menu-hover-bg);
border-color: rgba(96,165,250,.25); border-color: var(--menu-hover-border);
} }
.menuItem.ok{ border-color: rgba(45,212,191,.35); } .menuItem.ok{ border-color: rgba(45,212,191,.35); }
@@ -321,14 +417,14 @@ pre{
/* Toolbar controls */ /* Toolbar controls */
.toolbar .input, .toolbar .input,
.toolbar .select{ .toolbar .select{
background: rgba(8,12,25,.45); background: var(--input-bg);
border:1px solid rgba(36,52,95,.9); border:1px solid var(--card-border);
color: var(--fg); color: var(--fg);
border-radius: 12px; border-radius: 12px;
padding:8px 10px; padding:8px 10px;
outline: none; outline: none;
} }
.toolbar .input::placeholder{ color: rgba(200,210,255,.45); } .toolbar .input::placeholder{ color: var(--input-placeholder); }
.chip{ .chip{
display:inline-flex; display:inline-flex;
@@ -336,8 +432,8 @@ pre{
gap:8px; gap:8px;
padding:7px 10px; padding:7px 10px;
border-radius: 999px; border-radius: 999px;
border:1px solid rgba(36,52,95,.9); border:1px solid var(--card-border);
background: rgba(8,12,25,.35); background: var(--input-bg);
color: var(--fg); color: var(--fg);
cursor:pointer; cursor:pointer;
user-select:none; user-select:none;
@@ -358,8 +454,8 @@ pre{
.sidebar { .sidebar {
width: 220px; width: 220px;
flex: 0 0 220px; flex: 0 0 220px;
border-right: 1px solid rgba(36,52,95,.7); border-right: 1px solid var(--soft-line);
background: rgba(11,18,32,.55); background: var(--sidebar-bg);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
min-height: calc(100vh - 72px); /* header hoogte approx; mag iets afwijken */ min-height: calc(100vh - 72px); /* header hoogte approx; mag iets afwijken */
position: sticky; position: sticky;
@@ -450,14 +546,14 @@ pre{
user-select:none; user-select:none;
padding: 10px 12px; padding: 10px 12px;
border: 1px solid rgba(36,52,95,.75); border: 1px solid var(--card-border);
border-radius: 12px; border-radius: 12px;
background: rgba(17,26,46,.35); background: var(--folder-bg);
transition: background .12s ease, border-color .12s ease, transform .06s ease; transition: background .12s ease, border-color .12s ease, transform .06s ease;
} }
.file-folder-row:hover{ .file-folder-row:hover{
background: rgba(96,165,250,.08); background: var(--folder-hover);
border-color: rgba(96,165,250,.35); border-color: rgba(96,165,250,.35);
} }
@@ -479,8 +575,8 @@ pre{
width: 18px; width: 18px;
height: 18px; height: 18px;
border-radius: 6px; border-radius: 6px;
border: 1px solid rgba(36,52,95,.8); border: 1px solid var(--card-border);
background: rgba(8,12,25,.35); background: var(--folder-toggle-bg);
font-size: 12px; font-size: 12px;
opacity: .9; opacity: .9;
flex: 0 0 auto; flex: 0 0 auto;
@@ -496,7 +592,7 @@ pre{
margin-left: 0; margin-left: 0;
margin-top: 6px; margin-top: 6px;
padding-left: 12px; 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) */ /* File rows inside folders (werkt ook met inline styles die je nu al hebt) */
@@ -505,7 +601,7 @@ pre{
} }
.file-folder-files > div:hover{ .file-folder-files > div:hover{
background: rgba(96,165,250,.06); background: var(--hover-bg);
} }
.data-table { .data-table {
width: 100%; width: 100%;
@@ -515,18 +611,18 @@ pre{
.data-table th, .data-table th,
.data-table td { .data-table td {
padding: 8px; padding: 8px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid var(--soft-line);
text-align: left; text-align: left;
} }
.badge-green { .badge-green {
background: #2ecc71; background: var(--badge-green-bg);
color: white; color: var(--badge-green-text);
} }
.badge-yellow { .badge-yellow {
background: #f1c40f; background: var(--badge-yellow-bg);
color: black; color: var(--badge-yellow-text);
} }
.sortable { .sortable {
cursor: pointer; cursor: pointer;
@@ -544,8 +640,8 @@ pre{
/* ===== Netwerken: Tabel/Kaart toggle + kaart placeholders (STAP 3A-1) ===== */ /* ===== Netwerken: Tabel/Kaart toggle + kaart placeholders (STAP 3A-1) ===== */
.segToggle{ .segToggle{
display:inline-flex; display:inline-flex;
border:1px solid rgba(255,255,255,0.12); border:1px solid var(--legend-row-border);
background: rgba(255,255,255,0.04); background: var(--legend-row-bg);
border-radius: 12px; border-radius: 12px;
overflow:hidden; overflow:hidden;
} }
@@ -565,13 +661,13 @@ pre{
.segToggle .seg:hover{ opacity: 1; } .segToggle .seg:hover{ opacity: 1; }
.segToggle .seg.active{ .segToggle .seg.active{
background: rgba(255,255,255,0.08); background: var(--menu-hover-bg);
opacity: 1; opacity: 1;
} }
.mapHost{ .mapHost{
border: 1px solid rgba(255,255,255,0.10); border: 1px solid var(--map-border);
background: rgba(0,0,0,0.18); background: var(--map-bg);
border-radius: 14px; border-radius: 14px;
min-height: 420px; min-height: 420px;
overflow: hidden; overflow: hidden;
@@ -580,8 +676,8 @@ pre{
.mapLegend{ .mapLegend{
margin-top: 10px; margin-top: 10px;
padding: 10px 12px; padding: 10px 12px;
border: 1px solid rgba(255,255,255,0.10); border: 1px solid var(--map-border);
background: rgba(0,0,0,0.18); background: var(--map-bg);
border-radius: 14px; border-radius: 14px;
max-width: 360px; max-width: 360px;
} }
@@ -603,7 +699,7 @@ pre{
height: 14px; height: 14px;
border-radius: 6px; border-radius: 6px;
display:inline-block; display:inline-block;
border: 1px solid rgba(255,255,255,0.14); border: 1px solid var(--map-border);
} }
.mapLegend .legendSwatch.link{ .mapLegend .legendSwatch.link{
@@ -611,7 +707,7 @@ pre{
height: 2px; height: 2px;
border-radius: 2px; border-radius: 2px;
border: 0; border: 0;
background: rgba(255,255,255,0.22); background: var(--map-line);
} }
.mapLegend .legendSwatch.shared{ .mapLegend .legendSwatch.shared{
@@ -619,47 +715,47 @@ pre{
height: 2px; height: 2px;
border-radius: 0; border-radius: 0;
border: 0; border: 0;
background: rgba(255,255,255,0.22); background: var(--map-line);
background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0.22) 6px, transparent 6px, transparent 10px); 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.net{ background: var(--map-node-net); }
.mapLegend .legendSwatch.ctr{ background: rgba(150,230,150,0.30); } .mapLegend .legendSwatch.ctr{ background: var(--map-node-ctr); }
/* ===== Netwerken kaart (D3) ===== */ /* ===== Netwerken kaart (D3) ===== */
.mapHost svg { width: 100%; height: 100%; display:block; } .mapHost svg { width: 100%; height: 100%; display:block; }
.graphLink{ .graphLink{
stroke: rgba(255,255,255,0.22); stroke: var(--map-line);
stroke-width: 1.2; stroke-width: 1.2;
} }
.graphLink.shared{ .graphLink.shared{
stroke-dasharray: 6 4; stroke-dasharray: 6 4;
stroke: rgba(255,255,255,0.28); stroke: var(--map-line-strong);
} }
.graphNode circle{ .graphNode circle{
stroke: rgba(255,255,255,0.18); stroke: var(--map-node-stroke);
stroke-width: 1; stroke-width: 1;
} }
.graphNode.network circle{ fill: rgba(80,160,255,0.35); } .graphNode.network circle{ fill: var(--map-node-net); }
.graphNode.container circle{ fill: rgba(150,230,150,0.30); } .graphNode.container circle{ fill: var(--map-node-ctr); }
.graphLabel{ .graphLabel{
fill: rgba(255,255,255,0.82); fill: var(--map-label);
font-size: 12px; font-size: 12px;
pointer-events: none; pointer-events: none;
} }
.graphDim{ opacity: 0.18; } .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 ===== */ /* ===== Netwerken detailpaneel ===== */
.mapDetail{ .mapDetail{
margin-top: 10px; margin-top: 10px;
padding: 10px 12px; padding: 10px 12px;
border: 1px solid rgba(255,255,255,0.10); border: 1px solid var(--map-border);
background: rgba(0,0,0,0.18); background: var(--map-bg);
border-radius: 14px; border-radius: 14px;
} }
@@ -768,17 +864,17 @@ pre{
align-items:center; align-items:center;
gap:8px; gap:8px;
padding:6px 10px; padding:6px 10px;
border:1px solid rgba(255,255,255,0.12); border:1px solid var(--legend-row-border);
border-radius:20px; border-radius:20px;
background:rgba(255,255,255,0.03); background:var(--legend-row-bg);
font-size:13px; font-size:13px;
white-space:nowrap; white-space:nowrap;
transition:all .15s ease; transition:all .15s ease;
} }
.mapLegend .legendRow:hover{ .mapLegend .legendRow:hover{
border-color:rgba(255,255,255,0.25); border-color:var(--legend-row-border-hover);
background:rgba(255,255,255,0.06); background:var(--legend-row-bg-hover);
} }
@@ -807,8 +903,8 @@ pre{
gap:6px; gap:6px;
padding: 3px 8px; padding: 3px 8px;
border-radius: 999px; border-radius: 999px;
border: 1px solid rgba(36,52,95,.8); border: 1px solid var(--card-border);
background: rgba(8,12,25,.35); background: var(--folder-toggle-bg);
font-size: 12px; font-size: 12px;
opacity: .92; opacity: .92;
} }
webui/html/assets/js/tabs/files.js
+19 -1
View File
@@ -1,5 +1,23 @@
let cmEditor = null; let cmEditor = null;
function filesCurrentTheme() {
const t = document.documentElement.getAttribute('data-theme');
return (t === 'light') ? 'light' : 'dark';
}
function filesCodeMirrorTheme() {
return filesCurrentTheme() === 'light' ? 'default' : 'material-darker';
}
function filesSetEditorTheme(themeName) {
if (!cmEditor) return;
const cmTheme = (themeName === 'light') ? 'default' : 'material-darker';
cmEditor.setOption('theme', cmTheme);
cmEditor.refresh();
}
window.filesSetEditorTheme = filesSetEditorTheme;
function _isFolderCollapsed(folderKey) { function _isFolderCollapsed(folderKey) {
return localStorage.getItem('files_folder_collapsed:' + folderKey) !== '0'; return localStorage.getItem('files_folder_collapsed:' + folderKey) !== '0';
// default collapsed = true // default collapsed = true
@@ -51,7 +69,7 @@ async function filesRefresh() {
lineNumbers: true, lineNumbers: true,
lineWrapping: true, lineWrapping: true,
mode: 'text/plain', mode: 'text/plain',
theme: 'material-darker' theme: filesCodeMirrorTheme()
}); });
cmEditor.setSize('100%', 360); cmEditor.setSize('100%', 360);
} }
webui/html/index.html
+60
View File
@@ -30,6 +30,7 @@
<div class="flex"> <div class="flex">
<button class="btn ghost" onclick="pingApi()">Ping</button> <button class="btn ghost" onclick="pingApi()">Ping</button>
<button class="btn" onclick="refreshActive()">Ververs</button> <button class="btn" onclick="refreshActive()">Ververs</button>
<button class="btn ghost" id="themeToggleBtn" title="Schakel light/dark mode">Theme</button>
</div> </div>
</div> </div>
</div> </div>
@@ -581,8 +582,67 @@
} }
} }
// ---- Theme (light/dark) ----
const THEME_KEY = 'mvp_theme_v1';
function getSystemTheme() {
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light';
}
function getStoredTheme() {
const t = localStorage.getItem(THEME_KEY);
return (t === 'dark' || t === 'light') ? t : '';
}
function getInitialTheme() {
return getStoredTheme() || getSystemTheme();
}
function updateThemeToggleUi(theme) {
const btn = document.getElementById('themeToggleBtn');
if (!btn) return;
const next = theme === 'dark' ? 'light' : 'dark';
btn.textContent = `Theme: ${theme === 'dark' ? 'Dark' : 'Light'}`;
btn.title = `Schakel naar ${next === 'dark' ? 'dark' : 'light'} mode`;
}
function applyTheme(theme, persist = false) {
const t = (theme === 'light') ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', t);
updateThemeToggleUi(t);
if (persist) localStorage.setItem(THEME_KEY, t);
if (typeof window.filesSetEditorTheme === 'function') {
window.filesSetEditorTheme(t);
}
}
function toggleTheme() {
const current = document.documentElement.getAttribute('data-theme') || getInitialTheme();
const next = current === 'dark' ? 'light' : 'dark';
applyTheme(next, true);
}
// ---- Init ---- // ---- Init ----
(async function init(){ (async function init(){
applyTheme(getInitialTheme(), false);
const themeBtn = document.getElementById('themeToggleBtn');
if (themeBtn) themeBtn.onclick = toggleTheme;
if (window.matchMedia) {
const mq = window.matchMedia('(prefers-color-scheme: dark)');
const onSystemThemeChange = (ev) => {
if (getStoredTheme()) return;
applyTheme(ev.matches ? 'dark' : 'light', false);
};
if (mq.addEventListener) mq.addEventListener('change', onSystemThemeChange);
else if (mq.addListener) mq.addListener(onSystemThemeChange);
}
applySidebarState(); applySidebarState();
const t = document.getElementById('sidebarToggle'); const t = document.getElementById('sidebarToggle');
if (t) t.onclick = toggleSidebar; if (t) t.onclick = toggleSidebar;