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

Merge remote-tracking branch 'github.com/develop' into develop
Some checks failed
Localazy Upload / upload (push) Failing after 0s
Details
Static Analysis / i18n Check (push) Failing after 0s
Details
Docker / Docker Buildx (push) Has been cancelled
Details
Build / Build on macos-14 (push) Has been cancelled
Details
Build / Build on ubuntu-24.04 (push) Has been cancelled
Details
Build / Build on windows-2022 (push) Has been cancelled
Details
Build and Deploy develop / Build & Deploy develop.element.io (push) Has been cancelled
Details
Deploy documentation / GitHub Pages (push) Has been cancelled
Details
Shared Component Visual Tests / Run Visual Tests (push) Has been cancelled
Details
Static Analysis / Typescript Syntax Check (push) Has been cancelled
Details
Static Analysis / Rethemendex Check (push) Has been cancelled
Details
Static Analysis / ESLint (push) Has been cancelled
Details
Static Analysis / Style Lint (push) Has been cancelled
Details
Static Analysis / Workflow Lint (push) Has been cancelled
Details
Static Analysis / Analyse Dead Code (push) Has been cancelled
Details
Deploy documentation / deploy (push) Has been cancelled
Details
Close stale issues & PRs / close (push) Has been cancelled
Details
Update Playwright docker images / update (push) Has been cancelled
Details
Update Jitsi / update (push) Has been cancelled
Details
Localazy Download / download (push) Failing after 0s
Details
Sync labels / sync-labels (push) Failing after 1s
Details

Browse Source 
# Conflicts:
#	package.json
#	res/css/views/rooms/_MessageComposer.pcss
#	src/components/views/rooms/EventTile.tsx
#	src/components/views/rooms/MessageComposer.tsx
#	src/utils/WellKnownUtils.ts
#	yarn.lock
This commit is contained in:
Nik Rozman
2025-12-31 12:37:45 +01:00
parent 12bd062971 494bc1a468
commit d8304df7f3
1902 changed files with 89983 additions and 34485 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
res/css/views/audio_messages/_AudioPlayer.pcss
View File

@@ -1,59 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_MediaBody.mx_AudioPlayer_container {
padding: 16px 12px 12px 12px;
.mx_AudioPlayer_primaryContainer {
display: flex;
.mx_PlayPauseButton {
margin-right: 8px;
}
.mx_AudioPlayer_mediaInfo {
flex: 1;
overflow: hidden; /* makes the ellipsis on the file name work */
& > * {
display: block;
}
.mx_AudioPlayer_mediaName {
color: $primary-content;
font-size: $font-15px;
line-height: $font-15px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding-bottom: 4px; /* mimics the line-height differences in the Figma */
}
.mx_AudioPlayer_byline {
font-size: $font-12px;
line-height: $font-12px;
}
}
}
.mx_AudioPlayer_seek {
display: flex;
align-items: center;
.mx_SeekBar {
flex: 1;
}
.mx_Clock {
min-width: $font-42px; /* for flexbox */
padding-left: $spacing-4; /* isolate from seek bar */
text-align: justify;
white-space: nowrap;
}
}
}

22
res/css/views/audio_messages/_PlayPauseButton.pcss
View File

@@ -14,28 +14,16 @@ Please see LICENSE files in the repository root for full details.
min-height: 32px; /* for when the button is used in a flexbox */
border-radius: 32px;
background-color: $system;
/* !important override compound icon button */
padding: var(--cpd-space-1-5x) !important;
box-sizing: border-box;
&::before {
content: "";
position: absolute; /* sizing varies by icon */
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
top: 6px; /* center */
left: 6px; /* center */
svg {
width: 20px;
height: 20px;
}
&.mx_PlayPauseButton_disabled::before {
&[disabled] svg {
opacity: 0.5;
}
&.mx_PlayPauseButton_play::before {
mask-image: url("@vector-im/compound-design-tokens/icons/play-solid.svg");
}
&.mx_PlayPauseButton_pause::before {
mask-image: url("@vector-im/compound-design-tokens/icons/pause-solid.svg");
}
}

6
res/css/views/auth/_AuthBody.pcss
View File

@@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
font-size: $font-12px;
color: $authpage-secondary-color;
background-color: $background;
border-radius: 0 4px 4px 0;
border-radius: 0 var(--cpd-space-6x) var(--cpd-space-6x) 0;
padding: 25px 60px;
box-sizing: border-box;
@@ -119,7 +119,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_Dropdown_arrow {
background: $authpage-primary-color;
color: $authpage-primary-color;
}
.mx_Dropdown_menu {
@@ -237,7 +237,7 @@ Please see LICENSE files in the repository root for full details.
font-size: $font-15px;
line-height: $font-24px;
.mx_InlineSpinner img {
.mx_InlineSpinner svg {
vertical-align: sub;
margin-right: 5px;
}

13
res/css/views/auth/_AuthPage.pcss
View File

@@ -18,8 +18,7 @@ Please see LICENSE files in the repository root for full details.
.mx_AuthPage_modal {
display: flex;
margin: 100px auto auto;
border-radius: 4px;
box-shadow: 0 2px 4px 0 rgb(0, 0, 0, 0.33);
border-radius: var(--cpd-space-6x);
background-color: $authpage-modal-bg-color;
@media only screen and (max-height: 768px) {
@@ -29,4 +28,14 @@ Please see LICENSE files in the repository root for full details.
@media only screen and (max-width: 480px) {
margin-top: 0;
}
&.mx_AuthPage_modal_withBlur {
/* Apply a blurred shadow around the modal */
box-shadow: 0 2px 4px 0 rgb(0, 0, 0, 0.33);
.mx_AuthPage_modalContent {
/* Make the modal's background semitransparent */
background-color: $authpage-modal-content-with-blur-bg-color;
}
}
}

3
res/css/views/auth/_CompleteSecurityBody.pcss
View File

@@ -8,11 +8,10 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_CompleteSecurityBody {
width: 600px;
color: $authpage-primary-color;
background-color: $background;
border-radius: 4px;
padding: 20px;
padding: 20px 20px 60px 20px;
box-sizing: border-box;
h2 {

2
res/css/views/auth/_LanguageSelector.pcss
View File

@@ -17,5 +17,5 @@ Please see LICENSE files in the repository root for full details.
}
.mx_AuthBody_language .mx_Dropdown_arrow {
background: $authpage-lang-color;
color: $authpage-lang-color;
}

5
res/css/views/auth/_Welcome.pcss
View File

@@ -20,3 +20,8 @@ Please see LICENSE files in the repository root for full details.
width: 160px;
margin-bottom: 10px;
}
/* Invert image colours in dark mode. */
.cpd-theme-dark .mx_WelcomePage_logo {
filter: invert(1);
}

3
res/css/views/avatars/_WidgetAvatar.pcss
View File

@@ -7,5 +7,6 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_WidgetAvatar {
border-radius: 4px;
/* !important override compound avatar */
border-radius: 4px !important;
}

4
res/css/views/context_menus/_DeviceContextMenu.pcss
View File

@@ -9,10 +9,6 @@ Please see LICENSE files in the repository root for full details.
.mx_DeviceContextMenu {
max-width: 252px;
.mx_DeviceContextMenu_device_icon {
display: none;
}
.mx_IconizedContextMenu_label {
padding-left: 0 !important;
}

65
res/css/views/context_menus/_IconizedContextMenu.pcss
View File

@@ -68,14 +68,6 @@ Please see LICENSE files in the repository root for full details.
cursor: not-allowed;
}
img,
.mx_IconizedContextMenu_icon {
/* icons */
width: 16px;
min-width: 16px;
max-width: 16px;
}
span.mx_IconizedContextMenu_label {
/* labels */
width: 100%;
@@ -87,8 +79,15 @@ Please see LICENSE files in the repository root for full details.
white-space: nowrap;
}
.mx_IconizedContextMenu_icon + .mx_IconizedContextMenu_label {
padding-left: 14px;
svg {
width: 16px;
height: 16px;
display: block;
flex-shrink: 0;
& + .mx_IconizedContextMenu_label {
padding-left: 14px;
}
}
.mx_BetaCard_betaPill {
@@ -97,38 +96,21 @@ Please see LICENSE files in the repository root for full details.
}
}
.mx_IconizedContextMenu_icon {
position: relative;
width: 16px;
height: 16px;
&::before {
content: "";
width: inherit;
height: inherit;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: var(--cpd-color-icon-primary);
}
}
.mx_IconizedContextMenu_optionList_red {
.mx_IconizedContextMenu_item {
color: $alert !important;
}
.mx_IconizedContextMenu_icon::before {
background-color: var(--cpd-color-icon-critical-primary);
svg {
color: var(--cpd-color-icon-critical-primary);
}
}
.mx_IconizedContextMenu_option_red {
color: $alert !important;
.mx_IconizedContextMenu_icon::before {
background-color: $alert;
svg {
color: $alert;
}
}
@@ -136,10 +118,10 @@ Please see LICENSE files in the repository root for full details.
&.mx_IconizedContextMenu_item,
.mx_IconizedContextMenu_item {
color: $accent !important;
}
.mx_IconizedContextMenu_icon::before {
background-color: $accent;
svg {
color: $accent;
}
}
}
@@ -149,24 +131,11 @@ Please see LICENSE files in the repository root for full details.
}
}
.mx_IconizedContextMenu_checked,
.mx_IconizedContextMenu_unchecked {
svg.mx_IconizedContextMenu_checked {
margin-left: 16px;
margin-right: -5px;
}
.mx_IconizedContextMenu_developerTools::before {
mask-image: url("$(res)/img/element-icons/settings/flask.svg");
}
.mx_IconizedContextMenu_checked::before {
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
}
.mx_IconizedContextMenu_unchecked::before {
content: unset;
}
.mx_IconizedContextMenu_sublabel {
margin-left: 20px;
color: $tertiary-content;

113
res/css/views/context_menus/_MessageContextMenu.pcss
View File

@@ -1,113 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Michael Weimann <mail@michael-weimann.eu>
Copyright 2015, 2016 OpenMarket Ltd
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_MessageContextMenu {
.mx_IconizedContextMenu_icon {
width: 16px;
height: 16px;
display: block;
&::before {
content: "";
width: 16px;
height: 16px;
display: block;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
}
.mx_MessageContextMenu_iconCollapse::before {
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-up.svg");
}
.mx_MessageContextMenu_iconReport::before {
mask-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
}
.mx_MessageContextMenu_iconLink::before {
mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
}
.mx_MessageContextMenu_iconPermalink::before {
mask-image: url("$(res)/img/element-icons/room/share.svg");
}
.mx_MessageContextMenu_iconUnhidePreview::before {
mask-image: url("$(res)/img/element-icons/settings/appearance.svg");
}
.mx_MessageContextMenu_iconOpenInMapSite::before {
mask-image: url("$(res)/img/external-link.svg");
}
.mx_MessageContextMenu_iconEndPoll::before {
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
}
.mx_MessageContextMenu_iconForward::before {
mask-image: url("@vector-im/compound-design-tokens/icons/forward.svg");
}
.mx_MessageContextMenu_iconRedact::before {
mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
}
.mx_MessageContextMenu_iconResend::before {
mask-image: url("@vector-im/compound-design-tokens/icons/restart.svg");
}
.mx_MessageContextMenu_iconSource::before {
mask-image: url("@vector-im/compound-design-tokens/icons/inline-code.svg");
}
.mx_MessageContextMenu_iconQuote::before {
mask-image: url("@vector-im/compound-design-tokens/icons/quote.svg");
}
.mx_MessageContextMenu_iconPin::before {
mask-image: url("@vector-im/compound-design-tokens/icons/pin.svg");
}
.mx_MessageContextMenu_iconUnpin::before {
mask-image: url("@vector-im/compound-design-tokens/icons/unpin.svg");
}
.mx_MessageContextMenu_iconCopy::before {
height: 16px;
mask-image: url($copy-button-url);
position: relative;
width: 16px;
}
.mx_MessageContextMenu_iconEdit::before {
mask-image: url("$(res)/img/element-icons/room/message-bar/edit.svg");
}
.mx_MessageContextMenu_iconReply::before {
mask-image: url("@vector-im/compound-design-tokens/icons/reply.svg");
}
.mx_MessageContextMenu_iconReplyInThread::before {
mask-image: url("@vector-im/compound-design-tokens/icons/threads.svg");
}
.mx_MessageContextMenu_iconReact::before {
mask-image: url("$(res)/img/element-icons/room/message-bar/emoji.svg");
}
.mx_MessageContextMenu_iconViewInRoom::before {
mask-image: url("$(res)/img/element-icons/view-in-room.svg");
}
.mx_MessageContextMenu_jumpToEvent::before {
mask-image: url("$(res)/img/element-icons/child-relationship.svg");
}
}

71
res/css/views/context_menus/_RoomGeneralContextMenu.pcss
View File

@@ -1,71 +0,0 @@
.mx_RoomGeneralContextMenu_iconStar::before {
mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
}
.mx_RoomGeneralContextMenu_iconArrowDown::before {
mask-image: url("$(res)/img/element-icons/roomlist/low-priority.svg");
}
.mx_RoomGeneralContextMenu_iconMarkAsRead::before {
mask-image: url("$(res)/img/element-icons/roomlist/mark-as-read.svg");
}
.mx_RoomGeneralContextMenu_iconMarkAsUnread::before {
mask-image: url("$(res)/img/element-icons/roomlist/mark-as-unread.svg");
}
.mx_RoomGeneralContextMenu_iconNotificationsDefault::before {
mask-image: url("$(res)/img/element-icons/notifications.svg");
}
.mx_RoomGeneralContextMenu_iconNotificationsAllMessages::before {
mask-image: url("$(res)/img/element-icons/roomlist/notifications-default.svg");
}
.mx_RoomGeneralContextMenu_iconNotificationsMentionsKeywords::before {
mask-image: url("$(res)/img/element-icons/roomlist/notifications-dm.svg");
}
.mx_RoomGeneralContextMenu_iconNotificationsNone::before {
mask-image: url("$(res)/img/element-icons/roomlist/notifications-off.svg");
}
.mx_RoomGeneralContextMenu_iconPeople::before {
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
}
.mx_RoomGeneralContextMenu_iconFiles::before {
mask-image: url("@vector-im/compound-design-tokens/icons/files.svg");
}
.mx_RoomGeneralContextMenu_iconPins::before {
mask-image: url("$(res)/img/element-icons/room/pin-upright.svg");
}
.mx_RoomGeneralContextMenu_iconWidgets::before {
mask-image: url("@vector-im/compound-design-tokens/icons/extensions-solid.svg");
}
.mx_RoomGeneralContextMenu_iconSettings::before {
mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
}
.mx_RoomGeneralContextMenu_iconExport::before {
mask-image: url("@vector-im/compound-design-tokens/icons/export-archive.svg");
}
.mx_RoomGeneralContextMenu_iconDeveloperTools::before {
mask-image: url("$(res)/img/element-icons/settings/flask.svg");
}
.mx_RoomGeneralContextMenu_iconCopyLink::before {
mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
}
.mx_RoomGeneralContextMenu_iconInvite::before {
mask-image: url("$(res)/img/element-icons/room/invite.svg");
}
.mx_RoomGeneralContextMenu_iconSignOut::before {
mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
}

12
res/css/views/context_menus/_RoomNotificationContextMenu.pcss
View File

@@ -1,12 +0,0 @@
.mx_RoomNotificationContextMenu_iconBell::before {
mask-image: url("$(res)/img/element-icons/notifications.svg");
}
.mx_RoomNotificationContextMenu_iconBellDot::before {
mask-image: url("$(res)/img/element-icons/roomlist/notifications-default.svg");
}
.mx_RoomNotificationContextMenu_iconBellMentions::before {
mask-image: url("$(res)/img/element-icons/roomlist/notifications-dm.svg");
}
.mx_RoomNotificationContextMenu_iconBellCrossed::before {
mask-image: url("$(res)/img/element-icons/roomlist/notifications-off.svg");
}

17
res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss
View File

@@ -32,27 +32,20 @@ Please see LICENSE files in the repository root for full details.
}
.mx_ConfirmSpaceUserActionDialog_warning {
position: relative;
border-radius: 8px;
padding: 12px 8px 12px 42px;
padding: 12px 8px;
background-color: $header-panel-bg-color;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
&::before {
content: "";
position: absolute;
left: 10px;
top: calc(50% - 8px); /* vertical centering */
svg {
height: 16px;
width: 16px;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
mask-position: center;
vertical-align: -4px;
margin-right: var(--cpd-space-1-5x);
color: $secondary-content;
}
}
}

17
res/css/views/dialogs/_CreateRoomDialog.pcss
View File

@@ -57,16 +57,9 @@ Please see LICENSE files in the repository root for full details.
width: 100%;
}
/* needed to make the alias field only grow as wide as needed */
/* as opposed to full width */
.mx_CreateRoomDialog_aliasContainer {
/* needed to make the alias field only grow as wide as needed as opposed to full width */
display: flex;
/* put margin on container so it can collapse with siblings */
margin: 24px 0 10px;
.mx_RoomAliasField {
margin: 0;
}
}
.mx_CreateRoomDialog {
@@ -102,6 +95,14 @@ Please see LICENSE files in the repository root for full details.
margin-top: 24px;
}
.mx_Field {
margin: 0;
}
form {
gap: var(--cpd-space-4x);
}
p {
margin: 0 85px 0 0;
font-size: $font-12px;

10
res/css/views/dialogs/_DevtoolsDialog.pcss
View File

@@ -22,6 +22,16 @@ Please see LICENSE files in the repository root for full details.
margin-bottom: 0;
}
}
.mx_DevTools_toggleForm {
gap: var(--cpd-space-2x);
}
}
.mx_DevTools_toolHeading {
color: var(--cpd-color-text-secondary);
font-weight: var(--cpd-font-weight-semibold);
font-size: var(--cpd-font-size-heading-sm);
}
.mx_DevTools_content {

30
res/css/views/dialogs/_FeedbackDialog.pcss
View File

@@ -55,33 +55,17 @@ Please see LICENSE files in the repository root for full details.
text-decoration: underline;
}
&::before,
&::after {
content: "";
& > svg {
position: absolute;
width: 40px;
height: 40px;
left: 16px;
top: 12px;
}
&::before {
padding: var(--cpd-space-2x);
width: 24px;
height: 24px;
background-color: $icon-button-color;
color: $avatar-initial-color;
border-radius: 8px;
}
&::after {
background: $avatar-initial-color; /* TODO */
mask-position: center;
mask-size: 24px;
mask-repeat: no-repeat;
}
}
.mx_FeedbackDialog_reportBug {
&::after {
mask-image: url("$(res)/img/feather-customised/bug.svg");
}
}
.mx_FeedbackDialog_rateApp {
@@ -125,9 +109,5 @@ Please see LICENSE files in the repository root for full details.
font-size: 24px;
border-color: var(--cpd-color-bg-action-primary-rest);
}
&::after {
mask-image: url("$(res)/img/element-icons/feedback.svg");
}
}
}

