/** * KEYPOP × WordPress 兼容层 * * 只做两件事：把主题容器还原成通版宽，以及抵消主题对 img / button * 的全局 !important 样式。所有尺寸、颜色、动画仍由 keyplaylite.css 和 * keyplaylite-mobile.css 定义——这里不重复定义设计值。 * * 改这个文件时注意权重：#keyplay-lite-detail-root .foo 是 1-0-1，会压过 * keyplaylite.css 里 0-1-0 的 .kp-* 规则。只在确实要盖主题时才这么写， * 否则会把设计稿的值一起盖掉。 */ /* ── 容器还原 ── * 页面本体是一块固定 2560px（移动端 750px）宽的画布，靠 zoom 缩到视口宽。 * 主题内容容器的 max-width 和左右 padding 会把画布挤窄并留白。 * overflow / transform / filter 也必须清掉：puffs 段用 position: sticky * 吸顶，祖先只要有 overflow:hidden 或 transform，吸顶就失效或错位。 */ body.single-product .site-content, body.single-product .entry-content, body.single-product .content-area, body.single-product #primary, body.single-product main.site-main, body.single-product .page-content, body.single-product article, body.single-post-type-product .site-content, body.single-post-type-product .entry-content, body.single-post-type-product .content-area, body.single-post-type-product #primary, body.single-post-type-product main.site-main, body[class*="page-template"][class*="keyplay" i] .site-content, body[class*="page-template"][class*="keyplay" i] .entry-content, body[class*="page-template"][class*="keyplay" i] .content-area, body[class*="page-template"][class*="keyplay" i] #primary, body[class*="page-template"][class*="keyplay" i] main.site-main, .site-content:has(#keyplay-lite-detail-root), .entry-content:has(#keyplay-lite-detail-root), .content-area:has(#keyplay-lite-detail-root), #primary:has(#keyplay-lite-detail-root), .main-con:has(#keyplay-lite-detail-root), article:has(#keyplay-lite-detail-root) { max-width: none !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; overflow: visible !important; transform: none !important; filter: none !important; } /* 主题自带的文章标题会顶在画布上方，设计稿里没有 */ body.single-product .entry-header, body.single-product .page-header, body.single-product h1.entry-title, body.single-product h1.product_title, body.single-post-type-product .entry-header, body.single-post-type-product h1.entry-title, body.single-post-type-product h1.product_title, body[class*="page-template"][class*="keyplay" i] .entry-header, body[class*="page-template"][class*="keyplay" i] .page-header, body[class*="page-template"][class*="keyplay" i] h1.entry-title { display: none !important; } #keyplay-lite-detail-root { width: 100%; max-width: none; margin: 0; padding: 0; overflow: visible !important; position: relative; /* 独立层叠上下文：画布内部大量 z-index，别和主题弹层互相穿插 */ isolation: isolate; } /* ── 抵消主题的 img 全局样式 ── * 主题写了 img { max-width:100%; display:block !important }。 * 画布里的图按设计稿定死了 width/height，被 max-width 压缩就整段错位。 * keyplaylite.css 里的同名规则包了 :where()（权重 0）压不过主题， * 所以只有这条用 !important。注意：不要在这里碰 height， * keyplaylite.css 给多数图片写了固定高度，一旦被 auto 盖掉就会变形。 */ #keyplay-lite-detail-root img, #keyplay-lite-detail-root video { max-width: none !important; max-height: none !important; } /* 吸顶链路：这几层任意一层出现 overflow:hidden，puffs 段就不吸顶 */ #keyplay-lite-detail-root .kp-viewport, #keyplay-lite-detail-root .kp-puffs-story { overflow: visible !important; } /* ── 抵消主题对 button 的全局样式 ── * 移动端口味轮播的左右箭头和分页圆点是真实