wordpress-kratos-yang/assets/css/archives.css

/*!
 * 归档式文章列表（[Archives]）样式
 * Yongquan Yang <yangyq.net>
 *
 * ── 设计原则 ────────────────────────────────────────────────
 * 1. **它是导航，不是内容**：所以字号小一点、颜色退后一步，
 *    让文章标题成为这一屏唯一的主角。
 * 2. **色值一律带兜底**：`var(--ar-primary, #00a2ff)`。
 *    主题**没有**定义全站 CSS 变量（主色是各处硬编码的），
 *    照抄 var(--kratos-primary) 会静默失效、整块永远是默认灰。
 *    所以本文件自己定义一组 `--ar-*` 局部变量，挂在 `.yang-archives`
 *    作用域内，不污染全站；同时每个使用点都带兜底值。
 * 3. **与评论区的变量命名区分**：评论用 `--yq-*`，这里用 `--ar-*`。
 *    两套互不依赖，将来任一方改色都不会波及另一方。
 * 4. **不引入图标字体以外的东西**：三项计数用的 `i-hot`/`i-comments`/`i-good`
 *    是主题图标集里已有的三个（page-content.php 同款）。
 */

.yang-archives {
  /* 主色 / 文字三级 / 线 —— 与 comments.css 同一套取值，视觉统一 */
  --ar-primary: #00a2ff;
  --ar-primary-soft: #eaf6ff;
  /* 3.2.48：新增深主色 —— 导航按钮的默认字色要它。
   * 取值与 comments.css 的 --yq-primary-dark 完全一致，两处按钮才同色。 */
  --ar-primary-dark: #0089db;
  --ar-text: #33383f;
  --ar-text-2: #5b6470;
  --ar-text-3: #6b7280;
  --ar-line: #eaedf2;
  --ar-line-soft: #f1f4f8;
  --ar-radius: 4px;

  margin: 24px 0 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ar-text, #33383f);
}

/*--------------------------------------------------------------
1. 头部：年份 + 总数 + 上排导航
--------------------------------------------------------------*/

/* 头部一行：年份 + 共 x 篇 + 上排导航
 *
 * 🔴 3.2.48：`align-items` 从 center 改成 **flex-end（底边对齐）**。
 *
 * 用户原话：「后面的共x篇，的位置，有点不太好，太高了，比前面的2026
 * 还要高，让它降下来和2026，也就是年份的底边对齐」。
 *
 * 为什么 center 会出这个问题：年份 26px、总数 12.5px，两者行盒高度
 * 差 11px 以上，垂直居中后小字号的**顶部**会跑到年份顶部上面去 ——
 * 视觉上「共 15 篇」比「2026」还高，读起来像两个不相干的元素。
 * flex-end 让两者的底边贴同一条线，正是用户的描述。
 *
 * 为什么不用 baseline：baseline 对齐的是文字基线，12.5px 的字
 * 基线之上还有一半行高，底边仍会差几个像素，不满足"底边对齐"。
 *
 * ⚠️ flex-end 对齐的是 **margin box**，所以下面 .ar-year 的
 * margin 必须清零 —— kratos 的 `.article .content h3` 会给它
 * margin-bottom: 16px，不清掉的话"底边"会整体上浮 16px。 */
.yang-archives .ar-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ar-line, #eaedf2);
}

