taozuqin/ST-Bionic-Memory-Ecology
1
0
Fork 0
mirror of https://github.com/Youzini-afk/ST-Bionic-Memory-Ecology.git synced 2026-05-15 22:30:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

Animate maintenance mode indicator

Browse Source
This commit is contained in:
Youzini-afk
2026-04-29 16:13:05 +08:00
parent 3b71836a77
commit 97c325e631
3 changed files with 88 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
style.css
View File

@@ -3487,7 +3487,60 @@
cursor: default;
}
.bme-mode-gauge {
position: relative;
overflow: hidden;
}
.bme-mode-gauge::before {
content: "";
position: absolute;
left: 8px;
top: 7px;
width: 18px;
height: 18px;
border-radius: 50% 50% 45% 45%;
background:
radial-gradient(circle at 50% 66%, var(--bme-primary) 0 3px, transparent 3.5px),
conic-gradient(
from 232deg,
transparent 0 16deg,
color-mix(in srgb, #fff 92%, var(--bme-primary)) 16deg 46deg,
transparent 46deg 72deg,
color-mix(in srgb, #fff 72%, var(--bme-primary)) 72deg 102deg,
transparent 102deg 128deg,
color-mix(in srgb, #fff 55%, var(--bme-primary)) 128deg 158deg,
transparent 158deg 360deg
);
mask: radial-gradient(circle at 50% 68%, transparent 0 5px, #000 5.5px);
opacity: 0.98;
}
.bme-mode-gauge::after {
content: "";
position: absolute;
left: 16px;
top: 16px;
width: 2px;
height: 9px;
border-radius: 999px;
background: var(--bme-primary-text, #fff);
box-shadow: 0 0 6px color-mix(in srgb, var(--bme-primary-text, #fff) 60%, transparent);
transform: rotate(-46deg);
transform-origin: 50% 100%;
transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bme-capability-card-mode[data-mode="balanced"] .bme-mode-gauge::after {
transform: rotate(0deg);
}
.bme-capability-card-mode[data-mode="fast"] .bme-mode-gauge::after {
transform: rotate(46deg);
}
.bme-mode-segmented {
position: relative;
display: inline-flex;
align-items: center;
gap: 2px;
@@ -3496,9 +3549,40 @@
border-radius: 999px;
background: var(--bme-surface-high);
flex-shrink: 0;
isolation: isolate;
}
.bme-mode-segmented::before {
content: "";
position: absolute;
z-index: 0;
left: 2px;
top: 2px;
width: 24px;
height: 20px;
border-radius: 999px;
background: color-mix(in srgb, var(--bme-primary) 72%, var(--bme-surface-high));
box-shadow:
0 0 0 1px color-mix(in srgb, var(--bme-primary) 55%, transparent),
0 6px 14px color-mix(in srgb, var(--bme-primary) 26%, transparent);
transform: translateX(0);
transition:
transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
background 0.16s,
box-shadow 0.16s;
}
.bme-mode-segmented[data-mode="balanced"]::before {
transform: translateX(26px);
}
.bme-mode-segmented[data-mode="fast"]::before {
transform: translateX(52px);
}
.bme-mode-segmented button {
position: relative;
z-index: 1;
width: 24px;
height: 20px;
border: none;
@@ -3518,9 +3602,9 @@
}
.bme-mode-segmented button.is-active {
background: color-mix(in srgb, var(--bme-primary) 72%, var(--bme-surface-high));
background: transparent;
color: var(--bme-primary-text, #fff);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--bme-primary) 55%, transparent);
box-shadow: none;
}
/* --- STRIPE ROW LAYOUT (Advanced Settings) --- */