51 lines
2.1 KiB
SCSS
51 lines
2.1 KiB
SCSS
|
// 基础金属色调
|
||
|
|
$metal-dark: #637994; // 主色调1 - 深金属色
|
||
|
|
$metal-light: #bec3c9; // 主色调2 - 浅金属色
|
||
|
|
$metal-bg: #a1a6ac; // 背景主色调
|
||
|
|
$metal-highlight: #d0d5db; // 金属高光色
|
||
|
|
$metal-shadow: #8c949d; // 金属阴影色
|
||
|
|
|
||
|
|
// 功能色（保持原有，但调整为金属质感）
|
||
|
|
$blue: mix($metal-dark, #324157, 30%);
|
||
|
|
$light-blue: mix($metal-light, #3A71A8, 30%);
|
||
|
|
$red: mix($metal-light, #C03639, 20%);
|
||
|
|
$pink: mix($metal-light, #E65D6E, 20%);
|
||
|
|
$green: mix($metal-light, #30B08F, 20%);
|
||
|
|
$tiffany: mix($metal-light, #4AB7BD, 20%);
|
||
|
|
$yellow: mix($metal-light, #FEC171, 20%);
|
||
|
|
$panGreen: mix($metal-light, #30B08F, 20%);
|
||
|
|
|
||
|
|
// 金属风格菜单主题
|
||
|
|
$base-menu-color: mix($metal-light, rgba(255, 255, 255, 0.7), 60%); // 菜单文字色
|
||
|
|
$base-menu-color-active: #ffffff; // 激活菜单文字色
|
||
|
|
$base-menu-background: linear-gradient(145deg, darken($metal-bg, 3%), $metal-bg); // 菜单背景
|
||
|
|
$base-logo-title-color: $metal-highlight; // Logo文字色
|
||
|
|
|
||
|
|
// 浅色金属菜单风格
|
||
|
|
$base-menu-light-color: mix($metal-dark, rgba(0, 0, 0, 0.7), 70%); // 浅色菜单文字色
|
||
|
|
$base-menu-light-background: linear-gradient(145deg, $metal-bg, lighten($metal-bg, 3%)); // 浅色菜单背景
|
||
|
|
$base-logo-light-title-color: $metal-dark; // 浅色Logo文字色
|
||
|
|
|
||
|
|
// 子菜单样式
|
||
|
|
$base-sub-menu-background: darken($metal-bg, 5%); // 子菜单背景
|
||
|
|
$base-sub-menu-hover: linear-gradient(145deg, $metal-bg, $metal-dark); // 子菜单悬停背景
|
||
|
|
|
||
|
|
$base-sidebar-width: 200px; // 侧边栏宽度
|
||
|
|
|
||
|
|
// 导出变量供JS使用
|
||
|
|
:export {
|
||
|
|
menuColor: $base-menu-color;
|
||
|
|
menuLightColor: $base-menu-light-color;
|
||
|
|
menuColorActive: $base-menu-color-active;
|
||
|
|
menuBackground: $base-menu-background;
|
||
|
|
menuLightBackground: $base-menu-light-background;
|
||
|
|
subMenuBackground: $base-sub-menu-background;
|
||
|
|
subMenuHover: $base-sub-menu-hover;
|
||
|
|
sideBarWidth: $base-sidebar-width;
|
||
|
|
logoTitleColor: $base-logo-title-color;
|
||
|
|
logoLightTitleColor: $base-logo-light-title-color;
|
||
|
|
// 导出金属主题基础色供全局使用
|
||
|
|
metalDark: $metal-dark;
|
||
|
|
metalLight: $metal-light;
|
||
|
|
metalBg: $metal-bg;
|
||
|
|
}
|