vditor.css 43 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862
  1. /*!
  2. * Vditor v3.10.6 - A markdown editor written in TypeScript.
  3. *
  4. * MIT License
  5. *
  6. * Copyright (c) 2018-present B3log 开源, b3log.org
  7. *
  8. * Permission is hereby granted, free of charge, to any person obtaining a copy
  9. * of this software and associated documentation files (the "Software"), to deal
  10. * in the Software without restriction, including without limitation the rights
  11. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  12. * copies of the Software, and to permit persons to whom the Software is
  13. * furnished to do so, subject to the following conditions:
  14. *
  15. * The above copyright notice and this permission notice shall be included in all
  16. * copies or substantial portions of the Software.
  17. *
  18. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  19. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  20. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  21. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  22. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  23. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  24. * SOFTWARE.
  25. *
  26. */
  27. /*!
  28. * Vditor v3.10.6 - A markdown editor written in TypeScript.
  29. *
  30. * MIT License
  31. *
  32. * Copyright (c) 2018-present B3log 开源, b3log.org
  33. *
  34. * Permission is hereby granted, free of charge, to any person obtaining a copy
  35. * of this software and associated documentation files (the "Software"), to deal
  36. * in the Software without restriction, including without limitation the rights
  37. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  38. * copies of the Software, and to permit persons to whom the Software is
  39. * furnished to do so, subject to the following conditions:
  40. *
  41. * The above copyright notice and this permission notice shall be included in all
  42. * copies or substantial portions of the Software.
  43. *
  44. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  45. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  46. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  47. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  48. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  49. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  50. * SOFTWARE.
  51. *
  52. */
  53. .vditor {
  54. --border-color: #d1d5da;
  55. --second-color: rgba(88, 96, 105, 0.36);
  56. --panel-background-color: #fff;
  57. --panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  58. --toolbar-background-color: #f6f8fa;
  59. --toolbar-icon-color: #586069;
  60. --toolbar-icon-hover-color: #4285f4;
  61. --toolbar-height: 35px;
  62. --toolbar-divider-margin-top: 8px;
  63. --textarea-background-color: #fafbfc;
  64. --textarea-text-color: #24292e;
  65. --resize-icon-color: var(--toolbar-icon-color);
  66. --resize-background-color: var(--toolbar-background-color);
  67. --resize-hover-icon-color: var(--panel-background-color);
  68. --resize-hover-background-color: var(--toolbar-icon-hover-color);
  69. --count-background-color: rgba(27, 31, 35, 0.05);
  70. --heading-border-color: #eaecef;
  71. --blockquote-color: #6a737d;
  72. --ir-heading-color: #660e7a;
  73. --ir-title-color: #808080;
  74. --ir-bi-color: #0033b3;
  75. --ir-link-color: #008000;
  76. --ir-bracket-color: #0000ff;
  77. --ir-paren-color: #008000;
  78. }
  79. .vditor--dark {
  80. --border-color: #141414;
  81. --second-color: rgba(185, 185, 185, 0.36);
  82. --panel-background-color: #24292e;
  83. --panel-shadow: 0 1px 2px rgba(255, 255, 255, 0.2);
  84. --toolbar-background-color: #1d2125;
  85. --toolbar-icon-color: #b9b9b9;
  86. --toolbar-icon-hover-color: #fff;
  87. --textarea-background-color: #2f363d;
  88. --textarea-text-color: #d1d5da;
  89. --resize-icon-color: var(--border-color);
  90. --resize-background-color: var(--second-color);
  91. --resize-hover-icon-color: var(--toolbar-icon-hover-color);
  92. --resize-hover-background-color: rgba(185, 185, 185, 0.86);
  93. --count-background-color: rgba(66, 133, 244, 0.36);
  94. --heading-border-color: var(--textarea-text-color);
  95. --blockquote-color: var(--toolbar-icon-color);
  96. --ir-heading-color: #9876aa;
  97. --ir-title-color: #808080;
  98. --ir-bi-color: #cc7832;
  99. --ir-link-color: #ffc66d;
  100. --ir-bracket-color: #287bde;
  101. --ir-paren-color: #6a8759;
  102. }
  103. /**
  104. * tool tip.
  105. *
  106. * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
  107. * @version 0.1.0.0, Jan 25, 2019
  108. */
  109. @-webkit-keyframes tooltip-appear {
  110. from {
  111. opacity: 0;
  112. }
  113. to {
  114. opacity: 1;
  115. }
  116. }
  117. @keyframes tooltip-appear {
  118. from {
  119. opacity: 0;
  120. }
  121. to {
  122. opacity: 1;
  123. }
  124. }
  125. .vditor-tooltipped {
  126. position: relative;
  127. cursor: pointer;
  128. }
  129. .vditor-tooltipped::after {
  130. position: absolute;
  131. z-index: 1000000;
  132. display: none;
  133. padding: 5px 8px;
  134. font-size: 11px;
  135. font-weight: normal;
  136. -webkit-font-smoothing: subpixel-antialiased;
  137. color: #fff;
  138. text-align: center;
  139. text-decoration: none;
  140. text-shadow: none;
  141. text-transform: none;
  142. letter-spacing: normal;
  143. word-wrap: break-word;
  144. white-space: pre;
  145. pointer-events: none;
  146. content: attr(aria-label);
  147. background: #3b3e43;
  148. border-radius: 3px;
  149. line-height: 16px;
  150. opacity: 0;
  151. }
  152. .vditor-tooltipped::before {
  153. position: absolute;
  154. z-index: 1000001;
  155. display: none;
  156. width: 0;
  157. height: 0;
  158. color: #3b3e43;
  159. pointer-events: none;
  160. content: "";
  161. border: 5px solid transparent;
  162. opacity: 0;
  163. }
  164. .vditor-tooltipped--hover::before,
  165. .vditor-tooltipped--hover::after,
  166. .vditor-tooltipped:hover::before,
  167. .vditor-tooltipped:hover::after,
  168. .vditor-tooltipped:active::before,
  169. .vditor-tooltipped:active::after,
  170. .vditor-tooltipped:focus::before,
  171. .vditor-tooltipped:focus::after {
  172. display: inline-block;
  173. text-decoration: none;
  174. -webkit-animation-name: tooltip-appear;
  175. animation-name: tooltip-appear;
  176. -webkit-animation-duration: 0.15s;
  177. animation-duration: 0.15s;
  178. -webkit-animation-fill-mode: forwards;
  179. animation-fill-mode: forwards;
  180. -webkit-animation-timing-function: ease-in;
  181. animation-timing-function: ease-in;
  182. }
  183. .vditor-tooltipped__s::after,
  184. .vditor-tooltipped__se::after,
  185. .vditor-tooltipped__sw::after {
  186. top: 100%;
  187. right: 50%;
  188. margin-top: 5px;
  189. }
  190. .vditor-tooltipped__s::before,
  191. .vditor-tooltipped__se::before,
  192. .vditor-tooltipped__sw::before {
  193. top: auto;
  194. right: 50%;
  195. bottom: -5px;
  196. margin-right: -5px;
  197. border-bottom-color: #3b3e43;
  198. }
  199. .vditor-tooltipped__se::after {
  200. right: auto;
  201. left: 50%;
  202. margin-left: -15px;
  203. }
  204. .vditor-tooltipped__sw::after {
  205. margin-right: -15px;
  206. }
  207. .vditor-tooltipped__n::after,
  208. .vditor-tooltipped__ne::after,
  209. .vditor-tooltipped__nw::after {
  210. right: 50%;
  211. bottom: 100%;
  212. margin-bottom: 5px;
  213. }
  214. .vditor-tooltipped__n::before,
  215. .vditor-tooltipped__ne::before,
  216. .vditor-tooltipped__nw::before {
  217. top: -5px;
  218. right: 50%;
  219. bottom: auto;
  220. margin-right: -5px;
  221. border-top-color: #3b3e43;
  222. }
  223. .vditor-tooltipped__ne::after {
  224. right: auto;
  225. left: 50%;
  226. margin-left: -15px;
  227. }
  228. .vditor-tooltipped__nw::after {
  229. margin-right: -15px;
  230. }
  231. .vditor-tooltipped__s::after,
  232. .vditor-tooltipped__n::after {
  233. transform: translateX(50%);
  234. }
  235. .vditor-tooltipped__w::after {
  236. right: 100%;
  237. bottom: 50%;
  238. margin-right: 5px;
  239. transform: translateY(50%);
  240. }
  241. .vditor-tooltipped__w::before {
  242. top: 50%;
  243. bottom: 50%;
  244. left: -5px;
  245. margin-top: -5px;
  246. border-left-color: #3b3e43;
  247. }
  248. .vditor-tooltipped__e::after {
  249. bottom: 50%;
  250. left: 100%;
  251. margin-left: 5px;
  252. transform: translateY(50%);
  253. }
  254. .vditor-tooltipped__e::before {
  255. top: 50%;
  256. right: -5px;
  257. bottom: 50%;
  258. margin-top: -5px;
  259. border-right-color: #3b3e43;
  260. }
  261. @media screen and (max-width: 520px) {
  262. .vditor-tooltipped:before,
  263. .vditor-tooltipped:after {
  264. content: none;
  265. }
  266. }
  267. /**
  268. * panel.
  269. *
  270. * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
  271. * @version 1.0.0.0, Jan 22, 2020
  272. */
  273. @-webkit-keyframes scale-in {
  274. 0% {
  275. opacity: 0;
  276. transform: scale(0.5);
  277. }
  278. 100% {
  279. opacity: 1;
  280. transform: scale(1);
  281. }
  282. }
  283. @keyframes scale-in {
  284. 0% {
  285. opacity: 0;
  286. transform: scale(0.5);
  287. }
  288. 100% {
  289. opacity: 1;
  290. transform: scale(1);
  291. }
  292. }
  293. .vditor-panel {
  294. background-color: var(--panel-background-color);
  295. position: absolute;
  296. box-shadow: var(--panel-shadow);
  297. border-radius: 3px;
  298. padding: 5px;
  299. z-index: 3;
  300. font-size: 14px;
  301. display: none;
  302. -webkit-user-select: none;
  303. -moz-user-select: none;
  304. -ms-user-select: none;
  305. user-select: none;
  306. max-width: 320px;
  307. min-width: 80px;
  308. -webkit-animation-duration: 0.15s;
  309. animation-duration: 0.15s;
  310. -webkit-animation-name: scale-in;
  311. animation-name: scale-in;
  312. -webkit-animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
  313. animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
  314. color: var(--toolbar-icon-color);
  315. }
  316. .vditor-panel--none {
  317. padding: 0;
  318. -webkit-animation: none;
  319. animation: none;
  320. min-width: auto;
  321. max-width: none;
  322. white-space: nowrap;
  323. opacity: 0.86;
  324. }
  325. .vditor-panel--arrow:before {
  326. position: absolute;
  327. width: 0;
  328. height: 0;
  329. pointer-events: none;
  330. content: " ";
  331. border: 7px solid transparent;
  332. top: -14px;
  333. left: 5px;
  334. border-bottom-color: var(--panel-background-color);
  335. }
  336. .vditor-panel--left {
  337. right: 0;
  338. }
  339. .vditor-panel--left.vditor-panel--arrow:before {
  340. right: 5px;
  341. left: auto;
  342. }
  343. .vditor-input {
  344. border: 0;
  345. padding: 3px 5px;
  346. background-color: var(--panel-background-color);
  347. font-size: 12px;
  348. color: var(--textarea-text-color);
  349. }
  350. .vditor-input:focus {
  351. background-color: var(--toolbar-background-color);
  352. outline: none;
  353. }
  354. .vditor-icon {
  355. color: var(--toolbar-icon-color);
  356. cursor: pointer;
  357. float: left;
  358. padding: 4px 5px;
  359. height: 21px;
  360. width: 23px;
  361. background-color: transparent;
  362. border: 0;
  363. box-sizing: border-box;
  364. }
  365. .vditor-icon:hover,
  366. .vditor-icon--current {
  367. color: var(--toolbar-icon-hover-color);
  368. background-color: transparent;
  369. }
  370. .vditor-icon:focus {
  371. outline: none;
  372. }
  373. .vditor-icon svg {
  374. height: 13px !important;
  375. width: 13px !important;
  376. float: left;
  377. fill: currentColor;
  378. pointer-events: none;
  379. }
  380. .vditor-toolbar {
  381. background-color: var(--toolbar-background-color);
  382. border-bottom: 1px solid var(--border-color);
  383. padding: 0 5px;
  384. line-height: 1;
  385. }
  386. .vditor-toolbar--pin {
  387. position: -webkit-sticky;
  388. position: sticky;
  389. top: 0;
  390. z-index: 1;
  391. }
  392. .vditor-toolbar--hide {
  393. transition: all 0.15s ease-in-out;
  394. height: 5px;
  395. overflow: hidden;
  396. }
  397. .vditor-toolbar--hide:hover {
  398. background-color: var(--toolbar-background-color);
  399. height: auto;
  400. overflow: visible;
  401. }
  402. .vditor-toolbar__item {
  403. float: left;
  404. position: relative;
  405. }
  406. .vditor-toolbar__item .vditor-tooltipped {
  407. color: var(--toolbar-icon-color);
  408. border: 0;
  409. padding: 10px 5px;
  410. background-color: transparent;
  411. height: var(--toolbar-height);
  412. width: 25px;
  413. box-sizing: border-box;
  414. font-size: 0;
  415. }
  416. .vditor-toolbar__item .vditor-tooltipped:focus {
  417. outline: none;
  418. }
  419. .vditor-toolbar__item .vditor-tooltipped:focus {
  420. cursor: pointer;
  421. color: var(--toolbar-icon-hover-color);
  422. }
  423. .vditor-toolbar__item svg {
  424. fill: currentColor;
  425. display: inline-block;
  426. stroke-width: 0;
  427. stroke: currentColor;
  428. width: 15px;
  429. height: 15px;
  430. }
  431. .vditor-toolbar__item input {
  432. position: absolute;
  433. width: 25px;
  434. height: var(--toolbar-height);
  435. top: 0;
  436. left: 0;
  437. cursor: pointer;
  438. opacity: 0.001;
  439. overflow: hidden;
  440. }
  441. .vditor-toolbar__divider {
  442. float: left;
  443. height: calc(var(--toolbar-height) - (var(--toolbar-divider-margin-top) * 2));
  444. border-left: 1px solid var(--second-color);
  445. margin: var(--toolbar-divider-margin-top) 8px;
  446. }
  447. .vditor-toolbar__br {
  448. width: 100%;
  449. padding: 0 !important;
  450. height: 0 !important;
  451. }
  452. .vditor-menu--current {
  453. color: var(--toolbar-icon-hover-color) !important;
  454. }
  455. .vditor-menu--disabled {
  456. color: var(--second-color) !important;
  457. cursor: not-allowed !important;
  458. }
  459. .vditor-emojis {
  460. display: inline-block;
  461. overflow: auto;
  462. }
  463. .vditor-emojis::-webkit-scrollbar {
  464. display: none;
  465. }
  466. .vditor-emojis__tip {
  467. flex: 1;
  468. min-width: 1px;
  469. width: 200px;
  470. margin-right: 10px;
  471. color: var(--toolbar-icon-color);
  472. white-space: nowrap;
  473. text-overflow: ellipsis;
  474. overflow: hidden;
  475. }
  476. .vditor-emojis__tail {
  477. margin-top: 5px;
  478. font-size: 12px;
  479. color: var(--toolbar-icon-color);
  480. display: flex;
  481. }
  482. .vditor-emojis__tail a {
  483. text-decoration: none;
  484. color: var(--toolbar-icon-color);
  485. }
  486. .vditor-emojis__tail a:hover {
  487. color: var(--toolbar-icon-hover-color);
  488. }
  489. .vditor-emojis button {
  490. cursor: pointer;
  491. border-radius: 3px;
  492. float: left;
  493. height: 30px;
  494. width: 30px;
  495. text-align: center;
  496. line-height: 26px;
  497. padding: 3px;
  498. box-sizing: border-box;
  499. font-size: 16px;
  500. transition: all 0.15s ease-in-out;
  501. border: 0;
  502. margin: 0;
  503. background-color: transparent;
  504. overflow: hidden;
  505. }
  506. .vditor-emojis button:focus {
  507. outline: none;
  508. }
  509. .vditor-emojis button:hover .vditor-emojis__icon {
  510. display: inline-block;
  511. transform: scale(1.2);
  512. }
  513. .vditor-emojis img {
  514. height: 20px;
  515. width: 20px;
  516. float: left;
  517. margin: 3px 0 0 3px;
  518. }
  519. @media screen and (max-width: 520px) {
  520. .vditor-toolbar__item {
  521. padding: 0 12px;
  522. }
  523. .vditor-panel--left.vditor-panel--arrow:before {
  524. right: 17px;
  525. }
  526. }
  527. @media (hover: hover) and (pointer: fine) {
  528. .vditor-toolbar__item .vditor-tooltipped:hover {
  529. color: var(--toolbar-icon-hover-color);
  530. }
  531. }
  532. @-webkit-keyframes slideInDown {
  533. from {
  534. transform: translate3d(0, -100%, 0);
  535. visibility: visible;
  536. }
  537. to {
  538. transform: translate3d(0, 0, 0);
  539. }
  540. }
  541. @keyframes slideInDown {
  542. from {
  543. transform: translate3d(0, -100%, 0);
  544. visibility: visible;
  545. }
  546. to {
  547. transform: translate3d(0, 0, 0);
  548. }
  549. }
  550. .vditor {
  551. display: flex;
  552. flex-direction: column;
  553. border: 1px solid var(--border-color);
  554. border-radius: 3px;
  555. box-sizing: border-box;
  556. font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
  557. }
  558. .vditor--fullscreen {
  559. position: fixed;
  560. top: 0;
  561. width: 100% !important;
  562. left: 0;
  563. height: 100vh !important;
  564. z-index: 90;
  565. border-radius: 0;
  566. }
  567. .vditor-content {
  568. display: flex;
  569. min-height: 60px;
  570. flex: 1;
  571. min-width: 1px;
  572. position: relative;
  573. }
  574. .vditor-preview {
  575. flex: 1;
  576. min-width: 1px;
  577. overflow: auto;
  578. margin-left: -1px;
  579. border-left: 1px solid var(--border-color);
  580. box-sizing: border-box;
  581. border-radius: 0 0 3px 0;
  582. background-color: var(--textarea-background-color);
  583. }
  584. .vditor-preview::-webkit-scrollbar {
  585. display: none;
  586. }
  587. .vditor-preview__action {
  588. text-align: center;
  589. padding: 10px;
  590. background-color: var(--toolbar-background-color);
  591. }
  592. .vditor-preview__action button {
  593. background-color: var(--toolbar-background-color);
  594. color: var(--toolbar-icon-color);
  595. line-height: 20px;
  596. border: 0;
  597. margin: 0 10px;
  598. cursor: pointer;
  599. padding: 0 7px;
  600. font-size: 12px;
  601. }
  602. .vditor-preview__action button.vditor-preview__action--current,
  603. .vditor-preview__action button:hover {
  604. color: var(--toolbar-icon-hover-color);
  605. background-color: var(--toolbar-background-color);
  606. }
  607. .vditor-preview__action button:focus {
  608. outline: none;
  609. }
  610. .vditor-preview__action button svg {
  611. fill: currentColor;
  612. height: 15px;
  613. width: 15px;
  614. vertical-align: middle;
  615. }
  616. .vditor-preview > .vditor-reset {
  617. padding: 10px;
  618. margin: 0 auto;
  619. }
  620. .vditor-preview img:not(.emoji) {
  621. cursor: pointer;
  622. }
  623. .vditor-devtools {
  624. display: none;
  625. background-color: var(--textarea-background-color);
  626. overflow: auto;
  627. flex: 1;
  628. min-width: 1px;
  629. box-shadow: inset 1px 0 var(--border-color);
  630. box-sizing: border-box;
  631. border-radius: 0 0 3px 0;
  632. padding: 10px;
  633. }
  634. .vditor-counter {
  635. padding: 3px;
  636. color: var(--toolbar-icon-color);
  637. background-color: var(--count-background-color);
  638. border-radius: 3px;
  639. font-size: 12px;
  640. -webkit-user-select: none;
  641. -moz-user-select: none;
  642. -ms-user-select: none;
  643. user-select: none;
  644. float: right;
  645. margin: 8px 3px 0 0;
  646. }
  647. .vditor-counter--error {
  648. color: #d23f31;
  649. background-color: rgba(210, 63, 49, 0.1);
  650. }
  651. .vditor-resize {
  652. padding: 3px 0;
  653. cursor: row-resize;
  654. -webkit-user-select: none;
  655. -moz-user-select: none;
  656. -ms-user-select: none;
  657. user-select: none;
  658. position: absolute;
  659. width: 100%;
  660. }
  661. .vditor-resize--top {
  662. top: -3px;
  663. }
  664. .vditor-resize--bottom {
  665. bottom: -3px;
  666. }
  667. .vditor-resize > div {
  668. height: 3px;
  669. background-color: var(--resize-background-color);
  670. transition: all 0.15s ease-in-out;
  671. }
  672. .vditor-resize:hover > div,
  673. .vditor-resize--selected > div {
  674. background-color: var(--resize-hover-background-color);
  675. }
  676. .vditor-resize:hover svg,
  677. .vditor-resize--selected svg {
  678. color: var(--resize-hover-icon-color);
  679. }
  680. .vditor-resize svg {
  681. fill: currentColor;
  682. stroke-width: 0;
  683. stroke: currentColor;
  684. width: 13px;
  685. height: 3px;
  686. display: block;
  687. margin: 0 auto;
  688. color: var(--resize-icon-color);
  689. }
  690. .vditor-upload {
  691. position: absolute;
  692. height: 3px;
  693. left: 0;
  694. top: -2px;
  695. transition: all 0.15s ease-in-out;
  696. background-color: #4285f4;
  697. }
  698. .vditor-tip {
  699. position: absolute;
  700. font-size: 12px;
  701. top: 10px;
  702. -webkit-animation-duration: 0.15s;
  703. animation-duration: 0.15s;
  704. -webkit-animation-fill-mode: both;
  705. animation-fill-mode: both;
  706. left: 50%;
  707. z-index: 5;
  708. }
  709. .vditor-tip--show {
  710. display: block;
  711. -webkit-animation-name: slideInDown;
  712. animation-name: slideInDown;
  713. }
  714. .vditor-tip__content {
  715. text-align: left;
  716. display: inline-block;
  717. line-height: 16px;
  718. padding: 3px 10px;
  719. border-radius: 3px;
  720. background: var(--toolbar-background-color);
  721. position: relative;
  722. margin-left: -50%;
  723. color: var(--toolbar-icon-color);
  724. max-width: 100%;
  725. box-shadow: var(--panel-shadow);
  726. }
  727. .vditor-tip__content ul {
  728. margin: 2px 0;
  729. padding: 0 0 0 18px;
  730. }
  731. .vditor-tip__content a {
  732. color: #4285f4;
  733. }
  734. .vditor-tip__close {
  735. position: absolute;
  736. color: var(--toolbar-icon-color);
  737. top: -7px;
  738. right: -15px;
  739. font-weight: bold;
  740. cursor: pointer;
  741. }
  742. .vditor-tip__close:hover {
  743. color: var(--toolbar-icon-hover-color);
  744. }
  745. .vditor-img {
  746. position: fixed;
  747. top: 0;
  748. left: 0;
  749. right: 0;
  750. bottom: 0;
  751. display: flex;
  752. flex-direction: column;
  753. z-index: 100;
  754. }
  755. .vditor-img__bar {
  756. border-bottom: 1px solid var(--border-color);
  757. background-color: var(--toolbar-background-color);
  758. text-align: center;
  759. height: 36px;
  760. box-sizing: border-box;
  761. display: flex;
  762. align-items: center;
  763. justify-content: center;
  764. }
  765. .vditor-img__btn {
  766. display: flex;
  767. align-items: center;
  768. cursor: pointer;
  769. margin-left: 24px;
  770. -webkit-user-select: none;
  771. -moz-user-select: none;
  772. -ms-user-select: none;
  773. user-select: none;
  774. color: var(--toolbar-icon-color);
  775. }
  776. .vditor-img__btn:hover {
  777. color: var(--toolbar-icon-hover-color);
  778. }
  779. .vditor-img__btn svg {
  780. height: 14px;
  781. width: 14px;
  782. margin-right: 8px;
  783. fill: currentColor;
  784. }
  785. .vditor-img__img {
  786. flex: 1;
  787. background-color: var(--textarea-background-color);
  788. overflow: auto;
  789. cursor: zoom-out;
  790. }
  791. .vditor-img__img img {
  792. max-width: none;
  793. }
  794. .vditor-hint {
  795. background-color: var(--panel-background-color);
  796. position: absolute;
  797. box-shadow: var(--panel-shadow);
  798. border-radius: 3px;
  799. padding: 5px 0;
  800. z-index: 4;
  801. line-height: 20px;
  802. list-style: none;
  803. font-size: 12px;
  804. margin: 0;
  805. max-width: 250px;
  806. min-width: 80px;
  807. display: none;
  808. }
  809. .vditor-hint .vditor-hint {
  810. margin-top: -31px;
  811. left: 100%;
  812. right: auto;
  813. }
  814. .vditor-hint .vditor-hint.vditor-panel--left {
  815. right: 100%;
  816. left: auto;
  817. }
  818. .vditor-hint button {
  819. color: var(--toolbar-icon-color);
  820. display: block;
  821. padding: 3px 10px;
  822. border: 0;
  823. border-radius: 0;
  824. line-height: 20px;
  825. width: 100%;
  826. box-sizing: border-box;
  827. text-align: left;
  828. margin: 0;
  829. background-color: transparent;
  830. cursor: pointer;
  831. white-space: nowrap;
  832. text-overflow: ellipsis;
  833. overflow: hidden;
  834. }
  835. .vditor-hint button:focus {
  836. outline: none;
  837. }
  838. .vditor-hint--current,
  839. .vditor-hint button:not(.vditor-menu--disabled):hover {
  840. background-color: var(--toolbar-background-color) !important;
  841. color: var(--toolbar-icon-hover-color) !important;
  842. }
  843. .vditor-hint__emoji {
  844. font-size: 16px;
  845. float: left;
  846. margin-right: 3px;
  847. }
  848. .vditor-hint img {
  849. height: 20px;
  850. width: 20px;
  851. float: left;
  852. margin-right: 3px;
  853. }
  854. .vditor-reset {
  855. color: #24292e;
  856. font-variant-ligatures: no-common-ligatures;
  857. font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
  858. word-wrap: break-word;
  859. overflow: auto;
  860. line-height: 1.5;
  861. font-size: 16px;
  862. word-break: break-word;
  863. }
  864. .vditor-reset--anchor {
  865. padding-left: 20px;
  866. }
  867. .vditor-reset--error {
  868. color: #d23f31;
  869. font-size: 12px;
  870. display: block;
  871. line-height: 16px;
  872. }
  873. .vditor-reset ul ul ul {
  874. list-style-type: square;
  875. }
  876. .vditor-reset ul ul {
  877. list-style-type: circle;
  878. }
  879. .vditor-reset ul {
  880. list-style-type: disc;
  881. }
  882. .vditor-reset ul,
  883. .vditor-reset ol {
  884. padding-left: 2em;
  885. margin-top: 0;
  886. margin-bottom: 16px;
  887. }
  888. .vditor-reset li + li {
  889. margin-top: 0.25em;
  890. }
  891. .vditor-reset li p {
  892. margin-top: 16px;
  893. }
  894. .vditor-reset audio {
  895. max-width: 100%;
  896. }
  897. .vditor-reset audio:focus {
  898. outline: none;
  899. }
  900. .vditor-reset video {
  901. max-height: 90vh;
  902. max-width: 100%;
  903. }
  904. .vditor-reset img {
  905. max-width: 100%;
  906. }
  907. .vditor-reset img.emoji {
  908. cursor: auto;
  909. max-width: 20px;
  910. vertical-align: sub;
  911. }
  912. .vditor-reset h1,
  913. .vditor-reset h2,
  914. .vditor-reset h3,
  915. .vditor-reset h4,
  916. .vditor-reset h5,
  917. .vditor-reset h6 {
  918. margin-top: 24px;
  919. margin-bottom: 16px;
  920. font-weight: 600;
  921. line-height: 1.25;
  922. }
  923. .vditor-reset h1:hover .vditor-anchor svg,
  924. .vditor-reset h2:hover .vditor-anchor svg,
  925. .vditor-reset h3:hover .vditor-anchor svg,
  926. .vditor-reset h4:hover .vditor-anchor svg,
  927. .vditor-reset h5:hover .vditor-anchor svg,
  928. .vditor-reset h6:hover .vditor-anchor svg {
  929. visibility: visible;
  930. }
  931. .vditor-reset h1 {
  932. font-size: 1.75em;
  933. }
  934. .vditor-reset h2 {
  935. font-size: 1.55em;
  936. }
  937. .vditor-reset h3 {
  938. font-size: 1.38em;
  939. }
  940. .vditor-reset h4 {
  941. font-size: 1.25em;
  942. }
  943. .vditor-reset h5 {
  944. font-size: 1.13em;
  945. }
  946. .vditor-reset h6 {
  947. font-size: 1em;
  948. }
  949. .vditor-reset hr {
  950. height: 2px;
  951. padding: 0;
  952. margin: 24px 0;
  953. background-color: #eaecef;
  954. border: 0;
  955. }
  956. .vditor-reset p {
  957. margin-top: 0;
  958. margin-bottom: 16px;
  959. }
  960. .vditor-reset blockquote {
  961. padding: 0 1em;
  962. color: #6a737d;
  963. border-left: 0.25em solid #eaecef;
  964. margin: 0 0 16px 0;
  965. }
  966. .vditor-reset blockquote > :first-child {
  967. margin-top: 0;
  968. }
  969. .vditor-reset blockquote > :last-child {
  970. margin-bottom: 0;
  971. }
  972. .vditor-reset ins > iframe {
  973. border: 0;
  974. }
  975. .vditor-reset iframe {
  976. border: 1px solid #d1d5da;
  977. max-width: 100%;
  978. box-sizing: border-box;
  979. }
  980. .vditor-reset iframe.iframe__video {
  981. min-width: 80%;
  982. min-height: 36vh;
  983. }
  984. .vditor-reset table {
  985. border-collapse: collapse;
  986. empty-cells: show;
  987. margin-bottom: 16px;
  988. overflow: auto;
  989. border-spacing: 0;
  990. display: block;
  991. word-break: keep-all;
  992. width: 100%;
  993. }
  994. .vditor-reset table tr {
  995. background-color: #fafbfc;
  996. border-top: 1px solid #c6cbd1;
  997. }
  998. .vditor-reset table td,
  999. .vditor-reset table th {
  1000. padding: 6px 13px;
  1001. border: 1px solid #dfe2e5;
  1002. word-break: normal;
  1003. white-space: nowrap;
  1004. }
  1005. .vditor-reset table td:first-child::after,
  1006. .vditor-reset table th:first-child::after {
  1007. content: "";
  1008. display: inline-block;
  1009. vertical-align: top;
  1010. min-height: 24px;
  1011. }
  1012. .vditor-reset table th {
  1013. font-weight: 600;
  1014. }
  1015. .vditor-reset table tbody tr:nth-child(2n) {
  1016. background-color: #fff;
  1017. }
  1018. .vditor-reset code:not(.hljs):not(.highlight-chroma) {
  1019. padding: 0.2em 0.4em;
  1020. margin: 0;
  1021. font-size: 85%;
  1022. border-radius: 3px;
  1023. font-family: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
  1024. word-break: break-word;
  1025. background-size: 20px 20px;
  1026. white-space: pre-wrap;
  1027. }
  1028. .vditor-reset pre {
  1029. margin: 1em 0;
  1030. }
  1031. .vditor-reset pre > code {
  1032. margin: 0;
  1033. font-size: 85%;
  1034. padding: 0.5em;
  1035. border-radius: 5px;
  1036. display: block;
  1037. overflow: auto;
  1038. white-space: pre;
  1039. font-family: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
  1040. background-size: 20px 20px;
  1041. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AgMAAABHkjHhAAAACVBMVEWAgIBaWlo+Pj7rTFvWAAAAA3RSTlMHCAw+VhR4AAAA+klEQVQoz4WSMW7EQAhFPxKWNh2FCx+HkaZI6RRb5DYbyVfIJXLKDCFoMbaTKSw/8ZnPAPjaH2xgZcUNUDADD7D9LtDBCLZ45fbkvo/30K8yeI64pPwl6znd/3n/Oe93P3ho9qeh72btTFzqkz0rsJle8Zr81OLEwZ1dv/713uWqvu2pl+k0fy7MWtj9r/tN5q/02z89qa/L4Dc2LvM93kezPfXlME/O86EbY/V9GB9ePX8G1/6W+/9h1dq/HGfTfzT3j/xNo7522Bfnqe5jO/fvhVthlfk434v3iO9zG/UOphyPeinPl1J8Gtaa7xPTa/Dk+RIs4deMvwGvcGsmsCvJ0AAAAABJRU5ErkJggg==);
  1042. word-break: initial;
  1043. word-wrap: normal;
  1044. }
  1045. .vditor-reset pre:hover div.vditor-copy {
  1046. display: block;
  1047. }
  1048. .vditor-reset .language-math,
  1049. .vditor-reset .language-echarts,
  1050. .vditor-reset .language-mindmap,
  1051. .vditor-reset .language-plantuml,
  1052. .vditor-reset .language-mermaid,
  1053. .vditor-reset .language-markmap,
  1054. .vditor-reset .language-abc,
  1055. .vditor-reset .language-flowchart,
  1056. .vditor-reset .language-graphviz {
  1057. margin-bottom: 16px;
  1058. }
  1059. .vditor-reset .language-math mjx-container:focus {
  1060. outline: none;
  1061. cursor: context-menu;
  1062. }
  1063. .vditor-reset .language-echarts,
  1064. .vditor-reset .language-mindmap {
  1065. overflow: hidden;
  1066. height: 420px;
  1067. }
  1068. .vditor-reset .language-mermaid,
  1069. .vditor-reset .language-markmap,
  1070. .vditor-reset .language-flowchart,
  1071. .vditor-reset .language-graphviz {
  1072. text-align: center;
  1073. }
  1074. .vditor-reset .language-graphviz parsererror {
  1075. overflow: auto;
  1076. }
  1077. .vditor-reset kbd {
  1078. display: inline-block;
  1079. padding: 3px 5px;
  1080. font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
  1081. line-height: 10px;
  1082. color: #24292e;
  1083. vertical-align: middle;
  1084. background-color: #fafbfc;
  1085. border: solid 1px #d1d5da;
  1086. border-radius: 3px;
  1087. box-shadow: inset 0 -1px 0 #d1d5da;
  1088. }
  1089. .vditor-reset summary {
  1090. cursor: pointer;
  1091. }
  1092. .vditor-reset summary:focus {
  1093. outline: none;
  1094. }
  1095. .vditor-reset svg {
  1096. height: auto;
  1097. width: auto;
  1098. stroke-width: initial;
  1099. }
  1100. .vditor-reset p:last-child,
  1101. .vditor-reset blockquote:last-child,
  1102. .vditor-reset pre:last-child,
  1103. .vditor-reset ul:last-child,
  1104. .vditor-reset ol:last-child,
  1105. .vditor-reset hr:last-child {
  1106. margin-bottom: 0;
  1107. }
  1108. .vditor-comment {
  1109. border-bottom: 2px solid #f8e6ab;
  1110. }
  1111. .vditor-comment--focus,
  1112. .vditor-comment--hover {
  1113. background-color: #faf1d1;
  1114. border-bottom: 2px solid #ffc60a;
  1115. }
  1116. .vditor-comment--focus .vditor-comment,
  1117. .vditor-comment--hover .vditor-comment {
  1118. border-bottom: 2px solid #ffc60a;
  1119. }
  1120. .vditor-task {
  1121. list-style: none !important;
  1122. word-break: break-all;
  1123. }
  1124. .vditor-task input {
  1125. margin: 0 0.2em 0.25em -1.6em;
  1126. font-size: 12px;
  1127. vertical-align: middle;
  1128. }
  1129. .vditor-copy {
  1130. position: relative;
  1131. display: none;
  1132. z-index: 1;
  1133. }
  1134. .vditor-copy textarea {
  1135. position: absolute;
  1136. left: -100000px;
  1137. height: 10px;
  1138. }
  1139. .vditor-copy span {
  1140. cursor: pointer;
  1141. position: absolute;
  1142. right: 15px;
  1143. top: 0.5em;
  1144. }
  1145. .vditor-copy svg {
  1146. color: #586069;
  1147. height: 14px;
  1148. width: 14px !important;
  1149. display: block;
  1150. fill: currentColor;
  1151. }
  1152. .vditor-linenumber {
  1153. padding-left: 4em !important;
  1154. position: relative;
  1155. }
  1156. .vditor-linenumber__rows {
  1157. position: absolute;
  1158. pointer-events: none;
  1159. top: 0.5em;
  1160. left: 0;
  1161. width: 3em;
  1162. /* works for line-numbers below 1000 lines */
  1163. -webkit-user-select: none;
  1164. -moz-user-select: none;
  1165. -ms-user-select: none;
  1166. user-select: none;
  1167. counter-reset: linenumber;
  1168. }
  1169. .vditor-linenumber__rows > span {
  1170. pointer-events: none;
  1171. display: block;
  1172. }
  1173. .vditor-linenumber__rows > span::before {
  1174. counter-increment: linenumber;
  1175. content: counter(linenumber);
  1176. color: rgba(158, 150, 150, 0.38);
  1177. display: block;
  1178. padding-right: 1em;
  1179. text-align: right;
  1180. }
  1181. .vditor-speech {
  1182. position: absolute;
  1183. display: none;
  1184. background-color: #f6f8fa;
  1185. border: 1px solid #d1d5da;
  1186. border-radius: 3px;
  1187. padding: 3px;
  1188. cursor: pointer;
  1189. color: #586069;
  1190. }
  1191. .vditor-speech:hover,
  1192. .vditor-speech--current {
  1193. color: #4285f4;
  1194. }
  1195. .vditor-speech svg {
  1196. height: 14px;
  1197. width: 14px;
  1198. fill: currentColor;
  1199. display: block;
  1200. stroke-width: 0;
  1201. stroke: currentColor;
  1202. }
  1203. .vditor-anchor {
  1204. margin-left: 5px;
  1205. }
  1206. .vditor-anchor--left {
  1207. float: left;
  1208. padding-right: 4px;
  1209. margin-left: -20px;
  1210. }
  1211. .vditor-anchor svg {
  1212. visibility: hidden;
  1213. }
  1214. .vditor-anchor:hover svg {
  1215. visibility: visible;
  1216. }
  1217. .vditor-anchor:focus {
  1218. outline: none;
  1219. }
  1220. .vditor-linkcard {
  1221. margin: 31px auto 16px;
  1222. transition: all 0.15s ease-in-out;
  1223. cursor: pointer;
  1224. max-width: 768px;
  1225. padding: 0 10px;
  1226. }
  1227. .vditor-linkcard a {
  1228. border-radius: 3px;
  1229. background-color: #f6f8fa;
  1230. overflow: hidden;
  1231. max-height: 250px;
  1232. display: flex;
  1233. text-decoration: none;
  1234. flex-wrap: wrap-reverse;
  1235. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  1236. }
  1237. .vditor-linkcard a:hover {
  1238. box-shadow: 0 0 3px rgba(0, 0, 0, 0.13), 0 3px 6px rgba(0, 0, 0, 0.26);
  1239. text-decoration: none;
  1240. }
  1241. .vditor-linkcard a:visited .vditor-linkcard__abstract {
  1242. color: rgba(88, 96, 105, 0.36);
  1243. }
  1244. .vditor-linkcard__info {
  1245. padding: 10px;
  1246. min-width: 200px;
  1247. box-sizing: border-box;
  1248. flex: 1;
  1249. }
  1250. .vditor-linkcard__title {
  1251. font-size: 14px;
  1252. font-weight: 400;
  1253. color: #24292e;
  1254. display: flex;
  1255. align-items: center;
  1256. }
  1257. .vditor-linkcard__title img {
  1258. cursor: pointer;
  1259. height: 20px;
  1260. width: 20px;
  1261. border-radius: 3px;
  1262. flex-shrink: 0;
  1263. margin-right: 5px;
  1264. }
  1265. .vditor-linkcard__abstract {
  1266. word-wrap: break-word;
  1267. word-break: break-all;
  1268. -webkit-line-clamp: 2;
  1269. overflow: hidden;
  1270. text-overflow: ellipsis;
  1271. -webkit-box-orient: vertical;
  1272. display: -webkit-box;
  1273. font-size: 13px;
  1274. color: #586069;
  1275. margin: 5px 0;
  1276. }
  1277. .vditor-linkcard__site {
  1278. font-size: 12px;
  1279. color: #4285f4;
  1280. }
  1281. .vditor-linkcard__image {
  1282. background-size: cover;
  1283. background-repeat: no-repeat;
  1284. background-position: center center;
  1285. max-width: 250px;
  1286. min-width: 126px;
  1287. cursor: pointer;
  1288. background-color: rgba(88, 96, 105, 0.36);
  1289. }
  1290. .vditor-footnotes__goto-ref {
  1291. text-decoration: none;
  1292. }
  1293. .vditor-toc {
  1294. margin-bottom: 16px;
  1295. -webkit-user-select: text;
  1296. -moz-user-select: text;
  1297. -ms-user-select: text;
  1298. user-select: text;
  1299. color: #4285f4;
  1300. }
  1301. .vditor-toc .vditor-outline__action {
  1302. display: none;
  1303. }
  1304. .vditor-toc ul {
  1305. list-style: none !important;
  1306. padding-left: 1em;
  1307. }
  1308. .vditor-toc > ul {
  1309. padding-left: 0;
  1310. }
  1311. .vditor-toc span {
  1312. cursor: pointer;
  1313. }
  1314. .vditor-toc li > span > svg {
  1315. width: 0;
  1316. height: 0;
  1317. }
  1318. .vditor-outline {
  1319. width: 250px;
  1320. border-right: 1px solid var(--border-color);
  1321. background-color: var(--panel-background-color);
  1322. display: none;
  1323. overflow: auto;
  1324. }
  1325. .vditor-outline--right {
  1326. border-right: 0;
  1327. border-left: 1px solid var(--border-color);
  1328. }
  1329. .vditor-outline::-webkit-scrollbar {
  1330. display: none;
  1331. }
  1332. .vditor-outline ul {
  1333. list-style: none !important;
  1334. padding-left: 1em;
  1335. margin: 0;
  1336. }
  1337. .vditor-outline__content > ul {
  1338. padding-left: 0;
  1339. }
  1340. .vditor-outline li > span {
  1341. display: flex;
  1342. align-items: center;
  1343. padding: 5px 10px;
  1344. cursor: pointer;
  1345. color: var(--textarea-text-color);
  1346. }
  1347. .vditor-outline li > span > svg {
  1348. height: 10px;
  1349. width: 10px;
  1350. flex-shrink: 0;
  1351. }
  1352. .vditor-outline li > span:hover {
  1353. color: var(--toolbar-icon-hover-color);
  1354. }
  1355. .vditor-outline li > span > span {
  1356. white-space: nowrap;
  1357. overflow: hidden;
  1358. text-overflow: ellipsis;
  1359. }
  1360. .vditor-outline__title {
  1361. border-bottom: 1px dashed var(--border-color);
  1362. padding: 5px 10px;
  1363. color: var(--toolbar-icon-color);
  1364. font-size: 12px;
  1365. }
  1366. .vditor-outline__action {
  1367. transition: all 0.15s ease-in-out;
  1368. fill: currentColor;
  1369. margin-right: 5px;
  1370. flex-shrink: 0;
  1371. }
  1372. .vditor-outline__action--close {
  1373. transform: rotate(-90deg);
  1374. }
  1375. .vditor-wysiwyg {
  1376. box-sizing: border-box;
  1377. flex: 1;
  1378. position: relative;
  1379. width: 100%;
  1380. min-width: 1px;
  1381. }
  1382. .vditor-wysiwyg pre.vditor-reset {
  1383. background-color: var(--panel-background-color);
  1384. margin: 0;
  1385. white-space: pre-wrap;
  1386. height: 100%;
  1387. box-sizing: border-box;
  1388. }
  1389. .vditor-wysiwyg pre.vditor-reset[contenteditable="false"] {
  1390. opacity: 0.3;
  1391. cursor: not-allowed;
  1392. }
  1393. .vditor-wysiwyg pre.vditor-reset:empty::before {
  1394. content: attr(placeholder);
  1395. color: var(--second-color);
  1396. }
  1397. .vditor-wysiwyg pre.vditor-reset:focus {
  1398. outline: none;
  1399. background-color: var(--textarea-background-color);
  1400. }
  1401. .vditor-wysiwyg pre.vditor-reset:after {
  1402. content: "";
  1403. height: var(--editor-bottom);
  1404. display: block;
  1405. }
  1406. .vditor-wysiwyg blockquote:empty::before,
  1407. .vditor-wysiwyg pre > code:empty::before,
  1408. .vditor-wysiwyg p:empty::before,
  1409. .vditor-wysiwyg h1:empty::after,
  1410. .vditor-wysiwyg h2:empty::after,
  1411. .vditor-wysiwyg h3:empty::after,
  1412. .vditor-wysiwyg h4:empty::after,
  1413. .vditor-wysiwyg h5:empty::after,
  1414. .vditor-wysiwyg h6:empty::after {
  1415. content: ' ';
  1416. }
  1417. .vditor-wysiwyg code[data-marker="`"] {
  1418. padding-left: 0 !important;
  1419. padding-right: 0 !important;
  1420. }
  1421. .vditor-wysiwyg__block pre:first-child {
  1422. margin-bottom: -1em;
  1423. }
  1424. .vditor-wysiwyg__block pre:first-child code {
  1425. color: var(--textarea-text-color);
  1426. height: auto;
  1427. text-align: left;
  1428. }
  1429. .vditor-wysiwyg__block pre:last-child {
  1430. margin-bottom: 1em;
  1431. }
  1432. .vditor-wysiwyg__preview {
  1433. cursor: pointer;
  1434. white-space: initial;
  1435. min-height: 27px;
  1436. }
  1437. .vditor-wysiwyg > .vditor-reset > h1:before,
  1438. .vditor-wysiwyg > .vditor-reset > h2:before,
  1439. .vditor-wysiwyg > .vditor-reset > h3:before,
  1440. .vditor-wysiwyg > .vditor-reset > h4:before,
  1441. .vditor-wysiwyg > .vditor-reset > h5:before,
  1442. .vditor-wysiwyg > .vditor-reset > h6:before,
  1443. .vditor-wysiwyg div.vditor-wysiwyg__block:before,
  1444. .vditor-wysiwyg div[data-type="link-ref-defs-block"]:before,
  1445. .vditor-wysiwyg div[data-type="footnotes-block"]:before,
  1446. .vditor-wysiwyg .vditor-toc:before {
  1447. float: left;
  1448. padding-right: 4px;
  1449. margin-left: -29px;
  1450. content: 'H1';
  1451. font-size: 0.85rem;
  1452. font-weight: normal;
  1453. color: var(--second-color);
  1454. }
  1455. .vditor-wysiwyg > .vditor-reset > h2:before {
  1456. content: 'H2';
  1457. }
  1458. .vditor-wysiwyg > .vditor-reset > h3:before {
  1459. content: 'H3';
  1460. }
  1461. .vditor-wysiwyg > .vditor-reset > h4:before {
  1462. content: 'H4';
  1463. }
  1464. .vditor-wysiwyg > .vditor-reset > h5:before {
  1465. content: 'H5';
  1466. }
  1467. .vditor-wysiwyg > .vditor-reset > h6:before {
  1468. content: 'H6';
  1469. }
  1470. .vditor-wysiwyg div[data-type="link-ref-defs-block"]:before {
  1471. content: '"A"';
  1472. }
  1473. .vditor-wysiwyg div[data-type="footnotes-block"]:before {
  1474. content: '^F';
  1475. }
  1476. .vditor-wysiwyg div.vditor-wysiwyg__block:before {
  1477. content: "</>";
  1478. }
  1479. .vditor-wysiwyg div.vditor-wysiwyg__block[data-type="yaml-front-matter"]:before {
  1480. content: "F";
  1481. }
  1482. .vditor-wysiwyg div.vditor-wysiwyg__block[data-type="math-block"]:before {
  1483. content: "$$";
  1484. }
  1485. .vditor-wysiwyg .vditor-toc:before {
  1486. content: "ToC";
  1487. }
  1488. .vditor-wysiwyg hr {
  1489. display: inline-block;
  1490. margin: 12px 0;
  1491. width: 100%;
  1492. }
  1493. .vditor-wysiwyg details {
  1494. white-space: initial;
  1495. }
  1496. .vditor-wysiwyg a {
  1497. cursor: pointer;
  1498. }
  1499. .vditor-wysiwyg span[data-type="backslash"] > span {
  1500. display: none;
  1501. color: var(--second-color);
  1502. }
  1503. .vditor-wysiwyg span[data-type="link-ref"],
  1504. .vditor-wysiwyg sup[data-type="footnotes-ref"] {
  1505. color: #4285f4;
  1506. }
  1507. .vditor-wysiwyg span[data-type="toc-h"] {
  1508. color: #4285f4;
  1509. text-decoration: underline;
  1510. }
  1511. .vditor-wysiwyg div[data-type="footnotes-block"] {
  1512. border-top: 2px solid var(--heading-border-color);
  1513. padding-top: 24px;
  1514. margin-top: 24px;
  1515. }
  1516. .vditor-wysiwyg div[data-type="link-ref-defs-block"] {
  1517. color: var(--blockquote-color);
  1518. }
  1519. @media screen and (max-width: 520px) {
  1520. .vditor-wysiwyg h1:before,
  1521. .vditor-wysiwyg h2:before,
  1522. .vditor-wysiwyg h3:before,
  1523. .vditor-wysiwyg h4:before,
  1524. .vditor-wysiwyg h5:before,
  1525. .vditor-wysiwyg h6:before,
  1526. .vditor-wysiwyg div.vditor-wysiwyg__block:before,
  1527. .vditor-wysiwyg div[data-type="link-ref-defs-block"]:before,
  1528. .vditor-wysiwyg div[data-type="footnotes-block"]:before,
  1529. .vditor-wysiwyg .vditor-toc:before {
  1530. content: none;
  1531. }
  1532. }
  1533. .vditor-ir {
  1534. box-sizing: border-box;
  1535. flex: 1;
  1536. min-width: 1px;
  1537. position: relative;
  1538. width: 100%;
  1539. }
  1540. .vditor-ir__node[data-type="code-block"]:before,
  1541. .vditor-ir__node[data-type="code-block"]:after,
  1542. .vditor-ir__node[data-type="yaml-front-matter"]:before,
  1543. .vditor-ir__node[data-type="yaml-front-matter"]:after,
  1544. .vditor-ir__node[data-type="math-block"]:before,
  1545. .vditor-ir__node[data-type="math-block"]:after {
  1546. content: ' ';
  1547. color: var(--second-color);
  1548. }
  1549. .vditor-ir__node:not(.vditor-ir__node--expand) .vditor-ir__marker {
  1550. padding: 0 !important;
  1551. }
  1552. .vditor-ir__node:not(.vditor-ir__node--expand)[data-type="a"] {
  1553. cursor: pointer;
  1554. }
  1555. .vditor-ir__node[data-type="link-ref"],
  1556. .vditor-ir__node[data-type="footnotes-ref"] {
  1557. color: #4285f4;
  1558. }
  1559. .vditor-ir__node[data-type="html-block"] {
  1560. margin-bottom: 1em;
  1561. }
  1562. .vditor-ir__node .vditor-ir__marker {
  1563. width: 0;
  1564. overflow: hidden;
  1565. display: inline-block;
  1566. height: 0;
  1567. transition: all 0.15s ease-in-out;
  1568. }
  1569. .vditor-ir__node--hidden .vditor-ir__marker {
  1570. visibility: hidden;
  1571. }
  1572. .vditor-ir__node--expand .vditor-ir__marker {
  1573. color: var(--second-color);
  1574. display: inline;
  1575. height: auto;
  1576. width: auto;
  1577. }
  1578. .vditor-ir__node--expand .vditor-ir__marker--hide {
  1579. display: none;
  1580. }
  1581. .vditor-ir__node--expand .vditor-ir__marker--heading {
  1582. color: var(--ir-heading-color);
  1583. }
  1584. .vditor-ir__node--expand .vditor-ir__marker--bi {
  1585. color: var(--ir-bi-color);
  1586. }
  1587. .vditor-ir__node--expand .vditor-ir__marker--link {
  1588. color: var(--ir-link-color);
  1589. }
  1590. .vditor-ir__node--expand .vditor-ir__marker--title {
  1591. color: var(--ir-title-color);
  1592. }
  1593. .vditor-ir__node--expand .vditor-ir__marker--bracket {
  1594. color: var(--ir-bracket-color);
  1595. text-decoration: underline;
  1596. }
  1597. .vditor-ir__node--expand .vditor-ir__marker--paren {
  1598. color: var(--ir-paren-color);
  1599. }
  1600. .vditor-ir__node--expand .vditor-ir__marker--info {
  1601. color: var(--ir-heading-color);
  1602. }
  1603. .vditor-ir__node--expand .vditor-ir__marker--pre code {
  1604. color: var(--textarea-text-color);
  1605. height: auto;
  1606. text-align: left;
  1607. }
  1608. .vditor-ir__node--expand[data-type="code-block"]:before,
  1609. .vditor-ir__node--expand[data-type="code-block"]:after {
  1610. content: '```';
  1611. }
  1612. .vditor-ir__node--expand[data-type="yaml-front-matter"]:before,
  1613. .vditor-ir__node--expand[data-type="yaml-front-matter"]:after {
  1614. content: '---';
  1615. }
  1616. .vditor-ir__node--expand[data-type="math-block"]:before,
  1617. .vditor-ir__node--expand[data-type="math-block"]:after {
  1618. content: '$$';
  1619. }
  1620. .vditor-ir__node span[data-type="code-block-open-marker"],
  1621. .vditor-ir__node span[data-type="code-block-close-marker"],
  1622. .vditor-ir__node span[data-type="yaml-front-matter-open-marker"],
  1623. .vditor-ir__node span[data-type="yaml-front-matter-close-marker"],
  1624. .vditor-ir__node span[data-type="math-block-open-marker"],
  1625. .vditor-ir__node span[data-type="math-block-close-marker"] {
  1626. display: none;
  1627. }
  1628. .vditor-ir__preview {
  1629. cursor: pointer;
  1630. white-space: initial;
  1631. min-height: 27px;
  1632. }
  1633. .vditor-ir__link {
  1634. color: var(--ir-bracket-color);
  1635. text-decoration: underline;
  1636. }
  1637. .vditor-ir pre.vditor-reset {
  1638. background-color: var(--panel-background-color);
  1639. margin: 0;
  1640. white-space: pre-wrap;
  1641. height: 100%;
  1642. box-sizing: border-box;
  1643. }
  1644. .vditor-ir pre.vditor-reset[contenteditable="false"] {
  1645. opacity: 0.3;
  1646. cursor: not-allowed;
  1647. }
  1648. .vditor-ir pre.vditor-reset:empty::before {
  1649. content: attr(placeholder);
  1650. color: var(--second-color);
  1651. }
  1652. .vditor-ir pre.vditor-reset:focus {
  1653. outline: none;
  1654. background-color: var(--textarea-background-color);
  1655. }
  1656. .vditor-ir pre.vditor-reset:after {
  1657. content: "";
  1658. height: var(--editor-bottom);
  1659. display: block;
  1660. }
  1661. .vditor-ir pre.vditor-reset pre {
  1662. margin: 0;
  1663. }
  1664. .vditor-ir hr {
  1665. display: inline-block;
  1666. margin: 12px 0;
  1667. width: 100%;
  1668. }
  1669. .vditor-ir blockquote:empty::before,
  1670. .vditor-ir pre > code:empty::before,
  1671. .vditor-ir p:empty::before,
  1672. .vditor-ir h1:empty::after,
  1673. .vditor-ir h2:empty::after,
  1674. .vditor-ir h3:empty::after,
  1675. .vditor-ir h4:empty::after,
  1676. .vditor-ir h5:empty::after,
  1677. .vditor-ir h6:empty::after {
  1678. content: ' ';
  1679. }
  1680. .vditor-ir .vditor-reset > h1:before,
  1681. .vditor-ir .vditor-reset > h2:before,
  1682. .vditor-ir .vditor-reset > h3:before,
  1683. .vditor-ir .vditor-reset > h4:before,
  1684. .vditor-ir .vditor-reset > h5:before,
  1685. .vditor-ir .vditor-reset > h6:before,
  1686. .vditor-ir div[data-type="link-ref-defs-block"]:before,
  1687. .vditor-ir div[data-type="footnotes-block"]:before,
  1688. .vditor-ir .vditor-toc:before {
  1689. float: left;
  1690. padding-right: 4px;
  1691. margin-left: -29px;
  1692. content: 'H1';
  1693. font-size: 0.85rem;
  1694. font-weight: normal;
  1695. color: var(--second-color);
  1696. }
  1697. .vditor-ir .vditor-reset > h2:before {
  1698. content: 'H2';
  1699. }
  1700. .vditor-ir .vditor-reset > h3:before {
  1701. content: 'H3';
  1702. }
  1703. .vditor-ir .vditor-reset > h4:before {
  1704. content: 'H4';
  1705. }
  1706. .vditor-ir .vditor-reset > h5:before {
  1707. content: 'H5';
  1708. }
  1709. .vditor-ir .vditor-reset > h6:before {
  1710. content: 'H6';
  1711. }
  1712. .vditor-ir div[data-type="link-ref-defs-block"] {
  1713. color: var(--blockquote-color);
  1714. }
  1715. .vditor-ir div[data-type="link-ref-defs-block"]:before {
  1716. content: '"A"';
  1717. }
  1718. .vditor-ir div[data-type="footnotes-block"] {
  1719. border-top: 2px solid var(--heading-border-color);
  1720. padding-top: 24px;
  1721. margin-top: 24px;
  1722. }
  1723. .vditor-ir div[data-type="footnotes-block"]:before {
  1724. content: '^F';
  1725. }
  1726. .vditor-ir div[data-type="footnotes-block"] > div[data-type="footnotes-def"] > ul,
  1727. .vditor-ir div[data-type="footnotes-block"] > div[data-type="footnotes-def"] > ol,
  1728. .vditor-ir div[data-type="footnotes-block"] > div[data-type="footnotes-def"] > p,
  1729. .vditor-ir div[data-type="footnotes-block"] > div[data-type="footnotes-def"] > blockquote,
  1730. .vditor-ir div[data-type="footnotes-block"] > div[data-type="footnotes-def"] > pre,
  1731. .vditor-ir div[data-type="footnotes-block"] > div[data-type="footnotes-def"] > table,
  1732. .vditor-ir div[data-type="footnotes-block"] > div[data-type="footnotes-def"] > hr {
  1733. margin-left: 8px;
  1734. }
  1735. .vditor-ir .vditor-toc:before {
  1736. content: "ToC";
  1737. }
  1738. .vditor-ir .vditor-toc span[data-type="toc-h"] {
  1739. color: #4285f4;
  1740. text-decoration: underline;
  1741. }
  1742. @media screen and (max-width: 520px) {
  1743. .vditor-ir h1:before,
  1744. .vditor-ir h2:before,
  1745. .vditor-ir h3:before,
  1746. .vditor-ir h4:before,
  1747. .vditor-ir h5:before,
  1748. .vditor-ir h6:before,
  1749. .vditor-ir div[data-type="link-ref-defs-block"]:before,
  1750. .vditor-ir div[data-type="footnotes-block"]:before,
  1751. .vditor-ir .vditor-toc:before {
  1752. content: none;
  1753. }
  1754. }
  1755. .vditor-sv {
  1756. font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
  1757. margin: 0 1px 0 0;
  1758. overflow: auto;
  1759. width: 100%;
  1760. flex: 1;
  1761. min-width: 1px;
  1762. border: 0;
  1763. resize: none;
  1764. padding: 10px 9px 10px 10px;
  1765. box-sizing: border-box;
  1766. background-color: var(--panel-background-color);
  1767. outline: 0 none;
  1768. font-size: 16px;
  1769. line-height: 22px;
  1770. color: var(--textarea-text-color);
  1771. border-radius: 0 0 3px 3px;
  1772. font-variant-ligatures: no-common-ligatures;
  1773. white-space: pre-wrap;
  1774. word-break: break-word;
  1775. word-wrap: break-word;
  1776. }
  1777. .vditor-sv[contenteditable="false"] {
  1778. opacity: 0.3;
  1779. cursor: not-allowed;
  1780. }
  1781. .vditor-sv:empty::before {
  1782. content: attr(placeholder);
  1783. color: var(--second-color);
  1784. }
  1785. .vditor-sv:focus {
  1786. background-color: var(--textarea-background-color);
  1787. }
  1788. .vditor-sv:after {
  1789. content: "";
  1790. height: var(--editor-bottom);
  1791. display: block;
  1792. }
  1793. .vditor-sv span[data-type="newline"] + span[data-type="text"]:empty {
  1794. display: inherit;
  1795. }
  1796. .vditor-sv .sup {
  1797. vertical-align: super;
  1798. font-size: smaller;
  1799. }
  1800. .vditor-sv .strong {
  1801. font-weight: bold;
  1802. }
  1803. .vditor-sv .em {
  1804. font-style: italic;
  1805. }
  1806. .vditor-sv .s {
  1807. text-decoration: line-through;
  1808. }
  1809. .vditor-sv .mark:not(.vditor-sv__marker) {
  1810. background-color: yellow;
  1811. color: black;
  1812. }
  1813. .vditor-sv .h1 {
  1814. font-size: 1.75em;
  1815. line-height: 44px;
  1816. }
  1817. .vditor-sv .h2 {
  1818. font-size: 1.55em;
  1819. line-height: 38px;
  1820. }
  1821. .vditor-sv .h3 {
  1822. font-size: 1.38em;
  1823. line-height: 27px;
  1824. }
  1825. .vditor-sv .h4 {
  1826. font-size: 1.25em;
  1827. line-height: 25px;
  1828. }
  1829. .vditor-sv .h5 {
  1830. font-size: 1.13em;
  1831. }
  1832. .vditor-sv .h6 {
  1833. font-size: 1em;
  1834. }
  1835. .vditor-sv__marker {
  1836. color: var(--second-color);
  1837. }
  1838. .vditor-sv__marker--heading {
  1839. color: var(--ir-heading-color);
  1840. }
  1841. .vditor-sv__marker--bi {
  1842. color: var(--ir-bi-color);
  1843. }
  1844. .vditor-sv__marker--link {
  1845. color: var(--ir-link-color);
  1846. }
  1847. .vditor-sv__marker--title {
  1848. color: var(--ir-title-color);
  1849. }
  1850. .vditor-sv__marker--bracket {
  1851. color: var(--ir-bracket-color);
  1852. }
  1853. .vditor-sv__marker--paren {
  1854. color: var(--ir-paren-color);
  1855. }
  1856. .vditor-sv__marker--info {
  1857. color: var(--ir-heading-color);
  1858. }
  1859. .vditor-sv__marker--strong {
  1860. font-weight: bold;
  1861. }