557d39332c
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
211 lines
6.4 KiB
CSS
211 lines
6.4 KiB
CSS
/* Globals */
|
|
|
|
:root {
|
|
--color-scheme: light;
|
|
|
|
--logo-brightness: brightness(1);
|
|
|
|
--sidebar-width: 280px;
|
|
--sidebar-resize-indicator-width: 0px;
|
|
--sidebar-resize-indicator-space: 2px;
|
|
--page-padding: 15px;
|
|
--content-max-width: 690px;
|
|
--menu-bar-height: 64px;
|
|
--font: "IA Writer Quattro S", sans-serif;
|
|
--title-font: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
--mono-font:
|
|
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono,
|
|
Courier New, monospace;
|
|
--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%);
|
|
|
|
--border: hsl(220, 13%, 80%);
|
|
--border-light: hsl(220, 13%, 90%);
|
|
--border-hover: hsl(220, 13%, 70%);
|
|
|
|
--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, 50%, 45%, 0.1);
|
|
--scrollbar: #8f8f8f;
|
|
|
|
--icons: #747474;
|
|
--icons-hover: #000000;
|
|
--icon-btn-bg-hover: hsl(220, 93%, 42%, 0.15);
|
|
|
|
--links: hsl(220, 92%, 42%);
|
|
--link-line-decoration: hsl(220, 93%, 42%, 0.2);
|
|
--link-line-decoration-hover: hsl(220, 93%, 42%, 0.5);
|
|
|
|
--full-contrast: #000;
|
|
|
|
--inline-code-color: #301900;
|
|
--code-text: hsl(220, 13%, 10%);
|
|
--code-bg: hsl(220, 93%, 42%, 0.1);
|
|
--keybinding-bg: hsl(0, 0%, 94%);
|
|
|
|
--pre-bg: #fff;
|
|
--pre-border: hsla(220, 93%, 42%, 0.3);
|
|
--pre-shadow: hsla(220, 93%, 42%, 0.07);
|
|
|
|
--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%);
|
|
|
|
--warning-border: hsl(25, 100%, 85%);
|
|
--warning-bg: hsl(42, 100%, 60%, 0.1);
|
|
--warning-icon: hsl(42, 100%, 30%);
|
|
|
|
--table-header-bg: hsl(220, 50%, 90%, 0.4);
|
|
--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;
|
|
--searchbar-shadow-color: #aaa;
|
|
--searchresults-header-fg: #666;
|
|
--searchresults-border-color: #888;
|
|
--searchresults-li-bg: #e4f2fe;
|
|
--search-mark-bg: #a2cff5;
|
|
|
|
--download-btn-bg: hsl(220, 60%, 95%);
|
|
--download-btn-bg-hover: hsl(220, 60%, 93%);
|
|
--download-btn-color: hsl(220, 60%, 30%);
|
|
--download-btn-border: hsla(220, 60%, 40%, 0.2);
|
|
--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);
|
|
--toast-border-error: hsla(0, 90%, 50%, 0.3);
|
|
|
|
--footer-btn-bg: hsl(220, 60%, 98%, 0.4);
|
|
--footer-btn-bg-hover: hsl(220, 60%, 93%, 0.5);
|
|
--footer-btn-border: hsla(220, 60%, 40%, 0.15);
|
|
--footer-btn-border-hover: hsla(220, 60%, 50%, 0.2);
|
|
}
|
|
|
|
.dark {
|
|
--color-scheme: dark;
|
|
|
|
--logo-brightness: brightness(2);
|
|
|
|
--noise-opacity: 0.012;
|
|
--bg: hsl(220, 13%, 7.5%);
|
|
--fg: hsl(220, 14%, 70%);
|
|
--title-color: hsl(220, 92%, 80%);
|
|
|
|
--border: hsl(220, 13%, 20%);
|
|
--border-light: hsl(220, 13%, 15%);
|
|
--border-hover: hsl(220, 13%, 40%);
|
|
|
|
--media-bg: hsl(220, 13%, 8%);
|
|
|
|
--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%, 12%);
|
|
--scrollbar: hsl(220, 13%, 30%);
|
|
|
|
--icons: hsl(220, 14%, 71%);
|
|
--icons-hover: hsl(220, 14%, 90%);
|
|
--icon-btn-bg-hover: hsl(220, 93%, 42%, 0.4);
|
|
|
|
--links: hsl(220, 93%, 75%);
|
|
--link-line-decoration: hsl(220, 92%, 80%, 0.4);
|
|
--link-line-decoration-hover: hsl(220, 92%, 80%, 0.8);
|
|
--full-contrast: #fff;
|
|
|
|
--inline-code-color: hsl(40, 100%, 80%);
|
|
--code-text: hsl(220, 13%, 95%);
|
|
--code-bg: hsl(220, 93%, 50%, 0.2);
|
|
--keybinding-bg: hsl(0, 0%, 12%);
|
|
|
|
--pre-bg: hsl(220, 13%, 5%);
|
|
--pre-border: hsla(220, 93%, 70%, 0.3);
|
|
--pre-shadow: hsla(220, 93%, 70%, 0.1);
|
|
|
|
--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);
|
|
|
|
--table-border-color: hsl(220, 13%, 30%, 0.5);
|
|
--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%);
|
|
|
|
--searchbar-border-color: hsl(220, 13%, 30%);
|
|
--searchbar-bg: hsl(220, 13%, 22%, 0.5);
|
|
--searchbar-fg: hsl(220, 14%, 71%);
|
|
--searchbar-shadow-color: hsl(220, 13%, 15%);
|
|
--searchresults-header-fg: hsl(220, 14%, 60%);
|
|
--searchresults-border-color: hsl(220, 13%, 30%);
|
|
--searchresults-li-bg: hsl(220, 13%, 25%);
|
|
--search-mark-bg: hsl(220, 93%, 60%);
|
|
|
|
--download-btn-bg: hsl(220, 90%, 90%, 0.1);
|
|
--download-btn-bg-hover: hsl(220, 90%, 50%, 0.2);
|
|
--download-btn-color: hsl(220, 90%, 95%);
|
|
--download-btn-border: hsla(220, 90%, 80%, 0.2);
|
|
--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);
|
|
--toast-border-error: hsla(0, 90%, 80%, 0.3);
|
|
|
|
--footer-btn-bg: hsl(220, 90%, 95%, 0.01);
|
|
--footer-btn-bg-hover: hsl(220, 90%, 50%, 0.05);
|
|
--footer-btn-border: hsla(220, 90%, 90%, 0.05);
|
|
--footer-btn-border-hover: hsla(220, 90%, 80%, 0.2);
|
|
}
|