restyle ui to match odio.love and pwa

Author: b0bbywan

tailwind.config.js

@@ -4,7 +4,26 @@ module.exports = {
     "./ui/templates/**/*.gohtml",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        // Remap zinc → forest palette (dark green-tinted)
+        zinc: {
+          100: '#e4f0e5',
+          200: '#c4dcc8',
+          300: '#9ab8a2',
+          400: '#6a9472',
+          500: '#3a5440',
+          600: '#243629',
+          700: '#1a2a1e',
+          800: '#131d16',
+          900: '#0d1410',
+          950: '#060c08',
+        },
+        leaf: '#4a7c59',
+        moss:  '#2a4e35',
+        gold:  '#c8963a',
+      },
+    },
   },
   plugins: [],
 }

ui/static/logo.png

@@ -16,14 +16,14 @@ details > summary::-webkit-details-marker {
 	height: 8px;
 }
 ::-webkit-scrollbar-track {
-	background: #18181b;
+	background: #0d1410;
 }
 ::-webkit-scrollbar-thumb {
-	background: #3f3f46;
+	background: #243629;
 	border-radius: 4px;
 }
 ::-webkit-scrollbar-thumb:hover {
-	background: #52525b;
+	background: #3a5440;
 }
 
 /* HTMX request indicator */
