// SPDX-FileCopyrightText: 2022 UnionTech Software Technology Co., Ltd.
//
// SPDX-License-Identifier: GPL-3.0-or-later

.Triangle {
   content: '';
   position: absolute;
   width: 8px;
   height: 8px;
   transform: rotate(45deg);
   background-color: #FFFFFF;
   z-index: 99;
 }
 #article {
  // background-color: #fff;
  // width: 100%;
   width: calc(100% - 164px);
   margin: 10px 0px 10px 0px;
   border-radius: 8px;
   user-select: text !important;
   
   #article_bg {
    margin: 0px 10px 0px 10px;
    background-color: var(--nav-background-color);
    border-radius: 8px;
    .read {
      position: absolute;
      width: 90%;
      min-width: 400px;
      max-width: 1024px;
      left: 50%;
      transform: translateX(-50%);
      background-color: transparent;
      // font-family: SourceHanSansSC-Normal;
      font-family: var(--nav-world-font-family);
      margin: 0px;
      padding: 0 8.8%;
      font-size: 0.9rem;
      
      color: var(--article-read-word-color);
      outline: 0px;
      .version-info {
        margin-top: 20px;     
        border-top: 1px solid var(--index-h2-color);
        padding-top: 10px;
        color: #414d68;
        span {
          padding-right: 10px;
        }
        a{
          float:right;
          color:#0081FF;
        }
        .spanbox{
          display: none;      //暂时将历史版本href隐藏
        }
      }
      h2 {
        font-weight: normal;
        font-size: 1.5rem;
        color: var(--article-read-h2-word-color);
        margin: 0px;
        padding-top: 23px;
          +p{
              margin-top: 15px;        
          }
      }
      ul,
      ol {
        margin: 0;
        padding: 0;
      }
      li {
        margin-left: 2em;
        line-height: 1.8rem;
      }
      img {
        //svg图片内嵌同行
        &[src$='svg'] {
          height: 20px;
          vertical-align: middle;
        }
        //png图片
        &[src$='png'] {
          $i: 0;
          @while $i<1 {
            $i: $i+0.25;
            @media screen and (-webkit-min-device-pixel-ratio: 1+$i) {
              zoom: 0.5/$i;
            }
          }
          margin-top: 10px;
          max-width: 99%;
          cursor: pointer;
        }
        //jpg图片
        &[src$='jpg'] {
          $i: 0;
          @while $i<1 {
            $i: $i+0.25;
            @media screen and (-webkit-min-device-pixel-ratio: 1+$i) {
              zoom: 0.5/$i;
            }
          }
          margin-top: 10px;
          max-width: 99%;
          cursor: pointer;
          border-radius: 4px;
          // border: 1px solid rgba(0, 0, 0, 0.18);
          box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2),
            0 0 0 1px rgba(0, 0, 0, 0.1);
        }
      }
      p {
        line-height: 1.8em;
        margin: 0;
      }
      table {
        color: var(--article-table-text-color);
        border-collapse: collapse;
        border-top: 2px solid var(--article-table-border-color);
        border-bottom: 2px solid var(--article-table-border-color);
        margin-top: 20px;
        // white-space: nowrap;
        //表格block等级
        @for $i from 1 to 5 {
          &.block#{$i} {
            width: 100%/$i - 1%;
            float: left;
            margin-right: 1%;
          }
        }
        tr {
          border-bottom: 1px solid var(--article-table-cell-border-color);
          font-size: 0.9rem;
          td {
            padding: 5px;
          }
        }
        caption {
          text-align: left;
        }
      }
      a {
        text-decoration: none;
        font-weight: bold;
        color: #757575;
        cursor: pointer;
        // &[href^='http'] {
        //   &:after {
        //     content: '🔗';
        //   }
        // }
        &[href^='#'] {
          color: #0082fa;
        }
        &[href^='dman://'] {
          color: #4e64f6;
          &:after {
            content: ' 📃 ';
          }
        }
      }
      blockquote {
        margin: 0;
        font-style: italic;
      }
      .searchWK {
        background-color: yellow;
      }
    }
   }
   #preview {
     position: fixed;
     width: 600px;
     height: 250px;
     z-index: 100;
     background: var(--body-color-white2black); // border: 1px solid rgba(0,0,0,0.10);
     border-radius: 3px;
     box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.1),
       inset 0 2px 0 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.1);
     margin: auto;
     #view {
       height: 100%;
       overflow-y: auto;
       // &::-webkit-scrollbar {
       //   width: 6px;
       // }
       // &::-webkit-scrollbar-thumb {
       //   background-color: #888888;
       //   border-radius: 4px;
       //   border: 1px solid transparent;
       //   background-clip: content-box;
       // }
       // &::-webkit-scrollbar-thumb:hover {
       //   border: 1px solid #414141;
       //   background-color: #414141;
       // }
       .read {
         width: 80%;
         margin: auto;
         font-size: 0.9rem;
       }
     }
     padding: 8px 0px;
   }
   .t_center_down {
    &::after {
      @extend .Triangle;
      right: 300px;
      bottom: -4px;
      box-shadow: 0 1px rgba(0, 0, 0, 0.1), 1px 0 rgba(0, 0, 0, 0.1);
    }
  }
  .t_center_up {
    &::after {
      @extend .Triangle;
      right: 300px;
      top: -4px;
      box-shadow: 0 -1px rgba(0, 0, 0, 0.1), -1px 0 rgba(0, 0, 0, 0.1);
    }
  }
   .t_right_down {
     &::after {
       @extend .Triangle;
       right: 60px;
       bottom: -4px;
       box-shadow: 0 1px rgba(0, 0, 0, 0.1), 1px 0 rgba(0, 0, 0, 0.1);
     }
   }
   .t_right_up {
     &::after {
       @extend .Triangle;
       right: 60px;
       top: -4px;
       box-shadow: 0 -1px rgba(0, 0, 0, 0.1), -1px 0 rgba(0, 0, 0, 0.1);
     }
   }
   .t_left_down {
     &::after {
       @extend .Triangle;
       left: 60px;
       bottom: -4px;
       box-shadow: 0 1px rgba(0, 0, 0, 0.1), 1px 0 rgba(0, 0, 0, 0.1);
     }
   }
   .t_left_up {
     &::after {
       @extend .Triangle;
       left: 60px;
       top: -4px;
       box-shadow: 0 -1px rgba(0, 0, 0, 0.1), -1px 0 rgba(0, 0, 0, 0.1);
     }
   }  
   #contextMenu {
     user-select: none;
     font-size: 0.9rem;
     position: fixed;
     top: 0;
     left: 0;
     width: 60px;
     border-radius: 3px;
     box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.1),
       inset 0 2px 0 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.1);
     background-color: rgba(255, 255, 255, 0.9);
     margin: auto;
     text-align: center;
     z-index: 999;
     h4 {
       font-weight: unset;
       margin: 4px 0;
       padding: 2px 0;
       width: 100%;
       cursor: pointer;
     }
     h4:hover {
       background-color: #0082fa;
     }
   }
 }
