page.css 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419
  1. :root {
  2. color-scheme: light dark;
  3. -webkit-font-smoothing: antialiased;
  4. --color-blue: #049EF4;
  5. --text-color: #444;
  6. --font-size: 16px;
  7. --line-height: 26px;
  8. --border-style: 1px solid #E8E8E8;
  9. --panel-width: 300px;
  10. --page-padding: 24px;
  11. --max-width: 760px;
  12. --icon-size: 20px;
  13. }
  14. @media (prefers-color-scheme: dark) {
  15. :root {
  16. --text-color: #bbb;
  17. --border-style: 1px solid #444;
  18. }
  19. }
  20. @font-face {
  21. font-family: 'Roboto Mono';
  22. src: local('Roboto Mono'), local('RobotoMono-Regular'), url('../../files/RobotoMono-Regular.woff2') format('woff2');
  23. font-style: normal;
  24. font-weight: 400;
  25. }
  26. @font-face {
  27. font-family: 'Inter';
  28. font-style: normal;
  29. font-weight: 400;
  30. src: local('Inter-Regular'), url("../../files/Inter-Regular.woff2?v=3.6") format("woff2");
  31. }
  32. @font-face {
  33. font-family: 'Inter';
  34. font-style: normal;
  35. font-weight: 600;
  36. src: local('Inter-SemiBold'), url("../../files/Inter-SemiBold.woff2?v=3.6") format("woff2");
  37. }
  38. html {
  39. font-family: 'Inter', sans-serif;
  40. font-size: var(--font-size);
  41. line-height: var(--line-height);
  42. }
  43. body {
  44. color: var(--text-color);
  45. tab-size: 4;
  46. overflow: auto;
  47. max-width: var(--max-width);
  48. margin: 0 auto;
  49. padding-top: var(--page-padding);
  50. padding-bottom: var(--page-padding);
  51. padding-right: var(--page-padding);
  52. padding-left: calc(var(--page-padding) + var(--panel-width));
  53. word-break: break-word;
  54. }
  55. body a {
  56. color: var(--color-blue);
  57. cursor: pointer;
  58. text-decoration: none;
  59. }
  60. body h1 {
  61. font-size: 40px;
  62. line-height: 48px;
  63. font-weight: normal;
  64. margin-left: -2px;
  65. margin-top: 16px;
  66. margin-bottom: -8px;
  67. }
  68. body h2 {
  69. font-size: 28px;
  70. line-height: 36px;
  71. font-weight: normal;
  72. margin-left: -1px;
  73. margin-top: 28px;
  74. margin-bottom: -8px;
  75. }
  76. body h3 {
  77. font-size: 20px;
  78. line-height: 28px;
  79. font-weight: normal;
  80. margin-top: 24px;
  81. margin-bottom: -8px;
  82. }
  83. body p,
  84. body div,
  85. body table,
  86. body ol,
  87. body ul,
  88. body summary {
  89. margin-top: 16px;
  90. margin-bottom: 16px;
  91. }
  92. body summary:hover {
  93. cursor: pointer;
  94. }
  95. body p {
  96. padding-right: 16px;
  97. }
  98. body ul, body ol {
  99. box-sizing: border-box;
  100. padding-left: 24px;
  101. }
  102. body ul li,
  103. body ol li {
  104. padding-left: 4px;
  105. margin-bottom: 4px;
  106. }
  107. body li ul,
  108. body li ol {
  109. margin-top: 4px;
  110. }
  111. body code {
  112. display: inline-block;
  113. vertical-align: middle;
  114. border-radius: 4px;
  115. padding: 0px 5px;
  116. background: #F5F5F5;
  117. }
  118. body pre {
  119. position: relative;
  120. margin: 16px calc(-1 * var(--page-padding));
  121. }
  122. body pre code {
  123. display: block;
  124. font-size: calc(var(--font-size) - 1px);
  125. line-height: calc(var(--line-height) - 1px);
  126. padding: calc(var(--page-padding) - 6px) var(--page-padding);
  127. white-space: pre-wrap;
  128. overflow: auto;
  129. box-sizing: border-box;
  130. background: #F5F5F5;
  131. border-radius: 0;
  132. }
  133. body ol code,
  134. body ul code {
  135. margin: 0;
  136. }
  137. body .copy-btn {
  138. cursor: pointer;
  139. position: absolute;
  140. top: 16px;
  141. right: 16px;
  142. width: 24px;
  143. height: 24px;
  144. background-color: transparent;
  145. background-image: url('../../files/ic_copy_grey_24dp.svg');
  146. background-size: contain;
  147. background-position: center;
  148. background-repeat: no-repeat;
  149. opacity: 0.9;
  150. border: none;
  151. }
  152. body .copy-btn:hover {
  153. opacity: 1;
  154. }
  155. body .copy-btn.copied {
  156. pointer-events: none;
  157. opacity: 1;
  158. background-image: url('../../files/ic_tick_green_24dp.svg');
  159. }
  160. body table {
  161. width: 100%;
  162. border-collapse: collapse;
  163. }
  164. body .desc {
  165. padding-left: 0px;
  166. }
  167. body table th,
  168. body table td {
  169. text-align: left;
  170. vertical-align: top;
  171. padding: 8px 6px;
  172. border-bottom: var(--border-style);
  173. }
  174. body table table th,
  175. body table table td {
  176. border-bottom: none;
  177. }
  178. body table tr:last-child th,
  179. body table tr:last-child td {
  180. border-bottom: none;
  181. }
  182. body table th {
  183. text-decoration: none;
  184. }
  185. body table th:first-child,
  186. body table td:first-child {
  187. padding-left: 0;
  188. }
  189. body table code {
  190. margin: 0px;
  191. width: auto;
  192. }
  193. body table.props td.name,
  194. body table.params td.name {
  195. width: 150px;
  196. word-break: keep-all;
  197. }
  198. body table p {
  199. margin: 0;
  200. margin-top: 10px;
  201. }
  202. body table td p:first-child {
  203. margin-top: 0;
  204. }
  205. body strong {
  206. font-weight: 600;
  207. }
  208. body a.param,
  209. body span.param {
  210. color: #999;
  211. }
  212. body a.param:hover {
  213. color: var(--text-color);
  214. }
  215. body .inheritance {
  216. color: #999;
  217. margin-bottom: 0;
  218. font-size: var(--font-size);
  219. line-height: var(--line-height);
  220. margin-top: 0;
  221. }
  222. body .method,
  223. body .member {
  224. margin-bottom: 32px;
  225. }
  226. body ol.linenums {
  227. padding-left: 64px;
  228. }
  229. body ol.linenums .selected {
  230. background-color: #ddd;
  231. }
  232. body h3.name {
  233. color: #000;
  234. }
  235. body h3.name a {
  236. color: var(--color-blue);
  237. text-decoration: none;
  238. }
  239. body h3.name .signature {
  240. color: #000;
  241. font-weight: normal;
  242. }
  243. body h3.name .type-signature {
  244. color: #999;
  245. font-weight: normal;
  246. }
  247. body h3.name .type-signature a {
  248. color: #999;
  249. }
  250. body h3.name .param-type {
  251. color: #999;
  252. }
  253. body h3.name .param-type a {
  254. color: #999;
  255. }
  256. body h2.subsection-title + p {
  257. margin-top: 24px;
  258. }
  259. body iframe#viewer {
  260. width: 100%;
  261. height: 400px;
  262. border: none;
  263. margin-top: 16px;
  264. margin-bottom: 16px;
  265. }
  266. @media (prefers-color-scheme: dark) {
  267. body h2 {
  268. color: var(--text-color);
  269. }
  270. body h3.name {
  271. color: var(--text-color);
  272. }
  273. body h3.name .signature {
  274. color: var(--text-color);
  275. }
  276. body .link-anchor {
  277. color: #555;
  278. }
  279. body ol.linenums .selected {
  280. background-color: #444;
  281. }
  282. body code {
  283. background: #444;
  284. }
  285. body pre code {
  286. background: #444;
  287. }
  288. }
  289. @media all and ( min-width: 1700px ) {
  290. :root {
  291. --panel-width: 360px;
  292. --font-size: 18px;
  293. --line-height: 28px;
  294. --max-width: 880px;
  295. --page-padding: 28px;
  296. --icon-size: 24px;
  297. }
  298. body h1 {
  299. font-size: 42px;
  300. line-height: 50px;
  301. }
  302. body h2 {
  303. font-size: 32px;
  304. line-height: 40px;
  305. }
  306. body h3 {
  307. font-size: 24px;
  308. line-height: 32px;
  309. }
  310. }
  311. /* mobile */
  312. @media all and ( max-width: 640px ) {
  313. :root {
  314. --page-padding: 16px;
  315. --icon-size: 24px;
  316. }
  317. body {
  318. padding: var(--page-padding);
  319. }
  320. body h1 {
  321. font-size: 28px;
  322. line-height: 36px;
  323. padding-right: 20px;
  324. margin-top: 0;
  325. }
  326. body h2 {
  327. font-size: 24px;
  328. line-height: 32px;
  329. margin-top: 24px;
  330. }
  331. body h3 {
  332. font-size: 20px;
  333. line-height: 28px;
  334. }
  335. body .copy-btn {
  336. top: 12px;
  337. right: 8px;
  338. width: 20px;
  339. height: 20px;
  340. }
  341. }
粤ICP备19079148号