Opt/light mode #23

Merged
Christoph merged 3 commits from opt/light_mode into main 2026-07-10 16:22:07 +00:00
Showing only changes of commit 8e6811b786 - Show all commits
+15 -15
View File
@@ -347,8 +347,8 @@
display: grid; display: grid;
place-items: center; place-items: center;
background: background:
radial-gradient(circle at 50% 38%, rgba(137, 92, 255, 0.16), transparent 55%), radial-gradient(circle at 50% 38%, rgba(111, 140, 255, 0.1), transparent 55%),
rgba(8, 9, 16, 0.58); rgba(7, 10, 16, 0.62);
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
animation: status-panel-overlay-in 120ms ease; animation: status-panel-overlay-in 120ms ease;
} }
@@ -360,13 +360,13 @@
gap: 12px; gap: 12px;
width: min(300px, calc(100% - 32px)); width: min(300px, calc(100% - 32px));
padding: 26px 28px 26px; 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; border-radius: 16px;
background: 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); var(--color-surface-raised);
color: var(--color-ink); 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 { .status-panel-overlay-mark {
@@ -381,7 +381,7 @@
.status-panel-overlay-halo { .status-panel-overlay-halo {
position: absolute; position: absolute;
inset: 6px; inset: 6px;
border: 1px solid rgba(151, 118, 255, 0.24); border: 1px solid rgba(111, 140, 255, 0.22);
border-radius: 22px; border-radius: 22px;
transform: rotate(45deg); transform: rotate(45deg);
} }
@@ -390,7 +390,7 @@
} }
.status-panel-overlay-halo.halo-two { .status-panel-overlay-halo.halo-two {
inset: 16px; 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; animation: status-panel-overlay-halo-breathe 2.4s ease-in-out infinite reverse;
} }
@@ -408,16 +408,16 @@
stroke-linecap: round; stroke-linecap: round;
stroke-dasharray: 165; stroke-dasharray: 165;
stroke-dashoffset: 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; 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 { .status-panel-overlay-traces .trace-branch {
stroke: #ff6d26; stroke: #4db6d6;
animation-delay: 0.28s; animation-delay: 0.28s;
} }
.status-panel-overlay-traces .trace-cut { .status-panel-overlay-traces .trace-cut {
stroke: rgba(255, 255, 255, 0.42); stroke: rgba(177, 186, 208, 0.42);
stroke-dasharray: 128; stroke-dasharray: 128;
stroke-dashoffset: 128; stroke-dashoffset: 128;
animation-delay: 0.55s; animation-delay: 0.55s;
@@ -431,7 +431,7 @@
object-fit: contain; object-fit: contain;
filter: filter:
drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5)) 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; animation: status-panel-overlay-icon-float 2.4s ease-in-out infinite;
} }
@@ -452,15 +452,15 @@
height: 4px; height: 4px;
overflow: hidden; overflow: hidden;
border-radius: 999px; border-radius: 999px;
background: rgba(151, 118, 255, 0.14); background: rgba(111, 140, 255, 0.14);
} }
.status-panel-overlay-bar span { .status-panel-overlay-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, #9b70ff 40%, #ff6d26 74%, transparent); background: linear-gradient(90deg, transparent, #6f8cff 40%, #4db6d6 74%, transparent);
box-shadow: 0 0 12px rgba(255, 109, 38, 0.32); box-shadow: 0 0 12px rgba(77, 182, 214, 0.26);
animation: status-panel-overlay-bar-slide 1.35s ease-in-out infinite; animation: status-panel-overlay-bar-slide 1.35s ease-in-out infinite;
} }