/* 🔴🔴 3.2.48 重要教训：这里的 font-size / font-weight 原来**从来没生效过**。
 *
 * 本文件写 22px/700，线上真实计算值是 **18px/500**（CDP
 * CSS.getMatchedStylesForNode 抓到的赢家是
 * `.k-main .details .article .content h3 { font-size: 18px }`，
 * 特异性 (0,4,1)）。本规则 `.yang-archives .ar-year` 只有 (0,2,0)，
 * 而且 kratos.min.css 在 archives.css **之前**入队也没用 ——
 * 层叠先比特异性，后比顺序。同一个坑还有 .ar-month-title：
 * 写 14px/600，实际 16px/500。
 *
 * 用户当时说的「年份字体再大一点」，前提是"现在就是 22px"，
 * 实际它一直是 18px。
 *
 * 修法不是继续加类名硬拼（.yang-archives .ar-year.ar-year 这种
 * 特异性 hack 会随模板层级变化再次失效），而是：
 *   ① 选择器带上 .k-main 前缀，把特异性提到 (0,5,0)，稳定压过 (0,4,1)；
 *   ② 同时写 font-weight，因为 h3 的 500 也来自同一条规则。
 * 判据不能只断言「CSS 文件里有 22px」——那种断言上面这段一直是通过的。
 * 必须断言**线上真实渲染的 computed font-size**，见 _live_geom18.js。 */
.yang-archives .ar-year,
.k-main .details .content .yang-archives .ar-year {
  /* margin 必须清零：kratos 的 `.article .content h3` 会给它
   * margin-bottom: 16px。底边对齐（align-items: flex-end）对的是
   * margin box，留着这 16px 会让年份整体上浮，"底边齐平"落空。
   * 实测线上 computed margin 曾经就是 `24px 0px 16px`。 */
  margin: 0;
  /* 用户要求「再大一点」：18px（实际生效值）→ 26px。
   * 26 而不是 24，是因为年份是这一屏的锚点，且它右侧还有个
   * 12.5px 的总数要形成明显对比。 */
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ar-text, #33383f);
  /* 等宽数字：切年时 2026 → 2025 两位都变，不等宽会左右跳一下 */
  font-variant-numeric: tabular-nums;
}

.yang-archives .ar-total {
  font-size: 12.5px;
  color: var(--ar-text-3, #6b7280);
  /* 底边对齐时，行盒底部自带一点留白（line-height 1.6 的 descent），
   * 微调 1px 让它与年份的数字底边视觉齐平，而不是与原文字盒齐平。 */
  line-height: 1.6;
  padding-bottom: 1px;
}

/*--------------------------------------------------------------
2. 四角导航
--------------------------------------------------------------*/

/* 上排靠右、下排靠右 —— 两侧按钮分居两端 */
.yang-archives .ar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-left: auto;
  min-width: 240px;
}

.yang-archives .ar-nav-top {
  /* 头部是 flex，导航自己靠右；窄屏会换行到标题下方 */
  margin-left: auto;
}

.yang-archives .ar-foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ar-line, #eaedf2);
}

.yang-archives .ar-foot .ar-nav {
  margin-left: 0;
  min-width: 0;
}

/* 上一年 / 下一年按钮
 *
 * 3.2.48：整套换成「写下你的评论」(.comments-jump-form) 的观感。
 * 用户原话：「上一年，下一年的按钮，看不清，样式和写下你的评论
 * 保持一致吧，就是平时是浅蓝色的框，鼠标悬停后是浅蓝色背景，白色字」。
 *
 * 原来是灰边框 var(--ar-line,#eaedf2) + 灰字 #5b6470，在白底上
 * 对比度只有 2.x:1，确实"看不清"。
 *
 * 具体取值与 comments.css 的 .comments-jump-form 逐项对齐：
 *   border   #cfe6fb        浅蓝细框（原 #eaedf2）
 *   color    var(--ar-primary-dark,#0089db)  深蓝字（原 #5b6470）
 *   hover    background var(--ar-primary,#00a2ff) + color #fff
 *            （原来是 primary-soft #eaf6ff 浅蓝底 + 蓝字）
 *
 * ⚠️ 禁用态（is-disabled）不能跟着 hover 变蓝 —— 它压根不可点。
 *    下面单独覆盖，且用 higher 特异性压住 hover 规则。 */
.yang-archives .ar-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid #cfe6fb;
  border-radius: var(--ar-radius, 4px);
  background-color: transparent;
  color: var(--ar-primary-dark, #0089db);
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.16s ease, color 0.16s ease, background-color 0.16s ease;
}

