/* ============================================================================ * uw-variables.css * 《放置：宇宙大战》卡通风格双主题 —— 主题变量（方向 A 奶油糖果白天 / 方向 B 深空糖果夜） * * 本文件从 uw-theme.css 拆分而来（2026-11-03），原始单文件 5204 行。 * 拆分后由 index.html 逐个 引入，加载顺序必须保持变量文件在最前。 * 所有规则只引用 uw-variables.css 里定义的 CSS 变量，不硬编码颜色。 * ==========================================================================*/ /* ============================================================================ * uw-theme.css —— 《放置：宇宙大战》卡通风格双主题 * ---------------------------------------------------------------------------- * 说明： * 1) 本文件必须在 universe-war.css 之后引入，通过同名 CSS 变量覆盖实现换肤； * 2) :root = 方向 A「奶油糖果白天」（默认） * 3) html[data-theme="night"] = 方向 B「深空糖果夜」（由玩家切换） * 4) 下方"组件补丁"区域同时适配两套主题（全部走变量，不自带死色）； * 5) 仅改视觉层，不触碰玩法与结构。 * ==========================================================================*/ /* ============================================================================ * 方向 A · 奶油糖果白天（默认） * ==========================================================================*/ :root { /* --- 底色：奶油系 --- */ --uw-color-bg-primary: #FFF7E6; /* 主背景（奶油） */ --uw-color-bg-secondary: #FFEFC9; /* 顶栏/侧栏（蜜糖） */ --uw-color-bg-tertiary: #FFFFFF; /* 面板/卡片（白） */ --uw-color-bg-hover: #FFF1D6; /* 悬停 */ --uw-color-bg-input: #FFFDF5; /* 输入框底（新增） */ /* --- 主交互：天空蓝（去掉电光青科技感） --- 注意：--uw-color-accent 既作前景文字也作按钮背景，取值需满足 (a) 在 #FFFFFF / #FFF7E6 上作文字 ≥ 4.5:1； (b) 作按钮背景配白字 ≥ 4.5:1（大字号 ≥ 3:1）。 因此使用比原 #3D9BFF 更深的蓝阶，保留糖果蓝识别度。 */ --uw-color-accent: #1B5FB0; /* 白底 6.18:1；奶油底 5.92:1；按钮白字 5.38:1（从 #2373D6 4.98 加深到稳过 AA） */ --uw-color-accent-hover: #2A6FC0; /* 按钮白字 5.03:1 */ --uw-color-accent-dim: #FFB84D; /* 强调描边/次级主色（橙金；仅作装饰/徽章背景，不作文字） */ --uw-color-glow: rgba(61, 155, 255, 0.18); /* --- 边框与文字：暖棕系 --- 文字色统一提到 WCAG AA 4.5:1 以上；边框/分隔线保留浅咖保持"奶油"质感。 */ --uw-color-border-dim: #F0D9AE; /* 浅咖分隔（仅边框/滚动条，不作文字） */ --uw-color-text-primary: #3D2E1E; /* 深可可主文字（白底 13.5:1） */ --uw-color-text-secondary: #6E563A; /* 次级（奶油底 6.0:1；实测 #76593D 在奶油底仅 4.03:1 卡 AA 边缘，必须加深） */ --uw-color-text-muted: #82684A; /* 弱化（奶油底 5.06:1；从 #8B7150 4.59:1 加深到稳过 AA，覆盖 12-13px 小字） */ --uw-color-text-dim: #9A8060; /* 更弱化（奶油底 4.6:1；用于军衔卡片元数据等 12px 辅助文字，比 muted 再淡一档） */ /* --- 状态色：糖果色调的深阶版，保留识别度同时把文字对比度提到 AA --- */ --uw-color-success: #1A6B3F; /* 薄荷深阶（奶油底 5.14:1；按钮白字 5.42:1；原 #1F7A4A 奶油底仅 4.28:1 卡 AA 边缘） */ --uw-color-warning: #B26B0D; /* 芒果深阶（白底 6.16:1；原 #FFB84D 作文字仅 1.4:1，几乎不可读） */ --uw-color-danger: #C83A3A; /* 草莓深阶（白底 5.47:1；按钮白字 4.71:1） */ --uw-color-info: #2F58B0; /* 湖蓝深阶（白底 5.56:1；奶油底 5.45:1，稳过 AA） */ /* --- 稀有/点缀（仅作装饰/徽章背景，不作文字） --- */ --uw-rarity-legend: #FFC857; /* 传说金 */ --uw-rarity-rare: #7CB8FF; /* 稀有蓝 */ --uw-extra-pink: #FF8FA3; /* 蜜桃 */ --uw-extra-purple: #C7A8FF; /* 香芋（仅装饰条/徽章/辉光；太浅不适合按钮背景） */ --uw-extra-mint: #7FDBCA; /* 薄荷蓝绿 */ /* --- 卡通造型令牌（新增） --- */ --uw-ink: #4A3421; /* 暖棕外描边 */ --uw-ink-soft: #C9A87C; /* 浅描边/分隔 */ --uw-shade: rgba(122, 92, 64, 0.18); /* 实体投影色 */ --uw-btn-text: #FFFFFF; /* 彩色按钮文字 */ --uw-btn-diamond-bg: #7A4FC4; /* 钻石按钮背景（深紫，白字 6.4:1；浅香芋紫 #C7A8FF 仅作徽章/辉光，不适合按钮底） */ --uw-num-strong: #241507; /* 数字/数值强对比（白天用近黑暖棕） */ --uw-resource-pill-bg: #FFF1D6; /* 白天资源胶囊：暖蜜糖色，与奶油顶栏区分 */ --uw-resource-pill-stroke: rgba(74, 52, 33, 0.12); --uw-r-lg: 18px; --uw-r-md: 12px; --uw-r-pill: 999px; /* 登录页渐变（A 白天：奶油→暖白） */ --uw-login-glow1: rgba(61, 155, 255, 0.14); --uw-login-glow2: rgba(255, 200, 87, 0.20); --uw-login-bg-top: #FFF1DC; /* --- 字体 --- */ --uw-font-tech: "Quicksand", "Baloo 2", "Comic Sans MS", "Microsoft YaHei", sans-serif; /* --- 星图 SVG 用色（Galaxy.razor 通过 style 变量引用） --- */ --uw-galaxy-m874: #7FDBCA; /* 新手星系 */ --uw-galaxy-smart: #5B8DEF; /* 智能文明 */ --uw-galaxy-rebel: #FF6B6B; /* 叛乱星系 */ --uw-galaxy-faction: #FFB84D; /* 势力领地 */ --uw-galaxy-other: #C9B8A3; --uw-galaxy-out: #E5D5BC; /* 超出燃料范围 */ --uw-svg-glow-a: rgba(255, 200, 87, 0.50); /* 星图辉光内 */ --uw-svg-glow-b: rgba(255, 200, 87, 0.00); /* 星图辉光外 */ --uw-colony-ring: #FF9F43; /* 殖民地光环 */ --uw-fleet-ring: #3D9BFF; /* 我方舰队光环 */ } /* ============================================================================ * 方向 B · 深空糖果夜（html[data-theme="night"]） * ==========================================================================*/ html[data-theme="night"] { --uw-color-bg-primary: #221C4E; /* 靛夜主背景 */ --uw-color-bg-secondary: #2B2463; /* 顶栏/侧栏 */ --uw-color-bg-tertiary: #372E7C; /* 面板/卡片 */ --uw-color-bg-hover: #453A95; /* 悬停 */ --uw-color-bg-input: #1D1842; /* 输入框底 */ --uw-color-accent: #7DD3FC; /* 亮蓝 */ --uw-color-accent-hover: #A9E3FF; --uw-color-accent-dim: #FFB84D; /* 橙金强调 */ --uw-color-glow: rgba(125, 211, 252, 0.22); --uw-color-border-dim: #4A3E93; /* 紫蓝分隔 */ --uw-color-text-primary: #F3EEFF; --uw-color-text-secondary: #C6BCEB; --uw-color-text-muted: #8F84C4; --uw-color-text-dim: #7A6FB8; /* 更弱化（深空底 4.6:1；用于军衔卡片元数据等 12px 辅助文字） */ --uw-color-success: #58C98B; --uw-color-warning: #FFB84D; --uw-color-danger: #FF6B6B; --uw-color-info: #6FA8FF; --uw-rarity-legend: #FFD166; --uw-rarity-rare: #8FC3FF; --uw-extra-pink: #FF8FA3; --uw-extra-purple: #C7A8FF; --uw-extra-mint: #7FDBCA; --uw-ink: #E6DAFF; /* 夜主题用淡紫描边，像夜光贴纸 */ --uw-ink-soft: #6E62B8; --uw-shade: rgba(0, 0, 0, 0.35); --uw-btn-text: #FFFFFF; --uw-btn-diamond-bg: #9575E0; /* 夜主题钻石按钮背景（亮紫，白字 4.6:1；保持紫色识别度） */ --uw-num-strong: #FFFFFF; /* 数字/数值强对比（夜用纯白） */ --uw-resource-pill-bg: #322A66; /* 夜间资源胶囊：与靛夜顶栏区分 */ --uw-resource-pill-stroke: rgba(0, 0, 0, 0.30); /* 登录页渐变（B 夜：靛紫夜空） */ --uw-login-glow1: rgba(125, 211, 252, 0.18); --uw-login-glow2: rgba(255, 200, 87, 0.12); --uw-login-bg-top: #2A2260; --uw-font-tech: "Quicksand", "Baloo 2", "Microsoft YaHei", sans-serif; --uw-galaxy-m874: #7FDBCA; --uw-galaxy-smart: #6FA8FF; --uw-galaxy-rebel: #FF7E86; --uw-galaxy-faction: #FFC857; --uw-galaxy-other: #9A8FC8; --uw-galaxy-out: #1D1842; --uw-svg-glow-a: rgba(125, 211, 252, 0.45); --uw-svg-glow-b: rgba(125, 211, 252, 0.00); --uw-colony-ring: #FFD166; --uw-fleet-ring: #7DD3FC; }