html,
body {
  width        : 100%;
  height       : 100%;
  margin       : 0;
  overflow     : hidden;
  --padding-top: 0px;
}

a {
  color: var(--color-main-normal);
}

#app {
  width   : 100%;
  height  : 100%;
  position: absolute;
  overflow: hidden;
  left    : 0;
  top     : 0;
}

.clear-float::after {
  content: "";
  display: block;
  clear  : both;
}

.require {
  position: relative;

  &::before {
    content     : "*";
    position    : absolute;
    top         : 50%;
    transform   : translateY(-50%);
    right       : 100%;
    margin-right: 4px;
    color       : #fa3f48;
    line-height : 1.5em;
  }
}

.more-menu {
  position          : relative;
  // &::after {
  //   content: '';
  //   box-sizing: content-box;
  //   font-size: 5px;
  //   position: absolute;
  //   bottom: 0;
  //   right: 0;
  //   width: 0;
  //   height: 0;
  //   border-bottom: 1em solid var(--colors-normal-base);
  //   border-left: 1em solid transparent;
  // }
}

canvas {
  outline: none;
}

.ui-editor-toolbox {
  top       : calc(var(--editor-head-height) + var(--header-top));
  transition: inset ease 0.3s;
}

.ui-editor-menu .ui-editor-menu-item {
  width: auto;
}

input::-ms-clear,
input::-ms-reveal {
  display: none;
}

/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width           : 6px;
  height          : 6px;
  background-color: rgba(0, 0, 0, 0);
}

/*定义滚动条轨道
  内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius     : 3px;
  background-color  : rgba(255, 255, 255, 0);
}

/*定义滑块
  内阴影+圆角*/
::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius     : 3px;
  background-color  : rgba(255, 255, 255, 0.5);
}

input:-webkit-autofill {
  /*自动填充文字颜色*/
  -webkit-text-fill-color: #fff !important;
  /*自动填充背景颜色*/
  -webkit-box-shadow     : 0 0 0px 1000px #313131 inset;
  border-color           : var(--colors-primary-base) !important;

  // -webkit-box-shadow: 0 0 0px 1000px #313131 inset !important;//关于解决输入框背景颜色
  // -webkit-text-fill-color: rgba(255,255,255,1)!important;//关于接输入框文字颜色
  // font-size: 14px !important;
  // border-color: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.vc-switch {
  z-index: 99999999 !important;
}

code,
kbd,
pre,
samp {
  font-family: inherit;
}

@font-face {
  font-family: "sr";
  src        : url("./font/SimSun\ Regular.ttf") format("truetype");
}

@font-face {
  font-family: "st";
  src        : url("./font/simsun.ttc") format("truetype");
}



