Improve visibility under contrast control mode (#31847)

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

res/css/structures/_LeftPanel.pcss

@@ -36,6 +36,8 @@ Please see LICENSE files in the repository root for full details.
         display: flex;
         overflow: hidden;
         position: relative;
+        /* For enhanced visibility under contrast control */
+        outline: 1px solid transparent;
 
         &[data-collapsed] {
             max-width: var(--collapsedWidth);
@@ -122,6 +124,8 @@ Please see LICENSE files in the repository root for full details.
                 border-radius: 8px;
                 background-color: $panel-actions;
                 margin-left: 8px;
+                /* For enhanced visibility under contrast control */
+                outline: 1px solid transparent;
 
                 svg {
                     width: inherit;

res/css/structures/_SpacePanel.pcss

@@ -22,6 +22,9 @@ Please see LICENSE files in the repository root for full details.
     /* Fix for the blurred avatar-background */
     z-index: 1;
 
+    /* For enhanced visibility under contrast control */
+    outline: 1px solid transparent;
+
     /* Create another flexbox so the Panel fills the container */
     display: flex;
     flex-direction: column;
@@ -66,6 +69,8 @@ Please see LICENSE files in the repository root for full details.
 
     &:hover .mx_SpacePanel_toggleCollapse {
         opacity: 1;
+        /* For enhanced visibility under contrast control */
+        outline: 1px solid transparent;
     }
 
     ul {

res/css/structures/_SpaceRoomView.pcss

@@ -138,6 +138,8 @@ Please see LICENSE files in the repository root for full details.
                 .mx_FacePile {
                     display: inline-block;
                     cursor: pointer;
+                    /* For enhanced visibility under contrast control */
+                    outline: 1px solid transparent;
                 }
 
                 .mx_SpaceRoomView_landing_inviteButton,

res/css/structures/_TabbedView.pcss

@@ -41,6 +41,8 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_TabbedView_tabLabel_active {
         background-color: var(--cpd-color-bg-subtle-secondary);
+        /* For enhanced visibility under contrast control */
+        outline: 1px solid transparent;
     }
 }
 

res/css/structures/_UserMenu.pcss

@@ -99,6 +99,9 @@ Please see LICENSE files in the repository root for full details.
             display: flex;
             align-items: center;
             justify-content: center;
+
+            /* For enhanced visibility under contrast control */
+            outline: 1px solid transparent;
         }
 
         &.mx_UserMenu_contextMenu_guestPrompts {

res/css/views/elements/_AccessibleButton.pcss

@@ -101,6 +101,7 @@ Please see LICENSE files in the repository root for full details.
     &.mx_AccessibleButton_kind_danger {
         color: var(--cpd-color-text-on-solid-primary);
         background-color: var(--cpd-color-bg-critical-primary);
+        border: 1px solid var(--cpd-color-bg-critical-primary);
 
         &.mx_AccessibleButton_disabled {
             color: var(--cpd-color-text-on-solid-primary);

res/css/views/elements/_FacePile.pcss

@@ -19,6 +19,8 @@ Please see LICENSE files in the repository root for full details.
     color: $tertiary-content;
     display: inline-block;
     z-index: 1;
+    /* For enhanced visibility under contrast control */
+    outline: 1px solid transparent;
 }
 
 .mx_FacePile_summary {

res/css/views/elements/_Pill.pcss

@@ -19,6 +19,8 @@ Please see LICENSE files in the repository root for full details.
 
     color: var(--cpd-color-text-on-solid-primary) !important; /* To override .markdown-body */
     background-color: $pill-bg-color !important; /* To override .markdown-body */
+    /* For enhanced visibility under contrast control */
+    outline: 1px solid transparent;
 
     > * {
         pointer-events: none;

res/css/views/elements/_StyledRadioButton.pcss

@@ -82,6 +82,8 @@ Please see LICENSE files in the repository root for full details.
 
                 & > div {
                     background: $active-radio-circle-color;
+                    /* For enhanced visibility under contrast control */
+                    outline: 1px solid transparent;
                 }
             }
         }

res/css/views/rooms/_NotificationBadge.pcss

@@ -19,6 +19,8 @@ Please see LICENSE files in the repository root for full details.
 
     &.mx_NotificationBadge_visible {
         background-color: $roomtile-default-badge-bg-color;
+        /* For enhanced visibility under contrast control */
+        outline: 1px solid transparent;
 
         /* Create a flexbox to order the count a bit easier */
         display: flex;

res/css/views/rooms/_RoomHeader.pcss

@@ -13,6 +13,11 @@ Please see LICENSE files in the repository root for full details.
     border-bottom: 1px solid $separator;
     background-color: $background;
     transition: all 0.2s ease;
+
+    button:has(svg.mx_RoomHeader_toggled) {
+        /* For enhanced visibility under contrast control */
+        outline: 1px solid transparent;
+    }
 }
 
 .mx_RoomHeader:hover {
@@ -91,6 +96,8 @@ Please see LICENSE files in the repository root for full details.
         background: var(--cpd-color-bg-success-subtle);
         color: var(--cpd-color-text-action-accent);
         font: var(--cpd-font-body-sm-semibold);
+        /* For enhanced visibility under contrast control */
+        outline: 1px solid transparent;
     }
 }
 

res/css/views/rooms/_RoomPreviewCard.pcss

@@ -95,6 +95,8 @@ Please see LICENSE files in the repository root for full details.
         display: flex;
         align-items: center;
         margin-top: $spacing-16;
+        /* For enhanced visibility under contrast control */
+        outline: 1px solid transparent;
 
         :first-child {
             flex-shrink: 0;