ckeditor5-content.css 10.0 KB

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