@import './Values.less';

.article-view {
  -webkit-app-region: drag;
  position: relative;
  padding: 42px 0 42px 0;
  height: 100%;

  .view-header {
    .wrapper-header;
    .anticon {
      color: @black-text-color;
      &:hover {
        color: @black-text-color-light;
      }
    }
  }
  .view-header-right {
    .wrapper-hf-right;
    .anticon {
      margin-top: 13px;
      margin-right: 16px;
    }
  }
  .view-footer {
    .wrapper-footer;
    padding: 0 16px 0 16px;
    p {
      font-size: 14px;
      color: @black-text-color-dark;
      line-height: 41px;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 0;
      // margin-bottom: 0;
    }
  }
  .view-content {
    -webkit-app-region: none;
    overflow: hidden;

    .article-info {
      cursor: pointer;
      border-radius: 4px;
      padding: 16px;
      max-width: 420px;

      margin: 32px auto 12px auto;
      &:hover {
        background-color: @list-selected-color;
      }
      .article-date p {
        color: @black-text-color-dark;
        font-size: 12px;
        margin-bottom: 4px;
      }
      .article-title h1 {
        font-size: 32px;
        line-height: 40px;
        margin-bottom: 6px;
      }
      .article-author p {
        color: @black-text-color-dark;
        font-size: 12px;
        margin-bottom: 2px;
      }
    }
    .article-content {
      padding: 16px;
      max-width: 420px;
      margin-right: auto;
      margin-left: auto;
      img,
      video,
      iframe {
        max-width: 100%;
      }
      figure {
        max-width: 100%;
        overflow-x: scroll;
      }
    }
  }
}
