EVOLUTION-MANAGER

Edit File: markdown.less

@import (reference) "../defs.less";

/*
 * A mixin to add styles for the Markdown WYSIWYG extension's output.
 *
 * This is implemented as a mixin so that the caller can embed it in any
 * CSS class they like.

* Note that there's similar styling code in
 * djblets/markdown/extensions/wysiwyg_email.py. If you make substantial
 * changes here, you may also want to make changes there.
 */
.markdown-wysiwyg() {
  .hide-br() {
    br {
      display: none;
    }
  }

.show-br() {
    br {
      display: block;
    }
  }

line-height: @textarea-line-height;
  .box-sizing(border-box);

* {
    margin: 0;
    padding: 0;

line-height: inherit;
    text-rendering: inherit;
    white-space: normal;

.show-br();
  }

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
  }

p {
    white-space: inherit;

/* Don't show both the <br> and the blank line. */
    .hide-br();
  }

ul, ol {
    line-height: 0;
    margin: 0;
    padding: 0;

p {
      /*
       * <p> tags in a list do not preserve whitespace, since there's
       * mandatory leading whitespace before the content.
       */
      .show-br();
    }

ul, ol {
      margin-left: 2ch;
    }
  }

ol {
    /*
     * We want to keep wrapped text within the confines of the list item. So:
     *
     * 1. This is long text that
     *    wraps like this.
     *
     * Instead of:
     *
     * 1. This is long text that
     * wraps like this.
     *
     * To do this, we need to use display: table and display: table-cell.
     * However, that loses item counter rendering, so we have to do counters
     * ourselves. In combination with StyledOListBlockProcessor in
     * reviewboard/reviews/markdown_extensions.py, this maintains compatibility
     * with the start= attribute.
     */
    counter-reset: li;
    display: table;
    list-style-position: inside;

> li {
      counter-increment: li;
      display: table;

&::before {
        content: counter(li) ". ";
        padding-right: 1ch;
        display: table-cell;
        text-align: right;
      }
    }
  }

ul {
    list-style-position: outside;
    list-style: disc;
    margin-left: 2ch;
  }

li {
    line-height: @textarea-line-height;

~ li:last-child {
      p:last-child {
        margin-bottom: 0;
      }
    }

p {
      margin-bottom: @textarea-line-height;

/*
       * If the list item ends up with a sole <p>, just remove the margins.
       * Depending on neighboring elements, Python Markdown will sometimes
       * create list items this way.
       */
      &:first-child:last-child {
        margin: 0;
      }
    }
  }

table {
    border-collapse: collapse;
    margin-left: 4px;

td, th {
      padding: 0.2em 1em;
    }

td {
      border: 1px solid #bbbbbb;
    }

th {
      border-bottom: 1px solid @markdown-table-header-border-color;
      border-left: 1px solid @markdown-table-border-color;
      border-right: 1px solid @markdown-table-border-color;
    }

thead tr:last-child th {
      padding-bottom: 0.5em;
    }

tbody tr {
      &:first-child td {
        padding-top: 0.5em;
      }

&:last-child td {
        border-bottom: none;
      }
    }
  }

code {
    color: #4444cc;
  }

pre {
    .pre-wrap;
    font-size: inherit;
    margin-left: 2.5em;

* {
      .pre-wrap;
    }
  }

blockquote {
    border-left: 1px solid #bbb;
    padding-left: 1em;
    margin-left: 0.5em;
  }

hr {
    border: 1px solid #ddd;
  }
}