From 3623ca69c18f6aa9de7e3a39a5771873a19fd218 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 25 Jun 2022 18:14:59 +0900 Subject: [PATCH] Align unread notification dot on threads list in compact modern=group layout Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 691cb32f6fe..a2a76c7bdcb 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -784,10 +784,12 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss // Display notification dot &[data-notification]::before { + $notification-inset-block-start: 14px; // 14px: align the dot with the timestamp row + width: $notification-dot-size; height: $notification-dot-size; border-radius: 50%; - inset: 14px $spacing-8 auto auto; // 14px: align the dot with the timestamp row + inset: $notification-inset-block-start $spacing-8 auto auto; } &[data-notification=total]::before { @@ -1078,7 +1080,9 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss .mx_EventTile { // Override :not([data-layout="bubble"]) &[data-layout=group] { - padding-top: $spacing-4; + --MatrixChat_useCompactLayout_group-padding-top: $spacing-4; + + padding-top: var(--MatrixChat_useCompactLayout_group-padding-top); &.mx_EventTile_info { padding-top: 0; // same as the padding for non-compact .mx_EventTile.mx_EventTile_info @@ -1154,6 +1158,10 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } } } + + &[data-shape=ThreadsList][data-notification]::before { + inset-block-start: calc($notification-inset-block-start - var(--MatrixChat_useCompactLayout_group-padding-top)); + } } }