feat: Style

1 files changed, 73 insertions, 51 deletions

diff --git a/internal/server/static/style.css b/internal/server/static/style.css
index fc7c4a5..9fef180 100644
--- a/internal/server/static/style.css
+++ b/internal/server/static/style.css
@@ -1,4 +1,4 @@
-/* Kaze Status Page - OpenCode-inspired Theme */
+/* Kaze Status Page - Refined OpenCode-inspired Theme */
 
 /* Reset and base */
 *, *::before, *::after {
@@ -18,6 +18,26 @@ html {
 /* Color scheme support */
 :root {
     color-scheme: light dark;
+    /* Refined color palette */
+    --bg-primary: #ffffff;
+    --bg-secondary: #f8f8f8;
+    --bg-tertiary: #f0f0f0;
+    --border-primary: #e0e0e0;
+    --border-secondary: #ebebeb;
+    --text-primary: #1a1a1a;
+    --text-secondary: #6b6b6b;
+    --text-tertiary: #9b9b9b;
+}
+
+.dark {
+    --bg-primary: #0d0d0d;
+    --bg-secondary: #151515;
+    --bg-tertiary: #1a1a1a;
+    --border-primary: #262626;
+    --border-secondary: #1f1f1f;
+    --text-primary: #ededed;
+    --text-secondary: #a0a0a0;
+    --text-tertiary: #707070;
 }
 
 /* Font */
@@ -47,12 +67,14 @@ html {
 
 /* Base styles */
 body {
-    line-height: 1.5;
+    line-height: 1.6;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
 }
 
-/* Utility classes - Tailwind-inspired */
+/* Utility classes */
 
 /* Font */
 .font-mono {
@@ -61,12 +83,12 @@ body {
 
 /* Colors - Light mode */
 .bg-neutral-50 { background-color: #fafafa; }
-.bg-neutral-100 { background-color: #f5f5f5; }
-.bg-neutral-200 { background-color: #e5e5e5; }
+.bg-neutral-100 { background-color: var(--bg-secondary); }
+.bg-neutral-200 { background-color: var(--bg-tertiary); }
 .bg-neutral-800 { background-color: #262626; }
 .bg-neutral-900 { background-color: #171717; }
 .bg-neutral-950 { background-color: #0a0a0a; }
-.bg-white { background-color: #ffffff; }
+.bg-white { background-color: var(--bg-primary); }
 
 .bg-emerald-50 { background-color: #ecfdf5; }
 .bg-emerald-100 { background-color: #d1fae5; }
@@ -87,11 +109,11 @@ body {
 
 .text-neutral-100 { color: #f5f5f5; }
 .text-neutral-300 { color: #d4d4d4; }
-.text-neutral-400 { color: #a3a3a3; }
-.text-neutral-500 { color: #737373; }
+.text-neutral-400 { color: var(--text-tertiary); }
+.text-neutral-500 { color: var(--text-secondary); }
 .text-neutral-600 { color: #525252; }
 .text-neutral-700 { color: #404040; }
-.text-neutral-900 { color: #171717; }
+.text-neutral-900 { color: var(--text-primary); }
 
 .text-emerald-300 { color: #6ee7b7; }
 .text-emerald-400 { color: #34d399; }
@@ -117,7 +139,7 @@ body {
 .text-orange-300 { color: #fdba74; }
 
 /* Border colors */
-.border-neutral-200 { border-color: #e5e5e5; }
+.border-neutral-200 { border-color: var(--border-primary); }
 .border-neutral-800 { border-color: #262626; }
 .border-emerald-200 { border-color: #a7f3d0; }
 .border-emerald-900 { border-color: #064e3b; }
@@ -127,10 +149,10 @@ body {
 .border-red-900 { border-color: #7f1d1d; }
 
 /* Dark mode */
-.dark .dark\:bg-neutral-800 { background-color: #262626; }
-.dark .dark\:bg-neutral-900 { background-color: #171717; }
-.dark .dark\:bg-neutral-900\/50 { background-color: rgba(23, 23, 23, 0.5); }
-.dark .dark\:bg-neutral-950 { background-color: #0a0a0a; }
+.dark .dark\:bg-neutral-800 { background-color: var(--bg-tertiary); }
+.dark .dark\:bg-neutral-900 { background-color: var(--bg-secondary); }
+.dark .dark\:bg-neutral-900\/50 { background-color: rgba(21, 21, 21, 0.5); }
+.dark .dark\:bg-neutral-950 { background-color: var(--bg-primary); }
 .dark .dark\:bg-emerald-900\/50 { background-color: rgba(6, 78, 59, 0.5); }
 .dark .dark\:bg-emerald-950\/30 { background-color: rgba(2, 44, 34, 0.3); }
 .dark .dark\:bg-yellow-900\/50 { background-color: rgba(113, 63, 18, 0.5); }
@@ -141,10 +163,10 @@ body {
 .dark .dark\:bg-blue-900\/50 { background-color: rgba(30, 58, 138, 0.5); }
 .dark .dark\:bg-orange-900\/50 { background-color: rgba(124, 45, 18, 0.5); }
 
-.dark .dark\:text-neutral-100 { color: #f5f5f5; }
+.dark .dark\:text-neutral-100 { color: var(--text-primary); }
 .dark .dark\:text-neutral-300 { color: #d4d4d4; }
-.dark .dark\:text-neutral-400 { color: #a3a3a3; }
-.dark .dark\:text-neutral-500 { color: #737373; }
+.dark .dark\:text-neutral-400 { color: var(--text-secondary); }
+.dark .dark\:text-neutral-500 { color: var(--text-tertiary); }
 .dark .dark\:text-emerald-300 { color: #6ee7b7; }
 .dark .dark\:text-emerald-400 { color: #34d399; }
 .dark .dark\:text-yellow-300 { color: #fde047; }
@@ -153,16 +175,16 @@ body {
 .dark .dark\:text-blue-300 { color: #93c5fd; }
 .dark .dark\:text-orange-300 { color: #fdba74; }
 
-.dark .dark\:border-neutral-800 { border-color: #262626; }
+.dark .dark\:border-neutral-800 { border-color: var(--border-primary); }
 .dark .dark\:border-emerald-900 { border-color: #064e3b; }
 .dark .dark\:border-yellow-900 { border-color: #713f12; }
 .dark .dark\:border-red-900 { border-color: #7f1d1d; }
 
-.dark .dark\:divide-neutral-800 > :not([hidden]) ~ :not([hidden]) { border-color: #262626; }
+.dark .dark\:divide-neutral-800 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-primary); }
 
-.dark .dark\:hover\:bg-neutral-800:hover { background-color: #262626; }
+.dark .dark\:hover\:bg-neutral-800:hover { background-color: rgba(38, 38, 38, 0.5); }
 .dark .dark\:hover\:bg-neutral-900\/50:hover { background-color: rgba(23, 23, 23, 0.5); }
-.dark .dark\:hover\:text-neutral-100:hover { color: #f5f5f5; }
+.dark .dark\:hover\:text-neutral-100:hover { color: var(--text-primary); }
 
 /* Display */
 .block { display: block; }
@@ -226,16 +248,16 @@ body {
 .border { border-width: 1px; }
 .border-b { border-bottom-width: 1px; }
 .border-t { border-top-width: 1px; }
-.rounded-sm { border-radius: 0.125rem; }
-.rounded-md { border-radius: 0.375rem; }
-.rounded-lg { border-radius: 0.5rem; }
+.rounded-sm { border-radius: 0.25rem; }
+.rounded-md { border-radius: 0.5rem; }
+.rounded-lg { border-radius: 0.75rem; }
 .rounded-full { border-radius: 9999px; }
 .divide-y > :not([hidden]) ~ :not([hidden]) { border-top-width: 1px; }
-.divide-neutral-200 > :not([hidden]) ~ :not([hidden]) { border-color: #e5e5e5; }
+.divide-neutral-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-secondary); }
 
 /* Typography */
 .text-xs { font-size: 0.75rem; line-height: 1rem; }
-.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
+.text-sm { font-size: 0.875rem; line-height: 1.375rem; }
 .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
 .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
 .font-medium { font-weight: 500; }
@@ -256,18 +278,18 @@ body {
 .transition-colors { 
     transition-property: color, background-color, border-color;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
+    transition-duration: 200ms;
 }
 
 /* Hover */
-.hover\:bg-neutral-200:hover { background-color: #e5e5e5; }
-.hover\:bg-neutral-100\/50:hover { background-color: rgba(245, 245, 245, 0.5); }
-.hover\:text-neutral-900:hover { color: #171717; }
+.hover\:bg-neutral-200:hover { background-color: var(--bg-tertiary); }
+.hover\:bg-neutral-100\/50:hover { background-color: rgba(248, 248, 248, 0.5); }
+.hover\:text-neutral-900:hover { color: var(--text-primary); }
 
 /* Animation */
 @keyframes pulse {
     0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
+    50% { opacity: 0.6; }
 }
 .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
 
@@ -290,14 +312,14 @@ svg { fill: none; }
 .group-content {
     max-height: 10000px;
     overflow: hidden;
-    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
+    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
     opacity: 1;
 }
 
 .group-content.collapsed {
     max-height: 0;
     opacity: 0;
-    transition: max-height 0.3s ease-in, opacity 0.2s ease-in;
+    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
 }
 
 .cursor-pointer {
@@ -305,7 +327,7 @@ svg { fill: none; }
 }
 
 [data-group-icon] {
-    transition: transform 0.3s ease;
+    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 [data-group-icon].rotated {
@@ -316,17 +338,17 @@ svg { fill: none; }
 .tooltip {
     position: fixed;
     z-index: 1000;
-    padding: 0.5rem 0.75rem;
+    padding: 0.625rem 0.875rem;
     font-size: 0.75rem;
-    line-height: 1.4;
-    background-color: #171717;
-    color: #f5f5f5;
-    border-radius: 0.375rem;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    line-height: 1.5;
+    background-color: #1a1a1a;
+    color: #ededed;
+    border-radius: 0.5rem;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
     pointer-events: none;
     opacity: 0;
     transform: translateY(4px);
-    transition: opacity 150ms ease, transform 150ms ease;
+    transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
     max-width: 280px;
     white-space: normal;
 }
@@ -343,27 +365,26 @@ svg { fill: none; }
     left: 50%;
     transform: translateX(-50%);
     border: 6px solid transparent;
-    border-bottom-color: #171717;
+    border-bottom-color: #1a1a1a;
 }
 
 .tooltip.tooltip-top::before {
     bottom: auto;
     top: 100%;
     border-bottom-color: transparent;
-    border-top-color: #171717;
+    border-top-color: #1a1a1a;
 }
 
 /* Light mode tooltip */
 :root:not(.dark) .tooltip {
     background-color: #ffffff;
-    color: #171717;
-    border: 1px solid #e5e5e5;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+    color: #1a1a1a;
+    border: 1px solid var(--border-primary);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
 }
 
 :root:not(.dark) .tooltip::before {
     border-bottom-color: #ffffff;
-    /* Account for border */
     margin-bottom: -1px;
 }
 
@@ -377,7 +398,7 @@ svg { fill: none; }
 /* Tooltip content styling */
 .tooltip-header {
     font-weight: 500;
-    margin-bottom: 0.25rem;
+    margin-bottom: 0.375rem;
     color: inherit;
 }
 
@@ -385,14 +406,15 @@ svg { fill: none; }
     display: flex;
     justify-content: space-between;
     gap: 1rem;
+    margin-top: 0.25rem;
 }
 
 .tooltip-label {
-    color: #a3a3a3;
+    color: #9b9b9b;
 }
 
 :root:not(.dark) .tooltip-label {
-    color: #737373;
+    color: #6b6b6b;
 }
 
 .tooltip-value {
@@ -413,5 +435,5 @@ svg { fill: none; }
 
 /* Tooltip trigger */
 [data-tooltip] {
-    cursor: pointer;
+    cursor: help;
 }