zoitechat/docs/_static/css/zoitechat-docs.css

/* SPDX-License-Identifier: GPL-2.0-or-later */
/* Keep the docs close to the desktop client and the main project's website. */
:root {
    color-scheme: light;
    --page: #ffffff;
    --panel: #f1f2f3;
    --text: #25282c;
    --muted: #58616b;
    --line: #bdc3c9;
    --soft-line: #dce0e4;
    --blue: #215a9e;
    --link: #174f92;
    --selection: #e6effa;
    --code: #f2f4f6;
    --comment: #58616b;
    --string: #236741;
    --number: #7842ab;
    --font: system-ui, -apple-system, "Segoe UI", "DejaVu Sans", sans-serif;
    --mono: Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --page: #191c1f;
    --panel: #25292d;
    --text: #eef0f2;
    --muted: #b2bbc4;
    --line: #50575e;
    --soft-line: #353c43;
    --blue: #2865a8;
    --link: #8dc0ff;
    --selection: #233951;
    --code: #111518;
    --comment: #b2bbc4;
    --string: #92d5ab;
    --number: #dfacff;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --page: #191c1f;
        --panel: #25292d;
        --text: #eef0f2;
        --muted: #b2bbc4;
        --line: #50575e;
        --soft-line: #353c43;
        --blue: #2865a8;
        --link: #8dc0ff;
        --selection: #233951;
        --code: #111518;
        --comment: #b2bbc4;
        --string: #92d5ab;
        --number: #dfacff;
    }
}

* {
    box-sizing: border-box;
}

html {
    scroll-padding-top: 16px;
}

body {
    margin: 0;
    padding: 0;
    background: var(--page);
    color: var(--text);
    font: 14px/1.7 var(--font);
}

a,
a:visited {
    color: var(--link);
    text-underline-offset: 3px;
}

a:hover {
    text-decoration: underline;
}

:focus-visible {
    outline: 3px solid var(--link);
    outline-offset: 3px;
}

[hidden] {
    display: none !important;
}

button,
input,
select {
    font: inherit;
}

button,
summary,
select {
    touch-action: manipulation;
}

button,
summary {
    cursor: pointer;
}

img {
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4 {
    color: var(--text);
    font-family: var(--font);
    font-weight: 600;
    line-height: 1.35;
}

h1 {
    margin: 0 0 20px;
    font-size: 28px;
    letter-spacing: -0.5px;
}

h2 {
    margin: 28px 0 12px;
    font-size: 21px;
}

h3 {
    margin: 22px 0 10px;
    font-size: 17px;
}

h4 {
    font-size: 15px;
}

p {
    margin: 0 0 15px;
}

input,
select,
button {
    min-height: 34px;
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 6px 9px;
    background: var(--page);
    color: var(--text);
}

input[type="submit"],
button {
    background: var(--panel);
}

input[type="submit"]:hover,
button:hover {
    background: var(--selection);
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 15px;
    z-index: 10;
    padding: 10px;
    background: var(--page);
}

.skip-link:focus {
    top: 10px;
}

.site-header,
.docs-layout,
.site-footer {
    width: min(1200px, calc(100% - 48px));
    margin-inline: auto;
}

.site-header {
    padding-top: 32px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 16px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text) !important;
    text-decoration: none;
}

.brand img {
    display: block;
    width: 38px;
    height: 42px;
}

.brand strong {
    font-size: 28px;
    font-weight: 650;
    letter-spacing: -0.8px;
}

.appearance {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 11px;
}

.appearance select {
    min-height: 30px;
    padding: 3px 7px;
    font-size: 12px;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    border: 1px solid var(--line);
    background: var(--panel);
}

.site-nav > a,
.support-menu > summary {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 6px 15px;
    color: var(--text);
    font-size: 13px;
    text-decoration: none;
}

.site-nav > a:hover,
.support-menu > summary:hover {
    background: var(--selection);
    color: var(--link);
}

.site-nav > a.selected {
    background: var(--blue);
    color: #ffffff;
}

.support-menu {
    position: relative;
}

