From 401f957f899359b9b903e2f287fab6407a3cca0f Mon Sep 17 00:00:00 2001
From: kodi <kodi@lab.local>
Date: Wed, 11 Mar 2026 17:02:50 +0100
Subject: [PATCH] feat (ui) CSS - 02

---
 webui/html/style.css | 79 ++++++++++++++++++++++++++++----------------
 1 file changed, 51 insertions(+), 28 deletions(-)

diff --git a/webui/html/style.css b/webui/html/style.css
index c8e26e3..aaf4b59 100644
--- a/webui/html/style.css
+++ b/webui/html/style.css
@@ -1,15 +1,16 @@
 :root {
   --bottom-reserve: 0px;
   --radius-sm: 4px;
-  --radius-md: 8px;
-  --shadow-elevated: 0 10px 28px rgba(12, 20, 32, 0.18);
+  --radius-md: 9px;
+  --shadow-elevated: 0 14px 34px rgba(12, 20, 32, 0.18);
+  --shadow-panel: 0 2px 8px rgba(8, 14, 22, 0.06);
 }
 
 :root[data-theme="dark"] {
   --color-page-bg: #161c25;
   --color-surface: #1d2531;
   --color-surface-elevated: #222c39;
-  --color-border: #324052;
+  --color-border: #314052;
   --color-border-strong: #55739f;
   --color-text-primary: #e7edf6;
   --color-text-muted: #9aa9bd;
@@ -23,6 +24,8 @@
   --color-button-bg: #283444;
   --color-button-hover: #314258;
   --color-button-secondary-bg: #202935;
+  --color-list-header-bg: rgba(255, 255, 255, 0.02);
+  --color-list-row-hover: rgba(106, 165, 255, 0.08);
   --color-danger: #ff8e8e;
   --color-danger-bg: #462328;
   --color-overlay-bg: rgba(8, 12, 18, 0.62);
@@ -46,6 +49,8 @@
   --color-button-bg: #f6f9fd;
   --color-button-hover: #edf3fb;
   --color-button-secondary-bg: #f3f6fb;
+  --color-list-header-bg: #f8fbff;
+  --color-list-row-hover: #f5f9ff;
   --color-danger: #b42323;
   --color-danger-bg: #fdecec;
   --color-overlay-bg: rgba(18, 28, 40, 0.30);
@@ -71,10 +76,12 @@ html, body {
 
 body {
   margin: 0;
-  font-family: "Segoe UI", Tahoma, sans-serif;
+  font-family: Inter, "Segoe UI", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
   background: var(--color-page-bg);
   color: var(--color-text-primary);
   overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
 }
 
 #app-shell {
@@ -84,18 +91,19 @@ body {
 }
 
 #title-zone {
-  padding: 7px 10px;
+  padding: 8px 12px;
   border-bottom: 1px solid var(--color-border);
   background: var(--color-surface-elevated);
   display: flex;
   align-items: center;
   justify-content: space-between;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
 }
 
 #title-zone-actions {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
   min-width: 0;
 }
 
@@ -104,15 +112,17 @@ h1, h2, h3 {
 }
 
 h1 {
-  font-size: 16px;
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
   line-height: 1.2;
 }
 
 .workspace {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 6px;
-  padding: 6px 10px;
+  gap: 8px;
+  padding: 8px 12px;
   min-height: 0;
 }
 
