fix(ui): 滑杆改用原版进度渐变并校准开关行

3DTank/docs/SettingsStyleTable.md

@@ -61,7 +61,7 @@
 | `InputRangeComponentStyle` | `display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; height:3.188em; min-height:3.188em; margin-bottom:1.75em` |
 | `InputRangeComponentStyle` label | `color:white; font-size:0.9375em; margin-top:0` |
 | `InputRangeComponentStyle` input | `-webkit-appearance:none; width:100%; height:0.563em; background:transparent; cursor:pointer` |
-| range track | `height:0.375em; background:rgba(255,255,255,0.2)` |
+| range track | `height:0.375em; background:transparent`；进度用 `linear-gradient(to right,#ffbc09 0%,#ffbc09 X%,rgba(255,255,255,0.1) X%,rgba(255,255,255,0.1) 100%)` |
 | range thumb | `width:1.875em; height:1em; border-radius:0.25em; background:rgb(255,188,9); margin-top:-0.3em` |
 | `GameSettingsStyle.containerFormOptions` | `display:flex; flex-direction:column; margin-left:0.9em; margin-bottom:1em` |
 | `GameSettingsStyle.notificationText` | `color:rgba(255,255,255,0.5); text-align:left` |
@@ -72,3 +72,23 @@
 - 下拉选项弹层：已按 `DropDownStyle` + `ContextMenuStyle` 还原菜单/选项高度、背景、hover、选中色；使用 `position:fixed` + 控件 `getBoundingClientRect()`，宽度等于选择框、紧贴下沿，避免被设置面板滚动容器裁剪。
 - 菜单滑动条：当前按 `index * 5em + 1.25em` 计算，原版由组件状态计算 `margin-top`。
 - 部分设置项的分组/顺序仍以官方 key 和现有状态为准，后续可继续按原组件 render 树核对。
+
+## 6. 原版组件定义位置
+
+| 组件 / 样式 | 混淆版类 / 函数 | 位置 |
+|---|---|---|
+| `SettingsComponentStyle` | `kNi` | `module_82347.js:89525` |
+| `SettingsMenuComponentStyle` | `EMi` | `module_82347.js:90329` |
+| `SettingsButtonsComponentStyle` | `UPi` | `module_82347.js:89326` |
+| `GameSettingsStyle` | `BAi` | `module_82347.js:88190` |
+| `DropDownStyle` | `J7t` | `module_82347.js:34073` |
+| `ContextMenuStyle`（下拉菜单/选项） | `u7t` | `module_82347.js:33638` |
+| `CheckBoxComponentStyle` | `QBi` | `module_82347.js:92742` |
+| `CheckBoxStyle`（Toggle Switch） | `Z0t` | `module_82347.js:33272` |
+| `InputRangeComponentStyle` | `EUi` | `module_82347.js:92980` |
+| `InputRangeComponentStyle-blockSoundVolume` | `wUi` | `module_82347.js:92880` |
+| `InputRangeComponentStyle-range` | `kUi` | `module_82347.js:92930` |
+| 滑杆进度渐变 | `hUi.tap` | `module_82347.js:200507` |
+| `SettingsComponentStyle-slider` | `kNi.z1jp_1` | `module_82347.js:89620` |
+
+`ksc-130` 是 `SettingsComponentStyle-slider` 的 Emotion 生成类名；当前实现用 `data-ui="SettingsComponentStyle-slider"` 标记，等价于给滑杆挂上该样式。

TankiOffline/app/src/jsMain/kotlin/App/Browser/Ui/LobbyScreens.kt

@@ -2383,38 +2383,13 @@ private val SettingsRange: csstype.PropertiesBuilder.() -> Unit = {
     Style("appearance", "none")
     Style("width", "100%")
     Style("height", "0.563em")
-    Style("background-color", Palette.White20)
     Style("outline", "none")
-    Style("accent-color", "rgb(255, 188, 9)")
+    Style("border-radius", "0")
 }
 
