Misago/static/cranefly/css/cranefly/markdown.less

// Markdown output
// -------------------------

.markdown {
  margin: 0px;
  overflow: auto;

  &>:first-child {
    margin-top: 0px;
  }

  &>:last-child {
    margin-bottom: 0px;
  }

  h1 {
    font-size: @baseFontSize * 1.7;
  }

  h2 {
    font-size: @baseFontSize * 1.5;
  }

  h3 {
    font-size: @baseFontSize * 1.2;
  }

  h4 {
    font-size: @baseFontSize;
  }

  hr {
    border: none;
    border-top: 1px solid @hrBorder;
    margin: @baseLineHeight 0px;
  }

  blockquote {
    background-color: darken(@postBackground, 1%);
    border: 1px solid darken(@postBackground, 6%);
    border-radius: @baseBorderRadius;
    padding: @baseFontSize;

    &>h3:first-child {
      margin: 0px;
      margin-bottom: @baseLineHeight / 2;
      padding: 0px;

      font-size: @baseFontSize;
      line-height: @baseLineHeight;
    }

    &>:first-child {
      margin-top: 0px;
    }

    &>:last-child {
      margin-bottom: 0px;
    }

    p {
      margin: 0 0 @baseLineHeight / 2;
      font-size: @fontSizeSmall;
    }

    blockquote {
      background-color: @postBackground;
      border: 1px solid darken(@postBackground, 5%);
      border-radius: @baseBorderRadius;
      padding: @baseFontSize;
    }
  }

  code {
    background-color: @grayDark;
    border: none;

    color: @grayLighter;
    font-size: @baseFontSize;
  }

  pre {
    background-color: @grayDarker;
    padding: (@baseFontSize / 2) @baseFontSize;

    code {
      background: none;
      border: none;

      color: @grayLighter;
      font-size: @fontSizeSmall;
    }
  }

  img {
    background-color: @white;
    border-radius: @baseBorderRadius;
    margin: (@baseLineHeight / 2) 0px;
  }

  // Blocks margins
  pre, blockquote, iframe {
    margin-top: @baseLineHeight;
    margin-bottom: @baseLineHeight;

    &>:first-child {
      margin-top: 0px;
    }

    &>:last-child {
      margin-bottom: 0px;
    }
  }

  // Emoticons
  .emoji {
    background: none;
    border-radius: 0px;
    margin: 0px;
    vertical-align: middle;
  }

  h1 {
    .emoji {
      width: (@baseFontSize * 1.7) + 4px;
      height: (@baseFontSize * 1.7) + 4px;
    }
  }

  h2 {
    .emoji {
      width: (@baseFontSize * 1.5) + 4px;
      height: (@baseFontSize * 1.5) + 4px;
    }
  }

  h3 {
    .emoji {
      width: (@baseFontSize * 1.2) + 4px;
      height: (@baseFontSize * 1.2) + 4px;
    }
  }

  h4 {
    .emoji {
      width: @baseFontSize + 4px;
      height: @baseFontSize + 4px;
    }
  }

  p {
    .emoji {
      width: @baseFontSize + 4px;
      height: @baseFontSize + 4px;
    }
  }

  blockquote {
    p {
      .emoji {
        width: @fontSizeSmall + 2px;
        height: @fontSizeSmall + 2px;
      }
    }
  }
}