/* * ua-admin.css — 後台設計系統（REQ-20261009-001 改版 P0：token＋共用外框元件） * * 來源：docs/design/ua-store-backend-redesign/after/assets/ua-admin.css（mock 原型），只收 P0 用得到的部分。 * 手寫純 CSS、直接放 public/：部署與 CI 都沒有 npm／Vite build，不得改走 Vite build，也不要用 CSS import 拆檔。 * * 命名規則： * - 所有 class 一律 ua- 前綴（.ua-topbar、.ua-nav-item、.ua-btn…），狀態用 BEM 修飾（.ua-nav-item--active）。 * 唯一的例外是下面「相容層」區段列出的幾個 class（JS 與彈窗外殼 markup 仍依賴），不得再增加。 * - 已被佔用、不可在這裡定義：.ua-scroll-visible／.ua-scroll-hint*（layouts/admin 的 inline 樣式）、 * .ua-searchable*（admin/partials/searchable-select）、--ua-scroll-hint-from／--ua-scroll-hint-to。 * - token 一律 --ua-*。最小字級 12px。斷點 760px（以下側欄改左側抽屜）。 * * REQ-20261011-003（改版 P5）起：Tailwind Play CDN、layouts/admin 的 .content-area !important 覆寫層、Inter／Outfit 字型都已拿掉， * 後台、達人後台、登入頁、無權限頁只剩這一份樣式。 */ /* ── Tokens ─────────────────────────────────────────────── */ :root { /* 底色層 */ --ua-bg: #f1f1f1; --ua-surface: #ffffff; --ua-surface-subdued: #f7f7f7; --ua-surface-hover: #f6f6f7; --ua-nav-bg: #ebebeb; --ua-nav-hover: #e3e3e3; --ua-nav-active: #fafafa; --ua-topbar-bg: #1c1d1f; --ua-topbar-input: #303134; --ua-topbar-line: #4a4b4e; --ua-topbar-text: #e3e3e3; --ua-topbar-muted: #b5b5b5; /* 文字 */ --ua-text: #303030; --ua-text-secondary: #616161; --ua-text-disabled: #b5b5b5; --ua-text-link: #005bd3; /* 線 */ --ua-border: #e3e3e3; --ua-border-strong: #c9c9c9; --ua-border-input: #8a8a8a; --ua-divider: #ebebeb; /* 品牌與動作 */ --ua-brand: #faa500; --ua-brand-hover: #e09400; --ua-brand-ink: #3d2800; --ua-ink: #303030; --ua-ink-hover: #1a1a1a; --ua-focus: #005bd3; --ua-focus-on-dark: #8ab4ff; /* 狀態色（底／字／點） */ --ua-success-bg: #cdfee1; --ua-success-text: #0c5132; --ua-success-dot: #29845a; --ua-attention-bg: #ffef9d; --ua-attention-text: #4f4700; --ua-attention-dot: #b28400; --ua-warning-bg: #ffd6a4; --ua-warning-text: #5e4200; --ua-warning-dot: #e67a00; --ua-critical-bg: #fedad9; --ua-critical-text: #8e0b21; --ua-critical-dot: #e51c00; --ua-info-bg: #e0f0ff; --ua-info-text: #00527c; --ua-info-dot: #0094d5; --ua-neutral-bg: #e3e3e3; --ua-neutral-text: #616161; --ua-neutral-dot: #8a8a8a; --ua-critical-strong: #c70a24; /* 字型與字級（最小 12px） */ --ua-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif; --ua-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; --ua-text-xs: 12px; --ua-text-sm: 13px; --ua-text-md: 14px; --ua-text-lg: 16px; --ua-text-xl: 18px; --ua-text-2xl: 20px; /* 間距（4px 格） */ --ua-space-1: 4px; --ua-space-2: 8px; --ua-space-3: 12px; --ua-space-4: 16px; --ua-space-5: 20px; --ua-space-6: 24px; --ua-space-8: 32px; /* 圓角與陰影 */ --ua-radius-sm: 6px; --ua-radius: 8px; --ua-radius-lg: 12px; --ua-shadow-card: 0 1px 0 0 rgba(26, 26, 26, 0.07), 0 0 0 1px rgba(26, 26, 26, 0.06); --ua-shadow-pop: 0 8px 24px -4px rgba(26, 26, 26, 0.18), 0 0 0 1px rgba(26, 26, 26, 0.08); --ua-shadow-btn: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.12); /* 外框尺寸與動態 */ --ua-topbar-h: 56px; --ua-nav-w: 240px; --ua-ease: cubic-bezier(0.16, 1, 0.3, 1); --ua-drawer-duration: 0.22s; } /* ══ 基礎（REQ-20261011-003 P5）════════════════════════════════════════════ * 取代 Tailwind CDN 的 preflight，只留畫面與 P4 一致所需的部分：box-sizing 與邊框歸零、表單元素繼承字型、 * 標題／段落／清單預設 margin 歸零、連結繼承顏色、圖片與 svg 為 block。全部是元素選擇器（權重低於任何 ua- class）。 */ *, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; } html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: var(--ua-font); -webkit-tap-highlight-color: transparent; } body { margin: 0; line-height: inherit; } hr { height: 0; color: inherit; border-top-width: 1px; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; } small { font-size: 80%; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } button, input, optgroup, select, textarea { margin: 0; padding: 0; font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; } button, select { text-transform: none; } button, input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; background-color: transparent; background-image: none; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } summary { display: list-item; } blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } textarea { resize: vertical; } input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; } button, [role="button"] { cursor: pointer; } :disabled { cursor: default; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } /* ══ 相容層（REQ-20261011-003 P5；不得再增加）═══════════════════════════════ * 拿掉 Tailwind 之後，JS 與彈窗外殼 markup 仍依賴的 class（tests/Feature/TailwindRemovalTest::COMPAT_CLASSES 是白名單）： * - .hidden：全站 JS 以 classList 開關（classList.add／remove／toggle('hidden')）； * - [hidden]：hidden 屬性一律隱藏（元件自己有 display 也一樣）； * - .fixed .inset-0 .z-50 .flex .items-center .justify-center .p-4：彈窗外殼 * （