/*
 Stylesheet for `index.html`.
 */

@import mixins
@import variables

$minSearchFieldsWidth: 490px
$resultWidth: 1000px
$sidebarWidth: 30px
$codeWidth: 650px
$hiddenInfoWidth: 250px

.ui-datepicker
    font-size: 70%

.ui-autocomplete
    max-height: 30%
    overflow-x: hidden
    overflow-y: scroll
    padding: 0px

    >li.ui-menu-item a.ui-state-focus
        @include vendor(transition, background-color 0.3s ease-out)

div#search-field
    @extend .t2

    bottom: 0
    height: 50%
    left: 0
    margin: auto
    margin-top: 15%
    max-height: 100px
    right: 0
    position: absolute
    top: 0
    width: 40%

    a#title
        text-decoration: none

        div#title
            font-size: 400%
            padding-bottom: 0.2em
            text-align: center

            #title-bit
                color: $baseColor1

            #title-angle
                color: $baseColor3

            #title-shift
                color: $baseColor2
                font-style: italic

    form#search-bar
        min-width: $minSearchFieldsWidth

        input[type="text"], button
            @extend .t3
            @include vendor(box-sizing, border-box)

            border: 1px solid $baseColor2
            font-size: 110%
            margin-bottom: 0px
            padding: 6px

        input[type="text"]
            width: 85%

            &:hover
                border-color: $baseColor1

        button#advanced-search
            background-color: white
            border: 1px solid white
            width: 15%
            height: 10%
            padding: 0px
            float: right

            &:hover
                img
                    background-color: black
                    cursor: pointer

            &.clicked
                img
                    background-color: $baseColor1

            &:focus
                outline: 0

            img
                @extend .t3

                background-color: $baseColor2
                margin-top: 5px
                width: 26px
                height: 26px

    &.partly-visible
        margin-top: 0%
        padding-bottom: 3%
        position: absolute
        width: 100%

        #title
            position: absolute
            top: -1%
            left: 1%

            span
                font-size: 50%

        form#search-bar
            padding-top: 3%
            margin-left: auto
            margin-right: auto
            width: 60%

div#advanced-search
    background-color: white
    border: 1px solid $baseColor3
    display: none
    font-size: 96%
    height: 400px
    min-width: $minSearchFieldsWidth
    padding-top: 0px
    overflow-x: auto
    overflow-y: hidden

    #heading
        color: $baseColor2
        display: block
        font-size: 120%
        padding-left: 1%
        padding-top: 1%
        width: 100%

        div
            display: inline-block
            font-size: 110%

            &#col1
                width: 25%

            &#col2
                width: 75%

    >div
        @include vendor(box-sizing, border-box)

        display: inline-block
        float: left

    #sidebar
        padding-left: 1%
        width: 25%

        >ul
            list-style: none
            padding-left: 0
            margin-bottom: 8%
            margin-top: 2%

            li
                margin-bottom: 2%

                label
                    user-select: none

                    div
                        @extend .t3

                        background-color: $lightGray
                        border: none
                        padding: 3%
                        width: 85%

                        &:hover, &.selectedInputField
                            @extend .t3

                            background-color: $baseColor2
                            color: white
                            cursor: pointer
                            width: 90%

                input[type="checkbox"]
                    display: none

                    &:checked + label > div
                        @extend .selectedInputField

                        background-color: $baseColor1
                        color: white
                        width: 90%

        button#add-group
            background-color: $lightBlue
            border: none
            color: white
            display: block
            height: 40px
            margin-bottom: 2%
            overflow: hidden
            white-space: nowrap
            width: 40px

            span
                font-size: 150%
                font-weight: bold
                margin-left: 6px
                margin-right: 14px

            &:hover
                @extend .t3

                background-color: $blue
                cursor: pointer
                width: 90%

        button#remove-group
            @extend button#add-group

            background-color: #D82D48

            span
                padding-left: 3px

            &:hover
                @extend .t3

                background-color: #F11437

    #search-groups
        margin-top: 1%
        max-height: 93%
        overflow-y: auto
        width: 75%

        .search-group
            @include vendor(transition, all 0.6s ease-out)

            background-color: $lightGray
            padding: 1%
            margin-bottom: 2%
            width: 97%

            >div
                margin-bottom: 0.7%

                >div.name
                    display: inline-block
                    font-size: 90%
                    width: 20%

                >input[type=text]
                    display: inline-block
                    padding: 2px
                    width: 60%

                >input[type=checkbox]
                    margin-left: 2%

                    &:checked + span
                        @extend .t2

                        color: green
                        font-weight: bold

                    &:hover
                        cursor: checkbox

                span.regex
                    font-size: 80%

            &#selected
                background-color: #CACACA

div#results
    margin: 3% auto 0 auto
    margin-left: auto
    margin-right: auto
    width: 80%

    /* TODO:
        1) Sidebar
            - Add way to cycle through hits in the code.
        2) Hidden info
            - Add links for authors.
            - Remove language field.
        3) Header
            - Add an icon for the website.
            - Add language tag.
        4) Code body
            - Add highlighting.
        5) Display button
            - unicode glyph */
    div.result
        width: $resultWidth
        height: 200px
        margin-bottom: 100%

        table
            border-collapse: collapse
            border: 1px solid $baseColor3
            height: inherit

            tr
                height: inherit

        &.cascade
            @extend .t3
            margin-bottom: 10%

div#display-info
    font-size: 1.3em
    padding: 5px 0px 5px 5px
    border: 1px dotted $baseColor3
    border-bottom: none
    width: 400px

    a
        text-decoration: none

        &:hover
            color: orange

    #title
        margin-right: 10px

    #site
        text-transform: capitalize

    #language
        font-size: 0.8em
        font-weight: bold
        margin-left: 100px
        padding: 3px
        @include vendor(border-radius, 2px)
        background: #ddd
        color: orange

td#sidebar
    width: $sidebarWidth
    background-color: #eee
    border-right: 1px solid $baseColor3
    height: inherit

td#code
    width: $codeWidth
    height: inherit
    border-right: 1px solid $baseColor3
    @include vendor(transition, width 0.2s ease-in-out)

    .display-all &
        width: 500px

    #tablecontainer
        overflow: scroll
        width: 100%
        height: inherit
        background-color: #49483e

        table
            table-layout:fixed
            border-collapse: collapse
            border: none
            font-family: monospace

td#display-button
    width: 25px
    background: url(https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/512/View_Details-.png)
    background-size: 25px 25px
    background-repeat: no-repeat
    background-position: center

    .display-all &
        @include vendor(transform, rotateY(180deg))

div#hidden-info
    width: $hiddenInfoWidth
    margin-left: -$hiddenInfoWidth
    height: 100%
    padding-top: 40px
    font-size: 1.2em
    line-height: 1.5em
    @include vendor(transition, margin-left 0.2s ease-in-out)

    .display-all &
        margin-left: 0px
        padding-left: 20px

    #date-created
        display: inline-block

    #date-modified
        display: block

    #authors
        a
            text-decoration: none

            &:hover
                color: orange