:root {
  /** Header 区域 = NavigationBar 组件 + TagsView 组件 */
  --v3-tagsview-height: 48px;
  --v3-header-height: var(--v3-tagsview-height);
  /** NavigationBar 组件 */
  --v3-navigationbar-height: 50px;
  --v3-navigationbar-background: var(--q-primary);
  /** Sidebar 组件 */
  --v3-sidebar-width: 220px;
  --v3-sidebar-hide-width: 58px;
  --v3-sidebar-menu-item-height: 48px;
  --v3-sidebar-menu-tip-line-bg-color: var(--q-primary);
  --v3-sidebar-menu-active-text-color: var(--q-primary);
  /** TagsView 组件 */
  --v3-tagsview-tag-active-bg-color: var(--q-primary);
  --v3-tagsview-tag-border-radius: 4px;
  --v3-tagsview-tag-active-border-color: var(--q-primary);
  /** RightPanel 组件  */
  --v3-rightpanel-button-bg-color: var(--q-primary);
  /* 强制修改el css变量 */
  --el-color-primary: var(--q-primary) !important;
  --el-menu-active-color: var(--q-primary) !important;
  --el-component-size: 36px !important;
  --el-menu-level-padding: 25px !important;


  .body--light {
    --my-dark-1: #323232;
    --my-white: #ffffff;
    --my-blue-1: #212d63;
    --my-blue-2: #7fd3ed;
    --my-grey-1: #fafafb;
    --my-grey-5: #bec8d6;
    --my-grey-6: #e0e1e8;
    --my-grey-7: #8392ab;
    --my-grey-9: #e9ecef;
    --my-label-error-red: #f56c6c;
    --my-label-warn-yellow: #e6a23c;
    --my-label-warn-major: #f28500;
    --my-label-warn-minor: #e6b800;
    --my-label-warn-warning: #0062ff;
    --my-label-warn-cleared: #000000;
    --my-label-success-green: #67c23a;
    --machine-color: #000000;
    /* 强制修改el css变量 */
    --el-color-text-base: var(--q-dark) !important;
    --el-color-black: var(--q-dark) !important;
    --el-text-color-primary: var(--q-dark) !important;
    --el-menu-text-color: var(--q-dark) !important;
    --el-menu-hover-bg-color: rgba(50, 83, 220, 0.08) !important;
    --el-border-color: #EBEBEB !important;
    --el-text-color-regular: #303133 !important;
  }

  .body--dark {
    --my-dark-1: darken(#323232, 50%);
    --my-white: darken(#ffffff, 50%);
    --my-blue-1: darken(#212d63, 50%);
    --my-blue-2: darken(#7fd3ed, 50%);
    --my-grey-1: darken(#fafafb, 50%);
    --my-grey-5: darken(#bec8d6, 50%);
    --my-grey-6: darken(#e0e1e8, 50%);
    --my-grey-7: darken(#8392ab, 50%);
    --my-grey-9: darken(#e9ecef, 50%);
    --my-label-error-red: darken(#f56c6c, 50%);
    --my-label-warn-yellow: darken(#e6a23c, 50%);
    --my-label-warn-major: #f28500;
    --my-label-warn-minor: #e6b800;
    --my-label-warn-warning: #0062ff;
    --my-label-warn-cleared: #f7f7f7;
    --my-label-success-green: darken(#67c23a, 50%);
    --machine-color: #f9f9f9;
    --el-menu-hover-bg-color: rgba(50, 83, 220, 0.08) !important;
    --el-border-color: #d2d2d2 !important;
    --el-text-color-regular: #606266 !important;
  }
}
