Improve the visibility of mentions with a Discord-style stripe on the left edge

Author: taffyko

res/css/views/rooms/_EventTile.pcss

@@ -574,6 +574,14 @@ $left-gutter: 64px;
                 padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px);
             }
         }
+
+        &.mx_EventTile_highlight,
+        &.mx_EventTile_highlight .markdown-body {
+            > .mx_EventTile_line {
+                box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius)
+                    $event-highlight-edge-color;
+            }
+        }
     }
 
     &[data-layout="bubble"] {

res/themes/dark/css/_dark.pcss

@@ -83,6 +83,7 @@ $spacePanel-bg-color: rgba(38, 39, 43, 0.82);
 $panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1);
 $h3-color: $primary-content;
 $event-highlight-bg-color: #25271f;
+$event-highlight-edge-color: #f0b132;
 $header-panel-text-primary-color: $text-secondary-color;
 /* ******************** */
 

res/themes/legacy-dark/css/_legacy-dark.pcss

@@ -164,6 +164,7 @@ $widget-menu-bar-bg-color: $header-panel-bg-color;
 $widget-body-bg-color: #1a1d23;
 
 $event-highlight-bg-color: #25271f;
+$event-highlight-edge-color: #f0b132;
 
 /* event timestamp */
 $event-timestamp-color: $text-secondary-color;

res/themes/legacy-light/css/_legacy-light.pcss

@@ -235,6 +235,7 @@ $widget-body-bg-color: #fff;
 $yellow-background: #fff8e3;
 
 $event-highlight-bg-color: $yellow-background;
+$event-highlight-edge-color: var(--cpd-color-yellow-500);
 
 /* event timestamp */
 $event-timestamp-color: #acacac;

res/themes/light-custom/css/_custom.pcss

@@ -100,6 +100,7 @@ $button-danger-disabled-bg-color: var(--warning-color-50pct); /* still needs alp
 /* --timeline-highlights-color */
 $event-selected-color: var(--timeline-highlights-color);
 $event-highlight-bg-color: var(--timeline-highlights-color);
+$event-highlight-edge-color: var(--timeline-highlights-color);
 
 /* redirect some variables away from their hardcoded values in the light theme */
 $settings-grey-fg-color: $primary-content;

res/themes/light/css/_light.pcss

@@ -112,6 +112,7 @@ $spacePanel-bg-color: rgba(232, 232, 232, 0.77);
 $panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1);
 $h3-color: #3d3b39;
 $event-highlight-bg-color: $yellow-background;
+$event-highlight-edge-color: var(--cpd-color-yellow-500);
 $header-panel-text-primary-color: #91a1c0;
 /* ******************** */