.support-menu > summary {
    list-style: none;
}

.support-menu > summary::after {
    content: "⌄";
    margin-left: 8px;
}

.support-menu > summary::-webkit-details-marker {
    display: none;
}

.support-links {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 5;
    min-width: 235px;
    padding: 5px;
    border: 1px solid var(--line);
    background: var(--page);
}

.support-links a {
    display: block;
    padding: 10px 12px;
    text-decoration: none;
}

.support-links a:hover {
    background: var(--selection);
}

.support-links small {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.docs-location {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 20px;
    margin-top: 12px;
    color: var(--muted);
    font-size: 11px;
}

.docs-location nav {
    min-width: 0;
    overflow-wrap: anywhere;
}

.docs-location nav > span {
    margin-inline: 5px;
}

.docs-version {
    flex-shrink: 0;
    font-family: var(--mono);
}

.docs-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: start;
    gap: 36px;
    padding-block: 26px 30px;
}

.docs-layout.no-sidebar {
    display: block;
}

.docs-sidebar {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow: auto;
    padding-right: 15px;
    border-right: 1px solid var(--soft-line);
    font-size: 13px;
}

.docs-navigation > summary {
    margin-bottom: 14px;
    padding: 5px 0;
    color: var(--text);
    font-weight: 600;
}

.docs-sidebar h2,
.docs-sidebar h3 {
    margin: 20px 0 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    letter-spacing: 0;
}

.docs-sidebar ul {
    margin: 0;
    padding-left: 17px;
    list-style: none;
}

.docs-sidebar nav > ul {
    padding-left: 0;
}

.docs-sidebar li {
    margin: 5px 0;
    line-height: 1.55;
}

.docs-sidebar li.current > a,
.docs-sidebar a.current {
    font-weight: 600;
}

.docs-sidebar .current > a {
    text-decoration-thickness: 2px;
}

.docs-search > label {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 11px;
}

.search-inputs {
    display: flex;
    align-items: stretch;
    gap: 5px;
}

.search-inputs input {
    width: 100%;
    min-width: 0;
    font-size: 12px;
}

.search-inputs button {
    flex-shrink: 0;
    padding-inline: 7px;
    font-size: 11px;
}

.docs-content {
    min-width: 0;
    overflow-wrap: break-word;
}

.docs-content > :first-child,
.docs-content > section:first-child > :first-child {
    margin-top: 0;
}

.docs-content li {
    margin-bottom: 5px;
}

.docs-content dl {
    margin-bottom: 20px;
}

.docs-content dt {
    margin-top: 14px;
    color: var(--text);
}

.docs-content dd {
    margin-left: 24px;
}

.docs-content code,
.docs-content pre,
.docs-content kbd {
    font-family: var(--mono);
    font-size: 0.9em;
}

.docs-content code.literal {
    padding: 1px 4px;
    border: 1px solid var(--soft-line);
    background: var(--code);
}

.docs-content pre {
    margin: 0;
    white-space: pre;
    line-height: 1.7;
}

.docs-content .highlight,
.docs-content .literal-block {
    max-width: 100%;
    margin: 16px 0;
    padding: 14px;
    overflow-x: auto;
    border: 1px solid var(--line);
    background: var(--code);
    color: var(--text);
}

.highlight pre {
    background: transparent;
}

.highlight span {
    color: var(--text) !important;
}

.highlight .k,
.highlight .kc,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt,
.highlight .o,
.highlight .ow,
.highlight .nb,
.highlight .nf {
    color: var(--link) !important;
}

.highlight .c,
.highlight .c1,
.highlight .cm,
.highlight .cp,
.highlight .cs,
.highlight .sd {
    color: var(--comment) !important;
}

.highlight .s,
.highlight .s1,
.highlight .s2,
.highlight .sa,
.highlight .sb,
.highlight .sc,
.highlight .se,
.highlight .sh,
.highlight .si,
.highlight .sr,
.highlight .ss {
    color: var(--string) !important;
}

.highlight .m,
.highlight .mb,
.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .mo,
.highlight .il {
    color: var(--number) !important;
}

