diaspora/app/assets/stylesheets/stream_element.css.scss
2014-01-17 22:11:17 +01:00

281 lines
4 KiB
SCSS

.stream {
audio {
display: block;
margin: 5px 0;
}
.stream_element {
border-bottom: 1px solid $border-grey;
p {
&:last-child {
padding-bottom: 0;
margin-bottom: 0;
}
}
&:first-child {
border-top: none;
}
ul {
li {
list-style: disc;
}
}
.youtube-player, .vimeo-player {
border: none;
height: 304px;
width: 410px;
}
}
}
.stream_element {
a.author {
font-weight: bold;
unicode-bidi: bidi-override;
}
.photo_attachments {
margin-top: 7px;
}
img {
max-width: 100%;
}
.bd {
> img {
height: 30px;
width: 30px;
float: left;
margin-right: 10px;
}
}
.info {
font-size: 11px;
}
.stream_photo {
float: left;
margin-top: 6px;
}
.controls:first-child {
.control_icon {
@include transition(opacity);
@include opacity(0);
}
}
&:hover {
.controls:first-child {
.control_icon {
@include opacity(0.3);
}
.control_icon:hover {
@include opacity(1);
}
}
}
}
.status_message_show {
.comment_box {
width: 653px;
margin-bottom: 5px;
}
}
.post_scope {
cursor: default;
}
.stream_element .reshare,
.comment {
.avatar {
width: 30px;
height: 30px;
}
}
.likes,
.stream_element div.reshare {
font-size: 12px;
}
.comment, .stream_element {
>.highlighted {
border-left: 3px solid $blue;
padding-left: 3px;
}
}
.comment.no-border {
&.media {
border: none;
padding: 0;
}
}
.comment {
&.media {
margin-left: 0;
margin-right: 0;
border-top: 1px dotted #aaa;
padding-top: 10px;
.controls {
.comment_delete {
@include transition(opacity);
@include opacity(0);
}
}
&:hover {
.controls {
.comment_delete {
@include opacity(0.3);
}
.comment_delete:hover {
@include opacity(1);
}
}
}
}
.youtube-player, .vimeo-player {
border: none;
height: 250px;
width: 400px;
}
.ltr {
ol, ul {
padding-left: 2em;
li {
padding: 0px;
border: none;
list-style: inherit;
}
}
}
.right {
right: 4px;
}
}
.stream_element {
.new_comment_form_wrapper {
width: 415px;
}
}
.stream_element .bd {
& > .likes, & > .comments {
margin-right: 15px;
}
}
.status-message-location {
.near-from {
font-size: smaller;
color: #aaa;
width: 100%;
float: left;
}
.address {
font-size: 11px;
color: #bbb;
}
}
.stream_element .post-content .reshare {
border-left: 2px solid $border-grey;
}
.stream_element.loaded .media .bd .feedback {
clear: both;
}
form.new_comment {
input {
display: none;
}
textarea {
height: 21px;
font-size: 12px;
width: 364px;
}
&.open {
input {
display: block;
}
}
}
.stream_element {
.subject {
font-size: 13px;
font-weight: bold;
color: #444;
overflow: hidden;
white-space: nowrap;
}
.last_author {
font-size: 12px;
color: $text-dark-grey;
}
.collapsible {
overflow: hidden;
position: relative;
p {
margin: 0 0 0.8em;
}
p:last-of-type {
margin: 0;
}
.expander {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 30px;
text-align: center;
line-height: 48px;
font-size: .8em;
color: $grey;
text-shadow: 0 0 7px #FFF;
cursor: pointer;
border-bottom: 2px solid $border-grey;
@include border-radius(0, 0, 3px, 3px);
@include linear-gradient(rgba(255,255,255,0) , #EEE, 0%, 95%);
background-color: transparent;
}
.oembed {
background: image-url('ajax-loader2.gif') no-repeat center center;
float: left;
width: 100%;
.thumb {
@include video-overlay();
}
iframe, .thumb img {
width: 100%;
}
}
}
}