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

Switch to rendering svg icons rather than css masking (#31517)

Browse Source 
* Switch to rendering svg icons rather than masking them in left panel

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

* Remove unused stylesheet

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

* Switch to rendering svg icons rather than masking them for ExternalLink

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

* Switch to rendering svg icons rather than masking them for TabbedView

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

* Switch to rendering svg icons rather than masking them for JoinRuleDropdown

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

* Switch to rendering svg icons rather than masking them in ManageRestrictedJoinRuleDialog

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

* Switch to rendering svg icons rather than masking them in LeaveSpaceDialog

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

* Switch to rendering svg icons rather than masking them in ReplyPreview

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

* Switch to rendering svg icons rather than masking them in SearchBox

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

* Switch to rendering svg icons rather than masking them in RoomStatusBar

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

* Fix advanced.svg

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

* Update snapshots

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

* Update screenshots

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

* Iterate

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

* Fix bad merge conflict resolution

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-15 09:52:50 +00:00
committed by GitHub
parent ef63661cb0
commit 1d3421417f
50 changed files with 558 additions and 375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -114,67 +114,30 @@ Please see LICENSE files in the repository root for full details.
margin-top: 12px;
}
.mx_LeftPanel_dialPadButton {
width: 32px;
height: 32px;
.mx_LeftPanel_dialPadButton,
.mx_LeftPanel_exploreButton {
width: 20px;
height: 20px;
padding: var(--cpd-space-1-5x);
border-radius: 8px;
background-color: $panel-actions;
position: relative;
margin-left: 8px;
&::before {
content: "";
position: absolute;
top: 6px;
left: 6px;
width: 20px;
height: 20px;
mask-image: url("@vector-im/compound-design-tokens/icons/dial-pad.svg");
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $secondary-content;
}
}
.mx_LeftPanel_exploreButton,
.mx_LeftPanel_recentsButton {
width: 32px;
height: 32px;
border-radius: 8px;
background-color: $panel-actions;
position: relative;
margin-left: 8px;
&::before {
content: "";
position: absolute;
top: 8px;
left: 8px;
width: 16px;
height: 16px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $secondary-content;
svg {
width: inherit;
height: inherit;
display: block;
color: $secondary-content;
}
&:hover {
background-color: $tertiary-content;
&::before {
background-color: $background;
svg {
color: $background;
}
}
}
.mx_LeftPanel_exploreButton::before {
mask-image: url("@vector-im/compound-design-tokens/icons/explore.svg");
}
.mx_LeftPanel_recentsButton::before {
mask-image: url("@vector-im/compound-design-tokens/icons/time.svg");
}
}
.mx_LegacyRoomListHeader:first-child {
@@ -228,8 +191,7 @@ Please see LICENSE files in the repository root for full details.
background-color: transparent;
}
.mx_LeftPanel_exploreButton,
.mx_LeftPanel_recentsButton {
.mx_LeftPanel_exploreButton {
margin-left: 0;
margin-top: 8px;
}