From 2349f585ae70510a874dfe29fd039376040fc9cb Mon Sep 17 00:00:00 2001 From: pptx704 Date: Wed, 25 Mar 2026 12:55:23 +0600 Subject: [PATCH] Bolder, more delightful frontend across all pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - app.css: replace flat --shadow-sm token with real shadows; add --shadow-card and --shadow-dialog tokens; add @keyframes status-ping and .animate-status-ping utility (outward ring ripple, GPU-composited via will-change) for live running status dots - login: headline 5rem → 6.5rem with tighter leading/tracking; expand container to 460px; add sage-green dot grid texture layer beneath the mouse-reactive glow for industrial depth - capsules: upgrade all running dots (header chip + row indicators + status bar) from opacity-fade to ring ripple; apply --shadow-dialog to Launch and Snapshot dialogs - keys: apply --shadow-dialog to all three dialogs - audit: remove duplicate @keyframes fadeUp and iconFloat (redundant with app.css definitions, audit's fadeUp also subtly diverged) - sidebar: active indicator bar taller and thicker (h-5 w-[3px] → h-6 w-1); active bg more vivid (accent/12%); label font-medium → font-semibold; team dialog gets --shadow-dialog --- frontend/src/app.css | 24 +++++++++++++++++-- frontend/src/lib/components/Sidebar.svelte | 12 +++++----- .../src/routes/dashboard/audit/+page.svelte | 10 +------- .../routes/dashboard/capsules/+page.svelte | 20 +++++++++------- .../src/routes/dashboard/keys/+page.svelte | 6 ++--- frontend/src/routes/login/+page.svelte | 19 ++++++++++----- 6 files changed, 56 insertions(+), 35 deletions(-) diff --git a/frontend/src/app.css b/frontend/src/app.css index 0a6b995..9c2e326 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -69,8 +69,10 @@ --radius-avatar: 5px; --radius-logo: 6px; - /* Shadows — flat aesthetic */ - --shadow-sm: 0 0 #0000; + /* Shadows */ + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2); + --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.25); + --shadow-dialog: 0 16px 48px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.35); } /* Base styles */ @@ -131,6 +133,24 @@ body { } } +/* Outward ring ripple — for live/running status dots; more delightful than opacity-only */ +@keyframes status-ping { + 0% { + transform: scale(1); + opacity: 0.8; + } + 80%, + 100% { + transform: scale(2.8); + opacity: 0; + } +} + +.animate-status-ping { + animation: status-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite; + will-change: transform, opacity; +} + /* Fade-up entrance animation */ @keyframes fadeUp { from { diff --git a/frontend/src/lib/components/Sidebar.svelte b/frontend/src/lib/components/Sidebar.svelte index c9a7afc..b7e65f5 100644 --- a/frontend/src/lib/components/Sidebar.svelte +++ b/frontend/src/lib/components/Sidebar.svelte @@ -342,19 +342,19 @@ {:else if isActive(item.href)} {#if !collapsed}
{/if} {#if !collapsed} - + {item.label} {/if} @@ -396,7 +396,7 @@

Create Team diff --git a/frontend/src/routes/dashboard/audit/+page.svelte b/frontend/src/routes/dashboard/audit/+page.svelte index 31556bb..1cd4e93 100644 --- a/frontend/src/routes/dashboard/audit/+page.svelte +++ b/frontend/src/routes/dashboard/audit/+page.svelte @@ -556,15 +556,7 @@