@import './code.less';
@import './custom-blocks.less';
@import './arrow.less';
@import './sphinx.less';
@import './toc.less';
@import './wrapper.less';

@font-face {
    font-family: Hack;
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/hack/Hack-Regular.woff");
}

@font-face {
    font-family: Hack;
    font-weight: bold;
    font-style: normal;
    src: url("../fonts/hack/Hack-Bold.woff");
}

@font-face {
    font-family: Hack;
    font-weight: bold;
    font-style: italic;
    src: url("../fonts/hack/Hack-BoldItalic.woff");
}

@font-face {
    font-family: Hack;
    font-weight: normal;
    font-style: italic;
    src: url("../fonts/hack/Hack-Italic.woff");
}

@font-face {
    font-family: Luciole;
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/luciole/Luciole-Regular.woff");
}

@font-face {
    font-family: Luciole;
    font-weight: bold;
    font-style: normal;
    src: url("../fonts/luciole/Luciole-Bold.woff");
}

@font-face {
    font-family: Luciole;
    font-weight: bold;
    font-style: italic;
    src: url("../fonts/luciole/Luciole-Bold-Italic.woff");
}

@font-face {
    font-family: Luciole;
    font-weight: normal;
    font-style: italic;
    src: url("../fonts/luciole/Luciole-Regular-Italic.woff");
}

html, body {
    padding: 0;
    margin: 0;
    min-height: 100vh;
}

body {
    font-family: Luciole;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--TClr);
    background-color: var(--BgClr);
    a, a:visited {
        color: var(--LClr);
        &:hover {
            color: var(--LHClr);
        }
    }
}


#app {
    display: flex;
    flex-flow: column;
    min-height: 100vh;

    > .navbar {
        z-index: 20;
        order: 1;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        background-color: var(--NvBgClr);
        box-sizing: border-box;
        border-bottom: 0.3em solid var(--NvBClr);
        box-shadow: 0 0.3em var(--NvBClr), 0 0 0.3em 0.4em var(--NvBgClr);
        color: var(--NvTClr);
        .nav-dropdown-menu {
            vertical-align: top;
            max-height: 2em;
            details {
                padding: 0 0.5em 0 0.5em;
                background: var(--NvBgClr);
                border-radius: 0.5em;
                color: var(--NvTClr);
                ul {
                    list-style: none;
                }
                a, a:visited {
                    color: var(--NvLClr);
                    &:hover {
                        color: var(--NvLHClr);
                    }
                }
            }
        }

        a, a:visited {
            color: var(--NvLClr);
            &:hover {
                color: var(--NvLHClr);
            }
        }

    }
    > footer.footer {
        order: 3;
        padding: 0.3em;;
        box-sizing: border-box;
        border-top: 0.3em solid var(--FoBClr);
        box-shadow: 0 -0.3em var(--FoBClr), 0 0 0.3em 0.4em var(--FoBgClr);
        background-color: var(--FoBgClr);
        color: var(--FoTClr);
        min-height: 5em;
        z-index: 1000;

        a, a:visited {
            color: var(--FoLClr);
            &:hover {
                color: var(--FoLHClr);
            }
        }
    }
    ul.simple, ul {
        list-style-type: '\2013 ';
        list-style-position: outside;
    }

    > #appflex {
        order: 2;
        display: flex;
        flex-flow: row;
        flex-grow: 1;
        > #sidebar {
            order: 1;
        }

        > #page {
            width: 100%;
            order: 2;
        }
    }
}

#content:not(.custom) {
    .wrapper();
    a:hover {
        text-decoration: underline;
    }
    p.demo {
        padding: 1rem 1.5rem;
        border: 0.3em solid var(--BClr);
        border-radius: 0.4em;
    }
    img {
        max-width: 100%;
    }
}

#content.custom {
    padding: 0;
    margin: 0;
    img {
        max-width: 100%;
    }
}

a, a:visited {
    font-weight: 500;
    color: var(--AClr);
    text-decoration: none;
}

p a code, p a:visited code {
    font-weight: 400;
    color: var(--AClr);
}

kbd {
    background: var(--BgClr);
    border: solid 0.05rem var(--BClr);
    border-bottom: solid 0.1rem var(--BClr);
    border-radius: 0.15rem;
    line-height: 1.5em;
    padding: 0.25em;
}

