/* You can add global styles to this file, and also import other style files */
@import "styles/_layers.scss";
@import "styles/3rd/loading-bar";

div,
span,
img {
  user-select: none;
  cursor: default;
}

html,
body,
#app {
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  background: #000;
  width: 100%;
  height: 100%;

  font-family: "Jianhei";
}

#avg-viewport {
  height: 100%;
  width: 100%;
  position: absolute;
}

/* Fonts */
// @font-face {
//   font-family: "Jianhei";
//   font-style: normal;
//   font-weight: 400;
//   src: url("./assets/fonts/mf-jianhei-normal.ttf");
// }

// @font-face {
//   font-family: "Shanghei";
//   font-style: normal;
//   font-weight: 400;
//   src: url("./assets/fonts/mf-shanghei-light.ttf");
// }

#avg-loading-layer {
  z-index: $_LAYER_INDEX_LOADING_LAYER;

  position: absolute;
  pointer-events: none;

  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#avg-particle-viewport {
  z-index: $_LAYER_INDEX_PARTICLE_VIEWPORT;

  padding: 0px;
  margin: 0px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;

  #avg-particle-viewport-canvas {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

#avg-viewport {
  z-index: $_LAYER_INDEX_VIEWPORT;

  background: black;
  will-change: transform, left, top;
}

#avg-camera-viewport {
  z-index: $_LAYER_INDEX_VIEWPORT;
  position: absolute;
  width: 100%;
  height: 100%;

  filter: blur(0px);
}

#avg-transition {
  position: absolute;
  z-index: $_LAYER_INDEX_CAMERA_BACKDROP;
  width: 100%;
  height: 100%;
  opacity: 1;
  pointer-events: none;

  will-change: transform, opacity;
}

#avg-dialogue-box-layer {
  z-index: $_LAYER_INDEX_DIALOGUE_BOX;
}

#avg-variable-input-box-layer {
  z-index: $_LAYER_INDEX_VARIABLE_INPUT_BOX;
}

#avg-widget-layer {
  position: absolute;
  pointer-events: none;
  z-index: $_LAYER_INDEX_WIDGETS;
  width: 100%;
  height: 100%;
  background-color: rgba($color: #000000, $alpha: 0);
  will-change: transform, left, top, right, bottom;
}

#avg-title-menu-layer {
  z-index: $_LAYER_INDEX_TITLE_MENU;
}

#avg-outlet {
  z-index: $_LAYER_INDEX_OUTLET;
  pointer-events: none;
}

// 弹幕相关
#danmaku-contianer {
  z-index: $_LAYER_INDEX_DANMUKU;
  pointer-events: none;

  width: 100%;
  height: 100%;

  &.abp {
    position: absolute;
    .container {
      border: 0;
      bottom: 0;
      display: block;
      left: 0;
      margin: 0;
      overflow: hidden;
      position: absolute;
      right: 0;
      top: 0;
      touch-callout: none;
      -webkit-transform: matrix3d(
        1,
        0,
        0,
        0,
        0,
        1,
        0,
        0,
        0,
        0,
        1,
        0,
        0,
        0,
        0,
        1
      );
      transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      z-index: 9999;
      .cmt {
        color: #fff;
        // font-family: SimHei, SimSun, Heiti, "MS Mincho", "Meiryo", "Microsoft YaHei", monospace;
        font-size: 25px;
        letter-spacing: 0;
        line-height: 100%;
        margin: 0;
        padding: 3px 0 0 0;
        position: absolute;
        text-decoration: none;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        -webkit-text-size-adjust: none;
        -ms-text-size-adjust: none;
        text-size-adjust: none;
        -webkit-transform: matrix3d(
          1,
          0,
          0,
          0,
          0,
          1,
          0,
          0,
          0,
          0,
          1,
          0,
          0,
          0,
          0,
          1
        );
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        white-space: pre;
        word-break: keep-all;
        &.no-shadow {
          text-shadow: none;
        }
        &.reverse-shadow {
          text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
        }
        &.css-optimize {
          will-change: transform;
        }
      }
    }
  }

  /** Aliases for Chinese named fonts because they don't work on *nix **/
  @font-face {
    font-family: "\9ED1\4F53";
    src: local("SimHei");
  }

  @font-face {
    font-family: "\5B8B\4F53";
    src: local("SimSun");
  }

  @font-face {
    font-family: "\534E\6587\6977\4F53";
    src: local("SimKai");
  }

  @font-face {
    font-family: "\5E7C\5706";
    src: local("YouYuan");
  }

  @font-face {
    font-family: "\5FAE\8F6F\96C5\9ED1";
    src: local("Microsoft YaHei");
  }

  #avg-danmaku {
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
  }
}
