/* ========== 1. 统一变量系统 ========== */ /* 用途：统一管理列表页常用值，修改一处全局生效 */ /* 作用域：:root（列表页全局根，归档/列表页专用） * 作用方向：尺寸（圆角固定值/间距 rem/弹窗定位 rem），与详情页/工作台变量系统分离 */ :root { /* ---- 圆角 - 固定值（不随字号缩放） ---- */ --radius-sm: 6px; /* 小圆角，用于卡片、按钮、标签 */ --radius-md: 8px; /* 中圆角（保留区分度） */ /* ---- 间距 - rem（随字号缩放） ---- */ /* 修改记录 2026-06-23：所有间距从 px 改为 rem */ --sp-xs: 0.25rem; /* 4px → 0.25rem */ --sp-sm: 0.5rem; /* 8px → 0.5rem */ --sp-md: 0.625rem; /* 10px → 0.625rem */ --sp-lg: 0.9375rem; /* 15px → 0.9375rem */ --sp-xl: 1.25rem; /* 20px → 1.25rem */ --sp-2xl: 1.875rem; /* 30px → 1.875rem */ --sp-3xl: 3.75rem; /* 60px → 3.75rem */ /* ---- 弹窗定位 - rem（随字号缩放） ---- */ /* 修改记录 2026-06-23：原 60px → 3.75rem，原 600px → 37.5rem */ --modal-top-offset: 3.75rem; --modal-max-width: 37.5rem; /* ---- 悬浮阴影 token（2026-08-31 立体感方案）---- * 纪律：半径≤12px、双层结构（贴地+环境）、仅框架与小元素使用，内容卡片禁用 */ --poetry-shadow-1: 0 1px 2px rgba(42, 30, 63, 0.06), 0 1px 3px rgba(42, 30, 63, 0.08); --poetry-shadow-2: 0 2px 4px rgba(42, 30, 63, 0.08), 0 4px 12px rgba(42, 30, 63, 0.14); } /* ========== 2. 列表页主题变量 ========== */ /* 所有主题变量使用颜色/阴影值，无单位问题 */ /* 作用域： / / 默认（无类） * 作用方向：颜色（卡片背景/标题/日期/评分/分隔线/无结果提示） * 隔离机制：列表页独立明暗模式，与详情页 .theme-* 主题系统分离 */ /* ---- 明亮/默认模式（base：body 同时覆盖 light-mode 与无类默认态） ---- */ /* 修改记录 2026-08-31：卡片背景 0.3→0.85（提升层次、弱化透出）；阴影收敛为小半径 token */ body { /* 卡片底色：主题联动（solid-bg 85% + accent 15%），随 5 主题变色且自带透明度透出背景 */ --archive-card-bg: color-mix(in srgb, var(--ui-solid-bg) 85%, var(--ui-accent)); --archive-card-bg-hover: color-mix(in srgb, var(--ui-solid-bg) 96%, var(--ui-accent)); --archive-shell-bg: rgba(255, 255, 255, 0.50); /* 列表壳：更透，背景透出 */ --archive-card-shadow: none; --archive-card-shadow-hover: none; --archive-title-color: #000000; --archive-date-color: #607d8b; --archive-pingfen-color: #e11d48; --archive-divider-color: #e2e8f0; --archive-no-result-color: #64748b; } /* ---- 黑暗模式 ---- */ body.dark-mode { --archive-card-bg: rgba(36, 41, 51, 0.72); --archive-card-bg-hover: rgba(45, 50, 64, 0.82); --archive-shell-bg: rgba(36, 41, 51, 0.55); --archive-card-shadow: none; --archive-card-shadow-hover: none; --archive-title-color: #e0e6ed; --archive-date-color: #94a3b8; --archive-pingfen-color: #f43f5e; --archive-divider-color: #334155; --archive-no-result-color: #94a3b8; } /* ========== 3. 列表页样式 ========== */ /* 作用域：ul.my-query-card / li.block-post / .poetry-pagination-wrapper / .poetry-no-result * （列表页卡片网格 + 分页 + 空状态） * 作用方向：布局（两列弹性换行网格）+ 颜色（卡片背景/阴影/主题变量）+ 动画（hover 过渡） */ /* ---- 两列卡片布局容器（框架壳：透明化让背景透出，唯一承载静止阴影） ---- */ ul.my-query-card { display: flex ; flex-wrap: wrap ; gap: var(--sp-md) ; /* 10px → 0.625rem */ width: 100% ; background-color: var(--archive-shell-bg) ; border: 1px solid var(--archive-divider-color) ; border-radius: var(--radius-sm) ; padding: 10px ; margin: 0; box-shadow: var(--poetry-shadow-1) ; } /* ---- 卡片（2026-08-31 灵动化重制）---- * 一卡一色：--dyn 朝代色（PHP 内联，回退 accent）/ --tagc 题材色 * 色条 + 印章 + 角花 + 题材 chip + 宣纸质感 * 动效纪律：仅 transform/opacity/color */ li.block-post{ width: calc(50% - 15px) ; /* 双列布局：50%基准含ul的padding(10*2)，减去gap(10)/2分摊到每列5px+自身padding修正 */ min-width: 0 ; position: relative ; background-color: var(--archive-card-bg) ; /* 宣纸质感：极淡纤维纹（静态 background 绘制一次，无动画开销） */ background-image: repeating-linear-gradient(0deg, rgba(120, 100, 80, 0.018) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(120, 100, 80, 0.014) 0 1px, transparent 1px 4px) ; border: 1px solid var(--ui-line) ; border-radius: var(--radius-sm) ; padding: 12px 12px 12px 18px ; /* 左侧加宽给朝代色条 */ margin: 0 ; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease ; overflow: hidden; display: flex ; flex-direction: column ; gap: 6px ; } /* ---- 朝代色条（左缘竖条：hover 加宽） ---- */ .bp-bar { position: absolute ; left: 0 ; top: 0 ; bottom: 0 ; width: 3px ; background: var(--dyn, var(--ui-accent)) ; transition: width 0.2s ease ; } /* ---- 头部：标题 + 评分印章 ---- */ .bp-head { display: flex ; align-items: flex-start ; justify-content: space-between ; gap: 8px ; } .bp-head .block-post-title { flex: 1 ; min-width: 0 ; } /* 标题墨笔下划线：hover 从左向右划出 */ .block-post-title a { background-image: linear-gradient(var(--dyn, var(--ui-accent)), var(--dyn, var(--ui-accent))) ; background-repeat: no-repeat ; background-size: 0% 1.5px ; background-position: 0 100% ; padding-bottom: 2px ; transition: background-size 0.25s ease ; } li.block-post:hover .block-post-title a { background-size: 100% 1.5px ; } /* ---- 评分印章：朝代色底 + 内高光 + 微倾（hover 转正） ---- */ .bp-seal { flex-shrink: 0 ; min-width: 34px ; height: 26px ; padding: 0 6px ; display: inline-flex ; align-items: center ; justify-content: center ; border-radius: 6px ; background: linear-gradient(160deg, color-mix(in srgb, var(--dyn, var(--ui-accent)) 88%, #fff), var(--dyn, var(--ui-accent))) ; color: #fff ; font-size: 0.8125rem ; font-weight: 700 ; letter-spacing: 0.02em ; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 3px color-mix(in srgb, var(--dyn, var(--ui-accent)) 40%, transparent) ; transform: rotate(2deg) ; transition: transform 0.25s cubic-bezier(0.34, 1.3, 0.64, 1) ; } li.block-post:hover .bp-seal { transform: rotate(0deg) ; } /* ---- 元信息行：朝代（朝代色）· 作者 · 体裁 chip ---- */ .block-post-date { display: flex ; align-items: center ; flex-wrap: wrap ; gap: 5px ; color: var(--archive-date-color) ; font-size: 0.875rem ; } .bp-dynasty { color: var(--dyn, var(--ui-accent)) ; font-weight: 650 ; } .bp-sep { opacity: 0.5 ; } .bp-genre { margin-left: auto ; font-size: 0.75rem ; padding: 1px 7px ; border-radius: 999px ; border: 1px solid var(--ui-glass-border, rgba(148, 163, 184, 0.35)) ; color: var(--archive-date-color) ; background: var(--ui-glass-bg, rgba(255, 255, 255, 0.4)) ; } /* ---- 题材标签 chip：题材色微染 ---- */ .bp-tag { align-self: flex-start ; font-size: 0.75rem ; padding: 1px 8px ; border-radius: 999px ; color: var(--tagc, var(--ui-accent)) ; background: color-mix(in srgb, var(--tagc, var(--ui-accent)) 10%, transparent) ; border: 1px solid color-mix(in srgb, var(--tagc, var(--ui-accent)) 22%, transparent) ; } /* ---- 角花（SVG 描边，默认线色，hover 鎏金浮现） ---- */ .bp-corner { position: absolute ; right: 4px ; bottom: 4px ; width: 34px ; height: 34px ; color: var(--ui-line, rgba(148, 163, 184, 0.4)) ; opacity: 0.7 ; transition: color 0.25s ease, opacity 0.25s ease, transform 0.25s ease ; pointer-events: none ; } li.block-post:hover .bp-corner { color: var(--ui-gold, #d8af51) ; opacity: 1 ; transform: scale(1.06) ; } /* ---- 卡片 hover：上浮 + 朝代色光晕（同色系呼应） ---- */ li.block-post:hover { background-color: var(--archive-card-bg-hover) ; border-color: color-mix(in srgb, var(--dyn, var(--ui-accent)) 55%, transparent) ; transform: translateY(-2px) ; box-shadow: 0 6px 18px color-mix(in srgb, var(--dyn, var(--ui-accent)) 22%, transparent) ; } /* ---- 卡片入场：已移除滚动触发淡入（用户偏好直接显示，无卡顿感） ---- */ /* ---- 骨架屏（AJAX 加载占位：opacity 脉冲，无 background 位移动画） ---- */ .poem-skeleton { width: calc(50% - 15px) ; min-width: 0 ; border: 1px solid var(--ui-line) ; border-radius: var(--radius-sm) ; padding: 12px 12px 12px 18px ; position: relative ; overflow: hidden ; animation: skPulse 1.1s ease-in-out infinite alternate ; } @keyframes skPulse { from { opacity: 0.45; } to { opacity: 0.9; } } .poem-skeleton::before { content: '' ; position: absolute ; left: 0 ; top: 0 ; bottom: 0 ; width: 3px ; background: var(--ui-line, rgba(148, 163, 184, 0.4)) ; } .sk-line { height: 12px ; border-radius: 6px ; background: color-mix(in srgb, var(--archive-date-color, #607d8b) 22%, transparent) ; } .sk-title { width: 62%; height: 15px; } .sk-meta { width: 44%; } .sk-tag { width: 28%; height: 10px; } /* ---- 今日一句：已移除 ---- */ /* ---- 滚动进度条（body 直挂 fixed，JS 控制 scaleX） ---- */ .poetry-scroll-progress { position: fixed ; top: 0 ; left: 150px ; /* 避开侧栏 */ right: 0 ; height: 2.5px ; z-index: 1200 ; background: linear-gradient(90deg, var(--ui-accent), var(--ui-gold, #d8af51)) ; transform: scaleX(0) ; transform-origin: 0 50% ; pointer-events: none ; } /* ---- 点击涟漪（JS 注入 span.ripple） ---- */ .ripple-host { position: relative ; overflow: hidden ; } span.ripple { position: absolute ; border-radius: 50% ; background: currentColor ; opacity: 0.25 ; transform: scale(0) ; animation: rippleGo 0.55s ease-out forwards ; pointer-events: none ; } @keyframes rippleGo { to { transform: scale(2.6); opacity: 0; } } /* ---- 动效降级：系统减 motion 时全部停用 ---- */ @media (prefers-reduced-motion: reduce) { /* 卡片直接可见（滚动触发淡入已移除） */ .poem-skeleton { animation: none; } span.ripple { animation: none; display: none; } li.block-post:hover { transform: none; } } /* ---- 分页容器 ---- */ /* 分页容器：顶部间距、居中 */ .poetry-pagination-wrapper { margin-top: var(--sp-2xl); /* 30px → 1.875rem */ text-align: center; } /* ---- 无结果提示 - 1rem（16px） ---- */ /* 空状态提示：居中、大间距、绑定无结果色 */ .poetry-no-result { text-align: center; padding: var(--sp-3xl) var(--sp-xl); /* 60px 20px → 3.75rem 1.25rem */ font-size: 16px; color: var(--archive-no-result-color); background: var(--archive-card-bg); border-radius: var(--radius-sm); /* 原 16px → 6px */ margin: var(--sp-xl) 0; /* 20px 0 → 1.25rem */ } /* ========== 4. 筛选区（列表页共享） ========== */ /* 修改记录 2026-06-23：移除 backdrop-filter 毛玻璃效果，border-radius 统一为 6px */ /* 作用域：.poetry-filter-box / .poetry-filter-row / .p-scroll-container / * .p-btn-all / .p-tag-item / .p-btn-more / .p-col-*（筛选按钮 + 横向滚动 + 辅助布局） * 作用方向：布局（粘性定位/横向滚动/蒙版渐隐）+ 颜色（按钮渐变激活态）+ 动画（hover/active 缩放） */ /* 筛选盒：flex 子项，不压缩 */ .poetry-filter-box { flex-shrink: 0; /* 视觉壳（背景/圆角）已分离至 content-ui-* */ padding: var(--sp-md); /* 12px → 0.75rem */ margin-bottom: var(--sp-md); } .poetry-filter-row { display: flex; align-items: center; gap: var(--sp-lg); /* 15px → 0.9375rem */ margin-bottom: var(--sp-xs); /* 5px → 0.3125rem */ position: relative; } /* 横向滚动容器：隐藏滚动条、触屏惯性滑动 */ .p-scroll-container { display: flex ; flex-wrap: nowrap ; align-items: center ; gap: var(--sp-lg); /* 15px → 0.9375rem */ overflow-x: auto ; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 0 ; position: relative; } /* ---- 按钮与标签 - 字体 0.875rem（14px） ---- */ /* 2026-08-31 三次升级：拟玻璃形态（主题玻璃底+backdrop blur+细边框），仅小元素启用防卡顿 */ .p-btn-all, .p-tag-item { border-radius: var(--radius-sm) ; /* 原 6px → 6px（保持不变） */ background: var(--ui-glass-bg) ; border: 1px solid var(--ui-glass-border) ; backdrop-filter: blur(10px) saturate(1.4) ; -webkit-backdrop-filter: blur(10px) saturate(1.4) ; font-size: 14px ; font-weight: 550; color: var(--ui-ink, #5a2dba) ; padding: 0.125rem var(--sp-sm) ; /* 2px 8px → 0.125rem 0.5rem */ margin: 0.125rem ; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease ; cursor: pointer; white-space: nowrap; display: inline-block; text-decoration: none ; } /* 悬浮态：上移 1px + 双层小阴影 + accent 描边浮现 */ .p-btn-all:hover, .p-tag-item:hover { transform: translateY(-1px) ; box-shadow: var(--poetry-shadow-2) ; border-color: var(--ui-accent) ; color: var(--ui-accent) ; } /* 激活态：主题渐变实底（不透明，保证可读）+ 内高光 + accent 光晕 */ .p-btn-all.is-active, .p-tag-item.is-current { background: var(--ui-grad-accent) ; border-color: transparent ; backdrop-filter: none ; -webkit-backdrop-filter: none ; color: #ffffff ; box-shadow: inset 0 1px 0 var(--ui-btn-hilight), 0 2px 8px color-mix(in srgb, var(--ui-accent) 35%, transparent) ; transform: translateY(-1px) ; } .p-btn-all.is-active:hover, .p-tag-item.is-current:hover { filter: brightness(1.08) ; } /* 「更多」按钮：accent 微染描边态 */ .p-btn-more { color: var(--ui-accent) ; background: var(--ui-accent-soft) ; border: 1px solid var(--ui-line) ; padding: 0.125rem var(--sp-sm) ; /* 2px 8px → 0.125rem 0.5rem */ border-radius: var(--radius-sm) ; /* 原 4px → 6px */ font-size: 0.875rem ; cursor: pointer; text-decoration: none ; transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease ; } .p-btn-more:hover { transform: translateY(-1px) ; box-shadow: var(--poetry-shadow-2) ; border-color: var(--ui-accent) ; } .p-btn-all:active, .p-tag-item:active, .p-btn-more:active { transform: translateY(0) ; box-shadow: var(--poetry-shadow-1) ; } /* ---- 辅助布局类 - 宽度使用 px（固定布局，不随字体缩放） ---- */ .p-col-label { flex-shrink: 0; font-weight: bold; color: #475569; } /* 「全部」按钮列：不收缩 */ .p-col-all { flex-shrink: 0; } /* 主滚动列：撑满剩余、左右蒙版渐隐 */ .p-col-main { flex-grow: 1; overflow: hidden; position: relative; /* 通过蒙版实现左右两端渐变消失效果 */ -webkit-mask-image: linear-gradient( to right, transparent, black 5px, black calc(100% - 5px), transparent ); mask-image: linear-gradient( to right, transparent, black 5px, black calc(100% - 5px), transparent ); } /* 「更多」按钮列：不收缩、右对齐 */ .p-col-more { flex-shrink: 0; text-align: right; } /* ========== 5. 弹窗 Modal 样式 ========== */ /* 作用域：.p-modal / .p-modal-content / .p-modal-tabs / .p-grid-item / .modal-tag-group / * body.ps-locked（列表页筛选弹窗 + 全局锁定态） * 作用方向：布局（fixed 全屏遮罩/居中/网格）+ 颜色（明暗模式弹窗变量）+ 交互（标签切换/锁定滚动） */ /* ---- 弹窗变量 - 颜色/背景相关 ---- */ /* 2026-08-31 重制：壳为 content-ui-2 主题实色（浅壳/深壳随主题），内部元素配色同步适配双套 */ body { --modal-overlay: rgba(42, 30, 63, 0.45); --modal-tab-color: #64748b; --modal-tab-active-border: var(--ui-accent); --modal-grid-item-bg: rgba(15, 23, 42, 0.045); --modal-grid-item-color: #475569; --modal-grid-item-hover-bg: var(--ui-accent-soft); --modal-grid-item-current-bg: var(--ui-accent); --modal-divider: var(--ui-line); } body.dark-mode { --modal-overlay: rgba(0, 0, 0, 0.6); --modal-tab-color: #94a3b8; --modal-grid-item-bg: rgba(255, 255, 255, 0.07); --modal-grid-item-color: #cbd5e1; --modal-grid-item-hover-bg: rgba(255, 255, 255, 0.15); --modal-divider: rgba(255, 255, 255, 0.12); } /* ---- 弹窗遮罩 ---- */ /* 修改记录 2026-06-23：移除 backdrop-filter 毛玻璃效果 */ .p-modal { position: fixed ; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999; /* 视觉壳（遮罩背景）已分离至 overlay-ui-* */ display: none; align-items: center; justify-content: center; } /* ---- 弹窗内容 ---- */ /* 2026-08-31：修复 .poetry-filter-box{top:0} 误伤弹窗定位；浮层双层阴影；打开动画 */ .p-modal-content { position: absolute; top: var(--modal-top-offset); /* 原 60px → 3.75rem */ left: 50%; transform: translateX(-50%); width: 90%; max-width: var(--modal-max-width); /* 原 600px → 37.5rem */ max-height: 80vh; overflow-y: auto; /* 视觉壳（背景/圆角）已分离至 content-ui-* */ padding: var(--sp-xl); /* 20px → 1.25rem */ animation: poetryModalIn 0.24s cubic-bezier(0.34, 1.3, 0.64, 1) ; } /* 高特异性恢复悬浮定位（.poetry-filter-box 的 top:0 在本文件后方误伤弹窗） */ #poetry-modal .p-modal-content { top: var(--modal-top-offset) ; flex-shrink: 1 ; } /* 浮层阴影：双层小半径（贴地+环境），覆盖 content-ui-2 的通用壳阴影 */ #poetry-modal .p-modal-content.content-ui-2 { box-shadow: 0 2px 6px rgba(42, 30, 63, 0.10), 0 12px 32px rgba(42, 30, 63, 0.16) !important ; } /* 打开动画：上浮 + 轻微缩放 */ @keyframes poetryModalIn { from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.97); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } /* 弹窗滚动条：细条 accent 微染 */ .p-modal-content::-webkit-scrollbar { width: 6px; } .p-modal-content::-webkit-scrollbar-track { background: transparent; } .p-modal-content::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ui-accent, #9b6bff) 25%, transparent); border-radius: 3px; } .p-modal-content { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ui-accent, #9b6bff) 25%, transparent) transparent; } /* ---- 弹窗头部分隔线：accent 微染（适配浅/深壳） ---- */ .p-modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--modal-divider); padding-bottom: var(--sp-lg); /* 15px → 0.9375rem */ margin-bottom: var(--sp-xl); /* 20px → 1.25rem */ } /* ---- 弹窗标签页 - 字体 0.9375rem（15px） ---- */ /* 2026-08-31：字距/悬浮态/accent 下划线圆角 */ .p-modal-tabs .tab-item { color: var(--modal-tab-color); margin-right: var(--sp-xl); /* 20px → 1.25rem */ cursor: pointer; font-size: 0.9375rem; font-weight: 550; letter-spacing: 0.02em; padding-bottom: 4px; border-bottom: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease ; } .p-modal-tabs .tab-item:hover { color: var(--ui-accent, #9b6bff) ; } /* 当前激活标签：accent 下划线（占位防跳动） */ .p-modal-tabs .tab-item.active { color: var(--ui-accent, #9b6bff) ; border-bottom-color: var(--modal-tab-active-border); } /* 关闭按钮：圆形热区 + 悬浮 accent 微染 + 轻旋 */ .p-modal-close { font-size: var(--sp-xl); /* 20px → 1.25rem */ line-height: 1; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; color: var(--modal-tab-color); transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease ; } .p-modal-close:hover { color: var(--ui-accent); background: var(--ui-accent-soft); transform: rotate(90deg); } /* 弹窗主体：无内边距（由内部网格控制） */ .p-modal-body { padding: 0; } /* ---- 弹窗网格选项 - 字体 0.875rem（14px） ---- */ /* 2026-08-31：常驻透明边框防跳动；悬浮 accent 微染+上浮+小阴影；transition 定向 */ .p-grid-item { background: var(--modal-grid-item-bg); color: var(--modal-grid-item-color); text-align: center; padding: var(--sp-md) var(--sp-sm); /* 12px 5px → 12px 8px（对称内边距） */ border: 1px solid transparent; border-radius: var(--radius-sm); /* 原 4px → 6px */ text-decoration: none; font-size: 0.875rem; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; display: inline-block; } .p-grid-item:hover { background: var(--modal-grid-item-hover-bg); border-color: var(--ui-line); color: var(--ui-accent); transform: translateY(-1px); box-shadow: var(--poetry-shadow-2); } .p-grid-item:active { transform: translateY(0); box-shadow: var(--poetry-shadow-1); } /* 当前选中网格项：主题渐变 + 内高光 + accent 光晕 */ .p-grid-item.is-current { background: var(--ui-grad-accent) ; border-color: transparent ; color: #fff ; box-shadow: inset 0 1px 0 var(--ui-btn-hilight), 0 2px 8px color-mix(in srgb, var(--ui-accent) 35%, transparent) ; } /* ---- 标签分组 ---- */ /* 2026-08-31：分组头 accent 化（覆盖 blade 内联浅灰底）；虚线 accent 微染（覆盖内联） */ .modal-tag-group { margin-bottom: var(--sp-2xl); /* 18px → 1.125rem */ text-align: left; border-bottom: 1px dashed var(--ui-line) !important ; padding-bottom: var(--sp-md) ; /* 10px → 0.625rem */ } /* 分组头（每组首个「全列筛选」项，blade 内联 background:#f1f5f9）：accent 微染 + 左条 */ .modal-tag-group > div > .p-grid-item { background: var(--ui-accent-soft) !important ; color: var(--ui-accent) !important ; box-shadow: inset 3px 0 0 var(--ui-accent) ; border-radius: 0 var(--radius-sm) var(--radius-sm) 0 ; padding-left: var(--sp-sm) ; text-align: left ; } .modal-tag-group > div > .p-grid-item:hover { transform: none ; box-shadow: inset 3px 0 0 var(--ui-accent), var(--poetry-shadow-2) ; } .modal-tag-group > div > .p-grid-item.is-current { background: var(--ui-grad-accent) !important ; color: #fff !important ; box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.5), 0 2px 8px color-mix(in srgb, var(--ui-accent) 35%, transparent) ; } /* 网格容器：弹性换行、小间距 */ .p-modal-body .p-grid-container { display: flex; flex-wrap: wrap; gap: var(--sp-sm); /* 8px → 0.5rem */ } /* ---- 全局锁定 ---- */ /* 锁定滚动（弹窗打开时加 .ps-locked 到 body） */ .ps-locked { overflow: hidden; } /* 锁定时 body 底色随主题微染（旧深紫渐变与新浅色弹窗壳冲突，2026-08-31 调整） */ body.ps-locked { background: color-mix(in srgb, var(--ui-accent, #9b6bff) 3%, var(--ui-solid-bg, #fdfbf7)) ; background-attachment: fixed ; } /* 锁定时取消 #page 毛玻璃与底色 */ body.ps-locked #page { backdrop-filter: none ; background-color: transparent ; } /* ========== 6. 响应式适配 ========== */ /* 作用域：.p-modal-content / .p-modal-tabs .tab-item / .p-grid-item（弹窗移动端适配） * 作用方向：响应式布局（弹窗宽度 95%）+ 字号（标签/选项字号缩小） * 断点：max-width: 768px（移动端 / 平板竖屏 / 小屏设备） */ @media (max-width: 768px) { .p-modal-content { width: 95%; } /* 移动端弹窗标签字体 */ .p-modal-tabs .tab-item { font-size: 1rem; } /* 移动端弹窗选项字体 */ .p-grid-item { font-size: 0.8125rem; padding: var(--sp-md) var(--sp-xs); /* 10px 4px → 0.625rem 0.25rem */ } } .poetry-filter-box{ top: 0; flex-shrink: 0; /* 筛选区不压缩，按内容高度自适应 */ } /* 列表页 UI 大标题 */ .poetry-ui-header { font-size: 26px; text-align: center; } /* 列表包裹器：flex:1 撑满剩余空间，独立滚动 */ #poetry-list-wrapper { flex: 1; min-height: 0; /* flex 子项滚动必须 min-height:0 */ border-radius: var(--radius-sm); overflow: hidden; overflow-y: auto; /* ✅ 内容超出时出现滚动条 */ } /* 分页样式 */ /* 作用域：.poetry-pagination / .pagination-nav / .pagination-list / .page-item / .page-link * （列表页底部分页导航） * 作用方向：布局（弹性居中/换行）+ 颜色（默认/激活/禁用态）+ 交互（hover 过渡） */ /* 分页容器：顶部间距、居中 */ .poetry-pagination { padding: 20px 0; text-align: center; } /* 分页导航：纵向弹性、居中 */ .pagination-nav { display: flex; flex-direction: column; align-items: center; gap: 12px; } /* 分页列表：横向弹性、换行居中 */ .pagination-list { display: flex; list-style: none; padding: 0; margin: 0; gap: 5px; flex-wrap: wrap; justify-content: center; } /* 跳转项：强制单独成行，内容收缩居中（自适应宽度） */ .page-item.page-jump { flex-basis: 100%; width: 100%; margin-top: 8px; display: flex; justify-content: center; } .page-item.page-jump > span { width: auto; min-width: 0; flex: 0 1 auto; } /* 单个分页项 */ .page-item { display: inline-block; } /* 分页链接：拟玻璃态 */ /* 2026-08-31 三次升级：主题玻璃底 + backdrop blur；悬浮阴影；激活态渐变 */ .page-link { display: block; padding: 6px 14px; color: var(--ui-ink, #4a5568); background: var(--ui-glass-bg); border: 1px solid var(--ui-glass-border); backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4); border-radius: 4px; text-decoration: none; font-size: 14px; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; cursor: pointer; min-width: 36px; text-align: center; line-height: 1.5; } /* 悬停态：accent 微染 + 悬浮阴影 */ .page-link:hover { background: var(--ui-accent-soft); border-color: var(--ui-accent); color: var(--ui-accent); transform: translateY(-1px); box-shadow: var(--poetry-shadow-2); } /* 当前页：主题渐变 + 内高光 */ .page-item.active .page-link { background: var(--ui-grad-accent); border-color: transparent; color: #fff; box-shadow: inset 0 1px 0 var(--ui-btn-hilight), 0 2px 8px color-mix(in srgb, var(--ui-accent) 35%, transparent); } /* 当前页悬停：微提亮 */ .page-item.active .page-link:hover { filter: brightness(1.08); border-color: transparent; color: #fff; } /* 禁用态（无上一页/下一页）：灰字不可点，玻璃退底 */ .page-item.disabled .page-link { color: #a0aec0; cursor: not-allowed; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--ui-glass-border); } /* 禁用态悬停：保持不变 */ .page-item.disabled .page-link:hover { background: transparent; border-color: var(--ui-glass-border); transform: none; box-shadow: none; } /* 分页信息文字（共 N 页） */ .pagination-info { font-size: 13px; color: #718096; } /* 确保没有图片显示 */ .page-link img { display: none !important; } /* 响应式 */ /* 作用域：.page-link / .pagination-info（分页移动端适配） * 作用方向：响应式布局（缩小内边距与字号） * 断点：max-width: 640px（手机竖屏 / 小屏设备） */ @media (max-width: 640px) { .page-link { padding: 4px 10px; font-size: 12px; min-width: 30px; } .pagination-info { font-size: 12px; } } /* ========== 8. 视觉优化（2026-08-31 立体感 + 配色统一 + 透明度修复） ========== */ /* 作用域：跳转控件 / 筛选盒壳 / 卡片标题 / 空状态 * 作用方向：颜色（accent 统一/实色微染）+ 阴影（小半径悬浮）+ 边框点缀 */ /* ---- 跳转 GO 按钮：!important 覆盖 PHP 内联，主题渐变 + 内高光 ---- */ .page-item.page-jump .page-jump-btn { background: var(--ui-grad-accent) !important; border: 1px solid transparent !important; box-shadow: inset 0 1px 0 var(--ui-btn-hilight) !important; transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important; } .page-item.page-jump .page-jump-btn:hover { filter: brightness(1.08) !important; transform: translateY(-1px) !important; box-shadow: inset 0 1px 0 var(--ui-btn-hilight), var(--poetry-shadow-2) !important; } .page-item.page-jump .page-jump-btn:active { transform: translateY(0) !important; box-shadow: inset 0 1px 0 var(--ui-btn-hilight) !important; } /* ---- 跳转输入框：focus 态 accent 高亮（覆盖内联灰边框） ---- */ .page-item.page-jump .page-jump-input:focus { outline: none ; border: 1px solid var(--ui-accent, #9b6bff) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-accent, #9b6bff) 20%, transparent) !important; } /* ---- 筛选盒（二级菜单）：玻璃底 + accent 微染（blur 由 content-ui-1 提供） ---- */ /* 特异性高于 global.css 的 .content-ui-1（!important 对 !important 比特异性） */ body .poetry-filter-box.content-ui-1 { background: color-mix(in srgb, var(--ui-accent) 4%, var(--ui-glass-bg)) !important; box-shadow: var(--poetry-shadow-1) !important; } /* ---- 卡片标题链接：hover 跟随主题 accent ---- */ li.block-post .block-post-title a { transition: color 0.2s ease ; } li.block-post .block-post-title a:hover { color: var(--ui-accent, #9b6bff) ; } /* ---- 空状态：主题线色虚线框点缀（不加阴影） ---- */ .poetry-no-result { border: 1px dashed var(--ui-line) ; } /* ---- 列表页大标题：金色点缀条（随主题 --ui-gold 联动） ---- */ .poetry-ui-header { position: relative ; padding-bottom: 12px ; } .poetry-ui-header::after { content: '' ; position: absolute ; left: 50% ; transform: translateX(-50%) ; bottom: 0 ; width: 36px ; height: 3px ; border-radius: 2px ; background: var(--ui-gold) ; }