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

Soften border-radius on selected/hovered messages (#6525)

pull/21833/head
Šimon Brandner 2021-10-20 17:33:23 +02:00 committed by GitHub
parent 2ee732b84d
commit c30029a8b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
res/css/_common.scss
View File

@ -22,10 +22,10 @@ limitations under the License.
$hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic $hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
$EventTile_e2e_state_indicator_width: 4px; $selected-message-border-width: 4px;
$MessageTimestamp_width: 46px; /* 8 + 30 (avatar) + 8 */ $MessageTimestamp_width: 46px; /* 8 + 30 (avatar) + 8 */
$MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $EventTile_e2e_state_indicator_width); $MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $selected-message-border-width);
$slider-dot-size: 1em; $slider-dot-size: 1em;
$slider-selection-dot-size: 2.4em; $slider-selection-dot-size: 2.4em;

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

@ -16,7 +16,6 @@ limitations under the License.
*/ */
$left-gutter: 64px; $left-gutter: 64px;
$hover-select-border: 4px;
.mx_EventTile:not([data-layout=bubble]) { .mx_EventTile:not([data-layout=bubble]) {
max-width: 100%; max-width: 100%;
@ -110,15 +109,15 @@ $hover-select-border: 4px;
} }
&.mx_EventTile_selected > div > a > .mx_MessageTimestamp { &.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
left: calc(-$hover-select-border); left: calc(-$selected-message-border-width);
} }
/* this is used for the tile for the event which is selected via the URL. /* this is used for the tile for the event which is selected via the URL.
* TODO: ultimately we probably want some transition on here. * TODO: ultimately we probably want some transition on here.
*/ */
&.mx_EventTile_selected > .mx_EventTile_line { &.mx_EventTile_selected > .mx_EventTile_line {
border-left: $accent-color 4px solid; border-left: $accent-color $selected-message-border-width solid;
padding-left: calc($left-gutter - $hover-select-border); padding-left: calc($left-gutter - $selected-message-border-width);
background-color: $event-selected-color; background-color: $event-selected-color;
} }
@ -132,7 +131,7 @@ $hover-select-border: 4px;
} }
&.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line { &.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
padding-left: calc($left-gutter + 18px - $hover-select-border); padding-left: calc($left-gutter + 18px - $selected-message-border-width);
} }
&.mx_EventTile:hover .mx_EventTile_line, &.mx_EventTile:hover .mx_EventTile_line,
@ -208,28 +207,34 @@ $hover-select-border: 4px;
overflow-y: hidden; overflow-y: hidden;
} }
&.mx_EventTile_selected .mx_EventTile_line,
&:hover .mx_EventTile_line {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
&: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 - $hover-select-border); padding-left: calc($left-gutter - $selected-message-border-width);
} }
&:hover.mx_EventTile_verified .mx_EventTile_line { &:hover.mx_EventTile_verified .mx_EventTile_line {
border-left: $e2e-verified-color $EventTile_e2e_state_indicator_width solid; border-left: $e2e-verified-color $selected-message-border-width solid;
} }
&:hover.mx_EventTile_unverified .mx_EventTile_line { &:hover.mx_EventTile_unverified .mx_EventTile_line {
border-left: $e2e-unverified-color $EventTile_e2e_state_indicator_width solid; border-left: $e2e-unverified-color $selected-message-border-width solid;
} }
&:hover.mx_EventTile_unknown .mx_EventTile_line { &:hover.mx_EventTile_unknown .mx_EventTile_line {
border-left: $e2e-unknown-color $EventTile_e2e_state_indicator_width solid; 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 - $hover-select-border); padding-left: calc($left-gutter + 18px - $selected-message-border-width);
} }
/* End to end encryption stuff */ /* End to end encryption stuff */
@ -241,7 +246,7 @@ $hover-select-border: 4px;
&:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp, &:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp,
&:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp, &:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp,
&:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp { &:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp {
left: calc(-$hover-select-border); left: calc(-$selected-message-border-width);
} }
// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)