feat: h5 desktop shell with sidebar and dark mode
- tokens.css/app.css: Miuix dual-color tokens + HyperOS 4 soft-glass rail - bridge.js/router.js: Promise bridge wrapper + 5-page router with top clock - index.html: sidebar + 5 page containers - native wallpaper transparency: Theme.Hearth (showWallpaper + transparent window) + WebView transparent background
This commit is contained in:
@@ -0,0 +1,61 @@
|
||||
/* Hearth 桌面样式:侧边栏 + 5 页框架 + 柔光玻璃容器 */
|
||||
/* Hearth launcher styles: sidebar + 5-page frame + soft-glass containers */
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body { height: 100%; }
|
||||
|
||||
/* 壁纸透明:html/body 不设背景,露出原生壁纸 */
|
||||
/* Wallpaper transparency: html/body keep transparent to reveal native wallpaper */
|
||||
html, body { background: transparent; }
|
||||
|
||||
body {
|
||||
color: var(--text);
|
||||
font-family: -apple-system, "MiSans", "PingFang SC", sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app { display: flex; height: 100vh; }
|
||||
|
||||
/* 侧边栏:柔光玻璃容器,非纯色背景 */
|
||||
/* Sidebar: soft-glass container, not a solid color */
|
||||
.rail {
|
||||
width: 80px;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(20px) saturate(1.2) brightness(1.05) contrast(1.1);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(1.2) brightness(1.05) contrast(1.1);
|
||||
border-right: 1px solid var(--glass-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
gap: 8px;
|
||||
transition: width .2s;
|
||||
}
|
||||
|
||||
.rail.expanded { width: 240px; align-items: stretch; padding: 12px 8px; }
|
||||
|
||||
.rail-clock { font-size: 14px; color: var(--text-dim); display: none; }
|
||||
|
||||
.rail-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-dim);
|
||||
padding: 8px;
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rail-item .ico { font-size: 20px; }
|
||||
.rail-item .lbl { font-size: 11px; }
|
||||
|
||||
.rail-item.active { background: var(--accent); color: #fff; }
|
||||
|
||||
.content { flex: 1; overflow: hidden; }
|
||||
|
||||
.page { display: none; height: 100%; }
|
||||
.page.active { display: flex; flex-direction: column; }
|
||||
Reference in New Issue
Block a user