/* ===== CloudHeadQuarter Design System ===== Glass morphism 深藍主色。Light / Dark theme。 僅視覺層，不影響任何商業邏輯。 Token 規範來源：UI_Enhancement.md × cloudheadquarter_login.html */ /* ===================================================== 1. CSS Variables (Design Tokens) 所有顏色、間距、圓角、陰影皆集中於此定義， 修改此處即可全站同步更新視覺效果。 Light 模式預設值在 :root 定義， Dark 模式覆蓋值在 html.dark 定義（見第 2 節）。 ===================================================== */ :root { /* 文字色 --text-primary: 主要文字（例：表格資料、輸入欄位值） --text-secondary: 次要文字（例：欄位標籤、說明文字） --text-placeholder: 輸入欄位佔位符（例：「請輸入商品名稱」灰字） --text-muted: 最淡文字（例：時間戳記、補充說明） --text-inverse: 反色文字，用於深色背景（例：深藍按鈕上的白字） */ /* Typography */ --text-primary: #0F172A; --text-secondary: #334155; --text-placeholder: #64748B; --text-muted: #94A3B8; --text-inverse: #FFFFFF; /* 頁面背景漸層色 由 site.css 的 body { background: var(--bg-primary) } 套用 淺色模式：灰藍漸層；深色模式：深夜藍漸層（見第 2 節） */ /* Page background — gradient, picked up by body { background: var(--bg-primary) } in site.css */ --bg-primary: linear-gradient(135deg, #F0F4F8 0%, #DDE4EE 100%); /* 表面色（Glass morphism 毛玻璃效果） --bg-card: 卡片背景（例：查詢篩選卡片、資料列表卡片） --bg-header: 頂部/次要導覽列背景 --bg-sidebar: 左側側欄背景（深藍色，主要用於 .chq-sidebar） */ /* Glass surfaces */ --bg-card: rgba(255,255,255,0.85); --bg-header: #FFFFFF; --bg-sidebar: #1E3A8A; /* 邊框色 --border-color: 一般邊框（例：卡片外框、表格分隔線、輸入框邊框） --border-strong: 較明顯邊框（例：hover 時的輸入框） --border-glass: 毛玻璃邊框（例：登入卡片的白色光邊） */ /* Borders */ --border-color: rgba(37,99,235,0.12); --border-strong: rgba(37,99,235,0.28); --border-glass: rgba(255,255,255,0.6); /* 主色調（深藍色系） --accent: 主色（例：按鈕背景、連結 hover 顏色） --accent-dark: 深主色（例：Banner 系統名稱文字、表頭文字） --accent-light: 淡主色底（例：輸入框 focus 光暈背景） --accent-hover-bg: 極淡主色（例：表格 row hover、按鈕 hover 底色） */ /* Accent — deep blue */ --accent: #2563EB; --accent-dark: #1E3A8A; --accent-light: rgba(37,99,235,0.1); --accent-hover-bg: rgba(37,99,235,0.07); /* 語意色（用於狀態標籤 .chq-badge-* 的底色參考） --color-success: 成功/正常（例：badge-green「已出貨」） --color-warning: 警告（例：badge-amber「待確認」） --color-error: 錯誤/危險（例：badge-red「已取消」） --color-info: 資訊（例：badge-blue「處理中」） */ /* Semantic */ --color-success: #16a34a; --color-warning: #d97706; --color-error: #dc2626; --color-info: #2563EB; /* 圓角大小 --radius-sm: 小圓角（例：badge 狀態標籤） --radius-md: 中圓角（例：輸入欄位 .chq-input） --radius-btn: 按鈕圓角（例：.chq-btn-primary） --radius-lg: 大圓角（例：卡片容器 .chq-card） */ /* Border radius */ --radius-sm: 6px; --radius-md: 12px; /* inputs */ --radius-btn: 14px; /* buttons */ --radius-lg: 20px; /* cards */ /* 間距（統一的空白間隔基準） xs=4px, sm=8px, md=16px, lg=24px, xl=32px 例：.chq-card 的 padding 使用 --space-lg（24px） .chq-main 手機版 padding 使用 --space-md（16px） */ /* Spacing */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 20px; --space-xl: 32px; /* 陰影 --shadow-card: 卡片陰影（例：查詢結果卡片的視覺浮起感） --shadow-header: 頁首陰影（例：頂部 Banner 底部陰影線） --shadow-dropdown: 下拉選單陰影 */ /* Shadows */ --shadow-card: 0 8px 32px rgba(37,99,235,0.08), 0 1px 0 rgba(255,255,255,0.7) inset; --shadow-header: 0 4px 24px rgba(37,99,235,0.06); --shadow-dropdown: 0 8px 32px rgba(0,0,0,0.14); /* 過渡動畫（全站統一的互動過渡速度與緩動曲線） 例：按鈕 hover、卡片 hover、輸入框 focus 等效果 */ /* Transition */ --transition: all 0.2s cubic-bezier(.4,0,.2,1); } /* ===================================================== 2. Dark Mode Tokens 當 加上 class="dark" 時套用（由 _Layout.cshtml 的主題切換按鈕 JavaScript 控制 html.classList 切換）。 只覆蓋需要變更的變數，其他保持第 1 節的值不變。 ===================================================== */ html.dark { /* 深色模式文字：轉為淺灰白色系，在深色背景上保持可讀性 */ --text-primary: #F1F5F9; --text-secondary: #CBD5E1; --text-placeholder: #64748B; --text-muted: #475569; /* 深色模式背景：深夜藍漸層 */ --bg-primary: linear-gradient(135deg, #0F172A 0%, #050A15 100%); --bg-card: rgba(15,23,42,0.82); --bg-header: rgba(15,23,42,0.88); --bg-sidebar: #050A15; /* 深色模式邊框：白色半透明細線 */ --border-color: rgba(255,255,255,0.07); --border-strong: rgba(255,255,255,0.14); --border-glass: rgba(255,255,255,0.07); /* 深色模式主色調：調亮為天藍色（在深色背景上更易辨識） */ --accent: #3B82F6; --accent-dark: #60A5FA; --accent-light: rgba(59,130,246,0.15); --accent-hover-bg: rgba(59,130,246,0.1); /* 深色模式陰影：增加不透明度，補償深色背景下對比不足 */ --shadow-card: 0 8px 32px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.04) inset; --shadow-header: 0 4px 24px rgba(0,0,0,0.3); } /* 確保背景漸層覆蓋整個頁面，內容短時不會在底部留白 例：登入頁、只有少量資料的清單頁 */ /* Body min-height so gradient covers full page */ body { min-height: 100vh; } /* ===================================================== 3. Animations 進場動畫定義，套用於需要動態效果的元件。 ===================================================== */ /* fadeInUp：由下往上淡入（例：登入卡片出現動畫）*/ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* fadeIn：純淡入（例：頁面內容載入後顯示）*/ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* shimmer：閃爍掃光效果（預留，可用於骨架屏載入中效果）*/ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* 工具類別：直接加在元素上即可套用對應動畫 例：
*/ .chq-fade-in-up { animation: fadeInUp 0.8s cubic-bezier(.4,0,.2,1) both; } .chq-fade-in { animation: fadeIn 0.5s cubic-bezier(.4,0,.2,1) both; } /* ===================================================== 4. Cards (glass morphism) 毛玻璃卡片：半透明背景 + backdrop-filter 模糊效果 用於包裝篩選條件、資料列表等主要內容區塊。 例：BranchOrder/List.cshtml 的查詢條件區、結果清單區 ===================================================== */ .chq-card { background: var(--bg-card); backdrop-filter: blur(20px); /* 毛玻璃：模糊卡片背後的背景 */ -webkit-backdrop-filter: blur(20px); /* Safari 相容 */ border: 1px solid var(--border-glass); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-card); transition: var(--transition); } /* 深色模式改用一般邊框（毛玻璃白邊在深色背景上太亮） */ html.dark .chq-card { border-color: var(--border-color); } /* 滑鼠懸停時邊框變藍、陰影加深，給使用者視覺回饋 */ .chq-card:hover { border-color: rgba(37,99,235,0.35); box-shadow: 0 12px 40px rgba(37,99,235,0.12), 0 1px 0 rgba(255,255,255,0.7) inset; } html.dark .chq-card:hover { border-color: rgba(59,130,246,0.3); box-shadow: 0 12px 40px rgba(59,130,246,0.12); } /* Compact variant — for filter/header cards on mobile-first pages */ /* 緊湊型卡片（較小的內距） 例：行動版頁面頂部的篩選條件卡片 */ .chq-card-compact { padding: 20px; } @media (max-width: 767px) { .chq-card-compact { padding: 18px; } } /* ===================================================== 5. Buttons 三種語意按鈕：主要操作 / 次要操作 / 危險操作 ===================================================== */ /* 主要按鈕（深藍漸層底白字） 例：「查詢」、「確認訂單」、「儲存」 */ .chq-btn-primary { background: linear-gradient(135deg, #2563EB 0%, #1E3A8A 100%); border: none; color: #fff; border-radius: var(--radius-btn); padding: 10px 24px; font-size: 1.2rem; font-weight: 600; letter-spacing: 0.3px; cursor: pointer; transition: var(--transition); box-shadow: 0 4px 15px rgba(37,99,235,0.35); } .chq-btn-primary:hover { filter: brightness(1.1); /* 懸停時整體提亮 10% */ box-shadow: 0 6px 24px rgba(37,99,235,0.5); } .chq-btn-primary:focus { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,0.3); /* 焦點環（鍵盤操作可見） */ } .chq-btn-primary:active { filter: brightness(0.95); } /* 按下時略暗，產生點擊感 */ /* 次要按鈕（毛玻璃底，邊框輪廓） 例：「清除條件」、「取消」、「返回」 */ .chq-btn-secondary { background: var(--bg-card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border-color); color: var(--text-secondary); border-radius: var(--radius-btn); padding: 10px 24px; font-size: 1.2rem; font-weight: 500; cursor: pointer; transition: var(--transition); } .chq-btn-secondary:hover { border-color: var(--accent); /* 懸停時邊框換主色 */ color: var(--accent); /* 文字換主色 */ background: var(--accent-hover-bg); } /* 危險按鈕（紅色系，半透明底） 例：「刪除訂單」、「作廢」等不可逆操作 */ .chq-btn-danger { background: rgba(220,38,38,0.08); border: 1px solid rgba(220,38,38,0.4); color: #dc2626; border-radius: var(--radius-btn); padding: 10px 24px; font-size: 1.2rem; font-weight: 600; cursor: pointer; transition: var(--transition); } .chq-btn-danger:hover { background: rgba(220,38,38,0.14); box-shadow: 0 4px 15px rgba(220,38,38,0.2); } /* ===================================================== 6. Inputs 統一的輸入欄位樣式（文字輸入、下拉選單皆適用） 例：訂單查詢日期區間、商品名稱搜尋、倉庫選擇下拉 ===================================================== */ .chq-input { background: rgba(255,255,255,0.7); /* 半透明白底（毛玻璃效果） */ border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 10px 14px; color: var(--text-primary); font-size: 1.125rem; width: 100%; box-sizing: border-box; transition: var(--transition); } /* 深色模式：深藍半透明底；color-scheme 告知行動瀏覽器用深色原生渲染（修正 iOS/Android select 白底問題） */ html.dark .chq-input { background: rgba(15,23,42,0.6); color-scheme: dark; } .chq-input::placeholder { color: var(--text-placeholder); } html.dark .chq-input::placeholder { color: #94A3B8; } html.dark .chq-input { color: #F1F5F9; } .chq-input:focus { outline: none; border-color: var(--accent); /* focus 時邊框變藍 */ background: rgba(255,255,255,0.92); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); /* 藍色外光暈 */ } html.dark .chq-input:focus { background: rgba(15,23,42,0.8); box-shadow: 0 0 0 3px rgba(59,130,246,0.2); } /* 停用狀態：半透明 + 禁止游標，提示使用者此欄位不可操作 */ .chq-input:disabled { opacity: 0.5; cursor: not-allowed; } /* select 下拉選單：移除瀏覽器預設箭頭，改用自訂 SVG 箭頭圖示 淺色模式：灰色箭頭；深色模式：灰藍色箭頭 */ select.chq-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } html.dark select.chq-input { background-color: rgb(15,23,42); /* iOS Safari fallback：強制深色底，避免 rgba 半透明被瀏覽器當作白底 */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } /* ===================================================== 7. Tables 資料表格樣式 例：庫存清單、訂單列表、付款紀錄等所有資料表格 ===================================================== */ .chq-table { width: 100%; border-collapse: collapse; font-size: 1.155rem; } /* 表頭：淡藍底、深藍字、粗體，與資料列明顯區隔 */ .chq-table thead th { background: rgba(37,99,235,0.06); color: var(--accent-dark); font-weight: 700; padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border-color); letter-spacing: 0.3px; } /* 深色模式表頭：深藍半透明底 + 天藍色文字 */ html.dark .chq-table thead th { background: rgba(59,130,246,0.08); color: #93C5FD; } /* 資料列：每列底部有分隔線；最後一列去掉底線 */ .chq-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border-color); color: var(--text-primary); } .chq-table tbody tr:hover { background: var(--accent-hover-bg); } /* 滑鼠懸停時該列淡藍底 */ .chq-table tbody tr:last-child td { border-bottom: none; } /* 最後一列去掉底線 */ /* ===================================================== 8. Badges 狀態標籤，用於標示訂單狀態、庫存狀態等 五種顏色對應不同語意： blue = 資訊/處理中（例：「待出貨」） green = 成功/完成 （例：「已出貨」、「正常」） amber = 警告/待確認（例：「待付款」、「庫存偏低」） red = 錯誤/取消 （例：「已取消」、「缺貨」） gray = 中性/停用 （例：「已停用」、「無資料」） ===================================================== */ .chq-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.3px; } .chq-badge-blue { background:rgba(37,99,235,.1); border:1px solid rgba(37,99,235,.3); color:#1E3A8A; } .chq-badge-green { background:rgba(22,163,74,.1); border:1px solid rgba(22,163,74,.3); color:#15803d; } .chq-badge-amber { background:rgba(217,119,6,.1); border:1px solid rgba(217,119,6,.3); color:#92400e; } .chq-badge-red { background:rgba(220,38,38,.1); border:1px solid rgba(220,38,38,.3); color:#b91c1c; } .chq-badge-gray { background:rgba(100,116,139,.1); border:1px solid rgba(100,116,139,.3); color:#475569; } /* 深色模式下標籤文字調亮，在深色背景上保持可讀性 */ html.dark .chq-badge-blue { color:#93C5FD; } html.dark .chq-badge-green { color:#4ade80; } html.dark .chq-badge-amber { color:#fbbf24; } html.dark .chq-badge-red { color:#f87171; } html.dark .chq-badge-gray { color:#94a3b8; } /* 深色模式下主選單 icon 亮度補強（深藍色圖示在深色背景對比不足） */ html.dark .MainMenu img { filter: brightness(2.5); } /* ===================================================== 9. Header (glass) 毛玻璃頂部頁首（黏貼在視窗頂部） 注意：本系統實際使用 site.css 的 .top-banner， 此 .chq-header 為設計系統備用元件，可供未來頁面選用。 ===================================================== */ .chq-header { position: sticky; /* 捲動時黏貼在頂部 */ top: 0; z-index: 1000; height: 56px; background: var(--bg-header); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-color); box-shadow: var(--shadow-header); display: flex; align-items: center; padding: 0 var(--space-md); } /* ===================================================== 10. Sidebar 左側導覽側欄（桌機版使用，行動版收合為抽屜） 注意：本系統實際使用 .float-menu 做底部/側欄導覽， 此 .chq-sidebar 為設計系統備用元件。 ===================================================== */ .chq-sidebar { width: 240px; background: var(--bg-sidebar); /* 深藍色背景 */ height: calc(100vh - 56px); /* 扣除頁首高度 */ position: sticky; top: 56px; overflow-y: auto; flex-shrink: 0; border-right: 1px solid rgba(255,255,255,0.06); } /* 收合狀態：寬度縮為 64px（只顯示圖示，隱藏文字） */ .chq-sidebar.collapsed { width: 64px; } /* 側欄選單項目 左側彩色 border 表示選中狀態（active 時顯示藍色左邊框） */ .chq-sidebar-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: #94A3B8; font-size: 0.875rem; cursor: pointer; transition: var(--transition); border-left: 3px solid transparent; /* 預設透明，active 時顯示藍色 */ border-radius: 0 8px 8px 0; margin: 1px 8px 1px 0; } .chq-sidebar-item:hover { background: rgba(255,255,255,0.06); color: #E2E8F0; } .chq-sidebar-item.active { background: rgba(37,99,235,0.2); color: #93C5FD; border-left-color: #3B82F6; /* 選中項目的藍色左邊框 */ } /* 行動版側欄：預設隱藏在視窗左側外（left:-240px）， 加上 .open class 後滑入（left:0）， 可搭配半透明遮罩層使用 */ @media (max-width: 767px) { .chq-sidebar { position: fixed; top: 0; left: -240px; /* 預設藏在視窗左側外 */ height: 100vh; z-index: 999; transition: left 0.25s cubic-bezier(.4,0,.2,1); } .chq-sidebar.open { left: 0; } /* JavaScript 切換此 class 開啟側欄 */ } /* ===================================================== 11. Scrollbar 自訂捲軸外觀（僅 WebKit 核心瀏覽器有效：Chrome、Safari、Edge） 細條式設計，與整體簡潔風格一致。 ===================================================== */ ::-webkit-scrollbar { width: 5px; height: 5px; } /* 極細捲軸（5px） */ ::-webkit-scrollbar-track { background: transparent; } /* 捲軌透明 */ ::-webkit-scrollbar-thumb { background: rgba(37,99,235,0.25); border-radius: 99px; } /* 藍色圓角捲鈕 */ ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* 懸停時顏色加深 */ /* ===================================================== 12. Layout 頁面整體佈局容器 注意：本系統實際使用 site.css 的 .chq-layout-body， 此 .chq-layout / .chq-main 為設計系統備用佈局元件。 ===================================================== */ /* 主佈局容器（flex 橫向排列：左側欄 + 右側主內容） */ .chq-layout { display: flex; min-height: calc(100vh - 56px); /* 扣除頁首高度 */ } /* 主內容區（flex:1 撐滿剩餘寬度，內部可捲動） min-width:0 防止 flex 子項目寬度溢出父容器 */ .chq-main { flex: 1; padding: var(--space-lg); overflow-y: auto; background: transparent; min-width: 0; } @media (max-width: 767px) { .chq-main { padding: var(--space-md) var(--space-sm); } } /* 手機版：左右 8px */ @media (min-width: 1200px) { .chq-main { padding: var(--space-xl); } } /* 大螢幕：32px */ /* ===================================================== 13. Login wrap (layout only — Login.cshtml 提供細節樣式) 登入頁面的外層佈局：頁面背景漸層鋪滿，卡片垂直水平置中 ===================================================== */ /* 登入頁整頁置中容器 */ .chq-login-wrap { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 24px 16px; } /* 登入卡片（毛玻璃效果） 桌機最大寬度 420px，手機自動縮減至螢幕寬度的 92% 例：cloudheadquarter_login.html 主要表單卡片 */ .chq-login-card { width: min(420px, 92vw); background: var(--bg-card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-glass); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-card); } html.dark .chq-login-card { border-color: var(--border-color); } /* 手機版登入卡片：內距縮小（空間有限，減少上下留白） */ @media (max-width: 767px) { .chq-login-card { padding: var(--space-lg) var(--space-md); } }