/* ============================================================ BeefSoup Web · Tabler Skin 把 Tabler 的 --tblr-* CSS 變數重新指向 Beef tokens (--beef-*)。 讀者注意:Tabler 採用 Bootstrap 風格的 --tblr-* 變數,改變數即換膚, 不需要覆寫元件本身 class。 載入順序 (見 _Layout.cshtml): 1) tokens.css ← Beef SSOT (--beef-*) 2) tabler.min.css ← Tabler 預設 (--tblr-*) 3) tabler-skin.css ← 本檔:把 --tblr-* 對齊 --beef-* 4) beef.css ← 保留 domain badge / typography / 工具 class 5) site.css / styles.css ============================================================ */ :root, [data-bs-theme="light"] { /* ====== 主色 / 連結 ====== */ --tblr-primary: var(--beef-primary); --tblr-primary-rgb: var(--beef-primary-rgb); --tblr-primary-fg: var(--beef-on-primary); --tblr-primary-darken: var(--beef-primary-hover); --tblr-primary-lt: var(--beef-primary-50); --tblr-link-color: var(--beef-primary); --tblr-link-color-rgb: var(--beef-primary-rgb); --tblr-link-hover-color: var(--beef-primary-hover); /* ====== Body / Surface ====== */ --tblr-body-bg: var(--beef-bg-base); --tblr-body-color: var(--beef-text-high); --tblr-body-color-rgb: 28, 25, 23; --tblr-secondary: var(--beef-text-mid); --tblr-secondary-color: var(--beef-text-mid); --tblr-tertiary-color: var(--beef-text-low); --tblr-muted: var(--beef-text-low); --tblr-bg-surface: var(--beef-bg-card); --tblr-bg-surface-secondary: var(--beef-m3-surface-container-low); --tblr-bg-surface-tertiary: var(--beef-bg-chip); --tblr-bg-forms: var(--beef-bg-card); /* ====== Border / Radius ====== */ --tblr-border-color: var(--beef-border-strong); --tblr-border-color-translucent: var(--beef-border); --tblr-border-radius: var(--beef-radius-md); --tblr-border-radius-sm: var(--beef-radius-sm); --tblr-border-radius-lg: var(--beef-radius-lg); --tblr-border-radius-xl: var(--beef-radius-xl); --tblr-border-radius-pill: var(--beef-radius-pill); /* ====== 字體 / 字級 ====== */ --tblr-font-sans-serif: var(--beef-font-sans); --tblr-font-monospace: var(--beef-font-mono); --tblr-body-font-family: var(--beef-font-sans); --tblr-body-font-size: var(--beef-fs-body); /* ====== 陰影 ====== */ --tblr-box-shadow: var(--beef-elev-3); --tblr-box-shadow-sm: var(--beef-elev-1); --tblr-box-shadow-lg: var(--beef-elev-5); --tblr-box-shadow-input: none; /* ====== 語意色:採用 beef domain 語彙,避免 Tabler 既有的綠/橘飽和過高 ====== */ --tblr-success: var(--beef-traffic-green-fg); --tblr-success-rgb: 21, 128, 61; --tblr-warning: var(--beef-traffic-amber-fg); --tblr-warning-rgb: 194, 65, 12; --tblr-danger: var(--beef-danger); --tblr-danger-rgb: 185, 28, 28; --tblr-info: var(--beef-sync-syncing-fg); --tblr-info-rgb: 3, 105, 161; /* ====== Active / Hover bg (側欄項目、列表 hover) ====== */ --tblr-active-bg: var(--beef-primary-50); --tblr-hover-bg: var(--beef-bg-chip); } /* ------------------------------------------------------------ Sidebar / Navbar — Tabler 預設深色側欄改為 Beef 墨綠 注意:Tabler 的 navbar-dark / navbar-vertical 走 --tblr-navbar-* 系列 ------------------------------------------------------------ */ .navbar-vertical.navbar-dark, .navbar-vertical[data-bs-theme="dark"] { --tblr-navbar-bg: var(--beef-primary); --tblr-navbar-color: rgba(255, 255, 255, 0.78); --tblr-navbar-active-color: var(--beef-on-primary); --tblr-navbar-hover-color: var(--beef-on-primary); --tblr-navbar-brand-color: var(--beef-on-primary); --tblr-navbar-border-color: rgba(255, 255, 255, 0.06); background-color: var(--beef-primary); } .navbar-vertical .nav-link.active, .navbar-vertical .nav-link:hover { background-color: rgba(200, 168, 90, 0.14); /* 香檳金低透明,呼應 secondary */ color: var(--beef-on-primary); } .navbar-vertical .nav-link.active::before { background-color: var(--beef-secondary); } /* 頂部 navbar (白底) */ .navbar-light, .navbar:not(.navbar-vertical) { --tblr-navbar-bg: var(--beef-bg-card); --tblr-navbar-color: var(--beef-text-mid); --tblr-navbar-active-color: var(--beef-primary); --tblr-navbar-hover-color: var(--beef-primary); border-bottom: 1px solid var(--beef-border); } /* ------------------------------------------------------------ Card — Tabler card 用 --tblr-card-* 系列 ------------------------------------------------------------ */ .card { --tblr-card-bg: var(--beef-bg-card); --tblr-card-border-color: var(--beef-border); --tblr-card-border-radius: var(--beef-radius-lg); --tblr-card-box-shadow: var(--beef-elev-2); --tblr-card-cap-bg: var(--beef-bg-card); --tblr-card-cap-color: var(--beef-text-high); --tblr-card-title-color: var(--beef-text-high); --tblr-card-subtitle-color: var(--beef-text-mid); } /* ------------------------------------------------------------ Table — 凍結表頭 + 高密度 (符合 WEB.md §2.1) ------------------------------------------------------------ */ .table { --tblr-table-bg: var(--beef-bg-card); --tblr-table-color: var(--beef-text-high); --tblr-table-border-color: var(--beef-border); --tblr-table-striped-bg: var(--beef-m3-surface-container-low); --tblr-table-hover-bg: var(--beef-bg-chip); --tblr-table-head-bg: var(--beef-m3-surface-container-low); --tblr-table-head-color: var(--beef-text-mid); } /* ------------------------------------------------------------ Form controls — 焦點環走 beef primary ------------------------------------------------------------ */ .form-control, .form-select { --tblr-form-control-bg: var(--beef-bg-card); --tblr-form-control-border-color: var(--beef-border-strong); --tblr-form-control-color: var(--beef-text-high); } .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--beef-primary-300); box-shadow: 0 0 0 .2rem rgba(var(--beef-primary-rgb), 0.20); } /* ------------------------------------------------------------ Page header (Tabler 內建 .page-header) 顏色微調 ------------------------------------------------------------ */ .page-pretitle { color: var(--beef-text-low); letter-spacing: 0.04em; } .page-title { color: var(--beef-text-high); } /* ------------------------------------------------------------ 注意事項 - Tabler 的 .badge.bg-* 不要在新頁面使用,domain badge 走 .beef-badge-* - Tabler 的 .btn-primary 會自動套用上面的 --tblr-primary,可放心使用 - 如需墨綠主 CTA 含香檳金陰影,改用 .btn.btn-beef-primary (定義於 beef.css) ------------------------------------------------------------ */