@font-face {
  font-family: GuDianMingChaoTi;
  font-weight: bold;
  src: url('../assets/font/GuDianMingChaoTi.ttf');
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::selection {
  background: $selection-bg;
  color: $selection-color;
}

body {
  font-family: $font-family-base;
  font-size: $font-size-base;
  font-weight: $font-weight-normal;
  color: $text-color;
  line-height: $line-height-base;
  user-select: none;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  @include cursor;
  @include scrollBar;
  @include pc-layout {
    // 该属性值在移动设备上会造成比较明显的性能问题
    // 详见 https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-rendering
    text-rendering: optimizeLegibility;
  }
}

#app {
  min-height: 100vh;
  overflow-x: hidden;
  @include pc-layout {
    background-color: $bg-white-dim;
  }
  @include sp-layout {
    background-color: $bg-sp-color;
  }
}

img {
  display: block;
  margin: auto;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  outline: none;
  word-wrap: break-word;
}

button {
  outline: none;
}

a,
button,
.waifu,
.cursor,
.code-copy {
  @include cursor-link;
}

input,
textarea,
button {
  appearance: none;
  border: none;
  border-radius: 0;
}

#bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  @include sp-layout {
    display: none;
  }
}

/* 代码高亮 */
pre {
  padding: $code-padding;
  line-height: 1.5;
  box-shadow: $block-shadow;
  > code {
    display: block;
    overflow: auto;
    @include scrollBar;
  }
}

code {
  width: 100%;
  font-family: $font-family-base;
  font-size: $font-weight-normal;
  text-shadow: 0 0 1px $bg-dark-deep;
  text-align: left;
  white-space: pre;
  letter-spacing: 0;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  tab-size: 4;
  hyphens: none;
}

td.hljs-ln-numbers {
  padding-right: 16px;
  text-align: center;
}

/* Gitalk */
.markdown-body code {
  color: $purple;
  font-weight: 700;
}
#gitalk {
  @include sp-layout {
    padding: 0 16px;
  }

  .gt-comment-body,
  .gt-btn-text,
  textarea {
    font-family: $font-family-base;
    color: $text-color;
  }

  .gt-container {
    text-align: left;
    a {
      color: $link-color;
      border-bottom: none;
    }
    .gt-svg svg {
      fill: $purple-dim;
    }
    .gt-ico-text {
      color: $purple-deep;
    }
    .gt-btn-login {
      margin-top: 0;
      border: none;
      background-color: $purple-dim !important;
      span {
        line-height: 1;
        color: white;
      }
      @media screen and (max-width: 479px) {
        margin-top: 9px !important;
      }
    }
    .gt-avatar {
      border-radius: 3px;
    }
  }
  .gt-meta {
    padding-top: 0;
    border-bottom: 1px solid $bg-white;
    .gt-counts {
      float: left;
    }
    .gt-popup {
      margin-top: 10px;
      .is--active::before {
        background: $purple;
      }
    }
  }
  .gt-header {
    textarea,
    .gt-header-preview {
      border: none;
      min-height: 100px;
      max-height: 200px;
      background-color: $bg-white-dim;
      background-image: $aplayer-bg;
      background-size: 120px;
      background-repeat: no-repeat;
      background-position: 99% bottom;
      background-blend-mode: color;
      overflow: scroll;
    }
    textarea {
      height: 120px !important;
      @include scrollBar;
    }
    .gt-header-controls-tip {
      float: left;
    }
    .gt-btn {
      border: none;
      background-color: $bg-white-dim;
    }
    .gt-btn-public {
      background-color: $purple-dim;
      span {
        color: white;
      }
    }
    .gt-avatar-github {
      svg {
        fill: $purple-dim;
      }
    }
    .gt-btn-text {
      color: $purple-dim;
    }
  }
  .gt-comments {
    .gt-comment-content {
      border-radius: 3px;
      background-color: $bg-white-dim;
      @include pc-layout {
        box-shadow: $card-shadow;
        transition: $transition-base;
        &:hover {
          transform: translateY(-4px);
          box-shadow: $card-shadow-hover;
        }
      }
      @include sp-layout {
        box-shadow: $card-shadow-light;
      }
    }
    .gt-btn-loadmore {
      border: none;
      background-color: $purple-dim;
      span {
        color: white;
      }
    }
    .gt-comment-body {
      max-height: 500px;
      overflow: auto;
      pre {
        background-color: unset;
        box-shadow: 0 0 10px $bg-dark-dim inset;
      }
      @include scrollBar;
    }
    blockquote {
      border-left-color: $purple;
    }
  }
  textarea,
  .gt-btn-login,
  .gt-btn-preview,
  .gt-btn-loadmore,
  .gt-btn-public,
  .gt-avatar {
    @include pc-layout {
      box-shadow: $card-shadow;
    }
    @include sp-layout {
      box-shadow: $card-shadow-light;
    }
  }
}
