commit e8aef7b350583e05b03a72fd9a70e49db3d2c84e
parent f7cb01ac54810d214228c639874c7326c88809f2
Author: notamitgamer-bot <noreply@github.com>
Date: Wed, 30 Sep 2026 09:35:32 +0000
ui: restyle index.html with shared light/dark tokens
- map legacy CSS variables onto --ui- tokens
- drop Google Fonts (system font stack), gradients, shadows, blur
- add light/dark theme-color meta
Diffstat:
1 file changed, 45 insertions(+), 55 deletions(-)
diff --git a/app/templates/index.html b/app/templates/index.html
@@ -13,7 +13,8 @@
<link rel="apple-touch-icon" sizes="180x180" href="/static/icons/apple-touch-icon.png">
<link rel="manifest" href="/static/manifest.json">
- <meta name="theme-color" content="#09090b">
+ <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
+ <meta name="theme-color" content="#0d1117" media="(prefers-color-scheme: dark)">
<meta name="color-scheme" content="dark">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
@@ -27,34 +28,28 @@
<script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.4/dist/turbo.es2017-esm.js"></script>
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link href="https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@500;600;700&family=Work+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
-
<style>
:root {
- --bg: #09090b;
- --surface: #121214;
- --surface-2: #1e1e22;
- --surface-3: #27272a;
- --text-main: #f4f4f5;
- --text-dim: #b8b8c0;
-
- --accent-primary: #818cf8;
- --accent-primary-hover: #a5b4fc;
- --accent-secondary: #f97316;
- --success: #10b981;
- --danger: #ef4444;
- --border: rgba(255, 255, 255, 0.08);
- --border-hover: rgba(255, 255, 255, 0.15);
-
- --font-heading: 'Zilla Slab', Georgia, 'Times New Roman', serif;
- --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
- --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-
- --radius-md: 8px;
- --radius-lg: 12px;
- --radius-xl: 16px;
+ /* Legacy names mapped onto the shared --ui- tokens (_styles.html) */
+ --bg: var(--ui-bg);
+ --surface: var(--ui-surface);
+ --surface-2: var(--ui-surface);
+ --surface-3: var(--ui-border);
+ --text-main: var(--ui-text);
+ --text-dim: var(--ui-muted);
+ --accent-primary: var(--ui-accent);
+ --accent-primary-hover: var(--ui-accent);
+ --accent-secondary: var(--ui-accent);
+ --success: var(--ui-success);
+ --danger: var(--ui-danger);
+ --border: var(--ui-border);
+ --border-hover: var(--ui-muted);
+ --font-heading: var(--ui-font);
+ --font-body: var(--ui-font);
+ --font-mono: var(--ui-mono);
+ --radius-md: 6px;
+ --radius-lg: 6px;
+ --radius-xl: 6px;
}
* { box-sizing: border-box; }
@@ -192,7 +187,7 @@
flex-direction: column;
gap: 0.25rem;
z-index: 20;
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+ box-shadow: none;
}
.breadcrumb-menu.open { display: flex; }
@@ -243,7 +238,7 @@
font-family: var(--font-mono);
font-size: 0.9rem;
transition: all 0.2s ease;
- box-shadow: 0 2px 10px rgba(0,0,0,0.1) inset;
+ box-shadow: none;
}
.search-input { font-size: 1rem; padding: 1rem 2.5rem 1rem 1.25rem; }
@@ -251,7 +246,7 @@
outline: none;
background: var(--surface-2);
border-color: var(--accent-primary);
- box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15);
+ box-shadow: none;
}
.filter-input::placeholder, .search-input::placeholder, .url-input::placeholder {
color: var(--text-dim);
@@ -300,7 +295,7 @@
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
- box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.2);
+ box-shadow: none;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
@@ -319,8 +314,8 @@
}
.list-group .filter-input:focus, .list-group .search-input:focus {
- background: rgba(255, 255, 255, 0.02);
- box-shadow: inset 3px 0 0 var(--accent-primary);
+ background: var(--ui-surface);
+ box-shadow: none;
}
.list-item {
@@ -338,10 +333,10 @@
border-bottom: none;
}
.list-item:hover {
- background: rgba(255, 255, 255, 0.03);
+ background: var(--ui-surface);
}
.list-item:active {
- background: rgba(255, 255, 255, 0.05);
+ background: var(--ui-surface);
}
.item-name {
@@ -409,7 +404,7 @@
}
.download-icon:hover {
color: var(--accent-primary);
- background: rgba(129, 140, 248, 0.1);
+ background: var(--ui-accent-bg);
}
.download-icon:active {
transform: scale(0.9);
@@ -472,7 +467,6 @@
border-color: var(--border-hover);
}
.icon-btn:hover:not(:disabled) svg { stroke: var(--accent-primary); }
- .icon-btn:active:not(:disabled) { transform: scale(0.95); }
.file-card {
border: 1px solid var(--border);
@@ -487,10 +481,6 @@
align-items: center;
justify-content: center;
background-color: var(--surface-2);
- background-image:
- linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
- linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
- background-size: 24px 24px;
border-bottom: 1px solid var(--border);
min-height: 200px;
padding: 3rem 1rem;
@@ -548,8 +538,8 @@
font-size: 0.75rem;
font-weight: 600;
color: var(--accent-primary);
- border: 1px solid rgba(129, 140, 248, 0.2);
- background: rgba(129, 140, 248, 0.05);
+ border: 1px solid var(--ui-accent);
+ background: var(--ui-accent-bg);
border-radius: 6px;
padding: 0.35rem 0.85rem;
letter-spacing: 0.5px;
@@ -565,12 +555,12 @@
margin: 0 auto 2.5rem auto;
font-size: 0.85rem;
word-break: break-all;
- background: rgba(0, 0, 0, 0.3);
+ background: var(--ui-surface);
display: inline-block;
padding: 0.75rem 1.25rem;
border-radius: var(--radius-md);
border: 1px solid var(--border);
- box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
+ box-shadow: none;
max-width: 90%;
}
.file-actions {
@@ -623,7 +613,7 @@
cursor: pointer;
color: var(--text-dim);
margin-bottom: 1.5rem;
- background: rgba(255, 255, 255, 0.02);
+ background: var(--ui-surface);
transition: all 0.2s ease;
display: flex;
flex-direction: column;
@@ -640,9 +630,9 @@
}
#dropzone:hover, #dropzone.dragover {
border-color: var(--accent-primary);
- background: rgba(129, 140, 248, 0.08);
+ background: var(--ui-accent-bg);
color: var(--accent-primary);
- box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.1);
+ box-shadow: none;
}
#dropzone:hover svg, #dropzone.dragover svg {
color: var(--accent-primary);
@@ -653,7 +643,7 @@
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
- box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.2);
+ box-shadow: none;
}
.file-row {
@@ -667,8 +657,8 @@
.file-row:last-child {
border-bottom: none;
}
- .file-row.done { background: rgba(16, 185, 129, 0.05); }
- .file-row.error { background: rgba(239, 68, 68, 0.05); }
+ .file-row.done { background: var(--ui-surface); }
+ .file-row.error { background: var(--ui-surface); }
.turbo-progress-bar {
height: 3px;
@@ -712,8 +702,8 @@
.modal-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
- background: rgba(0, 0, 0, 0.8);
- backdrop-filter: blur(4px);
+ background: rgba(0, 0, 0, 0.5);
+
display: flex; align-items: center; justify-content: center;
z-index: 1000;
}
@@ -724,7 +714,7 @@
padding: 2rem;
max-width: 440px;
width: 90%;
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+ box-shadow: none;
}
.modal h3 {
font-family: var(--font-heading);
@@ -785,7 +775,7 @@
}
.history-tab:hover {
color: var(--text-main);
- background: rgba(255, 255, 255, 0.03);
+ background: var(--ui-surface);
}
.history-tab.active {
color: var(--text-main);
