/* ======================================================================= * adminlte4-compat.css * --------------------------------------------------------------------- * AdminLTE v3 → v4 升級相容性 shim * Target: AdminLTE v4 RC7（底層 Bootstrap 5.3.8） * 來源：letsgo-madm 模組 upd_bootstrap 分支 M1 pilot + Task 2.1/2.2 積累 * 用途：補回 AdminLTE v4 移除的 v3 規則（整組移除的 class、alias、色票、 * utility、layout rename、預設色變更等） * 依賴：project.css 的 :root { --brand-teal, --brand-teal-hover } 品牌色變數 * 載入順序：adminlte.css → **本檔** → bs5-compat.css → form-group-compat.css * → project.css（最後 override 前一切） * 與本檔成對的是 bs5-compat.css（處理 BS5 預設行為差異） * ======================================================================= */ /* --- Body 字型 stack：AdminLTE v4 改為 "Source Sans 3", system-ui， * 與 v3 視覺微異；以變數形式還原 AdminLTE v3 body stack 一字不差。 * 不設 -webkit-font-smoothing / -moz-osx-font-smoothing，保留瀏覽器 auto（subpixel-antialiased），對齊舊版 letsgo-madm 視覺 --- */ :root { /* 對齊舊版 t-payment letsgo-madm 實測 body stack（AdminLTE v3 + BS4 預設），一字不差 */ --madm-font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } body { font-family: var(--madm-font-family); } /* --- label 粗體：AdminLTE v4 移除了 v3 的 label 700 規則，補 shim 對齊舊版視覺（源自舊 adminlte.css） --- */ label:not(.form-check-label):not(.custom-file-label) { font-weight: 700; } /* --- .text-sm --- */ .text-sm { font-size: .875rem !important; } /* AdminLTE 4 移除 .img-circle alias，補 shim（對應舊 adminlte.css:28963） */ .img-circle { border-radius: 50%; } /* AdminLTE v3 dark sidebar scope 用 body class `[class*="sidebar-dark-"] .sidebar a`（adminlte.css:31755）， * AdminLTE v4 改為 `.app-sidebar[data-bs-theme="dark"]`（見 fragments/menu.html:6），舊 selector 失配。 * 結果：sidebar 內的 a（如 user-panel 使用者名稱連結）失色 → BS5 dark theme fallback 到淡藍。 * 改用 BS5 variable scope override：dark sidebar 內 --bs-link-color = #c2c7d0（淺灰白）， * .nav-link 有自己 --bs-nav-link-color 不受污染。此處不靠 .accent-olive 前綴 * BS5.3 用 --bs-link-color-rgb，需同時 override RGB triplet 版本。 */ .app-sidebar[data-bs-theme="dark"] { --bs-link-color: #c2c7d0; --bs-link-color-rgb: 194, 199, 208; --bs-link-hover-color: #fff; --bs-link-hover-color-rgb: 255, 255, 255; } /* AdminLTE 4 移除 olive 色 card variant；新增 shim 讓 .card-outline.card-olive 保留舊版 teal 3px top-border * （用 AdminLTE 4 的 --lte-card-variant-* 變數系統，對齊 .card-primary/.card-success 等內建 variant 寫法） */ .card-olive { --lte-card-variant-bg: var(--brand-teal); --lte-card-variant-bg-rgb: 0, 154, 179; --lte-card-variant-color: #fff; --lte-card-variant-color-rgb: 255, 255, 255; } /* card-olive 的 --lte-card-variant-* 變數會 CSS 繼承洩漏到其巢狀子 card， * 命中 AdminLTE 4 的 .card[class*=card-]:not(.card-outline)>.card-header 規則， * 把子卡 header 染成 teal 實心底+白字（同色的 teal icon 因此隱形）。 * help 幫助中心的 FAQ（.card-default 包在 .card-outline.card-olive 分類卡內）即中招； * 舊版 header 為 transparent 白底+深灰字。於 card-olive 內的非 outline 子卡重置變數阻斷繼承。 */ .card-olive .card:not(.card-outline) { --lte-card-variant-bg: transparent; --lte-card-variant-color: var(--bs-body-color); } /* AdminLTE 4 主 css 移除 v3 alt/adminlte.core.css 的字級/字重 utility，補 shim * .text-bold：card-title 粗體；.text-xs：footer 小字；.text-lg：放大圖示/標題（保留 !important 對齊 v3 specificity） * 舊版主檔原值：.text-sm .875rem / .text-xs .75rem / .text-lg 1.25rem（皆 !important） */ .text-bold { font-weight: 700; } .text-xs { font-size: 0.75rem !important; } .text-lg { font-size: 1.25rem !important; } /* AdminLTE 4 移除 .btn-default（BS5 亦不存在此 class）；補 AdminLTE 3 原樣式 * 對齊 modal「取消」按鈕視覺：淺灰底 + 灰 border + 深字 * 對應舊 adminlte.css: `background-color:#f8f9fa; border-color:#ddd; color:#444` * 否則 BS5 fallback 為透明底 + hairline 邊框 + 黑字（幽靈按鈕） */ .btn-default { background-color: #f8f9fa; border-color: #ddd; color: #444; } .btn-default:hover, .btn-default:focus { background-color: #e9ecef; border-color: #c6c6c6; color: #444; } /* AdminLTE 4 移除 .form-control-border（原在 alt/adminlte.components.css:185-202） * 該 utility 讓 input/select 只保留底線外觀（上/左/右邊框與圓角皆移除）， * letsgo-madm orderData / memberData / reports10 等查詢欄位大量使用。 * 補回 v3 原規則，並處理 BS5 focus 藍色光暈（v3 用 box-shadow:inherit 消除）。 */ .form-control.form-control-border, .form-select.form-control-border { border-top: 0; border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; } .form-control.form-control-border:focus, .form-select.form-control-border:focus { box-shadow: none; } .form-control.form-control-border.border-width-2, .form-select.form-control-border.border-width-2 { border-bottom-width: 2px; } .form-control.form-control-border.border-width-3, .form-select.form-control-border.border-width-3 { border-bottom-width: 3px; } /* AdminLTE 4 移除整組 .user-panel 規則；補完整 shim 對齊 AdminLTE 3 行為 * - align-items:center → 頭像與文字垂直置中 * - .image padding → 頭像離 sidebar 左邊與文字有合理間距 * - .image img → 2.1rem（新 avatar5.png 自然尺寸 215×215 需強制縮小） * - .info a text-decoration:none → 舊版無底線 */ .user-panel { align-items: center; } .user-panel .image { padding-left: 0.8rem; padding-right: 0.5rem; } .user-panel .image img { width: 2.1rem; height: 2.1rem; max-width: 2.1rem; } .user-panel .info { padding: 5px 5px 5px 10px; line-height: 1rem; white-space: nowrap; } .user-panel .info a { text-decoration: none; } /* 對齊舊版頂部配色（以 baseline/madm/old/dashboard/1440.png 實際像素為準）： * - 左上 sidebar-brand = DARK rgb(52,58,64)，跟 sidebar 同色 * - 右上 app-header (navbar) = TEAL rgb(0,154,179)，全寬 teal 橫條 * AdminLTE 4 預設：sidebar-brand 繼承 bg-body-secondary（dark 主題下為 52,58,64 ✓ 不需 override） * app-header 用 bg-body（白），需 shim 回 teal */ .brand-link, .brand-link:hover, .brand-text { color: #fff !important; } .app-header { background-color: var(--brand-teal) !important; } .app-header .nav-link { color: #fff; } .app-header .nav-link:hover, .app-header .nav-link:focus { color: rgba(255, 255, 255, 0.85); } /* navbar 最右側（.ms-auto） */ .app-header .navbar-nav.ms-auto .dropdown-menu { left: auto; right: 0; } /* Card collapse icon：收合時 fa-minus 切 fa-plus（舊版 AdminLTE 3 JS 行為，AdminLTE 4 已移除） * 純 CSS 方案：用 ::before 覆蓋 Font Awesome unicode，不動 HTML 也不寫 JS * Font Awesome Free 6：fa-plus = \f067（跟 FA 4+ 一致，穩定） */ .collapsed-card .card-header [data-lte-toggle="card-collapse"] .fa-minus::before { content: "\f067"; } /* .app-footer 內的對齊舊版：teal 色 + 無底線 * （舊版像素實測 rgb(0,154,179)=teal 且無 underline；新版 BS5 預設 rgb(13,110,253) 藍+底線） * 主因 AdminLTE v4 footer class rename（.main-footer → .app-footer）+ 預設色改； * 次因 BS5 a 預設 underline，但 BS4 時代有 adminlte.css a reset 規則 cover 掉。 * project.css :root 的 --bs-link-color teal override 已涵蓋色，此處續用明寫規則 * 的原因是 text-decoration:none（variable 無法傳 decoration 屬性）。 */ .app-footer a { color: var(--brand-teal); text-decoration: none; } .app-footer a:hover, .app-footer a:focus { color: var(--brand-teal-hover); } /* Mobile (<992px) 修正 AdminLTE 4 grid 結構性問題：sidebar 無論 collapse/open 狀態 * 都固定覆蓋在 grid 第一欄，導致 .app-footer 被擠到左上 + 主內容僅剩右半寬。 * Fix：mobile 下一律單欄 grid，sidebar 靠 position:fixed（AdminLTE 4 mobile 預設行為） * 自行覆蓋或隱藏，不占版面空間。涵蓋 sidebar-collapse / sidebar-open / sidebar-mini 等 * 任何 body class 組合。 */ @media (max-width: 991.98px) { .app-wrapper { grid-template-columns: 1fr; grid-template-areas: "lte-app-header" "lte-app-main" "lte-app-footer"; } } /* --- .app-content-header padding --- */ .app-content-header { padding: 15px 8px; } /* --- 登入頁 footer 色：`.bg-olive` 在 AdminLTE v4 改色（olive 綠不對齊舊版 teal）， * 於登入頁 footer 強制還原 letsgo teal 底 + 白字 --- */ .page-login #login_footer .bg-olive { background-color: var(--brand-teal) !important; color: #fff; } .page-login #login_footer .bg-olive a { color: #fff; } /* --- AdminLTE v4 移除整組 .text-* utility（v3 alt/adminlte.core.css:15169 * .text-olive { color:#3d9970!important }）。.text-olive 用於 DataTables * processing 圖示（fragments/js.html:121