twister-html/theme_nin/sass/_postboard.sass

/************* POST BOARD *************/

.postboard, .following
    padding-left: $column-width + $gut-width
    +box-sizing(border-box)
    width: $postboard-width
    @extend .clear-fix


.postboard-posts
    position: relative
    z-index: 1
    clear: both

.postboard-news
    font-size: 12px
    box-sizing: border-box
    position: relative
    margin-bottom: 1px
    cursor: pointer
    padding: 10px
    font-weight: 900
    clear: both
    color: white
    text-align: center
    text-transform: uppercase
    background: $main-color-color


.post, .following li
    background: $bloc-background-color
    box-sizing: border-box
    position: relative
    margin-bottom: 1px
    transition: margin .4s ease-out
    -moz-transition: margin .4s ease-out




    .post, .original.post, .post.open
        background: $bloc-background-color
        position: relative
        margin-bottom: 1px




.module.open
    .post
        color: darken($defaut-font-color, 15%)
.post:hover
    color: darken($defaut-font-color, 15%)

.post-data
    padding: 10px


.post.open
    .original, .related
        margin-bottom: 1px

.postboard-posts > .post
    &.open
        margin-top: 20px
        margin-bottom: 20px
    &:after
        content: ""
        position: absolute
        right: 0
        top: 0
        width: 0
        height: 100%
        transition: all .2s linear
    &.open:after
        width: 5px

.post:hover
    cursor: pointer

.post.new
    .post-info-time
        color: $color-green

.post.promoted
    > .post-data
        .post-text::after
            font-size: 8px
            color: #FFF
            background-color: #B4C669CC
            margin: 0px 8px
            padding: 2px 4px
            content: attr(data-promoted)
        &:hover
            .post-text::after
                background-color: $color-green

.open
    background: none
    &:hover
        background: none

.post-photo
    margin: 0
    display: inline-block
    float: left
    vertical-align: middle
    width: 48px
    height: 48px
    overflow: hidden
    img
        width: 100%
        height: 100%




.post-info-name
    font-weight: 700
    font-size: 1em
    line-height: 14px
    color: inherit
    text-decoration: none
    display: inline-block
    padding-left: 10px
    float: left


.post-info-name:hover
    text-decoration: none
    color: $main-color-light

.post-info-tag
    font-size: 12px
    opacity: .6
    margin-top: 4px
    display: inline-block

.post-info-time
    float: right
    font-size: 11px
    line-height: 14px
    text-decoration: none
    color: lighten($dark-grey,30%)
    &:hover
        color: lighten($dark-grey,5%)

.post-text
    margin: 0 0 0 58px
    word-wrap: break-word
    min-height: 25px
    padding: 0

.post-context
    font-size: 11px
    line-height: 11px
    margin: 2px 10px 4px 60px
    color: lighten($dark-grey,30%)

.mini-screen-name
    font-size: 13px
    color: $dark-grey

.post-rt-by
    margin: 0 0 1em
    div
        display: inline
    .prep:before, .prep:after
        content: ' '

.post-rt-icon
    @extend .icon-twistagain
    @extend .extend-icon
    display: block
    float: left
    background: $main-color-color
    text-align: center
    padding: 1px 2px 2px 2px
    line-height: 9px
    font-size: 9px
    +border-radius(3px)
    color: white
    margin-right: .4em

.post-interactions
    margin: 10px 0 3px 0
    text-align: right
    height: 12px
    line-height: 12px
    span, .prompt-wrapper .switch-mode
        color: lighten($dark-grey,30%)
        cursor: pointer
        font-size: 12px
        line-height: 12px

.post-expand
    color: lighten($dark-grey,30%)
    cursor: pointer
    font-size: 12px
    position: absolute
    left: 10px
    bottom: 10px
    &:hover
        color: lighten($dark-grey,5%)

.post-reply
    @extend .extend-icon
    @extend .icon-comment

.post-propagate
    @extend .extend-icon
    @extend .icon-twistagain

.post-favorite
    display: none!important
    @extend .extend-icon
    @extend .icon-star

.post .show-more
    display: inline-block
    float: right
    font-size: 12px
    color: lighten($dark-grey,30%)
    @extend .extend-icon
    @extend .icon-chat
    &:hover
        color: lighten($dark-grey,5%)


.expanded-content.show-pic
    display: block

.expanded-post
    .post-expand, .post-reply, .post-propagate, .post-favorite
        color: lighten($dark-grey,30%)
        &:hover
            color: lighten($dark-grey,5%)

.related .post-expand
    display: none
    margin: 0

.post-reply, .post-propagate, .post-favorite
    padding-left: 10px
    display: none

.post:hover, .original.open .post-interactions, .post:hover .original .post-interactions, .related.post:hover
    .post-reply, .post-propagate, .post-favorite
        display: inline-block

.open .related
    .post-reply, .post-propagate, .post-favorite
        display: none!important
    &:hover
        .post-reply, .post-propagate/*, .post-favorite*/
            display: inline-block!important

.post-reply:hover, .post-propagate:hover, .post-favorite:hover
    color: lighten($dark-grey,5%)

.expanded-content
    display: none
    padding: 5px 5px 0 5px
    @extend .clear-fix

.image-preview
    width: 100%
    display: block
    margin: auto

.preview-container
    max-height: 500px
    width: 100%
    text-align: center
    overflow-y: auto
    background: black

.post-stats
    display: flex
    height: 34px
    margin: 0 12px 8px 55px
    > div
        line-height: 16px
        vertical-align: middle
    .stat-count
        font-size: 12px
        color: lighten($dark-grey, 30%)
        padding-right: 4px
        border-right: solid 1px $light-grey
        .stat-count-value
            font-weight: bold
    .avatar-row
        padding: 4px
        a
            display: inline-block
            position: relative
            margin-right: 2px
            &:hover
                .user-name-tooltip
                    display: inline-block

.post .new-replies-available
    text-align: center
    margin-top: 8px
    button
        font-size: 10px
        background-color: #B4C669
        &:hover
            background-color: #aaa


.user-name-tooltip
    display: none
    position: absolute
    background: lighten($main-color-dark,3%)
    font-size: 12px
    white-space: nowrap
    padding: 3px 5px
    color: #fff
    top: -28px
    left: 2px
    &:after
        content: ""
        position: absolute
        width: 0
        left: 4px
        bottom: -4px
        border-top: solid 5px lighten($main-color-dark,3%)
        border-left: solid 5px transparent
        border-right: solid 5px transparent

.post-replies .sub-replies
    border-left: solid 3px $main-color-color
    margin-left: 1px


/* MODAL */
.modal-content
    .postboard
        width: auto!important
        padding: 0
        clear: none!important
        position: relative
    .post-text
        margin: 0 0 0 40px
    .post-photo
        width: 30px
        height: 30px
        img
            width: 100%
            height: 100%


.post-rt-reference
    background-color: #FAFAFA
    border: 1px solid #ccc
    padding: 2px
    &:hover
        background-color: #FFF
        cursor: pointer
    .post-photo
        width: 24px
        height: 24px
        margin-right: 4px
        img
            width: 24px
            height: auto
    .post-info-name
        font-size: 11px
    .post-text
        font-size: 11px
        margin: 4px 4px 4px 28px
    .post-info-time
        font-size: 9px
        color: #B3B5B7