The version of vichan running on lainchan.org
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

932 行
24KB

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