Add platform status switch

2026-05-12 21:49:08 +08:00
parent 682a491d27
commit a76ab941bc
10 changed files with 195 additions and 5 deletions
@@ -152,6 +152,51 @@
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
 }

+.shSwitch {
+  position: relative;
+  display: inline-flex;
+  width: 36px;
+  height: 20px;
+  flex: 0 0 auto;
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  background: #d1d5db;
+  box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.12);
+  cursor: pointer;
+  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.shSwitch[data-state="checked"] {
+  background: #059669;
+  box-shadow: inset 0 1px 2px rgba(6, 95, 70, 0.2), 0 0 0 3px rgba(16, 185, 129, 0.12);
+}
+
+.shSwitch:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+.shSwitch:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.shSwitchThumb {
+  display: block;
+  width: 16px;
+  height: 16px;
+  margin-left: 2px;
+  border-radius: 999px;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.24);
+  transition: transform 0.16s ease;
+}
+
+.shSwitch[data-state="checked"] .shSwitchThumb {
+  transform: translateX(16px);
+}
+
 .screenMessageViewport {
  position: fixed;
  z-index: 100;