@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

@import url('fonts/source-code-pro.css');

:root {
    --back-color: black;
    --back-box-color: #080b3e;
    --text-color: lightgreen;
    --text-hi-color: yellow;
    --sub-text-color: #149d14;
    --status-text-color: #0a810a;
    --error--text-color: red;
    --link-color: #8eceff;
    --link--hov-color: #7e7dff;
    --input-color: #e07b00;
    --input-back-color: #042d57;
    --input-back-focus-color: #255d98;
    --toggle-width: 768px;
}

@font-face {
    font-family: 'clacon';
    src: url('./fonts/Inconsolata-VariableFont_ww.ttf')  format("truetype-variations");
    font-weight: 400 999;
    font-stretch: 75% 200%;
}

html, body {
    //font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    //font-family: 'Source Code Pro', Courier, monospace;
    font-family: clacon, Consolas, Courier, monospace;
    //font-family: Georgia, 'Times New Roman', Times, serif;
    //zoom: 1.00; /* For Times New Roman, consolas */

    background: var(--back-color);
    color: var(--text-color);
    font-weight: 500;
}




a, .btn-link {
    color: var(--link-color);
}

a:hover, .btn-link:hover {
    color: var(--link--hov-color);    
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}


.searchbox > input.search {    
    color: var(--input-color);    
    background: var(--input-back-color);
    border-color: transparent;
}


    .searchbox > input.search:focus {
        background: var(--input-back-focus-color);
    }

app {
    position: relative;
    display: flex;
    flex-direction: column;
}

.top-row {
    min-height: 3.5rem;
    display: flex;
    align-items: center;
}

.main {
    flex: 1;
}

    .main .top-row {
        background-color: #f7f7f7;
        border-bottom: 1px solid #d6d5d5;
        justify-content: flex-end;
    }

        .main .top-row > a, .main .top-row .btn-link {
            white-space: nowrap;
            margin-left: 1.5rem;
        }

        .main .top-row a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }

.sidebar {
    //background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
    background-color: var(--back-box-color);
    color: var(--text-hi-color);
}

    .sidebar .top-row {
        //background-color: rgba(0,0,0,0.4);
        background-color: var(--back-box-color);
        border-bottom-color: yellow;
        border-bottom-width: 1px;
        border-bottom-style: dotted;
    }

    .sidebar .navbar-brand {
        font-size: 1.3rem;
        color: var(--text-hi-color);
    }

    .sidebar .oi {
        width: 2rem;
        font-size: 1.3rem;
        vertical-align: text-top;
        top: -2px;
    }

    .sidebar .nav-item {
        font-size: 1.1rem;
        padding-bottom: 0.5rem;
    }

        .sidebar .nav-item:first-of-type {
            padding-top: 1rem;
        }

        .sidebar .nav-item:last-of-type {
            padding-bottom: 1rem;
        }

        .sidebar .nav-item a {
            color: var(--text-hi-color);
            border-radius: 4px;
            height: 3rem;
            display: flex;
            align-items: center;
            line-height: 3rem;
        }

            .sidebar .nav-item a.active {
                background-color: rgba(255,255,255,0.25);
                //color: white;
                color: var(--text-hi-color);
            }

            .sidebar .nav-item a:hover {
                background-color: rgba(255,255,255,0.1);
                //color: white;
                color: var(--text-hi-color);
            }

