Opt/light mode #23
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user