@import (reference) '../../style/common.less';

.umui-doc-style() {
  font-family: PingFangSC-Regular, sans-serif;
  font-size: 14px;
  color: @text-color-secondary;
  letter-spacing: 0;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: @font-weight-bold;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  p,
  strong {
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 22px;
  }

  h1,
  h2,
  h3 {
    color: @text-color;
    font-family: PingFangSC-Semibold, sans-serif;
    letter-spacing: 0;
  }
  h1 {
    font-size: 20px;
  }
  h2 {
    font-size: 18px;
  }
  h3 {
    font-size: 16px;
  }
  h4 {
    font-size: 14px;
  }

  ol,
  ul {
    padding-left: 1.5em;
  }
  li {
    list-style: disc;
    list-style-position: outside;
    line-height: 2;
  }
  ol {
    li {
      list-style-type: decimal;
    }
  }

  strong {
    font-family: PingFangSC-Semibold, sans-serif;
    color: @text-color;
  }
  a {
    font-family: PingFangSC-Regular, sans-serif;

    /* font-size: 12px; */
    color: @primary-color;
    line-height: 17px;
  }
  img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
  }
  table {
    width: 100%;
    margin-top: 16px;
    margin-bottom: 16px;
  }
  th,
  td {
    padding: 8px 16px;
  }
  th {
    color: @table-header-color;
    background: @table-header-bg;
    border-top: 1px solid @border-color-base;
    border-bottom: 1px solid @border-color-base;
    min-width: 100px;
  }
  td {
    border-bottom: 1px solid @border-color-base;
  }

  blockquote {
    border-left: 3px solid @border-color-base;
    padding-left: 8px;
    font-family: PingFangSC-Regular, sans-serif;
    font-size: 14px;
    color: @text-color;
    letter-spacing: 0;
    line-height: 18px;
  }

  .line-numbers .line-numbers-rows {
    top: -3px;
  }

  pre.prettyprint {
    border: 1px solid @border-color-base;
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 0;
    background: @normal-color;
    border-radius: @border-radius-base;
    .linenums {
      padding-left: 3.5em;
      background: @body-background;
      margin: 0;
      font-size: 12px;
      max-height: 240px;
      overflow-y: scroll;
      overflow-x: visible;
      li {
        list-style-type: decimal;
        color: @text-color-secondary;
        background: @normal-color;
        margin: 0;
        padding-left: 1em;
        code {
          background: none;
          color: @text-color-secondary;
        }
      }
    }
    .pln {
      color: @primary-8;
    }
    .tag {
      color: @primary-10;
    }
    .atn {
      color: @primary-2;
    }
    .clo,
    .opn,
    .pun {
      color: @text-color-secondary;
    }
    .atv {
      color: @success-color;
    }
    .kwd {
      color: @primary-10;
    }
    .typ {
      color: @primary-9;
    }
    .lit {
      color: @primary-3;
    }
  }
}

.umui-code-style() {
  .u-code-header {
    user-select: none;
    height: 32px;
    line-height: 32px;
    background: @body-background;
    border-bottom: 1px solid @border-color-base;
    overflow: hidden;
  }
  .u-code-header-name {
    float: left;
    font-size: 14px;
    font-weight: @font-weight-bold;
    color: @text-color;
    padding-left: 16px;
  }
  .u-code-header-more {
    float: right;
    padding-right: 16px;
  }
  .u-code-btn-copy {
    font-size: 12px;
    color: @primary-color;
    cursor: pointer;
  }
}

.umui-cate-style() {
  .umui-cate-title.umui-indent-0 { margin-top: 54px; font-size: 20px; font-weight: @font-weight-bold; list-style: none; }
  .umui-cate-title.umui-indent-1 { font-size: 16px; font-weight: @font-weight-bold; list-style: none; margin: 24px 0 12px; }
  .umui-cate-title.umui-indent-2 { font-size: 14px; font-weight: @font-weight-bold; margin: 16px 0 12px; }
  .umui-cate-link {
    display: inline-block;
    width: 50%;
    margin-bottom: 16px;
    font-size: 14px;
  }
}

.umui-doc-loader {
  transform: translateX(0);
  height: 100%;
  .umui-doc-loader-empty {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -45px;
    margin-left: -78px;
  }
  .umui-doc-loader-content {
    position: relative;
    .umui-doc-style;
    .umui-code-style;
  }

  .umui-doc-loader-content.umui-doc-cate {
    .umui-cate-style;
  }
}