/*
=========================================================
*  Argon Dokuwiki Template
*  Based on the Argon Design System by Creative Tim
*  Ported to Dokuwiki by Anchit (@IceWreck)
=========================================================
*/

/*
* I know using important at multiple places is a bad thing, but 
* I need to overrule the css already provided by dokuwiki
*/

@import 'argon-design-system';

// ------ General ------

button {
    @extend .btn;
    @extend .btn-neutral;
}

legend {
    @extend .h3;
    font-style: normal;
}

input,
select {
    background-color: white !important;
    border-radius: 0.25rem;
    border-color: #99979c;
}

// Highlight Search Results
.search_hit {
    @extend mark;
}

// Fix Content Hidden behind navbar when you reach via anchor
// Fixed somewhere else. 
// :target {
//     padding-top: 6rem;
//  }

// Selection
::-moz-selection {
    text-shadow: none;
    background: #dfe2f1;
}

::selection {
    text-shadow: none;
    background: #dfe2f1;
}

// Breadrumbs

.breadcrumb {
    flex-direction: column;
}


// ------ Main Content ------


#dokuwiki__content {
    p {
        font-weight: 400;
    }

    // HAX. Still don't understand why it works, but it does.
    // https://developer.mozilla.org/en-US/docs/Web/CSS/::before
    h1::before,
    h2::before,
    h3::before,
    h4::before,
    h5::before,
    h6::before {
        content: '';
        display: block;
        height: 6rem;
        margin-top: -6rem;
        visibility: hidden;

    }


    // Edit Button
    .secedit button {
        @extend .btn;
        @extend .btn-primary;
        @extend .btn-sm;
        margin-bottom: 1em;
        float: right;
    }

    // Non-existant links
    .wikilink2 {
        color: #dc3545;
    }

    // Page Revisions Button
    #page__revisions button {
        @extend .btn;
        @extend .btn-primary;
    }

    // Wiki Edit Menu Buttons
    .editButtons button {
        @extend .btn;
        @extend .btn-primary;
        @extend .btn-sm;
        margin-top: 1em;
        margin-bottom: 1em;
    }


    // Inline Code
    :not(pre)>code {
        background-color: inherit;
        padding: .1em;
        border-radius: .3em;


    }

    // Emoticons
    img.icon {
        width: 1rem;
        height: 1rem;
    }

    // Tables
    .table-responsive {
        border-width: 0rem;
    }

    table {
        @extend .table-responsive;
        @extend .table;
    }

    // Code Blocks
    pre {
        font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
        font-size: 14px;
        line-height: 1.375;
        direction: ltr;
        text-align: left;
        white-space: pre;
        word-spacing: normal;
        word-break: normal;
        -moz-tab-size: 4;
        -o-tab-size: 4;
        tab-size: 4;
        -webkit-hyphens: none;
        -moz-hyphens: none;
        -ms-hyphens: none;
        hyphens: none;
        background: #f5f7ff;
        color: #5e6687;
        border: 0;
        border-radius: .55rem;
        padding: 1.25rem;
        margin: 0;
        margin-bottom: 1rem;
        margin-top: 1rem;
        overflow: auto;

    }

    .mf_pdf {
        display: inline;
    }

}

.argon-doku-page-menu {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    margin: 1.75rem 0 0.5rem;

    li {
        display: inline;
        fill: #6c757d;
        :hover {
            fill:#525f7f;
        }
    }

    li:nth-of-type(1) {
        margin-left: 0em;
    }
}

// ------ Editor ------

// Tool Bar Buttons
#tool__bar button {
    @extend .btn;
    @extend .btn-secondary;
    @extend .btn-sm;
    margin-bottom: 2em;
}

// Edit Area

textarea {
    @extend .form-control;
    width: 95% !important;
    max-width: 100% !important;
}

.editBar {
    .summary {
        display: block !important;
    }
}

// ------ Table of Contents ------
.ct-toc {
    #dw__toc {

        float: inherit;
        margin: inherit;
        width: inherit;
        background-color: inherit;
        color: inherit;
        box-sizing: border-box;
        margin-right: 0em;
        padding-left: 0;
        border-left: 1px solid #eee;


        h3 {
            display: none;
        }

        a {
            display: block;
            padding: .125rem 1rem;
            color: #99979c;
            font-size: 100%;
        }

        a:hover {
            color: #5e72e4;
            text-decoration: none;
        }


        ol,
        ul,
        dl {
            margin-top: 0;
            margin-bottom: 1rem;
        }

        ul {
            margin-bottom: 0.5rem;
        }

        ul {
            list-style: disc outside;
            list-style-position: outside;
            list-style-image: none;
            list-style-type: disc;
        }
    }

    // .clear {
    //     @extend .section-nav;    
    //     .li {
    //         @extend .toc-entry;
    //         @extend .toc-h6 !optional;    
    //     }
    //     display: content;
    // }

}

// ------ Navbar ------

.header-title a {
    color: white;
    font-weight: 600;
    font-size: 1.2rem;
}

