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.
395 lines
6.5 KiB
395 lines
6.5 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 |
|
|
|
&.promoted |
|
> .post-data |
|
.post-text::after |
|
font-size: 70% |
|
color: #FFF |
|
background-color: rgba($color-green, 0.75) |
|
margin: 0px 8px |
|
padding: 2px 4px |
|
content: attr(data-promoted) |
|
&:hover |
|
.post-text::after |
|
background-color: $color-green |
|
|
|
|
|
|
|
|
|
|
|
/*********** 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-rt-by |
|
margin: 0 0 1em |
|
div |
|
display: inline |
|
.prep:before, .prep:after |
|
content: ' ' |
|
|
|
|
|
.post-rt-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, .post-translate |
|
display: inline-block |
|
|
|
|
|
.open .related |
|
.post-translate, |
|
.post-reply, |
|
.post-propagate, |
|
.post-favorite |
|
display: none!important |
|
&:hover |
|
.post-translate, |
|
.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 |
|
display: flex |
|
float: left |
|
clear: left |
|
height: 34px |
|
> div |
|
line-height: 16px |
|
vertical-align: middle |
|
.stat-count |
|
font-size: 12px |
|
padding-right: 4px |
|
border-right: solid 1px $light-grey |
|
div:last-child |
|
display: none |
|
.avatar-row |
|
padding: 4px |
|
a |
|
display: inline-block |
|
position: relative |
|
margin-right: 2px |
|
|
|
.post |
|
.new-replies-available |
|
text-align: center |
|
margin-top: 8px |
|
button |
|
@include button-color-basic |
|
|
|
|
|
|
|
|
|
//what appears on top of .avatar-row img on hover |
|
|
|
.avatar-row |
|
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: -28px |
|
left: -10px |
|
&:after |
|
content: "" |
|
position: absolute |
|
width: 0 |
|
left: 13px |
|
bottom: -4px |
|
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
|
|
|