blockquote {
    font-size: 1.2rem;
    color: var(--BqTClr);
    border-left: .25rem solid var(--BqBClr);
    background-color: var(--BqBgClr);
    margin-left: 0;
    padding-left: 1rem;
}

ul, ol {
    padding-left: 1.2em;
}

strong {
    font-weight: 600;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.25;
    .content:not(.custom) > & {
        margin-bottom: 0;
        &:first-child {
            margin-bottom: 1rem;
            + p, + pre, + .custom-block {
                margin-top: 2rem;
            }
        }
    }
    &:hover .header-anchor {
        opacity: 1;
    }
}

h1 {
    font-size: 2.2rem;
    padding-bottom: .3rem;
    border-bottom: 0.3em solid var(--BClr);
}

h2 {
    font-size: 1.65rem;
    padding-bottom: .2rem;
    border-bottom: 0.2em solid var(--BClr);
}

h3 {
    font-size: 1.35rem;
}

a.header-anchor, a:visited.header-anchor {
    font-size: 0.85em;
    float: left;
    margin-left: -0.87em;
    padding-right: 0.23em;
    margin-top: 0.125em;
    opacity: 0;
    &:hover {
        text-decoration: none;
    }
}

code, kbd, .line-number {
    font-family: Hack;
}

p, ul, ol {
    line-height: 1.7;
}

hr {
    border: 0;
    border-top: 0.3em solid var(--BClr);
}

table {
    border-collapse: collapse;
    margin: 1rem 0;
    display: block;
}

tr {
    border-top: 0.3em solid var(--TeBClr);
    &:nth-child(2n) {
        background-color: var(--ToBgClr);
        color: var(--ToTClr);
    }
}

th, td {
    border: 0.3em solid var(--TeBClr);
    padding: .6em 1em;
}

.custom-layout {
}

.theme-container {
    &.no-navbar {
        #content:not(.custom) > h1, h2, h3, h4, h5, h6 {
                margin-top: 1.5rem;
                padding-top: 0;
        }
        .custom-layout {
            padding-top: 0;
        }
    }
}

:focus {
    border-radius: 0.5em;
    box-shadow: 0 0 0.4em 0.3em var(--FClr) !important;
}

a.btn, a:visited.btn {
    background-color: var(--BtnBgClr);
    padding: .6em .6em;
    font-size: .8em;
    line-height: 0.1em;
    color: var(--BtnTClr);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;

    &:hover {
        background-color: var(--BtnBgAClr);
    }
}

ul.social {
    font-size: 0.9em;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;

    > li {
        margin: 0.5em;
        flex-basis: min-content;
        flex-grow: 0;
        list-style: none;
    }
}

svg.fasvg {
    max-height: 1em;
    max-width: 1.5ex;
    height: 1em;
    margin: 0 0 0 0 !important;
    padding: 0 0 0 0 !important;
    vertical-align: baseline;
    fill: var(--TClr);
    use {
        max-height: 1em;
        height: 1em;
    }
}