// Navbar Icons
.argon-doku-navbar-icon {
    fill: white;

    :hover {
        fill: #e6e6e6;
    }
}

// Search Bar
.doku_form {
    .no {
        @extend .form-group;
        @extend .input-group;
        @extend .mb-4;
        margin: 0rem;
        height: 1.5rem;
        padding: 0rem;

        #qsearch__in {
            @extend .form-control;
            width: 10rem;
            height: 1.5rem;
            margin: 0rem;
            margin-right: 1rem;
            margin-left: 1rem;
            border-radius: 0.25rem !important;
            overflow: hidden;
            border: none;
        }

        button {
            @extend .btn;
            @extend .btn-neutral;
            margin: 0rem;
            overflow: hidden;
            height: 92%;
        }
    }

}

// ------ Search Form ------

.toggleAssistant {
    @extend .btn;
    @extend .btn-default;
}

.search-results-form {
    button {
        @extend .btn;
        @extend .btn-primary;
        margin-left: 3rem;
    }

    .toggleAssistant {
        @extend .btn;
        @extend .btn-default;
        display: block;
        float: none !important;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    fieldset input {
        @extend .form-control;
        display: inline-block;
    }
}

// ------ Admin Area ------

.dokuwiki {
    

    .ui-admin {
        ul li {
            list-style-type: none;
        }

        ul .admin_tasks {
            svg {
                margin-right: 1rem;
                width: 1px;
                height: 1px;
            }
        }
    }

    .tabs {
        li {
            list-style-type: disclosure-closed;
        }
    }

    div.ui-admin ul li {

        margin: 0rem;
        vertical-align: middle !important; 

        a {
            vertical-align: middle;
            span.icon svg {
                margin-right: 1rem;
                width: inherit;
                height: inherit;
                vertical-align: middle !important; 
                path {
                    fill: #32325d;
                }
                
    
    
            }
    
            span.prompt {
                font-size: 1rem;
                font-weight: normal;
                vertical-align: middle !important; 

            }
    
        }

    } 
    
    


}
// Config Panel

#config__manager td input.edit {
    @extend .form-control;
    width: 30em;
    padding: 0.0rem 0.75rem;
    background-color: white !important;
}

#config__manager tr.default .input,
#config__manager tr.default input,
#config__manager tr.default textarea,
#config__manager tr.default select,
#config__manager .selectiondefault {
    background-color: inherit;
}

// ------ Media Uploads ------

.qq-upload-button {
    @extend .btn;
    @extend .btn-neutral;
}

// ------ Registration and User Forms ------

// Modify user, delete user


.dokuwiki #dw__register,
#dw__profiledelete {
    fieldset {
        width: 100%;
        border: 0rem;
        padding: 0rem;
        text-align: left !important;

        legend {
            @extend .h3;
            font-style: normal;
        }

        label {

            font-size: 1rem;
            font-weight: normal;
            width: 95%;
            text-align: left !important;

            input {
                float: right;
                background-color: white !important;
                border-radius: 0.25rem;
                border-color: #99979c;
                border-width: thin;
            }

        }
    }

    label.block {
        display: inline-block !important;
    }
}

// Login
#dw__login {
    width: 100%;
    float: left;
    left: 0%;
    margin: 0%;
    @extend .card;
    @extend .bg-secondary,
    .shadow,
    .border-0;

    label {
        width: 90%;
    }

    // legend {
    //     @extend .card-header,
    //     .bg-white,
    //     .pb-5;
    //     font-size: 2rem;

    //     label {
    //         @extend .h2;
    //     }

    //     margin-bottom: 5%;
    //     font-style: normal;
    // }

    span {
        float: left;
        font-size: 1.15rem;
    }

    input {
        display: block;
        float: right;
        @extend .form-control;
        width: 90%;
        height: 1.15rem;
        top: 50%;

    }

    .simple {
        width: 50%;
        margin-left: unset !important;

    }

    #remember__me {
        margin-top: 1rem;
    }

    button {
        @extend .btn;
        @extend .btn-primary;
    }
}

// ------ Left Sidebar ------

.leftsidebar {
    .leftsidebar ul {
        @extend .nav,
        .ct-sidenav;
    }

    li {
        list-style-type: none;
        display: block;
        font-size: 0.84rem;
        padding: 0.25rem;
        color: #4c555a;
        font-weight: 400;
    }

    a:link,
    a:visited {
        text-decoration: none;
        color: #4c555a;
    }

    a:hover {
        color: #212529;
    }

}

.ct-sidebar .nav>li>a {
    font-size: 0.84rem;
}


// ------ Footer ------

.footer-card {
    background-color: #f4f5f7;
    text-align: center;

    .footer-search {
        // center-align the bottom search bar
        margin-left: auto;
        margin-right: auto;
    }

    .argon-doku-footer-fullmenu {
        margin-left: auto;
        margin-right: auto;

        li {
            display: inline;
            fill: #6c757d;

            :hover {
                fill: #525f7f;
            }
        }

        li:nth-of-type(1) {
            margin-left: 0em;
        }
    }
}