Consider cascading order of style rules on _EventTile.scss (#8968)

This commit is contained in:
Suguru Hirahara 2022-07-02 19:39:33 +09:00 committed by GitHub
parent 0d100cbbce
commit 9328dca3fd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -27,37 +27,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
flex-shrink: 0;
&.mx_EventTile_highlight,
&.mx_EventTile_highlight .markdown-body {
color: $alert;
}
&.mx_EventTile_bubbleContainer {
display: grid;
grid-template-columns: 1fr 100px;
.mx_EventTile_line {
margin-right: 0;
grid-column: 1 / 3;
padding: 0 !important; // override default padding of mx_EventTile_line so that we can be centered
}
.mx_EventTile_msgOption {
grid-column: 2;
}
&:hover {
.mx_EventTile_line {
// To avoid bubble events being highlighted
background-color: inherit !important;
}
}
}
&.mx_EventTile_isEditing .mx_MessageTimestamp {
visibility: hidden;
}
.mx_EventTile_avatar {
cursor: pointer;
user-select: none;
@ -137,15 +106,39 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
}
}
&[data-layout=irc],
&[data-layout=group] {
&.mx_EventTile_highlight,
&.mx_EventTile_highlight .markdown-body {
.mx_EventTile_line {
background-color: $event-highlight-bg-color;
}
&.mx_EventTile_highlight,
&.mx_EventTile_highlight .markdown-body {
color: $alert;
}
&.mx_EventTile_bubbleContainer {
display: grid;
grid-template-columns: 1fr 100px;
.mx_EventTile_line {
margin-right: 0;
grid-column: 1 / 3;
padding: 0 !important; // override default padding of mx_EventTile_line so that we can be centered
}
.mx_EventTile_msgOption {
grid-column: 2;
}
&:hover {
.mx_EventTile_line {
// To avoid bubble events being highlighted
background-color: inherit !important;
}
}
}
&.mx_EventTile_isEditing .mx_MessageTimestamp {
visibility: hidden;
}
&[data-layout=irc],
&[data-layout=group] {
.mx_EventTile_e2eIcon {
position: absolute;
}
@ -169,20 +162,16 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
.mx_EventTile_reply {
margin-right: 10px;
}
&.mx_EventTile_highlight,
&.mx_EventTile_highlight .markdown-body {
.mx_EventTile_line {
background-color: $event-highlight-bg-color;
}
}
}
&[data-layout=group] {
> .mx_DisambiguatedProfile {
line-height: $font-20px;
margin-left: $left-gutter;
max-width: calc(100% - $left-gutter);
}
> .mx_EventTile_avatar {
position: absolute;
z-index: 9;
}
.mx_EventTile_avatar {
top: 14px;
left: $spacing-8;
@ -216,6 +205,17 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
.mx_ReactionsRow {
margin: $spacing-4 64px;
}
> .mx_DisambiguatedProfile {
line-height: $font-20px;
margin-left: $left-gutter;
max-width: calc(100% - $left-gutter);
}
> .mx_EventTile_avatar {
position: absolute;
z-index: 9;
}
}
}