.yang-archives a.ar-nav-btn:hover {
  border-color: var(--ar-primary, #00a2ff);
  background-color: var(--ar-primary, #00a2ff);
  color: #fff;
  text-decoration: none;
}

/* 悬停时里面两段小字（年份、箭头）也跟着变白，否则会是灰字压蓝底 */
.yang-archives a.ar-nav-btn:hover .ar-nav-year,
.yang-archives a.ar-nav-btn:hover .ar-nav-arrow {
  color: #fff;
  opacity: 1;
}

.yang-archives a.ar-nav-btn:focus-visible {
  outline: 2px solid var(--ar-primary, #00a2ff);
  outline-offset: 2px;
}

.yang-archives .ar-nav-arrow {
  font-size: 11px;
  line-height: 1;
  opacity: 0.8;
}

.yang-archives .ar-nav-year {
  font-size: 12px;
  color: var(--ar-text-3, #6b7280);
  font-variant-numeric: tabular-nums;
}

/* 3.2.48：hover 变白的规则已合并到上面 .ar-nav-btn:hover 那一组
 * （原来只有 .ar-nav-year，箭头仍是灰色 opacity .8，蓝底上发灰）。
 * 这里只保留禁用态。 */

/* 禁用态：到最早/最新一年。用 opacity + 去掉交互，
 * 不用 display:none —— 按钮消失会让"上排只剩一个按钮"看着像坏了。
 *
 * ⚠️ 禁用态是 <span>，不是 <a>，所以上面 `a.ar-nav-btn:hover` 选不中它，
 *    不需要额外用 !important 去压。这一点在改样式时容易忽略：
 *    如果将来把禁用态也改成 <a>，就必须回来补一条覆盖。 */
.yang-archives .ar-nav-btn.is-disabled {
  opacity: 0.42;
  cursor: not-allowed;
  background-color: transparent;
  color: var(--ar-text-3, #6b7280);
}

/*--------------------------------------------------------------
3. 月份分组
--------------------------------------------------------------*/

.yang-archives .ar-month + .ar-month {
  margin-top: 18px;
}

/* 月份标题
 *
 * 🔴 与 .ar-year 同一个坑：`.k-main .details .article .content h4`
 *   （(0,4,1)）把本规则原写的 14px/600 全部压掉，线上实际是 16px/500。
 *   所以这里补一条带 .k-main 前缀的高特异性选择器。 */
.yang-archives .ar-month-title,
.k-main .details .content .yang-archives .ar-month-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 14px 0 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ar-text-2, #5b6470);
}

/* 月份标题左侧一小段主色竖线，作为分组视觉锚点 */
.yang-archives .ar-month-title::before {
  content: "";
  flex: 0 0 auto;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background-color: var(--ar-primary, #00a2ff);
}

.yang-archives .ar-month-count {
  padding: 0 6px;
  border-radius: 999px;
  background-color: var(--ar-line-soft, #f1f4f8);
  color: var(--ar-text-3, #6b7280);
  font-size: 11.5px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/*--------------------------------------------------------------
4. 条目
--------------------------------------------------------------*/

.yang-archives .ar-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.yang-archives .ar-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--ar-radius, 4px);
  /* 分隔用极浅的线，不抢视觉 */
  border-bottom: 1px solid var(--ar-line-soft, #f1f4f8);
}

.yang-archives .ar-item:last-child {
  border-bottom: 0;
}

.yang-archives .ar-item:hover {
  background-color: var(--ar-primary-soft, #eaf6ff);
}

.yang-archives .ar-date {
  flex: 0 0 auto;
  min-width: 44px;
  color: var(--ar-text-3, #6b7280);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.yang-archives .ar-title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ar-text, #33383f);
  text-decoration: none;
  /* 长标题单行截断：归档是"扫一眼找文章"，换行会把行距撑乱 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yang-archives .ar-title:hover {
  color: var(--ar-primary, #00a2ff);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.yang-archives .ar-item:hover .ar-title {
  color: var(--ar-primary, #00a2ff);
}

/*--------------------------------------------------------------
5. 三项计数
--------------------------------------------------------------*/

.yang-archives .ar-stats {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding-left: 10px;
}

.yang-archives .ar-stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--ar-text-3, #6b7280);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.yang-archives .ar-stat .kicon {
  font-size: 12px;
  line-height: 1;
}

/* 零值弱化：0 浏览 / 0 评论 / 0 赞占了相当多，一律同等强调会让
 * 计数列看起来全是"0 0 0"，反而看不出哪篇有热度。
 * 属性由 PHP 在渲染时按真实值打（见 yang_archives_render_item()）。 */
.yang-archives .ar-stat[data-zero="1"] {
  opacity: 0.45;
}

/*--------------------------------------------------------------
6. 空态
--------------------------------------------------------------*/

.yang-archives .ar-empty {
  margin: 20px 0 4px;
  padding: 18px 16px;
  border: 1px dashed #dfe5ec;
  border-radius: var(--ar-radius, 4px);
  color: var(--ar-text-3, #6b7280);
  font-size: 13.5px;
  text-align: center;
}

/*--------------------------------------------------------------
7. 切年时的过渡
--------------------------------------------------------------*/

/* 只做淡入，不做高度动画：
 * 高度动画需要先量 scrollHeight 再改 height，在长列表（一年 12 个月）
 * 上会强制同步布局，切年时有肉眼可见的卡顿。
 * 淡入用 CSS animation 而不是 JS 定时器，是为了让它自己结束、
 * 不留 pending 的 timeout（否则快速连点切年，几个 timeout 会交错）。 */
.yang-archives .ar-body.is-switching {
  animation: ar-fade 0.18s ease;
}

@keyframes ar-fade {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* 尊重系统的"减少动效"设置 */
@media (prefers-reduced-motion: reduce) {
  .yang-archives .ar-body.is-switching {
    animation: none;
  }
}

/*--------------------------------------------------------------
8. 窄屏
--------------------------------------------------------------*/

@media (max-width: 767.98px) {
  .yang-archives {
    font-size: 13.5px;
  }

  .yang-archives .ar-head {
    /* 窄屏下导航换到标题下方并且铺满，两个按钮各占一半。
     *
     * 🔴 3.2.48：这里原来写 align-items: baseline。改成 flex-end ——
     *    用户要求的是「共 x 篇与年份**底边**对齐」，而 baseline 对的
     *    是文字基线，小字号元素基线之上还有半行行高，底边仍会差几像素。
     *    窄屏如果还用 baseline，宽屏修好了、手机上又错回去，
     *    这种"只在大屏对"的 bug 最容易在验收时漏掉。
     *    （不需要保留 baseline：导航按钮在同一行时靠 flex 自己撑，
     *      换行后是独立一行，对齐方式对它没有影响。） */
    align-items: flex-end;
  }

  .yang-archives .ar-nav {
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }

  .yang-archives .ar-nav-btn {
    flex: 1 1 0;
    justify-content: center;
    padding: 7px 8px;
  }

  /* 窄屏隐藏计数图标，只留数字 —— 图标加数字在 320px 宽度下
   * 会把标题挤到只剩两三个字 */
  .yang-archives .ar-stat .kicon {
    display: none;
  }

  .yang-archives .ar-stats {
    gap: 8px;
    padding-left: 6px;
  }

  .yang-archives .ar-date {
    min-width: 40px;
    font-size: 12px;
  }
}

@media (max-width: 400px) {
  .yang-archives .ar-title {
    /* 极窄屏允许两行，否则标题只剩几个字完全看不出是哪篇 */
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .yang-archives .ar-item {
    /* 计数换到标题下一行，避免和标题抢宽度 */
    flex-wrap: wrap;
  }

  .yang-archives .ar-stats {
    width: 100%;
    margin-left: 0;
    padding-left: 50px;
  }
}