style.css 34 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414
  1. :root {
  2. /* Light */
  3. --light-color-background: #f2f4f8;
  4. --light-color-background-secondary: #eff0f1;
  5. --light-color-warning-text: #222;
  6. --light-color-background-warning: #e6e600;
  7. --light-color-icon-background: var(--light-color-background);
  8. --light-color-accent: #c5c7c9;
  9. --light-color-active-menu-item: var(--light-color-accent);
  10. --light-color-text: #222;
  11. --light-color-text-aside: #6e6e6e;
  12. --light-color-link: #1f70c2;
  13. --light-color-ts-keyword: #056bd6;
  14. --light-color-ts-project: #b111c9;
  15. --light-color-ts-module: var(--light-color-ts-project);
  16. --light-color-ts-namespace: var(--light-color-ts-project);
  17. --light-color-ts-enum: #7e6f15;
  18. --light-color-ts-enum-member: var(--light-color-ts-enum);
  19. --light-color-ts-variable: #4760ec;
  20. --light-color-ts-function: #572be7;
  21. --light-color-ts-class: #1f70c2;
  22. --light-color-ts-interface: #108024;
  23. --light-color-ts-constructor: var(--light-color-ts-class);
  24. --light-color-ts-property: var(--light-color-ts-variable);
  25. --light-color-ts-method: var(--light-color-ts-function);
  26. --light-color-ts-call-signature: var(--light-color-ts-method);
  27. --light-color-ts-index-signature: var(--light-color-ts-property);
  28. --light-color-ts-constructor-signature: var(--light-color-ts-constructor);
  29. --light-color-ts-parameter: var(--light-color-ts-variable);
  30. /* type literal not included as links will never be generated to it */
  31. --light-color-ts-type-parameter: #a55c0e;
  32. --light-color-ts-accessor: var(--light-color-ts-property);
  33. --light-color-ts-get-signature: var(--light-color-ts-accessor);
  34. --light-color-ts-set-signature: var(--light-color-ts-accessor);
  35. --light-color-ts-type-alias: #d51270;
  36. /* reference not included as links will be colored with the kind that it points to */
  37. --light-external-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='10' height='10'><path fill-opacity='0' stroke='%23000' stroke-width='10' d='m43,35H5v60h60V57M45,5v10l10,10-30,30 20,20 30-30 10,10h10V5z'/></svg>");
  38. --light-color-scheme: light;
  39. /* Dark */
  40. --dark-color-background: #2b2e33;
  41. --dark-color-background-secondary: #1e2024;
  42. --dark-color-background-warning: #bebe00;
  43. --dark-color-warning-text: #222;
  44. --dark-color-icon-background: var(--dark-color-background-secondary);
  45. --dark-color-accent: #9096a2;
  46. --dark-color-active-menu-item: #5d5d6a;
  47. --dark-color-text: #f5f5f5;
  48. --dark-color-text-aside: #dddddd;
  49. --dark-color-link: #00aff4;
  50. --dark-color-ts-keyword: #3399ff;
  51. --dark-color-ts-project: #e358ff;
  52. --dark-color-ts-module: var(--dark-color-ts-project);
  53. --dark-color-ts-namespace: var(--dark-color-ts-project);
  54. --dark-color-ts-enum: #f4d93e;
  55. --dark-color-ts-enum-member: var(--dark-color-ts-enum);
  56. --dark-color-ts-variable: #798dff;
  57. --dark-color-ts-function: #a280ff;
  58. --dark-color-ts-class: #8ac4ff;
  59. --dark-color-ts-interface: #6cff87;
  60. --dark-color-ts-constructor: var(--dark-color-ts-class);
  61. --dark-color-ts-property: var(--dark-color-ts-variable);
  62. --dark-color-ts-method: var(--dark-color-ts-function);
  63. --dark-color-ts-call-signature: var(--dark-color-ts-method);
  64. --dark-color-ts-index-signature: var(--dark-color-ts-property);
  65. --dark-color-ts-constructor-signature: var(--dark-color-ts-constructor);
  66. --dark-color-ts-parameter: var(--dark-color-ts-variable);
  67. /* type literal not included as links will never be generated to it */
  68. --dark-color-ts-type-parameter: #e07d13;
  69. --dark-color-ts-accessor: var(--dark-color-ts-property);
  70. --dark-color-ts-get-signature: var(--dark-color-ts-accessor);
  71. --dark-color-ts-set-signature: var(--dark-color-ts-accessor);
  72. --dark-color-ts-type-alias: #ff6492;
  73. /* reference not included as links will be colored with the kind that it points to */
  74. --dark-external-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='10' height='10'><path fill-opacity='0' stroke='%23fff' stroke-width='10' d='m43,35H5v60h60V57M45,5v10l10,10-30,30 20,20 30-30 10,10h10V5z'/></svg>");
  75. --dark-color-scheme: dark;
  76. }
  77. @media (prefers-color-scheme: light) {
  78. :root {
  79. --color-background: var(--light-color-background);
  80. --color-background-secondary: var(--light-color-background-secondary);
  81. --color-background-warning: var(--light-color-background-warning);
  82. --color-warning-text: var(--light-color-warning-text);
  83. --color-icon-background: var(--light-color-icon-background);
  84. --color-accent: var(--light-color-accent);
  85. --color-active-menu-item: var(--light-color-active-menu-item);
  86. --color-text: var(--light-color-text);
  87. --color-text-aside: var(--light-color-text-aside);
  88. --color-link: var(--light-color-link);
  89. --color-ts-keyword: var(--light-color-ts-keyword);
  90. --color-ts-module: var(--light-color-ts-module);
  91. --color-ts-namespace: var(--light-color-ts-namespace);
  92. --color-ts-enum: var(--light-color-ts-enum);
  93. --color-ts-enum-member: var(--light-color-ts-enum-member);
  94. --color-ts-variable: var(--light-color-ts-variable);
  95. --color-ts-function: var(--light-color-ts-function);
  96. --color-ts-class: var(--light-color-ts-class);
  97. --color-ts-interface: var(--light-color-ts-interface);
  98. --color-ts-constructor: var(--light-color-ts-constructor);
  99. --color-ts-property: var(--light-color-ts-property);
  100. --color-ts-method: var(--light-color-ts-method);
  101. --color-ts-call-signature: var(--light-color-ts-call-signature);
  102. --color-ts-index-signature: var(--light-color-ts-index-signature);
  103. --color-ts-constructor-signature: var(
  104. --light-color-ts-constructor-signature
  105. );
  106. --color-ts-parameter: var(--light-color-ts-parameter);
  107. --color-ts-type-parameter: var(--light-color-ts-type-parameter);
  108. --color-ts-accessor: var(--light-color-ts-accessor);
  109. --color-ts-get-signature: var(--light-color-ts-get-signature);
  110. --color-ts-set-signature: var(--light-color-ts-set-signature);
  111. --color-ts-type-alias: var(--light-color-ts-type-alias);
  112. --external-icon: var(--light-external-icon);
  113. --color-scheme: var(--light-color-scheme);
  114. }
  115. }
  116. @media (prefers-color-scheme: dark) {
  117. :root {
  118. --color-background: var(--dark-color-background);
  119. --color-background-secondary: var(--dark-color-background-secondary);
  120. --color-background-warning: var(--dark-color-background-warning);
  121. --color-warning-text: var(--dark-color-warning-text);
  122. --color-icon-background: var(--dark-color-icon-background);
  123. --color-accent: var(--dark-color-accent);
  124. --color-active-menu-item: var(--dark-color-active-menu-item);
  125. --color-text: var(--dark-color-text);
  126. --color-text-aside: var(--dark-color-text-aside);
  127. --color-link: var(--dark-color-link);
  128. --color-ts-keyword: var(--dark-color-ts-keyword);
  129. --color-ts-module: var(--dark-color-ts-module);
  130. --color-ts-namespace: var(--dark-color-ts-namespace);
  131. --color-ts-enum: var(--dark-color-ts-enum);
  132. --color-ts-enum-member: var(--dark-color-ts-enum-member);
  133. --color-ts-variable: var(--dark-color-ts-variable);
  134. --color-ts-function: var(--dark-color-ts-function);
  135. --color-ts-class: var(--dark-color-ts-class);
  136. --color-ts-interface: var(--dark-color-ts-interface);
  137. --color-ts-constructor: var(--dark-color-ts-constructor);
  138. --color-ts-property: var(--dark-color-ts-property);
  139. --color-ts-method: var(--dark-color-ts-method);
  140. --color-ts-call-signature: var(--dark-color-ts-call-signature);
  141. --color-ts-index-signature: var(--dark-color-ts-index-signature);
  142. --color-ts-constructor-signature: var(
  143. --dark-color-ts-constructor-signature
  144. );
  145. --color-ts-parameter: var(--dark-color-ts-parameter);
  146. --color-ts-type-parameter: var(--dark-color-ts-type-parameter);
  147. --color-ts-accessor: var(--dark-color-ts-accessor);
  148. --color-ts-get-signature: var(--dark-color-ts-get-signature);
  149. --color-ts-set-signature: var(--dark-color-ts-set-signature);
  150. --color-ts-type-alias: var(--dark-color-ts-type-alias);
  151. --external-icon: var(--dark-external-icon);
  152. --color-scheme: var(--dark-color-scheme);
  153. }
  154. }
  155. html {
  156. color-scheme: var(--color-scheme);
  157. }
  158. body {
  159. margin: 0;
  160. }
  161. :root[data-theme="light"] {
  162. --color-background: var(--light-color-background);
  163. --color-background-secondary: var(--light-color-background-secondary);
  164. --color-background-warning: var(--light-color-background-warning);
  165. --color-warning-text: var(--light-color-warning-text);
  166. --color-icon-background: var(--light-color-icon-background);
  167. --color-accent: var(--light-color-accent);
  168. --color-active-menu-item: var(--light-color-active-menu-item);
  169. --color-text: var(--light-color-text);
  170. --color-text-aside: var(--light-color-text-aside);
  171. --color-link: var(--light-color-link);
  172. --color-ts-keyword: var(--light-color-ts-keyword);
  173. --color-ts-module: var(--light-color-ts-module);
  174. --color-ts-namespace: var(--light-color-ts-namespace);
  175. --color-ts-enum: var(--light-color-ts-enum);
  176. --color-ts-enum-member: var(--light-color-ts-enum-member);
  177. --color-ts-variable: var(--light-color-ts-variable);
  178. --color-ts-function: var(--light-color-ts-function);
  179. --color-ts-class: var(--light-color-ts-class);
  180. --color-ts-interface: var(--light-color-ts-interface);
  181. --color-ts-constructor: var(--light-color-ts-constructor);
  182. --color-ts-property: var(--light-color-ts-property);
  183. --color-ts-method: var(--light-color-ts-method);
  184. --color-ts-call-signature: var(--light-color-ts-call-signature);
  185. --color-ts-index-signature: var(--light-color-ts-index-signature);
  186. --color-ts-constructor-signature: var(
  187. --light-color-ts-constructor-signature
  188. );
  189. --color-ts-parameter: var(--light-color-ts-parameter);
  190. --color-ts-type-parameter: var(--light-color-ts-type-parameter);
  191. --color-ts-accessor: var(--light-color-ts-accessor);
  192. --color-ts-get-signature: var(--light-color-ts-get-signature);
  193. --color-ts-set-signature: var(--light-color-ts-set-signature);
  194. --color-ts-type-alias: var(--light-color-ts-type-alias);
  195. --external-icon: var(--light-external-icon);
  196. --color-scheme: var(--light-color-scheme);
  197. }
  198. :root[data-theme="dark"] {
  199. --color-background: var(--dark-color-background);
  200. --color-background-secondary: var(--dark-color-background-secondary);
  201. --color-background-warning: var(--dark-color-background-warning);
  202. --color-warning-text: var(--dark-color-warning-text);
  203. --color-icon-background: var(--dark-color-icon-background);
  204. --color-accent: var(--dark-color-accent);
  205. --color-active-menu-item: var(--dark-color-active-menu-item);
  206. --color-text: var(--dark-color-text);
  207. --color-text-aside: var(--dark-color-text-aside);
  208. --color-link: var(--dark-color-link);
  209. --color-ts-keyword: var(--dark-color-ts-keyword);
  210. --color-ts-module: var(--dark-color-ts-module);
  211. --color-ts-namespace: var(--dark-color-ts-namespace);
  212. --color-ts-enum: var(--dark-color-ts-enum);
  213. --color-ts-enum-member: var(--dark-color-ts-enum-member);
  214. --color-ts-variable: var(--dark-color-ts-variable);
  215. --color-ts-function: var(--dark-color-ts-function);
  216. --color-ts-class: var(--dark-color-ts-class);
  217. --color-ts-interface: var(--dark-color-ts-interface);
  218. --color-ts-constructor: var(--dark-color-ts-constructor);
  219. --color-ts-property: var(--dark-color-ts-property);
  220. --color-ts-method: var(--dark-color-ts-method);
  221. --color-ts-call-signature: var(--dark-color-ts-call-signature);
  222. --color-ts-index-signature: var(--dark-color-ts-index-signature);
  223. --color-ts-constructor-signature: var(
  224. --dark-color-ts-constructor-signature
  225. );
  226. --color-ts-parameter: var(--dark-color-ts-parameter);
  227. --color-ts-type-parameter: var(--dark-color-ts-type-parameter);
  228. --color-ts-accessor: var(--dark-color-ts-accessor);
  229. --color-ts-get-signature: var(--dark-color-ts-get-signature);
  230. --color-ts-set-signature: var(--dark-color-ts-set-signature);
  231. --color-ts-type-alias: var(--dark-color-ts-type-alias);
  232. --external-icon: var(--dark-external-icon);
  233. --color-scheme: var(--dark-color-scheme);
  234. }
  235. .always-visible,
  236. .always-visible .tsd-signatures {
  237. display: inherit !important;
  238. }
  239. h1,
  240. h2,
  241. h3,
  242. h4,
  243. h5,
  244. h6 {
  245. line-height: 1.2;
  246. }
  247. h1 > a:not(.link),
  248. h2 > a:not(.link),
  249. h3 > a:not(.link),
  250. h4 > a:not(.link),
  251. h5 > a:not(.link),
  252. h6 > a:not(.link) {
  253. text-decoration: none;
  254. color: var(--color-text);
  255. }
  256. h1 {
  257. font-size: 1.875rem;
  258. margin: 0.67rem 0;
  259. }
  260. h2 {
  261. font-size: 1.5rem;
  262. margin: 0.83rem 0;
  263. }
  264. h3 {
  265. font-size: 1.25rem;
  266. margin: 1rem 0;
  267. }
  268. h4 {
  269. font-size: 1.05rem;
  270. margin: 1.33rem 0;
  271. }
  272. h5 {
  273. font-size: 1rem;
  274. margin: 1.5rem 0;
  275. }
  276. h6 {
  277. font-size: 0.875rem;
  278. margin: 2.33rem 0;
  279. }
  280. .uppercase {
  281. text-transform: uppercase;
  282. }
  283. dl,
  284. menu,
  285. ol,
  286. ul {
  287. margin: 1em 0;
  288. }
  289. dd {
  290. margin: 0 0 0 40px;
  291. }
  292. .container {
  293. max-width: 1700px;
  294. padding: 0 2rem;
  295. }
  296. /* Footer */
  297. .tsd-generator {
  298. border-top: 1px solid var(--color-accent);
  299. padding-top: 1rem;
  300. padding-bottom: 1rem;
  301. max-height: 3.5rem;
  302. }
  303. .tsd-generator > p {
  304. margin-top: 0;
  305. margin-bottom: 0;
  306. padding: 0 1rem;
  307. }
  308. .container-main {
  309. margin: 0 auto;
  310. /* toolbar, footer, margin */
  311. min-height: calc(100vh - 41px - 56px - 4rem);
  312. }
  313. @keyframes fade-in {
  314. from {
  315. opacity: 0;
  316. }
  317. to {
  318. opacity: 1;
  319. }
  320. }
  321. @keyframes fade-out {
  322. from {
  323. opacity: 1;
  324. visibility: visible;
  325. }
  326. to {
  327. opacity: 0;
  328. }
  329. }
  330. @keyframes fade-in-delayed {
  331. 0% {
  332. opacity: 0;
  333. }
  334. 33% {
  335. opacity: 0;
  336. }
  337. 100% {
  338. opacity: 1;
  339. }
  340. }
  341. @keyframes fade-out-delayed {
  342. 0% {
  343. opacity: 1;
  344. visibility: visible;
  345. }
  346. 66% {
  347. opacity: 0;
  348. }
  349. 100% {
  350. opacity: 0;
  351. }
  352. }
  353. @keyframes pop-in-from-right {
  354. from {
  355. transform: translate(100%, 0);
  356. }
  357. to {
  358. transform: translate(0, 0);
  359. }
  360. }
  361. @keyframes pop-out-to-right {
  362. from {
  363. transform: translate(0, 0);
  364. visibility: visible;
  365. }
  366. to {
  367. transform: translate(100%, 0);
  368. }
  369. }
  370. body {
  371. background: var(--color-background);
  372. font-family: "Segoe UI", sans-serif;
  373. font-size: 16px;
  374. color: var(--color-text);
  375. }
  376. a {
  377. color: var(--color-link);
  378. text-decoration: none;
  379. }
  380. a:hover {
  381. text-decoration: underline;
  382. }
  383. a.external[target="_blank"] {
  384. background-image: var(--external-icon);
  385. background-position: top 3px right;
  386. background-repeat: no-repeat;
  387. padding-right: 13px;
  388. }
  389. code,
  390. pre {
  391. font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  392. padding: 0.2em;
  393. margin: 0;
  394. font-size: 0.875rem;
  395. border-radius: 0.8em;
  396. }
  397. pre {
  398. position: relative;
  399. white-space: pre;
  400. white-space: pre-wrap;
  401. word-wrap: break-word;
  402. padding: 10px;
  403. border: 1px solid var(--color-accent);
  404. }
  405. pre code {
  406. padding: 0;
  407. font-size: 100%;
  408. }
  409. pre > button {
  410. position: absolute;
  411. top: 10px;
  412. right: 10px;
  413. opacity: 0;
  414. transition: opacity 0.1s;
  415. box-sizing: border-box;
  416. }
  417. pre:hover > button,
  418. pre > button.visible {
  419. opacity: 1;
  420. }
  421. blockquote {
  422. margin: 1em 0;
  423. padding-left: 1em;
  424. border-left: 4px solid gray;
  425. }
  426. .tsd-typography {
  427. line-height: 1.333em;
  428. }
  429. .tsd-typography ul {
  430. list-style: square;
  431. padding: 0 0 0 20px;
  432. margin: 0;
  433. }
  434. .tsd-typography .tsd-index-panel h3,
  435. .tsd-index-panel .tsd-typography h3,
  436. .tsd-typography h4,
  437. .tsd-typography h5,
  438. .tsd-typography h6 {
  439. font-size: 1em;
  440. }
  441. .tsd-typography h5,
  442. .tsd-typography h6 {
  443. font-weight: normal;
  444. }
  445. .tsd-typography p,
  446. .tsd-typography ul,
  447. .tsd-typography ol {
  448. margin: 1em 0;
  449. }
  450. .tsd-typography table {
  451. border-collapse: collapse;
  452. border: none;
  453. }
  454. .tsd-typography td,
  455. .tsd-typography th {
  456. padding: 6px 13px;
  457. border: 1px solid var(--color-accent);
  458. }
  459. .tsd-typography thead,
  460. .tsd-typography tr:nth-child(even) {
  461. background-color: var(--color-background-secondary);
  462. }
  463. .tsd-breadcrumb {
  464. margin: 0;
  465. padding: 0;
  466. color: var(--color-text-aside);
  467. }
  468. .tsd-breadcrumb a {
  469. color: var(--color-text-aside);
  470. text-decoration: none;
  471. }
  472. .tsd-breadcrumb a:hover {
  473. text-decoration: underline;
  474. }
  475. .tsd-breadcrumb li {
  476. display: inline;
  477. }
  478. .tsd-breadcrumb li:after {
  479. content: " / ";
  480. }
  481. .tsd-comment-tags {
  482. display: flex;
  483. flex-direction: column;
  484. }
  485. dl.tsd-comment-tag-group {
  486. display: flex;
  487. align-items: center;
  488. overflow: hidden;
  489. margin: 0.5em 0;
  490. }
  491. dl.tsd-comment-tag-group dt {
  492. display: flex;
  493. margin-right: 0.5em;
  494. font-size: 0.875em;
  495. font-weight: normal;
  496. }
  497. dl.tsd-comment-tag-group dd {
  498. margin: 0;
  499. }
  500. code.tsd-tag {
  501. padding: 0.25em 0.4em;
  502. border: 0.1em solid var(--color-accent);
  503. margin-right: 0.25em;
  504. font-size: 70%;
  505. }
  506. h1 code.tsd-tag:first-of-type {
  507. margin-left: 0.25em;
  508. }
  509. dl.tsd-comment-tag-group dd:before,
  510. dl.tsd-comment-tag-group dd:after {
  511. content: " ";
  512. }
  513. dl.tsd-comment-tag-group dd pre,
  514. dl.tsd-comment-tag-group dd:after {
  515. clear: both;
  516. }
  517. dl.tsd-comment-tag-group p {
  518. margin: 0;
  519. }
  520. .tsd-panel.tsd-comment .lead {
  521. font-size: 1.1em;
  522. line-height: 1.333em;
  523. margin-bottom: 2em;
  524. }
  525. .tsd-panel.tsd-comment .lead:last-child {
  526. margin-bottom: 0;
  527. }
  528. .tsd-filter-visibility h4 {
  529. font-size: 1rem;
  530. padding-top: 0.75rem;
  531. padding-bottom: 0.5rem;
  532. margin: 0;
  533. }
  534. .tsd-filter-item:not(:last-child) {
  535. margin-bottom: 0.5rem;
  536. }
  537. .tsd-filter-input {
  538. display: flex;
  539. width: fit-content;
  540. width: -moz-fit-content;
  541. align-items: center;
  542. user-select: none;
  543. -webkit-user-select: none;
  544. -moz-user-select: none;
  545. -ms-user-select: none;
  546. cursor: pointer;
  547. }
  548. .tsd-filter-input input[type="checkbox"] {
  549. cursor: pointer;
  550. position: absolute;
  551. width: 1.5em;
  552. height: 1.5em;
  553. opacity: 0;
  554. }
  555. .tsd-filter-input input[type="checkbox"]:disabled {
  556. pointer-events: none;
  557. }
  558. .tsd-filter-input svg {
  559. cursor: pointer;
  560. width: 1.5em;
  561. height: 1.5em;
  562. margin-right: 0.5em;
  563. border-radius: 0.33em;
  564. /* Leaving this at full opacity breaks event listeners on Firefox.
  565. Don't remove unless you know what you're doing. */
  566. opacity: 0.99;
  567. }
  568. .tsd-filter-input input[type="checkbox"]:focus + svg {
  569. transform: scale(0.95);
  570. }
  571. .tsd-filter-input input[type="checkbox"]:focus:not(:focus-visible) + svg {
  572. transform: scale(1);
  573. }
  574. .tsd-checkbox-background {
  575. fill: var(--color-accent);
  576. }
  577. input[type="checkbox"]:checked ~ svg .tsd-checkbox-checkmark {
  578. stroke: var(--color-text);
  579. }
  580. .tsd-filter-input input:disabled ~ svg > .tsd-checkbox-background {
  581. fill: var(--color-background);
  582. stroke: var(--color-accent);
  583. stroke-width: 0.25rem;
  584. }
  585. .tsd-filter-input input:disabled ~ svg > .tsd-checkbox-checkmark {
  586. stroke: var(--color-accent);
  587. }
  588. .tsd-theme-toggle {
  589. padding-top: 0.75rem;
  590. }
  591. .tsd-theme-toggle > h4 {
  592. display: inline;
  593. vertical-align: middle;
  594. margin-right: 0.75rem;
  595. }
  596. .tsd-hierarchy {
  597. list-style: square;
  598. margin: 0;
  599. }
  600. .tsd-hierarchy .target {
  601. font-weight: bold;
  602. }
  603. .tsd-full-hierarchy:not(:last-child) {
  604. margin-bottom: 1em;
  605. padding-bottom: 1em;
  606. border-bottom: 1px solid var(--color-accent);
  607. }
  608. .tsd-full-hierarchy,
  609. .tsd-full-hierarchy ul {
  610. list-style: none;
  611. margin: 0;
  612. padding: 0;
  613. }
  614. .tsd-full-hierarchy ul {
  615. padding-left: 1.5rem;
  616. }
  617. .tsd-full-hierarchy a {
  618. padding: 0.25rem 0 !important;
  619. font-size: 1rem;
  620. display: inline-flex;
  621. align-items: center;
  622. color: var(--color-text);
  623. }
  624. .tsd-panel-group.tsd-index-group {
  625. margin-bottom: 0;
  626. }
  627. .tsd-index-panel .tsd-index-list {
  628. list-style: none;
  629. line-height: 1.333em;
  630. margin: 0;
  631. padding: 0.25rem 0 0 0;
  632. overflow: hidden;
  633. display: grid;
  634. grid-template-columns: repeat(3, 1fr);
  635. column-gap: 1rem;
  636. grid-template-rows: auto;
  637. }
  638. @media (max-width: 1024px) {
  639. .tsd-index-panel .tsd-index-list {
  640. grid-template-columns: repeat(2, 1fr);
  641. }
  642. }
  643. @media (max-width: 768px) {
  644. .tsd-index-panel .tsd-index-list {
  645. grid-template-columns: repeat(1, 1fr);
  646. }
  647. }
  648. .tsd-index-panel .tsd-index-list li {
  649. -webkit-page-break-inside: avoid;
  650. -moz-page-break-inside: avoid;
  651. -ms-page-break-inside: avoid;
  652. -o-page-break-inside: avoid;
  653. page-break-inside: avoid;
  654. }
  655. .tsd-flag {
  656. display: inline-block;
  657. padding: 0.25em 0.4em;
  658. border-radius: 4px;
  659. color: var(--color-comment-tag-text);
  660. background-color: var(--color-comment-tag);
  661. text-indent: 0;
  662. font-size: 75%;
  663. line-height: 1;
  664. font-weight: normal;
  665. }
  666. .tsd-anchor {
  667. position: relative;
  668. top: -100px;
  669. }
  670. .tsd-member {
  671. position: relative;
  672. }
  673. .tsd-member .tsd-anchor + h3 {
  674. display: flex;
  675. align-items: center;
  676. margin-top: 0;
  677. margin-bottom: 0;
  678. border-bottom: none;
  679. }
  680. .tsd-navigation.settings {
  681. margin: 1rem 0;
  682. }
  683. .tsd-navigation > a,
  684. .tsd-navigation .tsd-accordion-summary {
  685. width: calc(100% - 0.25rem);
  686. display: flex;
  687. align-items: center;
  688. }
  689. .tsd-navigation a,
  690. .tsd-navigation summary > span,
  691. .tsd-page-navigation a {
  692. display: flex;
  693. width: calc(100% - 0.25rem);
  694. align-items: center;
  695. padding: 0.25rem;
  696. color: var(--color-text);
  697. text-decoration: none;
  698. box-sizing: border-box;
  699. }
  700. .tsd-navigation a.current,
  701. .tsd-page-navigation a.current {
  702. background: var(--color-active-menu-item);
  703. }
  704. .tsd-navigation a:hover,
  705. .tsd-page-navigation a:hover {
  706. text-decoration: underline;
  707. }
  708. .tsd-navigation ul,
  709. .tsd-page-navigation ul {
  710. margin-top: 0;
  711. margin-bottom: 0;
  712. padding: 0;
  713. list-style: none;
  714. }
  715. .tsd-navigation li,
  716. .tsd-page-navigation li {
  717. padding: 0;
  718. max-width: 100%;
  719. }
  720. .tsd-nested-navigation {
  721. margin-left: 3rem;
  722. }
  723. .tsd-nested-navigation > li > details {
  724. margin-left: -1.5rem;
  725. }
  726. .tsd-small-nested-navigation {
  727. margin-left: 1.5rem;
  728. }
  729. .tsd-small-nested-navigation > li > details {
  730. margin-left: -1.5rem;
  731. }
  732. .tsd-page-navigation ul {
  733. padding-left: 1.75rem;
  734. }
  735. #tsd-sidebar-links a {
  736. margin-top: 0;
  737. margin-bottom: 0.5rem;
  738. line-height: 1.25rem;
  739. }
  740. #tsd-sidebar-links a:last-of-type {
  741. margin-bottom: 0;
  742. }
  743. a.tsd-index-link {
  744. padding: 0.25rem 0 !important;
  745. font-size: 1rem;
  746. line-height: 1.25rem;
  747. display: inline-flex;
  748. align-items: center;
  749. color: var(--color-text);
  750. }
  751. .tsd-accordion-summary {
  752. list-style-type: none; /* hide marker on non-safari */
  753. outline: none; /* broken on safari, so just hide it */
  754. }
  755. .tsd-accordion-summary::-webkit-details-marker {
  756. display: none; /* hide marker on safari */
  757. }
  758. .tsd-accordion-summary,
  759. .tsd-accordion-summary a {
  760. user-select: none;
  761. -moz-user-select: none;
  762. -webkit-user-select: none;
  763. -ms-user-select: none;
  764. cursor: pointer;
  765. }
  766. .tsd-accordion-summary a {
  767. width: calc(100% - 1.5rem);
  768. }
  769. .tsd-accordion-summary > * {
  770. margin-top: 0;
  771. margin-bottom: 0;
  772. padding-top: 0;
  773. padding-bottom: 0;
  774. }
  775. .tsd-index-accordion .tsd-accordion-summary > svg {
  776. margin-left: 0.25rem;
  777. }
  778. .tsd-index-content > :not(:first-child) {
  779. margin-top: 0.75rem;
  780. }
  781. .tsd-index-heading {
  782. margin-top: 1.5rem;
  783. margin-bottom: 0.75rem;
  784. }
  785. .tsd-kind-icon {
  786. margin-right: 0.5rem;
  787. width: 1.25rem;
  788. height: 1.25rem;
  789. min-width: 1.25rem;
  790. min-height: 1.25rem;
  791. }
  792. .tsd-kind-icon path {
  793. transform-origin: center;
  794. transform: scale(1.1);
  795. }
  796. .tsd-signature > .tsd-kind-icon {
  797. margin-right: 0.8rem;
  798. }
  799. .tsd-panel {
  800. margin-bottom: 2.5rem;
  801. }
  802. .tsd-panel.tsd-member {
  803. margin-bottom: 4rem;
  804. }
  805. .tsd-panel:empty {
  806. display: none;
  807. }
  808. .tsd-panel > h1,
  809. .tsd-panel > h2,
  810. .tsd-panel > h3 {
  811. margin: 1.5rem -1.5rem 0.75rem -1.5rem;
  812. padding: 0 1.5rem 0.75rem 1.5rem;
  813. }
  814. .tsd-panel > h1.tsd-before-signature,
  815. .tsd-panel > h2.tsd-before-signature,
  816. .tsd-panel > h3.tsd-before-signature {
  817. margin-bottom: 0;
  818. border-bottom: none;
  819. }
  820. .tsd-panel-group {
  821. margin: 4rem 0;
  822. }
  823. .tsd-panel-group.tsd-index-group {
  824. margin: 2rem 0;
  825. }
  826. .tsd-panel-group.tsd-index-group details {
  827. margin: 2rem 0;
  828. }
  829. #tsd-search {
  830. transition: background-color 0.2s;
  831. }
  832. #tsd-search .title {
  833. position: relative;
  834. z-index: 2;
  835. }
  836. #tsd-search .field {
  837. position: absolute;
  838. left: 0;
  839. top: 0;
  840. right: 2.5rem;
  841. height: 100%;
  842. }
  843. #tsd-search .field input {
  844. box-sizing: border-box;
  845. position: relative;
  846. top: -50px;
  847. z-index: 1;
  848. width: 100%;
  849. padding: 0 10px;
  850. opacity: 0;
  851. outline: 0;
  852. border: 0;
  853. background: transparent;
  854. color: var(--color-text);
  855. }
  856. #tsd-search .field label {
  857. position: absolute;
  858. overflow: hidden;
  859. right: -40px;
  860. }
  861. #tsd-search .field input,
  862. #tsd-search .title,
  863. #tsd-toolbar-links a {
  864. transition: opacity 0.2s;
  865. }
  866. #tsd-search .results {
  867. position: absolute;
  868. visibility: hidden;
  869. top: 40px;
  870. width: 100%;
  871. margin: 0;
  872. padding: 0;
  873. list-style: none;
  874. box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  875. }
  876. #tsd-search .results li {
  877. background-color: var(--color-background);
  878. line-height: initial;
  879. padding: 4px;
  880. }
  881. #tsd-search .results li:nth-child(even) {
  882. background-color: var(--color-background-secondary);
  883. }
  884. #tsd-search .results li.state {
  885. display: none;
  886. }
  887. #tsd-search .results li.current:not(.no-results),
  888. #tsd-search .results li:hover:not(.no-results) {
  889. background-color: var(--color-accent);
  890. }
  891. #tsd-search .results a {
  892. display: flex;
  893. align-items: center;
  894. padding: 0.25rem;
  895. box-sizing: border-box;
  896. }
  897. #tsd-search .results a:before {
  898. top: 10px;
  899. }
  900. #tsd-search .results span.parent {
  901. color: var(--color-text-aside);
  902. font-weight: normal;
  903. }
  904. #tsd-search.has-focus {
  905. background-color: var(--color-accent);
  906. }
  907. #tsd-search.has-focus .field input {
  908. top: 0;
  909. opacity: 1;
  910. }
  911. #tsd-search.has-focus .title,
  912. #tsd-search.has-focus #tsd-toolbar-links a {
  913. z-index: 0;
  914. opacity: 0;
  915. }
  916. #tsd-search.has-focus .results {
  917. visibility: visible;
  918. }
  919. #tsd-search.loading .results li.state.loading {
  920. display: block;
  921. }
  922. #tsd-search.failure .results li.state.failure {
  923. display: block;
  924. }
  925. #tsd-toolbar-links {
  926. position: absolute;
  927. top: 0;
  928. right: 2rem;
  929. height: 100%;
  930. display: flex;
  931. align-items: center;
  932. justify-content: flex-end;
  933. }
  934. #tsd-toolbar-links a {
  935. margin-left: 1.5rem;
  936. }
  937. #tsd-toolbar-links a:hover {
  938. text-decoration: underline;
  939. }
  940. .tsd-signature {
  941. margin: 0 0 1rem 0;
  942. padding: 1rem 0.5rem;
  943. border: 1px solid var(--color-accent);
  944. font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  945. font-size: 14px;
  946. overflow-x: auto;
  947. }
  948. .tsd-signature-keyword {
  949. color: var(--color-ts-keyword);
  950. font-weight: normal;
  951. }
  952. .tsd-signature-symbol {
  953. color: var(--color-text-aside);
  954. font-weight: normal;
  955. }
  956. .tsd-signature-type {
  957. font-style: italic;
  958. font-weight: normal;
  959. }
  960. .tsd-signatures {
  961. padding: 0;
  962. margin: 0 0 1em 0;
  963. list-style-type: none;
  964. }
  965. .tsd-signatures .tsd-signature {
  966. margin: 0;
  967. border-color: var(--color-accent);
  968. border-width: 1px 0;
  969. transition: background-color 0.1s;
  970. }
  971. .tsd-description .tsd-signatures .tsd-signature {
  972. border-width: 1px;
  973. }
  974. ul.tsd-parameter-list,
  975. ul.tsd-type-parameter-list {
  976. list-style: square;
  977. margin: 0;
  978. padding-left: 20px;
  979. }
  980. ul.tsd-parameter-list > li.tsd-parameter-signature,
  981. ul.tsd-type-parameter-list > li.tsd-parameter-signature {
  982. list-style: none;
  983. margin-left: -20px;
  984. }
  985. ul.tsd-parameter-list h5,
  986. ul.tsd-type-parameter-list h5 {
  987. font-size: 16px;
  988. margin: 1em 0 0.5em 0;
  989. }
  990. .tsd-sources {
  991. margin-top: 1rem;
  992. font-size: 0.875em;
  993. }
  994. .tsd-sources a {
  995. color: var(--color-text-aside);
  996. text-decoration: underline;
  997. }
  998. .tsd-sources ul {
  999. list-style: none;
  1000. padding: 0;
  1001. }
  1002. .tsd-page-toolbar {
  1003. position: sticky;
  1004. z-index: 1;
  1005. top: 0;
  1006. left: 0;
  1007. width: 100%;
  1008. color: var(--color-text);
  1009. background: var(--color-background-secondary);
  1010. border-bottom: 1px var(--color-accent) solid;
  1011. transition: transform 0.3s ease-in-out;
  1012. }
  1013. .tsd-page-toolbar a {
  1014. color: var(--color-text);
  1015. text-decoration: none;
  1016. }
  1017. .tsd-page-toolbar a.title {
  1018. font-weight: bold;
  1019. }
  1020. .tsd-page-toolbar a.title:hover {
  1021. text-decoration: underline;
  1022. }
  1023. .tsd-page-toolbar .tsd-toolbar-contents {
  1024. display: flex;
  1025. justify-content: space-between;
  1026. height: 2.5rem;
  1027. margin: 0 auto;
  1028. }
  1029. .tsd-page-toolbar .table-cell {
  1030. position: relative;
  1031. white-space: nowrap;
  1032. line-height: 40px;
  1033. }
  1034. .tsd-page-toolbar .table-cell:first-child {
  1035. width: 100%;
  1036. }
  1037. .tsd-page-toolbar .tsd-toolbar-icon {
  1038. box-sizing: border-box;
  1039. line-height: 0;
  1040. padding: 12px 0;
  1041. }
  1042. .tsd-widget {
  1043. display: inline-block;
  1044. overflow: hidden;
  1045. opacity: 0.8;
  1046. height: 40px;
  1047. transition:
  1048. opacity 0.1s,
  1049. background-color 0.2s;
  1050. vertical-align: bottom;
  1051. cursor: pointer;
  1052. }
  1053. .tsd-widget:hover {
  1054. opacity: 0.9;
  1055. }
  1056. .tsd-widget.active {
  1057. opacity: 1;
  1058. background-color: var(--color-accent);
  1059. }
  1060. .tsd-widget.no-caption {
  1061. width: 40px;
  1062. }
  1063. .tsd-widget.no-caption:before {
  1064. margin: 0;
  1065. }
  1066. .tsd-widget.options,
  1067. .tsd-widget.menu {
  1068. display: none;
  1069. }
  1070. input[type="checkbox"] + .tsd-widget:before {
  1071. background-position: -120px 0;
  1072. }
  1073. input[type="checkbox"]:checked + .tsd-widget:before {
  1074. background-position: -160px 0;
  1075. }
  1076. img {
  1077. max-width: 100%;
  1078. }
  1079. .tsd-anchor-icon {
  1080. display: inline-flex;
  1081. align-items: center;
  1082. margin-left: 0.5rem;
  1083. vertical-align: middle;
  1084. color: var(--color-text);
  1085. }
  1086. .tsd-anchor-icon svg {
  1087. width: 1em;
  1088. height: 1em;
  1089. visibility: hidden;
  1090. }
  1091. .tsd-anchor-link:hover > .tsd-anchor-icon svg {
  1092. visibility: visible;
  1093. }
  1094. .deprecated {
  1095. text-decoration: line-through !important;
  1096. }
  1097. .warning {
  1098. padding: 1rem;
  1099. color: var(--color-warning-text);
  1100. background: var(--color-background-warning);
  1101. }
  1102. .tsd-kind-project {
  1103. color: var(--color-ts-project);
  1104. }
  1105. .tsd-kind-module {
  1106. color: var(--color-ts-module);
  1107. }
  1108. .tsd-kind-namespace {
  1109. color: var(--color-ts-namespace);
  1110. }
  1111. .tsd-kind-enum {
  1112. color: var(--color-ts-enum);
  1113. }
  1114. .tsd-kind-enum-member {
  1115. color: var(--color-ts-enum-member);
  1116. }
  1117. .tsd-kind-variable {
  1118. color: var(--color-ts-variable);
  1119. }
  1120. .tsd-kind-function {
  1121. color: var(--color-ts-function);
  1122. }
  1123. .tsd-kind-class {
  1124. color: var(--color-ts-class);
  1125. }
  1126. .tsd-kind-interface {
  1127. color: var(--color-ts-interface);
  1128. }
  1129. .tsd-kind-constructor {
  1130. color: var(--color-ts-constructor);
  1131. }
  1132. .tsd-kind-property {
  1133. color: var(--color-ts-property);
  1134. }
  1135. .tsd-kind-method {
  1136. color: var(--color-ts-method);
  1137. }
  1138. .tsd-kind-call-signature {
  1139. color: var(--color-ts-call-signature);
  1140. }
  1141. .tsd-kind-index-signature {
  1142. color: var(--color-ts-index-signature);
  1143. }
  1144. .tsd-kind-constructor-signature {
  1145. color: var(--color-ts-constructor-signature);
  1146. }
  1147. .tsd-kind-parameter {
  1148. color: var(--color-ts-parameter);
  1149. }
  1150. .tsd-kind-type-literal {
  1151. color: var(--color-ts-type-literal);
  1152. }
  1153. .tsd-kind-type-parameter {
  1154. color: var(--color-ts-type-parameter);
  1155. }
  1156. .tsd-kind-accessor {
  1157. color: var(--color-ts-accessor);
  1158. }
  1159. .tsd-kind-get-signature {
  1160. color: var(--color-ts-get-signature);
  1161. }
  1162. .tsd-kind-set-signature {
  1163. color: var(--color-ts-set-signature);
  1164. }
  1165. .tsd-kind-type-alias {
  1166. color: var(--color-ts-type-alias);
  1167. }
  1168. /* if we have a kind icon, don't color the text by kind */
  1169. .tsd-kind-icon ~ span {
  1170. color: var(--color-text);
  1171. }
  1172. * {
  1173. scrollbar-width: thin;
  1174. scrollbar-color: var(--color-accent) var(--color-icon-background);
  1175. }
  1176. *::-webkit-scrollbar {
  1177. width: 0.75rem;
  1178. }
  1179. *::-webkit-scrollbar-track {
  1180. background: var(--color-icon-background);
  1181. }
  1182. *::-webkit-scrollbar-thumb {
  1183. background-color: var(--color-accent);
  1184. border-radius: 999rem;
  1185. border: 0.25rem solid var(--color-icon-background);
  1186. }
  1187. /* mobile */
  1188. @media (max-width: 769px) {
  1189. .tsd-widget.options,
  1190. .tsd-widget.menu {
  1191. display: inline-block;
  1192. }
  1193. .container-main {
  1194. display: flex;
  1195. }
  1196. html .col-content {
  1197. float: none;
  1198. max-width: 100%;
  1199. width: 100%;
  1200. }
  1201. html .col-sidebar {
  1202. position: fixed !important;
  1203. overflow-y: auto;
  1204. -webkit-overflow-scrolling: touch;
  1205. z-index: 1024;
  1206. top: 0 !important;
  1207. bottom: 0 !important;
  1208. left: auto !important;
  1209. right: 0 !important;
  1210. padding: 1.5rem 1.5rem 0 0;
  1211. width: 75vw;
  1212. visibility: hidden;
  1213. background-color: var(--color-background);
  1214. transform: translate(100%, 0);
  1215. }
  1216. html .col-sidebar > *:last-child {
  1217. padding-bottom: 20px;
  1218. }
  1219. html .overlay {
  1220. content: "";
  1221. display: block;
  1222. position: fixed;
  1223. z-index: 1023;
  1224. top: 0;
  1225. left: 0;
  1226. right: 0;
  1227. bottom: 0;
  1228. background-color: rgba(0, 0, 0, 0.75);
  1229. visibility: hidden;
  1230. }
  1231. .to-has-menu .overlay {
  1232. animation: fade-in 0.4s;
  1233. }
  1234. .to-has-menu .col-sidebar {
  1235. animation: pop-in-from-right 0.4s;
  1236. }
  1237. .from-has-menu .overlay {
  1238. animation: fade-out 0.4s;
  1239. }
  1240. .from-has-menu .col-sidebar {
  1241. animation: pop-out-to-right 0.4s;
  1242. }
  1243. .has-menu body {
  1244. overflow: hidden;
  1245. }
  1246. .has-menu .overlay {
  1247. visibility: visible;
  1248. }
  1249. .has-menu .col-sidebar {
  1250. visibility: visible;
  1251. transform: translate(0, 0);
  1252. display: flex;
  1253. flex-direction: column;
  1254. gap: 1.5rem;
  1255. max-height: 100vh;
  1256. padding: 1rem 2rem;
  1257. }
  1258. .has-menu .tsd-navigation {
  1259. max-height: 100%;
  1260. }
  1261. }
  1262. /* one sidebar */
  1263. @media (min-width: 770px) {
  1264. .container-main {
  1265. display: grid;
  1266. grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  1267. grid-template-areas: "sidebar content";
  1268. margin: 2rem auto;
  1269. }
  1270. .col-sidebar {
  1271. grid-area: sidebar;
  1272. }
  1273. .col-content {
  1274. grid-area: content;
  1275. padding: 0 1rem;
  1276. }
  1277. }
  1278. @media (min-width: 770px) and (max-width: 1399px) {
  1279. .col-sidebar {
  1280. max-height: calc(100vh - 2rem - 42px);
  1281. overflow: auto;
  1282. position: sticky;
  1283. top: 42px;
  1284. padding-top: 1rem;
  1285. }
  1286. .site-menu {
  1287. margin-top: 1rem;
  1288. }
  1289. }
  1290. /* two sidebars */
  1291. @media (min-width: 1200px) {
  1292. .container-main {
  1293. grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) minmax(0, 20rem);
  1294. grid-template-areas: "sidebar content toc";
  1295. }
  1296. .col-sidebar {
  1297. display: contents;
  1298. }
  1299. .page-menu {
  1300. grid-area: toc;
  1301. padding-left: 1rem;
  1302. }
  1303. .site-menu {
  1304. grid-area: sidebar;
  1305. }
  1306. .site-menu {
  1307. margin-top: 1rem 0;
  1308. }
  1309. .page-menu,
  1310. .site-menu {
  1311. max-height: calc(100vh - 2rem - 42px);
  1312. overflow: auto;
  1313. position: sticky;
  1314. top: 42px;
  1315. }
  1316. }