discourse/app/assets/stylesheets/embed.scss

178 lines
2.9 KiB
SCSS

@import "./vendor/normalize";
@import "./common/foundation/base";
@import "./common/foundation/variables";
@import "./common/foundation/colors";
@import "./common/foundation/mixins";
article.post {
border-bottom: 1px solid #ddd;
img.avatar {
border-radius: 50%;
}
&.deleted {
background-color: #ffe5e5;
}
.quote .title {
border-left: 5px solid darken(dark-light-diff($primary, $secondary, 97%, -45%), 10%);
background-color: dark-light-diff($primary, $secondary, 97%, -45%);
padding: 10px 10px 0 12px;
.avatar { margin-right: 7px; }
}
ol, ul {
clear: none;
}
blockquote {
padding: 10px 8px 10px 13px;
margin: 0 0 10px 0;
background-color: dark-light-diff($primary, $secondary, 97%, -45%);
border-left: 5px solid darken(dark-light-diff($primary, $secondary, 97%, -45%), 10%);
p {
margin: 0 0 10px 0;
}
p:last-of-type {
margin-bottom:0;
}
}
.post-date {
float: right;
color: #aaa;
font-size: 0.857em;
margin: 10px 4px 0 0;
}
.author {
padding: 10px 5px;
float: left;
img {
max-width: 45px;
border-radius: 50%;
}
}
.cooked {
padding: 10px 0;
margin-left: 65px;
word-wrap: break-word;
word-break: break-word;
pre {
white-space: pre-wrap;
}
img {
max-width:100%;
}
p {
margin: 0 0 1em 0;
}
}
}
.username {
font-size: 0.929em;
margin: 0 0 10px 0;
a {
color: #5c5c5c
}
a.staff {
background-color: #ffffc2;
}
a.new-user {
color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%));
}
span.title {
font-weight: normal;
color: #999;
}
}
img.emoji {
width: 20px;
height: 20px;
}
.in-reply-to {
font-size: 0.929em;
text-align: center;
margin: 10px 20px 6px 0;
display: inline-block;
float: right;
color: #0088cc;
}
.replies {
font-size: 1.071em;
color: #999;
}
.clearfix {
clear: both;
}
header.discourse {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 8px;
font-size: 1.286em;
border-bottom: 3px solid #ddd;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
h3 {
margin: 0 auto 0 0;
font-size: 1.0em;
}
}
.embed-error {
padding: 0 10px;
}
footer {
font-size: 1.286em;
margin-top: 0.5em;
.button {
color: white;
padding: 6px 8px;
background-color: #0088cc;
display: inline-block;
}
}
.logo {
float: right;
max-height: 30px;
}
// load onebox CSS at the end
@import "./common/base/onebox";
// we apparently use bottom margins on paras in the embed CSS, leading to weirdness
// which we will now clean up
aside.onebox {
margin-bottom: 20px;
p {
margin-bottom: 0 !important;
}
}
// images large enough for the lightbox wrapper don't have bottom margins
// either, unless we add one now
div.lightbox-wrapper {
margin-bottom: 20px;
}