zui/src/less/views/article.less

一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。

/// ========================================================================
/// ZUI: article.less
/// http://openzui.com
/// ========================================================================
/// Copyright 2014-2020 cnezsoft.com; Licensed MIT
/// ========================================================================


// Article view

.article {
  padding: @article-padding;

  > header {
    h1,
    h2,
    h3 {
      line-height: 1.5;
      margin-bottom: @line-height-computed;
    }

    > .abstract,
    > dl {
      font-size: @font-size-small;
      padding: @article-section-padding;
      background-color: @article-abstract-bg;
      color: @article-abstract-color;
      > p:last-child {
        margin-bottom: 0;
      }
    }

    > dl {
      border-bottom: 1px solid darken(@article-abstract-bg, 3%);
      margin: 0;
      &.pull-right {
        background-color: transparent;
        border: none;
      }
    }
  }

  > footer {
    border-top: 1px dashed darken(@article-abstract-bg, 10%);
    > p {
      padding: @article-section-padding;
    }
  }
}

.article > .content,
.article-content {
  font-size: @article-font-size;
  line-height: @article-line-height;

  padding: @line-height-computed 0;

  h1  { font-size: @article-font-size-h1; }
  h2  { font-size: @article-font-size-h2; }
  h3  { font-size: @article-font-size-h3; }
  h4  {
    margin-top: 15px;
    font-size: @article-font-size-h4;
  }
  h5  {
    margin-top: 15px;
    font-size: @article-font-size-h5;
  }
  h6  {
    margin-top: 15px;
    font-size: @article-font-size-h6;
  }

  img { margin: @line-height-computed / 2 0; }

  p {
    > img {
      +img {margin-left: 10px;}

      &[align='right'] {
        margin-left: 10px;
      }
    }
  }

  dl {
    padding-left: 2em;
    padding-right: 2em;
  }

  table {
    margin-bottom: @line-height-computed;

    // Cells
    th,
    td {
      padding: @table-cell-padding;
      line-height: @line-height-base;
      vertical-align: top;
      border-bottom: 1px solid @table-border-color;
    }

    // Bottom align for column headings
    > thead > tr > th  {
      vertical-align: bottom;
      background-color: @table-head-bg;
    }
  }
}

.article-content p { margin-bottom: 0; }
.article > .content table {
  th,
  td,
  > thead > tr > th {
    border: 1px solid @table-border-color;
  }
}

body.article-content { padding: 8px; }