:root.light {
  body {
    --colors-primary-base-fill: 23, 121, 237;
    --editor-head-back        : rgba(255, 255, 255, 1);
    --editor-menu-back        : rgba(255, 255, 255, 1);
    --colors-primary-fill     : 0, 0, 0;
    --editor-men-color        : rgb(0, 0, 0);

    .ui-menu-item.active {
      background-color: #EFF0F2;
    }

    .edit-fix-point {
      background-color: #fff;

      .ui-input {
        background: #F0F0F0 !important;

        input {
          color: #000 !important;
        }
      }

      .header h3 {
        color: #666;
      }

      .select span,
      .select p {
        color: #000;

        &.active {
          color     : rgba(23, 121, 237, 1);
          background: #EFF0F2;
        }
      }
    }

    .ui-input .range .range-locus .range-slide {
      background-color: rgba(255, 255, 255, 1)
    }

    .ui-input {
      --base-border-color: rgba(0, 0, 0, 0.2);
    }

    .select-replace {
      --colors-content-color: #161A1A;
      background            : #fff;
    }

    .back-icon {
      border: 1px solid #CCCCCC;
    }

    .fun-ctrl,
    .fun-ctrl:hover,
    .menu {
      &:not(.autonomous) {
        color: #000 !important;
      }
    }

    .menu.border:after {
      border-bottom-color: #ccc !important;
    }

    .button-pane.type {
      padding: 4px 18px !important;

      .menu {
        max-width: 56px;
      }

      .menu.active {
        color: rgba(23, 121, 237, 1) !important;
      }
    }

    .button-pane {
      .menu.active {
        color           : rgba(23, 121, 237, 1) !important;
        background-color: #EFF0F2;
      }
    }

    .scene-mode-tabs {
      .menu.active {
        background-color: #fff;
      }
    }

    .occupying,
    .occupying,
    .photo img {
      background: #000;
    }

    .photos-layout {
      background: #fff;
    }

    .photos-header {
      .ui-button.normal {
        color : #000;
        border: 1px solid rgba(0, 0, 0, 0.7);
      }
    }

    .strengthen {
      border-color: #ccc;
    }

    .strengthen-right {
      border-right-color: #ccc;

    }

    .strengthen-bottom {
      border-bottom-color: #ccc;
    }

    .photo-select {
      i {
        color: #fff;
      }
    }

    .fill-slide {

      .foot,
      .header {
        background-color: #fff;
        color           : rgb(22, 24, 26);

        .top-right {
          color: rgb(22, 24, 26);
        }
      }

      .foot .menus .menu {
        background-color: #E6E9F0;
        ;
        color: rgba(22, 24, 26, 1) !important
      }

    }

    .PhotoSlider__Backdrop {
      // background: #fff !important;
    }

    .graphic-child-menus {
      .header {
        color: #000;
      }

      .type-menu h2 {
        color: rgba(0, 0, 0, 1);
      }

      .menu .icon {
        background-color: #fff;
      }
    }

    .geo-teleport .font-size {
      color: #000;
    }


    .save-file.save {
      background: #E6E9F0 !important;
      color     : #000;
      border    : none;
    }

    .ui-dialog {
      color: #000;
    }

    .ui-dialog__box {
      background-color: #fff;

      .ui-input .input .input-div,
      .ui-input .input textarea,
      .ui-input .input input {
        --colors-content-color: #000;
      }

      header {
        color: #000;
      }

      .select-boxs span {
        color: #000;

        &:not(.active) {
          // background-color: rgba(0, 0, 0, 0.1);
        }
      }

      .ui-button.submit {
        color     : #000;
        border    : 1px solid rgba(0, 0, 0, 0);
        background: rgba(0, 0, 0, 0.1) !important;
      }
    }

    .info-layout {
      background: #fff;

      .info-bottom>div {
        background: rgba(0, 0, 0, 0);
        border    : 1px solid #CCCCCC;
        color     : #000;
      }

      .info-top .info-top-right {
        color: rgba(0, 0, 0, 0.8);

        .right-btn {
          background: rgba(0, 0, 0, 0);
          border    : 1px solid #CCCCCC;

        }

        .text-item .info-textarea,
        .input-item input {
          color     : rgba(0, 0, 0, 1);
          background: rgba(240, 240, 240, 1);
          border    : 1px solid #CCCCCC;
        }

      }
    }

    .download-btn {
      border    : 1px solid #3a3d3d !important;
      color     : #3a3d3d !important;
      background: none !important;
    }
  }
}

:root.dark {
  body {
    --editor-menu-back   : #161A1A;
    --editor-head-back   : #252828;
    --colors-primary-fill: 255, 255, 255;

    .type-photos-layout {
      background: #252828;
    }

    .type-title {
      color: #ddd;
    }

    .setting-layout .ui-input .text input {
      background: var(--colors-normal-back);
    }

    .table .ui-input .text.ready input {
      color       : #fff;
      border-color: #fff;
    }

    .fill-slide .foot .menus .menu {
      color: rgb(22, 24, 26) !important;
    }

    .select-boxs span {
      border: 1px solid #666;
      color : #ccc;

      &.active {
        border: 1px solid #1779ed;
        color : #1779ed;
      }
    }

    .text-input .ui-input .text.suffix .len {
      color: #000;
    }

    .empty-images div p {
      color: #fff;
    }

    .ui-menu-item.active {
      background: var(--editor-menu-bac);
    }

    .fun-ctrl,
    .fun-ctrl:hover,
    .menu {
      &:not(.autonomous) {
        color: #fff !important;
      }
    }

    .menu.border:after {
      border-bottom-color: rgba(255, 255, 255, 0.2);
    }

    .menu.active {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
}