content.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470
  1. /*
  2. * CKEditor 5 (v34.0.0) content styles.
  3. * Generated on Mon, 16 May 2022 10:22:16 GMT.
  4. * For more information, check out https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/content-styles.html
  5. */
  6. :root {
  7. --ck-color-image-caption-background: hsl(0, 0%, 97%);
  8. --ck-color-image-caption-text: hsl(0, 0%, 20%);
  9. --ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
  10. --ck-color-mention-text: hsl(341, 100%, 30%);
  11. --ck-color-table-caption-background: hsl(0, 0%, 97%);
  12. --ck-color-table-caption-text: hsl(0, 0%, 20%);
  13. --ck-highlight-marker-blue: hsl(201, 97%, 72%);
  14. --ck-highlight-marker-green: hsl(120, 93%, 68%);
  15. --ck-highlight-marker-pink: hsl(345, 96%, 73%);
  16. --ck-highlight-marker-yellow: hsl(60, 97%, 73%);
  17. --ck-highlight-pen-green: hsl(112, 100%, 27%);
  18. --ck-highlight-pen-red: hsl(0, 85%, 49%);
  19. --ck-image-style-spacing: 1.5em;
  20. --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
  21. --ck-todo-list-checkmark-size: 16px;
  22. }
  23. /* ckeditor5-basic-styles/theme/code.css */
  24. .ck-content code {
  25. background-color: hsla(0, 0%, 78%, 0.3);
  26. padding: .15em;
  27. border-radius: 2px;
  28. }
  29. /* ckeditor5-block-quote/theme/blockquote.css */
  30. .ck-content blockquote {
  31. overflow: hidden;
  32. padding-right: 1.5em;
  33. padding-left: 1.5em;
  34. margin-left: 0;
  35. margin-right: 0;
  36. font-style: italic;
  37. border-left: solid 5px hsl(0, 0%, 80%);
  38. }
  39. /* ckeditor5-block-quote/theme/blockquote.css */
  40. .ck-content[dir="rtl"] blockquote {
  41. border-left: 0;
  42. border-right: solid 5px hsl(0, 0%, 80%);
  43. }
  44. /* ckeditor5-font/theme/fontsize.css */
  45. .ck-content .text-tiny {
  46. font-size: .7em;
  47. }
  48. /* ckeditor5-font/theme/fontsize.css */
  49. .ck-content .text-small {
  50. font-size: .85em;
  51. }
  52. /* ckeditor5-font/theme/fontsize.css */
  53. .ck-content .text-big {
  54. font-size: 1.4em;
  55. }
  56. /* ckeditor5-font/theme/fontsize.css */
  57. .ck-content .text-huge {
  58. font-size: 1.8em;
  59. }
  60. /* ckeditor5-highlight/theme/highlight.css */
  61. .ck-content .marker-yellow {
  62. background-color: var(--ck-highlight-marker-yellow);
  63. }
  64. /* ckeditor5-highlight/theme/highlight.css */
  65. .ck-content .marker-green {
  66. background-color: var(--ck-highlight-marker-green);
  67. }
  68. /* ckeditor5-highlight/theme/highlight.css */
  69. .ck-content .marker-pink {
  70. background-color: var(--ck-highlight-marker-pink);
  71. }
  72. /* ckeditor5-highlight/theme/highlight.css */
  73. .ck-content .marker-blue {
  74. background-color: var(--ck-highlight-marker-blue);
  75. }
  76. /* ckeditor5-highlight/theme/highlight.css */
  77. .ck-content .pen-red {
  78. color: var(--ck-highlight-pen-red);
  79. background-color: transparent;
  80. }
  81. /* ckeditor5-highlight/theme/highlight.css */
  82. .ck-content .pen-green {
  83. color: var(--ck-highlight-pen-green);
  84. background-color: transparent;
  85. }
  86. /* ckeditor5-image/theme/imageresize.css */
  87. .ck-content .image.image_resized {
  88. max-width: 100%;
  89. display: block;
  90. box-sizing: border-box;
  91. }
  92. /* ckeditor5-image/theme/imageresize.css */
  93. .ck-content .image.image_resized img {
  94. width: 100%;
  95. }
  96. /* ckeditor5-image/theme/imageresize.css */
  97. .ck-content .image.image_resized > figcaption {
  98. display: block;
  99. }
  100. /* ckeditor5-image/theme/imagestyle.css */
  101. .ck-content .image-style-block-align-left,
  102. .ck-content .image-style-block-align-right {
  103. max-width: calc(100% - var(--ck-image-style-spacing));
  104. }
  105. /* ckeditor5-image/theme/imagestyle.css */
  106. .ck-content .image-style-align-left,
  107. .ck-content .image-style-align-right {
  108. clear: none;
  109. }
  110. /* ckeditor5-image/theme/imagestyle.css */
  111. .ck-content .image-style-side {
  112. float: right;
  113. margin-left: var(--ck-image-style-spacing);
  114. max-width: 50%;
  115. }
  116. /* ckeditor5-image/theme/imagestyle.css */
  117. .ck-content .image-style-align-left {
  118. float: left;
  119. margin-right: var(--ck-image-style-spacing);
  120. }
  121. /* ckeditor5-image/theme/imagestyle.css */
  122. .ck-content .image-style-align-center {
  123. margin-left: auto;
  124. margin-right: auto;
  125. }
  126. /* ckeditor5-image/theme/imagestyle.css */
  127. .ck-content .image-style-align-right {
  128. float: right;
  129. margin-left: var(--ck-image-style-spacing);
  130. }
  131. /* ckeditor5-image/theme/imagestyle.css */
  132. .ck-content .image-style-block-align-right {
  133. margin-right: 0;
  134. margin-left: auto;
  135. }
  136. /* ckeditor5-image/theme/imagestyle.css */
  137. .ck-content .image-style-block-align-left {
  138. margin-left: 0;
  139. margin-right: auto;
  140. }
  141. /* ckeditor5-image/theme/imagestyle.css */
  142. .ck-content p + .image-style-align-left,
  143. .ck-content p + .image-style-align-right,
  144. .ck-content p + .image-style-side {
  145. margin-top: 0;
  146. }
  147. /* ckeditor5-image/theme/imagestyle.css */
  148. .ck-content .image-inline.image-style-align-left,
  149. .ck-content .image-inline.image-style-align-right {
  150. margin-top: var(--ck-inline-image-style-spacing);
  151. margin-bottom: var(--ck-inline-image-style-spacing);
  152. }
  153. /* ckeditor5-image/theme/imagestyle.css */
  154. .ck-content .image-inline.image-style-align-left {
  155. margin-right: var(--ck-inline-image-style-spacing);
  156. }
  157. /* ckeditor5-image/theme/imagestyle.css */
  158. .ck-content .image-inline.image-style-align-right {
  159. margin-left: var(--ck-inline-image-style-spacing);
  160. }
  161. /* ckeditor5-image/theme/imagecaption.css */
  162. .ck-content .image > figcaption {
  163. display: table-caption;
  164. caption-side: bottom;
  165. word-break: break-word;
  166. color: var(--ck-color-image-caption-text);
  167. background-color: var(--ck-color-image-caption-background);
  168. padding: .6em;
  169. font-size: .75em;
  170. outline-offset: -1px;
  171. }
  172. /* ckeditor5-image/theme/image.css */
  173. .ck-content .image {
  174. display: table;
  175. clear: both;
  176. text-align: center;
  177. margin: 0.9em auto;
  178. min-width: 50px;
  179. }
  180. /* ckeditor5-image/theme/image.css */
  181. .ck-content .image img {
  182. display: block;
  183. margin: 0 auto;
  184. max-width: 100%;
  185. min-width: 100%;
  186. }
  187. /* ckeditor5-image/theme/image.css */
  188. .ck-content .image-inline {
  189. /*
  190. * Normally, the .image-inline would have "display: inline-block" and "img { width: 100% }" (to follow the wrapper while resizing).;
  191. * Unfortunately, together with "srcset", it gets automatically stretched up to the width of the editing root.
  192. * This strange behavior does not happen with inline-flex.
  193. */
  194. display: inline-flex;
  195. max-width: 100%;
  196. align-items: flex-start;
  197. }
  198. /* ckeditor5-image/theme/image.css */
  199. .ck-content .image-inline picture {
  200. display: flex;
  201. }
  202. /* ckeditor5-image/theme/image.css */
  203. .ck-content .image-inline picture,
  204. .ck-content .image-inline img {
  205. flex-grow: 1;
  206. flex-shrink: 1;
  207. max-width: 100%;
  208. }
  209. /* ckeditor5-list/theme/todolist.css */
  210. .ck-content .todo-list {
  211. list-style: none;
  212. }
  213. /* ckeditor5-list/theme/todolist.css */
  214. .ck-content .todo-list li {
  215. margin-bottom: 5px;
  216. }
  217. /* ckeditor5-list/theme/todolist.css */
  218. .ck-content .todo-list li .todo-list {
  219. margin-top: 5px;
  220. }
  221. /* ckeditor5-list/theme/todolist.css */
  222. .ck-content .todo-list .todo-list__label > input {
  223. -webkit-appearance: none;
  224. display: inline-block;
  225. position: relative;
  226. width: var(--ck-todo-list-checkmark-size);
  227. height: var(--ck-todo-list-checkmark-size);
  228. vertical-align: middle;
  229. border: 0;
  230. left: -25px;
  231. margin-right: -15px;
  232. right: 0;
  233. margin-left: 0;
  234. }
  235. /* ckeditor5-list/theme/todolist.css */
  236. .ck-content .todo-list .todo-list__label > input::before {
  237. display: block;
  238. position: absolute;
  239. box-sizing: border-box;
  240. content: '';
  241. width: 100%;
  242. height: 100%;
  243. border: 1px solid hsl(0, 0%, 20%);
  244. border-radius: 2px;
  245. transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background, 250ms ease-in-out border;
  246. }
  247. /* ckeditor5-list/theme/todolist.css */
  248. .ck-content .todo-list .todo-list__label > input::after {
  249. display: block;
  250. position: absolute;
  251. box-sizing: content-box;
  252. pointer-events: none;
  253. content: '';
  254. left: calc(var(--ck-todo-list-checkmark-size) / 3);
  255. top: calc(var(--ck-todo-list-checkmark-size) / 5.3);
  256. width: calc(var(--ck-todo-list-checkmark-size) / 5.3);
  257. height: calc(var(--ck-todo-list-checkmark-size) / 2.6);
  258. border-style: solid;
  259. border-color: transparent;
  260. border-width: 0 calc(var(--ck-todo-list-checkmark-size) / 8) calc(var(--ck-todo-list-checkmark-size) / 8) 0;
  261. transform: rotate(45deg);
  262. }
  263. /* ckeditor5-list/theme/todolist.css */
  264. .ck-content .todo-list .todo-list__label > input[checked]::before {
  265. background: hsl(126, 64%, 41%);
  266. border-color: hsl(126, 64%, 41%);
  267. }
  268. /* ckeditor5-list/theme/todolist.css */
  269. .ck-content .todo-list .todo-list__label > input[checked]::after {
  270. border-color: hsl(0, 0%, 100%);
  271. }
  272. /* ckeditor5-list/theme/todolist.css */
  273. .ck-content .todo-list .todo-list__label .todo-list__label__description {
  274. vertical-align: middle;
  275. }
  276. /* ckeditor5-media-embed/theme/mediaembed.css */
  277. .ck-content .media {
  278. clear: both;
  279. margin: 0.9em 0;
  280. display: block;
  281. min-width: 15em;
  282. }
  283. /* ckeditor5-language/theme/language.css */
  284. .ck-content span[lang] {
  285. font-style: italic;
  286. }
  287. /* ckeditor5-page-break/theme/pagebreak.css */
  288. .ck-content .page-break {
  289. position: relative;
  290. clear: both;
  291. padding: 5px 0;
  292. display: flex;
  293. align-items: center;
  294. justify-content: center;
  295. }
  296. /* ckeditor5-page-break/theme/pagebreak.css */
  297. .ck-content .page-break::after {
  298. content: '';
  299. position: absolute;
  300. border-bottom: 2px dashed hsl(0, 0%, 77%);
  301. width: 100%;
  302. }
  303. /* ckeditor5-page-break/theme/pagebreak.css */
  304. .ck-content .page-break__label {
  305. position: relative;
  306. z-index: 1;
  307. padding: .3em .6em;
  308. display: block;
  309. text-transform: uppercase;
  310. border: 1px solid hsl(0, 0%, 77%);
  311. border-radius: 2px;
  312. font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
  313. font-size: 0.75em;
  314. font-weight: bold;
  315. color: hsl(0, 0%, 20%);
  316. background: hsl(0, 0%, 100%);
  317. box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
  318. -webkit-user-select: none;
  319. -moz-user-select: none;
  320. -ms-user-select: none;
  321. user-select: none;
  322. }
  323. /* ckeditor5-table/theme/table.css */
  324. .ck-content .table {
  325. margin: 0.9em auto;
  326. display: table;
  327. }
  328. /* ckeditor5-table/theme/table.css */
  329. .ck-content .table table {
  330. border-collapse: collapse;
  331. border-spacing: 0;
  332. width: 100%;
  333. height: 100%;
  334. border: 1px double hsl(0, 0%, 70%);
  335. }
  336. /* ckeditor5-table/theme/table.css */
  337. .ck-content .table table td,
  338. .ck-content .table table th {
  339. min-width: 2em;
  340. padding: .4em;
  341. border: 1px solid hsl(0, 0%, 75%);
  342. }
  343. /* ckeditor5-table/theme/table.css */
  344. .ck-content .table table th {
  345. font-weight: bold;
  346. background: hsla(0, 0%, 0%, 5%);
  347. }
  348. /* ckeditor5-table/theme/table.css */
  349. .ck-content[dir="rtl"] .table th {
  350. text-align: right;
  351. }
  352. /* ckeditor5-table/theme/table.css */
  353. .ck-content[dir="ltr"] .table th {
  354. text-align: left;
  355. }
  356. /* ckeditor5-table/theme/tablecaption.css */
  357. .ck-content .table > figcaption {
  358. display: table-caption;
  359. caption-side: top;
  360. word-break: break-word;
  361. text-align: center;
  362. color: var(--ck-color-table-caption-text);
  363. background-color: var(--ck-color-table-caption-background);
  364. padding: .6em;
  365. font-size: .75em;
  366. outline-offset: -1px;
  367. }
  368. /* ckeditor5-code-block/theme/codeblock.css */
  369. .ck-content pre {
  370. padding: 1em;
  371. color: hsl(0, 0%, 20.8%);
  372. background: hsla(0, 0%, 78%, 0.3);
  373. border: 1px solid hsl(0, 0%, 77%);
  374. border-radius: 2px;
  375. text-align: left;
  376. direction: ltr;
  377. tab-size: 4;
  378. white-space: pre-wrap;
  379. font-style: normal;
  380. min-width: 200px;
  381. }
  382. /* ckeditor5-code-block/theme/codeblock.css */
  383. .ck-content pre code {
  384. background: unset;
  385. padding: 0;
  386. border-radius: 0;
  387. }
  388. /* ckeditor5-horizontal-line/theme/horizontalline.css */
  389. .ck-content hr {
  390. margin: 15px 0;
  391. height: 4px;
  392. background: hsl(0, 0%, 87%);
  393. border: 0;
  394. }
  395. /* ckeditor5-mention/theme/mention.css */
  396. .ck-content .mention {
  397. background: var(--ck-color-mention-background);
  398. color: var(--ck-color-mention-text);
  399. }
  400. @media print {
  401. /* ckeditor5-page-break/theme/pagebreak.css */
  402. .ck-content .page-break {
  403. padding: 0;
  404. }
  405. /* ckeditor5-page-break/theme/pagebreak.css */
  406. .ck-content .page-break::after {
  407. display: none;
  408. }
  409. }