diff --git a/style.css b/style.css index 84aed20..5813482 100644 --- a/style.css +++ b/style.css @@ -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) --- */ diff --git a/ui/panel.html b/ui/panel.html index 69ce947..b31f6fa 100644 --- a/ui/panel.html +++ b/ui/panel.html @@ -1174,7 +1174,7 @@ title="1 严格串行;2 均衡加速;3 快速后台(最终一致)" >