.content {
    padding-top: 1.1rem;
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar .social-links {
    font-size: 87%;
}

.navbar .social-link {    
    display: inline-block;
}

.navbar .social-link a {
    text-decoration: none;
}


    .navbar .social-link > * {
        display: inline;
    }


@media (min-width: 768px) {
    .navbar .social-link {
        display: block;
    }
}


@media (max-width: 767px) {
    .navbar .social-link {
        display: inline;        
    }

    .navbar .social-links {
        margin-left: auto;
        margin-right: 0.7rem;
        font-stretch: condensed;
    }    
}



.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

    .invalid {
        outline: 1px solid red;
    }

    .validation-message {
        color: red;
    }

    #blazor-error-ui {
        background: lightyellow;
        bottom: 0;
        box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
        display: none;
        left: 0;
        padding: 0.6rem 1.25rem 0.7rem 1.25rem;
        position: fixed;
        width: 100%;
        z-index: 1000;
    }

        #blazor-error-ui .dismiss {
            cursor: pointer;
            position: absolute;
            right: 0.75rem;
            top: 0.5rem;
        }


    /* own styles */
    .updater {
        display: flex;
        align-items: center;
        height: 3.2em;
        color: var(--status-text-color);
        background: var(--back-box-color);
        font-size: 0.85em;
        padding-left: 0.6rem;
        padding-right: 0.6rem;
        padding-top: 0.2em;
    }

        .updater .lnk {
            text-decoration: underline;
            color: var(--link-color);
            font-style: italic;
            cursor: pointer;
        }

    h3.section-title {
        font-size: 1.6em;
        font-weight: bold
    }


    /* index page */
    @media (max-width: 30em) {
        .topic-list.index-page {
            visibility: hidden;
            display: none;
        }
    }

    .top-topics.index-page {
        margin-top: 1em;
    }

    .top-cloud.index-page {
        margin-top: 1em;
    }

    /* post-finder */

    .post-finder {
        font-size: 14pt;
    }


        .post-finder .searchbox {
            width: 100%;
            display: flex;
            flex-direction: row;
        }

            .post-finder .searchbox > input {
                margin-right: 0.25em;
            }

            .post-finder .searchbox .searchbut {
                margin-left: 0.25em;
            }

            .post-finder .searchbox > * {
                display: inline-block;
            }

        .post-finder .error-msg {
            color: var(--error--text-color);
            display: block;
        }


        .post-finder .section-title {
            font-weight: bold;
            margin-top: 1em;
        }

        .post-finder .navbar {
            font-size: 90%;
            display: block;
            width: 100%;
            padding: 0;
            color: yellow;
            margin-top: 0.7em;
            margin-bottom: 0.9em;
            display: flex;
            align-items: flex-end;
        }

            .post-finder .navbar .showing {
                background-color: blue;
                flex-grow: 1;
                margin-right: 0.3em;
                padding-top: 0.3rem;
                padding-left: 0.2rem;
                font-stretch: semi-condensed;
            }

            .post-finder .navbar button.btn-primary {
                cursor: pointer;
                margin-right: 0.3em;
                width: 3em;
            }


        .post-finder ul {
            line-height: initial;
        }

        .post-finder li {
            margin-top: 0.85rem;
        }

            .post-finder li .nav-link > * {
                color: var(--sub-text-color);
            }

            .post-finder li abstract {
                font-size: 75%;
                display: block;
                clear: left;
                margin-left: 1rem;
                //margin-top: 0.2rem;
            }



            .post-finder li small {
                font-size: 75%;
                font-style: italic;
                display: block;
                clear: left;
                margin-left: 1rem;
                //margin-top: -0.3rem;
            }

        .post-finder ul {
            padding-inline-start: 20px;
        }

        .post-finder .nav-link {
            padding: 0;
        }


    .topic-quick-link {
        text-decoration: underline;
        color: var(--link-color);
        font-style: italic;
        cursor: pointer;
    }

    .topic-cloud {
        font-size: 1.0em;
        margin-top: 2rem;
    }


        .topic-cloud .topic-items {
            margin-right: 0.5em;
            padding: 0.5em;
            background-color: var(--back-box-color);
            border-radius: 0.5em;
            margin-right: 0.5em;
            margin-bottom: 0.5em;
            padding: 0.5em;
            display: inline-block;
        }


    /* top-topics-list / topic-content */


    .topic-content {
        font-size: 0.99em;
        line-height: initial;
        display: inline-block;
        background: var(--back-box-color);
        margin: 0.5rem;
        margin-top: 1em;
        margin-bottom: 1em;
        width: 19em;
        vertical-align: top
    }

        .topic-content small {
            font-size: 0.85em;
            font-style: italic;
            display: block;
            clear: left;
        }

        .topic-content .card-title {
            font-weight: bold;
            margin-bottom: 0.4em;
        }

        .topic-content .card-body {
            padding: 0.15rem;
        }

        .topic-content ul {
            padding-inline-start: 20px;
        }

        .topic-content li {
            margin-top: 0.6em;
        }

            .topic-content li small {
                margin-top: 0.1rem;
                color: var(--sub-text-color);
            }

        .topic-content .nav-link {
            padding: 0;
        }



    .viewer {
        background: black;
        color: lightgreen;
        padding: 3px;
        // Would be cool https://css-tricks.com/old-timey-terminal-styling/
    }

        .viewer h1 {
            font-stretch: condensed;
            font-weight: 600;
            word-break: break-word;
            max-width: 630px;
        }

        .viewer h2 {
            font-weight: 600;
            font-stretch: condensed;
            max-width: 630px;
        }

        .viewer .abstract {
            max-width: 630px;
        }

        .viewer img {
            overflow-x: scroll;
            max-width: 100%;
        }

    .blog-powered-by {
        font-size: 80%;
        font-style: italic;
        text-align: right;
        width: 100%;
        padding-left: 0.3em;
        padding-right: 0.3em;
        color: var(--status-text-color)
    }


    .blog-contact {
        font-size: 90%;
        font-style: italic;
        text-align: right;
        width: 100%;
        padding-left: 0.3em;
        padding-right: 0.3em;
        color: var(--status-text-color)
    }



    /* media dependant styles */


    @media (max-width: 767.98px) {
        .main .top-row:not(.auth) {
            display: none;
        }

        .main .top-row.auth {
            justify-content: space-between;
        }

        .main .top-row a, .main .top-row .btn-link {
            margin-left: 0;
        }

        .updater {
            font-stretch: condensed;
        }
    }

    @media (min-width: 768px) {
        app {
            flex-direction: row;
        }

        .sidebar {
            width: 250px;
            height: 100vh;
            position: sticky;
            top: 0;
        }

        .main .top-row {
            position: sticky;
            top: 0;
        }

        .main > div {
            padding-left: 2rem !important;
            padding-right: 1.5rem !important;
        }

        .navbar-toggler {
            display: none;
        }

        .sidebar .collapse {
            /* Never collapse the sidebar for wide screens */
            display: block;
        }
    }