d8d2b3c027629f62833ffbf1875c408429e6cf8e426a249d47f07409803c28525dfd837de7188bcfa94687eef9e83398bd9b7082eb4438594612faa29d110c 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. // Styles necessary for Quill
  2. LIST_STYLE = decimal lower-alpha lower-roman
  3. LIST_STYLE_WIDTH = 1.2em
  4. LIST_STYLE_MARGIN = 0.3em
  5. LIST_STYLE_OUTER_WIDTH = LIST_STYLE_MARGIN + LIST_STYLE_WIDTH
  6. MAX_INDENT = 9
  7. resets(arr)
  8. unquote('list-' + join(' list-', arr))
  9. .ql-container
  10. box-sizing: border-box
  11. font-family: Helvetica, Arial, sans-serif
  12. font-size: 13px
  13. height: 100%
  14. margin: 0px
  15. position: relative
  16. .ql-container.ql-disabled
  17. .ql-tooltip
  18. visibility: hidden
  19. .ql-container:not(.ql-disabled)
  20. li[data-list=checked],
  21. li[data-list=unchecked]
  22. > .ql-ui
  23. cursor: pointer
  24. .ql-clipboard
  25. left: -100000px
  26. height: 1px
  27. overflow-y: hidden
  28. position: absolute
  29. top: 50%
  30. p
  31. margin: 0
  32. padding: 0
  33. .ql-editor
  34. box-sizing: border-box
  35. counter-reset: resets(0..MAX_INDENT)
  36. line-height: 1.42
  37. height: 100%
  38. outline: none
  39. overflow-y: auto
  40. padding: 12px 15px
  41. tab-size: 4
  42. -moz-tab-size: 4
  43. text-align: left
  44. white-space: pre-wrap
  45. word-wrap: break-word
  46. > *
  47. cursor: text
  48. p, ol, pre, blockquote, h1, h2, h3, h4, h5, h6
  49. margin: 0
  50. padding: 0
  51. p, h1, h2, h3, h4, h5, h6
  52. @supports (counter-set: none)
  53. counter-set: resets(0..MAX_INDENT)
  54. @supports not (counter-set: none)
  55. counter-reset: resets(0..MAX_INDENT)
  56. table
  57. border-collapse: collapse
  58. td
  59. border: 1px solid #000
  60. padding: 2px 5px
  61. ol
  62. padding-left: 1.5em
  63. li
  64. list-style-type: none
  65. padding-left: LIST_STYLE_OUTER_WIDTH
  66. position: relative
  67. > .ql-ui:before
  68. display: inline-block
  69. margin-left: -1*LIST_STYLE_OUTER_WIDTH
  70. margin-right: LIST_STYLE_MARGIN
  71. text-align: right
  72. white-space: nowrap
  73. width: LIST_STYLE_WIDTH
  74. li[data-list=checked],
  75. li[data-list=unchecked]
  76. > .ql-ui
  77. color: #777
  78. li[data-list=bullet] > .ql-ui:before
  79. content: '\2022'
  80. li[data-list=checked] > .ql-ui:before
  81. content: '\2611'
  82. li[data-list=unchecked] > .ql-ui:before
  83. content: '\2610'
  84. li[data-list]
  85. @supports (counter-set: none)
  86. counter-set: resets(1..MAX_INDENT)
  87. @supports not (counter-set: none)
  88. counter-reset: resets(1..MAX_INDENT)
  89. li[data-list=ordered]
  90. counter-increment: list-0
  91. > .ql-ui:before
  92. content: unquote('counter(list-0, ' + LIST_STYLE[0] + ')') '. '
  93. for num in (1..MAX_INDENT)
  94. li[data-list=ordered].ql-indent-{num}
  95. counter-increment: unquote('list-' + num)
  96. > .ql-ui:before
  97. content: unquote('counter(list-' + num + ', ' + LIST_STYLE[num%3] + ')') '. '
  98. if (num < MAX_INDENT)
  99. li[data-list].ql-indent-{num}
  100. @supports (counter-set: none)
  101. counter-set: resets((num+1)..MAX_INDENT)
  102. @supports not (counter-set: none)
  103. counter-reset: resets((num+1)..MAX_INDENT)
  104. for num in (1..MAX_INDENT)
  105. .ql-indent-{num}:not(.ql-direction-rtl)
  106. padding-left: (3*num)em
  107. li.ql-indent-{num}:not(.ql-direction-rtl)
  108. padding-left: (3*num + LIST_STYLE_OUTER_WIDTH)em
  109. .ql-indent-{num}.ql-direction-rtl.ql-align-right
  110. padding-right: (3*num)em
  111. li.ql-indent-{num}.ql-direction-rtl.ql-align-right
  112. padding-right: (3*num + LIST_STYLE_OUTER_WIDTH)em
  113. li.ql-direction-rtl
  114. padding-right: LIST_STYLE_OUTER_WIDTH
  115. > .ql-ui:before
  116. margin-left: LIST_STYLE_MARGIN
  117. margin-right: -1*LIST_STYLE_OUTER_WIDTH
  118. text-align: left
  119. table
  120. table-layout: fixed
  121. width: 100%
  122. td
  123. outline: none
  124. .ql-code-block-container
  125. font-family: monospace
  126. .ql-video
  127. display: block
  128. max-width: 100%
  129. .ql-video.ql-align-center
  130. margin: 0 auto
  131. .ql-video.ql-align-right
  132. margin: 0 0 0 auto
  133. .ql-bg-black
  134. background-color: rgb(0,0,0)
  135. .ql-bg-red
  136. background-color: rgb(230,0,0)
  137. .ql-bg-orange
  138. background-color: rgb(255,153,0)
  139. .ql-bg-yellow
  140. background-color: rgb(255,255,0)
  141. .ql-bg-green
  142. background-color: rgb(0,138,0)
  143. .ql-bg-blue
  144. background-color: rgb(0,102,204)
  145. .ql-bg-purple
  146. background-color: rgb(153,51,255)
  147. .ql-color-white
  148. color: rgb(255,255,255)
  149. .ql-color-red
  150. color: rgb(230,0,0)
  151. .ql-color-orange
  152. color: rgb(255,153,0)
  153. .ql-color-yellow
  154. color: rgb(255,255,0)
  155. .ql-color-green
  156. color: rgb(0,138,0)
  157. .ql-color-blue
  158. color: rgb(0,102,204)
  159. .ql-color-purple
  160. color: rgb(153,51,255)
  161. .ql-font-serif
  162. font-family: Georgia, Times New Roman, serif
  163. .ql-font-monospace
  164. font-family: Monaco, Courier New, monospace
  165. .ql-size-small
  166. font-size: 0.75em
  167. .ql-size-large
  168. font-size: 1.5em
  169. .ql-size-huge
  170. font-size: 2.5em
  171. .ql-direction-rtl
  172. direction: rtl
  173. text-align: inherit
  174. .ql-align-center
  175. text-align: center
  176. .ql-align-justify
  177. text-align: justify
  178. .ql-align-right
  179. text-align: right
  180. .ql-ui
  181. position: absolute
  182. .ql-editor.ql-blank::before
  183. color: rgba(0,0,0,0.6)
  184. content: attr(data-placeholder)
  185. font-style: italic
  186. left: 15px
  187. pointer-events: none
  188. position: absolute
  189. right: 15px