/* 视频模型样式 —— 卡片网格 + 详情页规格表 */ /* ---------- 列表卡片 ---------- 本文件由各模板在内，加载顺序在 common.css / theme-enhance.css / theme-dark.css **之后**。因此： · 颜色一律走设计令牌 + 浅色回退，否则会反向覆盖深色主题； · 卡片几何（圆角/间距/字号/角标形状）以本文件为唯一来源，写在 theme-enhance.css 或 theme-dark.css 的同名规则会被这里静默盖掉。网格容器（.video-grid .row 转 CSS Grid）在 theme-enhance.css 第 6 节。 */ /* 纵向 flex + 满高：配合父级 Grid 的等高行，用 margin-top:auto 把 meta 顶到卡片底部，同一行各卡的 meta 基线因此对齐（与标题占几行无关）。 */ .video-card { display: flex; flex-direction: column; height: 100%; /* 卡片间距改由网格 gap 提供 */ margin-bottom: 0; } .video-card .video-thumb { position: relative; display: block; overflow: hidden; background-color: #1a1a1a; /* 圆角从 3px 提到 --radius-lg（10px）：3px 在视觉上等于方角 */ border-radius: var(--radius-lg, 10px); } .video-card .video-thumb img { width: 100%; height: 100%; object-fit: cover; } /* 注：悬停动画统一由 theme-enhance.css 定义（第 3 节），此处不再声明 transition/transform，避免多层覆盖导致时长与曲线不一致、以及容器与图片 transform 复合放大。 */ /* 动图封面：默认隐藏，悬停时淡入覆盖静态封面 */ .video-card .video-thumb .gif-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } /* 角标：时长（右下）与清晰度（左上），仅靠位置区分。胶囊 + 半透明深底 + 背景模糊，使其在亮/暗封面上都可读。 */ .video-card .video-duration, .video-card .video-resolution { position: absolute; z-index: 2; padding: 1px 7px; font-size: 11.5px; font-weight: 500; line-height: 1.55; color: #fff; background-color: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 999px; /* 时长为数字，等宽避免逐卡宽度跳动 */ font-variant-numeric: tabular-nums; } .video-card .video-duration { right: 8px; bottom: 8px; } .video-card .video-resolution { left: 8px; top: 8px; letter-spacing: .02em; } /* 标题：两行定高 min-height 锁两行，使「1 行标题」的卡片也占满两行高度，标题块下缘齐平；配合 .video-card 的 flex + meta 的 margin-top:auto，整行卡片彻底对齐。字重从 400 提到 500：400 在深色底上偏细，标题应是卡片的文字主体。 */ .video-card .video-title { margin: 12px 0 4px; font-size: 14.5px; font-weight: 500; line-height: 1.45; min-height: calc(2 * 1.45em); } /* 颜色统一走设计令牌（第二个值为浅色回退），因本文件由各模板单独引入、加载顺序在主题之后，若写死颜色会反向覆盖深色主题。 */ .video-card .video-title a { display: block; color: var(--c-text, #333); /* 标题最多两行，超出省略 */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .video-card .video-title a:hover { color: var(--c-accent, #d9534f); text-decoration: none; } /* meta 行：浏览数 / 大小或评论数 / 发布时间 ------------------------------------------------------------------ 原为 span 间 margin-right:10px，图标与数字同字号同色，三组挤成一团。改 flex + gap 排布：图标降一号并再降不透明度（让数字成为读取焦点），时间推到行尾，形成「左侧数据 / 右侧时间」的分区。 margin-top:auto 把整行顶到卡片底部（等高行内即对齐，见 .video-card）。 */ .video-card .video-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: auto; padding-top: 4px; font-size: 12px; color: var(--c-text-faint, #999); /* 数字等宽，避免同列各卡的浏览数宽窄不一造成锯齿感 */ font-variant-numeric: tabular-nums; } .video-card .video-meta > span, .video-card .video-meta > time { display: inline-flex; align-items: center; gap: 4px; /* 间距由 gap 接管 */ margin-right: 0; } .video-card .video-meta i { font-size: 11px; opacity: .72; } .video-card .video-meta > time { margin-left: auto; } /* 移动端两列：字号与角标收窄，避免拥挤（原在 theme-enhance.css，因本文件加载在后会覆盖，故移来此处统一） */ @media (max-width: 767px) { .video-card .video-title { margin-top: 8px; font-size: 13.5px; line-height: 1.4; min-height: calc(2 * 1.4em); } .video-card .video-duration, .video-card .video-resolution { font-size: 11px; padding: 1px 6px; } .video-card .video-duration { right: 6px; bottom: 6px; } .video-card .video-resolution { left: 6px; top: 6px; } .video-card .video-meta { font-size: 11px; gap: 2px 8px; } } /* =================================================================== 横排卡片：一行一条（标签页） ------------------------------------------------------------------ 容器 .video-grid-rows 压成单列，卡片由「上图下文」转为「左图右文」。缩略图定宽，故用 grid 的 auto + 1fr 两轨，比 flex 少一层 min-width:0 的坑（文字轨用 minmax(0,1fr) 才能正常截断）。 .video-thumb 带 .embed-responsive（padding-bottom 撑 16:9），宽度定死后高度自动跟随，无需再声明 height。 =================================================================== */ .video-grid.video-grid-rows .row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); } .video-grid-rows .video-card { display: grid; grid-template-columns: 260px minmax(0, 1fr); grid-template-areas: "thumb title" "thumb desc" "thumb meta"; /* 行距 8px 让标题/摘要/meta 紧贴成组；列距 16px 隔开图与文 */ gap: var(--sp-2) var(--sp-4); align-items: start; /* 竖排时靠父级 Grid 等高行拉满；单列横排下无需满高 */ height: auto; } /* 显式把各子项放进网格区域：缩略图独占左列并纵跨三行，标题/摘要/meta 依次排在右列，摘要紧贴标题下方而非落进图片列。 */ .video-grid-rows .video-card .video-thumb { grid-area: thumb; } .video-grid-rows .video-card .video-title { grid-area: title; } .video-grid-rows .video-card .video-desc { grid-area: desc; } .video-grid-rows .video-card .video-meta { grid-area: meta; } /* 竖排卡片用 margin-top:auto 把 meta 顶到底部，横排下会把 meta 推离摘要、贴到缩略图下缘，故改为紧随内容。 */ .video-grid-rows .video-card .video-meta { margin-top: var(--sp-3); } /* 标题：横排空间充裕，放大一档并解除两行定高（定高是为了对齐竖排网格的标题块下缘，单列下无对齐对象，留着只会撑出空白）。 */ .video-grid-rows .video-card .video-title { margin: 0; font-size: 16px; min-height: 0; } .video-grid-rows .video-card .video-title a { -webkit-line-clamp: 2; } /* 摘要（由 item_grid.html 在 $__gridRows__ 时输出） */ .video-grid-rows .video-desc { font-size: 13px; line-height: 1.6; color: var(--c-text-soft, #666); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 平板：缩略图收窄，避免文字轨被压得过窄 */ @media (max-width: 991px) { .video-grid-rows .video-card { grid-template-columns: 200px minmax(0, 1fr); } } @media (max-width: 767px) { /* 手机仍保持横排（比两列竖排更省纵向空间），但比例进一步收窄 */ .video-grid.video-grid-rows .row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); } .video-grid-rows .video-card { grid-template-columns: 140px minmax(0, 1fr); /* 摘要已 display:none，网格区须同步去掉 desc 行：否则空行仍占一轨， row-gap 落在它上下两侧，把 meta 往下多挤 12px，导致 meta 与左侧缩略图下缘错位 */ grid-template-areas: "thumb title" "thumb meta"; gap: var(--sp-3); } .video-grid-rows .video-card .video-title { font-size: 14.5px; line-height: 1.4; min-height: 0; } /* 窄屏下摘要与标题争行数，去掉摘要保标题 */ .video-grid-rows .video-desc { display: none; } .video-grid-rows .video-card .video-meta { margin-top: var(--sp-2); } } /* =================================================================== 人物模型（女王名册） ------------------------------------------------------------------ 与视频卡片的差别：照片用 3:4 竖版，更适合人物呈现。颜色统一走设计令牌（第二值为浅色回退），避免加载顺序影响深色主题。 =================================================================== */ .person-grid { margin-bottom: 16px; } .person-card { margin-bottom: 20px; } /* 3:4 竖版照片 */ .person-card .person-photo { position: relative; display: block; overflow: hidden; padding-top: 133.33%; background-color: var(--c-bg-soft, #f7f8fa); border-radius: 6px; } .person-card .person-photo img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* 角色角标 */ .person-card .person-role { position: absolute; left: 6px; top: 6px; z-index: 2; padding: 1px 7px; font-size: 11px; line-height: 1.6; color: #fff; background-color: var(--c-accent, #d9534f); border-radius: 2px; } .person-card .person-name { margin: 8px 0 4px; font-size: 15px; font-weight: 500; line-height: 1.4; } .person-card .person-name a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--c-text, #333); } .person-card .person-meta { font-size: 12px; color: var(--c-text-soft, #6b7280); } .person-card .person-meta > span { margin-right: 8px; } /* 身体数据：以 · 分隔的紧凑一行 */ .person-card .person-body { margin-top: 2px; font-size: 11px; color: var(--c-text-faint, #9ca3af); font-variant-numeric: tabular-nums; } .person-card .person-body > span + span::before { content: '·'; margin: 0 4px; } /* ---------- 详情页 ---------- */ .person-hero { display: flex; gap: 24px; margin-bottom: 24px; } .person-hero-photo { flex: 0 0 240px; max-width: 240px; } .person-hero-photo img { width: 100%; border-radius: 6px; } .person-hero-info { flex: 1 1 auto; min-width: 0; } .person-title { margin: 0 0 12px; font-size: 24px; font-weight: 600; line-height: 1.3; } .person-tags { margin-bottom: 12px; } .person-specs { margin-bottom: 12px; } .person-specs th { width: 86px; font-weight: 400; white-space: nowrap; color: var(--c-text-faint, #9ca3af); } .person-specs td { font-variant-numeric: tabular-nums; } .person-services .tag { margin: 0 4px 4px 0; display: inline-block; } .person-stats { font-size: 12px; color: var(--c-text-faint, #9ca3af); } .person-stats > span, .person-stats > time { margin-right: 14px; } .person-feature { margin-bottom: 20px; } .person-feature p { line-height: 1.8; color: var(--c-text-soft, #6b7280); } /* ---------- 移动端 ---------- */ @media (max-width: 767px) { .person-hero { display: block; } /* 照片改为居中的小尺寸，避免占满首屏 */ .person-hero-photo { max-width: 160px; margin: 0 auto 16px; } .person-title { font-size: 20px; text-align: center; } .person-tags { text-align: center; } .person-specs th { width: 72px; font-size: 13px; } .person-specs td { font-size: 13px; } .person-card .person-name { font-size: 14px; } } /* ---------- 人物详情页（重构后） ---------- */ /* 关键数据横排：比表格更易扫读 */ .person-stats-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } .person-stats-grid > li { min-width: 62px; padding: 6px 10px; text-align: center; background-color: var(--c-bg-soft, #f7f8fa); border-radius: 6px; } .person-stats-grid > li > b { display: block; font-size: 17px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--c-text, #333); } .person-stats-grid > li > span { font-size: 11px; color: var(--c-text-faint, #9ca3af); } /* 次要资料：定义列表，标签与值同行 */ .person-facts { margin: 0 0 14px; font-size: 13px; line-height: 1.9; } .person-facts > dt { float: left; clear: left; width: 74px; font-weight: 400; color: var(--c-text-faint, #9ca3af); } .person-facts > dd { margin-left: 74px; color: var(--c-text, #333); } /* 爱好标签行 */ .person-hobby { margin-bottom: 14px; font-size: 13px; } .person-hobby .hobby-label { margin-right: 8px; color: var(--c-text-faint, #9ca3af); } .person-hobby .tag { margin: 0 4px 4px 0; display: inline-block; } /* 相册 */ .person-gallery { margin-bottom: 24px; } .person-gallery .gallery-item { display: block; position: relative; overflow: hidden; margin-bottom: 10px; padding-top: 100%; background-color: var(--c-bg-soft, #f7f8fa); border-radius: 4px; } .person-gallery .gallery-item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.22, .61, .36, 1); } @media (hover: hover) and (pointer: fine) { .person-gallery .gallery-item:hover img { transform: scale(1.06); } } @media (max-width: 767px) { .person-stats-grid > li { min-width: 54px; padding: 5px 8px; } .person-stats-grid > li > b { font-size: 15px; } .person-facts > dt { width: 66px; } .person-facts > dd { margin-left: 66px; } } /* ---------- 修正 1：列表卡片高度不齐 ---------- */ /* 字段稀疏（昵称 2/16、职业 2/16）时下半部分内容多少不一，给文字区固定最小高度，使同行卡片底部对齐。 */ .person-card { display: flex; flex-direction: column; } .person-card .person-name { /* 两行标题的高度，标题只有一行时也占两行位 */ min-height: 42px; } .person-card .person-meta { min-height: 18px; } .person-card .person-body { min-height: 16px; } /* ---------- 修正 2：详情页头图左右不平衡 ---------- */ /* 原左侧照片固定 240px 且不随右侧内容伸缩，字段少时右侧留白过大。改为按比例分配并顶部对齐，照片不再被拉伸。 */ .person-hero { align-items: flex-start; } .person-hero-photo { /* 由固定 240px 改为可收缩的比例宽度 */ flex: 0 1 34%; max-width: 260px; min-width: 150px; } .person-hero-photo img { display: block; width: 100%; height: auto; /* 3:4 竖版裁切，避免不同尺寸原图导致左右高度参差 */ aspect-ratio: 3 / 4; object-fit: cover; } /* ---------- 修正 3：person-facts 排布 ---------- */ /* 原用 float + margin-left 实现两列，值过长时会与标签错位。改用 grid，标签列宽度自适应，值列自动换行。 */ .person-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 14px; font-size: 13px; line-height: 1.7; } .person-facts > dt { float: none; width: auto; white-space: nowrap; color: var(--c-text-faint, #9ca3af); } .person-facts > dd { margin: 0; min-width: 0; word-break: break-word; color: var(--c-text, #333); } /* ---------- 修正 4：正文与相册重复显示 ---------- */ /* 正文（WordPress 导入）内含相册区块，与独立的相册区重复。此处仅用 CSS 隐藏，不改数据 —— 正文后续会由人工清空。仅作用于人物详情页，不影响文章/视频正文中的配图。 */ .person-detail .article-text figure.wp-block-gallery, .person-detail .article-text figure.wp-block-image, .person-detail .article-text .wp-block-gallery { display: none; } /* 正文里的散图（未包 figure）也一并隐藏 */ .person-detail .article-text > p > img, .person-detail .article-text > img { display: none; } @media (max-width: 767px) { .person-card .person-name { min-height: 38px; } /* 移动端照片居中显示，不参与横向分配 */ .person-hero-photo { flex: none; max-width: 160px; } } /* =================================================================== 视频详情页：播放器 + APP 引流 ------------------------------------------------------------------ 颜色统一走设计令牌（第二值为浅色回退），本文件由模板单独引入、加载顺序在主题之后，写死颜色会反向覆盖深色主题。 =================================================================== */ .video-player { margin-bottom: 16px; border-radius: 6px; overflow: hidden; background-color: #000; } /* 16:9 舞台，避免加载前的高度跳动（CLS） */ .video-player .player-stage { position: relative; width: 100%; padding-top: 56.25%; background-color: #000; } .video-player .player-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background-color: #000; } /* ---------- 未开放播放：封面 + 引导下载 ---------- */ .player-locked .locked-poster { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* 压暗并轻微模糊，暗示"未解锁"且不喧宾夺主 */ filter: brightness(.42) blur(2px); transform: scale(1.04); /* 抵消模糊导致的边缘透明 */ } .player-locked .locked-mask { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, .62) 100%); } .player-locked .locked-body { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; text-align: center; } .player-locked .locked-icon { font-size: 54px; line-height: 1; color: rgba(255, 255, 255, .82); margin-bottom: 12px; } .player-locked .locked-tip { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); } .player-locked .locked-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 24px; font-size: 14px; font-weight: 500; line-height: 40px; color: #fff; background-color: var(--c-accent, #d9534f); border-radius: 20px; transition: transform .2s ease, box-shadow .2s ease; } .player-locked .locked-btn:hover, .player-locked .locked-btn:focus { color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); } .player-locked .locked-hint { margin: 0; font-size: 12px; color: rgba(255, 255, 255, .6); } /* 未解锁：支付金币 / 开通VIP 双按钮 */ .player-locked .locked-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin-bottom: 4px; } .player-locked .locked-btn.btn-vip { background-color: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); color: #fff; } .player-locked .locked-btn.btn-vip:hover, .player-locked .locked-btn.btn-vip:focus { background-color: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8); } /* 播放失败提示 */ .player-error { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 8px 16px; font-size: 13px; color: #fff; background-color: rgba(0, 0, 0, .72); border-radius: 4px; } /* ---------- 标题与元信息 ---------- */ .video-head { padding-bottom: 14px; border-bottom: 1px solid var(--c-line, #e8eaed); } .video-h1 { margin: 0 0 10px; font-size: 22px; font-weight: 600; line-height: 1.4; color: var(--c-text, #23282d); } .video-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--c-text-faint, #9ca3af); font-variant-numeric: tabular-nums; } /* 清晰度做成角标，与纯文本信息区分 */ .video-facts .fact-hd { padding: 0 6px; font-size: 11px; line-height: 18px; color: #fff; background-color: var(--c-accent, #d9534f); border-radius: 2px; } .video-tags { margin-top: 10px; } .video-tags .tag { margin: 0 4px 4px 0; display: inline-block; } /* ---------- 操作条 ---------- */ .video-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--c-line, #e8eaed); } .video-actions .act-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 16px; font-size: 13px; line-height: 34px; color: var(--c-text-soft, #6b7280); background-color: var(--c-bg-soft, #f7f8fa); border-radius: 17px; font-variant-numeric: tabular-nums; } .video-actions .act-btn:hover, .video-actions .act-btn:focus { color: var(--c-accent, #d9534f); text-decoration: none; } .video-intro { padding-top: 16px; } /* ---------- 移动端 ---------- */ @media (max-width: 767px) { /* 播放器贴边全宽，符合视频站习惯 */ .video-player { margin-left: -15px; margin-right: -15px; border-radius: 0; } .video-h1 { font-size: 17px; } .video-facts { font-size: 12px; gap: 4px 12px; } .player-locked .locked-icon { font-size: 40px; margin-bottom: 8px; } .player-locked .locked-tip { font-size: 13px; margin-bottom: 12px; } .player-locked .locked-btn { min-height: 36px; line-height: 36px; padding: 0 20px; font-size: 13px; } .video-actions { gap: 8px; } .video-actions .act-btn { padding: 0 12px; font-size: 12.5px; } }