mirror of
https://github.com/discourse/discourse.git
synced 2024-11-24 22:39:36 +08:00
d5f5d9b867
This commit attempts to fix two issues that affect quoted images. The first issue is observed while loading. The 'position: absolute' CSS property makes 'width' and 'height' behave differently. Instead of using the known image size, this makes it use the computed width and height of the image, which should be the right size, as shown to the user. The second issue is caused by 'object-fit: cover' property which trimmed the left and right sides of wide pictures to make them fit inside the quote.
945 lines
16 KiB
SCSS
945 lines
16 KiB
SCSS
.button-count.has-pending {
|
|
span {
|
|
background-color: $danger;
|
|
color: $secondary;
|
|
border-radius: 10px;
|
|
padding: 0.25em 0.5em;
|
|
display: inline-block;
|
|
font-size: 0.8em;
|
|
}
|
|
}
|
|
|
|
.placeholder-avatar {
|
|
display: inline-block;
|
|
width: 45px;
|
|
height: 45px;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
&:before {
|
|
animation: placeHolderShimmer 4s linear infinite forwards;
|
|
position: absolute;
|
|
left: 0;
|
|
content: "";
|
|
background: linear-gradient(
|
|
to right,
|
|
$primary-very-low 10%,
|
|
$primary-low 28%,
|
|
$primary-very-low 43%
|
|
);
|
|
height: 45px;
|
|
width: 700px;
|
|
}
|
|
}
|
|
|
|
.placeholder-text {
|
|
margin-left: 11px;
|
|
display: inline-block;
|
|
width: calc(100% - 11px);
|
|
height: 1.5em;
|
|
margin-bottom: 0.6em;
|
|
}
|
|
|
|
.names {
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
span.first {
|
|
display: flex;
|
|
align-items: baseline;
|
|
font-weight: bold;
|
|
}
|
|
|
|
span {
|
|
font-size: $font-0;
|
|
margin-right: 8px;
|
|
display: inline-block;
|
|
@include ellipsis;
|
|
vertical-align: middle;
|
|
a {
|
|
color: dark-light-choose($primary-high, $secondary-low);
|
|
}
|
|
}
|
|
.fa {
|
|
font-size: $font-down-1;
|
|
color: dark-light-choose($primary-medium, $secondary-medium);
|
|
}
|
|
.svg-icon-title {
|
|
margin-left: 3px;
|
|
margin-right: 0px;
|
|
}
|
|
.new_user a,
|
|
.user-title,
|
|
.user-title a {
|
|
color: dark-light-choose($primary-medium, $secondary-medium);
|
|
}
|
|
}
|
|
|
|
// global styles for the cooked HTML content in posts (and preview)
|
|
.cooked,
|
|
.d-editor-preview {
|
|
word-wrap: break-word;
|
|
line-height: $line-height-large;
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin: 30px 0 10px;
|
|
line-height: $line-height-medium;
|
|
}
|
|
|
|
h1 {
|
|
font-size: $font-up-3;
|
|
}
|
|
|
|
h2 {
|
|
font-size: $font-up-2;
|
|
}
|
|
|
|
h3 {
|
|
font-size: $font-up-1;
|
|
}
|
|
|
|
h4 {
|
|
font-size: $font-0;
|
|
}
|
|
|
|
h5 {
|
|
font-size: $font-down-1;
|
|
}
|
|
|
|
h6 {
|
|
font-size: $font-down-2;
|
|
}
|
|
|
|
a {
|
|
word-wrap: break-word;
|
|
}
|
|
ins {
|
|
background-color: dark-light-choose(
|
|
$success-low,
|
|
scale-color($success, $lightness: -60%)
|
|
);
|
|
}
|
|
del {
|
|
background-color: dark-light-choose(
|
|
$danger-low,
|
|
scale-color($danger, $lightness: -60%)
|
|
);
|
|
}
|
|
// Prevents users from breaking posts with tag nesting
|
|
big {
|
|
font-size: 1.5rem;
|
|
}
|
|
small {
|
|
font-size: 0.75rem;
|
|
}
|
|
small small {
|
|
font-size: 0.75em;
|
|
}
|
|
big big {
|
|
font-size: 1em;
|
|
}
|
|
sub sub sub {
|
|
bottom: 0;
|
|
}
|
|
sup sup sup {
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.cooked,
|
|
.d-editor-preview {
|
|
video {
|
|
max-width: 100%;
|
|
}
|
|
sup sup {
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
// add staff color
|
|
.moderator {
|
|
.regular > .cooked {
|
|
background-color: dark-light-choose($highlight-low, $highlight-medium);
|
|
padding: 10px;
|
|
img:not(.thumbnail) {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
.clearfix > .topic-meta-data > .names {
|
|
span.user-title {
|
|
color: dark-light-choose($primary-high, $secondary-low);
|
|
a {
|
|
background-color: dark-light-choose($highlight-low, $highlight-medium);
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.topic-meta-data {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
|
|
.names {
|
|
margin-right: auto;
|
|
}
|
|
|
|
.post-infos {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
// we use aside to hold expandable quotes (versus, say, static blockquotes)
|
|
aside.quote {
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
|
|
.badge-wrapper {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.title {
|
|
@include post-aside;
|
|
|
|
color: dark-light-choose($primary-high, $secondary-low);
|
|
// IE will screw up the blockquote underneath if bottom padding is 0px
|
|
padding: 12px 12px 1px 12px;
|
|
// blockquote is underneath this and has top margin
|
|
.avatar {
|
|
margin-right: 7px;
|
|
}
|
|
img {
|
|
margin-top: -4px;
|
|
}
|
|
@include unselectable;
|
|
}
|
|
|
|
// blockquote is docked within aside for content
|
|
blockquote {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
blockquote {
|
|
// due to #image-sizing-hack large images and lightboxes extend past the
|
|
// limits blockquotes. Since #image-sizing-hack is inline, we need to use
|
|
// !important here otherwise it won't work.
|
|
img {
|
|
max-width: 100% !important;
|
|
}
|
|
}
|
|
|
|
.quote-controls,
|
|
.quote-controls .d-icon {
|
|
color: dark-light-choose($primary-low-mid, $secondary-high);
|
|
}
|
|
|
|
.cooked .highlight {
|
|
background-color: $tertiary-low;
|
|
padding: 2px;
|
|
margin: -2px;
|
|
}
|
|
|
|
.post-ignored {
|
|
font-style: italic;
|
|
}
|
|
|
|
.post-action {
|
|
color: $primary-medium;
|
|
.undo-action,
|
|
.act-action {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
.post-hidden {
|
|
opacity: 0.5; // opacity sets a new z-index context,
|
|
position: relative; // so the positioning is required,
|
|
z-index: z("base"); // otherwise post controls are stacked too low
|
|
}
|
|
|
|
.topic-post.staged {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.quote-controls {
|
|
float: right;
|
|
display: flex;
|
|
align-items: center;
|
|
a {
|
|
margin-left: 0.3em;
|
|
}
|
|
}
|
|
|
|
.quote-button {
|
|
display: none;
|
|
position: absolute;
|
|
background-color: blend-primary-secondary(50%);
|
|
color: dark-light-choose($secondary, $primary);
|
|
padding: 10px;
|
|
z-index: z("dropdown");
|
|
opacity: 0.9;
|
|
|
|
.d-icon {
|
|
display: inline-block;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $primary-medium;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.topic-avatar,
|
|
.user-card-avatar {
|
|
position: relative;
|
|
}
|
|
|
|
.topic-map {
|
|
background: $primary-very-low;
|
|
border: 1px solid $primary-low;
|
|
border-top: none; // would cause double top border
|
|
|
|
.avatars {
|
|
> div {
|
|
float: left;
|
|
position: relative;
|
|
margin: 3px 0;
|
|
}
|
|
.post-count {
|
|
position: absolute;
|
|
right: 0;
|
|
border-radius: 100px;
|
|
padding: 3px 5px;
|
|
text-align: center;
|
|
font-weight: normal;
|
|
font-size: $font-down-2;
|
|
line-height: $line-height-small;
|
|
}
|
|
}
|
|
|
|
.avatar {
|
|
float: left;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
section {
|
|
border-top: 1px solid $primary-low;
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
h3 {
|
|
margin-bottom: 4px;
|
|
color: $primary;
|
|
line-height: $line-height-large;
|
|
font-weight: normal;
|
|
font-size: $font-0;
|
|
}
|
|
|
|
h4 {
|
|
margin: 1px 0 2px 0;
|
|
color: dark-light-choose($primary-medium, $secondary-medium);
|
|
font-weight: normal;
|
|
font-size: $font-down-1;
|
|
line-height: $line-height-small;
|
|
}
|
|
|
|
span.domain {
|
|
font-size: $font-down-2;
|
|
color: dark-light-choose($primary-medium, $secondary-medium);
|
|
}
|
|
|
|
td {
|
|
vertical-align: top;
|
|
padding: 1px;
|
|
}
|
|
|
|
.topic-links {
|
|
tr {
|
|
border: none;
|
|
}
|
|
.badge-notification {
|
|
margin: 1px 5px 2px 0;
|
|
}
|
|
}
|
|
|
|
.controls {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.btn {
|
|
margin-right: 0.5em;
|
|
|
|
&:last-child {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.participants {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
|
|
& + .controls {
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
&.hide-names .user {
|
|
.username,
|
|
.group-name {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.user {
|
|
border: 1px solid $primary-low;
|
|
border-radius: 0.25em;
|
|
padding: 0;
|
|
margin: 0.125em 0.25em 0.125em 0;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 26px;
|
|
|
|
.user-link,
|
|
.group-link {
|
|
color: $primary-high;
|
|
|
|
&:hover {
|
|
color: $primary;
|
|
}
|
|
}
|
|
|
|
.avatar,
|
|
.d-icon-users {
|
|
margin-left: 0.25em;
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
.username,
|
|
.group-name {
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.remove-invited {
|
|
display: flex;
|
|
flex: 1 0 0px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
border-radius: 0 0.25em 0.25em 0;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.add-remove-participant-btn {
|
|
.d-icon {
|
|
margin-left: 0.25em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.topic-avatar,
|
|
.avatar-flair-preview,
|
|
.user-card-avatar,
|
|
.topic-map .poster,
|
|
.user-profile-avatar,
|
|
.user-image {
|
|
.avatar-flair {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: -6px;
|
|
}
|
|
}
|
|
.topic-avatar .avatar-flair,
|
|
.avatar-flair-preview .avatar-flair,
|
|
.collapsed-info .user-profile-avatar .avatar-flair,
|
|
.user-image .avatar-flair {
|
|
background-size: 20px 20px;
|
|
width: 20px;
|
|
height: 20px;
|
|
&.rounded {
|
|
background-size: 18px 18px;
|
|
border-radius: 12px;
|
|
width: 24px;
|
|
height: 24px;
|
|
bottom: -2px;
|
|
right: -8px;
|
|
}
|
|
}
|
|
.user-card-avatar .avatar-flair,
|
|
.user-profile-avatar .avatar-flair {
|
|
background-size: 40px 40px;
|
|
width: 40px;
|
|
height: 40px;
|
|
&.rounded {
|
|
background-size: 30px 30px;
|
|
border-radius: 24px;
|
|
width: 40px;
|
|
height: 40px;
|
|
bottom: -2px;
|
|
right: -4px;
|
|
}
|
|
.fa {
|
|
font-size: $font-up-4;
|
|
}
|
|
}
|
|
.topic-map .poster .avatar-flair {
|
|
right: 0;
|
|
background-size: 12px 12px;
|
|
width: 16px;
|
|
height: 16px;
|
|
bottom: -3px;
|
|
color: $primary;
|
|
&.rounded {
|
|
background-size: 12px 12px;
|
|
border-radius: 8px;
|
|
width: 16px;
|
|
height: 16px;
|
|
bottom: -2px;
|
|
right: 0;
|
|
}
|
|
.d-icon {
|
|
font-size: $font-down-2;
|
|
}
|
|
}
|
|
.topic-avatar .poster-avatar-extra {
|
|
display: none;
|
|
}
|
|
|
|
.map {
|
|
&:first-of-type {
|
|
display: flex;
|
|
.buttons {
|
|
margin-left: auto;
|
|
order: 15;
|
|
.btn {
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.topic-body {
|
|
// this is necessary for ANYTHING that extends past the right edge of
|
|
// the post body, such as an image in a deeply nested list, image in
|
|
// a deeply nested blockquote, and so on.. you get the idea.
|
|
.cooked {
|
|
overflow: hidden;
|
|
}
|
|
&.highlighted {
|
|
animation: background-fade-highlight 2.5s ease-out;
|
|
}
|
|
}
|
|
|
|
.post-info {
|
|
flex: 0 0 auto;
|
|
margin-right: 0.5em;
|
|
|
|
&.post-date {
|
|
margin-right: 0;
|
|
}
|
|
&.via-email,
|
|
&.whisper,
|
|
&.post-locked {
|
|
.d-icon {
|
|
font-size: $font-0;
|
|
}
|
|
}
|
|
|
|
.wiki,
|
|
.last-wiki-edit {
|
|
color: $wiki;
|
|
}
|
|
|
|
&.via-email {
|
|
color: dark-light-choose($primary-low-mid, $secondary-high);
|
|
}
|
|
&.raw-email {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
pre {
|
|
code {
|
|
word-wrap: normal;
|
|
display: block;
|
|
padding: 0.5em;
|
|
color: $primary;
|
|
background: blend-primary-secondary(5%);
|
|
max-height: 500px;
|
|
}
|
|
}
|
|
|
|
kbd {
|
|
background-color: $secondary;
|
|
border: 1px solid $primary-low;
|
|
border-radius: 3px;
|
|
box-shadow: shadow("kbd");
|
|
background: dark-light-choose(#fafafa, #333);
|
|
border: 1px solid dark-light-choose(#ccc, #555);
|
|
border-bottom: medium none dark-light-choose(#fff, #000);
|
|
|
|
color: $primary;
|
|
display: inline-block;
|
|
font-size: $font-down-1;
|
|
line-height: $line-height-large;
|
|
margin: 0 0.1em;
|
|
padding: 0.1em 0.6em;
|
|
|
|
// don't allow more than 3 nested elements to prevent FF from crashing
|
|
// cf. http://what.thedailywtf.com/t/nested-elements/7927
|
|
// 3 levels are needed to prevent highlighted words being hidden
|
|
// cf. https://meta.discourse.org/t/word-disappears-when-searched-and-in-details-summary-kbd-b/25741
|
|
* * * {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// we assume blockquotes have their own margins, so all blockquotes
|
|
// will remove margins from first (top) and last (bottom) child elements
|
|
blockquote > *:first-child {
|
|
margin-top: 0 !important;
|
|
}
|
|
blockquote > *:last-child {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.gap {
|
|
padding: 0.25em 0 0.5em 56px; // 45px (topic avatar) + 11px (margin) = 56px
|
|
color: dark-light-choose($primary-medium, $secondary-high);
|
|
cursor: pointer;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
font-size: $font-down-1;
|
|
}
|
|
|
|
.who-liked,
|
|
.who-read {
|
|
transition: height 0.5s;
|
|
a {
|
|
margin: 0 0.25em 0.5em 0;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.cooked table,
|
|
.d-editor-preview table {
|
|
thead {
|
|
th {
|
|
text-align: left;
|
|
padding-bottom: 2px;
|
|
font-weight: bold;
|
|
color: $primary;
|
|
}
|
|
}
|
|
|
|
td {
|
|
padding: 3px 3px 3px 0.5em;
|
|
}
|
|
}
|
|
|
|
.small-action {
|
|
display: flex;
|
|
align-items: center;
|
|
max-width: 758px;
|
|
border-top: 1px solid $primary-low;
|
|
.topic-avatar {
|
|
align-self: flex-start;
|
|
padding: 0.7em 0;
|
|
border-top: none;
|
|
margin-right: 11px;
|
|
flex: 0 0 auto;
|
|
.d-icon {
|
|
font-size: 2em;
|
|
width: 45px;
|
|
text-align: center;
|
|
color: $primary-low-mid;
|
|
}
|
|
}
|
|
|
|
.small-action.deleted {
|
|
background-color: dark-light-diff(
|
|
rgba($danger, 0.7),
|
|
$secondary,
|
|
50%,
|
|
-60%
|
|
);
|
|
}
|
|
|
|
.small-action-desc.timegap {
|
|
color: $primary-medium;
|
|
}
|
|
|
|
.small-action-desc {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex: 1 1 100%;
|
|
align-items: center;
|
|
padding: 1em 0;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
font-size: $font-down-1;
|
|
color: $primary-medium;
|
|
min-width: 0; // Allows flex container to shrink
|
|
|
|
.custom-message {
|
|
flex: 1 1 100%;
|
|
text-transform: none;
|
|
font-weight: normal;
|
|
font-size: $font-up-1;
|
|
order: 12;
|
|
word-break: break-word;
|
|
min-width: 0; // Allows content like oneboxes to shrink
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
a.trigger-user-card {
|
|
align-self: stretch;
|
|
}
|
|
.avatar {
|
|
margin-right: 0.8em;
|
|
float: left;
|
|
}
|
|
|
|
> p {
|
|
margin: 0;
|
|
line-height: $line-height-medium;
|
|
flex: 1 1;
|
|
}
|
|
}
|
|
|
|
button {
|
|
background: transparent;
|
|
border: 0;
|
|
order: 9;
|
|
&:last-of-type {
|
|
margin-left: auto;
|
|
order: 8;
|
|
}
|
|
}
|
|
}
|
|
|
|
.whisper {
|
|
.post-info.whisper {
|
|
margin-left: 0.5em;
|
|
}
|
|
.topic-body {
|
|
.cooked {
|
|
font-style: italic;
|
|
color: $primary-medium;
|
|
}
|
|
}
|
|
}
|
|
|
|
a.mention,
|
|
a.mention-group {
|
|
padding: 2px 4px;
|
|
color: dark-light-choose($primary-high, $secondary-low);
|
|
background: $primary-low;
|
|
border-radius: 8px;
|
|
font-weight: bold;
|
|
font-size: 0.93em;
|
|
}
|
|
|
|
.popup-menu {
|
|
h3 {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.suggested-topics {
|
|
.topics {
|
|
padding-bottom: 15px;
|
|
}
|
|
.suggested-topics-message {
|
|
.badge-wrapper {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.large-image-placeholder {
|
|
> a {
|
|
&.link {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
> * {
|
|
overflow: hidden;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
> .d-icon {
|
|
color: dark-light-choose($primary-medium, $secondary-medium);
|
|
margin-right: 6px;
|
|
font-size: $font-0;
|
|
line-height: $line-height-large;
|
|
}
|
|
|
|
> span.url {
|
|
display: inline-block;
|
|
max-width: 300px;
|
|
margin-right: 6px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
> span.help {
|
|
display: inline-block;
|
|
color: dark-light-choose($primary-medium, $secondary-medium);
|
|
font-size: $font-down-1;
|
|
font-style: italic;
|
|
line-height: $line-height-large;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
> span.badge-notification {
|
|
vertical-align: unset;
|
|
}
|
|
}
|
|
}
|
|
|
|
.broken-image,
|
|
.large-image {
|
|
color: dark-light-choose($primary-low-mid, $secondary-high);
|
|
border: 1px solid $primary-low;
|
|
font-size: $font-up-5;
|
|
padding: 16px;
|
|
}
|
|
|
|
/* below standard tablet portrait ----------- */
|
|
|
|
.reply-to-tab {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 2em;
|
|
|
|
img {
|
|
margin: 0 0.25em;
|
|
}
|
|
}
|
|
|
|
// Select posts
|
|
|
|
.topic-post {
|
|
&.selected {
|
|
article.boxed {
|
|
.select-posts {
|
|
button.select-post {
|
|
background-color: $tertiary;
|
|
color: $secondary;
|
|
border-color: $tertiary;
|
|
}
|
|
}
|
|
.topic-body {
|
|
.contents:after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
article.boxed {
|
|
position: relative;
|
|
.select-posts {
|
|
position: absolute;
|
|
right: 5em;
|
|
z-index: z("dropdown");
|
|
top: 0.5em;
|
|
height: 100px;
|
|
button {
|
|
margin-left: 8px;
|
|
background-color: $primary-low;
|
|
color: $primary;
|
|
box-shadow: shadow("dropdown");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media all and (max-width: 767px) {
|
|
.reply-to-tab {
|
|
span {
|
|
display: none;
|
|
}
|
|
}
|
|
.user-title {
|
|
float: left;
|
|
clear: left;
|
|
}
|
|
}
|
|
|
|
.signup-cta {
|
|
a {
|
|
float: right;
|
|
text-decoration: underline;
|
|
}
|
|
.buttons {
|
|
margin-bottom: 1em;
|
|
}
|
|
}
|
|
|
|
.post-notice {
|
|
align-items: center;
|
|
background-color: $tertiary-low;
|
|
border-top: 1px solid $primary-low;
|
|
display: flex;
|
|
max-width: calc(
|
|
#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{$topic-avatar-width} -
|
|
(0.8em * 2)
|
|
);
|
|
padding: 0.8em;
|
|
|
|
&.old {
|
|
background-color: unset;
|
|
color: $primary-medium;
|
|
|
|
.d-icon {
|
|
color: $primary-medium;
|
|
}
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
.d-icon {
|
|
font-size: 2em;
|
|
color: $primary-high;
|
|
margin-right: 0.65em;
|
|
}
|
|
}
|
|
|
|
#topic-footer-buttons {
|
|
.reason {
|
|
color: $primary-high;
|
|
display: inline;
|
|
margin: 0 0 0 8px;
|
|
line-height: $line-height-medium;
|
|
}
|
|
}
|