mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-22 17:25:50 +03:00
Code Issues Projects Releases Packages Wiki Activity

Improve mx_MatrixChat_useCompactLayout on _EventTile.scss (#8965)

Browse source
This commit is contained in:
Suguru Hirahara 2022-07-05 11:02:29 +00:00 committed by GitHub
parent 08c607718d
commit fd3d65993c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
res/css/views/rooms/_EventTile.scss
View file

@ -1071,15 +1071,25 @@ $left-gutter: 64px;
// Override :not([data-layout="bubble"])
&[data-layout=group] {
--MatrixChat_useCompactLayout_group-padding-top: $spacing-4;
--MatrixChat_useCompactLayout-top-avatar: 2px;
--MatrixChat_useCompactLayout-top-e2eIcon: 3px;
--MatrixChat_useCompactLayout_line-spacing-block: 0px;
padding-top: var(--MatrixChat_useCompactLayout_group-padding-top);
.mx_EventTile_line,
.mx_EventTile_reply {
padding-block: var(--MatrixChat_useCompactLayout_line-spacing-block);
}
&.mx_EventTile_info {
padding-top: 0; // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
font-size: $font-13px;
.mx_EventTile_e2eIcon,
.mx_EventTile_avatar {
top: $spacing-4;
top: 0;
margin-block: var(--MatrixChat_useCompactLayout_line-spacing-block);
}
.mx_EventTile_line,
@ -1091,39 +1101,34 @@ $left-gutter: 64px;
&.mx_EventTile_emote {
padding-top: $spacing-8; // add a bit more space for emotes so that avatars don't collide
&.mx_EventTile_continuation {
padding-top: 0;
.mx_EventTile_line,
.mx_EventTile_reply {
padding-top: 0;
padding-bottom: 0;
}
}
.mx_EventTile_avatar {
top: 2px;
top: var(--MatrixChat_useCompactLayout-top-avatar);
}
.mx_EventTile_line,
.mx_EventTile_reply {
padding-top: 0;
padding-bottom: 1px;
}
&.mx_EventTile_continuation {
.mx_EventTile_line,
.mx_EventTile_reply {
padding-bottom: var(--MatrixChat_useCompactLayout_line-spacing-block);
}
}
}
.mx_EventTile_avatar {
top: 2px;
// Cascading - apply zero padding to every element including mx_EventTile_emote
&.mx_EventTile_continuation {
padding-top: var(--MatrixChat_useCompactLayout_line-spacing-block);
}
.mx_EventTile_line,
.mx_EventTile_reply {
padding-top: 0;
padding-bottom: 0;
.mx_EventTile_avatar {
top: var(--MatrixChat_useCompactLayout-top-avatar);
}
.mx_EventTile_e2eIcon {
top: 3px;
top: var(--MatrixChat_useCompactLayout-top-e2eIcon);
}
.mx_DisambiguatedProfile {