463 lines
22 KiB
CSS
463 lines
22 KiB
CSS
/**
|
||
* EwoooC Design Token v3.0 — Production
|
||
* ─────────────────────────────────────────────────────────────
|
||
* DNA: MOMO Pro × minimal grid × operational clarity
|
||
* 變更重點（相對 v2.x）：
|
||
* 1. 全站去除 linear-gradient／radial-gradient／box-shadow blur，改為單色 + 1px 線條
|
||
* 2. 五大導航群組各自 accent，避免「全站焦糖橘」造成主次不分
|
||
* 3. 字級從 16 級壓到 8 級；spacing scale 重新排序為 4/8/12/16/24/32/48
|
||
* 4. 米色背景統一 #f0ebe1（介於原本 body 與 surface 之間）
|
||
* 5. 不純黑：所有 ink 都帶 5% 暖色，避免 var(--momo-text-strong) / var(--momo-on-accent, #fff8ef) 的數位刺眼
|
||
*
|
||
* 用法：
|
||
* .momo-app[data-active-page="..."] 由 _ewoooc_shell.html 自動套群組 accent
|
||
* 不要在 component CSS 裡再重新指定群組色，全部走 var(--momo-page-*)
|
||
*/
|
||
|
||
:root {
|
||
/* ════════════════════════════════════════════════════════
|
||
* 1. 中性色系 — 暖米基底
|
||
* ════════════════════════════════════════════════════════ */
|
||
/* 頁面層 */
|
||
--momo-bg-body: #f0ebe1; /* 主背景，比 v2 略提亮 */
|
||
--momo-bg-surface: #faf6ec; /* 卡片底 */
|
||
--momo-bg-elevated: #fdfaf2; /* 浮層、modal */
|
||
--momo-bg-paper: #f5efe2; /* 第二層卡片、表格列 */
|
||
--momo-bg-subtle: #e6e0d2; /* 分區底色 */
|
||
--momo-bg-muted: #d3cbb9; /* disabled 區塊 */
|
||
--momo-bg-sidebar: #ebe4d4; /* sidebar 米色（不再是黑底） */
|
||
--momo-bg-sidebar-hover: #e0d8c4;
|
||
|
||
/* 暖墨色（用於文字 / 線條，永遠不純黑） */
|
||
--momo-ink: #2a2520;
|
||
--momo-ink-strong: #1a1612;
|
||
--momo-ink-soft: #4a4138;
|
||
|
||
/* 主錦 KPI 深色家族 — 各群組獨立設計性格 */
|
||
--momo-ink-monitor: #3d2e22; /* walnut 胡桃 — 監控 */
|
||
--momo-ink-analytics: #3a2e1a; /* 焦糖糖蜜 — 分析 */
|
||
--momo-ink-ops: #3f2418; /* 深陶土 — 營運 */
|
||
--momo-ink-ai: #3a2a1f; /* espresso — AI */
|
||
--momo-ink-system: #352621; /* 烏木 — 系統 */
|
||
|
||
/* 文字三層 */
|
||
--momo-text-primary: #2a2520;
|
||
--momo-text-secondary: #6b6155;
|
||
--momo-text-tertiary: #9b9081;
|
||
--momo-text-disabled: #c4baa8;
|
||
--momo-text-inverse: #faf7f0;
|
||
|
||
/* 邊框 — 全部走低對比暖色 */
|
||
--momo-border: rgba(42, 37, 32, 0.16);
|
||
--momo-border-strong: rgba(42, 37, 32, 0.28);
|
||
--momo-border-light: rgba(42, 37, 32, 0.10);
|
||
--momo-border-faint: rgba(42, 37, 32, 0.06);
|
||
--momo-divider: rgba(42, 37, 32, 0.10);
|
||
|
||
/* ════════════════════════════════════════════════════════
|
||
* 2. 暖色家族 — 全站可用的 accent token
|
||
* ════════════════════════════════════════════════════════
|
||
* 所有 accent 都在「不太暗」的暖色域：HSL L 38–62
|
||
* 命名遵循「材質感」而非「明度」：caramel/honey/clay/rust...
|
||
*/
|
||
--momo-warm-caramel: #c96442; /* 焦糖橘 — 監控群組 */
|
||
--momo-warm-clay: #b86f52; /* 陶土橘紅 — 營運群組 */
|
||
--momo-warm-honey: #c89043; /* 蜂蜜金 — 分析群組 */
|
||
--momo-warm-saffron: #b8792f; /* 番紅花橘 — AI 中樞群組 */
|
||
--momo-warm-terra: #a85d3d; /* 暖陶土 — 系統群組 */
|
||
--momo-warm-rose: #a84428; /* 磚紅 — danger only (HSL 12°，真暖紅) */
|
||
--momo-warm-olive: #8a7340; /* 焦土 — 中性暖 */
|
||
--momo-warm-cream: #f7efe3; /* 奶油米白 */
|
||
--momo-warm-latte: #d8c1aa; /* 奶茶木 */
|
||
--momo-warm-apricot: #e7b98f; /* 杏色 */
|
||
--momo-warm-blush: #edd6cc; /* 霧粉 */
|
||
--momo-warm-greige: #b8aea2; /* 暖灰 */
|
||
|
||
/* 暖色 soft 版本（背景 / chip 用） */
|
||
--momo-warm-caramel-soft: rgba(201, 100, 66, 0.12);
|
||
--momo-warm-clay-soft: rgba(184, 111, 82, 0.12);
|
||
--momo-warm-honey-soft: rgba(200, 144, 67, 0.14);
|
||
--momo-warm-saffron-soft: rgba(184, 121, 47, 0.13);
|
||
--momo-warm-terra-soft: rgba(168, 93, 61, 0.12);
|
||
--momo-warm-rose-soft: rgba(168, 68, 40, 0.12);
|
||
--momo-warm-olive-soft: rgba(138, 115, 64, 0.12);
|
||
|
||
--momo-accent-strong: #8f4530; /* V2 compatibility: prefer --momo-page-accent-dark in new CSS */
|
||
|
||
/* ════════════════════════════════════════════════════════
|
||
* 3. 群組主題 — 五大導航群組各自 accent
|
||
* ════════════════════════════════════════════════════════
|
||
* 由 _ewoooc_shell.html 設置 data-page-group=""
|
||
* 未指定時 fallback 到 caramel
|
||
*
|
||
* 群組映射：
|
||
* monitor → caramel (商品看板 / 活動看板)
|
||
* analytics → honey (業績分析 / 月份總表 / 成長 / 當日)
|
||
* ops → clay (廠商缺貨 / 雲端匯入)
|
||
* ai → saffron (AI 助手 / AI 觀測台)
|
||
* system → terra (系統管理 / 設定)
|
||
*/
|
||
--momo-page-accent: var(--momo-warm-caramel);
|
||
--momo-page-accent-dark: #8f4530;
|
||
--momo-page-accent-soft: var(--momo-warm-caramel-soft);
|
||
--momo-page-accent-line: rgba(201, 100, 66, 0.32);
|
||
--momo-page-inverse: #fff8ef;
|
||
|
||
/* 圖表 / 視覺輔助色（屬於同群組的協和色） */
|
||
--momo-page-chart-1: var(--momo-warm-caramel);
|
||
--momo-page-chart-2: var(--momo-warm-apricot);
|
||
--momo-page-chart-3: var(--momo-warm-honey);
|
||
--momo-page-chart-4: var(--momo-warm-olive);
|
||
--momo-page-chart-5: var(--momo-warm-clay);
|
||
--momo-page-chart-6: var(--momo-warm-greige);
|
||
|
||
/* ════════════════════════════════════════════════════════
|
||
* 4. 狀態色 — 去飽和
|
||
* ════════════════════════════════════════════════════════ */
|
||
--momo-success: #5a7a3f;
|
||
--momo-success-bg: #e6ead6;
|
||
--momo-success-border: rgba(90, 122, 63, 0.32);
|
||
--momo-success-text: #3d5527;
|
||
|
||
--momo-warning: #b8792f;
|
||
--momo-warning-bg: #f3e7c4;
|
||
--momo-warning-border: rgba(184, 121, 47, 0.32);
|
||
--momo-warning-text: #6e500e;
|
||
|
||
--momo-danger: #a84428;
|
||
--momo-danger-bg: #efd3c4;
|
||
--momo-danger-border: rgba(168, 68, 40, 0.32);
|
||
--momo-danger-text: #7a3210;
|
||
|
||
--momo-info: #4a6b85;
|
||
--momo-info-bg: #dfe5ec;
|
||
--momo-info-border: rgba(74, 107, 133, 0.32);
|
||
--momo-info-text: #2d4459;
|
||
|
||
/* ════════════════════════════════════════════════════════
|
||
* 5. 標籤色（Tag / Chip / Badge）
|
||
* ════════════════════════════════════════════════════════
|
||
* 一個標籤 = 一組 (bg + border + text)，三件成套
|
||
* 全部 WCAG AA on bg
|
||
*/
|
||
--momo-tag-caramel-bg: #f5e1d9;
|
||
--momo-tag-caramel-border: rgba(201, 100, 66, 0.32);
|
||
--momo-tag-caramel-text: #7a3520;
|
||
|
||
--momo-tag-honey-bg: #f3e7c4;
|
||
--momo-tag-honey-border: rgba(200, 144, 67, 0.36);
|
||
--momo-tag-honey-text: #6e500e;
|
||
|
||
--momo-tag-clay-bg: #ebd9cb;
|
||
--momo-tag-clay-border: rgba(184, 111, 82, 0.34);
|
||
--momo-tag-clay-text: #6f3a23;
|
||
|
||
--momo-tag-saffron-bg: #f0dfc1;
|
||
--momo-tag-saffron-border: rgba(184, 121, 47, 0.36);
|
||
--momo-tag-saffron-text: #6f4915;
|
||
|
||
--momo-tag-terra-bg: #ecdcd0;
|
||
--momo-tag-terra-border: rgba(168, 93, 61, 0.34);
|
||
--momo-tag-terra-text: #6a3621;
|
||
|
||
--momo-tag-rust-bg: #efd3c4;
|
||
--momo-tag-rust-border: rgba(168, 68, 40, 0.34);
|
||
--momo-tag-rust-text: #7a3210;
|
||
|
||
--momo-tag-olive-bg: #ece5d2;
|
||
--momo-tag-olive-border: rgba(138, 115, 64, 0.32);
|
||
--momo-tag-olive-text: #5a4a1c;
|
||
|
||
--momo-tag-ink-bg: #2a2520;
|
||
--momo-tag-ink-border: #2a2520;
|
||
--momo-tag-ink-text: #faf7f0;
|
||
|
||
--momo-tag-muted-bg: #e2dccf;
|
||
--momo-tag-muted-border: rgba(42, 37, 32, 0.16);
|
||
--momo-tag-muted-text: #645c52;
|
||
|
||
--momo-tag-success-bg: #e6ead6;
|
||
--momo-tag-success-border: rgba(90, 122, 63, 0.30);
|
||
--momo-tag-success-text: #3d5527;
|
||
|
||
/* P0 / P1 / P2 警示專用（與蜂蜜黃同家族，HSL 12° / 39° / 30°） */
|
||
--momo-priority-p0-bg: #efd3c4;
|
||
--momo-priority-p0-border: rgba(168, 68, 40, 0.36);
|
||
--momo-priority-p0-text: #7a3210;
|
||
|
||
--momo-priority-p1-bg: #f3e7c4;
|
||
--momo-priority-p1-border: rgba(200, 144, 67, 0.36);
|
||
--momo-priority-p1-text: #6e500e;
|
||
|
||
--momo-priority-p2-bg: #ece5d2;
|
||
--momo-priority-p2-border: rgba(138, 115, 64, 0.32);
|
||
--momo-priority-p2-text: #5a4a1c;
|
||
|
||
/* ════════════════════════════════════════════════════════
|
||
* 6. Typography
|
||
* ════════════════════════════════════════════════════════ */
|
||
--momo-font-display:
|
||
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||
"PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
|
||
--momo-font-family:
|
||
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||
"PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
|
||
--momo-font-mono:
|
||
"JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
|
||
--momo-font-family-base: var(--momo-font-family);
|
||
--momo-font-family-mono: var(--momo-font-mono);
|
||
|
||
/* 字級 — 8 階 (從 28 種降到 8) */
|
||
--momo-text-display: 30px; /* hero 數字 */
|
||
--momo-text-headline: 22px; /* 區塊大數字 */
|
||
--momo-text-title: 17px; /* 卡片標題 */
|
||
--momo-text-body: 14px; /* 內文 */
|
||
--momo-text-body-sm: 13px; /* 表格內文 */
|
||
--momo-text-meta: 12px; /* mono 數據 / 次要 */
|
||
--momo-text-label: 11px; /* LABEL only */
|
||
--momo-text-label-tiny: 10px; /* 角落標籤 only */
|
||
|
||
/* 兼容 v2 命名 */
|
||
--momo-font-size-xs: 12px;
|
||
--momo-font-size-sm: 13px;
|
||
--momo-font-size-base: 14px;
|
||
--momo-font-size-lg: 17px;
|
||
--momo-font-size-xl: 22px;
|
||
--momo-font-size-2xl: 30px;
|
||
|
||
--momo-font-weight-normal: 400;
|
||
--momo-font-weight-medium: 500;
|
||
--momo-font-weight-semibold: 600;
|
||
--momo-font-weight-bold: 700;
|
||
--momo-font-weight-black: 800;
|
||
|
||
--momo-line-height-tight: 1.2;
|
||
--momo-line-height-base: 1.5;
|
||
--momo-line-height-loose: 1.7;
|
||
|
||
/* ════════════════════════════════════════════════════════
|
||
* 7. Spacing — 7 階
|
||
* ════════════════════════════════════════════════════════ */
|
||
--momo-space-1: 4px;
|
||
--momo-space-2: 8px;
|
||
--momo-space-3: 12px;
|
||
--momo-space-4: 16px;
|
||
--momo-space-5: 24px;
|
||
--momo-space-6: 32px;
|
||
--momo-space-7: 48px;
|
||
--momo-space-8: 64px;
|
||
|
||
/* ════════════════════════════════════════════════════════
|
||
* 8. Radius — 全站偏方角
|
||
* ════════════════════════════════════════════════════════ */
|
||
--momo-radius-sm: 2px;
|
||
--momo-radius-md: 4px;
|
||
--momo-radius-lg: 6px;
|
||
--momo-radius-xl: 10px; /* 只有 hero / modal */
|
||
--momo-radius-pill: 999px;
|
||
--momo-radius-circle: 50%;
|
||
|
||
/* ════════════════════════════════════════════════════════
|
||
* 9. Shadow — Nothing 風：用線條取代陰影
|
||
* ════════════════════════════════════════════════════════ */
|
||
--momo-shadow-sm: inset 0 -1px 0 var(--momo-border-light);
|
||
--momo-shadow-md: 0 0 0 1px var(--momo-border-light);
|
||
--momo-shadow-lg: 0 0 0 1px var(--momo-border-strong);
|
||
--momo-shadow-modal: 0 8px 28px -10px rgba(42, 37, 32, 0.18),
|
||
0 0 0 1px var(--momo-border-light);
|
||
--momo-shadow-focus: 0 0 0 3px var(--momo-page-accent-soft);
|
||
|
||
/* ════════════════════════════════════════════════════════
|
||
* 10. Transition
|
||
* ════════════════════════════════════════════════════════ */
|
||
--momo-duration-fast: 0.12s;
|
||
--momo-duration-normal: 0.2s;
|
||
--momo-duration-slow: 0.4s;
|
||
--momo-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||
--momo-ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||
|
||
--momo-transition-base:
|
||
color var(--momo-duration-fast) var(--momo-ease-in-out),
|
||
background-color var(--momo-duration-fast) var(--momo-ease-in-out),
|
||
border-color var(--momo-duration-fast) var(--momo-ease-in-out),
|
||
box-shadow var(--momo-duration-fast) var(--momo-ease-in-out);
|
||
|
||
/* ════════════════════════════════════════════════════════
|
||
* 10b. Dot Matrix — 點陣視覺語言（Nothing Phone 風）
|
||
* ════════════════════════════════════════════════════════
|
||
* 全站共用 utility token；不要在 component CSS 裡重新定義 dot 圖樣
|
||
* 尺寸 token：tight(8) / base(10) / loose(12) / wide(14)
|
||
* 濃度 token：whisper(0.06) / soft(0.14) / mid(0.28) / strong(0.55)
|
||
* 顏色：預設吃 currentColor，由父層字色決定
|
||
*/
|
||
--momo-dot-size-tight: 8px;
|
||
--momo-dot-size-base: 10px;
|
||
--momo-dot-size-loose: 12px;
|
||
--momo-dot-size-wide: 14px;
|
||
--momo-dot-radius: 1.1px; /* 點半徑（用於 radial-gradient 半徑） */
|
||
|
||
--momo-dot-alpha-whisper: 0.06;
|
||
--momo-dot-alpha-soft: 0.14;
|
||
--momo-dot-alpha-mid: 0.28;
|
||
--momo-dot-alpha-strong: 0.55;
|
||
|
||
/* ════════════════════════════════════════════════════════
|
||
* 11. z-index
|
||
* ════════════════════════════════════════════════════════ */
|
||
--momo-z-base: 1;
|
||
--momo-z-dropdown: 1000;
|
||
--momo-z-sticky: 1020;
|
||
--momo-z-fixed: 1030;
|
||
--momo-z-modal-backdrop: 1040;
|
||
--momo-z-modal: 1050;
|
||
--momo-z-popover: 1060;
|
||
--momo-z-tooltip: 1070;
|
||
--momo-z-toast: 1080;
|
||
|
||
/* ════════════════════════════════════════════════════════
|
||
* 12. Layout
|
||
* ════════════════════════════════════════════════════════ */
|
||
--momo-sidebar-width: 240px;
|
||
--momo-sidebar-collapsed-width: 64px;
|
||
--momo-topbar-height: 56px;
|
||
--momo-content-max-width: 1600px;
|
||
--momo-content-padding-x: 28px;
|
||
--momo-content-padding-y: 24px;
|
||
}
|
||
|
||
/* ════════════════════════════════════════════════════════
|
||
* 群組主題切換 — 由 [data-page-group] 觸發
|
||
* ════════════════════════════════════════════════════════ */
|
||
.momo-app[data-page-group="monitor"] {
|
||
--momo-page-accent: var(--momo-warm-caramel);
|
||
--momo-page-accent-dark: #8f4530;
|
||
--momo-page-accent-soft: var(--momo-warm-caramel-soft);
|
||
--momo-page-accent-line: rgba(201, 100, 66, 0.32);
|
||
--momo-page-ink: var(--momo-ink-monitor);
|
||
--momo-page-chart-1: var(--momo-warm-caramel);
|
||
--momo-page-chart-2: var(--momo-warm-apricot);
|
||
--momo-page-chart-3: var(--momo-warm-honey);
|
||
--momo-page-chart-4: var(--momo-warm-olive);
|
||
--momo-page-chart-5: var(--momo-warm-clay);
|
||
--momo-page-chart-6: var(--momo-warm-greige);
|
||
}
|
||
|
||
.momo-app[data-page-group="analytics"] {
|
||
--momo-page-accent: var(--momo-warm-honey);
|
||
--momo-page-accent-dark: #80541a;
|
||
--momo-page-accent-soft: var(--momo-warm-honey-soft);
|
||
--momo-page-accent-line: rgba(200, 144, 67, 0.36);
|
||
--momo-page-ink: var(--momo-ink-analytics);
|
||
--momo-page-chart-1: var(--momo-warm-honey);
|
||
--momo-page-chart-2: var(--momo-warm-caramel);
|
||
--momo-page-chart-3: var(--momo-warm-olive);
|
||
--momo-page-chart-4: var(--momo-warm-apricot);
|
||
--momo-page-chart-5: var(--momo-warm-clay);
|
||
--momo-page-chart-6: var(--momo-warm-greige);
|
||
}
|
||
|
||
.momo-app[data-page-group="ops"] {
|
||
--momo-page-accent: var(--momo-warm-clay);
|
||
--momo-page-accent-dark: #6f3a23;
|
||
--momo-page-accent-soft: var(--momo-warm-clay-soft);
|
||
--momo-page-accent-line: rgba(184, 111, 82, 0.34);
|
||
--momo-page-ink: var(--momo-ink-ops);
|
||
--momo-page-chart-1: var(--momo-warm-clay);
|
||
--momo-page-chart-2: var(--momo-warm-terra);
|
||
--momo-page-chart-3: var(--momo-warm-honey);
|
||
--momo-page-chart-4: var(--momo-warm-caramel);
|
||
--momo-page-chart-5: var(--momo-warm-apricot);
|
||
--momo-page-chart-6: var(--momo-warm-greige);
|
||
}
|
||
|
||
.momo-app[data-page-group="ai"] {
|
||
--momo-page-accent: var(--momo-warm-saffron);
|
||
--momo-page-accent-dark: #6f4915;
|
||
--momo-page-accent-soft: var(--momo-warm-saffron-soft);
|
||
--momo-page-accent-line: rgba(184, 121, 47, 0.36);
|
||
--momo-page-ink: var(--momo-ink-ai);
|
||
--momo-page-chart-1: var(--momo-warm-saffron);
|
||
--momo-page-chart-2: var(--momo-warm-honey);
|
||
--momo-page-chart-3: var(--momo-warm-caramel);
|
||
--momo-page-chart-4: var(--momo-warm-olive);
|
||
--momo-page-chart-5: var(--momo-warm-apricot);
|
||
--momo-page-chart-6: var(--momo-warm-greige);
|
||
}
|
||
|
||
.momo-app[data-page-group="system"] {
|
||
--momo-page-accent: var(--momo-warm-terra);
|
||
--momo-page-accent-dark: #6a3621;
|
||
--momo-page-accent-soft: var(--momo-warm-terra-soft);
|
||
--momo-page-accent-line: rgba(168, 93, 61, 0.34);
|
||
--momo-page-ink: var(--momo-ink-system);
|
||
--momo-page-chart-1: var(--momo-warm-terra);
|
||
--momo-page-chart-2: var(--momo-warm-clay);
|
||
--momo-page-chart-3: var(--momo-warm-olive);
|
||
--momo-page-chart-4: var(--momo-warm-greige);
|
||
--momo-page-chart-5: var(--momo-warm-honey);
|
||
--momo-page-chart-6: var(--momo-warm-apricot);
|
||
}
|
||
|
||
/* ════════════════════════════════════════════════════════
|
||
* 全域基礎
|
||
* ════════════════════════════════════════════════════════ */
|
||
.momo-app {
|
||
font-family: var(--momo-font-family);
|
||
font-size: var(--momo-text-body);
|
||
line-height: var(--momo-line-height-base);
|
||
color: var(--momo-text-primary);
|
||
background-color: var(--momo-bg-body);
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.momo-app *,
|
||
.momo-app *::before,
|
||
.momo-app *::after {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.momo-mono {
|
||
font-family: var(--momo-font-mono);
|
||
font-feature-settings: "tnum";
|
||
}
|
||
|
||
.momo-display {
|
||
font-family: var(--momo-font-display);
|
||
font-feature-settings: "tnum", "ss01";
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.momo-label {
|
||
font-family: var(--momo-font-display);
|
||
font-size: var(--momo-text-label-tiny);
|
||
font-weight: 600;
|
||
letter-spacing: 0.10em;
|
||
text-transform: uppercase;
|
||
color: var(--momo-text-tertiary);
|
||
}
|
||
|
||
/* 滾動條 */
|
||
.momo-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
|
||
.momo-scroll::-webkit-scrollbar-track { background: transparent; }
|
||
.momo-scroll::-webkit-scrollbar-thumb {
|
||
background: rgba(42, 37, 32, 0.18);
|
||
border-radius: var(--momo-radius-pill);
|
||
}
|
||
.momo-scroll::-webkit-scrollbar-thumb:hover { background: rgba(42, 37, 32, 0.32); }
|
||
|
||
.momo-app button:not(.btn):not(.btn-close) {
|
||
font-family: inherit;
|
||
}
|
||
|
||
/* 動畫 */
|
||
@keyframes momo-fade-in {
|
||
from { opacity: 0; transform: translateY(2px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
@keyframes momo-pulse-dot {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.3; }
|
||
}
|