@@ -45,9 +45,10 @@ button.htmx-request {
 /* Volume & seek sliders */
 .volume-slider,
 .seek-slider {
+	accent-color: #c8963a;
 	height: 4px;
 	border-radius: 2px;
-	background: #3f3f46;
+	background: #243629;
 	outline: none;
 	opacity: 0.9;
 	transition: opacity 0.2s;
@@ -73,7 +74,7 @@ button.htmx-request {
 	width: 14px;
 	height: 14px;
 	border-radius: 50%;
-	background: #3b82f6;
+	background: #c8963a;
 	cursor: pointer;
 }
 
@@ -82,18 +83,24 @@ button.htmx-request {
 	width: 14px;
 	height: 14px;
 	border-radius: 50%;
-	background: #3b82f6;
+	background: #c8963a;
 	cursor: pointer;
 	border: none;
 }
 
 .volume-slider::-moz-range-progress,
 .seek-slider::-moz-range-progress {
-	background: #3b82f6;
+	background: #c8963a;
 	height: 4px;
 	border-radius: 2px;
 }
 
+/* Forest theme: highlight playing state with leaf green */
+.status-badge-playing {
+	background-color: rgba(74, 124, 89, 0.2);
+	color: #4a7c59;
+}
+
 /* Component utility classes */
 @layer components {
 	.section-card {
@@ -129,23 +136,23 @@ button.htmx-request {
 	}
 
 	.badge-green {
-		@apply bg-green-500/10 text-green-400;
+		@apply bg-leaf/10 text-leaf;
 	}
 
 	.badge-blue {
-		@apply bg-blue-500/10 text-blue-400;
+		@apply bg-zinc-700/50 text-zinc-400;
 	}
 
 	.badge-purple {
-		@apply bg-purple-500/10 text-purple-400;
+		@apply bg-moss/30 text-zinc-300;
 	}
 
 	.badge-red {
 		@apply bg-red-500/20 text-red-400;
 	}
 
 	.player-card {
-		@apply flex flex-col gap-3 rounded-lg bg-zinc-700/50 p-3 transition-colors hover:bg-zinc-700;
+		@apply flex flex-col gap-3 rounded-lg bg-zinc-900/50 p-3 transition-colors hover:bg-zinc-900;
 		container-type: inline-size;
 	}
 
@@ -155,7 +162,7 @@ button.htmx-request {
 	}
 
 	.btn {
-		@apply rounded-lg bg-zinc-600/50 px-3 py-2 text-sm transition-colors hover:bg-zinc-600 active:scale-95;
+		@apply rounded-lg bg-zinc-700/50 px-3 py-2 text-sm transition-colors hover:bg-zinc-700 active:scale-95;
 	}
 
 	.text-muted {
@@ -205,15 +212,18 @@ button.htmx-request {
 
 	/* Typography utilities */
 	.player-name {
-		@apply truncate font-medium text-zinc-200;
+		@apply truncate font-medium;
+		color: #e4e4e7;
 	}
 
 	.player-meta {
-		@apply truncate text-sm text-muted;
+		@apply truncate text-sm;
+		color: #a1a1aa;
 	}
 
 	.player-meta-small {
-		@apply truncate text-xs text-subtle;
+		@apply truncate text-xs;
+		color: #71717a;
 	}
 
 	.empty-state-icon {

ui/styles/input.css

@@ -7,6 +7,8 @@
 
 	<title>{{ .Title }}</title>
 
+	<link rel="icon" type="image/png" href="/ui/static/logo.png">
+
 	<!-- Compiled Tailwind CSS -->
 	<link rel="stylesheet" href="/ui/static/output.css">
 
@@ -21,33 +23,36 @@
 	<header class="sticky top-0 z-10 border-b border-zinc-800 bg-zinc-900/95 backdrop-blur">
 		<div class="mx-auto max-w-7xl px-4 py-3 sm:px-6 lg:px-8">
 			<div class="flex items-center justify-between">
-				<div>
-					<h1 class="text-lg font-semibold sm:text-xl">
-						{{ .Title }}
-					</h1>
-					{{ if .ServerInfo }}
-					<p class="text-xs text-zinc-500 sm:text-sm">
-						{{ .ServerInfo.Hostname }}
-					</p>
-					{{ end }}
+				<div class="flex items-center gap-3">
+					<img src="/ui/static/logo.png" alt="odio logo" class="h-10 w-10 object-contain">
+					<div>
+						<h1 class="text-lg font-semibold sm:text-xl lowercase">
+							{{ .Title }}
+						</h1>
+						{{ if .ServerInfo }}
+						<p class="text-xs text-zinc-500 sm:text-sm">
+							{{ .ServerInfo.Hostname }}
+						</p>
+						{{ end }}
+					</div>
 				</div>
 
 				{{ if .ServerInfo }}
 				<div class="flex items-center gap-3">
 					<!-- Backend status badges (hidden on mobile) -->
 					<div class="hidden gap-2 sm:flex">
 						{{ if .ServerInfo.Backends.PulseAudio }}
-						<span class="rounded-full bg-blue-500/10 px-2 py-1 text-xs text-blue-400">
+						<span class="rounded-full bg-zinc-700/50 px-2 py-1 text-xs text-zinc-400">
 							Audio
 						</span>
 						{{ end }}
 						{{ if .ServerInfo.Backends.MPRIS }}
-						<span class="rounded-full bg-green-500/10 px-2 py-1 text-xs text-green-400">
+						<span class="rounded-full bg-leaf/10 px-2 py-1 text-xs text-leaf">
 							MPRIS
 						</span>
 						{{ end }}
 						{{ if .ServerInfo.Backends.Systemd }}
-						<span class="rounded-full bg-purple-500/10 px-2 py-1 text-xs text-purple-400">
+						<span class="rounded-full bg-moss/20 px-2 py-1 text-xs text-zinc-300">
 							Systemd
 						</span>
 						{{ end }}

ui/templates/base.gohtml

@@ -22,14 +22,14 @@
 	<div class="info-card mb-4">
 		<div class="mb-2 text-xs text-subtle">Default Sink</div>
 		<div class="sink-dropdown relative mb-3">
-			<button onclick="this.nextElementSibling.classList.toggle('hidden')" class="truncate text-sm font-medium w-full text-left cursor-pointer hover:text-blue-400 transition-colors" title="{{ .DefaultSink.Description }}">
+			<button onclick="this.nextElementSibling.classList.toggle('hidden')" class="truncate text-sm font-medium w-full text-left cursor-pointer hover:text-leaf transition-colors" title="{{ .DefaultSink.Description }}">
 				{{ .DefaultSink.Description }} <span class="text-xs text-subtle">▾</span>
 			</button>
-			<ul class="hidden absolute left-0 right-0 mt-1 bg-gray-800 border border-gray-600 rounded shadow-lg z-10 max-h-48 overflow-y-auto">
+			<ul class="hidden absolute left-0 right-0 mt-1 bg-zinc-800 border border-zinc-700 rounded shadow-lg z-10 max-h-48 overflow-y-auto">
 				{{ range .Outputs }}
 				<li>
 					<button onclick="setDefaultOutput('{{ .Name }}'); closeSinkDropdown()"
-						class="w-full text-left px-3 py-2 text-sm hover:bg-gray-700 cursor-pointer truncate {{ if .Default }}text-blue-400 font-medium{{ else }}text-gray-300{{ end }}">
+						class="w-full text-left px-3 py-2 text-sm hover:bg-zinc-700 cursor-pointer truncate {{ if .Default }}text-leaf font-medium{{ else }}text-zinc-300{{ end }}">
 						{{ .Description }}
 					</button>
 				</li>