vue.css 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858
  1. @import url("https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600");
  2. * {
  3. -webkit-font-smoothing: antialiased;
  4. -webkit-overflow-scrolling: touch;
  5. -webkit-tap-highlight-color: rgba(0,0,0,0);
  6. -webkit-text-size-adjust: none;
  7. -webkit-touch-callout: none;
  8. box-sizing: border-box;
  9. }
  10. body:not(.ready) {
  11. overflow: hidden;
  12. }
  13. body:not(.ready) [data-cloak],
  14. body:not(.ready) .app-nav,
  15. body:not(.ready) > nav {
  16. display: none;
  17. }
  18. div#app {
  19. font-size: 30px;
  20. font-weight: lighter;
  21. margin: 40vh auto;
  22. text-align: center;
  23. }
  24. div#app:empty::before {
  25. content: 'Loading...';
  26. }
  27. .emoji {
  28. height: 1.2rem;
  29. vertical-align: middle;
  30. }
  31. .progress {
  32. background-color: var(--theme-color, #42b983);
  33. height: 2px;
  34. left: 0px;
  35. position: fixed;
  36. right: 0px;
  37. top: 0px;
  38. transition: width 0.2s, opacity 0.4s;
  39. width: 0%;
  40. z-index: 999999;
  41. }
  42. .search a:hover {
  43. color: var(--theme-color, #42b983);
  44. }
  45. .search .search-keyword {
  46. color: var(--theme-color, #42b983);
  47. font-style: normal;
  48. font-weight: bold;
  49. }
  50. html,
  51. body {
  52. height: 100%;
  53. }
  54. body {
  55. -moz-osx-font-smoothing: grayscale;
  56. -webkit-font-smoothing: antialiased;
  57. color: #34495e;
  58. font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  59. font-size: 15px;
  60. letter-spacing: 0;
  61. margin: 0;
  62. overflow-x: hidden;
  63. }
  64. img {
  65. max-width: 100%;
  66. }
  67. a[disabled] {
  68. cursor: not-allowed;
  69. opacity: 0.6;
  70. }
  71. kbd {
  72. border: solid 1px #ccc;
  73. border-radius: 3px;
  74. display: inline-block;
  75. font-size: 12px !important;
  76. line-height: 12px;
  77. margin-bottom: 3px;
  78. padding: 3px 5px;
  79. vertical-align: middle;
  80. }
  81. li input[type='checkbox'] {
  82. margin: 0 0.2em 0.25em 0;
  83. vertical-align: middle;
  84. }
  85. .app-nav {
  86. margin: 25px 60px 0 0;
  87. position: absolute;
  88. right: 0;
  89. text-align: right;
  90. z-index: 10;
  91. /* navbar dropdown */
  92. }
  93. .app-nav.no-badge {
  94. margin-right: 25px;
  95. }
  96. .app-nav p {
  97. margin: 0;
  98. }
  99. .app-nav > a {
  100. margin: 0 1rem;
  101. padding: 5px 0;
  102. }
  103. .app-nav ul,
  104. .app-nav li {
  105. display: inline-block;
  106. list-style: none;
  107. margin: 0;
  108. }
  109. .app-nav a {
  110. color: inherit;
  111. font-size: 16px;
  112. text-decoration: none;
  113. transition: color 0.3s;
  114. }
  115. .app-nav a:hover {
  116. color: var(--theme-color, #42b983);
  117. }
  118. .app-nav a.active {
  119. border-bottom: 2px solid var(--theme-color, #42b983);
  120. color: var(--theme-color, #42b983);
  121. }
  122. .app-nav li {
  123. display: inline-block;
  124. margin: 0 1rem;
  125. padding: 5px 0;
  126. position: relative;
  127. cursor: pointer;
  128. }
  129. .app-nav li ul {
  130. background-color: #fff;
  131. border: 1px solid #ddd;
  132. border-bottom-color: #ccc;
  133. border-radius: 4px;
  134. box-sizing: border-box;
  135. display: none;
  136. max-height: calc(100vh - 61px);
  137. overflow-y: auto;
  138. padding: 10px 0;
  139. position: absolute;
  140. right: -15px;
  141. text-align: left;
  142. top: 100%;
  143. white-space: nowrap;
  144. }
  145. .app-nav li ul li {
  146. display: block;
  147. font-size: 14px;
  148. line-height: 1rem;
  149. margin: 0;
  150. margin: 8px 14px;
  151. white-space: nowrap;
  152. }
  153. .app-nav li ul a {
  154. display: block;
  155. font-size: inherit;
  156. margin: 0;
  157. padding: 0;
  158. }
  159. .app-nav li ul a.active {
  160. border-bottom: 0;
  161. }
  162. .app-nav li:hover ul {
  163. display: block;
  164. }
  165. .github-corner {
  166. border-bottom: 0;
  167. position: fixed;
  168. right: 0;
  169. text-decoration: none;
  170. top: 0;
  171. z-index: 1;
  172. }
  173. .github-corner:hover .octo-arm {
  174. -webkit-animation: octocat-wave 560ms ease-in-out;
  175. animation: octocat-wave 560ms ease-in-out;
  176. }
  177. .github-corner svg {
  178. color: #fff;
  179. fill: var(--theme-color, #42b983);
  180. height: 80px;
  181. width: 80px;
  182. }
  183. main {
  184. display: block;
  185. position: relative;
  186. width: 100vw;
  187. height: 100%;
  188. z-index: 0;
  189. }
  190. main.hidden {
  191. display: none;
  192. }
  193. .anchor {
  194. display: inline-block;
  195. text-decoration: none;
  196. transition: all 0.3s;
  197. }
  198. .anchor span {
  199. color: #34495e;
  200. }
  201. .anchor:hover {
  202. text-decoration: underline;
  203. }
  204. .sidebar {
  205. border-right: 1px solid rgba(0,0,0,0.07);
  206. overflow-y: auto;
  207. padding: 40px 0 0;
  208. position: absolute;
  209. top: 0;
  210. bottom: 0;
  211. left: 0;
  212. transition: transform 250ms ease-out;
  213. width: 300px;
  214. z-index: 20;
  215. }
  216. .sidebar > h1 {
  217. margin: 0 auto 1rem;
  218. font-size: 1.5rem;
  219. font-weight: 300;
  220. text-align: center;
  221. }
  222. .sidebar > h1 a {
  223. color: inherit;
  224. text-decoration: none;
  225. }
  226. .sidebar > h1 .app-nav {
  227. display: block;
  228. position: static;
  229. }
  230. .sidebar .sidebar-nav {
  231. line-height: 2em;
  232. padding-bottom: 40px;
  233. }
  234. .sidebar li.collapse .app-sub-sidebar {
  235. display: none;
  236. }
  237. .sidebar ul {
  238. margin: 0 0 0 15px;
  239. padding: 0;
  240. }
  241. .sidebar li > p {
  242. font-weight: 700;
  243. margin: 0;
  244. }
  245. .sidebar ul,
  246. .sidebar ul li {
  247. list-style: none;
  248. }
  249. .sidebar ul li a {
  250. border-bottom: none;
  251. display: block;
  252. }
  253. .sidebar ul li ul {
  254. padding-left: 20px;
  255. }
  256. .sidebar::-webkit-scrollbar {
  257. width: 4px;
  258. }
  259. .sidebar::-webkit-scrollbar-thumb {
  260. background: transparent;
  261. border-radius: 4px;
  262. }
  263. .sidebar:hover::-webkit-scrollbar-thumb {
  264. background: rgba(136,136,136,0.4);
  265. }
  266. .sidebar:hover::-webkit-scrollbar-track {
  267. background: rgba(136,136,136,0.1);
  268. }
  269. .sidebar-toggle {
  270. background-color: transparent;
  271. background-color: rgba(255,255,255,0.8);
  272. border: 0;
  273. outline: none;
  274. padding: 10px;
  275. position: absolute;
  276. bottom: 0;
  277. left: 0;
  278. text-align: center;
  279. transition: opacity 0.3s;
  280. width: 284px;
  281. z-index: 30;
  282. cursor: pointer;
  283. }
  284. .sidebar-toggle:hover .sidebar-toggle-button {
  285. opacity: 0.4;
  286. }
  287. .sidebar-toggle span {
  288. background-color: var(--theme-color, #42b983);
  289. display: block;
  290. margin-bottom: 4px;
  291. width: 16px;
  292. height: 2px;
  293. }
  294. body.sticky .sidebar,
  295. body.sticky .sidebar-toggle {
  296. position: fixed;
  297. }
  298. .content {
  299. padding-top: 60px;
  300. position: absolute;
  301. top: 0;
  302. right: 0;
  303. bottom: 0;
  304. left: 300px;
  305. transition: left 250ms ease;
  306. }
  307. .markdown-section {
  308. margin: 0 auto;
  309. max-width: 80%;
  310. padding: 30px 15px 40px 15px;
  311. position: relative;
  312. }
  313. .markdown-section > * {
  314. box-sizing: border-box;
  315. font-size: inherit;
  316. }
  317. .markdown-section > :first-child {
  318. margin-top: 0 !important;
  319. }
  320. .markdown-section hr {
  321. border: none;
  322. border-bottom: 1px solid #eee;
  323. margin: 2em 0;
  324. }
  325. .markdown-section iframe {
  326. border: 1px solid #eee;
  327. /* fix horizontal overflow on iOS Safari */
  328. width: 1px;
  329. min-width: 100%;
  330. }
  331. .markdown-section table {
  332. border-collapse: collapse;
  333. border-spacing: 0;
  334. display: block;
  335. margin-bottom: 1rem;
  336. overflow: auto;
  337. width: 100%;
  338. }
  339. .markdown-section th {
  340. border: 1px solid #ddd;
  341. font-weight: bold;
  342. padding: 6px 13px;
  343. }
  344. .markdown-section td {
  345. border: 1px solid #ddd;
  346. padding: 6px 13px;
  347. }
  348. .markdown-section tr {
  349. border-top: 1px solid #ccc;
  350. }
  351. .markdown-section tr:nth-child(2n) {
  352. background-color: #f8f8f8;
  353. }
  354. .markdown-section p.tip {
  355. background-color: #f8f8f8;
  356. border-bottom-right-radius: 2px;
  357. border-left: 4px solid #f66;
  358. border-top-right-radius: 2px;
  359. margin: 2em 0;
  360. padding: 12px 24px 12px 30px;
  361. position: relative;
  362. }
  363. .markdown-section p.tip:before {
  364. background-color: #f66;
  365. border-radius: 100%;
  366. color: #fff;
  367. content: '!';
  368. font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  369. font-size: 14px;
  370. font-weight: bold;
  371. left: -12px;
  372. line-height: 20px;
  373. position: absolute;
  374. height: 20px;
  375. width: 20px;
  376. text-align: center;
  377. top: 14px;
  378. }
  379. .markdown-section p.tip code {
  380. background-color: #efefef;
  381. }
  382. .markdown-section p.tip em {
  383. color: #34495e;
  384. }
  385. .markdown-section p.warn {
  386. background: rgba(66,185,131,0.1);
  387. border-radius: 2px;
  388. padding: 1rem;
  389. }
  390. .markdown-section ul.task-list > li {
  391. list-style-type: none;
  392. }
  393. body.close .sidebar {
  394. transform: translateX(-300px);
  395. }
  396. body.close .sidebar-toggle {
  397. width: auto;
  398. }
  399. body.close .content {
  400. left: 0;
  401. }
  402. @media print {
  403. .github-corner,
  404. .sidebar-toggle,
  405. .sidebar,
  406. .app-nav {
  407. display: none;
  408. }
  409. }
  410. @media screen and (max-width: 768px) {
  411. .github-corner,
  412. .sidebar-toggle,
  413. .sidebar {
  414. position: fixed;
  415. }
  416. .app-nav {
  417. margin-top: 16px;
  418. }
  419. .app-nav li ul {
  420. top: 30px;
  421. }
  422. main {
  423. height: auto;
  424. min-height: 100vh;
  425. overflow-x: hidden;
  426. }
  427. .sidebar {
  428. left: -300px;
  429. transition: transform 250ms ease-out;
  430. }
  431. .content {
  432. left: 0;
  433. max-width: 100vw;
  434. position: static;
  435. padding-top: 20px;
  436. transition: transform 250ms ease;
  437. }
  438. .app-nav,
  439. .github-corner {
  440. transition: transform 250ms ease-out;
  441. }
  442. .sidebar-toggle {
  443. background-color: transparent;
  444. width: auto;
  445. padding: 30px 30px 10px 10px;
  446. }
  447. body.close .sidebar {
  448. transform: translateX(300px);
  449. }
  450. body.close .sidebar-toggle {
  451. background-color: rgba(255,255,255,0.8);
  452. transition: 1s background-color;
  453. width: 284px;
  454. padding: 10px;
  455. }
  456. body.close .content {
  457. transform: translateX(300px);
  458. }
  459. body.close .app-nav,
  460. body.close .github-corner {
  461. display: none;
  462. }
  463. .github-corner:hover .octo-arm {
  464. -webkit-animation: none;
  465. animation: none;
  466. }
  467. .github-corner .octo-arm {
  468. -webkit-animation: octocat-wave 560ms ease-in-out;
  469. animation: octocat-wave 560ms ease-in-out;
  470. }
  471. }
  472. @-webkit-keyframes octocat-wave {
  473. 0%, 100% {
  474. transform: rotate(0);
  475. }
  476. 20%, 60% {
  477. transform: rotate(-25deg);
  478. }
  479. 40%, 80% {
  480. transform: rotate(10deg);
  481. }
  482. }
  483. @keyframes octocat-wave {
  484. 0%, 100% {
  485. transform: rotate(0);
  486. }
  487. 20%, 60% {
  488. transform: rotate(-25deg);
  489. }
  490. 40%, 80% {
  491. transform: rotate(10deg);
  492. }
  493. }
  494. section.cover {
  495. align-items: center;
  496. background-position: center center;
  497. background-repeat: no-repeat;
  498. background-size: cover;
  499. height: 100vh;
  500. width: 100vw;
  501. display: none;
  502. }
  503. section.cover.show {
  504. display: flex;
  505. }
  506. section.cover.has-mask .mask {
  507. background-color: #fff;
  508. opacity: 0.8;
  509. position: absolute;
  510. top: 0;
  511. height: 100%;
  512. width: 100%;
  513. }
  514. section.cover .cover-main {
  515. flex: 1;
  516. margin: -20px 16px 0;
  517. text-align: center;
  518. position: relative;
  519. }
  520. section.cover a {
  521. color: inherit;
  522. text-decoration: none;
  523. }
  524. section.cover a:hover {
  525. text-decoration: none;
  526. }
  527. section.cover p {
  528. line-height: 1.5rem;
  529. margin: 1em 0;
  530. }
  531. section.cover h1 {
  532. color: inherit;
  533. font-size: 2.5rem;
  534. font-weight: 300;
  535. margin: 0.625rem 0 2.5rem;
  536. position: relative;
  537. text-align: center;
  538. }
  539. section.cover h1 a {
  540. display: block;
  541. }
  542. section.cover h1 small {
  543. bottom: -0.4375rem;
  544. font-size: 1rem;
  545. position: absolute;
  546. }
  547. section.cover blockquote {
  548. font-size: 1.5rem;
  549. text-align: center;
  550. }
  551. section.cover ul {
  552. line-height: 1.8;
  553. list-style-type: none;
  554. margin: 1em auto;
  555. max-width: 500px;
  556. padding: 0;
  557. }
  558. section.cover .cover-main > p:last-child a {
  559. border-color: var(--theme-color, #42b983);
  560. border-radius: 2rem;
  561. border-style: solid;
  562. border-width: 1px;
  563. box-sizing: border-box;
  564. color: var(--theme-color, #42b983);
  565. display: inline-block;
  566. font-size: 1.05rem;
  567. letter-spacing: 0.1rem;
  568. margin: 0.5rem 1rem;
  569. padding: 0.75em 2rem;
  570. text-decoration: none;
  571. transition: all 0.15s ease;
  572. }
  573. section.cover .cover-main > p:last-child a:last-child {
  574. background-color: var(--theme-color, #42b983);
  575. color: #fff;
  576. }
  577. section.cover .cover-main > p:last-child a:last-child:hover {
  578. color: inherit;
  579. opacity: 0.8;
  580. }
  581. section.cover .cover-main > p:last-child a:hover {
  582. color: inherit;
  583. }
  584. section.cover blockquote > p > a {
  585. border-bottom: 2px solid var(--theme-color, #42b983);
  586. transition: color 0.3s;
  587. }
  588. section.cover blockquote > p > a:hover {
  589. color: var(--theme-color, #42b983);
  590. }
  591. body {
  592. background-color: #fff;
  593. }
  594. /* sidebar */
  595. .sidebar {
  596. background-color: #fff;
  597. color: #364149;
  598. }
  599. .sidebar li {
  600. margin: 6px 0 6px 0;
  601. }
  602. .sidebar ul li a {
  603. color: #505d6b;
  604. font-size: 14px;
  605. font-weight: normal;
  606. overflow: hidden;
  607. text-decoration: none;
  608. text-overflow: ellipsis;
  609. white-space: nowrap;
  610. }
  611. .sidebar ul li a:hover {
  612. text-decoration: underline;
  613. }
  614. .sidebar ul li ul {
  615. padding: 0;
  616. }
  617. .sidebar ul li.active > a {
  618. border-right: 2px solid;
  619. color: var(--theme-color, #42b983);
  620. font-weight: 600;
  621. }
  622. .app-sub-sidebar li::before {
  623. content: '-';
  624. padding-right: 4px;
  625. float: left;
  626. }
  627. /* markdown content found on pages */
  628. .markdown-section h1,
  629. .markdown-section h2,
  630. .markdown-section h3,
  631. .markdown-section h4,
  632. .markdown-section strong {
  633. color: #2c3e50;
  634. font-weight: 600;
  635. }
  636. .markdown-section a {
  637. color: var(--theme-color, #42b983);
  638. font-weight: 600;
  639. }
  640. .markdown-section h1 {
  641. font-size: 2rem;
  642. margin: 0 0 1rem;
  643. }
  644. .markdown-section h2 {
  645. font-size: 1.75rem;
  646. margin: 45px 0 0.8rem;
  647. }
  648. .markdown-section h3 {
  649. font-size: 1.5rem;
  650. margin: 40px 0 0.6rem;
  651. }
  652. .markdown-section h4 {
  653. font-size: 1.25rem;
  654. }
  655. .markdown-section h5 {
  656. font-size: 1rem;
  657. }
  658. .markdown-section h6 {
  659. color: #777;
  660. font-size: 1rem;
  661. }
  662. .markdown-section figure,
  663. .markdown-section p {
  664. margin: 1.2em 0;
  665. }
  666. .markdown-section p,
  667. .markdown-section ul,
  668. .markdown-section ol {
  669. line-height: 1.6rem;
  670. word-spacing: 0.05rem;
  671. }
  672. .markdown-section ul,
  673. .markdown-section ol {
  674. padding-left: 1.5rem;
  675. }
  676. .markdown-section blockquote {
  677. border-left: 4px solid var(--theme-color, #42b983);
  678. color: #858585;
  679. margin: 2em 0;
  680. padding-left: 20px;
  681. }
  682. .markdown-section blockquote p {
  683. font-weight: 600;
  684. margin-left: 0;
  685. }
  686. .markdown-section iframe {
  687. margin: 1em 0;
  688. }
  689. .markdown-section em {
  690. color: #7f8c8d;
  691. }
  692. .markdown-section code,
  693. .markdown-section pre,
  694. .markdown-section output::after {
  695. font-family: 'Roboto Mono', Monaco, courier, monospace;
  696. }
  697. .markdown-section code,
  698. .markdown-section pre {
  699. background-color: #f8f8f8;
  700. }
  701. .markdown-section pre,
  702. .markdown-section output {
  703. margin: 1.2em 0;
  704. position: relative;
  705. }
  706. .markdown-section pre > code,
  707. .markdown-section output {
  708. border-radius: 2px;
  709. display: block;
  710. }
  711. .markdown-section pre > code,
  712. .markdown-section output::after {
  713. -moz-osx-font-smoothing: initial;
  714. -webkit-font-smoothing: initial;
  715. }
  716. .markdown-section code {
  717. border-radius: 2px;
  718. color: #e96900;
  719. margin: 0 2px;
  720. padding: 3px 5px;
  721. white-space: pre-wrap;
  722. }
  723. .markdown-section > :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) code {
  724. font-size: 0.8rem;
  725. }
  726. .markdown-section pre {
  727. padding: 0 1.4rem;
  728. line-height: 1.5rem;
  729. overflow: auto;
  730. word-wrap: normal;
  731. }
  732. .markdown-section pre > code {
  733. color: #525252;
  734. font-size: 0.8rem;
  735. padding: 2.2em 5px;
  736. line-height: inherit;
  737. margin: 0 2px;
  738. max-width: inherit;
  739. overflow: inherit;
  740. white-space: inherit;
  741. }
  742. .markdown-section output {
  743. padding: 1.7rem 1.4rem;
  744. border: 1px dotted #ccc;
  745. }
  746. .markdown-section output > :first-child {
  747. margin-top: 0;
  748. }
  749. .markdown-section output > :last-child {
  750. margin-bottom: 0;
  751. }
  752. .markdown-section code::after,
  753. .markdown-section code::before,
  754. .markdown-section output::after,
  755. .markdown-section output::before {
  756. letter-spacing: 0.05rem;
  757. }
  758. .markdown-section pre::after,
  759. .markdown-section output::after {
  760. color: #ccc;
  761. font-size: 0.6rem;
  762. font-weight: 600;
  763. height: 15px;
  764. line-height: 15px;
  765. padding: 5px 10px 0;
  766. position: absolute;
  767. right: 0;
  768. text-align: right;
  769. top: 0;
  770. }
  771. .markdown-section pre::after,
  772. .markdown-section output::after {
  773. content: attr(data-lang);
  774. }
  775. /* code highlight */
  776. .token.comment,
  777. .token.prolog,
  778. .token.doctype,
  779. .token.cdata {
  780. color: #8e908c;
  781. }
  782. .token.namespace {
  783. opacity: 0.7;
  784. }
  785. .token.boolean,
  786. .token.number {
  787. color: #c76b29;
  788. }
  789. .token.punctuation {
  790. color: #525252;
  791. }
  792. .token.property {
  793. color: #c08b30;
  794. }
  795. .token.tag {
  796. color: #2973b7;
  797. }
  798. .token.string {
  799. color: var(--theme-color, #42b983);
  800. }
  801. .token.selector {
  802. color: #6679cc;
  803. }
  804. .token.attr-name {
  805. color: #2973b7;
  806. }
  807. .token.entity,
  808. .token.url,
  809. .language-css .token.string,
  810. .style .token.string {
  811. color: #22a2c9;
  812. }
  813. .token.attr-value,
  814. .token.control,
  815. .token.directive,
  816. .token.unit {
  817. color: var(--theme-color, #42b983);
  818. }
  819. .token.keyword,
  820. .token.function {
  821. color: #e96900;
  822. }
  823. .token.statement,
  824. .token.regex,
  825. .token.atrule {
  826. color: #22a2c9;
  827. }
  828. .token.placeholder,
  829. .token.variable {
  830. color: #3d8fd1;
  831. }
  832. .token.deleted {
  833. text-decoration: line-through;
  834. }
  835. .token.inserted {
  836. border-bottom: 1px dotted #202746;
  837. text-decoration: none;
  838. }
  839. .token.italic {
  840. font-style: italic;
  841. }
  842. .token.important,
  843. .token.bold {
  844. font-weight: bold;
  845. }
  846. .token.important {
  847. color: #c94922;
  848. }
  849. .token.entity {
  850. cursor: help;
  851. }
  852. code .token {
  853. -moz-osx-font-smoothing: initial;
  854. -webkit-font-smoothing: initial;
  855. min-height: 1.5rem;
  856. position: relative;
  857. left: auto;
  858. }