/** * components.css — 跨頁共用元件樣式 * * infuture 後台管理系統 · v0.1.0 (2026-05-16) * * 範圍：vendors / quotes / quote-review / settings / dashboard 共用的 chrome 與元件 * 載入時機：在每個頁面 中於 base.css 後、{page}.css 前 * * 與 Jubo Care 參考的差異註記： * - NavRail：240px 寬橫向 layout（infuture）vs. 72px 直立 layout（Jubo Care） * - AppBar：右側僅 username + logout（infuture）vs. 4 個 icon button + me 膠囊（Jubo Care） * - Modal：保留 480px max-width 規範，欄位排版採 infuture 截圖風格 * - 新元件：Pagination（infuture 新需求）、ConfirmDialog（共用刪除確認） * * 命名規則：沿用 design-system 既有 .jc- 前綴（避免重複命名空間） * * 不在此檔處理：頁面特定樣式 → 寫在 src/pages/{slug}.css */ /* ───────────────────────────────────────── * APP SHELL（整體版面骨架） * ───────────────────────────────────────── */ .jc-app { min-height: 100vh; background: var(--color-surface-app); } .jc-app-body { display: flex; align-items: flex-start; min-height: calc(100vh - var(--layout-header-height)); } .jc-app-content { flex: 1; padding: var(--spacing-lg); min-width: 0; /* 防止 table 撐開 */ } /* ───────────────────────────────────────── * APPBAR（頂部固定列 · 64px） * ───────────────────────────────────────── */ .jc-appbar { position: sticky; top: 0; z-index: var(--z-raised); display: flex; align-items: center; gap: var(--spacing-sm); height: var(--layout-header-height); padding: 0 var(--spacing-lg); background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .jc-appbar .brand { display: flex; align-items: center; gap: var(--spacing-sm); } .jc-appbar .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--color-brand-primary); color: var(--color-text-inverse); font-weight: var(--font-weight-bold); font-size: var(--font-size-base); letter-spacing: -0.02em; } .jc-appbar .brand-name { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-text); } .jc-appbar .spacer { flex: 1; } .jc-appbar .me-name { color: var(--color-text-body); font-size: var(--font-size-body); margin-right: var(--spacing-sm); } .jc-appbar .logout-btn { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); color: var(--color-text-body); font-size: var(--font-size-body); transition: background var(--transition-fast); } .jc-appbar .logout-btn:hover { background: var(--color-surface-hover); text-decoration: none; } .jc-appbar .logout-btn .material-symbols-outlined { font-size: 18px; } /* ───────────────────────────────────────── * NAVRAIL（左側展開式導覽 · 240px） * infuture 變體：較寬、橫向 icon + 文字 * ───────────────────────────────────────── */ .jc-rail { position: sticky; top: var(--layout-header-height); width: 240px; min-height: calc(100vh - var(--layout-header-height)); padding: var(--spacing-md) var(--spacing-sm); background: var(--color-surface); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--spacing-xs); } .jc-rail-section { margin-top: var(--spacing-md); padding: 0 var(--spacing-sm); font-size: var(--font-size-caption); font-weight: var(--font-weight-medium); color: var(--color-text-muted); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; } .jc-rail .rail-item { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); color: var(--color-text-nav-inactive); font-size: var(--font-size-body); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); text-decoration: none; } .jc-rail .rail-item:hover { background: var(--color-surface-hover); text-decoration: none; } .jc-rail .rail-item.active { background: var(--color-surface-rail-active); color: var(--color-brand-primary-dark); font-weight: var(--font-weight-medium); } .jc-rail .rail-item .material-symbols-outlined { font-size: 20px; } /* ───────────────────────────────────────── * PAGEHEADER（頁面標題列） * ───────────────────────────────────────── */ .jc-pageheader { margin-bottom: var(--spacing-lg); } .jc-pageheader .ph-title { font-size: var(--font-size-h1); font-weight: var(--font-weight-semibold); color: var(--color-text); margin-bottom: var(--spacing-xs); } .jc-pageheader .ph-sub { font-size: var(--font-size-body); color: var(--color-text-muted); } /* ───────────────────────────────────────── * CARD（資訊容器） * ───────────────────────────────────────── */ .jc-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--spacing-lg); } .jc-card.no-padding { padding: 0; } .jc-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-md); margin-bottom: var(--spacing-md); } .jc-card-head h3 { font-size: var(--font-size-h2); font-weight: var(--font-weight-semibold); color: var(--color-text); margin-bottom: var(--spacing-xs); } .jc-card-head .sub { font-size: var(--font-size-body); color: var(--color-text-muted); } .jc-card-head .actions { display: flex; align-items: center; gap: var(--spacing-sm); flex-shrink: 0; } /* ───────────────────────────────────────── * BUTTON（按鈕） * variants: primary / outlined / text / danger / icon * sizes: default / small * ───────────────────────────────────────── */ .jc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-xs); padding: var(--spacing-sm) var(--spacing-md); height: 36px; border-radius: var(--radius-sm); background: transparent; border: 1px solid transparent; color: var(--color-text-body); font-size: var(--font-size-body); font-weight: var(--font-weight-medium); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast); white-space: nowrap; } .jc-btn:hover { background: var(--color-surface-hover); } .jc-btn .material-symbols-outlined { font-size: 18px; } /* variants */ .jc-btn.primary { background: var(--color-brand-primary); color: var(--color-text-inverse); border-color: var(--color-brand-primary); } .jc-btn.primary:hover { background: var(--color-brand-primary-hover); border-color: var(--color-brand-primary-hover); } .jc-btn.outlined { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } .jc-btn.outlined:hover { background: var(--color-brand-primary-tint-06); border-color: var(--color-brand-primary); color: var(--color-brand-primary-dark); } .jc-btn.text-brand { color: var(--color-brand-primary-dark); } .jc-btn.text-brand:hover { background: var(--color-brand-primary-tint-08); } .jc-btn.danger { background: var(--color-status-abnormal); color: var(--color-text-inverse); border-color: var(--color-status-abnormal); } .jc-btn.danger:hover { background: var(--color-red-700); border-color: var(--color-red-700); } .jc-btn.danger-text { color: var(--color-status-abnormal-text); } .jc-btn.danger-text:hover { background: var(--color-red-100); } /* sizes */ .jc-btn.small { height: 28px; padding: var(--spacing-xs) var(--spacing-sm); font-size: var(--font-size-caption); } .jc-btn.small .material-symbols-outlined { font-size: 16px; } /* icon only */ .jc-btn.icon { width: 32px; height: 32px; padding: 0; border-radius: var(--radius-sm); color: var(--color-text-tertiary); } .jc-btn.icon:hover { background: var(--color-surface-hover); color: var(--color-text); } .jc-btn.icon.danger-text:hover { color: var(--color-status-abnormal-text); background: var(--color-red-100); } /* ───────────────────────────────────────── * CHIP（標籤 / 狀態） * ───────────────────────────────────────── */ .jc-chip { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: 2px var(--spacing-sm); border-radius: var(--radius-full); background: var(--color-tag-grey-bg); color: var(--color-tag-grey-fg); font-size: var(--font-size-caption); font-weight: var(--font-weight-medium); line-height: 1.5; white-space: nowrap; } .jc-chip.blue { background: var(--color-tag-blue-bg); color: var(--color-tag-blue-fg); } .jc-chip.green { background: var(--color-tag-green-bg); color: var(--color-tag-green-fg); } .jc-chip.amber { background: var(--color-tag-amber-bg); color: var(--color-tag-amber-fg); } .jc-chip.red { background: var(--color-tag-red-bg); color: var(--color-tag-red-fg); } .jc-chip.brand { background: var(--color-tag-brand-bg); color: var(--color-tag-brand-fg); } .jc-chip.solid-brand { background: var(--color-brand-primary); color: var(--color-text-inverse); } .jc-chip.outlined { background: transparent; border: 1px solid currentColor; } /* ───────────────────────────────────────── * FIELD（表單欄位） * ───────────────────────────────────────── */ .jc-field { display: flex; flex-direction: column; gap: var(--spacing-xs); } .jc-field .lbl { font-size: var(--font-size-caption); font-weight: var(--font-weight-medium); color: var(--color-text); } .jc-field .lbl .req { color: var(--color-status-abnormal-text); margin-left: 2px; } .jc-field input, .jc-field select, .jc-field textarea { width: 100%; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--font-size-body); color: var(--color-text); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .jc-field input::placeholder, .jc-field textarea::placeholder { color: var(--color-text-muted); } .jc-field input:focus, .jc-field select:focus, .jc-field textarea:focus { outline: none; border-color: var(--color-brand-primary); box-shadow: 0 0 0 3px var(--color-brand-primary-tint-12); } .jc-field textarea { resize: vertical; min-height: 80px; font-family: inherit; } .jc-field.error input, .jc-field.error select, .jc-field.error textarea { border-color: var(--color-status-abnormal); } .jc-field .help { font-size: var(--font-size-caption); color: var(--color-text-muted); } .jc-field.error .help { color: var(--color-status-abnormal-text); } /* 內含 icon 的 input（廠商搜尋 / 下拉用） */ .jc-field .input-with-icon { position: relative; } .jc-field .input-with-icon input, .jc-field .input-with-icon select { padding-right: 36px; } .jc-field .input-with-icon .icon-trailing { position: absolute; top: 50%; right: var(--spacing-sm); transform: translateY(-50%); color: var(--color-text-tertiary); font-size: 18px; pointer-events: none; } /* ───────────────────────────────────────── * TABLE（資料表） * ───────────────────────────────────────── */ .jc-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-body); background: var(--color-surface); } .jc-table thead th { text-align: left; padding: var(--spacing-md); background: var(--color-surface); color: var(--color-text-body); font-weight: var(--font-weight-medium); font-size: var(--font-size-body); border-bottom: 1px solid var(--color-border); white-space: nowrap; } .jc-table tbody td { padding: var(--spacing-md); color: var(--color-text); border-bottom: 1px solid var(--color-border); vertical-align: middle; } .jc-table tbody tr:last-child td { border-bottom: none; } .jc-table tbody tr:hover { background: var(--color-brand-primary-tint-04); } .jc-table .num { font-variant-numeric: tabular-nums; } .jc-table .right { text-align: right; } .jc-table .center { text-align: center; } .jc-table .actions-cell { display: flex; align-items: center; gap: var(--spacing-xs); justify-content: center; } /* table 容器（含 head/foot bar 與滾動）*/ .jc-table-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .jc-table-toolbar { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--color-border); gap: var(--spacing-md); } .jc-table-toolbar .left, .jc-table-toolbar .right { display: flex; align-items: center; gap: var(--spacing-sm); } .jc-table-toolbar .meta { font-size: var(--font-size-body); color: var(--color-text-muted); } .jc-table-toolbar select { height: 32px; padding: 0 var(--spacing-sm); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-size: var(--font-size-body); color: var(--color-text); } /* ───────────────────────────────────────── * PAGINATION（新元件） * ───────────────────────────────────────── */ .jc-pagination { display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-xs); padding: var(--spacing-md) var(--spacing-lg); border-top: 1px solid var(--color-border); } .jc-pagination .page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 var(--spacing-sm); border-radius: var(--radius-sm); background: transparent; color: var(--color-text-body); font-size: var(--font-size-body); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); border: 1px solid transparent; } .jc-pagination .page-btn:hover:not(.disabled):not(.active) { background: var(--color-surface-hover); } .jc-pagination .page-btn.active { background: var(--color-brand-primary); color: var(--color-text-inverse); font-weight: var(--font-weight-medium); } .jc-pagination .page-btn.disabled { color: var(--color-text-disabled); cursor: not-allowed; } .jc-pagination .page-btn .material-symbols-outlined { font-size: 18px; } .jc-pagination .page-ellipsis { color: var(--color-text-muted); padding: 0 var(--spacing-xs); } /* ───────────────────────────────────────── * MODAL（對話框） * ───────────────────────────────────────── */ .jc-modal-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; padding: var(--spacing-lg); /* 預設隱藏；JS 開啟時加 .open */ opacity: 0; pointer-events: none; transition: opacity var(--transition-base); } .jc-modal-backdrop.open { opacity: 1; pointer-events: auto; } .jc-modal { width: 100%; max-width: 480px; max-height: calc(100vh - 40px); background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-md); display: flex; flex-direction: column; overflow: hidden; transform: translateY(8px); transition: transform var(--transition-base); } .jc-modal-backdrop.open .jc-modal { transform: translateY(0); } .jc-modal.size-sm { max-width: 400px; } .jc-modal.size-md { max-width: 480px; } .jc-modal.size-lg { max-width: 640px; } .jc-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-md); padding: var(--spacing-lg); border-bottom: 1px solid var(--color-border); } .jc-modal-head h3 { font-size: var(--font-size-h2); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-xs); } .jc-modal-head .sub { font-size: var(--font-size-body); color: var(--color-text-muted); } .jc-modal-head .close-btn { margin-top: -4px; } .jc-modal-body { padding: var(--spacing-lg); overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: var(--spacing-md); flex: 1 1 auto; min-height: 0; min-width: 0; } .jc-modal-body .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); } .jc-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-lg); border-top: 1px solid var(--color-border); background: var(--color-surface); flex: 0 0 auto; } /* ───────────────────────────────────────── * CONFIRM DIALOG（新元件，刪除 / 角色變更共用） * ───────────────────────────────────────── */ .jc-confirm { max-width: 400px; } .jc-confirm .jc-modal-body { padding: var(--spacing-lg); font-size: var(--font-size-body); color: var(--color-text-body); line-height: var(--line-height-relaxed); } .jc-confirm strong { color: var(--color-text); font-weight: var(--font-weight-semibold); } /* ───────────────────────────────────────── * EMPTY STATE（新元件，quote-review 待審核空狀態） * ───────────────────────────────────────── */ .jc-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--spacing-12) var(--spacing-lg); text-align: center; color: var(--color-text-muted); } .jc-empty .empty-icon { width: 64px; height: 64px; border-radius: var(--radius-full); background: var(--color-brand-primary-tint-08); color: var(--color-brand-primary-dark); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--spacing-md); } .jc-empty .empty-icon .material-symbols-outlined { font-size: 32px; } .jc-empty .empty-title { font-size: var(--font-size-h2); font-weight: var(--font-weight-semibold); color: var(--color-text); margin-bottom: var(--spacing-xs); } .jc-empty .empty-sub { font-size: var(--font-size-body); color: var(--color-text-muted); } /* ───────────────────────────────────────── * AVATAR（用戶顯示 / 角色標） * ───────────────────────────────────────── */ .jc-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--color-brand-primary-subtle); color: var(--color-brand-primary-dark); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); } /* ───────────────────────────────────────── * MODAL — Form 包裹時的 flex 修正 * 確保 form 內的 body 可滾動 / foot 固定在底部 * （2026-05-16 修：欄位超出 + 按鈕滾不到的問題） * ───────────────────────────────────────── */ .jc-modal > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; overflow: hidden; } .jc-modal-body { flex: 1 1 auto; min-height: 0; } .jc-modal-foot { flex: 0 0 auto; } /* 確保 input / textarea 不會撐破容器 */ .jc-modal-body input, .jc-modal-body select, .jc-modal-body textarea { max-width: 100%; box-sizing: border-box; /* 長文字內部捲動，不撐破 */ text-overflow: ellipsis; } /* URL input：值太長時用較小字級顯示 */ .jc-modal-body input[type="url"] { font-size: var(--font-size-caption); font-family: var(--font-family-mono); }