theme/css/chrome.css

/* Part of the Crubit project, under the Apache License v2.0 with LLVM
 * Exceptions. See /LICENSE for license information.
 * SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
 */
/* CSS for UI elements (a.k.a. chrome) */

html {
    scrollbar-color: var(--scrollbar) transparent;
}
#mdbook-searchresults a,
.content a:link,
a:visited,
a > .hljs {
    color: var(--links);
}

/*
    mdbook-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.
*/
#mdbook-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 */

#mdbook-menu-bar,
#mdbook-menu-bar-hover-placeholder {
    z-index: 101;
    margin: auto calc(0px - var(--page-padding));
}
#mdbook-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;
}
#mdbook-menu-bar.sticky,
#mdbook-menu-bar-hover-placeholder:hover + #mdbook-menu-bar,
#mdbook-menu-bar:hover,
html.sidebar-visible #mdbook-menu-bar {
    position: -webkit-sticky;
    position: sticky;
    top: 0 !important;
}
#mdbook-menu-bar-hover-placeholder {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    height: var(--menu-bar-height);
}
#mdbook-menu-bar.bordered {
    border-block-end-color: var(--table-border-color);
}
#mdbook-menu-bar .fa-svg, #mdbook-menu-bar .icon-button {
    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) {
    #mdbook-menu-bar .fa-svg, #mdbook-menu-bar .icon-button {
        padding: 0 5px;
    }
}

.icon-button {
    border: none;
    background: none;
    padding: 0;
    color: inherit;
}
.icon-button .fa-svg {
    margin: 0;
}

.right-buttons {
    margin: 0 15px;
}
.right-buttons a {
    text-decoration: none;
}

.left-buttons {
    display: flex;
    margin: 0 5px;
}
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;
}
.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 .fa-svg {
    color: var(--icons);
}

.menu-bar .fa-svg:hover,
.menu-bar .icon-button:hover,
.nav-chapters:hover,
.mobile-nav-chapters .fa-svg:hover {
    color: var(--icons-hover);
}

/* Nav Icons */

.nav-chapters {
    font-size: 2.5em;
    text-align: center;
    text-decoration: none;

    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;

    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;
}

.nav-wrapper {
    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);
}

/* 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);
}
[dir=rtl] .next {
    float: left;
    right: unset;
    left: var(--page-padding);
}

@media only screen and (max-width: 1080px) {
    .nav-wide-wrapper { display: none; }
    .nav-wrapper { display: block; }
}

/* sidebar-visible */
@media only screen and (max-width: 1380px) {
    #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper { display: none; }
    #mdbook-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;
}

:not(pre):not(a) > .hljs {
    color: var(--inline-code-color);
    overflow-x: initial;
}

a:hover > .hljs {
    text-decoration: underline;
}

pre {
    position: relative;
}
pre > .buttons {
    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);
    border-color: var(--icons-hover);
    background-color: var(--theme-hover);
}
pre > .buttons button {
    cursor: inherit;
    margin: 0px 5px;
    padding: 2px 3px 0px 4px;
    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,<svg width="21" height="20" viewBox="0 0 24 25" \
xmlns="http://www.w3.org/2000/svg" aria-label="Copy to clipboard">\
<path d="M18 20h2v3c0 1-1 2-2 2H2c-.998 0-2-1-2-2V5c0-.911.755-1.667 1.667-1.667h5A3.323 3.323 0 \
0110 0a3.323 3.323 0 013.333 3.333h5C19.245 3.333 20 4.09 20 5v8.333h-2V9H2v14h16v-3zM3 \
7h14c0-.911-.793-1.667-1.75-1.667H13.5c-.957 0-1.75-.755-1.75-1.666C11.75 2.755 10.957 2 10 \
2s-1.75.755-1.75 1.667c0 .911-.793 1.666-1.75 1.666H4.75C3.793 5.333 3 6.09 3 7z"/>\
<path d="M4 19h6v2H4zM12 11H4v2h8zM4 17h4v-2H4zM15 15v-3l-4.5 4.5L15 21v-3l8.027-.032L23 15z"/>\
</svg>');
    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;
    }
}
pre > code {
    display: block;
    padding: 1rem;
}

/* 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-block-start: 10px;
}

/* Search */

#mdbook-searchresults a {
    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;
}

mark.fade-out {
    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);
}

#mdbook-searchbar-outer.searching #mdbook-searchbar {
    padding-right: 30px;
}
#mdbook-searchbar-outer .spinner-wrapper {
    display: none;
}
#mdbook-searchbar-outer.searching .spinner-wrapper {
    display: block;
}

.search-wrapper {
    position: relative;
}

.spinner-wrapper {
    --spinner-margin: 2px;
    position: absolute;
    margin-block-start: calc(var(--searchbar-margin-block-start) + var(--spinner-margin));
    right: var(--spinner-margin);
    top: 0;
    bottom: var(--spinner-margin);
    padding: 6px;
    background-color: var(--bg);
}

#fa-spin {
    animation: rotating 2s linear infinite;
    display: inline-block;
}

@keyframes rotating {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#mdbook-searchbar {
    width: 100%;
    margin-block-start: var(--searchbar-margin-block-start);
    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);
}
#mdbook-searchbar:focus,
#mdbook-searchbar.active {
    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);
}