a.fasvglink, a:visited.fasvglink {
    display: inline-flex !important;
    flex-flow: row nowrap;
    height: 2em;
    border-radius: 2em;
    border: 0.2em solid var(--LClr);
    text-align: center;
    line-height: 2em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    margin: 0.2em 0.2em 0.2em 0.2em;
    color: var(--BtnTClr);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;

    svg {
        max-height: 1.2em !important;
        max-width: 1.2ex;
        height: 1.2em !important;
        width: 1.2ex;
        margin: 0.2em 0.5em 0.2em 0.2em !important;
        display: inline-block !important;
        vertical-align: baseline;
        fill: var(--BtnTClr);
    }

    &:hover {
        -webkit-transform: scale(1.3em);
        transform: scale(1.3em);
        svg {
            fill: var(--BtnAClr) !important;
        }
    }

    &.email {
        color: var(--SEmailClr);
        border-color: var(--SEmailClr);
        svg {
            fill:    var(--SEmailClr);
        }
    }

    &.contact {
        color: var(--SContactClr);
        border-color: var(--SContactClr);
        svg {
            fill:    var(--SContactClr);
        }
    }

    &.facebook {
        color: var(--SFacebookClr);
        border-color: var(--SFacebookClr);
        svg {
            fill:    var(--SFacebookClr);
        }
    }

    &.github {
        color: var(--SGithubClr);
        border-color: var(--SGithubClr);
        svg {
            fill:    var(--SGithubClr);
        }
    }

    &.google {
        color: var(--SGoogleClr);
        border-color: var(--SGoogleClr);
        svg {
            fill:    var(--SGoogleClr);
        }
    }

    &.linkedin {
        color: var(--SLinkedinClr);
        border-color: var(--SLinkedinClr);
        svg {
            fill:    var(--SLinkedinClr);
        }
    }

    &.pinterest {
        color: var(--SPinterestClr);
        border-color: var(--SPinterestClr);
        svg {
            fill:    var(--SPinterestClr);
        }
    }

    &.reddit {
        color: var(--SRedditClr);
        border-color: var(--SRedditClr);
        svg {
            fill:    var(--SRedditClr);
        }
    }

    &.rss {
        color: var(--SRssClr);
        border-color: var(--SRssClr);
        svg {
            fill:    var(--SRssClr);
        }
    }

    &.soundcloud {
        color: var(--SSoundcloudClr);
        border-color: var(--SSoundcloudClr);
        svg {
            fill:    var(--SSoundcloudClr);
        }
    }

    &.stackOverflow {
        color: var(--SStackOverflowClr);
        border-color: var(--SStackOverflowClr);
        svg {
            fill:    var(--SStackOverflowClr);
        }
    }

    &.twitter {
        color: var(--STwitterClr);
        border-color: var(--STwitterClr);
        svg {
            fill:    var(--STwitterClr);
        }
    }

    &.mastodon {
        color: var(--SMastodonClr);
        border-color: var(--SMastodonClr);
        svg {
            fill:    var(--SMastodonClr);
        }
    }

    &.diaspora {
        color: var(--SDiasporaClr);
        border-color: var(--SDiasporaClr);
        svg {
            fill:    var(--SDiasporaClr);
        }
    }

    &.youtube {
        color: var(--SYoutubeClr);
        border-color: var(--SYoutubeClr);
        svg {
            fill:    var(--SYoutubeClr);
        }
    }

    &:hover {
        z-index: 2;
        color: var(--BtnAClr) !important;
        border-color: var(--BtnAClr) !important;
    }
}

form {
    footer {
        text-align: right;

        > * {
            text-align: left;
        }
    }
    main {
        width: 100%;

        .formctl {
            display: inline-flex;
            flex-flow: row wrap;
            justify-content: flex-end;
            margin: 0.3em;
            padding: 0.3em;
            width: 100%;

            label {
                flex-grow: 1;
            }

            input, textarea {
                flex-grow: 2;
                display: inline-flex;
                max-width: 90%;
            }
        }
    }
}

button, a.btn, a:visited.btn {
    background-color: var(--BtnBgClr);
    color: var(--BtnTClr);
    border: solid 0.3em var(--BtnBClr);
    text-decoration: none;
    display: inline-block;
    border-radius: 2em;
    height: 2em;
    padding: 0.2em 0.8em 0.2em 0.8em;
    font-size: 1.2em;

    &:hover {
        background-color: var(--BtnHClr);
    }
}

.flexgroup {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;

    > img {
        height: 100%;
    }

    > * {
        border-radius: 1em;
        width: 40%;
        flex-grow: 1;
        max-width: 80ex;
        padding: 1em;
        margin: 1em 0.5em 1em 0.5em;
        box-shadow: 0 0 0.2em 0.1em var(--BClr);
        &a, &a:visited {
            box-shadow: 0 0 0.2em 0.1em var(--LClr);
            &:hover {
                box-shadow: 0 0 0.2em 0.1em var(--LHClr);
            }
        }
    }
}

img#main-logo {
    text-align: center;
    width: 2rem;
    border-radius: 50%;
}

#content:not(.custom) {
    max-width: 90%;
}


/* THE SECTION BELOW DEFINES THE APPEARANCE OF AUTODOC-GENERATED DOCS */

.sig-name.descname {
    font-weight: bold;
}

.sig-param {
    margin-left: 0.3em;
}

.sig-paren {
    margin-left: 0.3em;
}

dt {
    line-height: 1.5em;
    margin-bottom: 1em;
}

dt.field-odd, dt.field-even, p.rubric {
        font-size: 1.2em;
        font-weight: bold;
        color: var(--TrClr);
}

dd {
    margin-left: 0.8em;
}

dd.field-odd p strong {
    margin-left: 1em;
}

dl.method, dl.function {
    margin-top: 2em;
    margin-bottom: 3em;
}

