From 28d668da5ebe97d19fa998bc1bfbe037f6938bd1 Mon Sep 17 00:00:00 2001 From: TermiNexus Date: Mon, 26 Oct 2026 18:22:59 +0800 Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E5=AF=B9=E9=BD=90=E8=AE=BE=E7=BD=AE?= =?UTF-8?q?=E9=A1=B5=E5=8E=9F=E7=89=88=E8=83=8C=E6=99=AF=E4=B8=8E=E5=A4=8D?= =?UTF-8?q?=E9=80=89=E6=A1=86=E9=85=8D=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 3DTank/docs/SettingsStyleTable.md | 4 ++- .../kotlin/App/Browser/Ui/LobbyScreens.kt | 26 +++++++++++-------- .../jsMain/kotlin/App/Browser/Ui/UiTheme.kt | 3 ++- 3 files changed, 20 insertions(+), 13 deletions(-) diff --git a/3DTank/docs/SettingsStyleTable.md b/3DTank/docs/SettingsStyleTable.md index 16352e5..67baafa 100644 --- a/3DTank/docs/SettingsStyleTable.md +++ b/3DTank/docs/SettingsStyleTable.md @@ -7,6 +7,7 @@ | 原版字段 | CSS | |---|---| +| `str.container`（页面根） | `background:radial-gradient(#203040 0%, #03080D 100%); width:100%; height:100%; position:absolute; margin:0` | | `blockContentOptions` | `display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start; width:72.25em; height:calc(100% - 8.5em); padding-top:4.5em; position:relative` | | `scroll` | `display:flex; flex-direction:column; width:46.875em; overflow-x:hidden; overflow-y:scroll; scrollbar-width:thin` | | `settingsBlockOptions` | `display:flex; flex-direction:column; width:46.875em; height:100%; padding:1.875em; padding-bottom:0; background:rgba(255,255,255,0.1); position:relative` | @@ -44,6 +45,7 @@ | `DropDownStyle` 容器 | `width:100%; position:relative` | | `DropDownStyle` 按钮 | `display:flex; align-items:center; justify-content:space-between; min-width:4.375em; width:100%; height:3.125em; border:0.063em solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.1); padding:0 0.875em; box-sizing:border-box` | | `CheckBoxComponentStyle` | `display:flex; align-items:center; justify-content:flex-start; width:100%; height:2.25em; margin-bottom:1.25em` | +| `CheckBoxStyle` 桌面 | `width:2.375em; height:2.375em; background:rgba(255,255,255,0.1); border:0.063em solid rgb(190,190,190); border-radius:20%; backdrop-filter:blur(12.5px)` | | `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` | @@ -52,7 +54,7 @@ ## 5. 当前仍为近似 -- 复选框内部图形：原版由组件内部 SVG/伪元素绘制，当前用 1.25em 黄色方块 + 勾。 +- 复选框：外框/背景/圆角/边框已按 `CheckBoxStyle` 对齐；勾的图形仍是近似（原版由组件内部 SVG/伪元素绘制）。 - 设置行的组合方式：已按 `rowBlock` / `dropDownTitle` / `slider` 的尺寸重建，但原版每个设置项的具体子组件层级仍需继续展开。 - 下拉选项弹层：当前用原生 `select`，原版是自定义列表；尺寸/边框/背景已对齐。 - 菜单滑动条的动态位置：当前按 `index * 5em + 1.25em` 计算，原版由组件状态计算 `margin-top`。 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 1feb132..7695888 100644 --- a/TankiOffline/app/src/jsMain/kotlin/App/Browser/Ui/LobbyScreens.kt +++ b/TankiOffline/app/src/jsMain/kotlin/App/Browser/Ui/LobbyScreens.kt @@ -2387,7 +2387,8 @@ private val SettingsCheckboxRow: csstype.PropertiesBuilder.() -> Unit = { Style("align-items", "center") Style("justify-content", "flex-start") Style("width", "100%") - Style("height", "2.25em") + Style("height", "auto") + Style("min-height", "3em") Style("margin-bottom", "1.25em") Style("gap", "0.75em") } @@ -2396,22 +2397,25 @@ private fun SettingsCheckbox(On: Boolean): csstype.PropertiesBuilder.() -> Unit Style("display", "flex") Style("align-items", "center") Style("justify-content", "center") - Style("width", "1.25em") - Style("height", "1.25em") - Style("flex", "0 0 1.25em") - Style("border", "0.063em solid ${if (On) "rgb(255, 188, 9)" else "rgba(255, 255, 255, 0.4)"}") - Style("background-color", if (On) "rgb(255, 188, 9)" else "rgba(255, 255, 255, 0.1)") + Style("width", "2.375em") + Style("height", "2.375em") + Style("flex", "0 0 2.375em") + Style("box-sizing", "border-box") + Style("background-color", if (On) "rgba(255, 255, 255, 0.15)" else "rgba(255, 255, 255, 0.1)") + Style("border", "0.063em solid rgb(190, 190, 190)") + Style("border-radius", "20%") + Style("backdrop-filter", "blur(12.5px)") Style("cursor", "pointer") Style("padding", "0") } private val SettingsCheckMark: csstype.PropertiesBuilder.() -> Unit = { - Style("width", "0.65em") - Style("height", "0.4em") - Style("border-left", "0.15em solid #1b1f22") - Style("border-bottom", "0.15em solid #1b1f22") + Style("width", "0.85em") + Style("height", "0.5em") + Style("border-left", "0.15em solid rgba(255, 255, 255, 0.9)") + Style("border-bottom", "0.15em solid rgba(255, 255, 255, 0.9)") Style("transform", "rotate(-45deg)") - Style("margin-top", "-0.1em") + Style("margin-top", "-0.12em") } private val SettingsKeysGrid: csstype.PropertiesBuilder.() -> Unit = { 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 bb49487..200a9e6 100644 --- a/TankiOffline/app/src/jsMain/kotlin/App/Browser/Ui/UiTheme.kt +++ b/TankiOffline/app/src/jsMain/kotlin/App/Browser/Ui/UiTheme.kt @@ -50,7 +50,8 @@ internal val ScreenRoot: PropertiesBuilder.() -> Unit = { Style("display", "flex") Style("flex-direction", "column") Style("min-height", "0") - Style("background", "linear-gradient(180deg, rgba(0, 12, 20, 0.86), rgba(0, 8, 14, 0.94))") + Style("background", "radial-gradient(#203040 0%, #03080D 100%)") + Style("background-color", "#03080D") Style("color", Ui.Text) Style("font-family", Ui.FontRegular) Style("overflow", "hidden")