.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);
}

ul#mdbook-searchresults {
    list-style: none;
    padding-inline-start: 20px;
}
ul#mdbook-searchresults li {
    margin: 10px 0px;
    padding: 2px;
    border-radius: 2px;
}
ul#mdbook-searchresults li.focus {
    background-color: var(--searchresults-li-bg);
}
ul#mdbook-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;
}
ul#mdbook-searchresults span.teaser em {
    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);
}
.sidebar-iframe-inner {
    --padding: 10px;

    background-color: var(--sidebar-bg);
    padding: var(--padding);
    margin: 0;
    font-size: 1.4rem;
    color: var(--sidebar-fg);
    min-height: calc(100vh - var(--padding) * 2);
}
.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;
}
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;
}
.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;
}

.sidebar-resize-handle .sidebar-resize-indicator {
    width: 100%;
    height: 16px;
    color: var(--icons);
    margin-inline-start: var(--sidebar-resize-indicator-space);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.sidebar-resize-handle .sidebar-resize-indicator::before {
    content: "";
    width: 2px;
    height: 12px;
    border-left: dotted 2px currentColor;
}
.sidebar-resize-handle .sidebar-resize-indicator::after {
    content: "";
    width: 2px;
    height: 16px;
    border-left: dotted 2px currentColor;
}

[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: calc(var(--sidebar-resize-indicator-width) - var(--sidebar-resize-indicator-space));
}

html:not(.js) .sidebar-resize-handle {
    display: none;
}

/* sidebar-hidden */
#mdbook-sidebar-toggle-anchor:not(:checked) ~ .sidebar {
    transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
}
[dir=rtl] #mdbook-sidebar-toggle-anchor:not(:checked) ~ .sidebar {
    transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)));
}
.sidebar::-webkit-scrollbar {
    background: var(--sidebar-bg);
}
.sidebar::-webkit-scrollbar-thumb {
    background: var(--scrollbar);
}

/* sidebar-visible */
#mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
    transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)));
}
[dir=rtl] #mdbook-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) {
    #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
        transform: none;
        margin-inline-start: calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width));
    }
    [dir=rtl] #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
        transform: none;
    }
}

.chapter {
    list-style: none outside none;
    padding-inline-start: 0;
    line-height: 2.2em;
}

.chapter li {
    color: var(--sidebar-non-existant);
}

/* This is a span wrapping the chapter link and the fold chevron. */
.chapter-link-wrapper {
    /* Used to position the chevron to the right, allowing the text to wrap before it. */
    display: flex;
}

.chapter li a {
    /* Remove underlines. */
    text-decoration: none;
    color: var(--sidebar-fg);
}

.chapter li a:hover {
    color: var(--sidebar-active);
}

.chapter li a.active {
    color: var(--sidebar-active);
}

/* This is the toggle chevron. */
.chapter-fold-toggle {
    cursor: pointer;
    /* Positions the chevron to the side. */
    margin-inline-start: auto;
    padding: 0 10px;
    user-select: none;
    opacity: 0.68;
}

.chapter-fold-toggle div {
    transition: transform 0.5s;
}

/* collapse the section */
.chapter li:not(.expanded) > ol {
    display: none;
}

.chapter li.chapter-item {
    line-height: 1.5em;
    margin-block-start: 0.6em;
}

/* When expanded, rotate the chevron to point down. */
.chapter li.expanded > span > .chapter-fold-toggle div {
    transform: rotate(90deg);
}

.chapter a.current-header {
    color: var(--sidebar-active);
}

.on-this-page {
    margin-left: 22px;
    border-inline-start: 4px solid var(--sidebar-header-border-color);
    padding-left: 8px;
}

.on-this-page > ol {
    padding-left: 0;
}

/* Horizontal line in chapter list. */
.spacer {
    width: 100%;
    height: 3px;
    margin: 5px 0px;
}
.chapter .spacer {
    background-color: var(--sidebar-spacer);
}

/* On touch devices, add more vertical spacing to make it easier to tap links. */
@media (-moz-touch-enabled: 1), (pointer: coarse) {
    .chapter li a { padding: 5px 0; }
    .spacer { margin: 10px 0; }
}

.section {
    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;
}
[dir=rtl] .theme-popup { left: unset;  right: 10px; }
.theme-popup .default {
    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;
}
.theme-popup .theme:hover {
    background-color: var(--theme-hover);
}

.theme-selected::before {
    display: inline-block;
    content: "✓";
    margin-inline-start: -14px;
    width: 14px;
}

/* The container for the help popup that covers the whole window. */
#mdbook-help-container {
    /* Position and size for the whole window. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* This uses flex layout (which is set in book.js), and centers the popup
       in the window.*/
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    /* Dim out the book while the popup is visible. */
    background: var(--overlay-bg);
}

/* The popup help box. */
#mdbook-help-popup {
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    min-width: 300px;
    max-width: 500px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--bg);
    color: var(--fg);
    border-width: 1px;
    border-color: var(--theme-popup-border);
    border-style: solid;
    border-radius: 8px;
    padding: 10px;
}

.mdbook-help-title {
    text-align: center;
    /* mdbook's margin for h2 is way too large. */
    margin: 10px;
}