@charset "utf-8";
/* 前台分页公用样式
 * 适用场景：home 应用下所有使用 QsaPaginator（.env 的 [PAGINATE] type）渲染的分页
 * 用法：在需要分页的模板里引入 <link href="{:config('custom.cdn')}/home/css/page.css" rel="stylesheet">
 * 说明：
 *   1. 分页器输出结构为 <div class="page-box"><a>...</a></div>，
 *      当前页是 <a class="active" href="#">，禁用态（首页的上一页、末页的下一页、省略号）是 <a href="#">，
 *      因此用 a[href="#"] 匹配禁用态，并用 :not([href="#"]) 让可点击页码才响应 hover
 *   2. 主题色不写死，统一走 CSS 变量 --page-primary，默认取 panchao 主题的深红 #9b0000；
 *      var() 之前的同名字面量声明是不支持 CSS 变量的老浏览器（IE）回退
 *   3. 独立 css 文件不由模板引擎编译，改样式无需清理 runtime 编译缓存
 *
 * 换主题色的三种方式（优先级从低到高）：
 *   a. 主题级：在主题 css 里写 :root { --page-primary: #0a5a8a; --page-primary-shadow: rgba(10,90,138,.25); }
 *   b. 页面级：在页面 css 块里写 <style>:root { --page-primary: #0a5a8a; }</style>
 *   c. 局部级：给分页容器加行内变量 <div style="--page-primary:#0a5a8a">{$pages|raw}</div>
 */

.page-box {
  margin: 26px 0 6px;
  text-align: center;
  font-size: 0;
  line-height: 1;
}

.page-box a {
  display: inline-block;
  min-width: 34px;
  height: 34px;
  margin: 0 4px;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  background-color: #fff;
  color: #666;
  font-size: 14px;
  line-height: 32px;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

/* 禁用态：浅灰、不可点 */
.page-box a[href="#"] {
  border-color: #eee;
  background-color: #fafafa;
  color: #bbb;
  cursor: default;
}

/* 可点击页码悬停变主题色 */
.page-box a:not([href="#"]):hover {
  border-color: #9b0000;
  border-color: var(--page-primary, #9b0000);
  background-color: #9b0000;
  background-color: var(--page-primary, #9b0000);
  color: #fff;
}

/* 当前页：需写在禁用态之后，才能覆盖 a[href="#"] 的灰化 */
.page-box a.active {
  border-color: #9b0000;
  border-color: var(--page-primary, #9b0000);
  background-color: #9b0000;
  background-color: var(--page-primary, #9b0000);
  box-shadow: 0 2px 6px rgba(155, 0, 0, .25);
  box-shadow: 0 2px 6px var(--page-primary-shadow, rgba(155, 0, 0, .25));
  color: #fff;
  cursor: default;
}

/* 窄屏收窄按钮，避免挤行换行 */
@media (max-width: 640px) {
  .page-box a {
    min-width: 30px;
    height: 30px;
    margin: 0 2px;
    padding: 0 6px;
    font-size: 13px;
    line-height: 28px;
  }
}