mirror of
https://github.com/discourse/discourse.git
synced 2024-12-05 17:23:43 +08:00
77a009397b
Since we don't have icons or access to the JS that transforms hashtag icon placeholders into their proper icons and colours on embed and publish pages, we need to at least show _something_ and make sure the hashtags are not totally broken on these pages.
272 lines
4.8 KiB
SCSS
272 lines
4.8 KiB
SCSS
@import "./vendor/normalize";
|
|
@import "./vendor/normalize-ext";
|
|
@import "./common/foundation/base";
|
|
@import "./color_definitions";
|
|
@import "./common/components/buttons";
|
|
@import "./common/components/hashtag";
|
|
|
|
article.post {
|
|
border-bottom: 1px solid var(--primary-low);
|
|
|
|
img.avatar {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
&.deleted {
|
|
background-color: var(--danger-low);
|
|
}
|
|
|
|
.quote .title {
|
|
border-left: 5px solid var(--primary-very-low);
|
|
padding: 10px 10px 0 12px;
|
|
.avatar {
|
|
margin-right: 7px;
|
|
}
|
|
}
|
|
|
|
ol,
|
|
ul {
|
|
clear: none;
|
|
}
|
|
|
|
blockquote {
|
|
padding: 10px 8px 10px 13px;
|
|
margin: 0 0 10px 0;
|
|
border-left: 5px solid var(--primary-very-low);
|
|
p {
|
|
margin: 0 0 10px 0;
|
|
}
|
|
p:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.post-date {
|
|
float: right;
|
|
color: var(--primary-low-mid);
|
|
font-size: var(--font-down-1);
|
|
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%;
|
|
height: auto;
|
|
}
|
|
p {
|
|
margin: 0 0 1em 0;
|
|
}
|
|
|
|
.hashtag-cooked {
|
|
padding: 0.2em 0.5em;
|
|
|
|
.hashtag-icon-placeholder {
|
|
font-weight: bold;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.username {
|
|
font-size: var(--font-down-1);
|
|
margin: 0 0 10px 0;
|
|
|
|
a {
|
|
color: var(--primary-high);
|
|
}
|
|
a.staff {
|
|
background-color: var(--highlight-bg);
|
|
}
|
|
|
|
a.new-user {
|
|
color: var(--primary-low-mid);
|
|
}
|
|
|
|
span.title {
|
|
font-weight: normal;
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
|
|
img.emoji {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.in-reply-to {
|
|
font-size: var(--font-down-1);
|
|
text-align: center;
|
|
margin: 10px 20px 6px 0;
|
|
float: right;
|
|
color: var(--tertiary);
|
|
}
|
|
|
|
.replies {
|
|
font-size: var(--font-0);
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
.clearfix {
|
|
clear: both;
|
|
}
|
|
|
|
header.discourse {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
padding-bottom: 8px;
|
|
font-size: var(--font-up-2);
|
|
border-bottom: 3px solid var(--primary-low);
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
h3 {
|
|
margin: 0 auto 0 0;
|
|
font-size: var(--font-0);
|
|
}
|
|
}
|
|
|
|
.embed-error {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
footer {
|
|
font-size: var(--font-up-2);
|
|
margin-top: 0.5em;
|
|
.button {
|
|
color: white;
|
|
padding: 6px 8px;
|
|
background-color: var(--tertiary);
|
|
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;
|
|
}
|
|
|
|
.new-topic-btn {
|
|
margin: 0.5rem;
|
|
|
|
&:hover {
|
|
background: var(--tertiary-hover);
|
|
}
|
|
|
|
span {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.new-topic-btn__icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 2px;
|
|
background-image: svg-uri(
|
|
'<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 448 512" fill="white"><path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg>'
|
|
);
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
background-position: top center;
|
|
}
|
|
}
|
|
|
|
.topics-list {
|
|
width: 100%;
|
|
|
|
.topic-list-item {
|
|
clear: both;
|
|
|
|
.main-link {
|
|
border-bottom: 1px solid var(--primary-low);
|
|
padding: 0.5rem;
|
|
width: 100%;
|
|
|
|
a {
|
|
color: var(--primary);
|
|
}
|
|
|
|
a:visited {
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
|
|
.topic-column-wrapper {
|
|
display: flex;
|
|
|
|
.topic-column.details-column {
|
|
flex-direction: column;
|
|
width: 80%;
|
|
|
|
.topic-last-posted-at,
|
|
.topic-author-avatar-timestamp,
|
|
.topic-stats {
|
|
padding-top: 5px;
|
|
}
|
|
|
|
.topic-author-avatar-timestamp img {
|
|
max-height: 20px;
|
|
}
|
|
|
|
.topic-created-at {
|
|
padding-left: 5px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.topic-last-posted-at,
|
|
.topic-created-at,
|
|
.topic-stats {
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
|
|
.topic-column.featured-image-column {
|
|
.topic-featured-image img {
|
|
max-width: 200px;
|
|
max-height: 100px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|