_wiki.scss 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. div.body {
  2. padding: 10px;
  3. }
  4. // hljs
  5. .wiki {
  6. @import 'hljs';
  7. }
  8. .wiki {
  9. font-size: 15px;
  10. line-height: 1.8em;
  11. h1,
  12. h2,
  13. h3,
  14. h4,
  15. h5,
  16. h6 {
  17. margin-top: 1.6em;
  18. margin-bottom: 0.8em;
  19. &:first-child {
  20. margin-top: 0;
  21. }
  22. }
  23. h1 {
  24. padding-bottom: 0.3em;
  25. margin-top: 2em;
  26. font-size: 1.8em;
  27. line-height: 1.1em;
  28. border-bottom: solid 1px transparent;
  29. }
  30. h2 {
  31. padding-bottom: 0.5em;
  32. font-size: 1.4em;
  33. font-weight: bold;
  34. line-height: 1.225;
  35. border-bottom: 1px solid transparent;
  36. }
  37. h3 {
  38. font-size: 1.2em;
  39. font-weight: bold;
  40. }
  41. h4 {
  42. font-size: 1.1em;
  43. font-weight: normal;
  44. }
  45. h5 {
  46. font-size: 1.05em;
  47. font-weight: normal;
  48. }
  49. p {
  50. margin: 15px 0;
  51. font-weight: normal;
  52. }
  53. blockquote {
  54. padding: 0 20px;
  55. margin: 0 0 30px 0;
  56. font-size: 0.9em;
  57. color: lighten($gray-dark, 35%);
  58. }
  59. img {
  60. max-width: 100%;
  61. margin: 5px 0;
  62. }
  63. img.emojione {
  64. margin-top: -0.3em !important;
  65. margin-bottom: 0 !important;
  66. border: none;
  67. box-shadow: none;
  68. }
  69. ul,
  70. ol {
  71. padding-left: 30px;
  72. margin: 20px 0;
  73. li {
  74. margin: 5px 0;
  75. line-height: 1.8em;
  76. }
  77. ul,
  78. ol {
  79. margin: 0;
  80. }
  81. }
  82. .task-list {
  83. .task-list-item {
  84. margin: 0 0.2em 0.25em -1.6em;
  85. list-style-type: none;
  86. }
  87. .task-list-item > .task-list {
  88. margin-left: 30px;
  89. }
  90. // use awesome-bootstrap-checkbox
  91. .task-list-item .checkbox input[type='checkbox'] {
  92. // layout
  93. + label {
  94. padding-left: 0.3em;
  95. &:before {
  96. margin-top: 0.4em;
  97. }
  98. }
  99. // styles
  100. cursor: default;
  101. + label {
  102. cursor: default;
  103. opacity: 1;
  104. &:before,
  105. &:after {
  106. cursor: default;
  107. }
  108. }
  109. }
  110. }
  111. // only inline code blocks
  112. p code {
  113. font-family: $font-family-monospace-not-strictly;
  114. }
  115. .page-template-builder {
  116. position: relative;
  117. .template-create-button {
  118. position: absolute;
  119. top: 8px;
  120. right: 8px;
  121. }
  122. }
  123. .highlighted {
  124. background-color: $brand-warning;
  125. }
  126. .revision-head {
  127. a {
  128. text-decoration: none;
  129. }
  130. .revision-head-link,
  131. .revision-head-edit-button {
  132. margin-left: 0.5em;
  133. font-size: 0.6em;
  134. opacity: 0;
  135. }
  136. &:hover .revision-head-link,
  137. &:hover .revision-head-edit-button {
  138. opacity: 1 !important;
  139. }
  140. }
  141. $ratio: 0.95;
  142. &.comment {
  143. font-size: 14px;
  144. line-height: 1.5em;
  145. h1,
  146. h2,
  147. h3,
  148. h4,
  149. h5,
  150. h6 {
  151. margin-top: 1.6em * $ratio;
  152. margin-bottom: 0.8em * $ratio;
  153. &:first-child {
  154. margin-top: 15px;
  155. }
  156. }
  157. h1 {
  158. padding-bottom: 0.3em * $ratio;
  159. margin-top: 2em * $ratio;
  160. font-size: 1.8em * $ratio;
  161. line-height: 1.1em * $ratio;
  162. }
  163. h2 {
  164. padding-bottom: 0.5em * $ratio;
  165. font-size: 1.4em * $ratio;
  166. line-height: 1.225 * $ratio;
  167. }
  168. h3 {
  169. font-size: 1.2em * $ratio;
  170. }
  171. blockquote {
  172. font-size: 0.9em * $ratio;
  173. }
  174. img.emojione {
  175. margin-top: -0.3em * $ratio !important;
  176. }
  177. ul,
  178. ol {
  179. padding-left: 15px;
  180. margin: 10px 0;
  181. li {
  182. line-height: 1.1em;
  183. }
  184. }
  185. .revision-head {
  186. .revision-head-link,
  187. .revision-head-edit-button {
  188. margin-left: 0.5em * $ratio;
  189. font-size: 0.6em * $ratio;
  190. }
  191. }
  192. }
  193. }
  194. // mobile
  195. .page-mobile .wiki .revision-head {
  196. .revision-head-link,
  197. .revision-head-edit-button {
  198. opacity: 0.3;
  199. }
  200. }
  201. // tablet and iphone size
  202. @media (max-width: $screen-sm-max) {
  203. .main-container .main .wiki {
  204. img {
  205. max-width: 100%;
  206. }
  207. }
  208. }