/**
 * @date: 2024/3/17
 * @author: 小红
 * @fileName: render
 * @Description:渲染 html
 */
@use '../core/util';

.main {
  > .content {
    min-height: 500px;
  }

  .aside {
    align-self: auto;
  }
}

// 渲染html
.render {
  @include util.useThemeVar((
    h-color:(#1f2d3d, rgba(255, 255, 255, 0.9)), //标题颜色
    code-color:(#ed2929, #ed2929), // 普通code字体颜色
    code-background-color:(rgba(27, 31, 35, 0.05), #584d4d), // 普通code背景字体颜色
    blockquote-background-color:(rgba(73, 177, 245, 0.1), rgb(35 35 35)), // blockquote背景颜色
    blockquote-font-color:(#6a737d, rgba(255, 255, 255, 0.7)), // blockquote字体颜色
    table-border-color:(#e3e3e3, #656565b3), // 表格边框颜色
    code-toolbar-box-shadow:(0 5px 10px 0 rgb(187 193 197 / 40%), 0 5px 10px 0 rgb(28 29 29 / 40%)), // code-toolbar阴影
    code-loading-background-color:(#ffff, rgb(61 57 57)), // code加载动画颜色
    img-filter:(none, brightness(0.9) contrast(0.8))
  ));

  & {
    padding-bottom: 1.2rem;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  //overflow-x: hidden;


  h1, h2, h3, h4, h5, h6 {
    color: var(--h-color);
    font-weight: 700;
    margin-bottom: 5px;
    position: relative;
  }

  h1 {
    font-size: 1.5em;
  }

  h2 {
    font-size: 1.4em;
  }

  h3 {
    font-size: 1.3em;
  }

  h4 {
    font-size: 1.2em;
  }

  h5 {
    font-size: 1.1em;
  }

  h6 {
    font-size: 1em;
  }


  p {
    min-height: 30px;
    margin-bottom: 15px;
  }

  a {
    position: relative;
    color: var(--theme);
    display: inline-block;
    font-weight: normal;

    &:after {
      position: absolute;
      left: 0;
      right: 0;
      opacity: 0;
      content: "";
      bottom: 5px;
      height: 1px;
      transform: scaleX(.25);
      background: var(--theme);
      transition: opacity .5s, transform .5s;
      width: 95%;
      margin: auto;
    }

    &:hover {
      &:after {
        opacity: 1;
        transform: scaleX(1);
      }
    }
  }


  ul, ol {
    margin: 10px 0;
    padding-left: 30px;

    > li {
      line-height: 35px;
    }
  }

  ul > li {
    list-style: circle;

    &::marker {
      color: var(--theme);
      font-weight: 600;
      font-size: 1.5em;
    }
  }

  ol > li {
    list-style: decimal;
  }

  code:not([class]) {
    user-select: all;
    background-color: var(--code-background-color);
    color: var(--code-color);
    display: inline-block;
    margin: 4px 6px;
    padding: 3px 7px;
    white-space: normal;
    text-indent: 0;
    vertical-align: baseline;
    word-break: break-word;
    border-radius: 4px;
    line-height: 1.3;
  }

  blockquote {
    margin-bottom: 15px;
    padding: 10px 15px;
    border-left: 4px solid var(--theme);
    background-color: var(--blockquote-background-color);
    color: var(--blockquote-font-color);
    border-radius: 5px;

    p {
      margin: 0;
    }
  }

  span[data-fancybox=fancyBoxImg] {
    margin-bottom: 15px;
  }

  video, img {
    border-radius: 5px;
  }

  video {
    margin-bottom: 15px;
  }

  img {
    max-width: 100%;

    filter: var(--img-filter);
    cursor: zoom-in;
    transition: transform .35s, box-shadow .35s;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 34px 20px -24px rgba(136, 161, 206, .3);
    }
  }

  hr {
    margin: 15px 0;
  }

  table {
    width: 100%;
    display: table;
    empty-cells: show;
    border-radius: 4px !important;
    margin-bottom: 15px;

    tr > th, tr > td {
      padding: 5px 10px !important;
      border-color: var(--table-border-color) !important;
      vertical-align: middle;
      border-style: solid;
      border-width: 1px;
    }

    tr > th {
      background-color: rgba(153, 169, 191, .1) !important;
    }

    tr > td {
      &, > code:not([class]) {
        white-space: nowrap;
      }
    }

  }

  ul[data-type*=taskList], ul[class*=task-list] {
    li {
      margin-left: -16px;
      list-style: none;
    }

    > label, input, div, p {
      display: inline-block;
    }

    label {
      position: relative;
      margin-right: 8px;
      top: 2.6px;
      display: inline-block;
      user-select: none;

      input {
        position: absolute;
        opacity: 0;
        cursor: var(--cursor-pointer);
        height: 0;
        width: 0;

        &:checked ~ span {
          background-color: limegreen;
          border-radius: 5px;
          transition: 0.15s;
        }

        &:checked ~ span:after {
          display: block;
        }
      }

      span {
        display: inline-block;
        position: relative;
        top: 0;
        left: 0;
        height: 16px;
        width: 16px;
        background-color: #ccc;
        border-radius: 5px;
        transition: 0.15s;
        cursor: var(--cursor-pointer);

        &:after {
          content: "";
          position: absolute;
          display: none;
          left: 5px;
          top: 3px;
          width: 6px;
          height: 8px;
          border: solid #fff;
          border-width: 0 0.15em 0.15em 0;
          transform: rotate(45deg);
        }


      }
    }


  }

  //h标题旁边图标
  &.enable_h_icon {
    h1, h2, h3, h4, h5, h6 {
      &:before {
        font-family: "Font Awesome 6 Pro", serif;
        display: var(--fa-display, inline-block);
        font-style: normal;
        font-variant: normal;
        line-height: 1;
        text-rendering: auto;
        content: "\e3c2";
        color: var(--theme);
        margin-right: 7px;
        font-size: 0.9em;
      }
    }
  }
}

//目录
.toc {

  overflow-y: auto;
  max-height: 500px;

  &::-webkit-scrollbar {
    height: 2px;
    width: 2px;
  }

  &-list {
    overflow: hidden;
    position: relative;
    margin: 0;
    padding-left: 10px;

    li {
      list-style: none;
    }
  }


  &-link {
    color: currentColor;
    height: 100%;

    &::before {
      background-color: #EEE;
      content: ' ';
      display: inline-block;
      height: inherit;
      left: 0;
      margin-top: -1px;
      position: absolute;
      width: 2px;
    }
  }

  .is-collapsible {
    max-height: 1000px;
    overflow: hidden;
    transition: all 300ms ease-in-out;
  }

  .is-collapsed {
    max-height: 0;
  }

  .is-position-fixed {
    position: fixed !important;
    top: 0;
  }

  .is-active-link {
    font-weight: 700;
    color: var(--theme);

    &::before {
      background-color: var(--theme);
    }
  }


}

.is-sticky {
  position: sticky;
  top: 20px;
  transition: top .3s;
  z-index: 10;

  @include util.useResponsive($width: 1100px) {
    .aside-toc {
      display: none;
      position: fixed;
      bottom: 133px;
      z-index: 200;
      max-width: 380px;
      max-height: calc(100% - 60px);
      width: calc(100% - 80px);
      transition: transform .3s ease-in-out;
      transform-origin: right bottom;
      right: 55px;
    }
  }
}

.side-btn {
  .h5-toc {
    visibility: hidden;
    transition: visibility .3s;
  }

  @include util.useResponsive($width: 1100px) {
    //侧边目录按钮
    .h5-toc {
      visibility: visible;
    }
  }
}


//版权
.copy-right {
  @include util.useThemeVar((
    cpy-border-color:(#ebe5f83b, rgba(33, 35, 37, 0.9)), //版权边框颜色
    cpy-background-color:(#f0f0f0cc, rgba(33, 35, 37, 0.9)), //版权背景颜色
    cpy-text-color:(#1f2d3d, rgba(255, 255, 255, 0.9)), //版权字体颜色
  ));

  & {
    margin: 25px 0;
    padding: 10px 16px;
    border: 1px solid var(--cpy-border-color);
    transition: box-shadow .2s, transform .2s;
    background-color: var(--cpy-background-color);
    border-radius: 8px;
    color: var(--cpy-text-color);
    position: relative;
  }

  > div {
    @include util.text-overflow;

    @include util.useResponsive($width: util.$w-md) {
      font-size: .8rem;
    }
  }

  > i.fa-copyright {
    position: absolute;
    font-size: 1.5em;
    color: var(--theme);
    right: 10px;
    top: 10px;
  }

  a {
    color: var(--theme);
  }


}