rich.css 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281
  1. .ql-container {
  2. box-sizing: border-box;
  3. font-family: Helvetica, Arial, sans-serif;
  4. font-size: 13px;
  5. height: 100%;
  6. margin: 0;
  7. position: relative
  8. }
  9. .ql-container.ql-disabled .ql-tooltip {
  10. visibility: hidden
  11. }
  12. .ql-container:not(.ql-disabled) li[data-list=checked]>.ql-ui,
  13. .ql-container:not(.ql-disabled) li[data-list=unchecked]>.ql-ui {
  14. cursor: pointer
  15. }
  16. .ql-clipboard {
  17. left: -100000px;
  18. height: 1px;
  19. overflow-y: hidden;
  20. position: absolute;
  21. top: 50%
  22. }
  23. .ql-clipboard p {
  24. margin: 0;
  25. padding: 0
  26. }
  27. .ql-editor {
  28. box-sizing: border-box;
  29. counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  30. line-height: 1.42;
  31. height: 100%;
  32. outline: none;
  33. overflow-y: auto;
  34. padding: 12px 15px;
  35. -o-tab-size: 4;
  36. tab-size: 4;
  37. -moz-tab-size: 4;
  38. text-align: left;
  39. white-space: pre-wrap;
  40. word-wrap: break-word
  41. }
  42. .ql-editor>* {
  43. cursor: text
  44. }
  45. .ql-editor blockquote,
  46. .ql-editor h1,
  47. .ql-editor h2,
  48. .ql-editor h3,
  49. .ql-editor h4,
  50. .ql-editor h5,
  51. .ql-editor h6,
  52. .ql-editor ol,
  53. .ql-editor p,
  54. .ql-editor pre {
  55. margin: 0;
  56. padding: 0
  57. }
  58. @supports (counter-set:none) {
  59. .ql-editor h1,
  60. .ql-editor h2,
  61. .ql-editor h3,
  62. .ql-editor h4,
  63. .ql-editor h5,
  64. .ql-editor h6,
  65. .ql-editor p {
  66. counter-set: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9
  67. }
  68. }
  69. @supports not (counter-set:none) {
  70. .ql-editor h1,
  71. .ql-editor h2,
  72. .ql-editor h3,
  73. .ql-editor h4,
  74. .ql-editor h5,
  75. .ql-editor h6,
  76. .ql-editor p {
  77. counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9
  78. }
  79. }
  80. .ql-editor table {
  81. border-collapse: collapse
  82. }
  83. .ql-editor td {
  84. border: 1px solid #000;
  85. padding: 2px 5px
  86. }
  87. .ql-editor li,
  88. .ql-editor ol {
  89. padding-left: 1.5em
  90. }
  91. .ql-editor li {
  92. list-style-type: none;
  93. position: relative
  94. }
  95. .ql-editor li>.ql-ui:before {
  96. display: inline-block;
  97. margin-left: -1.5em;
  98. margin-right: .3em;
  99. text-align: right;
  100. white-space: nowrap;
  101. width: 1.2em
  102. }
  103. .ql-editor li[data-list=checked]>.ql-ui,
  104. .ql-editor li[data-list=unchecked]>.ql-ui {
  105. color: #777
  106. }
  107. .ql-editor li[data-list=bullet]>.ql-ui:before {
  108. content: "\2022"
  109. }
  110. .ql-editor li[data-list=checked]>.ql-ui:before {
  111. content: "\2611"
  112. }
  113. .ql-editor li[data-list=unchecked]>.ql-ui:before {
  114. content: "\2610"
  115. }
  116. @supports (counter-set:none) {
  117. .ql-editor li[data-list] {
  118. counter-set: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9
  119. }
  120. }
  121. @supports not (counter-set:none) {
  122. .ql-editor li[data-list] {
  123. counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9
  124. }
  125. }
  126. .ql-editor li[data-list=ordered] {
  127. counter-increment: list-0
  128. }
  129. .ql-editor li[data-list=ordered]>.ql-ui:before {
  130. content: counter(list-0, decimal) ". "
  131. }
  132. .ql-editor li[data-list=ordered].ql-indent-1 {
  133. counter-increment: list-1
  134. }
  135. .ql-editor li[data-list=ordered].ql-indent-1>.ql-ui:before {
  136. content: counter(list-1, lower-alpha) ". "
  137. }
  138. @supports (counter-set:none) {
  139. .ql-editor li[data-list].ql-indent-1 {
  140. counter-set: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9
  141. }
  142. }
  143. @supports not (counter-set:none) {
  144. .ql-editor li[data-list].ql-indent-1 {
  145. counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9
  146. }
  147. }
  148. .ql-editor li[data-list=ordered].ql-indent-2 {
  149. counter-increment: list-2
  150. }
  151. .ql-editor li[data-list=ordered].ql-indent-2>.ql-ui:before {
  152. content: counter(list-2, lower-roman) ". "
  153. }
  154. @supports (counter-set:none) {
  155. .ql-editor li[data-list].ql-indent-2 {
  156. counter-set: list-3 list-4 list-5 list-6 list-7 list-8 list-9
  157. }
  158. }
  159. @supports not (counter-set:none) {
  160. .ql-editor li[data-list].ql-indent-2 {
  161. counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9
  162. }
  163. }
  164. .ql-editor li[data-list=ordered].ql-indent-3 {
  165. counter-increment: list-3
  166. }
  167. .ql-editor li[data-list=ordered].ql-indent-3>.ql-ui:before {
  168. content: counter(list-3, decimal) ". "
  169. }
  170. @supports (counter-set:none) {
  171. .ql-editor li[data-list].ql-indent-3 {
  172. counter-set: list-4 list-5 list-6 list-7 list-8 list-9
  173. }
  174. }
  175. @supports not (counter-set:none) {
  176. .ql-editor li[data-list].ql-indent-3 {
  177. counter-reset: list-4 list-5 list-6 list-7 list-8 list-9
  178. }
  179. }
  180. .ql-editor li[data-list=ordered].ql-indent-4 {
  181. counter-increment: list-4
  182. }
  183. .ql-editor li[data-list=ordered].ql-indent-4>.ql-ui:before {
  184. content: counter(list-4, lower-alpha) ". "
  185. }
  186. @supports (counter-set:none) {
  187. .ql-editor li[data-list].ql-indent-4 {
  188. counter-set: list-5 list-6 list-7 list-8 list-9
  189. }
  190. }
  191. @supports not (counter-set:none) {
  192. .ql-editor li[data-list].ql-indent-4 {
  193. counter-reset: list-5 list-6 list-7 list-8 list-9
  194. }
  195. }
  196. .ql-editor li[data-list=ordered].ql-indent-5 {
  197. counter-increment: list-5
  198. }
  199. .ql-editor li[data-list=ordered].ql-indent-5>.ql-ui:before {
  200. content: counter(list-5, lower-roman) ". "
  201. }
  202. @supports (counter-set:none) {
  203. .ql-editor li[data-list].ql-indent-5 {
  204. counter-set: list-6 list-7 list-8 list-9
  205. }
  206. }
  207. @supports not (counter-set:none) {
  208. .ql-editor li[data-list].ql-indent-5 {
  209. counter-reset: list-6 list-7 list-8 list-9
  210. }
  211. }
  212. .ql-editor li[data-list=ordered].ql-indent-6 {
  213. counter-increment: list-6
  214. }
  215. .ql-editor li[data-list=ordered].ql-indent-6>.ql-ui:before {
  216. content: counter(list-6, decimal) ". "
  217. }
  218. @supports (counter-set:none) {
  219. .ql-editor li[data-list].ql-indent-6 {
  220. counter-set: list-7 list-8 list-9
  221. }
  222. }
  223. @supports not (counter-set:none) {
  224. .ql-editor li[data-list].ql-indent-6 {
  225. counter-reset: list-7 list-8 list-9
  226. }
  227. }
  228. .ql-editor li[data-list=ordered].ql-indent-7 {
  229. counter-increment: list-7
  230. }
  231. .ql-editor li[data-list=ordered].ql-indent-7>.ql-ui:before {
  232. content: counter(list-7, lower-alpha) ". "
  233. }
  234. @supports (counter-set:none) {
  235. .ql-editor li[data-list].ql-indent-7 {
  236. counter-set: list-8 list-9
  237. }
  238. }
  239. @supports not (counter-set:none) {
  240. .ql-editor li[data-list].ql-indent-7 {
  241. counter-reset: list-8 list-9
  242. }
  243. }
  244. .ql-editor li[data-list=ordered].ql-indent-8 {
  245. counter-increment: list-8
  246. }
  247. .ql-editor li[data-list=ordered].ql-indent-8>.ql-ui:before {
  248. content: counter(list-8, lower-roman) ". "
  249. }
  250. @supports (counter-set:none) {
  251. .ql-editor li[data-list].ql-indent-8 {
  252. counter-set: list-9
  253. }
  254. }
  255. @supports not (counter-set:none) {
  256. .ql-editor li[data-list].ql-indent-8 {
  257. counter-reset: list-9
  258. }
  259. }
  260. .ql-editor li[data-list=ordered].ql-indent-9 {
  261. counter-increment: list-9
  262. }
  263. .ql-editor li[data-list=ordered].ql-indent-9>.ql-ui:before {
  264. content: counter(list-9, decimal) ". "
  265. }
  266. .ql-editor .ql-indent-1:not(.ql-direction-rtl) {
  267. padding-left: 3em
  268. }
  269. .ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
  270. padding-left: 4.5em
  271. }
  272. .ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
  273. padding-right: 3em
  274. }
  275. .ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
  276. padding-right: 4.5em
  277. }
  278. .ql-editor .ql-indent-2:not(.ql-direction-rtl) {
  279. padding-left: 6em
  280. }
  281. .ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
  282. padding-left: 7.5em
  283. }
  284. .ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
  285. padding-right: 6em
  286. }
  287. .ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
  288. padding-right: 7.5em
  289. }
  290. .ql-editor .ql-indent-3:not(.ql-direction-rtl) {
  291. padding-left: 9em
  292. }
  293. .ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
  294. padding-left: 10.5em
  295. }
  296. .ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
  297. padding-right: 9em
  298. }
  299. .ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
  300. padding-right: 10.5em
  301. }
  302. .ql-editor .ql-indent-4:not(.ql-direction-rtl) {
  303. padding-left: 12em
  304. }
  305. .ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
  306. padding-left: 13.5em
  307. }
  308. .ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
  309. padding-right: 12em
  310. }
  311. .ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
  312. padding-right: 13.5em
  313. }
  314. .ql-editor .ql-indent-5:not(.ql-direction-rtl) {
  315. padding-left: 15em
  316. }
  317. .ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
  318. padding-left: 16.5em
  319. }
  320. .ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
  321. padding-right: 15em
  322. }
  323. .ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
  324. padding-right: 16.5em
  325. }
  326. .ql-editor .ql-indent-6:not(.ql-direction-rtl) {
  327. padding-left: 18em
  328. }
  329. .ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
  330. padding-left: 19.5em
  331. }
  332. .ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
  333. padding-right: 18em
  334. }
  335. .ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
  336. padding-right: 19.5em
  337. }
  338. .ql-editor .ql-indent-7:not(.ql-direction-rtl) {
  339. padding-left: 21em
  340. }
  341. .ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
  342. padding-left: 22.5em
  343. }
  344. .ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
  345. padding-right: 21em
  346. }
  347. .ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
  348. padding-right: 22.5em
  349. }
  350. .ql-editor .ql-indent-8:not(.ql-direction-rtl) {
  351. padding-left: 24em
  352. }
  353. .ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
  354. padding-left: 25.5em
  355. }
  356. .ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
  357. padding-right: 24em
  358. }
  359. .ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
  360. padding-right: 25.5em
  361. }
  362. .ql-editor .ql-indent-9:not(.ql-direction-rtl) {
  363. padding-left: 27em
  364. }
  365. .ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
  366. padding-left: 28.5em
  367. }
  368. .ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
  369. padding-right: 27em
  370. }
  371. .ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
  372. padding-right: 28.5em
  373. }
  374. .ql-editor li.ql-direction-rtl {
  375. padding-right: 1.5em
  376. }
  377. .ql-editor li.ql-direction-rtl>.ql-ui:before {
  378. margin-left: .3em;
  379. margin-right: -1.5em;
  380. text-align: left
  381. }
  382. .ql-editor table {
  383. table-layout: fixed;
  384. width: 100%
  385. }
  386. .ql-editor table td {
  387. outline: none
  388. }
  389. .ql-editor .ql-code-block-container {
  390. font-family: monospace
  391. }
  392. .ql-editor .ql-video {
  393. display: block;
  394. max-width: 100%
  395. }
  396. .ql-editor .ql-video.ql-align-center {
  397. margin: 0 auto
  398. }
  399. .ql-editor .ql-video.ql-align-right {
  400. margin: 0 0 0 auto
  401. }
  402. .ql-editor .ql-bg-black {
  403. background-color: #000
  404. }
  405. .ql-editor .ql-bg-red {
  406. background-color: #e60000
  407. }
  408. .ql-editor .ql-bg-orange {
  409. background-color: #f90
  410. }
  411. .ql-editor .ql-bg-yellow {
  412. background-color: #ff0
  413. }
  414. .ql-editor .ql-bg-green {
  415. background-color: #008a00
  416. }
  417. .ql-editor .ql-bg-blue {
  418. background-color: #06c
  419. }
  420. .ql-editor .ql-bg-purple {
  421. background-color: #93f
  422. }
  423. .ql-editor .ql-color-white {
  424. color: #fff
  425. }
  426. .ql-editor .ql-color-red {
  427. color: #e60000
  428. }
  429. .ql-editor .ql-color-orange {
  430. color: #f90
  431. }
  432. .ql-editor .ql-color-yellow {
  433. color: #ff0
  434. }
  435. .ql-editor .ql-color-green {
  436. color: #008a00
  437. }
  438. .ql-editor .ql-color-blue {
  439. color: #06c
  440. }
  441. .ql-editor .ql-color-purple {
  442. color: #93f
  443. }
  444. .ql-editor .ql-font-serif {
  445. font-family: Georgia, Times New Roman, serif
  446. }
  447. .ql-editor .ql-font-monospace {
  448. font-family: Monaco, Courier New, monospace
  449. }
  450. .ql-editor .ql-size-small {
  451. font-size: .75em
  452. }
  453. .ql-editor .ql-size-large {
  454. font-size: 1.5em
  455. }
  456. .ql-editor .ql-size-huge {
  457. font-size: 2.5em
  458. }
  459. .ql-editor .ql-direction-rtl {
  460. direction: rtl;
  461. text-align: inherit
  462. }
  463. .ql-editor .ql-align-center {
  464. text-align: center
  465. }
  466. .ql-editor .ql-align-justify {
  467. text-align: justify
  468. }
  469. .ql-editor .ql-align-right {
  470. text-align: right
  471. }
  472. .ql-editor .ql-ui {
  473. position: absolute
  474. }
  475. .ql-editor.ql-blank:before {
  476. color: rgba(0, 0, 0, .6);
  477. content: attr(data-placeholder);
  478. font-style: italic;
  479. left: 15px;
  480. pointer-events: none;
  481. position: absolute;
  482. right: 15px
  483. }
  484. .ql-bubble.ql-toolbar:after,
  485. .ql-bubble .ql-toolbar:after {
  486. clear: both;
  487. content: "";
  488. display: table
  489. }
  490. .ql-bubble.ql-toolbar button,
  491. .ql-bubble .ql-toolbar button {
  492. background: none;
  493. border: none;
  494. cursor: pointer;
  495. display: inline-block;
  496. float: left;
  497. height: 24px;
  498. padding: 3px 5px;
  499. width: 28px
  500. }
  501. .ql-bubble.ql-toolbar button svg,
  502. .ql-bubble .ql-toolbar button svg {
  503. float: left;
  504. height: 100%
  505. }
  506. .ql-bubble.ql-toolbar button:active:hover,
  507. .ql-bubble .ql-toolbar button:active:hover {
  508. outline: none
  509. }
  510. .ql-bubble.ql-toolbar input.ql-image[type=file],
  511. .ql-bubble .ql-toolbar input.ql-image[type=file] {
  512. display: none
  513. }
  514. .ql-bubble.ql-toolbar .ql-picker-item.ql-selected,
  515. .ql-bubble .ql-toolbar .ql-picker-item.ql-selected,
  516. .ql-bubble.ql-toolbar .ql-picker-item:hover,
  517. .ql-bubble .ql-toolbar .ql-picker-item:hover,
  518. .ql-bubble.ql-toolbar .ql-picker-label.ql-active,
  519. .ql-bubble .ql-toolbar .ql-picker-label.ql-active,
  520. .ql-bubble.ql-toolbar .ql-picker-label:hover,
  521. .ql-bubble .ql-toolbar .ql-picker-label:hover,
  522. .ql-bubble.ql-toolbar button.ql-active,
  523. .ql-bubble .ql-toolbar button.ql-active,
  524. .ql-bubble.ql-toolbar button:focus,
  525. .ql-bubble .ql-toolbar button:focus,
  526. .ql-bubble.ql-toolbar button:hover,
  527. .ql-bubble .ql-toolbar button:hover {
  528. color: #fff
  529. }
  530. .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
  531. .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
  532. .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
  533. .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
  534. .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-fill,
  535. .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-fill,
  536. .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
  537. .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
  538. .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-fill,
  539. .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-fill,
  540. .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
  541. .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
  542. .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-fill,
  543. .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-fill,
  544. .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
  545. .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
  546. .ql-bubble.ql-toolbar button.ql-active .ql-fill,
  547. .ql-bubble .ql-toolbar button.ql-active .ql-fill,
  548. .ql-bubble.ql-toolbar button.ql-active .ql-stroke.ql-fill,
  549. .ql-bubble .ql-toolbar button.ql-active .ql-stroke.ql-fill,
  550. .ql-bubble.ql-toolbar button:focus .ql-fill,
  551. .ql-bubble .ql-toolbar button:focus .ql-fill,
  552. .ql-bubble.ql-toolbar button:focus .ql-stroke.ql-fill,
  553. .ql-bubble .ql-toolbar button:focus .ql-stroke.ql-fill,
  554. .ql-bubble.ql-toolbar button:hover .ql-fill,
  555. .ql-bubble .ql-toolbar button:hover .ql-fill,
  556. .ql-bubble.ql-toolbar button:hover .ql-stroke.ql-fill,
  557. .ql-bubble .ql-toolbar button:hover .ql-stroke.ql-fill {
  558. fill: #fff
  559. }
  560. .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
  561. .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
  562. .ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
  563. .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
  564. .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke,
  565. .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke,
  566. .ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
  567. .ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
  568. .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
  569. .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
  570. .ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
  571. .ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
  572. .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke,
  573. .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke,
  574. .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
  575. .ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
  576. .ql-bubble.ql-toolbar button.ql-active .ql-stroke,
  577. .ql-bubble .ql-toolbar button.ql-active .ql-stroke,
  578. .ql-bubble.ql-toolbar button.ql-active .ql-stroke-miter,
  579. .ql-bubble .ql-toolbar button.ql-active .ql-stroke-miter,
  580. .ql-bubble.ql-toolbar button:focus .ql-stroke,
  581. .ql-bubble .ql-toolbar button:focus .ql-stroke,
  582. .ql-bubble.ql-toolbar button:focus .ql-stroke-miter,
  583. .ql-bubble .ql-toolbar button:focus .ql-stroke-miter,
  584. .ql-bubble.ql-toolbar button:hover .ql-stroke,
  585. .ql-bubble .ql-toolbar button:hover .ql-stroke,
  586. .ql-bubble.ql-toolbar button:hover .ql-stroke-miter,
  587. .ql-bubble .ql-toolbar button:hover .ql-stroke-miter {
  588. stroke: #fff
  589. }
  590. @media (pointer:coarse) {
  591. .ql-bubble.ql-toolbar button:hover:not(.ql-active),
  592. .ql-bubble .ql-toolbar button:hover:not(.ql-active) {
  593. color: #ccc
  594. }
  595. .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-fill,
  596. .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-fill,
  597. .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
  598. .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
  599. fill: #ccc
  600. }
  601. .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  602. .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  603. .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
  604. .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
  605. stroke: #ccc
  606. }
  607. }
  608. .ql-bubble,
  609. .ql-bubble * {
  610. box-sizing: border-box
  611. }
  612. .ql-bubble .ql-hidden {
  613. display: none
  614. }
  615. .ql-bubble .ql-out-bottom,
  616. .ql-bubble .ql-out-top {
  617. visibility: hidden
  618. }
  619. .ql-bubble .ql-tooltip {
  620. position: absolute;
  621. transform: translateY(10px)
  622. }
  623. .ql-bubble .ql-tooltip a {
  624. cursor: pointer;
  625. text-decoration: none
  626. }
  627. .ql-bubble .ql-tooltip.ql-flip {
  628. transform: translateY(-10px)
  629. }
  630. .ql-bubble .ql-formats {
  631. display: inline-block;
  632. vertical-align: middle
  633. }
  634. .ql-bubble .ql-formats:after {
  635. clear: both;
  636. content: "";
  637. display: table
  638. }
  639. .ql-bubble .ql-stroke {
  640. fill: none;
  641. stroke: #ccc;
  642. stroke-linecap: round;
  643. stroke-linejoin: round;
  644. stroke-width: 2
  645. }
  646. .ql-bubble .ql-stroke-miter {
  647. fill: none;
  648. stroke: #ccc;
  649. stroke-miterlimit: 10;
  650. stroke-width: 2
  651. }
  652. .ql-bubble .ql-fill,
  653. .ql-bubble .ql-stroke.ql-fill {
  654. fill: #ccc
  655. }
  656. .ql-bubble .ql-empty {
  657. fill: none
  658. }
  659. .ql-bubble .ql-even {
  660. fill-rule: evenodd
  661. }
  662. .ql-bubble .ql-stroke.ql-thin,
  663. .ql-bubble .ql-thin {
  664. stroke-width: 1
  665. }
  666. .ql-bubble .ql-transparent {
  667. opacity: .4
  668. }
  669. .ql-bubble .ql-direction svg:last-child {
  670. display: none
  671. }
  672. .ql-bubble .ql-direction.ql-active svg:last-child {
  673. display: inline
  674. }
  675. .ql-bubble .ql-direction.ql-active svg:first-child {
  676. display: none
  677. }
  678. .ql-bubble .ql-editor h1 {
  679. font-size: 2em
  680. }
  681. .ql-bubble .ql-editor h2 {
  682. font-size: 1.5em
  683. }
  684. .ql-bubble .ql-editor h3 {
  685. font-size: 1.17em
  686. }
  687. .ql-bubble .ql-editor h4 {
  688. font-size: 1em
  689. }
  690. .ql-bubble .ql-editor h5 {
  691. font-size: .83em
  692. }
  693. .ql-bubble .ql-editor h6 {
  694. font-size: .67em
  695. }
  696. .ql-bubble .ql-editor a {
  697. text-decoration: underline
  698. }
  699. .ql-bubble .ql-editor blockquote {
  700. border-left: 4px solid #ccc;
  701. margin-bottom: 5px;
  702. margin-top: 5px;
  703. padding-left: 16px
  704. }
  705. .ql-bubble .ql-editor .ql-code-block-container,
  706. .ql-bubble .ql-editor code {
  707. background-color: #f0f0f0;
  708. border-radius: 3px
  709. }
  710. .ql-bubble .ql-editor .ql-code-block-container {
  711. margin-bottom: 5px;
  712. margin-top: 5px;
  713. padding: 5px 10px
  714. }
  715. .ql-bubble .ql-editor code {
  716. font-size: 85%;
  717. padding: 2px 4px
  718. }
  719. .ql-bubble .ql-editor .ql-code-block-container {
  720. background-color: #23241f;
  721. color: #f8f8f2;
  722. overflow: visible
  723. }
  724. .ql-bubble .ql-editor img {
  725. max-width: 100%
  726. }
  727. .ql-bubble .ql-picker {
  728. color: #ccc;
  729. display: inline-block;
  730. float: left;
  731. font-size: 14px;
  732. font-weight: 500;
  733. height: 24px;
  734. position: relative;
  735. vertical-align: middle
  736. }
  737. .ql-bubble .ql-picker-label {
  738. cursor: pointer;
  739. display: inline-block;
  740. height: 100%;
  741. padding-left: 8px;
  742. padding-right: 2px;
  743. position: relative;
  744. width: 100%
  745. }
  746. .ql-bubble .ql-picker-label:before {
  747. display: inline-block;
  748. line-height: 22px
  749. }
  750. .ql-bubble .ql-picker-options {
  751. background-color: #444;
  752. display: none;
  753. min-width: 100%;
  754. padding: 4px 8px;
  755. position: absolute;
  756. white-space: nowrap
  757. }
  758. .ql-bubble .ql-picker-options .ql-picker-item {
  759. cursor: pointer;
  760. display: block;
  761. padding-bottom: 5px;
  762. padding-top: 5px
  763. }
  764. .ql-bubble .ql-picker.ql-expanded .ql-picker-label {
  765. color: #777;
  766. z-index: 2
  767. }
  768. .ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-fill {
  769. fill: #777
  770. }
  771. .ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  772. stroke: #777
  773. }
  774. .ql-bubble .ql-picker.ql-expanded .ql-picker-options {
  775. display: block;
  776. margin-top: -1px;
  777. top: 100%;
  778. z-index: 1
  779. }
  780. .ql-bubble .ql-color-picker,
  781. .ql-bubble .ql-icon-picker {
  782. width: 28px
  783. }
  784. .ql-bubble .ql-color-picker .ql-picker-label,
  785. .ql-bubble .ql-icon-picker .ql-picker-label {
  786. padding: 2px 4px
  787. }
  788. .ql-bubble .ql-color-picker .ql-picker-label svg,
  789. .ql-bubble .ql-icon-picker .ql-picker-label svg {
  790. right: 4px
  791. }
  792. .ql-bubble .ql-icon-picker .ql-picker-options {
  793. padding: 4px 0
  794. }
  795. .ql-bubble .ql-icon-picker .ql-picker-item {
  796. height: 24px;
  797. width: 24px;
  798. padding: 2px 4px
  799. }
  800. .ql-bubble .ql-color-picker .ql-picker-options {
  801. padding: 3px 5px;
  802. width: 152px
  803. }
  804. .ql-bubble .ql-color-picker .ql-picker-item {
  805. border: 1px solid transparent;
  806. float: left;
  807. height: 16px;
  808. margin: 2px;
  809. padding: 0;
  810. width: 16px
  811. }
  812. .ql-bubble .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
  813. position: absolute;
  814. margin-top: -9px;
  815. right: 0;
  816. top: 50%;
  817. width: 18px
  818. }
  819. .ql-bubble .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=""]):before,
  820. .ql-bubble .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=""]):before,
  821. .ql-bubble .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=""]):before,
  822. .ql-bubble .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=""]):before,
  823. .ql-bubble .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=""]):before,
  824. .ql-bubble .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=""]):before {
  825. content: attr(data-label)
  826. }
  827. .ql-bubble .ql-picker.ql-header {
  828. width: 98px
  829. }
  830. .ql-bubble .ql-picker.ql-header .ql-picker-item:before,
  831. .ql-bubble .ql-picker.ql-header .ql-picker-label:before {
  832. content: "Normal"
  833. }
  834. .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]:before,
  835. .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="1"]:before {
  836. content: "Heading 1"
  837. }
  838. .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]:before,
  839. .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="2"]:before {
  840. content: "Heading 2"
  841. }
  842. .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]:before,
  843. .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="3"]:before {
  844. content: "Heading 3"
  845. }
  846. .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]:before,
  847. .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="4"]:before {
  848. content: "Heading 4"
  849. }
  850. .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]:before,
  851. .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="5"]:before {
  852. content: "Heading 5"
  853. }
  854. .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]:before,
  855. .ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="6"]:before {
  856. content: "Heading 6"
  857. }
  858. .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]:before {
  859. font-size: 2em
  860. }
  861. .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]:before {
  862. font-size: 1.5em
  863. }
  864. .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]:before {
  865. font-size: 1.17em
  866. }
  867. .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]:before {
  868. font-size: 1em
  869. }
  870. .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]:before {
  871. font-size: .83em
  872. }
  873. .ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]:before {
  874. font-size: .67em
  875. }
  876. .ql-bubble .ql-picker.ql-font {
  877. width: 108px
  878. }
  879. .ql-bubble .ql-picker.ql-font .ql-picker-item:before,
  880. .ql-bubble .ql-picker.ql-font .ql-picker-label:before {
  881. content: "Sans Serif"
  882. }
  883. .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]:before,
  884. .ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=serif]:before {
  885. content: "Serif"
  886. }
  887. .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before,
  888. .ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before {
  889. content: "Monospace"
  890. }
  891. .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]:before {
  892. font-family: Georgia, Times New Roman, serif
  893. }
  894. .ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before {
  895. font-family: Monaco, Courier New, monospace
  896. }
  897. .ql-bubble .ql-picker.ql-size {
  898. width: 98px
  899. }
  900. .ql-bubble .ql-picker.ql-size .ql-picker-item:before,
  901. .ql-bubble .ql-picker.ql-size .ql-picker-label:before {
  902. content: "Normal"
  903. }
  904. .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]:before,
  905. .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=small]:before {
  906. content: "Small"
  907. }
  908. .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]:before,
  909. .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=large]:before {
  910. content: "Large"
  911. }
  912. .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]:before,
  913. .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=huge]:before {
  914. content: "Huge"
  915. }
  916. .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]:before {
  917. font-size: 10px
  918. }
  919. .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]:before {
  920. font-size: 18px
  921. }
  922. .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]:before {
  923. font-size: 32px
  924. }
  925. .ql-bubble .ql-color-picker.ql-background .ql-picker-item {
  926. background-color: #fff
  927. }
  928. .ql-bubble .ql-color-picker.ql-color .ql-picker-item {
  929. background-color: #000
  930. }
  931. .ql-code-block-container {
  932. position: relative
  933. }
  934. .ql-code-block-container .ql-ui {
  935. right: 5px;
  936. top: 5px
  937. }
  938. .ql-bubble .ql-toolbar .ql-formats {
  939. margin: 8px 12px 8px 0
  940. }
  941. .ql-bubble .ql-toolbar .ql-formats:first-child {
  942. margin-left: 12px
  943. }
  944. .ql-bubble .ql-color-picker svg {
  945. margin: 1px
  946. }
  947. .ql-bubble .ql-color-picker .ql-picker-item.ql-selected,
  948. .ql-bubble .ql-color-picker .ql-picker-item:hover {
  949. border-color: #fff
  950. }
  951. .ql-bubble .ql-tooltip {
  952. background-color: #444;
  953. border-radius: 25px;
  954. color: #fff
  955. }
  956. .ql-bubble .ql-tooltip-arrow {
  957. border-left: 6px solid transparent;
  958. border-right: 6px solid transparent;
  959. content: " ";
  960. display: block;
  961. left: 50%;
  962. margin-left: -6px;
  963. position: absolute
  964. }
  965. .ql-bubble .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow {
  966. border-bottom: 6px solid #444;
  967. top: -6px
  968. }
  969. .ql-bubble .ql-tooltip.ql-flip .ql-tooltip-arrow {
  970. border-top: 6px solid #444;
  971. bottom: -6px
  972. }
  973. .ql-bubble .ql-tooltip.ql-editing .ql-tooltip-editor {
  974. display: block
  975. }
  976. .ql-bubble .ql-tooltip.ql-editing .ql-formats {
  977. visibility: hidden
  978. }
  979. .ql-bubble .ql-tooltip-editor {
  980. display: none
  981. }
  982. .ql-bubble .ql-tooltip-editor input[type=text] {
  983. background: transparent;
  984. border: none;
  985. color: #fff;
  986. font-size: 13px;
  987. height: 100%;
  988. outline: none;
  989. padding: 10px 20px;
  990. position: absolute;
  991. width: 100%
  992. }
  993. .ql-bubble .ql-tooltip-editor a {
  994. top: 10px;
  995. position: absolute;
  996. right: 20px
  997. }
  998. .ql-bubble .ql-tooltip-editor a:before {
  999. color: #ccc;
  1000. content: "\00D7";
  1001. font-size: 16px;
  1002. font-weight: 700
  1003. }
  1004. .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close) {
  1005. position: relative;
  1006. white-space: nowrap
  1007. }
  1008. .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):before {
  1009. background-color: #444;
  1010. border-radius: 15px;
  1011. top: -5px;
  1012. font-size: 12px;
  1013. color: #fff;
  1014. content: attr(href);
  1015. font-weight: 400;
  1016. overflow: hidden;
  1017. padding: 5px 15px;
  1018. text-decoration: none;
  1019. z-index: 1
  1020. }
  1021. .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):after {
  1022. border-top: 6px solid #444;
  1023. border-left: 6px solid transparent;
  1024. border-right: 6px solid transparent;
  1025. top: 0;
  1026. content: " ";
  1027. height: 0;
  1028. width: 0
  1029. }
  1030. .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):after,
  1031. .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):before {
  1032. left: 0;
  1033. margin-left: 50%;
  1034. position: absolute;
  1035. transform: translate(-50%, -100%);
  1036. transition: visibility 0s ease .2s;
  1037. visibility: hidden
  1038. }
  1039. .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):hover:after,
  1040. .ql-container.ql-bubble:not(.ql-disabled) a:not(.ql-close):hover:before {
  1041. visibility: visible
  1042. }