/* * ========================================================= * MIR DATABANK (全新品牌重塑) 全局主题变量配置文件 * Theme: Modern Wine Red (现代酒红系) * 路径: wwwroot/css/theme-red.css * ========================================================= * * 引入方式： * 在需要换色的 cshtml 页面的 中加入： * * * 使用方式： * background: var(--primary-red); * color: var(--primary-red-hover); */ :root { /* -------------------- 1. 核心主品牌色 (Primary) 替代原版的商务蓝系 (#1e4d72, #003d8e 等) -------------------- */ /* 标准主色 (用于顶部导航栏、醒目标题、核心实心按钮) */ --primary-red: #8f1f2d; /* 渐变深主色 (用于渐变背景起点) */ --primary-red-dark: #7f1d2d; /* 渐变亮主色 (用于渐变背景终点) */ --primary-red-light: #b12a3c; /* 极浅的主色底色 (用于胶囊标签、微弱提醒框背景) */ --primary-red-soft: #f8ecef; /* -------------------- 2. 交互状态色 (Hover / Active) 替代原版高亮蓝 (#0056b3, #2980b9 等) -------------------- */ /* 悬停高亮色 (鼠标移动到按钮或菜单项上的颜色) */ --primary-red-hover: #b53848; /* 强警示/次级高亮色 (用在一些需要极高对比度或非常显眼的按钮) */ --primary-red-bright: #c44755; /* -------------------- 3. 阴影系统 (Shadows) 统一现代化红系阴影，摆脱老旧黑灰色死板阴影 -------------------- */ /* 轻量级阴影 (常态卡片悬浮) */ --shadow-red-sm: 0 4px 12px rgba(143, 31, 45, 0.08); /* 中量级阴影 (Hover时的弹起) */ --shadow-red-md: 0 8px 24px rgba(143, 31, 45, 0.15); /* 强发光/彩色弥散阴影 (现代化卡片悬停特有发光) */ --shadow-red-glow: 0 12px 32px -12px rgba(143, 31, 45, 0.3); /* -------------------- 4. 快速覆盖类 (Utility Classes) 如果不想写 var()，可以直接在 HTML 元素加上这些 class -------------------- */ } /* 快速应用背景色的 class */ .bg-primary-red { background-color: var(--primary-red) !important; } .bg-primary-red-gradient { background-image: linear-gradient(to right, var(--primary-red-dark), var(--primary-red-light)) !important; } .bg-primary-red-soft { background-color: var(--primary-red-soft) !important; } /* 快速应用文字颜色的 class */ .text-primary-red { color: var(--primary-red) !important; } .text-primary-red-hover:hover { color: var(--primary-red-hover) !important; } /* 快速应用边框的 class */ .border-primary-red { border-color: var(--primary-red) !important; }