+ 
+
diff --git a/internal/idlewatcher/html/style.css b/internal/idlewatcher/html/style.css
index d7d79728..50bfc163 100644
--- a/internal/idlewatcher/html/style.css
+++ b/internal/idlewatcher/html/style.css
@@ -1,194 +1,283 @@
-/* size variables */
:root {
- --dot-size: 12px;
- --logo-size: 100px;
+ color-scheme: light;
+ --fg: #141413;
+ --fg-secondary: #52514e;
+ --bg: #fafaf9;
+ --surface: #ffffff;
+ --rule: #292826;
+ --border: color-mix(in srgb, var(--rule) 12%, var(--bg));
+ --text: var(--fg);
+ --muted: var(--fg-secondary);
+ --faint: color-mix(in srgb, var(--rule) 9%, transparent);
+ --console-bg: #f5f5f4;
+ --msg-error: #b91c1c;
+ --text-emphasis: color-mix(in srgb, var(--fg) 92%, var(--bg) 8%);
+ --dot-size: 6px;
+ --logo-size: 72px;
+ --radius: 10px;
+ --font-sans:
+ ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+ Roboto, "Helvetica Neue", sans-serif;
+ --font-mono:
+ ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
+ --accent-starting: #52525b;
+ --accent-waking-dep: #0369a1;
+ --accent-dep-ready: #15803d;
+ --accent-container-woke: #047857;
+ --accent-waiting-ready: #b45309;
+ --accent-ready: #166534;
+ --accent-error: #dc2626;
+ --level-debug: color-mix(in srgb, var(--fg-secondary) 18%, transparent);
+ --level-info: transparent;
+ --level-warn: color-mix(in srgb, #b45309 16%, transparent);
+ --level-error: color-mix(in srgb, #dc2626 12%, transparent);
}
-/* Global Styles */
-* {
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ color-scheme: dark;
+ --fg: #ecebe8;
+ --fg-secondary: #9c9a94;
+ --bg: #0c0c0b;
+ --surface: #111113;
+ --rule: #5c5954;
+ --border: rgba(255, 255, 255, 0.06);
+ --text: var(--fg);
+ --muted: var(--fg-secondary);
+ --faint: rgba(255, 255, 255, 0.08);
+ --console-bg: #0a0a0b;
+ --msg-error: #fecaca;
+ --text-emphasis: rgba(255, 255, 255, 0.95);
+ --accent-starting: #a1a1aa;
+ --accent-waking-dep: #38bdf8;
+ --accent-dep-ready: #4ade80;
+ --accent-container-woke: #34d399;
+ --accent-waiting-ready: #fbbf24;
+ --accent-ready: #86efac;
+ --accent-error: #f87171;
+ --level-debug: rgba(161, 161, 170, 0.35);
+ --level-info: transparent;
+ --level-warn: rgba(251, 191, 36, 0.2);
+ --level-error: rgba(248, 113, 113, 0.12);
+ }
+}
+
+*,
+*::before,
+*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
+
+html {
+ background-color: var(--bg);
+ -webkit-text-size-adjust: 100%;
+}
+
body {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
- Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
- font-size: 16px;
- line-height: 1.5;
- color: #f8f9fa;
+ font-family: var(--font-sans);
+ font-size: 15px;
+ line-height: 1.45;
+ color: var(--text);
+ min-height: 100vh;
display: flex;
flex-direction: column;
- justify-content: center;
- align-items: center;
- height: 100vh;
- margin: 0;
- background: linear-gradient(135deg, #121212 0%, #1e1e1e 100%);
-}
-
-/* Container */
-.container {
- display: flex;
- flex-direction: column;
- gap: 32px;
align-items: center;
justify-content: center;
- padding: 32px;
- border-radius: 16px;
- background-color: rgba(30, 30, 30, 0.9);
- box-shadow: 0 16px 64px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2);
- backdrop-filter: blur(12px);
- max-width: 90%;
- transition: all 0.3s ease;
- min-width: 600px;
- min-height: 400px;
+ padding: clamp(1rem, 4vw, 1.5rem);
+ background: var(--bg);
}
-@media (max-width: 768px) {
- .container {
- min-width: auto;
- max-width: 90%;
+@media (prefers-color-scheme: dark) {
+ body {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
}
-/* Spinner Styles */
+.container {
+ width: 100%;
+ max-width: 520px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 28px;
+ padding: 28px 24px 24px;
+ background: var(--surface);
+ border: 1px solid var(--border);
+ border-radius: var(--radius);
+}
+
+.logo {
+ width: var(--logo-size);
+ height: var(--logo-size);
+ opacity: 0.92;
+}
+
.loading-dots {
display: flex;
- justify-content: center;
align-items: center;
- gap: 8px;
+ justify-content: center;
+ gap: 6px;
+ height: 10px;
}
+
.dot {
width: var(--dot-size);
height: var(--dot-size);
- background-color: #66d9ef;
border-radius: 50%;
- animation: bounce 1.3s infinite ease-in-out;
+ background: var(--muted);
+ animation: pulse 1.2s ease-in-out infinite;
}
+
.dot:nth-child(1) {
- animation-delay: -0.32s;
+ animation-delay: 0ms;
}
.dot:nth-child(2) {
- animation-delay: -0.16s;
+ animation-delay: 160ms;
}
-@keyframes bounce {
+.dot:nth-child(3) {
+ animation-delay: 320ms;
+}
+
+@keyframes pulse {
0%,
- 80%,
100% {
- transform: translateY(0);
+ opacity: 0.25;
+ transform: scale(0.92);
}
- 40% {
- transform: translateY(-10px);
+ 50% {
+ opacity: 1;
+ transform: scale(1);
}
}
-/* Message Styles */
-.message {
- font-size: 18px;
- font-weight: 500;
- text-align: left;
- color: #f8f9fa;
- max-width: 100%;
- letter-spacing: 0.3px;
-}
-
-/* Console Styles */
.console {
- font-family: "Fira Code", "Consolas", "Monaco", "Courier New", monospace;
- font-size: 14px;
- background-color: #1a1a1a;
- border: 1px solid #333;
- border-radius: 8px;
- padding: 16px;
- color: #e0e0e0;
- overflow-y: auto;
- max-height: 300px;
- min-height: 200px;
width: 100%;
- box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
+ font-family: var(--font-mono);
+ font-size: 12px;
+ line-height: 1.5;
+ letter-spacing: -0.01em;
+ background: var(--console-bg);
+ border: 1px solid var(--border);
+ border-radius: calc(var(--radius) - 2px);
+ padding: 10px 0;
+ min-height: 180px;
+ max-height: 280px;
+ overflow-y: auto;
+ scrollbar-width: thin;
+ scrollbar-color: var(--faint) transparent;
}
.console-line {
- display: flex;
- align-items: flex-start;
- margin-bottom: 4px;
- padding: 2px 0;
- border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+ display: grid;
+ grid-template-columns: 5.5rem 1fr;
+ column-gap: 12px;
+ align-items: baseline;
+ padding: 6px 12px 6px 14px;
+ border-inline-start: 2px solid var(--line-accent, var(--accent-starting));
+ background: linear-gradient(
+ 90deg,
+ var(--level-bg, transparent) 0%,
+ transparent 48px
+ );
+ border-bottom: 1px solid var(--faint);
}
.console-line:last-child {
border-bottom: none;
- margin-bottom: 0;
+}
+
+.console-line.level-debug {
+ --level-bg: var(--level-debug);
+}
+
+.console-line.level-info {
+ --level-bg: var(--level-info);
+}
+
+.console-line.level-warn {
+ --level-bg: var(--level-warn);
+}
+
+.console-line.level-error {
+ --level-bg: var(--level-error);
+ border-inline-start-width: 3px;
}
.console-timestamp {
- color: #66d9ef;
- margin-right: 12px;
- font-weight: 500;
- flex-shrink: 0;
- min-width: 80px;
+ color: var(--muted);
+ font-variant-numeric: tabular-nums;
+ white-space: nowrap;
}
.console-message {
- flex: 1;
+ color: var(--text);
word-break: break-word;
white-space: pre-wrap;
}
-.console-line.starting .console-message {
- color: #f9f871;
+.console-line.starting {
+ --line-accent: var(--accent-starting);
}
-.console-line.waking_dep .console-message {
- color: #66d9ef;
+.console-line.waking_dep {
+ --line-accent: var(--accent-waking-dep);
}
-.console-line.dep_ready .console-message {
- color: #a6e22e;
+.console-line.dep_ready {
+ --line-accent: var(--accent-dep-ready);
}
-.console-line.container_woke .console-message {
- color: #a6e22e;
+.console-line.container_woke {
+ --line-accent: var(--accent-container-woke);
}
-.console-line.waiting_ready .console-message {
- color: #fd971f;
+.console-line.waiting_ready {
+ --line-accent: var(--accent-waiting-ready);
+}
+
+.console-line.ready {
+ --line-accent: var(--accent-ready);
}
.console-line.ready .console-message {
- color: #a6e22e;
- font-weight: bold;
+ font-weight: 600;
+ color: var(--text-emphasis);
+}
+
+.console-line.error {
+ --line-accent: var(--accent-error);
}
.console-line.error .console-message {
- color: #f92672;
- font-weight: bold;
+ color: var(--msg-error);
+ font-weight: 500;
}
-/* Loading dots in console */
.console-loading {
- display: flex;
+ display: inline-flex;
align-items: center;
- gap: 4px;
- margin-left: 8px;
+ gap: 3px;
+ margin-inline-start: 6px;
+ vertical-align: middle;
}
.console-loading-dot {
- width: 6px;
- height: 6px;
- background-color: #66d9ef;
+ width: 4px;
+ height: 4px;
border-radius: 50%;
- animation: bounce 1.3s infinite ease-in-out;
+ background: var(--muted);
+ animation: pulse 1.2s ease-in-out infinite;
}
.console-loading-dot:nth-child(1) {
- animation-delay: -0.32s;
+ animation-delay: 0ms;
}
-
.console-loading-dot:nth-child(2) {
- animation-delay: -0.16s;
+ animation-delay: 160ms;
}
-
-/* Logo */
-.logo {
- width: var(--logo-size);
- height: var(--logo-size);
+.console-loading-dot:nth-child(3) {
+ animation-delay: 320ms;
}