/* * 围炉 /fireside 页面样式 —— 仿微信朋友圈，自包含，不依赖主题变量。 * 所有类名以 fireside- 前缀避免冲突。 * 配色三态：html[data-fs-scheme] 由模板 内联脚本在首帧前写入 * （访客选择 > 站长默认）；auto 档由 prefers-color-scheme 驱动。 */ /* color-scheme 让滚动条、表单控件等原生部件跟随配色 */ html { color-scheme: light; } html[data-fs-scheme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { html:not([data-fs-scheme="light"]) { color-scheme: dark; } } /* ===== 布局 ===== */ /* 内置页面独占整页，body 背景由本样式负责； 页面主体是居中的白色窄栏（移动端通栏），仿朋友圈观感 */ body { margin: 0; background: #ededed; } .fireside-container { max-width: 560px; min-height: 100vh; margin: 0 auto; padding: 0 0 32px; /* 纵向 flex + 页脚 margin-top:auto：内容不足一屏时页脚贴底不留空洞 */ display: flex; flex-direction: column; background: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; font-size: 15px; line-height: 1.6; color: #1a1a1a; } /* ===== 封面区（仿朋友圈头部） ===== */ .fireside-cover { position: relative; /* 给右下角悬挂的头像留出下探空间 */ margin-bottom: 32px; } .fireside-cover-img { display: block; width: 100%; height: 280px; object-fit: cover; } /* 未配置封面图时的默认深色底 */ .fireside-cover-default { background: linear-gradient(135deg, #34435a 0%, #1d2735 60%, #141b26 100%); } /* 封面左上角返回首页（半透明圆底，悬浮在封面上） */ .fireside-home { position: absolute; top: 14px; left: 14px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(0, 0, 0, 0.28); color: #fff; transition: background 0.15s; } .fireside-home:hover { background: rgba(0, 0, 0, 0.45); } .fireside-home .fireside-icon { width: 16px; height: 16px; } .fireside-profile { position: absolute; right: 16px; bottom: -24px; display: flex; align-items: flex-end; gap: 14px; } .fireside-profile-name { margin-bottom: 34px; color: #fff; font-size: 17px; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); } .fireside-profile-avatar { width: 68px; height: 68px; border-radius: 10px; object-fit: cover; background: #ddd; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); } /* 站点未配置 Logo 时的首字符占位头像 */ .fireside-profile-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #5a7dab, #3c5578); } /* ===== 个人签名（封面下方，右对齐，仿朋友圈） ===== */ .fireside-signature { margin-top: -4px; padding: 0 16px 4px; text-align: right; color: #9b9b9b; font-size: 13px; } /* ===== 标签筛选：单行横向滑动（主流话题栏形态） ===== */ .fireside-tags { display: flex; flex-wrap: nowrap; gap: 8px; padding: 8px 16px 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; /* 隐藏滚动条：移动端触摸滑动，桌面端由 JS 把滚轮转为横向滚动 */ scrollbar-width: none; } .fireside-tags::-webkit-scrollbar { display: none; } .fireside-tag { flex-shrink: 0; white-space: nowrap; padding: 3px 12px; border-radius: 14px; font-size: 12px; color: #7f7f7f; text-decoration: none; background: #f2f2f2; transition: all 0.15s; } .fireside-tag:hover { background: #e6e6e6; color: #333; } .fireside-tag-active { background: #07c160; color: #fff; } .fireside-tag-active:hover { background: #06ad56; color: #fff; } .fireside-tag-count { margin-left: 2px; font-size: 10px; opacity: 0.7; } /* ===== 时间线条目（无卡片，细分隔线，仿朋友圈列表） ===== */ .fireside-card { padding: 16px 16px 14px; border-bottom: 1px solid #ececec; } .fireside-card:last-child { border-bottom: none; } /* ===== 条目头部：方形圆角头像 + 昵称 ===== */ .fireside-card-header { display: flex; gap: 12px; margin-bottom: 4px; } .fireside-avatar { width: 42px; height: 42px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: #f0f0f0; } /* 无头像时的首字占位（与封面头像占位同款观感） */ .fireside-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #5a7dab, #3c5578); } .fireside-avatar-fallback[hidden] { display: none; } .fireside-card-meta { flex: 1; min-width: 0; padding-top: 2px; } .fireside-card-author { display: flex; align-items: center; gap: 6px; } /* 朋友圈昵称蓝 */ .fireside-author-name { font-weight: 600; font-size: 15px; color: #576b95; } .fireside-author-link { color: #576b95; text-decoration: none; } .fireside-author-link:hover { opacity: 0.8; } .fireside-badge { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 4px; font-size: 11px; color: #999; background: #f5f5f5; line-height: 1.4; } /* 正文、图片、标签行、底部沿昵称缩进（头像宽 42 + 间距 12） */ .fireside-card-content, .fireside-media, .fireside-card-tags, .fireside-card-footer { margin-left: 54px; } /* 微信同款：正文紧贴昵称下方开始，头像下半截挨着首行 （头部块被 42px 头像撑高，用负边距把首个内容块拉上来） */ .fireside-card-header + .fireside-card-content, .fireside-card-header + .fireside-media, .fireside-card-header + .fireside-card-tags, .fireside-card-header + .fireside-card-footer { margin-top: -19px; } /* ===== 正文 ===== */ .fireside-card-content { margin-bottom: 8px; color: #1a1a1a; word-break: break-word; overflow-wrap: break-word; } .fireside-card-content p { margin: 0 0 8px; } .fireside-card-content p:last-child { margin-bottom: 0; } /* 正文富文本内嵌媒体：限制在内容区宽度内，防止源站原始尺寸溢出 */ .fireside-card-content img, .fireside-card-content video { max-width: 100%; height: auto; } .fireside-card-content iframe { max-width: 100%; } /* ===== 富链接卡片（仿朋友圈音乐/视频分享；真封面由 JS 调 link-detail 填充） ===== */ .fireside-rich-link { margin: 8px 0; max-width: 100%; border-radius: 4px; overflow: hidden; background: #f7f7f7; } .fireside-rich-link__anchor { display: flex; align-items: center; gap: 10px; padding: 8px; text-decoration: none; color: inherit; min-width: 0; } .fireside-rich-link__cover { flex: none; width: 56px; height: 56px; border-radius: 2px; object-fit: cover; background: #ebebeb; } .fireside-rich-link__meta { flex: 1; min-width: 0; } .fireside-rich-link__title { font-size: 14px; font-weight: 500; line-height: 1.35; color: #191919; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fireside-rich-link__sub { margin-top: 4px; font-size: 12px; line-height: 1.3; color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fireside-rich-link__badge { flex: none; width: 18px; height: 18px; margin-right: 2px; opacity: 0.45; background-repeat: no-repeat; background-position: center; background-size: 16px 16px; } /* 音乐：音符；视频：小三角；通用：链接环 */ .fireside-rich-link--music .fireside-rich-link__badge { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M12 3v10.55A4 4 0 1 0 14 17V7h4V3h-6z'/%3E%3C/svg%3E"); } .fireside-rich-link--video .fireside-rich-link__badge { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M8 5v14l11-7L8 5z'/%3E%3C/svg%3E"); } .fireside-rich-link--link .fireside-rich-link__badge { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); } .fireside-rich-link.is-loading .fireside-rich-link__cover { opacity: 0.85; } /* 正文内嵌标签由 fireside.js 清理（独立成段删除、混排保词去链）； 此规则仅作无 JS 环境的兜底隐藏 */ .fireside-card-content a.tag { display: none; } /* 混排标签清理后的行内 chip：无链接、不增删字符， 灰底圆角复用顶部标签栏的视觉语言；不用链接蓝，避免"可点"的错误暗示 */ .fireside-inline-tag { display: inline-block; margin: 0 1px; padding: 0 6px; border-radius: 4px; background: #f2f2f2; font-size: 14px; line-height: 1.5; color: #7f7f7f; } /* ===== 图片区（仿朋友圈小图网格） ===== */ .fireside-media { display: grid; gap: 5px; margin-bottom: 8px; /* 缩略图区不占满整行，与朋友圈一致 */ max-width: 340px; grid-template-columns: repeat(3, 1fr); } .fireside-media-item { display: block; border-radius: 4px; overflow: hidden; text-decoration: none; line-height: 0; } /* 图片加载三态（挂在 .fireside-media-item 上）： 默认加载中灰底 → .is-loaded 去底只留真图 → .is-failed 显示「加载失败」 */ .fireside-media-item:has(> img) { position: relative; background: #f5f5f5; } .fireside-media-item.is-loaded { background: transparent; } .fireside-media-item.is-failed { display: flex; align-items: center; justify-content: center; /* 单图失败时 img 已 absolute 脱流，需自带宽高，避免 fit-content 塌成 0 */ width: 100%; /* 失败态与加载占位同高（4:3 比例） */ aspect-ratio: 4 / 3; max-height: 300px; background: #f5f5f5; } /* 藏掉裂图图标，避免与失败文案叠在一起 */ .fireside-media-item.is-failed > img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } .fireside-media-item.is-failed::after { /* 用 \XXXX 转义，避免 CSS 被按非 UTF-8 解析时 content 中文乱码 */ content: "\52A0\8F7D\5931\8D25"; /* 加载失败 */ font-size: 13px; line-height: 1.4; color: #b2b2b2; } /* 单图：保持原比例；加载中先给最小高度让灰底可见，成功后收拢到图片宽 */ .fireside-media:not(:has(.fireside-media-item:nth-child(2))) { display: block; max-width: 240px; } .fireside-media-single { width: fit-content; } .fireside-media-single:has(> img):not(.is-loaded):not(.is-failed) { width: 100%; /* 加载占位：固定 4:3 比例，避免布局抖动；上限与最终 max-height 一致 */ aspect-ratio: 4 / 3; max-height: 300px; } .fireside-media-single img, .fireside-media-single video { max-width: 100%; max-height: 300px; width: auto; object-fit: cover; } .fireside-media-single audio { width: 100%; max-width: 280px; margin: 4px 0; } /* 多图：正方形缩略图；加载灰底由 item 承担，成功后 is-loaded 去掉 */ .fireside-media-grid { width: 100%; aspect-ratio: 1; } /* 多图失败：保持 1:1，覆盖通用 .is-failed 的单图 4:3，避免格子变矮 */ .fireside-media-grid.is-failed { aspect-ratio: 1; max-height: none; min-height: 0; } .fireside-media-grid img, .fireside-media-grid video { width: 100%; height: 100%; object-fit: cover; } .fireside-media-grid audio { width: 100%; height: 100%; } /* 恰好 4 图：2×2 田字格，与朋友圈一致 */ .fireside-media:has(.fireside-media-item:nth-child(4)):not(:has(.fireside-media-item:nth-child(5))) { grid-template-columns: repeat(2, 1fr); max-width: 227px; } /* ===== 条目底部：时间 + 标签 + 原文链接 ===== */ .fireside-card-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 2px; } .fireside-card-time { font-size: 12px; color: #b2b2b2; } /* 私密瞬间小锁（仿朋友圈时间旁）：与时间同色系，仅作者登录可见的场景 */ .fireside-private-lock { display: inline-flex; align-items: center; color: #b2b2b2; } .fireside-private-lock .fireside-icon { width: 13px; height: 13px; } /* 自身瞬间时间戳链去详情页；inline-flex 让链接盒紧贴内部 time， 避免链接按主题继承的更大字号撑出行框、把时间文字压得比标签低 */ .fireside-card-time-link { display: inline-flex; text-decoration: none; } .fireside-card-time-link:hover .fireside-card-time { color: #576b95; } .fireside-card-tags { display: flex; flex-wrap: wrap; gap: 6px; } /* 标签用链接蓝并加 # 前缀，与灰色时间明确区分 */ .fireside-card-tag { font-size: 12px; color: #576b95; text-decoration: none; } .fireside-card-tag::before { content: '#'; } .fireside-card-tag:hover { opacity: 0.8; } .fireside-source { margin-left: auto; font-size: 12px; color: #576b95; text-decoration: none; } .fireside-source:hover { opacity: 0.8; } /* ===== 互动：点赞 / 评论（仅自身瞬间） ===== */ .fireside-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; } .fireside-action { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: none; background: none; font-size: 12px; color: #576b95; cursor: pointer; transition: opacity 0.15s; } .fireside-action:hover { opacity: 0.75; } .fireside-icon { width: 15px; height: 15px; fill: currentColor; } /* 已点赞：空心/实心红心切换（微信红） */ .fireside-like .fireside-icon-heart-fill { display: none; } .fireside-like.fireside-liked { color: #e64340; cursor: default; } .fireside-like.fireside-liked .fireside-icon-heart { display: none; } .fireside-like.fireside-liked .fireside-icon-heart-fill { display: block; } /* 复制成功反馈：图标切换为文字提示 */ .fireside-copy.fireside-copied .fireside-icon { display: none; } .fireside-copy.fireside-copied::before { content: '✓ 已复制'; color: #07c160; } /* ===== 页脚 ===== */ .fireside-footer { /* flex 容器内推到底部（sticky footer） */ margin-top: auto; padding: 32px 16px 0; text-align: center; font-size: 12px; color: #b2b2b2; } .fireside-footer p { margin: 0 0 4px; } /* 页脚链接跟随页脚文字色（含深色两套选择器），hover 才出下划线 */ .fireside-footer a { color: inherit; text-decoration: none; } .fireside-footer a:hover { text-decoration: underline; } /* ===== 右下浮动列：白色胶囊分组（配色切换常驻在下、返回顶部滚动显隐在上） ===== 容器底部锚定，回顶部显隐时配色钮位置不动；圆角与卡片语言一致 */ .fireside-fabs { position: fixed; right: 16px; bottom: 40px; z-index: 10; display: flex; flex-direction: column; overflow: hidden; /* 圆角裁剪：让子元素 hover 背景自动贴合父容器圆角 */ border: 1px solid #ececec; border-radius: 12px; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } /* 组内两钮都不可见时整个胶囊隐藏（站长关切换且未滚动时） */ .fireside-fabs:not(:has(.fireside-fab:not(.fireside-fab-collapsed))) { display: none; } .fireside-fab { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; /* 清掉 button 默认内边距：否则回顶钮折叠(height:0)后仍被 padding 撑出 2px， 悬浮配色钮时顶部露白缝 */ padding: 0; border: none; background: none; color: #7f7f7f; cursor: pointer; transition: color 0.15s, background 0.15s; } /* 明/暗按钮（#fs-scheme）默认处理：上面直角，下面圆角； 回顶钮折叠后由容器 overflow:hidden 负责把 hover 背景裁成全圆角 */ #fs-scheme { border-radius: 0 0 12px 12px; } .fireside-fab:hover { background: #f7f7f7; color: #333; } .fireside-fab .fireside-icon { width: 17px; height: 17px; } /* 组内分隔线；随上一枚折叠而淡出 */ .fireside-fab + .fireside-fab { border-top: 1px solid #f0f0f0; transition: border-top-color 0.25s ease; } /* 回顶折叠后去掉分隔线占位（直接移除 border-top，避免 1px 空隙） */ #fs-top.fireside-fab-collapsed + .fireside-fab { border-top: none; } /* 回顶部：高度+透明度折叠缓动，替代 display 的瞬时显隐； visibility 延迟到动画结束再隐藏，防止折叠中仍可聚焦/点击。 flex 子项默认 min-height:auto 会按内容撑开，折叠时必须 min-height:0 才能真正收成 0，否则配色钮上方会留出一整格空白 */ #fs-top { overflow: hidden; flex: none; transition: height 0.25s ease, opacity 0.25s ease, color 0.15s, background 0.15s; } #fs-top.fireside-fab-collapsed { height: 0; min-height: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: height 0.25s ease, opacity 0.25s ease, color 0.15s, background 0.15s, visibility 0s 0.25s; } /* 配色三态图标：按 html[data-fs-scheme] 只显示对应一枚（默认自动） */ .fireside-scheme-sun, .fireside-scheme-moon { display: none; } html[data-fs-scheme="light"] .fireside-scheme-auto, html[data-fs-scheme="dark"] .fireside-scheme-auto { display: none; } html[data-fs-scheme="light"] .fireside-scheme-sun { display: block; } html[data-fs-scheme="dark"] .fireside-scheme-moon { display: block; } /* 桌面宽屏：浮动列吸附在内容栏右侧外缘 */ @media (min-width: 700px) { .fireside-fabs { right: calc(50% - 336px); } } /* ===== 评论预览（仿朋友圈灰底块，仅列表页自身瞬间）===== 整块可点进详情页；内容由 JS 进视口后填充，SSR 先出骨架高度 */ .fireside-comment-preview { position: relative; margin: 8px 0 0 54px; padding: 8px 10px; border-radius: 3px; background: #f7f7f7; font-size: 14px; line-height: 1.5; cursor: pointer; } /* 顶边小尖角：朋友圈同款位于左上 */ .fireside-comment-preview::before { content: ""; position: absolute; top: -5px; left: 12px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #f7f7f7; } .fireside-comment-preview:hover { background: #f0f0f0; } .fireside-comment-preview:hover::before { border-bottom-color: #f0f0f0; } /* 单条：昵称蓝不加粗 + 全角冒号 + 正文连排，换行不缩进 */ .fireside-comment-preview__line { margin: 0; color: #1a1a1a; word-break: break-word; overflow-wrap: break-word; } .fireside-comment-preview__line + .fireside-comment-preview__line { margin-top: 3px; } .fireside-comment-preview__name { color: #576b95; } /* 评论正文为消毒后 HTML：块级标签压成行内连排，段落间以小间距衔接 */ .fireside-comment-preview__text, .fireside-comment-preview__text p, .fireside-comment-preview__text pre, .fireside-comment-preview__text blockquote, .fireside-comment-preview__text ul, .fireside-comment-preview__text ol, .fireside-comment-preview__text li { display: inline; margin: 0; padding: 0; white-space: normal; font: inherit; } .fireside-comment-preview__text p + p, .fireside-comment-preview__text li + li { margin-left: 0.35em; } .fireside-comment-preview__text code { font-size: 13px; } /* 评论内图片（表情包/贴图）：对齐微信朋友圈评论表情——随文字行高走， 约一行字大小行内嵌排，不撑开灰底块行距 */ .fireside-comment-preview__text img { display: inline-block; vertical-align: text-bottom; max-height: 1.5em; max-width: 3em; width: auto; height: auto; border-radius: 2px; cursor: zoom-in; } .fireside-comment-preview__text a { color: #576b95; text-decoration: none; } .fireside-comment-preview__text a:hover { text-decoration: underline; } .fireside-comment-preview__more { display: block; margin-top: 5px; font-size: 13px; color: #576b95; text-decoration: none; } /* 评论按钮由 button 改为跳详情页的 a 后去下划线 */ a.fireside-action { text-decoration: none; } /* 评论区：随正文缩进（仅详情页仍内嵌官方评论组件，自带卡片样式不套底色） */ .fireside-comments { margin: 10px 0 0 54px; font-size: 14px; } /* ===== 详情页 ===== */ .fireside-detail-bar { position: relative; display: flex; align-items: center; padding: 14px 16px 6px; } .fireside-back { font-size: 14px; color: #576b95; text-decoration: none; } .fireside-back:hover { opacity: 0.8; } /* 居中页面标题（微信详情页样式） */ .fireside-detail-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 15px; font-weight: 600; color: #1a1a1a; } .fireside-detail-card { border-bottom: none; } .fireside-detail-comments { margin-top: 14px; } /* ===== 空态 ===== */ .fireside-empty { text-align: center; padding: 48px 0; color: #999; font-size: 15px; } /* ===== 分页 ===== */ .fireside-pager { display: flex; justify-content: center; gap: 16px; margin-top: 16px; } .fireside-pager a { padding: 8px 16px; border-radius: 6px; background: #f5f5f5; color: #666; text-decoration: none; } .fireside-pager a:hover { background: #ececec; color: #333; } /* ===== 发瞬间：封面入口 + 发布浮层 ===== */ /* 封面右上角相机（与左上返回首页同款半透明圆钮），权限探测通过前保持 hidden */ .fireside-compose-entry { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.28); color: #fff; cursor: pointer; } .fireside-compose-entry[hidden] { display: none; } .fireside-compose-entry:hover { background: rgba(0, 0, 0, 0.45); } .fireside-compose-entry .fireside-icon { width: 17px; height: 17px; } /* 浮层：半透明遮罩 + 居中卡片 */ .fireside-compose { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; } /* display:flex 会压过浏览器对 [hidden] 的默认隐藏，需显式声明 */ .fireside-compose[hidden] { display: none; } .fireside-compose-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); } .fireside-compose-panel { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 20px 24px; border-radius: 16px; background: #fff; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2); box-sizing: border-box; } /* 桌面拖文件悬于卡片上方的提示层（移动端无文件拖拽，不会出现）； pointer-events:none 保证不干扰下方的 dragenter/leave 计数 */ .fireside-compose-panel.is-dropping::after { content: '松开添加图片'; position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #576b95; background: rgba(255, 255, 255, 0.88); border: 2px dashed #576b95; border-radius: 16px; box-sizing: border-box; pointer-events: none; } /* 顶栏：桌面=对话框（标题居左 + 右上关闭）；移动端在媒体查询里切为微信发表页顶栏 */ .fireside-compose-head { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .fireside-compose-title { font-size: 16px; font-weight: 600; color: #1a1a1a; } /* 移动端专属元素：桌面默认隐藏，移动端媒体查询里恢复 */ .fireside-mobile-only { display: none; } .fireside-compose-cancel { padding: 4px 0; border: none; background: none; font: inherit; font-size: 15px; color: #7f7f7f; cursor: pointer; } .fireside-compose-cancel:hover { color: #333; } .fireside-compose-close { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: 50%; background: none; color: #999; cursor: pointer; } .fireside-compose-close:hover { background: #f5f5f5; color: #333; } .fireside-compose-close .fireside-icon { width: 15px; height: 15px; } /* 正文输入区：白底无框（微信发表页同款），分隔感交给下方设置行的细线 */ .fireside-compose-text { width: 100%; min-height: 96px; padding: 4px 0 10px; border: none; background: none; font: inherit; font-size: 15px; line-height: 1.6; color: #1a1a1a; resize: none; box-sizing: border-box; } .fireside-compose-text:focus { outline: none; } .fireside-compose-text::placeholder { color: #b2b2b2; } /* ===== Tiptap 编辑器（bundle 就绪后接替 textarea）：视觉与 textarea 对齐 ===== */ .fireside-compose-editor .ProseMirror { min-height: 96px; padding: 4px 0 10px; font-size: 15px; line-height: 1.6; color: #1a1a1a; outline: none; word-break: break-word; overflow-wrap: break-word; white-space: pre-wrap; } .fireside-compose-editor .ProseMirror p { margin: 0; } .fireside-compose-editor .ProseMirror p + p { margin-top: 0.4em; } .fireside-compose-editor .ProseMirror a { color: #576b95; } /* Placeholder 扩展的空态提示（对齐 textarea ::placeholder） */ .fireside-compose-editor .ProseMirror p.is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; height: 0; color: #b2b2b2; pointer-events: none; } /* 格式工具栏：紧凑三键（B / I / 链接） */ .fireside-compose-toolbar { display: flex; gap: 4px; padding-bottom: 6px; border-bottom: 1px solid #eef0f4; } .fireside-compose-toolbar[hidden] { display: none; } .fireside-compose-fmt { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px; padding: 0 8px; border: none; border-radius: 5px; background: none; font: inherit; font-size: 14px; line-height: 1; color: #444; cursor: pointer; } .fireside-compose-fmt:hover { background: #f2f3f5; } .fireside-compose-fmt.is-active { background: #e8edf5; color: #576b95; } .fireside-compose-fmt:disabled { opacity: 0.5; cursor: default; } .fireside-compose-fmt-sep { width: 1px; align-self: stretch; margin: 3px 4px; background: #eef0f4; } /* 正文行内代码（发布框新格式）：浅底等宽，列表/详情页共用 */ .fireside-card-content code { padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, 0.055); font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: 0.9em; } /* 链接输入行：URL + 可选显示文字 + 确定/取消 */ .fireside-compose-linkrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; } .fireside-compose-linkrow[hidden] { display: none; } .fireside-compose-link-input { flex: 1 1 140px; min-width: 0; padding: 5px 8px; border: 1px solid #dfe3ea; border-radius: 5px; background: #fff; font: inherit; font-size: 13px; color: #1a1a1a; } .fireside-compose-link-input:focus { outline: none; border-color: #576b95; } .fireside-compose-link-btn { padding: 5px 12px; border: none; border-radius: 5px; background: #576b95; color: #fff; font: inherit; font-size: 13px; cursor: pointer; } .fireside-compose-link-btn.is-quiet { background: #f2f3f5; color: #666; } /* 标签联想条：打 #xx 未完成时浮现，点选或 ↑↓+Enter 补全 */ .fireside-compose-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .fireside-compose-suggest[hidden] { display: none; } .fireside-compose-suggest-item { padding: 3px 10px; border: 1px solid #dfe3ea; border-radius: 999px; background: #fff; font: inherit; font-size: 13px; color: #576b95; cursor: pointer; } .fireside-compose-suggest-item:hover, .fireside-compose-suggest-item.is-active { border-color: #576b95; background: rgba(87, 107, 149, 0.08); } /* 图片九宫格：预览项由 JS 注入在添加按钮之前。 桌面对齐官方编辑器比例（小格左排不撑满），移动端媒体查询改回三等分 */ .fireside-compose-media { display: grid; grid-template-columns: repeat(3, 104px); justify-content: start; gap: 8px; margin-top: 12px; } .fireside-compose-item { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; background: #f5f5f5; cursor: grab; /* 纵向滚动留给浏览器（手指从图上划过仍可滚页），长按拖起后由 JS 接管 */ touch-action: pan-y; -webkit-user-select: none; user-select: none; } .fireside-compose-item img { display: block; width: 100%; height: 100%; object-fit: cover; /* 配合长按拖拽排序：禁掉 iOS 长按呼出的图片菜单与桌面原生图片拖拽 */ -webkit-touch-callout: none; -webkit-user-drag: none; } .fireside-compose-item.is-uploading img { opacity: 0.45; } .fireside-compose-item.is-uploading::after { content: '上传中…'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #666; } .fireside-compose-item.is-failed { outline: 2px solid #e64340; outline-offset: -2px; } .fireside-compose-item.is-failed::after { content: '上传失败'; position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0; text-align: center; font-size: 11px; color: #fff; background: rgba(230, 67, 64, 0.85); } /* 拖拽排序（仿微信朋友圈）：原格子降透明度占位，浮影脱离文档流跟手； 浮影必须 pointer-events:none，命中检测才能穿透到其下方的真实格子 */ .fireside-compose-item.is-dragging { opacity: 0.35; } .fireside-compose-ghost { position: fixed; z-index: 110; /* 压过发表浮层本体（z-index: 100） */ overflow: hidden; border-radius: 6px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); pointer-events: none; opacity: 0.92; } .fireside-compose-ghost img { display: block; width: 100%; height: 100%; object-fit: cover; } body.fireside-dragging { cursor: grabbing; -webkit-user-select: none; user-select: none; } .fireside-compose-remove { position: absolute; top: 4px; right: 4px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; } .fireside-compose-add { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border: 1px dashed #d9d9d9; border-radius: 6px; background: #fafafa; color: #b2b2b2; cursor: pointer; } .fireside-compose-add[hidden] { display: none; } /* 发表进行中被锁定的添加按钮/设置行 */ .fireside-compose-add:disabled, .fireside-compose-setting:disabled { opacity: 0.55; cursor: default; } .fireside-compose-add:hover { border-color: #b2b2b2; color: #7f7f7f; } .fireside-compose-add .fireside-icon { width: 22px; height: 22px; } /* 设置行（仿微信发表页列表行）：谁可以看 / 标签 */ .fireside-compose-setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 2px; border: none; border-top: 1px solid #f0f0f0; background: none; font: inherit; text-align: left; /* 标签行是 div（content-box），不显式声明会比面板宽出 padding， 触发面板横向滚动条并盖掉底部圆角 */ box-sizing: border-box; } #fs-compose-visible { margin-top: 14px; cursor: pointer; } .fireside-compose-setting-label { flex: none; font-size: 14px; color: #1a1a1a; } .fireside-compose-setting-value { font-size: 14px; color: #999; } /* 私密态：值高亮提醒 */ .fireside-compose-setting.is-private .fireside-compose-setting-value { color: #e6a23c; } /* 标签行：正文 #标签 的投影 chips，× 联动删除；空态给用法提示 */ .fireside-compose-tags { display: flex; flex: 1; min-width: 0; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .fireside-compose-tags-empty { font-size: 14px; color: #c0c0c0; } .fireside-compose-tag-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border-radius: 999px; background: rgba(87, 107, 149, 0.08); font-size: 13px; color: #576b95; } .fireside-compose-tag-remove { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: none; border-radius: 50%; background: none; color: #8a97b5; font-size: 12px; line-height: 1; cursor: pointer; } .fireside-compose-tag-remove:hover { background: rgba(87, 107, 149, 0.15); color: #576b95; } /* 提示行：默认红色错误，加 is-ok 转绿色成功 */ .fireside-compose-tip { margin: 10px 0 0; font-size: 13px; color: #e64340; } .fireside-compose-tip.is-ok { color: #07c160; } .fireside-compose-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; } .fireside-compose-uc { font-size: 12px; color: #b2b2b2; text-decoration: none; } .fireside-compose-uc:hover { color: #576b95; } /* 发表按钮（顶栏右侧）：微信绿 */ .fireside-compose-submit { padding: 6px 16px; border: none; border-radius: 6px; background: #07c160; color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; } .fireside-compose-submit:hover { background: #06ad56; } .fireside-compose-submit:disabled { opacity: 0.55; cursor: default; } /* ===== 暗色模式 ===== 两个入口共享同一套规则，修改时须同步： ① 自动档：系统为深色且未被强制为浅色（media + :not(light)） ② 强制深色档：html[data-fs-scheme="dark"] */ @media (prefers-color-scheme: dark) { html:not([data-fs-scheme="light"]) body { background: #000; } html:not([data-fs-scheme="light"]) .fireside-container { background: #111; color: #d5d5d5; } html:not([data-fs-scheme="light"]) .fireside-cover-default { background: linear-gradient(135deg, #232c3a 0%, #151b25 60%, #0d1118 100%); } html:not([data-fs-scheme="light"]) .fireside-profile-avatar { background: #2a2a2a; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); } html:not([data-fs-scheme="light"]) .fireside-signature { color: #6e6e6e; } html:not([data-fs-scheme="light"]) .fireside-tag { color: #8a8a8a; background: #1e1e1e; } html:not([data-fs-scheme="light"]) .fireside-tag:hover { background: #2a2a2a; color: #ccc; } html:not([data-fs-scheme="light"]) .fireside-tag-active { background: #07c160; color: #fff; } html:not([data-fs-scheme="light"]) .fireside-tag-active:hover { background: #06ad56; } html:not([data-fs-scheme="light"]) .fireside-card { border-bottom-color: #1f1f1f; } html:not([data-fs-scheme="light"]) .fireside-avatar { background: #1e1e1e; } html:not([data-fs-scheme="light"]) .fireside-author-name, html:not([data-fs-scheme="light"]) .fireside-author-link { color: #7d90a9; } html:not([data-fs-scheme="light"]) .fireside-badge { color: #777; background: #1e1e1e; } html:not([data-fs-scheme="light"]) .fireside-card-content { color: #d5d5d5; } html:not([data-fs-scheme="light"]) .fireside-rich-link { background: #1e1e1e; } html:not([data-fs-scheme="light"]) .fireside-rich-link__cover { background: #2a2a2a; } html:not([data-fs-scheme="light"]) .fireside-rich-link__title { color: #e8e8e8; } html:not([data-fs-scheme="light"]) .fireside-rich-link__sub { color: #8a8a8a; } html:not([data-fs-scheme="light"]) .fireside-inline-tag { background: #1e1e1e; color: #8a8a8a; } html:not([data-fs-scheme="light"]) .fireside-media-item:has(> img) { background: #1e1e1e; } html:not([data-fs-scheme="light"]) .fireside-media-item.is-loaded { background: transparent; } html:not([data-fs-scheme="light"]) .fireside-media-item.is-failed { background: #1e1e1e; } html:not([data-fs-scheme="light"]) .fireside-media-item.is-failed::after { color: #6e6e6e; } html:not([data-fs-scheme="light"]) .fireside-card-time { color: #6e6e6e; } html:not([data-fs-scheme="light"]) .fireside-private-lock { color: #6e6e6e; } html:not([data-fs-scheme="light"]) .fireside-card-tag { color: #7d90a9; } html:not([data-fs-scheme="light"]) .fireside-source { color: #7d90a9; } html:not([data-fs-scheme="light"]) .fireside-action { color: #7d90a9; } html:not([data-fs-scheme="light"]) .fireside-comment-preview { background: #1e1e1e; } html:not([data-fs-scheme="light"]) .fireside-comment-preview::before { border-bottom-color: #1e1e1e; } html:not([data-fs-scheme="light"]) .fireside-comment-preview:hover { background: #262626; } html:not([data-fs-scheme="light"]) .fireside-comment-preview:hover::before { border-bottom-color: #262626; } html:not([data-fs-scheme="light"]) .fireside-comment-preview__line { color: #d5d5d5; } html:not([data-fs-scheme="light"]) .fireside-comment-preview__name, html:not([data-fs-scheme="light"]) .fireside-comment-preview__more, html:not([data-fs-scheme="light"]) .fireside-comment-preview__text a { color: #7d90a9; } html:not([data-fs-scheme="light"]) .fireside-like.fireside-liked { color: #e64340; } html:not([data-fs-scheme="light"]) .fireside-back { color: #7d90a9; } html:not([data-fs-scheme="light"]) .fireside-detail-title { color: #d5d5d5; } html:not([data-fs-scheme="light"]) .fireside-fabs { border-color: #2a2a2a; background: #1e1e1e; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } html:not([data-fs-scheme="light"]) .fireside-fab { color: #8a8a8a; border-radius: 12px; } html:not([data-fs-scheme="light"]) .fireside-fabs > .fireside-fab:first-child:not(:last-child) { border-radius: 12px 12px 0 0; } html:not([data-fs-scheme="light"]) .fireside-fabs > .fireside-fab:last-child:not(:first-child) { border-radius: 0 0 12px 12px; } html:not([data-fs-scheme="light"]) .fireside-fab:hover { background: #2a2a2a; color: #e0e0e0; border-radius: inherit; } html:not([data-fs-scheme="light"]) .fireside-fab + .fireside-fab { border-top-color: #2a2a2a; } html:not([data-fs-scheme="light"]) .fireside-footer { color: #6e6e6e; } html:not([data-fs-scheme="light"]) .fireside-card-time-link:hover .fireside-card-time { color: #7d90a9; } html:not([data-fs-scheme="light"]) .fireside-empty { color: #666; } html:not([data-fs-scheme="light"]) .fireside-pager a { background: #1e1e1e; color: #8a8a8a; } html:not([data-fs-scheme="light"]) .fireside-pager a:hover { background: #2a2a2a; color: #d5d5d5; } html:not([data-fs-scheme="light"]) .fireside-compose-panel { background: #1c1c1c; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); } html:not([data-fs-scheme="light"]) .fireside-compose-panel.is-dropping::after { background: rgba(28, 28, 28, 0.88); color: #7d90ba; border-color: #7d90ba; } html:not([data-fs-scheme="light"]) .fireside-compose-title { color: #d5d5d5; } html:not([data-fs-scheme="light"]) .fireside-compose-cancel { color: #8a8a8a; } html:not([data-fs-scheme="light"]) .fireside-compose-cancel:hover { color: #ccc; } html:not([data-fs-scheme="light"]) .fireside-compose-close:hover { background: #2a2a2a; color: #ccc; } html:not([data-fs-scheme="light"]) .fireside-compose-text { color: #d5d5d5; } html:not([data-fs-scheme="light"]) .fireside-compose-text::placeholder { color: #555; } html:not([data-fs-scheme="light"]) .fireside-compose-editor .ProseMirror { color: #d5d5d5; } html:not([data-fs-scheme="light"]) .fireside-compose-editor .ProseMirror a { color: #7d90a9; } html:not([data-fs-scheme="light"]) .fireside-compose-editor .ProseMirror p.is-editor-empty:first-child::before { color: #555; } html:not([data-fs-scheme="light"]) .fireside-compose-toolbar { border-bottom-color: #2c2c2c; } html:not([data-fs-scheme="light"]) .fireside-compose-fmt-sep { background: #2c2c2c; } html:not([data-fs-scheme="light"]) .fireside-card-content code { background: rgba(255, 255, 255, 0.08); } html:not([data-fs-scheme="light"]) .fireside-compose-fmt { color: #aaa; } html:not([data-fs-scheme="light"]) .fireside-compose-fmt:hover { background: #262626; } html:not([data-fs-scheme="light"]) .fireside-compose-fmt.is-active { background: rgba(125, 144, 169, 0.15); color: #7d90a9; } html:not([data-fs-scheme="light"]) .fireside-compose-link-input { border-color: #3a3a3a; background: #1c1c1c; color: #d5d5d5; } html:not([data-fs-scheme="light"]) .fireside-compose-link-input:focus { border-color: #7d90a9; } html:not([data-fs-scheme="light"]) .fireside-compose-link-btn { background: #46587c; } html:not([data-fs-scheme="light"]) .fireside-compose-link-btn.is-quiet { background: #262626; color: #999; } html:not([data-fs-scheme="light"]) .fireside-compose-suggest-item { border-color: #3a3a3a; background: #1c1c1c; color: #7d90a9; } html:not([data-fs-scheme="light"]) .fireside-compose-suggest-item:hover, html:not([data-fs-scheme="light"]) .fireside-compose-suggest-item.is-active { border-color: #7d90a9; background: rgba(125, 144, 169, 0.12); } html:not([data-fs-scheme="light"]) .fireside-compose-setting { border-top-color: #2a2a2a; } html:not([data-fs-scheme="light"]) .fireside-compose-setting-label { color: #d5d5d5; } html:not([data-fs-scheme="light"]) .fireside-compose-setting-value { color: #8a8a8a; } html:not([data-fs-scheme="light"]) .fireside-compose-tags-empty { color: #555; } html:not([data-fs-scheme="light"]) .fireside-compose-tag-chip { background: rgba(125, 144, 169, 0.12); color: #7d90a9; } html:not([data-fs-scheme="light"]) .fireside-compose-tag-remove { color: #7d90a9; } html:not([data-fs-scheme="light"]) .fireside-compose-tag-remove:hover { background: rgba(125, 144, 169, 0.2); color: #a9b8cf; } html:not([data-fs-scheme="light"]) .fireside-compose-item { background: #1e1e1e; } html:not([data-fs-scheme="light"]) .fireside-compose-item.is-uploading::after { color: #aaa; } html:not([data-fs-scheme="light"]) .fireside-compose-add { border-color: #3a3a3a; background: #1e1e1e; color: #6e6e6e; } html:not([data-fs-scheme="light"]) .fireside-compose-add:hover { border-color: #555; color: #999; } html:not([data-fs-scheme="light"]) .fireside-compose-private { color: #8a8a8a; } } /* ② 强制深色档（与上方自动档规则一一对应，修改须同步） */ html[data-fs-scheme="dark"] body { background: #000; } html[data-fs-scheme="dark"] .fireside-container { background: #111; color: #d5d5d5; } html[data-fs-scheme="dark"] .fireside-cover-default { background: linear-gradient(135deg, #232c3a 0%, #151b25 60%, #0d1118 100%); } html[data-fs-scheme="dark"] .fireside-profile-avatar { background: #2a2a2a; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); } html[data-fs-scheme="dark"] .fireside-signature { color: #6e6e6e; } html[data-fs-scheme="dark"] .fireside-tag { color: #8a8a8a; background: #1e1e1e; } html[data-fs-scheme="dark"] .fireside-tag:hover { background: #2a2a2a; color: #ccc; } html[data-fs-scheme="dark"] .fireside-tag-active { background: #07c160; color: #fff; } html[data-fs-scheme="dark"] .fireside-tag-active:hover { background: #06ad56; } html[data-fs-scheme="dark"] .fireside-card { border-bottom-color: #1f1f1f; } html[data-fs-scheme="dark"] .fireside-avatar { background: #1e1e1e; } html[data-fs-scheme="dark"] .fireside-author-name, html[data-fs-scheme="dark"] .fireside-author-link { color: #7d90a9; } html[data-fs-scheme="dark"] .fireside-badge { color: #777; background: #1e1e1e; } html[data-fs-scheme="dark"] .fireside-card-content { color: #d5d5d5; } html[data-fs-scheme="dark"] .fireside-rich-link { background: #1e1e1e; } html[data-fs-scheme="dark"] .fireside-rich-link__cover { background: #2a2a2a; } html[data-fs-scheme="dark"] .fireside-rich-link__title { color: #e8e8e8; } html[data-fs-scheme="dark"] .fireside-rich-link__sub { color: #8a8a8a; } html[data-fs-scheme="dark"] .fireside-inline-tag { background: #1e1e1e; color: #8a8a8a; } html[data-fs-scheme="dark"] .fireside-media-item:has(> img) { background: #1e1e1e; } html[data-fs-scheme="dark"] .fireside-media-item.is-loaded { background: transparent; } html[data-fs-scheme="dark"] .fireside-media-item.is-failed { background: #1e1e1e; } html[data-fs-scheme="dark"] .fireside-media-item.is-failed::after { color: #6e6e6e; } html[data-fs-scheme="dark"] .fireside-card-time { color: #6e6e6e; } html[data-fs-scheme="dark"] .fireside-private-lock { color: #6e6e6e; } html[data-fs-scheme="dark"] .fireside-card-tag { color: #7d90a9; } html[data-fs-scheme="dark"] .fireside-source { color: #7d90a9; } html[data-fs-scheme="dark"] .fireside-action { color: #7d90a9; } html[data-fs-scheme="dark"] .fireside-comment-preview { background: #1e1e1e; } html[data-fs-scheme="dark"] .fireside-comment-preview::before { border-bottom-color: #1e1e1e; } html[data-fs-scheme="dark"] .fireside-comment-preview:hover { background: #262626; } html[data-fs-scheme="dark"] .fireside-comment-preview:hover::before { border-bottom-color: #262626; } html[data-fs-scheme="dark"] .fireside-comment-preview__line { color: #d5d5d5; } html[data-fs-scheme="dark"] .fireside-comment-preview__name, html[data-fs-scheme="dark"] .fireside-comment-preview__more, html[data-fs-scheme="dark"] .fireside-comment-preview__text a { color: #7d90a9; } html[data-fs-scheme="dark"] .fireside-like.fireside-liked { color: #e64340; } html[data-fs-scheme="dark"] .fireside-back { color: #7d90a9; } html[data-fs-scheme="dark"] .fireside-detail-title { color: #d5d5d5; } html[data-fs-scheme="dark"] .fireside-fabs { border-color: #2a2a2a; background: #1e1e1e; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } html[data-fs-scheme="dark"] .fireside-fab { color: #8a8a8a; } /* 明/暗按钮（#fs-scheme）默认处理：上面直角，下面圆角 */ html[data-fs-scheme="dark"] #fs-scheme { border-radius: 0 0 12px 12px; } /* 当明/暗按钮单独存在时（回到顶部按钮折叠后），四个角都圆 */ html[data-fs-scheme="dark"] .fireside-fabs > #fs-scheme:first-child { border-radius: 12px; } html[data-fs-scheme="dark"] .fireside-fab:hover { background: #2a2a2a; color: #e0e0e0; } html[data-fs-scheme="dark"] .fireside-fab + .fireside-fab { border-top-color: #2a2a2a; } html[data-fs-scheme="dark"] .fireside-footer { color: #6e6e6e; } html[data-fs-scheme="dark"] .fireside-card-time-link:hover .fireside-card-time { color: #7d90a9; } html[data-fs-scheme="dark"] .fireside-empty { color: #666; } html[data-fs-scheme="dark"] .fireside-pager a { background: #1e1e1e; color: #8a8a8a; } html[data-fs-scheme="dark"] .fireside-pager a:hover { background: #2a2a2a; color: #d5d5d5; } html[data-fs-scheme="dark"] .fireside-compose-panel { background: #1c1c1c; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); } html[data-fs-scheme="dark"] .fireside-compose-panel.is-dropping::after { background: rgba(28, 28, 28, 0.88); color: #7d90ba; border-color: #7d90ba; } html[data-fs-scheme="dark"] .fireside-compose-title { color: #d5d5d5; } html[data-fs-scheme="dark"] .fireside-compose-cancel { color: #8a8a8a; } html[data-fs-scheme="dark"] .fireside-compose-cancel:hover { color: #ccc; } html[data-fs-scheme="dark"] .fireside-compose-close:hover { background: #2a2a2a; color: #ccc; } html[data-fs-scheme="dark"] .fireside-compose-text { color: #d5d5d5; } html[data-fs-scheme="dark"] .fireside-compose-text::placeholder { color: #555; } html[data-fs-scheme="dark"] .fireside-compose-editor .ProseMirror { color: #d5d5d5; } html[data-fs-scheme="dark"] .fireside-compose-editor .ProseMirror a { color: #7d90a9; } html[data-fs-scheme="dark"] .fireside-compose-editor .ProseMirror p.is-editor-empty:first-child::before { color: #555; } html[data-fs-scheme="dark"] .fireside-compose-toolbar { border-bottom-color: #2c2c2c; } html[data-fs-scheme="dark"] .fireside-compose-fmt-sep { background: #2c2c2c; } html[data-fs-scheme="dark"] .fireside-card-content code { background: rgba(255, 255, 255, 0.08); } html[data-fs-scheme="dark"] .fireside-compose-fmt { color: #aaa; } html[data-fs-scheme="dark"] .fireside-compose-fmt:hover { background: #262626; } html[data-fs-scheme="dark"] .fireside-compose-fmt.is-active { background: rgba(125, 144, 169, 0.15); color: #7d90a9; } html[data-fs-scheme="dark"] .fireside-compose-link-input { border-color: #3a3a3a; background: #1c1c1c; color: #d5d5d5; } html[data-fs-scheme="dark"] .fireside-compose-link-input:focus { border-color: #7d90a9; } html[data-fs-scheme="dark"] .fireside-compose-link-btn { background: #46587c; } html[data-fs-scheme="dark"] .fireside-compose-link-btn.is-quiet { background: #262626; color: #999; } html[data-fs-scheme="dark"] .fireside-compose-suggest-item { border-color: #3a3a3a; background: #1c1c1c; color: #7d90a9; } html[data-fs-scheme="dark"] .fireside-compose-suggest-item:hover, html[data-fs-scheme="dark"] .fireside-compose-suggest-item.is-active { border-color: #7d90a9; background: rgba(125, 144, 169, 0.12); } html[data-fs-scheme="dark"] .fireside-compose-setting { border-top-color: #2a2a2a; } html[data-fs-scheme="dark"] .fireside-compose-setting-label { color: #d5d5d5; } html[data-fs-scheme="dark"] .fireside-compose-setting-value { color: #8a8a8a; } html[data-fs-scheme="dark"] .fireside-compose-tags-empty { color: #555; } html[data-fs-scheme="dark"] .fireside-compose-tag-chip { background: rgba(125, 144, 169, 0.12); color: #7d90a9; } html[data-fs-scheme="dark"] .fireside-compose-tag-remove { color: #7d90a9; } html[data-fs-scheme="dark"] .fireside-compose-tag-remove:hover { background: rgba(125, 144, 169, 0.2); color: #a9b8cf; } html[data-fs-scheme="dark"] .fireside-compose-item { background: #1e1e1e; } html[data-fs-scheme="dark"] .fireside-compose-item.is-uploading::after { color: #aaa; } html[data-fs-scheme="dark"] .fireside-compose-add { border-color: #3a3a3a; background: #1e1e1e; color: #6e6e6e; } html[data-fs-scheme="dark"] .fireside-compose-add:hover { border-color: #555; color: #999; } html[data-fs-scheme="dark"] .fireside-compose-private { color: #8a8a8a; } /* ===== 移动端 ===== */ @media (max-width: 640px) { .fireside-container { max-width: none; } .fireside-cover-img { height: 230px; } .fireside-profile-avatar { width: 60px; height: 60px; } .fireside-profile-name { margin-bottom: 30px; font-size: 16px; } .fireside-card { padding: 14px 12px 12px; } .fireside-media { max-width: 300px; } /* 发布浮层全屏化（仿微信发表页）：顶栏吸顶、正文放大 */ .fireside-compose { align-items: stretch; padding: 0; } .fireside-compose-panel { max-width: none; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; padding: 0 16px calc(16px + env(safe-area-inset-bottom)); } .fireside-compose-head { position: sticky; top: 0; z-index: 1; margin: 0 -16px 12px; padding: 12px 16px; /* 吸顶时用面板底色遮住滚过的内容，暗色模式自动跟随 */ background: inherit; } /* 移动端切回微信发表页顶栏：标题居中、取消/发表现身、桌面 × 隐藏 */ .fireside-compose-title { position: absolute; left: 50%; transform: translateX(-50%); } .fireside-mobile-only { display: inline-flex; align-items: center; } .fireside-desktop-only { display: none; } .fireside-compose-media { grid-template-columns: repeat(3, 1fr); } .fireside-compose-text { min-height: 30vh; } .fireside-compose-editor .ProseMirror { min-height: 30vh; } }