Apply ColmapView dark theme styling

app.py

@@ -103,35 +103,135 @@ DEFAULT_STEP = 3
 
 
 css = """
-/* Overwrite Gradio Default Style */
+/* ColmapView Dark Theme */
+:root {
+    --bg-void: #0a0a0a;
+    --bg-primary: #0f0f0f;
+    --bg-secondary: #161616;
+    --bg-tertiary: #1e1e1e;
+    --bg-input: #1a1a1a;
+    --bg-elevated: #242424;
+    --bg-hover: #262626;
+    --text-primary: #e8e8e8;
+    --text-secondary: #8a8a8a;
+    --text-muted: #5a5a5a;
+    --border-subtle: #222222;
+    --border-color: #2a2a2a;
+    --border-light: #3a3a3a;
+    --accent: #b8b8b8;
+    --accent-hover: #d0d0d0;
+    --accent-dim: rgba(184, 184, 184, 0.12);
+    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
+    --radius: 0.25rem;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
+    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+}
+
+/* Global Overrides */
+.gradio-container { background: var(--bg-primary) !important; color: var(--text-primary) !important; font-family: var(--font-sans) !important; }
+.dark { background: var(--bg-primary) !important; }
+body { background: var(--bg-void) !important; color-scheme: dark; }
+
+/* Panels & Blocks */
+.block { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-lg) !important; }
+.panel { background: var(--bg-secondary) !important; }
+
+/* Inputs */
+input, textarea, select { background: var(--bg-input) !important; border: 1px solid var(--border-color) !important; color: var(--text-primary) !important; border-radius: var(--radius) !important; }
+input:focus, textarea:focus, select:focus { border-color: var(--accent) !important; outline: none !important; }
+
+/* Buttons */
+.primary { background: var(--accent) !important; color: var(--bg-void) !important; border: none !important; }
+.primary:hover { background: var(--accent-hover) !important; }
+.secondary { background: var(--bg-hover) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; }
+.secondary:hover { background: var(--bg-tertiary) !important; }
+button { transition: all 0.15s ease-out !important; }
+
+/* Labels & Text */
+label, .label-wrap { color: var(--text-secondary) !important; font-size: 0.875rem !important; }
+.prose { color: var(--text-primary) !important; }
+.prose h2 { color: var(--text-primary) !important; border: none !important; }
+
+/* Sliders */
+input[type="range"] { accent-color: var(--accent) !important; }
+
+/* Gallery */
+.gallery { background: var(--bg-tertiary) !important; border: 1px solid var(--border-color) !important; }
+
+/* Accordion */
+.accordion { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; }
+
+/* Scrollbar */
+::-webkit-scrollbar { width: 12px; }
+::-webkit-scrollbar-track { background: var(--bg-secondary); }
+::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 9999px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+
+/* Gradio Overrides */
 .stepper-wrapper { padding: 0; }
 .stepper-container { padding: 0; align-items: center; }
 .step-button { flex-direction: row; }
 .step-connector { transform: none; }
-.step-number { width: 16px; height: 16px; }
-.step-label { position: relative; bottom: 0; }
+.step-number { width: 16px; height: 16px; background: var(--bg-tertiary) !important; border: 1px solid var(--border-color) !important; }
+.step-label { position: relative; bottom: 0; color: var(--text-secondary) !important; }
 .wrap.center.full { inset: 0; height: 100%; }
-.wrap.center.full.translucent { background: var(--block-background-fill); }
+.wrap.center.full.translucent { background: var(--bg-secondary); }
 .meta-text-center { display: block !important; position: absolute !important; top: unset !important; bottom: 0 !important; right: 0 !important; transform: unset !important; }
 
 /* Previewer */
-.previewer-container { position: relative; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; width: 100%; height: 722px; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
-.previewer-container .tips-icon { position: absolute; right: 10px; top: 10px; z-index: 10; border-radius: 10px; color: #fff; background-color: var(--color-accent); padding: 3px 6px; user-select: none; }
-.previewer-container .tips-text { position: absolute; right: 10px; top: 50px; color: #fff; background-color: var(--color-accent); border-radius: 10px; padding: 6px; text-align: left; max-width: 300px; z-index: 10; transition: all 0.3s; opacity: 0%; user-select: none; }
-.previewer-container .tips-text p { font-size: 14px; line-height: 1.2; }
-.tips-icon:hover + .tips-text { display: block; opacity: 100%; }
-.previewer-container .mode-row { width: 100%; display: flex; gap: 8px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; }
-.previewer-container .mode-btn { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; opacity: 0.5; transition: all 0.2s; border: 2px solid #ddd; object-fit: cover; }
-.previewer-container .mode-btn:hover { opacity: 0.9; transform: scale(1.1); }
-.previewer-container .mode-btn.active { opacity: 1; border-color: var(--color-accent); transform: scale(1.1); }
-.previewer-container .display-row { margin-bottom: 20px; min-height: 400px; width: 100%; flex-grow: 1; display: flex; justify-content: center; align-items: center; }
+.previewer-container {
+    position: relative;
+    font-family: var(--font-sans);
+    width: 100%;
+    height: 722px;
+    margin: 0 auto;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg-void);
+    border-radius: var(--radius-lg);
+}
+.previewer-container .tips-icon {
+    position: absolute; right: 10px; top: 10px; z-index: 10;
+    border-radius: var(--radius-md); color: var(--bg-void);
+    background-color: var(--accent); padding: 4px 8px;
+    user-select: none; font-size: 0.75rem; font-weight: 500;
+}
+.previewer-container .tips-text {
+    position: absolute; right: 10px; top: 45px;
+    color: var(--text-primary); background-color: var(--bg-elevated);
+    border: 1px solid var(--border-light); border-radius: var(--radius-md);
+    padding: 8px 12px; text-align: left; max-width: 280px; z-index: 10;
+    transition: opacity 0.15s ease-out; opacity: 0; user-select: none;
+    box-shadow: var(--shadow-md);
+}
+.previewer-container .tips-text p { font-size: 0.75rem; line-height: 1.4; color: var(--text-secondary); margin: 4px 0; }
+.tips-icon:hover + .tips-text { opacity: 1; }
+.previewer-container .mode-row { width: 100%; display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; }
+.previewer-container .mode-btn {
+    width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
+    opacity: 0.5; transition: all 0.15s ease-out;
+    border: 2px solid var(--border-light); object-fit: cover;
+}
+.previewer-container .mode-btn:hover { opacity: 0.85; transform: scale(1.1); border-color: var(--text-muted); }
+.previewer-container .mode-btn.active { opacity: 1; border-color: var(--accent); transform: scale(1.1); }
+.previewer-container .display-row { margin-bottom: 16px; min-height: 400px; width: 100%; flex-grow: 1; display: flex; justify-content: center; align-items: center; }
 .previewer-container .previewer-main-image { max-width: 100%; max-height: 100%; flex-grow: 1; object-fit: contain; display: none; }
 .previewer-container .previewer-main-image.visible { display: block; }
-.previewer-container .slider-row { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 10px; }
-.previewer-container input[type=range] { -webkit-appearance: none; width: 100%; max-width: 400px; background: transparent; }
-.previewer-container input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 8px; cursor: pointer; background: #ddd; border-radius: 5px; }
-.previewer-container input[type=range]::-webkit-slider-thumb { height: 20px; width: 20px; border-radius: 50%; background: var(--color-accent); cursor: pointer; -webkit-appearance: none; margin-top: -6px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: transform 0.1s; }
-.previewer-container input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }
+.previewer-container .slider-row { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; }
+.previewer-container input[type=range] { -webkit-appearance: none; width: 100%; max-width: 400px; background: transparent; height: 20px; }
+.previewer-container input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: var(--bg-tertiary); border-radius: 9999px; }
+.previewer-container input[type=range]::-webkit-slider-thumb {
+    height: 12px; width: 12px; border-radius: 50%; background: var(--accent);
+    cursor: pointer; -webkit-appearance: none; margin-top: -4px;
+    box-shadow: var(--shadow-sm); transition: transform 0.1s ease-out;
+}
+.previewer-container input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); background: var(--accent-hover); }
 .gradio-container .padded:has(.previewer-container) { padding: 0 !important; }
 .gradio-container:has(.previewer-container) [data-testid="block-label"] { position: absolute; top: 0; left: 0; }
 """