extra.css 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  1. [data-md-color-scheme="default"] {
  2. --web-accent: #2f8f4e;
  3. --web-accent-hover: #3fae61;
  4. --web-background: #f4f6f9;
  5. --web-text: #1f2937;
  6. --web-text-muted: #4b5563;
  7. --web-border: rgba(0, 0, 0, 0.08);
  8. --web-surface-1: #ffffff;
  9. --web-surface-2: #f0f3f7;
  10. --web-terminal: #f0f3f7;
  11. --web-header-bg: #303030;
  12. --web-header-fg: #e6eaf0;
  13. --md-primary-fg-color: var(--web-header-bg);
  14. --md-primary-fg-color--light: var(--web-header-bg);
  15. --md-primary-fg-color--dark: #111827;
  16. --md-primary-bg-color: var(--web-header-fg);
  17. --md-primary-bg-color--light: rgba(230, 234, 240, 0.72);
  18. --md-accent-fg-color: var(--web-accent);
  19. --md-accent-fg-color--transparent: rgba(47, 143, 78, 0.12);
  20. --md-default-bg-color: var(--web-background);
  21. --md-default-bg-color--light: #fbfcfd;
  22. --md-default-bg-color--lighter: #ffffff;
  23. --md-default-bg-color--lightest: #ffffff;
  24. --md-default-fg-color: var(--web-text);
  25. --md-default-fg-color--light: var(--web-text-muted);
  26. --md-default-fg-color--lighter: rgba(75, 85, 99, 0.7);
  27. --md-default-fg-color--lightest: rgba(75, 85, 99, 0.35);
  28. --md-code-bg-color: #e9eef4;
  29. --md-code-fg-color: #1f2937;
  30. --md-typeset-a-color: var(--web-accent);
  31. }
  32. [data-md-color-scheme="slate"] {
  33. --web-accent: #36a167;
  34. --web-accent-hover: #49c27d;
  35. --web-background: #222222;
  36. --web-text: #e6eaf0;
  37. --web-text-muted: #9aa4b2;
  38. --web-border: rgba(255, 255, 255, 0.08);
  39. --web-surface-1: #303030;
  40. --web-surface-2: #343434;
  41. --web-terminal: #222222;
  42. --web-header-bg: #303030;
  43. --web-header-fg: #e6eaf0;
  44. --md-primary-fg-color: var(--web-header-bg);
  45. --md-primary-fg-color--light: #3a3a3a;
  46. --md-primary-fg-color--dark: #242424;
  47. --md-primary-bg-color: var(--web-header-fg);
  48. --md-primary-bg-color--light: rgba(230, 234, 240, 0.72);
  49. --md-accent-fg-color: var(--web-accent-hover);
  50. --md-accent-fg-color--transparent: rgba(73, 194, 125, 0.14);
  51. --md-default-bg-color: var(--web-background);
  52. --md-default-bg-color--light: #2b2b2b;
  53. --md-default-bg-color--lighter: #313131;
  54. --md-default-bg-color--lightest: #343434;
  55. --md-default-fg-color: var(--web-text);
  56. --md-default-fg-color--light: var(--web-text-muted);
  57. --md-default-fg-color--lighter: rgba(154, 164, 178, 0.72);
  58. --md-default-fg-color--lightest: rgba(154, 164, 178, 0.35);
  59. --md-code-bg-color: #242424;
  60. --md-code-fg-color: #e6eaf0;
  61. --md-typeset-a-color: var(--web-accent-hover);
  62. }
  63. body {
  64. background: linear-gradient(180deg, var(--web-background), var(--web-surface-2));
  65. background-attachment: fixed;
  66. }
  67. .md-header,
  68. .md-tabs {
  69. background: var(--web-header-bg);
  70. color: var(--web-header-fg);
  71. }
  72. .md-header {
  73. box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  74. }
  75. [data-md-color-scheme="default"] .md-header {
  76. box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  77. }
  78. [data-md-color-scheme="default"] .md-header__topic,
  79. [data-md-color-scheme="default"] .md-tabs__link,
  80. [data-md-color-scheme="default"] .md-search__icon,
  81. [data-md-color-scheme="default"] .md-header__button {
  82. color: var(--web-header-fg);
  83. }
  84. [data-md-color-scheme="default"] .md-search__form {
  85. background: rgba(255, 255, 255, 0.08);
  86. }
  87. [data-md-color-scheme="default"] .md-search__input::placeholder {
  88. color: rgba(230, 234, 240, 0.72);
  89. }
  90. .md-header__button.md-logo img,
  91. .md-header__button.md-logo svg {
  92. height: 1.85rem;
  93. width: auto;
  94. }
  95. .md-search__form,
  96. .md-search__output {
  97. border-radius: 12px;
  98. }
  99. .md-main {
  100. background: transparent;
  101. }
  102. .md-content__inner {
  103. background: linear-gradient(180deg, var(--web-surface-2), var(--web-surface-1));
  104. border: 1px solid var(--web-border);
  105. border-radius: 18px;
  106. box-shadow: 0 18px 36px rgba(0, 0, 0, 0.08);
  107. margin: 0.4rem 0 1.2rem;
  108. padding: 1.4rem 1.35rem;
  109. }
  110. [data-md-color-scheme="slate"] .md-content__inner {
  111. box-shadow: none;
  112. }
  113. .md-search__output,
  114. .md-dialog {
  115. background: linear-gradient(180deg, var(--web-surface-2), var(--web-surface-1));
  116. border: 1px solid var(--web-border);
  117. border-radius: 16px;
  118. }
  119. .md-sidebar__scrollwrap {
  120. padding: 0;
  121. background: transparent;
  122. border: none;
  123. border-radius: 0;
  124. box-shadow: none;
  125. }
  126. .md-nav__title,
  127. .md-nav__link,
  128. .md-typeset h1,
  129. .md-typeset h2,
  130. .md-typeset h3,
  131. .md-typeset h4,
  132. .md-typeset code,
  133. .md-button {
  134. font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  135. }
  136. .md-typeset h1,
  137. .md-typeset h2,
  138. .md-typeset h3 {
  139. letter-spacing: 0.02em;
  140. }
  141. .md-nav__link--active,
  142. .md-nav__link:focus,
  143. .md-nav__link:hover,
  144. .md-typeset a:hover {
  145. color: var(--web-accent-hover);
  146. }
  147. .md-typeset a {
  148. text-decoration: underline;
  149. text-decoration-thickness: 0.08em;
  150. text-underline-offset: 0.18em;
  151. }
  152. .md-typeset .md-button {
  153. border-radius: 10px;
  154. border: none;
  155. background: var(--web-accent);
  156. color: #ffffff;
  157. font-weight: 700;
  158. padding: 0.7em 1.1em;
  159. }
  160. .md-typeset .md-button:hover {
  161. background: var(--web-accent-hover);
  162. color: #ffffff;
  163. }
  164. .md-typeset code,
  165. .md-typeset pre > code {
  166. border-radius: 10px;
  167. }
  168. .highlight,
  169. .md-typeset pre {
  170. background: var(--web-terminal);
  171. border: 1px solid var(--web-border);
  172. border-radius: 14px;
  173. }
  174. .md-typeset table:not([class]) {
  175. border: 1px solid var(--web-border);
  176. border-radius: 14px;
  177. overflow: hidden;
  178. }
  179. .md-typeset table:not([class]) th {
  180. background: var(--web-surface-2);
  181. }
  182. .md-typeset table:not([class]) tr:hover {
  183. background: color-mix(in srgb, var(--web-accent) 8%, transparent);
  184. }
  185. .md-typeset hr {
  186. border-bottom-color: var(--web-border);
  187. }
  188. .md-typeset blockquote {
  189. border-left: 0.18rem solid var(--web-accent);
  190. color: var(--md-default-fg-color--light);
  191. }
  192. .md-footer {
  193. background: transparent;
  194. }
  195. .md-footer-meta,
  196. .md-footer__inner {
  197. background: transparent;
  198. }
  199. /* Hide git repo version */
  200. .md-source__fact--version {
  201. display: none;
  202. }
  203. @media screen and (max-width: 76.2344em) {
  204. .md-content__inner,
  205. .md-sidebar__scrollwrap {
  206. border-radius: 14px;
  207. }
  208. }