fish-shell/doc_src/python_docs_theme/static/pydoctheme.css

@import url("classic.css");

:root {
  color-scheme: light dark; /* both supported */
}

html {
    background: none;
    min-height: 100%;
}

body {
    background: linear-gradient(to bottom, #a7cfdf 0%,#23538a 100%);
    /* Pick a font.
       sans-serif is the Browser default. This is great because the user could change it.
       Unfortunately the defaults are decades old and e.g. on Windows still use Arial in Firefox and Edge,
       and this seems unlikely to change.
       So we use system-ui, which is "the system's interface font".
       Unfortunately on Windows *that* depends on the locale, and e.g. in Chinese it apparently
       picks a font that is okay at chinese characters but fairly bad at latin ones.
       So we prefer the standard Windows font Segoe.
       If that's installed anywhere else that's unfortunate but not horrible because it's an okay font.

       See e.g. https://github.com/twbs/bootstrap/issues/22328
    */
    font-family: "Segoe UI", system-ui, sans-serif;
}

div#fmain {
    color: #222;
    padding: 10px 40px 10px;
    background-color: #EEEEFA;
    border-radius: 14px;
    position: relative;
    margin: 1em auto 1em;
    box-shadow: 0 0 5px 1px #333;
    width: 85%;
    /* This is super-cheesy, but 1270px is the maximum width of the sidebar, the content and the margins */
    max-width: 1270px;
}

div.related {
    margin-bottom: 0;
    padding: 0.5em 0;
    border-top: 1px solid #ccc;
    margin-top: 0;
    background-color: inherit;
}

div.section {
    /* Make scrollable when it's too wide
       Really only happens with tables, the rest flows nicely,
       but I have no idea how to make the tables themselves scrollable
     */
    overflow-y: auto;
    /* This avoids leaving the actual text narrower than necessary
       in certain widths.
     */
    width: 100%;
}

div.related a:hover,
div.footer a:hover,
div.sphinxsidebar a:hover {
    color: #0095C4;
}

div.related:first-child {
    border-top: 0;
    border-bottom: 1px solid #ccc;
}

.inline-search {
    display: inline;
}
form.inline-search input {
    display: inline;
}
form.inline-search input[type="submit"] {
    width: 40px;
}

div.sphinxsidebar {
    border-right: 1px solid #ccc;
    border-radius: 0px;
    line-height: 1em;
    font-size: smaller;
    margin-left: 0;
    float: left;
    /* Let this move along with the screen, but be scrollable itself.
    This means the user can't scroll *away* from the sidebar - it's always available */
    overflow: auto;
    position: sticky;
    top: 0;
    max-height: 100vh;
    /* Default scrollbar is too thicc */
    scrollbar-width: thin;
}

div.sphinxsidebar::-webkit-scrollbar {
  width: 5px;
}

div.sphinxsidebar::-webkit-scrollbar-thumb {
  /* Without, chrome lets the scrollbar disappear? */
  background-color: grey;
  border-radius: 10px;
}

div.documentwrapper {
    float: none;
}

div.document, div.body, div.warning {
    background-color: inherit;
    color: inherit;
}

div#searchbox {
    /* Cheesy: The padding is on the sphinxsidebar*wrapper*,
       so if this is the last element the bottom padding won't apply.
     */
    padding-bottom: 5px;
}

div.sphinxsidebar h3, div.sphinxsidebar h4 {
    margin-top: 1em;
    font-family: inherit;
}

div.sphinxsidebarwrapper > h3:first-child {
    margin-top: 0.2em;
}

div.sphinxsidebarwrapper > ul > li > ul > li {
    margin-bottom: 0.4em;
}

ul li, div.body li {
    line-height: 2em;
}

form.inline-search input,
div.sphinxsidebar input {
    /* Inputs typically have different default fonts, remove that idea */
    font-family: inherit;
    border: 1px solid #999999;
    font-size: smaller;
    border-radius: 3px;
}

div.sphinxsidebar input[type=text] {
    max-width: 150px;
}

