/* CSS for abstrys.com
 *
 * Note: the base settings are designed around a mobile (small-screen) presentation. Desktop
 * configuration is in the "responsive behavior" section near the end of this file.
 * */

* {
    box-sizing: border-box;
}

body {
    background-color: black;
    color: silver;
    font-family: 'Open Sans', sans-serif;
    height: 100%;
    scroll-behavior: smooth;
}

/*
 * Navbar
 *
 * This is the left-side pane, which includes the logo, the docset title and its ToC
 */

/* make sure that all the text in the navbar can be seen and doesn't overflow the content pane */
div#navbar {
    padding: 16px;
}

/*
 * Hidden scrollbar behavior
 */
.hiddenscroll {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.hiddenscroll::-webkit-scrollbar {
    display: none;
}

/*
 * -------------------------------------
 * Table of contents (within the navbar)
 * -------------------------------------
 *
 * This contains the sphinx 'toctree' for the doc set.
 */

/*
 * Stuff to change glyphs...
 *
div#maintoc li > a::before {
    content: '•';
    padding-right: 8px;
    color: silver;
}

div#maintoc li.has_child > a::before {
    content: '▸';
    padding-right: 8px;
    color: silver;
}

div#maintoc li.has_child.current > a::before {
    content: '▾';
    padding-right: 8px;
    color: silver;
}
*/

div#maintoc ul {
    /* remove glyphs and spacing from all lists */
    list-style-type: none;
    padding-left: 0px;
    margin: 0px;
}

div#maintoc li {
    /* add a little separation between list items */
    padding-top: 10px;
}

div#maintoc li.current > a {
    /* the currently-selected item is in gold */
    color: gold;
    font-weight: bold;
    display: block;
}

div#maintoc li ul {
    /* hide sub-lists (all but the initial <ul>) by default */
    display: none;
}

div#maintoc li.current > ul {
    /* show sub-lists for the "current" ToC selection (at any level) */
    display: block;
    /* also give it some style to let you know you're in this section */
    background: #101010;
    border-image-source: linear-gradient(to bottom, #114230, #424242);
    border-image-slice: 1;
    border-left: 3px solid;
    border-collapse: collapse;
    padding-left: 8px;
}


/*
 * -----------------
 * Main page content
 * -----------------
 */

div.body {
    text-align: justify;
    text-justify: auto;
}


/*
 * ------
 * Footer
 * ------
 */

div.footer {
    text-align: center;
}

/*
 * -------------
 * Body elements
 * -------------
 */

a {
    color: limegreen;
    text-decoration: none;
}

a.headerlink::before {
    content: " ";
}

a.headerlink {
    color: #666666;
    font-size: smaller;
    opacity: 0.25;
}

a.headerlink:hover {
    opacity: 1.0;
}

a:hover {
    filter: brightness(150%);
}

a img {
    color: inherit;
}

h1 {
    text-align: center;
    color: limegreen;
    padding-top: 8px;
    padding-bottom: 16px;
    font-family: 'Share Tech', sans-serif;
}

h2 {
    color: limegreen;
    font-family: 'Share Tech', sans-serif;
    border-top: 2px solid gray;
    padding-top: 16px;
}

h3 {
    color: green;
    font-weight: bold;
    font-family: 'Share Tech', sans-serif;
}

h4 {
    color: green;
    font-weight: bold;
    font-family: 'Share Tech', sans-serif;
}

h5 {
    color: green;
    font-weight: bold;
    font-family: 'Share Tech', sans-serif;
}

img {
    max-width: 100%;
}

/* sphinx-specific classes */
img.logo {
    width: 160px;
    margin: auto;
    display: block;
}

/* :guilabel: */
span.guilabel {
    font-weight: bold;
    color: white;
}

/* code blocks */
pre {
    background-color: black;
    overflow: auto;
    margin: 0px;
    padding: 12px;
    line-height: 24px;
    font-family: 'Roboto Mono', monospace;
}

/* inline literals */
span.pre {
    font-family: 'Roboto Mono', monospace;
    background-color: black;
    padding-left: 6px;
    padding-right: 6px;
}

/* replaceable elements in a ':samp:' */
em > span.pre {
    color: darkorange;
}

/* ':command:' elements */
strong.command {
    font-family: 'Roboto Mono', monospace;
}

/* notes and admonitions */
div.admonition {
    border-left: 2px solid #424242;
    padding: 0px;
    margin: 8px 48px 8px 24px;
    display: inline-block;
}

div.admonition p {
    padding: 8px 16px;
    margin: 0px;
}

div.admonition > p.admonition-title {
    border-radius: 9px;
    display: inline-block;
    font-weight: bold;
    color: limegreen;
}

div.admonition.tip > p.admonition-title {
    color: cornflowerblue;
}

div.admonition.warning > p.admonition-title,
div.admonition.caution > p.admonition-title {
    color: gold;
}

div.admonition.important > p.admonition-title,
div.admonition.error > p.admonition-title {
    color: crimson;
}

/* search form styling */
input#searchinput {
    width: auto;
}

input {
    background-color: black;
    color: silver;
    border: 1px solid #424242;
    border-radius: 5px;
    padding: 8px 16px;
}

input:hover {
    filter: brightness(150%);
}

/*
 * -------------------
 * responsive behavior
 * -------------------
 */

.row::after {
    content: "";
    clear: both;
    display: table;
}

/* small screens */
.column {
    display: block;
    width: 100%;
    float: left;
    padding: 15px;
    border: 10px solid black;
    background-color: #1f1f1f;
    border-radius: 19px;
}

/* desktops */
@media only screen and (min-width: 800px) {
    /* For desktop: */
    div#navbar {
        position: fixed;
        width: 300px;
        height: 100vh; /* 100% of view height */
    }
    div#navbarheading {
        height: 320px;
    }
    div#maintoc {
        height: calc(100vh - 380px);
        overflow: auto;
    }

    input#searchinput {
        width: 160px;
    }

    div.body {
        padding-left: 48px;
        padding-right: 48px;
    }

    div#pagecontent, .footer {
        width: calc(100% - 300px);
        height: auto;
        margin-left: 300px;
    }
}