Christoph/GitLite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 35 Wiki Activity

style(repo-loading): refine overlay visuals and theming

Browse Source 
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
This commit is contained in:
Christoph
2026-08-29 22:52:14 +02:00
parent 22da397e39
commit 823a50ce85
2 changed files with 54 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.css
+2 -1
View File
@@ -6475,6 +6475,7 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
display: grid; display: grid;
place-items: center; place-items: center;
min-width: 0; min-width: 0;
overflow: hidden;
color: var(--color-primary); color: var(--color-primary);
background: var(--color-surface-dim); 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: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
border-radius: 50%; border-radius: 50%;
background: var(--color-surface-solid); 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 { .status-lane-head {
display: flex; display: flex;
src/lib/components/RepoLoadingOverlay.svelte
+52 -80
View File
@@ -41,17 +41,24 @@
display: grid; display: grid;
place-items: center; place-items: center;
overflow: hidden; 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; animation: overlay-in 180ms ease;
} }
.repo-loading-grid { .repo-loading-grid {
position: absolute; position: absolute;
inset: 0; inset: 0;
opacity: 0.28; opacity: 0.34;
background-image: background-image:
linear-gradient(rgba(111, 140, 255, 0.09) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--color-primary) 9%, transparent) 1px, transparent 1px),
linear-gradient(90deg, rgba(77, 182, 214, 0.07) 1px, transparent 1px); linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 8%, transparent) 1px, transparent 1px);
background-size: 42px 42px; background-size: 42px 42px;
mask-image: radial-gradient(circle at center, black 0%, transparent 68%); mask-image: radial-gradient(circle at center, black 0%, transparent 68%);
animation: grid-drift 10s linear infinite; animation: grid-drift 10s linear infinite;
@@ -62,23 +69,21 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 18px; gap: 14px;
width: min(420px, calc(100vw - 42px)); width: min(360px, calc(100vw - 32px));
padding: 30px 34px 28px; padding: 26px 30px 24px;
border: 1px solid rgba(90, 111, 154, 0.28); border: 1px solid var(--color-border-input);
border-radius: 16px; border-radius: 14px;
background: background:
linear-gradient(180deg, rgba(23, 29, 43, 0.92), rgba(12, 17, 27, 0.94)), var(--app-panel-highlight),
var(--color-surface-raised); var(--app-dialog-bg);
box-shadow: box-shadow: var(--app-dialog-shadow);
0 26px 78px rgba(0, 0, 0, 0.54),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
} }
.repo-loading-mark { .repo-loading-mark {
position: relative; position: relative;
width: 168px; width: 116px;
height: 168px; height: 116px;
display: grid; display: grid;
place-items: center; place-items: center;
isolation: isolate; isolation: isolate;
@@ -86,25 +91,25 @@
.repo-loading-halo { .repo-loading-halo {
position: absolute; position: absolute;
inset: 10px; inset: 8px;
border: 1px solid rgba(111, 140, 255, 0.22); border: 1px solid color-mix(in srgb, var(--color-primary) 34%, transparent);
border-radius: 34px; border-radius: 24px;
transform: rotate(45deg); transform: rotate(45deg);
} }
.repo-loading-halo.halo-one { .repo-loading-halo.halo-one {
animation: halo-breathe 2.4s ease-in-out infinite; animation: halo-breathe 2.4s ease-in-out infinite;
} }
.repo-loading-halo.halo-two { .repo-loading-halo.halo-two {
inset: 24px; inset: 18px;
border-color: rgba(77, 182, 214, 0.24); border-color: color-mix(in srgb, var(--color-accent) 38%, transparent);
animation: halo-breathe 2.4s ease-in-out infinite reverse; animation: halo-breathe 2.4s ease-in-out infinite reverse;
} }
.repo-loading-traces { .repo-loading-traces {
position: absolute; position: absolute;
inset: -18px; inset: -14px;
width: 204px; width: 144px;
height: 204px; height: 144px;
overflow: visible; overflow: visible;
z-index: 0; z-index: 0;
} }
@@ -114,18 +119,18 @@
stroke-linecap: round; stroke-linecap: round;
stroke-dasharray: 165; stroke-dasharray: 165;
stroke-dashoffset: 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; animation: trace-draw 2.6s ease-in-out infinite;
} }
.repo-loading-traces .trace-main { .repo-loading-traces .trace-main {
stroke: #6f8cff; stroke: var(--color-primary);
} }
.repo-loading-traces .trace-branch { .repo-loading-traces .trace-branch {
stroke: #4db6d6; stroke: var(--color-accent);
animation-delay: 0.28s; animation-delay: 0.28s;
} }
.repo-loading-traces .trace-cut { .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-dasharray: 128;
stroke-dashoffset: 128; stroke-dashoffset: 128;
animation-delay: 0.55s; animation-delay: 0.55s;
@@ -134,12 +139,12 @@
.repo-loading-icon { .repo-loading-icon {
position: relative; position: relative;
z-index: 1; z-index: 1;
width: 132px; width: 82px;
height: 132px; height: 82px;
object-fit: contain; object-fit: contain;
filter: filter:
drop-shadow(0 18px 24px rgba(0, 0, 0, 0.55)) drop-shadow(0 10px 16px color-mix(in srgb, var(--color-ink) 24%, transparent))
drop-shadow(0 0 18px rgba(77, 182, 214, 0.2)); drop-shadow(0 0 14px color-mix(in srgb, var(--color-accent) 24%, transparent));
animation: icon-float 2.4s ease-in-out infinite; animation: icon-float 2.4s ease-in-out infinite;
} }
@@ -153,16 +158,16 @@
.repo-loading-label { .repo-loading-label {
color: var(--color-ink); color: var(--color-ink);
font-size: 15px; font-size: 14px;
font-weight: 800; font-weight: 750;
} }
.repo-loading-name { .repo-loading-name {
max-width: 260px; max-width: 250px;
overflow: hidden; overflow: hidden;
color: var(--color-ink-faint); color: var(--color-ink-faint);
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 12.5px; font-size: 12px;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
@@ -172,60 +177,20 @@
width: min(230px, 100%); width: min(230px, 100%);
height: 4px; height: 4px;
overflow: hidden; overflow: hidden;
border: 1px solid var(--color-border-subtle);
border-radius: 999px; 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 { .repo-loading-bar span {
position: absolute; position: absolute;
inset: 0; inset: 0;
width: 46%; width: 46%;
border-radius: inherit; border-radius: inherit;
background: linear-gradient(90deg, transparent, #6f8cff 40%, #4db6d6 74%, transparent); background: linear-gradient(90deg, transparent, var(--color-primary) 40%, var(--color-accent) 74%, transparent);
box-shadow: 0 0 16px rgba(77, 182, 214, 0.26); box-shadow: 0 0 14px color-mix(in srgb, var(--color-accent) 32%, transparent);
animation: bar-slide 1.35s ease-in-out infinite; 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 overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes grid-drift { to { transform: translate3d(42px, 42px, 0); } } @keyframes grid-drift { to { transform: translate3d(42px, 42px, 0); } }
@keyframes icon-float { @keyframes icon-float {
@@ -254,4 +219,11 @@
.repo-loading-bar span { animation: none; } .repo-loading-bar span { animation: none; }
.repo-loading-traces .trace { stroke-dashoffset: 0; opacity: 0.72; } .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;
}
}
</style> </style>