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

Fix: Bubble layout design is broken (#11763)

Browse source 
* Fixed the layout, added border to match design

* Border fixed for hover and highlighted messages

* moved some selectors up to avoid duplicate selectors
This commit is contained in:
Manan Sadana 2023-10-18 15:16:09 +05:30 committed by GitHub
parent d92273957d
commit 01714d9c83
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
res/css/views/rooms/_EventBubbleTile.pcss
View file

@ -58,12 +58,34 @@ limitations under the License.
margin-right: 0; margin-right: 0;
} }
.mx_EventTile_avatar {
line-height: 0;
border: 4px solid $background;
border-radius: 50%;
position: absolute;
top: 6px;
z-index: 9;
img {
box-shadow: 0 0 0 3px $background;
border-radius: 50%;
}
}
&.mx_EventTile_highlight { &.mx_EventTile_highlight {
.mx_EventTile_avatar {
border-color: $event-highlight-bg-color;
}
&::before { &::before {
background-color: $event-highlight-bg-color; background-color: $event-highlight-bg-color;
} }
} }
&:hover {
.mx_EventTile_avatar {
border-color: $eventbubble-bg-hover;
}
}
/* For replies */ /* For replies */
.mx_EventTile { .mx_EventTile {
padding-top: 0; padding-top: 0;
@ -177,7 +199,7 @@ limitations under the License.
} }
.mx_EventTile_avatar { .mx_EventTile_avatar {
left: -34px; left: -36px;
} }
.mx_MessageActionBar { .mx_MessageActionBar {
@ -241,7 +263,7 @@ limitations under the License.
.mx_EventTile_avatar { .mx_EventTile_avatar {
top: -19px; /* height of the sender block */ top: -19px; /* height of the sender block */
right: -35px; right: -38px;
} }
.mx_MediaBody { .mx_MediaBody {
@ -401,17 +423,6 @@ limitations under the License.
} }
} }
.mx_EventTile_avatar {
position: absolute;
top: 0;
line-height: 1;
z-index: 9;
img {
box-shadow: 0 0 0 3px $background;
border-radius: 50%;
}
}
&.mx_EventTile_noSender { &.mx_EventTile_noSender {
.mx_EventTile_avatar { .mx_EventTile_avatar {
top: -19px; top: -19px;