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

余白 UI：手机端适配（☰ 全屏菜单 + 筛选条收口）+ 若干层叠与卡片修正

Browse Source 
手机端（≤720 / ≤640）
- 窄屏导航不再平铺：设计稿在窄屏把导航整个 display:none，手机上会没有任何
  入口，之前的做法是在品牌行下再摊一条横向滚动行，5 个中文项挤成一条读起来
  很碎。改为顶栏只留「头像 + ☰」，点 ☰ 开全屏菜单：竖排大字 + 英文小标、
  当前项高亮、底部放主题切换；顶行复用同款标头（关掉时视觉不跳），
  Esc / 点击空白 / 路由变化 / 窗口拉宽回桌面 都会关闭，
  打开时锁背景滚动并把焦点交给对话框（preventScroll）
- 顶栏主题切换 ◐ 在窄屏收进 ☰：两边各一个就是重复。桌面没有 ☰，
  且那枚 ◐ 是设计稿顶栏自带的（index.html:782），所以只在窄屏藏
- 筛选条：≤640 收起标签 chips（会折三四行）与搜索框，只留类型分段；
  标签仍有 /tags 整页入口
- viewport 补 viewport-fit=cover / interactive-widget；触屏补
  -webkit-tap-highlight-color、touch-action:manipulation、44px 可点目标、
  16px 输入框（防 iOS 聚焦缩放）

层叠（这次量出来的真问题）
- 新增 mobile.css 并在 main.ts 里最后 import：.hero/.wrap/.paper/.about-card/
  .toolbar 的窄屏覆盖原本写在 chrome.css（第 2 个 import），同特指度被
  home/article/pages.css 全程压掉 —— 媒体查询不加特指度，「后导入者赢」，
  所以手机上左右留白一直是 28px 而不是设计意图的 18px，圆角/内边距也没换过。
  现统一到 20px，实测 hero / wrap / showcase 左边缘对齐；
  同时删掉 home.css 里那条 ≤860 的 showcase 18px（与同宽度下 hero 的 28px 错开）
- .icon-btn 的 44px 触屏尺寸从 tokens.css 挪回 chrome.css 自己那边：
  原位置被后导入的同特指度 36px 反压，触屏上实际是 36×44 的椭圆
- .toolbar 防线补 border:0：只中和 top 会漏出左右两道边框
- 后台 3 处 100vh 补 100dvh 兜底；9 处 transition:all 展开为显式属性列表；
  19 处 :hover 收进 @media (hover:hover) and (pointer:fine)（触屏不再粘住 hover）

组件修正
- 首页作品卡片改用与 /projects 同一套结构：文字包进 .body（.proj 自身
  padding:0，原来 h3/p 直接贴左边框）、有封面才渲染 .cov（原来无封面时留
  150px 空色块）、无封面时用 .st-plain 显示状态
- .proj-grid 轨道下限改 min(300px,100%)：320px 视口下裸 300px 会顶破容器，
  被 body 的 overflow-x:hidden 裁掉右边
- 「全部作品 / 查看所有作品」改 RouterLink（原为 <a href>，会整页重载）

清理
- 删除 panels.css：.panels/.panel/.cloud/.plist/.about-box 在 vivid 里已无任何
  使用者（后台走 data-ui=classic，命中不到），连带 tokens.css 里的死规则与
  main.ts 的 import
- 修正注释里残留的 panels 描述

