////////文章////////
.d-article{
  padding: @sys-layout-sm @sys-layout-md;
  min-height: 120px;
  .d-article-head {
    padding-bottom: @sys-layout-sm;
    border-bottom: 1px dashed @color-border;
  }
  .d-article-caption {
    margin: 0 @sys-layout-sm;
    font-size: 24px;
    line-height: 30px;
    text-align: center;
    font-weight: 400;
    color: #333;
  }
  .d-article-attr {
    margin-top: @sys-layout-sm;
    padding: 0 @sys-layout-sm;
    line-height: 20px;
    text-align: center;
    color:#aaa;
    font-size: @sys-font-size-xs;
    .d-item-attr {
      margin: 0 8px;
    }
  }
  @h-line:26px;
  .d-article-content {
    overflow: hidden;
    position: relative;
    padding: @sys-layout-xs 0;
    min-height: @h-line * 10;
    max-height:@h-line * 20;
    line-height: @h-line;
    color: @sys-color-deepgray;
    font-size:14px;
    word-wrap: break-word;
    word-break: normal;
    white-space: pre-wrap;
    &.active {
      max-height: 9999999px;
    }
    img,object,embed{
      float: none;
      max-width: 100%;
    }
    img {
      max-width: 100%;
    }
  }
  @h-expand:@h-line * 2;
  .d-article-expand{
    @origin:top;
    @start:rgba(255, 255, 255, 0.8);
    @stop:#fff;
    position:relative;
    margin-top:0 - @h-expand;
    height:@h-expand;
    line-height:@h-expand;
    color:@color-theme;
    font-size:@sys-font-size-xs;
    text-align:center;
    background: linear-gradient(to bottom, @start, @stop);
    &:before{
      margin-right:@sys-layout-xs;
    }
    &.active{
      display:none;
    }
  }
  .d-article-about {
    overflow: hidden;
    margin-top:@sys-layout-sm;
    padding: @sys-layout-md 0;
    line-height: 20px;
    .d-item-link {
      color: @sys-color-gray;
      &:hover{
        color:@color-theme;
      }
    }
    border-top:1px dashed @color-border;
    border-bottom:1px dashed @color-border;
  }
  .d-article-prev,.d-article-next {
    display: block;
    padding: @sys-layout-xs 0;
    font-size: 14px;
    .sys-ellipsis();
  }
  .d-article-action{
    overflow: hidden;
    padding: @sys-layout-xs;
    font-size: @sys-font-size-xs;
    color:@sys-color-lightgray;
    .d-item-action {
      float:right;
      margin-left:@sys-layout-sm;
      font-style:normal;
    }
    .d-item-icon {
      margin-right:@sys-layout-xs;
    }
  }
  .d-item-mark{
    color: @color-theme;
  }
  .disabled{
    color: @sys-color-lightgray;
  }
}