feat: settings interactions (theme/mask/brightness/server-url), svg icons, seconds display, page transition

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);
 }