diff options
Diffstat (limited to 'docs/_static')
| -rw-r--r-- | docs/_static/custom.js | 36 | ||||
| -rw-r--r-- | docs/_static/style.css | 92 |
2 files changed, 109 insertions, 19 deletions
diff --git a/docs/_static/custom.js b/docs/_static/custom.js index ac3ed1e9..3f0e50d1 100644 --- a/docs/_static/custom.js +++ b/docs/_static/custom.js @@ -28,17 +28,28 @@ function updateSetting(element) { } } -function getBodyClassToggle(className) { - function toggleBodyClass(add) { - document.body.classList.toggle(className, add); +function getRootAttributeToggle(attributeName, valueName) { + function toggleRootAttribute(set) { + document.documentElement.setAttribute(`data-${attributeName}`, set ? valueName : null); } - return toggleBodyClass; + return toggleRootAttribute; } const settings = { - useSansFont: getBodyClassToggle('sans') + useSansFont: getRootAttributeToggle('font', 'sans'), + useDarkTheme: getRootAttributeToggle('theme', 'dark') }; +Object.entries(settings).forEach(([name, setter]) => { + let value = JSON.parse(localStorage.getItem(name)); + try { + setter(value); + } catch (error) { + console.error(`Failed to apply setting "${name}" With value:`, value); + console.error(error); + } +}); + document.addEventListener('DOMContentLoaded', () => { bottomHeightThreshold = document.documentElement.scrollHeight - 30; @@ -81,18 +92,11 @@ document.addEventListener('DOMContentLoaded', () => { parent.insertBefore(table, element.nextSibling); }); - Object.entries(settings).forEach(([name, setter]) => { + Object.keys(settings).forEach(name => { let value = JSON.parse(localStorage.getItem(name)); - - try { - setter(value); - let element = document.querySelector(`input[name=${name}]`); - if (element) { - element.checked = value === true; - } - } catch (error) { - console.error(`Failed to apply setting "${name}" With value:`, value); - console.error(error); + let element = document.querySelector(`input[name=${name}]`); + if (element) { + element.checked = value === true; } }); }); diff --git a/docs/_static/style.css b/docs/_static/style.css index 176dc32b..d8b6a2cb 100644 --- a/docs/_static/style.css +++ b/docs/_static/style.css @@ -18,6 +18,8 @@ Historically however, thanks to: /* CSS variables would go here */ :root { + --font-family: 'Georgia', 'Yu Gothic', 'Noto Sans CJK JP Regular', serif; + --main-background: #fff; --link-text: #2591c4; --link-hover-text: #0b3a44; @@ -60,10 +62,73 @@ Historically however, thanks to: --table-border: #ddd; --mobile-active-toc: ; --active-toc: #dbdbdb; + --scrollbar: rgba(0,0,0,0.2); + --scrollbar-hover: rgba(0,0,0,0.4); +} + +:root[data-font="sans"] { + --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} + +:root[data-theme="dark"] { + --main-background: #303030; + --link-text: #2591c4; + --link-hover-text: #3b6a74; + --text-normal: #fff; + --mobile-nav-background: #424242; + --mobile-nav-text: #fff; + --mobile-nav-hover-text: #fff; + --mobile-nav-header-text: #fff; + --nav-background: #303030; + --nav-text: rgba(255,255,255,0.7); + --nav-hover-text: rgba(255,255,255,0.5); + --nav-header-text: rgba(255,255,255,0.87); + --search-border: #ccc; + --footer-text: #555; + --footer-link: #444; + --hr-border: #b1b4b6; + --main-big-headers-text: rgba(255,255,255,0.87); + --main-big-headers-border: #ddd; + --main-h5-header-text: #000; + --main-h6-header-text: #777; + --main-h4-header-border: #e5e5e5; + --header-link: #3e4349; + --header-link-hover-text: #fff; + --note-background: #424242; + --note-border: #222222; + --warning-background: #424242; + --warning-border: #aaaa22; + --error-background: #424242; + --error-border: #aa2222; + --helpful-background: #424242; + --helpful-border: #22aaaa; + --codeblock-background: #222222; + --codeblock-border: #424242; + --codeblock-text: rgba(255,255,255,0.7); + --inline-code-background: #212121; + --xref-code-background: transparent; + --api-entry-background: #212121; + --table-header-background: #f5f5f5; + --table-text: #000; + --table-border: #ddd; + --mobile-active-toc: ; + --active-toc: #dbdbdb; + --scrollbar: rgba(0,0,0,0.5); + --scrollbar-hover: rgba(0,0,0,0.7); +} + +img[src$="snake_dark.svg"] { + display: none; +} +:root[data-theme="dark"] img[src$="snake.svg"] { + display: none; +} +:root[data-theme="dark"] img[src$="snake_dark.svg"] { + display: initial; } body { - font-family: 'Georgia', 'Yu Gothic', 'Noto Sans CJK JP Regular', serif; + font-family: var(--font-family); font-size: 16px; margin: 0; padding: 0; @@ -72,8 +137,23 @@ body { color: var(--text-normal); } -body.sans { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + +/* Scrollbar related */ + +body::-webkit-scrollbar, +#sidebar::-webkit-scrollbar { + width: 1em; +} + +body::-webkit-scrollbar-thumb, +#sidebar::-webkit-scrollbar-thumb { + background-color: var(--scrollbar); + border-radius: 0.5em; +} + +body::-webkit-scrollbar-thumb:hover, +#sidebar::-webkit-scrollbar-thumb:hover { + background-color: var(--scrollbar-hover); } /* grid related */ @@ -235,6 +315,7 @@ div.modal-content { border-radius: 4px; margin: 20% auto; width: 40%; + min-width: 350px; cursor: initial; } @@ -397,6 +478,11 @@ main li { line-height: 1.4em; } +main img { + width: 100%; + max-width: 500px; +} + /* weird margins */ li > p { margin: 2px; |