mirror of
https://github.com/discourse/discourse.git
synced 2024-12-20 19:23:44 +08:00
c98335e4e5
Animating the background-color property like this is not compositable for the browser, which means the animation is not smooth, and can contribute to the Cumulative Layout Shift web vital. For now, we're removing this, and may consider re-introducing an alternative version in future based on user feedback.
191 lines
3.9 KiB
SCSS
191 lines
3.9 KiB
SCSS
.archetype-private_message {
|
|
--pm-border-radius: 0;
|
|
--pm-padding: 1.25em;
|
|
|
|
.topic-post {
|
|
margin-bottom: 0.5em;
|
|
&:last-child {
|
|
margin-bottom: 1.5em;
|
|
}
|
|
}
|
|
|
|
.regular.contents {
|
|
border-radius: 0 var(--pm-border-radius) var(--pm-border-radius)
|
|
var(--pm-border-radius);
|
|
border: 1px solid var(--primary-low);
|
|
padding-left: var(--pm-padding);
|
|
.desktop-view & {
|
|
margin-left: calc(var(--pm-padding) * -1);
|
|
}
|
|
}
|
|
|
|
.topic-avatar,
|
|
.topic-body {
|
|
border: none;
|
|
}
|
|
|
|
.topic-body .cooked {
|
|
box-sizing: border-box;
|
|
margin-top: 0.25em;
|
|
padding-right: calc(var(--topic-body-width-padding) * 2);
|
|
}
|
|
|
|
.post-menu-area {
|
|
padding-right: calc(var(--topic-body-width-padding) * 2);
|
|
margin: 0.5em 0 var(--topic-body-width-padding);
|
|
}
|
|
|
|
.who-liked {
|
|
box-sizing: border-box;
|
|
padding-right: var(--topic-body-width-padding);
|
|
}
|
|
|
|
.post-notice {
|
|
box-sizing: border-box;
|
|
border-radius: var(--pm-border-radius);
|
|
background-color: var(--tertiary-very-low);
|
|
border-color: var(--tertiary-very-low);
|
|
margin-bottom: 1em;
|
|
margin-left: 1.65em;
|
|
padding: var(--pm-padding) 2em;
|
|
max-width: calc(
|
|
var(--topic-body-width) + var(--topic-body-width-padding) * 2 +
|
|
var(--topic-avatar-width) - 1.65em
|
|
);
|
|
&.old {
|
|
border: 1px solid var(--primary-low);
|
|
}
|
|
}
|
|
|
|
.topic-map {
|
|
border: none;
|
|
padding-block: var(--pm-padding);
|
|
padding-left: calc(
|
|
48px - var(--pm-padding)
|
|
); // 48px is the width of the avatar
|
|
section {
|
|
border: none;
|
|
background: var(--primary-very-low);
|
|
padding-inline: var(--pm-padding);
|
|
}
|
|
|
|
.map {
|
|
padding-top: var(--pm-padding);
|
|
}
|
|
|
|
&__private-message-map {
|
|
padding-bottom: var(--pm-padding);
|
|
}
|
|
|
|
.participants {
|
|
margin-bottom: 1.5em;
|
|
.user {
|
|
border: none;
|
|
background: var(--primary-low);
|
|
padding: 2px 4px;
|
|
border-radius: var(--pm-border-radius);
|
|
}
|
|
}
|
|
}
|
|
|
|
.map:first-of-type .buttons .btn {
|
|
border: none;
|
|
border-radius: var(--pm-border-radius);
|
|
}
|
|
|
|
.embedded-posts {
|
|
border: none;
|
|
.topic-body {
|
|
overflow: visible;
|
|
width: 100%;
|
|
}
|
|
.topic-avatar {
|
|
padding-left: 0;
|
|
}
|
|
.collapse-down,
|
|
.collapse-up {
|
|
display: none;
|
|
}
|
|
&.bottom {
|
|
margin-bottom: 0;
|
|
margin-right: calc(var(--topic-body-width-padding) * 2);
|
|
}
|
|
&.top {
|
|
.cooked {
|
|
border: 1px solid var(--primary-low);
|
|
border-radius: var(--pm-border-radius);
|
|
margin-left: calc(var(--pm-padding) * -1);
|
|
padding-left: 2.15em;
|
|
}
|
|
.row {
|
|
.topic-body,
|
|
.topic-avatar {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.timeline-replies {
|
|
display: flex;
|
|
align-items: baseline;
|
|
margin-right: 0.15em;
|
|
}
|
|
|
|
// special post type colors
|
|
|
|
.current-user-post {
|
|
.regular.contents {
|
|
background: var(--tertiary-very-low);
|
|
border-color: var(--tertiary-very-low);
|
|
}
|
|
.embedded-posts {
|
|
.topic-body .cooked {
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
.moderator {
|
|
.topic-body.highlighted {
|
|
.regular.contents {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
.regular.contents {
|
|
background: var(--highlight-low);
|
|
border-color: var(--highlight-low);
|
|
.cooked {
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
.whisper {
|
|
.topic-body .regular.contents {
|
|
background: transparent;
|
|
border: 2px dashed var(--primary-low);
|
|
}
|
|
|
|
&.current-user-post .topic-body .regular.contents {
|
|
border: 2px dashed var(--tertiary-low);
|
|
}
|
|
}
|
|
|
|
.deleted {
|
|
.topic-body .regular.contents {
|
|
background: var(--danger-low);
|
|
border-color: transparent;
|
|
.cooked {
|
|
background: transparent;
|
|
}
|
|
}
|
|
&.whisper {
|
|
.topic-body .regular.contents {
|
|
border-color: var(--danger-low-mid);
|
|
}
|
|
}
|
|
}
|
|
}
|