PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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 {