1 line
46 KiB
CSS
1 line
46 KiB
CSS
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; } *, *::before, *::after { box-sizing: border-box; } body { line-height: 1.5; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; background: #f7f7f7; color: #333; } img { display:block; width:100%; height:auto; object-fit:cover; background:#eee; } a { color:inherit; text-decoration:none; } section { margin-bottom:20px; } .gkjpcv-main { padding:12px 14px; } .gkjpcv-title { font-size:16px; font-weight:600; color:var(--primary-color); margin-bottom:12px; } @media(min-width:768px){ body { max-width: var(--page-max-width); margin:0 auto; } } /* head_37.css - type2 */ .gkjpcv-0db-shell{ padding:10px 12px 6px; background:var(--bg-soft-color); border-bottom:1px solid var(--border-color); } .gkjpcv-0db-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .gkjpcv-0db-brand{ display:flex; flex-direction:column; } .gkjpcv-0db-name{ font-size:18px; font-weight:600; color:var(--primary-color); } .gkjpcv-0db-sub{ font-size:11px; color:var(--text-muted-color); } .gkjpcv-0db-toggle{ width:32px; height:32px; border-radius:999px; border:1px solid var(--border-color); background:#fff; cursor:pointer; } .gkjpcv-0db-search{ margin-top:6px; display:flex; background:#fff; border-radius:999px; border:1px solid var(--border-color); padding:3px 4px 3px 10px; } .gkjpcv-0db-search input{ flex:1; border:none; font-size:13px; background:transparent; } .gkjpcv-0db-go{ min-width:48px; border:none; border-radius:999px; background:var(--primary-color); color:#fff; font-size:13px; cursor:pointer; } .gkjpcv-0db-nav{ margin-top:4px; } .gkjpcv-0db-navList{ list-style:none; padding:0; margin:0; display:flex; gap:8px; overflow-x:auto; } .gkjpcv-0db-navList a{ display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; background:#fff; color:var(--text-color); white-space:nowrap; } .gkjpcv-0db-navList a.active{ background:var(--primary-color); color:#fff; } @media(min-width:768px){ .gkjpcv-0db-toggle{display:none;} .gkjpcv-0db-navList{justify-content:flex-end;} }/* footer_19.css */ .gkjpcv-f19-d-gm290-wrap,.gkjpcv-f19-d-gm290-shell,.gkjpcv-f19-d-gm290-mini,.gkjpcv-f19-d-gm290-info{ padding:17px 14px; background:var(--bg-color); border-top:1px solid var(--border-color); font-size:13px; color:var(--text-color); text-align:center; } .gkjpcv-f19-d-gm290-map a{ display:inline-block; margin:0 9px 4px 0; color:var(--text-color); font-size:12px; } .gkjpcv-f19-d-gm290-links a{ display:inline-block; margin:0 10px 6px 0; color:var(--primary-color); } .gkjpcv-f19-d-gm290-links span{ color:var(--text-muted-color); margin-right:6px; } .gkjpcv-f19-d-gm290-desc{ color:var(--text-muted-color); line-height:1.6; margin:7px 0; } .gkjpcv-f19-d-gm290-email{ color:var(--text-color); margin:8px 0; } .gkjpcv-f19-d-gm290-cr{ color:var(--text-muted-color); font-size:12px; opacity:0.85; margin-top:10px; } .gkjpcv-f19-d-gm290-card{ padding:10px 13px; border:1px solid var(--border-color); border-radius:8px; background:var(--bg-color); margin-bottom:11px; } .gkjpcv-f19-d-gm290-addr{font-style:normal;display:block;margin-bottom:12px;} .gkjpcv-f19-d-gm290-brand{font-weight:800;}/* ================= Layout B ================= */ .gkjpcv-dm-root.gkjpcv-layout-B{ margin:20px 0; display:flex; flex-direction:column; gap:16px; } /* 顶部左右 */ .gkjpcv-layout-B .gkjpcv-dm-row-top{ display:flex; gap:16px; align-items:flex-start; } /* 左：封面 */ .gkjpcv-layout-B .gkjpcv-dm-col-cover{ width:33%; max-width:280px; } /* 右：信息区 */ .gkjpcv-layout-B .gkjpcv-dm-col-info{ flex:1; display:flex; flex-direction:column; gap:10px; } /* 底部 desc */ .gkjpcv-layout-B .gkjpcv-dm-row-bottom{ width:100%; } /* ================= H5 优化 ================= */ @media (max-width:767px){ .gkjpcv-layout-B .gkjpcv-dm-row-top{ gap:12px; } .gkjpcv-layout-B .gkjpcv-dm-col-cover{ width:40%; max-width:none; } .gkjpcv-layout-B .gkjpcv-dm-col-info{ gap:8px; } } /* ================= Breadcrumb Layout A ================= */ .gkjpcv-bc-a{ margin:10px 0; font-size:13px; line-height:1.6; color:var(--text-muted-color); /* 关键：横向导航 */ display:flex; align-items:center; flex-wrap:wrap; gap:6px; } /* 所有直接子容器都横向 */ .gkjpcv-bc-a > *{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; } /* 重置 ol / ul */ .gkjpcv-bc-a ol, .gkjpcv-bc-a ul{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0; } /* li 横向 */ .gkjpcv-bc-a li{ display:flex; align-items:center; gap:6px; } /* 分隔符（li::after 方案） */ .gkjpcv-bc-a li::after{ content:"/"; margin-left:6px; color:var(--text-muted-color); } .gkjpcv-bc-a li:last-child::after{ content:""; } /* 链接样式 */ .gkjpcv-bc-a a{ color:var(--text-muted-color); text-decoration:none; white-space:nowrap; } /* 当前节点 */ .gkjpcv-bc-a strong, .gkjpcv-bc-a em, .gkjpcv-bc-a span{ color:var(--text-color); font-style:normal; white-space:nowrap; } /* inline variant（你原来的，保留） */ .gkjpcv-bc-inline{ display:flex; gap:6px; } /* 紧凑 / SEO */ .gkjpcv-bc-a.compact{ font-size:12px; } .gkjpcv-bc-a.seo{ font-weight:500; } .gkjpcv-pl-a{ margin:24px 0; } .gkjpcv-pl-a .gkjpcv-pl-tabs{ display:flex; gap:12px; margin-bottom:12px; } .gkjpcv-pl-a .gkjpcv-pl-tab{ padding:4px 10px; border:1px solid var(--border-color); cursor:pointer; } .gkjpcv-pl-a .gkjpcv-pl-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(70px,1fr)); gap:8px; } /* ================= SeoWords Layout B ================= */ .gkjpcv-sw-b{ margin:16px 0; padding:12px; background:var(--bg-soft-color); border-radius:8px; font-size:13px; line-height:1.7; } .gkjpcv-sw-b a{ color:var(--text-color); text-decoration:none; } /* card */ .gkjpcv-sw-card{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0; } .gkjpcv-sw-card li{ padding:6px 10px; background:var(--bg-color); border-radius:6px; } /* cloud */ .gkjpcv-sw-cloud .tag{ display:inline-block; padding:4px 10px; margin:4px; background:var(--bg-color); border-radius:999px; font-size:12px; } /* grid */ .gkjpcv-sw-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; } /* badge */ .gkjpcv-sw-badge .badge{ display:inline-block; padding:4px 8px; margin:3px; background:var(--bg-color); border-radius:4px; } /* compact / seo */ .gkjpcv-sw-b.compact{ padding:10px; font-size:12px; } .gkjpcv-sw-b.seo{ font-weight:500; } /* detail_03.css */ .gkjpcv-d3-page { padding: 12px; } /* 顶部区域 */ .gkjpcv-d3-top { display: flex; gap: 14px; } @media(max-width:768px){ .gkjpcv-d3-top { flex-direction: column; } } .gkjpcv-d3-pic { width: 150px; aspect-ratio: 2/3; border-radius: 12px; object-fit: cover; } .gkjpcv-d3-meta h1 { font-size: 22px; color: var(--primary-color); margin-bottom: 6px; } .gkjpcv-d3-meta p { font-size: 13px; margin-bottom: 4px; } /* 线路 chips */ .gkjpcv-d3-linesel { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; } .gkjpcv-d3-chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: #f3f3f3; } .gkjpcv-d3-chip.active { background: var(--primary-color); color: #fff; } /* 集数块 */ .gkjpcv-d3-epwrap { margin-top: 10px; } .gkjpcv-d3-epbox { display: none; flex-wrap: wrap; gap: 8px; } .gkjpcv-d3-epbox.active { display: flex; } .gkjpcv-d3-epitem { padding: 6px 12px; font-size: 12px; border-radius: 8px; background: #fafafa; border: 1px solid rgba(0,0,0,.05); } .gkjpcv-d3-epitem.active { background: var(--primary-color); color: #fff; } /* 简介 */ .gkjpcv-d3-desc h2 { margin-top: 18px; font-size: 16px; color: var(--primary-color); } .gkjpcv-d3-desc p { margin-top: 6px; font-size: 14px; line-height: 1.7; } /* 同主演推荐 */ .gkjpcv-d3-rel h3 { margin-top: 18px; font-size: 16px; color: var(--primary-color); } .gkjpcv-d3-grid { margin-top: 8px; display: grid; gap: 12px; grid-template-columns: repeat(2,1fr); } @media(min-width:768px){ .gkjpcv-d3-grid { grid-template-columns: repeat(3,1fr); } } .gkjpcv-d3-card img { width: 100%; aspect-ratio: 2/3; border-radius: 10px; object-fit: cover; } .gkjpcv-d3-card p { font-size: 12px; margin-top: 4px; } .gkjpcv-dm-root{ margin:20px 0; display:grid; grid-template-columns: 110px 1fr; gap:14px; align-items:start; } /* 所有模块默认在右侧 */ .gkjpcv-dm-title, .gkjpcv-dm-title-box, .gkjpcv-dm-title-wrap, .gkjpcv-dm-meta, .gkjpcv-dm-desc, .gkjpcv-dm-action{ grid-column:2; } /* 封面永远左侧 */ .gkjpcv-dm-cover{ grid-column:1; grid-row:1 / span 8; border-radius:10px; overflow:hidden; } .gkjpcv-dm-cover-img, .gkjpcv-dm-cover-bg{ width:100%; aspect-ratio:2 / 3; object-fit:cover; } /* ===================== Detail Title Base ===================== */ .gkjpcv-dm-title { font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--text-color); } .gkjpcv-dm-title-wrap { margin-bottom: 12px; } .gkjpcv-dm-title-box { padding: 6px 0; } .gkjpcv-dm-sub { font-size: 13px; color: var(--text-muted-color); } .gkjpcv-dm-tag { margin-left: 6px; font-size: 12px; color: var(--accent-color); } .gkjpcv-dm-score { margin-left: 8px; font-size: 13px; color: var(--primary-color); } .gkjpcv-dm-hidden { display: none; } /* ===================== Variant Differences ===================== */ .gkjpcv-dm-title.v1 small { font-size: 13px; margin-left: 6px; } .gkjpcv-dm-title.v5 sup { font-size: 12px; color: var(--accent-color); } .gkjpcv-dm-title-wrap.v3 { border-bottom: 1px solid var(--border-color); padding-bottom: 6px; } .gkjpcv-dm-title-wrap.v6 { background: var(--bg-soft-color); padding: 8px; } .gkjpcv-dm-title-wrap.v7 { border-left: 4px solid var(--primary-color); padding-left: 8px; } .gkjpcv-dm-title-wrap.v8 { text-align: center; } .gkjpcv-dm-title.v9 .gkjpcv-dm-tag { background: var(--bg-soft-color); padding: 2px 6px; border-radius: 4px; } .gkjpcv-dm-title-box.v12 { background: var(--bg-soft-color); } .gkjpcv-dm-title.v13 .gkjpcv-dm-score { font-weight: bold; } .gkjpcv-dm-title-wrap.v14 .gkjpcv-dm-icon { display: inline-block; width: 6px; height: 6px; background: var(--accent-color); border-radius: 50%; margin-left: 6px; } .gkjpcv-dm-title.v15 { letter-spacing: 0.5px; } .gkjpcv-dm-title-wrap.v19 { padding: 10px 0; } .gkjpcv-dm-title, .gkjpcv-dm-title-wrap { margin-bottom: 8px; } /* ===================== Cover Base ===================== */ .gkjpcv-dm-cover { position: relative; width: 100%; overflow: hidden; } .gkjpcv-dm-cover-img { display: block; width: 100%; height: auto; } .gkjpcv-dm-cover-bg { width: 100%; aspect-ratio: 2 / 3; background-size: cover; background-position: center; } /* ===================== Overlays ===================== */ .gkjpcv-dm-cover-badge, .gkjpcv-dm-cover-score, .gkjpcv-dm-cover-tag, .gkjpcv-dm-cover-year, .gkjpcv-dm-cover-free, .gkjpcv-dm-cover-top { position: absolute; top: 8px; left: 8px; padding: 2px 6px; font-size: 12px; background: rgba(0,0,0,.6); color: #fff; border-radius: 3px; } .gkjpcv-dm-cover-score { top: auto; bottom: 8px; left: 8px; } .gkjpcv-dm-cover-remark { position: absolute; bottom: 0; left: 0; width: 100%; font-size: 12px; padding: 4px 6px; background: rgba(0,0,0,.5); color: #fff; } .gkjpcv-dm-cover-play { position: absolute; inset: 0; background: rgba(0,0,0,.35); } .gkjpcv-dm-cover-play::after { content: "▶"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 32px; color: #fff; } /* ===================== Variant Differences ===================== */ .gkjpcv-dm-cover.v3, .gkjpcv-dm-cover.v6, .gkjpcv-dm-cover.v10, .gkjpcv-dm-cover.v11, .gkjpcv-dm-cover.v14 { aspect-ratio: 2 / 3; } .gkjpcv-dm-cover.v8 { text-align: center; } .gkjpcv-dm-cover.v16 .gkjpcv-dm-cover-mask { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,0), rgba(0,0,0,.6) ); } .gkjpcv-dm-cover.v18 { aspect-ratio: 2 / 3; background-size: cover; background-position: center; } /* ===================== Meta Base ===================== */ .gkjpcv-dm-meta { font-size: 13px; color: var(--text-muted-color); line-height: 1.6; margin-bottom: 10px; } .gkjpcv-dm-meta-label { font-weight: 600; margin-right: 4px; } .gkjpcv-dm-meta-sep { margin: 0 6px; } .gkjpcv-dm-meta-hidden { display: none; } /* ===================== Structure Helpers ===================== */ .gkjpcv-dm-meta.v0 li, .gkjpcv-dm-meta.v1 li, .gkjpcv-dm-meta.v2 li { list-style: none; } .gkjpcv-dm-meta.v3 span, .gkjpcv-dm-meta.v7 span, .gkjpcv-dm-meta.v8 span, .gkjpcv-dm-meta.v9 span, .gkjpcv-dm-meta.v13 span, .gkjpcv-dm-meta.v14 span { margin-right: 10px; } .gkjpcv-dm-meta.v5 dt, .gkjpcv-dm-meta.v6 dt { font-weight: 600; } .gkjpcv-dm-meta.v5 dd, .gkjpcv-dm-meta.v6 dd { margin: 0 0 4px 0; } .gkjpcv-dm-meta.v10 { width: 100%; border-collapse: collapse; } .gkjpcv-dm-meta.v10 td { padding: 2px 6px; border-bottom: 1px solid var(--border-color); } .gkjpcv-dm-meta.v12 strong { margin-right: 6px; } .gkjpcv-dm-meta.v15 { letter-spacing: .5px; } /* ===================== Variant Differences ===================== */ .gkjpcv-dm-meta.v3 { display: flex; flex-wrap: wrap; } .gkjpcv-dm-meta.v4 { font-style: italic; } .gkjpcv-dm-meta.v11 { opacity: .9; } .gkjpcv-dm-meta.v16 { color: var(--text-color); } .gkjpcv-dm-meta.v19 p { margin: 0; } .gkjpcv-dm-meta-chip { display: inline-block; padding: 1px 6px; border: 1px solid var(--border-color); border-radius: 999px; margin-right: 6px; margin-bottom: 4px; color: var(--text-muted-color); font-size: 12px; } .gkjpcv-dm-meta { margin-bottom: 6px; } /* ===================== Desc Base ===================== */ .gkjpcv-dm-desc { font-size: 14px; line-height: 1.7; color: var(--text-color); margin-bottom: 12px; } .gkjpcv-dm-desc-more { margin-left: 6px; color: var(--accent-color); } .gkjpcv-dm-desc-note { font-size: 12px; color: var(--text-muted-color); } .gkjpcv-dm-desc-hidden { display: none; } /* ===================== Variant Helpers ===================== */ .gkjpcv-dm-desc.v1, .gkjpcv-dm-desc.v2, .gkjpcv-dm-desc.v3, .gkjpcv-dm-desc.v7, .gkjpcv-dm-desc.v12, .gkjpcv-dm-desc.v17 { padding: 6px 0; } .gkjpcv-dm-desc.v5 summary { cursor: pointer; font-weight: 600; } .gkjpcv-dm-desc.v8 blockquote { margin: 0; padding-left: 10px; border-left: 3px solid var(--border-color); } .gkjpcv-dm-desc.v11 { opacity: .95; } .gkjpcv-dm-desc.v14 { background: var(--bg-soft-color); padding: 8px; } .gkjpcv-dm-desc.v19 header { font-weight: 600; margin-bottom: 4px; } /* ===================== Action Base ===================== */ .gkjpcv-dm-action { margin: 14px 0; } .gkjpcv-dm-action a, .gkjpcv-dm-action button { display: inline-block; padding: 8px 14px; background: var(--primary-color); color: #fff; text-decoration: none; border-radius: 4px; font-size: 14px; } .gkjpcv-dm-action span, .gkjpcv-dm-action small, .gkjpcv-dm-action em { margin-left: 8px; font-size: 12px; color: var(--text-muted-color); } .gkjpcv-dm-action button { border: none; cursor: pointer; } /* ===================== Structure Differences ===================== */ .gkjpcv-dm-action.v2 a, .gkjpcv-dm-action.v12 a { margin-right: 10px; } .gkjpcv-dm-action.v3 li { list-style: none; margin-bottom: 6px; } .gkjpcv-dm-action.v3 a { background: var(--accent-color); } .gkjpcv-dm-action.v7 small, .gkjpcv-dm-action.v17 em { display: block; margin-top: 4px; } .gkjpcv-dm-action.v13 a { font-size: 20px; padding: 6px 10px; } .gkjpcv-dm-action.v15, .gkjpcv-dm-action.v19 { text-align: center; } .gkjpcv-dm-action.v18 { border-top: 1px dashed var(--border-color); padding-top: 10px; } .gkjpcv-dm-action { margin-top: 12px; } /* ================= Player · DPlayer Base ================= */ .gkjpcv-player.gkjpcv-player-dp{ margin:14px 0; padding:10px; border:1px solid var(--border-color); background:var(--bg-color); border-radius:10px; } .gkjpcv-player-head{ margin-bottom:10px; } .gkjpcv-player-title{ margin:0; font-size:16px; line-height:1.35; color:var(--text-color); } .gkjpcv-player-tip, .gkjpcv-player-note, .gkjpcv-player-sidehint{ color:var(--text-muted-color); font-size:12px; line-height:1.6; } .gkjpcv-player-foot{ margin-top:10px; } .gkjpcv-player-info{ margin-bottom:8px; } .gkjpcv-player-badge{ display:inline-block; padding:3px 8px; border-radius:999px; background:var(--bg-soft-color); color:var(--text-color); font-size:12px; } .gkjpcv-player-status{ margin-bottom:8px; padding:8px 10px; border-radius:8px; background:var(--bg-soft-color); color:var(--text-muted-color); font-size:12px; } /* ====== Core box (DPlayer mount point) ====== */ .gkjpcv-player-core{ width:100%; overflow:hidden; border-radius:10px; background:var(--bg-soft-color); border:1px solid var(--border-color); position:relative; } /* 默认比例：16:9 */ .gkjpcv-player[data-ratio="16x9"] .gkjpcv-player-core{ aspect-ratio:16 / 9; } .gkjpcv-player[data-ratio="4x3"] .gkjpcv-player-core{ aspect-ratio:4 / 3; } .gkjpcv-player[data-ratio="21x9"] .gkjpcv-player-core{ aspect-ratio:21 / 9; } .gkjpcv-player[data-ratio="auto"] .gkjpcv-player-core{ aspect-ratio:auto; min-height:220px; } /* ====== Variant-specific structural helpers (still generic) ====== */ .gkjpcv-player-wrap, .gkjpcv-player-wrapA, .gkjpcv-player-wrapB{ width:100%; } .gkjpcv-player-figure{ margin:0; } .gkjpcv-player-caption{ margin-top:8px; font-size:13px; color:var(--text-muted-color); } .gkjpcv-player-aside{ margin-top:10px; padding-top:8px; border-top:1px dashed var(--border-color); } .gkjpcv-player-dialog{ width:100%; padding:0; border:0; background:transparent; } .gkjpcv-player-dialog::backdrop{ background:transparent; } .gkjpcv-player-footerOnly{ padding:0; border:0; background:transparent; } /* ====== Layout for variant 10 (side area) ====== */ .gkjpcv-player-layout{ display:flex; flex-direction:column; gap:10px; } .gkjpcv-player-side{ padding:10px; border-radius:10px; background:var(--bg-soft-color); border:1px solid var(--border-color); } @media (min-width: 1024px){ .gkjpcv-player-layout{ flex-direction:row; align-items:flex-start; } .gkjpcv-player-layout .gkjpcv-player-core{ flex:1; } .gkjpcv-player-side{ width:260px; } } /* ====== Compact behavior ====== */ .gkjpcv-player.compact{ padding:8px; border-radius:8px; } .gkjpcv-list{ display: grid; gap: var(--list-gap, 16px); align-items: stretch; } ol.gkjpcv-list{ list-style: none; padding-left: 0; } /* LG */ @media (min-width:1200px){ .gkjpcv-list{ grid-template-columns:repeat(var(--cols-lg),1fr); } } /* MD */ @media (min-width:768px) and (max-width:1199px){ .gkjpcv-list{ grid-template-columns:repeat(var(--cols-md),1fr); } } /* SM */ @media (min-width:576px) and (max-width:767px){ .gkjpcv-list{ grid-template-columns:repeat(var(--cols-sm),1fr); } } /* H5 */ @media (max-width:575px){ .gkjpcv-list{ grid-template-columns:repeat(var(--cols-h5),1fr); } } @media (min-width:1200px){ .gkjpcv-list[data-max-lg="18"] > .gkjpcv-item:nth-child(n+19), .gkjpcv-list[data-max-lg="24"] > .gkjpcv-item:nth-child(n+25), .gkjpcv-list[data-max-lg="36"] > .gkjpcv-item:nth-child(n+37){ display:none; } } @media (min-width:768px) and (max-width:1199px){ .gkjpcv-list[data-max-md="10"] > .gkjpcv-item:nth-child(n+11), .gkjpcv-list[data-max-md="15"] > .gkjpcv-item:nth-child(n+16), .gkjpcv-list[data-max-md="20"] > .gkjpcv-item:nth-child(n+21){ display:none; } } @media (min-width:576px) and (max-width:767px){ .gkjpcv-list[data-max-sm="6"] > .gkjpcv-item:nth-child(n+7), .gkjpcv-list[data-max-sm="9"] > .gkjpcv-item:nth-child(n+10), .gkjpcv-list[data-max-sm="12"] > .gkjpcv-item:nth-child(n+13){ display:none; } } @media (max-width:575px){ .gkjpcv-list[data-max-h5="4"] > .gkjpcv-item:nth-child(n+5), .gkjpcv-list[data-max-h5="6"] > .gkjpcv-item:nth-child(n+7), .gkjpcv-list[data-max-h5="8"] > .gkjpcv-item:nth-child(n+9), .gkjpcv-list[data-max-h5="10"] > .gkjpcv-item:nth-child(n+11){ display:none; } } .gkjpcv-titleB{ text-align:center; margin:24px 0 16px; } .gkjpcv-titleB h2{ font-size:20px; font-weight:700; } .gkjpcv-titleB span{ display:block; margin-top:6px; font-size:13px; color:var(--text-muted-color); } .gkjpcv-titleC{ margin:16px 0 10px; } .gkjpcv-titleC h2{ display:inline-block; padding:6px 12px; font-size:16px; border-radius:6px; background:var(--primary-color); color:#fff; } .gkjpcv-titleD{ display:flex; align-items:center; gap:8px; margin:18px 0 12px; } .gkjpcv-titleD-icon{ width:6px; height:18px; border-radius:3px; background:var(--primary-color); } .gkjpcv-titleD h2{ font-size:17px; font-weight:700; } .gkjpcv-titleE{ display:flex; align-items:baseline; gap:6px; margin:20px 0 14px; } .gkjpcv-titleE-rank{ font-size:14px; font-weight:700; color:var(--accent-color); } .gkjpcv-titleE h2{ font-size:18px; font-weight:700; } /* shell_A_flow.css | 基础流式 Flow Shell */ .gkjpcv-shellA { width: 100%; } /* 列表容器 */ /* .gkjpcv-shellA-list { display: flex; flex-direction: column; gap: 10px; } */ /* * Shell-A 只控制： * - Item 之间的间距 * - 整体流式节奏 * 不控制： * - Item 内部结构 * - Item 字段样式 */ /* 可选：高密度模式（给 Behavior 用） */ .gkjpcv-shellA.compact .gkjpcv-shellA-list { gap: 6px; } /* 可选：分组弱分隔（Behavior-E 用） */ .gkjpcv-shellA.grouped .gkjpcv-shellA-list>* { padding-bottom: 6px; border-bottom: 1px dashed var(--border-color); } .gkjpcv-shellA.grouped .gkjpcv-shellA-list>*:last-child { border-bottom: none; } /* shell_A - Flow */ /* .gkjpcv-shellA-list{ display:grid; grid-template-columns: repeat(var(--cols-h5), 1fr); gap:14px; } */ /* H5 多列 */ /* .h5-col-2 .gkjpcv-shellA-list{ grid-template-columns:repeat(2,1fr); } */ /* .h5-col-3 .gkjpcv-shellA-list{ grid-template-columns:repeat(3,1fr); } */ /* PC - sm */ /* @media (min-width: 768px){ .gkjpcv-shellA-list{ grid-template-columns: repeat(var(--cols-pc-sm), 1fr); } } */ /* PC - md */ /* @media (min-width: 1024px){ .gkjpcv-shellA-list{ grid-template-columns: repeat(var(--cols-pc-md), 1fr); gap:18px 20px; } } */ /* PC - lg */ /* @media (min-width: 1440px){ .gkjpcv-shellA-list{ grid-template-columns: repeat(var(--cols-pc-lg), 1fr); gap:20px 24px; } } */ /* shell_B_card.css | 卡片栅格 Card Grid Shell */ .gkjpcv-shellB{ width:100%; } /* 栅格容器 */ /* .gkjpcv-shellB-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; } */ /* * Shell-B 只控制： * - grid 列数策略 * - 卡片之间的间距 * - 响应式节奏 * * 不控制： * - Item 内部宽高 * - Item 字体 / 图片 / meta */ /* 中密度（默认） */ /* 高密度模式（Behavior-C1） */ /* .gkjpcv-shellB.compact .gkjpcv-shellB-grid{ gap:10px; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); } */ /* 低密度模式（Behavior-C3） */ /* .gkjpcv-shellB.loose .gkjpcv-shellB-grid{ gap:18px; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); } */ /* 移动端优化 */ /* @media (max-width: 768px){ .gkjpcv-shellB-grid{ grid-template-columns:repeat(2,1fr); gap:12px; } .gkjpcv-shellB.compact .gkjpcv-shellB-grid{ gap:8px; } } */ /* shell_C_ranking.css | 榜单序列 Ranking Shell */ .gkjpcv-shellC{ width:100%; } /* 榜单列表 */ .gkjpcv-shellC-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; } /* * Shell-C 只负责： * - 榜单的整体序列结构 * - item 之间的分隔节奏 * - Top 区域的整体区分 * * 不负责： * - Item 内部的序号样式 * - Item 的字段显示 */ /* 每一行榜单 */ .gkjpcv-shellC-item{ padding:2px 0; } /* 分隔线（默认） */ .gkjpcv-shellC-item + .gkjpcv-shellC-item{ border-top:1px solid var(--border-color); } /* Top 区域强化（Behavior-B 用） */ .gkjpcv-shellC.top .gkjpcv-shellC-item:nth-child(-n+3){ background:var(--bg-soft-color); } /* 高密度榜单（Behavior-C1） */ .gkjpcv-shellC.compact .gkjpcv-shellC-item{ padding:0; } /* 松散榜单（Behavior-C3） */ .gkjpcv-shellC.loose .gkjpcv-shellC-item{ padding:6px 0; } /* shell_D_grouped.css | 分组区块 Grouped Shell */ .gkjpcv-shellD{ width:100%; display:flex; flex-direction:column; gap:20px; } /* 单个分组 */ .gkjpcv-shellD-group{ display:flex; flex-direction:column; gap:10px; padding:12px; background:var(--bg-soft-color); border-radius:12px; } /* 分组头 */ .gkjpcv-shellD-head{ display:flex; align-items:center; justify-content:space-between; } /* 标题 */ .gkjpcv-shellD-title{ margin:0; font-size:16px; font-weight:700; color:var(--text-color); } /* 分组内容 */ .gkjpcv-shellD-body{ display:flex; flex-direction:column; gap:10px; } /* * Shell-D 只控制： * - 分组块结构 * - 分组之间的层级关系 * - 分组内部的 Item 间距 * * 不控制： * - Item 布局 * - Item 结构 */ /* 高密度分组（Behavior-C1） */ .gkjpcv-shellD.compact .gkjpcv-shellD-group{ padding:8px; gap:6px; } /* 松散分组（Behavior-C3） */ .gkjpcv-shellD.loose .gkjpcv-shellD-group{ padding:16px; gap:14px; } /* 可选：分组强调（Behavior-B） */ .gkjpcv-shellD.emphasis .gkjpcv-shellD-group{ box-shadow:0 6px 18px var(--shadow-color); } /* =================================================== * Item Mother B - Media Row * =================================================== */ /* ========== media：横向信息流 ========== */ .item-media{ /* display:flex; gap:12px; align-items:center; */ } .item-media img{ width:120px; aspect-ratio:16/9; object-fit:cover; } .gkjpcv-item.media{ /* display:flex; gap:12px; align-items:flex-start; */ } /* 封面偏宽 */ .gkjpcv-item.media .gkjpcv-item-cover , .gkjpcv-item.media img{ flex:0 0 38%; aspect-ratio:16 / 9; border-radius:10px; overflow:hidden; background:var(--bg-soft-color); } /* 信息区居中 */ .gkjpcv-item.media .gkjpcv-item-info{ padding:6px 4px; display:flex; flex-direction:column; justify-content:center; } .gkjpcv-item.media .gkjpcv-item-cover img{ width:100%; height:100%; object-fit:cover; display:block; } /* 右侧内容 */ .gkjpcv-item.media .gkjpcv-item-body{ flex:1; display:flex; flex-direction:column; gap:4px; } /* 标题 */ .gkjpcv-item.media .gkjpcv-item-title{ font-size:14px; font-weight:700; line-height:1.3; color:var(--text-color); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* 描述 */ .gkjpcv-item.media .gkjpcv-item-desc{ font-size:12px; line-height:1.4; color:var(--text-muted-color); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* =================================================== * Item Mother A - Poster Card * =================================================== */ .gkjpcv-item.poster{ display:flex; flex-direction:column; gap:6px; } /* 封面容器 */ .gkjpcv-item.poster .gkjpcv-item-cover{ position:relative; width:100%; aspect-ratio:2/3; overflow:hidden; border-radius:12px; background:var(--bg-soft-color); } /* 封面图 */ .gkjpcv-item.poster .gkjpcv-item-cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } /* 标题 */ .gkjpcv-item.poster .gkjpcv-item-title{ font-size:14px; line-height:1.3; font-weight:700; color:var(--text-color); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* 元信息 */ .gkjpcv-item.poster .gkjpcv-item-meta{ font-size:12px; color:var(--text-muted-color); } /* 强调态（评分 / 热度） */ .gkjpcv-item.poster.emphasis{ position:relative; } .gkjpcv-item.poster.emphasis::after{ content:''; position:absolute; inset:0; border-radius:12px; box-shadow:0 8px 18px var(--shadow-color); pointer-events:none; } /* =================================================== * Item Mother C - Rank / Text * =================================================== */ /* ========== rank：排行榜 ========== */ .gkjpcv-item.rank::before{ content:attr(data-rank); font-size:18px; font-weight:700; color:var(--primary-color); width:28px; text-align:center; } .gkjpcv-item.rank{ display:flex; align-items:center; gap:10px; padding:6px 0; } /* 序号 */ .gkjpcv-item.rank .rank-no{ flex:0 0 24px; text-align:center; font-weight:900; font-size:14px; color:var(--text-muted-color); } /* Top 强化 */ .gkjpcv-item.rank.top .rank-no{ color:var(--primary-color); font-size:16px; } /* 标题 */ .gkjpcv-item.rank .rank-title{ flex:1; font-size:14px; line-height:1.3; font-weight:600; color:var(--text-color); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ========== text：极简文本 ========== */ .gkjpcv-item.text .gkjpcv-item-cover{ display:none; } .gkjpcv-item.text .gkjpcv-item-info{ padding:10px 0; } .gkjpcv-item.text{ border-bottom:1px solid var(--border-color); }/* ========== item 基础结构 ========== */ .gkjpcv-item{ width:100%; } .gkjpcv-item-link{ display:block; color:inherit; text-decoration:none; } .gkjpcv-item-cover{ position:relative; background:var(--bg-soft-color); overflow:hidden; } .gkjpcv-item-cover img{ width:100%; height:100%; object-fit:cover; display:block; } .gkjpcv-item-score{ position:absolute; right:6px; top:6px; padding:2px 6px; font-size:12px; background:rgba(0,0,0,.65); color:#fff; border-radius:4px; } .gkjpcv-item-info{ padding:6px 4px; } .gkjpcv-item-title{ font-size:14px; line-height:1.4; font-weight:600; } .gkjpcv-item-meta{ font-size:12px; color:var(--text-muted-color); } .gkjpcv-item-extra{ font-size:12px; color:var(--text-muted-color); } /* ====================================================== * Title Clamp Packs (opt-in by .gkjpcv-tclamp) * ====================================================== */ /* 统一命中 title（覆盖 poster/media 里已有的 clamp） */ .gkjpcv-tclamp .gkjpcv-item-title, .gkjpcv-tclamp .gkjpcv-rank-title, .gkjpcv-tclamp .rank-title{ line-height: var(--tc-lh, 1.35); margin: var(--tc-m, 0); font-weight: var(--tc-fw, inherit); /* 统一改为可换行，避免 item_04 那种 nowrap 造成高度不可控:contentReference[oaicite:4]{index=4} */ white-space: normal; text-overflow: clip; overflow: hidden; height: var(--tc-h, 2.7em); max-height: var(--tc-h, 2.7em); /* 默认走多行 clamp（ln1 会被下面覆盖） */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--tc-lines, 2); word-break: break-word; } /* ln1：强制单行省略号（比 -webkit-line-clamp:1 更“可控”） */ .gkjpcv-tclamp.gkjpcv-tclamp-l1 .gkjpcv-item-title, .gkjpcv-tclamp.gkjpcv-tclamp-l1 .gkjpcv-rank-title, .gkjpcv-tclamp.gkjpcv-tclamp-l1 .rank-title{ display: block; white-space: nowrap; text-overflow: ellipsis; -webkit-line-clamp: unset; max-height: var(--tc-h, 1.35em); height: var(--tc-h, 1.35em); } /* ========================= * Pack 0：紧凑型（偏短行高） * ========================= */ .gkjpcv-tclamp.gkjpcv-tclamp-p0{ --tc-lh:1.25; --tc-fw:600; --tc-m:0; } .gkjpcv-tclamp.gkjpcv-tclamp-p0.gkjpcv-tclamp-l1{ --tc-lines:1; --tc-h:1.25em; } .gkjpcv-tclamp.gkjpcv-tclamp-p0.gkjpcv-tclamp-l2{ --tc-lines:2; --tc-h:2.50em; } .gkjpcv-tclamp.gkjpcv-tclamp-p0.gkjpcv-tclamp-l3{ --tc-lines:3; --tc-h:3.75em; } /* ========================= * Pack 1：舒展型（更易读） * ========================= */ .gkjpcv-tclamp.gkjpcv-tclamp-p1{ --tc-lh:1.40; --tc-fw:700; --tc-m:0 0 4px; } .gkjpcv-tclamp.gkjpcv-tclamp-p1.gkjpcv-tclamp-l1{ --tc-lines:1; --tc-h:1.40em; } .gkjpcv-tclamp.gkjpcv-tclamp-p1.gkjpcv-tclamp-l2{ --tc-lines:2; --tc-h:2.80em; } .gkjpcv-tclamp.gkjpcv-tclamp-p1.gkjpcv-tclamp-l3{ --tc-lines:3; --tc-h:4.20em; } /* ========================= * Pack 2：强调标题（行高略小 + 字重更高） * ========================= */ .gkjpcv-tclamp.gkjpcv-tclamp-p2{ --tc-lh:1.30; --tc-fw:800; --tc-m:0 0 2px; } .gkjpcv-tclamp.gkjpcv-tclamp-p2.gkjpcv-tclamp-l1{ --tc-lines:1; --tc-h:1.30em; } .gkjpcv-tclamp.gkjpcv-tclamp-p2.gkjpcv-tclamp-l2{ --tc-lines:2; --tc-h:2.60em; } .gkjpcv-tclamp.gkjpcv-tclamp-p2.gkjpcv-tclamp-l3{ --tc-lines:3; --tc-h:3.90em; } /* ========================= * Pack 3：网格对齐优先（高度更“硬”） * ========================= */ .gkjpcv-tclamp.gkjpcv-tclamp-p3{ --tc-lh:1.28; --tc-fw:650; --tc-m:0; } .gkjpcv-tclamp.gkjpcv-tclamp-p3.gkjpcv-tclamp-l1{ --tc-lines:1; --tc-h:1.28em; } .gkjpcv-tclamp.gkjpcv-tclamp-p3.gkjpcv-tclamp-l2{ --tc-lines:2; --tc-h:2.56em; } .gkjpcv-tclamp.gkjpcv-tclamp-p3.gkjpcv-tclamp-l3{ --tc-lines:3; --tc-h:3.84em; } /* ========================= * Pack 4：更适合英文/混排（行高更大，断词更激进） * ========================= */ .gkjpcv-tclamp.gkjpcv-tclamp-p4{ --tc-lh:1.45; --tc-fw:700; --tc-m:0; } .gkjpcv-tclamp.gkjpcv-tclamp-p4 .gkjpcv-item-title, .gkjpcv-tclamp.gkjpcv-tclamp-p4 .gkjpcv-rank-title, .gkjpcv-tclamp.gkjpcv-tclamp-p4 .rank-title{ overflow-wrap: anywhere; } .gkjpcv-tclamp.gkjpcv-tclamp-p4.gkjpcv-tclamp-l1{ --tc-lines:1; --tc-h:1.45em; } .gkjpcv-tclamp.gkjpcv-tclamp-p4.gkjpcv-tclamp-l2{ --tc-lines:2; --tc-h:2.90em; } .gkjpcv-tclamp.gkjpcv-tclamp-p4.gkjpcv-tclamp-l3{ --tc-lines:3; --tc-h:4.35em; } /* ========================= * Pack 5：极简文本/榜单更合适（轻字重 + 更小 margin） * ========================= */ .gkjpcv-tclamp.gkjpcv-tclamp-p5{ --tc-lh:1.32; --tc-fw:600; --tc-m:0; } .gkjpcv-tclamp.gkjpcv-tclamp-p5.gkjpcv-tclamp-l1{ --tc-lines:1; --tc-h:1.32em; } .gkjpcv-tclamp.gkjpcv-tclamp-p5.gkjpcv-tclamp-l2{ --tc-lines:2; --tc-h:2.64em; } .gkjpcv-tclamp.gkjpcv-tclamp-p5.gkjpcv-tclamp-l3{ --tc-lines:3; --tc-h:3.96em; } /* ========== item_01 基础 ========== */ .gkjpcv-item{ background:var(--bg-soft-color); border-radius:12px; overflow:hidden; } .gkjpcv-item-link{ display:block; color:inherit; } .gkjpcv-item-cover{ position:relative; overflow:hidden; background:#000; } .gkjpcv-item-cover img{ width:100%; height:100%; object-fit:cover; object-position:center center; display:block; } .gkjpcv-item-info{ padding:10px 12px; } .gkjpcv-item-title{ font-size:14px; font-weight:600; line-height:1.35; } .gkjpcv-item-meta{ font-size:12px; color:var(--text-muted-color); margin-top:4px; } .gkjpcv-item-desc{ font-size:12px; color:var(--text-muted-color); margin-top:6px; } .gkjpcv-item-score{ position:absolute; top:6px; right:6px; font-size:12px; padding:2px 6px; border-radius:6px; background:rgba(0,0,0,.65); color:#fff; } /* item_02：封面横向信息流 * 继承：_item_media.css * 无额外样式 */ /* ========== item_02 个性微调（可选） */ .gkjpcv-item.item02 .gkjpcv-item-title{ font-size:15px; } /* item_media.css | item_02 专用（在通用 item 基础上补齐 media 布局） */ .gkjpcv-item.item02{ width:100%; } /* 横向信息流：默认左右布局（由 shell 控制列数） */ .gkjpcv-item.item02 .gkjpcv-item-link{ display:flex; gap:12px; align-items:flex-start; text-decoration:none; } /* 封面：横向信息流用 16:9 更稳（宽>高） */ .gkjpcv-item.item02 .gkjpcv-item-cover{ flex:0 0 42%; max-width:42%; aspect-ratio:16/9; position:relative; overflow:hidden; border-radius:12px; background:var(--bg-soft-color); } .gkjpcv-item.item02 .gkjpcv-item-cover img{ width:100%; height:100%; object-fit:cover; display:block; } /* 评分角标 */ .gkjpcv-item.item02 .gkjpcv-item-score{ position:absolute; right:8px; top:8px; padding:2px 6px; font-size:12px; border-radius:999px; background:rgba(0,0,0,.55); color:#fff; } /* 信息区 */ .gkjpcv-item.item02 .gkjpcv-item-info{ flex:1; min-width:0; } .gkjpcv-item.item02 .gkjpcv-item-title{ font-size:14px; line-height:1.25; margin:0 0 6px; color:var(--text-color); } .gkjpcv-item.item02 .gkjpcv-item-meta{ font-size:12px; color:var(--text-muted-color); margin:0 0 6px; } .gkjpcv-item.item02 .gkjpcv-item-extra{ font-size:12px; color:var(--text-muted-color); margin:0 0 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* PC：稍微压缩封面占比，提升信息量 */ @media (min-width: 1024px){ .gkjpcv-item.item02 .gkjpcv-item-cover{ flex-basis:36%; max-width:36%; border-radius:14px; } .gkjpcv-item.item02 .gkjpcv-item-title{ font-size:15px; } } /* item02-5*/ .gkjpcv-item.gkjpcv-item02 { display: block; } .gkjpcv-item.item02 .gkjpcv-item-cover{ max-width: 100%; }/* ====================================================== * item_03 | 极简文本 / 榜单型 * ====================================================== */ .gkjpcv-item{ display:block; } /* 点击区域 */ .gkjpcv-item-link{ display:flex; align-items:flex-start; gap:12px; padding:10px 6px; text-decoration:none; color:var(--text-color); } /* 序号 */ .gkjpcv-item-index{ min-width:22px; font-size:14px; font-weight:700; color:var(--text-muted-color); text-align:right; } /* 主体 */ .gkjpcv-item-main{ flex:1; min-width:0; } /* 标题 */ .gkjpcv-item-title{ font-size:14px; line-height:1.4; font-weight:500; margin:0 0 4px; color:var(--text-color); } /* 元信息 */ .gkjpcv-item-meta{ display:flex; flex-wrap:wrap; gap:8px; font-size:12px; color:var(--text-muted-color); } /* ===== 行为适配 ===== */ /* 紧凑 */ .compact .gkjpcv-item-link{ padding:6px 4px; } .compact .gkjpcv-item-title{ font-size:13px; } /* 宽松 */ .loose .gkjpcv-item-link{ padding:14px 8px; } /* Top 榜单 */ .top .gkjpcv-item-index{ color:var(--primary-color); } /* 强调 */ .emphasis .gkjpcv-item-link{ background:var(--bg-soft-color); border-radius:8px; } /* hover */ .gkjpcv-item-link:hover .gkjpcv-item-title{ color:var(--primary-color); } /* ====================================================== * item_04 | 评分 / 热度强化型 * ====================================================== */ .gkjpcv-item.poster.score{ display:block; } /* 链接 */ .gkjpcv-item-link{ display:flex; flex-direction:column; gap:6px; color:var(--text-color); text-decoration:none; } /* ===== 封面 ===== */ .gkjpcv-item-cover{ position:relative; width:100%; aspect-ratio: 3 / 4; /* 比 item_01 稍宽，更利于列表 */ overflow:hidden; border-radius:12px; background:var(--bg-soft-color); } .gkjpcv-item-cover img{ width:100%; height:100%; object-fit:cover; display:block; } /* ===== 评分角标 ===== */ .gkjpcv-item-score{ position:absolute; right:6px; top:6px; padding:2px 6px; font-size:12px; font-weight:700; color:#fff; background:var(--accent-color); border-radius:6px; line-height:1; } /* ===== 信息区 ===== */ .gkjpcv-item-info{ padding:0 2px; } /* 标题 */ .gkjpcv-item-title{ font-size:14px; font-weight:600; line-height:1.4; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* 元信息 */ .gkjpcv-item-meta{ display:flex; gap:6px; font-size:12px; color:var(--text-muted-color); } /* ===== 行为适配 ===== */ /* 紧凑 */ .compact .gkjpcv-item-title{ font-size:13px; } /* 宽松 */ .loose .gkjpcv-item-link{ gap:10px; } /* 强调 */ .emphasis .gkjpcv-item-cover{ box-shadow:0 6px 18px var(--shadow-color); } /* hover */ .gkjpcv-item-link:hover .gkjpcv-item-title{ color:var(--primary-color); } /* ====================================================== * item_05 | Top 强化榜单型 * ====================================================== */ .gkjpcv-item.rank{ display:block; } /* 主链接 */ .gkjpcv-rank-link{ display:flex; align-items:center; gap:12px; padding:10px 8px; text-decoration:none; color:var(--text-color); } /* ===== 排名数字 ===== */ .gkjpcv-rank-no{ min-width:28px; font-size:16px; font-weight:700; text-align:center; color:var(--text-muted-color); } /* Top 1-3 强化 */ .gkjpcv-rank-no.rank-1{ color:#d32f2f; font-size:18px; } .gkjpcv-rank-no.rank-2{ color:#f57c00; } .gkjpcv-rank-no.rank-3{ color:#fbc02d; } /* 主体 */ .gkjpcv-rank-main{ flex:1; min-width:0; } /* 标题 */ .gkjpcv-rank-title{ font-size:14px; font-weight:600; margin:0 0 4px; line-height:1.4; } /* 元信息 */ .gkjpcv-rank-meta{ display:flex; gap:8px; font-size:12px; color:var(--text-muted-color); flex-wrap:wrap; } /* 评分 / 热度 */ .gkjpcv-rank-score{ font-size:13px; font-weight:600; color:var(--accent-color); } /* ===== 行为适配 ===== */ /* 紧凑 */ .compact .gkjpcv-rank-link{ padding:6px 6px; } .compact .gkjpcv-rank-title{ font-size:13px; } /* 宽松 */ .loose .gkjpcv-rank-link{ padding:14px 10px; } /* 强调模块 */ .emphasis .gkjpcv-rank-link{ background:var(--bg-soft-color); border-radius:10px; } /* hover */ .gkjpcv-rank-link:hover .gkjpcv-rank-title{ color:var(--primary-color); } /* list/behavior.css | 通用行为状态（容器级） */ /* 折叠：默认隐藏第 6 条及之后（可按模块自行调 N） */ .collapsed .gkjpcv-shellA-list > *:nth-child(n+6), .collapsed .gkjpcv-shellB-grid > *:nth-child(n+7), .collapsed .gkjpcv-shellC-list > *:nth-child(n+11){ display:none; } /* 分组grouped：如果某些 shell 未自带 grouped，可用这个兜底 */ .grouped{ border:1px solid var(--border-color); background:var(--bg-soft-color); } /* 密度 */ .compact { gap:8px; } .loose { gap:16px; } /* 强调：给容器一点“模块感” */ .emphasis{ border-radius:14px; padding: 12px; background:var(--bg-soft-color); } /* Pager base: gkjpcv replaced by CssBuilder Colors do NOT hardcode: relies on CSS vars you set from theme: --c-primary --c-accent --c-bg --c-bg-soft --c-text-primary --c-text-secondary --c-border */ .gkjpcv-pager{ --pg-gap: 8px; --pg-pad: 6px 10px; --pg-r: 12px; --pg-bd: var(--c-border, rgba(0,0,0,.12)); --pg-fg: var(--c-text-primary, #111); --pg-fg2: var(--c-text-secondary, #666); --pg-bg: var(--c-bg-soft, #f1f5f9); --pg-ac: var(--c-primary, #3b82f6); --pg-ac2: var(--c-accent, #f97316); display:flex; align-items:center; justify-content:center; gap: var(--pg-gap); margin: 18px 0; color: var(--pg-fg); flex-wrap: wrap; } .gkjpcv-pager .gkjpcv-pg{ display:flex; align-items:center; justify-content:center; gap: var(--pg-gap); padding: 0; margin: 0; list-style:none; flex-wrap: wrap; } .gkjpcv-pager .gkjpcv-pg-it{ display:inline-flex; } .gkjpcv-pager .gkjpcv-pg-a{ display:inline-flex; align-items:center; justify-content:center; padding: var(--pg-pad); border: 1px solid var(--pg-bd); background: var(--pg-bg); color: var(--pg-fg); border-radius: var(--pg-r); text-decoration:none; line-height: 1; min-width: 34px; user-select:none; transition: filter .15s ease, transform .15s ease; } .gkjpcv-pager a.gkjpcv-pg-a:hover{ filter: brightness(0.98); transform: translateY(-1px); } .gkjpcv-pager .gkjpcv-pg-it.is-current .gkjpcv-pg-a{ background: color-mix(in srgb, var(--pg-ac) 18%, var(--pg-bg)); border-color: color-mix(in srgb, var(--pg-ac) 55%, var(--pg-bd)); color: color-mix(in srgb, var(--pg-ac) 85%, var(--pg-fg)); font-weight: 600; } .gkjpcv-pager .gkjpcv-pg-it.is-disabled .gkjpcv-pg-a, .gkjpcv-pager .gkjpcv-pg-a[aria-disabled="true"]{ opacity: .45; cursor: not-allowed; pointer-events:none; } .gkjpcv-pager .gkjpcv-pg-summary{ font-size: 12px; color: var(--pg-fg2); padding: 4px 10px; border: 1px dashed color-mix(in srgb, var(--pg-bd) 80%, transparent); border-radius: 999px; } /* Tone (0-4) */ .gkjpcv-pager.tone0{ --pg-bg: var(--c-bg-soft, #f1f5f9); } .gkjpcv-pager.tone1{ --pg-bg: color-mix(in srgb, var(--c-bg, #fff) 86%, var(--pg-ac) 14%); } .gkjpcv-pager.tone2{ --pg-bg: color-mix(in srgb, var(--c-bg, #fff) 88%, var(--pg-ac2) 12%); } .gkjpcv-pager.tone3{ --pg-bg: color-mix(in srgb, var(--c-bg, #fff) 92%, var(--pg-bd) 8%); } .gkjpcv-pager.tone4{ --pg-bg: color-mix(in srgb, var(--c-bg, #fff) 82%, var(--pg-ac) 18%); } /* Variant knobs (v0..v19) */ .gkjpcv-pager.v0 { --pg-r: 12px; --pg-gap: 8px; } .gkjpcv-pager.v1 { --pg-r: 999px; --pg-gap: 8px; } .gkjpcv-pager.v2 { --pg-r: 8px; --pg-gap: 10px; --pg-pad: 7px 12px; } .gkjpcv-pager.v3 { --pg-r: 4px; --pg-gap: 10px; --pg-pad: 7px 12px; } .gkjpcv-pager.v4 { --pg-r: 16px; --pg-gap: 6px; --pg-pad: 6px 10px; } .gkjpcv-pager.v5 { --pg-r: 999px; --pg-gap: 6px; --pg-pad: 6px 12px; } .gkjpcv-pager.v6 { --pg-r: 10px; --pg-gap: 12px; --pg-pad: 8px 12px; } .gkjpcv-pager.v7 { --pg-r: 14px; --pg-gap: 6px; --pg-pad: 6px 10px; } .gkjpcv-pager.v8 { --pg-r: 6px; --pg-gap: 8px; --pg-pad: 6px 10px; } .gkjpcv-pager.v9 { --pg-r: 999px; --pg-gap: 12px; --pg-pad: 8px 14px; } .gkjpcv-pager.v10{ --pg-r: 10px; --pg-gap: 6px; --pg-pad: 5px 10px; } .gkjpcv-pager.v11{ --pg-r: 18px; --pg-gap: 6px; --pg-pad: 5px 12px; } .gkjpcv-pager.v12{ --pg-r: 4px; --pg-gap: 14px; --pg-pad: 8px 12px; } .gkjpcv-pager.v13{ --pg-r: 12px; --pg-gap: 14px; --pg-pad: 8px 12px; } .gkjpcv-pager.v14{ --pg-r: 999px;--pg-gap: 10px; --pg-pad: 7px 14px; } .gkjpcv-pager.v15{ --pg-r: 8px; --pg-gap: 6px; --pg-pad: 6px 9px; } .gkjpcv-pager.v16{ --pg-r: 16px; --pg-gap: 10px; --pg-pad: 6px 12px; } .gkjpcv-pager.v17{ --pg-r: 999px;--pg-gap: 4px; --pg-pad: 6px 12px; } .gkjpcv-pager.v18{ --pg-r: 6px; --pg-gap: 4px; --pg-pad: 6px 10px; } .gkjpcv-pager.v19{ --pg-r: 14px; --pg-gap: 12px; --pg-pad: 8px 14px; } /* Family subtle tweaks */ .gkjpcv-pager.f02 .gkjpcv-pg-a{ border-style: dashed; } .gkjpcv-pager.f03 .gkjpcv-pg-a{ border-width: 2px; } .gkjpcv-pager.f04 .gkjpcv-pg-a{ background: color-mix(in srgb, var(--pg-bg) 78%, transparent); backdrop-filter: blur(2px); } .gkjpcv-pager.f05 .gkjpcv-pg-a{ min-width: 38px; } /* Jumper */ .gkjpcv-pager .gkjpcv-pg-jump{ display:flex; align-items:center; gap:8px; margin-left: 10px; } .gkjpcv-pager .gkjpcv-pg-jump label{ font-size: 12px; color: var(--pg-fg2); } .gkjpcv-pager .gkjpcv-pg-inp{ width: 74px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--pg-bd); background: var(--pg-bg); color: var(--pg-fg); } .gkjpcv-pager .gkjpcv-pg-btn{ padding: 6px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--pg-ac) 55%, var(--pg-bd)); background: color-mix(in srgb, var(--pg-ac) 16%, var(--pg-bg)); color: color-mix(in srgb, var(--pg-ac) 85%, var(--pg-fg)); cursor:pointer; } .gkjpcv-seowords { margin: 16px 0; font-size: 14px; line-height: 1.8; color: var(--text-muted-color); } .gkjpcv-seowords a { color: var(--text-color); text-decoration: none; margin-right: 6px; } .gkjpcv-seowords a:hover { color: var(--primary-color); text-decoration: underline; } /* Family B */ .gkjpcv-seowords.B .gkjpcv-seowords-list { display: flex; flex-wrap: wrap; gap: 6px 12px; list-style: none; padding: 0; margin: 0; } /* Family C */ .gkjpcv-seowords.C .gkjpcv-seowords-label { margin-right: 6px; color: var(--text-muted-color); } /* Family D */ .gkjpcv-seowords.D .gkjpcv-seowords-paragraph { margin: 0; } .gkjpcv-breadcrumb { margin: 12px 0; font-size: 14px; line-height: 1.6; color: var(--text-muted-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gkjpcv-breadcrumb a { color: var(--text-color); text-decoration: none; } .gkjpcv-breadcrumb a:hover { color: var(--primary-color); text-decoration: underline; } .gkjpcv-breadcrumb .sep { margin: 0 6px; color: var(--text-muted-color); } .gkjpcv-breadcrumb .current { color: var(--text-color); font-weight: 500; } /* Family B */ .gkjpcv-breadcrumb.B .label { margin-right: 6px; } /* Family D */ .gkjpcv-breadcrumb.D .prefix { margin-right: 6px; color: var(--text-color); } |