diff --git a/app/src/main/assets/h5/css/app.css b/app/src/main/assets/h5/css/app.css index 1910930..84ac6a6 100644 --- a/app/src/main/assets/h5/css/app.css +++ b/app/src/main/assets/h5/css/app.css @@ -9,13 +9,26 @@ html, body { height: 100%; } /* Wallpaper transparency: html/body keep transparent to reveal native wallpaper */ html, body { background: transparent; } +/* 背景遮罩层:夜间主题下盖在壁纸上、UI 之下,透明度由 mask.js 控制 */ +/* Wallpaper dim overlay: sits above the wallpaper and below the UI; opacity is + controlled by mask.js */ +#wallpaper-dim { + position: fixed; + inset: 0; + background: #000; + opacity: 0; + pointer-events: none; + z-index: 0; + transition: opacity .3s; +} + body { color: var(--text); font-family: -apple-system, "MiSans", "PingFang SC", sans-serif; overflow: hidden; } -.app { display: flex; height: 100vh; } +.app { position: relative; z-index: 1; display: flex; height: 100vh; } /* 侧边栏:柔光玻璃容器,非纯色背景 */ /* Sidebar: soft-glass container, not a solid color */ @@ -35,7 +48,16 @@ body { .rail.expanded { width: 240px; align-items: stretch; padding: 12px 8px; } -.rail-clock { font-size: 14px; color: var(--text-dim); display: none; } +.rail-clock { + font-size: 14px; + color: var(--text-dim); + height: 18px; + line-height: 18px; + /* 始终占位固定高度,首页隐藏文字但保留高度,避免撑动下方图标 */ + /* Always occupy a fixed height; hide text on home but keep the height to + avoid shifting the icons below */ + visibility: hidden; +} .rail-item { display: flex; @@ -50,7 +72,8 @@ body { cursor: pointer; } -.rail-item .ico { font-size: 20px; } +.rail-item .ico { width: 24px; height: 24px; } +.rail-item .ico svg { width: 100%; height: 100%; display: block; } .rail-item .lbl { font-size: 11px; } .rail-item.active { background: var(--accent); color: #fff; } @@ -58,7 +81,18 @@ body { .content { flex: 1; overflow: hidden; } .page { display: none; height: 100%; } -.page.active { display: flex; flex-direction: column; } +.page.active { + display: flex; + flex-direction: column; + /* 页面切换淡入 + 轻微上移动画 */ + /* Fade-in + slight rise transition on page switch */ + animation: page-fade .22s ease; +} + +@keyframes page-fade { + from { opacity: 0; transform: translateY(6px); } + to { opacity: 1; transform: none; } +} /* 首页三栏布局:三等分纵向列,卡片向下堆叠 */ /* Home three-column layout: three equal vertical columns, cards stack downward */ @@ -99,6 +133,15 @@ body { line-height: 1; } +/* 秒显:小号、弱化,紧跟时:分之后 */ +/* Seconds: small and dim, trailing the HH:MM */ +.time-card .sec { + font-size: 24px; + font-weight: 300; + color: var(--text-dim); + margin-left: 2px; +} + .time-card .sub { margin-top: 8px; font-size: 14px; @@ -167,6 +210,9 @@ body { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 12px; padding: 0 16px 16px; + /* 行靠顶部对齐,避免结果只有一行时被拉伸到接近容器高度 */ + /* Align rows to the top so a single result row doesn't stretch to container height */ + align-content: start; } .cell { @@ -347,6 +393,19 @@ body { .st-item .lbl { font-size: 15px; } +/* 服务器地址输入框:点击设置项后展开 */ +/* Server URL input: expanded inside the item on tap */ +.url-input { + flex: 1; + padding: 6px 10px; + border-radius: 8px; + border: 1px solid var(--glass-border); + background: var(--glass-bg); + color: var(--text); + font-size: 13px; + outline: none; +} + /* 右侧箭头:弱化色 */ /* Trailing arrow: dim color */ .st-item .arrow { @@ -400,7 +459,7 @@ body { left: 0; top: 0; bottom: 0; - width: 60%; + width: var(--fill, 60%); border-radius: 999px; background: var(--accent); } diff --git a/app/src/main/assets/h5/css/tokens.css b/app/src/main/assets/h5/css/tokens.css index a045363..a22c151 100644 --- a/app/src/main/assets/h5/css/tokens.css +++ b/app/src/main/assets/h5/css/tokens.css @@ -8,8 +8,10 @@ --accent: #ff6900; } +/* 系统深色:仅在未强制浅色时生效(跟随系统) */ +/* System dark: only applies when not forced light (follow-system) */ @media (prefers-color-scheme: dark) { - :root { + :root:not([data-theme="light"]) { --glass-bg: rgba(21, 21, 24, 0.55); /* 深色半透明 / dark translucent */ --glass-border: rgba(255, 255, 255, 0.08); --text: #ffffff; @@ -17,3 +19,13 @@ --accent: #ff6900; } } + +/* 强制深色:无论系统主题 */ +/* Forced dark: regardless of system theme */ +:root[data-theme="dark"] { + --glass-bg: rgba(21, 21, 24, 0.55); + --glass-border: rgba(255, 255, 255, 0.08); + --text: #ffffff; + --text-dim: #9a9aa0; + --accent: #ff6900; +} diff --git a/app/src/main/assets/h5/index.html b/app/src/main/assets/h5/index.html index 4930704..8286d9e 100644 --- a/app/src/main/assets/h5/index.html +++ b/app/src/main/assets/h5/index.html @@ -6,8 +6,10 @@