Fix hover tile border (#7117)

* Revert "Update highlighted event line to prevent content jumping (#7090)"

This reverts commit 0f8272c6a1.

* Fix message jumps

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-11-11 15:48:11 +01:00 committed by GitHub
parent f87e9d86a4
commit 2a1a180ece
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 12 deletions

View file

@ -184,7 +184,6 @@ limitations under the License.
.mx_EventTile, .mx_EventListSummary { .mx_EventTile, .mx_EventListSummary {
// Account for scrollbar when hovering // Account for scrollbar when hovering
margin: 0 2px;
padding-top: 0; padding-top: 0;
.mx_ThreadInfo { .mx_ThreadInfo {

View file

@ -221,25 +221,25 @@ $left-gutter: 64px;
&:hover.mx_EventTile_verified .mx_EventTile_line, &:hover.mx_EventTile_verified .mx_EventTile_line,
&:hover.mx_EventTile_unverified .mx_EventTile_line, &:hover.mx_EventTile_unverified .mx_EventTile_line,
&:hover.mx_EventTile_unknown .mx_EventTile_line { &:hover.mx_EventTile_unknown .mx_EventTile_line {
padding-left: calc($left-gutter); padding-left: calc($left-gutter - $selected-message-border-width);
} }
&:hover.mx_EventTile_verified .mx_EventTile_line { &:hover.mx_EventTile_verified .mx_EventTile_line {
box-shadow: inset $selected-message-border-width 0 0 0 $e2e-verified-color; border-left: $e2e-verified-color $selected-message-border-width solid;
} }
&:hover.mx_EventTile_unverified .mx_EventTile_line { &:hover.mx_EventTile_unverified .mx_EventTile_line {
box-shadow: inset $selected-message-border-width 0 0 0 $e2e-verified-color; border-left: $e2e-unverified-color $selected-message-border-width solid;
} }
&:hover.mx_EventTile_unknown .mx_EventTile_line { &:hover.mx_EventTile_unknown .mx_EventTile_line {
box-shadow: inset $selected-message-border-width 0 0 0 $e2e-verified-color; border-left: $e2e-unknown-color $selected-message-border-width solid;
} }
&:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, &:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
&:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line, &:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,
&:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line { &:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
padding-left: calc($left-gutter + 18px); padding-left: calc($left-gutter + 18px - $selected-message-border-width);
} }
/* End to end encryption stuff */ /* End to end encryption stuff */
@ -822,7 +822,7 @@ $left-gutter: 64px;
.mx_EventTile_senderDetails { .mx_EventTile_senderDetails {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: calc(6px + $selected-message-border-width);
a { a {
flex: 1; flex: 1;
@ -846,17 +846,21 @@ $left-gutter: 64px;
display: none; display: none;
} }
.mx_EventTile_line {
padding-left: 0 !important;
order: 10 !important;
}
.mx_EventTile { .mx_EventTile {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-top: 0; padding-top: 0;
.mx_EventTile_line {
padding-left: $selected-message-border-width !important;
order: 10 !important;
}
&:hover .mx_EventTile_line {
padding-left: 0 !important;
}
.mx_MessageTimestamp { .mx_MessageTimestamp {
left: auto; left: auto;
right: 2px !important; right: 2px !important;