/* ============================================================= Uber Eats DG SKU 管理系統 — Foundations ------------------------------------------------------------- Element Plus 2.14 + Uber Eats brand language. • Black/white/gray carry the interface. • Brand Primary #00935F is the UI-action green (buttons, focus, active state, selected Tab/Menu, links). Chosen for WCAG-passing contrast on white admin surfaces. • Eats Green #06C167 is kept as the brand identity color — used on the app icon and as the active accent inside the dark sidebar (where bright green reads correctly). • No dark mode. No mobile-first. Desktop ≥ 1280px. ============================================================= */ /* ---------- 1. Web font ---------- Inter (Latin / numerals) + Noto Sans TC (繁中) + JetBrains Mono (mono). All free, Google Fonts, high legibility at 12–14px — chosen for 8h/day data-heavy admin use. */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"); :root { /* ============ Brand ============ */ --brand-eats-green: #06C167; /* identity color — app icon, dark-context accents */ --brand-primary: #00935F; /* UI primary FILL — buttons, focus, active bg, tag bg */ --brand-primary-text: #006A45; /* UI primary TEXT — links, tab labels, stat delta, sort active. 4.71:1 vs white — passes WCAG AA for small text. */ --brand-black: #000000; --brand-white: #FFFFFF; /* ============ Gray scale (7 steps, neutral-cool) ============ */ --gray-0: #FFFFFF; /* canvas / cards */ --gray-50: #FAFAFA; /* page bg */ --gray-100:#F2F2F2; /* zebra, hover row, header bg */ --gray-200:#E6E6E6; /* borders default */ --gray-300:#CCCCCC; /* borders strong / disabled bg edge */ --gray-400:#9E9E9E; /* placeholder, disabled text, icon mute */ --gray-500:#6B6B6B; /* secondary text, table header text */ --gray-700:#3D3D3D; /* regular body text */ --gray-900:#1A1A1A; /* primary text, headings, dark surface */ /* ============ Foreground / Background semantic ============ */ --fg-1: var(--gray-900); /* primary text, headings */ --fg-2: var(--gray-700); /* regular text */ --fg-3: var(--gray-500); /* secondary text, table header */ --fg-4: var(--gray-400); /* placeholder, disabled */ --fg-inverse: var(--brand-white); --bg-page: var(--gray-50); --bg-surface: var(--gray-0); --bg-sunk: var(--gray-100); --bg-hover: var(--gray-100); --bg-active: var(--gray-200); --bg-dark: #1F1F1F; /* dark surface (not pure black) */ --bg-darker: #141414; /* sidebar bg */ --border-1: var(--gray-200); /* default borders, dividers */ --border-2: var(--gray-300); /* stronger / hovered input */ --border-dark: #2A2A2A; /* dividers on dark surfaces */ /* ============ Semantic ============ */ --success: #00935F; /* aligned to UI primary */ --success-bg: #E6F4EF; --success-border: #B3DECF; --warning: #F6A609; --warning-bg: #FEF4E0; --warning-border: #FBE0A8; --danger: #E11900; /* Uber red */ --danger-bg: #FCE7E5; --danger-border: #F4B8B0; --info: #276EF1; /* Uber blue */ --info-bg: #E6EEFD; --info-border: #B5CBF7; /* ============ Sidebar (dark surface) ============ */ /* DD-40 source: ui-kit.css .sb__cat / .sb__search / .sb__item.active 原硬寫值提升為 token */ --sb-search-bg: rgba(255,255,255,.07); /* 半透明白 — search input field bg */ --sb-category-fg: #C7C7C7; /* 大分類文字色，較 fg-inverse 暗 */ --sb-item-active-bg: rgba(6,193,103,.12); /* 當前頁 item bg — 半透明 brand-eats-green */ /* ============ Status tag colors (草稿/送審/通過/拒絕/暫緩) ============ */ --tag-draft-fg: var(--gray-700); --tag-draft-bg: var(--gray-100); --tag-draft-bd: var(--gray-200); --tag-review-fg: #1D4ED8; --tag-review-bg: #E6EEFD; --tag-review-bd: #B5CBF7; --tag-approved-fg: #00633F; --tag-approved-bg: #E6F4EF; --tag-approved-bd: #B3DECF; --tag-rejected-fg: #A8120A; --tag-rejected-bg: #FCE7E5; --tag-rejected-bd: #F4B8B0; --tag-hold-fg: #8A5A00; --tag-hold-bg: #FEF4E0; --tag-hold-bd: #FBE0A8; /* ============ 生效狀態 tag colors (進價歷史總表) ============ */ --tag-active-fg: #00633F; --tag-active-bg: #E6F4EF; --tag-active-bd: #B3DECF; --tag-expired-fg: var(--gray-500); --tag-expired-bg: var(--gray-100); --tag-expired-bd: var(--gray-200); /* ============ Teal palette (審核流程 rule/role elements) ============ */ --teal-fg: #1F4A5C; --teal-bd: #C6D8E1; --teal-bg: #E6F0F5; /* ============ Amber palette (warning-adjacent elements) ============ */ --amber-fg: #6B4A1A; --amber-bd: #E5D4B4; --amber-bg: #FBF6E6; /* ============ Radii (tight, professional admin) ============ */ --radius-xs: 2px; /* tags, dense pills */ --radius-sm: 3px; /* button-small, table cell focus */ --radius-md: 4px; /* button, input, card — DEFAULT */ --radius-lg: 6px; /* dialog, drawer body */ --radius-pill: 9999px; /* avatar / dot only */ /* ============ Spacing (4px base, compact) ============ */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* ============ Component sizes (compressed vs EP defaults) ============ */ --size-control-sm: 24px; --size-control: 28px; /* default — was 32 in EP */ --size-control-lg: 32px; --size-table-row: 36px; /* tight, 8h-a-day operator-friendly */ --size-table-row-sm: 32px; --size-header: 56px; --size-sidebar: 220px; --size-sidebar-collapsed: 56px; /* ============ Typography ============ */ --font-sans: "Inter", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "微軟正黑體", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace; /* type scale — tightened for data density */ --fs-12: 12px; /* meta, tag, helper */ --fs-13: 13px; /* table body, dense form */ --fs-14: 14px; /* default body, button */ --fs-15: 15px; /* sub-section title */ --fs-16: 16px; /* page section title */ --fs-18: 18px; /* dialog title */ --fs-20: 20px; /* page title */ --fs-24: 24px; /* big stats */ --fs-32: 32px; /* hero numerics on dashboard */ --lh-tight: 1.25; --lh-snug: 1.4; --lh-base: 1.5; --lh-loose: 1.7; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; /* ============ Shadows (subtle, admin-grade) ============ */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04); /* hover row */ --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,.04); /* dropdown */ --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0,0,0,.06);/* dialog */ --shadow-4: 0 16px 48px rgba(0, 0, 0, 0.12); /* drawer */ --shadow-focus: 0 0 0 3px rgba(0, 147, 95, 0.22); /* focus ring */ --shadow-danger-focus: 0 0 0 3px rgba(225, 25, 0, 0.18); /* ============ Motion ============ */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emphasis: cubic-bezier(0.2, 0, 0, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 240ms; /* ============ z-index ============ */ --z-sticky: 100; --z-dropdown: 1000; --z-modal: 2000; --z-toast: 3000; /* ============ Table column-group bands ============ Five low-saturation tints applied to table header backgrounds to chunk adjacent columns into a semantic group. Rotation: walking left to right, each new group takes the next color; when 5 groups exhausted, the 6th group reuses A, then B, etc. Columns with no group (e.g. actions, audit) keep the default gray-50 header bg. */ --th-a-bg: #FAF6E0; --th-a-fg: #6B5530; /* Sand 砂黃 */ --th-b-bg: #E6F0F5; --th-b-fg: #1F4A5C; /* Mist 霧青 */ --th-c-bg: #EEEAF3; --th-c-fg: #4A3D6B; /* Lilac 灰紫 */ --th-d-bg: #F5ECE4; --th-d-fg: #6B4A2E; /* Clay 陶橙 */ --th-e-bg: #F0EDE6; --th-e-fg: #4F4A3D; /* Stone 灰麻 */ /* ============ Element Plus overrides ============ */ --el-color-primary: var(--brand-primary); --el-color-primary-light-3: #4DB38F; --el-color-primary-light-5: #80C9AF; --el-color-primary-light-7: #B3DECF; --el-color-primary-light-8: #CCE9DF; --el-color-primary-light-9: #E6F4EF; --el-color-primary-dark-2: #00754C; --el-color-success: var(--success); --el-color-warning: var(--warning); --el-color-danger: var(--danger); --el-color-error: var(--danger); --el-color-info: var(--gray-500); --el-text-color-primary: var(--fg-1); --el-text-color-regular: var(--fg-2); --el-text-color-secondary: var(--fg-3); --el-text-color-placeholder: var(--fg-4); --el-text-color-disabled: var(--fg-4); --el-border-color: var(--border-1); --el-border-color-light: var(--border-1); --el-border-color-lighter: var(--gray-100); --el-border-color-dark: var(--border-2); --el-border-color-darker: var(--gray-400); --el-fill-color: var(--gray-100); --el-fill-color-light: var(--gray-50); --el-fill-color-blank: var(--bg-surface); --el-bg-color: var(--bg-surface); --el-bg-color-page: var(--bg-page); --el-border-radius-base: var(--radius-md); --el-border-radius-small: var(--radius-sm); --el-font-size-base: var(--fs-14); --el-font-family: var(--font-sans); } /* ============ Base elements ============ */ html, body { font-family: var(--font-sans); font-size: var(--fs-14); line-height: var(--lh-base); color: var(--fg-1); background: var(--bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============ Semantic typography classes ============ */ .t-display { font-size: var(--fs-32); line-height: var(--lh-tight); font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--fg-1); } .t-h1 { font-size: var(--fs-24); line-height: var(--lh-tight); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--fg-1); } .t-h2 { font-size: var(--fs-20); line-height: var(--lh-snug); font-weight: var(--fw-semibold);color: var(--fg-1); } .t-h3 { font-size: var(--fs-16); line-height: var(--lh-snug); font-weight: var(--fw-semibold);color: var(--fg-1); } .t-h4 { font-size: var(--fs-15); line-height: var(--lh-snug); font-weight: var(--fw-semibold);color: var(--fg-1); } .t-body { font-size: var(--fs-14); line-height: var(--lh-base); font-weight: var(--fw-regular); color: var(--fg-2); } .t-body-strong{ font-size: var(--fs-14); line-height: var(--lh-base); font-weight: var(--fw-medium); color: var(--fg-1); } .t-dense { font-size: var(--fs-13); line-height: var(--lh-snug); font-weight: var(--fw-regular); color: var(--fg-2); } .t-meta { font-size: var(--fs-12); line-height: var(--lh-snug); font-weight: var(--fw-regular); color: var(--fg-3); } .t-label { font-size: var(--fs-12); line-height: var(--lh-snug); font-weight: var(--fw-medium); color: var(--fg-3); letter-spacing: 0.02em; text-transform: uppercase; } .t-mono { font-family: var(--font-mono); font-size: var(--fs-13); color: var(--fg-2); } .t-link { color: var(--brand-primary-text); text-decoration: underline; text-underline-offset: 2px; font-weight: var(--fw-medium); } .t-link:hover { color: #00553A; }