高仿 V2 自定义 CSS

/* ============================================================
 * 第 0 部分(可选):整体放大 110%,等价于 Chrome 缩放 110%
 * ------------------------------------------------------------
 * html { zoom } 是真正的整页缩放(布局/字号/图片全部按比例重排),
 * 效果与浏览器手动 Ctrl+放大 110% 一致。想改成 120% 就写 1.2。
 * 支持:Chrome / Edge / Safari 一直支持;Firefox 需 126+(2024-05)。
 */
html { zoom: 1.1; }
/* 老版 Firefox 兜底:没有 zoom 时,退化为"放大字号 + 拉宽容器"的近似,
 * 不需要可整段删除。 */
/* @supports not (zoom: 1.1) {
  html { font-size: 15.4px; }
  :root { --container: 1166px; --sidebar-w: 286px; --gap: 18px; }
  .post-avatar, .post-entry .post-avatar { width: 53px; height: 53px; }
  .bar { height: 48px; }
} */
:root {
  color-scheme: light;
  --bg: #e2e2e2;                    /* V2EX 页面灰 */
  --panel: #ffffff;                 /* 内容白盒 */
  --panel-alt: #f9f9f9;
  --panel-hover: #fafafa;
  --line: rgba(128,128,128,.228);   /* V2EX .cell 边框 */
  --line-soft: rgba(128,128,128,.14);
  --line-strong: #c0c0c0;
  --text-strong: #333333;
  --text: #333333;
  --text-muted: #999999;
  --text-subtle: #999999;
  --text-disabled: #cccccc;
  --brand: #778087;                 /* V2EX 链接色 */
  --brand-hover: #4d5256;
  --brand-soft: #f5f5f5;
  --brand-border: #cccccc;
  --focus-ring: #5897fb;
  --action: #ffffff;                /* 按钮:白底灰边 */
  --action-hover: #f5f5f5;
  --action-text: #333333;
  --action-border: #cccccc;
  --mark: #f5f5f5;
  --mark-deep: #e2e2e2;
  --mark-text: #666666;
  --mark-soft: #f9f9f9;
  --mark-soft-text: #999999;
  --success: #52bf1c;               /* V2EX 绿 */
  --success-soft: #f0f9e8;
  --success-soft-text: #438906;
  --danger: #be2626;
  --on-danger: #ffffff;
  --danger-fill: #be2626;
  --on-danger-fill: #ffffff;
  --danger-soft: #ffeeee;
  --danger-soft-text: #be2626;
  --danger-border: #e0c0c0;
  --warning: #8a6500;
  --warning-border: #e0c9a0;
  --warning-soft: #fff8e0;
  --warning-soft-text: #8a6500;
  --info: #1484cd;
  --info-soft: #eaf4fb;
  --info-soft-text: #1484cd;
  --inverse: #333333;
  --inverse-text: #ffffff;
  --inverse-border: #666666;
  --selection: rgba(88,151,251,.25);
  --shadow-base: 0 1px 2px rgb(0 0 0 / .06);
  --shadow-medium: 0 4px 14px rgb(0 0 0 / .12);
  --r-xs: 0px;                      /* 圆角全部收成 V2EX 的 3px/2px */
  --r-sm: 2px;
  --r-input: 2px;
  --r: 3px;
  --r-pill: 2px;
  --container: 1060px;              /* V2EX 内容宽约 1060px */
  --sidebar-w: 260px;
  --gap: 16px;
  --font-sans: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

/* 点顶部月亮按钮进入的"深色",也强制成同一套 V2EX 浅色 */
:root[data-theme="dark"] {
  color-scheme: light;
  --bg: #e2e2e2; --panel: #ffffff; --panel-alt: #f9f9f9; --panel-hover: #fafafa;
  --line: rgba(128,128,128,.228); --line-soft: rgba(128,128,128,.14); --line-strong: #c0c0c0;
  --text-strong: #333333; --text: #333333; --text-muted: #999999; --text-subtle: #999999; --text-disabled: #cccccc;
  --brand: #778087; --brand-hover: #4d5256; --brand-soft: #f5f5f5; --brand-border: #cccccc; --focus-ring: #5897fb;
  --action: #ffffff; --action-hover: #f5f5f5; --action-text: #333333; --action-border: #cccccc;
  --mark: #f5f5f5; --mark-deep: #e2e2e2; --mark-text: #666666; --mark-soft: #f9f9f9; --mark-soft-text: #999999;
  --success: #52bf1c; --success-soft: #f0f9e8; --success-soft-text: #438906;
  --danger: #be2626; --on-danger: #ffffff; --danger-fill: #be2626; --on-danger-fill: #ffffff;
  --danger-soft: #ffeeee; --danger-soft-text: #be2626; --danger-border: #e0c0c0;
  --warning: #8a6500; --warning-border: #e0c9a0; --warning-soft: #fff8e0; --warning-soft-text: #8a6500;
  --info: #1484cd; --info-soft: #eaf4fb; --info-soft-text: #1484cd;
  --inverse: #333333; --inverse-text: #ffffff; --inverse-border: #666666;
  --selection: rgba(88,151,251,.25);
  --shadow-base: 0 1px 2px rgb(0 0 0 / .06); --shadow-medium: 0 4px 14px rgb(0 0 0 / .12);
  --r-xs: 0px; --r-sm: 2px; --r-input: 2px; --r: 3px; --r-pill: 2px;
  --container: 1060px; --sidebar-w: 260px; --gap: 16px;
  --font-sans: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

/* 系统自动深色(未手动选过主题时)同样强制浅色 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: light;
    --bg: #e2e2e2; --panel: #ffffff; --panel-alt: #f9f9f9; --panel-hover: #fafafa;
    --line: rgba(128,128,128,.228); --line-soft: rgba(128,128,128,.14); --line-strong: #c0c0c0;
    --text-strong: #333333; --text: #333333; --text-muted: #999999; --text-subtle: #999999; --text-disabled: #cccccc;
    --brand: #778087; --brand-hover: #4d5256; --brand-soft: #f5f5f5; --brand-border: #cccccc; --focus-ring: #5897fb;
    --action: #ffffff; --action-hover: #f5f5f5; --action-text: #333333; --action-border: #cccccc;
    --mark: #f5f5f5; --mark-deep: #e2e2e2; --mark-text: #666666; --mark-soft: #f9f9f9; --mark-soft-text: #999999;
    --success: #52bf1c; --success-soft: #f0f9e8; --success-soft-text: #438906;
    --danger: #be2626; --on-danger: #ffffff; --danger-fill: #be2626; --on-danger-fill: #ffffff;
    --danger-soft: #ffeeee; --danger-soft-text: #be2626; --danger-border: #e0c0c0;
    --warning: #8a6500; --warning-border: #e0c9a0; --warning-soft: #fff8e0; --warning-soft-text: #8a6500;
    --info: #1484cd; --info-soft: #eaf4fb; --info-soft-text: #1484cd;
    --inverse: #333333; --inverse-text: #ffffff; --inverse-border: #666666;
    --selection: rgba(88,151,251,.25);
    --shadow-base: 0 1px 2px rgb(0 0 0 / .06); --shadow-medium: 0 4px 14px rgb(0 0 0 / .12);
    --r-xs: 0px; --r-sm: 2px; --r-input: 2px; --r: 3px; --r-pill: 2px;
    --container: 1060px; --sidebar-w: 260px; --gap: 16px;
    --font-sans: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB",
                 "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  }
}

/* ============================================================
 * 第 2 部分:结构细节(顶栏 / 列表 / 徽章 / 回帖页)
 * ============================================================ */
html { color-scheme: light !important; }
body { font-size: 14px; }

/* 顶栏:V2EX 白色 44px,下边框 1px rgba(0,0,0,.22) */
.top { background-color: #ffffff; border-bottom: 1px solid rgba(0, 0, 0, .22); }
.bar { height: 44px; padding: 0 20px; }

/* 站名:去黄底,做深蓝粗体字标;对勾不喜欢可删 */
a.brand {
  background: transparent !important;
  color: #262626 !important;   /* ← 与 V2EX 官方 logo 像素主色一致 */
  font-size: 18px; font-weight: 700; letter-spacing: -.02em; padding: 0;
}
a.brand:hover { background: transparent; color: #262626; }

/* 顶部版块:取消药丸,改细灰字 */
.forum-link { border-radius: 0; padding: 4px 10px; color: #778087; font-size: 14px; }
.forum-link:hover { background: #f5f5f5; color: #4d5256; }
.forum-link.active { background: #f5f5f5; color: #333333; font-weight: 600; }

/* 搜索框 */
.search-form { border: 1px solid #cccccc; border-radius: 2px; background: #ffffff; }
.search-form:focus-within { border-color: #5897fb; background: #ffffff; }
.search-input { font-size: 13px; }

/* 登录按钮 */
.nav-mine {
  border-radius: 2px; border: 1px solid #dddddd; background: #ffffff;
  color: #666666; font-size: 13px; padding: 4px 10px;
}
.nav-mine:hover { color: #333333; border-color: #c0c0c0; background: #f9f9f9; }

/* 卡片:3px 圆角 + V2EX .box 阴影 */
.card, .sidebar-card, .reply-panel, .post-list {
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
}
.topic-toolbar { border-radius: 3px 3px 0 0; }
.topic-opening { border-radius: 0 0 3px 3px; }

/* 按钮:白底灰边深灰字 */
button, .btn {
  border-radius: 2px; border: 1px solid #cccccc; background: #ffffff;
  color: #333333; box-shadow: 0 1px 0 rgba(66, 66, 77, .1);
}
button:hover, .btn:hover { background: #f9f9f9; border-color: #c0c0c0; color: #333333; }
button:active, .btn:active { background: #e2e2e2; }
.btn-post, .tab-post {
  border-radius: 2px; border: 1px solid #cccccc;
  background: #ffffff; color: #333333;
}
.btn-post:hover, .tab-post:hover { background: #f5f5f5; border-color: #c0c0c0; color: #333333; }

/* 输入框 */
input:not(.search-input)[type="text"],
input:not(.search-input)[type="email"],
input:not(.search-input)[type="password"],
input:not(.search-input)[type="search"],
textarea, select {
  border: 1px solid #cccccc; border-radius: 2px;
  background: #ffffff; color: #333333;
}
input:focus, textarea:focus, select:focus { border-color: #5897fb; outline: none; }

/* 主题列表:下行边框分隔,仿 V2EX .cell */
.post-item { border-top: 0; border-bottom: 1px solid rgba(128, 128, 128, .228); }
.post-item:hover { background: #fafafa; }

/* 头像 48px(列表 + 回帖) */
.post-avatar, .post-entry .post-avatar { width: 48px; height: 48px; }

/* 标题:V2EX 灰蓝 #778087 / hoover #4d5256 */
.post-title { color: #778087; font-size: 16px; font-weight: 400; line-height: 150%; }
.post-title:hover { color: #4d5256; text-decoration: underline; }

/* 元信息 */
.post-meta { color: #cccccc; font-size: 12px; }
.post-meta a { color: #999999; }
.post-meta a:hover { color: #4d5256; }

/* 版块徽章 → V2EX .node 灰色小方角标签 */
.post-forum-badge, .post-tag {
  border: none; background: #f5f5f5; color: #999999;
  border-radius: 2px; padding: 2px 5px; font-size: 12px; line-height: 1.4;
}
.post-forum-badge:hover, .post-tag:hover { background: #e2e2e2; color: #777777; }

/* 置顶/精华标签:灰底小方角 */
.topic-badge { border-radius: 2px; font-size: 11px; }
.topic-badge.pinned, .topic-badge.essence { background: #f5f5f5; color: #999999; }

/* 首页 tab 栏 */
.topic-toolbar { padding: 8px 14px; border-bottom: 0; }
.tab { color: #778087; font-size: 13px; }
.tab:hover { color: #4d5256; }
.tab.active { color: #333333; font-weight: 600; }

/* 侧栏 */
.quick-title, .stats-title, .new-users-title { color: #999999; font-size: 12.5px; font-weight: 600; }
.sidebar-topic-list a { color: #778087; }
.sidebar-topic-list a:hover .sidebar-topic-title { color: #4d5256; }
.sidebar-topic-count, .sidebar-topic-list.with-count a::before { color: #cccccc; }
.sidebar-topic-list.with-count li:nth-child(-n+3) a::before { color: #778087; }
.side-auth a { border-radius: 2px; }

/* 分页:灰色方按钮 */
.pagination a { border-radius: 0; border: 1px solid #dddddd; background: #ffffff; color: #778087; }
.pagination a:hover { border-color: #c0c0c0; color: #4d5256; }
.pagination li.active a { background: #f0f0f0; border-color: #dddddd; color: #333333; }

/* 主题详情 / 回帖 */
.breadcrumb { font-size: 12px; color: #999999; }
.breadcrumb a { color: #778087; }
.breadcrumb a:hover { color: #4d5256; }
.post-topic-title { padding: 12px 16px; }
.post-content-title { font-size: 18px; font-weight: 600; letter-spacing: 0; color: #333333; }
.post-content-stats { color: #999999; font-size: 12px; }
.post-head .post-title { font-size: 14px; font-weight: 400; }
.post-author { color: #778087; }
.post-author:hover { color: #4d5256; }
.post-user-level {
  background: #f5f5f5; color: #999999; border: none;
  border-radius: 2px; padding: 1px 6px; font-size: 11px;
}
.post-time { color: #cccccc; }
.post-reply-no { color: #cccccc; }
.post-reply-no:hover { color: #333333; }
.post-content { font-size: 14px; line-height: 1.7; }
.reply-head h2, .reply-head h3, .reply-panel-head h3 { color: #999999; font-size: 14px; font-weight: 600; }
.reply-panel-head { border-bottom: 1px solid rgba(128, 128, 128, .14); }

/* ============================================================
 * 第 3 部分:可选微调
 * ============================================================ */
/* ① 强行统一所有标题为 V2EX 灰(会盖掉置顶/公告的自定义彩色标题),不需要就删 */
/* .post-title { color: #778087 !important; }
   .post-title:hover { color: #4d5256 !important; } */

/* ② 窄屏收小头像与顶栏 */
@media (max-width: 720px) {
  .post-avatar, .post-entry .post-avatar { width: 40px; height: 40px; }
  .bar { height: 48px; padding: 0 12px; }
}