div.body {
    padding: 10px 0 0 1.2em;
    min-width: 150px;
}

div.body p {
    line-height: 2em;
}

div.body h1, div.body h2, div.body h3, div.body h4, div.body h5, div.body h6 {
    margin: 0;
    border: 0;
    padding: 0.3em 0;
    font-family: inherit;
}

div.body hr {
    border: 0;
    background-color: #ccc;
    height: 1px;
}

div.body pre {
    border-radius: 3px;
    border: 1px solid #ac9;
}

div.highlight {
    /* For the button to be positionable inside us */
    position: relative;
}

div.highlight pre {
    padding: 10px;
}

pre button {
    position: absolute;
    top: 4px;
    right: 4px;
    opacity: 0;
}

div.highlight pre:hover > button {
    opacity: 1;
}

div.body div.admonition, div.body div.impl-detail {
    border-radius: 3px;
}

div.body div.impl-detail > p {
    margin: 0;
}

div.body div.seealso {
    border: 1px solid #dddd66;
}

div.body a {
    color: #0072aa;
}

div.body a:visited {
    color: #6363bb;
}

div.body a:hover {
    color: #00B0E4;
}

tr, pre {
    background-color: inherit;
}

code {
    /* Make inline-code better visible */
    background-color: rgba(20,20,80, .1);
    padding-left: 5px;
    padding-right: 5px;
}

tt, code, pre, dl > dt span ~ em, #synopsis p, #synopsis code, .command {
    /* Pick a monospace font.
       ui-monospace is the monospace version of system-ui - the system's monospace font.
       Unfortunately it's barely supported anywhere (at time of writing only Safari does!),
       and because monospace has the same limitations as sans-serif - Browser defaults are awful -
       we hardcode a list of normal monospace fonts.
       SFMono is San Francisco, Apple's font. Menlo is an older Apple one.
       Consolas is a Windows font.
       Ubuntu is the ubuntu monospace version, Hack is the default KDE monospace font,
       Liberation is an arial-like.

       NOTE: Under no circumstances can "Source Code Pro" appear in this list for a while as it had massive bugs on macOS.
       It would not appear at all when colored.
       This is unfortunate because it's the default Gnome monospace font.
       Instead we use Noto, which is a common monospace font that is often installed for emoji support.
    */
    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, "Ubuntu Mono", "Hack", "Noto Sans Mono", Liberation Mono, monospace;
}

#synopsis .line {
    line-height: 1em;
}

pre, div[class*="highlight-"] {
    /* For some reason sphinx since 3.1.2 sets "clear: both" here, which breaks in interesting ways */
    clear: unset;
}

div.body tt, div.body code {
    border-radius: 3px;
}

div.body tt.descname, div.body code.descname {
    font-size: 120%;
}

div.body tt.xref, div.body a tt, div.body code.xref, div.body a code {
    font-weight: normal;
}

table.docutils {
    border: 1px solid #ddd;
    min-width: 20%;
    border-radius: 3px;
    margin-top: 1em;
    margin-bottom: 1em;
    /* Make table scrollable on overflow */
    display: block;
    overflow: auto;
}

table.docutils td, table.docutils th {
    border: 1px solid #ddd !important;
    border-radius: 3px;
}

table p, table li {
    text-align: left !important;
}

table.docutils th {
    background-color: #eee;
    padding: 0.3em 0.5em;
}

table.docutils td {
    background-color: white;
    padding: 0.3em 0.5em;
}

table.footnote, table.footnote td {
    border: 0 !important;
}

div.footer {
    line-height: 1em;
    margin-top: -2em;
    text-align: right;
    width: auto;
    margin-right: 10px;
}

.refcount {
    color: #060;
}

.stableabi {
    color: #229;
}

.highlight {
    background: #FFF;
}

#synopsis p {
    font-size: 12pt;
}

dl {
    margin-bottom: 1em;
}

dl.envvar, dl.describe {
    font-size: 11pt;
    font-weight: normal;

}

div.sphinxsidebar ul {
    margin: 1em 10px 1em 10px;
}

