From 3c7be220190eceaee9faf0ff7cc47575136e1d93 Mon Sep 17 00:00:00 2001 From: Atridad Lahiji Date: Fri, 24 Apr 2026 00:08:39 -0600 Subject: [PATCH] Cleaned up UI and CSS --- static/styles/main.css | 241 ++++++++++++++++++---------------------- templates/index.html | 2 +- templates/login.html | 2 +- templates/register.html | 2 +- templates/room.html | 2 +- 5 files changed, 115 insertions(+), 134 deletions(-) diff --git a/static/styles/main.css b/static/styles/main.css index 58aaeb3..4470f50 100644 --- a/static/styles/main.css +++ b/static/styles/main.css @@ -9,37 +9,36 @@ /* tokens */ :root { - --bg: #0a0a0f; - --bg-surface: rgba(255, 255, 255, 0.04); - --bg-surface-hover: rgba(255, 255, 255, 0.07); - --border: rgba(255, 255, 255, 0.08); - --border-accent: rgba(139, 92, 246, 0.4); + --bg: #0d0d12; + --bg-surface: #15151e; + --bg-surface-hover: #1c1c28; + --border: #232332; + --border-accent: rgba(99, 102, 241, 0.4); - --text-primary: #f1f5f9; + --text-primary: #f8fafc; --text-secondary: #94a3b8; - --text-muted: #475569; + --text-muted: #64748b; - --accent: #8b5cf6; - --accent-hover: #7c3aed; - --accent-glow: rgba(139, 92, 246, 0.25); + --accent: #6366f1; /* Indigo */ + --accent-hover: #4f46e5; + --accent-glow: rgba(99, 102, 241, 0.15); - --success-bg: rgba(16, 185, 129, 0.08); - --success-border: rgba(16, 185, 129, 0.25); - --success-text: #34d399; - --success-label: #6ee7b7; + --success-bg: rgba(16, 185, 129, 0.05); + --success-border: rgba(16, 185, 129, 0.2); + --success-text: #10b981; + --success-label: #34d399; - --radius-sm: 6px; - --radius-md: 12px; - --radius-lg: 20px; + --radius-sm: 8px; + --radius-md: 14px; + --radius-lg: 24px; + --radius-full: 9999px; - --shadow-card: 0 0 0 1px var(--border), 0 24px 48px rgba(0, 0, 0, 0.4); - --shadow-btn: 0 0 20px var(--accent-glow); + --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --shadow-btn: 0 0 30px var(--accent-glow); - --font: - "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", - sans-serif; - --font-mono: - "JetBrains Mono", "Fira Code", "Cascadia Code", ui-monospace, monospace; + --font: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; + --font-heading: "Outfit", "Inter", sans-serif; + --font-mono: "JetBrains Mono", monospace; } /* base */ @@ -58,20 +57,6 @@ body { justify-content: center; padding: 2rem; line-height: 1.6; - - /* subtle grid bg */ - background-image: - radial-gradient( - ellipse 80% 60% at 50% -10%, - rgba(139, 92, 246, 0.12), - transparent - ), - linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), - linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); - background-size: - auto, - 40px 40px, - 40px 40px; } /* card */ @@ -79,15 +64,12 @@ body { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); - box-shadow: var(--shadow-card); - padding: 3rem 2.75rem; + padding: 3.5rem 3rem; max-width: 480px; width: 100%; text-align: center; - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); position: relative; - overflow: hidden; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } /* app shell body — reset centering, fill viewport */ @@ -353,9 +335,7 @@ footer a:hover { border-radius: 99px; } -/* ============================================================ - AUTH PAGES (login / register) - ============================================================ */ +/* Auth */ /* body variant — keeps the grid bg from body, just re-centers */ .auth-body { @@ -485,41 +465,27 @@ footer a:hover { align-items: center; justify-content: center; gap: 0.5rem; - background: linear-gradient(135deg, var(--accent), #6366f1); + background: var(--accent); color: #fff; font-family: var(--font); font-size: 0.95rem; font-weight: 600; - padding: 0.75rem; - border: none; + padding: 0.85rem; + border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); cursor: pointer; - letter-spacing: 0.01em; - transition: - opacity 0.2s ease, - transform 0.15s ease, - box-shadow 0.2s ease; - box-shadow: var(--shadow-btn); - position: relative; - overflow: hidden; -} - -.btn-primary::after { - content: ""; - position: absolute; - inset: 0; - background: linear-gradient(rgba(255, 255, 255, 0.12), transparent); - pointer-events: none; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .btn-primary:hover { - opacity: 0.9; - box-shadow: 0 0 32px var(--accent-glow); + background: var(--accent-hover); transform: translateY(-1px); + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2); } .btn-primary:active { - transform: scale(0.97) translateY(0); + transform: translateY(0); } /* footer link line below the card */ @@ -557,61 +523,64 @@ footer a:hover { background: var(--border); } -/* ============================================================ - HOME / DASHBOARD — app shell - ============================================================ */ +/* Dashboard */ .app-shell { display: grid; - grid-template-columns: 240px 1fr; - grid-template-rows: 1fr; + grid-template-columns: 260px 1fr; height: 100vh; width: 100%; overflow: hidden; + background: #09090b; } /* sidebar */ .sidebar { - background: rgba(255, 255, 255, 0.02); - border-right: 1px solid var(--border); + background: #09090b; + border-right: 1px solid #18181b; display: flex; flex-direction: column; padding: 1.5rem 1rem; overflow-y: auto; + z-index: 10; } .sidebar-logo { display: flex; align-items: center; - gap: 0.6rem; + gap: 0.75rem; padding: 0.5rem 0.75rem; - margin-bottom: 1.5rem; + margin-bottom: 2.5rem; } .sidebar-logo .logo-icon { - width: 36px; - height: 36px; - border-radius: var(--radius-sm); - background: linear-gradient(135deg, var(--accent), #6366f1); + width: 32px; + height: 32px; + background: linear-gradient(135deg, var(--accent), #4f46e5); + border-radius: 8px; display: flex; align-items: center; justify-content: center; + color: white; font-size: 1.1rem; - box-shadow: 0 0 16px var(--accent-glow); + font-weight: bold; + box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); flex-shrink: 0; } .sidebar-logo .logo-text { - font-weight: 700; - font-size: 1rem; - background: linear-gradient(135deg, #c4b5fd, var(--accent)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + font-family: var(--font-heading); + font-size: 1.15rem; + font-weight: 600; + letter-spacing: -0.02em; + color: var(--text-primary); } -/* nav links */ -.sidebar-nav { +.sidebar-logo .logo-text span { + color: var(--accent); +} + +/* Nav */ display: flex; flex-direction: column; gap: 0.25rem; @@ -633,14 +602,15 @@ footer a:hover { } .nav-item:hover { - background: var(--bg-surface-hover); + background: #18181b; color: var(--text-primary); } .nav-item.active { - background: rgba(139, 92, 246, 0.12); - color: var(--accent); - border-color: rgba(139, 92, 246, 0.2); + background: #18181b; + color: var(--text-primary); + border-color: #27272a; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); } .nav-item svg { @@ -667,14 +637,14 @@ footer a:hover { .user-avatar { width: 32px; height: 32px; - border-radius: 50%; - background: linear-gradient(135deg, var(--accent), #6366f1); + border-radius: 8px; + background: #27272a; display: flex; align-items: center; justify-content: center; - font-size: 0.8rem; - font-weight: 700; - color: #fff; + color: var(--text-primary); + font-weight: 600; + font-size: 0.85rem; flex-shrink: 0; } @@ -728,16 +698,20 @@ footer a:hover { display: flex; flex-direction: column; overflow-y: auto; - background: var(--bg); + background: #0d0d12; } .topbar { display: flex; align-items: center; justify-content: space-between; - padding: 1.25rem 2rem; - border-bottom: 1px solid var(--border); + padding: 1rem 2.5rem; + border-bottom: 1px solid #18181b; + background: #0d0d12; flex-shrink: 0; + position: sticky; + top: 0; + z-index: 5; } .topbar-title { @@ -915,22 +889,21 @@ footer a:hover { .modal-overlay { position: fixed; inset: 0; - background: rgba(0, 0, 0, 0.7); + background: rgba(9, 9, 11, 0.8); display: flex; align-items: center; justify-content: center; z-index: 100; - backdrop-filter: blur(4px); } .modal { - background: var(--bg-surface); - border: 1px solid var(--border); + background: #18181b; + border: 1px solid #27272a; border-radius: var(--radius-lg); - padding: 2rem; + padding: 2.5rem; max-width: 420px; width: 90%; - box-shadow: var(--shadow-card); + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); } .modal-header { @@ -947,16 +920,21 @@ footer a:hover { } .modal-close { - background: none; + background: #27272a; border: none; color: var(--text-secondary); - font-size: 1.5rem; + width: 28px; + height: 28px; + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; cursor: pointer; - padding: 0.25rem; - line-height: 1; + transition: all 0.2s; } .modal-close:hover { + background: #3f3f46; color: var(--text-primary); } @@ -1030,20 +1008,24 @@ footer a:hover { } .story-card { - background: rgba(255, 255, 255, 0.03); - border: 1px solid var(--border); + background: #18181b; + border: 1px solid #27272a; border-radius: var(--radius-md); - padding: 1rem; - transition: all 0.15s; + padding: 1.25rem; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + cursor: default; } .story-card:hover { - border-color: var(--border-accent); + border-color: #3f3f46; + transform: translateY(-2px); + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); } .story-revealed { - border-color: rgba(139, 92, 246, 0.3); - background: rgba(139, 92, 246, 0.05); + border-color: rgba(99, 102, 241, 0.2); + background: rgba(99, 102, 241, 0.03); } .story-header { @@ -1145,15 +1127,15 @@ footer a:hover { } .vote-option { - background: var(--bg-surface); - border: 1px solid var(--border); + background: #1c1c28; + border: 1px solid #2d2d3d; border-radius: var(--radius-md); - padding: 0.4rem 0.75rem; + padding: 0.5rem 0.85rem; font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; - transition: all 0.15s; + transition: all 0.2s; } .vote-option:hover { @@ -1164,13 +1146,14 @@ footer a:hover { .vote-option.vote-selected { border-color: var(--accent); - background: rgba(139, 92, 246, 0.12); - color: var(--text-primary); + background: var(--accent); + color: #fff; + box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); } .story-active { - border-color: var(--success-border); - background: var(--success-bg); + border-color: rgba(16, 185, 129, 0.2); + background: rgba(16, 185, 129, 0.02); } .story-action-btn { @@ -1286,9 +1269,7 @@ footer a:hover { animation: pulse 2s ease infinite; } -/* ============================================================ - RESPONSIVE - ============================================================ */ +/* Responsive */ .sidebar-backdrop { display: none; diff --git a/templates/index.html b/templates/index.html index f9395ed..f45b489 100644 --- a/templates/index.html +++ b/templates/index.html @@ -7,7 +7,7 @@ diff --git a/templates/login.html b/templates/login.html index 4391ffa..b37be69 100644 --- a/templates/login.html +++ b/templates/login.html @@ -7,7 +7,7 @@ diff --git a/templates/register.html b/templates/register.html index e8ec340..cecbf1a 100644 --- a/templates/register.html +++ b/templates/register.html @@ -7,7 +7,7 @@ diff --git a/templates/room.html b/templates/room.html index b234e61..74e996e 100644 --- a/templates/room.html +++ b/templates/room.html @@ -7,7 +7,7 @@