/* ============================================================================ * antd-skin.css — MVP-Ant-Design 版皮（米開朗基羅模式②：Ant Design 重構）— 精修版 * 機制：version.js 選「MVP-Ant-Design」→ .skin-ant → 本檔覆蓋 theme.css token。 * theme.css 高度 var 驅動，覆蓋 token 即 cascade 全站；少數硬寫色/形狀另補。 * 高標版「內容 100% 不變、只換樣式」。bespoke ⇄ antd 並存，靠版本切換。 * 對映依據：DS_TOKENS（拉斐爾）momo bespoke → Ant Design 5.x canonical。 * ========================================================================== */ /* ── 1. 設計 token 全量覆蓋（cascade 驅動全站，多數露餡靠這段一次收掉）──── */ body.skin-ant { --magenta-1:#e6f4ff; --magenta-2:#bae0ff; --magenta-3:#91caff; --magenta-4:#69b1ff; --magenta-5:#4096ff; --magenta-6:#1677ff; --magenta-7:#0958d9; --magenta-8:#003eb3; --magenta-9:#002c8c; --magenta-10:#001d66; --color-primary:#1677ff; --color-primary-hover:#4096ff; --color-primary-active:#0958d9; --color-primary-bg:#e6f4ff; --momo:#1677ff; --color-text:rgba(0,0,0,.88); --color-text-secondary:rgba(0,0,0,.65); --color-text-tertiary:rgba(0,0,0,.45); --color-border:#d9d9d9; --color-border-secondary:#f0f0f0; --color-split:rgba(5,5,5,.06); --color-bg-layout:#f5f5f5; --bg:#f5f5f5; --gray-2:#fafafa; --gray-3:#f5f5f5; --gray-4:#f0f0f0; --color-bg-mask:rgba(0,0,0,.45); --border-radius:6px; --border-radius-lg:8px; --border-radius-sm:4px; --border-radius-xs:2px; --font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans TC","PingFang TC",sans-serif; --line-height:1.5714; --brand-gradient:#1677ff; --brand-gradient-h:#1677ff; --brand-gradient-soft:#fafafa; --box-shadow-tertiary:0 1px 2px 0 rgba(0,0,0,.03),0 1px 6px -1px rgba(0,0,0,.02),0 2px 4px 0 rgba(0,0,0,.02); --box-shadow:0 6px 16px 0 rgba(0,0,0,.08),0 3px 6px -4px rgba(0,0,0,.12),0 9px 28px 8px rgba(0,0,0,.05); --box-shadow-drawer-right:-6px 0 16px 0 rgba(0,0,0,.08),-3px 0 6px -4px rgba(0,0,0,.12),-9px 0 28px 8px rgba(0,0,0,.05); font-family:var(--font-family); } /* ── 2. 主按鈕：antd primary 實心藍、無框、6px、2px 投影 ──────────────── */ body.skin-ant .btn.primary, body.skin-ant .btn.pink, body.skin-ant .btn-tour { background:#1677ff !important; border:1px solid #1677ff !important; color:#fff !important; box-shadow:0 2px 0 rgba(5,145,255,.1) !important; filter:none !important; } body.skin-ant .btn.primary:hover, body.skin-ant .btn.pink:hover, body.skin-ant .btn-tour:hover { background:#4096ff !important; border-color:#4096ff !important; color:#fff !important; filter:none !important; } body.skin-ant .btn.primary:active, body.skin-ant .btn.pink:active { background:#0958d9 !important; border-color:#0958d9 !important; } /* ── 3. 次按鈕（default）＋控制高度 32/24/40、antd 字重 400 ──────────── */ body.skin-ant .btn { height:32px; border-radius:6px; font-weight:400; } body.skin-ant .btn:hover { border-color:#4096ff; color:#4096ff; background:#fff; } body.skin-ant .btn.sm { height:24px; } body.skin-ant .btn.lg { height:40px; } /* ── 4. 卡片：antd 8px、淺邊、antd 三階淺陰影 ─────────────────────────── */ body.skin-ant .card { border-radius:8px; border-color:#f0f0f0; box-shadow:0 1px 2px 0 rgba(0,0,0,.03),0 1px 6px -1px rgba(0,0,0,.02),0 2px 4px 0 rgba(0,0,0,.02); } /* ── 5. page-head：漸層標題字 → antd 中性近黑 ────────────────────────── */ body.skin-ant .page-head h1 { background:none !important; -webkit-text-fill-color:initial !important; color:rgba(0,0,0,.88) !important; } /* ── 6. KPI 卡：頂/左彩條（含 data 傳入的 #eb2f96 等）統一收斂為 antd primary ─ */ body.skin-ant .kpi::before { background:#1677ff !important; } body.skin-ant .kpi:hover { border-color:#91caff; } /* ── 7. Sidebar：antd Menu 選中態（淺藍底＋藍字，移除左側 accent bar）──── */ body.skin-ant .nav-item.active { background:#e6f4ff; color:#1677ff; } body.skin-ant .nav-item.active::before { display:none; } /* ── 8. tag-new → antd Tag 風淺藍底＋藍字＋淺邊 ───────────────────────── */ body.skin-ant .tag-new { background:#e6f4ff; color:#0958d9; border-color:#91caff; } /* ── 9. Badge → antd Tag：膠囊改方角 4px、補 1px 同色系邊框、字重 400 ───── */ body.skin-ant .badge { border-radius:4px; line-height:20px; padding:0 7px; border:1px solid transparent; font-weight:400; } body.skin-ant .badge.blue { border-color:#91caff; color:#1677ff; } body.skin-ant .badge.green { border-color:#b7eb8f; } body.skin-ant .badge.orange { border-color:#ffd591; } body.skin-ant .badge.purple { border-color:#d3adf7; } body.skin-ant .badge.red { border-color:#ffa39e; } body.skin-ant .badge.cyan { border-color:#87e8de; } body.skin-ant .badge.yellow { border-color:#fff1b8; } body.skin-ant .badge.gray { border-color:#d9d9d9; } body.skin-ant .badge.pink { background:#e6f4ff; color:#0958d9; border-color:#91caff; } /* ── 10. 品牌標誌/頭像：漸層 → antd 實心藍 ───────────────────────────── */ body.skin-ant .brand .logo, body.skin-ant .user-chip .avatar { background:#1677ff !important; } /* ── 11. Segmented（.seg）：實心藍選中 → antd 白片浮於灰軌 ─────────────── */ body.skin-ant .seg { background:#f5f5f5; border:none; border-radius:8px; padding:2px; gap:2px; } body.skin-ant .seg span, body.skin-ant .seg button { border-radius:6px; color:rgba(0,0,0,.65); } body.skin-ant .seg span.on, body.skin-ant .seg button.on { background:#fff !important; color:rgba(0,0,0,.88) !important; font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.06); } /* ── 12. Switch（.toggle）/ range → antd 藍 ──────────────────────────── */ body.skin-ant .toggle.on { background:#1677ff; } body.skin-ant input[type=range] { accent-color:#1677ff; } /* ── 13. 輸入/搜尋框：高度 32、antd 6px、藍 focus 環 ─────────────────── */ body.skin-ant .cb-search { height:32px; border-radius:6px; } body.skin-ant .cb-search:focus-within { border-color:#4096ff; box-shadow:0 0 0 2px rgba(5,145,255,.1); } /* ── 14. 表格 hover：桃紅暈 → antd 中性灰 ────────────────────────────── */ body.skin-ant .tc-tbl tr:hover td { background:#fafafa; } /* ── 15. 頁面 JS「硬寫」桃紅/紫漸層底（var 抓不到）→ antd 中性面板 ─────── */ body.skin-ant [style*="fff0f6"], body.skin-ant [style*="f9f0ff"] { background:#fafafa !important; border-color:#f0f0f0 !important; } body.skin-ant .hero-card { background:#fafafa !important; border-color:#f0f0f0 !important; } /* ── 16. Toast：momo 深色膠囊 → antd message 白卡 ────────────────────── */ body.skin-ant .toast { background:#fff; color:rgba(0,0,0,.88); border:1px solid #f0f0f0; border-radius:8px; box-shadow:0 6px 16px 0 rgba(0,0,0,.08),0 3px 6px -4px rgba(0,0,0,.12),0 9px 28px 8px rgba(0,0,0,.05); } /* ── 17. 上傳區（dragger）：洋紅虛線 → antd #d9d9d9 虛線、灰底、藍 hover ── */ body.skin-ant .upload-zone { background:#fafafa; border-color:#d9d9d9; } body.skin-ant .upload-zone:hover { border-color:#4096ff; } body.skin-ant .upload-zone .uz-ico { color:#1677ff; }