feat (ui): Light/Dark Theme added 02

webui/html/assets/css/app.css

@@ -54,6 +54,8 @@
     --badge-green-text: #ffffff;
     --badge-yellow-bg: #f1c40f;
     --badge-yellow-text: #111111;
+    --table-zebra: rgba(96,165,250,.03);
+    --sticky-head-bg: rgba(17,26,46,.96);
     --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";
@@ -111,6 +113,8 @@
     --badge-green-text: #f8fafc;
     --badge-yellow-bg: #b45309;
     --badge-yellow-text: #fffbeb;
+    --table-zebra: rgba(15,23,42,.03);
+    --sticky-head-bg: rgba(255,255,255,.97);
 }
 *{box-sizing:border-box}
 body{
@@ -129,6 +133,10 @@ header{
 .topbar{
     display:flex; gap:12px; align-items:center; justify-content:space-between;
 }
+.headerMeta{
+    margin-left: 6px;
+    white-space: nowrap;
+}
 .brand{
     display:flex; gap:12px; align-items:center;
     font-weight:700; letter-spacing:.2px;
@@ -194,6 +202,19 @@ header{
     display:flex; gap:10px; align-items:center;
 }
 .cardBody{padding:14px}
+.dashboardKpiGrid{
+    display:grid;
+    grid-template-columns: repeat(1, 1fr);
+    gap:10px;
+}
+@media (min-width: 980px){
+    .dashboardKpiGrid{grid-template-columns: repeat(4, 1fr)}
+}
+.actionBar{
+    display:flex;
+    gap:8px;
+    flex-wrap:wrap;
+}
 .btn{
     border:1px solid var(--card-border);
     background: var(--btn);
@@ -236,6 +257,12 @@ table{
     border-collapse: collapse;
     font-size: 13px;
 }
+thead th{
+    position: sticky;
+    top: 72px;
+    z-index: 2;
+    background: var(--sticky-head-bg);
+}
 th,td{
     padding:10px 8px;
     border-bottom:1px solid var(--soft-line);
@@ -243,6 +270,7 @@ th,td{
     vertical-align: top;
 }
 th{color: var(--muted); font-weight:600}
+tbody tr:nth-child(even) td{background: var(--table-zebra)}
 tr:hover td{background: var(--hover-bg)}
 .badge {
     display: inline-flex;
@@ -264,6 +292,7 @@ pre.code{
 .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.warn{border-color: rgba(251,191,36,.6); color: var(--warn)}
+.badge.info{border-color: rgba(96,165,250,.45); color: var(--accent)}
 .mono{font-family: var(--mono)}
 .muted{color:var(--muted)}
 .num{
@@ -603,6 +632,40 @@ pre{
 .file-folder-files > div:hover{
     background: var(--hover-bg);
 }
+.file-entry{
+    display:flex;
+    align-items:center;
+    justify-content:space-between;
+    gap:10px;
+    padding:4px 0;
+    border-bottom:1px dashed var(--soft-line);
+    border-radius: 8px;
+}
+.file-entry-name{
+    cursor:pointer;
+}
+.file-entry-state{
+    min-width: 24px;
+    text-align:right;
+    color: var(--muted);
+    font-size: 11px;
+}
+.file-entry.active{
+    background: var(--hover-bg);
+}
+.file-entry.active .file-entry-name{
+    font-weight: 700;
+}
+.file-entry.dirty .file-entry-state{
+    color: var(--warn);
+}
+.filesEditorStatus{
+    margin-top:8px;
+    border:1px solid var(--soft-line);
+    border-radius:10px;
+    padding:7px 9px;
+    font-size: 12px;
+}
 .data-table {
     width: 100%;
     border-collapse: collapse;