-private val SettingsSliderTrack: csstype.PropertiesBuilder.() -> Unit = {
-    Style("position", "relative")
-    Style("width", "100%")
-    Style("height", "0.375em")
-    Style("background-color", Palette.White20)
-}
-
-private fun SettingsSliderThumb(Value: Int): csstype.PropertiesBuilder.() -> Unit = {
-    Style("position", "absolute")
-    Style("top", "50%")
-    Style("left", "${Value.coerceIn(0, 100)}%")
-    Style("width", "1.875em")
-    Style("height", "1em")
-    Style("border-radius", "0.25em")
-    Style("background-color", Palette.Yellow)
-    Style("transform", "translate(-50%, -50%)")
-    Style("pointer-events", "none")
-}
-
-private val SettingsSliderInput: csstype.PropertiesBuilder.() -> Unit = {
-    Style("position", "absolute")
-    Style("inset", "0")
-    Style("width", "100%")
-    Style("height", "100%")
-    Style("opacity", "0")
-    Style("cursor", "pointer")
-    Style("margin", "0")
+private fun SettingsSliderGradient(Value: Int): String {
+    val Percent = Value.coerceIn(0, 100)
+    return "linear-gradient(to right, #ffbc09 0%, #ffbc09 $Percent%, rgba(255, 255, 255, 0.1) $Percent%, rgba(255, 255, 255, 0.1) 100%)"
 }
 
 private val SettingsButtons: csstype.PropertiesBuilder.() -> Unit = {
@@ -2460,8 +2435,7 @@ private val SettingsCheckboxRow: csstype.PropertiesBuilder.() -> Unit = {
     Style("align-items", "center")
     Style("justify-content", "flex-start")
     Style("width", "100%")
-    Style("height", "auto")
-    Style("min-height", "3em")
+    Style("height", "2.25em")
     Style("margin-bottom", "1.25em")
     Style("gap", "0.75em")
 }
@@ -2597,6 +2571,7 @@ private val SettingsScreen = FC<Props> {
                                     val On = Toggles[Entry.Id] ?: Entry.Default
                                     div {
                                         css(SettingsCheckboxRow)
+                                        Ui("CheckBoxComponentStyle-oneSetting")
                                         button {
                                             css(SettingsCheckbox(On))
                                             onClick = { Toggles = Toggles + (Entry.Id to !On) }
@@ -2613,22 +2588,23 @@ private val SettingsScreen = FC<Props> {
                                     val Value = Sliders[Entry.Id] ?: Entry.Default
                                     div {
                                         css(SettingsSliderWrap)
+                                        Ui("InputRangeComponentStyle-blockSoundVolume")
                                         div {
                                             css(SettingsSliderLabel)
                                             span { +Entry.Label }
                                             span { +"$Value%" }
                                         }
-                                        div {
-                                            css(SettingsSliderTrack)
-                                            div { css(SettingsSliderThumb(Value)) }
-                                            input {
-                                                css(SettingsSliderInput)
-                                                asDynamic()["type"] = "range"
-                                                asDynamic()["min"] = "0"
-                                                asDynamic()["max"] = "100"
-                                                asDynamic()["value"] = "$Value"
-                                                onChange = { E -> Sliders = Sliders + (Entry.Id to (E.target.value.toString().toIntOrNull() ?: Value)) }
+                                        input {
+                                            css {
+                                                Apply(SettingsRange)
+                                                Style("background", SettingsSliderGradient(Value))
                                             }
+                                            Ui("SettingsComponentStyle-slider")
+                                            asDynamic()["type"] = "range"
+                                            asDynamic()["min"] = "0"
+                                            asDynamic()["max"] = "100"
+                                            asDynamic()["value"] = "$Value"
+                                            onChange = { E -> Sliders = Sliders + (Entry.Id to (E.target.value.toString().toIntOrNull() ?: Value)) }
                                         }
                                     }
                                 }

TankiOffline/app/src/jsMain/resources/lobby3.css

@@ -957,4 +957,31 @@ body { margin: 0; overflow: hidden; background: #001926; color: #fff; }
 [data-ui="settings.dropdown.list"]::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.3);
   border-radius: 0.2em;
+}
+
+[data-ui="SettingsComponentStyle-slider"]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 0.375em;
+  background: transparent;
+}
+[data-ui="SettingsComponentStyle-slider"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 1.875em;
+  height: 1em;
+  border-radius: 0.25em;
+  background: #ffbc09;
+  margin-top: -0.3em;
+}
+[data-ui="SettingsComponentStyle-slider"]::-moz-range-track {
+  background: transparent;
+}
+[data-ui="SettingsComponentStyle-slider"]::-moz-range-progress {
+  background: #ffbc09;
+}
+[data-ui="SettingsComponentStyle-slider"]::-moz-range-thumb {
+  width: 1.875em;
+  height: 1em;
+  border: 0;
+  border-radius: 0.25em;
+  background: #ffbc09;
 }