OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Improve mx_MatrixChat_useCompactLayout on _EventTile.scss (#8965)

pull/28788/head^2
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

47
res/css/views/rooms/_EventTile.scss
View File

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