feat: webapp topbar and tab switching

This commit is contained in:
2026-08-16 16:34:39 +08:00
parent f8639917f3
commit 867ba3b098
5 changed files with 220 additions and 0 deletions
+95
View File
@@ -130,3 +130,98 @@ body {
border: 1px solid var(--glass-border);
color: var(--text-dim);
}
/* webAPP 顶栏:浮层玻璃条 + 标签面板 */
/* webapp topbar: floating glass bar + tab panel */
#web-topbar {
position: fixed;
top: 12px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 999px;
background: var(--glass-bg);
backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
border: 1px solid var(--glass-border);
z-index: 100;
}
#web-topbar button {
width: 30px;
height: 30px;
border: none;
border-radius: 999px;
background: none;
color: var(--text);
font-size: 16px;
cursor: pointer;
}
#web-topbar button:active { background: var(--glass-border); }
#web-topbar #tb-tabs {
width: auto;
padding: 0 12px;
font-size: 13px;
color: var(--text-dim);
}
#web-topbar .tb-title {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
color: var(--text);
}
#tab-panel {
position: fixed;
top: 56px;
right: 16px;
display: none;
min-width: 180px;
max-width: 260px;
padding: 8px;
border-radius: 16px;
background: var(--glass-bg);
backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
border: 1px solid var(--glass-border);
z-index: 100;
}
#tab-panel .tab-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 10px;
border-radius: 10px;
cursor: pointer;
}
#tab-panel .tab-row.active { background: var(--accent); color: #fff; }
#tab-panel .tab-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
}
#tab-panel .tab-close {
border: none;
background: none;
color: inherit;
font-size: 16px;
cursor: pointer;
opacity: 0.7;
}
#tab-panel .tab-close:hover { opacity: 1; }