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

Move style rules of EventTile on hover out of mx_EventTile:not([data-layout=bubble]) (#8997)

Browse source 
* Move ':hover.mx_EventTile_verified .mx_EventTile_line' etc out of mx_EventTile:not([data-layout=bubble])

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Merge mx_EventTile_line on hover

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Apply inline start padding effect on hovering info tile text line to modern/group layout only

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-07-07 07:54:56 +00:00 committed by GitHub
parent 58b81f604a
commit ff6f4dc8eb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -193,6 +193,28 @@ $left-gutter: 64px;
&.mx_EventTile_continuation .mx_EventTile_line { &.mx_EventTile_continuation .mx_EventTile_line {
clear: both; clear: both;
} }
&:hover {
// TODO: Adjust the values for IRC layout
--EventTile_hover_box-shadow-offset-x: calc(50px + $selected-message-border-width);
--EventTile_hover_box-shadow-spread-radius: -50px;
.mx_EventTile_line {
background-color: $event-selected-color;
}
&.mx_EventTile_verified .mx_EventTile_line {
box-shadow: inset var(--EventTile_hover_box-shadow-offset-x) 0 0 var(--EventTile_hover_box-shadow-spread-radius) $e2e-verified-color;
}
&.mx_EventTile_unverified .mx_EventTile_line {
box-shadow: inset var(--EventTile_hover_box-shadow-offset-x) 0 0 var(--EventTile_hover_box-shadow-spread-radius) $e2e-unverified-color;
}
&.mx_EventTile_unknown .mx_EventTile_line {
box-shadow: inset var(--EventTile_hover_box-shadow-offset-x) 0 0 var(--EventTile_hover_box-shadow-spread-radius) $e2e-unknown-color;
}
}
} }
&[data-layout=irc] { &[data-layout=irc] {
@ -273,6 +295,14 @@ $left-gutter: 64px;
&.mx_EventTile_info .mx_EventTile_line { &.mx_EventTile_info .mx_EventTile_line {
padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
} }
&:hover {
&.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
&.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,
&.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
padding-left: calc($left-gutter + 18px + $selected-message-border-width);
}
}
} }
&[data-layout=bubble] { &[data-layout=bubble] {
@ -329,7 +359,6 @@ $left-gutter: 64px;
padding-left: calc($left-gutter + 18px); padding-left: calc($left-gutter + 18px);
} }
&.mx_EventTile:hover .mx_EventTile_line,
&.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line, &.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,
&.mx_EventTile.focus-visible:focus-within .mx_EventTile_line { &.mx_EventTile.focus-visible:focus-within .mx_EventTile_line {
background-color: $event-selected-color; background-color: $event-selected-color;
@ -349,24 +378,6 @@ $left-gutter: 64px;
} }
} }
&:hover.mx_EventTile_verified .mx_EventTile_line {
box-shadow: inset calc(50px + $selected-message-border-width) 0 0 -50px $e2e-verified-color;
}
&:hover.mx_EventTile_unverified .mx_EventTile_line {
box-shadow: inset calc(50px + $selected-message-border-width) 0 0 -50px $e2e-unverified-color;
}
&:hover.mx_EventTile_unknown .mx_EventTile_line {
box-shadow: inset calc(50px + $selected-message-border-width) 0 0 -50px $e2e-unknown-color;
}
&:hover.mx_EventTile_verified.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 {
padding-left: calc($left-gutter + 18px + $selected-message-border-width);
}
/* End to end encryption stuff */ /* End to end encryption stuff */
&:hover .mx_EventTile_e2eIcon { &:hover .mx_EventTile_e2eIcon {
opacity: 1; opacity: 1;

1
res/css/views/rooms/_IRCLayout.scss
View file

@ -181,7 +181,6 @@ $irc-line-height: $font-18px;
.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
padding-left: 0;
border-left: 0; border-left: 0;
} }