/* ========================================================================== 1. 全域變數與基礎樣式 (Global Variables & Base Styles) ========================================================================== */ :root { /* --- 主題色彩 (Primary Palette) --- */ --primary-color: #0d6efd; /* 品牌主色 (Bootstrap 5 Blue) */ --secondary-color: #6c757d; /* 輔助灰色 */ --success-color: #198754; /* 成功狀態 */ --danger-color: #dc3545; /* 危險/錯誤狀態 */ --warning-color: #ffc107; /* 警告狀態 */ --background-right-color: #6d8ffd; /* 漸層右側顏色 */ /* --- 背景與表面顏色 (Background & Surface Colors) --- */ --background-white: #ffffff; /* 主背景 (導覽列、卡片) */ --background-light: #f8f9fa; /* 次要背景 (篩選區、頁面) */ /* --- 文字顏色 (Text Colors) --- */ --text-dark: #212529; /* 主要文字 */ --text-muted: #6c757d; /* 輔助/提示文字 */ --text-light: #ffffff; /* 用於深色背景的文字 */ /* --- 邊框與分隔線 (Borders & Dividers) --- */ --border-color: #dee2e6; /* 細邊框顏色 */ --border-radius: 0.375rem; /* 圓角大小 (Bootstrap 5 default) */ /* --- 陰影 (Shadows) --- */ --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* 小陰影 (用於導覽列、卡片) */ --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* 中陰影 */ } /* -------------------------------------------------------------------------- 深色主題變數覆寫 (Dark Theme Overrides) 當 時，覆寫 :root 中的自訂變數，使採用這些 變數的元件（navbar、body、卡片等）與 Bootstrap 5.3 原生元件一同切換為深色。 註：僅覆寫 CSS 變數；少數硬編碼顏色（如內聯 style 的 rgb 值）不在本次範圍。 -------------------------------------------------------------------------- */ [data-bs-theme="dark"] { --background-white: #212529; /* 主背景（導覽列、卡片）改為深色表面 */ --background-light: #121417; /* 次要背景（頁面底色）改為更深 */ --text-dark: #e9ecef; /* 主要文字改為淺色 */ --text-muted: #adb5bd; /* 輔助文字 */ --border-color: #343a40; /* 邊框改為深色 */ --background-right-color: #3d5a80; /* 漸層右側（深色變體） */ } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--background-light); /* 讓整個頁面背景有個淡淡的底色 */ color: var(--text-dark); } /* ========================================================================== 2. 導覽列 (Navbar) ========================================================================== */ .navbar { background-color: var(--background-white); /* 1. 改為純白背景 */ height: 64px; /* 2. 增加高度以提供呼吸空間 */ border-bottom: 1px solid var(--border-color); /* 3. 底部加上細線，與內容區分 */ box-shadow: var(--shadow-sm); /* 4. 使用更柔和的陰影 */ } /* --- 品牌 Logo (Navbar Brand) --- */ .navbar-brand { color: var(--text-dark); /* 品牌文字使用深色 */ font-weight: 600; transition: color 0.2s ease; } .navbar-brand:hover { color: var(--primary-color); /* 滑鼠懸停時變為主色 */ } /* --- 導覽連結 (Nav Links) --- */ .navbar-nav .nav-link { color: var(--text-muted); /* 預設連結使用柔和的灰色 */ font-weight: 500; padding: 0.5rem 1rem; border-radius: var(--border-radius); transition: color 0.2s ease, background-color 0.2s ease; } /* 滑鼠懸停或啟用狀態 */ .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--primary-color); /* 文字變為主色 */ background-color: rgba(var(--primary-color), 0.1); /* 加上一個非常淡的主色背景 */ } /* --- 下拉選單 (Dropdown) --- */ .navbar-nav .nav-link.dropdown-toggle.show { color: var(--primary-color); background-color: rgba(var(--primary-color), 0.1); } /* --- 漢堡選單圖示 (Toggler Icon for Mobile) --- */ .navbar-toggler { border-color: transparent; /* 移除漢堡選單按鈕的邊框 */ } .navbar-toggler-icon { /* Bootstrap 5 預設會根據深色/淺色模式自動調整圖示，通常無需手動設定 */ /* 如果需要強制變色，可以像這樣設定 background-image */ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(33, 37, 41, 0.75 )' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* 表單元素美化 */ .label { font-weight: 500; margin-bottom: 0.3rem; } .table td { font-size: 0.9rem; } /* ========================================================================== 3. 響應式設計 (Responsive) ========================================================================== */ @media (max-width: 992px) { .sidebar { display: none; /* 小螢幕隱藏側邊欄 */ } .main-content { margin-left: 0; } /* 在小螢幕上，讓導覽列連結有更好的點擊區域 */ .navbar-nav .nav-link { padding: 0.75rem 1rem; } }