fix(ui): 核对设置页细节并清理旧样式

3DTank/docs/SettingsStyleTable.md

@@ -126,3 +126,13 @@
 ```
 
 当前实现已按这个结构输出；带描述的开关行增加 `has-description` 修饰类，让描述与标签对齐。
+
+## 8. 本轮细节修正
+
+- 下拉列表不再设置 `scrollbar-gutter`；无溢出时不预留滚动条空间。
+- 选项数 > 6 时 `overflow-y: scroll`，否则 `auto`；选项固定高度 `2.563em`，不参与 flex 收缩。
+- 滑杆百分比 `(xx%)` 使用原版浅绿 `rgb(162,255,106)`。
+- 开关与文字之间增加 `0.75em` 间距。
+- 开关背景提高到 `rgba(118,255,51,0.35)` / `rgba(191,213,255,0.35)`，更接近原版亮度。
+- 侧边栏选中文字改为 `display:flex; align-items:center; height:100%`，垂直居中。
+- `.ms-top` 只保留定位，不再叠加半透明背景；HEAD 背景由 `HeadScreen.RootStyle` 的原版渐变提供。

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

@@ -54,95 +54,6 @@ private fun PriceText(Item: CatalogItem): String = when (Item.Currency) {
 
 private fun Asset(Path: String): String = "/play/" + Path
 
-private val BreadcrumbsHeader: csstype.PropertiesBuilder.() -> Unit = {
-    Style("position", "relative")
-    Style("display", "flex")
-    Style("align-items", "center")
-    Style("height", "6em")
-    Style("flex", "0 0 6em")
-    Style("border-bottom", "1px solid ${Ui.Divider}")
-    Style("background", "linear-gradient(180deg, rgba(0, 22, 34, 0.98), rgba(0, 14, 22, 0.94))")
-}
-
-private val BreadcrumbsBack: csstype.PropertiesBuilder.() -> Unit = {
-    Style("width", "6em")
-    Style("height", "6em")
-    Style("display", "flex")
-    Style("align-items", "center")
-    Style("justify-content", "center")
-    Style("border", "0")
-    Style("box-shadow", "1px 0 0 0 ${Ui.Divider}")
-    Style("background", "transparent")
-    Style("color", "#bfd5ff")
-    Style("font-size", "1.5em")
-    Style("cursor", "pointer")
-}
-
-private val BreadcrumbsTitle: csstype.PropertiesBuilder.() -> Unit = {
-    Style("position", "absolute")
-    Style("left", "50%")
-    Style("top", "50%")
-    Style("transform", "translate(-50%, -50%)")
-    Style("margin", "0")
-    Style("font", "500 1.5em/1.2 ${Ui.FontMedium}")
-    Style("white-space", "nowrap")
-    Style("pointer-events", "none")
-}
-
-private val BreadcrumbsRight: csstype.PropertiesBuilder.() -> Unit = {
-    Style("margin-left", "auto")
-    Style("display", "flex")
-    Style("align-items", "center")
-    Style("height", "100%")
-}
-
-private val BreadcrumbsCurrency: csstype.PropertiesBuilder.() -> Unit = {
-    Style("display", "flex")
-    Style("align-items", "center")
-    Style("gap", "0.3em")
-    Style("height", "3em")
-    Style("padding", "0 0.8em")
-    Style("font", "500 1em/1 ${Ui.FontMedium}")
-}
-
-private val BreadcrumbsExit: csstype.PropertiesBuilder.() -> Unit = {
-    Style("width", "6em")
-    Style("height", "6em")
-    Style("display", "flex")
-    Style("align-items", "center")
-    Style("justify-content", "center")
-    Style("border", "0")
-    Style("border-left", "1px solid ${Ui.Divider}")
-    Style("background", "transparent")
-    Style("color", "#bfd5ff")
-    Style("font-size", "1.4em")
-    Style("cursor", "pointer")
-}
-
-private val BreadcrumbsFullscreen: csstype.PropertiesBuilder.() -> Unit = {
-    Style("width", "6em")
-    Style("height", "6em")
-    Style("display", "flex")
-    Style("align-items", "center")
-    Style("justify-content", "center")
-    Style("gap", "0.3em")
-    Style("border-left", "1px solid ${Ui.Divider}")
-    Style("cursor", "pointer")
-}
-
-private val BreadcrumbsFullscreenIcon: csstype.PropertiesBuilder.() -> Unit = {
-    Style("width", "1.5em")
-    Style("height", "1.5em")
-    Style("background", "#bfd5ff")
-    Style("mask", "url(\"${Asset("static/images/fullscreen.0b4547f5.svg")}\") center / contain no-repeat")
-    Style("-webkit-mask", "url(\"${Asset("static/images/fullscreen.0b4547f5.svg")}\") center / contain no-repeat")
-}
-
-private val BreadcrumbsFullscreenText: csstype.PropertiesBuilder.() -> Unit = {
-    Style("font", "600 0.75em/1 ${Ui.FontMedium}")
-    Style("color", "rgba(255, 255, 255, 0.65)")
-}
-
 // ---------------------------------------------------------------- 通用外壳
 
 private fun ChildrenBuilder.ScreenShell(
@@ -2167,14 +2078,17 @@ private val SettingsMenuItem: csstype.PropertiesBuilder.() -> Unit = {
 }
 
 private fun SettingsMenuLabel(Active: Boolean): csstype.PropertiesBuilder.() -> Unit = {
+    Style("display", "flex")
+    Style("align-items", "center")
+    Style("height", "100%")
     Style("font-family", "BaseFontBold, FallbackFontBold")
     Style("font-style", "normal")
     Style("font-weight", "500")
     Style("font-size", "1.125em")
-    Style("line-height", "normal")
+    Style("line-height", "1")
     Style("text-transform", "uppercase")
     Style("margin-left", "1.875em")
-    Style("margin-top", "0.1em")
+    Style("margin-top", "0")
     Style("color", if (Active) "white" else "rgba(255, 255, 255, 0.6)")
     Style("transition", "0.5s")
 }
@@ -2297,7 +2211,6 @@ private val SettingsDropdownList: csstype.PropertiesBuilder.() -> Unit = {
     Style("max-height", "15.75em")
     Style("overflow-y", "auto")
     Style("overflow-x", "hidden")
-    Style("scrollbar-gutter", "stable")
     Style("z-index", "999")
     Style("background-color", "rgba(0, 25, 38, 0.9)")
     Style("backdrop-filter", "blur(3.125em)")
@@ -2307,8 +2220,6 @@ private val SettingsDropdownList: csstype.PropertiesBuilder.() -> Unit = {
     Style("align-items", "stretch")
     Style("justify-content", "flex-start")
     Style("box-sizing", "border-box")
-    Style("scrollbar-width", "thin")
-    Style("scrollbar-color", "#BCBCBC rgba(255, 255, 255, 0.2)")
 }
 
 private val SettingsDropdownOverlay: csstype.PropertiesBuilder.() -> Unit = {
@@ -2582,6 +2493,7 @@ private val SettingsScreen = FC<Props> {
                                                     Style("left", "${DropdownLeft}px")
                                                     Style("top", "${DropdownTop}px")
                                                     Style("width", "${DropdownWidth}px")
+                                                    Style("overflow-y", if (Entry.Options.size > 6) "scroll" else "auto")
                                                 }
                                                 Ui("settings.dropdown.list")
                                                 for ((OptionIndex, Option) in Entry.Options.withIndex()) {

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

@@ -49,7 +49,6 @@ object Palette {
     const val Panel = White10
     const val PanelSoft = White05
     const val PanelBorder = White20
-    const val DropdownBg = "rgb(50, 54, 62)"
     const val Divider = White25
     const val DividerSoft = White15
     const val Text = White

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

@@ -57,29 +57,11 @@ internal val ScreenRoot: PropertiesBuilder.() -> Unit = {
     Style("overflow", "hidden")
 }
 
-internal val ScreenHeader: PropertiesBuilder.() -> Unit = {
-    Style("display", "flex")
-    Style("align-items", "center")
-    Style("gap", "1em")
-    Style("height", "4em")
-    Style("flex", "0 0 4em")
-    Style("padding", "0 2em")
-    Style("box-sizing", "border-box")
-    Style("border-bottom", "1px solid ${Ui.Divider}")
-    Style("background", "rgba(0, 16, 24, 0.72)")
-}
-
 internal val ScreenTitle: PropertiesBuilder.() -> Unit = {
     Style("font", "500 1.5em/1.2 ${Ui.FontMedium}")
     Style("margin", "0")
 }
 
-internal val ScreenSubtitle: PropertiesBuilder.() -> Unit = {
-    Style("font", "400 0.95em/1.3 ${Ui.FontRegular}")
-    Style("color", Ui.Muted)
-    Style("margin-left", "0.5em")
-}
-
 internal val ScreenBody: PropertiesBuilder.() -> Unit = {
     Style("flex", "1")
     Style("min-height", "0")
@@ -96,20 +78,6 @@ internal val ScreenBodyFull: PropertiesBuilder.() -> Unit = {
     Style("box-sizing", "border-box")
 }
 
-internal val BackButton: PropertiesBuilder.() -> Unit = {
-    Style("display", "flex")
-    Style("align-items", "center")
-    Style("justify-content", "center")
-    Style("width", "2.5em")
-    Style("height", "2.5em")
-    Style("border", "1px solid ${Ui.Divider}")
-    Style("border-radius", "0.4em")
-    Style("background", "rgba(4, 12, 20, 0.7)")
-    Style("color", "#cfe0f0")
-    Style("cursor", "pointer")
-    Style("font-size", "1em")
-}
-
 internal val TabBar: PropertiesBuilder.() -> Unit = {
     Style("display", "flex")
     Style("align-items", "stretch")

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

@@ -45,8 +45,8 @@ body { margin: 0; overflow: hidden; background: #001926; color: #fff; }
   position: absolute; top: 0; left: 0;
   display: flex; align-items: center; justify-content: space-between;
   width: 100%; height: 6em; z-index: 2;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
-  background: linear-gradient(180deg, rgba(0, 12, 20, 0.55), rgba(0, 12, 20, 0.05));
+  border-bottom: 0;
+  background: transparent;
 }
 .ms-top-left { display: flex; align-items: center; height: 100%; }
 .rank-icon {
@@ -1008,7 +1008,7 @@ body { margin: 0; overflow: hidden; background: #001926; color: #fff; }
   font-size: 0.9375em;
   line-height: normal;
 }
-.InputRangeComponentStyle-blockSoundVolume p span { margin-left: 0.2em; }
+.InputRangeComponentStyle-blockSoundVolume p span { margin-left: 0.2em; color: rgb(162, 255, 106); }
 .InputRangeComponentStyle-soundVolume {
   display: flex;
   flex-direction: row;
@@ -1082,10 +1082,10 @@ body { margin: 0; overflow: hidden; background: #001926; color: #fff; }
   height: 1.5em;
   border: 0.063em solid rgba(255, 255, 255, 0.2);
   border-radius: 6.25rem;
-  background: rgba(191, 213, 255, 0.25);
+  background: rgba(191, 213, 255, 0.35);
   transition: background-color 0.2s;
 }
-.ksc-62[data-on="true"] { background: rgba(118, 255, 51, 0.25); }
+.ksc-62[data-on="true"] { background: rgba(118, 255, 51, 0.35); }
 .ksc-62::after {
   content: "";
   position: absolute;
@@ -1099,7 +1099,7 @@ body { margin: 0; overflow: hidden; background: #001926; color: #fff; }
   transition: left 0.2s;
 }
 .ksc-62[data-on="true"]::after { left: calc(100% - 1.3em); }
-.ksc-63 { display: flex; align-items: center; justify-content: flex-start; }
+.ksc-63 { display: flex; align-items: center; justify-content: flex-start; margin-left: 0.75em; }
 .ksc-63.has-description {
   flex-direction: column;
   align-items: flex-start;