cyber-narrator-cn-ui/src/assets/css/theme.scss

/*** 定义自定义变量和重写element-ui变量 ***/

/** 重写element-ui变量 **/

$--color-primary: #0091ff; // 主题色
$--color-primary-dark-10: darken(#0091ff, 10%); // 默认主题色 深10%
$--color-primary-light-10: lighten(#0091ff, 10%); // 默认主题色 浅10%
$--color-primary-light-20: lighten(#0091ff, 20%); // 默认主题色 浅20%

/* menu相关 */
$--menu-background-color: #00162B; // menu背景色
$--menu-hover-background-color: #000C18; // menu背景色
$--menu-item-font-color: #BEBEBE; // menu字色
$--menu-item-hover-fill: $--color-primary; // menu鼠标悬浮、激活时背景色

$--tree-node-hover-background-color: #F5F7FA;

$--collapse-header-height: 42px;
$--collapse-border-color: #EFF2F5;

/** 自定义变量 **/
:root {
  /* 自适应变量 */
  @media only screen  and (min-width : 10px) {
    --chart-height-unit: 25px;  // chart的单元高度
/*    --entity-width: calc(50% - 5px);  // entity列表每个entity框的宽度
    --entity-height: 190px;  // entity列表每个entity框的高度*/
  }
  @media only screen  and (min-width : 1224px) {
    --chart-height-unit: 30px;
  }
/*  @media only screen  and (min-width : 1560px) {
    --entity-width: calc(33.3% - 7px);
  }*/
  @media only screen  and (min-width : 1824px) {
    --chart-height-unit: 40px;
   /* --entity-width: calc(33.3% - 7px);
    --entity-height: 210px;*/
  }
  @media only screen  and (min-width : 2424px) {
    --chart-height-unit: 55px;
  /*  --entity-width: calc(25% - 8px);
    --entity-height: 240px;*/
  }
}

$--border-color-primary: #DEDEDE;
$--border-radius-primary: 2px;

$--right-box-border-color: #E7EAED;

/* 按钮 */
$--button-border-radius: $--border-radius-primary; // 按钮圆角

$--button-primary-color: #FFF; // 普通按钮字色
$--button-primary-background-color: $--color-primary; // 普通按钮背景色
$--button-hover-tint-percent: 20%; // 非灰色按钮在鼠标hover时背景色变浅的幅度
$--button-active-shade-percent: 0; // 非灰色按钮在focus时背景色变深的幅度

$--button-gray-color: #666; // 灰色按钮字色
$--button-gray-hover-color: $--button-gray-color; // 灰色按钮hover字色
$--button-gray-active-color: $--color-primary; // 灰色按钮focus字色
$--button-gray-background-color: #F9F9F9; // 灰色按钮背景色
$--button-gray-hover-background-color: #FFF; // 灰色按钮hover背景色
$--button-gray-active-background-color: $--button-gray-hover-background-color; // 灰色按钮focus背景色
$--button-gray-border-color: $--border-color-primary; // 灰色按钮边框色
$--button-gray-hover-border-color: $--button-gray-border-color; // 灰色按钮hover边框色
$--button-gray-active-border-color-tint-percent: 30%; // 灰色按钮在focus时边框色相对于主题色变浅的幅度

$--color-danger: #DE5D3F; //全局警告色红色
$--color-success: #23BF9A; //全局正常色绿色
$--color-warning: $--color-primary; //全局警告橙色
$--color-suspended: #9e9c98; //全局停用色灰色
$--color-monitor: #98AEC5; //全局停用色灰色

$--chart-single-value-icon-background-color: #E8F6FF;

$--content-right-background-color: #EFF2F5; //右侧背景色

/** 改变 icon 字体路径变量，并引入element-ui变量文件 **/
$--font-path: '~element-plus/lib/theme-chalk/fonts';
@import "~element-plus/packages/theme-chalk/src/index";
:export {
  themeColor: $--color-primary;
}