From 9821e25e0b8aa5b4845897221af99261c1bf0418 Mon Sep 17 00:00:00 2001 From: Markus Stange Date: Tue, 28 Jan 2020 15:12:07 +0100 Subject: [PATCH] Tweak styling of unread indicator circle. This makes the element symmetric and reduces the size of the hit target. With the previous styling, the mid-circle glyph was sometimes offset from the center. Furthermore, the large font size increased the hit box of the ::after element, eating into the scroll up arrow button's hit target. It might be a good idea to give the ::after element pointer-events:none so that the scroll up button is clickable in its entirety. Signed-off-by: Markus Stange --- res/css/views/rooms/_TopUnreadMessagesBar.scss | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/res/css/views/rooms/_TopUnreadMessagesBar.scss b/res/css/views/rooms/_TopUnreadMessagesBar.scss index 77f19dac1c..505af9691d 100644 --- a/res/css/views/rooms/_TopUnreadMessagesBar.scss +++ b/res/css/views/rooms/_TopUnreadMessagesBar.scss @@ -25,19 +25,16 @@ limitations under the License. } .mx_TopUnreadMessagesBar::after { - content: "ยท"; + content: ""; position: absolute; top: -8px; left: 11px; - width: 16px; - height: 16px; + width: 4px; + height: 4px; border-radius: 16px; - font-weight: 600; - font-size: 30px; - line-height: 14px; - text-align: center; - color: $secondary-accent-color; - background-color: $accent-color; + overflow: hidden; + background-color: $secondary-accent-color; + border: 6px solid $accent-color; } .mx_TopUnreadMessagesBar_scrollUp {