/* ========================================================================= jk_order 主題：深色 / 淺色 - 透過 切換 - 全站顏色、陰影、邊框、圓角都用 CSS 變數統一管理 - 設計語彙沿用 website/dashboard 風格（深底色 + 霓虹點綴） ========================================================================= */ :root { /* 主色 */ --primary: #2563eb; --primary-dark: #1d4ed8; --primary-soft: rgba(37, 99, 235, 0.08); --success: #16a34a; --warning: #d97706; --danger: #dc2626; --info: #0891b2; /* 背景層 */ --bg-base: #f8f9fa; --bg-warm: #eef1f6; --surface: #ffffff; --surface-glass: rgba(255, 255, 255, 0.85); --surface-elev: #ffffff; /* 文字 */ --text-primary: #1c1917; --text-secondary: #475569; --text-muted: #94a3b8; --text-inverse: #ffffff; /* 邊框 */ --border: rgba(0, 0, 0, 0.08); --border-refined: rgba(0, 0, 0, 0.12); /* 陰影 */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.10), 0 8px 24px rgba(0, 0, 0, 0.05); /* 圓角 */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; /* 強調色（沿用 website 的赭色系） */ --accent: #b45309; --accent-light: #fef3c7; --accent-bg: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); /* 元件色（navbar / dropdown / table / input） */ --navbar-bg: rgba(255, 255, 255, 0.92); --navbar-text: #1c1917; --dropdown-bg: #ffffff; --dropdown-text: #1c1917; --table-header-bg: #f1f5f9; --table-row-hover: #f8fafc; --input-bg: #ffffff; --input-border: rgba(0, 0, 0, 0.15); --input-text: #1c1917; /* 滾動條 */ --scrollbar-thumb: rgba(0, 0, 0, 0.15); --scrollbar-thumb-hover: rgba(0, 0, 0, 0.25); } [data-theme="dark"] { --primary: #60a5fa; --primary-dark: #3b82f6; --primary-soft: rgba(96, 165, 250, 0.12); --success: #4ade80; --warning: #fbbf24; --danger: #f87171; --info: #22d3ee; --bg-base: #0f172a; --bg-warm: #1e293b; --surface: #1e293b; --surface-glass: rgba(15, 23, 42, 0.85); --surface-elev: #273449; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-inverse: #0f172a; --border: rgba(255, 255, 255, 0.10); --border-refined: rgba(255, 255, 255, 0.16); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.7), 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.8), 0 8px 24px rgba(0, 0, 0, 0.6); --accent: #fbbf24; --accent-light: #78350f; --accent-bg: linear-gradient(135deg, #78350f 0%, #92400e 100%); --navbar-bg: rgba(15, 23, 42, 0.92); --navbar-text: #f1f5f9; --dropdown-bg: #1e293b; --dropdown-text: #f1f5f9; --table-header-bg: #273449; --table-row-hover: #2d3f5c; --input-bg: #0f172a; --input-border: rgba(255, 255, 255, 0.18); --input-text: #f1f5f9; --scrollbar-thumb: rgba(255, 255, 255, 0.15); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.30); } /* ---------- 全站套用 CSS 變數 ---------- */ html, body { background-color: var(--bg-base); color: var(--text-primary); transition: background-color 0.3s ease, color 0.3s ease; } .navbar { background-color: var(--navbar-bg) !important; color: var(--navbar-text) !important; border-bottom: 1px solid var(--border); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .navbar-brand, .navbar-brand i { color: var(--navbar-text) !important; } .user-info a { color: var(--navbar-text) !important; } .user-info a:hover { background-color: var(--primary-soft) !important; color: var(--primary) !important; } .container, .content-wrapper, .wrapper { background-color: var(--bg-base); color: var(--text-primary); } .card { background-color: var(--surface) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-sm); } .card-header, .card-body, .card-footer { background-color: var(--surface) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } .table { color: var(--text-primary) !important; background-color: var(--surface) !important; border-color: var(--border) !important; } .table > thead > tr > th { background-color: var(--table-header-bg) !important; color: var(--text-secondary) !important; border-color: var(--border) !important; } .table > tbody > tr > td { background-color: var(--surface) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } .table > tbody > tr:hover > td { background-color: var(--table-row-hover) !important; } .alert { border-radius: var(--radius-md); border-width: 1px; } .alert-success { background-color: rgba(74, 222, 128, 0.15); color: var(--success); border-color: rgba(74, 222, 128, 0.4); } .alert-error, .alert-danger { background-color: rgba(248, 113, 113, 0.15); color: var(--danger); border-color: rgba(248, 113, 113, 0.4); } .alert-info { background-color: var(--primary-soft); color: var(--primary); border-color: rgba(96, 165, 250, 0.4); } .form-control, .form-select { background-color: var(--input-bg) !important; color: var(--input-text) !important; border-color: var(--input-border) !important; } .form-control:focus, .form-select:focus { background-color: var(--input-bg) !important; color: var(--input-text) !important; border-color: var(--primary) !important; box-shadow: 0 0 0 0.2rem var(--primary-soft) !important; } .form-label { color: var(--text-secondary) !important; } .btn-primary { background-color: var(--primary) !important; border-color: var(--primary) !important; color: var(--text-inverse) !important; } .btn-primary:hover { background-color: var(--primary-dark) !important; border-color: var(--primary-dark) !important; } .btn-secondary, .btn-outline-secondary { border-color: var(--border-refined) !important; color: var(--text-secondary) !important; background-color: var(--surface) !important; } .btn-secondary:hover, .btn-outline-secondary:hover { background-color: var(--bg-warm) !important; color: var(--text-primary) !important; } .btn-danger { background-color: var(--danger) !important; border-color: var(--danger) !important; } .text-primary { color: var(--primary) !important; } .text-muted { color: var(--text-muted) !important; } .text-secondary { color: var(--text-secondary) !important; } .bg-light, .bg-white { background-color: var(--surface) !important; } .footer { color: var(--text-muted) !important; border-top: 1px solid var(--border); } /* Modal */ .modal-content { background-color: var(--surface) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; } .modal-header, .modal-body, .modal-footer { background-color: var(--surface) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } /* Dropdown */ .dropdown-menu { background-color: var(--dropdown-bg) !important; color: var(--dropdown-text) !important; border: 1px solid var(--border) !important; } .dropdown-item { color: var(--dropdown-text) !important; } .dropdown-item:hover { background-color: var(--primary-soft) !important; color: var(--primary) !important; } /* 滾動條 */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-base); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* 主題切換按鈕 */ .theme-toggle { background: transparent; border: 1px solid var(--border); color: var(--navbar-text); padding: 0.4rem 0.7rem; border-radius: var(--radius-md); cursor: pointer; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.4rem; transition: background 0.2s, border-color 0.2s; } .theme-toggle:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: inline; } [data-theme="dark"] .theme-toggle .icon-sun { display: inline; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* 首頁 dashboard 風格：玻璃擬態卡片 + 強調色 accent bar */ .dashboard-card { background: var(--surface-glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-md); transition: all 0.3s; color: var(--text-primary); } .dashboard-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .card-accent-bar { height: 4px; border-radius: 2px; background: var(--accent-color, var(--primary)); margin-bottom: 1rem; box-shadow: 0 0 8px var(--accent-color, var(--primary)); } .title-accent-bar { width: 4px; height: 1.5rem; border-radius: 2px; background: var(--primary); box-shadow: 0 0 6px var(--primary-soft); } .glow-border { position: absolute; inset: 0; border-radius: var(--radius-lg); pointer-events: none; box-shadow: 0 0 16px var(--glow-color, var(--primary)); opacity: 0.3; } .icon-box { width: 3rem; height: 3rem; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--icon-color, var(--primary)); display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; } .badge-glow { background: var(--primary-soft); color: var(--badge-color, var(--primary)); border-radius: var(--radius-sm); padding: 0.2rem 0.6rem; font-size: 0.85rem; } .stat-number { font-size: 2rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; } .stat-label { color: var(--text-secondary); font-size: 0.95rem; } .stat-sub { color: var(--text-muted); font-size: 0.85rem; } /* ============================================================ ey-erp 風格 TopNav（沿用 .ey-erp 主題色變數 + Bootstrap grid） - sticky 頂部 - 左 logo + 品牌、中間主導覽（active 狀態）、右 icon-btn + user dropdown ============================================================ */ .topnav { position: sticky; top: 0; z-index: 1000; background-color: var(--navbar-bg); color: var(--navbar-text); border-bottom: 1px solid var(--border); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .topnav-inner { max-width: 100%; margin: 0 auto; padding: 0 1rem; display: flex; align-items: center; height: 56px; gap: 1rem; } /* ---------- 左：Logo + 品牌 ---------- */ .topnav-brand { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; color: var(--navbar-text); } .topnav-logo { width: 28px; height: 28px; border-radius: 6px; background: var(--primary); color: var(--text-inverse); display: flex; align-items: center; justify-content: center; font-size: 14px; } .topnav-brand-text { font-weight: 600; font-size: 0.95rem; letter-spacing: 0.04em; } /* ---------- 中：主導覽 ---------- */ .topnav-menu { display: flex; align-items: center; gap: 0.15rem; flex: 1; margin-left: 0.5rem; overflow-x: auto; scrollbar-width: thin; } .topnav-item { display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; border-radius: 8px; font-size: 0.875rem; color: var(--navbar-text); text-decoration: none; opacity: 0.7; transition: background-color 0.15s, opacity 0.15s, color 0.15s; white-space: nowrap; flex-shrink: 0; } .topnav-item i { font-size: 0.95rem; } .topnav-item:hover { background-color: var(--bg-warm); opacity: 1; color: var(--text-primary); } .topnav-item.active { background-color: var(--bg-warm); color: var(--text-primary); opacity: 1; box-shadow: inset 0 0 0 1px var(--border-refined); } /* ---------- 右：icon-btn + user dropdown ---------- */ .topnav-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .topnav-icon-btn { width: 36px; height: 36px; border-radius: 8px; background-color: var(--bg-warm); border: 1px solid var(--border); color: var(--text-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; font-size: 0.95rem; } .topnav-icon-btn:hover { background-color: var(--primary-soft); border-color: var(--primary); color: var(--primary); } /* theme-toggle icon 顯示邏輯（沿用 theme.css 規則） */ .topnav-icon-btn .icon-sun { display: none; } .topnav-icon-btn .icon-moon { display: inline; } [data-theme="dark"] .topnav-icon-btn .icon-sun { display: inline; } [data-theme="dark"] .topnav-icon-btn .icon-moon { display: none; } /* ---------- 用戶 dropdown ---------- */ .topnav-user { position: relative; } .topnav-user-btn { display: flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.5rem; border-radius: 8px; background-color: var(--bg-warm); border: 1px solid var(--border); color: var(--text-primary); cursor: pointer; transition: background-color 0.15s; } .topnav-user-btn:hover { background-color: var(--primary-soft); border-color: var(--primary); } .topnav-avatar { width: 28px; height: 28px; border-radius: 50%; background-color: var(--primary); color: var(--text-inverse); display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 600; flex-shrink: 0; } .topnav-username { font-size: 0.875rem; font-weight: 500; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topnav-chevron { font-size: 0.7rem; opacity: 0.7; transition: transform 0.2s; } .topnav-user-btn[aria-expanded="true"] .topnav-chevron { transform: rotate(180deg); } .topnav-user-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; background-color: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.15s, transform 0.15s, visibility 0.15s; z-index: 1100; } .topnav-user-menu.active { opacity: 1; visibility: visible; transform: translateY(0); } .topnav-user-info { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); background-color: var(--bg-warm); } .topnav-user-info-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); } .topnav-user-info-role { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.15rem; } .topnav-user-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 1rem; color: var(--text-primary); font-size: 0.875rem; text-decoration: none; transition: background-color 0.12s; } .topnav-user-item i { width: 16px; color: var(--text-secondary); } .topnav-user-item:hover { background-color: var(--bg-warm); } .topnav-user-logout { border-top: 1px solid var(--border); color: var(--danger); } .topnav-user-logout i { color: var(--danger); } /* ---------- 手機：主導覽收起來，顯示漢堡 ---------- */ .topnav-menu-burger { display: none; } @media (max-width: 991.98px) { .topnav-inner { padding: 0 0.75rem; gap: 0.5rem; } .topnav-menu { position: fixed; top: 56px; left: 0; right: 0; bottom: 0; flex-direction: column; align-items: stretch; gap: 0; background-color: var(--bg-card); border-top: 1px solid var(--border); padding: 0.75rem 0.5rem; margin-left: 0; overflow-y: auto; transform: translateX(100%); transition: transform 0.25s; z-index: 999; } .topnav-menu.open { transform: translateX(0); } .topnav-item { padding: 0.7rem 0.85rem; font-size: 0.95rem; border-radius: 8px; } .topnav-username { display: none !important; } .topnav-menu-burger { display: flex; width: 36px; height: 36px; border-radius: 8px; background-color: var(--bg-warm); border: 1px solid var(--border); color: var(--text-primary); align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; } .topnav-menu-burger:hover { background-color: var(--primary-soft); border-color: var(--primary); color: var(--primary); } }