szurubooru/client/css/post-main-view.styl

@import colors

.post-view
    width: 100%
    display: flex !important
    flex-direction: row

    >.sidebar
        margin-right: 1em
        min-width: 20em
        max-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
            @media (max-width: 800px)
                margin-top: 2em

    >.content
        width: 100%

    .post-container
        margin-bottom: 2em

        .post-content
            margin: 0

@media (max-width: 800px)
    .post-view
        flex-wrap: wrap
        >.sidebar
            order: 2
            min-width: 100%
            max-width: 0
            margin-right: 0
        >.content
            order: 1


.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
        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
        &>label
            width: 100%
        .radio-wrapper
            display: flex
            flex-wrap: wrap
        .radio-wrapper label
            flex-grow: 1
            display: inline-block

    .management
        ul
            list-style-type: none
            margin: 0
            padding: 0
            li
                margin: 0
                padding: 0

    .post-source
        textarea
            white-space: pre
            overflow-wrap: normal
            overflow-x: scroll

    form
        width: auto

    label:not(.file-dropper)
        margin-bottom: 0.3em
        display: block

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

    .messages
        margin-top: 1em