@layer reset, hotdocs; @import url("/assets/hotdocs/reset-36b1f5f5.css") layer(reset); @layer hotdocs { /* CSS: GLOBAL */ :root { --background-color: white; --code-background-color: #f6f6f6; --code-border-color: #00000022; --column-border-color: #dadada; --content-padding-bottom: 2rem; --link-active-color: black; --link-color: #707070; --nav-height: 3.75rem; --text-color: #1c1e21; color-scheme: light; } @media (prefers-color-scheme: dark) { :root { --background-color: #1b1b1d; --code-background-color: #2b2b2b; --code-border-color: #ffffff22; --column-border-color: #535353; --link-active-color: white; --link-color: #909090; --text-color: #e3e1de; color-scheme: dark; } } :root:has(#scheme-light:checked) { --background-color: white; --code-background-color: #f6f6f6; --code-border-color: #00000022; --column-border-color: #dadada; --content-padding-bottom: 2rem; --link-active-color: black; --link-color: #707070; --nav-height: 3.75rem; --text-color: #1c1e21; color-scheme: light; } :root:has(#scheme-dark:checked) { --background-color: #1b1b1d; --code-background-color: #2b2b2b; --code-border-color: #ffffff22; --column-border-color: #535353; --link-active-color: white; --link-color: #909090; --text-color: #e3e1de; color-scheme: dark; } html { -webkit-font-smoothing: antialiased; background-color: var(--background-color); color: var(--text-color); scroll-padding-top: calc(var(--nav-height) + 0.2rem); text-rendering: optimizelegibility; } /* Sticky footer */ html, body { min-height: 100vh; } body { display: flex; flex-direction: column; } /* CSS: NAV */ :root { --nav-background-color: white; --nav-link-active-color: var(--link-active-color); --nav-link-color: var(--link-color); --nav-padding-horizontal: 1.5rem; --nav-padding-vertical: 0.5rem; --nav-shadow: 0 1px 2px 0 #0000001a; --nav-scheme-icon-fill: var(--link-color); --nav-title-color: #1c1e21; --nav-toggle-color: rgb(28, 30, 33); --sidenav-padding-horizontal: 0.75rem; } @media (prefers-color-scheme: dark) { :root { --nav-background-color: #242526; --nav-title-color: #e3e1de; --nav-toggle-color: rgb(227, 225, 222); } } :root:has(#scheme-light:checked) { --nav-background-color: white; --nav-padding-horizontal: 1.5rem; --nav-padding-vertical: 0.5rem; --nav-shadow: 0 1px 2px 0 #0000001a; --nav-title-color: #1c1e21; --nav-toggle-color: rgb(28, 30, 33); --sidenav-padding-horizontal: 0.75rem; } :root:has(#scheme-dark:checked) { --nav-background-color: #242526; --nav-title-color: #e3e1de; --nav-toggle-color: rgb(227, 225, 222); } /* Added to */ .sidenav--open { overflow: hidden; } .nav { align-items: center; background-color: var(--nav-background-color); box-shadow: var(--nav-shadow); display: flex; flex: 0 0 auto; height: var(--nav-height); justify-content: space-between; padding: var(--nav-padding-vertical) var(--nav-padding-horizontal); position: sticky; top: 0; z-index: 100; } .nav__section { align-items: center; display: flex; gap: 1.5rem; } .nav__section--brand { overflow: hidden; } .nav__links { display: none; @media (min-width: 64rem) { align-items: center; display: flex; gap: 1.5rem; } } .nav__link { color: var(--nav-link-color); &.active { color: var(--nav-link-active-color); } &:hover { color: var(--nav-link-active-color); } } .nav__brand { align-items: center; display: flex; overflow: hidden; gap: 0.5rem; } .nav__logo-wrapper { height: 2rem; width: 2rem; } .nav__logo { height: 100%; width: 100%; } .nav__title { color: var(--nav-title-color); font-size: 1.5rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav__toggle { color: var(--nav-toggle-color); height: 1.5rem; width: 1.5rem; @media (min-width: 64rem) { display: none; } } .scheme { display: flex; height: 1.3rem; position: relative; width: 1.3rem; } .scheme__input { -moz-appearance:none; -webkit-appearance:none; appearance:none; background-color: var(--nav-background-color); bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .scheme__icon { bottom: 0; cursor: pointer; display: none; fill: var(--nav-scheme-icon-fill); left: 0; position: absolute; right: 0; top: 0; z-index: 10; } #scheme-light:checked ~ .scheme__icon--light { display: initial; } #scheme-dark:checked ~ .scheme__icon--dark { display: initial; } #scheme-auto:checked ~ .scheme__icon--auto { display: initial; } .sidenav-backdrop { background-color: rgba(0, 0, 0, .6); inset: 0; opacity: 0; position: fixed; transition-duration: 0.2s; transition-property: visibility, opacity; transition-timing-function: ease-in-out; visibility: hidden; } .sidenav--open .sidenav-backdrop { opacity: 1; visibility: visible; } .sidenav { background-color: var(--nav-background-color); bottom: 0; left: 0; opacity: 0; overflow-x: hidden; position: fixed; top: 0; transform: translate(-100%); transition-duration: 0.2s; transition-property: transform, visibility, opacity; transition-timing-function: ease-in-out; visibility: hidden; width: 85vw; z-index: 100; } .sidenav--open .sidenav { opacity: 1; transform: translate(0, 0); visibility: visible; } .sidenav__header { align-items: center; background-color: var(--nav-background-color); box-shadow: var(--nav-shadow); display: flex; height: var(--nav-height); justify-content: space-between; padding: var(--nav-padding-vertical) var(--nav-padding-horizontal); position: sticky; top: 0; } .sidenav__toggle { color: var(--nav-toggle-color); height: 1rem; width: 1rem; } .sidenav__sections { display: flex; transform: translate(-85vw); transition-duration: 0.2s; transition-property: transform; transition-timing-function: ease-in-out; } .sidenav__sections--main { transform: translate(0); } .sidenav__section { flex-shrink: 0; padding: 0.5rem; width: 85vw; } .sidenav__back-button { font-weight: bold; } /* CSS: SEARCH */ :root { --search-background-color: #f5f6f7; --search-button-background-color: #e9e9e9; --search-excerpt-background-color: white; --search-excerpt-border-color: #d7d7d7; --search-text-color: var(--text-color); } @media (prefers-color-scheme: dark) { :root { --search-background-color: #242526; --search-button-background-color: #1b1b1b; --search-excerpt-background-color: #1b1b1b; --search-excerpt-border-color: #535353; } } :root:has(#scheme-light:checked) { --search-background-color: #f5f6f7; --search-button-background-color: #e9e9e9; --search-excerpt-background-color: white; --search-excerpt-border-color: #d7d7d7; } :root:has(#scheme-dark:checked) { --search-background-color: #242526; --search-button-background-color: #1b1b1b; --search-excerpt-background-color: #1b1b1b; --search-excerpt-border-color: #535353; } .search-box__button { align-items: center; background-color: var(--search-background-color); border: solid 1px transparent; border-radius: 99999px; display: flex; gap: 0.5ch; padding: 0.5rem 0.5rem; user-select: none; @media (min-width: 40rem) { padding: 0.25rem 0.5rem; } &:hover { background: none; border: solid 1px var(--nav-link-color); } } .search-box__icon { height: 1.2rem; width: 1.2rem; } .search-box__label { display: none; @media (min-width: 40rem) { display: initial; } } body:has(.search:open), body:has(.search[open]) { overflow: hidden; } .search { background-color: #000000dd; bottom: 0; color: var(--search-text-color); height: 100vh; height: 100dvh; left: 0; max-height: 100vh; height: 100dvh; max-width: 100vw; max-width: 100dvw; padding: 0; position: fixed; right: 0; top: 0; width: 100vw; width: 100dvw; @media (min-width: 64rem) { padding-inline: 1rem; } } ::backdrop { display: none; } .search__dialog { background-color: var(--search-background-color); height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; max-width: 100vw; max-width: 100dvw; overflow: auto; padding: 1rem; width: 100vw; width: 100dvw; @media (min-width: 64rem) { border-radius: 0.375rem; height: auto; margin: 60px auto auto; max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); max-width: 800px; width: auto; } } .search__header { align-items: center; display: flex; gap: 1rem; } .search__input { background-color: var(--search-excerpt-background-color); border: 1px solid #808080; border-radius: 0.2rem; flex: 1 0 auto; padding: 0.3rem 0.5rem; &:focus-visible { outline: solid 2px #0077ff; } } .search__dismiss { color: var(--search-text-color); height: 1rem; width: 1rem; @media (min-width: 64rem) { display: none; } } .search__result { margin-top: 1.5rem; &:first-child { margin-top: 1rem; } } .search.loaded .search__result--loading { display: none; } .search__result-excerpt { background-color: var(--search-excerpt-background-color); border: 1px solid var(--search-excerpt-border-color); border-radius: 0.2rem; box-shadow: 0 1px 3px 0 #0000001a; display: block; margin-top: 0.2rem; padding: 0.3rem 0.5rem; &:hover { outline: solid 2px #0077ff; } } /* CSS: MENU */ :root { --menu-accordion-color: #7f7f7f; --menu-border-color: var(--column-border-color); --menu-link-active-color: var(--link-active-color); --menu-link-hover-background-color: rgba(0, 0, 0, .05); --menu-link-color: var(--link-color); } @media (prefers-color-scheme: dark) { :root { --menu-accordion-color: #a0a0a0; --menu-link-hover-background-color: rgba(255, 255, 255, .05); } } :root:has(#scheme-light:checked) { --menu-accordion-color: #7f7f7f; --menu-link-hover-background-color: rgba(0, 0, 0, .05); } :root:has(#scheme-dark:checked) { --menu-accordion-color: #a0a0a0; --menu-link-hover-background-color: rgba(255, 255, 255, .05); } .menu { border-right: 1px solid var(--menu-border-color); display: none; width: 20rem; @media (min-width: 64rem) { display: initial; } } .menu__sections { padding-bottom: var(--content-padding-bottom); position: sticky; top: var(--nav-height); } .menu__section { padding: 0.5rem; } .menu__section .menu__section { display: none; padding: 0; padding-left: 1.5rem; } .menu__row--expanded ~ .menu__section { display: block; } .menu__row { align-items: center; display: flex; justify-content: space-between; } .menu__link { align-items: center; border-radius: 0.25rem; color: var(--menu-link-color); display: flex; flex: 1 0 0; height: 2.5rem; overflow: hidden; padding-inline: 0.75rem; text-overflow: ellipsis; white-space: nowrap; &.active { color: var(--menu-link-active-color); } &:hover { background-color: var(--menu-link-hover-background-color); } } .menu__toggle { align-items: center; align-self: stretch; border: none; border-radius: 0.25rem; display: flex; flex: 0 0 auto; justify-content: center; &:hover { background-color: var(--menu-link-hover-background-color); } } .menu__toggle--full { flex-grow: 1; text-align: left; & .menu__link:hover { background: none; } } /* Do not display the toggle... */ .menu__toggle { display: none; } /* ...unless it has a sibling section. */ .menu__row:has(~ .menu__section) .menu__toggle { display: flex; } .menu__toggle-icon-wrapper { display: flex; justify-content: center; width: 2.5rem; } .menu__toggle-icon { color: var(--menu-accordion-color); height: 1rem; width: 1rem; } .menu__row--expanded .menu__toggle-icon { transform: rotate(90deg); } /* CSS: CONTENT */ .content { display: flex; flex: 1 0 auto; } .main { display: flex; flex-grow: 1; margin-inline: auto; max-width: 82rem; padding-bottom: var(--content-padding-bottom); width: 100%; @media (min-width: 64rem) { width: calc(100% - 20rem); } } .central { flex-grow: 1; max-width: 100%; padding-inline: var(--nav-padding-horizontal); @media (min-width: 64rem) { padding-inline: 2rem; width: 75%; } } /* CSS: TOC */ :root { --sidetoc-code-background-color: var(--code-background-color); --sidetoc-code-border-color: var(--code-border-color); --sidetoc-link-color: var(--link-color); --sidetoc-link-active-color: var(--link-active-color); --toc-background-color: #e9e9e9; --toc-code-background-color: var(--code-background-color); --toc-code-border-color: var(--code-border-color); --toc-divider-color: #b0b0b0; --toc-link-active-color: black; --toc-link-color: #606060; } @media (prefers-color-scheme: dark) { :root { --toc-background-color: #444444; --toc-divider-color: #909090; --toc-link-active-color: white; --toc-link-color: #c0c0c0; } } :root:has(#scheme-light:checked) { --toc-background-color: #e9e9e9; --toc-divider-color: #b0b0b0; --toc-link-active-color: black; --toc-link-color: #606060; } :root:has(#scheme-dark:checked) { --toc-background-color: #444444; --toc-divider-color: #909090; --toc-link-active-color: white; --toc-link-color: #c0c0c0; } .toc { background-color: var(--toc-background-color); border-radius: 5px; cursor: pointer; line-height: 1.7; margin-block: 1rem; user-select: none; @media (min-width: 85rem) { display: none; } &::details-content { height: 0; overflow: hidden; transition-property: height, content-visibility; transition-duration: 0.5s; transition-behavior: allow-discrete; } &[open]::details-content { height: auto; /* On supported browsers, allow transition to height: auto; */ height: calc-size(auto, size); } } .toc__label { padding: 0.3rem 0.6rem; } .toc__entries { border-top: 1px solid var(--toc-divider-color); display: flex; flex-direction: column; font-size: 0.9rem; padding: 0.5rem 0.6rem; gap: 0.4rem; } .toc__link { color: var(--toc-link-color); display: inline-block; &.h2 { margin-left: 1rem; } &.h3 { margin-left: 2rem; } &.h4 { margin-left: 3rem; } &.h5 { margin-left: 4rem; } &.h6 { margin-left: 5rem; } &.active { color: var(--toc-link-active-color); } &:hover { color: var(--toc-link-active-color); } code { background: var(--toc-code-background-color); border-radius: 5px; border: .1rem solid var(--toc-code-border-color); padding: 0.1rem 0.2rem; word-break: break-all; } } .sidetoc { display: none; flex: 0 0 25%; line-height: 1.7; max-width: 25%; @media (min-width: 85rem) { display: initial; } } .sidetoc__section { max-height: calc(100vh - var(--nav-height)); overflow-y: auto; padding-block: calc(0.5rem + 0.375rem); /* Align with menu */ position: sticky; top: var(--nav-height); } .sidetoc__entries { border-left: 1px solid var(--column-border-color); display: flex; flex-direction: column; font-size: 0.9rem; gap: 0.4rem; padding-inline: 1.5rem; } .sidetoc__link { color: var(--sidetoc-link-color); display: inline-block; &.h2 { margin-left: 1rem; } &.h3 { margin-left: 2rem; } &.h4 { margin-left: 3rem; } &.h5 { margin-left: 4rem; } &.h6 { margin-left: 5rem; } &.active { color: var(--sidetoc-link-active-color); } &:hover { color: var(--sidetoc-link-active-color); } code { background: var(--sidetoc-code-background-color); border-radius: 5px; border: .1rem solid var(--sidetoc-code-border-color); padding: 0.1rem 0.2rem; word-break: break-all; } } .anchor-link { margin-left: 0.5ch; opacity: 0; text-decoration: none; transition-duration: 0.2s; transition-property: opacity; transition-timing-function: ease-in-out; &:hover { text-decoration: underline; } } h1:hover .anchor-link, h2:hover .anchor-link, h3:hover .anchor-link, h4:hover .anchor-link, h5:hover .anchor-link, h6:hover .anchor-link { opacity: 1; } /* CSS: FOOTER */ :root { --footer-background-color: #e9e9e9; } @media (prefers-color-scheme: dark) { :root { --footer-background-color: #444444; } } :root:has(#scheme-light:checked) { --footer-background-color: #e9e9e9; } :root:has(#scheme-dark:checked) { --footer-background-color: #444444; } .footer { background-color: var(--footer-background-color); flex: 0 0 auto; padding: 4rem var(--nav-padding-horizontal); } .footer__sections { display: grid; gap: 1.5rem; grid-template-columns: 1fr; max-width: 1200px; margin: auto; @media (min-width: 40rem) { grid-template-columns: repeat(2, 1fr); } @media (min-width: 64rem) { grid-template-columns: repeat(4, 1fr); } } .footer__section { flex: 1 1 0; } .footer__heading { font-weight: bold; } .footer__link:hover { text-decoration: underline; } .footer__logo { margin: 3rem auto; height: 8rem; width: 8rem; } .credits { padding-block: 1rem; text-align: center; } .credits__link { text-decoration: underline; } .credits__logo { display: inline-block; height: 2rem; margin-left: 0.8rem; width: 2rem; } /* CSS: HELPERS */ .external-link { align-items: center; display: inline-flex; gap: 0.3rem; margin-right: 0.5ch; } .external-link__icon { height: 0.6rem; width: 0.6rem; } .edit-link { align-items: center; display: inline-flex; gap: 0.3rem; margin-left: 0.5ch; margin-top: 4rem; } .edit-link__icon { height: 1rem; width: 1rem; } /* CSS: ALERTS */ .alert { border: 1px solid; border-left: 0.5rem solid; border-radius: 0.375rem; margin-bottom: 1rem; padding: 1rem; } .alert--tip { background: #00940011; border-color: #009400; } .alert--info { background: #87cef911; border-color: #87cef9; } .alert--warning { background: #fea50011; border-color: #fea500; } .alert--danger { background: #db153b11; border-color: #db153b; } .alert__header { align-items: center; display: flex; gap: 0.5ch; margin-bottom: 1rem; } .alert__icon { height: 1rem; width: 1rem; } .alert__label { font-weight: bold; margin: 0; text-transform: uppercase; } .alert__content > :last-of-type { margin-bottom: 0; } /* CSS: ANNOUNCEMENT */ :root { --announcement-background-color: black; --announcement-color: white; } @media (prefers-color-scheme: dark) { :root { --announcement-background-color: white; --announcement-color: black; } } :root:has(#scheme-light:checked) { --announcement-background-color: black; --announcement-color: white; } :root:has(#scheme-dark:checked) { --announcement-background-color: white; --announcement-color: black; } .announcement { background-color: var(--announcement-background-color); color: var(--announcement-color); font-size: 1.2rem; font-weight: 500; padding-block: 0.2rem; text-align: center; } /* CSS: ARTICLE */ :root { --article-code-background-color: var(--code-background-color); --article-code-border-color: var(--code-border-color); } .article { .highlighter-rouge { padding-block: .5rem; } .highlight { border-radius: .375rem; } pre { -webkit-overflow-scrolling: touch; box-sizing: border-box; margin: 0; overflow-x: auto; padding: 1em; width: 100%; } pre code { font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 0.9rem; line-height: 1.5; white-space: pre; word-break: normal; word-spacing: normal; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } code:not(pre code) { background: var(--article-code-background-color); border-radius: 0.375rem; border: .1rem solid var(--article-code-border-color); display: inline; overflow-x: auto; overflow: auto; padding: 0.1rem 0.2rem; word-break: break-word; } } }