/* * WhaleMall × BeeIn LIFF * * Activated when the current domain is marked as "BeeIn MiniAPPs" in * admin → 自訂網域 → 使用通道. Body gets `.beein-liff`; may also * carry `data-theme="dark|light"` (resolved server-side from * X-BeeIn-Theme header / cookie / ?theme= param). * * Strategy: override storefront's existing --* tokens with BeeIn brand * tokens, so all existing components inherit the LIFF look without * needing per-component rewrites. Add safe-area padding so fixed * bottom UI clears the system home-bar. */ /* 防止任何子元素溢位讓整頁可橫向捲動(checkout 偶發發生)。html 也鎖一道, 有時 body overflow-x:hidden 在某些 mobile WebView 不生效。 */ html:has(body.beein-liff), body.beein-liff { overflow-x: hidden; max-width: 100vw; } body.beein-liff { /* BeeIn light tokens (default) */ --bl-bg: #F7F8FA; --bl-surface: #FFFFFF; --bl-surface-2: #F0F2F6; --bl-input-bg: #EEF0F4; --bl-border: #E3E6EC; --bl-text: #1A1F2E; --bl-text-muted: #6B7280; --bl-text-faint: #9CA3AF; --bl-accent: #FF7A00; --bl-accent-soft: #FEF3C7; --bl-danger: #EF4444; --bl-success: #10B981; --bl-shadow-card: 0 1px 2px rgba(0,0,0,.05), 0 4px 10px rgba(0,0,0,.04); /* Adapt existing storefront tokens to BeeIn palette */ --ink: var(--bl-text); --ink-soft: var(--bl-text); --text: var(--bl-text); --text-soft: var(--bl-text-muted); --muted: var(--bl-text-faint); --line: var(--bl-border); --line-soft: var(--bl-surface-2); --surface: var(--bl-surface); --surface-2: var(--bl-surface-2); --surface-3: var(--bl-surface-2); --bg: var(--bl-bg); --accent: var(--bl-accent); --accent-soft: var(--bl-accent-soft); --highlight: var(--bl-accent); --highlight-soft: var(--bl-accent-soft); --shadow-sm: var(--bl-shadow-card); --shadow-md: var(--bl-shadow-card); --shadow-lg: var(--bl-shadow-card); background: var(--bl-bg); color: var(--bl-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; /* Reserve room for system home-bar so fixed footers / floating buttons are not clipped on notched phones. */ padding-bottom: env(safe-area-inset-bottom, 0px); } @media (prefers-color-scheme: dark) { body.beein-liff:not([data-theme="light"]), html[data-theme="dark"] body.beein-liff { --bl-bg: #0E1B33; --bl-surface: #15254A; --bl-surface-2: #1A2B53; --bl-input-bg: #2D3748; --bl-border: #233763; --bl-text: #FFFFFF; --bl-text-muted: #D4DDF0; --bl-text-faint: #95A3C2; --bl-accent: #FF7A00; --bl-accent-soft: #422006; --bl-danger: #F87171; --bl-success: #34D399; --bl-shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3); } } html[data-theme="light"] body.beein-liff { --bl-bg: #F7F8FA; --bl-surface: #FFFFFF; --bl-surface-2: #F0F2F6; --bl-input-bg: #EEF0F4; --bl-border: #E3E6EC; --bl-text: #1A1F2E; --bl-text-muted: #6B7280; --bl-text-faint: #9CA3AF; } html[data-theme="dark"] body.beein-liff { --bl-bg: #0E1B33; --bl-surface: #15254A; --bl-surface-2: #1A2B53; --bl-input-bg: #2D3748; --bl-border: #233763; --bl-text: #FFFFFF; --bl-text-muted: #D4DDF0; --bl-text-faint: #95A3C2; --bl-accent-soft: #422006; --bl-shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3); } /* Tap-highlight & focus-ring suppression for the in-webview feel. Replaced with a subtle :active opacity dip so tapping still feels responsive. */ body.beein-liff, body.beein-liff * { -webkit-tap-highlight-color: transparent !important; } body.beein-liff a, body.beein-liff button, body.beein-liff label, body.beein-liff input, body.beein-liff textarea, body.beein-liff select, body.beein-liff [role="button"], body.beein-liff [role="radio"] { outline: none !important; } body.beein-liff a:active, body.beein-liff button:active:not(:disabled), body.beein-liff .wm-product-card:active, body.beein-liff .product-card:active, body.beein-liff .cart-item:active { opacity: 0.7; transition: opacity 0s ease; } /* Surface adjustments: cards, drawers, dialogs use BeeIn surface tokens. */ body.beein-liff .site, body.beein-liff main, body.beein-liff .wm-card, body.beein-liff .product-card, body.beein-liff .wm-product-card, body.beein-liff dialog, body.beein-liff .cart-drawer { background: var(--bl-surface); color: var(--bl-text); } /* Native BeeIn 提供頂部 nav,我們的 topbar / 站內 header 完全隱藏。 桌面預覽 (沒 BeeIn parent) 也一樣藏掉,確保跟手機體驗一致。 */ body.beein-liff .wm-topbar, body.beein-liff .wm-header, body.beein-liff header.site-header, body.beein-liff .col-full-header { display: none !important; } body.beein-liff input[type="text"], body.beein-liff input[type="email"], body.beein-liff input[type="tel"], body.beein-liff input[type="search"], body.beein-liff input[type="url"], body.beein-liff input[type="password"], body.beein-liff textarea, body.beein-liff select { background: var(--bl-input-bg); color: var(--bl-text); border-color: var(--bl-border); } /* 主要按鈕一律走 BeeIn 強調橘色,避免 --ink 在深色模式變成白色導致按鈕白底白字 */ body.beein-liff button.primary, body.beein-liff .btn-primary, body.beein-liff .wm-button.primary, body.beein-liff .checkout-submit, body.beein-liff .add-to-cart, body.beein-liff .wm-btn, body.beein-liff .wm-btn--lg, body.beein-liff .wm-btn--accent, body.beein-liff .single_add_to_cart_button { background: var(--bl-accent) !important; color: #fff !important; border: none !important; } body.beein-liff .wm-btn--outline, body.beein-liff .wm-btn--ghost { background: transparent !important; color: var(--bl-text) !important; border: 1px solid var(--bl-border) !important; } body.beein-liff .wm-btn:disabled, body.beein-liff button:disabled { opacity: 0.5; cursor: not-allowed; } /* 商品詳情數量加減 / 數字輸入,在深色模式下原本 #fff 背景 + --ink 字色都會壞掉。 */ body.beein-liff .wm-product__qty { background: var(--bl-input-bg); border-color: var(--bl-border); } body.beein-liff .wm-product__qty button, body.beein-liff .wm-product__qty input, body.beein-liff input[type="number"] { background: var(--bl-input-bg) !important; color: var(--bl-text) !important; } /* Hero 文字對比修正:--ink 在深色系統下會被換成白色, 配上 hero 圖片背景就會「很淡」。MiniAPP 內加一層深色 scrim 並強制使用淺色文字 + 文字陰影,確保任何配色都看得清楚。 */ body.beein-liff .wm-hero, body.beein-liff .wm-hero-classic { position: relative; isolation: isolate; } body.beein-liff .wm-hero-classic__banner { position: relative; isolation: isolate; } body.beein-liff .wm-hero-classic__banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%); z-index: 0; pointer-events: none; } body.beein-liff .wm-hero-classic__inner { position: relative; z-index: 1; } body.beein-liff .wm-hero__title, body.beein-liff .wm-hero__eyebrow, body.beein-liff .wm-hero__lead, body.beein-liff .wm-hero-classic__title, body.beein-liff .wm-hero-classic__eyebrow, body.beein-liff .wm-hero-classic__lead { color: #ffffff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 8px rgba(0, 0, 0, 0.35); } body.beein-liff .wm-hero-classic__cta { background: var(--bl-accent) !important; color: #ffffff !important; } /* 站內搜尋已由 BeeIn native nav 接管,所有
與 type=search input 都不再渲染。 */ body.beein-liff form[role="search"], body.beein-liff .wm-search, body.beein-liff input[type="search"] { display: none !important; } /* 結帳/購物車/分頁等元件硬寫 #fff 背景,在深色模式下會跟白字撞色。 全部改吃 BeeIn 表面 token。 */ body.beein-liff .wm-checkout, body.beein-liff .wm-card-block, body.beein-liff .wm-payment-option, body.beein-liff .wm-checkout-summary, body.beein-liff .wm-cart-button, body.beein-liff .wm-chip, body.beein-liff .wm-pagination button, body.beein-liff .wm-pagination a, body.beein-liff .wm-pagination span, body.beein-liff .checkout-item, body.beein-liff .checkout-cvs-option, body.beein-liff .checkout-cvs-store, body.beein-liff .checkout-cvs-breadcrumb button, body.beein-liff .checkout-item-qty, body.beein-liff .checkout-item-qty button, body.beein-liff .checkout-item-qty span, body.beein-liff .checkout-item-remove, body.beein-liff .wm-usp__icon, body.beein-liff .swatchly-swatch, body.beein-liff .wm-drawer, body.beein-liff .cart-qty, body.beein-liff .cart-qty button, body.beein-liff .cart-qty input { background: var(--bl-surface) !important; color: var(--bl-text) !important; border-color: var(--bl-border) !important; } body.beein-liff .checkout-cvs-breadcrumb button.active { background: var(--bl-accent) !important; color: #fff !important; border-color: var(--bl-accent) !important; } body.beein-liff .wm-card-block__title, body.beein-liff .wm-payment-option small { color: var(--bl-text-muted) !important; } body.beein-liff .wm-payment-option strong { color: var(--bl-text) !important; } /* 整個結帳頁面外層的灰底也吃 BeeIn 主 bg,不然 card 跟頁面背景顏色差太多 */ body.beein-liff .wm-checkout { background: var(--bl-bg) !important; } /* MiniAPP 內把「商品明細」aside 排到 form 上面,讓買家先確認金額再填資料。 原本 desktop 版用 position: sticky 把 aside 釘在右側欄,單欄手機版會 變成釘在頁頂遮住內容,所以一併取消 sticky。 */ body.beein-liff .wm-checkout__layout { display: flex; flex-direction: column; } body.beein-liff .wm-checkout__layout > .wm-checkout-summary { order: -1; position: static !important; top: auto !important; } body.beein-liff .wm-checkout__layout > .checkout-form { order: 0; } /* 購物車抽屜 (cart drawer) 底部 CTA 要避開三星等 Android 手勢條: 1) drawer 本體高度 100% 含 safe-area,所以 inner foot 需要預留底部 padding。 2) 抽屜開啟時,Bottom tab nav 與 floating contact 都覆蓋著背景 dim, 看起來像「footer 消失」,直接隱藏掉避免歧義。 */ body.beein-liff .wm-drawer__foot { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; } body.beein-liff:has(.wm-drawer.open) .bl-bottomnav { display: none !important; } /* 結帳頁送出鈕在三星等手機底部手勢條會被遮 — 加保留空間。 */ body.beein-liff .checkout-form > .wm-btn--lg:last-child, body.beein-liff .wm-checkout__submit { margin-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; } body.beein-liff .checkout-cvs-option.active, body.beein-liff .checkout-cvs-store.selected, body.beein-liff .wm-chip.is-active, body.beein-liff .wm-pagination .is-current, body.beein-liff .swatchly-swatch.swatchly-selected, body.beein-liff .swatchly-swatch.swatchly-selected:hover, body.beein-liff .wm-product__option-row button.swatchly-selected, body.beein-liff .wm-product__option-row button.swatchly-selected:hover, body.beein-liff .wm-product__option-row button.is-active, body.beein-liff .wm-product__option-row button.is-active:hover { background: var(--bl-accent) !important; color: #fff !important; border-color: var(--bl-accent) !important; } body.beein-liff .swatchly-swatch.swatchly-selected .swatchly-text, body.beein-liff .swatchly-swatch.swatchly-selected .swatchly-content { color: #fff !important; } body.beein-liff .wm-checkout-field input, body.beein-liff .wm-checkout-field select, body.beein-liff .wm-checkout-field textarea, body.beein-liff .checkout-plugin-fields input, body.beein-liff .checkout-plugin-fields select, body.beein-liff .checkout-plugin-fields textarea { background: var(--bl-input-bg) !important; color: var(--bl-text) !important; border-color: var(--bl-border) !important; } /* Checkbox 預設用 --ink(深色模式變白色)導致打勾後白勾在白底上看不到。 在 MiniAPP 內統一改成綠色 accent,任何模式下都辨識得到。 */ body.beein-liff input[type="checkbox"], body.beein-liff input[type="radio"] { accent-color: var(--bl-success) !important; } body.beein-liff .wm-checkout-field label, body.beein-liff .checkout-plugin-fields label { color: var(--bl-text-muted) !important; } body.beein-liff .wm-checkout-summary__row, body.beein-liff .checkout-total-row { color: var(--bl-text) !important; } body.beein-liff .cart-drawer-discounts { background: rgba(16, 185, 129, 0.12) !important; border-color: var(--bl-success) !important; /* MiniAPP 抽屜底部空間有限,壓縮 padding 以容納兩三條優惠 */ padding: 8px 10px !important; margin-bottom: 10px !important; } body.beein-liff .cart-drawer-discounts__title, body.beein-liff .cart-drawer-discounts__row strong { color: var(--bl-success) !important; } body.beein-liff .cart-drawer-discounts__row { color: var(--bl-text) !important; } body.beein-liff .cart-drawer-discounts__row span { word-break: break-word; } /* 商品列「已觸發」綠標籤在深色模式維持綠 + 白字 */ body.beein-liff .cart-item-promos .promo-badge { background: var(--bl-success) !important; color: #fff !important; } body.beein-liff .cart-item-promos .promo-line { color: var(--bl-text-muted) !important; } body.beein-liff .cart-item-promos .promo-line.is-triggered { color: var(--bl-success) !important; } body.beein-liff .wm-cat-card { background: var(--bl-surface) !important; color: var(--bl-text) !important; border-color: var(--bl-border) !important; } body.beein-liff .wm-cat-card__media { background-color: var(--bl-surface-2) !important; } body.beein-liff .wm-cat-card__body small, body.beein-liff .wm-cat-card__body span { color: var(--bl-text-muted) !important; } /* 訂單建立完成卡片 */ body.beein-liff .wm-order-summary { background: var(--bl-surface) !important; color: var(--bl-text) !important; border-color: var(--bl-border) !important; } body.beein-liff .wm-order-success__lead { color: var(--bl-text-muted) !important; } body.beein-liff .wm-order-summary dt { color: var(--bl-text-muted) !important; } body.beein-liff .wm-order-summary dd { color: var(--bl-text) !important; } /* 物流追蹤頁 */ body.beein-liff .wm-order-track__summary, body.beein-liff .wm-order-track__placeholder { background: var(--bl-surface) !important; color: var(--bl-text) !important; border-color: var(--bl-border) !important; } body.beein-liff .wm-order-track__summary dt, body.beein-liff .wm-order-track__summary small, body.beein-liff .wm-order-track__note, body.beein-liff .wm-order-track__crumb, body.beein-liff .wm-order-track__eyebrow { color: var(--bl-text-muted) !important; } body.beein-liff .wm-order-track__pill { background: var(--bl-accent-soft) !important; color: var(--bl-text) !important; } body.beein-liff .wm-checkout-summary__row--total strong, body.beein-liff .checkout-total-row strong, body.beein-liff .checkout-item-price, body.beein-liff .checkout-item-name { color: var(--bl-text) !important; } /* 卡片邊框灰線 */ body.beein-liff hr, body.beein-liff .wm-card, body.beein-liff .wm-section { border-color: var(--bl-border) !important; } /* Sticky bottom UI (fixed CTA bars) clear the home-bar */ body.beein-liff .wm-sticky-footer, body.beein-liff .checkout-summary-fixed, body.beein-liff .floating-contact { bottom: calc(env(safe-area-inset-bottom, 0px)); } /* Site footer 在 MiniAPP 內也藏起來 — BeeIn 底部 tab bar 取代它。 */ body.beein-liff .wm-footer, body.beein-liff footer.site-footer, body.beein-liff .col-full-footer, body.beein-liff .floating-contact { display: none !important; } /* ── Bottom tab nav (MiniAPP) ───────────────────────────────────────── */ .bl-bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--bl-surface); border-top: 1px solid var(--bl-border); box-shadow: 0 -2px 12px rgba(0,0,0,.05); /* Android(尤其三星 OneUI)的 gesture/navigation bar 不會回報 safe-area-inset-bottom,只能用最小 padding 兜底避免底部被截。 iOS 用 env() 自動撐開瀏海安全區。 */ padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px); } .bl-bottomnav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 0 10px; color: var(--bl-text-muted); font-size: 11px; line-height: 1; text-decoration: none; } .bl-bottomnav a svg { display: block; } .bl-bottomnav a span { white-space: nowrap; } .bl-bottomnav a.is-active, .bl-bottomnav a:active { color: var(--bl-accent); } .bl-bottomnav__badge { position: absolute; top: 6px; right: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bl-accent); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .bl-bottomnav__badge[data-cart-count="0"] { display: none; } /* body 內容底部要預留:bottom-nav 高度 + 系統 gesture/home bar 安全區。 iOS 用 env(),Android 多數 WebView 回傳 0 → 用 max() 兜底,避免最後一行 內容被 fixed bottom-nav 蓋住或被系統 bar 截掉。 */ body.beein-liff { padding-bottom: calc(72px + max(env(safe-area-inset-bottom, 0px), 8px)); }