Nin is a theme for twister-html
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.
 
 
 
 

375 lines
6.1 KiB

/************* TOP TEXTAREA *************/
#postboard-top
position: relative
@extend .clear-fix
margin-bottom: 10px
transition: height .3s linear
padding: 15px
background: white
overflow: hidden
background: $bloc-light-color
+transition-property( top)
+transition-duration(.1s)
+transition-timing-function(ease-out)
top: 0
+box-shadow(1px 2px 2px rgba(#111, 0.1))
z-index: 120
.profile-photo
position: absolute
top: 10px
left: 10px
width: $mini-usr-img
img
width: 100%
.post-area
overflow: hidden
@extend .clear-fix
width: 100%
padding-left: 58px
padding-right: 0
display: inline
+box-sizing(border-box)
background: none
float: right
.post-area-new
@extend .open
+box-shadow(none)
textarea
margin: 0 0 10px 0
&.onTop
position: fixed
bottom: 0
left: 0
top: auto
margin-bottom: 0
z-index: 2000
+box-shadow(0 -5px 13px rgba(#111, 0.2))
width: 320px
max-width: 100%
.profile-photo
display: none!important
.post-area
padding-left: 0
/************* POSTBOARD *************/
.postboard
width: $postboardWidth
float: left
h2, .postboard-news
display: none
&.large
width: $postboardLargeWidth
.postboard-posts
position: relative
z-index: 1
clear: both
.post
position: relative
margin-bottom: 1px
+transition-property(margin)
+transition-duration(.5s)
+transition-timing-function(ease-out)
color: $defaut-font-color
cursor: pointer
&:hover
color: #000
.show-more
display: inline-block
float: right
font-size: .8rem
color: lighten($dark-grey,30%)
&:hover
color: lighten($dark-grey,5%)
.post-expand
color: lighten($dark-grey,30%)
background: $bloc-light-color
cursor: pointer
font-size: .8rem
position: absolute
left: 10px
bottom: 10px
&:hover
color: lighten($dark-grey,5%)
.post-data
padding: 15px
background: $bloc-light-color
/*********** EVERYTHING SPECIFIC TO OPEN POSTS **************/
> .post
+box-shadow(1px 2px 2px rgba(#111, 0.1))
&.open
margin-top: $space
margin-bottom: $space
+box-shadow(1px 2px 2px rgba(#111, 0))
.post
color: darken($defaut-font-color, 15%)
+box-shadow(1px 2px 2px rgba(#111, 0.1))
margin-bottom: 1px
&:not(.original)
.post-expand
display: none
margin: 0
.post-photo
margin: 0
display: inline-block
float: left
vertical-align: middle
overflow: hidden
width: $mini-usr-img
margin: 0 15px 15px 0
max-height: $mini-usr-img
clear: both
img
width: 100%
height: auto!important
.post-info-name
font-weight: 500
color: inherit
text-decoration: none
display: inline-block
font-size: 1rem
float: left
&:hover
text-decoration: none
color: black
.post-info-tag
font-size: .8rem
opacity: .6
margin-top: 4px
display: inline-block
.post-info-sent
display: block
position: absolute
top: -10px
right: 0
font-size: 15px
.post-info-time
position: absolute
font-size: .8rem
line-height: .8rem
text-decoration: none
top: 12px
right: 0
padding-right: 11px
text-align: right
color: lighten($dark-grey,30%)
&:hover
color: lighten($dark-grey,5%)
.post-text
margin: 0 0 0 ($mini-usr-img +15)
word-wrap: break-word
min-height: $mini-usr-img - 20
padding: 0
a:hover
text-decoration: underline
.post-context
font-size: .8rem
line-height: .8rem
margin: 2px 0 4px 60px
color: lighten($dark-grey,30%)
&.post-retransmited-by-container
margin: 0 0 1em
.post-retransmited-icon
@extend .ion-shuffle
@extend .ion
&:before
display: block
float: left
color: $main-color-color
line-height: .8rem
font-size: .8rem
margin-right: .4em
// .post-interactions (reply, retransmit, fav)
.post-interactions
margin: 10px 0 3px 0
text-align: right
height: .8rem
line-height: .8rem
span
color: lighten($dark-grey,30%)
cursor: pointer
font-size: .8rem
line-height: .8rem
@extend .ion
position: relative
margin-left: 7px
display: none
.open .original &
display: inline-block!important
&:hover
color: lighten($dark-grey,5%)
&:before
padding: 3px
&.post-reply
@extend .ion-plus
&.post-propagate
@extend .ion-shuffle
&.post-favorite
@extend .ion-alert
.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
.expanded-content
//display: none
padding: 0
@extend .clear-fix
textarea
clear: left
.image-preview
max-width: 100%
width: auto
display: block
margin: auto
.preview-container
width: 100%
text-align: center
overflow-y: auto
background: black
clear: both
.post-stats
float: left
clear: left
li
display: inline-block
&.stat-count
font-size: 12px
float: left
line-height: 20px
@extend .ion-shuffle
@extend .ion
&:before
margin-right: 0
span:last-child
display: none
a
position: relative
text-decoration: none
display: inline-block
width: 20px
height: 20px
margin: 0 2px 0 0
img
width: 20px
height: 20px
+border-radius(3px)
//what appears on top of .avatar-row img on hover
.avatar-row
margin-left: 5px
a:hover
.user-name-tooltip
display: block
.user-name-tooltip
display: none
position: absolute
background: $main-color-dark
font-size: 11px
line-height: 11px
white-space: nowrap
padding: 5px
+border-radius(3px)
color: #fff
top: -32px
left: -10px
&:after
content: ""
position: absolute
width: 0
left: 13px
bottom: -5px
border-top: solid 5px $main-color-dark
border-left: solid 5px transparent
border-right: solid 5px transparent
// Posts replies get left border to show threads
.post-replies .sub-replies
border-left: solid 18px transparent
.post-rt-reference
padding: 10px
margin-top: 10px
position: relative
border: 1px solid #eee
+border-radius(3px)
&:hover
background-color: #FFF
cursor: pointer
.post-photo
display: none
.post-info-name
font-size: 12px
.post-text
margin: 5px 0 0 0
clear: both
font-size: 12px
line-height: 130%
.post-info-time
font-size: 80%
.post-area
padding-left: 0