mirror of
https://github.com/discourse/discourse.git
synced 2024-11-25 02:11:08 -06:00
UX: adjust pm styles to enbubble controls (#24996)
This commit is contained in:
Kris
GitHub
parent
32f3f04dbe
commit
096e26d972
@ -1,5 +1,6 @@
|
||||
.archetype-private_message {
|
||||
--border-radius: 2em;
|
||||
--pm-border-radius: 2em;
|
||||
--pm-padding: 1.25em;
|
||||
|
||||
@keyframes current-user-background-fade-highlight {
|
||||
0% {
|
||||
@ -12,60 +13,30 @@
|
||||
}
|
||||
}
|
||||
|
||||
.topic-body .cooked {
|
||||
box-sizing: border-box;
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.topic-body.topic-body.highlighted .cooked {
|
||||
animation: unset;
|
||||
}
|
||||
|
||||
.topic-body.highlighted .regular.contents {
|
||||
animation: background-fade-highlight 2.5s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
margin-top: 0.25em;
|
||||
margin-left: -1.35em;
|
||||
padding: 1.5em 1.5em 0.5em 2em;
|
||||
border-radius: 0 var(--border-radius) var(--border-radius)
|
||||
var(--border-radius);
|
||||
}
|
||||
|
||||
.current-user-post {
|
||||
&:not(.moderator) {
|
||||
.topic-body .cooked {
|
||||
background: var(--tertiary-very-low);
|
||||
}
|
||||
.topic-body.highlighted {
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.cooked {
|
||||
animation: current-user-background-fade-highlight 2.5s ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.topic-body .cooked {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.embedded-posts {
|
||||
.topic-body .cooked {
|
||||
border: 1px solid var(--primary-low);
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.moderator {
|
||||
.topic-body .cooked {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.deleted .topic-body {
|
||||
.cooked {
|
||||
background: var(--danger-low);
|
||||
}
|
||||
}
|
||||
|
||||
.whisper {
|
||||
.topic-body .cooked {
|
||||
background: transparent;
|
||||
border: 2px dashed var(--primary-low);
|
||||
}
|
||||
|
||||
&.my-post .topic-body .cooked {
|
||||
border: 2px dashed var(--tertiary-very-low);
|
||||
padding-left: var(--pm-padding);
|
||||
.desktop-view & {
|
||||
margin-left: calc(var(--pm-padding) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -74,25 +45,48 @@
|
||||
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 {
|
||||
margin-top: 0.5em;
|
||||
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);
|
||||
}
|
||||
|
||||
.small-action {
|
||||
margin: 1em 0 0;
|
||||
}
|
||||
|
||||
.post-notice {
|
||||
margin-bottom: 1em;
|
||||
border: none;
|
||||
background: var(--primary-very-low);
|
||||
border-radius: var(--border-radius);
|
||||
margin-left: 1.5em;
|
||||
box-sizing: border-box;
|
||||
padding: 1.5em 2em;
|
||||
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 {
|
||||
margin-left: -1.5em;
|
||||
margin-left: calc(var(--pm-padding) * -1);
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1.25em;
|
||||
border-radius: var(--pm-border-radius);
|
||||
padding: var(--pm-padding);
|
||||
|
||||
section {
|
||||
border: none;
|
||||
@ -109,29 +103,47 @@
|
||||
border: none;
|
||||
background: var(--primary-low);
|
||||
padding: 2px 4px;
|
||||
border-radius: var(--border-radius);
|
||||
border-radius: var(--pm-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.map:first-of-type .buttons .btn {
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
border-radius: var(--pm-border-radius);
|
||||
}
|
||||
|
||||
.embedded-posts {
|
||||
border: none;
|
||||
.topic-body {
|
||||
overflow: visible;
|
||||
width: 100%;
|
||||
}
|
||||
.topic-body,
|
||||
.topic-avatar {
|
||||
border: none !important; // overrides some specificity for .bottom
|
||||
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 {
|
||||
@ -139,8 +151,71 @@
|
||||
align-items: baseline;
|
||||
margin-right: 0.15em;
|
||||
}
|
||||
}
|
||||
|
||||
.gap {
|
||||
margin-bottom: 2em;
|
||||
// special post type colors
|
||||
|
||||
.current-user-post {
|
||||
&:not(.moderator):not(.whisper.current-user-post) {
|
||||
.regular.contents {
|
||||
background: var(--tertiary-very-low);
|
||||
border-color: var(--tertiary-very-low);
|
||||
}
|
||||
.topic-body.highlighted {
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.cooked {
|
||||
animation: unset;
|
||||
}
|
||||
.regular.contents {
|
||||
animation: current-user-background-fade-highlight 2.5s ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.topic-body .cooked {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.embedded-posts {
|
||||
.topic-body .cooked {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.moderator {
|
||||
.regular.contents {
|
||||
background: var(--highlight-low);
|
||||
border-color: var(--highlight-low);
|
||||
}
|
||||
.regular.contents .cooked {
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.deleted {
|
||||
.regular.contents {
|
||||
background: var(--danger-low);
|
||||
border-color: var(--danger-low);
|
||||
}
|
||||
.topic-body .regular .cooked {
|
||||
background: transparent;
|
||||
}
|
||||
.topic-body.highlighted .regular.contents {
|
||||
animation: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
animation: background-fade-highlight 2.5s ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,27 +1,31 @@
|
||||
.archetype-private_message {
|
||||
.topic-body .cooked {
|
||||
margin-top: 0.5em;
|
||||
margin-left: 0;
|
||||
padding: 1.5em 1em;
|
||||
border-radius: 0.75em var(--border-radius) var(--border-radius)
|
||||
var(--border-radius);
|
||||
}
|
||||
.topic-avatar {
|
||||
margin-bottom: -1em; // creates bubble overlap
|
||||
}
|
||||
.boxed .contents {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.topic-post {
|
||||
margin: 0 0 1em;
|
||||
article {
|
||||
border-top: none;
|
||||
.topic-body {
|
||||
flex: 1 1 auto;
|
||||
.cooked {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.contents.regular {
|
||||
margin-top: 0.5em;
|
||||
margin-left: 0;
|
||||
padding: 1.5em 1em 0;
|
||||
border-radius: var(--pm-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.topic-body {
|
||||
flex: 1 1 auto;
|
||||
.post-menu-area {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.topic-avatar {
|
||||
margin-bottom: -1em; // creates bubble overlap
|
||||
}
|
||||
|
||||
.topic-post {
|
||||
margin: 0;
|
||||
article {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-map {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user