content-styles.css 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333
  1. /*
  2. * CKEditor 5 (v15.0.0) content styles.
  3. * Generated on Wed, 27 Nov 2019 13:26:13 GMT.
  4. * For more information, check out https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/content-styles.html
  5. */
  6. :root {
  7. --ck-highlight-marker-blue: #72cdfd;
  8. --ck-highlight-marker-green: #63f963;
  9. --ck-highlight-marker-pink: #fc7999;
  10. --ck-highlight-marker-yellow: #fdfd77;
  11. --ck-highlight-pen-green: #118800;
  12. --ck-highlight-pen-red: #e91313;
  13. --ck-image-style-spacing: 1.5em;
  14. --ck-todo-list-checkmark-size: 16px;
  15. }
  16. /* ckeditor5-list/theme/todolist.css */
  17. .ck-content .todo-list {
  18. list-style: none;
  19. }
  20. /* ckeditor5-list/theme/todolist.css */
  21. .ck-content .todo-list li {
  22. margin-bottom: 5px;
  23. }
  24. /* ckeditor5-list/theme/todolist.css */
  25. .ck-content .todo-list li .todo-list {
  26. margin-top: 5px;
  27. }
  28. /* ckeditor5-list/theme/todolist.css */
  29. .ck-content .todo-list .todo-list__label > input {
  30. -webkit-appearance: none;
  31. display: inline-block;
  32. position: relative;
  33. width: var(--ck-todo-list-checkmark-size);
  34. height: var(--ck-todo-list-checkmark-size);
  35. vertical-align: middle;
  36. border: 0;
  37. left: -25px;
  38. margin-right: -15px;
  39. right: 0;
  40. margin-left: 0;
  41. }
  42. /* ckeditor5-list/theme/todolist.css */
  43. .ck-content .todo-list .todo-list__label > input::before {
  44. display: block;
  45. position: absolute;
  46. box-sizing: border-box;
  47. content: '';
  48. width: 100%;
  49. height: 100%;
  50. border: 1px solid hsl(0, 0%, 20%);
  51. border-radius: 2px;
  52. transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background, 250ms ease-in-out border;
  53. }
  54. /* ckeditor5-list/theme/todolist.css */
  55. .ck-content .todo-list .todo-list__label > input::after {
  56. display: block;
  57. position: absolute;
  58. box-sizing: content-box;
  59. pointer-events: none;
  60. content: '';
  61. left: calc( var(--ck-todo-list-checkmark-size) / 3 );
  62. top: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
  63. width: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
  64. height: calc( var(--ck-todo-list-checkmark-size) / 2.6 );
  65. border-style: solid;
  66. border-color: transparent;
  67. border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0;
  68. transform: rotate(45deg);
  69. }
  70. /* ckeditor5-list/theme/todolist.css */
  71. .ck-content .todo-list .todo-list__label > input[checked]::before {
  72. background: hsl(126, 64%, 41%);
  73. border-color: hsl(126, 64%, 41%);
  74. }
  75. /* ckeditor5-list/theme/todolist.css */
  76. .ck-content .todo-list .todo-list__label > input[checked]::after {
  77. border-color: hsl(0, 0%, 100%);
  78. }
  79. /* ckeditor5-list/theme/todolist.css */
  80. .ck-content .todo-list .todo-list__label .todo-list__label__description {
  81. vertical-align: middle;
  82. }
  83. /* ckeditor5-image/theme/image.css */
  84. .ck-content .image {
  85. display: table;
  86. clear: both;
  87. text-align: center;
  88. margin: 1em auto;
  89. }
  90. /* ckeditor5-image/theme/image.css */
  91. .ck-content .image > img {
  92. display: block;
  93. margin: 0 auto;
  94. max-width: 100%;
  95. min-width: 50px;
  96. }
  97. /* ckeditor5-block-quote/theme/blockquote.css */
  98. .ck-content blockquote {
  99. overflow: hidden;
  100. padding-right: 1.5em;
  101. padding-left: 1.5em;
  102. margin-left: 0;
  103. margin-right: 0;
  104. font-style: italic;
  105. border-left: solid 5px hsl(0, 0%, 80%);
  106. }
  107. /* ckeditor5-block-quote/theme/blockquote.css */
  108. .ck-content[dir="rtl"] blockquote {
  109. border-left: 0;
  110. border-right: solid 5px hsl(0, 0%, 80%);
  111. }
  112. /* ckeditor5-image/theme/imageresize.css */
  113. .ck-content .image.image_resized {
  114. max-width: 100%;
  115. display: block;
  116. box-sizing: border-box;
  117. }
  118. /* ckeditor5-image/theme/imageresize.css */
  119. .ck-content .image.image_resized img {
  120. width: 100%;
  121. }
  122. /* ckeditor5-image/theme/imageresize.css */
  123. .ck-content .image.image_resized > figcaption {
  124. display: block;
  125. }
  126. /* ckeditor5-image/theme/imagestyle.css */
  127. .ck-content .image-style-side,
  128. .ck-content .image-style-align-left,
  129. .ck-content .image-style-align-center,
  130. .ck-content .image-style-align-right {
  131. max-width: 50%;
  132. }
  133. /* ckeditor5-image/theme/imagestyle.css */
  134. .ck-content .image-style-side {
  135. float: right;
  136. margin-left: var(--ck-image-style-spacing);
  137. }
  138. /* ckeditor5-image/theme/imagestyle.css */
  139. .ck-content .image-style-align-left {
  140. float: left;
  141. margin-right: var(--ck-image-style-spacing);
  142. }
  143. /* ckeditor5-image/theme/imagestyle.css */
  144. .ck-content .image-style-align-center {
  145. margin-left: auto;
  146. margin-right: auto;
  147. }
  148. /* ckeditor5-image/theme/imagestyle.css */
  149. .ck-content .image-style-align-right {
  150. float: right;
  151. margin-left: var(--ck-image-style-spacing);
  152. }
  153. /* ckeditor5-media-embed/theme/mediaembed.css */
  154. .ck-content .media {
  155. clear: both;
  156. margin: 1em 0;
  157. display: block;
  158. min-width: 15em;
  159. }
  160. /* ckeditor5-table/theme/table.css */
  161. .ck-content .table {
  162. margin: 1em auto;
  163. display: table;
  164. }
  165. /* ckeditor5-table/theme/table.css */
  166. .ck-content .table table {
  167. border-collapse: collapse;
  168. border-spacing: 0;
  169. border: 1px double hsl(0, 0%, 70%);
  170. }
  171. /* ckeditor5-table/theme/table.css */
  172. .ck-content .table table td,
  173. .ck-content .table table th {
  174. min-width: 2em;
  175. padding: .4em;
  176. border-color: hsl(0, 0%, 85%);
  177. }
  178. /* ckeditor5-table/theme/table.css */
  179. .ck-content .table table th {
  180. font-weight: bold;
  181. background: hsl(0, 0%, 98%);
  182. }
  183. /* ckeditor5-highlight/theme/highlight.css */
  184. .ck-content .marker-yellow {
  185. background-color: var(--ck-highlight-marker-yellow);
  186. }
  187. /* ckeditor5-highlight/theme/highlight.css */
  188. .ck-content .marker-green {
  189. background-color: var(--ck-highlight-marker-green);
  190. }
  191. /* ckeditor5-highlight/theme/highlight.css */
  192. .ck-content .marker-pink {
  193. background-color: var(--ck-highlight-marker-pink);
  194. }
  195. /* ckeditor5-highlight/theme/highlight.css */
  196. .ck-content .marker-blue {
  197. background-color: var(--ck-highlight-marker-blue);
  198. }
  199. /* ckeditor5-highlight/theme/highlight.css */
  200. .ck-content .pen-red {
  201. color: var(--ck-highlight-pen-red);
  202. background-color: transparent;
  203. }
  204. /* ckeditor5-highlight/theme/highlight.css */
  205. .ck-content .pen-green {
  206. color: var(--ck-highlight-pen-green);
  207. background-color: transparent;
  208. }
  209. /* ckeditor5-page-break/theme/pagebreak.css */
  210. .ck-content .page-break {
  211. position: relative;
  212. clear: both;
  213. padding: 5px 0;
  214. display: flex;
  215. align-items: center;
  216. justify-content: center;
  217. }
  218. /* ckeditor5-page-break/theme/pagebreak.css */
  219. .ck-content .page-break::after {
  220. content: '';
  221. position: absolute;
  222. border-bottom: 2px dashed hsl(0, 0%, 77%);
  223. width: 100%;
  224. }
  225. /* ckeditor5-page-break/theme/pagebreak.css */
  226. .ck-content .page-break__label {
  227. position: relative;
  228. z-index: 1;
  229. padding: .3em .6em;
  230. display: block;
  231. text-transform: uppercase;
  232. border: 1px solid hsl(0, 0%, 77%);
  233. border-radius: 2px;
  234. font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
  235. font-size: 0.75em;
  236. font-weight: bold;
  237. color: hsl(0, 0%, 20%);
  238. background: #fff;
  239. box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
  240. -webkit-user-select: none;
  241. -moz-user-select: none;
  242. -ms-user-select: none;
  243. user-select: none;
  244. }
  245. /* ckeditor5-basic-styles/theme/code.css */
  246. .ck-content code {
  247. background-color: hsla(0, 0%, 78%, 0.3);
  248. padding: .15em;
  249. border-radius: 2px;
  250. }
  251. /* ckeditor5-image/theme/imagecaption.css */
  252. .ck-content .image > figcaption {
  253. display: table-caption;
  254. caption-side: bottom;
  255. word-break: break-word;
  256. color: hsl(0, 0%, 20%);
  257. background-color: hsl(0, 0%, 97%);
  258. padding: .6em;
  259. font-size: .75em;
  260. outline-offset: -1px;
  261. }
  262. /* ckeditor5-horizontal-line/theme/horizontalline.css */
  263. .ck-content hr {
  264. border-width: 1px 0 0;
  265. border-style: solid;
  266. border-color: hsl(0, 0%, 37%);
  267. margin: 0;
  268. }
  269. /* ckeditor5-code-block/theme/codeblock.css */
  270. .ck-content pre {
  271. padding: 1em;
  272. color: #353535;
  273. border: 1px solid hsl(0, 0%, 77%);
  274. border-radius: 2px;
  275. text-align: left;
  276. direction: ltr;
  277. tab-size: 4;
  278. white-space: pre-wrap;
  279. font-style: normal;
  280. min-width: 200px;
  281. }
  282. /* ckeditor5-code-block/theme/codeblock.css */
  283. .ck-content pre code {
  284. background: unset;
  285. padding: 0;
  286. border-radius: 0;
  287. }
  288. @media print {
  289. /* ckeditor5-page-break/theme/pagebreak.css */
  290. .ck-content .page-break {
  291. padding: 0;
  292. }
  293. /* ckeditor5-page-break/theme/pagebreak.css */
  294. .ck-content .page-break::after {
  295. display: none;
  296. }
  297. }
  298. .ck-content p {
  299. line-height: 1.8;
  300. color: rgba(27, 27, 27, 0.84);
  301. }
  302. .ck-content ul li {
  303. line-height: 1.8;
  304. color: rgba(27, 27, 27, 0.84);
  305. }
  306. .ck-content a {
  307. color: #20a0ff;
  308. }
  309. .marker-yellow{
  310. color: red;
  311. }
  312. .marker-green{
  313. color: #ff9418;
  314. }
  315. .marker-pink{
  316. color: #c25aff;
  317. }
  318. .marker-blue{
  319. color: #91746e;
  320. }
  321. .pen-red{
  322. background-color: #d2d2d2fa !important;
  323. }
  324. .pen-green {
  325. background-color: #b1a9a996 !important;
  326. }