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

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

.markdown, .markdown article {
  margin: 0px;
  overflow: visible;

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

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

    img: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 {
    border-left-color: darken(@grayLighter, 5%);
    padding: (@baseFontSize / 3) @baseFontSize;
    margin: @baseLineHeight / 2;

    header {
      padding-bottom: (@baseLineHeight / 2);

      font-size: @baseFontSize * 1.1;
      font-weight: bold;
      line-height: @baseLineHeight;
    }

    p {
      margin: 0 0 (@baseLineHeight / 2);

      font-size: @baseFontSize;
    }

    blockquote {
      .opacity(85);
    }
  }

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

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

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

  .media-border {
    box-shadow: 0px 0px 4px @gray;
  	display: inline-block;
  	overflow: hidden;
    margin: (@baseLineHeight / 2) 0px;

    iframe {
    	margin: 0px;
    	margin-bottom: -5px;
    }

    .media-thumbnail {
    	background-color: @black;
    	background-position: center center;
    	background-repeat: no-repeat;
    	background-size: cover;
    	width: 853px;
    	height: 480px;

    	text-align: center;

    	a {
    		background-color: fadeOut(@black, 20%);
    		border-radius: @fontSizeSmall;
    		display: inline-block;
    		margin-top: 159px;
    		padding: @baseFontSize (@baseFontSize * 1.5);

	    	color: @grayLighter;
	    	text-align: center;
	    	text-shadow: 0px 1px 1px @black;

	    	&:hover, &:active {
	    		color: @white;
	    		text-decoration: none;
	    		text-shadow: 0px 0px 5px @grayLighter,
	    								 0px 1px 1px @black;
	    	}

	    	.icon-youtube-sign {
	    		display: block;
	    		clear: both;

	    		font-size: @baseFontSize * 8;
	    		text-decoration: none;
	    	}

		  	&.movie-title {
		  		margin-top: 164px - @baseFontSize - 4px;

		    	strong {
		    		display: block;
		    		margin-top: 6px;

		    		font-size: @fontSizeLarge;
		    	}
		  	}
    	}
    }
  }

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

    article{
      &>: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;
      }
    }
  }
}