nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Tweak rendering of icons for a11y (#31358)

Browse Source 
* Tweak rendering of icons in legacy video feed

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

* Remove unused classes

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

* Tweak rendering of icons in face pile

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

* Tweak rendering of icons in overflow tile

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

* Tweak rendering of icons in room search view

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

* Tweak rendering of icons in top unread messages bar

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

* Tweak rendering of icons in space basic settings

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

* Tweak rendering of icons in thread summary tile

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

* Tweak rendering of icons in legacy room tile

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

* Tweak rendering of icons in incoming call toast

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

* Tweak rendering of icons in labs jump to date

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

* Tweak rendering of icons in field validation

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

* Update snapshots

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

* Tweak rendering of icons in mini avatar uploader

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

* Tweak rendering of icons in info tooltip

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

* Tweak rendering of icons in network dropdown

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2025-12-04 13:04:13 +00:00
committed by GitHub
parent 52d082aed6
commit d1f45da51a
33 changed files with 227 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
res/css/views/directory/_NetworkDropdown.pcss
View File

@@ -49,8 +49,9 @@ Please see LICENSE files in the repository root for full details.
.mx_NetworkDropdown_removeServer {
position: relative;
display: inline-block;
width: 16px;
height: 16px;
width: 14px;
height: 14px;
padding: 1px;
background: $quinary-content;
border-radius: 8px;
text-align: center;
@@ -58,19 +59,10 @@ Please see LICENSE files in the repository root for full details.
color: $secondary-content;
margin-left: auto;
&::before {
background-color: $secondary-content;
content: "";
mask-repeat: no-repeat;
mask-position: center;
mask-size: 14px;
width: inherit;
svg {
color: $secondary-content;
height: inherit;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
width: inherit;
}
}

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

@@ -13,23 +13,12 @@ Please see LICENSE files in the repository root for full details.
border-radius: 100%;
width: 28px;
height: 28px;
box-sizing: border-box;
padding: var(--cpd-space-1x);
background-color: $panels;
color: $tertiary-content;
display: inline-block;
&::before {
content: "";
z-index: 1;
position: absolute;
top: 0;
left: 0;
height: inherit;
width: inherit;
background: $tertiary-content;
mask-position: center;
mask-size: 20px;
mask-repeat: no-repeat;
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
}
z-index: 1;
}
.mx_FacePile_summary {

21
res/css/views/elements/_InfoTooltip.pcss
View File

@@ -10,24 +10,15 @@ Please see LICENSE files in the repository root for full details.
width: 16px;
height: 16px;
display: inline-block;
svg {
height: inherit;
width: inherit;
color: $muted-fg-color;
}
}
.mx_InfoTooltip_icon::before {
display: inline-block;
background-color: $muted-fg-color;
mask-repeat: no-repeat;
mask-size: 16px;
width: 16px;
height: 16px;
mask-position: center;
content: "";
vertical-align: middle;
}
.mx_InfoTooltip_icon_info::before {
mask-image: url("@vector-im/compound-design-tokens/icons/info.svg");
}
.mx_InfoTooltip_icon_warning::before {
mask-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
}

18
res/css/views/elements/_MiniAvatarUploader.pcss
View File

@@ -13,28 +13,22 @@ Please see LICENSE files in the repository root for full details.
.mx_MiniAvatarUploader_indicator {
position: absolute;
height: 26px;
width: 26px;
height: 16px;
width: 16px;
padding: 5px;
right: -6px;
bottom: -6px;
background-color: $background;
border-radius: 50%;
z-index: 1;
line-height: 0;
.mx_MiniAvatarUploader_cameraIcon {
height: 100%;
width: 100%;
background-color: $secondary-content;
mask-position: center;
mask-repeat: no-repeat;
mask-image: url("@vector-im/compound-design-tokens/icons/take-photo-solid.svg");
mask-size: 16px;
z-index: 2;
height: inherit;
width: inherit;
color: $secondary-content;
}
}
}

24
res/css/views/elements/_Validation.pcss
View File

@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_Validation_details {
padding-left: 20px;
padding-left: 0;
margin: 0;
}
@@ -20,7 +20,6 @@ Please see LICENSE files in the repository root for full details.
}
.mx_Validation_detail {
position: relative;
font-weight: normal;
list-style: none;
margin-bottom: 0.5em;
@@ -29,33 +28,18 @@ Please see LICENSE files in the repository root for full details.
margin-bottom: 0;
}
&::before {
content: "";
position: absolute;
svg {
width: 14px;
height: 14px;
top: 0;
left: -18px;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
margin-right: var(--cpd-space-1x);
vertical-align: text-bottom;
}
&.mx_Validation_valid {
color: $accent;
&::before {
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
background-color: $accent;
}
}
&.mx_Validation_invalid {
color: $alert;
&::before {
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
background-color: $alert;
}
}
}