table.docutils,
table.indextable,
table.genindextable {
    width: 100%;
    margin: 16px 0;
    border-collapse: collapse;
    font-size: 13px;
}

table.docutils th,
table.docutils td {
    padding: 9px 12px;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

table.docutils th {
    background: var(--panel);
}

table.docutils tbody tr:nth-child(even) {
    background: var(--panel);
}

table.genindextable td,
table.indextable td {
    vertical-align: top;
}

.docs-content .admonition,
.docs-content .topic,
.docs-content .sidebar {
    float: none;
    width: auto;
    margin: 18px 0;
    padding: 12px 16px;
    border: 1px solid var(--soft-line);
    border-left: 3px solid var(--blue);
    background: var(--panel);
    color: var(--text);
}

.docs-content .admonition-title,
.docs-content .topic-title,
.docs-content .sidebar-title {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
}

.docs-content .admonition > :last-child,
.docs-content .topic > :last-child {
    margin-bottom: 0;
}

.docs-content img,
.docs-content .figure {
    max-width: 100%;
}

.docs-content img {
    height: auto;
}

.docs-content .figure {
    margin-inline: 0;
}

.docs-content .caption {
    color: var(--muted);
    font-size: 12px;
}

a.headerlink {
    padding-left: 6px;
    color: var(--muted);
    font-size: 0.8em;
    text-decoration: none;
    visibility: hidden;
}

h1:hover > .headerlink,
h2:hover > .headerlink,
h3:hover > .headerlink,
h4:hover > .headerlink,
dt:hover > .headerlink,
a.headerlink:focus-visible {
    visibility: visible;
}

.highlighted {
    background: var(--selection);
    color: var(--text);
}

.page-relations {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 13px;
}

.page-relations > div {
    max-width: 46%;
}

.page-relations > div:last-child {
    margin-left: auto;
    text-align: right;
}

.page-relations small {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 20px;
    padding: 17px 0 28px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 11px;
}

.site-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 16px;
}

@media (max-width: 1000px) {
    .docs-layout {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 26px;
    }

    .site-nav > a,
    .support-menu > summary {
        padding-inline: 10px;
    }
}

@media (max-width: 760px) {
    .site-header,
    .docs-layout,
    .site-footer {
        width: calc(100% - 30px);
    }

    .site-header {
        padding-top: 18px;
    }

    .brand strong {
        font-size: 25px;
    }

    .brand img {
        width: 32px;
        height: 36px;
    }

    .appearance > span {
        display: none;
    }

    .site-nav > a,
    .support-menu > summary {
        min-height: 38px;
        padding: 7px 9px;
        font-size: 12px;
    }

    .docs-layout {
        display: block;
        padding-top: 18px;
    }

    .docs-sidebar {
        position: static;
        max-height: none;
        margin-bottom: 23px;
        padding: 0;
        border: 0;
    }

    .docs-navigation {
        padding: 7px 12px;
        border: 1px solid var(--line);
        background: var(--panel);
    }

    .docs-navigation > summary {
        margin: 0;
    }

    .sidebar-content {
        padding-top: 12px;
    }

    .docs-sidebar ul {
        margin-bottom: 12px;
    }

    .docs-sidebar .sidebar-content {
        max-height: 60vh;
        overflow: auto;
    }

    h1 {
        font-size: 26px;
    }

    .docs-version {
        font-size: 10px;
    }

    .support-links {
        right: 0;
        min-width: 210px;
    }

    .docs-content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
}

@media print {
    .site-header,
    .docs-sidebar,
    .site-footer,
    .page-relations,
    a.headerlink {
        display: none;
    }

    .docs-layout,
    .docs-layout.no-sidebar {
        display: block;
        width: 100%;
        padding: 0;
    }

    .docs-content,
    .docs-content * {
        color: #000000 !important;
        background: #ffffff !important;
    }

    .docs-content .highlight,
    .docs-content .literal-block {
        overflow: visible;
    }

    .docs-content pre {
        white-space: pre-wrap;
    }

    .docs-content .highlight span {
        color: #000000 !important;
    }
}