diff --git a/src/lib/components/StatusPanel.svelte b/src/lib/components/StatusPanel.svelte index b9dfdfa..2a6027b 100644 --- a/src/lib/components/StatusPanel.svelte +++ b/src/lib/components/StatusPanel.svelte @@ -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; }