6
res/css/views/messages/_DateSeparator.pcss
View File

@@ -27,9 +27,5 @@ Please see LICENSE files in the repository root for full details.
align-self: center;
width: 16px;
height: 16px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
background-color: var(--cpd-color-icon-secondary);
color: var(--cpd-color-icon-secondary);
}

21
res/css/views/rooms/_OverflowTile.pcss
View File

@@ -26,19 +26,20 @@ Please see LICENSE files in the repository root for full details.
.mx_OverflowTileView:hover {
padding-right: 30px;
position: relative; /* to keep the chevron aligned */
.mx_OverflowTileView_chevron {
display: inline;
}
}
.mx_OverflowTileView:hover::before {
content: "";
.mx_OverflowTileView_chevron {
position: absolute;
top: calc(50% - 8px); /* center */
right: -8px;
mask: url("@vector-im/compound-design-tokens/icons/chevron-right.svg");
mask-repeat: no-repeat;
mask-position: center;
width: 16px;
height: 16px;
background-color: $header-panel-text-primary-color;
top: calc(50% - 12px); /* center */
right: 0;
width: 24px;
height: 24px;
color: $header-panel-text-primary-color;
display: none;
}
.mx_OverflowTileView_icon {

29
res/css/views/rooms/_RoomTile.pcss
View File

@@ -113,29 +113,32 @@ Please see LICENSE files in the repository root for full details.
position: relative;
display: none;
&::before {
top: 2px;
left: 2px;
content: "";
svg {
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: var(--cpd-color-icon-primary);
padding: var(--cpd-space-0-5x);
color: var(--cpd-color-icon-primary);
}
}
.mx_RoomTile_notificationsButton::before {
top: 2px;
left: 2px;
content: "";
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: var(--cpd-color-icon-primary);
}
/* If the room has an overriden notification setting then we always show the notifications menu button */
.mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
display: block;
}
.mx_RoomTile_menuButton::before {
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
}
&:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky) {
&:hover,
&:focus-within,

9
res/css/views/rooms/_ThreadSummary.pcss
View File

@@ -49,19 +49,14 @@ Please see LICENSE files in the repository root for full details.
transform: translateX(60px);
transition: all 0.1s ease-in-out;
&::before {
content: "";
svg {
position: absolute;
top: 50%;
right: var(--cpd-space-1x);
transform: translateY(-50%);
width: 24px;
height: 24px;
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-right.svg");
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $secondary-content;
color: $secondary-content;
}
}

35
res/css/views/rooms/_TopUnreadMessagesBar.pcss
View File

@@ -29,23 +29,19 @@ Please see LICENSE files in the repository root for full details.
.mx_TopUnreadMessagesBar_scrollUp {
height: 38px;
width: 38px;
border-radius: 19px;
box-sizing: border-box;
background: $background;
border: 1.3px solid var(--cpd-color-icon-tertiary);
cursor: pointer;
}
.mx_TopUnreadMessagesBar_scrollUp::before {
content: "";
position: absolute;
width: 36px;
height: 36px;
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-up.svg");
mask-repeat: no-repeat;
mask-size: 24px;
mask-position: center;
background: var(--cpd-color-icon-tertiary);
svg {
width: 24px;
height: 24px;
padding: 6px;
color: var(--cpd-color-icon-tertiary);
}
}
.mx_TopUnreadMessagesBar_markAsRead {
@@ -56,16 +52,11 @@ Please see LICENSE files in the repository root for full details.
border: 1.3px solid var(--cpd-color-icon-tertiary);
border-radius: 10px;
margin: 5px auto;
}
.mx_TopUnreadMessagesBar_markAsRead::before {
content: "";
position: absolute;
width: 18px;
height: 18px;
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-repeat: no-repeat;
mask-size: 16px;
mask-position: center;
background: var(--cpd-color-icon-tertiary);
svg {
width: 16px;
height: 16px;
padding: 1px;
color: var(--cpd-color-icon-tertiary);
}
}

29
res/css/views/spaces/_SpaceBasicSettings.pcss
View File

@@ -16,36 +16,17 @@ Please see LICENSE files in the repository root for full details.
margin-top: 24px;
.mx_SpaceBasicSettings_avatar {
position: relative;
height: 80px;
width: 80px;
background-color: $tertiary-content;
border-radius: 16px;
}
img.mx_SpaceBasicSettings_avatar {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 16px;
}
/* only show it when the button is a div and not an img (has avatar) */
div.mx_SpaceBasicSettings_avatar {
cursor: pointer;
&::before {
content: "";
position: absolute;
height: 80px;
width: 80px;
top: 0;
left: 0;
background-color: #ffffff; /* white icon fill */
mask-repeat: no-repeat;
mask-position: center;
mask-size: 20px;
mask-image: url("@vector-im/compound-design-tokens/icons/take-photo-solid.svg");
svg {
width: 20px;
height: 20px;
padding: 30px;
color: #ffffff; /* white icon fill */
}
}

11
res/css/views/toasts/_IncomingCallToast.pcss
View File

@@ -62,17 +62,10 @@ Please see LICENSE files in the repository root for full details.
height: $closeButtonSize;
width: $closeButtonSize;
&::before {
content: "";
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
svg {
height: inherit;
width: inherit;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
color: $secondary-content;
}
}
.mx_IncomingCallToast_toggleWithLabel {

164
res/css/views/voip/_CallView.pcss
View File

@@ -22,168 +22,4 @@ Please see LICENSE files in the repository root for full details.
border-radius: inherit;
background-color: $call-background;
}
/* While the lobby is shown, the widget needs to stay loaded but hidden in the background */
.mx_CallView_lobby ~ .mx_AppTile {
display: none;
}
.mx_CallView_lobby {
min-height: 0;
flex-grow: 1;
padding: $spacing-12;
color: $call-primary-content;
background-color: $call-background;
--facepile-background: $call-background;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: $spacing-32;
.mx_FacePile {
width: fit-content;
margin: $spacing-8 auto 0;
}
.mx_CallView_preview {
position: relative;
width: 100%;
max-width: 800px;
aspect-ratio: 1.5;
background-color: $call-system;
border-radius: 20px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.mx_BaseAvatar {
margin: $spacing-20;
/* Override the explicit dimensions on the element so that this gets sized responsively */
width: unset !important;
height: unset !important;
min-width: 0;
min-height: 0;
flex: 0 1 200px;
}
video {
position: absolute;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scaleX(-1); /* flip the image */
background-color: black;
}
.mx_CallView_controls {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: $info-plinth-fg-color;
display: flex;
justify-content: center;
gap: $spacing-24;
.mx_CallView_deviceButtonWrapper {
position: relative;
margin: 6px 0 10px;
.mx_CallView_deviceButton {
$size: 50px;
width: $size;
height: $size;
background-color: $call-system;
border-radius: calc($size / 2);
&::before {
content: "";
display: inline-block;
mask-repeat: no-repeat;
mask-size: 20px;
mask-position: center;
background-color: $call-primary-content;
height: 100%;
width: 100%;
}
&.mx_CallView_deviceButton_audio::before {
mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg");
mask-size: 14px;
}
&.mx_CallView_deviceButton_video::before {
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
}
}
.mx_CallView_deviceListButton {
$size: 15px;
position: absolute;
bottom: 0;
right: -2.5px;
width: $size;
height: $size;
background-color: $call-system;
border-radius: calc($size / 2);
&::before {
content: "";
display: inline-block;
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
mask-size: 20px;
mask-position: center;
background-color: $call-primary-content;
height: 100%;
width: 100%;
}
}
&.mx_CallView_deviceButtonWrapper_muted {
.mx_CallView_deviceButton,
.mx_CallView_deviceListButton {
background-color: $call-primary-content;
&::before {
background-color: $call-system;
}
}
.mx_CallView_deviceButton {
&.mx_CallView_deviceButton_audio::before {
mask-image: url("@vector-im/compound-design-tokens/icons/mic-off-solid.svg");
mask-size: 18px;
}
&.mx_CallView_deviceButton_video::before {
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-off-solid.svg");
}
}
}
}
}
}
.mx_CallView_connectButton {
padding-left: 50px;
padding-right: 50px;
}
}
}

27
res/css/views/voip/_VideoFeed.pcss
View File

@@ -49,9 +49,7 @@ Please see LICENSE files in the repository root for full details.
position: absolute;
left: 6px;
bottom: 6px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
width: 24px;
height: 24px;
@@ -59,24 +57,11 @@ Please see LICENSE files in the repository root for full details.
background-color: rgb(0, 0, 0, 0.5); /* Same on both themes */
border-radius: 100%;
&::before {
position: absolute;
content: "";
width: 17px;
height: 17px;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
background-color: white; /* Same on both themes */
border-radius: 7px;
}
&.mx_VideoFeed_mic_muted::before {
mask-image: url("@vector-im/compound-design-tokens/icons/mic-off-solid.svg");
}
&.mx_VideoFeed_mic_unmuted::before {
mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg");
svg {
width: 16px;
height: 16px;
padding: 4px;
color: white; /* Same on both themes */
}
}
}