_wiki.scss 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. div.body {
  2. padding: 10px;
  3. }
  4. .revision-toc {
  5. float: right;
  6. font-size: .9em;
  7. border: solid 1px #aaa;
  8. border-radius: 5px;
  9. max-width: 250px;
  10. overflow: hidden;
  11. .revision-toc-head {
  12. display: inline-block;
  13. float: right;
  14. border-left: solid 1px #aaa;
  15. border-bottom: solid 1px #aaa;
  16. border-radius: 0 5px;
  17. padding: 3px 11px;
  18. font-weight: bold;
  19. background: #f0f0f0;
  20. margin-left: 5px;
  21. margin-bottom: 5px;
  22. &.collapsed {
  23. border: none;
  24. margin: 0;
  25. }
  26. }
  27. .revision-toc-content {
  28. background: #fcfcfc;
  29. padding: 10px;
  30. > ul {
  31. padding-left: 0;
  32. ul {
  33. padding-left: 1em;
  34. }
  35. }
  36. > ul > li { // first level of li
  37. margin: 4px 4px 4px 15px;
  38. padding: 5px;
  39. }
  40. }
  41. }
  42. .revision-head {
  43. .revision-head-link,
  44. .revision-head-edit-button {
  45. visibility: hidden;
  46. font-size: 0.6em;
  47. }
  48. &:hover .revision-head-link,
  49. &:hover .revision-head-edit-button {
  50. visibility: unset;
  51. margin-left: 0.5em;
  52. }
  53. }
  54. .wiki {
  55. line-height: 1.8em;
  56. font-size: 15px;
  57. h1, h2, h3, h4, h5, h6 {
  58. margin-top: 1.6em;
  59. margin-bottom: .8em;
  60. &:first-child {
  61. margin-top: 0;
  62. }
  63. }
  64. h1 {
  65. margin-top: 2em;
  66. padding-bottom: 0.3em;
  67. font-size: 1.8em;
  68. line-height: 1.1em;
  69. border-bottom: solid 1px #ccc;
  70. }
  71. h2 {
  72. padding-bottom: 0.5em;
  73. font-size: 1.4em;
  74. line-height: 1.225;
  75. font-weight: bold;
  76. border-bottom: 1px solid #eee;
  77. }
  78. h3 {
  79. font-size: 1.2em;
  80. font-weight: bold;
  81. }
  82. h4 {
  83. font-size: 1.1em;
  84. font-weight: normal;
  85. }
  86. h5 {
  87. font-size: 1.05em;
  88. font-weight: normal;
  89. }
  90. p {
  91. font-weight: normal;
  92. margin: 15px 0;
  93. }
  94. blockquote {
  95. font-size: .9em;
  96. margin: 0 0 30px 0;
  97. padding: 0 20px;
  98. color: darken(gray, 10%);
  99. }
  100. pre {
  101. border: none;
  102. }
  103. img {
  104. margin: 5px 0;
  105. max-width: 100%;
  106. }
  107. img.emojione {
  108. margin-top: -0.3em !important;
  109. margin-bottom: 0 !important;
  110. border: none;
  111. box-shadow: none;
  112. }
  113. ul, ol {
  114. padding-left: 30px;
  115. margin: 20px 0;
  116. li {
  117. margin: 5px 0;
  118. line-height: 1.8em;
  119. }
  120. ul, ol {
  121. margin: 0;
  122. }
  123. }
  124. // borrowed from https://www.npmjs.com/package/github-markdown-css
  125. .contains-task-list {
  126. .task-list-item {
  127. list-style-type: none;
  128. }
  129. .task-list-item+.task-list-item {
  130. margin-top: 3px;
  131. }
  132. .task-list-item input {
  133. margin: 0 0.2em 0.25em -1.6em;
  134. vertical-align: middle;
  135. }
  136. }
  137. pre.hljs {
  138. position: relative;
  139. cite {
  140. position: absolute;
  141. top: 0;
  142. right: 0;
  143. padding: 0 4px;
  144. background: #ccc;
  145. color: #333;
  146. font-style: normal;
  147. font-weight: bold;
  148. opacity: 0.6;
  149. }
  150. };
  151. p code { // only inline code blocks
  152. font-family: $font-family-monospace-not-strictly;
  153. }
  154. .page-template-builder {
  155. position: relative;
  156. .template-create-button {
  157. position: absolute;
  158. top: 8px;
  159. right: 8px;
  160. }
  161. }
  162. .highlighted {
  163. @extend .bg-warning;
  164. }
  165. }
  166. @media (max-width: $screen-sm-max) { // {{{ tablet and iphone size
  167. .crowi.main-container .main .wiki {
  168. img {
  169. max-width: 100%;
  170. }
  171. }
  172. }