11
res/css/views/dialogs/_ForwardDialog.pcss
View File

@@ -61,6 +61,11 @@ Please see LICENSE files in the repository root for full details.
/* To match the space around the title */
margin: 0 0 15px 0;
flex-grow: 0;
&:not(:focus-within) + .mx_ForwardList_content {
/* Inhibit the styling if focus is not within the input which handles keyboard accessibility */
--mx_ForwardList_entry_selectedBgColor: transparent;
}
}
.mx_ForwardList_content {
@@ -90,7 +95,7 @@ Please see LICENSE files in the repository root for full details.
&:hover,
&.mx_ForwardList_entry_active {
background-color: $spacePanel-bg-color;
background-color: var(--mx_ForwardList_entry_selectedBgColor, $spacePanel-bg-color);
}
.mx_ForwardList_roomButton {
@@ -142,7 +147,7 @@ Please see LICENSE files in the repository root for full details.
&.mx_ForwardList_sending .mx_ForwardList_sendIcon {
background-color: $accent;
mask-image: url("$(res)/img/element-icons/circle-sending.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/circle.svg");
mask-position: center;
mask-repeat: no-repeat;
mask-size: 14px;
@@ -152,7 +157,7 @@ Please see LICENSE files in the repository root for full details.
&.mx_ForwardList_sent .mx_ForwardList_sendIcon {
background-color: $accent;
mask-image: url("$(res)/img/element-icons/circle-sent.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/check-circle.svg");
mask-position: center;
mask-repeat: no-repeat;
mask-size: 14px;

173
res/css/views/dialogs/_InviteDialog.pcss
View File

@@ -24,76 +24,20 @@ Please see LICENSE files in the repository root for full details.
.mx_InviteDialog_editor {
flex: 1;
width: 100%; /* Needed to make the Field inside grow */
background-color: $header-panel-bg-color;
border-radius: 4px;
min-height: 25px;
padding-inline-start: $spacing-8;
overflow-x: hidden;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
.mx_InviteDialog_userTile {
margin: 6px 6px 0 0;
display: inline-block;
min-width: max-content; /* prevent manipulation by flexbox */
}
/* overrides bunch of our default text input styles */
> input[type="text"] {
margin: 6px 0 !important;
height: 24px;
font: var(--cpd-font-body-md-regular);
line-height: $font-24px;
padding-inline-start: $spacing-12;
border: 0 !important;
outline: 0 !important;
resize: none;
box-sizing: border-box;
min-width: 40%;
flex: 1 !important;
color: $primary-content !important;
}
margin-left: var(--cpd-space-0-5x);
}
.mx_InviteDialog_goButton {
min-width: 48px;
min-width: 86px;
margin-inline-start: 10px;
height: 25px;
height: 41px;
line-height: $font-25px;
}
.mx_InviteDialog_buttonAndSpinner {
.mx_Spinner {
/* Width and height are required to trick the layout engine. */
width: 20px;
height: 20px;
margin-inline-start: 5px;
display: inline-block;
vertical-align: middle;
}
}
}
.mx_InviteDialog_section {
padding-bottom: $spacing-4;
h3 {
font-size: $font-12px;
color: $muted-fg-color;
font-weight: bold;
text-transform: uppercase;
}
> p {
margin: 0;
}
> span {
color: $primary-content;
}
.mx_InviteDialog_section_showMore {
margin: 7px 18px;
display: block;
@@ -138,51 +82,6 @@ Please see LICENSE files in the repository root for full details.
}
}
/* Many of these styles are stolen from mx_UserPill, but adjusted for the invite dialog. */
.mx_InviteDialog_userTile {
margin-inline-end: $spacing-8;
.mx_InviteDialog_userTile_pill {
background-color: var(--cpd-color-bg-canvas-default);
border: 1px solid var(--cpd-color-gray-400);
border-radius: 99px;
display: inline-block;
height: 24px;
line-height: $font-24px;
padding-inline: $spacing-8;
vertical-align: middle;
color: var(--cpd-color-gray-1100);
.mx_SearchResultAvatar {
border-radius: 20px;
position: relative;
left: -5px;
top: 2px;
}
img.mx_SearchResultAvatar {
vertical-align: top;
}
.mx_InviteDialog_userTile_name {
vertical-align: top;
}
.mx_SearchResultAvatar_threepidAvatar {
background-color: #ffffff; /* this is fine without a var because it's for both themes */
}
}
.mx_InviteDialog_userTile_remove {
display: inline-block;
vertical-align: middle;
svg {
vertical-align: middle;
}
}
}
.mx_InviteDialog_other {
/* Prevent the dialog from jumping around randomly when elements change. */
display: flex;
@@ -205,10 +104,13 @@ Please see LICENSE files in the repository root for full details.
.mx_InviteDialog_userSections {
flex-grow: 1;
padding-inline-end: 0;
display: flex;
flex-direction: column;
margin-top: var(--cpd-space-3x);
gap: var(--cpd-space-3x);
.mx_InviteDialog_section {
padding-bottom: 0;
margin-top: $spacing-12;
}
}
}
@@ -218,6 +120,10 @@ Please see LICENSE files in the repository root for full details.
flex-direction: column;
flex-grow: 1;
overflow: hidden;
.mx_InviteProgressBody {
margin-top: var(--cpd-space-12x);
}
}
.mx_InviteDialog_transfer {
@@ -256,7 +162,6 @@ Please see LICENSE files in the repository root for full details.
}
.mx_InviteDialog_userSections {
margin-top: $spacing-4;
overflow-y: auto;
padding: 0 45px $spacing-4 0;
}
@@ -318,62 +223,12 @@ Please see LICENSE files in the repository root for full details.
margin-inline-start: auto;
}
.mx_InviteDialog_userDirectoryIcon::before {
mask-image: url("$(res)/img/voip/tab-userdirectory.svg");
}
.mx_InviteDialog_dialPadIcon::before {
mask-image: url("$(res)/img/voip/tab-dialpad.svg");
}
.mx_InviteDialog_tile {
cursor: pointer;
display: grid;
gap: $spacing-8 $spacing-12;
align-items: center;
&.mx_InviteDialog_tile--room {
/* mx_InviteDialog_tile_avatarStack, mx_InviteDialog_tile_nameStack, time */
grid-template-columns: min-content auto auto;
padding: $spacing-4 $spacing-8;
&:hover {
background-color: $header-panel-bg-color;
border-radius: 4px;
}
.mx_InviteDialog_tile--room_selected {
border-radius: 36px;
background-color: var(--cpd-color-bg-success-subtle);
&::before {
content: "";
width: 24px;
height: 24px;
grid-column: 1;
grid-row: 1;
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
mask-size: 100%;
mask-repeat: no-repeat;
position: absolute;
top: 6px; /* 50% */
left: 6px; /* 50% */
background-color: $primary-content;
}
}
.mx_InviteDialog_tile--room_time {
margin-inline-start: auto;
width: max-content;
font-size: $font-12px;
color: $muted-fg-color;
}
.mx_InviteDialog_tile--room_highlight {
font-weight: 900;
}
}
&.mx_InviteDialog_tile--inviterError {
grid-template-columns: max-content auto; /* max-content = avatar width */
margin-bottom: $spacing-24;
@@ -395,15 +250,11 @@ Please see LICENSE files in the repository root for full details.
vertical-align: middle;
}
.mx_InviteDialog_tile_avatarStack,
.mx_InviteDialog_tile--room_selected {
.mx_InviteDialog_tile_avatarStack {
width: 36px;
height: 36px;
display: inline-block;
position: relative;
}
.mx_InviteDialog_tile_avatarStack {
grid-row-start: 1;
grid-column-start: 1;

16
res/css/views/dialogs/_InviteProgressBody.pcss Normal file
View File

@@ -0,0 +1,16 @@
/*
Copyright 2025 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_InviteProgressBody {
text-align: center;
font: var(--cpd-font-body-lg-regular);
h1 {
color: var(--cpd-color-text-primary);
font: var(--cpd-font-heading-sm-semibold);
}
}

33
res/css/views/dialogs/_JoinRuleDropdown.pcss
View File

@@ -18,19 +18,14 @@ Please see LICENSE files in the repository root for full details.
min-height: 32px;
> div {
padding-left: 30px;
position: relative;
padding-left: var(--cpd-space-1-5x);
&::before {
content: "";
position: absolute;
height: 16px;
svg {
width: 16px;
left: 6px;
top: 8px;
mask-repeat: no-repeat;
mask-position: center;
background-color: $secondary-content;
height: 16px;
color: $secondary-content;
vertical-align: -2px;
margin-right: var(--cpd-space-1-5x);
}
&.mx_JoinRuleDropdown_knock::before {
@@ -39,22 +34,6 @@ Please see LICENSE files in the repository root for full details.
}
}
.mx_JoinRuleDropdown_invite::before {
box-sizing: border-box;
mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
mask-size: contain;
padding: 1px;
}
.mx_JoinRuleDropdown_public::before {
mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
}
.mx_JoinRuleDropdown_restricted::before {
mask-image: url("$(res)/img/element-icons/group-members.svg");
mask-size: contain;
}
.mx_JoinRuleDropdown_icon {
color: $secondary-content;
position: absolute;

17
res/css/views/dialogs/_LeaveSpaceDialog.pcss
View File

@@ -25,28 +25,21 @@ Please see LICENSE files in the repository root for full details.
overflow-y: auto;
.mx_LeaveSpaceDialog_section_warning {
position: relative;
border-radius: 8px;
margin: 12px 0 0;
padding: 12px 8px 12px 42px;
padding: 12px 8px;
background-color: $header-panel-bg-color;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
&::before {
content: "";
position: absolute;
left: 10px;
top: calc(50% - 8px); /* vertical centering */
svg {
height: 16px;
width: 16px;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
mask-position: center;
color: $secondary-content;
vertical-align: middle;
margin: 0 var(--cpd-space-1x);
}
}

16
res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss
View File

@@ -87,25 +87,19 @@ Please see LICENSE files in the repository root for full details.
position: relative;
border-radius: 8px;
margin: 12px 0;
padding: 8px 8px 8px 42px;
padding: 8px;
background-color: $header-panel-bg-color;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
&::before {
content: "";
position: absolute;
left: 10px;
top: calc(50% - 8px); /* vertical centering */
svg {
height: 16px;
width: 16px;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
mask-position: center;
color: $secondary-content;
vertical-align: middle;
margin: 0 var(--cpd-space-1x);
}
}

40
res/css/views/dialogs/_RoomSettingsDialog.pcss
View File

@@ -5,46 +5,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
/* ICONS */
/* ========================================================== */
.mx_RoomSettingsDialog_settingsIcon::before {
mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
}
.mx_RoomSettingsDialog_voiceIcon::before {
mask-image: url("$(res)/img/element-icons/call/voice-call.svg");
}
.mx_RoomSettingsDialog_securityIcon::before {
mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
}
.mx_RoomSettingsDialog_rolesIcon::before {
mask-image: url("$(res)/img/element-icons/room/settings/roles.svg");
}
.mx_RoomSettingsDialog_notificationsIcon::before {
mask-image: url("$(res)/img/element-icons/notifications.svg");
}
.mx_RoomSettingsDialog_bridgesIcon::before {
/* This icon is pants, please improve :) */
mask-image: url("$(res)/img/feather-customised/bridge.svg");
}
.mx_RoomSettingsDialog_pollsIcon::before {
mask-image: url("$(res)/img/element-icons/room/composer/poll.svg");
}
.mx_RoomSettingsDialog_warningIcon::before {
mask-image: url("$(res)/img/element-icons/room/settings/advanced.svg");
}
.mx_RoomSettingsDialog_peopleIcon::before {
mask-image: url("$(res)/img/element-icons/group-members.svg");
}
.mx_RoomSettingsDialog .mx_Dialog_title {
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;

2
res/css/views/dialogs/_ServerPickerDialog.pcss
View File

@@ -64,7 +64,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_AccessibleButton_kind_primary {
width: calc(100% - 64px);
width: calc(100% - 26px);
margin: 0 8px;
padding: 15px 18px;
}

24
res/css/views/dialogs/_SettingsDialog.pcss
View File

@@ -30,4 +30,28 @@ Please see LICENSE files in the repository root for full details.
/* colliding harshly with the dialog when scrolled down. */
padding-bottom: 100px;
}
.mx_SettingsDialog_tabLabelsAlert::after {
display: inline-block;
content: "";
width: 8px;
height: 8px;
background-color: var(--cpd-color-icon-critical-primary);
clip-path: circle(4px);
position: absolute;
right: var(--cpd-space-4x);
}
}
/* On narrow viewports, the tab labels are hidden, so we need to shift the indicator so it isn't over the tab icon. */
@media (max-width: 1024px) {
.mx_UserSettingsDialog,
.mx_RoomSettingsDialog,
.mx_SpaceSettingsDialog,
.mx_SpacePreferencesDialog {
.mx_SettingsDialog_tabLabelsAlert::after {
right: var(--cpd-space-1x);
top: var(--cpd-space-1x);
}
}
}

4
res/css/views/dialogs/_SpacePreferencesDialog.pcss
View File

@@ -26,7 +26,3 @@ Please see LICENSE files in the repository root for full details.
}
}
}
.mx_SpacePreferencesDialog_appearanceIcon::before {
mask-image: url("$(res)/img/element-icons/settings/appearance.svg");
}

