Something went wrong. Try again.
fork of gpui
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814/* CSS for UI elements (a.k.a. chrome) */
@import "variables.css";
html { background-color: var(--bg); scrollbar-color: var(--scrollbar) var(--bg);}#searchresults a,.content a:link,a:visited,a > .hljs { color: var(--links);}
.icon-logo-img { display: block;}
.icon-button { position: relative; height: 28px; width: 28px; z-index: 10; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: color 0.5s; border: 0; background-color: transparent; border-radius: 4px; color: var(--icons);}
.icon-button:hover { color: var(--icons-hover); background-color: var(--icon-btn-bg-hover);}
.ib-hidden-desktop { display: none;}
.header-bar { position: sticky; top: 0; z-index: 100; padding: 12px 16px; background-color: var(--sidebar-bg); border-bottom: 1px solid var(--divider); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;}
.header-bar .left-container { width: 160px; display: flex; align-items: center; gap: 8px;}
.header-bar .right-container { width: 160px; display: flex; align-items: center; gap: 4px;}
.logo-nav { display: flex; align-items: center; justify-content: center; filter: var(--logo-brightness);}
.nav-chapters { font-size: 2.5em; text-align: center; text-decoration: none;
position: fixed; top: 0; bottom: 0; margin: 0; max-width: 150px; min-width: 90px;
display: flex; justify-content: center; align-content: center; flex-direction: column;
transition: color 0.5s, background-color 0.5s;}
.nav-chapters:hover { text-decoration: none; background-color: var(--theme-hover); transition: background-color 0.15s, color 0.15s;}
.nav-wrapper { margin-block-start: 50px; display: none;}
.footer-buttons { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 24px 0;}
.footer-button { width: 100%; padding: 12px; display: flex; align-items: center; justify-content: center; gap: 0.5rem; background-color: var(--footer-btn-bg); border: 1px solid var(--footer-btn-border); border-radius: 0.5rem; font-size: 0.9em;}
.footer-button:hover { background-color: var(--footer-btn-bg-hover); border-color: var(--footer-btn-border-hover);}
.footer-button i { text-decoration: underline !important; text-decoration-color: transparent !important;}
.footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem; padding: 24px 0; border-top: 1px dashed var(--border-footer);}
.footer-link { font-size: 1.25rem; color: var(--links); text-decoration: underline; text-decoration-color: var(--link-line-decoration); text-wrap-mode: nowrap;
:hover { text-decoration-color: var(--link-line-decoration-hover); }}
.footer-separator { color: var(--border-light); font-size: 0.8em;}
.footer-logo { height: 16px; border-radius: 0 !important; border: none !important; background: transparent !important;}
.mobile-nav-chapters { font-size: 2.5em; text-align: center; text-decoration: none; width: 90px; border-radius: 5px; background-color: var(--sidebar-bg);}
/* Only Firefox supports flow-relative values */.previous { float: left;}[dir="rtl"] .previous { float: right;}
/* Only Firefox supports flow-relative values */.next { float: right; right: var(--page-padding);}[dir="rtl"] .next { float: left; right: unset; left: var(--page-padding);}
/* Use the correct buttons for RTL layouts*/[dir="rtl"] .previous i.fa-angle-left:before { content: "\f105";}[dir="rtl"] .next i.fa-angle-right:before { content: "\f104";}
@media only screen and (max-width: 1080px) { .nav-wide-wrapper { display: none; } .nav-wrapper { display: block; }}
/* sidebar-visible */@media only screen and (max-width: 1380px) { #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper { display: none; } #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wrapper { display: block; }}
/* Inline code */
:not(pre) > .hljs { display: inline; padding: 0.1em 0.3em; border-radius: 3px;}
:not(pre):not(a) > .hljs { color: var(--inline-code-color); overflow-x: initial;}
a:hover > .hljs { text-decoration: underline;}
pre { background-color: var(--pre-bg); border: 1px solid; border-color: var(--pre-border); box-shadow: var(--pre-shadow) 4px 4px 0px 0px; position: relative;}pre > .hljs { background-color: initial;}pre > .buttons { position: absolute; z-index: 100; right: 0px; top: 2px; margin: 0px; padding: 2px 0px;
color: var(--sidebar-fg); cursor: pointer; visibility: hidden; opacity: 0; transition: visibility 0.1s linear, opacity 0.1s linear;}pre:hover > .buttons { visibility: visible; opacity: 1;}pre > .buttons :hover { color: var(--sidebar-active); border-color: var(--border-hover); background-color: var(--theme-hover);}pre > .buttons i { margin-inline-start: 8px;}pre > .buttons button { cursor: inherit; margin: 0 4px; height: 26px; width: 26px; font-size: 14px; border-style: solid; border-width: 1px; border-radius: 4px; border-color: var(--border); background-color: var(--popover-bg); transition: 100ms; transition-property: color, border-color, background-color; color: var(--icons);}
pre > .playground { border: none; margin: 0; box-shadow: none; /* HACK: This serves to visually hide nested <pre> elements in "playground" code snippets. A more robust solution would involve modifying the rendered HTML. */}
@media (pointer: coarse) { pre > .buttons button { /* On mobile, make it easier to tap buttons. */ padding: 0.3rem 1rem; }
.sidebar-resize-indicator { /* Hide resize indicator on devices with limited accuracy */ display: none; }}pre > code { display: block; padding: 1rem;}
/* TODO: ACE editors overlap their buttons because ACE does absolute positioning within the code block which breaks padding. The only solution I can think of is to move the padding to the outer pre tag (or insert a div wrapper), but that would require fixing a whole bunch of CSS rules.*/.hljs.ace_editor { padding: 0rem 0rem;}
pre > .result { margin-block-start: 10px;}
/* Search */
#searchresults a { text-decoration: none;}
mark { border-radius: 2px; padding-block-start: 0; padding-block-end: 1px; padding-inline-start: 3px; padding-inline-end: 3px; margin-block-start: 0; margin-block-end: -1px; margin-inline-start: -3px; margin-inline-end: -3px; background-color: var(--search-mark-bg); transition: background-color 300ms linear; cursor: pointer;}
mark.fade-out { background-color: rgba(0, 0, 0, 0) !important; cursor: auto;}
.searchbar-outer { margin-inline-start: auto; margin-inline-end: auto; width: 100%; max-width: var(--content-max-width); box-sizing: border-box; padding: 16px;}
#searchbar { width: 100%; margin-block-start: 5px; margin-block-end: 0; margin-inline-start: auto; margin-inline-end: auto; padding: 10px 16px; transition: box-shadow 300ms ease-in-out; border: 1px solid var(--searchbar-border-color); border-radius: 3px; background-color: var(--searchbar-bg); color: var(--searchbar-fg);}#searchbar:focus,#searchbar.active { box-shadow: 0 0 3px var(--searchbar-shadow-color); outline: none; border-color: var(--search-mark-bg);}
.searchresults-header { font-weight: bold; font-size: 1em; padding-block-start: 0; padding-block-end: 0; color: var(--searchresults-header-fg);}
ul#searchresults { list-style: none; padding-inline-start: 0; margin-block-end: 0;}ul#searchresults li { margin: 10px 0px; padding: 2px; border-radius: 2px; scroll-margin-block-end: 10px;}ul#searchresults li.focus { background-color: var(--searchresults-li-bg);}ul#searchresults span.teaser { display: block; font-size: 0.8em; margin-block-start: 5px; margin-inline-start: 4px; padding-inline-start: 2ch; border-left: 1px solid var(--divider);}ul#searchresults span.teaser em { font-weight: bold; color: var(--full-contrast); background: var(--code-bg);}
/* Sidebar */
.sidebar { position: relative; order: 0; width: var(--sidebar-width); flex-shrink: 0; display: flex; flex-direction: column; font-size: 0.875em; box-sizing: border-box; -webkit-overflow-scrolling: touch; overscroll-behavior-y: none; overflow: hidden; background-color: var(--sidebar-bg); color: var(--sidebar-fg); border-right: 1px solid var(--divider);}
[dir="rtl"] .sidebar { left: unset; right: 0;}.sidebar-resizing { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;}.no-js .sidebar,.js:not(.sidebar-resizing) .sidebar { transition: transform 0.3s; /* Animation: slide away */}.sidebar code { line-height: 2em;}.sidebar .sidebar-scrollbox { flex: 1; overflow-y: auto; min-height: 0;}
.sidebar .sidebar-resize-handle { position: absolute; cursor: col-resize; width: 0; right: calc(var(--sidebar-resize-indicator-width) * -1); top: 0; bottom: 0; display: flex; align-items: center;}
.sidebar-resize-handle .sidebar-resize-indicator { width: 100%; height: 12px; background-color: var(--icons); margin-inline-start: var(--sidebar-resize-indicator-space);}
[dir="rtl"] .sidebar .sidebar-resize-handle { left: calc(var(--sidebar-resize-indicator-width) * -1); right: unset;}.js .sidebar .sidebar-resize-handle { cursor: col-resize; width: calc( var(--sidebar-resize-indicator-width) - var(--sidebar-resize-indicator-space) );}.sidebar::-webkit-scrollbar { background: var(--sidebar-bg);}.sidebar::-webkit-scrollbar-thumb { background: var(--scrollbar);}
@media only screen and (max-width: 780px) { .sidebar { position: fixed; top: 0; left: 0; height: 100vh; padding-top: 57px; /* Account for header height */ transform: translateX(-100%); z-index: 99; transition: transform 0.1s ease; }
[dir="rtl"] .sidebar { left: unset; right: 0; transform: translateX(100%); }
body.sidebar-open .sidebar { box-shadow: var(--sidebar-mobile-shadow); transform: translateX(0); }}
.chapter { list-style: none outside none; padding: 16px; padding-top: 8px; line-height: 2.2em; margin: 0;}
.chapter ol { width: 100%;}
.chapter li { display: flex; color: var(--sidebar-non-existant);}
.chapter li a { display: block; padding: 0 4px; text-decoration: none; color: var(--sidebar-fg);}
.chapter li a:hover { color: var(--sidebar-active);}
.chapter li a.active { color: var(--sidebar-active); background-color: var(--sidebar-active-bg);}
.chapter li > a.toggle { cursor: pointer; display: flex; align-items: center; justify-content: center; margin-inline-start: auto; user-select: none; opacity: 0.5; border-radius: 4px; transition: opacity 0.15s ease, background-color 0.15s ease;}
.chapter li > a.toggle:hover { opacity: 1; background-color: var(--theme-hover);}
.chapter li.chapter-item { display: flex; flex-wrap: wrap; align-items: center; line-height: 1.5em; margin-block-start: 0.6em;}
.section li.chapter-item { margin-block-start: 0;}
.chapter li.part-title + li.chapter-item { margin-block-start: 0.2em;}
.chapter li.chapter-item > a:first-child { flex: 1; min-width: 0;}
.chapter li.expanded > a.toggle div { transform: rotate(90deg);}
.chapter li.part-title { font-size: 1.4rem; padding: 0 8px 0 4px; color: var(--title-color); cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; line-height: auto; border-radius: 2px;}
.chapter li.part-title.collapsible:hover { background-color: var(--hover-section-title);}
.chapter li.part-title.collapsible::after { content: "❯"; display: inline-block; font-size: 1rem; opacity: 0.6; transition: transform 0.2s ease; flex-shrink: 0;}
.chapter li.part-title.collapsible.expanded::after { transform: rotate(90deg);}
.chapter li.section-spacer { height: 1.5rem; list-style: none;}
.chapter li.section-hidden { display: none !important;}
.section { list-style: none outside none; padding-inline-start: 1.5ch; margin-inline-start: 1ch; margin-top: 6px; border-left: 1px solid var(--border-light); line-height: 1.9em; display: flex; flex-direction: column; gap: 0.6em;}
.download-button { max-height: 28px; margin-left: 8px; background: var(--download-btn-bg); color: var(--download-btn-color); padding: 4px 8px; border: 1px solid; border-color: var(--download-btn-border); font-size: 1.4rem; border-radius: 4px; box-shadow: var(--download-btn-shadow) 0px -2px 0px 0px inset; text-decoration: none; transition: 100ms; transition-property: box-shadow, border-color, background-color;}
.download-button:hover { background: var(--download-btn-bg); border-color: var(--download-btn-border-hover); box-shadow: none;}
.search-button { min-width: 100px; max-width: 300px; height: 28px; width: 100%; padding: 4px 4px 4px 8px; display: flex; gap: 8px; background: var(--search-btn-bg); border: 1px solid; border-color: var(--search-btn-border); font-size: 1.4rem; font-family: var(--font); color: var(--icons); border-radius: 4px; transition: 100ms; transition-property: box-shadow, border-color, background-color;}
.search-button:hover { background: var(--search-btn-bg-hover);}
.search-button .icon { width: 12px; height: 12px; transform: translateY(10%); scale: 0.9;}
.search-content-desktop { width: 100%; display: flex; justify-content: space-between;}
.search-content-mobile { display: none;}
.search-container { box-sizing: border-box; position: fixed; inset: 0; z-index: 1000; padding: 24px; padding-top: 72px; background-color: rgba(0, 0, 0, 0.5); display: none; justify-content: center;}
.search-container:has(#search-wrapper:not(.hidden)) { display: flex;}
.search-modal { box-sizing: border-box;
max-width: 600px; min-width: 600px; height: fit-content; max-height: 600px; display: flex; flex-direction: column; overflow-y: hidden;
border-radius: 8px; background: var(--popover-bg); border: 1px solid var(--popover-border); box-shadow: var(--popover-shadow);}
.searchresults-outer { flex: 1; min-height: 0; overflow-y: auto; padding: 0px 22px 22px 22px;}
#searchbar { margin: 0;}
@media only screen and (max-width: 780px) { .header-bar { padding: 16px; justify-content: start; }
.download-button { display: none; }
.ib-hidden-mobile { display: none; }
.header-bar .left-container { width: fit-content; }
.header-bar .right-container { width: fit-content; }
.search-button { width: 100px; margin-left: auto; margin-right: 8px; }
.ib-hidden-desktop { display: block; }
.search-modal { width: 90vw; min-width: auto; }
.search-content-desktop { display: none; }
.search-content-mobile { display: flex; }}