fix(single): fill slide and video cover media like the image cover

Slide-mode images rendered at intrinsic ratio, top-aligned inside the
swiper chain (--pc-height:auto left .swiper-wrapper content-sized), so
the taller box showed a gap at the bottom and never center-cropped like
the image cover. The video cover had the same problem through
video-player.js (height:auto, capped at 70vh).

- aksrt_render_slider scale mode emits --pc-height/--m-height 100% so
  the wrapper/slide/img chain fills the ratio box and object-fit: cover
  center-crops inside it (same pattern as the .scale-height widgets)
- video-player.js renders the video at height:100% + object-fit:cover;
  with an undimensioned container height:100% degrades to auto,
  matching the previous behavior
- drop the dead .single-cover padding-bottom rules (every producer owns
  its height inline, and the rule squeezed the absolutely positioned
  slide inner) and the orphaned --single-cover-scale var in
  tokens.css/compat-vars.css/main.css/InlineStyleBuilder
- rebuild public bundles; extend the single-cover-height contract
This commit is contained in:
kate522 committed 2026-09-05 18:53:45 +08:00
1 parent 9fa7190232
commit d86147f406
11 files changed
+67 -19

No files matched your search

+3 -1
View File
@@ -28,7 +28,9 @@
style.id = STYLE_ID;
style.textContent =
'.aksrt-video{position:relative;background:#000;border-radius:12px;overflow:hidden;cursor:pointer;}' +
'.aksrt-video video{display:block;width:100%;height:auto;max-height:70vh;}' +
// 组件容器(文章封面比例盒)有确定高度:视频铺满并居中裁切,对齐单图封面;
// 容器无确定高度时 height:100% 退化为 auto,行为与原 height:auto 一致。
'.aksrt-video video{display:block;width:100%;height:100%;object-fit:cover;}' +
'.aksrt-video__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.3);transition:opacity 0.3s;pointer-events:none;}' +
'.aksrt-video.is-playing .aksrt-video__overlay{opacity:0;}' +
'.aksrt-video__play{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,0.9);display:flex;align-items:center;justify-content:center;font-size:24px;color:#1a1a2e;box-shadow:0 4px 20px rgba(0,0,0,0.3);transition:transform 0.2s;}' +