markup.less 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. //
  2. // Markup styles
  3. // --------------------------------------------------
  4. // Force word wrap for user text
  5. .misago-markup {
  6. h1, h2, h3, h4, h5, h6, p {
  7. word-wrap: break-word;
  8. }
  9. }
  10. // Add upper margins for headers
  11. .misago-markup {
  12. h1, h2, h3, h4, h5, h6 {
  13. margin-top: @line-height-computed * 2;
  14. }
  15. }
  16. // Even out blocks
  17. .misago-markup>*, .misago-markup blockquote>* {
  18. margin: @line-height-computed 0px;
  19. &:first-child {
  20. margin-top: 0px;
  21. }
  22. &:last-child {
  23. margin-bottom: 0px;
  24. }
  25. }
  26. // Downscale images so they don't expand area
  27. .misago-markup img {
  28. max-width: 100%;
  29. max-height: 500px;
  30. }
  31. // Make quotes stand out a little
  32. .misago-markup .quote-block,
  33. .misago-markup blockquote {
  34. background: @gray-lighter;
  35. border: none;
  36. font-size: @font-size-base;
  37. .quote-heading {
  38. border-bottom: 1px solid darken(@gray-lighter, 8%);
  39. padding: (@line-height-computed / 2) @line-height-computed;
  40. font-size: @font-size-small;
  41. font-weight: bold;
  42. }
  43. }
  44. .misago-markup>.quote-block,
  45. .misago-markup>blockquote {
  46. border: 1px solid darken(@gray-lighter, 8%);
  47. }
  48. .misago-markup .quote-body {
  49. background: @body-bg;
  50. margin: 0px;
  51. padding: @line-height-computed;
  52. &>.quote-block, &>blockquote {
  53. border: 1px solid darken(@gray-lighter, 8%);
  54. }
  55. }
  56. // Add bullets to lists
  57. .misago-markup ul {
  58. list-style-type: square;
  59. li {
  60. list-style-type: square;
  61. }
  62. }
  63. .misago-markup ol {
  64. list-style-type: decimal;
  65. li {
  66. list-style-type: decimal;
  67. }
  68. }
  69. // Expand code blocks a little
  70. .misago-markup pre {
  71. background: rgb(25, 23, 28);
  72. border: none;
  73. padding: @padding-large-vertical;
  74. overflow: hidden;
  75. color: #8b8792;
  76. code.hljs {
  77. margin: @padding-large-vertical * -1;
  78. }
  79. }