/* shared/theme.css — 赣南HAM网 设计 token 单一事实源 (M3 Web 命名) * 与 App(lib/theme/app_theme.dart) 对齐。Web 三页(preview/public/admin)统一引用，禁止内联配色。 * 引擎: md3expressive | md3classic | miuix | dynamic | fluent(桌面壳,UA自动) * 深浅: ; system 由 JS 解析 * 命名: 全套使用 M3 Web 官方的 --md-sys-color-* / --md-sys-shape-* / --md-sys-elevation-* * 并提供 --primary 等简写别名供 public/admin 消费 (单一处定义, 跟随引擎块自动解析) */ :root{ /* 形状 (M3 Shape Scale) */ --md-sys-shape-corner-none:0px; --md-sys-shape-corner-extra-small:4px; --md-sys-shape-corner-small:8px; --md-sys-shape-corner-medium:12px; --md-sys-shape-corner-large:16px; --md-sys-shape-corner-extra-large:28px; --md-sys-shape-corner-full:9999px; /* 排版 */ --md-sys-typescale-font-family:'Roboto','Microsoft YaHei',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; /* 海拔 Elevation */ --md-sys-elevation-1:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.20); --md-sys-elevation-2:0 2px 6px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.20); --md-sys-elevation-3:0 4px 8px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.20); /* 简写别名 (供 public/admin; 运行时跟随下方引擎块的 --md-sys-color-* 解析) */ --font:var(--md-sys-typescale-font-family); --brand:#D72727; --primary:var(--md-sys-color-primary); --on-primary:var(--md-sys-color-on-primary); --primary-container:var(--md-sys-color-primary-container); --on-primary-container:var(--md-sys-color-on-primary-container); --secondary:var(--md-sys-color-secondary); --on-secondary:var(--md-sys-color-on-secondary); --secondary-container:var(--md-sys-color-secondary-container); --on-secondary-container:var(--md-sys-color-on-secondary-container); --tertiary:var(--md-sys-color-tertiary); --on-tertiary:var(--md-sys-color-on-tertiary); --tertiary-container:var(--md-sys-color-tertiary-container); --on-tertiary-container:var(--md-sys-color-on-tertiary-container); --error:var(--md-sys-color-error); --on-error:var(--md-sys-color-on-error); --error-container:var(--md-sys-color-error-container); --on-error-container:var(--md-sys-color-on-error-container); --surface:var(--md-sys-color-surface); --on-surface:var(--md-sys-color-on-surface); --surface-variant:var(--md-sys-color-surface-variant); --on-surface-variant:var(--md-sys-color-on-surface-variant); --outline:var(--md-sys-color-outline); --outline-variant:var(--md-sys-color-outline-variant); --sc-lowest:var(--md-sys-color-surface-container-lowest); --sc-low:var(--md-sys-color-surface-container-low); --sc:var(--md-sys-color-surface-container); --sc-high:var(--md-sys-color-surface-container-high); --sc-highest:var(--md-sys-color-surface-container-highest); --r-none:var(--md-sys-shape-corner-none); --r-xs:var(--md-sys-shape-corner-extra-small); --r-sm:var(--md-sys-shape-corner-small); --r-md:var(--md-sys-shape-corner-medium); --r-lg:var(--md-sys-shape-corner-large); --r-xl:var(--md-sys-shape-corner-extra-large); --r-full:var(--md-sys-shape-corner-full); } /* ===== MD3 Expressive (seed=赣南红 #D72727) ===== */ :root[data-engine="md3expressive"][data-theme="light"], :root[data-engine="md3expressive"]:not([data-theme="dark"]){ --md-sys-color-primary:#D72727; --md-sys-color-on-primary:#fff; --md-sys-color-primary-container:#ffdad6; --md-sys-color-on-primary-container:#410002; --md-sys-color-secondary:#565d6e; --md-sys-color-on-secondary:#fff; --md-sys-color-secondary-container:#dae1f4; --md-sys-color-on-secondary-container:#131b2c; --md-sys-color-tertiary:#6e5687; --md-sys-color-on-tertiary:#fff; --md-sys-color-tertiary-container:#f8ddf6; --md-sys-color-on-tertiary-container:#28132f; --md-sys-color-error:#ba1a1a; --md-sys-color-on-error:#fff; --md-sys-color-error-container:#ffdad6; --md-sys-color-on-error-container:#410002; --md-sys-color-surface:#fffbff; --md-sys-color-on-surface:#201a1b; --md-sys-color-surface-variant:#e7e0e2; --md-sys-color-on-surface-variant:#4f4849; --md-sys-color-outline:#80797a; --md-sys-color-outline-variant:#d2c7c9; --md-sys-color-surface-container-lowest:#fff; --md-sys-color-surface-container-low:#fbf1f2; --md-sys-color-surface-container:#f5ebed; --md-sys-color-surface-container-high:#efe5e7; --md-sys-color-surface-container-highest:#e9dfe1; } :root[data-engine="md3expressive"][data-theme="dark"]{ --md-sys-color-primary:#ffb4ab; --md-sys-color-on-primary:#690006; --md-sys-color-primary-container:#93000a; --md-sys-color-on-primary-container:#ffdad6; --md-sys-color-secondary:#bfc6d9; --md-sys-color-on-secondary:#283141; --md-sys-color-secondary-container:#3e4658; --md-sys-color-on-secondary-container:#dae1f4; --md-sys-color-tertiary:#d6bce4; --md-sys-color-on-tertiary:#3d2850; --md-sys-color-tertiary-container:#553a68; --md-sys-color-on-tertiary-container:#f8ddf6; --md-sys-color-error:#ffb4ab; --md-sys-color-on-error:#690006; --md-sys-color-error-container:#93000a; --md-sys-color-on-error-container:#ffdad6; --md-sys-color-surface:#1a1113; --md-sys-color-on-surface:#ede0e1; --md-sys-color-surface-variant:#4f4849; --md-sys-color-on-surface-variant:#d2c7c9; --md-sys-color-outline:#9b9193; --md-sys-color-outline-variant:#4f4849; --md-sys-color-surface-container-lowest:#1a1113; --md-sys-color-surface-container-low:#21181a; --md-sys-color-surface-container:#261c1f; --md-sys-color-surface-container-high:#312729; --md-sys-color-surface-container-highest:#3c3133; } /* ===== MD3 Classic (seed=赣南红, 形状更收敛) ===== */ :root[data-engine="md3classic"][data-theme="light"], :root[data-engine="md3classic"]:not([data-theme="dark"]){ --md-sys-color-primary:#D72727; --md-sys-color-on-primary:#fff; --md-sys-color-primary-container:#ffdad6; --md-sys-color-on-primary-container:#410002; --md-sys-color-secondary:#565d6e; --md-sys-color-on-secondary:#fff; --md-sys-color-secondary-container:#dae1f4; --md-sys-color-on-secondary-container:#131b2c; --md-sys-color-tertiary:#6e5687; --md-sys-color-on-tertiary:#fff; --md-sys-color-tertiary-container:#f8ddf6; --md-sys-color-on-tertiary-container:#28132f; --md-sys-color-error:#ba1a1a; --md-sys-color-on-error:#fff; --md-sys-color-error-container:#ffdad6; --md-sys-color-on-error-container:#410002; --md-sys-color-surface:#fffbff; --md-sys-color-on-surface:#201a1b; --md-sys-color-surface-variant:#e7e0e2; --md-sys-color-on-surface-variant:#4f4849; --md-sys-color-outline:#80797a; --md-sys-color-outline-variant:#d2c7c9; --md-sys-color-surface-container-lowest:#fff; --md-sys-color-surface-container-low:#fbf1f2; --md-sys-color-surface-container:#f5ebed; --md-sys-color-surface-container-high:#efe5e7; --md-sys-color-surface-container-highest:#e9dfe1; } :root[data-engine="md3classic"][data-theme="dark"]{ --md-sys-color-primary:#ffb4ab; --md-sys-color-on-primary:#690006; --md-sys-color-primary-container:#93000a; --md-sys-color-on-primary-container:#ffdad6; --md-sys-color-secondary:#bfc6d9; --md-sys-color-on-secondary:#283141; --md-sys-color-secondary-container:#3e4658; --md-sys-color-on-secondary-container:#dae1f4; --md-sys-color-tertiary:#d6bce4; --md-sys-color-on-tertiary:#3d2850; --md-sys-color-tertiary-container:#553a68; --md-sys-color-on-tertiary-container:#f8ddf6; --md-sys-color-error:#ffb4ab; --md-sys-color-on-error:#690006; --md-sys-color-error-container:#93000a; --md-sys-color-on-error-container:#ffdad6; --md-sys-color-surface:#1a1113; --md-sys-color-on-surface:#ede0e1; --md-sys-color-surface-variant:#4f4849; --md-sys-color-on-surface-variant:#d2c7c9; --md-sys-color-outline:#9b9193; --md-sys-color-outline-variant:#4f4849; --md-sys-color-surface-container-lowest:#1a1113; --md-sys-color-surface-container-low:#21181a; --md-sys-color-surface-container:#261c1f; --md-sys-color-surface-container-high:#312729; --md-sys-color-surface-container-highest:#3c3133; } /* ===== MIUIX (蓝 #007AFF) ===== */ :root[data-engine="miuix"][data-theme="light"], :root[data-engine="miuix"]:not([data-theme="dark"]){ --md-sys-color-primary:#007aff; --md-sys-color-on-primary:#fff; --md-sys-color-primary-container:#d6e9ff; --md-sys-color-on-primary-container:#001b38; --md-sys-color-secondary:#5a6b7a; --md-sys-color-on-secondary:#fff; --md-sys-color-secondary-container:#d6e6f5; --md-sys-color-on-secondary-container:#0c1d29; --md-sys-color-tertiary:#7a5aa8; --md-sys-color-on-tertiary:#fff; --md-sys-color-tertiary-container:#efdbff; --md-sys-color-on-tertiary-container:#2e1557; --md-sys-color-error:#ba1a1a; --md-sys-color-on-error:#fff; --md-sys-color-error-container:#ffdad6; --md-sys-color-on-error-container:#410002; --md-sys-color-surface:#fafcff; --md-sys-color-on-surface:#181c1f; --md-sys-color-surface-variant:#dfe6ec; --md-sys-color-on-surface-variant:#42474e; --md-sys-color-outline:#72787f; --md-sys-color-outline-variant:#cdd6dd; --md-sys-color-surface-container-lowest:#fff; --md-sys-color-surface-container-low:#f3f7fb; --md-sys-color-surface-container:#edf1f6; --md-sys-color-surface-container-high:#e7ecf1; --md-sys-color-surface-container-highest:#e1e6eb; } :root[data-engine="miuix"][data-theme="dark"]{ --md-sys-color-primary:#5ab1ff; --md-sys-color-on-primary:#00305c; --md-sys-color-primary-container:#00497f; --md-sys-color-on-primary-container:#d6e9ff; --md-sys-color-secondary:#bcc8d6; --md-sys-color-on-secondary:#283542; --md-sys-color-secondary-container:#3e4a58; --md-sys-color-on-secondary-container:#d6e6f5; --md-sys-color-tertiary:#d6bce4; --md-sys-color-on-tertiary:#3d2850; --md-sys-color-tertiary-container:#553a68; --md-sys-color-on-tertiary-container:#efdbff; --md-sys-color-error:#ffb4ab; --md-sys-color-on-error:#690006; --md-sys-color-error-container:#93000a; --md-sys-color-on-error-container:#ffdad6; --md-sys-color-surface:#12161a; --md-sys-color-on-surface:#e1e6ea; --md-sys-color-surface-variant:#42474e; --md-sys-color-on-surface-variant:#cdd6dd; --md-sys-color-outline:#9098a0; --md-sys-color-outline-variant:#42474e; --md-sys-color-surface-container-lowest:#12161a; --md-sys-color-surface-container-low:#191e22; --md-sys-color-surface-container:#1e2328; --md-sys-color-surface-container-high:#293139; --md-sys-color-surface-container-highest:#343b41; } /* ===== Dynamic (InstallerX 动态取色) — 运行时 JS 注入 --md-sys-color-primary/secondary/tertiary ===== */ :root[data-engine="dynamic"][data-theme="light"], :root[data-engine="dynamic"]:not([data-theme="dark"]){ --md-sys-color-primary:#D72727; --md-sys-color-on-primary:#fff; --md-sys-color-primary-container:#ffdad6; --md-sys-color-on-primary-container:#410002; --md-sys-color-secondary:#565d6e; --md-sys-color-on-secondary:#fff; --md-sys-color-surface:#fffbff; --md-sys-color-on-surface:#201a1b; --md-sys-color-surface-variant:#e7e0e2; --md-sys-color-on-surface-variant:#4f4849; --md-sys-color-outline:#80797a; --md-sys-color-surface-container-lowest:#fff; --md-sys-color-surface-container-low:#fbf1f2; --md-sys-color-surface-container:#f5ebed; --md-sys-color-surface-container-high:#efe5e7; --md-sys-color-surface-container-highest:#e9dfe1; } :root[data-engine="dynamic"][data-theme="dark"]{ --md-sys-color-primary:#ffb4ab; --md-sys-color-on-primary:#690006; --md-sys-color-primary-container:#93000a; --md-sys-color-on-primary-container:#ffdad6; --md-sys-color-secondary:#bfc6d9; --md-sys-color-on-secondary:#283141; --md-sys-color-surface:#1a1113; --md-sys-color-on-surface:#ede0e1; --md-sys-color-surface-variant:#4f4849; --md-sys-color-on-surface-variant:#d2c7c9; --md-sys-color-outline:#9b9193; --md-sys-color-surface-container-lowest:#1a1113; --md-sys-color-surface-container-low:#21181a; --md-sys-color-surface-container:#261c1f; --md-sys-color-surface-container-high:#312729; --md-sys-color-surface-container-highest:#3c3133; } /* ===== Fluent 2 Web Design System (Microsoft Official Spec) ===== */ :root[data-engine="fluent"] { --font-family-base: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; --font-family-monospace: 'Cascadia Code', 'Consolas', 'Courier New', monospace; --md-sys-typescale-font-family: var(--font-family-base); --font: var(--font-family-base); /* Fluent 2 Corner Radii (Exact Microsoft Spec) */ --borderRadiusNone: 0px; --borderRadiusSmall: 2px; --borderRadiusMedium: 4px; --borderRadiusLarge: 6px; --borderRadiusXLarge: 8px; --borderRadiusCircular: 9999px; /* Aliases */ --md-sys-shape-corner-none: 0px; --md-sys-shape-corner-extra-small: 2px; --md-sys-shape-corner-small: 4px; --md-sys-shape-corner-medium: 6px; --md-sys-shape-corner-large: 6px; --md-sys-shape-corner-extra-large: 8px; --md-sys-shape-corner-full: 9999px; --r-none: 0px; --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 6px; --r-xl: 8px; --r-full: 9999px; /* Fluent 2 Stroke Tokens */ --strokeWidthThin: 1px; --strokeWidthThick: 2px; --strokeWidthThicker: 3px; --strokeWidthThickest: 4px; } /* Fluent 2 Light Mode */ :root[data-engine="fluent"][data-theme="light"], :root[data-engine="fluent"]:not([data-theme="dark"]) { /* Brand ramp (#D72727) */ --colorBrandForeground1: #d72727; --colorBrandForeground2: #b81b1e; --colorBrandForegroundLink: #b81b1e; --colorBrandForegroundLinkHover: #991016; --colorBrandForegroundLinkPressed: #7a080f; --colorBrandForegroundLinkSelected: #b81b1e; --colorBrandBackground: #d72727; --colorBrandBackgroundHover: #c01e22; --colorBrandBackgroundPressed: #a7151a; --colorBrandBackgroundSelected: #b81b1e; --colorBrandBackground2: #fdeded; --colorBrandBackground2Hover: #fcdbdb; --colorBrandBackground2Pressed: #f9b8b8; --colorBrandStroke1: #d72727; --colorBrandStroke2: #f9b8b8; /* Neutral Layers & Surfaces */ --colorNeutralBackground1: #ffffff; --colorNeutralBackground1Hover: #f5f5f5; --colorNeutralBackground1Pressed: #e0e0e0; --colorNeutralBackground1Selected: #ebebeb; --colorNeutralBackground2: #fafafa; --colorNeutralBackground2Hover: #f0f0f0; --colorNeutralBackground3: #f5f5f5; --colorNeutralBackground4: #f0f0f0; --colorNeutralBackground5: #ebebeb; --colorNeutralBackground6: #e6e6e6; --colorNeutralBackgroundCanvas: #f5f5f5; --colorSubtleBackground: transparent; --colorSubtleBackgroundHover: #f5f5f5; --colorSubtleBackgroundPressed: #e0e0e0; --colorSubtleBackgroundSelected: #ebebeb; /* Neutral Foregrounds */ --colorNeutralForeground1: #242424; --colorNeutralForeground1Hover: #242424; --colorNeutralForeground1Pressed: #242424; --colorNeutralForeground1Selected: #242424; --colorNeutralForeground2: #424242; --colorNeutralForeground2Hover: #242424; --colorNeutralForeground3: #616161; --colorNeutralForeground4: #707070; --colorNeutralForegroundDisabled: #bdbdbd; --colorNeutralForegroundInverted: #ffffff; /* Neutral Strokes / Borders */ --colorNeutralStroke1: #d1d1d1; --colorNeutralStroke1Hover: #c7c7c7; --colorNeutralStroke1Pressed: #b3b3b3; --colorNeutralStroke1Selected: #707070; --colorNeutralStroke2: #e0e0e0; --colorNeutralStroke3: #f0f0f0; --colorNeutralStrokeSubtle: #e0e0e0; --colorNeutralStrokeAccessible: #616161; --colorTransparentStroke: transparent; /* Fluent 2 Elevation Shadows */ --shadow2: 0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14); --shadow4: 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14); --shadow8: 0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14); --shadow16: 0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14); --shadow28: 0 0 8px rgba(0,0,0,0.12), 0 14px 28px rgba(0,0,0,0.14); /* Legacy & Cross-Engine Aliases */ --md-sys-color-primary: #d72727; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #fdeded; --md-sys-color-on-primary-container: #7a080f; --md-sys-color-secondary: #616161; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #f0f0f0; --md-sys-color-on-secondary-container: #242424; --md-sys-color-surface: #ffffff; --md-sys-color-on-surface: #242424; --md-sys-color-surface-variant: #fafafa; --md-sys-color-on-surface-variant: #616161; --md-sys-color-outline: #d1d1d1; --md-sys-color-outline-variant: #e0e0e0; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #fafafa; --md-sys-color-surface-container: #f5f5f5; --md-sys-color-surface-container-high: #f0f0f0; --md-sys-color-surface-container-highest: #ebebeb; --md-sys-elevation-1: var(--shadow2); --md-sys-elevation-2: var(--shadow4); --md-sys-elevation-3: var(--shadow8); } /* Fluent 2 Dark Mode */ :root[data-engine="fluent"][data-theme="dark"] { /* Brand ramp (#D72727 Dark) */ --colorBrandForeground1: #ff7875; --colorBrandForeground2: #ff9c9e; --colorBrandForegroundLink: #ff7875; --colorBrandForegroundLinkHover: #ff9c9e; --colorBrandForegroundLinkPressed: #ffa39e; --colorBrandForegroundLinkSelected: #ff7875; --colorBrandBackground: #d72727; --colorBrandBackgroundHover: #e03b3e; --colorBrandBackgroundPressed: #b81b1e; --colorBrandBackgroundSelected: #d72727; --colorBrandBackground2: #3a1415; --colorBrandBackground2Hover: #4d1a1c; --colorBrandBackground2Pressed: #2b0d0e; --colorBrandStroke1: #ff7875; --colorBrandStroke2: #5c1f21; /* Neutral Layers & Surfaces */ --colorNeutralBackground1: #292929; --colorNeutralBackground1Hover: #333333; --colorNeutralBackground1Pressed: #242424; --colorNeutralBackground1Selected: #383838; --colorNeutralBackground2: #1f1f1f; --colorNeutralBackground2Hover: #292929; --colorNeutralBackground3: #141414; --colorNeutralBackground4: #0a0a0a; --colorNeutralBackground5: #000000; --colorNeutralBackground6: #333333; --colorNeutralBackgroundCanvas: #1f1f1f; --colorSubtleBackground: transparent; --colorSubtleBackgroundHover: #383838; --colorSubtleBackgroundPressed: #2e2e2e; --colorSubtleBackgroundSelected: #333333; /* Neutral Foregrounds */ --colorNeutralForeground1: #ffffff; --colorNeutralForeground1Hover: #ffffff; --colorNeutralForeground1Pressed: #ffffff; --colorNeutralForeground1Selected: #ffffff; --colorNeutralForeground2: #d6d6d6; --colorNeutralForeground2Hover: #ffffff; --colorNeutralForeground3: #adadad; --colorNeutralForeground4: #8a8a8a; --colorNeutralForegroundDisabled: #5c5c5c; --colorNeutralForegroundInverted: #242424; /* Neutral Strokes / Borders */ --colorNeutralStroke1: #424242; --colorNeutralStroke1Hover: #525252; --colorNeutralStroke1Pressed: #474747; --colorNeutralStroke1Selected: #adadad; --colorNeutralStroke2: #333333; --colorNeutralStroke3: #292929; --colorNeutralStrokeSubtle: #333333; --colorNeutralStrokeAccessible: #adadad; --colorTransparentStroke: transparent; /* Fluent 2 Elevation Shadows (Dark) */ --shadow2: 0 0 2px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.28); --shadow4: 0 0 2px rgba(0,0,0,0.24), 0 2px 4px rgba(0,0,0,0.28); --shadow8: 0 0 2px rgba(0,0,0,0.24), 0 4px 8px rgba(0,0,0,0.28); --shadow16: 0 0 2px rgba(0,0,0,0.24), 0 8px 16px rgba(0,0,0,0.28); --shadow28: 0 0 8px rgba(0,0,0,0.24), 0 14px 28px rgba(0,0,0,0.28); /* Legacy & Cross-Engine Aliases */ --md-sys-color-primary: #ff7875; --md-sys-color-on-primary: #3a1415; --md-sys-color-primary-container: #4d1a1c; --md-sys-color-on-primary-container: #ff9c9e; --md-sys-color-secondary: #adadad; --md-sys-color-on-secondary: #1f1f1f; --md-sys-color-secondary-container: #333333; --md-sys-color-on-secondary-container: #ffffff; --md-sys-color-surface: #292929; --md-sys-color-on-surface: #ffffff; --md-sys-color-surface-variant: #1f1f1f; --md-sys-color-on-surface-variant: #adadad; --md-sys-color-outline: #424242; --md-sys-color-outline-variant: #333333; --md-sys-color-surface-container-lowest: #141414; --md-sys-color-surface-container-low: #1f1f1f; --md-sys-color-surface-container: #292929; --md-sys-color-surface-container-high: #333333; --md-sys-color-surface-container-highest: #383838; --md-sys-elevation-1: var(--shadow2); --md-sys-elevation-2: var(--shadow4); --md-sys-elevation-3: var(--shadow8); }