diff --git a/src/theme/book.js b/src/theme/book.js index d1a280f9..f5b48662 100644 --- a/src/theme/book.js +++ b/src/theme/book.js @@ -19,15 +19,16 @@ window.onunload = function () { }; })(); (function sidebar() { - var html = document.querySelector("html"); + var body = document.querySelector("body"); var sidebar = document.getElementById("sidebar"); var sidebarLinks = document.querySelectorAll('#sidebar a'); var sidebarToggleButton = document.getElementById("sidebar-toggle"); + var sidebarResizeHandle = document.getElementById("sidebar-resize-handle"); var firstContact = null; function showSidebar() { - html.classList.remove('sidebar-hidden') - html.classList.add('sidebar-visible'); + body.classList.remove('sidebar-hidden') + body.classList.add('sidebar-visible'); Array.from(sidebarLinks).forEach(function (link) { link.setAttribute('tabIndex', 0); }); @@ -37,8 +38,8 @@ window.onunload = function () { }; } function hideSidebar() { - html.classList.remove('sidebar-visible') - html.classList.add('sidebar-hidden'); + body.classList.remove('sidebar-visible') + body.classList.add('sidebar-hidden'); Array.from(sidebarLinks).forEach(function (link) { link.setAttribute('tabIndex', -1); }); @@ -49,9 +50,14 @@ window.onunload = function () { }; // Toggle sidebar sidebarToggleButton.addEventListener('click', function sidebarToggle() { - if (html.classList.contains("sidebar-hidden")) { + if (body.classList.contains("sidebar-hidden")) { + var current_width = parseInt( + document.documentElement.style.getPropertyValue('--sidebar-width'), 10); + if (current_width < 150) { + document.documentElement.style.setProperty('--sidebar-width', '150px'); + } showSidebar(); - } else if (html.classList.contains("sidebar-visible")) { + } else if (body.classList.contains("sidebar-visible")) { hideSidebar(); } else { if (getComputedStyle(sidebar)['transform'] === 'none') { @@ -62,6 +68,32 @@ window.onunload = function () { }; } }); + sidebarResizeHandle.addEventListener('mousedown', initResize, false); + + function initResize(e) { + window.addEventListener('mousemove', resize, false); + window.addEventListener('mouseup', stopResize, false); + body.classList.add('sidebar-resizing'); + } + function resize(e) { + var pos = (e.clientX - sidebar.offsetLeft); + if (pos < 20) { + hideSidebar(); + } else { + if (body.classList.contains("sidebar-hidden")) { + showSidebar(); + } + pos = Math.min(pos, window.innerWidth - 100); + document.documentElement.style.setProperty('--sidebar-width', pos + 'px'); + } + } + //on mouseup remove windows functions mousemove & mouseup + function stopResize(e) { + body.classList.remove('sidebar-resizing'); + window.removeEventListener('mousemove', resize, false); + window.removeEventListener('mouseup', stopResize, false); + } + document.addEventListener('touchstart', function (e) { firstContact = { x: e.touches[0].clientX, @@ -86,32 +118,41 @@ window.onunload = function () { }; firstContact = null; } }, { passive: true }); - - // Scroll sidebar to current active section - var activeSection = sidebar.querySelector(".active"); - if (activeSection) { - sidebar.scrollTop = activeSection.offsetTop; - } })(); (function chapterNavigation() { document.addEventListener('keydown', function (e) { if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) { return; } if (window.search && window.search.hasFocus()) { return; } + var html = document.querySelector('html'); + function next() { + var nextButton = document.querySelector('.nav-chapters.next'); + if (nextButton) { + window.location.href = nextButton.href; + } + } + function prev() { + var previousButton = document.querySelector('.nav-chapters.previous'); + if (previousButton) { + window.location.href = previousButton.href; + } + } switch (e.key) { case 'ArrowRight': e.preventDefault(); - var nextButton = document.querySelector('.nav-chapters.next'); - if (nextButton) { - window.location.href = nextButton.href; + if (html.dir == 'rtl') { + prev(); + } else { + next(); } break; case 'ArrowLeft': e.preventDefault(); - var previousButton = document.querySelector('.nav-chapters.previous'); - if (previousButton) { - window.location.href = previousButton.href; + if (html.dir == 'rtl') { + next(); + } else { + prev(); } break; } diff --git a/src/theme/css/chrome.css b/src/theme/css/chrome.css index 544e7718..f1cdc2c8 100644 --- a/src/theme/css/chrome.css +++ b/src/theme/css/chrome.css @@ -1,109 +1,114 @@ /* CSS for UI elements (a.k.a. chrome) */ -@import 'variables.css'; - -::-webkit-scrollbar { - background: var(--bg); -} -::-webkit-scrollbar-thumb { - background: var(--scrollbar); -} html { - scrollbar-color: var(--scrollbar) var(--bg); + scrollbar-color: var(--scrollbar) var(--bg); } #searchresults a, .content a:link, a:visited, a > .hljs { - color: var(--links); + 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 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; } /* Menu Bar */ #menu-bar, #menu-bar-hover-placeholder { - z-index: 101; - margin: auto calc(0px - var(--page-padding)); + z-index: 101; + margin: auto calc(0px - var(--page-padding)); } #menu-bar { - position: relative; - display: flex; - flex-wrap: wrap; - background-color: var(--bg); - border-bottom-color: var(--bg); - border-bottom-width: 1px; - border-bottom-style: solid; + 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:hover + #menu-bar, +#menu-bar:hover, +html.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); + position: sticky; + position: -webkit-sticky; + top: 0; + height: var(--menu-bar-height); } #menu-bar.bordered { - border-bottom-color: var(--table-border-color); + border-block-end-color: var(--table-border-color); } #menu-bar i, #menu-bar .icon-button { - position: relative; - padding: 0 8px; - z-index: 10; - line-height: var(--menu-bar-height); - cursor: pointer; - transition: color 0.5s; + position: relative; + padding: 0 8px; + z-index: 10; + line-height: var(--menu-bar-height); + cursor: pointer; + transition: color 0.5s; } @media only screen and (max-width: 420px) { - #menu-bar i, #menu-bar .icon-button { - padding: 0 5px; - } + #menu-bar i, #menu-bar .icon-button { + padding: 0 5px; + } } .icon-button { - border: none; - background: none; - padding: 0; - color: inherit; + border: none; + background: none; + padding: 0; + color: inherit; } .icon-button i { - margin: 0; + margin: 0; } .right-buttons { - margin: 0 15px; + margin: 0 15px; } .right-buttons a { - text-decoration: none; + text-decoration: none; } .left-buttons { - display: flex; - margin: 0 5px; + display: flex; + margin: 0 5px; } -.no-js .left-buttons { - display: none; +html:not(.js) .left-buttons button { + display: none; } .menu-title { - display: inline-block; - font-weight: 200; - font-size: 2.4rem; - line-height: var(--menu-bar-height); - text-align: center; - margin: 0; - flex: 1; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + display: inline-block; + font-weight: 200; + font-size: 2.4rem; + line-height: var(--menu-bar-height); + text-align: center; + margin: 0; + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } -.js .menu-title { - cursor: pointer; +.menu-title { + cursor: pointer; } .menu-bar, @@ -114,371 +119,517 @@ a > .hljs { .mobile-nav-chapters:visited, .menu-bar .icon-button, .menu-bar a i { - color: var(--icons); + color: var(--icons); } .menu-bar i:hover, .menu-bar .icon-button:hover, .nav-chapters:hover, .mobile-nav-chapters i:hover { - color: var(--icons-hover); + color: var(--icons-hover); } /* Nav Icons */ .nav-chapters { - font-size: 2.5em; - text-align: center; - text-decoration: none; + font-size: 2.5em; + text-align: center; + text-decoration: none; - position: fixed; - top: 0; - bottom: 0; - margin: 0; - max-width: 150px; - min-width: 90px; + 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; + display: flex; + justify-content: center; + align-content: center; + flex-direction: column; - transition: color 0.5s, background-color 0.5s; + transition: color 0.5s, background-color 0.5s; } .nav-chapters:hover { - text-decoration: none; - transition: color 0.15s, color 0.15s; + text-decoration: none; + transition: color 0.15s, color 0.15s; } .nav-wrapper { - margin-top: 50px; - display: none; + margin-block-start: 50px; + display: none; } .mobile-nav-chapters { - font-size: 2.5em; - text-align: center; - text-decoration: none; - width: 90px; - border-radius: 5px; - background-color: var(--sidebar-bg); + font-size: 2.5em; + text-align: center; + text-decoration: none; + width: 90px; + border-radius: 5px; + background-color: var(--sidebar-bg); } -.previous { - float: left; -} +/* 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); + 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; } + .nav-wide-wrapper { display: none; } + .nav-wrapper { display: block; } } +/* sidebar-visible */ @media only screen and (max-width: 1380px) { - .sidebar-visible .nav-wide-wrapper { display: none; } - .sidebar-visible .nav-wrapper { display: block; } + #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; + display: inline; + padding: 0.1em 0.3em; + border-radius: 3px; } :not(pre):not(a) > .hljs { - color: var(--inline-code-color); - overflow-x: initial; + color: var(--inline-code-color); + overflow-x: initial; } a:hover > .hljs { - text-decoration: underline; + text-decoration: underline; } pre { - position: relative; + position: relative; } pre > .buttons { - position: absolute; - z-index: 100; - right: 5px; - top: 5px; - - color: var(--sidebar-fg); - cursor: pointer; + 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); + color: var(--sidebar-active); + border-color: var(--icons-hover); + background-color: var(--theme-hover); } pre > .buttons i { - margin-left: 8px; + margin-inline-start: 8px; } pre > .buttons button { - color: inherit; - background: transparent; - border: none; - cursor: inherit; + cursor: inherit; + margin: 0px 5px; + padding: 4px 4px 3px 5px; + font-size: 23px; + + border-style: solid; + border-width: 1px; + border-radius: 4px; + border-color: var(--icons); + background-color: var(--theme-popup-bg); + transition: 100ms; + transition-property: color,border-color,background-color; + color: var(--icons); +} + +pre > .buttons button.clip-button { + padding: 2px 4px 0px 6px; +} +pre > .buttons button.clip-button::before { + /* clipboard image from octicons (https://github.com/primer/octicons/tree/v2.0.0) MIT license + */ + content: url('data:image/svg+xml,\ +\ +\ +'); + filter: var(--copy-button-filter); +} +pre > .buttons button.clip-button:hover::before { + filter: var(--copy-button-filter-hover); +} + +@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; + } +} + +/* FIXME: 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-top: 10px; + margin-block-start: 10px; } /* Search */ #searchresults a { - text-decoration: none; + text-decoration: none; } mark { - border-radius: 2px; - padding: 0 3px 1px 3px; - margin: 0 -3px -1px -3px; - background-color: var(--search-mark-bg); - transition: background-color 300ms linear; - cursor: pointer; + 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; + background-color: rgba(0,0,0,0) !important; + cursor: auto; } .searchbar-outer { - margin-left: auto; - margin-right: auto; - max-width: var(--content-max-width); + margin-inline-start: auto; + margin-inline-end: auto; + max-width: var(--content-max-width); } #searchbar { - width: 100%; - margin: 5px auto 0px 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); + 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); + box-shadow: 0 0 3px var(--searchbar-shadow-color); } .searchresults-header { - font-weight: bold; - font-size: 1em; - padding: 18px 0 0 5px; - color: var(--searchresults-header-fg); + font-weight: bold; + font-size: 1em; + padding-block-start: 18px; + padding-block-end: 0; + padding-inline-start: 5px; + padding-inline-end: 0; + color: var(--searchresults-header-fg); } .searchresults-outer { - margin-left: auto; - margin-right: auto; - max-width: var(--content-max-width); - border-bottom: 1px dashed var(--searchresults-border-color); + margin-inline-start: auto; + margin-inline-end: auto; + max-width: var(--content-max-width); + border-block-end: 1px dashed var(--searchresults-border-color); } ul#searchresults { - list-style: none; - padding-left: 20px; + list-style: none; + padding-inline-start: 20px; } ul#searchresults li { - margin: 10px 0px; - padding: 2px; - border-radius: 2px; + margin: 10px 0px; + padding: 2px; + border-radius: 2px; } ul#searchresults li.focus { - background-color: var(--searchresults-li-bg); + background-color: var(--searchresults-li-bg); } ul#searchresults span.teaser { - display: block; - clear: both; - margin: 5px 0 0 20px; - font-size: 0.8em; + display: block; + clear: both; + margin-block-start: 5px; + margin-block-end: 0; + margin-inline-start: 20px; + margin-inline-end: 0; + font-size: 0.8em; } ul#searchresults span.teaser em { - font-weight: bold; - font-style: normal; + font-weight: bold; + font-style: normal; } /* Sidebar */ .sidebar { - position: fixed; - left: 0; - top: 0; - bottom: 0; - width: var(--sidebar-width); - font-size: 0.875em; - box-sizing: border-box; - -webkit-overflow-scrolling: touch; - overscroll-behavior-y: contain; - background-color: var(--sidebar-bg); - color: var(--sidebar-fg); -} + position: fixed; + left: 0; + top: 0; + bottom: 0; + width: var(--sidebar-width); + font-size: 0.875em; + box-sizing: border-box; + -webkit-overflow-scrolling: touch; + overscroll-behavior-y: contain; + background-color: var(--sidebar-bg); + color: var(--sidebar-fg); +} +.sidebar-iframe-inner { + background-color: var(--sidebar-bg); + color: var(--sidebar-fg); + padding: 10px 10px; + margin: 0; + font-size: 1.4rem; +} +.sidebar-iframe-outer { + border: none; + height: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} +[dir=rtl] .sidebar { left: unset; right: 0; } .sidebar-resizing { - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; } -.js:not(.sidebar-resizing) .sidebar { - transition: transform 0.3s; /* Animation: slide away */ +html:not(.sidebar-resizing) .sidebar { + transition: transform 0.3s; /* Animation: slide away */ } .sidebar code { - line-height: 2em; -} -/* .sidebar .sidebar-scrollbox { - overflow-y: auto; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - padding: 10px 10px; -} */ + line-height: 2em; +} +/*.sidebar .sidebar-scrollbox { + overflow-y: auto; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + padding: 10px 10px; +}*/ .sidebar .sidebar-resize-handle { - position: absolute; - cursor: col-resize; - width: 0; - right: 0; - top: 0; - bottom: 0; + 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: 5px; + cursor: col-resize; + width: calc(var(--sidebar-resize-indicator-width) - 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; } -.sidebar-hidden .sidebar { - transform: translateX(calc(0px - var(--sidebar-width))); +[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); + background: var(--sidebar-bg); } .sidebar::-webkit-scrollbar-thumb { - background: var(--scrollbar); + 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: calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)); + } + [dir=rtl] #sidebar-toggle-anchor:checked ~ .page-wrapper { + transform: none; + } } .chapter { - list-style: none outside none; - padding-left: 0; - line-height: 2.2em; + list-style: none outside none; + padding-inline-start: 0; + line-height: 2.2em; } .chapter ol { - width: 100%; + width: 100%; } .chapter li { - display: flex; - color: var(--sidebar-non-existant); + display: flex; + color: var(--sidebar-non-existant); } .chapter li a { - display: block; - padding: 0; - text-decoration: none; - color: var(--sidebar-fg); + display: block; + padding: 0; + text-decoration: none; + color: var(--sidebar-fg); } .chapter li a:hover { - color: var(--sidebar-active); + color: var(--sidebar-active); } .chapter li a.active { - color: var(--sidebar-active); + color: var(--sidebar-active); } .chapter li > a.toggle { - cursor: pointer; - display: block; - margin-left: auto; - padding: 0 10px; - user-select: none; - opacity: 0.68; + cursor: pointer; + display: block; + margin-inline-start: auto; + padding: 0 10px; + user-select: none; + opacity: 0.68; } .chapter li > a.toggle div { - transition: transform 0.5s; + transition: transform 0.5s; } /* collapse the section */ .chapter li:not(.expanded) + li > ol { - display: none; + display: none; } .chapter li.chapter-item { - line-height: 1.5em; - margin-top: 0.6em; + line-height: 1.5em; + margin-block-start: 0.6em; } .chapter li.expanded > a.toggle div { - transform: rotate(90deg); + transform: rotate(90deg); } .spacer { - width: 100%; - height: 3px; - margin: 5px 0px; + width: 100%; + height: 3px; + margin: 5px 0px; } .chapter .spacer { - background-color: var(--sidebar-spacer); + background-color: var(--sidebar-spacer); } @media (-moz-touch-enabled: 1), (pointer: coarse) { - .chapter li a { padding: 5px 0; } - .spacer { margin: 10px 0; } + .chapter li a { padding: 5px 0; } + .spacer { margin: 10px 0; } } .section { - list-style: none outside none; - padding-left: 20px; - line-height: 1.9em; + list-style: none outside none; + padding-inline-start: 20px; + line-height: 1.9em; } /* Theme Menu Popup */ .theme-popup { - position: absolute; - left: 10px; - top: var(--menu-bar-height); - z-index: 1000; - border-radius: 4px; - font-size: 0.7em; - color: var(--fg); - background: var(--theme-popup-bg); - border: 1px solid var(--theme-popup-border); - margin: 0; - padding: 0; - list-style: none; - display: none; -} + position: absolute; + left: 10px; + top: var(--menu-bar-height); + z-index: 1000; + border-radius: 4px; + font-size: 0.7em; + color: var(--fg); + background: var(--theme-popup-bg); + border: 1px solid var(--theme-popup-border); + margin: 0; + padding: 0; + list-style: none; + display: none; + /* Don't let the children's background extend past the rounded corners. */ + overflow: hidden; +} +[dir=rtl] .theme-popup { left: unset; right: 10px; } .theme-popup .default { - color: var(--icons); + color: var(--icons); } .theme-popup .theme { - width: 100%; - border: 0; - margin: 0; - padding: 2px 10px; - line-height: 25px; - white-space: nowrap; - text-align: left; - cursor: pointer; - color: inherit; - background: inherit; - font-size: inherit; + width: 100%; + border: 0; + margin: 0; + padding: 2px 20px; + line-height: 25px; + white-space: nowrap; + text-align: start; + cursor: pointer; + color: inherit; + background: inherit; + font-size: inherit; } .theme-popup .theme:hover { - background-color: var(--theme-hover); + background-color: var(--theme-hover); } -.theme-popup .theme:hover:first-child, -.theme-popup .theme:hover:last-child { - border-top-left-radius: inherit; - border-top-right-radius: inherit; + +.theme-selected::before { + display: inline-block; + content: "✓"; + margin-inline-start: -14px; + width: 14px; } diff --git a/src/theme/css/general.css b/src/theme/css/general.css index 4eb45e39..737796d0 100644 --- a/src/theme/css/general.css +++ b/src/theme/css/general.css @@ -1,146 +1,161 @@ -@import 'variables.css'; +/* Base styles and content styles */ + +:root { + /* Browser default font-size is 16px, this way 1 rem = 10px */ + color-scheme: var(--color-scheme); +} body { - font-family: 'Ubuntu', sans-serif; - font-size: 1rem; - line-height: 1.5; - color: var(--fg); - margin: 0; - background-color: var(--bg); + font-family: 'Ubuntu', sans-serif; + font-size: 1rem; + line-height: 1.5; + color: var(--fg); + margin: 0; + background-color: var(--bg); } h1, h2, h3, h4, h5, h6 { color: var(--fg); } a, a:visited { - color: var(--links); - text-decoration: none; + color: var(--links); + text-decoration: none; } a:hover, a:visited:hover { - color: var(--links-hover); - text-decoration: underline; + color: var(--links-hover); + text-decoration: underline; } code { - background: var(--inline-code-color); - padding: 2px 4px; - border-radius: 4px; - white-space: pre-wrap; - overflow-wrap: break-word; + background: var(--inline-code-color); + padding: 2px 4px; + border-radius: 4px; + white-space: pre-wrap; + overflow-wrap: break-word; } pre code { - padding: 0; - border-radius: 0; + padding: 0; + border-radius: 0; } pre { - padding: .5em; - margin: 1em 0; - background: var(--inline-code-color); - border: 1px solid var(--code-border); - border-radius: 4px; + padding: .5em; + margin: 1em 0; + background: var(--inline-code-color); + border: 1px solid var(--code-border); + border-radius: 4px; +} + +/* make long words/inline code not x overflow */ +main { + overflow-wrap: break-word; +} + +/* make wide tables scroll if they overflow */ +.table-wrapper { + overflow-x: auto; } blockquote { - margin: 20px 0; - padding: 0 20px; - padding-left: 1em; - background: var(--quote-bg); - border: 1px solid var(--quote-border); - border-left: none; - border-right: none; + margin: 20px 0; + padding: 0 20px; + padding-left: 1em; + background: var(--quote-bg); + border: 1px solid var(--quote-border); + border-left: none; + border-right: none; } blockquote code { - background: var(--quote-code-bg); + background: var(--quote-code-bg); } li.js-unavailable { - background-color: #f6cf68; - border-radius: 10px; - margin-left: 1em; - padding-left: 1em; - padding-right: 1em; + background-color: #f6cf68; + border-radius: 10px; + margin-left: 1em; + padding-left: 1em; + padding-right: 1em; } table { - border-collapse: collapse; - display: block; - overflow-y: auto; - border: 1px var(--table-border-color) solid; + border-collapse: collapse; + display: block; + overflow-y: auto; + border: 1px var(--table-border-color) solid; } table td { - padding: 3px 20px; + padding: 3px 20px; } table thead { - background: var(--table-header-bg); - color: var(--table-header-fg); + background: var(--table-header-bg); + color: var(--table-header-fg); } table thead td { - font-weight: 700; + font-weight: 700; } table tbody tr:nth-child(2n) { - /* Alternate background colors for rows */ - background: var(--table-alternate-bg); + /* Alternate background colors for rows */ + background: var(--table-alternate-bg); } svg { - position: relative; - top: .125em; - width: 1em; - height: auto; + position: relative; + top: .125em; + width: 1em; + height: auto; } .hidden { - display: none; + display: none; } .icon-button { - border: none; - background: none; - cursor: pointer; - padding: 1em; + border: none; + background: none; + cursor: pointer; + padding: 1em; } /* void navigation */ #void-nav { - width: 100%; - min-height: 50px; - background: var(--nav-bg); - font-size: 14px; + width: 100%; + min-height: 50px; + background: var(--nav-bg); + font-size: 14px; - display: flex; - flex-direction: row; - flex-wrap: wrap; + display: flex; + flex-direction: row; + flex-wrap: wrap; } #void-nav a, #void-nav button, #void-nav label { - fill: var(--nav-fg); - height: 50px; - min-height: 100%; - display: block; - line-height: 50px; - padding: 0 15px; - font-size: 1.2em; + fill: var(--nav-fg); + height: 50px; + min-height: 100%; + display: block; + line-height: 50px; + padding: 0 15px; + font-size: 1.2em; } #void-nav ul { - list-style: none; - margin: 0; - padding: 0; + list-style: none; + margin: 0; + padding: 0; } #void-nav ul#nav-right { - margin-left: auto; + margin-left: auto; } #void-nav ul li { - display: inline-block; + display: inline-block; } #void-nav ul li a { - color: var(--nav-fg); - display: block; - padding: 0 15px; - line-height: 50px; - font-size: 1.2em; - text-decoration: none + color: var(--nav-fg); + display: block; + padding: 0 15px; + line-height: 50px; + font-size: 1.2em; + text-decoration: none } #void-nav ul li a:hover, #void-nav ul li a:focus, @@ -148,204 +163,200 @@ svg { #void-nav button:focus, #void-nav label:hover, #void-nav label:focus { - background: #000; + background: #000; } #skip-to-content { - position: absolute; - left: -999px; - top: -999px; + position: absolute; + left: -999px; + top: -999px; } #skip-to-content:active, #skip-to-content:focus { - position: relative; - left: 0; - top: 0; + position: relative; + left: 0; + top: 0; } #icon-theme-light { - display: var(--theme-toggle-light); + display: var(--theme-toggle-light); } #icon-theme-dark { - display: var(--theme-toggle-dark); + display: var(--theme-toggle-dark); } -/* sidebar */ - -.sidebar-hidden #sidebar { - display: none; -} -#sidebar { - padding: .5em; - background: var(--sidebar-bg); - font-size: 0.875em; -} -#sidebar ol { - list-style: none; - margin: 0; +.warning { + margin: 20px; + padding: 0 20px; + border-inline-start: 2px solid var(--warning-border); } -#sidebar ol.chapter { - padding: 0; - line-height: 2.2em; -} -#sidebar ol.section { - padding-left: 20px; - line-height: 1.9em; -} -#sidebar a { - color: var(--sidebar-fg); - display: block; -} -#sidebar a:hover { - color: var(--sidebar-active); - text-decoration: none; + +.warning:before { + position: absolute; + width: 3rem; + height: 3rem; + margin-inline-start: calc(-1.5rem - 21px); + content: "ⓘ"; + text-align: center; + background-color: var(--bg); + color: var(--warning-border); + font-weight: bold; + font-size: 2rem; } -#sidebar a.active { - display: block; - padding: 0.5em; - width: 100%; - background-color: var(--sidebar-active); - color: var(--bg); + +blockquote .warning:before { + background-color: var(--quote-bg); } -#sidebar a.active::after { - content: "" / " selected"; + +kbd { + background-color: var(--table-border-color); + border-radius: 4px; + border: solid 1px var(--theme-popup-border); + box-shadow: inset 0 -1px 0 var(--theme-hover); + display: inline-block; + font-size: var(--code-font-size); + font-family: var(--mono-font); + line-height: 10px; + padding: 4px 5px; + vertical-align: middle; } -#sidebar-toggle { - display: none; +sup { + /* Set the line-height for superscript and footnote references so that there + isn't an awkward space appearing above lines that contain the footnote. + + See https://github.com/rust-lang/mdBook/pull/2443#discussion_r1813773583 + for an explanation. + */ + line-height: 0; } /* search */ #searchbar { - width: 100%; - padding: 10px 16px; - margin: 5px 0; - border-radius: 3px; - border: 1px solid var(--searchbar-border-color); + width: 100%; + padding: 10px 16px; + margin: 5px 0; + border-radius: 3px; + border: 1px solid var(--searchbar-border-color); } #searchresults-header { - font-weight: bold; - font-size: 1em; - padding: 18px 0 0 5px; + font-weight: bold; + font-size: 1em; + padding: 18px 0 0 5px; } ul#searchresults { - list-style: none; - padding-left: 20px; + list-style: none; + padding-left: 20px; } ul#searchresults li { - margin: 10px 0px; - padding: 2px; - border-radius: 2px; + margin: 10px 0px; + padding: 2px; + border-radius: 2px; } ul#searchresults span.teaser { - display: block; - clear: both; - margin: 5px 0 0 20px; - font-size: 0.8em; + display: block; + clear: both; + margin: 5px 0 0 20px; + font-size: 0.8em; } /* chapter navigation */ -#nav-wide-wrapper { - max-width: 800px; - margin: 0 auto; - margin-top: 50px; -} .previous { - float: left; + float: left; } .next { - float: right; - right: 15px; + float: right; + right: 15px; } .nav-chapters { - fill: var(--nav-arrow-fg); - text-align: center; - text-decoration: none; - display: block; - max-width: 150px; - min-width: 90px; + fill: var(--nav-arrow-fg); + text-align: center; + text-decoration: none; + display: block; + max-width: 150px; + min-width: 90px; } .nav-chapters:hover { - text-decoration: none; - fill: var(--nav-fg-hover); + text-decoration: none; + fill: var(--nav-fg-hover); } .nav-chapters svg { - margin: 0 auto; - width: 1.5em; + margin: 0 auto; + width: 1.5em; } .mobile-nav-chapters { fill: var(--nav-arrow-fg); } .mobile-nav-chapters:hover { - fill: var(--nav-fg-hover); + fill: var(--nav-fg-hover); } /* layout */ body { - box-sizing: border-box; + box-sizing: border-box; } #content { - display: flex; - flex-direction: row; - width: 100%; + display: flex; + flex-direction: row; + width: 100%; } #page-wrapper { - --content-padding: 10px; - padding: 0 var(--content-padding); - width: calc(100% - var(--content-padding) * 2); + --content-padding: 10px; + padding: 0 var(--content-padding); + width: calc(100% - var(--content-padding) * 2); } #search-wrapper, #page-wrapper main { - width: 100%; - max-width: 800px; - margin: 0 auto; + width: 100%; + max-width: 800px; + margin: 0 auto; } #sidebar { - max-width: 300px; - flex-shrink: 0; + max-width: 300px; + flex-shrink: 0; } /* 300px + 800px + 2*90px + 15px */ @media only screen and (min-width: 1295px) { - .sidebar-visible #nav-wide-wrapper { - max-width: none; - margin: 0; - } - .sidebar-visible .nav-chapters { - background: none; - position: fixed; - top: 50px; - bottom: 0; - margin: 0; - justify-content: center; - align-content: center; - display: flex; - flex-direction: column; - } + .sidebar-visible #nav-wide-wrapper { + max-width: none; + margin: 0; + } + .sidebar-visible .nav-chapters { + background: none; + position: fixed; + top: 50px; + bottom: 0; + margin: 0; + justify-content: center; + align-content: center; + display: flex; + flex-direction: column; + } } /* 800px + 2*90px + 15px */ @media only screen and (min-width: 995px) { - .sidebar-hidden #nav-wide-wrapper { - max-width: none; - margin: 0; - } - .sidebar-hidden .nav-chapters { - background: none; - position: fixed; - top: 50px; - bottom: 0; - margin: 0; - justify-content: center; - align-content: center; - display: flex; - flex-direction: column; - } - table { - display: table; - } + .sidebar-hidden #nav-wide-wrapper { + max-width: none; + margin: 0; + } + .sidebar-hidden .nav-chapters { + background: none; + position: fixed; + top: 50px; + bottom: 0; + margin: 0; + justify-content: center; + align-content: center; + display: flex; + flex-direction: column; + } + table { + display: table; + } } diff --git a/src/theme/css/print.css b/src/theme/css/print.css index 2970c2b6..8921294f 100644 --- a/src/theme/css/print.css +++ b/src/theme/css/print.css @@ -8,8 +8,8 @@ } #page-wrapper.page-wrapper { - transform: none; - margin-left: 0px; + transform: none !important; + margin-inline-start: 0px; overflow-y: initial; } @@ -24,14 +24,10 @@ } code { + direction: ltr !important; background-color: #ddd; - border-radius: 5px; - - /* Force background to be printed in Chrome */ - -webkit-print-color-adjust: exact; } - pre { background-color: #ddd; @@ -76,4 +72,3 @@ table thead tr { table tbody tr { background-color: unset; } - diff --git a/src/theme/css/variables.css b/src/theme/css/variables.css index ea306bec..4ce5490e 100644 --- a/src/theme/css/variables.css +++ b/src/theme/css/variables.css @@ -2,106 +2,128 @@ /* Globals */ :root { - --sidebar-width: 300px; - --page-padding: 15px; - --content-max-width: 750px; - --menu-bar-height: 50px; - --void-green: #478061; - --void-dark-green: #62b086; - --void-light: #fafafa; - --void-dark: #252525; + --sidebar-width: 300px; + --sidebar-resize-indicator-width: 8px; + --sidebar-resize-indicator-space: 2px; + --page-padding: 15px; + --content-max-width: 750px; + --menu-bar-height: 50px; + --mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace; + --code-font-size: 0.875em /* please adjust the ace font size accordingly in editor.js */ + --void-green: #478061; + --void-dark-green: #62b086; + --void-light: #fafafa; + --void-dark: #252525; } /* Themes */ .void-light { - --bg: #ffffff; - --fg: #333; + --bg: #ffffff; + --fg: #333; - --sidebar-bg: var(--void-light); - --sidebar-fg: var(--fg); - --sidebar-active: var(--links); + --sidebar-bg: var(--void-light); + --sidebar-fg: var(--fg); + --sidebar-active: var(--links); - --nav-bg: var(--void-green); - --nav-fg: var(--bg); - --nav-arrow-fg: var(--fg); - --nav-fg-hover: #000; + --nav-bg: var(--void-green); + --nav-fg: var(--bg); + --nav-arrow-fg: var(--fg); + --nav-fg-hover: #000; - --scrollbar: var(--sidebar-fg); + --scrollbar: var(--sidebar-fg); - --icons: #737480; - --icons-hover: #b7b9cc; + --icons: #737480; + --icons-hover: #b7b9cc; - --links: var(--void-green); - --links-hover: var(--fg); + --links: var(--void-green); + --links-hover: var(--fg) - --inline-code-color: #fdf6e3; - --code-border: #ccc; + --inline-code-color: #fdf6e3; + --code-border: #ccc; - --theme-toggle-light: none; - --theme-toggle-dark: inherit; + --theme-toggle-light: none; + --theme-toggle-dark: inherit; - --quote-bg: #ebf4ef; - --quote-border: #d1e6da; - --quote-code-bg: var(--inline-code-color); + --quote-bg: #ebf4ef; + --quote-border: #d1e6da; + --quote-code-bg: var(--inline-code-color); - --table-border-color: var(--void-green); - --table-header-bg: var(--void-green); - --table-header-fg: #fff; - --table-alternate-bg: var(--void-light); + --warning-border: #ff8e00; - --searchbar-border-color: #aaa; - --searchbar-bg: var(--bg); - --searchbar-fg: var(--fg); - --searchbar-shadow-color: #d4c89f; - --searchresults-header-fg: #666; - --searchresults-border-color: #888; - --searchresults-li-bg: #252932; - --search-mark-bg: #e3b171; + --table-border-color: var(--void-green); + --table-header-bg: var(--void-green); + --table-header-fg: #fff; + --table-alternate-bg: var(--void-light); + + --searchbar-border-color: #aaa; + --searchbar-bg: var(--bg); + --searchbar-fg: var(--fg); + --searchbar-shadow-color: #d4c89f; + --searchresults-header-fg: #666; + --searchresults-border-color: #888; + --searchresults-li-bg: #252932; + --search-mark-bg: #e3b171; + + --color-scheme: light; + + /* Same as `--icons` */ + --copy-button-filter: invert(45%) sepia(6%) saturate(621%) hue-rotate(198deg) brightness(99%) contrast(85%); + /* Same as `--sidebar-active` */ + --copy-button-filter-hover: invert(68%) sepia(55%) saturate(531%) hue-rotate(341deg) brightness(104%) contrast(101%); } .void-dark { - --bg: #222; - --fg: #ccc; + --bg: #222; + --fg: #ccc; + + --sidebar-bg: #252525; + --sidebar-fg: var(--fg); + --sidebar-active: var(--links); + + --nav-bg: #295340; + --nav-fg: var(--fg); + --nav-arrow-fg: var(--fg); + --nav-fg-hover: #fff; + + --scrollbar: var(--sidebar-fg); - --sidebar-bg: #252525; - --sidebar-fg: var(--fg); - --sidebar-active: var(--links); + --icons: #737480; + --icons-hover: #b7b9cc; - --nav-bg: #295340; - --nav-fg: var(--fg); - --nav-arrow-fg: var(--fg); - --nav-fg-hover: #fff; + --links: var(--void-dark-green); + --links-hover: var(--fg); - --scrollbar: var(--sidebar-fg); + --inline-code-color: #353535; + --code-border: #111; - --icons: #737480; - --icons-hover: #b7b9cc; + --theme-toggle-light: inherit; + --theme-toggle-dark: none; - --links: var(--void-dark-green); - --links-hover: var(--fg); + --quote-bg: #293d35; + --quote-border: #22362e; + --quote-code-bg: #2a2a2a; - --inline-code-color: #353535; - --code-border: #111; + --warning-border: #ff8e00; - --theme-toggle-light: inherit; - --theme-toggle-dark: none; + --table-border-color: var(--void-green); + --table-header-bg: var(--void-green); + --table-header-fg: #fff; + --table-alternate-bg: #2c2c2c; - --quote-bg: #293d35; - --quote-border: #22362e; - --quote-code-bg: #2a2a2a; + --searchbar-border-color: #aaa; + --searchbar-bg: var(--bg); + --searchbar-fg: var(--fg); + --searchbar-shadow-color: #d4c89f; + --searchresults-header-fg: #666; + --searchresults-border-color: #888; + --searchresults-li-bg: #252932; + --search-mark-bg: #e3b171; - --table-border-color: var(--void-green); - --table-header-bg: var(--void-green); - --table-header-fg: #fff; - --table-alternate-bg: #2c2c2c; + --color-scheme: dark; - --searchbar-border-color: #aaa; - --searchbar-bg: var(--bg); - --searchbar-fg: var(--fg); - --searchbar-shadow-color: #d4c89f; - --searchresults-header-fg: #666; - --searchresults-border-color: #888; - --searchresults-li-bg: #252932; - --search-mark-bg: #e3b171; + /* Same as `--icons` */ + --copy-button-filter: invert(45%) sepia(6%) saturate(621%) hue-rotate(198deg) brightness(99%) contrast(85%); + /* Same as `--sidebar-active` */ + --copy-button-filter-hover: invert(68%) sepia(55%) saturate(531%) hue-rotate(341deg) brightness(104%) contrast(101%); } diff --git a/src/theme/index.hbs b/src/theme/index.hbs index 6090ed83..2c146da2 100644 --- a/src/theme/index.hbs +++ b/src/theme/index.hbs @@ -1,253 +1,258 @@ - - - - - {{ title }} - {{#if is_print }} - - {{/if}} - {{#if base_url}} - - {{/if}} - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- -
- - - - - -
- - - {{#if search_enabled}} - - {{/if}} - - - - -
- {{{ content }}} -
- - - - -
-
- - {{#if livereload}} - - - {{/if}} - - {{#if search_js}} - - - - {{/if}} - - - {{#if is_print}} - - {{/if}} - + + + + + {{ title }} + {{#if is_print }} + + {{/if}} + {{#if base_url}} + + {{/if}} + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + +
+ +
+ +
+
+ + {{#if search_enabled}} + + {{/if}} + + + + +
+ {{{ content }}} +
+ + + + +
+
+ + {{#if live_reload_endpoint}} + + + {{/if}} + + {{#if search_js}} + + + + {{/if}} + + + + {{#if is_print}} + + {{/if}} + +
+