dl.navdl {
    margin-top: 0.2em;
    margin-bottom: 0.3em;
}

dl.navdl dt {
    margin-top: 0em;
    margin-bottom: 0em;
    padding: 0rem 1rem 0rem 1.45rem !important;
    line-height: 1.1em;
    font-weight: bold;
    font-style: italic;
}

dl.navdl dd {
    margin-top: 0em;
    margin-bottom: 0em;
    line-height: 1.1em;
    padding: 0.1rem 1rem 0.1rem 2.25rem !important;
}

.viewcode-link {
    margin-left: 1em;
    color: var(--LClr);
}

/* THE SECTION BELOW DEFINES THE APPEARANCE OF TABLE-OF-CONTENTS */

/* color fixes for table of contents */
.toc-backref {
    color: inherit;
}

/* Hide all TOC titles */
.contents.topic p.topic-title {
    display: none;
}

.contents.topic {
    margin-bottom: 3em;
}

/* THE SECTION BELOW CHANGES CODE FONTS FOR BETTER 80-CHARS READABILITY */
code, pre {
    font-family: 'Hack', monospace;
}

blockquote {
    font-size: inherit;
}

blockquote h2 {
    margin-left: 1em;
}

/* THE SECTION BELOW FIXES A SPHINX-MERMAID OPACITY PROBLEM */
#content .section {
    opacity: 1.0 !important;
}
.section {
    opacity: 1.0 !important;
}

/* MAKES SPHINX SYNTAX figure:: :align:center WORK AGAIN */
.figure.align-center {
    text-align: center;
}

.postlist-style-flex, .flexgroup {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;

    > img {
        height: 100%;
    }

    > * {
        flex-basis: 20%;
        margin: 2em;
        border-radius: 1em;
        flex-grow: 1;
        min-width: 20ex;
        max-width: 80ex;
        padding: 1em;
        margin: 1em 0.5em 1em 0.5em;
        box-shadow: 0 0 0.2em 0.1em var(--BClr);
        &a, &a:visited {
            box-shadow: 0 0 0.2em 0.1em var(--LClr);
            &:hover {
                box-shadow: 0 0 0.2em 0.1em var(--LHClr);
            }
        }
    }

    li {
        list-style: none;
    }
}

img.align-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img.align-right, figure.align-right {
    display: inline-block;
    float: right;
    margin: 2em;

    &::after {
        clear: both;
        display: block;
    }
}

ul.ablog-archive {
    list-style: none;
    margin-left: 0;
}

ul.ablog-archive li {
    float: left;
    margin-right: 0.1em;
    font-size: 0.9em;
}

ul.postlist a {
    font-style: italic;
}

ul.postlist-style-disc {
    list-style-type: disc;
}

ul.postlist-style-none {
    list-style-type: none;
}

ul.postlist-style-circle {
    list-style-type: circle;
}

ul.ablog-cloud {
    list-style: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

ul.ablog-cloud li {
    float: left;
    margin: 0 0 0 0;
    padding: 0.005em 1em 0.005em 1em;

    a {
        padding: 0 0 0 0;
        margin: 0 0 0 0;
    }
}

ul.ablog-cloud a, ul.ablog-cloud a:visited {
    text-decoration: none;
    vertical-align: middle;
}

li.ablog-cloud-1 {
    font-size: 0.8em !important;
}

li.ablog-cloud-2 {
    font-size: 0.95em !important;
}

li.ablog-cloud-3 {
    font-size: 1.1em !important;
}

li.ablog-cloud-4 {
    font-size: 1.25em !important;
}

li.ablog-cloud-5 {
    font-size: 1.4em !important;
}

.nav-links {
    summary {
        cursor: pointer;
        width: 100%;
    }
}

#main_layout_table {
    margin: 0;
    border: none !important;
    border-spacing: 0;
    > thead, > tfoot, > tbody {
        border: none !important;
        margin: 0;
        tr, > tr > th, > tr > td {
            border: none !important;
            margin: 0;
            padding: 0;
        }
    }
    tbody {
        break-inside: auto;
    }
    thead, tfoot {
        display: none;
    }
}

#header-identity {
    width: 100%;
    flex-basis: 100%;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    img {
        max-height: 5em;
        max-width: 20%;
        min-width: 5em;
    }
    #navbar_title {
        padding: 0 1em 0 1em;
    }
}

@media screen {
    .print-only {
        display: none !important;
    }
}
