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

style(ui): refresh status panel color palette

Browse Source 
The StatusPanel component has received a visual update to modernize its appearance. This change adjusts the primary color scheme across multiple elements, shifting from purples and magentas towards cooler blue and cyan tones. The goal is to improve aesthetic consistency and give the component a more cohesive look within the application's overall design system.

- Updated accent colors and gradients throughout the panel.
- Refined borders and shadows for a cleaner visual depth.
- Adjusted trace and overlay element colors for better harmony.
This commit is contained in:
Christoph Brandau
2026-07-10 17:33:52 +02:00
parent de8832a919
commit 8e6811b786
1 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/StatusPanel.svelte
+15 -15
View File
@@ -347,8 +347,8 @@
display: grid;
place-items: center;
background:
radial-gradient(circle at 50% 38%, rgba(137, 92, 255, 0.16), transparent 55%),
rgba(8, 9, 16, 0.58);
radial-gradient(circle at 50% 38%, rgba(111, 140, 255, 0.1), transparent 55%),
rgba(7, 10, 16, 0.62);
backdrop-filter: blur(4px);
animation: status-panel-overlay-in 120ms ease;
}
@@ -360,13 +360,13 @@
gap: 12px;
width: min(300px, calc(100% - 32px));
padding: 26px 28px 26px;
border: 1px solid rgba(160, 124, 255, 0.24);
border: 1px solid rgba(90, 111, 154, 0.28);
border-radius: 16px;
background:
linear-gradient(180deg, rgba(23, 26, 43, 0.9), rgba(12, 15, 27, 0.92)),
linear-gradient(180deg, rgba(23, 29, 43, 0.92), rgba(12, 17, 27, 0.94)),
var(--color-surface-raised);
color: var(--color-ink);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.06);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.status-panel-overlay-mark {
@@ -381,7 +381,7 @@
.status-panel-overlay-halo {
position: absolute;
inset: 6px;
border: 1px solid rgba(151, 118, 255, 0.24);
border: 1px solid rgba(111, 140, 255, 0.22);
border-radius: 22px;
transform: rotate(45deg);
}
@@ -390,7 +390,7 @@
}
.status-panel-overlay-halo.halo-two {
inset: 16px;
border-color: rgba(255, 109, 38, 0.26);
border-color: rgba(77, 182, 214, 0.24);
animation: status-panel-overlay-halo-breathe 2.4s ease-in-out infinite reverse;
}
@@ -408,16 +408,16 @@
stroke-linecap: round;
stroke-dasharray: 165;
stroke-dashoffset: 165;
filter: drop-shadow(0 0 6px rgba(151, 118, 255, 0.55));
filter: drop-shadow(0 0 6px rgba(77, 182, 214, 0.32));
animation: status-panel-overlay-trace-draw 2.6s ease-in-out infinite;
}
.status-panel-overlay-traces .trace-main { stroke: #9b70ff; }
.status-panel-overlay-traces .trace-main { stroke: #6f8cff; }
.status-panel-overlay-traces .trace-branch {
stroke: #ff6d26;
stroke: #4db6d6;
animation-delay: 0.28s;
}
.status-panel-overlay-traces .trace-cut {
stroke: rgba(255, 255, 255, 0.42);
stroke: rgba(177, 186, 208, 0.42);
stroke-dasharray: 128;
stroke-dashoffset: 128;
animation-delay: 0.55s;
@@ -431,7 +431,7 @@
object-fit: contain;
filter:
drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5))
drop-shadow(0 0 10px rgba(151, 118, 255, 0.28));
drop-shadow(0 0 10px rgba(77, 182, 214, 0.2));
animation: status-panel-overlay-icon-float 2.4s ease-in-out infinite;
}
@@ -452,15 +452,15 @@
height: 4px;
overflow: hidden;
border-radius: 999px;
background: rgba(151, 118, 255, 0.14);
background: rgba(111, 140, 255, 0.14);
}
.status-panel-overlay-bar span {
position: absolute;
inset: 0;
width: 46%;
border-radius: inherit;
background: linear-gradient(90deg, transparent, #9b70ff 40%, #ff6d26 74%, transparent);
box-shadow: 0 0 12px rgba(255, 109, 38, 0.32);
background: linear-gradient(90deg, transparent, #6f8cff 40%, #4db6d6 74%, transparent);
box-shadow: 0 0 12px rgba(77, 182, 214, 0.26);
animation: status-panel-overlay-bar-slide 1.35s ease-in-out infinite;
}