X-Git-Url: https://git.piment-noir.org/?a=blobdiff_plain;f=docs%2Fassets%2Fstyle.css;h=072daed853175b4e9bcfc7f10a042b1413c9121e;hb=ecde6ea8c439bbdd9dc2ca118731b5006a1a9884;hp=958d2c263e0ca64f530c8de1a8c95b88dfb66243;hpb=a76fac14098cf2138cf8d6997ac7c89d8c3ae508;p=poolifier.git diff --git a/docs/assets/style.css b/docs/assets/style.css index 958d2c26..072daed8 100644 --- a/docs/assets/style.css +++ b/docs/assets/style.css @@ -2,38 +2,80 @@ /* Light */ --light-color-background: #f2f4f8; --light-color-background-secondary: #eff0f1; + --light-color-warning-text: #222; + --light-color-background-warning: #e6e600; --light-color-icon-background: var(--light-color-background); --light-color-accent: #c5c7c9; + --light-color-active-menu-item: var(--light-color-accent); --light-color-text: #222; - --light-color-text-aside: #707070; - --light-color-link: #4da6ff; - --light-color-ts: #db1373; - --light-color-ts-interface: #139d2c; - --light-color-ts-enum: #9c891a; - --light-color-ts-class: #2484e5; + --light-color-text-aside: #6e6e6e; + --light-color-link: #1f70c2; + + --light-color-ts-keyword: #056bd6; + --light-color-ts-project: #b111c9; + --light-color-ts-module: var(--light-color-ts-project); + --light-color-ts-namespace: var(--light-color-ts-project); + --light-color-ts-enum: #7e6f15; + --light-color-ts-enum-member: var(--light-color-ts-enum); + --light-color-ts-variable: #4760ec; --light-color-ts-function: #572be7; - --light-color-ts-namespace: #b111c9; - --light-color-ts-private: #707070; - --light-color-ts-variable: #4d68ff; + --light-color-ts-class: #1f70c2; + --light-color-ts-interface: #108024; + --light-color-ts-constructor: var(--light-color-ts-class); + --light-color-ts-property: var(--light-color-ts-variable); + --light-color-ts-method: var(--light-color-ts-function); + --light-color-ts-call-signature: var(--light-color-ts-method); + --light-color-ts-index-signature: var(--light-color-ts-property); + --light-color-ts-constructor-signature: var(--light-color-ts-constructor); + --light-color-ts-parameter: var(--light-color-ts-variable); + /* type literal not included as links will never be generated to it */ + --light-color-ts-type-parameter: #a55c0e; + --light-color-ts-accessor: var(--light-color-ts-property); + --light-color-ts-get-signature: var(--light-color-ts-accessor); + --light-color-ts-set-signature: var(--light-color-ts-accessor); + --light-color-ts-type-alias: #d51270; + /* reference not included as links will be colored with the kind that it points to */ + --light-external-icon: url("data:image/svg+xml;utf8,"); --light-color-scheme: light; /* Dark */ --dark-color-background: #2b2e33; --dark-color-background-secondary: #1e2024; + --dark-color-background-warning: #bebe00; + --dark-color-warning-text: #222; --dark-color-icon-background: var(--dark-color-background-secondary); --dark-color-accent: #9096a2; + --dark-color-active-menu-item: #5d5d6a; --dark-color-text: #f5f5f5; --dark-color-text-aside: #dddddd; --dark-color-link: #00aff4; - --dark-color-ts: #ff6492; - --dark-color-ts-interface: #6cff87; + + --dark-color-ts-keyword: #3399ff; + --dark-color-ts-project: #e358ff; + --dark-color-ts-module: var(--dark-color-ts-project); + --dark-color-ts-namespace: var(--dark-color-ts-project); --dark-color-ts-enum: #f4d93e; - --dark-color-ts-class: #61b0ff; - --dark-color-ts-function: #9772ff; - --dark-color-ts-namespace: #e14dff; - --dark-color-ts-private: #e2e2e2; - --dark-color-ts-variable: #4d68ff; + --dark-color-ts-enum-member: var(--dark-color-ts-enum); + --dark-color-ts-variable: #798dff; + --dark-color-ts-function: #a280ff; + --dark-color-ts-class: #8ac4ff; + --dark-color-ts-interface: #6cff87; + --dark-color-ts-constructor: var(--dark-color-ts-class); + --dark-color-ts-property: var(--dark-color-ts-variable); + --dark-color-ts-method: var(--dark-color-ts-function); + --dark-color-ts-call-signature: var(--dark-color-ts-method); + --dark-color-ts-index-signature: var(--dark-color-ts-property); + --dark-color-ts-constructor-signature: var(--dark-color-ts-constructor); + --dark-color-ts-parameter: var(--dark-color-ts-variable); + /* type literal not included as links will never be generated to it */ + --dark-color-ts-type-parameter: #e07d13; + --dark-color-ts-accessor: var(--dark-color-ts-property); + --dark-color-ts-get-signature: var(--dark-color-ts-accessor); + --dark-color-ts-set-signature: var(--dark-color-ts-accessor); + --dark-color-ts-type-alias: #ff6492; + /* reference not included as links will be colored with the kind that it points to */ + --dark-external-icon: url("data:image/svg+xml;utf8,"); --dark-color-scheme: dark; } @@ -42,19 +84,39 @@ :root { --color-background: var(--light-color-background); --color-background-secondary: var(--light-color-background-secondary); + --color-background-warning: var(--light-color-background-warning); + --color-warning-text: var(--light-color-warning-text); --color-icon-background: var(--light-color-icon-background); --color-accent: var(--light-color-accent); + --color-active-menu-item: var(--light-color-active-menu-item); --color-text: var(--light-color-text); --color-text-aside: var(--light-color-text-aside); --color-link: var(--light-color-link); - --color-ts: var(--light-color-ts); - --color-ts-interface: var(--light-color-ts-interface); - --color-ts-enum: var(--light-color-ts-enum); - --color-ts-class: var(--light-color-ts-class); - --color-ts-function: var(--light-color-ts-function); + + --color-ts-keyword: var(--light-color-ts-keyword); + --color-ts-module: var(--light-color-ts-module); --color-ts-namespace: var(--light-color-ts-namespace); - --color-ts-private: var(--light-color-ts-private); + --color-ts-enum: var(--light-color-ts-enum); + --color-ts-enum-member: var(--light-color-ts-enum-member); --color-ts-variable: var(--light-color-ts-variable); + --color-ts-function: var(--light-color-ts-function); + --color-ts-class: var(--light-color-ts-class); + --color-ts-interface: var(--light-color-ts-interface); + --color-ts-constructor: var(--light-color-ts-constructor); + --color-ts-property: var(--light-color-ts-property); + --color-ts-method: var(--light-color-ts-method); + --color-ts-call-signature: var(--light-color-ts-call-signature); + --color-ts-index-signature: var(--light-color-ts-index-signature); + --color-ts-constructor-signature: var( + --light-color-ts-constructor-signature + ); + --color-ts-parameter: var(--light-color-ts-parameter); + --color-ts-type-parameter: var(--light-color-ts-type-parameter); + --color-ts-accessor: var(--light-color-ts-accessor); + --color-ts-get-signature: var(--light-color-ts-get-signature); + --color-ts-set-signature: var(--light-color-ts-set-signature); + --color-ts-type-alias: var(--light-color-ts-type-alias); + --external-icon: var(--light-external-icon); --color-scheme: var(--light-color-scheme); } @@ -64,19 +126,39 @@ :root { --color-background: var(--dark-color-background); --color-background-secondary: var(--dark-color-background-secondary); + --color-background-warning: var(--dark-color-background-warning); + --color-warning-text: var(--dark-color-warning-text); --color-icon-background: var(--dark-color-icon-background); --color-accent: var(--dark-color-accent); + --color-active-menu-item: var(--dark-color-active-menu-item); --color-text: var(--dark-color-text); --color-text-aside: var(--dark-color-text-aside); --color-link: var(--dark-color-link); - --color-ts: var(--dark-color-ts); - --color-ts-interface: var(--dark-color-ts-interface); - --color-ts-enum: var(--dark-color-ts-enum); - --color-ts-class: var(--dark-color-ts-class); - --color-ts-function: var(--dark-color-ts-function); + + --color-ts-keyword: var(--dark-color-ts-keyword); + --color-ts-module: var(--dark-color-ts-module); --color-ts-namespace: var(--dark-color-ts-namespace); - --color-ts-private: var(--dark-color-ts-private); + --color-ts-enum: var(--dark-color-ts-enum); + --color-ts-enum-member: var(--dark-color-ts-enum-member); --color-ts-variable: var(--dark-color-ts-variable); + --color-ts-function: var(--dark-color-ts-function); + --color-ts-class: var(--dark-color-ts-class); + --color-ts-interface: var(--dark-color-ts-interface); + --color-ts-constructor: var(--dark-color-ts-constructor); + --color-ts-property: var(--dark-color-ts-property); + --color-ts-method: var(--dark-color-ts-method); + --color-ts-call-signature: var(--dark-color-ts-call-signature); + --color-ts-index-signature: var(--dark-color-ts-index-signature); + --color-ts-constructor-signature: var( + --dark-color-ts-constructor-signature + ); + --color-ts-parameter: var(--dark-color-ts-parameter); + --color-ts-type-parameter: var(--dark-color-ts-type-parameter); + --color-ts-accessor: var(--dark-color-ts-accessor); + --color-ts-get-signature: var(--dark-color-ts-get-signature); + --color-ts-set-signature: var(--dark-color-ts-set-signature); + --color-ts-type-alias: var(--dark-color-ts-type-alias); + --external-icon: var(--dark-external-icon); --color-scheme: var(--dark-color-scheme); } @@ -93,19 +175,39 @@ body { :root[data-theme="light"] { --color-background: var(--light-color-background); --color-background-secondary: var(--light-color-background-secondary); + --color-background-warning: var(--light-color-background-warning); + --color-warning-text: var(--light-color-warning-text); --color-icon-background: var(--light-color-icon-background); --color-accent: var(--light-color-accent); + --color-active-menu-item: var(--light-color-active-menu-item); --color-text: var(--light-color-text); --color-text-aside: var(--light-color-text-aside); --color-link: var(--light-color-link); - --color-ts: var(--light-color-ts); - --color-ts-interface: var(--light-color-ts-interface); - --color-ts-enum: var(--light-color-ts-enum); - --color-ts-class: var(--light-color-ts-class); - --color-ts-function: var(--light-color-ts-function); + + --color-ts-keyword: var(--light-color-ts-keyword); + --color-ts-module: var(--light-color-ts-module); --color-ts-namespace: var(--light-color-ts-namespace); - --color-ts-private: var(--light-color-ts-private); + --color-ts-enum: var(--light-color-ts-enum); + --color-ts-enum-member: var(--light-color-ts-enum-member); --color-ts-variable: var(--light-color-ts-variable); + --color-ts-function: var(--light-color-ts-function); + --color-ts-class: var(--light-color-ts-class); + --color-ts-interface: var(--light-color-ts-interface); + --color-ts-constructor: var(--light-color-ts-constructor); + --color-ts-property: var(--light-color-ts-property); + --color-ts-method: var(--light-color-ts-method); + --color-ts-call-signature: var(--light-color-ts-call-signature); + --color-ts-index-signature: var(--light-color-ts-index-signature); + --color-ts-constructor-signature: var( + --light-color-ts-constructor-signature + ); + --color-ts-parameter: var(--light-color-ts-parameter); + --color-ts-type-parameter: var(--light-color-ts-type-parameter); + --color-ts-accessor: var(--light-color-ts-accessor); + --color-ts-get-signature: var(--light-color-ts-get-signature); + --color-ts-set-signature: var(--light-color-ts-set-signature); + --color-ts-type-alias: var(--light-color-ts-type-alias); + --external-icon: var(--light-external-icon); --color-scheme: var(--light-color-scheme); } @@ -113,23 +215,48 @@ body { :root[data-theme="dark"] { --color-background: var(--dark-color-background); --color-background-secondary: var(--dark-color-background-secondary); + --color-background-warning: var(--dark-color-background-warning); + --color-warning-text: var(--dark-color-warning-text); --color-icon-background: var(--dark-color-icon-background); --color-accent: var(--dark-color-accent); + --color-active-menu-item: var(--dark-color-active-menu-item); --color-text: var(--dark-color-text); --color-text-aside: var(--dark-color-text-aside); --color-link: var(--dark-color-link); - --color-ts: var(--dark-color-ts); - --color-ts-interface: var(--dark-color-ts-interface); - --color-ts-enum: var(--dark-color-ts-enum); - --color-ts-class: var(--dark-color-ts-class); - --color-ts-function: var(--dark-color-ts-function); + + --color-ts-keyword: var(--dark-color-ts-keyword); + --color-ts-module: var(--dark-color-ts-module); --color-ts-namespace: var(--dark-color-ts-namespace); - --color-ts-private: var(--dark-color-ts-private); + --color-ts-enum: var(--dark-color-ts-enum); + --color-ts-enum-member: var(--dark-color-ts-enum-member); --color-ts-variable: var(--dark-color-ts-variable); + --color-ts-function: var(--dark-color-ts-function); + --color-ts-class: var(--dark-color-ts-class); + --color-ts-interface: var(--dark-color-ts-interface); + --color-ts-constructor: var(--dark-color-ts-constructor); + --color-ts-property: var(--dark-color-ts-property); + --color-ts-method: var(--dark-color-ts-method); + --color-ts-call-signature: var(--dark-color-ts-call-signature); + --color-ts-index-signature: var(--dark-color-ts-index-signature); + --color-ts-constructor-signature: var( + --dark-color-ts-constructor-signature + ); + --color-ts-parameter: var(--dark-color-ts-parameter); + --color-ts-type-parameter: var(--dark-color-ts-type-parameter); + --color-ts-accessor: var(--dark-color-ts-accessor); + --color-ts-get-signature: var(--dark-color-ts-get-signature); + --color-ts-set-signature: var(--dark-color-ts-set-signature); + --color-ts-type-alias: var(--dark-color-ts-type-alias); + --external-icon: var(--dark-external-icon); --color-scheme: var(--dark-color-scheme); } +.always-visible, +.always-visible .tsd-signatures { + display: inherit !important; +} + h1, h2, h3, @@ -139,6 +266,16 @@ h6 { line-height: 1.2; } +h1 > a:not(.link), +h2 > a:not(.link), +h3 > a:not(.link), +h4 > a:not(.link), +h5 > a:not(.link), +h6 > a:not(.link) { + text-decoration: none; + color: var(--color-text); +} + h1 { font-size: 1.875rem; margin: 0.67rem 0; @@ -173,12 +310,6 @@ h6 { text-transform: uppercase; } -pre { - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; -} - dl, menu, ol, @@ -191,26 +322,10 @@ dd { } .container { - max-width: 1600px; + max-width: 1700px; padding: 0 2rem; } -@media (min-width: 640px) { - .container { - padding: 0 4rem; - } -} -@media (min-width: 1200px) { - .container { - padding: 0 8rem; - } -} -@media (min-width: 1600px) { - .container { - padding: 0 12rem; - } -} - /* Footer */ .tsd-generator { border-top: 1px solid var(--color-accent); @@ -226,26 +341,9 @@ dd { } .container-main { - display: flex; - justify-content: space-between; - position: relative; margin: 0 auto; -} - -.col-4, -.col-8 { - box-sizing: border-box; - float: left; - padding: 2rem 1rem; -} - -.col-4 { - flex: 0 0 25%; -} -.col-8 { - flex: 1 0; - flex-wrap: wrap; - padding-left: 0; + /* toolbar, footer, margin */ + min-height: calc(100vh - 41px - 56px - 4rem); } @keyframes fade-in { @@ -288,22 +386,6 @@ dd { opacity: 0; } } -@keyframes shift-to-left { - from { - transform: translate(0, 0); - } - to { - transform: translate(-25%, 0); - } -} -@keyframes unshift-to-left { - from { - transform: translate(-25%, 0); - } - to { - transform: translate(0, 0); - } -} @keyframes pop-in-from-right { from { transform: translate(100%, 0); @@ -323,7 +405,8 @@ dd { } body { background: var(--color-background); - font-family: "Segoe UI", sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", + Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 16px; color: var(--color-text); } @@ -352,13 +435,29 @@ pre { } pre { + position: relative; + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; padding: 10px; - border: 0.1em solid var(--color-accent); + border: 1px solid var(--color-accent); } pre code { padding: 0; font-size: 100%; } +pre > button { + position: absolute; + top: 10px; + right: 10px; + opacity: 0; + transition: opacity 0.1s; + box-sizing: border-box; +} +pre:hover > button, +pre > button.visible { + opacity: 1; +} blockquote { margin: 1em 0; @@ -374,13 +473,12 @@ blockquote { padding: 0 0 0 20px; margin: 0; } -.tsd-typography h4, .tsd-typography .tsd-index-panel h3, .tsd-index-panel .tsd-typography h3, +.tsd-typography h4, .tsd-typography h5, .tsd-typography h6 { font-size: 1em; - margin: 0; } .tsd-typography h5, .tsd-typography h6 { @@ -391,91 +489,18 @@ blockquote { .tsd-typography ol { margin: 1em 0; } - -@media (max-width: 1024px) { - html .col-content { - float: none; - max-width: 100%; - width: 100%; - padding-top: 3rem; - } - html .col-menu { - position: fixed !important; - overflow-y: auto; - -webkit-overflow-scrolling: touch; - z-index: 1024; - top: 0 !important; - bottom: 0 !important; - left: auto !important; - right: 0 !important; - padding: 1.5rem 1.5rem 0 0; - max-width: 25rem; - visibility: hidden; - background-color: var(--color-background); - transform: translate(100%, 0); - } - html .col-menu > *:last-child { - padding-bottom: 20px; - } - html .overlay { - content: ""; - display: block; - position: fixed; - z-index: 1023; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(0, 0, 0, 0.75); - visibility: hidden; - } - - .to-has-menu .overlay { - animation: fade-in 0.4s; - } - - .to-has-menu :is(header, footer, .col-content) { - animation: shift-to-left 0.4s; - } - - .to-has-menu .col-menu { - animation: pop-in-from-right 0.4s; - } - - .from-has-menu .overlay { - animation: fade-out 0.4s; - } - - .from-has-menu :is(header, footer, .col-content) { - animation: unshift-to-left 0.4s; - } - - .from-has-menu .col-menu { - animation: pop-out-to-right 0.4s; - } - - .has-menu body { - overflow: hidden; - } - .has-menu .overlay { - visibility: visible; - } - .has-menu :is(header, footer, .col-content) { - transform: translate(-25%, 0); - } - .has-menu .col-menu { - visibility: visible; - transform: translate(0, 0); - display: grid; - align-items: center; - grid-template-rows: auto 1fr; - grid-gap: 1.5rem; - max-height: 100vh; - padding: 1rem 2rem; - } - .has-menu .tsd-navigation { - max-height: 100%; - } +.tsd-typography table { + border-collapse: collapse; + border: none; +} +.tsd-typography td, +.tsd-typography th { + padding: 6px 13px; + border: 1px solid var(--color-accent); +} +.tsd-typography thead, +.tsd-typography tr:nth-child(even) { + background-color: var(--color-background-secondary); } .tsd-breadcrumb { @@ -625,6 +650,28 @@ input[type="checkbox"]:checked ~ svg .tsd-checkbox-checkmark { font-weight: bold; } +.tsd-full-hierarchy:not(:last-child) { + margin-bottom: 1em; + padding-bottom: 1em; + border-bottom: 1px solid var(--color-accent); +} +.tsd-full-hierarchy, +.tsd-full-hierarchy ul { + list-style: none; + margin: 0; + padding: 0; +} +.tsd-full-hierarchy ul { + padding-left: 1.5rem; +} +.tsd-full-hierarchy a { + padding: 0.25rem 0 !important; + font-size: 1rem; + display: inline-flex; + align-items: center; + color: var(--color-text); +} + .tsd-panel-group.tsd-index-group { margin-bottom: 0; } @@ -656,43 +703,6 @@ input[type="checkbox"]:checked ~ svg .tsd-checkbox-checkmark { -o-page-break-inside: avoid; page-break-inside: avoid; } -.tsd-index-panel a, -.tsd-index-panel a.tsd-parent-kind-module { - color: var(--color-ts); -} -.tsd-index-panel a.tsd-parent-kind-interface { - color: var(--color-ts-interface); -} -.tsd-index-panel a.tsd-parent-kind-enum { - color: var(--color-ts-enum); -} -.tsd-index-panel a.tsd-parent-kind-class { - color: var(--color-ts-class); -} -.tsd-index-panel a.tsd-kind-module { - color: var(--color-ts-namespace); -} -.tsd-index-panel a.tsd-kind-interface { - color: var(--color-ts-interface); -} -.tsd-index-panel a.tsd-kind-enum { - color: var(--color-ts-enum); -} -.tsd-index-panel a.tsd-kind-class { - color: var(--color-ts-class); -} -.tsd-index-panel a.tsd-kind-function { - color: var(--color-ts-function); -} -.tsd-index-panel a.tsd-kind-namespace { - color: var(--color-ts-namespace); -} -.tsd-index-panel a.tsd-kind-variable { - color: var(--color-ts-variable); -} -.tsd-index-panel a.tsd-is-private { - color: var(--color-ts-private); -} .tsd-flag { display: inline-block; @@ -707,7 +717,7 @@ input[type="checkbox"]:checked ~ svg .tsd-checkbox-checkmark { } .tsd-anchor { - position: absolute; + position: relative; top: -100px; } @@ -721,146 +731,108 @@ input[type="checkbox"]:checked ~ svg .tsd-checkbox-checkmark { margin-bottom: 0; border-bottom: none; } -.tsd-member [data-tsd-kind] { - color: var(--color-ts); -} -.tsd-member [data-tsd-kind="Interface"] { - color: var(--color-ts-interface); -} -.tsd-member [data-tsd-kind="Enum"] { - color: var(--color-ts-enum); -} -.tsd-member [data-tsd-kind="Class"] { - color: var(--color-ts-class); + +.tsd-navigation.settings { + margin: 1rem 0; } -.tsd-member [data-tsd-kind="Private"] { - color: var(--color-ts-private); +.tsd-navigation > a, +.tsd-navigation .tsd-accordion-summary { + width: calc(100% - 0.25rem); + display: flex; + align-items: center; } - -.tsd-navigation a { - display: block; - margin: 0.4rem 0; - border-left: 2px solid transparent; +.tsd-navigation a, +.tsd-navigation summary > span, +.tsd-page-navigation a { + display: flex; + width: calc(100% - 0.25rem); + align-items: center; + padding: 0.25rem; color: var(--color-text); text-decoration: none; - transition: border-left-color 0.1s; + box-sizing: border-box; +} +.tsd-navigation a.current, +.tsd-page-navigation a.current { + background: var(--color-active-menu-item); } -.tsd-navigation a:hover { +.tsd-navigation a:hover, +.tsd-page-navigation a:hover { text-decoration: underline; } -.tsd-navigation ul { - margin: 0; +.tsd-navigation ul, +.tsd-page-navigation ul { + margin-top: 0; + margin-bottom: 0; padding: 0; list-style: none; } -.tsd-navigation li { +.tsd-navigation li, +.tsd-page-navigation li { padding: 0; + max-width: 100%; } - -.tsd-navigation.primary .tsd-accordion-details > ul { - margin-top: 0.75rem; +.tsd-nested-navigation { + margin-left: 3rem; } -.tsd-navigation.primary a { - padding: 0.75rem 0.5rem; - margin: 0; +.tsd-nested-navigation > li > details { + margin-left: -1.5rem; } -.tsd-navigation.primary ul li a { - margin-left: 0.5rem; -} -.tsd-navigation.primary ul li li a { +.tsd-small-nested-navigation { margin-left: 1.5rem; } -.tsd-navigation.primary ul li li li a { - margin-left: 2.5rem; -} -.tsd-navigation.primary ul li li li li a { - margin-left: 3.5rem; -} -.tsd-navigation.primary ul li li li li li a { - margin-left: 4.5rem; -} -.tsd-navigation.primary ul li li li li li li a { - margin-left: 5.5rem; -} -.tsd-navigation.primary li.current > a { - border-left: 0.15rem var(--color-text) solid; -} -.tsd-navigation.primary li.selected > a { - font-weight: bold; - border-left: 0.2rem var(--color-text) solid; -} -.tsd-navigation.primary ul li a:hover { - border-left: 0.2rem var(--color-text-aside) solid; -} -.tsd-navigation.primary li.globals + li > span, -.tsd-navigation.primary li.globals + li > a { - padding-top: 20px; +.tsd-small-nested-navigation > li > details { + margin-left: -1.5rem; } -.tsd-navigation.secondary.tsd-navigation--toolbar-hide { - max-height: calc(100vh - 1rem); - top: 0.5rem; -} -.tsd-navigation.secondary > ul { - display: inline; - padding-right: 0.5rem; - transition: opacity 0.2s; -} -.tsd-navigation.secondary ul li a { - padding-left: 0; -} -.tsd-navigation.secondary ul li li a { - padding-left: 1.1rem; -} -.tsd-navigation.secondary ul li li li a { - padding-left: 2.2rem; -} -.tsd-navigation.secondary ul li li li li a { - padding-left: 3.3rem; +.tsd-page-navigation ul { + padding-left: 1.75rem; } -.tsd-navigation.secondary ul li li li li li a { - padding-left: 4.4rem; + +#tsd-sidebar-links a { + margin-top: 0; + margin-bottom: 0.5rem; + line-height: 1.25rem; } -.tsd-navigation.secondary ul li li li li li li a { - padding-left: 5.5rem; +#tsd-sidebar-links a:last-of-type { + margin-bottom: 0; } a.tsd-index-link { - margin: 0.25rem 0; + padding: 0.25rem 0 !important; font-size: 1rem; line-height: 1.25rem; display: inline-flex; align-items: center; + color: var(--color-text); } -.tsd-accordion-summary > h1, -.tsd-accordion-summary > h2, -.tsd-accordion-summary > h3, -.tsd-accordion-summary > h4, -.tsd-accordion-summary > h5 { - display: inline-flex; - align-items: center; - vertical-align: middle; - margin-bottom: 0; +.tsd-accordion-summary { + list-style-type: none; /* hide marker on non-safari */ + outline: none; /* broken on safari, so just hide it */ +} +.tsd-accordion-summary::-webkit-details-marker { + display: none; /* hide marker on safari */ +} +.tsd-accordion-summary, +.tsd-accordion-summary a { user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -} -.tsd-accordion-summary { - display: block; + cursor: pointer; } +.tsd-accordion-summary a { + width: calc(100% - 1.5rem); +} .tsd-accordion-summary > * { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; } -.tsd-accordion-summary::-webkit-details-marker { - display: none; -} -.tsd-index-accordion .tsd-accordion-summary svg { - margin-right: 0.25rem; +.tsd-index-accordion .tsd-accordion-summary > svg { + margin-left: 0.25rem; } .tsd-index-content > :not(:first-child) { margin-top: 0.75rem; @@ -885,34 +857,6 @@ a.tsd-index-link { margin-right: 0.8rem; } -@media (min-width: 1024px) { - .col-content { - margin: 2rem auto; - } - - .menu-sticky-wrap { - position: sticky; - height: calc(100vh - 2rem); - top: 4rem; - right: 0; - padding: 0 1.5rem; - padding-top: 1rem; - margin-top: 3rem; - transition: 0.3s ease-in-out; - transition-property: top, padding-top, padding, height; - overflow-y: auto; - } - .col-menu { - border-left: 1px solid var(--color-accent); - } - .col-menu--hide { - top: 1rem; - } - .col-menu .tsd-navigation:not(:last-child) { - padding-bottom: 1.75rem; - } -} - .tsd-panel { margin-bottom: 2.5rem; } @@ -978,7 +922,8 @@ a.tsd-index-link { right: -40px; } #tsd-search .field input, -#tsd-search .title { +#tsd-search .title, +#tsd-toolbar-links a { transition: opacity 0.2s; } #tsd-search .results { @@ -992,8 +937,9 @@ a.tsd-index-link { box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); } #tsd-search .results li { - padding: 0 10px; background-color: var(--color-background); + line-height: initial; + padding: 4px; } #tsd-search .results li:nth-child(even) { background-color: var(--color-background-secondary); @@ -1001,12 +947,15 @@ a.tsd-index-link { #tsd-search .results li.state { display: none; } -#tsd-search .results li.current, -#tsd-search .results li:hover { +#tsd-search .results li.current:not(.no-results), +#tsd-search .results li:hover:not(.no-results) { background-color: var(--color-accent); } #tsd-search .results a { - display: block; + display: flex; + align-items: center; + padding: 0.25rem; + box-sizing: border-box; } #tsd-search .results a:before { top: 10px; @@ -1022,7 +971,8 @@ a.tsd-index-link { top: 0; opacity: 1; } -#tsd-search.has-focus .title { +#tsd-search.has-focus .title, +#tsd-search.has-focus #tsd-toolbar-links a { z-index: 0; opacity: 0; } @@ -1036,6 +986,22 @@ a.tsd-index-link { display: block; } +#tsd-toolbar-links { + position: absolute; + top: 0; + right: 2rem; + height: 100%; + display: flex; + align-items: center; + justify-content: flex-end; +} +#tsd-toolbar-links a { + margin-left: 1.5rem; +} +#tsd-toolbar-links a:hover { + text-decoration: underline; +} + .tsd-signature { margin: 0 0 1rem 0; padding: 1rem 0.5rem; @@ -1045,6 +1011,11 @@ a.tsd-index-link { overflow-x: auto; } +.tsd-signature-keyword { + color: var(--color-ts-keyword); + font-weight: normal; +} + .tsd-signature-symbol { color: var(--color-text-aside); font-weight: normal; @@ -1100,7 +1071,7 @@ ul.tsd-type-parameter-list h5 { } .tsd-page-toolbar { - position: fixed; + position: sticky; z-index: 1; top: 0; left: 0; @@ -1134,9 +1105,10 @@ ul.tsd-type-parameter-list h5 { .tsd-page-toolbar .table-cell:first-child { width: 100%; } - -.tsd-page-toolbar--hide { - transform: translateY(-100%); +.tsd-page-toolbar .tsd-toolbar-icon { + box-sizing: border-box; + line-height: 0; + padding: 12px 0; } .tsd-widget { @@ -1144,7 +1116,9 @@ ul.tsd-type-parameter-list h5 { overflow: hidden; opacity: 0.8; height: 40px; - transition: opacity 0.1s, background-color 0.2s; + transition: + opacity 0.1s, + background-color 0.2s; vertical-align: bottom; cursor: pointer; } @@ -1166,12 +1140,6 @@ ul.tsd-type-parameter-list h5 { .tsd-widget.menu { display: none; } -@media (max-width: 1024px) { - .tsd-widget.options, - .tsd-widget.menu { - display: inline-block; - } -} input[type="checkbox"] + .tsd-widget:before { background-position: -120px 0; } @@ -1202,7 +1170,85 @@ img { } .deprecated { - text-decoration: line-through; + text-decoration: line-through !important; +} + +.warning { + padding: 1rem; + color: var(--color-warning-text); + background: var(--color-background-warning); +} + +.tsd-kind-project { + color: var(--color-ts-project); +} +.tsd-kind-module { + color: var(--color-ts-module); +} +.tsd-kind-namespace { + color: var(--color-ts-namespace); +} +.tsd-kind-enum { + color: var(--color-ts-enum); +} +.tsd-kind-enum-member { + color: var(--color-ts-enum-member); +} +.tsd-kind-variable { + color: var(--color-ts-variable); +} +.tsd-kind-function { + color: var(--color-ts-function); +} +.tsd-kind-class { + color: var(--color-ts-class); +} +.tsd-kind-interface { + color: var(--color-ts-interface); +} +.tsd-kind-constructor { + color: var(--color-ts-constructor); +} +.tsd-kind-property { + color: var(--color-ts-property); +} +.tsd-kind-method { + color: var(--color-ts-method); +} +.tsd-kind-call-signature { + color: var(--color-ts-call-signature); +} +.tsd-kind-index-signature { + color: var(--color-ts-index-signature); +} +.tsd-kind-constructor-signature { + color: var(--color-ts-constructor-signature); +} +.tsd-kind-parameter { + color: var(--color-ts-parameter); +} +.tsd-kind-type-literal { + color: var(--color-ts-type-literal); +} +.tsd-kind-type-parameter { + color: var(--color-ts-type-parameter); +} +.tsd-kind-accessor { + color: var(--color-ts-accessor); +} +.tsd-kind-get-signature { + color: var(--color-ts-get-signature); +} +.tsd-kind-set-signature { + color: var(--color-ts-set-signature); +} +.tsd-kind-type-alias { + color: var(--color-ts-type-alias); +} + +/* if we have a kind icon, don't color the text by kind */ +.tsd-kind-icon ~ span { + color: var(--color-text); } * { @@ -1223,3 +1269,147 @@ img { border-radius: 999rem; border: 0.25rem solid var(--color-icon-background); } + +/* mobile */ +@media (max-width: 769px) { + .tsd-widget.options, + .tsd-widget.menu { + display: inline-block; + } + + .container-main { + display: flex; + } + html .col-content { + float: none; + max-width: 100%; + width: 100%; + } + html .col-sidebar { + position: fixed !important; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + z-index: 1024; + top: 0 !important; + bottom: 0 !important; + left: auto !important; + right: 0 !important; + padding: 1.5rem 1.5rem 0 0; + width: 75vw; + visibility: hidden; + background-color: var(--color-background); + transform: translate(100%, 0); + } + html .col-sidebar > *:last-child { + padding-bottom: 20px; + } + html .overlay { + content: ""; + display: block; + position: fixed; + z-index: 1023; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.75); + visibility: hidden; + } + + .to-has-menu .overlay { + animation: fade-in 0.4s; + } + + .to-has-menu .col-sidebar { + animation: pop-in-from-right 0.4s; + } + + .from-has-menu .overlay { + animation: fade-out 0.4s; + } + + .from-has-menu .col-sidebar { + animation: pop-out-to-right 0.4s; + } + + .has-menu body { + overflow: hidden; + } + .has-menu .overlay { + visibility: visible; + } + .has-menu .col-sidebar { + visibility: visible; + transform: translate(0, 0); + display: flex; + flex-direction: column; + gap: 1.5rem; + max-height: 100vh; + padding: 1rem 2rem; + } + .has-menu .tsd-navigation { + max-height: 100%; + } +} + +/* one sidebar */ +@media (min-width: 770px) { + .container-main { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); + grid-template-areas: "sidebar content"; + margin: 2rem auto; + } + + .col-sidebar { + grid-area: sidebar; + } + .col-content { + grid-area: content; + padding: 0 1rem; + } +} +@media (min-width: 770px) and (max-width: 1399px) { + .col-sidebar { + max-height: calc(100vh - 2rem - 42px); + overflow: auto; + position: sticky; + top: 42px; + padding-top: 1rem; + } + .site-menu { + margin-top: 1rem; + } +} + +/* two sidebars */ +@media (min-width: 1200px) { + .container-main { + grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) minmax(0, 20rem); + grid-template-areas: "sidebar content toc"; + } + + .col-sidebar { + display: contents; + } + + .page-menu { + grid-area: toc; + padding-left: 1rem; + } + .site-menu { + grid-area: sidebar; + } + + .site-menu { + margin-top: 1rem 0; + } + + .page-menu, + .site-menu { + max-height: calc(100vh - 2rem - 42px); + overflow: auto; + position: sticky; + top: 42px; + } +}