diaspora/app/assets/stylesheets/single-post-view.css.scss
2014-05-15 07:23:44 -04:00

261 lines
4.9 KiB
SCSS

#single-post-container {
padding-top: 20px;
}
#single-post-content {
border-right: solid 1px #cccccc;
padding-right: 12px;
#head {
padding-bottom: 10px;
border-bottom: 1px solid $border-grey;
#post-info {
.author{ color: $grey; }
.info {
color: lighten($text-grey,10%);
font-size: 12px;
.post-time a { color: $text-grey; }
.post_scope { margin-right: 5px; }
.status-message-location {
padding-top: 2px;
line-height: 14px;
}
}
.avatar.medium {
max-width: 75px;
}
.bd {
padding-left: 10px;
}
}
.row-fluid.reshare {
border-top: 1px solid lighten($border-grey,5%);
padding-top: 10px;
margin-top: 10px;
}
#reshare-info {
line-height: 15px;
i.retweet {
color: $text-dark-grey;
font-size: 28px;
line-height: 30px;
margin-left: 8px;
margin-right: 8px;
}
.post-time a {
color: $text-grey;
display: block;
font-size: 12px;
}
.avatar {
height: 30px;
width: 30px;
}
.img { margin-right: 10px; }
}
#single-post-actions {
padding-right: 5px;
i {
font-size: 28px;
line-height: 30px;
}
i.comment:hover {
color: #424242;
}
.post_report i.gray:hover {
color: $red;
}
i.heart.gray:hover {
color: $red;
}
i.heart.red:hover {
color: #f55f5a;
}
i.retweet:hover {
color: #3f8fba;
}
time {
float: right;
margin-left: 3px;
}
a {
margin: 0 0 0 6px;
&:hover {
text-decoration: none;
}
}
}
}
#body {
margin-left: 20px;
padding-top: 20px;
width: auto;
p {
margin: 0 0 1em 0;
word-wrap: break-word;
}
.photo_attachments {
padding-bottom: 10px;
text-align: center;
img {
&.big_stream_photo {
display: block;
max-width: 90%;
}
&.thumb_small {
display: inline;
max-width: 50px;
max-height: 50px;
}
margin-left: auto;
margin-right: auto;
padding-bottom: 5px;
}
}
.oembed {
background: image-url("ajax-loader2.gif") no-repeat center center;
float: left;
width: 95%;
.thumb {
@include video-overlay;
}
iframe, .thumb img {
width: 100%;
min-height: 60%;
}
}
}
}
#single-post-interactions {
border-left: 1px solid #cccccc;
position: relative;
left: -1px;
margin-left: 0;
padding-left: 15px;
.comments .comment {
border-bottom: solid 1px #cccccc;
padding-top: 10px;
padding-bottom: 10px;
p {
margin: 0 0 1em 0;
word-wrap: break-word;
&:last-child {
margin-bottom: 0;
}
}
}
.no_comments {
padding-top: 10px;
padding-bottom: 10px;
background-color: $background-grey;
text-align: center;
@include border-radius(4px);
margin-bottom: 30px;
}
textarea {
width: 95%;
}
.new_comment_form_wrapper {
border-bottom: none;
}
a {
color: #3f8fba;
}
.timeago {
font-size: smaller;
}
.count {
i {
display: inline-block;
text-align: center;
width: 25px;
vertical-align: middle;
}
span {
margin-left: -3px;
width: 30px;
display: inline-block;
text-align: center;
}
}
#reshares, #likes, #comments-meta {
margin-left: 7px;
margin-bottom: 8px;
}
}
.comment {
&:hover {
.controls {
@include opacity(0.3);
}
}
>.highlighted {
border-left: 3px solid $blue;
padding-left: 3px;
}
.controls {
@include transition(opacity);
@include opacity(0);
z-index: 6;
float: right;
&:hover {
@include opacity(1);
}
.comment_report {
display: inline-block;
.icons-report {
height: 14px;
width: 14px;
}
}
.delete {
display: inline-block;
.icons-deletelabel {
height: 14px;
width: 14px;
}
}
a:hover {
text-decoration: none;
}
}
.submit_button {
input {
float: right;
}
padding-left: 12px;
width: 95%;
}
.button.creation {
$button-border-color: #aaa;
@include border-radius(3px);
@include box-shadow(0,1px,1px,#cfcfcf);
@include transition(border);
@include button-gradient($creation-blue);
font: {
size: 12px;
}
color: #fff;
padding: 4px 9px;
min-width: 90px;
min-height: 10px;
border: 1px solid darken($button-border-color,20%);
cursor: pointer;
white-space: nowrap;
&:hover {
@include button-gradient-hover($creation-blue);
border: 1px solid darken($button-border-color,35%);
text-decoration: none;
}
}
}