twister HTML + Javascript User Interface
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

376 lines
7.4 KiB

/************* 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