mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 19:56:47 +03:00
Code Issues Projects Releases Packages Wiki Activity

Tweak styling of unread indicator circle.

Browse source 
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 <mstange@themasta.com>
This commit is contained in:
Markus Stange 2020-01-28 15:12:07 +01:00
parent dea919f6ee
commit 9821e25e0b
1 changed files with 6 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
res/css/views/rooms/_TopUnreadMessagesBar.scss
View file

@ -25,19 +25,16 @@ limitations under the License.
} }
.mx_TopUnreadMessagesBar::after { .mx_TopUnreadMessagesBar::after {
content: "·"; content: "";
position: absolute; position: absolute;
top: -8px; top: -8px;
left: 11px; left: 11px;
width: 16px; width: 4px;
height: 16px; height: 4px;
border-radius: 16px; border-radius: 16px;
font-weight: 600; overflow: hidden;
font-size: 30px; background-color: $secondary-accent-color;
line-height: 14px; border: 6px solid $accent-color;
text-align: center;
color: $secondary-accent-color;
background-color: $accent-color;
} }
.mx_TopUnreadMessagesBar_scrollUp { .mx_TopUnreadMessagesBar_scrollUp {