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

@import mixins
@import variables

$minSearchFieldsWidth: 490px
// $resultWidth: 400px
$codeWidth: 700px
$hiddenInfoWidth: 300px

.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#body
    @extend .t3

    &.faded
        @include opaque(0.8)

div#hotkey-help
    $width: 40%

    background-color: white
    border: 1px solid $baseColor3
    left: 50% - $width / 2
    min-width: 400px
    padding: 35px
    position: fixed
    top: 30%
    width: $width
    z-index: 200

    &.hidden
        display: none

    div
        border-bottom: 1px solid $baseColor2
        color: $baseColor1
        font-size: 130%
        padding-bottom: 8px
        text-align: center

    ul
        list-style: none
        margin-left: auto
        margin-right: auto
        position: relative
        width: 300px

        li
            margin-bottom: 4px

            span.hotkey
                color: $baseColor1
                font-family: monospace
                font-size: 130%
                font-weight: bold

            span.seperator
                color: $baseColor2

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"]#query
            width: 100%

            &:hover
                border-color: $baseColor1

        button#advanced-search
            background-color: white
            border: none
            color: $baseColor2
            font-size: 1.1em
            font-style: italic

            &:hover
                color: $baseColor1
                cursor: pointer

            &.clicked
                color: $baseColor1

            &:focus
                outline: 0

    &.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
            min-width: 800px
            width: 60%

            input
                @extend .t3

                &#query
                    width: 80%

                &:hover
                    border: 1px solid $baseColor1

            button#advanced-search
                margin-left: 30px

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%

                button
                    border: none
                    color: white
                    float: right
                    font-size: 80%
                    font-weight: bold
                    padding-left: 4%
                    padding-right: 4%

                    &:hover
                        cursor: pointer

                    &#add-group
                        background-color: #7FAFFC
                        margin-right: 1%

                        &:hover
                            background-color: #609AF8

                    &#remove-group
                        background-color: #E74C4C

                        &:hover
                            background-color: #D63636

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

    #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%

            &:hover
                cursor: pointer

            &#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#error
        font-size: 170%
        margin-top: 22%
        text-align: center

        span
            margin-right: 10px
            font-size: 150%

            &#s1
                color: $baseColor1

            &#s2
                color: $baseColor2

    &.disable-hover
        pointer-events: none

div.result
    @extend .t3

    // width: $resultWidth
    height: 200px
    margin-bottom: 100%
    pointer-events: auto

    table
        border-collapse: collapse
        height: inherit

        tr
            @extend .t3
            @include opaque(0.8)

            height: inherit

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

    &.display-all
        table tr
            @include opaque(1.0)

        #tablecontainer
            max-width: 70%
            overflow: auto !important

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

    #title
        margin-right: 10px

    #site
        text-transform: capitalize

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

    width: $codeWidth
    max-width: $codeWidth
    height: inherit
    padding: 0px

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

        // &:hover
            // overflow: auto

        table
            border-collapse: collapse
            font-family: monospace

            .linenos
                padding-left: 8px

                pre
                    margin-top: 5px

            .code pre
                margin-top: 5px

            .hll
                background: #5B5A51

div#hidden-info
    width: $hiddenInfoWidth
    margin-left: -$hiddenInfoWidth
    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: -$hiddenInfoWidth / 1.5
        padding-left: 20px

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

    div
        display: block

    #authors
        a
            font-family: monospace