From 88b19c2aa35865dca68917a965ecde0391a71993 Mon Sep 17 00:00:00 2001 From: frosty Date: Wed, 7 Jan 2026 16:58:42 -0500 Subject: added dynamic theming --- static/main.css | 75 ++++++++++++++++++++++++++++++++++----------------------- 1 file changed, 45 insertions(+), 30 deletions(-) (limited to 'static') diff --git a/static/main.css b/static/main.css index a904518..6a484a6 100644 --- a/static/main.css +++ b/static/main.css @@ -1,13 +1,26 @@ :root { - --bg-main:#121212; - --bg-card:#1e1e1e; - --border:#333333; - --text-primary:#ffffff; - --text-secondary:#a0a0a0; - --text-muted:#d1d1d1; - --accent:#e2e2e2; - --accent-glow:rgba(255,255,255,0.1); + --bg-main: #ffffff; + --bg-card: #f8f9fa; + --border: #e0e0e0; + --text-primary: #1a1a1a; + --text-secondary: #5f6368; + --text-muted: #757575; + --accent: #202124; + --accent-glow: rgba(0,0,0,0.05); +} +@media (prefers-color-scheme: dark) { + :root { + --bg-main: #121212; + --bg-card: #1e1e1e; + --border: #333333; + --text-primary: #ffffff; + --text-secondary: #a0a0a0; + --text-muted: #d1d1d1; + --accent: #e2e2e2; + --accent-glow: rgba(255,255,255,0.1); + } } + body { background-color:var(--bg-main); color:var(--text-primary); @@ -16,13 +29,14 @@ body { padding:0; } .view-home { - display:flex; - justify-content:center; - align-items:center; - min-height:100vh; - padding:20px; - background:radial-gradient(circle at top right,#0b0c0e 0%,#000000 100%); + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + padding: 20px; + background: radial-gradient(circle at top right, var(--bg-card) 0%, var(--bg-main) 100%); } + .view-home .container { width:100%; max-width:580px; @@ -95,14 +109,14 @@ h1 span { color:var(--accent); } .search-box { - width:100%; - padding:12px 24px; - border-radius:99px; - border:1px solid var(--border); - background:var(--bg-card); - color:white; - outline:none; - transition:border-color 0.2s,box-shadow 0.2s; + width: 100%; + padding: 12px 24px; + border-radius: 99px; + border: 1px solid var(--border); + background: var(--bg-card); + color: var(--text-primary); + outline: none; + transition: border-color 0.2s, box-shadow 0.2s; } .search-box:focus { border-color:var(--accent); @@ -173,14 +187,14 @@ h1 span { transition:opacity 0.3s; } .image-overlay { - position:absolute; - inset:0; - background:rgba(15,23,42,0.7); - display:flex; - align-items:center; - justify-content:center; - opacity:0; - transition:opacity 0.2s; + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.4); + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.2s; } .image-card:hover .image-overlay { opacity:1; @@ -358,3 +372,4 @@ h1 span { font-size:3rem; } + -- cgit v1.2.3