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

div#fmain {
    color: #222;
    padding: 10px 40px 10px;
    background-color: #EEEEFA;
    border-radius: 14px;
    position: relative;
    margin: 15px auto 15px;
    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: 150%;
    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 {
    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;
}

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

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

ul li.toctree-l1 {
    line-height: 150%;
}

form.inline-search input,
div.sphinxsidebar input {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    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: 140%;
}

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

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

tt, code, pre {
    font-family: monospace, sans-serif;
    /* Older sphinx versions set a color here, we need to inherit it from the outer div.highlight */
    background-color: inherit;
}

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: 10px;
    margin-bottom: 10px;
    /* 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: 150%;
    margin-top: -2em;
    text-align: right;
    width: auto;
    margin-right: 10px;
}

.refcount {
    color: #060;
}

.stableabi {
    color: #229;
}

.highlight {
    background: #FFF;
}

dl > dt span ~ em {
    font-family: monospace, sans-serif;
}

#synopsis p {
    font-family: monospace, sans-serif;
    font-size:  12pt;
}

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

.footnote, .footnote-reference {
    background-color: #ddddea;
    font-size: 90%;
}

@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: #CCC;
    }

    div.sphinxsidebar h3 a, div.related a, div.sphinxsidebar h3 {
        color: #BBB;
    }
    .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: #BBB;
    }

    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;
    }
    div.footer a {
        color: #BBB;
    }
    
    /* 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;
    }
}