diff --git a/docs/theme/css/chrome.css b/docs/theme/css/chrome.css index 0ec6d3f1bd..48e30e0990 100644 --- a/docs/theme/css/chrome.css +++ b/docs/theme/css/chrome.css @@ -3,14 +3,14 @@ @import "variables.css"; html { - background-color: rgb(246, 245, 240); - scrollbar-color: var(--scrollbar) var(--bg); + background-color: rgb(246, 245, 240); + scrollbar-color: var(--scrollbar) var(--bg); } #searchresults a, .content a:link, a:visited, a > .hljs { - color: var(--links); + color: var(--links); } /* @@ -18,103 +18,107 @@ a > .hljs { 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; + 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-block-end-color: var(--bg); - border-block-end-width: 1px; - border-block-end-style: solid; + padding: 16px; + 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; + 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-block-end-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; + height: 3rem; + width: 3rem; + z-index: 10; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: color 0.5s; } +#menu-bar .icon-button:hover { + background-color: hsl(219, 93%, 42%, 0.15); +} + @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-top: 24px; + display: flex; + align-items: center; } .right-buttons a { - text-decoration: none; + text-decoration: none; } .left-buttons { - display: flex; - margin: 0 5px; + display: flex; + align-items: center; + gap: 0.5rem; } .no-js .left-buttons button { - display: none; + 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-flex; + justify-content: center; + align-items: center; + flex: 1; + overflow: hidden; } .js .menu-title { - cursor: pointer; + cursor: pointer; } .menu-bar, @@ -125,191 +129,191 @@ 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; - background-color: var(--theme-hover); - transition: - background-color 0.15s, - color 0.15s; + text-decoration: none; + background-color: var(--theme-hover); + transition: + background-color 0.15s, + color 0.15s; } .nav-wrapper { - margin-block-start: 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); } /* Only Firefox supports flow-relative values */ .previous { - float: left; + float: left; } [dir="rtl"] .previous { - float: right; + 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); + 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"; + content: "\f105"; } [dir="rtl"] .next i.fa-angle-right:before { - content: "\f104"; + 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-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper { - display: none; - } - #sidebar-toggle-anchor:checked ~ .page-wrapper .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 { - background-color: white; - border: 1px rgba(8, 76, 207, 0.3) solid; - box-shadow: rgba(8, 76, 207, 0.07) 4px 4px 0px 0px; - position: relative; + background-color: white; + border: 1px rgba(8, 76, 207, 0.3) solid; + box-shadow: rgba(8, 76, 207, 0.07) 4px 4px 0px 0px; + position: relative; } pre > .hljs { - background-color: initial; + background-color: initial; } pre > .buttons { - position: absolute; - z-index: 100; - right: 0px; - top: 2px; - margin: 0px; - padding: 2px 0px; + 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; + 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; + visibility: visible; + opacity: 1; } pre > .buttons :hover { - color: var(--sidebar-active); - border-color: var(--icons-hover); - background-color: var(--theme-hover); + color: var(--sidebar-active); + border-color: var(--icons-hover); + background-color: var(--theme-hover); } pre > .buttons i { - margin-inline-start: 8px; + margin-inline-start: 8px; } pre > .buttons button { - cursor: inherit; - margin: 0px 5px; - padding: 3px 5px; - font-size: 14px; + cursor: inherit; + margin: 0px 5px; + padding: 3px 5px; + font-size: 14px; - 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); + 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); } @media (pointer: coarse) { - pre > .buttons button { - /* On mobile, make it easier to tap buttons. */ - padding: 0.3rem 1rem; - } + 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; - } + .sidebar-resize-indicator { + /* Hide resize indicator on devices with limited accuracy */ + display: none; + } } pre > code { - display: block; - padding: 1rem; + display: block; + padding: 1rem; } /* FIXME: ACE editors overlap their buttons because ACE does absolute @@ -318,355 +322,341 @@ pre > code { wrapper), but that would require fixing a whole bunch of CSS rules. */ .hljs.ace_editor { - padding: 0rem 0rem; + padding: 0rem 0rem; } pre > .result { - margin-block-start: 10px; + margin-block-start: 10px; } /* Search */ #searchresults a { - text-decoration: none; + 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; + 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-inline-start: auto; - margin-inline-end: 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-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); + 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-block-start: 18px; - padding-block-end: 0; - padding-inline-start: 5px; - padding-inline-end: 0; - 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-inline-start: auto; - margin-inline-end: auto; - max-width: var(--content-max-width); - border-block-end: 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-inline-start: 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-block-start: 5px; - margin-block-end: 0; - margin-inline-start: 20px; - margin-inline-end: 0; - 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); - border-right: 1px solid rgba(8, 76, 207, 0.2); + 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); + border-right: 1px solid hsl(219, 93%, 42%, 0.15); } [dir="rtl"] .sidebar { - left: unset; - right: 0; + 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; } .no-js .sidebar, .js:not(.sidebar-resizing) .sidebar { - transition: transform 0.3s; /* Animation: slide away */ + transition: transform 0.3s; /* Animation: slide away */ } .sidebar code { - line-height: 2em; + line-height: 2em; } .sidebar .sidebar-scrollbox { - overflow-y: auto; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - padding: 10px 10px; - margin-left: 40px; + overflow-y: auto; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + padding: 12px 12px 12px 24px; } .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; + 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); + 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; + 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) - ); + 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; + 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)) - ); + 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)) - ); + 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)) - ); + 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; - } + #sidebar-toggle-anchor:checked ~ .page-wrapper { + transform: none; + margin-inline-start: var(--sidebar-width); + } + [dir="rtl"] #sidebar-toggle-anchor:checked ~ .page-wrapper { + transform: none; + } } .chapter { - list-style: none outside none; - padding-inline-start: 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); - background-color: rgba(8, 76, 207, 0.1); + color: var(--sidebar-active); + background-color: rgba(8, 76, 207, 0.1); } .chapter li > a.toggle { - cursor: pointer; - display: block; - margin-inline-start: 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-block-start: 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-inline-start: 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; - /* Don't let the children's background extend past the rounded corners. */ - overflow: hidden; + 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; + left: unset; + right: 10px; } .theme-popup .default { - color: var(--icons); + color: var(--icons); } .theme-popup .theme { - 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; + 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-selected::before { - display: inline-block; - content: "✓"; - margin-inline-start: -14px; - width: 14px; + display: inline-block; + content: "✓"; + margin-inline-start: -14px; + width: 14px; } .download-button { - background: #dde4f1; - color: var(--link-color); - padding: 4px 8px; - border: 1px solid #a8bee9; - font-size: 14px; + background: #dde4f1; + color: var(--link-color); + padding: 4px 8px; + border: 1px solid #a8bee9; + font-size: 14px; } diff --git a/docs/theme/css/general.css b/docs/theme/css/general.css index 38d1d91962..f504563fa6 100644 --- a/docs/theme/css/general.css +++ b/docs/theme/css/general.css @@ -3,43 +3,43 @@ @import "variables.css"; :root { - /* Browser default font-size is 16px, this way 1 rem = 10px */ - font-size: 62.5%; - color-scheme: var(--color-scheme); + /* Browser default font-size is 16px, this way 1 rem = 10px */ + font-size: 62.5%; + color-scheme: var(--color-scheme); } html { - font-family: var(--font); - color: var(--fg); - background-color: var(--bg); - text-size-adjust: none; - -webkit-text-size-adjust: none; + font-family: var(--font); + color: var(--fg); + background-color: var(--bg); + text-size-adjust: none; + -webkit-text-size-adjust: none; - text-rendering: geometricPrecision !important; - -webkit-font-smoothing: antialiased !important; - text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.005); + text-rendering: geometricPrecision !important; + -webkit-font-smoothing: antialiased !important; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.005); } body { - margin: 0; - font-size: 1.6rem; - overflow-x: hidden; + margin: 0; + font-size: 1.6rem; + overflow-x: hidden; } code { - font-family: var(--mono-font) !important; - font-size: var(--code-font-size); - direction: ltr !important; + font-family: var(--mono-font) !important; + font-size: var(--code-font-size); + direction: ltr !important; } /* make long words/inline code not x overflow */ main { - overflow-wrap: break-word; + overflow-wrap: break-word; } /* make wide tables scroll if they overflow */ .table-wrapper { - overflow-x: auto; + overflow-x: auto; } h1, @@ -48,9 +48,9 @@ h3, h4, h5, h6 { - font-family: var(--title-font); - font-weight: normal; - color: var(--title-color); + font-family: var(--title-font); + font-weight: normal; + color: var(--title-color); } /* Don't change font size in headers. */ @@ -60,38 +60,39 @@ h3 code, h4 code, h5 code, h6 code { - font-size: unset; + font-size: unset; } .left { - float: left; + float: left; } .right { - float: right; + float: right; } .boring { - opacity: 0.6; + opacity: 0.6; } .hide-boring .boring { - display: none; + display: none; } .hidden { - display: none !important; + display: none !important; } h2, h3 { - margin-block-start: 2.5em; + margin-block-start: 2em; + margin-block-end: 0; } h4, h5 { - margin-block-start: 2em; + margin-block-start: 2em; } .header + .header h3, .header + .header h4, .header + .header h5 { - margin-block-start: 1em; + margin-block-start: 1em; } h1:target::before, @@ -100,10 +101,10 @@ h3:target::before, h4:target::before, h5:target::before, h6:target::before { - display: inline-block; - content: "»"; - margin-inline-start: -30px; - width: 30px; + display: inline-block; + content: "»"; + margin-inline-start: -30px; + width: 30px; } /* This is broken on Safari as of version 14, but is fixed @@ -111,187 +112,184 @@ h6:target::before { https://bugs.webkit.org/show_bug.cgi?id=218076 */ :target { - /* Safari does not support logical properties */ - scroll-margin-top: calc(var(--menu-bar-height) + 0.5em); + /* Safari does not support logical properties */ + scroll-margin-top: calc(var(--menu-bar-height) + 0.5em); } .page { - outline: 0; - padding: 0 var(--page-padding); - margin-block-start: calc( - 0px - var(--menu-bar-height) - ); /* Compensate for the #menu-bar-hover-placeholder */ + 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); + box-sizing: border-box; + background-color: var(--bg); } .no-js .page-wrapper, .js:not(.sidebar-resizing) .page-wrapper { - transition: - margin-left 0.3s ease, - transform 0.3s ease; /* Animation: slide away */ + transition: + margin-left 0.3s ease, + transform 0.3s ease; /* Animation: slide away */ } [dir="rtl"] .js:not(.sidebar-resizing) .page-wrapper { - transition: - margin-right 0.3s ease, - transform 0.3s ease; /* Animation: slide away */ + transition: + margin-right 0.3s ease, + transform 0.3s ease; /* Animation: slide away */ } .content { - overflow-y: auto; - padding: 0 5px 50px 5px; + overflow-y: auto; + padding: 24px 4px 48px 4px; } .content main { - margin-inline-start: auto; - margin-inline-end: auto; - max-width: var(--content-max-width); + margin-inline-start: auto; + margin-inline-end: auto; + max-width: var(--content-max-width); } .content p { - line-height: 1.625em; + line-height: 1.625em; } .content ol { - line-height: 1.625em; + line-height: 1.625em; } .content ul { - line-height: 1.625em; + line-height: 1.625em; } .content a { - text-decoration: none; + text-decoration: underline; + text-decoration-color: hsl(219, 93%, 42%, 0.2); } .content a:hover { - text-decoration: underline; + text-decoration-color: hsl(219, 93%, 42%, 0.5); } .content img, .content video { - max-width: 100%; + max-width: 100%; } .content .header:link, .content .header:visited { - color: var(--title-color); + color: var(--title-color); } .content .header:link, .content .header:visited:hover { - text-decoration: none; + text-decoration: none; } table { - margin: 0 auto; - border-collapse: collapse; + margin: 0 auto; + border-collapse: collapse; } table td { - padding: 3px 20px; - border: 1px var(--table-border-color) solid; + padding: 3px 20px; + border: 1px var(--table-border-color) solid; } table thead { - background: var(--table-header-bg); + background: var(--table-header-bg); } table thead td { - font-weight: 700; - border: none; + font-weight: 700; + border: none; } table thead th { - padding: 3px 20px; + padding: 3px 20px; } table thead tr { - border: 1px var(--table-header-bg) solid; + border: 1px var(--table-header-bg) solid; } /* Alternate background colors for rows */ table tbody tr:nth-child(2n) { - background: var(--table-alternate-bg); + background: var(--table-alternate-bg); } blockquote { - margin: 20px 0; - padding: 0 20px; - color: var(--fg); - background-color: var(--quote-bg); - border-block-start: 0.1em solid var(--quote-border); - border-block-end: 0.1em solid var(--quote-border); + margin: 20px 0; + padding: 0 20px; + color: var(--fg); + background-color: var(--quote-bg); + border-block-start: 0.1em solid var(--quote-border); + border-block-end: 0.1em solid var(--quote-border); } .warning { - margin: 20px; - padding: 0 20px; - border-inline-start: 2px solid var(--warning-border); + margin: 20px; + padding: 0 20px; + border-inline-start: 2px solid var(--warning-border); } .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; + 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; } blockquote .warning:before { - background-color: var(--quote-bg); + background-color: var(--quote-bg); } kbd { - background-color: rgba(8, 76, 207, 0.1); - 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; + background-color: rgba(8, 76, 207, 0.1); + 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; } :not(.footnote-definition) + .footnote-definition, .footnote-definition + :not(.footnote-definition) { - margin-block-start: 2em; + margin-block-start: 2em; } .footnote-definition { - font-size: 0.9em; - margin: 0.5em 0; + font-size: 0.9em; + margin: 0.5em 0; } .footnote-definition p { - display: inline; + display: inline; } .tooltiptext { - position: absolute; - visibility: hidden; - color: #fff; - background-color: #333; - transform: translateX( - -50% - ); /* Center by moving tooltip 50% of its width left */ - left: -8px; /* Half of the width of the icon */ - top: -35px; - font-size: 0.8em; - text-align: center; - border-radius: 6px; - padding: 5px 8px; - margin: 5px; - z-index: 1000; + position: absolute; + visibility: hidden; + color: #fff; + background-color: #333; + transform: translateX(-50%); /* Center by moving tooltip 50% of its width left */ + left: -8px; /* Half of the width of the icon */ + top: -35px; + font-size: 0.8em; + text-align: center; + border-radius: 6px; + padding: 5px 8px; + margin: 5px; + z-index: 1000; } .tooltipped .tooltiptext { - visibility: visible; + visibility: visible; } .chapter li.part-title { - font-size: 20px; - font-family: var(--title-font); - color: var(--title-color); - margin: 5px 0px; - margin-top: 3rem; + font-size: 18px; + font-family: var(--title-font); + color: var(--title-color); + margin: 5px 0; + margin-top: 2rem; } .result-no-output { - font-style: italic; + font-style: italic; } code.hljs { - color: rgb(75, 83, 97) !important; - background-color: rgba(8, 76, 207, 0.1); + color: rgb(75, 83, 97) !important; + background-color: rgba(8, 76, 207, 0.1); } diff --git a/docs/theme/css/variables.css b/docs/theme/css/variables.css index bee8301adf..cf8248ff60 100644 --- a/docs/theme/css/variables.css +++ b/docs/theme/css/variables.css @@ -1,58 +1,56 @@ /* Globals */ :root { - --sidebar-width: 300px; - --sidebar-resize-indicator-width: 8px; - --sidebar-resize-indicator-space: 2px; - --page-padding: 15px; - --content-max-width: 750px; - --menu-bar-height: 50px; - --font: "IA Writer Quattro S", sans-serif; - --title-font: "Agrandir", "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 */; + --sidebar-width: 300px; + --sidebar-resize-indicator-width: 0px; + --sidebar-resize-indicator-space: 2px; + --page-padding: 15px; + --content-max-width: 750px; + --menu-bar-height: 50px; + --font: "IA Writer Quattro S", sans-serif; + --title-font: "Agrandir", "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 */; - --bg: rgb(246, 245, 240); - --fg: rgb(75, 83, 97); - --title-color: rgb(8, 76, 207); + --bg: rgb(246, 245, 240); + --fg: rgb(75, 83, 97); + --title-color: rgb(8, 76, 207); - --sidebar-fg: hsl(0, 0%, 0%); - --sidebar-non-existant: #aaaaaa; - --sidebar-active: rgb(8, 76, 207); - --sidebar-spacer: #f4f4f4; + --sidebar-fg: hsl(0, 0%, 0%); + --sidebar-non-existant: #aaaaaa; + --sidebar-active: rgb(8, 76, 207); + --sidebar-spacer: #f4f4f4; - --scrollbar: #8f8f8f; + --scrollbar: #8f8f8f; - --icons: #747474; - --icons-hover: #000000; + --icons: #747474; + --icons-hover: #000000; - --links: rgb(8, 76, 207); + --links: rgb(8, 76, 207); - --inline-code-color: #301900; + --inline-code-color: #301900; - --theme-popup-bg: #fafafa; - --theme-popup-border: #cccccc; - --theme-hover: #e6e6e6; + --theme-popup-bg: #fafafa; + --theme-popup-border: #cccccc; + --theme-hover: #e6e6e6; - --quote-bg: hsl(197, 37%, 96%); - --quote-border: hsl(197, 37%, 91%); + --quote-bg: hsl(197, 37%, 96%); + --quote-border: hsl(197, 37%, 91%); - --warning-border: #ff8e00; + --warning-border: #ff8e00; - --table-border-color: hsl(0, 0%, 95%); - --table-header-bg: hsl(0, 0%, 80%); - --table-alternate-bg: hsl(0, 0%, 97%); + --table-border-color: hsl(219, 93%, 42%, 0.15); + --table-header-bg: hsl(0, 0%, 80%); + --table-alternate-bg: hsl(0, 0%, 97%); - --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; + --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; - --color-scheme: light; + --color-scheme: light; } diff --git a/docs/theme/index.hbs b/docs/theme/index.hbs index 0c8e7626f4..a1cdde6bac 100644 --- a/docs/theme/index.hbs +++ b/docs/theme/index.hbs @@ -124,7 +124,7 @@ {{> header}}