@import './reset.scss';

html {
  
}
:root {
	font-family: '思源黑体 ExtraLight-subset' !important;
	color: black;
	background-color: white;
}

#app{
      width: 100%;
	    min-height: 100vh;
      font-family: '思源黑体 ExtraLight-subset' !important;
      overflow-x: hidden;
      font-weight: normal;
      padding-bottom: 100px;
      
      // 当用户试图选择页面上的文本时，这个属性可以防止文本被选中。
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;


      /* 这个属性是用于WebKit浏览器（例如Safari和Chrome）的。它控制文本的平滑显示方式。
      antialiased值表示文本将使用抗锯齿技术来平滑显示，从而使文本看起来更加清晰和光滑。 */
      -webkit-font-smoothing: antialiased;
      /* 这个属性是用于Mozilla浏览器（例如Firefox）在OS X系统上的。它也控制文本的平滑显示方式。
      grayscale值表示文本将使用灰度平滑技术来显示，这通常会使文本看起来更加清晰，特别是在高分辨率屏幕上。 */
      -moz-osx-font-smoothing: grayscale;
}


.flex-shrink-0 {
  flex-shrink: 0;
}
.flex-grow-0 {
  flex-grow: 0;
}
.flex-grow-1 {
  flex-grow: 1;
}
.flex-column {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.object-fit-cover {
  object-fit: cover;
}
.border-box {
  box-sizing: border-box;
}
.fw-bold {
  font-weight: bold;
}
.w-0 {
  width: 0;
}
.w-100 {
  width: 100%;
}
.w-50{
  width: 50%;
}
.h-100 {
  height: 100%;
}
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.text-again-center {
      text-align: center;
}
.flex-column{
      flex-direction: column;
}

@mixin placeholderColor($color) {
  &::input-placeholder {
        /*WebKit browsers*/
        color: $color;
  }
  &::-webkit-input-placeholder {
        /*WebKit browsers*/
        color: $color;
  }
  &::-moz-input-placeholder {
        /*Mozilla Firefox*/
        color: $color;
  }
  &::-ms-input-placeholder {
        /*Internet Explorer*/
        color: $color;
  }
}


/* 适配iphonex */

@supports (bottom: env(safe-area-inset-bottom)) {
  .layout-container {
    padding-bottom: calc(env(safe-area-inset-bottom) + 50px); // 这里是重点
  }
}
