203 lines
12 KiB
CSS
203 lines
12 KiB
CSS
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;
|
|
padding:0 28px;height:60px;
|
|
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);}
|
|
@media (hover: hover) and (pointer: fine) {
|
|
html[data-ui='vivid'] .brand:hover {transform:scale(1.04)}
|
|
}
|
|
/* .av 品牌标记：原来这里是一条 .brand .av 规则，但它被下面 :is(.brand,.dock-brand)
|
|
那条同特指度、且位置更靠后的规则完整覆盖了——等于死规则。合并成一条，避免两处漂移。 */
|
|
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);}
|
|
@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.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%;
|
|
display:grid;place-items:center;color:var(--soft);font-size:15px;
|
|
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)}
|
|
}
|
|
/* 手指标准 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) {
|
|
/* 顶栏整条在手机上退场：品牌和导航都挪到底部悬浮 dock（参考 innei.in 的
|
|
底部胶囊），内容区一寸顶栏都不占。桌面照旧走内联导航。
|
|
dock 的 display:flex 在下面 .dock 基准规则之后 —— 同特指度后导入者赢，
|
|
写在前面会被 display:none 压掉（chrome.css 老坑）。 */
|
|
html[data-ui='vivid'] .top {display:none}
|
|
}
|
|
|
|
/* ---- 窄屏：底部悬浮 dock + 上拉菜单 ----
|
|
dock 常驻拇指区（品牌 + 汉堡），点开一片从底部长出来的圆角毛玻璃菜单。 */
|
|
html[data-ui='vivid'] .dock {position:fixed;z-index:90;
|
|
left:50%;bottom:max(14px, env(safe-area-inset-bottom));transform:translateX(-50%);
|
|
display:none;align-items:center;gap:10px;
|
|
padding:6px 8px 6px 14px;border-radius:999px;
|
|
border:1px solid var(--line);
|
|
background:color-mix(in srgb,var(--card) 82%,transparent);
|
|
backdrop-filter:blur(20px) saturate(1.5);
|
|
-webkit-backdrop-filter:blur(20px) saturate(1.5);
|
|
box-shadow:var(--shadow-lg);}
|
|
html[data-ui='vivid'] .dock-brand {display:flex;align-items:center;
|
|
font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--ink);}
|
|
/* 窄屏才把 dock 摆出来；这条必须压在基准规则（display:none）之后 */
|
|
@media (max-width:720px) {
|
|
html[data-ui='vivid'] .dock {display:flex}
|
|
}
|
|
/* 品牌位只管尺寸：头像本身已裁成圆（AuthorAvatar 的 img），外面不加光环、
|
|
右下角也不加在线点——顶栏要的就是一张干净的圆头像。color 供 LogoMark
|
|
回落（未设头像时）着色。只作用于桌面顶栏 .brand：手机 dock 里已经不放
|
|
站标（YohakuTop 的 dock 分支），选择器不需要 :is() 兼顾两边。 */
|
|
html[data-ui='vivid'] .brand .av {width:30px;height:30px;flex:none;
|
|
color:var(--ink);}
|
|
|
|
/* 上拉菜单：圆角毛玻璃贴着 dock 上方长出来，最高 70vh，内容多就内部滚 */
|
|
html[data-ui='vivid'] .menu-root {position:fixed;inset:0;z-index:110;}
|
|
html[data-ui='vivid'] .menu-root .scrim {position:absolute;inset:0;
|
|
background:color-mix(in srgb,var(--ink) 32%,transparent);}
|
|
html[data-ui='vivid'] .menu {position:absolute;left:10px;right:10px;
|
|
bottom:max(10px, env(safe-area-inset-bottom));
|
|
border-radius:26px;
|
|
background:color-mix(in srgb,var(--card) 92%,transparent);
|
|
backdrop-filter:blur(28px) saturate(1.6);
|
|
-webkit-backdrop-filter:blur(28px) saturate(1.6);
|
|
border:1px solid var(--line);
|
|
box-shadow:var(--shadow-lg);
|
|
display:flex;flex-direction:column;
|
|
padding:10px 22px max(14px, env(safe-area-inset-bottom));
|
|
overscroll-behavior:contain;
|
|
max-height:min(70vh, 560px);}
|
|
html[data-ui='vivid'] .menu:focus {outline:none}
|
|
html[data-ui='vivid'] .menu-in {flex:1;display:flex;flex-direction:column;
|
|
justify-content:flex-start;
|
|
padding-top:6px;overflow-y:auto;
|
|
scrollbar-width:none;}
|
|
html[data-ui='vivid'] .menu-in a {position:relative;display:flex;align-items:baseline;gap:14px;
|
|
padding:15px 2px;font-size:25px;font-weight:800;letter-spacing:-.02em;
|
|
line-height:1.25;color:var(--soft);
|
|
border-bottom:1px solid var(--line);
|
|
transition:color .3s var(--ease);
|
|
/* 逐项入场：--i 由模板按序号写进 style，错峰 45ms */
|
|
animation:mItem .55s var(--spring) both;
|
|
animation-delay:calc(var(--i, 0) * 45ms);}
|
|
@keyframes mItem {from {opacity:0;transform:translateY(14px)}}
|
|
html[data-ui='vivid'] .menu-in a:last-child {border-bottom:0}
|
|
html[data-ui='vivid'] .menu-in a .idx {font-family:var(--mono);font-size:11px;font-weight:700;
|
|
color:var(--muted);letter-spacing:.06em;
|
|
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);margin-left:auto;
|
|
transition:color .3s var(--ease);}
|
|
html[data-ui='vivid'] .menu-in a.on {color:var(--accent)}
|
|
html[data-ui='vivid'] .menu-in a.on .idx,
|
|
html[data-ui='vivid'] .menu-in a.on em {color:var(--accent)}
|
|
/* 当前项的左缘短杠：菜单内边距 22px，杠落在离屏边 10px 处 */
|
|
html[data-ui='vivid'] .menu-in a.on::before {content:"";position:absolute;left:-14px;top:50%;
|
|
width:3px;height:18px;border-radius:2px;background:var(--accent);
|
|
transform:translateY(-50%);}
|
|
html[data-ui='vivid'] .menu-in a:active {color:var(--accent)}
|
|
html[data-ui='vivid'] .menu-foot {flex:none;padding-top:16px;
|
|
display:flex;align-items:center;justify-content:space-between;gap:12px;}
|
|
html[data-ui='vivid'] .menu-foot .m-desc {margin:0;font-size:12px;line-height:1.7;
|
|
color:var(--muted);text-align:right;}
|
|
/* 进：scrim 淡入 + 菜单从底部长出来 + 项逐项推上来；出：整块沉回去 */
|
|
html[data-ui='vivid'] .v-menu-enter-active {transition:opacity .3s var(--ease)}
|
|
html[data-ui='vivid'] .v-menu-enter-active .menu {transition:transform .55s var(--spring),opacity .35s var(--ease)}
|
|
html[data-ui='vivid'] .v-menu-enter-from {opacity:0}
|
|
html[data-ui='vivid'] .v-menu-enter-from .menu {transform:translateY(56px);opacity:0}
|
|
html[data-ui='vivid'] .v-menu-leave-active {transition:opacity .22s var(--ease)}
|
|
html[data-ui='vivid'] .v-menu-leave-active .menu {transition:transform .22s var(--ease)}
|
|
html[data-ui='vivid'] .v-menu-leave-to {opacity:0}
|
|
html[data-ui='vivid'] .v-menu-leave-to .menu {transform:translateY(48px)}
|
|
/* 全局 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 {transition-delay:0s !important}
|
|
html[data-ui='vivid'] .menu-in a {animation:none}
|
|
}
|
|
/* 短文快发盒（QuickShort）的 vivid 差异：圆角跟自己的半径档走，
|
|
FAB 不用给经典版的主题浮钮让位（vivid 的主题键在菜单里），贴到安全区 */
|
|
html[data-ui='vivid'] .qs-card {border-radius:14px;}
|
|
html[data-ui='vivid'] .qs-fab {bottom:max(20px, env(safe-area-inset-bottom));}
|
|
|
|
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%);
|
|
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;
|
|
border-top:1px solid var(--line);
|
|
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}
|
|
/* 页脚社交排：图标居中一行，与 classic 页脚同步 */
|
|
html[data-ui='vivid'] .foot-social {display:flex;justify-content:center;align-items:center;
|
|
gap:18px;margin:14px 0 18px;}
|
|
html[data-ui='vivid'] .foot-social a {color:var(--soft);font-weight:400;
|
|
display:inline-flex;align-items:center;justify-content:center;
|
|
width:30px;height:30px;border-radius:8px;transition:color .25s,background .25s;}
|
|
html[data-ui='vivid'] .foot-social a:hover {color:var(--accent);background:var(--accent-soft);}
|
|
html[data-ui='vivid'] .foot-social svg {width:17px;height:17px;fill:currentColor;}
|
|
html[data-ui='vivid'] .foot-social span {font-size:12px;}
|
|
/* 项目信息行：源码入口 + 版权。刻意不并进 .foot-social——那一排是站主的社交
|
|
身份，源码是仓库入口，混在一起会让人以为它也是一个社交账号。
|
|
放在 .foot a 规则之后：两者特指度相同，靠后者才能压掉默认的强调色。 */
|
|
html[data-ui='vivid'] .foot-meta {display:flex;justify-content:center;align-items:center;
|
|
gap:8px;margin:16px 0 0;color:var(--muted);}
|
|
html[data-ui='vivid'] .foot-meta a {display:inline-flex;align-items:center;justify-content:center;
|
|
width:26px;height:26px;border-radius:7px;color:var(--soft);font-weight:400;
|
|
transition:color .25s,background .25s;}
|
|
html[data-ui='vivid'] .foot-meta a:hover {color:var(--accent);background:var(--accent-soft);}
|
|
html[data-ui='vivid'] .foot-meta svg {width:15px;height:15px;fill:currentColor;}
|
|
@media (hover: hover) and (pointer: fine) {
|
|
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%);
|
|
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);}
|
|
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.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 顶部说明。 */
|