评论：去气泡改纸面排版 + 回复 @提及 + 双主题手机 12px 贴边
视觉：评论区从「带边框的聊天气泡盒」改成与去卡片后文章页一致的纸面排版 - .cm-bubble 类名保留（DOM 不动）盒子拆掉：正文直接落在纸面上，层级靠 头像 / 名字行 / 留白撑起，条与条之间不画线不画盒；删除态靠变灰变斜认 - 输入区去卡片盒，只留 textarea 底下一条「书写线」，聚焦变强调色 （vivid 再加同色光晕，与 .search 聚焦同一语言）；名字 / 计数 / 发送 排在线下方，像在纸上落款 - 操作钮 ✎ ✕ ↩ 圆图标 → 一行文字钮（回复/编辑/删除）：桌面 hover 浮现、 位置预留不跳版；触屏常显并加大可点面积；删除悬停给红；补 focus-visible 环 （文字钮无边框，键盘可达性自己画） - 回复串：空白缩进改左侧发丝线（与左栏时间线同一语言）；26px 小头像不再 戴登录方式小标（戴不下）；登录引导卡去框，一行引导 + 一排登录圆钮 - 暗色代码块修复（.cm-md pre 与 .prose pre 同一 bug）：背景 color-mix(92% ink, accent) 在暗色下混出浅底浅字，暗端覆盖为 color-mix(86% paper, accent) + 细边框 @提及 - 回复另一条回复时正文前带强调色 @对方名字，扁平列表里才看得出在跟谁 说话；回主楼不标。名字由 parent_id 在已加载回复列表里解析，父回复 未加载就不标 —— 后端阶段二契约不变，纯前端即可工作 - 浮动贴正文首行行首（与首字下沉同一技巧），字号行高与 .cm-md 成对同步 （基础 / 手机断点 / vivid 三处，改字号要一起改）；正文以代码块、列表 开头时退成独立一行，避免被块级背景盖住 - 编辑态去掉「正在改定此评：」，交给 placeholder；mock 加 reply-to-reply 用例（Mason 回 ONE） 手机 12px 贴边（两套主题正文与评论共用同一条左缘） - vivid：.article-layout 手机断点 1fr → minmax(0,1fr)。裸 1fr 的自动最小 尺寸是 min-content，正文里不可断行的长 token 把整列顶到 592px、整页 横向溢出（实测 375 视口 bodyScrollWidth 612）；页边距 20 → 12； .prose 加 overflow-wrap:break-word - classic：.shell 手机 20 → 12（首页信息流同步收边），PostView .wrap ≤640 侧边距归零 —— 那 4px 正是正文比评论多出的一截 - 评论手机断点（styles.css 基础段，两套 UI 共用）：头像 36→28、回复 缩进收紧、排序 / 登录 / 操作钮 44px 触控目标、输入 16px 防 iOS 聚焦缩放；.cm-md 加 overflow-wrap:break-word（用户内容长链接必须断行） 杂项 - vite dev 加 --host：手机连局域网可直接评审 - 实测（浏览器逐状态截图过目）：vivid/classic × 亮/暗 × 桌面/390， 默认 / 未登录 / 空 / 审核中 / 已删除 / 多级回复 / 回复框 / 编辑框 共 13 张；375 视口 bodyScrollWidth = 375 无溢出；pnpm build 通过
This commit is contained in:
Sakurasan
@@ -3,7 +3,10 @@ html[data-ui='vivid'] .article-layout {max-width:1100px;margin:0 auto;padding:24
|
||||
grid-template-columns:140px minmax(0,1fr) 180px;
|
||||
gap:24px;align-items:start;}
|
||||
@media (max-width:960px) {
|
||||
html[data-ui='vivid'] .article-layout {grid-template-columns:1fr;gap:0}
|
||||
/* 1fr 的自动最小尺寸是 min-content：正文里出现不可断行的长 token
|
||||
（长内联代码/链接）时轨道会被顶到 592px+，整页横向溢出。
|
||||
minmax(0,1fr) 和 classic 的 .layout 同一写法，把最小尺寸钉死为 0。 */
|
||||
html[data-ui='vivid'] .article-layout {grid-template-columns:minmax(0,1fr);gap:0}
|
||||
html[data-ui='vivid'] .side-l, html[data-ui='vivid'] .side-r {display:none}
|
||||
html[data-ui='vivid'] .progress-pct {display:none}
|
||||
}
|
||||
@@ -61,7 +64,9 @@ html[data-ui='vivid'] .paper > .dek {margin:0 0 32px;font-size:17px;line-height:
|
||||
font-family:var(--serif);}
|
||||
html[data-ui='vivid'] .prose {font-size:16.5px;line-height:1.95;color:var(--text);max-width:var(--measure);
|
||||
/* 中英混排自动补一点字距（Chrome 120+ 的 text-autospace）。不支持就退回现在的样子。 */
|
||||
text-autospace:normal;}
|
||||
text-autospace:normal;
|
||||
/* 长 token（URL/内联代码）超出行宽时在任意字符处断行，别把列撑破 */
|
||||
overflow-wrap:break-word;}
|
||||
/* 段距上下各 1.5em（参考 .v10dui0 .rich-paragraph），首末段把外边距吃掉，
|
||||
否则标题/分隔线上方会多出一段空白 */
|
||||
html[data-ui='vivid'] .prose p {margin:1.5em 0}
|
||||
@@ -93,6 +98,10 @@ html[data-ui='vivid'] .prose pre {background:color-mix(in srgb,var(--ink) 92%,va
|
||||
color:#e8e8f0;padding:18px 20px;border-radius:12px;
|
||||
overflow-x:auto;font-size:13.5px;line-height:1.7;
|
||||
box-shadow:var(--shadow-lg);}
|
||||
/* 暗色下「92% ink」混出的是浅底，浅底配浅字没法读；暗端换深底微混强调色 */
|
||||
html[data-ui='vivid'][data-theme='vivid-dark'] .prose pre {
|
||||
background:color-mix(in srgb,var(--paper) 86%,var(--accent));
|
||||
border:1px solid var(--line);box-shadow:none;}
|
||||
html[data-ui='vivid'] .prose pre code {background:none;padding:0;color:inherit;font-size:inherit}
|
||||
html[data-ui='vivid'] .prose blockquote {margin:1.8em 0;padding:16px 20px;
|
||||
background:var(--accent-soft);
|
||||
|
||||
@@ -2,8 +2,9 @@
|
||||
评论区：vivid（余白）的差异部分
|
||||
--------------------------------------------------------------------------
|
||||
基础样式在 styles.css 的 .cm-*（classic 和 vivid 共用同一份 DOM）。
|
||||
这里只写 vivid 和 classic 长得不一样的地方 —— 全部带 html[data-ui='vivid']
|
||||
前缀，特指度比基础版高，天然盖住它。
|
||||
基础版已经是「去气泡」的编辑式排版：正文落在纸面上、回复串在一条
|
||||
发丝线上、操作是一行文字钮。这里只写 vivid 和 classic 长得不一样的地方
|
||||
—— 全部带 html[data-ui='vivid'] 前缀，特指度比基础版高，天然盖住它。
|
||||
自己的移动端覆盖也写在下面（不要挪进 mobile.css：那是「靠最后导入赢」，
|
||||
语义上不该承担某个具体组件的窄屏规则）。
|
||||
========================================================================== */
|
||||
@@ -15,28 +16,22 @@ html[data-ui='vivid'] .cm-sec {margin-top: 8px;padding: 24px 24px 0;border-top:
|
||||
html[data-ui='vivid'] .cm-count {font-size: 13px;color: var(--muted);letter-spacing: .01em;}
|
||||
/* .cm-sort 在 vivid 里同时带 .seg 类，pill 外观由 home.css 的 .seg 规则给 */
|
||||
|
||||
/* 未登录：一张安静的纸片，用和输入框同一套「场地」观感 */
|
||||
html[data-ui='vivid'] .cm-gate {padding: 26px 22px;border-radius: var(--radius-lg);
|
||||
border-color: var(--line);background: var(--card);box-shadow: var(--shadow);}
|
||||
html[data-ui='vivid'] .cm-gate-skel {box-shadow: none;border-radius: var(--radius);}
|
||||
html[data-ui='vivid'] .cm-provider {width: 40px;height: 40px;border-color: var(--line);
|
||||
background: var(--card);color: var(--soft);
|
||||
/* 未登录：基础版已经不画卡片，这里只给登录钮弹簧手感 */
|
||||
html[data-ui='vivid'] .cm-provider {border-color: var(--line);color: var(--soft);
|
||||
transition: border-color .3s var(--spring),color .3s var(--spring),transform .5s var(--spring);}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .cm-provider:hover {border-color: var(--accent);color: var(--accent);
|
||||
transform: translateY(-2px);}
|
||||
}
|
||||
|
||||
/* 输入框：vivid 的 .search / .seg 是同一套「无边框 + 聚焦才亮」的思路 */
|
||||
html[data-ui='vivid'] .cm-field {border-radius: var(--radius);background: var(--card);
|
||||
box-shadow: var(--shadow);
|
||||
transition: border-color .3s var(--ease),box-shadow .3s var(--ease);}
|
||||
html[data-ui='vivid'] .cm-field:focus-within {border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);}
|
||||
/* 输入区：基础版的「书写线」在 vivid 下聚焦时除了变强调色，再给一点同色光，
|
||||
和 .search 聚焦时的 ring 是同一种「亮起来」的语言 */
|
||||
html[data-ui='vivid'] .cm-input {font-size: 14.5px;line-height: 1.8;}
|
||||
html[data-ui='vivid'] .cm-bar {border-top-color: var(--line);}
|
||||
html[data-ui='vivid'] .cm-field:focus-within .cm-input {border-bottom-color: var(--accent);
|
||||
box-shadow: 0 10px 24px -18px var(--accent-glow);}
|
||||
html[data-ui='vivid'] .cm-bar-l b {color: var(--soft);}
|
||||
html[data-ui='vivid'] .cm-send {background: var(--accent);color: #fff;
|
||||
transition: transform .5s var(--spring),box-shadow .3s;}
|
||||
transition: transform .5s var(--spring),box-shadow .3s,opacity .2s;}
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .cm-send:not(:disabled):hover {transform: scale(1.04);
|
||||
box-shadow: 0 4px 12px var(--accent-glow);}
|
||||
@@ -44,13 +39,12 @@ html[data-ui='vivid'] .cm-send {background: var(--accent);color: #fff;
|
||||
html[data-ui='vivid'] .cm-send:active {transform: scale(.97);}
|
||||
|
||||
/* 列表 */
|
||||
html[data-ui='vivid'] .cm-list {gap: 20px;}
|
||||
html[data-ui='vivid'] .cm-av {width: 36px;height: 36px;background: var(--accent-soft);color: var(--accent);
|
||||
box-shadow: 0 0 0 2px var(--paper);}
|
||||
html[data-ui='vivid'] .cm-list {gap: 24px;}
|
||||
html[data-ui='vivid'] .cm-av {width: 36px;height: 36px;background: var(--accent-soft);color: var(--accent);}
|
||||
/* 站长的头像 ring 用强调色，一眼能认出来 */
|
||||
html[data-ui='vivid'] .cm-av.is-owner {box-shadow: 0 0 0 2px var(--paper),0 0 0 3.5px var(--accent-soft);}
|
||||
html[data-ui='vivid'] .cm-pv {box-shadow: 0 0 0 1.5px var(--paper);color: var(--muted);}
|
||||
html[data-ui='vivid'] .cm-name-a {font-size: 13.5px;color: var(--text);letter-spacing: .01em;}
|
||||
html[data-ui='vivid'] .cm-name-a {font-size: 14px;color: var(--text);letter-spacing: .01em;}
|
||||
/* tokens.css 的 a 重置（html[data-ui=vivid] a，特指度 0,1,2）会把链接名拉回
|
||||
inherit —— 继承到的是 body 的颜色，暗色下正好是深底深字。得在这里压回去。 */
|
||||
html[data-ui='vivid'] a.cm-name-a {color: var(--text);}
|
||||
@@ -61,13 +55,10 @@ html[data-ui='vivid'] .cm-owner {background: var(--accent-soft);color: var(--acc
|
||||
html[data-ui='vivid'] .cm-time {letter-spacing: .02em;}
|
||||
html[data-ui='vivid'] .cm-pending {background: color-mix(in srgb,var(--ink) 6%,transparent);}
|
||||
|
||||
/* 气泡：vivid 里用「场地」那套（细边 + 顶上一点渐变），缺角保留 */
|
||||
html[data-ui='vivid'] .cm-bubble {padding: 9px 14px;border-radius: var(--radius-lg);
|
||||
border-top-left-radius: 3px;border-color: var(--line);background: var(--card);
|
||||
color: var(--text);
|
||||
background-image: linear-gradient(180deg,var(--accent-soft) 0,transparent 26%);}
|
||||
html[data-ui='vivid'] .cm-item.is-reply .cm-bubble {border-top-left-radius: var(--radius-lg);}
|
||||
html[data-ui='vivid'] .cm-md {font-size: 14.5px;line-height: 1.75;}
|
||||
/* 正文落在纸面上；vivid 只接管 Markdown 内的元素配色 */
|
||||
html[data-ui='vivid'] .cm-bubble {color: var(--text);}
|
||||
/* cm-at 的字号行高跟 .cm-md 成对改（见 styles.css 里那条注释） */
|
||||
html[data-ui='vivid'] .cm-md, html[data-ui='vivid'] .cm-at {font-size: 14.5px;line-height: 1.8;}
|
||||
html[data-ui='vivid'] .cm-md a {text-decoration: underline;
|
||||
text-decoration-color: color-mix(in srgb,var(--accent) 40%,transparent);
|
||||
text-underline-offset: 2px;}
|
||||
@@ -78,41 +69,37 @@ html[data-ui='vivid'] .cm-md code {background: var(--accent-soft);color: var(--a
|
||||
html[data-ui='vivid'] .cm-md pre {background: color-mix(in srgb,var(--ink) 92%,var(--accent));
|
||||
color: #e8e8f0;box-shadow: var(--shadow-lg);}
|
||||
html[data-ui='vivid'] .cm-md pre code {background: none;color: inherit;}
|
||||
/* 暗色下上面的「92% ink」混出的是浅底，配上浅字就没法读了；
|
||||
暗端改成深底微混强调色，字色不变 */
|
||||
html[data-ui='vivid'][data-theme='vivid-dark'] .cm-md pre {
|
||||
background: color-mix(in srgb,var(--paper) 86%,var(--accent));
|
||||
border: 1px solid var(--line);box-shadow: none;}
|
||||
html[data-ui='vivid'] .cm-md blockquote {border-left-color: var(--accent);
|
||||
font-family: var(--serif);font-style: italic;}
|
||||
|
||||
/* 操作钮 */
|
||||
html[data-ui='vivid'] .cm-act {border-color: var(--line);background: var(--card);color: var(--muted);
|
||||
transition: border-color .3s var(--spring),color .3s var(--spring),transform .5s var(--spring);}
|
||||
/* 操作钮：文字钮继承基础版，vivid 给弹簧手感；删除悬停同样给红 */
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
html[data-ui='vivid'] .cm-act:hover {border-color: var(--accent);color: var(--accent);
|
||||
transform: translateY(-1px);}
|
||||
html[data-ui='vivid'] .cm-act {transition: color .3s var(--spring);}
|
||||
html[data-ui='vivid'] .cm-act:hover {color: var(--accent);}
|
||||
}
|
||||
|
||||
/* 回复 */
|
||||
html[data-ui='vivid'] .cm-more-r {border-color: var(--line);color: var(--muted);}
|
||||
/* 回复线与「加载更多回复」 */
|
||||
html[data-ui='vivid'] .cm-replies {border-left-color: var(--line);}
|
||||
html[data-ui='vivid'] .cm-more-r {color: var(--muted);}
|
||||
html[data-ui='vivid'] .cm-empty .chip {font-size: 13px;padding: 9px 22px;}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
手机：头像 24px（桌面 36px），触屏的可点目标 44px、输入框 16px（防聚焦缩放）
|
||||
手机：基础版已经把头像/缩进/可点目标收过一轮，这里只补 vivid 自己的
|
||||
页边距对齐（.cm-sec 桌面是 24px，手机跟 .article-layout 的 20px 走）
|
||||
-------------------------------------------------------------------------- */
|
||||
@media (max-width:640px) {
|
||||
html[data-ui='vivid'] .cm-sec {margin-top: 4px;padding: 20px 20px 0;}
|
||||
html[data-ui='vivid'] .cm-sec {margin-top: 4px;padding: 20px 0 0;}
|
||||
html[data-ui='vivid'] .cm-list {gap: 20px;}
|
||||
html[data-ui='vivid'] .cm-av,
|
||||
html[data-ui='vivid'] .cm-av-me {width: 24px;height: 24px;font-size: 11px;}
|
||||
html[data-ui='vivid'] .cm-replies {padding-left: 20px;}
|
||||
html[data-ui='vivid'] .cm-more-r {margin-left: 20px;}
|
||||
html[data-ui='vivid'] .cm-bubble {max-width: calc(100% - 1rem);}
|
||||
html[data-ui='vivid'] .cm-provider {width: 44px;height: 44px;}
|
||||
html[data-ui='vivid'] .cm-act {width: 32px;height: 32px;font-size: 13px;}
|
||||
html[data-ui='vivid'] .cm-sort button {min-height: 44px;}
|
||||
html[data-ui='vivid'] .cm-input {font-size: 16px;}
|
||||
html[data-ui='vivid'] .cm-av-me {width: 28px;height: 28px;font-size: 12px;}
|
||||
html[data-ui='vivid'] .cm-replies .cm-av {width: 24px;height: 24px;font-size: 10.5px;}
|
||||
}
|
||||
/* 触屏（可能是平板/桌面触屏，不限于窄屏）：可点目标给足 */
|
||||
/* 触屏（可能是平板/桌面触屏，不限于窄屏） */
|
||||
@media (pointer: coarse) {
|
||||
html[data-ui='vivid'] .cm-provider {width: 44px;height: 44px;}
|
||||
html[data-ui='vivid'] .cm-act {width: 32px;height: 32px;}
|
||||
html[data-ui='vivid'] .cm-more-r {padding: 10px 16px;}
|
||||
html[data-ui='vivid'] .cm-link {padding: 8px 2px;}
|
||||
html[data-ui='vivid'] .cm-input {font-size: 16px;}
|
||||
}
|
||||
|
||||
@@ -14,10 +14,12 @@
|
||||
/* 左右 20px 对齐：hero 的标题和下面卡片列表的左边缘要在同一条竖线上 */
|
||||
html[data-ui='vivid'] .hero {padding:48px 20px 32px}
|
||||
html[data-ui='vivid'] .wrap {padding:8px 20px 36px}
|
||||
/* 阅读页在手机上只收回留白：.article-layout 走 20px 页边距，.paper 的内边距归零
|
||||
/* 阅读页在手机上只收回留白：.article-layout 走 12px 页边距，.paper 的内边距归零
|
||||
（桌面那 24px 是为了给 776 的中列凑出 --measure 的 728，手机上只会浪费宽度）。
|
||||
卡片样式本身已在 article.css 里去掉了，手机桌面一致。 */
|
||||
html[data-ui='vivid'] .article-layout {padding:20px 20px 40px}
|
||||
12px 是站主定的「不影响美观的前提下尽量贴边」，评论区（styles.css 的 .cm-sec
|
||||
手机断点）与此对齐，正文和评论共用同一条左缘。卡片样式本身已在 article.css
|
||||
里去掉了，手机桌面一致。 */
|
||||
html[data-ui='vivid'] .article-layout {padding:20px 12px 40px}
|
||||
html[data-ui='vivid'] .paper {padding:0}
|
||||
html[data-ui='vivid'] .about-card {padding:32px 22px}
|
||||
/* showcase 的 .showcase 是 max-width + 自己的 padding（不带 .wrap 类），
|
||||
|
||||
Reference in New Issue
Block a user