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

Author: SimonBrandner

res/css/_common.scss

@@ -22,10 +22,10 @@ limitations under the License.
 
 $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_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-selection-dot-size: 2.4em;

res/css/views/rooms/_EventTile.scss

@@ -16,7 +16,6 @@ limitations under the License.
 */
 
 $left-gutter: 64px;
-$hover-select-border: 4px;
 
 .mx_EventTile:not([data-layout=bubble]) {
     max-width: 100%;
@@ -110,15 +109,15 @@ $hover-select-border: 4px;
     }
 
     &.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.
      * TODO: ultimately we probably want some transition on here.
      */
     &.mx_EventTile_selected > .mx_EventTile_line {
-        border-left: $accent-color 4px solid;
-        padding-left: calc($left-gutter - $hover-select-border);
+        border-left: $accent-color $selected-message-border-width solid;
+        padding-left: calc($left-gutter - $selected-message-border-width);
         background-color: $event-selected-color;
     }
 
@@ -132,7 +131,7 @@ $hover-select-border: 4px;
     }
 
     &.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,
@@ -208,28 +207,34 @@ $hover-select-border: 4px;
         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_unverified .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 {
-        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 {
-        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 {
-        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_unverified.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 */
@@ -241,7 +246,7 @@ $hover-select-border: 4px;
     &:hover.mx_EventTile_verified .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 {
-        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)