diff --git a/3DTank/docs/SettingsStyleTable.md b/3DTank/docs/SettingsStyleTable.md index 241d89c..7f10e49 100644 --- a/3DTank/docs/SettingsStyleTable.md +++ b/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` 的原版渐变提供。 diff --git a/TankiOffline/app/src/jsMain/kotlin/App/Browser/Ui/LobbyScreens.kt b/TankiOffline/app/src/jsMain/kotlin/App/Browser/Ui/LobbyScreens.kt index 4b342e5..418b711 100644 --- a/TankiOffline/app/src/jsMain/kotlin/App/Browser/Ui/LobbyScreens.kt +++ b/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 { 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()) { diff --git a/TankiOffline/app/src/jsMain/kotlin/App/Browser/Ui/Palette.kt b/TankiOffline/app/src/jsMain/kotlin/App/Browser/Ui/Palette.kt index 7975bbb..3667ea0 100644 --- a/TankiOffline/app/src/jsMain/kotlin/App/Browser/Ui/Palette.kt +++ b/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 diff --git a/TankiOffline/app/src/jsMain/kotlin/App/Browser/Ui/UiTheme.kt b/TankiOffline/app/src/jsMain/kotlin/App/Browser/Ui/UiTheme.kt index 84e88b8..bb9d950 100644 --- a/TankiOffline/app/src/jsMain/kotlin/App/Browser/Ui/UiTheme.kt +++ b/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") diff --git a/TankiOffline/app/src/jsMain/resources/lobby3.css b/TankiOffline/app/src/jsMain/resources/lobby3.css index 4963084..d2ead5a 100644 --- a/TankiOffline/app/src/jsMain/resources/lobby3.css +++ b/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;