10
res/css/views/dialogs/_SpaceSettingsDialog.pcss
View File

@@ -71,14 +71,4 @@ Please see LICENSE files in the repository root for full details.
}
}
}
.mx_TabbedView_tabLabel {
.mx_SpaceSettingsDialog_generalIcon::before {
mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
}
.mx_SpaceSettingsDialog_visibilityIcon::before {
mask-image: url("$(res)/img/element-icons/eye.svg");
}
}
}

90
res/css/views/dialogs/_SpotlightDialog.pcss
View File

@@ -13,11 +13,12 @@ Please see LICENSE files in the repository root for full details.
}
.mx_Dialog {
width: fit-content;
border-radius: 8px;
/* !important because it's overriding compound */
width: fit-content !important;
border-radius: 8px !important;
height: 60% !important;
overflow-y: initial;
position: relative;
height: 60%;
padding: 0;
contain: unset; /* needed for #mx_SpotlightDialog_keyboardPrompt to not be culled */
@@ -97,7 +98,7 @@ Please see LICENSE files in the repository root for full details.
}
&.mx_SpotlightDialog_filterPublicRooms::before {
mask-image: url("$(res)/img/element-icons/roomlist/hash-circle.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
}
&.mx_SpotlightDialog_filterPublicSpaces::before {
@@ -150,6 +151,16 @@ Please see LICENSE files in the repository root for full details.
height: unset;
margin-left: $spacing-16;
}
&:not(:focus-within) + #mx_SpotlightDialog_content {
/* Inhibit the styling if focus is not within the input which handles keyboard accessibility */
--mx_SpotlightDialog_option_selectedBgColor: transparent;
/* Hide the enter prompt as in this state pressing enter would not actuate that option */
.mx_SpotlightDialog_enterPrompt {
visibility: hidden;
}
}
}
#mx_SpotlightDialog_content {
@@ -193,6 +204,17 @@ Please see LICENSE files in the repository root for full details.
}
}
.mx_SpotlightDialog_option {
border-radius: 8px;
overflow: hidden;
text-overflow: ellipsis;
&:hover,
&[aria-selected="true"] {
background-color: var(--mx_SpotlightDialog_option_selectedBgColor, $quinary-content);
}
}
.mx_SpotlightDialog_recentlyViewed {
> div {
display: flex;
@@ -202,7 +224,6 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpotlightDialog_option {
border-radius: 8px;
padding: $spacing-4;
color: $primary-content;
font-size: $font-12px;
@@ -213,8 +234,6 @@ Please see LICENSE files in the repository root for full details.
min-width: 58px;
box-sizing: border-box;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
.mx_DecoratedRoomAvatar {
margin: 0 9px $spacing-4; /* maintain centering */
@@ -223,11 +242,6 @@ Please see LICENSE files in the repository root for full details.
& + .mx_SpotlightDialog_option {
margin-left: $spacing-16;
}
&:hover,
&[aria-selected="true"] {
background-color: $quinary-content;
}
}
}
@@ -236,8 +250,9 @@ Please see LICENSE files in the repository root for full details.
.mx_SpotlightDialog_otherSearches,
.mx_SpotlightDialog_hiddenResults {
.mx_SpotlightDialog_option {
--mx_SpotlightDialog_option_selectedBgColor: $system;
padding: 6px $spacing-4;
border-radius: 8px;
font-size: $font-15px;
line-height: $font-24px;
color: $primary-content;
@@ -245,8 +260,6 @@ Please see LICENSE files in the repository root for full details.
display: flex;
align-items: center;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
.mx_SpotlightDialog_option--endAdornment {
display: inline-flex;
@@ -328,41 +341,30 @@ Please see LICENSE files in the repository root for full details.
.mx_SpotlightDialog_option--menu,
.mx_SpotlightDialog_option--notifications {
width: 20px;
min-width: 20px;
height: 20px;
width: 16px;
height: 16px;
padding: var(--cpd-space-0-5x);
flex-shrink: 0;
margin-top: auto;
margin-bottom: auto;
position: relative;
display: none;
&::before {
top: 2px;
left: 2px;
content: "";
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $tertiary-content;
svg {
width: inherit;
height: inherit;
display: block;
color: $tertiary-content;
}
&:hover::before,
&[aria-selected="true"]::before {
background-color: $secondary-content;
&:hover svg,
&:focus-visible svg {
color: $secondary-content;
}
}
.mx_SpotlightDialog_option--menu::before {
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
}
&:hover,
&[aria-selected="true"] {
background-color: $system;
.mx_SpotlightDialog_option--menu,
.mx_SpotlightDialog_option--notifications {
display: block;
@@ -404,7 +406,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpotlightDialog_createRoom .mx_AccessibleButton::before {
mask-image: url("$(res)/img/element-icons/roomlist/hash.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
}
.mx_SpotlightDialog_otherSearches {
@@ -437,11 +439,11 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpotlightDialog_joinRoomAlias::before {
mask-image: url("$(res)/img/element-icons/roomlist/hash-circle.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
}
.mx_SpotlightDialog_explorePublicRooms::before {
mask-image: url("$(res)/img/element-icons/roomlist/hash-circle.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
}
.mx_SpotlightDialog_explorePublicSpaces::before {
@@ -449,11 +451,11 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpotlightDialog_startGroupChat::before {
mask-image: url("$(res)/img/element-icons/group-members.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/group.svg");
}
.mx_SpotlightDialog_searchMessages::before {
mask-image: url("$(res)/img/element-icons/room/search-inset.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/chat.svg");
}
.mx_SpotlightDialog_otherSearches_messageSearchText {
@@ -513,7 +515,7 @@ Please see LICENSE files in the repository root for full details.
}
&.mx_SpotlightDialog_metaspaceResult_orphans-space {
mask-image: url("$(res)/img/element-icons/roomlist/hash-circle.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/room.svg");
}
}
}

3
res/css/views/dialogs/_VerifyEMailDialog.pcss
View File

@@ -15,7 +15,8 @@ Please see LICENSE files in the repository root for full details.
font: var(--cpd-font-body-md-regular);
padding: $spacing-24 $spacing-24 $spacing-16;
text-align: center;
width: 485px;
/* !important override compound */
width: 485px !important;
h1 {
font-size: $font-24px;

19
res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
View File

@@ -15,6 +15,23 @@ Please see LICENSE files in the repository root for full details.
}
.mx_AccessSecretStorageDialog_primaryContainer {
.mx_AccessSecretStorageDialog_recoveryKeyEntry {
/*
* Be specific here to avoid "margin: 9px" from _common.pcss
*/
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) {
input {
/*
* From figma: https://www.figma.com/design/ZodBLtGnKmRTGJo5SGLnH3/ER-137--Excluding-Insecure-Devices?node-id=102-43729&t=QmewENUd7f6Tmw9U-1
*/
width: 448px;
height: 70px;
margin: 0px;
border: 1px solid;
}
}
}
.mx_AccessSecretStorageDialog_recoveryKeyFeedback {
&::before {
content: "";
@@ -32,7 +49,7 @@ Please see LICENSE files in the repository root for full details.
color: $alert;
&::before {
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
background-color: $alert;
}
}

73
res/css/views/dialogs/security/_CreateKeyBackupDialog.pcss
View File

@@ -1,73 +0,0 @@
/*
Copyright 2018-2024 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_CreateKeyBackupDialog .mx_Dialog_title {
/* TODO: Consider setting this for all dialog titles. */
margin-bottom: 1em;
}
.mx_CreateKeyBackupDialog_primaryContainer {
/* FIXME: plinth colour in new theme(s). background-color: $accent; */
padding: 20px;
}
.mx_CreateKeyBackupDialog_primaryContainer::after {
content: "";
clear: both;
display: block;
}
.mx_CreateKeyBackupDialog_passPhraseContainer {
display: flex;
align-items: flex-start;
}
.mx_CreateKeyBackupDialog_passPhraseInput {
flex: none;
width: 250px;
border: 1px solid $accent;
border-radius: 5px;
padding: 10px;
margin-bottom: 1em;
}
.mx_CreateKeyBackupDialog_passPhraseMatch {
margin-left: 20px;
}
.mx_CreateKeyBackupDialog_recoveryKeyHeader {
margin-bottom: 1em;
}
.mx_CreateKeyBackupDialog_recoveryKeyContainer {
display: flex;
}
.mx_CreateKeyBackupDialog_recoveryKey {
width: 262px;
padding: 20px;
color: $info-plinth-fg-color;
background-color: $info-plinth-bg-color;
margin-right: 12px;
}
.mx_CreateKeyBackupDialog_recoveryKeyButtons {
flex: 1;
display: flex;
align-items: center;
}
.mx_CreateKeyBackupDialog_recoveryKeyButtons button {
flex: 1;
white-space: nowrap;
}
.mx_CreateKeyBackupDialog {
details .mx_AccessibleButton {
margin: 1em 0; /* emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules */
}
}

16
res/css/views/dialogs/security/_KeyBackupFailedDialog.pcss
View File

@@ -10,20 +10,12 @@ Please see LICENSE files in the repository root for full details.
}
.mx_KeyBackupFailedDialog_title {
position: relative;
padding-left: 45px;
padding-bottom: 10px;
&::before {
mask: url("$(res)/img/e2e/lock-warning-filled.svg");
mask-repeat: no-repeat;
background-color: $primary-content;
content: "";
position: absolute;
top: -6px;
right: 0;
bottom: 0;
left: 0;
svg {
margin-right: var(--cpd-space-2x);
vertical-align: -2px;
color: $primary-content;
}
}

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

@@ -39,19 +39,19 @@ Please see LICENSE files in the repository root for full details.
.mx_GenericDropdownMenu_divider {
margin-top: $spacing-4;
margin-bottom: $spacing-4;
}
}
.mx_NetworkDropdown_addServer {
font-weight: normal;
font-size: $font-15px;
& + .mx_GenericDropdownMenu_Option .mx_GenericDropdownMenu_Option--label {
font-size: $font-15px;
}
}
}
.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;
@@ -59,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;
}
}

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

@@ -37,6 +37,7 @@ Please see LICENSE files in the repository root for full details.
font: var(--cpd-font-body-md-semibold);
border: none; /* override default <button /> styles */
word-break: keep-all; /* prevent button text in Chinese/Japanese/Korean (CJK) from being collapsed */
box-sizing: border-box;
&.mx_AccessibleButton_kind_primary_sm,
&.mx_AccessibleButton_kind_danger_sm,
@@ -47,11 +48,13 @@ Please see LICENSE files in the repository root for full details.
&.mx_AccessibleButton_kind_primary_sm {
color: var(--cpd-color-text-on-solid-primary);
background-color: var(--cpd-color-bg-action-primary-rest);
border: 1px solid var(--cpd-color-bg-action-primary-rest);
}
&.mx_AccessibleButton_kind_danger_sm {
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_kind_link_sm {

10
res/css/views/elements/_CopyableText.pcss
View File

@@ -39,17 +39,11 @@ Please see LICENSE files in the repository root for full details.
top: 0.15em;
background-color: $background;
&::before {
content: "";
mask-image: url($copy-button-url);
mask-position: center center;
mask-repeat: no-repeat;
mask-size: contain;
background-color: $message-action-bar-fg-color;
svg {
width: 1em;
height: 1em;
color: $message-action-bar-fg-color;
display: block;
background-repeat: no-repeat;
}
}
}

14
res/css/views/elements/_Dropdown.pcss
View File

@@ -38,15 +38,11 @@ Please see LICENSE files in the repository root for full details.
filter: none;
}
.mx_Dropdown_arrow {
width: 16px;
height: 16px;
margin-right: 4px;
mask: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: 18px;
background: $primary-content;
svg.mx_Dropdown_arrow {
width: 18px;
height: 18px;
margin-right: 3px;
color: $primary-content;
}
.mx_Dropdown_option {

4
res/css/views/elements/_ExternalLink.pcss
View File

@@ -12,10 +12,6 @@ Please see LICENSE files in the repository root for full details.
.mx_ExternalLink_icon {
display: inline-block;
mask-image: url("$(res)/img/external-link.svg");
background-color: currentColor;
mask-repeat: no-repeat;
mask-size: contain;
width: $font-11px;
height: $font-11px;
margin-left: 0.3rem;

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");
}

14
res/css/views/elements/_InlineSpinner.pcss
View File

@@ -7,14 +7,10 @@ Please see LICENSE files in the repository root for full details.
.mx_InlineSpinner {
display: inline;
}
.mx_InlineSpinner img,
.mx_InlineSpinner_icon {
margin: 0px 6px;
vertical-align: -3px;
}
.mx_InlineSpinner_icon {
display: inline-block !important; /* Override regular mx_Spinner_icon */
svg {
margin: 0px 6px;
vertical-align: -3px;
display: inline-block;
}
}

12
res/css/views/elements/_InviteReason.pcss
View File

@@ -23,14 +23,12 @@ Please see LICENSE files in the repository root for full details.
cursor: pointer;
color: $secondary-content;
&::before {
content: "";
margin-right: 8px;
background-color: $secondary-content;
mask-image: url("$(res)/img/element-icons/eye.svg");
svg {
width: 16px;
height: 16px;
color: $secondary-content;
display: inline-block;
width: 18px;
height: 14px;
margin-right: 8px;
}
}
}

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

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

@@ -11,8 +11,7 @@ Please see LICENSE files in the repository root for full details.
line-height: $font-17px;
border-radius: $font-16px;
vertical-align: text-top;
display: inline-flex;
align-items: center;
display: inline-block;
box-sizing: border-box;
max-width: 100%;
overflow: hidden;
@@ -57,6 +56,8 @@ Please see LICENSE files in the repository root for full details.
margin-inline-start: -0.3em; /* Otherwise the gap is too large */
margin-inline-end: 0.2em;
min-width: $font-16px; /* ensure the avatar is not compressed */
user-select: text;
vertical-align: top;
}
.mx_Pill_text {

6
res/css/views/elements/_ServerPicker.pcss
View File

@@ -25,13 +25,11 @@ Please see LICENSE files in the repository root for full details.
.mx_ServerPicker_help {
width: 20px;
height: 20px;
background-color: $icon-button-color;
border-radius: 10px;
grid-column: 2;
grid-row: 1;
margin-left: auto;
text-align: center;
color: #ffffff;
font-size: 16px;
position: relative;
@@ -45,8 +43,8 @@ Please see LICENSE files in the repository root for full details.
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
mask-image: url("$(res)/img/element-icons/i.svg");
background: #ffffff;
mask-image: url("@vector-im/compound-design-tokens/icons/info.svg");
background: $icon-button-color;
}
}

20
res/css/views/elements/_SettingsDropdown.pcss Normal file
View File

@@ -0,0 +1,20 @@
/*
Copyright 2025 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_SettingsDropdown {
margin-bottom: var(--cpd-space-1x);
width: 100%;
.mx_SettingsDropdown_label {
color: $primary-content;
margin: var(--cpd-space-1x) 0;
}
.mx_Dropdown_input {
width: 360px;
}
}

36
res/css/views/elements/_Spinner.pcss
View File

@@ -19,39 +19,3 @@ Please see LICENSE files in the repository root for full details.
.mx_MatrixChat_middlePanel .mx_Spinner {
height: auto;
}
@keyframes spin {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
.mx_Spinner_icon {
background-color: $quinary-content;
mask: url("$(res)/img/spinner/spinner-background.svg");
mask-size: 100%;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
&::before {
background-color: $secondary-content;
mask: url("$(res)/img/spinner/spinner-foreground.svg");
mask-size: 100%;
width: 100%;
height: 100%;
content: "";
display: flex;
animation: 1s linear spin infinite;
}
}

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

5
res/css/views/emojipicker/_EmojiPicker.pcss
View File

@@ -8,7 +8,8 @@ Please see LICENSE files in the repository root for full details.
.mx_EmojiPicker {
width: 340px;
height: 450px;
height: min(450px, 80vh);
max-height: 80vh;
border-radius: 4px;
@@ -181,7 +182,7 @@ Please see LICENSE files in the repository root for full details.
}
}
.mx_EmojiPicker_body .mx_EmojiPicker_item_wrapper[tabindex="0"] .mx_EmojiPicker_item {
.mx_EmojiPicker_body_showHighlight .mx_EmojiPicker_item_wrapper [tabindex="0"] .mx_EmojiPicker_item {
background-color: $focus-bg-color;
}

2
res/css/views/messages/_CallEvent.pcss
View File

@@ -51,7 +51,7 @@ Please see LICENSE files in the repository root for full details.
vertical-align: middle;
content: "";
background-color: $secondary-content;
mask-image: url("$(res)/img/element-icons/call/video-call.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
mask-size: 16px;
width: 16px;
height: 16px;

2
res/css/views/messages/_CreateEvent.pcss
View File

@@ -11,6 +11,6 @@ Please see LICENSE files in the repository root for full details.
&::before {
background-color: $header-panel-text-primary-color;
mask-image: url("$(res)/img/element-icons/chat-bubbles.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/chat-solid.svg");
}
}

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

2
res/css/views/messages/_HiddenBody.pcss
View File

@@ -18,7 +18,7 @@ Please see LICENSE files in the repository root for full details.
height: 14px;
width: 14px;
background-color: $muted-fg-color;
mask-image: url("$(res)/img/element-icons/hide.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/visibility-off.svg");
mask-repeat: no-repeat;
mask-position: center;

12
res/css/views/messages/_LegacyCallEvent.pcss
View File

@@ -43,24 +43,24 @@ Please see LICENSE files in the repository root for full details.
}
.mx_LegacyCallEvent_silence::before {
mask-image: url("$(res)/img/voip/silence.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/volume-on-solid.svg");
}
.mx_LegacyCallEvent_unSilence::before {
mask-image: url("$(res)/img/voip/un-silence.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/volume-off-solid.svg");
}
&.mx_LegacyCallEvent_voice {
.mx_LegacyCallEvent_type_icon::before,
.mx_LegacyCallEvent_content_button_callBack span::before,
.mx_LegacyCallEvent_content_button_answer span::before {
mask-image: url("$(res)/img/element-icons/call/voice-call.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-solid.svg");
}
&.mx_LegacyCallEvent_rejected,
&.mx_LegacyCallEvent_noAnswer {
.mx_LegacyCallEvent_type_icon::before {
mask-image: url("$(res)/img/element-icons/call/hangup.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/end-call.svg");
}
}
}
@@ -69,7 +69,7 @@ Please see LICENSE files in the repository root for full details.
.mx_LegacyCallEvent_type_icon::before,
.mx_LegacyCallEvent_content_button_callBack span::before,
.mx_LegacyCallEvent_content_button_answer span::before {
mask-image: url("$(res)/img/element-icons/call/video-call.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
}
&.mx_LegacyCallEvent_rejected,
@@ -169,7 +169,7 @@ Please see LICENSE files in the repository root for full details.
.mx_LegacyCallEvent_content_button_reject {
span::before {
mask-image: url("$(res)/img/element-icons/call/hangup.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/end-call.svg");
}
}

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

@@ -45,10 +45,10 @@ Please see LICENSE files in the repository root for full details.
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
mask-image: url("$(res)/img/element-icons/room/composer/attach.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/attachment.svg");
background-color: $secondary-content;
width: 15px;
height: 15px;
width: 16px;
height: 16px;
position: absolute;
top: 8px;

2
res/css/views/messages/_MJitsiWidgetEvent.pcss
View File

@@ -9,6 +9,6 @@ Please see LICENSE files in the repository root for full details.
.mx_EventTileBubble.mx_MJitsiWidgetEvent {
&::before {
background-color: $header-panel-text-primary-color; /* XXX: Variable abuse */
mask-image: url("$(res)/img/element-icons/call/video-call.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
}
}

43
res/css/views/messages/_MPollBody.pcss
View File

@@ -6,15 +6,30 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
.mx_MPollBody {
margin-top: 8px;
$poll-max-width: 550px;
h2 {
.mx_MPollBody {
margin-top: var(--cpd-space-2x);
min-width: 0; /* Override fieldset default min-width: min-content */
width: 100%; /* Ensure fieldset takes full available width */
border: none; /* Remove default fieldset border */
padding: 0; /* Remove default fieldset padding */
legend {
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-24px;
margin-top: 0;
margin-bottom: 8px;
margin-bottom: var(--cpd-space-2x);
letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
display: flex;
align-items: center;
gap: var(--cpd-space-3x);
svg {
flex-shrink: 0;
color: var(--cpd-color-icon-primary);
}
.mx_MPollBody_edited {
color: $roomtopic-color;
@@ -23,22 +38,6 @@ Please see LICENSE files in the repository root for full details.
}
}
h2::before {
content: "";
position: relative;
display: inline-block;
margin-right: 12px;
top: 3px;
left: 3px;
height: 20px;
width: 20px;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
mask-image: url("$(res)/img/element-icons/room/composer/poll.svg");
}
.mx_MPollBody_totalVotes {
display: flex;
flex-direction: inline;
@@ -60,7 +59,7 @@ Please see LICENSE files in the repository root for full details.
.mx_MPollBody_allOptions {
display: grid;
grid-gap: $spacing-16;
gap: $spacing-16;
margin-bottom: $spacing-8;
max-width: 550px;
max-width: $poll-max-width;
}

14
res/css/views/messages/_MPollEndBody.pcss
View File

@@ -1,14 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_MPollEndBody_icon {
height: 14px;
margin-right: $spacing-8;
vertical-align: middle;
color: $secondary-content;
}

3
res/css/views/messages/_MessageTimestamp.pcss
View File

@@ -13,13 +13,14 @@ Please see LICENSE files in the repository root for full details.
}
.mx_MessageTimestamp {
color: var(--MessageTimestamp-color);
color: var(--MessageTimestamp-color) !important; /* override anchor color */
font-size: $font-10px;
font-variant-numeric: tabular-nums;
display: block; /* enable the width setting below */
width: var(--MessageTimestamp-width);
white-space: nowrap;
user-select: none;
text-decoration: none;
}
.mx_MessageTimestamp_lateIcon {

2
res/css/views/messages/_PinnedMessageBadge.pcss
View File

@@ -13,7 +13,7 @@
padding: var(--cpd-space-1x) var(--cpd-space-3x) var(--cpd-space-1x) var(--cpd-space-1x);
font: var(--cpd-font-body-xs-medium);
background-color: var(--cpd-color-alpha-gray-200);
background-color: var(--cpd-color-bg-subtle-secondary);
color: var(--cpd-color-text-secondary);
border-radius: 99px;

2
res/css/views/messages/_ReactionsRow.pcss
View File

@@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details.
mask-repeat: no-repeat;
mask-position: center;
background-color: $tertiary-content;
mask-image: url("$(res)/img/element-icons/room/message-bar/emoji.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/reaction-add.svg");
}
&.mx_ReactionsRow_addReactionButton_active {

8
res/css/views/messages/_common_CryptoEvent.pcss
View File

@@ -12,24 +12,24 @@ Please see LICENSE files in the repository root for full details.
/* white infill for the transparency */
&.mx_cryptoEvent_icon::before {
background-color: #ffffff;
mask-image: url("$(res)/img/e2e/normal.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: 80%;
}
&.mx_cryptoEvent_icon::after {
mask-image: url("$(res)/img/e2e/normal.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
background-color: $header-panel-text-primary-color;
}
&.mx_cryptoEvent_icon_verified::after {
mask-image: url("$(res)/img/e2e/verified.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/shield.svg");
background-color: $accent;
}
&.mx_cryptoEvent_icon_warning::after {
mask-image: url("$(res)/img/e2e/warning.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
background-color: $e2e-warning-color;
}

4
res/css/views/polls/pollHistory/_PollHistoryList.pcss
View File

@@ -21,12 +21,12 @@ Please see LICENSE files in the repository root for full details.
flex: 1 1 0;
align-content: flex-start;
display: grid;
grid-gap: $spacing-20;
gap: $spacing-20;
padding-right: $spacing-64;
margin: $spacing-32 0;
&.mx_PollHistoryList_list_ENDED {
grid-gap: $spacing-32;
gap: $spacing-32;
}
}

2
res/css/views/right_panel/_ExtensionsCard.pcss
View File

@@ -89,7 +89,7 @@ Please see LICENSE files in the repository root for full details.
right: 8px;
&::before {
mask-image: url("$(res)/img/element-icons/room/pin-upright.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/pin-solid.svg");
}
}

2
res/css/views/right_panel/_RoomSummaryCard.pcss
View File

@@ -32,7 +32,7 @@ Please see LICENSE files in the repository root for full details.
padding: 0 12px;
color: var(--cpd-color-text-secondary);
.mx_Box {
.mx_RoomSummaryCard_topic_box {
width: 100%;
}

35
res/css/views/right_panel/_ThreadPanel.pcss
View File

@@ -47,16 +47,12 @@ Please see LICENSE files in the repository root for full details.
background: $quinary-content;
}
&::before {
svg {
margin-left: 2px;
content: "";
width: 20px;
height: 20px;
background: currentColor;
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
mask-size: 100%;
mask-repeat: no-repeat;
float: right;
width: 20px;
display: inline-block;
vertical-align: bottom;
}
}
}
@@ -167,14 +163,6 @@ Please see LICENSE files in the repository root for full details.
}
}
.mx_ThreadPanel_viewInRoom::before {
mask-image: url("$(res)/img/element-icons/view-in-room.svg");
}
.mx_ThreadPanel_copyLinkToThread::before {
mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
}
.mx_ContextualMenu_wrapper {
.mx_ThreadPanel_Header_FilterOptionItem {
display: flex;
@@ -189,25 +177,24 @@ Please see LICENSE files in the repository root for full details.
}
&[aria-checked="true"] {
:first-child {
span:first-child {
margin-left: -20px;
}
:first-child::before {
content: "";
svg {
width: 12px;
height: 12px;
margin-right: 8px;
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
mask-size: 100%;
mask-repeat: no-repeat;
background-color: $primary-content;
color: $primary-content;
display: inline-block;
vertical-align: middle;
position: absolute;
top: 14px;
left: 10px;
}
}
:last-child {
span:last-child {
color: $secondary-content;
}
}

25
res/css/views/right_panel/_UserInfo.pcss
View File

@@ -13,26 +13,6 @@ Please see LICENSE files in the repository root for full details.
overflow-y: auto;
font-size: var(--cpd-font-size-body-sm);
.mx_UserInfo_cancel {
cursor: pointer;
position: absolute;
top: 0;
border-radius: 4px;
background-color: $dark-panel-bg-color;
margin: 9px;
z-index: 1; /* render on top of the right panel */
div {
height: 16px;
width: 16px;
padding: 4px;
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-left.svg");
mask-repeat: no-repeat;
mask-position: center;
background-color: $header-panel-text-primary-color;
}
}
.mx_UserInfo_container {
padding: var(--cpd-space-2x) 0 var(--cpd-space-4x);
margin: 0 var(--cpd-space-4x);
@@ -108,11 +88,6 @@ Please see LICENSE files in the repository root for full details.
margin: 0;
font-size: $font-20px;
line-height: $font-25px;
/* E2E icon wrapper */
.mx_Flex > span {
display: inline-block;
}
}
.mx_UserInfo_profile_name {

4
res/css/views/rooms/RoomListPanel/_RoomListHeaderView.pcss
View File

@@ -32,4 +32,8 @@
transform: rotate(180deg);
}
}
.mx_RoomListHeaderView_ReleaseAnnouncementAnchor {
display: inline-flex;
}
}

103
res/css/views/rooms/RoomListPanel/_RoomListItemView.pcss
View File

@@ -15,56 +15,81 @@
* |-------------------------------------------------------|
*/
.mx_RoomListItemView {
all: unset;
/* Remove button default style */
background: unset;
border: none;
padding: 0;
text-align: unset;
cursor: pointer;
height: 48px;
width: 100%;
.mx_RoomListItemView_container {
padding-left: var(--cpd-space-3x);
font: var(--cpd-font-body-md-regular);
height: 100%;
padding-left: var(--cpd-space-3x);
font: var(--cpd-font-body-md-regular);
.mx_RoomListItemView_content {
height: 100%;
flex: 1;
/* The border is only under the room name and the future hover menu */
border-bottom: var(--cpd-border-width-0-5) solid var(--cpd-color-bg-subtle-secondary);
box-sizing: border-box;
min-width: 0;
padding-right: var(--cpd-space-5x);
/* Hide the menu by default */
.mx_RoomListItemView_menu {
display: none;
}
.mx_RoomListItemView_text {
min-width: 0;
&:hover,
&:focus-visible,
/* When the context menu is opened */
&[data-state="open"],
/* When the options and notifications menu are opened */
&:has(.mx_RoomListItemMenuView > button[data-state="open"]) {
background-color: var(--cpd-color-bg-action-secondary-hovered);
.mx_RoomListItemView_menu {
display: flex;
}
&.mx_RoomListItemView_has_menu {
/**
* The figma uses 16px padding (--cpd-space-4x) but due to https://github.com/element-hq/compound-web/issues/331
* the icon size of the menu is 18px instead of 20px with a different internal padding
* We need to use 18px to align the icon with the others icons
* 18px is not available in compound spacing
*/
.mx_RoomListItemView_content {
padding-right: 18px;
}
.mx_RoomListItemView_roomName {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mx_RoomListItemView_messagePreview {
font: var(--cpd-font-body-sm-regular);
color: var(--cpd-color-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* When the menu is visible, hide the notification decoration to avoid clutter */
.mx_RoomListItemView_notificationDecoration {
display: none;
}
}
}
}
.mx_RoomListItemView_hover {
background-color: var(--cpd-color-bg-action-secondary-hovered);
}
.mx_RoomListItemView_content {
height: 100%;
flex: 1;
/* The border is only under the room name and the future hover menu */
border-bottom: var(--cpd-border-width-0-5) solid var(--cpd-color-bg-subtle-secondary);
box-sizing: border-box;
min-width: 0;
padding-right: var(--cpd-space-5x);
.mx_RoomListItemView_menu_open .mx_RoomListItemView_container .mx_RoomListItemView_content {
/**
* The figma uses 16px padding (--cpd-space-4x) but due to https://github.com/element-hq/compound-web/issues/331
* the icon size of the menu is 18px instead of 20px with a different internal padding
* We need to use 18px to align the icon with the others icons
* 18px is not available in compound spacing
*/
padding-right: 18px;
.mx_RoomListItemView_text {
min-width: 0;
}
.mx_RoomListItemView_roomName {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mx_RoomListItemView_messagePreview {
font: var(--cpd-font-body-sm-regular);
color: var(--cpd-color-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.mx_RoomListItemView_selected {

28
res/css/views/rooms/RoomListPanel/_RoomListPrimaryFilters.pcss
View File

@@ -6,7 +6,29 @@
*/
.mx_RoomListPrimaryFilters {
margin: unset;
list-style-type: none;
padding: var(--cpd-space-2x) var(--cpd-space-3x);
padding: var(--cpd-space-2x) var(--cpd-space-4x) var(--cpd-space-2x) var(--cpd-space-3x);
.mx_RoomListPrimaryFilters_wrapping {
display: none;
}
.mx_RoomListPrimaryFilters_list {
/**
* The InteractionObserver needs the height to be set to work properly.
*/
height: 100%;
flex: 1;
}
.mx_RoomListPrimaryFilters_IconButton {
svg {
transition: transform 0.1s linear;
}
}
.mx_RoomListPrimaryFilters_IconButton[aria-expanded="true"] {
svg {
transform: rotate(180deg);
}
}
}

51
res/css/views/rooms/RoomListPanel/_RoomListSearch.pcss
View File

@@ -1,51 +0,0 @@
/*
* Copyright 2025 New Vector Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
* Please see LICENSE files in the repository root for full details.
*/
.mx_RoomListSearch {
/* From figma, this should be aligned with the room header */
flex: 0 0 64px;
box-sizing: border-box;
border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-bg-subtle-primary);
padding: 0 var(--cpd-space-3x);
svg {
fill: var(--cpd-color-icon-secondary);
}
.mx_RoomListSearch_search {
/* The search button should take all the remaining space */
flex: 1;
font: var(--cpd-font-body-md-regular);
color: var(--cpd-color-text-secondary);
min-width: 0;
span {
flex: 1;
kbd {
font-family: inherit;
}
/* Shrink and truncate the search text */
white-space: nowrap;
overflow: hidden;
.mx_RoomListSearch_search_text {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: start;
}
}
}
.mx_RoomListSearch_button:hover {
svg {
fill: var(--cpd-color-icon-primary);
}
}
}

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

@@ -208,7 +208,7 @@ Please see LICENSE files in the repository root for full details.
margin-right: 12px;
}
h3 {
h1 {
font-size: inherit;
margin: 0;
}

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

@@ -65,7 +65,12 @@
margin: 12px;
height: 100%;
overflow-y: scroll;
max-height: 35vh;
}
@container roomview (height >= 0px) {
.mx_Autocomplete_Completion_container_pill {
max-height: 40cqh;
}
}
.mx_Autocomplete_Completion_container_truncate {

3
res/css/views/rooms/_BasicMessageComposer.pcss
View File

@@ -10,6 +10,7 @@ Please see LICENSE files in the repository root for full details.
/* These are set in Javascript */
--avatar-letter: "";
--avatar-background: unset;
--avatar-color: unset;
--placeholder: "";
position: relative;
@@ -54,6 +55,8 @@ Please see LICENSE files in the repository root for full details.
span.mx_UserPill,
span.mx_RoomPill,
span.mx_SpacePill {
display: inline-flex;
align-items: center;
user-select: all;
position: relative;
cursor: unset; /* We don't want indicate clickability */

79
res/css/views/rooms/_DecryptionFailureBar.pcss
View File

@@ -1,79 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_DecryptionFailureBar {
--gap-row: $spacing-8;
--gap-column: $spacing-12;
--gap: var(--gap-row) var(--gap-column);
--size-icon: 24px;
background-color: $system;
padding: $spacing-12;
margin-inline: $spacing-16;
border-radius: 4px;
&.mx_DecryptionFailureBar--withEnd {
display: flex;
flex-flow: wrap;
align-items: flex-start;
justify-content: space-between;
row-gap: calc(var(--gap-row) + $spacing-4); /* Increase spacing between the message and the buttons */
.mx_DecryptionFailureBar_end {
display: flex;
flex-wrap: wrap; /* Let the buttons wrapped on a narrow column */
gap: var(--buttons-dialog-gap-row) var(--buttons-dialog-gap-column);
margin-inline-start: calc(var(--size-icon) + var(--gap-column)); /* Align the button(s) and the message */
}
}
.mx_DecryptionFailureBar_start {
display: grid;
gap: var(--gap);
grid-template-areas:
"status headline"
". message";
grid-template-columns: var(--size-icon) auto;
.mx_DecryptionFailureBar_start_status {
grid-area: status;
display: flex;
align-items: center;
gap: var(--gap);
.mx_Spinner {
height: unset; /* Unset height: 100% */
}
.mx_DecryptionFailureBar_start_status_icon {
min-width: var(--size-icon);
height: var(--size-icon);
mask-image: url("$(res)/img/e2e/decryption-failure.svg");
background-color: $e2e-warning-color;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
}
.mx_DecryptionFailureBar_start_headline {
grid-area: headline;
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-16px;
align-self: center;
}
.mx_DecryptionFailureBar_start_message {
grid-area: message;
color: $secondary-content;
}
}
}

59
res/css/views/rooms/_E2EIcon.pcss
View File

@@ -9,53 +9,34 @@ Please see LICENSE files in the repository root for full details.
width: 16px;
height: 16px;
margin: 0 9px;
position: relative;
display: block;
}
.mx_E2EIcon_warning,
.mx_E2EIcon_normal,
.mx_E2EIcon_verified {
&::before,
&::after {
content: "";
svg {
width: inherit;
height: inherit;
display: block;
position: absolute;
inset: 0;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
}
/* transparent-looking border surrounding the shield for when overlain over avatars */
.mx_E2EIcon_bordered {
mask-image: url("$(res)/img/e2e/normal.svg");
background-color: $header-panel-bg-color;
mask-size: 100%;
.mx_E2EIcon.mx_E2EIcon_inline {
display: inline-block;
}
/* shrink the actual badge */
&::after {
mask-size: 75%;
}
/* shrink the infill of the badge */
&::before {
mask-size: 60%;
background: var(--cpd-color-bg-canvas-default);
.mx_E2EIcon_warning {
color: $e2e-warning-color;
}
.mx_E2EIcon_normal {
color: var(--cpd-color-icon-tertiary);
}
.mx_E2EIcon_verified,
.mx_E2EIcon_warning {
.mx_E2EIcon_normal::after {
background-color: white;
}
}
.mx_E2EIcon_warning::after {
mask-image: url("$(res)/img/e2e/warning.svg");
background-color: $e2e-warning-color;
}
.mx_E2EIcon_normal::after {
mask-image: url("$(res)/img/e2e/normal.svg");
background-color: var(--cpd-color-icon-tertiary);
}
.mx_E2EIcon_verified::after {
mask-image: url("$(res)/img/e2e/verified.svg");
background-color: $e2e-verified-color;
.mx_E2EIcon_verified {
color: $e2e-verified-color;
}

4
res/css/views/rooms/_EmojiButton.pcss
View File

@@ -14,10 +14,6 @@ Please see LICENSE files in the repository root for full details.
@mixin composerButtonHighLight;
}
.mx_EmojiButton_icon::before {
mask-image: url("$(res)/img/element-icons/room/composer/emoji.svg");
}
.mx_MessageComposer_wysiwyg {
.mx_EmojiButton {
@mixin composerButton 5px, $tertiary-content, $panels;

10
res/css/views/rooms/_EventBubbleTile.pcss
View File

@@ -50,7 +50,7 @@ Please see LICENSE files in the repository root for full details.
margin-right: 0;
}
.mx_EventTile_avatar {
&:not(.mx_EventTile_info) .mx_EventTile_avatar {
line-height: 0;
border: 4px solid $background;
border-radius: 50%;
@@ -153,7 +153,7 @@ Please see LICENSE files in the repository root for full details.
.mx_MediaBody {
/* leave space for the timestamp */
padding-right: 48px;
padding-right: 48px !important;
}
.mx_MImageBody {
@@ -355,11 +355,6 @@ Please see LICENSE files in the repository root for full details.
/* Keep height equal to text for shield alignment, additional 2px because of 1px padding on text */
height: calc($font-18px + 2px);
}
.mx_MPollEndBody {
/* Prevent the poll end body from exceeding the tile width */
width: 100%;
}
}
&:not(.mx_EventTile_noBubble) .mx_EventTile_line:not(.mx_EventTile_mediaLine) {
@@ -588,6 +583,7 @@ Please see LICENSE files in the repository root for full details.
position: static;
order: -1;
margin-inline-end: var(--EventTile_bubble_gap-inline); /* Same spacing between E2E icon and a hidden event */
display: inline-flex;
}
.mx_EventTile_e2eIcon {

78
res/css/views/rooms/_EventTile.pcss
View File

@@ -61,11 +61,11 @@ $left-gutter: 64px;
}
.mx_EventTile_receiptSent::before {
mask-image: url("$(res)/img/element-icons/circle-sent.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/check-circle.svg");
}
.mx_EventTile_receiptSending::before {
mask-image: url("$(res)/img/element-icons/circle-sending.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/circle.svg");
}
.mx_EventTile_content {
@@ -200,10 +200,6 @@ $left-gutter: 64px;
Replaces margin-top: -6px. This interacts better with a read
marker being in between. Content overflows. */
height: 1px;
a {
text-decoration: none;
}
}
&.mx_EventTile_highlight,
@@ -273,9 +269,9 @@ $left-gutter: 64px;
align-items: flex-start;
padding-top: 0;
> a {
text-decoration: none; /* timestamps are links which shouldn't be underlined */
.mx_MessageTimestamp {
min-width: var(--MessageTimestamp-width); /* ensure space for EventTile without timestamp */
text-align: right;
}
> * {
@@ -300,13 +296,11 @@ $left-gutter: 64px;
display: flex;
align-items: center;
/* Need to use important to override the js provided height and width values. */
/* Need to use important to override the js calculated values. */
> .mx_BaseAvatar,
> .mx_BaseAvatar > * {
height: $font-14px !important;
width: $font-14px !important;
font-size: $font-10px !important;
line-height: $font-15px !important;
line-height: calc($font-15px - 2px) !important;
}
}
@@ -403,10 +397,6 @@ $left-gutter: 64px;
margin: 0;
}
.mx_MessageTimestamp {
text-align: right;
}
.mx_EditMessageComposer_buttons {
position: relative;
}
@@ -843,7 +833,6 @@ $left-gutter: 64px;
background-repeat: no-repeat;
background-size: contain;
&::before,
&::after {
content: "";
display: block;
@@ -854,22 +843,18 @@ $left-gutter: 64px;
mask-size: contain;
}
&::before {
mask-size: 80%;
}
&.mx_EventTile_e2eIcon_warning::after {
mask-image: url("$(res)/img/e2e/warning.svg"); /* (!) in a shield */
mask-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
background-color: $e2e-warning-color; /* red */
}
&.mx_EventTile_e2eIcon_normal::after {
mask-image: url("$(res)/img/e2e/normal.svg"); /* regular shield */
mask-image: url("@vector-im/compound-design-tokens/icons/info.svg");
background-color: var(--cpd-color-icon-tertiary); /* grey */
}
&.mx_EventTile_e2eIcon_decryption_failure::after {
mask-image: url("$(res)/img/e2e/decryption-failure.svg"); /* key in a circle */
mask-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
background-color: var(--cpd-color-icon-tertiary);
}
}
@@ -928,30 +913,21 @@ $left-gutter: 64px;
position: absolute;
top: $spacing-8;
right: $spacing-8;
width: 19px;
height: 19px;
width: 16px;
height: 16px;
visibility: hidden;
background-color: $message-action-bar-fg-color;
&.mx_EventTile_buttonBottom {
top: 33px;
}
&.mx_EventTile_collapseButton,
&.mx_EventTile_expandButton {
mask-size: 75%;
svg {
width: inherit;
height: inherit;
display: block;
color: $message-action-bar-fg-color;
}
}
.mx_EventTile_copyButton {
height: 17px;
mask-image: url($copy-button-url);
mask-position: center center;
mask-repeat: no-repeat;
mask-size: contain;
right: 9px;
width: 17px;
}
}
}
@@ -972,20 +948,6 @@ $left-gutter: 64px;
cursor: pointer;
}
.mx_EventTile_collapseButton,
.mx_EventTile_expandButton {
mask-position: center;
mask-repeat: no-repeat;
}
.mx_EventTile_collapseButton {
mask-image: url("@vector-im/compound-design-tokens/icons/collapse.svg");
}
.mx_EventTile_expandButton {
mask-image: url("@vector-im/compound-design-tokens/icons/expand.svg");
}
.mx_EventTile_tileError {
color: red;
text-align: center;
@@ -1174,11 +1136,11 @@ $left-gutter: 64px;
&.mx_EventTile_info {
.mx_EventTile_avatar {
position: absolute;
top: 1.5px; /* Align with hidden event content */
margin-top: 0;
/* Align with hidden event content */
top: 50%;
transform: translateY(-50%);
margin-top: -2px;
margin-bottom: 0;
width: 14px; /* avatar img size */
height: 14px; /* avatar img size */
}
&.mx_EventTile_selected .mx_EventTile_line,

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

@@ -11,6 +11,6 @@ Please see LICENSE files in the repository root for full details.
&::before {
background-color: $header-panel-text-primary-color;
mask-image: url("$(res)/img/element-icons/hide.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/visibility-off.svg");
}
}

20
res/css/views/rooms/_JumpToBottomButton.pcss
View File

@@ -42,21 +42,17 @@ Please see LICENSE files in the repository root for full details.
position: relative;
display: block;
height: 38px;
border-radius: 19px;
border-radius: 50%;
box-sizing: border-box;
background: $background;
border: 1.3px solid var(--cpd-color-icon-tertiary);
cursor: pointer;
}
.mx_JumpToBottomButton_scrollDown::before {
content: "";
position: absolute;
inset: 0;
mask-image: url("@vector-im/compound-design-tokens/icons/chevron-up.svg");
mask-repeat: no-repeat;
mask-size: 24px;
mask-position: center 6px;
transform: rotate(180deg);
background: var(--cpd-color-icon-tertiary);
svg {
height: inherit;
width: inherit;
box-sizing: border-box;
padding: 7px 8px 7px 6px;
color: var(--cpd-color-icon-tertiary);
}
}

25
res/css/views/rooms/_LegacyRoomList.pcss
View File

@@ -9,28 +9,3 @@ Please see LICENSE files in the repository root for full details.
.mx_LegacyRoomList {
padding-right: 7px; /* width of the scrollbar, to line things up */
}
.mx_LegacyRoomList_iconPlus::before {
mask-image: url("$(res)/img/element-icons/roomlist/plus-circle.svg");
}
.mx_LegacyRoomList_iconNewRoom::before {
mask-image: url("$(res)/img/element-icons/roomlist/hash-plus.svg");
}
.mx_LegacyRoomList_iconNewVideoRoom::before {
mask-image: url("$(res)/img/element-icons/roomlist/hash-video.svg");
}
.mx_LegacyRoomList_iconAddExistingRoom::before {
mask-image: url("$(res)/img/element-icons/roomlist/hash.svg");
}
.mx_LegacyRoomList_iconExplore::before {
mask-image: url("$(res)/img/element-icons/roomlist/hash-search.svg");
}
.mx_LegacyRoomList_iconDialpad::before {
mask-image: url("$(res)/img/element-icons/roomlist/dialpad.svg");
}
.mx_LegacyRoomList_iconStartChat::before {
mask-image: url("@vector-im/compound-design-tokens/icons/user-add-solid.svg");
}
.mx_LegacyRoomList_iconInvite::before {
mask-image: url("$(res)/img/element-icons/room/share.svg");
}

19
res/css/views/rooms/_LegacyRoomListHeader.pcss
View File

@@ -87,22 +87,3 @@ Please see LICENSE files in the repository root for full details.
}
}
}
.mx_LegacyRoomListHeader_iconInvite::before {
mask-image: url("$(res)/img/element-icons/room/invite.svg");
}
.mx_LegacyRoomListHeader_iconStartChat::before {
mask-image: url("@vector-im/compound-design-tokens/icons/user-add-solid.svg");
}
.mx_LegacyRoomListHeader_iconNewRoom::before {
mask-image: url("$(res)/img/element-icons/roomlist/hash-plus.svg");
}
.mx_LegacyRoomListHeader_iconNewVideoRoom::before {
mask-image: url("$(res)/img/element-icons/roomlist/hash-video.svg");
}
.mx_LegacyRoomListHeader_iconExplore::before {
mask-image: url("$(res)/img/element-icons/roomlist/hash-search.svg");
}
.mx_LegacyRoomListHeader_iconPlus::before {
mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
}

8
res/css/views/rooms/_LiveContentSummary.pcss
View File

@@ -22,7 +22,11 @@ Please see LICENSE files in the repository root for full details.
}
&.mx_LiveContentSummary_text_video::before {
mask-image: url("$(res)/img/element-icons/call/video-call.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
}
&.mx_LiveContentSummary_text_voice::before {
mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-solid.svg");
}
&.mx_LiveContentSummary_text_active {
@@ -39,7 +43,7 @@ Please see LICENSE files in the repository root for full details.
vertical-align: text-bottom;
content: "";
background-color: $secondary-content;
mask-image: url("$(res)/img/element-icons/group-members.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/group.svg");
mask-size: 16px;
width: 16px;
height: 16px;

102
res/css/views/rooms/_MessageComposer.pcss
View File

@@ -37,11 +37,6 @@ Please see LICENSE files in the repository root for full details.
font-weight: bold;
}
.mx_MessageComposer_autocomplete_wrapper {
position: relative;
height: 0;
}
.mx_MessageComposer_row {
display: flex;
flex-direction: row;
@@ -66,9 +61,6 @@ Please see LICENSE files in the repository root for full details.
}
}
.mx_MessageComposer_composecontrols {
width: 100%;
}
.mx_MessageComposer_e2eIconWrapper {
height: 16px; /* Match the height of the E2E icon for alignment */
padding-left: 24px; /* Space for the E2E icon */
@@ -76,10 +68,15 @@ Please see LICENSE files in the repository root for full details.
.mx_MessageComposer_e2eIcon.mx_E2EIcon {
position: absolute;
left: 20px;
top: 22px;
margin-right: 0; /* Counteract the E2EIcon class */
margin-left: 16px; /* Counteract the E2EIcon class */
width: 16px;
height: 16px;
margin-left: 3px; /* Counteract the E2EIcon class */
.mx_MessageComposer_e2eIcon {
margin: 0;
width: inherit;
height: inherit;
}
}
.mx_MessageComposer_noperm_error {
@@ -92,13 +89,6 @@ Please see LICENSE files in the repository root for full details.
justify-content: center;
}
.mx_MessageComposer_input_wrapper {
flex: 1;
display: flex;
flex-direction: column;
cursor: text;
}
.mx_MessageComposer_input {
flex: 1;
vertical-align: middle;
@@ -191,6 +181,9 @@ Please see LICENSE files in the repository root for full details.
.mx_MessageComposer_button {
@mixin composerButton 50%, var(--cpd-color-icon-primary), var(--cpd-color-bg-subtle-primary);
padding: 3px;
height: 20px;
width: 20px;
&:last-child {
margin-right: auto;
@@ -207,8 +200,9 @@ Please see LICENSE files in the repository root for full details.
}
}
&.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled)::before {
background-color: $alert;
svg {
width: inherit;
height: inherit;
}
}
.mx_MessageComposer_wysiwyg {
@@ -245,68 +239,34 @@ Please see LICENSE files in the repository root for full details.
z-index: 2;
}
}
&.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled)::before {
background-color: $alert;
}
}
}
.mx_MessageComposer_upload::before {
mask-image: url("$(res)/img/element-icons/room/composer/attach.svg");
}
.mx_MessageComposer_buttonMenu {
width: 24px;
height: 24px;
padding: 1px;
.mx_MessageComposer_poll::before {
mask-image: url("$(res)/img/element-icons/room/composer/poll.svg");
}
.mx_MessageComposer_voiceMessage::before {
mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg");
}
.mx_MessageComposer_plain_text::before {
mask-image: url("$(res)/img/element-icons/room/composer/plain_text.svg");
}
.mx_MessageComposer_rich_text::before {
mask-image: url("@vector-im/compound-design-tokens/icons/text-formatting.svg");
}
.mx_MessageComposer_location::before {
mask-image: url("@vector-im/compound-design-tokens/icons/location-pin-solid.svg");
}
.mx_MessageComposer_stickers::before {
mask-image: url("$(res)/img/element-icons/room/composer/sticker.svg");
}
.mx_MessageComposer_buttonMenu::before {
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
mask-size: 24px;
svg {
width: 24px;
height: 24px;
}
}
.mx_MessageComposer_sendMessage {
cursor: pointer;
position: relative;
width: 32px;
height: 32px;
padding: var(--cpd-space-2x);
border-radius: 100%;
background-color: var(--cpd-color-icon-accent-tertiary);
height: 16px;
width: 16px;
&::before {
position: absolute;
height: 16px;
width: 16px;
top: 8px;
left: 9px;
svg {
height: inherit;
width: inherit;
mask-image: url("@vector-im/compound-design-tokens/icons/send-solid.svg");
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
background-color: var(--cpd-color-icon-on-solid-primary);
content: "";
color: var(--cpd-color-icon-on-solid-primary);
}
}
@@ -331,6 +291,10 @@ Please see LICENSE files in the repository root for full details.
padding: 0 0 0 25px;
}
.mx_MessageComposer_e2eIconWrapper {
left: 0;
}
&:not(.mx_MessageComposer_e2eStatus) {
.mx_MessageComposer_wrapper {
padding: 0;

54
res/css/views/rooms/_MessageComposerFormatBar.pcss
View File

@@ -38,54 +38,26 @@ Please see LICENSE files in the repository root for full details.
vertical-align: middle;
background: none;
border: none;
padding: 0;
svg {
width: inherit;
height: inherit;
box-sizing: border-box;
padding: var(--cpd-space-1x);
color: var(--cpd-color-icon-secondary);
}
&:hover {
background: var(--cpd-color-bg-subtle-secondary);
border-radius: 6px;
z-index: 1;
svg {
color: var(--cpd-color-icon-primary);
}
}
}
.mx_MessageComposerFormatBar_button::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 20px;
background-color: var(--cpd-color-icon-secondary);
}
.mx_MessageComposerFormatBar_button:hover::after {
background-color: var(--cpd-color-icon-primary);
}
.mx_MessageComposerFormatBar_buttonIconBold::after {
mask-image: url("@vector-im/compound-design-tokens/icons/bold.svg");
}
.mx_MessageComposerFormatBar_buttonIconItalic::after {
mask-image: url("@vector-im/compound-design-tokens/icons/italic.svg");
}
.mx_MessageComposerFormatBar_buttonIconStrikethrough::after {
mask-image: url("@vector-im/compound-design-tokens/icons/strikethrough.svg");
}
.mx_MessageComposerFormatBar_buttonIconQuote::after {
mask-image: url("@vector-im/compound-design-tokens/icons/quote.svg");
}
.mx_MessageComposerFormatBar_buttonIconCode::after {
mask-image: url("@vector-im/compound-design-tokens/icons/inline-code.svg");
}
.mx_MessageComposerFormatBar_buttonIconInsertLink::after {
mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
}
}
.mx_MessageComposerFormatBar_buttonTooltip {

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

@@ -40,7 +40,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_NewRoomIntro_inviteButton::before {
mask-image: url("$(res)/img/element-icons/room/invite.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/user-add.svg");
}
}

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

@@ -56,8 +56,8 @@ Please see LICENSE files in the repository root for full details.
}
&.mx_NotificationBadge_knocked {
mask-image: url("$(res)/img/element-icons/ask-to-join.svg");
width: 12px;
mask-image: url("@vector-im/compound-design-tokens/icons/ask-to-join.svg");
width: 16px;
height: 16px;
}

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 {

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

@@ -41,11 +41,12 @@ Please see LICENSE files in the repository root for full details.
height: 100%;
.mx_BaseAvatar {
/* Compound uses a border on default avatars but no border on actual images, we want a border in all cases */
box-sizing: content-box;
border: 1px solid $background !important;
/* Reset the line height as we are no longer box-sizing border-box. 14px because avatar is set at 14px in component */
line-height: 14px;
position: absolute;
border: 1px solid $background;
width: 14px;
height: 14px;
will-change: left, top;
transition:
left var(--transition-short) ease-out,

11
res/css/views/rooms/_ReplyPreview.pcss
View File

@@ -29,16 +29,11 @@ Please see LICENSE files in the repository root for full details.
font-weight: 400;
opacity: 0.4;
.mx_ReplyPreview_header_cancel {
background-color: $primary-content;
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
.mx_ReplyPreview_header_cancel svg {
color: $primary-content;
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
flex-shrink: 0;
}
}
}

5
res/css/views/rooms/_ReplyTile.pcss
View File

@@ -16,7 +16,7 @@ Please see LICENSE files in the repository root for full details.
}
&.mx_ReplyTile_video .mx_MFileBody_info_icon::before {
mask-image: url("$(res)/img/element-icons/call/video-call.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
}
> a {
@@ -134,7 +134,8 @@ Please see LICENSE files in the repository root for full details.
}
.mx_BaseAvatar {
line-height: 14px; /* To match size */
/* Prevent crushing by the flexbox */
flex-shrink: 0;
}
}
}

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

@@ -41,6 +41,6 @@ Please see LICENSE files in the repository root for full details.
width: 16px;
height: 1.2em; /* to match line height */
margin-right: 8px;
mask-image: url("$(res)/img/element-icons/call/video-call.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
}
}

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

@@ -103,5 +103,5 @@ Please see LICENSE files in the repository root for full details.
}
.mx_RoomHeader .mx_RoomHeader_toggled {
color: var(--cpd-color-icon-accent-primary);
fill: var(--cpd-color-icon-accent-primary);
}

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

@@ -10,33 +10,10 @@ Please see LICENSE files in the repository root for full details.
color: $secondary-content;
display: inline-block;
&::before {
content: "";
display: inline-block;
height: 1.2em;
mask-position: center;
mask-repeat: no-repeat;
background-color: $tertiary-content;
vertical-align: text-bottom;
svg {
margin-right: 6px;
}
&.mx_RoomInfoLine_public::before {
width: 12px;
mask-size: 12px;
mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
}
&.mx_RoomInfoLine_private::before {
width: 10px;
mask-size: 10px;
mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
}
&.mx_RoomInfoLine_video::before {
width: 16px;
mask-size: 16px;
mask-image: url("$(res)/img/element-icons/call/video-call.svg");
vertical-align: -2px;
color: $tertiary-content;
}
.mx_RoomInfoLine_members {

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

@@ -22,20 +22,13 @@ Please see LICENSE files in the repository root for full details.
line-height: $font-24px;
color: $primary-content;
margin-top: $spacing-24;
position: relative;
padding-left: calc(20px + $spacing-8);
&::before {
content: "";
position: absolute;
height: $font-24px;
width: 20px;
left: 0;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
background-color: $secondary-content;
svg {
height: 1em;
width: 1em;
margin-right: $spacing-8;
color: $secondary-content;
vertical-align: -2px;
}
}
@@ -63,25 +56,19 @@ Please see LICENSE files in the repository root for full details.
align-items: center;
.mx_RoomPreviewCard_video {
width: 50px;
height: 50px;
width: 22px;
height: 22px;
padding: 14px;
border-radius: calc((50px + 2 * 3px) / 2);
background-color: $accent;
border: 3px solid $system;
position: relative;
left: calc(-50px / 4 - 3px);
&::before {
content: "";
background-color: $button-primary-fg-color;
position: absolute;
width: 50px;
height: 50px;
mask-size: 22px;
mask-position: center;
mask-repeat: no-repeat;
mask-image: url("$(res)/img/element-icons/call/video-call.svg");
svg {
width: inherit;
height: inherit;
color: $button-primary-fg-color;
}
}

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

@@ -105,25 +105,20 @@ Please see LICENSE files in the repository root for full details.
/* The context menu buttons are hidden by default */
.mx_RoomTile_menuButton,
.mx_RoomTile_notificationsButton {
width: 20px;
min-width: 20px; /* yay flex */
height: 20px;
width: 16px;
height: 16px;
padding: var(--cpd-space-0-5x);
flex-shrink: 0;
margin-top: auto;
margin-bottom: auto;
position: relative;
display: none;
&::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);
svg {
width: inherit;
height: inherit;
display: block;
color: var(--cpd-color-icon-primary);
}
}
@@ -132,10 +127,6 @@ Please see LICENSE files in the repository root for full details.
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,
@@ -165,79 +156,3 @@ Please see LICENSE files in the repository root for full details.
}
}
}
/* We use these both in context menus and the room tiles */
.mx_RoomTile_iconBell::before {
mask-image: url("$(res)/img/element-icons/notifications.svg");
}
.mx_RoomTile_iconBellDot::before {
mask-image: url("$(res)/img/element-icons/roomlist/notifications-default.svg");
}
.mx_RoomTile_iconBellCrossed::before {
mask-image: url("$(res)/img/element-icons/roomlist/notifications-off.svg");
}
.mx_RoomTile_iconBellMentions::before {
mask-image: url("$(res)/img/element-icons/roomlist/notifications-dm.svg");
}
.mx_RoomTile_contextMenu {
.mx_RoomTile_iconStar::before {
mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
}
.mx_RoomTile_iconArrowDown::before {
mask-image: url("$(res)/img/element-icons/roomlist/low-priority.svg");
}
.mx_RoomTile_iconNotificationsDefault::before {
mask-image: url("$(res)/img/element-icons/notifications.svg");
}
.mx_RoomTile_iconNotificationsAllMessages::before {
mask-image: url("$(res)/img/element-icons/roomlist/notifications-default.svg");
}
.mx_RoomTile_iconNotificationsMentionsKeywords::before {
mask-image: url("$(res)/img/element-icons/roomlist/notifications-dm.svg");
}
.mx_RoomTile_iconNotificationsNone::before {
mask-image: url("$(res)/img/element-icons/roomlist/notifications-off.svg");
}
.mx_RoomTile_iconPeople::before {
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
}
.mx_RoomTile_iconFiles::before {
mask-image: url("@vector-im/compound-design-tokens/icons/files.svg");
}
.mx_RoomTile_iconPins::before {
mask-image: url("$(res)/img/element-icons/room/pin-upright.svg");
}
.mx_RoomTile_iconWidgets::before {
mask-image: url("@vector-im/compound-design-tokens/icons/extensions-solid.svg");
}
.mx_RoomTile_iconSettings::before {
mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
}
.mx_RoomTile_iconExport::before {
mask-image: url("@vector-im/compound-design-tokens/icons/export-archive.svg");
}
.mx_RoomTile_iconCopyLink::before {
mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
}
.mx_RoomTile_iconInvite::before {
mask-image: url("$(res)/img/element-icons/room/invite.svg");
}
.mx_RoomTile_iconSignOut::before {
mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
}
}

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

16
res/css/views/rooms/_VoiceRecordComposerTile.pcss
View File

@@ -32,10 +32,12 @@ Please see LICENSE files in the repository root for full details.
height: 24px;
vertical-align: middle;
margin-right: 2px; /* distance from left edge of waveform container (container has some margin too) */
background-color: $voice-record-icon-color;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
svg {
width: inherit;
height: inherit;
color: $voice-record-icon-color;
}
}
.mx_VoiceRecordComposerTile_uploadingState {
@@ -115,3 +117,9 @@ Please see LICENSE files in the repository root for full details.
opacity: 1;
}
}
@media (forced-colors: active) {
.mx_VoiceMessagePrimaryContainer {
outline: 1px solid transparent;
}
}

Some files were not shown because too many files have changed in this diff Show More