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

@import mixins
@import variables

$minSearchFieldsWidth: 490px
$resultWidth: 1000px
$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
    z-index: 2
    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%
        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%

            input:hover
                @extend .t3

                border: 1px solid $baseColor1

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: 87%
        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%

    a
        text-decoration: none

        &:hover
            color: orange

    div.result
        width: $resultWidth
        height: 200px
        margin-bottom: 100%

        @include vendor(transition, opacity 0.2s ease-in-out)
        @include vendor(opacity, 0.7)

        table
            border-collapse: collapse
            height: inherit

            tr
                height: inherit

        &.cascade
            @extend .t1
            margin-bottom: 15%

        &.display-all
            @include vendor(opacity, 1.0)

div#display-info
    font-size: 1.3em
    padding: 5px 0px 5px 5px
    width: 100%

    #title
        margin-right: 10px

    #site
        text-transform: capitalize

td#code
    width: $codeWidth
    height: inherit
    padding: 0px
    border: 1px solid #bbb

    @include vendor(transition, width 0.2s ease-in-out)

    #tablecontainer
        overflow: hidden
        width: 100%
        height: inherit
        background-color: #49483e
        position: relative
        z-index: 1

        table
            border-collapse: collapse
            font-family: monospace

            .linenos
                padding-left: 1%

                pre
                    margin-top: 5px

            .code pre
                margin-top: 5px

            .hll
                background: #5B5A51

div#hidden-info
    width: $hiddenInfoWidth
    margin-left: -$hiddenInfoWidth - 10px
    height: 100%
    padding-top: 40px
    font-size: 1.2em
    line-height: 1.5em
    position: relative
    z-index: 0

    @include vendor(transition, margin-left 0.2s ease-in-out)

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

    span
        font-family: monospace
        color: $baseColor1
        float: right

    div
        display: block

    #authors
        a
            font-family: monospace