mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2026-05-05 04:06:44 +02:00
Code Issues Projects Releases Wiki Activity

Improve visibility under contrast control mode (#31847)

Browse Source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2026-01-22 12:06:53 +00:00 committed by GitHub
parent e0b3e013ab
commit 77c4937f76
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 34 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
res/css/structures/_LeftPanel.pcss
View File

@ -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;

5
res/css/structures/_SpacePanel.pcss
View File

@ -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 {

2
res/css/structures/_SpaceRoomView.pcss
View File

@ -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,

2
res/css/structures/_TabbedView.pcss
View File

@ -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;
}
}

3
res/css/structures/_UserMenu.pcss
View File

@ -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 {

1
res/css/views/elements/_AccessibleButton.pcss
View File

@ -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);

2
res/css/views/elements/_FacePile.pcss
View File

@ -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 {

2
res/css/views/elements/_Pill.pcss
View File

@ -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;

2
res/css/views/elements/_StyledRadioButton.pcss
View File

@ -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;
}
}
}

2
res/css/views/rooms/_NotificationBadge.pcss
View File

@ -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;

7
res/css/views/rooms/_RoomHeader.pcss
View File

@ -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;
}
}

2
res/css/views/rooms/_RoomPreviewCard.pcss
View File

@ -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;