UX: update post background highlight (#25094)

This commit is contained in:
Kris 2024-01-02 16:53:40 -05:00 committed by GitHub
parent c2dc2cd727
commit f999cde159
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 40 deletions

View File

@ -14,14 +14,13 @@
}
@media (prefers-reduced-motion: no-preference) {
.topic-body.topic-body.highlighted .cooked {
animation: unset;
}
.topic-body.highlighted .regular.contents {
.topic-body.highlighted {
animation: none;
.regular.contents {
animation: background-fade-highlight 2.5s ease-out;
}
}
}
.topic-post {
margin-bottom: 0.5em;
@ -155,25 +154,17 @@
// 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;
}
.topic-body.highlighted {
.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;
@ -182,26 +173,18 @@
}
.moderator {
.topic-body.highlighted {
.regular.contents {
background: var(--highlight-low);
border-color: var(--highlight-low);
}
.regular.contents .cooked {
background: transparent;
border: 1px solid transparent;
animation: none;
}
}
.deleted {
.regular.contents {
background: var(--danger-low);
border-color: var(--danger-low);
}
.topic-body .regular .cooked {
background: var(--highlight-low);
border-color: var(--highlight-low);
.cooked {
background: transparent;
}
.topic-body.highlighted .regular.contents {
animation: unset;
}
}
@ -218,4 +201,19 @@
}
}
}
.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);
}
}
}
}

View File

@ -945,12 +945,12 @@ aside.quote {
}
@media (prefers-reduced-motion: no-preference) {
.topic-body.highlighted .cooked,
.topic-body.highlighted,
.small-action-desc.highlighted {
animation: background-fade-highlight 2.5s ease-out;
}
// Disable animation so deleted status is visible immediately
.deleted .topic-body.highlighted .cooked {
.deleted .topic-body.highlighted {
animation: none;
}
}