验证：headless Chromium 同源 iframe 探针 + 截图，390 / 320 / 1200 三档；
/admin 确认 classic 未被带坏；npm run build 无警告。
This commit is contained in:
Sakurasan committed 2026-09-23 23:20:51 +08:00
1 parent c431248796
commit a1d515e435
13 files changed
+1085 -2113
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/ui/yohaku/chrome.css
+109 -107
View File
@@ -1,138 +1,140 @@
/* ONE · 余白（yohaku）· 由设计稿按节拆分 / 窄屏
*
* 由设计稿（仓库根 index.html 的 <style>）按它自己的分节原样拆分。
* 只做了一件事：给每条规则加 html[data-ui='vivid'] 前缀（@media 内部的
* 规则也逐条加，at-rule 本身不加），并把 :root[data-theme="dark"] 映射到
* 本站的 vivid-dark。数值一律未改，规则也没有被拆开过。
*
* 前缀是硬要求：组件 scoped 样式编译后是 .foo[data-v-HASH]（0,2,0），
* html[data-ui='vivid'] .foo 是（0,2,1）才能稳定取胜；scoped 是懒加载
* chunk，入口 CSS 之后才到位，平手时按源码顺序反而会赢。
*/
/* ---- 设计稿分节：顶部导航 ---- */
/* ---- 顶部导航：四态里的第一态（悬浮常规条） ---- */
html[data-ui='vivid'] .top{
position:sticky;top:0;z-index:100;
html[data-ui='vivid'] .top {position:sticky;top:0;z-index:100;
backdrop-filter:blur(16px) saturate(1.3);
-webkit-backdrop-filter:blur(16px) saturate(1.3);
background:color-mix(in srgb,var(--paper) 78%,transparent);
border-bottom:1px solid transparent;
transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
html[data-ui='vivid'] .top.scrolled{
border-bottom-color:var(--line);
box-shadow:0 1px 0 var(--line);
}
html[data-ui='vivid'] .top-in{
max-width:1100px;margin:0 auto;
transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);}
html[data-ui='vivid'] .top.scrolled {border-bottom-color:var(--line);
box-shadow:0 1px 0 var(--line);}
html[data-ui='vivid'] .top-in {max-width:1100px;margin:0 auto;
padding:0 28px;height:60px;
display:flex;align-items:center;gap:20px;
}
html[data-ui='vivid'] .brand{
display:flex;align-items:center;gap:10px;
display:flex;align-items:center;gap:20px;}
html[data-ui='vivid'] .brand {display:flex;align-items:center;gap:10px;
font-weight:700;font-size:15px;letter-spacing:.02em;
transition:transform .5s var(--spring);
transition:transform .5s var(--spring);}
@media (hover: hover) and (pointer: fine) {
html[data-ui='vivid'] .brand:hover {transform:scale(1.04)}
}
html[data-ui='vivid'] .brand:hover{transform:scale(1.04)}
html[data-ui='vivid'] .brand .av{
width:30px;height:30px;border-radius:50%;
/* .m-brand 是全屏菜单里那个同款标头（菜单铺满屏后顶栏被盖住，得有个续接） */
html[data-ui='vivid'] :is(.brand, .m-brand) .av {width:30px;height:30px;border-radius:50%;
background:linear-gradient(135deg,var(--accent),var(--accent-deep));
display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800;
box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--accent-soft);
position:relative;
}
html[data-ui='vivid'] .brand .av::after{
content:"";position:absolute;right:-1px;bottom:-1px;
position:relative;}
html[data-ui='vivid'] :is(.brand, .m-brand) .av::after {content:"";position:absolute;right:-1px;bottom:-1px;
width:9px;height:9px;border-radius:50%;
background:#34c759;border:2px solid var(--paper);
}
html[data-ui='vivid'] .nav{display:flex;gap:2px;flex:1;justify-content:center}
html[data-ui='vivid'] .nav a{
position:relative;font-size:13.5px;font-weight:600;color:var(--soft);
background:#34c759;border:2px solid var(--paper);}
html[data-ui='vivid'] .nav {display:flex;gap:2px;flex:1;justify-content:center}
html[data-ui='vivid'] .nav a {position:relative;font-size:13.5px;font-weight:600;color:var(--soft);
padding:8px 14px;border-radius:999px;
transition:color .25s var(--ease),background .25s var(--ease),transform .5s var(--spring);
transition:color .25s var(--ease),background .25s var(--ease),transform .5s var(--spring);}
@media (hover: hover) and (pointer: fine) {
html[data-ui='vivid'] .nav a:hover {color:var(--ink);background:var(--accent-soft);transform:translateY(-1px)}
}
html[data-ui='vivid'] .nav a:hover{color:var(--ink);background:var(--accent-soft);transform:translateY(-1px)}
html[data-ui='vivid'] .nav a.on{color:var(--accent)}
html[data-ui='vivid'] .nav a.on::after{
content:"";position:absolute;left:50%;bottom:4px;
html[data-ui='vivid'] .nav a.on {color:var(--accent)}
html[data-ui='vivid'] .nav a.on::after {content:"";position:absolute;left:50%;bottom:4px;
width:4px;height:4px;border-radius:50%;
background:var(--accent);transform:translateX(-50%);
}
html[data-ui='vivid'] .top-acts{display:flex;align-items:center;gap:6px}
html[data-ui='vivid'] .icon-btn{
width:36px;height:36px;border-radius:50%;
background:var(--accent);transform:translateX(-50%);}
html[data-ui='vivid'] .top-acts {display:flex;align-items:center;gap:6px}
html[data-ui='vivid'] .icon-btn {width:36px;height:36px;border-radius:50%;
display:grid;place-items:center;color:var(--soft);font-size:15px;
transition:background .25s var(--ease),color .25s var(--ease),transform .5s var(--spring);
transition:background .25s var(--ease),color .25s var(--ease),transform .5s var(--spring);}
@media (hover: hover) and (pointer: fine) {
html[data-ui='vivid'] .icon-btn:hover {background:var(--accent-soft);color:var(--accent);transform:scale(1.08)}
}
html[data-ui='vivid'] .icon-btn:hover{background:var(--accent-soft);color:var(--accent);transform:scale(1.08)}
/* 手指标准 44px。放这里而不是 tokens.css：那边先导入，同特指度会被上面的 36px 反压 */
@media (pointer: coarse) {
html[data-ui='vivid'] .icon-btn {min-height:44px;width:44px}
}
/* ☰ 只给窄屏。这一条必须在下面的媒体查询之前 —— 媒体查询不加特指度，
写在后面会把 .menu-btn {display:grid} 压掉。 */
html[data-ui='vivid'] .menu-btn {display:none}
@media (max-width:720px) {
html[data-ui='vivid'] .nav{display:none}
/* 设计稿在窄屏把导航整个藏了 / 早先的做法是品牌行下方再摊一条横向滚动行，
5 个中文项挤成一条平铺，读起来很碎。改成收进 ☰ 全屏菜单。 */
html[data-ui='vivid'] .nav {display:none}
html[data-ui='vivid'] .menu-btn {display:grid}
/* 主题切换收进 ☰（菜单底部那枚）—— 顶栏和菜单各一个就是重复。
桌面没有 ☰，所以只在窄屏藏：那枚 ◐ 是设计稿顶栏自带的，留着。 */
html[data-ui='vivid'] .theme-btn {display:none}
/* 浏览器标题栏已经在显示站点名，品牌文字在手机上是重复的 —— 只留头像标记 */
html[data-ui='vivid'] .brand > span:last-child {display:none}
/* .nav 原来是 flex:1（把品牌顶左、操作顶右），它一藏起来就得自己撑开 */
html[data-ui='vivid'] .top-in {justify-content:space-between;gap:12px;padding:0 16px}
}
/* ---- 设计稿分节：阅读进度（详情页） ---- */
/* ---- 阅读进度（详情页） ---- */
html[data-ui='vivid'] .progress{
position:fixed;top:0;left:0;right:0;height:2px;z-index:200;
background:transparent;pointer-events:none;
/* ---- 窄屏全屏菜单 ---- */
html[data-ui='vivid'] .m-brand {display:flex;align-items:center;gap:10px;
font-weight:700;font-size:15px;letter-spacing:.02em;}
html[data-ui='vivid'] .menu {position:fixed;inset:0;z-index:150;
background:var(--paper);
display:flex;flex-direction:column;
/* 上下留出刘海 / 小横条的安全区 */
padding:0 max(18px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-bottom));
overscroll-behavior:contain;}
html[data-ui='vivid'] .menu:focus {outline:none}
html[data-ui='vivid'] .menu-head {height:56px;flex:none; /* 对齐顶栏高度，关掉时视觉不跳 */
display:flex;align-items:center;justify-content:space-between;}
html[data-ui='vivid'] .menu-in {flex:1;display:flex;flex-direction:column;
padding-top:10px;overflow-y:auto;}
html[data-ui='vivid'] .menu-in a {display:flex;align-items:baseline;gap:12px;
padding:16px 2px;font-size:26px;font-weight:800;letter-spacing:-.02em;
line-height:1.25;color:var(--soft);
border-bottom:1px solid var(--line);
transition:color .3s var(--ease);}
html[data-ui='vivid'] .menu-in a em {font-style:normal;font-size:11px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
html[data-ui='vivid'] .menu-in a.on,
html[data-ui='vivid'] .menu-in a.on em {color:var(--accent)}
html[data-ui='vivid'] .menu-in a:active {color:var(--accent)}
html[data-ui='vivid'] .menu-foot {flex:none;padding-top:18px}
/* 进：整块淡入 + 菜单项轻推上来；出：只淡出（避免收起时还要等位移） */
html[data-ui='vivid'] .v-menu-enter-active {transition:opacity .26s var(--ease)}
html[data-ui='vivid'] .v-menu-enter-active .menu-in {transition:transform .5s var(--spring),opacity .4s var(--ease)}
html[data-ui='vivid'] .v-menu-enter-from {opacity:0}
html[data-ui='vivid'] .v-menu-enter-from .menu-in {transform:translateY(12px);opacity:0}
html[data-ui='vivid'] .v-menu-leave-active {transition:opacity .18s var(--ease)}
html[data-ui='vivid'] .v-menu-leave-to {opacity:0}
/* 全局 reduce-motion 只把 duration 压扁，delay 会留下来 → 单独清掉 */
@media (prefers-reduced-motion: reduce) {
html[data-ui='vivid'] .v-menu-enter-active,
html[data-ui='vivid'] .v-menu-enter-active .menu-in {transition-delay:0s !important}
}
html[data-ui='vivid'] .progress i{
display:block;height:100%;width:0%;
html[data-ui='vivid'] .progress {position:fixed;top:0;left:0;right:0;height:2px;z-index:200;
background:transparent;pointer-events:none;}
html[data-ui='vivid'] .progress i {display:block;height:100%;width:0%;
background:linear-gradient(90deg,var(--accent),var(--accent-deep));
transition:width .1s linear;
}
html[data-ui='vivid'] .progress-pct{
position:fixed;right:22px;top:50%;transform:translateY(-50%);
transition:width .1s linear;}
html[data-ui='vivid'] .progress-pct {position:fixed;right:22px;top:50%;transform:translateY(-50%);
z-index:90;font-family:var(--mono);font-size:11px;font-weight:700;
color:var(--muted);letter-spacing:.06em;
writing-mode:vertical-rl;
opacity:0;transition:opacity .4s var(--ease);
pointer-events:none;
}
html[data-ui='vivid'] .progress-pct.show{opacity:1}
html[data-ui='vivid'] .progress-pct b{color:var(--accent);font-weight:800}
/* ---- 设计稿分节：页脚 ---- */
/* ---- 页脚 ---- */
html[data-ui='vivid'] .foot{
max-width:1100px;margin:40px auto 0;padding:28px 28px 120px;
pointer-events:none;}
html[data-ui='vivid'] .progress-pct.show {opacity:1}
html[data-ui='vivid'] .progress-pct b {color:var(--accent);font-weight:800}
html[data-ui='vivid'] .foot {max-width:1100px;margin:40px auto 0;padding:28px 28px 120px;
border-top:1px solid var(--line);
text-align:center;color:var(--muted);font-size:12.5px;line-height:2;
text-align:center;color:var(--muted);font-size:12.5px;line-height:2;}
html[data-ui='vivid'] .foot a {color:var(--accent);font-weight:600;transition:opacity .25s}
@media (hover: hover) and (pointer: fine) {
html[data-ui='vivid'] .foot a:hover {opacity:.75}
}
html[data-ui='vivid'] .foot a{color:var(--accent);font-weight:600;transition:opacity .25s}
html[data-ui='vivid'] .foot a:hover{opacity:.75}
html[data-ui='vivid'] .foot .sep{margin:0 8px;opacity:.4}
html[data-ui='vivid'] .foot .quote{
font-family:var(--serif);font-style:italic;
color:var(--soft);margin-bottom:8px;font-size:13.5px;
}
/* ---- 设计稿分节：切换器 / 窄屏 ---- */
/* ---- 切换器 ---- */
html[data-ui='vivid'] .switch{
position:fixed;z-index:99;left:50%;bottom:18px;transform:translateX(-50%);
html[data-ui='vivid'] .foot .sep {margin:0 8px;opacity:.4}
html[data-ui='vivid'] .foot .quote {font-family:var(--serif);font-style:italic;
color:var(--soft);margin-bottom:8px;font-size:13.5px;}
html[data-ui='vivid'] .switch {position:fixed;z-index:99;left:50%;bottom:18px;transform:translateX(-50%);
display:flex;gap:6px;padding:6px;border-radius:999px;
background:rgba(28,28,30,.88);backdrop-filter:blur(14px);
box-shadow:0 10px 36px rgba(0,0,0,.35);
border:1px solid rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.08);}
html[data-ui='vivid'] .switch button {padding:9px 15px;border-radius:999px;font-size:12.5px;font-weight:700;
color:rgba(255,255,255,.55);transition:.2s;}
@media (hover: hover) and (pointer: fine) {
html[data-ui='vivid'] .switch button:hover {color:#fff;background:rgba(255,255,255,.1)}
}
html[data-ui='vivid'] .switch button{
padding:9px 15px;border-radius:999px;font-size:12.5px;font-weight:700;
color:rgba(255,255,255,.55);transition:.2s;
}
html[data-ui='vivid'] .switch button:hover{color:#fff;background:rgba(255,255,255,.1)}
html[data-ui='vivid'] .switch button.on{background:#fff;color:#111}
html[data-ui='vivid'] .switch .lbl{color:rgba(255,255,255,.35);font-size:11px;align-self:center;padding:0 8px;letter-spacing:.08em}
@media (max-width:640px) {
html[data-ui='vivid'] .hero{padding:48px 20px 32px}
html[data-ui='vivid'] .wrap{padding:8px 18px 36px}
html[data-ui='vivid'] .paper{padding:28px 22px 36px;border-radius:16px}
html[data-ui='vivid'] .about-card{padding:32px 22px}
html[data-ui='vivid'] .panels{padding:16px 18px 12px}
html[data-ui='vivid'] .toolbar{flex-direction:column;align-items:stretch}
html[data-ui='vivid'] .search{width:100%}
html[data-ui='vivid'] .search input{flex:1;width:auto}
html[data-ui='vivid'] .top-in{padding:0 16px;gap:12px}
}
html[data-ui='vivid'] .switch button.on {background:#fff;color:#111}
html[data-ui='vivid'] .switch .lbl {color:rgba(255,255,255,.35);font-size:11px;align-self:center;padding:0 8px;letter-spacing:.08em}
/* 窄屏的跨模块覆盖（hero/wrap/paper/about-card/toolbar）在 mobile.css ——
那些选择器的基准尺寸定义在 home/article/pages.css，本文件排在它们前面，
同特指度压不住。详见 mobile.css 顶部说明。 */