UX: Adjust notification items when avatar is shown (#24832)

This commit is contained in:
Mark VanLandingham 2023-12-11 14:44:14 -06:00 committed by GitHub
parent 4e8f9e8fd2
commit c6a2c80441
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -560,15 +560,18 @@
.user-notifications-list.show-avatars { .user-notifications-list.show-avatars {
li { li {
a { a {
align-items: center;
padding: 0.15em 0;
.icon-avatar { .icon-avatar {
display: flex; display: flex;
position: relative; position: relative;
overflow: visible; overflow: visible;
margin-right: 0.5em; margin-right: 0.5em;
flex-shrink: 0; flex-shrink: 0;
width: 2.25em; width: 2em;
height: 2.25em; height: 2em;
padding: 0.125em 0; margin: 0.3em 1em 0 0;
.avatar { .avatar {
width: 100%; width: 100%;
@ -577,19 +580,22 @@
.d-icon { .d-icon {
display: block; display: block;
position: absolute; position: absolute;
right: -0.675em; right: -1.25em;
bottom: -0.125em; top: -0.5em;
background: var(--secondary); padding: 0.2em;
color: var(--primary-very-high);
padding: 0.25em;
border-radius: 100%; border-radius: 100%;
font-size: var(--font-down-1); background: var(--secondary);
color: var(--tertiary);
} }
} }
& + div { & + div {
padding: 0.25em 0; padding: 0.25em 0;
} }
} }
&.unread a .d-icon {
background: var(--tertiary);
color: var(--secondary);
}
} }
} }