docs: Add sidebar title collapse functionality and design facelift (#43754)
This PR adds the ability to collapse section in the docs sidebar (which are persistent until you close the tab), and some design facelift to the docs, which makes its design close to the site as well as polishing up many elements and interactions (like moving the search to a modal and making the table of content visible in smaller breakpoints). <img width="600" height="2270" alt="Screenshot 2025-11-28 at 5 26@2x" src="https://github.com/user-attachments/assets/3a8606c6-f74f-4bd2-84c8-d7a67ff97564" /> Release Notes: - N/A
This commit is contained in:
Danilo Leal
Vendored
+281
-213
@@ -13,159 +13,66 @@ a > .hljs {
|
||||
color: var(--links);
|
||||
}
|
||||
|
||||
/*
|
||||
body-container is necessary because mobile browsers don't seem to like
|
||||
overflow-x on the body tag when there is a <meta name="viewport"> tag.
|
||||
*/
|
||||
#body-container {
|
||||
/*
|
||||
This is used when the sidebar pushes the body content off the side of
|
||||
the screen on small screens. Without it, dragging on mobile Safari
|
||||
will want to reposition the viewport in a weird way.
|
||||
*/
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
.large-logo-img {
|
||||
.icon-logo-img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.icon-logo-img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Menu Bar */
|
||||
|
||||
#menu-bar,
|
||||
#menu-bar-hover-placeholder {
|
||||
z-index: 101;
|
||||
margin: auto calc(0px - var(--page-padding));
|
||||
}
|
||||
#menu-bar {
|
||||
padding: 12px 16px;
|
||||
.icon-button {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: var(--bg);
|
||||
border-block-end-color: var(--bg);
|
||||
border-block-end-width: 1px;
|
||||
border-block-end-style: solid;
|
||||
}
|
||||
#menu-bar.sticky,
|
||||
.js #menu-bar-hover-placeholder:hover + #menu-bar,
|
||||
.js #menu-bar:hover,
|
||||
.js.sidebar-visible #menu-bar {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0 !important;
|
||||
}
|
||||
#menu-bar-hover-placeholder {
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: 0;
|
||||
height: var(--menu-bar-height);
|
||||
}
|
||||
#menu-bar.bordered {
|
||||
border-block-end-color: var(--divider);
|
||||
}
|
||||
#menu-bar i,
|
||||
#menu-bar .icon-button {
|
||||
position: relative;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: color 0.5s;
|
||||
}
|
||||
#menu-bar .icon-button:hover {
|
||||
background-color: var(--icon-btn-bg-hover);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 420px) {
|
||||
.large-logo-img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon-logo-img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#menu-bar {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
#menu-bar .ib-hidden-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.right-buttons {
|
||||
width: 100px; /*For center aligning the icon link*/
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
}
|
||||
.icon-button i {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.right-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.right-buttons a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.left-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.no-js .left-buttons button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
filter: var(--logo-brightness);
|
||||
}
|
||||
.js .menu-title {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-bar,
|
||||
.menu-bar:visited,
|
||||
.nav-chapters,
|
||||
.nav-chapters:visited,
|
||||
.mobile-nav-chapters,
|
||||
.mobile-nav-chapters:visited,
|
||||
.menu-bar .icon-button,
|
||||
.menu-bar a i {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
color: var(--icons);
|
||||
}
|
||||
|
||||
.menu-bar i:hover,
|
||||
.menu-bar .icon-button:hover,
|
||||
.nav-chapters:hover,
|
||||
.mobile-nav-chapters i:hover {
|
||||
.icon-button:hover {
|
||||
color: var(--icons-hover);
|
||||
background-color: var(--icon-btn-bg-hover);
|
||||
}
|
||||
|
||||
/* Nav Icons */
|
||||
.ib-hidden-desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-bar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
padding: 12px 24px;
|
||||
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: block;
|
||||
filter: var(--logo-brightness);
|
||||
}
|
||||
|
||||
.nav-chapters {
|
||||
font-size: 2.5em;
|
||||
@@ -353,7 +260,7 @@ pre > .buttons button {
|
||||
border-width: 1px;
|
||||
border-radius: 4px;
|
||||
border-color: var(--border);
|
||||
background-color: var(--theme-popup-bg);
|
||||
background-color: var(--popover-bg);
|
||||
transition: 100ms;
|
||||
transition-property: color, border-color, background-color;
|
||||
color: var(--icons);
|
||||
@@ -444,6 +351,8 @@ mark.fade-out {
|
||||
#searchbar:focus,
|
||||
#searchbar.active {
|
||||
box-shadow: 0 0 3px var(--searchbar-shadow-color);
|
||||
outline: none;
|
||||
border-color: var(--search-mark-bg);
|
||||
}
|
||||
|
||||
.searchresults-header {
|
||||
@@ -492,20 +401,21 @@ ul#searchresults span.teaser em {
|
||||
/* Sidebar */
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: relative;
|
||||
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: contain;
|
||||
overscroll-behavior-y: none;
|
||||
overflow: hidden;
|
||||
background-color: var(--sidebar-bg);
|
||||
color: var(--sidebar-fg);
|
||||
border-right: 1px solid;
|
||||
border-color: var(--divider);
|
||||
border-right: 1px solid var(--divider);
|
||||
}
|
||||
|
||||
[dir="rtl"] .sidebar {
|
||||
left: unset;
|
||||
right: 0;
|
||||
@@ -524,14 +434,11 @@ ul#searchresults span.teaser em {
|
||||
line-height: 2em;
|
||||
}
|
||||
.sidebar .sidebar-scrollbox {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 12px 12px 12px 24px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.sidebar .sidebar-resize-handle {
|
||||
position: absolute;
|
||||
cursor: col-resize;
|
||||
@@ -561,18 +468,6 @@ ul#searchresults span.teaser em {
|
||||
var(--sidebar-resize-indicator-space)
|
||||
);
|
||||
}
|
||||
/* sidebar-hidden */
|
||||
#sidebar-toggle-anchor:not(:checked) ~ .sidebar {
|
||||
transform: translateX(
|
||||
calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width))
|
||||
);
|
||||
z-index: -1;
|
||||
}
|
||||
[dir="rtl"] #sidebar-toggle-anchor:not(:checked) ~ .sidebar {
|
||||
transform: translateX(
|
||||
calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width))
|
||||
);
|
||||
}
|
||||
.sidebar::-webkit-scrollbar {
|
||||
background: var(--sidebar-bg);
|
||||
}
|
||||
@@ -580,30 +475,38 @@ ul#searchresults span.teaser em {
|
||||
background: var(--scrollbar);
|
||||
}
|
||||
|
||||
/* sidebar-visible */
|
||||
#sidebar-toggle-anchor:checked ~ .page-wrapper {
|
||||
transform: translateX(
|
||||
calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width))
|
||||
);
|
||||
}
|
||||
[dir="rtl"] #sidebar-toggle-anchor:checked ~ .page-wrapper {
|
||||
transform: translateX(
|
||||
calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width))
|
||||
);
|
||||
}
|
||||
@media only screen and (min-width: 620px) {
|
||||
#sidebar-toggle-anchor:checked ~ .page-wrapper {
|
||||
transform: none;
|
||||
margin-inline-start: var(--sidebar-width);
|
||||
@media only screen and (max-width: 619px) {
|
||||
.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-toggle-anchor:checked ~ .page-wrapper {
|
||||
transform: none;
|
||||
|
||||
[dir="rtl"] .sidebar {
|
||||
left: unset;
|
||||
right: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
body.sidebar-open .sidebar {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 620px) {
|
||||
.sidebar {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.chapter {
|
||||
list-style: none outside none;
|
||||
padding-inline-start: 0;
|
||||
padding: 8px 20px 20px 20px;
|
||||
line-height: 2.2em;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -616,9 +519,10 @@ ul#searchresults span.teaser em {
|
||||
display: flex;
|
||||
color: var(--sidebar-non-existant);
|
||||
}
|
||||
|
||||
.chapter li a {
|
||||
display: block;
|
||||
padding: 0;
|
||||
padding: 0 4px;
|
||||
text-decoration: none;
|
||||
color: var(--sidebar-fg);
|
||||
}
|
||||
@@ -634,67 +538,95 @@ ul#searchresults span.teaser em {
|
||||
|
||||
.chapter li > a.toggle {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-inline-start: auto;
|
||||
padding: 0 10px;
|
||||
user-select: none;
|
||||
opacity: 0.68;
|
||||
opacity: 0.5;
|
||||
border-radius: 4px;
|
||||
transition:
|
||||
opacity 0.15s ease,
|
||||
background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.chapter li > a.toggle div {
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
/* collapse the section */
|
||||
.chapter li:not(.expanded) + li > ol {
|
||||
display: none;
|
||||
.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;
|
||||
}
|
||||
|
||||
.chapter li.chapter-item > a:first-child {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.chapter li.expanded > a.toggle div {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.spacer {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
margin: 5px 0px;
|
||||
}
|
||||
.chapter .spacer {
|
||||
background-color: var(--divider);
|
||||
.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;
|
||||
}
|
||||
|
||||
@media (-moz-touch-enabled: 1), (pointer: coarse) {
|
||||
.chapter li a {
|
||||
padding: 5px 0;
|
||||
}
|
||||
.spacer {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.chapter li.part-title.collapsible:hover {
|
||||
background-color: var(--hover-section-title);
|
||||
}
|
||||
|
||||
.chapter li.part-title.collapsible::after {
|
||||
content: "❯";
|
||||
display: inline-block;
|
||||
font-size: 1.2rem;
|
||||
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: 2rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.chapter li.section-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.section {
|
||||
list-style: none outside none;
|
||||
padding-inline-start: 20px;
|
||||
padding-inline-start: 3ch;
|
||||
line-height: 1.9em;
|
||||
}
|
||||
|
||||
/* Theme Menu Popup */
|
||||
|
||||
.theme-popup {
|
||||
position: absolute;
|
||||
left: 32px;
|
||||
top: calc(var(--menu-bar-height) - 12px);
|
||||
right: 155px;
|
||||
top: calc(var(--menu-bar-height) - 18px);
|
||||
z-index: 1000;
|
||||
border-radius: 4px;
|
||||
font-size: 1.4rem;
|
||||
color: var(--fg);
|
||||
background: var(--theme-popup-bg);
|
||||
border: 1px solid var(--theme-popup-border);
|
||||
background: var(--popover-bg);
|
||||
border: 1px solid var(--popover-border);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
@@ -702,6 +634,7 @@ ul#searchresults span.teaser em {
|
||||
/* Don't let the children's background extend past the rounded corners. */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[dir="rtl"] .theme-popup {
|
||||
left: unset;
|
||||
right: 10px;
|
||||
@@ -737,6 +670,8 @@ ul#searchresults span.teaser em {
|
||||
}
|
||||
|
||||
.download-button {
|
||||
max-height: 28px;
|
||||
margin-left: 8px;
|
||||
background: var(--download-btn-bg);
|
||||
color: var(--download-btn-color);
|
||||
padding: 4px 8px;
|
||||
@@ -745,6 +680,7 @@ ul#searchresults span.teaser em {
|
||||
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;
|
||||
}
|
||||
@@ -754,3 +690,135 @@ ul#searchresults span.teaser em {
|
||||
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;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
|
||||
border-radius: 8px;
|
||||
background: var(--popover-bg);
|
||||
border: 1px solid var(--popover-border);
|
||||
box-shadow: var(--popover-shadow);
|
||||
}
|
||||
|
||||
.searchbar-outer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
box-shadow: var(--sidebar-mobile-shadow);
|
||||
}
|
||||
|
||||
.theme-popup {
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
Vendored
+75
-20
@@ -23,7 +23,16 @@ html {
|
||||
body {
|
||||
margin: 0;
|
||||
font-size: 1.6rem;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
overscroll-behavior-y: none;
|
||||
}
|
||||
|
||||
#body-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
code {
|
||||
@@ -37,6 +46,17 @@ main {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.noise-pattern {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
z-index: 105;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-size: 180px;
|
||||
background-repeat: repeat;
|
||||
opacity: var(--noise-opacity);
|
||||
}
|
||||
|
||||
/* make wide tables scroll if they overflow */
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
@@ -91,6 +111,9 @@ h2 {
|
||||
|
||||
h3 {
|
||||
font-size: 2rem;
|
||||
padding-bottom: 0.8rem;
|
||||
border-bottom: 1px dashed;
|
||||
border-color: var(--border-light);
|
||||
}
|
||||
|
||||
h4 {
|
||||
@@ -109,6 +132,14 @@ h5 {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
code:focus-visible,
|
||||
pre:focus-visible,
|
||||
li:focus-visible,
|
||||
button:focus-visible,
|
||||
a:focus-visible {
|
||||
outline: 3px solid #094ece80;
|
||||
}
|
||||
|
||||
.header + .header h3,
|
||||
.header + .header h4,
|
||||
.header + .header h5 {
|
||||
@@ -144,17 +175,27 @@ hr {
|
||||
scroll-margin-top: calc(var(--menu-bar-height) + 2rem);
|
||||
}
|
||||
|
||||
.page {
|
||||
outline: 0;
|
||||
padding: 0 var(--page-padding);
|
||||
margin-block-start: calc(
|
||||
0px - var(--menu-bar-height)
|
||||
); /* Compensate for the #menu-bar-hover-placeholder */
|
||||
}
|
||||
.page-wrapper {
|
||||
box-sizing: border-box;
|
||||
background-color: var(--bg);
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.page {
|
||||
outline: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior-y: none;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.no-js .page-wrapper,
|
||||
.js:not(.sidebar-resizing) .page-wrapper {
|
||||
transition:
|
||||
@@ -168,18 +209,23 @@ hr {
|
||||
}
|
||||
|
||||
.content {
|
||||
overflow-y: auto;
|
||||
padding: 48px 4px;
|
||||
padding: 48px 32px 0 32px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 36px;
|
||||
}
|
||||
|
||||
.content main {
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: auto;
|
||||
max-width: var(--content-max-width);
|
||||
}
|
||||
|
||||
.content p {
|
||||
line-height: 1.625em;
|
||||
}
|
||||
.content div.video {
|
||||
z-index: 150;
|
||||
margin-top: 1rem;
|
||||
border: 1px solid;
|
||||
border-color: var(--border);
|
||||
@@ -213,6 +259,8 @@ hr {
|
||||
}
|
||||
.content img,
|
||||
.content video {
|
||||
position: relative;
|
||||
z-index: 150;
|
||||
max-width: 100%;
|
||||
background-color: var(--media-bg);
|
||||
border: 1px solid;
|
||||
@@ -333,7 +381,7 @@ blockquote .warning:before {
|
||||
kbd {
|
||||
background-color: rgba(8, 76, 207, 0.1);
|
||||
border-radius: 4px;
|
||||
border: solid 1px var(--theme-popup-border);
|
||||
border: solid 1px var(--popover-border);
|
||||
box-shadow: inset 0 -1px 0 var(--theme-hover);
|
||||
display: inline-block;
|
||||
font-size: var(--code-font-size);
|
||||
@@ -378,15 +426,6 @@ kbd {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.chapter li.part-title {
|
||||
font-size: 18px;
|
||||
font-family: var(--title-font);
|
||||
font-weight: 520;
|
||||
color: var(--title-color);
|
||||
margin: 5px 0;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.result-no-output {
|
||||
font-style: italic;
|
||||
}
|
||||
@@ -395,3 +434,19 @@ code:not(pre code).hljs {
|
||||
color: var(--code-text) !important;
|
||||
background-color: var(--code-bg) !important;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1020px) {
|
||||
.content {
|
||||
padding: 16px 32px 0 32px;
|
||||
}
|
||||
|
||||
.content main {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 400px) {
|
||||
.content {
|
||||
padding: 16px 16px 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
Vendored
+37
-10
@@ -5,11 +5,11 @@
|
||||
|
||||
--logo-brightness: brightness(1);
|
||||
|
||||
--sidebar-width: 300px;
|
||||
--sidebar-width: 280px;
|
||||
--sidebar-resize-indicator-width: 0px;
|
||||
--sidebar-resize-indicator-space: 2px;
|
||||
--page-padding: 15px;
|
||||
--content-max-width: 750px;
|
||||
--content-max-width: 690px;
|
||||
--menu-bar-height: 64px;
|
||||
--font: "IA Writer Quattro S", sans-serif;
|
||||
--title-font: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@@ -19,6 +19,7 @@
|
||||
--code-font-size: 0.875em
|
||||
/* please adjust the ace font size accordingly in editor.js */;
|
||||
|
||||
--noise-opacity: 0.024;
|
||||
--bg: hsla(50, 25%, 96%);
|
||||
--fg: hsl(220, 13%, 34%);
|
||||
--title-color: hsl(220, 92%, 42%);
|
||||
@@ -29,12 +30,14 @@
|
||||
|
||||
--media-bg: hsl(50, 25%, 92%);
|
||||
|
||||
--sidebar-bg: hsla(50, 25%, 94%);
|
||||
--sidebar-fg: hsl(0, 0%, 0%);
|
||||
--sidebar-non-existant: #aaaaaa;
|
||||
--sidebar-active: hsl(220, 93%, 42%);
|
||||
--sidebar-active-bg: hsl(220, 93%, 42%, 0.1);
|
||||
--sidebar-mobile-shadow: 0px 16px 16px hsl(0, 0%, 0%, 0.1);
|
||||
|
||||
--divider: hsl(220, 93%, 42%, 0.15);
|
||||
--divider: hsl(220, 50%, 45%, 0.1);
|
||||
--scrollbar: #8f8f8f;
|
||||
|
||||
--icons: #747474;
|
||||
@@ -56,9 +59,13 @@
|
||||
--pre-border: hsla(220, 93%, 42%, 0.3);
|
||||
--pre-shadow: hsla(220, 93%, 42%, 0.07);
|
||||
|
||||
--theme-popup-bg: #fafafa;
|
||||
--theme-popup-border: #cccccc;
|
||||
--popover-bg: #fafafa;
|
||||
--popover-border: #cccccc;
|
||||
--popover-shadow:
|
||||
0 10px 15px -3px hsl(0, 0%, 0%, 0.1), 0 4px 6px -4px hsl(0, 0%, 0%, 0.1);
|
||||
|
||||
--theme-hover: #e6e6e6;
|
||||
--hover-section-title: hsl(50, 25%, 88%);
|
||||
|
||||
--quote-bg: hsl(197, 37%, 96%);
|
||||
--quote-border: hsl(197, 37%, 84%);
|
||||
@@ -71,6 +78,9 @@
|
||||
--table-border-color: hsl(220, 93%, 42%, 0.15);
|
||||
--table-alternate-bg: hsl(220, 10%, 90%, 0.4);
|
||||
|
||||
--toc-link-underline: hsl(0, 0%, 0%, 0.1);
|
||||
--toc-link-underline-hover: hsl(0, 0%, 0%, 0.5);
|
||||
|
||||
--searchbar-border-color: #aaa;
|
||||
--searchbar-bg: #fafafa;
|
||||
--searchbar-fg: #000;
|
||||
@@ -87,6 +97,10 @@
|
||||
--download-btn-border-hover: hsla(220, 60%, 50%, 0.2);
|
||||
--download-btn-shadow: hsla(220, 40%, 60%, 0.1);
|
||||
|
||||
--search-btn-bg: hsl(220, 100%, 100%);
|
||||
--search-btn-bg-hover: hsla(50, 25%, 97%);
|
||||
--search-btn-border: hsl(220, 50%, 45%, 0.2);
|
||||
|
||||
--toast-bg: hsla(220, 93%, 98%);
|
||||
--toast-border: hsla(220, 93%, 42%, 0.3);
|
||||
--toast-border-success: hsla(120, 73%, 42%, 0.3);
|
||||
@@ -103,7 +117,8 @@
|
||||
|
||||
--logo-brightness: brightness(2);
|
||||
|
||||
--bg: hsl(220, 13%, 10%);
|
||||
--noise-opacity: 0.012;
|
||||
--bg: hsl(220, 13%, 7.5%);
|
||||
--fg: hsl(220, 14%, 70%);
|
||||
--title-color: hsl(220, 92%, 80%);
|
||||
|
||||
@@ -113,13 +128,14 @@
|
||||
|
||||
--media-bg: hsl(220, 13%, 8%);
|
||||
|
||||
--sidebar-bg: hsl(220, 13%, 10%);
|
||||
--sidebar-bg: hsl(220, 13%, 6.5%);
|
||||
--sidebar-fg: hsl(220, 14%, 71%);
|
||||
--sidebar-non-existant: #505254;
|
||||
--sidebar-active: hsl(220, 92%, 75%);
|
||||
--sidebar-active-bg: hsl(220, 93%, 42%, 0.25);
|
||||
--sidebar-mobile-shadow: 0px 16px 16px hsl(0, 0%, 0%, 0.6);
|
||||
|
||||
--divider: hsl(220, 13%, 20%);
|
||||
--divider: hsl(220, 13%, 12%);
|
||||
--scrollbar: hsl(220, 13%, 30%);
|
||||
|
||||
--icons: hsl(220, 14%, 71%);
|
||||
@@ -140,9 +156,13 @@
|
||||
--pre-border: hsla(220, 93%, 70%, 0.3);
|
||||
--pre-shadow: hsla(220, 93%, 70%, 0.1);
|
||||
|
||||
--theme-popup-bg: hsl(220, 13%, 15%);
|
||||
--theme-popup-border: hsl(220, 13%, 20%);
|
||||
--popover-bg: hsl(220, 13%, 8%);
|
||||
--popover-border: hsl(220, 13%, 20%);
|
||||
--popover-shadow:
|
||||
0 10px 15px -3px hsl(0, 0%, 0%, 0.1), 0 4px 6px -4px hsl(0, 0%, 0%, 0.1);
|
||||
|
||||
--theme-hover: hsl(220, 13%, 25%);
|
||||
--hover-section-title: hsl(220, 13%, 11%);
|
||||
|
||||
--quote-bg: hsl(220, 13%, 25%, 0.4);
|
||||
--quote-border: hsl(220, 13%, 32%, 0.5);
|
||||
@@ -151,6 +171,9 @@
|
||||
--table-header-bg: hsl(220, 13%, 25%, 0.5);
|
||||
--table-alternate-bg: hsl(220, 13%, 20%, 0.4);
|
||||
|
||||
--toc-link-underline: hsl(255, 100%, 100%, 0.1);
|
||||
--toc-link-underline-hover: hsl(255, 100%, 100%, 0.4);
|
||||
|
||||
--warning-border: hsl(25, 100%, 85%, 0.2);
|
||||
--warning-bg: hsl(42, 100%, 40%, 0.1);
|
||||
--warning-icon: hsl(42, 100%, 80%);
|
||||
@@ -171,6 +194,10 @@
|
||||
--download-btn-border-hover: hsla(220, 90%, 80%, 0.4);
|
||||
--download-btn-shadow: hsla(220, 50%, 60%, 0.15);
|
||||
|
||||
--search-btn-bg: hsl(220, 90%, 90%, 0.05);
|
||||
--search-btn-bg-hover: hsl(220, 90%, 90%, 0.1);
|
||||
--search-btn-border: hsla(220, 90%, 80%, 0.1);
|
||||
|
||||
--toast-bg: hsla(220, 20%, 98%, 0.05);
|
||||
--toast-border: hsla(220, 93%, 70%, 0.2);
|
||||
--toast-border-success: hsla(120, 90%, 60%, 0.3);
|
||||
|
||||
Reference in New Issue
Block a user