window-form/src/style/index.scss

@use './webkit-scrollbar';
@use './czr';

* {
  outline: none; // dom元素选中带边框
  -webkit-user-drag: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'PingFang SC';
}

html,
body,
#app {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.loader {
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  .loader-content {
    width: 300px;
    height: 300px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    //--h: calc(var(--percent) / 100 * 360);
    //color: hsl(var(--h), 100%, 75%);
    color: #409EFF;
    animation: changeColor 5s linear infinite;
    > span {
      position: absolute;
      --diameter: calc(50px + (var(--n) - 1) * 30px);
      width: var(--diameter);
      height: var(--diameter);
      border-style: solid;
      border-color: currentColor transparent;
      border-width: 10px 10px 0 0;
      border-radius: 50%;
      animation: rotating 5s linear infinite;
      animation-duration: calc(5s / (9 - var(--n) + 1));
      &:nth-child(1) {
        --n: 1;
      }
      &:nth-child(2) {
        --n: 2;
      }
      &:nth-child(3) {
        --n: 3;
      }
      &:nth-child(4) {
        --n: 4;
      }
      &:nth-child(5) {
        --n: 5;
      }
      &:nth-child(6) {
        --n: 6;
      }
      &:nth-child(7) {
        --n: 7;
      }
      &:nth-child(8) {
        --n: 8;
      }
      &:nth-child(9) {
        --n: 9;
      }
    }
  }
  @keyframes rotating {
    to {
      transform: rotate(1turn);
    }
  }
  @keyframes changeColor {
    0%,
    100% {
      --percent: 0;
    }
    10% {
      --percent: 10;
    }
    20% {
      --percent: 20;
    }
    30% {
      --percent: 30;
    }
    40% {
      --percent: 40;
    }
    50% {
      --percent: 50;
    }
    60% {
      --percent: 60;
    }
    70% {
      --percent: 70;
    }
    80% {
      --percent: 80;
    }
    90% {
      --percent: 90;
    }
  }
}

.tox-silver-sink {
  //z-index: 99999 !important;
  // 隐藏富文本APIkey提示
  .tox-notifications-container {
    width: 0;
    height: 0;
    overflow: hidden;
  }
}