editor.css 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546
  1. /*
  2. * CKEditor 5 (v40.0.0) content styles.
  3. * Generated on Thu, 05 Oct 2023 11:53:32 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-selector-caption-background: hsl(0, 0%, 97%);
  12. --ck-color-selector-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. /* @ckeditor/ckeditor5-table/theme/tablecolumnresize.css */
  24. .ck-content .table .ck-table-resized {
  25. table-layout: fixed;
  26. }
  27. /* @ckeditor/ckeditor5-table/theme/tablecolumnresize.css */
  28. .ck-content .table table {
  29. overflow: hidden;
  30. }
  31. /* @ckeditor/ckeditor5-table/theme/tablecolumnresize.css */
  32. .ck-content .table td,
  33. .ck-content .table th {
  34. overflow-wrap: break-word;
  35. position: relative;
  36. }
  37. /* @ckeditor/ckeditor5-table/theme/tablecaption.css */
  38. .ck-content .table > figcaption {
  39. display: table-caption;
  40. caption-side: top;
  41. word-break: break-word;
  42. text-align: center;
  43. color: var(--ck-color-selector-caption-text);
  44. background-color: var(--ck-color-selector-caption-background);
  45. padding: .6em;
  46. font-size: .75em;
  47. outline-offset: -1px;
  48. }
  49. /* @ckeditor/ckeditor5-table/theme/table.css */
  50. .ck-content .table {
  51. margin: 0.9em auto;
  52. display: table;
  53. }
  54. /* @ckeditor/ckeditor5-table/theme/table.css */
  55. .ck-content .table table {
  56. border-collapse: collapse;
  57. border-spacing: 0;
  58. width: 100%;
  59. height: 100%;
  60. border: 1px double hsl(0, 0%, 70%);
  61. }
  62. /* @ckeditor/ckeditor5-table/theme/table.css */
  63. .ck-content .table table td,
  64. .ck-content .table table th {
  65. min-width: 2em;
  66. padding: .4em;
  67. border: 1px solid hsl(0, 0%, 75%);
  68. }
  69. /* @ckeditor/ckeditor5-table/theme/table.css */
  70. .ck-content .table table th {
  71. font-weight: bold;
  72. background: hsla(0, 0%, 0%, 5%);
  73. }
  74. /* @ckeditor/ckeditor5-table/theme/table.css */
  75. .ck-content[dir="rtl"] .table th {
  76. text-align: right;
  77. }
  78. /* @ckeditor/ckeditor5-table/theme/table.css */
  79. .ck-content[dir="ltr"] .table th {
  80. text-align: left;
  81. }
  82. /* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
  83. .ck-content .page-break {
  84. position: relative;
  85. clear: both;
  86. padding: 5px 0;
  87. display: flex;
  88. align-items: center;
  89. justify-content: center;
  90. }
  91. /* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
  92. .ck-content .page-break::after {
  93. content: '';
  94. position: absolute;
  95. border-bottom: 2px dashed hsl(0, 0%, 77%);
  96. width: 100%;
  97. }
  98. /* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
  99. .ck-content .page-break__label {
  100. position: relative;
  101. z-index: 1;
  102. padding: .3em .6em;
  103. display: block;
  104. text-transform: uppercase;
  105. border: 1px solid hsl(0, 0%, 77%);
  106. border-radius: 2px;
  107. font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
  108. font-size: 0.75em;
  109. font-weight: bold;
  110. color: hsl(0, 0%, 20%);
  111. background: hsl(0, 0%, 100%);
  112. box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
  113. -webkit-user-select: none;
  114. -moz-user-select: none;
  115. -ms-user-select: none;
  116. user-select: none;
  117. }
  118. /* @ckeditor/ckeditor5-media-embed/theme/mediaembed.css */
  119. .ck-content .media {
  120. clear: both;
  121. margin: 0.9em 0;
  122. display: block;
  123. min-width: 15em;
  124. }
  125. /* @ckeditor/ckeditor5-list/theme/todolist.css */
  126. .ck-content .todo-list {
  127. list-style: none;
  128. }
  129. /* @ckeditor/ckeditor5-list/theme/todolist.css */
  130. .ck-content .todo-list li {
  131. position: relative;
  132. margin-bottom: 5px;
  133. }
  134. /* @ckeditor/ckeditor5-list/theme/todolist.css */
  135. .ck-content .todo-list li .todo-list {
  136. margin-top: 5px;
  137. }
  138. /* @ckeditor/ckeditor5-list/theme/todolist.css */
  139. .ck-content .todo-list .todo-list__label > input {
  140. -webkit-appearance: none;
  141. display: inline-block;
  142. position: relative;
  143. width: var(--ck-todo-list-checkmark-size);
  144. height: var(--ck-todo-list-checkmark-size);
  145. vertical-align: middle;
  146. border: 0;
  147. left: -25px;
  148. margin-right: -15px;
  149. right: 0;
  150. margin-left: 0;
  151. }
  152. /* @ckeditor/ckeditor5-list/theme/todolist.css */
  153. .ck-content[dir=rtl] .todo-list .todo-list__label > input {
  154. left: 0;
  155. margin-right: 0;
  156. right: -25px;
  157. margin-left: -15px;
  158. }
  159. /* @ckeditor/ckeditor5-list/theme/todolist.css */
  160. .ck-content .todo-list .todo-list__label > input::before {
  161. display: block;
  162. position: absolute;
  163. box-sizing: border-box;
  164. content: '';
  165. width: 100%;
  166. height: 100%;
  167. border: 1px solid hsl(0, 0%, 20%);
  168. border-radius: 2px;
  169. transition: 250ms ease-in-out box-shadow;
  170. }
  171. /* @ckeditor/ckeditor5-list/theme/todolist.css */
  172. .ck-content .todo-list .todo-list__label > input::after {
  173. display: block;
  174. position: absolute;
  175. box-sizing: content-box;
  176. pointer-events: none;
  177. content: '';
  178. left: calc( var(--ck-todo-list-checkmark-size) / 3 );
  179. top: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
  180. width: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
  181. height: calc( var(--ck-todo-list-checkmark-size) / 2.6 );
  182. border-style: solid;
  183. border-color: transparent;
  184. border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0;
  185. transform: rotate(45deg);
  186. }
  187. /* @ckeditor/ckeditor5-list/theme/todolist.css */
  188. .ck-content .todo-list .todo-list__label > input[checked]::before {
  189. background: hsl(126, 64%, 41%);
  190. border-color: hsl(126, 64%, 41%);
  191. }
  192. /* @ckeditor/ckeditor5-list/theme/todolist.css */
  193. .ck-content .todo-list .todo-list__label > input[checked]::after {
  194. border-color: hsl(0, 0%, 100%);
  195. }
  196. /* @ckeditor/ckeditor5-list/theme/todolist.css */
  197. .ck-content .todo-list .todo-list__label .todo-list__label__description {
  198. vertical-align: middle;
  199. }
  200. /* @ckeditor/ckeditor5-list/theme/todolist.css */
  201. .ck-content .todo-list .todo-list__label.todo-list__label_without-description input[type=checkbox] {
  202. position: absolute;
  203. }
  204. /* @ckeditor/ckeditor5-list/theme/todolist.css */
  205. .ck-editor__editable.ck-content .todo-list .todo-list__label > input,
  206. .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input {
  207. cursor: pointer;
  208. }
  209. /* @ckeditor/ckeditor5-list/theme/todolist.css */
  210. .ck-editor__editable.ck-content .todo-list .todo-list__label > input:hover::before, .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input:hover::before {
  211. box-shadow: 0 0 0 5px hsla(0, 0%, 0%, 0.1);
  212. }
  213. /* @ckeditor/ckeditor5-list/theme/todolist.css */
  214. .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input {
  215. -webkit-appearance: none;
  216. display: inline-block;
  217. position: relative;
  218. width: var(--ck-todo-list-checkmark-size);
  219. height: var(--ck-todo-list-checkmark-size);
  220. vertical-align: middle;
  221. border: 0;
  222. left: -25px;
  223. margin-right: -15px;
  224. right: 0;
  225. margin-left: 0;
  226. }
  227. /* @ckeditor/ckeditor5-list/theme/todolist.css */
  228. .ck-editor__editable.ck-content[dir=rtl] .todo-list .todo-list__label > span[contenteditable=false] > input {
  229. left: 0;
  230. margin-right: 0;
  231. right: -25px;
  232. margin-left: -15px;
  233. }
  234. /* @ckeditor/ckeditor5-list/theme/todolist.css */
  235. .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input::before {
  236. display: block;
  237. position: absolute;
  238. box-sizing: border-box;
  239. content: '';
  240. width: 100%;
  241. height: 100%;
  242. border: 1px solid hsl(0, 0%, 20%);
  243. border-radius: 2px;
  244. transition: 250ms ease-in-out box-shadow;
  245. }
  246. /* @ckeditor/ckeditor5-list/theme/todolist.css */
  247. .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input::after {
  248. display: block;
  249. position: absolute;
  250. box-sizing: content-box;
  251. pointer-events: none;
  252. content: '';
  253. left: calc( var(--ck-todo-list-checkmark-size) / 3 );
  254. top: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
  255. width: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
  256. height: calc( var(--ck-todo-list-checkmark-size) / 2.6 );
  257. border-style: solid;
  258. border-color: transparent;
  259. border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0;
  260. transform: rotate(45deg);
  261. }
  262. /* @ckeditor/ckeditor5-list/theme/todolist.css */
  263. .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input[checked]::before {
  264. background: hsl(126, 64%, 41%);
  265. border-color: hsl(126, 64%, 41%);
  266. }
  267. /* @ckeditor/ckeditor5-list/theme/todolist.css */
  268. .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input[checked]::after {
  269. border-color: hsl(0, 0%, 100%);
  270. }
  271. /* @ckeditor/ckeditor5-list/theme/todolist.css */
  272. .ck-editor__editable.ck-content .todo-list .todo-list__label.todo-list__label_without-description input[type=checkbox] {
  273. position: absolute;
  274. }
  275. /* @ckeditor/ckeditor5-image/theme/image.css */
  276. .ck-content .image {
  277. display: table;
  278. clear: both;
  279. text-align: center;
  280. margin: 0.9em auto;
  281. min-width: 50px;
  282. }
  283. /* @ckeditor/ckeditor5-image/theme/image.css */
  284. .ck-content .image img {
  285. display: block;
  286. margin: 0 auto;
  287. max-width: 100%;
  288. min-width: 100%;
  289. height: auto;
  290. }
  291. /* @ckeditor/ckeditor5-image/theme/image.css */
  292. .ck-content .image-inline {
  293. /*
  294. * Normally, the .image-inline would have "display: inline-block" and "img { width: 100% }" (to follow the wrapper while resizing).;
  295. * Unfortunately, together with "srcset", it gets automatically stretched up to the width of the editing root.
  296. * This strange behavior does not happen with inline-flex.
  297. */
  298. display: inline-flex;
  299. max-width: 100%;
  300. align-items: flex-start;
  301. }
  302. /* @ckeditor/ckeditor5-image/theme/image.css */
  303. .ck-content .image-inline picture {
  304. display: flex;
  305. }
  306. /* @ckeditor/ckeditor5-image/theme/image.css */
  307. .ck-content .image-inline picture,
  308. .ck-content .image-inline img {
  309. flex-grow: 1;
  310. flex-shrink: 1;
  311. max-width: 100%;
  312. }
  313. /* @ckeditor/ckeditor5-image/theme/imagecaption.css */
  314. .ck-content .image > figcaption {
  315. display: table-caption;
  316. caption-side: bottom;
  317. word-break: break-word;
  318. color: var(--ck-color-image-caption-text);
  319. background-color: var(--ck-color-image-caption-background);
  320. padding: .6em;
  321. font-size: .75em;
  322. outline-offset: -1px;
  323. }
  324. /* @ckeditor/ckeditor5-image/theme/imageresize.css */
  325. .ck-content img.image_resized {
  326. height: auto;
  327. }
  328. /* @ckeditor/ckeditor5-image/theme/imageresize.css */
  329. .ck-content .image.image_resized {
  330. max-width: 100%;
  331. display: block;
  332. box-sizing: border-box;
  333. }
  334. /* @ckeditor/ckeditor5-image/theme/imageresize.css */
  335. .ck-content .image.image_resized img {
  336. width: 100%;
  337. }
  338. /* @ckeditor/ckeditor5-image/theme/imageresize.css */
  339. .ck-content .image.image_resized > figcaption {
  340. display: block;
  341. }
  342. /* @ckeditor/ckeditor5-highlight/theme/highlight.css */
  343. .ck-content .marker-yellow {
  344. background-color: var(--ck-highlight-marker-yellow);
  345. }
  346. /* @ckeditor/ckeditor5-highlight/theme/highlight.css */
  347. .ck-content .marker-green {
  348. background-color: var(--ck-highlight-marker-green);
  349. }
  350. /* @ckeditor/ckeditor5-highlight/theme/highlight.css */
  351. .ck-content .marker-pink {
  352. background-color: var(--ck-highlight-marker-pink);
  353. }
  354. /* @ckeditor/ckeditor5-highlight/theme/highlight.css */
  355. .ck-content .marker-blue {
  356. background-color: var(--ck-highlight-marker-blue);
  357. }
  358. /* @ckeditor/ckeditor5-highlight/theme/highlight.css */
  359. .ck-content .pen-red {
  360. color: var(--ck-highlight-pen-red);
  361. background-color: transparent;
  362. }
  363. /* @ckeditor/ckeditor5-highlight/theme/highlight.css */
  364. .ck-content .pen-green {
  365. color: var(--ck-highlight-pen-green);
  366. background-color: transparent;
  367. }
  368. /* @ckeditor/ckeditor5-list/theme/list.css */
  369. .ck-content ol {
  370. list-style-type: decimal;
  371. }
  372. /* @ckeditor/ckeditor5-list/theme/list.css */
  373. .ck-content ol ol {
  374. list-style-type: lower-latin;
  375. }
  376. /* @ckeditor/ckeditor5-list/theme/list.css */
  377. .ck-content ol ol ol {
  378. list-style-type: lower-roman;
  379. }
  380. /* @ckeditor/ckeditor5-list/theme/list.css */
  381. .ck-content ol ol ol ol {
  382. list-style-type: upper-latin;
  383. }
  384. /* @ckeditor/ckeditor5-list/theme/list.css */
  385. .ck-content ol ol ol ol ol {
  386. list-style-type: upper-roman;
  387. }
  388. /* @ckeditor/ckeditor5-list/theme/list.css */
  389. .ck-content ul {
  390. list-style-type: disc;
  391. }
  392. /* @ckeditor/ckeditor5-list/theme/list.css */
  393. .ck-content ul ul {
  394. list-style-type: circle;
  395. }
  396. /* @ckeditor/ckeditor5-list/theme/list.css */
  397. .ck-content ul ul ul {
  398. list-style-type: square;
  399. }
  400. /* @ckeditor/ckeditor5-list/theme/list.css */
  401. .ck-content ul ul ul ul {
  402. list-style-type: square;
  403. }
  404. /* @ckeditor/ckeditor5-image/theme/imagestyle.css */
  405. .ck-content .image-style-block-align-left,
  406. .ck-content .image-style-block-align-right {
  407. max-width: calc(100% - var(--ck-image-style-spacing));
  408. }
  409. /* @ckeditor/ckeditor5-image/theme/imagestyle.css */
  410. .ck-content .image-style-align-left,
  411. .ck-content .image-style-align-right {
  412. clear: none;
  413. }
  414. /* @ckeditor/ckeditor5-image/theme/imagestyle.css */
  415. .ck-content .image-style-side {
  416. float: right;
  417. margin-left: var(--ck-image-style-spacing);
  418. max-width: 50%;
  419. }
  420. /* @ckeditor/ckeditor5-image/theme/imagestyle.css */
  421. .ck-content .image-style-align-left {
  422. float: left;
  423. margin-right: var(--ck-image-style-spacing);
  424. }
  425. /* @ckeditor/ckeditor5-image/theme/imagestyle.css */
  426. .ck-content .image-style-align-center {
  427. margin-left: auto;
  428. margin-right: auto;
  429. }
  430. /* @ckeditor/ckeditor5-image/theme/imagestyle.css */
  431. .ck-content .image-style-align-right {
  432. float: right;
  433. margin-left: var(--ck-image-style-spacing);
  434. }
  435. /* @ckeditor/ckeditor5-image/theme/imagestyle.css */
  436. .ck-content .image-style-block-align-right {
  437. margin-right: 0;
  438. margin-left: auto;
  439. }
  440. /* @ckeditor/ckeditor5-image/theme/imagestyle.css */
  441. .ck-content .image-style-block-align-left {
  442. margin-left: 0;
  443. margin-right: auto;
  444. }
  445. /* @ckeditor/ckeditor5-image/theme/imagestyle.css */
  446. .ck-content p + .image-style-align-left,
  447. .ck-content p + .image-style-align-right,
  448. .ck-content p + .image-style-side {
  449. margin-top: 0;
  450. }
  451. /* @ckeditor/ckeditor5-image/theme/imagestyle.css */
  452. .ck-content .image-inline.image-style-align-left,
  453. .ck-content .image-inline.image-style-align-right {
  454. margin-top: var(--ck-inline-image-style-spacing);
  455. margin-bottom: var(--ck-inline-image-style-spacing);
  456. }
  457. /* @ckeditor/ckeditor5-image/theme/imagestyle.css */
  458. .ck-content .image-inline.image-style-align-left {
  459. margin-right: var(--ck-inline-image-style-spacing);
  460. }
  461. /* @ckeditor/ckeditor5-image/theme/imagestyle.css */
  462. .ck-content .image-inline.image-style-align-right {
  463. margin-left: var(--ck-inline-image-style-spacing);
  464. }
  465. /* @ckeditor/ckeditor5-block-quote/theme/blockquote.css */
  466. .ck-content blockquote {
  467. overflow: hidden;
  468. padding-right: 1.5em;
  469. padding-left: 1.5em;
  470. margin-left: 0;
  471. margin-right: 0;
  472. font-style: italic;
  473. border-left: solid 5px hsl(0, 0%, 80%);
  474. }
  475. /* @ckeditor/ckeditor5-block-quote/theme/blockquote.css */
  476. .ck-content[dir="rtl"] blockquote {
  477. border-left: 0;
  478. border-right: solid 5px hsl(0, 0%, 80%);
  479. }
  480. /* @ckeditor/ckeditor5-basic-styles/theme/code.css */
  481. .ck-content code {
  482. background-color: hsla(0, 0%, 78%, 0.3);
  483. padding: .15em;
  484. border-radius: 2px;
  485. }
  486. /* @ckeditor/ckeditor5-font/theme/fontsize.css */
  487. .ck-content .text-tiny {
  488. font-size: .7em;
  489. }
  490. /* @ckeditor/ckeditor5-font/theme/fontsize.css */
  491. .ck-content .text-small {
  492. font-size: .85em;
  493. }
  494. /* @ckeditor/ckeditor5-font/theme/fontsize.css */
  495. .ck-content .text-big {
  496. font-size: 1.4em;
  497. }
  498. /* @ckeditor/ckeditor5-font/theme/fontsize.css */
  499. .ck-content .text-huge {
  500. font-size: 1.8em;
  501. }
  502. /* @ckeditor/ckeditor5-mention/theme/mention.css */
  503. .ck-content .mention {
  504. background: var(--ck-color-mention-background);
  505. color: var(--ck-color-mention-text);
  506. }
  507. /* @ckeditor/ckeditor5-horizontal-line/theme/horizontalline.css */
  508. .ck-content hr {
  509. margin: 15px 0;
  510. height: 4px;
  511. background: hsl(0, 0%, 87%);
  512. border: 0;
  513. }
  514. /* @ckeditor/ckeditor5-code-block/theme/codeblock.css */
  515. .ck-content pre {
  516. padding: 1em;
  517. color: hsl(0, 0%, 20.8%);
  518. background: hsla(0, 0%, 78%, 0.3);
  519. border: 1px solid hsl(0, 0%, 77%);
  520. border-radius: 2px;
  521. text-align: left;
  522. direction: ltr;
  523. tab-size: 4;
  524. white-space: pre-wrap;
  525. font-style: normal;
  526. min-width: 200px;
  527. }
  528. /* @ckeditor/ckeditor5-code-block/theme/codeblock.css */
  529. .ck-content pre code {
  530. background: unset;
  531. padding: 0;
  532. border-radius: 0;
  533. }
  534. @media print {
  535. /* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
  536. .ck-content .page-break {
  537. padding: 0;
  538. }
  539. /* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
  540. .ck-content .page-break::after {
  541. display: none;
  542. }
  543. }