余白 UI：手机端适配（☰ 全屏菜单 + 筛选条收口）+ 若干层叠与卡片修正
手机端（≤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
1 parent
c431248796
commit
a1d515e435
13 files changed
+1085
-2113
No files matched your search
+114
-198
@@ -1,243 +1,159 @@
|
||||
/* 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 之后才到位，平手时按源码顺序反而会赢。
|
||||
*/
|
||||
|
||||
|
||||
/* ---- 设计稿分节：Hero ---- */
|
||||
/* ---- Hero ---- */
|
||||
html[data-ui='vivid'] .hero{
|
||||
max-width:1100px;margin:0 auto;padding:72px 28px 48px;
|
||||
position:relative;
|
||||
}
|
||||
html[data-ui='vivid'] .hero .kicker{
|
||||
display:inline-flex;align-items:center;gap:8px;
|
||||
html[data-ui='vivid'] .hero {max-width:1100px;margin:0 auto;padding:72px 28px 48px;
|
||||
position:relative;}
|
||||
html[data-ui='vivid'] .hero .kicker {display:inline-flex;align-items:center;gap:8px;
|
||||
font-size:12px;font-weight:700;letter-spacing:.14em;
|
||||
color:var(--accent);text-transform:uppercase;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
html[data-ui='vivid'] .hero .kicker::before{
|
||||
content:"";width:20px;height:1.5px;background:var(--accent);border-radius:2px;
|
||||
}
|
||||
html[data-ui='vivid'] .hero h1{
|
||||
margin:0;font-size:clamp(36px,5.5vw,56px);font-weight:800;
|
||||
margin-bottom:20px;}
|
||||
html[data-ui='vivid'] .hero .kicker::before {content:"";width:20px;height:1.5px;background:var(--accent);border-radius:2px;}
|
||||
html[data-ui='vivid'] .hero h1 {margin:0;font-size:clamp(36px,5.5vw,56px);font-weight:800;
|
||||
letter-spacing:-.03em;line-height:1.15;max-width:16ch;
|
||||
color:var(--ink);
|
||||
}
|
||||
html[data-ui='vivid'] .hero h1 .hl{
|
||||
color:var(--accent);
|
||||
position:relative;
|
||||
}
|
||||
html[data-ui='vivid'] .hero h1 .hl::after{
|
||||
content:"";position:absolute;left:0;right:0;bottom:4px;height:8px;
|
||||
background:var(--accent-soft);z-index:-1;border-radius:2px;
|
||||
}
|
||||
html[data-ui='vivid'] .hero .lead{
|
||||
margin:18px 0 0;max-width:480px;font-size:16px;
|
||||
color:var(--soft);line-height:1.8;
|
||||
}
|
||||
html[data-ui='vivid'] .hero .lead strong{color:var(--text);font-weight:700}
|
||||
html[data-ui='vivid'] .stats{display:flex;gap:28px;margin-top:32px;flex-wrap:wrap}
|
||||
html[data-ui='vivid'] .stat b{
|
||||
display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;
|
||||
color:var(--ink);font-variant-numeric:tabular-nums;
|
||||
}
|
||||
html[data-ui='vivid'] .stat span{font-size:12px;color:var(--muted);font-weight:600}
|
||||
|
||||
/* ---- 设计稿分节：筛选 ---- */
|
||||
/* ---- 筛选 ---- */
|
||||
html[data-ui='vivid'] .wrap{max-width:1100px;margin:0 auto;padding:8px 28px 48px}
|
||||
html[data-ui='vivid'] .toolbar{
|
||||
display:flex;gap:10px;flex-wrap:wrap;align-items:center;
|
||||
color:var(--ink);}
|
||||
html[data-ui='vivid'] .hero h1 .hl {color:var(--accent);
|
||||
position:relative;}
|
||||
html[data-ui='vivid'] .hero h1 .hl::after {content:"";position:absolute;left:0;right:0;bottom:4px;height:8px;
|
||||
background:var(--accent-soft);z-index:-1;border-radius:2px;}
|
||||
html[data-ui='vivid'] .hero .lead {margin:18px 0 0;max-width:480px;font-size:16px;
|
||||
color:var(--soft);line-height:1.8;}
|
||||
html[data-ui='vivid'] .hero .lead strong {color:var(--text);font-weight:700}
|
||||
html[data-ui='vivid'] .stats {display:flex;gap:28px;margin-top:32px;flex-wrap:wrap}
|
||||
html[data-ui='vivid'] .stat b {display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;
|
||||
color:var(--ink);font-variant-numeric:tabular-nums;}
|
||||
html[data-ui='vivid'] .stat span {font-size:12px;color:var(--muted);font-weight:600}
|
||||
html[data-ui='vivid'] .wrap {max-width:1100px;margin:0 auto;padding:8px 28px 48px}
|
||||
html[data-ui='vivid'] .toolbar {display:flex;gap:10px;flex-wrap:wrap;align-items:center;
|
||||
padding-bottom:20px;margin-bottom:8px;
|
||||
border-bottom:1px solid var(--line);
|
||||
}
|
||||
html[data-ui='vivid'] .seg{
|
||||
display:inline-flex;background:color-mix(in srgb,var(--ink) 5%,transparent);
|
||||
border-radius:999px;padding:3px;gap:2px;
|
||||
}
|
||||
html[data-ui='vivid'] .seg button{
|
||||
font-size:13px;font-weight:600;color:var(--soft);
|
||||
border-bottom:1px solid var(--line);}
|
||||
html[data-ui='vivid'] .seg {display:inline-flex;background:color-mix(in srgb,var(--ink) 5%,transparent);
|
||||
border-radius:999px;padding:3px;gap:2px;}
|
||||
html[data-ui='vivid'] .seg button {font-size:13px;font-weight:600;color:var(--soft);
|
||||
padding:7px 16px;border-radius:999px;
|
||||
transition:background .3s var(--ease),color .3s var(--ease),transform .5s var(--spring);
|
||||
transition:background .3s var(--ease),color .3s var(--ease),transform .5s var(--spring);}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .seg button:hover {color:var(--ink)}
|
||||
}
|
||||
html[data-ui='vivid'] .seg button:hover{color:var(--ink)}
|
||||
html[data-ui='vivid'] .seg button.on{
|
||||
background:var(--card);color:var(--accent);
|
||||
html[data-ui='vivid'] .seg button.on {background:var(--card);color:var(--accent);
|
||||
box-shadow:var(--shadow);
|
||||
transform:scale(1.02);
|
||||
}
|
||||
html[data-ui='vivid'] .chips{display:flex;gap:6px;flex-wrap:wrap;flex:1}
|
||||
html[data-ui='vivid'] .chip{
|
||||
font-size:12.5px;font-weight:600;color:var(--soft);
|
||||
transform:scale(1.02);}
|
||||
html[data-ui='vivid'] .chips {display:flex;gap:6px;flex-wrap:wrap;flex:1}
|
||||
html[data-ui='vivid'] .chip {font-size:12.5px;font-weight:600;color:var(--soft);
|
||||
padding:7px 14px;border-radius:999px;
|
||||
border:1px solid var(--line);
|
||||
transition:all .35s var(--spring);
|
||||
transition:border-color .35s var(--spring),color .35s var(--spring),transform .35s var(--spring),box-shadow .35s var(--spring);}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .chip:hover {border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
|
||||
}
|
||||
html[data-ui='vivid'] .chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
|
||||
html[data-ui='vivid'] .chip.on{
|
||||
background:var(--accent);border-color:var(--accent);color:#fff;
|
||||
html[data-ui='vivid'] .chip.on {background:var(--accent);border-color:var(--accent);color:#fff;
|
||||
box-shadow:0 6px 16px var(--accent-glow);
|
||||
transform:translateY(-1px);
|
||||
}
|
||||
html[data-ui='vivid'] .search{
|
||||
display:flex;align-items:center;gap:6px;
|
||||
transform:translateY(-1px);}
|
||||
html[data-ui='vivid'] .search {display:flex;align-items:center;gap:6px;
|
||||
background:color-mix(in srgb,var(--ink) 4%,transparent);
|
||||
border-radius:999px;padding:2px 4px 2px 14px;
|
||||
border:1px solid transparent;
|
||||
transition:border-color .3s,background .3s,box-shadow .3s;
|
||||
}
|
||||
html[data-ui='vivid'] .search:focus-within{
|
||||
border-color:var(--accent);background:var(--card);
|
||||
box-shadow:0 0 0 3px var(--accent-soft);
|
||||
}
|
||||
html[data-ui='vivid'] .search input{
|
||||
border:0;background:transparent;outline:none;font:inherit;font-size:13.5px;
|
||||
width:150px;padding:7px 0;color:var(--ink);
|
||||
}
|
||||
html[data-ui='vivid'] .search input::placeholder{color:var(--muted)}
|
||||
html[data-ui='vivid'] .search button{
|
||||
width:32px;height:32px;border-radius:50%;
|
||||
transition:border-color .3s,background .3s,box-shadow .3s;}
|
||||
html[data-ui='vivid'] .search:focus-within {border-color:var(--accent);background:var(--card);
|
||||
box-shadow:0 0 0 3px var(--accent-soft);}
|
||||
html[data-ui='vivid'] .search input {border:0;background:transparent;outline:none;font:inherit;font-size:13.5px;
|
||||
width:150px;padding:7px 0;color:var(--ink);}
|
||||
html[data-ui='vivid'] .search input::placeholder {color:var(--muted)}
|
||||
html[data-ui='vivid'] .search button {width:32px;height:32px;border-radius:50%;
|
||||
background:var(--accent);color:#fff;font-size:13px;
|
||||
transition:transform .5s var(--spring),box-shadow .3s;
|
||||
transition:transform .5s var(--spring),box-shadow .3s;}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .search button:hover {transform:scale(1.1);box-shadow:0 4px 12px var(--accent-glow)}
|
||||
}
|
||||
html[data-ui='vivid'] .search button:hover{transform:scale(1.1);box-shadow:0 4px 12px var(--accent-glow)}
|
||||
|
||||
/* ---- 设计稿分节：列表：长文卡片 / 短文纸条 ---- */
|
||||
/* ---- 列表：长文卡片 / 短文纸条 ---- */
|
||||
html[data-ui='vivid'] .feed{display:flex;flex-direction:column;gap:18px;padding-top:24px}
|
||||
/* 长文：干净卡片 */
|
||||
html[data-ui='vivid'] .card{
|
||||
display:block;background:var(--card);
|
||||
html[data-ui='vivid'] .feed {display:flex;flex-direction:column;gap:18px;padding-top:24px}
|
||||
html[data-ui='vivid'] .card {display:block;background:var(--card);
|
||||
border:1px solid var(--line);
|
||||
border-radius:var(--radius-lg);
|
||||
overflow:hidden;
|
||||
box-shadow:var(--shadow);
|
||||
transition:transform .55s var(--spring),box-shadow .45s var(--ease),border-color .3s;
|
||||
position:relative;
|
||||
}
|
||||
html[data-ui='vivid'] .card:hover{
|
||||
transform:translateY(-4px) scale(1.005);
|
||||
position:relative;}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .card:hover {transform:translateY(-4px) scale(1.005);
|
||||
box-shadow:var(--shadow-lg);
|
||||
border-color:color-mix(in srgb,var(--accent) 35%,transparent);
|
||||
border-color:color-mix(in srgb,var(--accent) 35%,transparent);}
|
||||
}
|
||||
html[data-ui='vivid'] .card:active{transform:translateY(-1px) scale(.998);transition-duration:.15s}
|
||||
html[data-ui='vivid'] .card .cov{
|
||||
height:180px;background:linear-gradient(
|
||||
html[data-ui='vivid'] .card:active {transform:translateY(-1px) scale(.998);transition-duration:.15s}
|
||||
html[data-ui='vivid'] .card .cov {height:180px;background:linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb,var(--accent) 25%,var(--paper)),
|
||||
color-mix(in srgb,var(--accent) 8%,var(--paper))
|
||||
);
|
||||
position:relative;overflow:hidden;
|
||||
position:relative;overflow:hidden;}
|
||||
html[data-ui='vivid'] .card .cov img {width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .card:hover .cov img {transform:scale(1.04)}
|
||||
}
|
||||
html[data-ui='vivid'] .card .cov img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
|
||||
html[data-ui='vivid'] .card:hover .cov img{transform:scale(1.04)}
|
||||
html[data-ui='vivid'] .card .body{padding:22px 26px 24px}
|
||||
html[data-ui='vivid'] .card .meta{
|
||||
display:flex;gap:10px;align-items:center;flex-wrap:wrap;
|
||||
font-size:12px;color:var(--muted);font-weight:600;margin-bottom:10px;
|
||||
}
|
||||
html[data-ui='vivid'] .badge{
|
||||
font-size:10.5px;font-weight:800;letter-spacing:.06em;
|
||||
padding:3px 9px;border-radius:999px;
|
||||
}
|
||||
html[data-ui='vivid'] .badge.long{background:var(--accent-soft);color:var(--accent)}
|
||||
html[data-ui='vivid'] .badge.short{background:rgba(52,199,89,.14);color:#28a745}
|
||||
html[data-ui='vivid'] .card h2{
|
||||
margin:0 0 10px;font-size:clamp(19px,2.2vw,23px);font-weight:800;
|
||||
html[data-ui='vivid'] .card .body {padding:22px 26px 24px}
|
||||
html[data-ui='vivid'] .card .meta {display:flex;gap:10px;align-items:center;flex-wrap:wrap;
|
||||
font-size:12px;color:var(--muted);font-weight:600;margin-bottom:10px;}
|
||||
html[data-ui='vivid'] .badge {font-size:10.5px;font-weight:800;letter-spacing:.06em;
|
||||
padding:3px 9px;border-radius:999px;}
|
||||
html[data-ui='vivid'] .badge.long {background:var(--accent-soft);color:var(--accent)}
|
||||
html[data-ui='vivid'] .badge.short {background:rgba(52,199,89,.14);color:#28a745}
|
||||
html[data-ui='vivid'] .card h2 {margin:0 0 10px;font-size:clamp(19px,2.2vw,23px);font-weight:800;
|
||||
letter-spacing:-.02em;line-height:1.35;color:var(--ink);
|
||||
transition:color .25s;
|
||||
transition:color .25s;}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .card:hover h2 {color:var(--accent)}
|
||||
}
|
||||
html[data-ui='vivid'] .card:hover h2{color:var(--accent)}
|
||||
html[data-ui='vivid'] .card .sum{
|
||||
margin:0;font-size:14.5px;line-height:1.75;color:var(--soft);
|
||||
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
|
||||
}
|
||||
html[data-ui='vivid'] .card .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
|
||||
html[data-ui='vivid'] .tg{
|
||||
font-size:11.5px;font-weight:700;color:var(--soft);
|
||||
html[data-ui='vivid'] .card .sum {margin:0;font-size:14.5px;line-height:1.75;color:var(--soft);
|
||||
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
|
||||
html[data-ui='vivid'] .card .tags {display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
|
||||
html[data-ui='vivid'] .tg {font-size:11.5px;font-weight:700;color:var(--soft);
|
||||
padding:4px 11px;border-radius:999px;
|
||||
background:color-mix(in srgb,var(--ink) 5%,transparent);
|
||||
transition:all .4s var(--spring);
|
||||
transition:background .35s var(--spring),color .35s var(--spring),transform .35s var(--spring);}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .tg:hover {background:var(--accent-soft);color:var(--accent);transform:translateY(-2px)}
|
||||
}
|
||||
html[data-ui='vivid'] .tg:hover{background:var(--accent-soft);color:var(--accent);transform:translateY(-2px)}
|
||||
/* 短文：纸条，无框更轻 */
|
||||
html[data-ui='vivid'] .note{
|
||||
display:block;background:transparent;
|
||||
html[data-ui='vivid'] .note {display:block;background:transparent;
|
||||
border-left:3px solid var(--accent);
|
||||
border-radius:0 var(--radius) var(--radius) 0;
|
||||
padding:18px 24px;
|
||||
margin-left:12px;
|
||||
position:relative;
|
||||
transition:background .35s var(--ease),transform .55s var(--spring),border-color .3s;
|
||||
}
|
||||
html[data-ui='vivid'] .note:hover{
|
||||
background:var(--card);
|
||||
transition:background .35s var(--ease),transform .55s var(--spring),border-color .3s;}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .note:hover {background:var(--card);
|
||||
transform:translateX(6px);
|
||||
box-shadow:var(--shadow);
|
||||
box-shadow:var(--shadow);}
|
||||
}
|
||||
html[data-ui='vivid'] .note .meta{
|
||||
display:flex;gap:10px;align-items:center;
|
||||
font-size:12px;color:var(--muted);font-weight:600;margin-bottom:8px;
|
||||
}
|
||||
html[data-ui='vivid'] .note .body{
|
||||
margin:0;font-size:15.5px;line-height:1.8;color:var(--text);
|
||||
}
|
||||
html[data-ui='vivid'] .note .body a{
|
||||
color:var(--accent);font-weight:600;
|
||||
html[data-ui='vivid'] .note .meta {display:flex;gap:10px;align-items:center;
|
||||
font-size:12px;color:var(--muted);font-weight:600;margin-bottom:8px;}
|
||||
html[data-ui='vivid'] .note .body {margin:0;font-size:15.5px;line-height:1.8;color:var(--text);}
|
||||
html[data-ui='vivid'] .note .body a {color:var(--accent);font-weight:600;
|
||||
border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
|
||||
transition:border-color .25s;
|
||||
transition:border-color .25s;}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .note .body a:hover {border-bottom-color:var(--accent)}
|
||||
}
|
||||
html[data-ui='vivid'] .note .body a:hover{border-bottom-color:var(--accent)}
|
||||
html[data-ui='vivid'] .note .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
|
||||
|
||||
/* ---- 设计稿分节：分页 ---- */
|
||||
/* ---- 分页 ---- */
|
||||
html[data-ui='vivid'] .pager{
|
||||
display:flex;gap:8px;align-items:center;justify-content:center;
|
||||
margin-top:36px;flex-wrap:wrap;
|
||||
}
|
||||
html[data-ui='vivid'] .pager button{
|
||||
font-size:13px;font-weight:700;padding:9px 16px;border-radius:999px;
|
||||
html[data-ui='vivid'] .note .tags {display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
|
||||
html[data-ui='vivid'] .pager {display:flex;gap:8px;align-items:center;justify-content:center;
|
||||
margin-top:36px;flex-wrap:wrap;}
|
||||
html[data-ui='vivid'] .pager button {font-size:13px;font-weight:700;padding:9px 16px;border-radius:999px;
|
||||
color:var(--soft);border:1px solid var(--line);background:var(--card);
|
||||
transition:all .45s var(--spring);
|
||||
transition:border-color .35s var(--spring),color .35s var(--spring),transform .35s var(--spring),box-shadow .35s var(--spring);}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .pager button:hover:not(:disabled) {border-color:var(--accent);color:var(--accent);transform:translateY(-2px);
|
||||
box-shadow:0 6px 16px var(--accent-soft);}
|
||||
}
|
||||
html[data-ui='vivid'] .pager button:hover:not(:disabled){
|
||||
border-color:var(--accent);color:var(--accent);transform:translateY(-2px);
|
||||
box-shadow:0 6px 16px var(--accent-soft);
|
||||
}
|
||||
html[data-ui='vivid'] .pager button:disabled{opacity:.4;cursor:not-allowed}
|
||||
html[data-ui='vivid'] .pager .cur{
|
||||
background:var(--accent);border-color:var(--accent);color:#fff;
|
||||
box-shadow:0 6px 16px var(--accent-glow);
|
||||
}
|
||||
html[data-ui='vivid'] .pager .info{border:0;background:none;color:var(--muted);font-weight:600;font-size:12.5px}
|
||||
|
||||
/* ---- 首页作品展示区（参照 diygod.cc：只展示部分 + 查看所有） ---- */
|
||||
html[data-ui='vivid'] .showcase{
|
||||
max-width:1100px;margin:56px auto 0;padding:0 28px;
|
||||
}
|
||||
html[data-ui='vivid'] .show-head{
|
||||
display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:20px;
|
||||
}
|
||||
html[data-ui='vivid'] .show-head h2{
|
||||
margin:0;font-size:1.4rem;font-weight:650;letter-spacing:0.01em;
|
||||
}
|
||||
html[data-ui='vivid'] .show-head .en{color:var(--muted)}
|
||||
html[data-ui='vivid'] .show-head .push{margin-left:auto;color:var(--muted)}
|
||||
html[data-ui='vivid'] .show-head .push:hover{color:var(--accent-deep)}
|
||||
html[data-ui='vivid'] .show-more{display:flex;justify-content:center;margin-top:26px}
|
||||
html[data-ui='vivid'] .show-more .chip{font-size:13px;padding:9px 22px}
|
||||
@media (max-width:860px){
|
||||
html[data-ui='vivid'] .showcase{
|
||||
padding-left:max(18px, env(safe-area-inset-left));
|
||||
padding-right:max(18px, env(safe-area-inset-right));
|
||||
}
|
||||
html[data-ui='vivid'] .pager button:disabled {opacity:.4;cursor:not-allowed}
|
||||
html[data-ui='vivid'] .pager .cur {background:var(--accent);border-color:var(--accent);color:#fff;
|
||||
box-shadow:0 6px 16px var(--accent-glow);}
|
||||
html[data-ui='vivid'] .pager .info {border:0;background:none;color:var(--muted);font-weight:600;font-size:12.5px}
|
||||
html[data-ui='vivid'] .showcase {max-width:1100px;margin:56px auto 0;padding:0 28px;}
|
||||
html[data-ui='vivid'] .show-head {display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:20px;}
|
||||
html[data-ui='vivid'] .show-head h2 {margin:0;font-size:1.4rem;font-weight:650;letter-spacing:0.01em;}
|
||||
html[data-ui='vivid'] .show-head .en {color:var(--muted)}
|
||||
html[data-ui='vivid'] .show-head .push {margin-left:auto;color:var(--muted)}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .show-head .push:hover {color:var(--accent-deep)}
|
||||
}
|
||||
html[data-ui='vivid'] .show-more {display:flex;justify-content:center;margin-top:26px}
|
||||
html[data-ui='vivid'] .show-more .chip {font-size:13px;padding:9px 22px}
|
||||
/* 窄屏的左右留白统一在 mobile.css —— 这里原本有一条 ≤860 的 18px，
|
||||
但 hero/wrap 在同一宽度是 28px，展示区会整体错开 10px。 */
|
||||
/* 触屏按压反馈：tap-highlight 已关，每个可点元素自带 :active（mobile-native §5） */
|
||||
html[data-ui='vivid'] .chip:active { transform: scale(0.96); }
|
||||
Reference in new issue
Block a user