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
7.5 KiB
375 lines
7.5 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, .post-translate |
|
color: lighten($dark-grey,30%) |
|
&:hover |
|
color: lighten($dark-grey,5%) |
|
|
|
.related .post-expand |
|
display: none |
|
margin: 0 |
|
|
|
.post-reply, .post-propagate, .post-favorite, .post-translate |
|
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, .post-translate |
|
display: inline-block |
|
|
|
.open .related |
|
.post-reply, .post-propagate, .post-favorite, .post-translate |
|
display: none!important |
|
&:hover |
|
.post-reply, .post-propagate/*, .post-favorite*/ |
|
display: inline-block!important |
|
|
|
.post-reply:hover, .post-propagate:hover, .post-favorite:hover, .post-translate: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
|
|
|