From 823a50ce85f504ee036276418c923ff0f466fa5d Mon Sep 17 00:00:00 2001 From: Christoph Brandau Date: Sat, 29 Aug 2026 22:52:14 +0200 Subject: [PATCH] style(repo-loading): refine overlay visuals and theming Update the repository loading overlay and related UI styles to use design tokens, improve contrast, and reduce visual bulk. Sizes, spacing, radii, and icon dimensions were tuned to create a more compact, consistent card. Backgrounds, grid textures, and shadows were switched to CSS variables and color-mix; subtle backdrop-filter and opacity tweaks improve legibility across themes. - Replace hardcoded colors with theme variables and color-mix - Reduce component dimensions and tighten spacing for a compact UI - Add backdrop blur, adjust grid opacity, and simplify shadows --- src/app.css | 3 +- src/lib/components/RepoLoadingOverlay.svelte | 132 ++++++++----------- 2 files changed, 54 insertions(+), 81 deletions(-) diff --git a/src/app.css b/src/app.css index 356f8ed..9f5830c 100644 --- a/src/app.css +++ b/src/app.css @@ -6475,6 +6475,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s display: grid; place-items: center; min-width: 0; + overflow: hidden; color: var(--color-primary); background: var(--color-surface-dim); } @@ -6496,7 +6497,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border)); border-radius: 50%; background: var(--color-surface-solid); - box-shadow: 0 0 0 4px var(--color-surface-dim); + box-shadow: 0 0 0 2px var(--color-surface-dim); } .status-lane-head { display: flex; diff --git a/src/lib/components/RepoLoadingOverlay.svelte b/src/lib/components/RepoLoadingOverlay.svelte index b64d6bc..0f7972d 100644 --- a/src/lib/components/RepoLoadingOverlay.svelte +++ b/src/lib/components/RepoLoadingOverlay.svelte @@ -41,17 +41,24 @@ display: grid; place-items: center; overflow: hidden; - background: linear-gradient(135deg, #070a10 0%, #0c111a 48%, #090e16 100%); + background: + radial-gradient( + circle at 50% 42%, + color-mix(in srgb, var(--color-accent) 13%, transparent), + transparent 38% + ), + var(--app-dialog-backdrop); + backdrop-filter: blur(5px); animation: overlay-in 180ms ease; } .repo-loading-grid { position: absolute; inset: 0; - opacity: 0.28; + opacity: 0.34; background-image: - linear-gradient(rgba(111, 140, 255, 0.09) 1px, transparent 1px), - linear-gradient(90deg, rgba(77, 182, 214, 0.07) 1px, transparent 1px); + linear-gradient(color-mix(in srgb, var(--color-primary) 9%, transparent) 1px, transparent 1px), + linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 8%, transparent) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle at center, black 0%, transparent 68%); animation: grid-drift 10s linear infinite; @@ -62,23 +69,21 @@ display: flex; flex-direction: column; align-items: center; - gap: 18px; - width: min(420px, calc(100vw - 42px)); - padding: 30px 34px 28px; - border: 1px solid rgba(90, 111, 154, 0.28); - border-radius: 16px; + gap: 14px; + width: min(360px, calc(100vw - 32px)); + padding: 26px 30px 24px; + border: 1px solid var(--color-border-input); + border-radius: 14px; background: - linear-gradient(180deg, rgba(23, 29, 43, 0.92), rgba(12, 17, 27, 0.94)), - var(--color-surface-raised); - box-shadow: - 0 26px 78px rgba(0, 0, 0, 0.54), - inset 0 1px 0 rgba(255, 255, 255, 0.05); + var(--app-panel-highlight), + var(--app-dialog-bg); + box-shadow: var(--app-dialog-shadow); } .repo-loading-mark { position: relative; - width: 168px; - height: 168px; + width: 116px; + height: 116px; display: grid; place-items: center; isolation: isolate; @@ -86,25 +91,25 @@ .repo-loading-halo { position: absolute; - inset: 10px; - border: 1px solid rgba(111, 140, 255, 0.22); - border-radius: 34px; + inset: 8px; + border: 1px solid color-mix(in srgb, var(--color-primary) 34%, transparent); + border-radius: 24px; transform: rotate(45deg); } .repo-loading-halo.halo-one { animation: halo-breathe 2.4s ease-in-out infinite; } .repo-loading-halo.halo-two { - inset: 24px; - border-color: rgba(77, 182, 214, 0.24); + inset: 18px; + border-color: color-mix(in srgb, var(--color-accent) 38%, transparent); animation: halo-breathe 2.4s ease-in-out infinite reverse; } .repo-loading-traces { position: absolute; - inset: -18px; - width: 204px; - height: 204px; + inset: -14px; + width: 144px; + height: 144px; overflow: visible; z-index: 0; } @@ -114,18 +119,18 @@ stroke-linecap: round; stroke-dasharray: 165; stroke-dashoffset: 165; - filter: drop-shadow(0 0 8px rgba(77, 182, 214, 0.32)); + filter: drop-shadow(0 0 7px color-mix(in srgb, var(--color-accent) 38%, transparent)); animation: trace-draw 2.6s ease-in-out infinite; } .repo-loading-traces .trace-main { - stroke: #6f8cff; + stroke: var(--color-primary); } .repo-loading-traces .trace-branch { - stroke: #4db6d6; + stroke: var(--color-accent); animation-delay: 0.28s; } .repo-loading-traces .trace-cut { - stroke: rgba(177, 186, 208, 0.42); + stroke: color-mix(in srgb, var(--color-ink-muted) 52%, transparent); stroke-dasharray: 128; stroke-dashoffset: 128; animation-delay: 0.55s; @@ -134,12 +139,12 @@ .repo-loading-icon { position: relative; z-index: 1; - width: 132px; - height: 132px; + width: 82px; + height: 82px; object-fit: contain; filter: - drop-shadow(0 18px 24px rgba(0, 0, 0, 0.55)) - drop-shadow(0 0 18px rgba(77, 182, 214, 0.2)); + drop-shadow(0 10px 16px color-mix(in srgb, var(--color-ink) 24%, transparent)) + drop-shadow(0 0 14px color-mix(in srgb, var(--color-accent) 24%, transparent)); animation: icon-float 2.4s ease-in-out infinite; } @@ -153,16 +158,16 @@ .repo-loading-label { color: var(--color-ink); - font-size: 15px; - font-weight: 800; + font-size: 14px; + font-weight: 750; } .repo-loading-name { - max-width: 260px; + max-width: 250px; overflow: hidden; color: var(--color-ink-faint); font-family: var(--font-mono); - font-size: 12.5px; + font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } @@ -172,60 +177,20 @@ width: min(230px, 100%); height: 4px; overflow: hidden; + border: 1px solid var(--color-border-subtle); border-radius: 999px; - background: rgba(111, 140, 255, 0.14); + background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface-dim)); } .repo-loading-bar span { position: absolute; inset: 0; width: 46%; border-radius: inherit; - background: linear-gradient(90deg, transparent, #6f8cff 40%, #4db6d6 74%, transparent); - box-shadow: 0 0 16px rgba(77, 182, 214, 0.26); + background: linear-gradient(90deg, transparent, var(--color-primary) 40%, var(--color-accent) 74%, transparent); + box-shadow: 0 0 14px color-mix(in srgb, var(--color-accent) 32%, transparent); animation: bar-slide 1.35s ease-in-out infinite; } - :global(:root[data-theme="light"]) .repo-loading { - background: - radial-gradient(circle at 50% 42%, rgba(49, 95, 214, 0.12), transparent 34%), - linear-gradient(135deg, #f7f9fd 0%, #eef3f9 48%, #f8fafc 100%); - } - - :global(:root[data-theme="light"]) .repo-loading-grid { - opacity: 0.38; - background-image: - linear-gradient(rgba(49, 95, 214, 0.1) 1px, transparent 1px), - linear-gradient(90deg, rgba(15, 143, 181, 0.08) 1px, transparent 1px); - } - - :global(:root[data-theme="light"]) .repo-loading-card { - border-color: rgba(61, 89, 142, 0.2); - background: - linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,247,252,0.94)), - var(--color-surface-raised); - box-shadow: - 0 26px 72px rgba(28,44,74,0.18), - inset 0 1px 0 rgba(255,255,255,0.9); - } - - :global(:root[data-theme="light"]) .repo-loading-traces .trace { - filter: drop-shadow(0 0 8px rgba(49,95,214,0.22)); - } - - :global(:root[data-theme="light"]) .repo-loading-traces .trace-cut { - stroke: rgba(49,95,214,0.34); - } - - :global(:root[data-theme="light"]) .repo-loading-icon { - filter: - drop-shadow(0 18px 24px rgba(28,44,74,0.2)) - drop-shadow(0 0 18px rgba(49,95,214,0.18)); - } - - :global(:root[data-theme="light"]) .repo-loading-bar { - background: rgba(49,95,214,0.12); - } - @keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } } @keyframes grid-drift { to { transform: translate3d(42px, 42px, 0); } } @keyframes icon-float { @@ -254,4 +219,11 @@ .repo-loading-bar span { animation: none; } .repo-loading-traces .trace { stroke-dashoffset: 0; opacity: 0.72; } } + + @media (max-width: 520px) { + .repo-loading-card { + width: calc(100vw - 20px); + padding: 22px 20px 20px; + } + }