@import colors
$safety-safe = #88D488
$safety-sketchy = #F3D75F
$safety-unsafe = #F3985F

.post-view
    width: 100%
    display: flex !important
    flex-direction: row
    >.sidebar
        margin-right: 1em
        max-width: 20em
        min-width: 20em
        line-height: 160%

        a:active
            border: 0
            outline: 0

        nav.buttons
            margin-top: 0
            display: flex
            flex-wrap: wrap
            article
                flex: 1 0 33%
                a
                    display: inline-block
                    width: 100%
                    padding: 0.3em 0
                    text-align: center
                    vertical-align: middle
                    transition: background 0.2s linear
                    &:not(.inactive):hover
                        background: lighten($main-color, 90%)
                i
                    font-size: 140%
                text-align: center

    >.content
        width: 100%

    .post-container
        margin-bottom: 2em

        .post-content
            margin: 0

.post-list
    ul
        list-style-type: none
        margin: 0
        padding: 0
        display: flex
        align-content: flex-end
        flex-wrap: wrap
        margin: 0 -0.25em

        li
            position: relative
            flex-grow: 1
            margin: 0 0.25em 0.5em 0.25em
            display: inline-block
            text-align: left
            min-width: 10em
            width: 12vw
            &:not(.flexbox-dummy)
                min-height: 7.5em
                height: 9vw

            .thumbnail-wrapper
                display: inline-block
                width: 100%
                height: 100%
                line-height: 80%
                font-size: 80%
                color: white
                outline-offset: -3px
                box-shadow: 0 0 0 1px rgba(0,0,0,0.2)

                .type, .stats
                    position: absolute
                    bottom: 0.5em
                    padding: 0.33em 0.5em
                    background: rgba(0,0,0,0.5)
                    height: 1em

                .type
                    float: left
                    left: 0.5em
                    &[data-type=image]
                        display: none

                .stats
                    float: right
                    right: 0.5em
                    text-align: right
                    i
                        margin-right: 0.25em
                    .icon:not(:first-of-type)
                        margin-left: 1em

            .masstag
                position: absolute
                top: 0.5em
                left: 0.5em
                display: inline-block
                padding: 0.5em
                box-sizing: border-box
                border: 0
                &:after
                    display: inline-block
                    width: 1em
                    height: 1em
                    text-align: center
                    line-height: 1em
                    font-size: 20pt
                &.tagged
                    background: rgba(0, 230, 0, 0.7)
                    &:after
                        color: white
                        content: '-'
                &:not(.tagged)
                    background: rgba(255, 0, 0, 0.7)
                    &:after
                        color: white
                        content: '+'
                &[data-disabled]
                    background: rgba(200, 200, 200, 0.7)

            .thumbnail
                background-position: 50% 30%
                width: 100%
                height: 100%
                margin: 0
                outline-offset: -3px

            &:hover
                background: $main-color
                .thumbnail
                    opacity: .9

            &:hover a, a:active, a:focus
                box-shadow: 0 0 0 1px $main-color
                .thumbnail
                    outline: 3px solid $main-color

.post-list-header
    label
        display: none
    text-align: left
    form
        width: auto
        *
            vertical-align: top
    input[name=search-text]
        width: 25em
        max-width: 90vw
    input[name=masstag]
        width: 15em
        margin-left: 1em
    .append
        font-size: 0.95em
        color: $inactive-link-color
    .masstag
        &:not(.active)
            [type=text],
            .start-tagging,
            .stop-tagging
                display: none

    .safety
        &.safety-safe
            background-color: $safety-safe
            border-color: @background-color
            &.disabled
                background-color: alpha(@background-color, 0.15)
        &.safety-sketchy
            background-color: $safety-sketchy
            border-color: @background-color
            &.disabled
                background-color: alpha(@background-color, 0.15)
        &.safety-unsafe
            background-color: $safety-unsafe
            border-color: @background-color
            &.disabled
                background-color: alpha(@background-color, 0.15)

.post-container
    .post-content.transparency-grid img
        background: url('/img/transparency_grid.png')

    text-align: center
    .post-content
        text-align: left
        margin: 0 auto
        position: relative

        img, object, video, .post-overlay
            position: absolute
            height: 100%
            width: 100%
            left: 0
            right: 0
            top: 0
            bottom: 0

        .post-overlay
            pointer-events: none

        .post-overlay>*
            position: absolute
            left: 0
            right: 0
            top: 0
            bottom: 0
            width: 100%
            height: 100%

        .notes
            stroke-width: 1px
            polygon
                fill: $note-overlay-background-color
                stroke: $note-overlay-border-color
                pointer-events: auto

.note-text
    position: absolute
    max-width: 22.5em
    margin-top: -0.5em
    display: none

    &>.wrapper
        background: $note-text-background-color
        padding: 0.5em
        border: 1px solid $note-text-border-color
        color: $note-text-text-color
        margin-top: 1em

        p:last-of-type
            margin-bottom: 0
        p:first-of-type
            margin-top: 0

.post-view .readonly-sidebar
    .details
        i
            margin-right: 0.6em
            display: inline-block
            width: 1em
            text-align: center

        .safety-safe
            color: $safety-safe
        .safety-sketchy
            color: $safety-sketchy
        .safety-unsafe
            color: $safety-unsafe

        .upload-info
            .thumbnail
                width: 1em
                height: 1em
                margin: -0.1em 0.6em 0 0

        .zoom
            margin-top: 1em
            a
                display: inline-block
            .active
                text-decoration: underline

        .social
            margin-top: 1em
            .score-container
                float: left
                margin-right: 3em
                .downvote i
                    text-align: right
            i
                text-align: left
                margin: 0
            .value
                text-align: center
                display: inline-block
                width: 2em

    .relations
        margin-top: 2em
        h1
            margin-bottom: 0.5em
        .thumbnail
            background-position: 50% 30%
            width: 4em
            height: 3em
            margin: 0
        li
            margin: 0 0.3em 0.3em 0
            display: inline-block

    .tags
        margin-top: 2em
        h1
            margin-bottom: 0.5em

.post-view .edit-sidebar
    .expander-content
        section:not(:last-child)
            margin-bottom: 1em

    .safety
        display: flex
        flex-wrap: wrap
        label:not(.radio)
            width: 100%
        .radio
            flex-grow: 1
            display: inline-block

    .management
        li
            margin: 0

    label
        margin-bottom: 0.3em
        display: block

    input[type=submit],
    input[type=button],
    button
        margin-top: 1em
        width: 100%
        &:focus
            border: 2px solid $text-color !important