mirrors2/ONE
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

抽屉菜单打磨：面板收窄到 min(66vw,250px)，字重 800→500 配 Phosphor 图标，当前项改淡色胶囊高亮（引入 @phosphor-icons/vue 按需引入）

Browse Source
This commit is contained in:
Sakurasan committed 2026-10-01 16:36:39 +08:00
1 parent b407547db9
commit 75548bf07f
4 files changed
+44 -16
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/ui/yohaku/chrome.css
+14 -10
View File
@@ -77,7 +77,7 @@ html[data-ui='vivid'] .drawer-root {position:fixed;inset:0;z-index:110;}
html[data-ui='vivid'] .drawer-root .scrim {position:absolute;inset:0;
background:color-mix(in srgb,var(--ink) 32%,transparent);}
html[data-ui='vivid'] .drawer {position:absolute;top:0;right:0;bottom:0;
width:min(80vw, 320px);
width:min(66vw, 250px);
border-left:1px solid var(--line);
border-radius:24px 0 0 24px;
background:color-mix(in srgb,var(--card) 92%,transparent);
@@ -91,16 +91,20 @@ html[data-ui='vivid'] .drawer {position:absolute;top:0;right:0;bottom:0;
scrollbar-width:none;}
html[data-ui='vivid'] .drawer:focus {outline:none}
html[data-ui='vivid'] .drawer-nav {display:flex;flex-direction:column;}
html[data-ui='vivid'] .drawer-nav a {position:relative;display:block;
padding:15px 4px;font-size:24px;font-weight:800;letter-spacing:-.02em;
line-height:1.25;color:var(--soft);
transition:color .3s var(--ease);}
html[data-ui='vivid'] .drawer-nav a.on {color:var(--accent)}
html[data-ui='vivid'] .drawer-nav a {position:relative;display:flex;align-items:center;gap:12px;
padding:12px 8px;font-size:16.5px;font-weight:500;letter-spacing:.01em;
line-height:1.3;color:var(--soft);border-radius:10px;
transition:color .3s var(--ease),background-color .3s var(--ease);}
html[data-ui='vivid'] .drawer-nav a .ic {width:21px;height:21px;flex:none;
color:var(--soft);
opacity:.75;
transition:color .3s var(--ease),opacity .3s var(--ease);}
html[data-ui='vivid'] .drawer-nav a.on {color:var(--accent);
background:color-mix(in srgb,var(--accent) 8%,transparent);}
html[data-ui='vivid'] .drawer-nav a.on .ic {color:var(--accent);opacity:1}
/* 当前项的左缘短杠：面板内边距 22px，杠落在离屏边 10px 处 */
html[data-ui='vivid'] .drawer-nav a.on::before {content:"";position:absolute;left:-18px;top:50%;
width:3px;height:18px;border-radius:2px;background:var(--accent);
transform:translateY(-50%);}
html[data-ui='vivid'] .drawer-nav a:active {color:var(--accent)}
html[data-ui='vivid'] .drawer-nav a:active {color:var(--accent);
background:color-mix(in srgb,var(--accent) 8%,transparent);}
html[data-ui='vivid'] .drawer-foot {margin-top:auto;padding-top:16px;
display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
html[data-ui='vivid'] .drawer-foot .chip {padding:6px 14px;border-radius:999px;