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

Merge branch 'develop' into midhun/new-memberlist

Browse Source
This commit is contained in:
R Midhun Suresh
2024-12-16 21:32:46 +05:30
parent b4bab49ff0 bea1b8eb85
commit 83265ff22f
876 changed files with 10347 additions and 21754 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
res/css/_common.pcss
View File

@@ -596,7 +596,7 @@ legend {
.mx_Dialog
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
.mx_UserProfileSettings button
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button),
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
.mx_Dialog input[type="submit"],
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
.mx_Dialog_buttons input[type="submit"] {
@@ -616,14 +616,16 @@ legend {
.mx_Dialog
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
.mx_UserProfileSettings button
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):last-child {
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(
.mx_ShareDialog button
):last-child {
margin-right: 0px;
}
.mx_Dialog
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
.mx_UserProfileSettings button
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):focus,
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):focus,
.mx_Dialog input[type="submit"]:focus,
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
.mx_Dialog_buttons input[type="submit"]:focus {
@@ -635,7 +637,7 @@ legend {
.mx_Dialog_buttons
button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(
.mx_UserProfileSettings button
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button),
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
.mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
color: var(--cpd-color-text-on-solid-primary);
background-color: var(--cpd-color-bg-action-primary-rest);
@@ -648,7 +650,7 @@ legend {
.mx_Dialog_buttons
button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(.mx_UserProfileSettings button):not(
.mx_ThemeChoicePanel_CustomTheme button
):not(.mx_UnpinAllDialog button),
):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
.mx_Dialog_buttons input[type="submit"].danger {
background-color: var(--cpd-color-bg-critical-primary);
border: solid 1px var(--cpd-color-bg-critical-primary);
@@ -664,7 +666,7 @@ legend {
.mx_Dialog
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
.mx_UserProfileSettings button
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):disabled,
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):disabled,
.mx_Dialog input[type="submit"]:disabled,
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled,
.mx_Dialog_buttons input[type="submit"]:disabled {

7
res/css/_components.pcss
View File

@@ -322,6 +322,7 @@
@import "./views/rooms/_ThirdPartyMemberInfo.pcss";
@import "./views/rooms/_ThreadSummary.pcss";
@import "./views/rooms/_TopUnreadMessagesBar.pcss";
@import "./views/rooms/_UserIdentityWarning.pcss";
@import "./views/rooms/_VoiceRecordComposerTile.pcss";
@import "./views/rooms/_WhoIsTypingTile.pcss";
@import "./views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss";
@@ -395,9 +396,3 @@
@import "./views/voip/_LegacyCallViewHeader.pcss";
@import "./views/voip/_LegacyCallViewSidebar.pcss";
@import "./views/voip/_VideoFeed.pcss";
@import "./voice-broadcast/atoms/_LiveBadge.pcss";
@import "./voice-broadcast/atoms/_VoiceBroadcastControl.pcss";
@import "./voice-broadcast/atoms/_VoiceBroadcastHeader.pcss";
@import "./voice-broadcast/atoms/_VoiceBroadcastRecordingConnectionError.pcss";
@import "./voice-broadcast/atoms/_VoiceBroadcastRoomSubtitle.pcss";
@import "./voice-broadcast/molecules/_VoiceBroadcastBody.pcss";

7
res/css/components/views/elements/_AppPermission.pcss
View File

@@ -11,7 +11,8 @@ Please see LICENSE files in the repository root for full details.
font-size: $font-12px;
width: 100%; /* make mx_AppPermission fill width of mx_AppTileBody so that scroll bar appears on the edge */
overflow-y: scroll;
.mx_AppPermission_bolder {
.mx_AppPermission_bolder,
.mx_AppPermission_content_bolder {
font-weight: var(--cpd-font-weight-semibold);
}
.mx_AppPermission_content {
@@ -21,10 +22,6 @@ Please see LICENSE files in the repository root for full details.
margin-block: 12px;
}
.mx_AppPermission_content_bolder {
font-weight: var(--font-semi-bold);
}
.mx_TextWithTooltip_target--helpIcon {
display: inline-block;
height: $font-14px; /* align with characters on the same line */

11
res/css/components/views/settings/shared/_SettingsSubsection.pcss
View File

@@ -13,7 +13,16 @@ Please see LICENSE files in the repository root for full details.
&.mx_SettingsSubsection_newUi {
display: flex;
flex-direction: column;
gap: var(--cpd-space-8x);
gap: var(--cpd-space-6x);
}
*[role="separator"] {
/**
* The gap between subsections is 32px and inside the subsection is 24px.
* The separator separates the subsections, so it should have the same gap as the subsections.
* We add 12px and the separator spacing to the top margin to make the separator visually centered between the subsections.
*/
margin-top: calc(var(--cpd-space-3x) + var(--cpd-separator-spacing));
}
}

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

@@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details.
/** Fixme - factor this out with the main header **/
.mx_RightPanel_threadsButton::before {
mask-image: url("$(res)/img/element-icons/room/thread.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/threads-solid.svg");
}
.mx_RightPanel_notifsButton::before {
@@ -36,7 +36,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_RightPanel_roomSummaryButton::before {
mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
mask-position: center;
}

59
res/css/structures/_RoomView.pcss
View File

@@ -207,62 +207,3 @@ Please see LICENSE files in the repository root for full details.
min-height: 42px;
}
}
@keyframes mx_Indicator_pulse {
0% {
transform: scale(0.95);
}
70% {
transform: scale(1);
}
100% {
transform: scale(0.95);
}
}
@keyframes mx_Indicator_pulse_shadow {
0% {
opacity: 0.7;
}
70% {
transform: scale(2.2);
opacity: 0;
}
100% {
opacity: 0;
}
}
.mx_Indicator {
position: absolute;
right: -3px;
top: -3px;
width: var(--RoomHeader-indicator-dot-size);
height: var(--RoomHeader-indicator-dot-size);
border-radius: 50%;
transform: scale(1);
background: var(--RoomHeader-indicator-pulseColor);
box-shadow: 0 0 0 0 var(--RoomHeader-indicator-pulseColor);
animation: mx_Indicator_pulse 2s infinite;
animation-iteration-count: 1;
&::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
transform: scale(1);
transform-origin: center center;
animation-name: mx_Indicator_pulse_shadow;
animation-duration: inherit;
animation-iteration-count: inherit;
border-radius: 50%;
background: inherit;
}
}

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

@@ -211,11 +211,11 @@ Please see LICENSE files in the repository root for full details.
}
&.mx_SpaceButton_favourites .mx_SpaceButton_icon::before {
mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
}
&.mx_SpaceButton_people .mx_SpaceButton_icon::before {
mask-image: url("$(res)/img/element-icons/room/members.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
}
&.mx_SpaceButton_orphans .mx_SpaceButton_icon::before {
@@ -426,11 +426,11 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpacePanel_iconLeave::before {
mask-image: url("$(res)/img/element-icons/leave.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
}
.mx_SpacePanel_iconMembers::before {
mask-image: url("$(res)/img/element-icons/room/members.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
}
.mx_SpacePanel_iconPlus::before {

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

@@ -39,7 +39,7 @@ Please see LICENSE files in the repository root for full details.
}
&:hover {
border-color: var(--cpd-color-bg-interactive-primary-rest);
border-color: var(--cpd-color-bg-action-primary-rest);
&::before {
background-color: var(--cpd-color-icon-primary);
@@ -248,7 +248,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpaceRoomView_privateScope_justMeButton::before {
mask-image: url("$(res)/img/element-icons/room/members.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
}
.mx_SpaceRoomView_privateScope_meAndMyTeammatesButton::before {

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

@@ -22,20 +22,6 @@ Please see LICENSE files in the repository root for full details.
pointer-events: none; /* makes the avatar non-draggable */
}
}
.mx_UserMenu_userAvatarLive {
align-items: center;
background-color: $alert;
border-radius: 6px;
color: $live-badge-color;
display: flex;
height: 12px;
justify-content: center;
left: 25px;
position: absolute;
top: 20px;
width: 12px;
}
}
.mx_UserMenu_contextMenuButton {
@@ -197,7 +183,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_UserMenu_iconSignOut::before {
mask-image: url("$(res)/img/element-icons/leave.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
}
.mx_UserMenu_iconQr::before {

3
res/css/views/audio_messages/_PlaybackContainer.pcss
View File

@@ -28,10 +28,11 @@ Please see LICENSE files in the repository root for full details.
/* Waveforms are present in live recording only */
.mx_Waveform {
/* default, overridden in JS */
--barHeight: 1;
.mx_Waveform_bar {
background-color: $quaternary-content;
height: 100%;
/* Variable set by a JS component */
transform: scaleY(max(0.05, var(--barHeight)));
&.mx_Waveform_bar_100pct {

3
res/css/views/audio_messages/_SeekBar.pcss
View File

@@ -12,6 +12,9 @@ Please see LICENSE files in the repository root for full details.
/* * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */
.mx_SeekBar {
/* default, overridden in JS */
--fillTo: 1;
/* Dev note: we deliberately do not have the -ms-track (and friends) selectors because we don't */
/* need to support IE. */

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

@@ -33,7 +33,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_MessageContextMenu_iconLink::before {
mask-image: url("$(res)/img/element-icons/link.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
}
.mx_MessageContextMenu_iconPermalink::before {
@@ -53,7 +53,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_MessageContextMenu_iconForward::before {
mask-image: url("$(res)/img/element-icons/message/fwd.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/forward.svg");
}
.mx_MessageContextMenu_iconRedact::before {
@@ -96,7 +96,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_MessageContextMenu_iconReplyInThread::before {
mask-image: url("$(res)/img/element-icons/message/thread.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/threads.svg");
}
.mx_MessageContextMenu_iconReact::before {

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

@@ -1,5 +1,5 @@
.mx_RoomGeneralContextMenu_iconStar::before {
mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
}
.mx_RoomGeneralContextMenu_iconArrowDown::before {
@@ -31,7 +31,7 @@
}
.mx_RoomGeneralContextMenu_iconPeople::before {
mask-image: url("$(res)/img/element-icons/room/members.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
}
.mx_RoomGeneralContextMenu_iconFiles::before {
@@ -43,7 +43,7 @@
}
.mx_RoomGeneralContextMenu_iconWidgets::before {
mask-image: url("$(res)/img/element-icons/room/apps.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/extensions-solid.svg");
}
.mx_RoomGeneralContextMenu_iconSettings::before {
@@ -51,7 +51,7 @@
}
.mx_RoomGeneralContextMenu_iconExport::before {
mask-image: url("$(res)/img/element-icons/export.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/export-archive.svg");
}
.mx_RoomGeneralContextMenu_iconDeveloperTools::before {
@@ -59,7 +59,7 @@
}
.mx_RoomGeneralContextMenu_iconCopyLink::before {
mask-image: url("$(res)/img/element-icons/link.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
}
.mx_RoomGeneralContextMenu_iconInvite::before {
@@ -67,5 +67,5 @@
}
.mx_RoomGeneralContextMenu_iconSignOut::before {
mask-image: url("$(res)/img/element-icons/leave.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
}

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

@@ -51,7 +51,7 @@ Please see LICENSE files in the repository root for full details.
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
mask-position: center;
}
}

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

@@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details.
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
mask-position: center;
}
}

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

@@ -108,7 +108,7 @@ Please see LICENSE files in the repository root for full details.
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
mask-position: center;
}
}

105
res/css/views/dialogs/_ShareDialog.pcss
View File

@@ -5,50 +5,73 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_ShareDialog hr {
margin-top: 25px;
margin-bottom: 25px;
border-color: $light-fg-color;
}
.mx_ShareDialog {
/* Value from figma design */
width: 416px;
.mx_ShareDialog .mx_ShareDialog_content {
margin: 10px 0;
.mx_Dialog_header {
text-align: center;
margin-bottom: var(--cpd-space-6x);
/* Override dialog header padding to able to center it */
padding-inline-end: 0;
}
.mx_CopyableText {
width: unset; /* full width */
.mx_ShareDialog_content {
display: flex;
flex-direction: column;
gap: var(--cpd-space-6x);
align-items: center;
> a {
text-decoration: none;
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.mx_ShareDialog_top {
display: flex;
flex-direction: column;
gap: var(--cpd-space-4x);
align-items: center;
width: 100%;
span {
text-align: center;
font: var(--cpd-font-body-sm-semibold);
color: var(--cpd-color-text-secondary);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 100%;
}
}
label {
display: inline-flex;
gap: var(--cpd-space-3x);
justify-content: center;
align-items: center;
font: var(--cpd-font-body-md-medium);
}
button {
width: 100%;
}
.mx_ShareDialog_social {
display: flex;
gap: var(--cpd-space-3x);
justify-content: center;
a {
width: 48px;
height: 48px;
border-radius: 99px;
box-sizing: border-box;
border: 1px solid var(--cpd-color-border-interactive-secondary);
display: flex;
justify-content: center;
align-items: center;
img {
width: 24px;
height: 24px;
}
}
}
}
}
.mx_ShareDialog_split {
display: flex;
flex-wrap: wrap;
}
.mx_ShareDialog_qrcode_container {
float: left;
height: 256px;
width: 256px;
margin-right: 64px;
}
.mx_ShareDialog_qrcode_container + .mx_ShareDialog_social_container {
width: 299px;
}
.mx_ShareDialog_social_container {
display: inline-block;
}
.mx_ShareDialog_social_icon {
display: inline-grid;
margin-right: 10px;
margin-bottom: 10px;
}

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

@@ -93,7 +93,7 @@ Please see LICENSE files in the repository root for full details.
}
&.mx_SpotlightDialog_filterPeople::before {
mask-image: url("$(res)/img/element-icons/room/members.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
}
&.mx_SpotlightDialog_filterPublicRooms::before {
@@ -400,7 +400,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpotlightDialog_inviteLink .mx_AccessibleButton::before {
mask-image: url("$(res)/img/element-icons/link.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
}
.mx_SpotlightDialog_createRoom .mx_AccessibleButton::before {
@@ -432,7 +432,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpotlightDialog_startChat::before {
mask-image: url("$(res)/img/element-icons/room/members.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
}
.mx_SpotlightDialog_joinRoomAlias::before {
@@ -512,11 +512,11 @@ Please see LICENSE files in the repository root for full details.
}
&.mx_SpotlightDialog_metaspaceResult_favourites-space {
mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
}
&.mx_SpotlightDialog_metaspaceResult_people-space {
mask-image: url("$(res)/img/element-icons/room/members.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
}
&.mx_SpotlightDialog_metaspaceResult_orphans-space {

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

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

11
res/css/views/elements/_ProgressBar.pcss
View File

@@ -16,16 +16,7 @@ progress.mx_ProgressBar {
@mixin ProgressBarBorderRadius 6px;
@mixin ProgressBarColour var(--cpd-color-icon-accent-tertiary);
@mixin ProgressBarBgColour $progressbar-bg-color;
::-webkit-progress-value {
&::-webkit-progress-value {
transition: width 1s;
}
::-moz-progress-bar {
transition: padding-bottom 1s;
padding-bottom: var(--value);
transform-origin: 0 0;
transform: rotate(-90deg) translateX(-15px);
padding-left: 15px;
height: 0;
}
}

4
res/css/views/messages/_MessageActionBar.pcss
View File

@@ -108,6 +108,10 @@ Please see LICENSE files in the repository root for full details.
color: var(--cpd-color-icon-primary);
}
&.mx_MessageActionBar_threadButton {
--MessageActionBar-icon-size: 20px;
}
&.mx_MessageActionBar_retryButton {
--MessageActionBar-icon-size: 16px;
}

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

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

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

@@ -7,6 +7,11 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_BasicMessageComposer {
/* These are set in Javascript */
--avatar-letter: "";
--avatar-background: unset;
--placeholder: "";
position: relative;
.mx_BasicMessageComposer_inputEmpty > :first-child::before {

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

@@ -334,7 +334,6 @@ Please see LICENSE files in the repository root for full details.
.mx_MImageBody {
width: 100%;
height: 100%;
.mx_MImageBody_thumbnail.mx_MImageBody_thumbnail--blurhash {
position: unset;

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

@@ -1017,16 +1017,6 @@ $left-gutter: 64px;
visibility: visible;
}
/* Inverse of the above to *disable* the animation on any indicators. This approach */
/* is less pretty, but is easier to target because otherwise we need to define the */
/* animation for when it's shown which means duplicating the style definition in */
/* multiple places. */
.mx_EventTile:not(:hover):not(.mx_EventTile_actionBarFocused):not([data-whatinput="keyboard"] :focus-within) {
&:not(:focus-visible:focus-within) .mx_MessageActionBar .mx_Indicator {
animation: none;
}
}
.mx_EventTile[data-shape="ThreadsList"],
.mx_EventTile[data-shape="Notification"] {
--topOffset: $spacing-12;

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

@@ -256,10 +256,6 @@ Please see LICENSE files in the repository root for full details.
mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg");
}
.mx_MessageComposer_voiceBroadcast::before {
mask-image: url("$(res)/img/element-icons/live.svg");
}
.mx_MessageComposer_plain_text::before {
mask-image: url("$(res)/img/element-icons/room/composer/plain_text.svg");
}

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

@@ -29,7 +29,7 @@ Please see LICENSE files in the repository root for full details.
mask-image: url("$(res)/img/element-icons/roomlist/dialpad.svg");
}
.mx_RoomList_iconStartChat::before {
mask-image: url("$(res)/img/element-icons/roomlist/member-plus.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/user-add-solid.svg");
}
.mx_RoomList_iconInvite::before {
mask-image: url("$(res)/img/element-icons/room/share.svg");

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

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

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

@@ -34,7 +34,7 @@ Please see LICENSE files in the repository root for full details.
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
background-color: $secondary-content;
}
}

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

@@ -182,7 +182,7 @@ Please see LICENSE files in the repository root for full details.
.mx_RoomTile_contextMenu {
.mx_RoomTile_iconStar::before {
mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/favourite-solid.svg");
}
.mx_RoomTile_iconArrowDown::before {
@@ -206,7 +206,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_RoomTile_iconPeople::before {
mask-image: url("$(res)/img/element-icons/room/members.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/user-profile-solid.svg");
}
.mx_RoomTile_iconFiles::before {
@@ -218,7 +218,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_RoomTile_iconWidgets::before {
mask-image: url("$(res)/img/element-icons/room/apps.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/extensions-solid.svg");
}
.mx_RoomTile_iconSettings::before {
@@ -226,11 +226,11 @@ Please see LICENSE files in the repository root for full details.
}
.mx_RoomTile_iconExport::before {
mask-image: url("$(res)/img/element-icons/export.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/export-archive.svg");
}
.mx_RoomTile_iconCopyLink::before {
mask-image: url("$(res)/img/element-icons/link.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
}
.mx_RoomTile_iconInvite::before {
@@ -238,6 +238,6 @@ Please see LICENSE files in the repository root for full details.
}
.mx_RoomTile_iconSignOut::before {
mask-image: url("$(res)/img/element-icons/leave.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/leave.svg");
}
}

28
res/css/views/rooms/_UserIdentityWarning.pcss Normal file
View File

@@ -0,0 +1,28 @@
/*
Copyright 2024 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_UserIdentityWarning {
/* 42px is the padding-left of .mx_MessageComposer_wrapper in res/css/views/rooms/_MessageComposer.pcss */
margin-left: calc(-42px + var(--RoomView_MessageList-padding));
.mx_UserIdentityWarning_row {
display: flex;
align-items: center;
.mx_BaseAvatar {
margin-left: var(--cpd-space-2x);
}
.mx_UserIdentityWarning_main {
margin-left: var(--cpd-space-6x);
flex-grow: 1;
}
}
}
.mx_MessageComposer.mx_MessageComposer--compact > .mx_UserIdentityWarning {
margin-left: calc(-25px + var(--RoomView_MessageList-padding));
}

5
res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
View File

@@ -7,6 +7,11 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_WysiwygComposer_Editor_container {
/* These are set in Javascript */
--avatar-letter: "";
--avatar-background: unset;
--placeholder: "";
@keyframes visualbell {
from {
background-color: $visual-bell-bg-color;

2
res/css/views/spaces/_SpacePublicShare.pcss
View File

@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
@mixin SpacePillButton;
&.mx_SpacePublicShare_shareButton::before {
mask-image: url("$(res)/img/element-icons/link.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
}
&.mx_SpacePublicShare_inviteButton::before {

23
res/css/voice-broadcast/atoms/_LiveBadge.pcss
View File

@@ -1,23 +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
Please see LICENSE files in the repository root for full details.
*/
.mx_LiveBadge {
align-items: center;
background-color: $alert;
border-radius: 2px;
color: $live-badge-color;
display: inline-flex;
font-size: $font-12px;
font-weight: var(--cpd-font-weight-semibold);
gap: $spacing-4;
padding: 2px 4px;
}
.mx_LiveBadge--grey {
background-color: $quaternary-content;
}

28
res/css/voice-broadcast/atoms/_VoiceBroadcastControl.pcss
View File

@@ -1,28 +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
Please see LICENSE files in the repository root for full details.
*/
.mx_VoiceBroadcastControl {
align-items: center;
background-color: $background;
border-radius: 50%;
color: $secondary-content;
display: flex;
flex: 0 0 32px;
height: 32px;
justify-content: center;
width: 32px;
}
.mx_VoiceBroadcastControl-recording {
color: $alert;
}
.mx_VoiceBroadcastControl-play .mx_Icon {
left: 1px;
position: relative;
}

60
res/css/voice-broadcast/atoms/_VoiceBroadcastHeader.pcss
View File

@@ -1,60 +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
Please see LICENSE files in the repository root for full details.
*/
.mx_VoiceBroadcastHeader {
align-items: flex-start;
display: flex;
gap: $spacing-8;
line-height: 20px;
margin-bottom: $spacing-16;
min-width: 0;
}
.mx_VoiceBroadcastHeader_content {
flex-grow: 1;
min-width: 0;
}
.mx_VoiceBroadcastHeader_room_wrapper {
align-items: center;
display: flex;
gap: 4px;
justify-content: flex-start;
}
.mx_VoiceBroadcastHeader_room {
font-size: $font-12px;
font-weight: var(--cpd-font-weight-semibold);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mx_VoiceBroadcastHeader_line {
align-items: center;
color: $secondary-content;
font-size: $font-12px;
display: flex;
gap: $spacing-4;
.mx_Spinner {
flex: 0 0 14px;
padding: 1px;
}
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.mx_VoiceBroadcastHeader_mic--clickable {
cursor: pointer;
}

18
res/css/voice-broadcast/atoms/_VoiceBroadcastRecordingConnectionError.pcss
View File

@@ -1,18 +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
Please see LICENSE files in the repository root for full details.
*/
.mx_VoiceBroadcastRecordingConnectionError {
align-items: center;
color: $alert;
display: flex;
gap: $spacing-12;
svg path {
fill: $alert;
}
}

14
res/css/voice-broadcast/atoms/_VoiceBroadcastRoomSubtitle.pcss
View File

@@ -1,14 +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
Please see LICENSE files in the repository root for full details.
*/
.mx_RoomTile .mx_RoomTile_titleContainer .mx_RoomTile_subtitle.mx_RoomTile_subtitle--voice-broadcast {
align-items: center;
color: $alert;
display: flex;
gap: $spacing-4;
}

75
res/css/voice-broadcast/molecules/_VoiceBroadcastBody.pcss
View File

@@ -1,75 +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
Please see LICENSE files in the repository root for full details.
*/
.mx_VoiceBroadcastBody {
background-color: $quinary-content;
border-radius: 8px;
color: $secondary-content;
display: inline-block;
font-size: $font-12px;
padding: $spacing-12;
width: 271px;
.mx_Clock {
line-height: 1;
}
}
.mx_VoiceBroadcastBody--pip {
background-color: $system;
box-shadow: 0 2px 8px 0 #0000004a;
}
.mx_VoiceBroadcastBody--small {
display: flex;
gap: $spacing-8;
width: 192px;
.mx_VoiceBroadcastHeader {
margin-bottom: 0;
}
.mx_VoiceBroadcastControl {
align-self: center;
}
.mx_LiveBadge {
margin-top: 4px;
}
}
.mx_VoiceBroadcastBody_divider {
background-color: $quinary-content;
border: 0;
height: 1px;
margin: $spacing-12 0;
}
.mx_VoiceBroadcastBody_controls {
align-items: center;
display: flex;
gap: $spacing-32;
justify-content: center;
margin-bottom: $spacing-8;
}
.mx_VoiceBroadcastBody_timerow {
display: flex;
justify-content: space-between;
}
.mx_AccessibleButton.mx_VoiceBroadcastBody_blockButton {
display: flex;
gap: $spacing-8;
}
.mx_VoiceBroadcastBody__small-close {
right: 8px;
position: absolute;
top: 8px;
}