/* XPP Popular 7-Day — image left, text right 主题适配： 自适应父容器：使用容器查询 + clamp/cqw。文字区与图片同高；标题可换行；日期在标题下。 */ /* 作为容器参与查询 */ .xpp7-wrap { container-type: inline-size; container-name: xppwrap; color: var(--xpp-fg); } .xpp7-wrap, .xpp7-list, .xpp7-card, .xpp7-thumb, .xpp7-text, .xpp7-title-a { box-sizing: border-box; max-width: 100%; } /* Light theme (默认) */ html[data-bs-theme="light"] .xpp7-wrap, html:not([data-bs-theme]) .xpp7-wrap { --xpp-bg: #ffffff; --xpp-card: #f7f8fb; --xpp-fg: #0b1220; --xpp-sub: #5b6c86; --xpp-border: rgba(12, 20, 33, 0.08); --xpp-rank: #3a63ff; --xpp-thumb-bg: #e9eef7; --xpp-shadow: 0 2px 12px rgba(0,0,0,.07); --xpp-shadow-hover: 0 6px 20px rgba(0,0,0,.12); --xpp-accent-grad: linear-gradient(135deg,#6aa2ff,#b0c8ff); } /* Dark theme */ html[data-bs-theme="dark"] .xpp7-wrap { --xpp-bg: #0b0f19; --xpp-card: #111726; --xpp-fg: #e7eefc; --xpp-sub: #9fb0cf; --xpp-border: rgba(255,255,255,0.08); --xpp-rank: #84a9ff; --xpp-thumb-bg: #1b2236; --xpp-shadow: 0 2px 12px rgba(0,0,0,.25); --xpp-shadow-hover: 0 6px 20px rgba(0,0,0,.35); --xpp-accent-grad: linear-gradient(135deg,#2a4b8f,#5a7ce0); } .xpp7-title { font-weight: 700; font-size: clamp(16px, 2.8cqw, 20px); margin: 4px 0 12px; } .xpp7-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } /* === 卡片：左右结构（图片在左，文字在右；同高） === */ .xpp7-card { display: flex; align-items: stretch; /* 两侧同高 */ gap: 10px; background: var(--xpp-card); border: 1px solid var(--xpp-border); border-radius: 14px; box-shadow: var(--xpp-shadow); padding: 10px; text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; overflow: hidden; /* 防止内部溢出 */ width: 100%; } .xpp7-card:hover { transform: translateY(-2px); box-shadow: var(--xpp-shadow-hover); border-color: transparent; } /* 左侧缩略图（宽度随容器缩放；16:9） */ .xpp7-thumb { position: relative; flex: 0 0 auto; width: clamp(80px, 30cqw, 160px); /* 宽度跟随父容器 */ aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--xpp-thumb-bg); display: block; } .xpp7-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .xpp7-fallback { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: clamp(18px, 5cqw, 28px); height: 100%; width: 100%; background: var(--xpp-accent-grad); color: rgba(255,255,255,.92); } /* 名次徽标覆盖在缩略图左上角 */ .xpp7-rank-badge { position: absolute; top: 6px; left: 6px; padding: 2px 6px; border-radius: 999px; background: var(--xpp-fg); color: var(--xpp-bg); font-weight: 800; font-size: clamp(12px, 2.5cqw, 14px); line-height: 1; box-shadow: 0 2px 6px rgba(0,0,0,.18); opacity: .95; } /* 右侧文字区：高度与图片一致；标题可换行，日期在下；超出隐藏 */ .xpp7-text { flex: 1 1 auto; min-width: 0; /* 允许收缩并出现省略 */ display: flex; flex-direction: column; align-items: stretch; overflow: hidden; /* 限制在图片同高区域内 */ } /* 标题：可多行换行，占据剩余空间 */ .xpp7-title-a { flex: 1 1 auto; min-height: 0; font-size: clamp(14px, 2.6cqw, 16px); font-weight: 700; color: inherit; overflow: hidden; display: block; /* 提升断词质量，避免溢出 */ word-break: break-word; overflow-wrap: anywhere; } /* 日期/浏览：固定在底部一行 */ .xpp7-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; color: var(--xpp-sub); font-size: clamp(12px, 2.2cqw, 13px); white-space: nowrap; margin-top: 6px; } .xpp7-meta time { opacity: .9; } .xpp7-views { margin-left: auto; opacity: .95; } /* 容器查询：越窄越紧凑，保证完全合身且可读 */ @container xppwrap (max-width: 420px) { .xpp7-card { padding: 8px; gap: 8px; } .xpp7-thumb { width: clamp(72px, 36cqw, 128px); border-radius: 8px; } .xpp7-rank-badge { top: 4px; left: 4px; } .xpp7-title { font-size: clamp(16px, 3.2cqw, 18px); } .xpp7-title-a { font-size: clamp(13px, 2.8cqw, 15px); } .xpp7-meta { font-size: clamp(11.5px, 2.4cqw, 12.5px); } } @container xppwrap (max-width: 300px) { .xpp7-card { padding: 6px; gap: 6px; border-radius: 10px; } .xpp7-thumb { width: clamp(60px, 38cqw, 100px); } .xpp7-title-a { font-size: 13px; } .xpp7-meta { font-size: 12px; } } /* 避免主题外层样式干扰导致溢出 */ .xpp7-card * { max-width: 100%; }