kate522
d86147f406
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
98 lines
3.5 KiB
CSS
98 lines
3.5 KiB
CSS
/**
|
|
* legacy Variable Compatibility Layer — Global Bridge
|
|
*
|
|
* Maps legacy CSS variable names to AKSRT design tokens.
|
|
* This file allows existing legacy-style markup and third-party components
|
|
* that reference legacy variables to work correctly in AKSRT.
|
|
*
|
|
* @package AKSRT
|
|
*/
|
|
|
|
/* ============================================================
|
|
* Global bridge (all pages)
|
|
* Maps legacy variables → AKSRT tokens so any legacy-style markup works.
|
|
* ============================================================ */
|
|
:root {
|
|
/* Layout (legacy typo preserved for compat) */
|
|
--mian-max-width: var(--container, 1200px);
|
|
|
|
/* Theme color — now matches legacy #f04494 */
|
|
--theme-color: var(--color-primary, #f04494);
|
|
--focus-color: var(--color-primary, #f04494);
|
|
/* legacy focus glow = fixed #fd53a1 @ 0.4 (not the faint primary-soft) */
|
|
--focus-shadow-color: rgba(253, 83, 161, 0.4);
|
|
|
|
/* legacy --focus-color-opacityX — theme-color at fixed alphas.
|
|
Tracks the runtime theme via --color-primary-rgb (injected by
|
|
AKSRT_Scripts::inline_css_vars); fallback RGB = #f04494. */
|
|
--focus-color-opacity1: rgba(var(--color-primary-rgb, 240, 68, 148), 0.1);
|
|
--focus-color-opacity05: rgba(var(--color-primary-rgb, 240, 68, 148), 0.05);
|
|
--focus-color-opacity3: rgba(var(--color-primary-rgb, 240, 68, 148), 0.3);
|
|
|
|
/* Text hierarchy */
|
|
--key-color: var(--color-ink);
|
|
--main-color: var(--color-ink-2);
|
|
--muted-color: var(--color-ink-3);
|
|
--muted-2-color: var(--color-ink-4);
|
|
--muted-3-color: #b1b1b1;
|
|
--muted-4-color: #d2d2d2;
|
|
|
|
/* Surfaces & borders */
|
|
--body-bg-color: var(--surface-page);
|
|
--main-bg-color: var(--surface-1);
|
|
--muted-bg-color: var(--surface-2);
|
|
--main-border-color: var(--color-line);
|
|
--muted-border-color: var(--color-line-soft);
|
|
--main-shadow: rgba(116, 116, 116, 0.08);
|
|
--main-radius: var(--radius, 8px);
|
|
|
|
/* Radius variants */
|
|
--mini-radius: calc(var(--main-radius) / 1.4);
|
|
|
|
/* Blur / glass */
|
|
--blur-bg: rgba(255, 255, 255, 0.8);
|
|
--float-btn-bg: rgba(200, 200, 200, 0.4);
|
|
|
|
/* Header / footer composites */
|
|
--header-bg: var(--blur-bg);
|
|
--header-color: var(--color-ink-2);
|
|
--footer-bg: var(--surface-1);
|
|
--footer-color: var(--color-ink-4);
|
|
|
|
/* Cards — 对齐 legacy 70% */
|
|
--posts-card-scale: 70%;
|
|
--posts-list-scale: 70%;
|
|
}
|
|
|
|
/* legacy --this-* context-coloring DEFAULTS live with the .but system in
|
|
* assets/css/core/buttons.css — they must precede the .b-*/.jb-* color
|
|
* modifiers in source order for the cascade to resolve colored variants
|
|
* correctly, so they cannot sit in this later-loaded bridge file.
|
|
* (Scoped to .but/.badg there, never :root, so .float-btn stays intact.) */
|
|
|
|
/* ============================================================
|
|
* Dark mode bridge — 对齐 legacy dark theme
|
|
* ============================================================ */
|
|
html.dark,
|
|
body.dark-theme {
|
|
--theme-color: var(--color-primary);
|
|
--focus-color: var(--color-primary);
|
|
--focus-shadow-color: rgba(253, 83, 161, 0.25);
|
|
--key-color: var(--color-ink);
|
|
--main-color: var(--color-ink-2);
|
|
--muted-color: var(--color-ink-3);
|
|
--muted-2-color: var(--color-ink-4);
|
|
--muted-3-color: #636469;
|
|
--muted-4-color: #43454a;
|
|
--body-bg-color: var(--surface-page);
|
|
--main-bg-color: var(--surface-1);
|
|
--muted-bg-color: var(--surface-2);
|
|
--main-border-color: var(--color-line);
|
|
--muted-border-color: var(--color-line-soft);
|
|
--main-shadow: rgba(24, 24, 24, 0.1);
|
|
--blur-bg: rgba(50, 51, 53, 0.8);
|
|
--float-btn-bg: rgba(70, 70, 70, 0.4);
|
|
--header-color: var(--color-ink-2);
|
|
--footer-color: var(--color-ink-4);
|
|
}
|