@import "~antd/dist/antd.css";

html {
 line-height: 1.5715;
}

.vm-modal-dark {
  --modal-mask-bg-color: rgba(0, 0, 0, 0.4);
  --modal-title-color: #fff;
  --modal-bg-color: linear-gradient(
    180deg,
    rgba(2, 16, 30, 80%) 0%,
    rgba(0, 52, 97, 80%) 100%
  );
  --modal-head-bg: linear-gradient(170deg, #004e82 0%, rgba(0, 43, 78, 0) 100%);
  --modal-border-color: linear-gradient(
    90deg,
    rgba(59, 167, 255, 1),
    rgba(255, 255, 255, 1),
    rgba(59, 167, 255, 1)
  );
  --modal-shadow-color: 0 4px 4px 0 rgba(22, 119, 255, 25%),
    inset 0 0 20px 0 #3ea8ff;
  --modal-head-bg: linear-gradient(
    180deg,
    rgba(0, 78, 130, 0.8) 0%,
    rgba(0, 43, 78, 0) 100%
  );
  --modal-head-line-bg: linear-gradient(
    90deg,
    rgba(206, 240, 255, 0%) 0%,
    #cef0ff 100%
  );
  --modal-head-line-shadow: 0 4px 4px 0 rgba(0, 0, 0, 25%);
  --modal-head-split-line-color: rgba(255, 255, 255, 0.2);
  --modal-content-bg: linear-gradient(
    180deg,
    rgba(0, 120, 199, 0.4) 0%,
    rgba(15, 72, 118, 0) 100%
  );
  --modal-content-box-shadow: 0 4px 4px 0 rgba(22, 119, 255, 25%),
    inset 0 0 20px 0 #3ea8ff;
  --modal-close-color: #ffffff;
  --modal-content-border-color: linear-gradient(
      90deg,
      rgba(59, 167, 255, 100%),
      rgba(255, 255, 255, 100%),
      rgba(59, 167, 255, 100%)
    )
    1 1;
  --collect-bg: #004c81;
  --vm-tabs-bg: trasnparent;
  --vm-tabs-font-color: #fff;
  --vm-tab-border-color: trasnparent;
  --vm-tab-item-active-color: #fff;
  --vm-tab-item-active-bg-color: linear-gradient(
    180deg,
    rgba(0, 140, 255, 0.25) 0%,
    #0080e2 100%
  );
  --vm-tab-item-active-box-shadow: inset 0 0 8px 0 #6ebbff;
  --vm-empty-text-color: #dadee2;
  --vm-calendar-bg-color: rgba(0, 155, 233, 10%);
  --vm-calendar-cell-border-color: #1064a7;
  --vm-calendar-cell-active-border-color: #16a6ff;
  --vm-calendar-cell-font-color: #fff;
  --label-color: #2facff;
  --info-color: rgba(116, 187, 244, 1);
  --img-text-color: #fff;
  --img-value-color: #fff;
  --img-text-warn-color: #ff5252;
  --info-danger: #fd3a15;
  --content-bg-color: rgba(0, 103, 156, 0.1);
  --bg-border-color2: rgba(32, 102, 167, 0.5);
  --info-b-color: linear-gradient(180deg, #ffffff 0%, #00fef6 100%);
  --sub-text-color: #fff;
  --gray-line-color: rgba(47, 172, 255, 0.2);
  .ant-tabs-top > .ant-tabs-nav::before {
    border-bottom: 1px solid rgba(12, 154, 255, 0.15);
  }

  --blue-color: #009dff;
  --green-color: #13f97a;
  --red-color: #ff5861;
  --yellow-color: #ffaa00;
  --gray-color: #adadad;
}

.vm-modal-light {
  --modal-mask-bg-color: rgba(0, 0, 0, 0.4);
  --modal-title-color: #1f1f1f;
  --modal-bg-color: #ecf0f5;
  --modal-head-bg: linear-gradient(90deg, #c2dcff 0%, #def6eb 100%);
  --modal-head-line-bg: transparent;
  --modal-head-split-line-color: rgba(89, 89, 89, 0.2);
  --modal-head-line-shadow: transparent;
  --modal-content-bg: rgba(236, 240, 245, 0.8);
  --modal-content-box-shadow: #ecf0f5;
  --modal-close-color: #595959;
  --modal-content-border-color: linear-gradient(
      90deg,
      rgba(255, 255, 255, 100%),
      rgba(255, 255, 255, 100%),
      rgba(255, 255, 255, 100%)
    )
    1 1;
  --collect-bg: rgba(255, 255, 255, 70%);
  --vm-tabs-bg: linear-gradient(#fff 0%, #ecf0f5 100%);
  --vm-tabs-font-color: #1f1f1f;
  --vm-tab-border-color: #fff;
  --vm-tab-item-active-color: #fff;
  --vm-tab-item-active-bg-color: #1677ff;
  --vm-tab-item-active-box-shadow: inset 0 0 8px 0 transparent;
  --vm-empty-text-color: #1f1f1f;
  --vm-calendar-bg-color: #fff;
  --vm-calendar-cell-border-color: #f2f2f2;
  --vm-calendar-cell-active-border-color: #1677ff;
  --vm-calendar-cell-font-color: #1f1f1f;
  --gray-line-color: #E5E8EF;
  --label-color: #8c8c8c;
  --img-text-color: #5e6169;
  --img-value-color: #1890ff;
  --img-text-warn-color: #ff5252;
  --info-danger: #fd3a15;
  --content-bg-color: #fff;
  --info-color: #1f1f1f;
  --info-b-color: #1677ff;
  --sub-text-color: #8c8c8c;
  --blue-color: #1677ff;
  --green-color: #0fb964;
  --red-color: #f5222d;
  --yellow-color: #ffaa00;
  --gray-color: #595959;
}

// tab超出悬浮根节点样式
.df-popup-className {
  --modal-title-color: #222;
  --info-danger: #fd3a15;

  .ant-tabs-dropdown-menu {
    background: #ffffff;
  }

  .ant-tabs-dropdown-menu {
    border-radius: 4px;
  }

  &.dark {
    --modal-title-color: white;

    .ant-tabs-dropdown-menu-item {
      &:hover {
        background: rgba(28, 94, 149, 0.8);
      }
    }

    .ant-tabs-dropdown-menu {
      color: #ffffff;
      background: rgb(5, 71, 104);
    }
  }
}

// 颜色字体
.common_font {
  font-family: D-DIN Exp-DINExp, D-DIN Exp-DINExp;
  font-weight: bold;
  font-size: 20px;
}

.white_blue {
  .common_font();
  background: linear-gradient(180deg, #ffffff 0%, #009dff 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.white_green {
  .common_font();
  background: linear-gradient(180deg, #ffffff 0%, #12ff7c 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.white_cyan {
  .common_font();
  background: linear-gradient(180deg, #ffffff 0%, #00fcf6 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.white_yellow {
  .common_font();
  background: linear-gradient(180deg, #ffffff 0%, #ffbd40 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.white_purple {
  .common_font();
  background: linear-gradient(180deg, #ffffff 0%, #b894f9 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.white_orange {
  .common_font();
  background: linear-gradient(180deg, #ffffff 0%, #ff8746 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.white_red {
  .common_font();
  background: linear-gradient(180deg, #ffffff 0%, #ff5252 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.white_purple {
  .common_font();
  background: linear-gradient(180deg, #ffffff 0%, #2e70ff 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.white_gray {
  .common_font();
  background: linear-gradient(180deg, #ffffff 0%, #999999 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

// 列表中状态圆圈
.classifyCircle {
  .common {
    content: '';
    display: inline-block;
    margin-right: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }
  &.GOOD {
    &::before {
      .common();
      background: #53cb74;
    }
  }
  &.MEDIUM {
    &::before {
      .common();
      background: #ff9500;
    }
  }
  &.BAD {
    &::before {
      .common();
      background: #f5222d;
    }
  }
}
