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.
313 lines
5.0 KiB
313 lines
5.0 KiB
/************* POST BOARD *************/ |
|
|
|
|
|
// vars for postboard |
|
|
|
$avatar-width : 48px |
|
|
|
|
|
.postboard |
|
float: left |
|
width: 50% |
|
padding: 20px |
|
h2 |
|
display: none |
|
.postboard-posts |
|
position: relative |
|
z-index: 1 |
|
clear: both |
|
|
|
.postboard-news |
|
display: none |
|
|
|
.post |
|
background: $bloc-background-color |
|
position: relative |
|
margin-bottom: 1px |
|
+transition-property(margin) |
|
+transition-duration(.4s) |
|
+transition-timing-function(ease-out) |
|
|
|
.post, .original.post, .post.open |
|
position: relative |
|
|
|
|
|
.module.open |
|
.post |
|
color: darken($defaut-font-color, 15%) |
|
|
|
.post:hover |
|
color: darken($defaut-font-color, 15%) |
|
|
|
.post-data |
|
padding: $space |
|
|
|
|
|
.post.open |
|
.original, .related |
|
margin-bottom: 1px |
|
|
|
|
|
.postboard-posts > .post |
|
|
|
&.open |
|
margin-top: $space |
|
margin-bottom: $space |
|
|
|
&:after |
|
content: "" |
|
position: absolute |
|
right: 0 |
|
top: 0 |
|
width: 0 |
|
height: 100% |
|
transition: all .2s linear |
|
&.open:after |
|
width: 5px |
|
|
|
|
|
.post:hover |
|
cursor: pointer |
|
|
|
|
|
.open |
|
background: none |
|
@extend .box-shadow |
|
|
|
&:hover |
|
background: none |
|
|
|
.post-photo |
|
margin: 0 |
|
display: inline-block |
|
float: left |
|
vertical-align: middle |
|
width: $avatar-width |
|
height: $avatar-width |
|
overflow: hidden |
|
img |
|
width: 100% |
|
height: 100% |
|
//+border-radius(50%) |
|
|
|
|
|
.post-info-name |
|
font-weight: 600 |
|
color: inherit |
|
text-decoration: none |
|
display: inline-block |
|
float: left |
|
margin-left: 10px |
|
|
|
|
|
.post-info-name:hover |
|
text-decoration: none |
|
color: black |
|
|
|
.post-info-tag |
|
font-size: 12px |
|
opacity: .6 |
|
margin-top: 4px |
|
display: inline-block |
|
|
|
.post-info-time |
|
position: absolute |
|
font-size: 11px |
|
line-height: 14px |
|
text-decoration: none |
|
top: 11px |
|
right: 11px |
|
color: lighten($dark-grey,30%) |
|
&:hover |
|
color: lighten($dark-grey,5%) |
|
|
|
.post-text |
|
margin: 0 0 0 ($avatar-width +10) |
|
word-wrap: break-word |
|
min-height: $avatar-width |
|
padding: 0 |
|
samp |
|
background: $background-light |
|
font-size: .9rem |
|
line-height: .9rem |
|
display: inline-block |
|
padding: 5px 8px |
|
+border-radius(2px) |
|
color: #333 |
|
font-weight: 500 |
|
font-family: monospace |
|
|
|
|
|
.post-context |
|
font-size: 11px |
|
line-height: 11px |
|
margin: 0 0 1em 0 |
|
color: lighten($dark-grey,30%) |
|
span |
|
@extend .icon-twistagain |
|
@extend .extend-icon |
|
&:before |
|
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 |
|
|
|
.mini-screen-name |
|
font-size: 13px |
|
color: $dark-grey |
|
|
|
.post-retransmited-icon |
|
display: none |
|
|
|
.post-interactions |
|
margin: 10px 0 3px 0 |
|
text-align: right |
|
height: 12px |
|
line-height: 12px |
|
span |
|
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, .post-propagate, .post-favorite |
|
@extend .extend-icon |
|
padding-left: 10px |
|
display: none |
|
&:hover |
|
color: lighten($dark-grey,5%) |
|
|
|
.post-reply |
|
@extend .icon-comment |
|
|
|
.post-propagate |
|
@extend .icon-twistagain |
|
|
|
.post-favorite |
|
display: none!important |
|
@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: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 |
|
|
|
|
|
|
|
.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 |
|
float: left |
|
li |
|
display: inline-block |
|
&.stat-count |
|
font-weight: 700 |
|
font-size: 11px |
|
float: left |
|
line-height: 20px |
|
color: llighten($dark-grey,30%) |
|
span:last-child |
|
padding-right: 5px |
|
a |
|
position: relative |
|
text-decoration: none |
|
display: inline-block |
|
width: 20px |
|
height: 20px |
|
margin: 0 1px 0 0 |
|
img |
|
width: 20px |
|
height: 20px |
|
|
|
|
|
.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: -42px |
|
left: 0px |
|
&:after |
|
content: "" |
|
position: absolute |
|
width: 0 |
|
left: 4px |
|
bottom: -5px |
|
border-top: solid 5px lighten($main-color-dark,3%) |
|
border-left: solid 5px transparent |
|
border-right: solid 5px transparent |
|
|
|
.post-stats a:hover .user-name-tooltip |
|
display: inline-block |
|
|
|
.post-replies .sub-replies |
|
border-left: solid 3px $main-color-color |
|
margin-left: 1px |
|
|
|
|