@@ -121,6 +131,7 @@ h1 {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   padding: 8px;
+  box-shadow: var(--shadow-panel);
 }
 
 .pane {
@@ -132,13 +143,13 @@ h1 {
 
 .pane.active-pane {
   border-color: var(--color-active-pane-border);
-  box-shadow: 0 0 0 1px var(--color-active-pane-border) inset;
+  box-shadow: 0 0 0 1px var(--color-active-pane-border) inset, var(--shadow-panel);
   background: var(--color-surface);
 }
 
 .pane-header {
   flex: 0 0 auto;
-  margin-bottom: 4px;
+  margin-bottom: 5px;
 }
 
 .pane-content {
@@ -146,7 +157,7 @@ h1 {
   min-height: 0;
   overflow-y: auto;
   border-top: 1px solid var(--color-border);
-  padding-top: 4px;
+  padding-top: 5px;
 }
 
 .toolbar {
@@ -167,9 +178,11 @@ h1 {
 
 .pane-title {
   min-width: 42px;
-  font-size: 13px;
+  font-size: 12px;
+  font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.02em;
+  letter-spacing: 0.08em;
+  color: var(--color-text-muted);
 }
 
 .checkbox {
@@ -197,23 +210,24 @@ button {
   background: var(--color-button-bg);
   color: var(--color-text-primary);
   cursor: pointer;
-  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
+  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
 }
 
 button:hover {
   background: var(--color-button-hover);
   border-color: var(--color-accent);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
 }
 
 button:disabled {
-  opacity: 0.5;
+  opacity: 0.56;
   cursor: not-allowed;
 }
 
 #theme-toggle {
-  width: 28px;
-  min-width: 28px;
-  height: 28px;
+  width: 30px;
+  min-width: 30px;
+  height: 30px;
   padding: 0;
   display: inline-flex;
   align-items: center;
@@ -243,7 +257,7 @@ button:disabled {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
-  margin-bottom: 3px;
+  margin-bottom: 4px;
   color: var(--color-text-muted);
   font-size: 12px;
 }
@@ -270,13 +284,15 @@ button:disabled {
   display: grid;
   grid-template-columns: 14px minmax(0, 1fr) 88px 138px;
   gap: 6px;
-  padding: 2px 0 4px 0;
+  padding: 4px 6px 5px 6px;
   border-bottom: 1px solid var(--color-border);
-  margin-bottom: 2px;
+  margin-bottom: 3px;
+  background: var(--color-list-header-bg);
+  border-radius: var(--radius-sm);
   color: var(--color-text-muted);
   font-size: 11px;
   text-transform: uppercase;
-  letter-spacing: 0.03em;
+  letter-spacing: 0.05em;
 }
 
 .col-size,
@@ -286,17 +302,22 @@ button:disabled {
 
 .list li {
   border-top: 1px solid var(--color-border);
-  padding: 5px 0 4px 0;
+  padding: 6px 6px 5px 6px;
   display: grid;
   grid-template-columns: 14px minmax(0, 1fr) 88px 138px;
   gap: 6px;
   align-items: center;
+  border-radius: var(--radius-sm);
 }
 
 .list li.selectable {
   cursor: pointer;
 }
 
+.list li.selectable:hover {
+  background: var(--color-list-row-hover);
+}
+
 .list li.is-selected {
   background: var(--color-selection-bg);
 }
@@ -380,12 +401,14 @@ button:disabled {
   font-size: 12px;
   min-width: 0;
   text-align: right;
+  font-weight: 500;
+  letter-spacing: -0.01em;
 }
 
 #footer-bar {
   border-top: 1px solid var(--color-border);
   background: var(--color-surface-elevated);
-  padding: 4px 10px 3px 10px;
+  padding: 5px 12px 4px 12px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -407,7 +430,7 @@ button:disabled {
 
 #function-bar button {
   min-width: 72px;
-  padding: 3px 8px;
+  padding: 4px 9px;
   display: inline-flex;
   align-items: baseline;
   gap: 6px;
@@ -441,7 +464,7 @@ button:disabled {
   background: var(--color-surface-elevated);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
-  padding: 10px;
+  padding: 11px;
   box-shadow: var(--shadow-elevated);
 }
 
@@ -488,7 +511,7 @@ button:disabled {
 .viewer-content,
 .editor-content {
   margin: 6px 0 0 0;
-  padding: 10px;
+  padding: 11px;
   overflow: auto;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);