/* On screens that are less than 700px wide remove anything non-essential
   - the sidebar, the gradient background, ... */
@media screen and (max-width: 700px) {
    div.sphinxsidebar {
        font-size: 16px;
        width: 100%;
        height: auto;
        position: relative;
    }
    div.documentwrapper {
        float: left;
    }

    div.sphinxsidebar ul {
        flex-basis: content;
        flex-wrap: wrap;
    }
    div.sphinxsidebarwrapper {
        display: flex;
    }
    div.sphinxsidebarwrapper > h3:nth-child(5) {
        display: none;
    }
    div#searchbox {
        display: none !important;
    }
    div.content {margin-left: 0;}

    div.bodywrapper {
        margin: 0;
    }
    div.body {
        padding: 1rem;
    }

    div#fmain {
        border-radius: 0px;
        margin: 0;
        box-shadow: 0;
        width: 100%;
        padding: 0;
        /* We have some padding/margins that would overflow - just remove it */
        overflow: clip;
    }
    div.footer {
        margin: 0;
    }
}

.sphinxsidebar ul.current > li.current { font-weight: bold }

.gray { color: #777 }
.purple { color: #551a8b; font-weight: bold; }
.red { color: #FF0000; }

/* Color based on the Name.Function (.nf) class from pygments.css. */
.command { color: #005fd7 }

/* Color based on the Name.Constant (.no) class from pygments.css. */
.param { color: #00bfff }

/* Color based on the Name.Constant (.no) class from pygments.css. */
/* Used for underlining file paths in interactive code examples. */
.param-valid-path { color: #00afff; text-decoration: underline }

/* Color based on the Generic.Prompt (.gp) class from pygments.css. */
.prompt { color: #8f7902 }

kbd {
  background-color: #f9f9f9;
  border: 1px solid #aaa;
  border-radius: .2em;
  box-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,0.1);
  color: #000;
  padding: 0.1em 0.3em;
}

div.body .internal.reference:link {
    /* Underline links in the body of the text */
    text-decoration: underline;
}
.std-envvar::before {
    content: "$";
}
.footnote, .footnote-reference {
    background-color: #ddddea;
    font-size: 90%;
}

.sig-name {
    font-size: unset;
}

.sig, dl.envvar {
    font-family: unset;
}

@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(to top, #1f1f3f 0%,#051f3a 100%);
    }
    div#fmain {
        color: #DDD;
        background-color: #202028;
        box-shadow: 0 0 5px 1px #000;
    }

    div.body h1, div.body h2, div.body h3, div.body h4, div.body h5, div.body h6 {
        background-color: inherit;
        color: inherit;
    }

    .footnote, .footnote-reference {
        background-color: #101020;
    }

    div.sphinxsidebar {
        border-right: 1px solid #666;
    }

    div.related:first-child {
        border-bottom: 1px solid #666;
    }

    div.related {
        border-top: 1px solid #666;
    }

    div.sphinxsidebar a, div.footer {
        color: #DDD;
    }

    div.sphinxsidebar h3 a, div.related a, div.sphinxsidebar h3, div.footer a {
        color: #DDD;
    }
    .highlight {
        background: #000;
    }
    kbd {
        background-color: #111;
        border: 1px solid #444;
        box-shadow: 0.1em 0.1em 0.2em rgba(100,100,100,0.1);
        color: #FFF;
    }
    table.docutils th {
        background-color: #222;
    }

    table.docutils td {
        background-color: #111;
    }
    input {
        background-color: #222;
        color: #DDD;
    }

    dt:target, span.highlighted {
        background-color: #404060;
    }
    table.docutils {
        border: 1px solid #222;
    }

    table.docutils td, table.docutils th {
        border: 1px solid #222 !important;
    }
    div.body a {
        color: #2092fa;
    }
    
    /* Color based on the Name.Function (.nf) class from pygments.css. */
    .command { color: #008fd7 }

    /* The table background on fishfish Beta r1 */
    th, dl.field-list > dt {
        background-color: #121;
    }

    code {
        background-color: rgba(200, 200, 255, .1);
    }
}