评论：去气泡改纸面排版 + 回复 @提及 + 双主题手机 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
+137
-76
@@ -129,6 +129,11 @@ h1, h2, h3, h4 {font-family: var(--serif);
|
||||
.layout {grid-template-columns: minmax(0, 1fr);}
|
||||
.layout > .rail-left {display: none;}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
/* 手机页边距收到 12px：与评论区（.cm-sec 手机断点）和余白主题的文章列对齐，
|
||||
正文和评论共用同一条左缘（文章 .wrap 的侧边距在 PostView.vue 里归零） */
|
||||
.shell {padding: 0 12px;}
|
||||
}
|
||||
.eyebrow {font-size: 12px;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
@@ -1097,108 +1102,120 @@ a,
|
||||
评论区
|
||||
--------------------------------------------------------------------------
|
||||
classic 和 vivid 共用同一份 DOM（components/comments/）。
|
||||
视觉语言与去卡片后的文章页一致：评论正文直接落在纸面上，
|
||||
不再套带边框的气泡盒 —— 层级靠头像 / 名字行 / 留白撑起来。
|
||||
这里只写「两边都要」的基础，用经典那套 token —— vivid 把那批名字
|
||||
（--paper/--card/--ink/--accent/--line/--paper-sunken…）都别名到了 --v-*，
|
||||
所以同一份规则在两套 UI 下都成立。
|
||||
vivid 的差异（缺角气泡、渐变底、头像 ring、触屏尺寸）在
|
||||
vivid 的差异（头像配色、代码块、弹簧手感、触屏尺寸）在
|
||||
ui/yohaku/comments.css，那边特指度更高，会盖住这里。
|
||||
========================================================================== */
|
||||
|
||||
/* 头部只放计数 + 排序。刻意不写「评论」二字标题：参考站也是这样，
|
||||
靠计数和排序控件就能认出这是评论区，多一行标题只是噪音。 */
|
||||
/* 头部只放计数 + 排序。刻意不写「评论」二字标题：靠计数和排序控件
|
||||
就能认出这是评论区，多一行标题只是噪音。 */
|
||||
.cm-sec {margin-top: 28px;padding: 22px 26px 0;border-top: 1px solid var(--line);}
|
||||
.cm-head {display: flex;align-items: center;justify-content: space-between;
|
||||
gap: 12px;flex-wrap: wrap;margin-bottom: 20px;}
|
||||
gap: 12px;flex-wrap: wrap;margin-bottom: 24px;}
|
||||
.cm-count {font-size: 13px;font-weight: 600;color: var(--muted);
|
||||
font-variant-numeric: tabular-nums;}
|
||||
/* classic 下是一排文字钮；vivid 里这个元素还带 .seg，会被 pill 化 */
|
||||
.cm-sort {display: inline-flex;align-items: center;gap: 2px;}
|
||||
.cm-sort button {font-size: 13px;font-weight: 600;color: var(--muted);
|
||||
padding: 5px 10px;border: 0;border-radius: 999px;background: none;cursor: pointer;}
|
||||
padding: 5px 10px;border: 0;border-radius: 999px;background: none;cursor: pointer;
|
||||
transition: color .2s,background-color .2s;}
|
||||
.cm-sort button.on {color: var(--accent);background: var(--accent-soft);}
|
||||
|
||||
/* 未登录：登录引导卡 */
|
||||
.cm-gate {padding: 22px;border: 1px solid var(--line);border-radius: 12px;
|
||||
background: var(--card);text-align: center;}
|
||||
.cm-gate-skel {height: 104px;background: var(--paper-sunken);border-style: dashed;}
|
||||
.cm-gate-t {margin: 0 0 14px;font-size: 13px;color: var(--muted);}
|
||||
/* 未登录：不画卡片，一行引导 + 一排登录方式，直接落在纸面上 */
|
||||
.cm-gate {padding: 26px 0 4px;text-align: center;}
|
||||
.cm-gate-skel {height: 96px;background: var(--paper-sunken);border-radius: 12px;}
|
||||
.cm-gate-t {margin: 0 0 16px;font-size: 13px;color: var(--muted);}
|
||||
.cm-gate-hint {margin: 0;font-size: 13px;color: var(--muted);}
|
||||
.cm-providers {display: flex;justify-content: center;gap: 12px;
|
||||
.cm-providers {display: flex;justify-content: center;gap: 14px;
|
||||
margin: 0;padding: 0;list-style: none;}
|
||||
.cm-provider {display: grid;place-items: center;width: 40px;height: 40px;
|
||||
border: 1px solid var(--line);border-radius: 50%;background: var(--card);color: var(--ink);
|
||||
.cm-provider {display: grid;place-items: center;width: 42px;height: 42px;
|
||||
border: 1px solid var(--line);border-radius: 50%;background: none;color: var(--muted);
|
||||
cursor: pointer;transition: border-color .2s,color .2s;}
|
||||
.cm-provider:hover {border-color: var(--accent);color: var(--accent);}
|
||||
.cm-brand {width: 18px;height: 18px;fill: currentColor;}
|
||||
.cm-brand-t {font-size: 15px;font-weight: 700;}
|
||||
.cm-tg {margin-top: 12px;}
|
||||
.cm-tg {margin-top: 14px;}
|
||||
|
||||
/* 输入区 */
|
||||
/* 输入区：没有盒子，只有 textarea 底下的一条「书写线」，聚焦时变强调色。
|
||||
名字 / 计数 / 发送排在线下方，像在纸上落款。 */
|
||||
.cm-compose {display: flex;gap: 12px;align-items: flex-start;}
|
||||
.cm-av-me {width: 36px;height: 36px;}
|
||||
.cm-field {flex: 1;min-width: 0;overflow: hidden;
|
||||
border: 1px solid var(--line);border-radius: 12px;background: var(--card);}
|
||||
.cm-field:focus-within {border-color: var(--accent);}
|
||||
.cm-field-inline {margin-top: 10px;}
|
||||
.cm-field-tip {margin: 0;padding: 10px 12px 0;font-size: 13px;color: var(--muted);}
|
||||
.cm-input {display: block;width: 100%;min-height: 72px;padding: 10px 12px;
|
||||
border: 0;background: none;resize: vertical;
|
||||
font: inherit;font-size: 14px;line-height: 1.7;color: var(--ink);}
|
||||
.cm-field {flex: 1;min-width: 0;}
|
||||
.cm-field-inline {margin-top: 12px;}
|
||||
.cm-input {display: block;width: 100%;min-height: 68px;padding: 4px 0 10px;
|
||||
border: 0;border-bottom: 1px solid var(--line);background: none;resize: vertical;
|
||||
font: inherit;font-size: 14.5px;line-height: 1.75;color: var(--ink);
|
||||
transition: border-color .2s;}
|
||||
.cm-input:focus {outline: none;}
|
||||
.cm-field:focus-within .cm-input {border-bottom-color: var(--accent);}
|
||||
.cm-bar {display: flex;align-items: center;justify-content: space-between;gap: 10px;
|
||||
padding: 6px 10px;border-top: 1px solid var(--line-soft);
|
||||
font-size: 13px;color: var(--muted);}
|
||||
.cm-bar-l {min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
|
||||
.cm-bar-r {display: flex;flex: none;align-items: center;gap: 10px;}
|
||||
.cm-len {font-variant-numeric: tabular-nums;}
|
||||
padding: 8px 0 0;font-size: 12.5px;color: var(--muted);}
|
||||
.cm-bar-l {display: flex;align-items: center;gap: 8px;min-width: 0;
|
||||
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
|
||||
.cm-bar-l b {font-weight: 600;color: var(--ink-soft);}
|
||||
.cm-bar-r {display: flex;flex: none;align-items: center;gap: 12px;}
|
||||
.cm-len {font-size: 12px;font-variant-numeric: tabular-nums;}
|
||||
.cm-len.over {color: #a64953;}
|
||||
.cm-link {padding: 0;border: 0;background: none;color: var(--muted);
|
||||
font-size: 13px;cursor: pointer;}
|
||||
.cm-link {padding: 4px 2px;border: 0;background: none;color: var(--muted);
|
||||
font-size: 12.5px;cursor: pointer;transition: color .2s;}
|
||||
.cm-link:hover {color: var(--accent);}
|
||||
.cm-send {padding: 5px 14px;border: 0;border-radius: 999px;cursor: pointer;
|
||||
background: var(--accent);color: #fff;font-size: 13px;font-weight: 600;}
|
||||
.cm-send:disabled {opacity: .45;cursor: default;}
|
||||
.cm-send {padding: 6px 18px;border: 0;border-radius: 999px;cursor: pointer;
|
||||
background: var(--accent);color: #fff;font-size: 13px;font-weight: 600;
|
||||
transition: opacity .2s;}
|
||||
.cm-send:disabled {opacity: .4;cursor: default;}
|
||||
.cm-err {margin: 14px 0 0;font-size: 13px;color: #a64953;}
|
||||
|
||||
/* 列表 */
|
||||
.cm-list {display: flex;flex-direction: column;gap: 18px;
|
||||
margin: 22px 0 0;padding: 0;list-style: none;}
|
||||
/* 列表：条与条之间靠留白分隔，不画线不画盒 */
|
||||
.cm-list {display: flex;flex-direction: column;gap: 28px;
|
||||
margin: 26px 0 0;padding: 0;list-style: none;}
|
||||
.cm-item {display: flex;gap: 12px;align-items: flex-start;}
|
||||
.cm-av {position: relative;display: grid;place-items: center;flex: none;
|
||||
width: 36px;height: 36px;border-radius: 50%;
|
||||
background: var(--paper-sunken);color: var(--muted);
|
||||
font-size: 14px;font-weight: 700;
|
||||
box-shadow: 0 0 0 2px var(--paper);}
|
||||
font-size: 14px;font-weight: 700;}
|
||||
.cm-av img {display: block;width: 100%;height: 100%;border-radius: 50%;object-fit: cover;}
|
||||
.cm-av.is-owner {box-shadow: 0 0 0 2px var(--accent-soft);}
|
||||
/* 头像角上的登录方式小标 */
|
||||
.cm-pv {position: absolute;right: -2px;bottom: -2px;
|
||||
display: grid;place-items: center;width: 14px;height: 14px;border-radius: 50%;
|
||||
/* 头像角上的登录方式小标：回复的 26px 头像戴不下，只在顶层显示 */
|
||||
.cm-pv {position: absolute;right: -3px;bottom: -3px;
|
||||
display: grid;place-items: center;width: 15px;height: 15px;border-radius: 50%;
|
||||
background: var(--card);color: var(--muted);font-style: normal;
|
||||
box-shadow: 0 0 0 1.5px var(--line);}
|
||||
.cm-pv svg {width: 8px;height: 8px;fill: currentColor;}
|
||||
.cm-replies .cm-pv {display: none;}
|
||||
.cm-main {flex: 1;min-width: 0;}
|
||||
.cm-name {display: flex;align-items: center;gap: 8px;flex-wrap: wrap;margin-bottom: 6px;}
|
||||
.cm-name-a {font-size: 13.5px;font-weight: 600;color: var(--ink);}
|
||||
|
||||
/* 名字行：名字、徽标、时间共用一条基线 */
|
||||
.cm-name {display: flex;align-items: baseline;gap: 8px;flex-wrap: wrap;
|
||||
row-gap: 2px;margin-bottom: 6px;}
|
||||
.cm-name-a {font-size: 14px;font-weight: 600;color: var(--ink);}
|
||||
a.cm-name-a:hover {color: var(--accent);}
|
||||
.cm-owner {padding: 1px 6px;border-radius: 999px;background: var(--accent-soft);
|
||||
.cm-owner {padding: 1px 7px;border-radius: 999px;background: var(--accent-soft);
|
||||
color: var(--accent);font-size: 11px;font-weight: 600;}
|
||||
.cm-time {font-size: 11.5px;color: var(--muted);font-variant-numeric: tabular-nums;}
|
||||
.cm-pending {padding: 1px 6px;border-radius: 999px;background: var(--paper-sunken);
|
||||
.cm-time {font-size: 12px;color: var(--faint);font-variant-numeric: tabular-nums;}
|
||||
.cm-pending {padding: 1px 7px;border-radius: 999px;background: var(--paper-sunken);
|
||||
color: var(--muted);font-size: 11px;font-weight: 600;}
|
||||
.cm-edited-tip {font-size: 11px;color: var(--muted);opacity: .75;}
|
||||
.cm-edited-tip {font-size: 11.5px;color: var(--faint);}
|
||||
|
||||
/* 气泡：左上角不收圆（缺口朝头像），是这套评论的形状特征 */
|
||||
.cm-bubble {position: relative;display: inline-block;
|
||||
max-width: calc(100% - 3rem);padding: 8px 12px;
|
||||
border: 1px solid var(--line);border-radius: 12px;border-top-left-radius: 3px;
|
||||
background: var(--card);color: var(--ink);}
|
||||
.cm-item.is-reply .cm-bubble {border-top-left-radius: 12px;}
|
||||
.cm-item.is-deleted .cm-bubble {background: none;border-style: dashed;}
|
||||
.cm-gone {font-size: 13px;color: var(--muted);font-style: italic;}
|
||||
/* 正文：类名保留 .cm-bubble（DOM 不动），盒子拆掉 —— 和文章正文同一种「纸」。
|
||||
删除态不给盒子，靠变灰变斜认。 */
|
||||
.cm-bubble {display: block;padding: 0;border: 0;background: none;color: var(--ink);}
|
||||
.cm-item.is-deleted .cm-bubble {color: var(--muted);}
|
||||
.cm-gone {font-size: 13.5px;color: var(--muted);font-style: italic;}
|
||||
|
||||
/* 正文（走 CommentMarkdown，后端已渲染 + 前端 DOMPurify 再洗一遍） */
|
||||
.cm-md {font-size: 14px;line-height: 1.65;}
|
||||
/* 正文（走 CommentMarkdown，后端已渲染 + 前端 DOMPurify 再洗一遍）。
|
||||
@提及 和 .cm-md 共用字号行高：float 贴首行时两者行盒必须一样高，
|
||||
三处成对存在（基础 / 手机断点 / vivid），改字号要一起改。 */
|
||||
.cm-md, .cm-at {font-size: 14.5px;line-height: 1.75;}
|
||||
.cm-md {
|
||||
/* 评论是用户生成内容，长链接/长代码串必须在行宽内断行 */
|
||||
overflow-wrap: break-word;}
|
||||
/* 回复回复时的 @对方：浮在正文首行行首（和首字下沉同一个技巧），
|
||||
不占一整行；正文以代码块/列表开头时由 .cm-at-block 退成独立一行 */
|
||||
.cm-at {float: left;margin: 0 .45em 0 0;color: var(--accent);font-weight: 600;}
|
||||
.cm-at-block {float: none;margin: 0 0 4px;}
|
||||
.cm-md > :first-child {margin-top: 0;}
|
||||
.cm-md > :last-child {margin-bottom: 0;}
|
||||
.cm-md p {margin: 0 0 .6em;}
|
||||
@@ -1209,37 +1226,81 @@ a.cm-name-a:hover {color: var(--accent);}
|
||||
background: var(--paper-sunken);}
|
||||
.cm-md pre code {padding: 0;background: none;}
|
||||
.cm-md ul, .cm-md ol {margin: .5em 0;padding-left: 1.4em;}
|
||||
.cm-md blockquote {margin: .6em 0;padding-left: 10px;border-left: 2px solid var(--line);
|
||||
.cm-md blockquote {margin: .6em 0;padding-left: 12px;border-left: 2px solid var(--line);
|
||||
color: var(--muted);}
|
||||
.cm-md img {max-width: 100%;border-radius: 6px;}
|
||||
|
||||
/* 编辑 / 删除 / 回复：hover 或键盘聚焦才出现，触屏直接常显 */
|
||||
.cm-acts {position: absolute;right: 0;bottom: -10px;display: flex;gap: 4px;
|
||||
/* 操作：一行安静的文字钮（回复 / 编辑 / 删除）。桌面 hover 或键盘聚焦
|
||||
才浮现，位置预留、不跳版；触屏常显、加高可点面积。删除悬停给红。 */
|
||||
.cm-acts {display: flex;gap: 2px;margin-top: 2px;
|
||||
opacity: 0;transition: opacity .2s;}
|
||||
.cm-item:hover .cm-acts, .cm-item:focus-within .cm-acts {opacity: 1;}
|
||||
@media (hover: none) {
|
||||
.cm-acts {opacity: 1;}
|
||||
}
|
||||
.cm-act {display: grid;place-items: center;width: 24px;height: 24px;
|
||||
border: 1px solid var(--line);border-radius: 50%;background: var(--card);
|
||||
color: var(--muted);font-size: 12px;cursor: pointer;}
|
||||
.cm-act:hover {border-color: var(--accent);color: var(--accent);}
|
||||
.cm-act {padding: 5px 8px;border: 0;background: none;color: var(--muted);
|
||||
font-size: 12.5px;font-weight: 600;cursor: pointer;transition: color .2s;}
|
||||
.cm-act:first-child {margin-left: -8px;}
|
||||
.cm-act:hover {color: var(--accent);}
|
||||
.cm-act.is-danger:hover {color: #a64953;}
|
||||
/* 键盘可达：文字钮没有边框，聚焦环自己画（鼠标点击不触发 focus-visible） */
|
||||
.cm-act:focus-visible, .cm-link:focus-visible, .cm-more-r:focus-visible,
|
||||
.cm-sort button:focus-visible, .cm-provider:focus-visible {
|
||||
outline: 2px solid var(--accent-line);outline-offset: 2px;border-radius: 6px;}
|
||||
.cm-send:focus-visible {outline: 2px solid var(--accent-line);outline-offset: 2px;}
|
||||
|
||||
/* 回复只有一层，缩进 36px */
|
||||
.cm-replies {display: flex;flex-direction: column;gap: 14px;
|
||||
margin: 14px 0 0;padding: 0 0 0 36px;list-style: none;}
|
||||
.cm-replies .cm-av {width: 28px;height: 28px;font-size: 12px;}
|
||||
.cm-more-r {margin: 10px 0 0 36px;padding: 4px 12px;border: 1px solid var(--line);
|
||||
border-radius: 999px;background: none;color: var(--muted);font-size: 12px;cursor: pointer;}
|
||||
.cm-more-r:hover {border-color: var(--accent);color: var(--accent);}
|
||||
/* 回复：只有一层。左侧一条发丝线把回复串起来（和左栏时间线同一语言），
|
||||
线从第一条回复头顶到末条脚下，比空白缩进更有「同属一条」的指向。 */
|
||||
.cm-replies {display: flex;flex-direction: column;gap: 18px;
|
||||
margin: 14px 0 0;padding: 0 0 2px 18px;list-style: none;
|
||||
border-left: 1px solid var(--line);}
|
||||
.cm-replies .cm-av {width: 26px;height: 26px;font-size: 11.5px;}
|
||||
.cm-more-r {margin: 12px 0 0;padding: 5px 0;border: 0;background: none;
|
||||
color: var(--muted);font-size: 12.5px;font-weight: 600;cursor: pointer;
|
||||
transition: color .2s;}
|
||||
.cm-more-r:hover {color: var(--accent);}
|
||||
|
||||
/* 分页 / 空态 */
|
||||
.cm-more {display: flex;justify-content: center;margin-top: 22px;}
|
||||
.cm-empty {margin-top: 22px;}
|
||||
.cm-more {display: flex;justify-content: center;margin-top: 26px;}
|
||||
.cm-empty {margin-top: 26px;}
|
||||
|
||||
/* 骨架 */
|
||||
/* 骨架：和真实列表同一副骨架（头像 + 两行），落位一致才不闪 */
|
||||
.cm-skel-row {display: flex;gap: 12px;align-items: flex-start;}
|
||||
.cm-skel-av {flex: none;width: 36px;height: 36px;border-radius: 50%;background: var(--paper-sunken);}
|
||||
.cm-skel-lines {display: flex;flex: 1;flex-direction: column;gap: 8px;}
|
||||
.cm-skel-lines {display: flex;flex: 1;flex-direction: column;gap: 8px;padding-top: 3px;}
|
||||
.cm-skel-lines i {display: block;height: 12px;border-radius: 6px;background: var(--paper-sunken);}
|
||||
.cm-skel-lines i:last-child {width: 55%;}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
手机（≤640）：评论是纯阅读 + 触控场景 —— 缩头像、收紧缩进、
|
||||
可点目标加高、输入 16px 防 iOS 聚焦缩放。
|
||||
页边距与 .article-layout 的手机页边距（12px，见 mobile.css）对齐，
|
||||
正文和评论共用同一条左缘，头像离屏幕边 12px。
|
||||
-------------------------------------------------------------------------- */
|
||||
@media (max-width: 640px) {
|
||||
.cm-sec {padding: 20px 0 0;}
|
||||
.cm-head {margin-bottom: 18px;}
|
||||
.cm-list {gap: 22px;margin-top: 20px;}
|
||||
.cm-item {gap: 10px;}
|
||||
.cm-av, .cm-av-me {width: 28px;height: 28px;font-size: 12px;}
|
||||
.cm-name-a {font-size: 13.5px;}
|
||||
.cm-md, .cm-at {font-size: 14px;line-height: 1.7;}
|
||||
.cm-replies {padding-left: 14px;gap: 14px;}
|
||||
.cm-replies .cm-av {width: 24px;height: 24px;font-size: 10.5px;}
|
||||
.cm-act {padding: 8px 10px;}
|
||||
.cm-act:first-child {margin-left: -10px;}
|
||||
.cm-sort button {min-height: 44px;}
|
||||
.cm-provider {width: 44px;height: 44px;}
|
||||
.cm-compose {gap: 10px;}
|
||||
.cm-input {font-size: 16px;}
|
||||
.cm-send {padding: 9px 18px;}
|
||||
.cm-link {padding: 8px 2px;}
|
||||
}
|
||||
/* 触屏（可能是平板/桌面触屏，不限于窄屏）：可点目标给足 */
|
||||
@media (pointer: coarse) {
|
||||
.cm-provider {width: 44px;height: 44px;}
|
||||
.cm-act {padding: 8px 10px;}
|
||||
.cm-link {padding: 8px 2px;}
|
||||
.cm-more-r {padding: 10px 0;}
|
||||
.cm-input {font-size: 16px;}
|
||||
}
|
||||
Reference in New Issue
Block a user