/* ============================================================ css/money-tokens.css — 管钱模块专用设计令牌（管钱 V3 · 第 5 窗口新增） 定位：**不新建一套与全站冲突的设计系统**，只在全站既有令牌 （css/core.css 的 --bg-* / --text-* / --rose* / --gold / --shadow-* / --space-* / --radius-*） 之上，长出「钱」这一块自己用的语义令牌。 三条规矩： 1. 全站其它模块**不许引用** --money-*（那是钱这一块的口径）；钱这一块**只许**引用 --money-*， 不许再直接写死颜色（手册 §4 / §21）。 2. 深浅色**每个语义令牌各定义一次**，绝不把浅色简单反相（手册 §4）。 暗色跟随 [data-theme-mode="dark"]；系统级 prefers-color-scheme 由 css/theme-dark-auto.css 兜底。 3. 强色底上的文字**一律用 --money-on-accent**，绝不在浅玫瑰底上压白字（手册 §H）。 命名与数值一律照手册 §4 的清单，别自己另起名字。 ============================================================ */ :root { /* ---- 面（由远到近：底 → 卡 → 浮起 → 最亮）---- */ --money-bg: oklch(0.968 0.011 84); /* 暖米白纸底 */ --money-surface: oklch(0.985 0.008 84); /* 毛玻璃面（半透明，压一层底）*/ --money-surface-solid: oklch(0.996 0.004 84); /* 纯纸面（卡/输入/浮层）*/ --money-surface-soft: oklch(0.949 0.014 84); /* 极轻的凹陷面（分组底/选卡行）*/ /* ---- 字（暖炭：永远不用纯黑）---- */ --money-ink: oklch(0.265 0.012 62); /* 主文字 */ --money-ink-soft: oklch(0.455 0.018 62); /* 次重点（金额辅助/标签）*/ --money-muted: oklch(0.545 0.016 62); /* 次要信息（≥4.5:1，不放更淡的）*/ --money-faint: oklch(0.735 0.014 62); /* 仅占位符/分隔线，不承载信息 */ /* ---- 强调（干燥玫瑰，法式旧纸 + 蜡封味，不是春节红）---- */ --money-accent: oklch(0.610 0.098 18); /* 主强调 */ --money-accent-strong: oklch(0.470 0.110 22); /* 深一档：按钮底/金额 */ --money-accent-soft: oklch(0.945 0.024 18); /* 极轻底（选中态/标签底）*/ --money-accent-line: oklch(0.860 0.038 20); /* 强调细线 */ /* 强色底上的文字：只有底足够深（+白字 ≥ 4.5:1）才用白，浅底一律用深玫瑰棕 */ --money-on-accent: oklch(0.995 0.003 84); --money-on-accent-soft: oklch(0.405 0.078 22); /* 压在浅玫瑰底上的深玫瑰棕 */ /* 卡面是一层**浅色材质**（钱袋卡面/纸纹），深色模式下也还是浅的 —— 所以压在卡面上的字必须自成一套、不跟主题翻（否则深色下浅底浅字＝看不见） */ --money-face-ink: oklch(0.300 0.014 62); /* 卡面上的主文字 */ --money-face-ink-soft: oklch(0.470 0.020 62); /* 卡面上的次文字 */ --money-face-amount: oklch(0.400 0.085 22); /* 卡面上的金额（深玫瑰棕） */ --money-face-line: oklch(0.800 0.014 76); /* 卡面上的细线/描边 */ /* ---- 线 / 分割 ---- */ --money-line: oklch(0.885 0.013 76); /* 描边 */ --money-line-faint: oklch(0.935 0.010 76); /* 更轻的描边 */ --money-divider: oklch(0.925 0.010 76); /* 分隔线 */ /* ---- 语义 ---- */ --money-success: oklch(0.470 0.068 145); /* 收进来（不是荧光绿）*/ --money-success-soft: oklch(0.947 0.026 145); --money-danger: oklch(0.515 0.145 26); /* 花出去/危险（低饱和砖红）*/ --money-danger-soft: oklch(0.948 0.028 26); --money-warm: oklch(0.585 0.078 68); /* 金色辅助（克制，只做装饰线/花字）*/ --money-warm-soft: oklch(0.952 0.032 78); /* ---- 阴影（必须非常轻；高级感靠留白/字体/比例，不靠阴影）---- */ --money-shadow-sm: 0 2px 8px oklch(0.55 0.02 62 / 0.055); --money-shadow-md: 0 4px 18px oklch(0.55 0.02 62 / 0.075); --money-shadow-lg: 0 8px 28px oklch(0.55 0.02 62 / 0.10); /* ---- 动效（一条缓动，三档时长；其余组件只许引用，不许另写 ease）---- */ --money-duration-fast: 140ms; --money-duration-base: 220ms; --money-duration-slow: 300ms; --money-ease: cubic-bezier(0.22, 1, 0.36, 1); /* ---- 圆角（主卡 18~22 / 普通面 14~18 / 输入 12~14 / 小按钮 10~14 / 标签全圆）---- */ --money-radius-card: 20px; --money-radius-surface: 16px; --money-radius-input: 13px; --money-radius-btn: 13px; --money-radius-tag: 999px; /* ---- 间距（4px 基础网格：页面 16~20 / 模块 20~28 / 内容 8~16）---- */ --money-pad-page: 18px; --money-pad-module: 22px; --money-pad-inner: 14px; /* ---- 触摸目标（ios/安卓都够得着；<44px 一律视为 bug）---- */ --money-tap: 44px; /* ============================================================ 层级：Money Overlay Layer（手册 §19） 全站层级（2028-09 实测，不许随手写数）： 400~450 管钱旧层 / 小窝历史子层 ← 会被 1510+ 的界面盖住（本次要修的就是这个） 1500~1560 小窝全屏子面板 / 朋友圈 / 日记 1600~1800 小窝内的弹层 / 书 / 音乐 / 帮助 4000~4100 全站浮层（core.css） 5000~6500 站级覆盖层（登录/引导/管理/会客厅） 99990+ body 级最顶（图片查看器/确认/toast） → 钱这一块的目标：**高于「小窝子面板」（1510~1800），低于「站级覆盖层」（5000+）**。 支付密码绝不能被小窝盖住；详情不许盖住错误页。 ============================================================ */ --z-money-base: 1620; /* 管钱面板 / 红包 / 转账（全屏层）*/ --z-money-sheet: 1640; /* 自绘小窗（金额/选择/钱袋/重分）*/ --z-money-modal: 1660; /* 支付密码 / 支付方式 / 详情 */ --z-money-critical: 1690; /* 支付中 / 支付错误（最不能出系统感、也最不能被盖）*/ } /* ================================================================ 深色模式：**每个语义令牌重新定义**，不是把浅色反相 （背景偏深棕/深灰褐；钱袋与卡片仍是暖的，不是冷灰） ================================================================ */ [data-theme-mode="dark"] { --money-bg: oklch(0.225 0.014 62); --money-surface: oklch(0.255 0.014 62); --money-surface-solid: oklch(0.285 0.015 62); --money-surface-soft: oklch(0.245 0.013 62); --money-ink: oklch(0.930 0.010 84); --money-ink-soft: oklch(0.790 0.013 84); --money-muted: oklch(0.680 0.014 78); --money-faint: oklch(0.500 0.014 72); --money-accent: oklch(0.735 0.072 22); --money-accent-strong: oklch(0.800 0.066 24); --money-accent-soft: oklch(0.320 0.038 22); --money-accent-line: oklch(0.420 0.048 22); /* 深色下强调色变亮、变浅 → 白字不再够对比，改压深玫瑰棕 */ --money-on-accent: oklch(0.225 0.030 24); --money-on-accent-soft: oklch(0.885 0.042 24); --money-line: oklch(0.375 0.014 68); --money-line-faint: oklch(0.335 0.013 68); --money-divider: oklch(0.345 0.013 68); --money-success: oklch(0.760 0.070 148); --money-success-soft: oklch(0.315 0.038 148); --money-danger: oklch(0.715 0.115 28); --money-danger-soft: oklch(0.320 0.055 28); --money-warm: oklch(0.790 0.070 78); --money-warm-soft: oklch(0.330 0.035 78); /* 深色下阴影要更沉，但不能出现「整张白卡突然浮出来」 */ --money-shadow-sm: 0 2px 8px oklch(0 0 0 / 0.28); --money-shadow-md: 0 4px 18px oklch(0 0 0 / 0.38); --money-shadow-lg: 0 8px 28px oklch(0 0 0 / 0.50); } /* ================================================================ 与她选的配色方案对齐（**不是另起一套**） 全站有一套用户自选的配色（js/theme-data.js 的 30 套，写进 --rose / --rose-dark）， 钱这一块的强调色必须跟着走——否则她选「雾绿鼠尾」，管钱界面却还是玫瑰色，就分家了。 做法：从主题强调色 --rose 现场算出深一档 / 极轻底 / 细线 / 压在上面的字色。 三件事一起满足：①只有一处定义 ②换主题自动同步 ③浅底绝不压白字。 （浏览器不认识 oklch(from …) 时自动退回上面 :root 里那套玫瑰基准值—— Firefox 112 以下 / 老安卓 WebView；此时是「少一层跟随」，不是坏掉。） ================================================================ */ :root { --money-accent: oklch(from var(--rose) 0.640 0.090 h); --money-accent-strong: oklch(from var(--rose) 0.480 0.105 h); --money-accent-soft: oklch(from var(--rose) 0.950 0.026 h); --money-accent-line: oklch(from var(--rose) 0.870 0.038 h); --money-on-accent: oklch(from var(--rose) 0.995 0.004 h); --money-on-accent-soft: oklch(from var(--rose) 0.400 0.075 h); } [data-theme-mode="dark"] { --money-accent: oklch(from var(--rose) 0.760 0.070 h); --money-accent-strong: oklch(from var(--rose) 0.820 0.062 h); --money-accent-soft: oklch(from var(--rose) 0.325 0.035 h); --money-accent-line: oklch(from var(--rose) 0.430 0.046 h); /* 深色下强调色变亮变浅 → 上面压的字改深色，不再用白 */ --money-on-accent: oklch(from var(--rose) 0.225 0.030 h); --money-on-accent-soft: oklch(from var(--rose) 0.885 0.042 h); } /* ---- 字体层级（衬线为主；英文只做装饰，功能文字中文）---- */ :root { --money-font: var(--font-body); --money-font-num: var(--font-display); --money-fs-hero: 32px; /* 金额主视觉（32~40，窄屏降档）*/ --money-fs-title: 19px; /* 页面标题（18~22）*/ --money-fs-body: 14px; /* 功能正文（14~15）*/ --money-fs-sub: 12.5px; /* 次要信息（12~13）*/ --money-fs-en: 12px; /* 英文装饰（10~16，低透明度）*/ --money-lh-body: 1.6; } /* ================================================================ 手机容器约束（手册 §C）：把「480 居中手机屏」变成可复用的东西， 不是靠某个文件里的媒体查询碰巧限住宽度。 ⚠ #app 加 isolation 是一次性保险：钱这一块所有层级都是「互相比大小」， 不跟站级覆盖层（5000+）抢。加完之后 #app 内部的 z 再高也不会跑出手机框、 也不会盖住登录页/管理后台那些站级层。 ================================================================ */ #app { isolation: isolate; } /* 钱这一块所有全屏层/浮层的共同底座：竖屏、限宽 480 居中、安全区各自让出。 「铺满」用 100vh（不是 top:0;bottom:0）：iOS 独立运行(加到主屏)时 bottom:0 只到可视区，底部会留一条白边（长期规则 #35）。 */ .money-layer { position: fixed; top: 0; height: 100vh; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; box-sizing: border-box; } /* ================================================================ 减少动效：钱这一块所有动效都留一个「瞬间」替代品（手册 §I / §十八 E） ================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --money-duration-fast: 1ms; --money-duration-base: 1ms; --money-duration-slow: 1ms; } }