/** * PanoWeb 現代化主題樣式 * 版本: 1.0.0 * 日期: 2025-12-21 * * 此檔案提供現代化的 CSS 變數和基礎樣式 * 可與現有 Bootstrap 3.x / ZUI 框架共存 * * ======================================== * 使用說明 * ======================================== * * 1. 引入方式： * 在 HTML 中添加： * * * 2. 啟用現代化樣式： * 在標籤添加 class="modern-theme" * * 3. 可用的現代化元件類別： * * 按鈕： * - .btn-modern 基礎按鈕樣式 * - .btn-modern-primary 主要按鈕（藍色） * - .btn-modern-secondary 次要按鈕（灰色） * - .btn-modern-success 成功按鈕（綠色） * - .btn-modern-danger 危險按鈕（紅色） * * 卡片： * - .card-modern 現代化卡片容器 * - .card-modern-header 卡片標題區 * - .card-modern-body 卡片內容區 * - .card-modern-footer 卡片底部區 * * 表單： * - .input-modern 現代化輸入框 * - .label-modern 現代化標籤 * * 徽章： * - .badge-modern 基礎徽章 * - .badge-modern-primary 主要徽章 * - .badge-modern-success 成功徽章 * - .badge-modern-warning 警告徽章 * - .badge-modern-danger 危險徽章 * * 4. CSS 變數使用： * 可在自訂樣式中使用 var(--變數名稱) * 例如：color: var(--primary-600); * * 5. 已應用此樣式的模板： * - template/new/library/header.lbi * - template/new/library/header_b.lbi * - template/black2021/library/header.lbi * - template/black2021/library/header_b.lbi * - template/black2021/library/header_m.lbi * - template/black2021/library/header_new.lbi * - template/default/library/header.lbi * * ======================================== */ :root { /* 主色調 - 現代藍色系 */ --primary-50: #eff6ff; --primary-100: #dbeafe; --primary-200: #bfdbfe; --primary-300: #93c5fd; --primary-400: #60a5fa; --primary-500: #3b82f6; --primary-600: #2563eb; --primary-700: #1d4ed8; --primary-800: #1e40af; --primary-900: #1e3a8a; /* 次要色調 - 紫色系 */ --secondary-50: #faf5ff; --secondary-100: #f3e8ff; --secondary-200: #e9d5ff; --secondary-300: #d8b4fe; --secondary-400: #c084fc; --secondary-500: #a855f7; --secondary-600: #9333ea; --secondary-700: #7e22ce; --secondary-800: #6b21a8; --secondary-900: #581c87; /* 成功色 - 綠色系 */ --success-50: #f0fdf4; --success-500: #22c55e; --success-600: #16a34a; --success-700: #15803d; /* 警告色 - 橙色系 */ --warning-50: #fffbeb; --warning-500: #f59e0b; --warning-600: #d97706; --warning-700: #b45309; /* 錯誤色 - 紅色系 */ --danger-50: #fef2f2; --danger-500: #ef4444; --danger-600: #dc2626; --danger-700: #b91c1c; /* 中性色 - 灰色系 */ --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; /* 字體 */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace; /* 字體大小 */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; /* 間距 */ --spacing-1: 0.25rem; --spacing-2: 0.5rem; --spacing-3: 0.75rem; --spacing-4: 1rem; --spacing-5: 1.25rem; --spacing-6: 1.5rem; --spacing-8: 2rem; --spacing-10: 2.5rem; --spacing-12: 3rem; --spacing-16: 4rem; /* 圓角 */ --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-full: 9999px; /* 陰影 */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* 過渡動畫 */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 350ms ease; /* Z-index 層級 */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; } /* 深色模式支援 */ @media (prefers-color-scheme: dark) { :root { --bg-primary: var(--gray-900); --bg-secondary: var(--gray-800); --text-primary: var(--gray-100); --text-secondary: var(--gray-400); --border-color: var(--gray-700); } } /* ======================================== 現代化基礎樣式 ======================================== */ /* 全域字體設定 */ body.modern-theme { font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.6; color: var(--text-primary); background-color: var(--bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 現代化按鈕 */ .btn-modern { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-4); font-size: var(--text-sm); font-weight: 500; line-height: 1.5; border-radius: var(--radius-lg); border: 1px solid transparent; cursor: pointer; transition: all var(--transition-fast); text-decoration: none; } .btn-modern:focus { outline: none; box-shadow: 0 0 0 3px var(--primary-200); } .btn-modern-primary { background-color: var(--primary-600); color: white; } .btn-modern-primary:hover { background-color: var(--primary-700); } .btn-modern-secondary { background-color: var(--gray-100); color: var(--gray-700); border-color: var(--gray-300); } .btn-modern-secondary:hover { background-color: var(--gray-200); } .btn-modern-success { background-color: var(--success-600); color: white; } .btn-modern-success:hover { background-color: var(--success-700); } .btn-modern-danger { background-color: var(--danger-600); color: white; } .btn-modern-danger:hover { background-color: var(--danger-700); } /* 現代化卡片 */ .card-modern { background: var(--bg-primary); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); border: 1px solid var(--border-color); overflow: hidden; transition: box-shadow var(--transition-normal); } .card-modern:hover { box-shadow: var(--shadow-lg); } .card-modern-header { padding: var(--spacing-4) var(--spacing-6); border-bottom: 1px solid var(--border-color); background: var(--bg-secondary); } .card-modern-body { padding: var(--spacing-6); } .card-modern-footer { padding: var(--spacing-4) var(--spacing-6); border-top: 1px solid var(--border-color); background: var(--bg-secondary); } /* 現代化表單輸入 */ .input-modern { display: block; width: 100%; padding: var(--spacing-2) var(--spacing-3); font-size: var(--text-sm); line-height: 1.5; color: var(--text-primary); background-color: var(--bg-primary); border: 1px solid var(--gray-300); border-radius: var(--radius-md); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .input-modern:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px var(--primary-100); } .input-modern::placeholder { color: var(--gray-400); } /* 現代化標籤 */ .label-modern { display: block; margin-bottom: var(--spacing-1); font-size: var(--text-sm); font-weight: 500; color: var(--gray-700); } /* 現代化徽章 */ .badge-modern { display: inline-flex; align-items: center; padding: var(--spacing-1) var(--spacing-2); font-size: var(--text-xs); font-weight: 500; border-radius: var(--radius-full); } .badge-modern-primary { background-color: var(--primary-100); color: var(--primary-700); } .badge-modern-success { background-color: var(--success-50); color: var(--success-700); } .badge-modern-warning { background-color: var(--warning-50); color: var(--warning-700); } .badge-modern-danger { background-color: var(--danger-50); color: var(--danger-700); }