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 * 2;
  }

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

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

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

  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 {
    border-radius: @baseBorderRadius;
    box-shadow: 0px 0px 4px @gray;
    margin: (@baseLineHeight / 2) 0px;
  }

  .md-img {
    overflow: auto;

    .md-img-span {
      margin: (@baseLineHeight / 2) 0px;
      float: none;

      .md-img-wrap {
        background-color: @grayLighter;
        border: 1px solid @white;
        border-radius: @baseBorderRadius + 1px;
        box-shadow: 0px 0px 2px @grayLight;
        margin: 3px;

        .md-img-bg {
          background-color: @white;
          border-radius: @baseBorderRadius;
          padding: (@baseLineHeight / 2);
          
          text-align: center;

          img {
            border-radius: @baseBorderRadius;
            box-shadow: none;
          }

          .md-img-error {
            background: url('../img/img_broken.jpg');
            border-radius: @baseBorderRadius;
            padding: (@baseLineHeight * 2.5) 0px;

            span {
              background-color: @grayDark;
              border-radius: @borderRadiusLarge;
              .opacity(80);
              padding: (@baseFontSize / 2) @baseFontSize;
              margin: 0px auto;

              color: @white;
              text-shadow: 0px 1px 0px @black;
            }
          }
        }

        .md-img-label {
          display: block;
          padding: (@baseFontSize / 2) @baseFontSize;

          color: @grayDark;

          &:hover, &:active {
            color: @textColor;
            text-decoration: none;
          }
        }
      }
    }
  }

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

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

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