175 lines
5.4 KiB
CSS
175 lines
5.4 KiB
CSS
|
/**
|
|||
|
|
* 巡樓 · Lapras — Enchanted calm UI
|
|||
|
|
* 借鏡 Linear / Stripe / Raycast：安靜留白、單一 accent、玻璃層次
|
|||
|
|
* 魔法感：柔光 aurora、細星芒 icon、圓潤控件
|
|||
|
|
* 字體：Inter + Taipei Sans TC（保留）
|
|||
|
|
* 色：pokemonpalette 綠 #9ccd91 / #c1e47b
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
:root {
|
|||
|
|
color-scheme: light;
|
|||
|
|
|
|||
|
|
--pp-primary: #9ccd91;
|
|||
|
|
--pp-secondary: #c1e47b;
|
|||
|
|
--pp-ring: #90c884;
|
|||
|
|
--pp-fg: #192815;
|
|||
|
|
|
|||
|
|
/* 空氣感底：極淡綠白 */
|
|||
|
|
--hb-bg: #f7faf6;
|
|||
|
|
--hb-surface: rgba(255, 255, 255, 0.82);
|
|||
|
|
--hb-surface-solid: #ffffff;
|
|||
|
|
--hb-surface-muted: #f0f5ec;
|
|||
|
|
--hb-ink: #192815;
|
|||
|
|
--hb-ink-secondary: #3d4a36;
|
|||
|
|
--hb-muted: #6f7d5f;
|
|||
|
|
--hb-subtle: #9aa888;
|
|||
|
|
--hb-line: color-mix(in srgb, #d5e4d2 88%, transparent);
|
|||
|
|
--hb-line-strong: #d5e4d2;
|
|||
|
|
|
|||
|
|
--hb-brand: #9ccd91;
|
|||
|
|
--hb-brand-hover: #86c07c;
|
|||
|
|
--hb-brand-soft: color-mix(in srgb, #9ccd91 18%, #ffffff);
|
|||
|
|
--hb-brand-on: #0f1a0e;
|
|||
|
|
--hb-brand-deep: #4f8a48;
|
|||
|
|
--hb-magic: #c1e47b;
|
|||
|
|
--hb-magic-glow: rgb(156 205 145 / 0.45);
|
|||
|
|
|
|||
|
|
--hb-success: #4f8a48;
|
|||
|
|
--hb-success-soft: #e6f4e3;
|
|||
|
|
--hb-danger: #e85d5d;
|
|||
|
|
--hb-danger-soft: #fef1f1;
|
|||
|
|
--hb-warning: #b8962e;
|
|||
|
|
--hb-warning-soft: #fbf6e4;
|
|||
|
|
--hb-accent-warm: #c1e47b;
|
|||
|
|
|
|||
|
|
--hb-fun-mint: #9ccd91;
|
|||
|
|
--hb-fun-mint-soft: #eef7ec;
|
|||
|
|
--hb-fun-sky: #c1e47b;
|
|||
|
|
--hb-fun-sky-soft: #f4fadc;
|
|||
|
|
--hb-fun-coral: #f08a72;
|
|||
|
|
--hb-fun-coral-soft: #fdeee9;
|
|||
|
|
--hb-fun-peach: #e8c07a;
|
|||
|
|
--hb-fun-peach-soft: #fef6e8;
|
|||
|
|
--hb-fun-lavender: #a8b88a;
|
|||
|
|
--hb-fun-lavender-soft: #f0f3e8;
|
|||
|
|
--hb-fun-gold: #c1e47b;
|
|||
|
|
--hb-fun-gold-soft: #f4fadc;
|
|||
|
|
|
|||
|
|
/* 更圓、更柔 */
|
|||
|
|
--hb-radius-sm: 0.7rem;
|
|||
|
|
--hb-radius: 1rem;
|
|||
|
|
--hb-radius-lg: 1.25rem;
|
|||
|
|
--hb-radius-xl: 1.6rem;
|
|||
|
|
--hb-radius-pill: 9999px;
|
|||
|
|
|
|||
|
|
--hb-shadow-card:
|
|||
|
|
0 0 0 1px color-mix(in srgb, var(--hb-line-strong) 70%, transparent),
|
|||
|
|
0 1px 2px rgb(25 40 21 / 0.03),
|
|||
|
|
0 8px 28px rgb(156 205 145 / 0.1);
|
|||
|
|
--hb-shadow-soft: 0 4px 18px var(--hb-magic-glow);
|
|||
|
|
--hb-shadow-float: 0 16px 48px rgb(25 40 21 / 0.1);
|
|||
|
|
--hb-shadow-glow: 0 0 24px rgb(193 228 123 / 0.35);
|
|||
|
|
|
|||
|
|
--hb-font-sans: "Inter", "Taipei Sans TC", system-ui, -apple-system, "Segoe UI",
|
|||
|
|
"Noto Sans TC", sans-serif;
|
|||
|
|
--hb-font-en: "Inter", system-ui, -apple-system, sans-serif;
|
|||
|
|
|
|||
|
|
/* 字級：略放大，小螢幕也清楚（輸入框 ≥16px 避免 iOS 縮放） */
|
|||
|
|
--hb-text-xs: 0.8125rem; /* 13px · 次要 meta */
|
|||
|
|
--hb-text-sm: 0.9375rem; /* 15px · 按鈕／輔助 */
|
|||
|
|
--hb-text-base: 1.0625rem; /* 17px · 內文 */
|
|||
|
|
--hb-text-lg: 1.1875rem; /* 19px · 卡片標題 */
|
|||
|
|
--hb-text-xl: 1.5rem; /* 24px · 頁標題 */
|
|||
|
|
--hb-text-input: 1rem; /* 16px · 表單 */
|
|||
|
|
|
|||
|
|
--hb-space-1: 0.25rem;
|
|||
|
|
--hb-space-2: 0.5rem;
|
|||
|
|
--hb-space-3: 0.75rem;
|
|||
|
|
--hb-space-4: 1rem;
|
|||
|
|
--hb-space-5: 1.25rem;
|
|||
|
|
--hb-space-6: 1.5rem;
|
|||
|
|
--hb-space-8: 2rem;
|
|||
|
|
--hb-space-10: 2.5rem;
|
|||
|
|
/* 天地：區塊／元件間固定呼吸距離（勿再擠） */
|
|||
|
|
--hb-gap-tight: 0.5rem; /* 列內小元件 */
|
|||
|
|
--hb-gap-inline: 0.75rem; /* 同列按鈕、chip */
|
|||
|
|
--hb-gap-stack: 1rem; /* 表單欄位、stack 預設 */
|
|||
|
|
--hb-gap-block: 1.35rem; /* 卡片內大段 */
|
|||
|
|
--hb-gap-section: 1.75rem; /* 頁面區塊與區塊 */
|
|||
|
|
--hb-gap-page: 2.25rem; /* 頁面上下大留白（桌面） */
|
|||
|
|
|
|||
|
|
--hb-touch: 2.75rem;
|
|||
|
|
--hb-sidebar-width: 15rem;
|
|||
|
|
--hb-topbar-height: 3.6rem;
|
|||
|
|
--hb-dock-height: 3.85rem;
|
|||
|
|
|
|||
|
|
/* 背景光暈 */
|
|||
|
|
--hb-aurora-1: color-mix(in srgb, #9ccd91 22%, transparent);
|
|||
|
|
--hb-aurora-2: color-mix(in srgb, #c1e47b 18%, transparent);
|
|||
|
|
--hb-aurora-3: color-mix(in srgb, #b8d4e8 12%, transparent);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Dark：中性近黑底 + 高明度綠 accent（Raycast / Linear 策略）
|
|||
|
|
* 問題：整片偏綠 → brand 被「吃掉」、髒、對比差
|
|||
|
|
* 解法：底改炭灰／石墨，綠只當強調與光暈
|
|||
|
|
*/
|
|||
|
|
[data-theme="dark"] {
|
|||
|
|
color-scheme: dark;
|
|||
|
|
|
|||
|
|
/* 中性畫布（幾乎無綠相） */
|
|||
|
|
--hb-bg: #0c0e0d;
|
|||
|
|
--hb-surface: rgba(22, 24, 23, 0.82);
|
|||
|
|
--hb-surface-solid: #161916;
|
|||
|
|
--hb-surface-muted: #1e211f;
|
|||
|
|
/* 偏冷的米白字，不是綠灰字 */
|
|||
|
|
--hb-ink: #f3f4f2;
|
|||
|
|
--hb-ink-secondary: #b8beb6;
|
|||
|
|
--hb-muted: #8b928a;
|
|||
|
|
--hb-subtle: #5f6660;
|
|||
|
|
--hb-line: color-mix(in srgb, #2c302d 92%, transparent);
|
|||
|
|
--hb-line-strong: #2c302d;
|
|||
|
|
|
|||
|
|
/* 夜光綠：比淺色模式更亮、更飽和，才「浮」在暗底上 */
|
|||
|
|
--hb-brand: #a8e09c;
|
|||
|
|
--hb-brand-hover: #c0edb4;
|
|||
|
|
--hb-brand-soft: color-mix(in srgb, #a8e09c 12%, #161916);
|
|||
|
|
--hb-brand-on: #0a1009;
|
|||
|
|
--hb-brand-deep: #c8f0b8;
|
|||
|
|
--hb-magic: #d4f08a;
|
|||
|
|
--hb-magic-glow: rgb(168 224 156 / 0.32);
|
|||
|
|
|
|||
|
|
--hb-danger: #ff7b7b;
|
|||
|
|
--hb-danger-soft: #2e1818;
|
|||
|
|
--hb-success: #a8e09c;
|
|||
|
|
--hb-success-soft: #152018;
|
|||
|
|
--hb-warning: #e0c060;
|
|||
|
|
--hb-warning-soft: #2a2414;
|
|||
|
|
--hb-accent-warm: #d4f08a;
|
|||
|
|
|
|||
|
|
--hb-fun-mint: #a8e09c;
|
|||
|
|
--hb-fun-mint-soft: #1a2218;
|
|||
|
|
--hb-fun-sky: #d4f08a;
|
|||
|
|
--hb-fun-sky-soft: #222618;
|
|||
|
|
--hb-fun-coral: #f0a090;
|
|||
|
|
--hb-fun-coral-soft: #2e1c1a;
|
|||
|
|
--hb-fun-peach: #e8c890;
|
|||
|
|
--hb-fun-peach-soft: #2a2418;
|
|||
|
|
--hb-fun-lavender: #b0b8c8;
|
|||
|
|
--hb-fun-lavender-soft: #1c1e24;
|
|||
|
|
--hb-fun-gold: #d4f08a;
|
|||
|
|
--hb-fun-gold-soft: #222618;
|
|||
|
|
|
|||
|
|
--hb-shadow-card:
|
|||
|
|
0 0 0 1px color-mix(in srgb, #2c302d 90%, transparent),
|
|||
|
|
0 10px 36px rgb(0 0 0 / 0.45);
|
|||
|
|
--hb-shadow-soft: 0 4px 22px var(--hb-magic-glow);
|
|||
|
|
--hb-shadow-float: 0 20px 56px rgb(0 0 0 / 0.55);
|
|||
|
|
--hb-shadow-glow: 0 0 32px rgb(168 224 156 / 0.28);
|
|||
|
|
|
|||
|
|
/* 光暈極克制：一點綠 + 一點冷藍，避免「綠醬」 */
|
|||
|
|
--hb-aurora-1: color-mix(in srgb, #a8e09c 9%, transparent);
|
|||
|
|
--hb-aurora-2: color-mix(in srgb, #d4f08a 6%, transparent);
|
|||
|
|
--hb-aurora-3: color-mix(in srgb, #6a8098 7%, transparent);
|
|||
|
|
}
|