202 lines
12 KiB
CSS
202 lines
12 KiB
CSS
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;
|
||
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;
|
||
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);
|
||
padding:7px 16px;border-radius:999px;
|
||
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.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);
|
||
padding:7px 14px;border-radius:999px;
|
||
border:1px solid var(--line);
|
||
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.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;
|
||
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%;
|
||
background:var(--accent);color:#fff;font-size:13px;
|
||
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'] .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;}
|
||
@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);}
|
||
}
|
||
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;}
|
||
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 .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-top:16px;}
|
||
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;}
|
||
@media (hover: hover) and (pointer: fine) {
|
||
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:14px;flex-wrap:wrap;margin-top:8px}
|
||
/* 标签（信息流卡片 + 详情页共用）：纯文本 #标签，比一排药丸安静。
|
||
# 走 ::before，不影响链接/朗读的名字。 */
|
||
html[data-ui='vivid'] .tg {font-size:12.5px;font-weight:600;color:var(--muted);
|
||
transition:color .35s var(--ease);}
|
||
html[data-ui='vivid'] .tg::before {content:"#"}
|
||
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;}
|
||
@media (hover: hover) and (pointer: fine) {
|
||
html[data-ui='vivid'] .note:hover {background:var(--card);
|
||
transform:translateX(6px);
|
||
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-top:16px;}
|
||
html[data-ui='vivid'] .note .body {margin:0;font-size:15.5px;line-height:1.8;color:var(--text);
|
||
/* 短文正文用的是 .body 而不是 .prose，所以拿不到 styles.css 里 .prose 的
|
||
overflow-wrap:anywhere——裸链接这种不可断行的长 token 会把整列撑到 550px+，
|
||
手机上表现为页面横向能滚、右侧留白。用 anywhere 而非 break-word：
|
||
要让它参与 min-content 计算才真正压得住列宽。 */
|
||
overflow-wrap:anywhere;}
|
||
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;}
|
||
@media (hover: hover) and (pointer: fine) {
|
||
html[data-ui='vivid'] .note .body a:hover {border-bottom-color:var(--accent)}
|
||
}
|
||
/* 短文配图：Twitter 式网格（快发盒上传，≤4 张）。
|
||
高度由容器按 宽:高 = 2:1 定，不再让格子各自 aspect-ratio:1 往下撑——
|
||
信息流列宽有 1044px，1:1 的 n3 网格实测 981px 高，一条带图短文顶掉
|
||
一整屏。格子统一 object-fit:cover 居中裁，全图点开 lightbox 看。
|
||
n1 没有网格比例可依，学详情页 .post-imgs.n1 给个 520px 上限。 */
|
||
html[data-ui='vivid'] .note .imgs {display:grid;gap:3px;margin-top:10px;
|
||
border-radius:var(--radius);overflow:hidden;}
|
||
html[data-ui='vivid'] .note .imgs img {display:block;width:100%;height:100%;
|
||
object-fit:cover;cursor:zoom-in;}
|
||
html[data-ui='vivid'] .note .imgs.n1 img {max-height:520px;}
|
||
html[data-ui='vivid'] .note .imgs.n2,
|
||
html[data-ui='vivid'] .note .imgs.n3,
|
||
html[data-ui='vivid'] .note .imgs.n4 {grid-template-columns:1fr 1fr;
|
||
aspect-ratio:2/1;}
|
||
/* 行高必须 minmax(0,1fr)：裸 1fr 自带 min-content 下限，图片的自然高度会把行
|
||
撑回 733px+，容器 aspect-ratio 定出的 491px 装不下，n3/n4 的第二行整行被
|
||
裁出可视区。0 下限让行严格对半分，图片交给 object-fit:cover 裁。 */
|
||
html[data-ui='vivid'] .note .imgs.n2 {grid-template-rows:minmax(0,1fr);}
|
||
html[data-ui='vivid'] .note .imgs.n3,
|
||
html[data-ui='vivid'] .note .imgs.n4 {grid-template-rows:minmax(0,1fr) minmax(0,1fr);}
|
||
html[data-ui='vivid'] .note .imgs.n3 img:first-child {grid-row:span 2;}
|
||
/* 桌面端带图短文：文字、图片各占一半，图片不再因全宽铺开而吃高度——
|
||
半宽下沿用各 n* 自己的 2:1 容器比例，高度自动减半。meta/标签铺整行垫在
|
||
卡片底部：若让图跨多行去对齐左列内容，grid 会把跨行项的富余高度摊到
|
||
各 auto 行里，左列出现行间空隙。n1 没有自己的容器比例，这里补 2:1。
|
||
窄屏退回上下堆叠（图紧跟正文），≤720px 不分栏。 */
|
||
@media (min-width:721px) {
|
||
html[data-ui='vivid'] .note.split {display:grid;grid-template-columns:2fr 3fr;
|
||
column-gap:18px;row-gap:10px;}
|
||
html[data-ui='vivid'] .note.split .body {grid-column:1;grid-row:1;}
|
||
html[data-ui='vivid'] .note.split .imgs {grid-column:2;grid-row:1;
|
||
margin-top:0;align-self:start;}
|
||
html[data-ui='vivid'] .note.split .imgs.n1 {aspect-ratio:2/1;
|
||
grid-template-rows:minmax(0,1fr);}
|
||
html[data-ui='vivid'] .note.split .link-card,
|
||
html[data-ui='vivid'] .note.split .meta,
|
||
html[data-ui='vivid'] .note.split .tags {grid-column:1 / -1;margin-top:0;}
|
||
}
|
||
html[data-ui='vivid'] .note .tags {display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
|
||
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: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: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); }
|