hvac-web/src/styles/global.scss

@import '../icons/fonts/iconfont.css';

:root {
  --hvac-layout-bg: #f5f7fa;
}

.use-guide-title {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color: var(--antd-color-text);
}

.use-guide-description {
  width: 430px;
  margin: 10px 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--antd-color-text-secondary);
}

.hvac-layout-main-title {
  height: 32px;
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
  color: var(--antd-color-text);
}

// 默认按钮颜色
.default-button {
  color: var(--antd-color-primary-hover);
  border-color: var(--antd-color-primary-hover);
}

.ant-btn {
  border-radius: 4px;
}

.main-container {
  overflow: auto; // 超出设定高度，出现滚动条

  /* 定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸 */
  // 滚动条整体部分
  &::-webkit-scrollbar {
    width: 6px;
    height: 8px;
  }

  // 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
  &::-webkit-scrollbar-button {
    display: none;
  }

  // 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
  &::-webkit-scrollbar-thumb {
    cursor: pointer;
    background: rgb(144 147 153 / 30%);
    border-radius: 4px;
  }

  // 边角，即两个滚动条的交汇处
  &::-webkit-scrollbar-corner {
    display: none;
  }

  // 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
  &::-webkit-resizer {
    display: none;
  }
}

.ellipsis-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-button {
  font-size: 16px;

  i {
    vertical-align: -0.15em;
  }

  span {
    margin-left: 8px;
  }
}

.hide-tabs-border > div.ant-tabs-nav::before {
  border: none;
}

.button-tabs-card {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: var(--antd-color-primary);

  &.ant-tabs-card > div.ant-tabs-nav {
    .ant-tabs-tab {
      padding: 5px 12px;
      background: var(--antd-color-primary-opacity-15);
      border: none;
      border-radius: 4px;
      transition: background 0.3s;

      + .ant-tabs-tab {
        margin-left: 8px;
      }

      &:hover {
        color: #fff !important;
        background: var(--antd-color-primary);
      }

      &:active {
        background: var(--antd-color-primary-active);
      }
    }

    .ant-tabs-tab-active {
      background: var(--antd-color-primary);

      .ant-tabs-tab-btn {
        color: #fff;
        text-shadow: none;
      }
    }

    .ant-tabs-tab-btn:active {
      color: #fff;
    }

    &::before {
      border: none;
    }
  }
}

.button-tabs-compact {
  line-height: 22px;

  &.ant-tabs-card > div.ant-tabs-nav {
    .ant-tabs-tab {
      padding: 8px 16px;
      font-size: 16px;
      font-weight: 500;
      color: var(--antd-color-primary);
      background: rgb(255 255 255 / 15%);
      border-color: var(--antd-color-primary);
      border-right: none;
      border-radius: 0;
      transition: background 0.3s;

      + .ant-tabs-tab {
        margin-left: 0;
      }

      &:first-child {
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
      }
    }

    .ant-tabs-nav-list :nth-last-child(2) {
      border-right: 1px solid var(--antd-color-primary);
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
    }

    .ant-tabs-tab-active {
      background: var(--antd-color-primary);

      .ant-tabs-tab-btn {
        color: #fff;
        text-shadow: none;
      }
    }

    &::before {
      border: none;
    }
  }
}

.status-dot {
  // 定义控制变量 (可外部覆盖)
  --status-dot-rgb: 103, 194, 58; // RGB 颜色分量 (绿色)

  position: relative;
  display: inline-block;
  width: 16px;
  aspect-ratio: 1; // 保持 1:1 宽高比
  background-color: rgba(var(--status-dot-rgb), 0.3);
  border-radius: 50%;

  // 同心圆通用样式
  &::before,
  &::after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    aspect-ratio: 1;
    content: '';
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  // 中间层
  &::before {
    width: 50%;
    background-color: rgba(var(--status-dot-rgb), 0.6);
  }

  // 核心层
  &::after {
    width: 25%;
    background-color: rgba(var(--status-dot-rgb), 1);
  }
}

.center-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.echarts-tooltip-electricity {
  width: 100%;
  font-weight: bold;
  border-collapse: collapse;

  th,
  td {
    padding-inline: 3px;
    text-align: left;
  }
}