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_MImageReplyBody {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-column-gap: 4px;
-moz-column-gap: 4px;
column-gap: 4px;
}.mx_MImageReplyBody .mx_MImageBody_thumbnail_container {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
min-width: 0; /* Prevent a blowout */
}/*
Copyright 2024 New Vector Ltd.
Copyright 2020 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_EventTileBubble.mx_MJitsiWidgetEvent svg {
color: #b9bec6; /* XXX: Variable abuse */
}/*
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_MLocationBody {
max-width: 100%;
}.mx_MLocationBody .mx_MLocationBody_map {
max-width: 100%;
width: 450px;
height: 300px;
z-index: 0; /* keeps the entire map under the message action bar */
border-radius: 8px;
border-radius: var(--MBody-border-radius);
cursor: pointer;
}/* In the timeline, we fit the width of the container */.mx_EventTile_line .mx_MLocationBody .mx_MLocationBody_map {
max-width: 450px;
width: 100%;
}.mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_MLocationBody .mx_MLocationBody_map {
max-width: 100%;
width: 450px;
}.mx_DisambiguatedProfile ~ .mx_MLocationBody {
margin-top: 6px; /* See: https://github.com/matrix-org/matrix-react-sdk/pull/8442 */
}.mx_ReplyTile .mx_MLocationBody {
/* Prevent clicking a location within a reply */
pointer-events: none;
}/*
Copyright 2024 New Vector Ltd.
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_MNoticeBody {
white-space: pre-wrap;
color: var(--cpd-color-text-secondary);
}/*
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_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 */
}.mx_MPollBody legend {
font-weight: var(--cpd-font-weight-semibold);
font-size: 0.9375rem;
line-height: 1.5rem;
margin-top: 0;
margin-bottom: var(--cpd-space-2x);
letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: var(--cpd-space-3x);
}.mx_MPollBody legend svg {
-ms-flex-negative: 0;
flex-shrink: 0;
color: var(--cpd-color-icon-primary);
}.mx_MPollBody legend .mx_MPollBody_edited {
color: #b9bec6;
font-size: 0.75rem;
opacity: 0.6;
}.mx_MPollBody .mx_MPollBody_totalVotes {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: inline;
flex-direction: inline;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
color: var(--cpd-color-text-secondary);
font-size: 0.75rem;
}.mx_MPollBody .mx_MPollBody_totalVotes .mx_Spinner {
-webkit-box-flex: 0;
-ms-flex: 0;
flex: 0;
margin-left: 8px;
}/* Prevent clicking a poll within a reply */.mx_ReplyTile .mx_MPollBody {
pointer-events: none;
}.mx_MPollBody_allOptions {
display: grid;
grid-gap: 16px;
gap: 16px;
margin-bottom: 8px;
max-width: 550px;
}/*
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_MStickerBody_wrapper {
padding: 12px 0px;
}.mx_MStickerBody_hidden {
max-width: 220px;
text-decoration: none;
text-align: center;
/* To center the text in the middle of the frame */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}.mx_MStickerBody_placeholder {
/* centering */
position: absolute;
left: calc(50% - 40px);
top: calc(50% - 40px);
}/*
Copyright 2024 New Vector Ltd.
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_MTextBody {
white-space: pre-wrap;
}/*
Copyright 2024 New Vector Ltd.
Copyright 2020, 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.
*/span.mx_MVideoBody {
overflow: hidden;
}span.mx_MVideoBody .mx_MVideoBody_container {
border-radius: 8px;
border-radius: var(--MBody-border-radius);
overflow: hidden;
}span.mx_MVideoBody .mx_MVideoBody_container video {
height: 100%;
width: 100%;
}/*
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.
*//* A "media body" is any file upload looking thing, apart from images and videos (they *//* have unique styles). */.mx_MediaBody {
background-color: var(--cpd-color-bg-subtle-secondary);
border-radius: 12px;
max-width: 243px; /* use max-width instead of width so it fits within right panels */
color: var(--cpd-color-text-secondary);
font: var(--cpd-font-body-md-regular);
line-height: 1.5rem;
padding: 6px 12px;
}/*
Copyright 2019-2024 New Vector Ltd.
Copyright 2019 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_MessageActionBar {
--MessageActionBar-size-button: 28px;
--MessageActionBar-size-box: 32px; /* 28px + 2px (margin) * 2 */
--MessageActionBar-item-hover-background: var(--cpd-color-bg-subtle-secondary);
--MessageActionBar-item-hover-borderRadius: 6px;
--MessageActionBar-item-hover-zIndex: 1;
position: absolute;
visibility: hidden;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 32px;
height: var(--MessageActionBar-size-box);
line-height: 1.5rem;
border-radius: 8px;
background: var(--cpd-color-bg-canvas-default);
border: var(--cpd-border-width-1) solid var(--cpd-color-border-disabled);
top: -32px;
right: 8px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* Ensure the action bar appears above other things like the read marker */
/* and sender avatar (for small screens) */
z-index: 10;
/* Adds a previous event safe area so that you can't accidentally hover the */
/* previous event while trying to mouse into the action bar or from the */
}/* react button to its tooltip. */.mx_MessageActionBar::before {
content: "";
position: absolute;
/* tooltip safe mousing area + tooltip overhang + */
/* action bar + action bar offset from event */
width: calc(10px + 48px + 100% + 8px);
/* safe area + action bar */
height: calc(20px + 100%);
top: -12px;
left: -58px;
z-index: -1;
cursor: auto;
cursor: initial;
/* stylelint-disable-next-line max-line-length */
}.mx_GenericEventListSummary[data-layout="bubble"]
.mx_GenericEventListSummary_toggle
~ .mx_GenericEventListSummary_unstyledList
.mx_EventTile_info:first-of-type
.mx_MessageActionBar::before {
/* improve clickability of "collapse" link button on bubble layout by reducing width and height values */
/* mx_GenericEventListSummary_toggle ~: to apply rules to action bar when "collapse" button is available */
/* mx_EventTile_info:first-of-type: to apply rules to the info event tile just under "collapse" button */
/* TODO: use a new class name instead */
width: 100%;
height: 100%;
top: 0;
left: 0;
}.mx_EventTile_info .mx_ViewSourceEvent ~ .mx_MessageActionBar::before {
/* improve clickability of view source event toggle button by removing vertical safe area */
width: 100%;
height: 100%;
top: 0;
left: 0;
}.mx_MessageActionBar > * {
white-space: nowrap;
display: inline-block;
position: relative;
margin: 2px;
}.mx_MessageActionBar > *:hover {
background: var(--MessageActionBar-item-hover-background);
border-radius: var(--MessageActionBar-item-hover-borderRadius);
z-index: var(--MessageActionBar-item-hover-zIndex);
}.mx_MessageActionBar .mx_MessageActionBar_iconButton {
--MessageActionBar-icon-size: 18px;
width: var(--MessageActionBar-size-button);
height: var(--MessageActionBar-size-button);
color: var(--cpd-color-icon-secondary);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}.mx_MessageActionBar .mx_MessageActionBar_iconButton svg {
height: var(--MessageActionBar-icon-size);
width: var(--MessageActionBar-icon-size);
-webkit-box-flex: 0;
-ms-flex: 0 0 var(--MessageActionBar-icon-size);
flex: 0 0 var(--MessageActionBar-icon-size);
}.mx_MessageActionBar .mx_MessageActionBar_iconButton:disabled,
.mx_MessageActionBar .mx_MessageActionBar_iconButton[disabled] {
cursor: not-allowed;
opacity: 0.75;
}.mx_MessageActionBar .mx_MessageActionBar_iconButton:hover {
color: var(--cpd-color-icon-primary);
}.mx_MessageActionBar .mx_MessageActionBar_iconButton.mx_MessageActionBar_threadButton {
--MessageActionBar-icon-size: 20px;
}.mx_MessageActionBar .mx_MessageActionBar_iconButton.mx_MessageActionBar_retryButton {
--MessageActionBar-icon-size: 16px;
}.mx_MessageActionBar .mx_MessageActionBar_iconButton.mx_MessageActionBar_downloadButton {
--MessageActionBar-icon-size: 20px;
}.mx_MessageActionBar .mx_MessageActionBar_iconButton.mx_MessageActionBar_downloadButton.mx_MessageActionBar_downloadSpinnerButton svg {
display: none; /* hide the download icon */
}.mx_MessageActionBar .mx_MessageActionBar_iconButton.mx_MessageActionBar_expandCollapseMessageButton {
--MessageActionBar-icon-size: 12px;
}.mx_MessageActionBar .mx_MessageActionBar_optionsButton {
--MessageActionBar-icon-size: 22px;
}/*
Copyright 2024 New Vector Ltd.
Copyright 2019 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_MjolnirBody {
opacity: 0.4;
}/*
* Copyright 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_PinnedMessageBadge {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: var(--cpd-space-1x);
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-bg-subtle-secondary);
color: var(--cpd-color-text-secondary);
border-radius: 99px;
border: 1px solid var(--cpd-color-alpha-gray-400);
}.mx_PinnedMessageBadge svg {
fill: var(--cpd-color-icon-secondary);
}/*
Copyright 2019-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_ReactionsRow {
color: var(--cpd-color-text-primary);
}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton {
display: inline-block;
visibility: hidden; /* show on hover of the .mx_EventTile */
width: 16px;
height: 16px;
padding: var(--cpd-space-1x);
vertical-align: middle;
margin-left: 4px;
margin-right: 4px;
}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton svg {
height: inherit;
width: inherit;
color: var(--cpd-color-gray-800);
}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active {
visibility: visible; /* keep showing whilst the context menu is shown */
}.mx_ReactionsRow .mx_ReactionsRow_addReactionButton:hover svg, .mx_ReactionsRow .mx_ReactionsRow_addReactionButton.mx_ReactionsRow_addReactionButton_active svg {
color: var(--cpd-color-text-primary);
}.mx_EventTile:hover .mx_ReactionsRow_addReactionButton {
visibility: visible;
}.mx_ReactionsRow_showAll {
color: var(--cpd-color-gray-800);
}.mx_ReactionsRow_showAll.mx_AccessibleButton_kind_link_inline {
font-size: 0.75rem;
line-height: 1.25rem;
-webkit-margin-start: 4px;
margin-inline-start: 4px;
vertical-align: middle;
}.mx_ReactionsRow_showAll.mx_AccessibleButton_kind_link_inline:hover {
color: var(--cpd-color-text-primary);
}/*
Copyright 2019-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_ReactionsRowButton {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
line-height: 1.25rem;
padding: 1px 6px;
border: 1px solid var(--cpd-color-gray-400);
border-radius: 10px;
background-color: var(--cpd-color-gray-200);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}.mx_ReactionsRowButton.mx_ReactionsRowButton_selected {
background-color: var(--cpd-color-green-300);
border-color: var(--cpd-color-green-800);
}.mx_ReactionsRowButton.mx_AccessibleButton_disabled {
cursor: not-allowed;
}.mx_ReactionsRowButton .mx_ReactionsRowButton_content {
max-width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 4px;
}/*
Copyright 2024 New Vector Ltd.
Copyright 2020 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_RedactedBody {
white-space: pre-wrap;
color: var(--cpd-color-text-secondary);
vertical-align: middle;
}.mx_RedactedBody svg {
margin-right: 6px;
height: 14px;
width: 14px;
color: var(--cpd-color-icon-tertiary);
vertical-align: -2px;
}/*
Copyright 2024 New Vector Ltd.
Copyright 2017 Vector Creations 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_RoomAvatarEvent_avatar {
display: inline;
position: relative;
top: 3px;
}/*
Copyright 2024 New Vector Ltd.
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_TextualEvent {
overflow-y: hidden;
line-height: normal;
}.mx_TextualEvent a {
color: var(--cpd-color-text-action-accent);
cursor: pointer;
}.mx_RoomView_searchResultsPanel .mx_TextualEvent {
opacity: 1;
opacity: initial; /* Unset the opacity value specified above on the search results panel */
}/*
Copyright 2024 New Vector Ltd.
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_UnknownBody {
white-space: pre-wrap;
}/*
Copyright 2024 New Vector Ltd.
Copyright 2019 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_EventTile_content.mx_ViewSourceEvent {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
opacity: 0.6;
font-size: 0.75rem;
width: 100%;
overflow-x: auto; /* Cancel overflow setting of .mx_EventTile_content */
line-height: normal; /* Align with avatar and E2E icon */
}.mx_EventTile_content.mx_ViewSourceEvent pre,
.mx_EventTile_content.mx_ViewSourceEvent code {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}.mx_EventTile_content.mx_ViewSourceEvent pre {
line-height: 1.2;
margin: 3.5px 0;
}.mx_EventTile_content.mx_ViewSourceEvent .mx_ViewSourceEvent_toggle {
--ViewSourceEvent_toggle-size: 16px;
visibility: hidden;
/* icon */
width: 16px;
width: var(--ViewSourceEvent_toggle-size);
min-width: 16px;
min-width: var(--ViewSourceEvent_toggle-size);
}.mx_EventTile_content.mx_ViewSourceEvent .mx_ViewSourceEvent_toggle svg {
color: var(--cpd-color-text-action-accent);
width: var(--ViewSourceEvent_toggle-size);
height: var(--ViewSourceEvent_toggle-size);
}.mx_EventTile:hover .mx_EventTile_content.mx_ViewSourceEvent .mx_ViewSourceEvent_toggle {
visibility: visible;
}.mx_EventTile_content.mx_ViewSourceEvent.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle {
-ms-flex-item-align: end;
align-self: flex-end;
height: var(--ViewSourceEvent_toggle-size);
}/*
Copyright 2024 New Vector Ltd.
Copyright 2019, 2020 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_EventTileBubble.mx_cryptoEvent {
margin: 10px auto;
margin: var(--EventTileBubble_margin-block) auto;
}.mx_EventTileBubble.mx_cryptoEvent.mx_cryptoEvent_icon svg {
color: #b9bec6;
}.mx_EventTileBubble.mx_cryptoEvent .mx_cryptoEvent_state,
.mx_EventTileBubble.mx_cryptoEvent .mx_cryptoEvent_buttons {
grid-column: 3;
grid-row: 1 / 3;
}.mx_EventTileBubble.mx_cryptoEvent .mx_cryptoEvent_buttons {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 5px;
}.mx_EventTileBubble.mx_cryptoEvent .mx_cryptoEvent_state {
width: 130px;
padding: 10px 20px;
margin: auto 0;
text-align: center;
color: var(--cpd-color-gray-800);
overflow-wrap: break-word;
font-size: 0.75rem;
}/*
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_PollHistory_content {
height: 600px;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}.mx_PollHistory_header.mx_Heading_h2 {
margin-bottom: 16px;
}/*
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_PollHistoryList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
max-height: 100%;
}.mx_PollHistoryList_list {
overflow: auto;
list-style: none;
margin-block: 0;
padding-inline: 0;
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
-ms-flex-line-pack: start;
align-content: flex-start;
display: grid;
grid-gap: 20px;
gap: 20px;
padding-right: 64px;
margin: 32px 0;
}.mx_PollHistoryList_list.mx_PollHistoryList_list_ENDED {
gap: 32px;
}.mx_PollHistoryList_noResults {
height: 100%;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 64px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
line-height: 1.5rem;
color: var(--cpd-color-text-secondary);
}.mx_PollHistoryList_noResults .mx_PollHistoryList_loadMorePolls {
margin-top: 16px;
}.mx_PollHistoryList_loading {
color: var(--cpd-color-text-secondary);
text-align: center;
/* center in all free space*/
}/* when there are no results*/.mx_PollHistoryList_loading.mx_PollHistoryList_noResultsYet {
margin: auto auto;
}.mx_PollHistoryList_loadMorePolls {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}/*
Copyright 2024 New Vector Ltd.
Copyright 2020 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_BaseCard {
--BaseCard_EventTile_line-padding-block: 2px;
--BaseCard_EventTile-spacing-inline: 36px;
--BaseCard_header-button-size: 28px;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
font-size: var(--cpd-font-size-body-md);
}.mx_BaseCard .mx_BaseCard_header {
height: 64px;
padding: var(--cpd-space-4x);
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* changing the color from $separator to transparent as it is
the best visual output during the transition period. This will be
reintroduced at a later stage. */
border-bottom: 1px solid transparent;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: var(--cpd-space-3x);
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-border-after: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
border-block-end: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_header_spacer {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}.mx_BaseCard .mx_BaseCard_header > h2 {
margin: 0 44px;
font: var(--cpd-font-body-sm-semibold);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_header_title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
height: 24px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_header_title .mx_BaseCard_header_title_heading {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font: var(--cpd-font-body-md-medium);
color: var(--cpd-color-text-secondary);
}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_header_title .mx_BaseCard_header_title_button--option {
position: relative;
width: calc(var(--BaseCard_header-button-size) - 4px);
height: calc(var(--BaseCard_header-button-size) - 4px);
padding: 2px;
}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_header_title .mx_BaseCard_header_title_button--option svg {
width: inherit;
height: inherit;
display: block;
color: var(--cpd-color-text-secondary);
}.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_header_title .mx_BaseCard_header_title_button--option:hover svg {
color: var(--cpd-color-text-primary);
}.mx_BaseCard .mx_AutoHideScrollbar {
min-height: 0;
width: 100%;
height: 100%;
scrollbar-gutter: stable;
}.mx_BaseCard .mx_BaseCard_footer {
padding-top: 4px;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
}.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_kind_secondary {
color: var(--cpd-color-text-secondary);
background-color: rgb(141, 151, 165, 0.2);
font: var(--cpd-font-body-md-semibold);
}.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_disabled {
cursor: not-allowed;
}.mx_ContextualMenu_wrapper.mx_BaseCard_header_title .mx_ContextualMenu {
position: static;
position: initial;
}.mx_ContextualMenu_wrapper.mx_BaseCard_header_title .mx_ContextualMenu span:first-of-type {
font-weight: var(--cpd-font-weight-semibold);
font-size: inherit;
color: var(--cpd-color-text-primary);
}.mx_ContextualMenu_wrapper.mx_BaseCard_header_title .mx_ContextualMenu{
font: var(--cpd-font-body-sm-regular);
color: var(--cpd-color-text-primary);
padding-top: 10px;
padding-bottom: 10px;
border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
-webkit-box-shadow: 0px 4px 24px rgb(0, 0, 0, 0.1);
box-shadow: 0px 4px 24px rgb(0, 0, 0, 0.1);
}.mx_ContextualMenu_wrapper.mx_BaseCard_header_title .mx_ContextualMenu_chevron_top {
left: auto;
right: 22px;
border-bottom-color: var(--cpd-color-border-interactive-secondary);
}.mx_ContextualMenu_wrapper.mx_BaseCard_header_title .mx_ContextualMenu_chevron_top::after {
content: "";
border: inherit;
border-bottom-color: var(--cpd-color-bg-canvas-default);
position: absolute;
top: 1px;
left: -8px;
}/*
Copyright 2024 New Vector Ltd.
Copyright 2024 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_EmptyState {
height: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: var(--cpd-space-4x);
text-align: center;
}.mx_EmptyState svg {
width: 56px;
height: 56px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 8px;
padding: var(--cpd-space-3x);
background-color: var(--cpd-color-alpha-gray-300);
}.mx_EmptyState::before {
/* Bloom using magic numbers directly out of Figma */
content: "";
position: absolute;
z-index: -1;
width: 642px;
height: 775px;
right: -253.77px;
top: 0;
background: radial-gradient(49.95% 49.95% at 50% 50%, rgb(13, 189, 139, 0.12) 0%, rgb(18, 115, 235, 0) 100%);
-webkit-transform: rotate(-89.69deg);
transform: rotate(-89.69deg);
overflow: hidden;
}/*
Copyright 2024 New Vector Ltd.
Copyright 2020 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_EncryptionInfo_spinner .mx_Spinner {
margin-top: 25px;
margin-bottom: 15px;
}.mx_EncryptionInfo_spinner{
text-align: center;
}/*
Copyright 2024 New Vector Ltd.
Copyright 2024 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_ExtensionsCard {
--cpd-separator-spacing: var(--cpd-space-6x);
--AddExtension-overlap: -76px;
}.mx_ExtensionsCard .mx_AutoHideScrollbar {
padding: 0 var(--cpd-space-4x);
margin-top: var(--cpd-space-6x);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}/* Styling for the "Add extensions" button */.mx_ExtensionsCard .mx_AutoHideScrollbar > button {
width: 100%;
}.mx_ExtensionsCard .mx_ExtensionsCard_container {
text-align: center;
margin: 20px var(--cpd-space-4x) 0;
}.mx_ExtensionsCard .mx_ExtensionsCard_Button {
/* this button is special so we have to override some of the original styling */
/* as we will be applying it in its children */
padding: 0;
height: auto;
color: var(--cpd-color-gray-800);
position: relative;
}.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_WidgetAvatar {
-ms-flex-negative: 0;
flex-shrink: 0;
}.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_icon_app {
padding: var(--cpd-space-2x) var(--cpd-space-12x) var(--cpd-space-2x) var(--cpd-space-3x);
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_icon_app p {
margin: 0 var(--cpd-space-3x);
color: var(--cpd-color-text-primary);
}.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_app_pinToggle,
.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_app_options {
position: absolute;
top: 0;
height: 100%; /* to give bigger interactive zone */
width: 24px;
padding: var(--cpd-space-3x) var(--cpd-space-1x);
-webkit-box-sizing: border-box;
box-sizing: border-box;
-ms-flex-negative: 0;
flex-shrink: 0;
}.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_app_pinToggle svg, .mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_app_options svg {
width: 16px;
height: 16px;
color: var(--cpd-color-icon-tertiary);
}.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_app_pinToggle:hover::after, .mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_app_options:hover::after {
content: "";
position: absolute;
height: 24px;
width: 24px;
top: var(--cpd-space-2x); /* equal to padding-top of parent */
left: 0;
border-radius: 12px;
background-color: rgb(141, 151, 165, 0.1);
}.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_app_pinToggle {
right: 8px;
}.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_app_options {
right: 32px; /* 24 + 8 */
}.mx_ExtensionsCard .mx_ExtensionsCard_Button.mx_ExtensionsCard_Button_pinned::after {
opacity: 0.2;
}.mx_ExtensionsCard .mx_ExtensionsCard_Button.mx_ExtensionsCard_Button_pinned .mx_ExtensionsCard_app_pinToggle svg {
color: var(--cpd-color-text-action-accent);
}.mx_ExtensionsCard .mx_ExtensionsCard_Button::before {
content: normal;
content: initial;
}.mx_ExtensionsCard .mx_ExtensionsCard_Button::after {
top: var(--cpd-space-2x); /* re-align based on the height change */
pointer-events: none; /* pass through to the real button */
}/* Set layout for everyone button */.mx_ExtensionsCard a[data-kind="primary"] {
margin-top: var(--cpd-space-10x);
}.mx_ExtensionsCard .mx_EmptyState::before {
/* Overlap the Add extensions button */
top: var(--AddExtension-overlap);
}.mx_ExtensionsCard .mx_EmptyState {
/* Stop empty state scrolling */
height: calc(100% + var(--AddExtension-overlap));
}/*
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_PinnedMessagesCard {
--unpin-height: 76px;
}.mx_PinnedMessagesCard .mx_PinnedMessagesCard_wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: var(--cpd-space-4x);
gap: var(--cpd-space-6x);
overflow-y: auto;
}.mx_PinnedMessagesCard .mx_PinnedMessagesCard_wrapper .mx_PinnedMessagesCard_Separator {
min-height: 1px;
/* Override default compound value */
margin-block: 0;
}.mx_PinnedMessagesCard .mx_PinnedMessagesCard_wrapper_unpin_all {
/* Remove the unpin all button height and the top and bottom padding */
height: calc(100% - var(--unpin-height) - calc(var(--cpd-space-4x) * 2));
}.mx_PinnedMessagesCard .mx_PinnedMessagesCard_unpin {
/* Make it float at the bottom of the unpin panel */
position: absolute;
bottom: 0;
width: 100%;
height: var(--unpin-height);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-shadow: 0 4px 24px 0 rgb(27, 29, 34, 0.1);
box-shadow: 0 4px 24px 0 rgb(27, 29, 34, 0.1);
background: var(--cpd-color-bg-canvas-default);
}.mx_PinnedMessagesCard .mx_EventTile_body {
word-break: break-word;
}/*
Copyright 2024, 2025 New Vector Ltd.
Copyright 2020 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_RoomSummaryCard {
--cpd-separator-inset: var(--cpd-space-4x);
--cpd-separator-spacing: var(--cpd-space-4x);
}.mx_RoomSummaryCard .mx_RoomSummaryCard_container {
text-align: center;
margin: 20px var(--cpd-space-4x) 0;
}.mx_RoomSummaryCard .mx_RoomSummaryCard_roomName,
.mx_RoomSummaryCard .mx_RoomSummaryCard_alias {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: pre-wrap;
overflow: hidden;
}.mx_RoomSummaryCard .mx_RoomSummaryCard_alias {
text-overflow: ellipsis;
}.mx_RoomSummaryCard .mx_RoomSummaryCard_topic {
padding: 0 12px;
color: var(--cpd-color-text-secondary);
}.mx_RoomSummaryCard .mx_RoomSummaryCard_topic .mx_RoomSummaryCard_topic_box {
width: 100%;
}.mx_RoomSummaryCard .mx_RoomSummaryCard_topic .mx_RoomSummaryCard_topic_container {
text-align: start;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}.mx_RoomSummaryCard .mx_RoomSummaryCard_topic .mx_RoomSummaryCard_topic_edit {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}.mx_RoomSummaryCard .mx_RoomSummaryCard_topic p {
white-space: pre-wrap;
width: 100%;
min-width: 0;
margin: 0;
}.mx_RoomSummaryCard .mx_RoomSummaryCard_topic a {
cursor: pointer;
}.mx_RoomSummaryCard .mx_RoomSummaryCard_topic .mx_RoomSummaryCard_topic_chevron {
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}.mx_RoomSummaryCard .mx_RoomSummaryCard_topic.mx_RoomSummaryCard_topic_collapsed p {
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}.mx_RoomSummaryCard .mx_RoomSummaryCard_topic.mx_RoomSummaryCard_topic_collapsed .mx_RoomSummaryCard_topic_chevron {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}.mx_RoomSummaryCard .mx_AccessibleButton_kind_link {
margin-top: 12px;
margin-bottom: 12px;
font-size: 0.8125rem;
font-weight: var(--cpd-font-weight-semibold);
}.mx_RoomSummaryCard_badges {
margin: var(--cpd-space-4x) 0;
}.mx_RoomSummaryCard_search {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
min-width: 0;
}.mx_RoomSummaryCard_search input[type="search"]::-webkit-search-cancel-button {
display: inline;
display: initial; /* override _common.pcss which inhibits this */
}.mx_RoomSummaryCard_roomName {
margin: 12px 0 4px;
}.mx_RoomSummaryCard_bottomOptions {
margin: 0 0 var(--cpd-space-8x);
}/*
Copyright 2024 New Vector Ltd.
Copyright 2021-2024 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_ThreadPanel {
height: 100px;
overflow: visible;
}.mx_ThreadPanel .mx_ThreadPanelHeader {
height: 60px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 16px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 1px solid var(--cpd-color-gray-400);
}.mx_ThreadPanel .mx_ThreadPanelHeader .mx_AccessibleButton {
font-size: 12px;
color: var(--cpd-color-text-secondary);
}.mx_ThreadPanel .mx_ThreadPanelHeader .mx_ThreadPanel_vertical_separator {
height: 28px;
margin-left: var(--cpd-space-3x);
margin-right: var(--cpd-space-2x);
border-left: 1px solid var(--cpd-color-gray-400);
}.mx_ThreadPanel .mx_ThreadPanelHeader .mx_ThreadPanel_dropdown {
font: var(--cpd-font-body-sm-regular);
padding: 3px 4px 3px 8px;
border-radius: 4px;
line-height: 1.5;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}.mx_ThreadPanel .mx_ThreadPanelHeader .mx_ThreadPanel_dropdown:hover,
.mx_ThreadPanel .mx_ThreadPanelHeader .mx_ThreadPanel_dropdown[aria-expanded="true"] {
background: var(--cpd-color-gray-400);
}.mx_ThreadPanel .mx_ThreadPanelHeader .mx_ThreadPanel_dropdown svg {
margin-left: 2px;
height: 20px;
width: 20px;
display: inline-block;
vertical-align: bottom;
}.mx_ThreadPanel .mx_AutoHideScrollbar,
.mx_ThreadPanel .mx_RoomView_messagePanelSpinner {
background-color: var(--cpd-color-bg-canvas-default);
border-radius: 8px;
-webkit-padding-end: 0;
padding-inline-end: 0;
overflow-y: scroll; /* set gap between the thread tile and the right border */
height: 100%;
}.mx_ThreadPanel .mx_EventTile[data-layout="group"] .mx_MessageActionBar {
right: 0;
top: -36px; /* 2px above EventTile */
z-index: 10; /* See _EventTile.pcss */
}/* For style rules of EventTile in a thread, see _EventTile.pcss */.mx_ThreadPanel.mx_ThreadView {
max-height: 100%;
}.mx_ThreadPanel.mx_ThreadView .mx_ThreadView_timelinePanelWrapper {
position: relative;
min-height: 0; /* don't displace the composer */
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}.mx_ThreadPanel.mx_ThreadView .mx_ThreadView_timelinePanelWrapper .mx_FileDropTarget {
border-radius: 8px;
}.mx_ThreadPanel.mx_ThreadView .mx_MessageComposer_sendMessage {
margin-right: 0;
}/* Make use of the space above the composer buttons too*/.mx_ThreadPanel.mx_ThreadView .mx_Autocomplete {
width: calc(100% + 140px);
}.mx_ThreadPanel.mx_ThreadView.mx_ThreadView_narrow .mx_Autocomplete {
width: calc(100% + 108px);
}.mx_ThreadPanel .mx_RoomView_messagePanel.mx_RoomView_messageListWrapper {
position: static;
position: initial;
}.mx_ThreadPanel .mx_RoomView_messagePanel .mx_RoomView_messageListWrapper {
width: calc(100% + 6px); /* 8px - 2px */
}.mx_ThreadPanel .mx_RoomView_messagePanel .mx_RoomView_empty {
display: contents;
}.mx_ThreadPanel .mx_RoomView_MessageList {
-webkit-padding-start: 8px;
padding-inline-start: 8px;
-webkit-padding-end: 8px;
padding-inline-end: 8px;
content-visibility: visible;
}.mx_ThreadPanel .mx_EventTile,
.mx_ThreadPanel .mx_GenericEventListSummary {
/* Account for scrollbar when hovering */
padding-top: 0;
}.mx_ThreadPanel .mx_EventTile .mx_TimelineSeparator, .mx_ThreadPanel .mx_GenericEventListSummary .mx_TimelineSeparator {
display: none;
}.mx_ThreadPanel .mx_EventTile.mx_EventTile_clamp:hover, .mx_ThreadPanel .mx_GenericEventListSummary.mx_EventTile_clamp:hover {
cursor: pointer;
}.mx_ThreadPanel .mx_MessageComposer {
background-color: var(--cpd-color-bg-canvas-default);
border-radius: 8px;
margin-top: 8px;
padding: 0 8px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}.mx_ThreadPanel .mx_MessageTimestamp {
color: var(--cpd-color-text-secondary);
}.mx_ThreadPanel .mx_BaseCard_footer {
text-align: left;
font-size: 0.75rem;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
gap: 4px;
position: relative;
top: 2px;
padding-right: 8px;
}.mx_ThreadPanel .mx_BaseCard_footer .mx_AccessibleButton_kind_link_inline {
color: var(--cpd-color-text-secondary);
}.mx_ContextualMenu_wrapper .mx_ThreadPanel_Header_FilterOptionItem {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 10px 20px 10px 30px;
position: relative;
}.mx_ContextualMenu_wrapper .mx_ThreadPanel_Header_FilterOptionItem:hover {
background-color: var(--cpd-color-bg-subtle-secondary);
}.mx_ContextualMenu_wrapper .mx_ThreadPanel_Header_FilterOptionItem[aria-checked="true"] span:first-child {
margin-left: -20px;
}.mx_ContextualMenu_wrapper .mx_ThreadPanel_Header_FilterOptionItem[aria-checked="true"] svg {
width: 12px;
height: 12px;
margin-right: 8px;
color: var(--cpd-color-text-primary);
display: inline-block;
vertical-align: middle;
position: absolute;
top: 14px;
left: 10px;
}.mx_ContextualMenu_wrapper .mx_ThreadPanel_Header_FilterOptionItem span:last-child {
color: var(--cpd-color-text-secondary);
}/*
Copyright 2024 New Vector Ltd.
Copyright 2021, 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_TimelineCard .mx_TimelineCard_timeline {
overflow: hidden;
position: relative; /* offset parent for jump to bottom button */
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
border-radius: 8px;
}.mx_TimelineCard .mx_NewRoomIntro {
-webkit-margin-start: var(--BaseCard_EventTile-spacing-inline);
margin-inline-start: var(--BaseCard_EventTile-spacing-inline);
-webkit-margin-end: var(--BaseCard_EventTile-spacing-inline);
margin-inline-end: var(--BaseCard_EventTile-spacing-inline);
}.mx_TimelineCard .mx_EventTile_content {
margin-right: 0;
}.mx_TimelineCard .mx_EventTile .mx_ThreadSummary {
position: relative;
padding-right: 11px;
}.mx_TimelineCard .mx_EventTile .mx_ThreadSummary::after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: -16px;
height: 1px;
width: 100%;
border-bottom: 1px solid #616b7f;
}.mx_TimelineCard .mx_EventTile[data-layout="irc"],
.mx_TimelineCard .mx_EventTile[data-layout="group"] {
--TimelineCard_ReadReceiptGroup-inset-block-start: -6px;
--EventTile_group_line-spacing-inline-start: var(--BaseCard_EventTile-spacing-inline);
}.mx_TimelineCard .mx_EventTile[data-layout="irc"].mx_EventTile_info .mx_EventTile_line,
.mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_EventTile_line,
.mx_TimelineCard .mx_EventTile[data-layout="group"].mx_EventTile_info .mx_EventTile_line,
.mx_TimelineCard .mx_EventTile[data-layout="group"] .mx_EventTile_line {
padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-inline);
-webkit-padding-end: 46px;
padding-inline-end: 46px;
-webkit-padding-end: var(--MessageTimestamp-width);
padding-inline-end: var(--MessageTimestamp-width); /* ensure timestamp is not hidden */
}.mx_TimelineCard .mx_EventTile[data-layout="irc"].mx_EventTile_info .mx_EventTile_line .mx_EventTile_e2eIcon, .mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_EventTile_line .mx_EventTile_e2eIcon, .mx_TimelineCard .mx_EventTile[data-layout="group"].mx_EventTile_info .mx_EventTile_line .mx_EventTile_e2eIcon, .mx_TimelineCard .mx_EventTile[data-layout="group"] .mx_EventTile_line .mx_EventTile_e2eIcon {
inset-inline-start: 8px;
}.mx_TimelineCard .mx_EventTile[data-layout="irc"].mx_EventTile_info, .mx_TimelineCard .mx_EventTile[data-layout="group"].mx_EventTile_info {
/* Info events should have the same size as state events, those
* are usually wrapped in a generic event list summary */
}.mx_TimelineCard .mx_EventTile[data-layout="irc"].mx_EventTile_info .mx_EventTile_avatar, .mx_TimelineCard .mx_EventTile[data-layout="group"].mx_EventTile_info .mx_EventTile_avatar {
inset-inline-start: 18px;
}.mx_TimelineCard .mx_EventTile[data-layout="irc"].mx_EventTile_info, .mx_TimelineCard .mx_EventTile[data-layout="group"].mx_EventTile_info{
font: var(--cpd-font-body-sm-regular);
}.mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_EventTile_avatar, .mx_TimelineCard .mx_EventTile[data-layout="group"] .mx_EventTile_avatar {
inset-inline-start: -3px;
}.mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_EventTile_msgOption, .mx_TimelineCard .mx_EventTile[data-layout="group"] .mx_EventTile_msgOption {
-webkit-margin-end: 0;
margin-inline-end: 0;
}.mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_EventTile_msgOption .mx_ReadReceiptGroup, .mx_TimelineCard .mx_EventTile[data-layout="group"] .mx_EventTile_msgOption .mx_ReadReceiptGroup {
top: var(--TimelineCard_ReadReceiptGroup-inset-block-start);
}.mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_DisambiguatedProfile,
.mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_ThreadSummary,
.mx_TimelineCard .mx_EventTile[data-layout="group"] .mx_DisambiguatedProfile,
.mx_TimelineCard .mx_EventTile[data-layout="group"] .mx_ThreadSummary {
-webkit-margin-start: var(--BaseCard_EventTile-spacing-inline);
margin-inline-start: var(--BaseCard_EventTile-spacing-inline);
}.mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_DisambiguatedProfile, .mx_TimelineCard .mx_EventTile[data-layout="group"] .mx_DisambiguatedProfile {
max-width: calc(100% - var(--BaseCard_EventTile-spacing-inline)); /* instead of $left-gutter */
}.mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_ReplyTile .mx_DisambiguatedProfile, .mx_TimelineCard .mx_EventTile[data-layout="group"] .mx_ReplyTile .mx_DisambiguatedProfile {
-webkit-margin-start: 0;
margin-inline-start: 0;
max-width: none;
max-width: initial;
}.mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_MessageTimestamp, .mx_TimelineCard .mx_EventTile[data-layout="group"] .mx_MessageTimestamp {
inset-inline: auto 0;
font-size: 0.75rem;
}.mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_ReactionsRow, .mx_TimelineCard .mx_EventTile[data-layout="group"] .mx_ReactionsRow {
/* See: var(--ThreadView_group_spacing-end) for ReactionsRow on _EventTile.pcss */
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}.mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_ThreadSummary, .mx_TimelineCard .mx_EventTile[data-layout="group"] .mx_ThreadSummary {
-webkit-margin-end: 0;
margin-inline-end: 0;
max-width: min(calc(100% - 36px), 600px);
}.mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_EventTile_avatar,
.mx_TimelineCard .mx_EventTile[data-layout="irc"] .mx_MessageTimestamp {
position: absolute;
}.mx_TimelineCard .mx_EventTile[data-layout="group"] {
/* Read receipt group on compact modern layout */
/* This is required because mx_TimelineCard is a child element wrapped by mx_MatrixChat_useCompactLayout, */
}/* which specifies the default position of mx_ReadReceiptGroup on compact modern layout. */.mx_MatrixChat_useCompactLayout .mx_TimelineCard .mx_EventTile[data-layout="group"] .mx_ReadReceiptGroup {
top: var(--TimelineCard_ReadReceiptGroup-inset-block-start);
}.mx_TimelineCard .mx_EventTile[data-layout="bubble"]::before {
z-index: auto; /* enable background color on hover */
}.mx_TimelineCard .mx_EventTile[data-layout="bubble"].mx_EventTile_info .mx_MessageActionBar {
/* 1px: border width */
inset-inline-end: calc(8px + 1px);
inset-inline-end: calc(var(--container-gap-width) + 1px);
}.mx_TimelineCard .mx_EventTile[data-layout="bubble"] .mx_ReactionsRow {
position: relative; /* display on hover */
}.mx_TimelineCard .mx_LegacyCallEvent_wrapper {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: auto 5px;
}.mx_TimelineCard .mx_LegacyCallEvent_wrapper .mx_LegacyCallEvent {
margin: 4px;
}.mx_TimelineCard .mx_GenericEventListSummary[data-layout="irc"] .mx_EventTile_line,
.mx_TimelineCard .mx_GenericEventListSummary[data-layout="irc"] .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line,
.mx_TimelineCard .mx_GenericEventListSummary[data-layout="group"] .mx_EventTile_line,
.mx_TimelineCard .mx_GenericEventListSummary[data-layout="group"] .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
-webkit-padding-start: var(--BaseCard_EventTile-spacing-inline);
padding-inline-start: var(--BaseCard_EventTile-spacing-inline);
-webkit-padding-end: 46px;
padding-inline-end: 46px;
-webkit-padding-end: var(--MessageTimestamp-width);
padding-inline-end: var(--MessageTimestamp-width); /* ensure timestamp is not hidden */
}.mx_TimelineCard .mx_WhoIsTypingTile {
margin-left: -12px; /* undo padding on the message list */
}.mx_TimelineCard .mx_WhoIsTypingTile_avatars {
-ms-flex-preferred-size: 48px;
flex-basis: 48px; /* 12 (padding on message list) + 36 (padding on event lines) */
}/* RR next to a message on the messsge list */.mx_TimelineCard .mx_GenericEventListSummary_unstyledList .mx_EventTile[data-layout="bubble"] .mx_ReadReceiptGroup, .mx_TimelineCard .mx_RoomView_MessageList .mx_EventTile[data-layout="bubble"] .mx_ReadReceiptGroup {
/* 6px: scroll bar width (magic number) */
/* stylelint-disable-next-line declaration-colon-space-after */
inset-inline-end: calc(
-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + 8px + 6px
);
inset-inline-end: calc(
-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + var(--container-gap-width) + 6px
);
}.mx_TimelineCard .mx_GenericEventListSummary_unstyledList .mx_EventTile[data-layout="bubble"].mx_EventTile_info .mx_ReadReceiptGroup, .mx_TimelineCard .mx_RoomView_MessageList .mx_EventTile[data-layout="bubble"].mx_EventTile_info .mx_ReadReceiptGroup {
inset-inline-end: -4px; /* align with RR outside of info tile */
}/*
Copyright 2024 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.
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_UserInfo.mx_BaseCard {
/* UserInfo has a circular image at the top so it fits between the back & close buttons */
padding-top: 0;
overflow-y: auto;
font-size: var(--cpd-font-size-body-sm);
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container {
padding: var(--cpd-space-2x) 0 var(--cpd-space-4x);
margin: 0 var(--cpd-space-4x);
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container + .mx_UserInfo_container {
border-top: 1px solid var(--cpd-color-gray-400);
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetailsContainer {
padding-top: 0;
padding-bottom: 0;
margin-bottom: 8px;
}.mx_UserInfo.mx_BaseCard .mx_RoomTile_titleContainer {
width: 154px;
}.mx_UserInfo.mx_BaseCard .mx_RoomTile_badge {
display: none;
}.mx_UserInfo.mx_BaseCard .mx_RoomTile_title {
width: 160px;
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar {
margin: var(--cpd-space-12x) var(--cpd-space-4x) 0 var(--cpd-space-4x);
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_UserInfo_avatar_transition {
max-width: 120px;
aspect-ratio: 1 / 1;
margin: 0 auto;
-webkit-transition: 0.5s;
transition: 0.5s;
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_UserInfo_avatar_transition .mx_BaseAvatar {
/* Override the calculated font-size so that the letter isn't tiny */
font-size: 4rem;
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_UserInfo_avatar_transition .mx_BaseAvatar,
.mx_UserInfo.mx_BaseCard .mx_UserInfo_avatar .mx_UserInfo_avatar_transition .mx_BaseAvatar img {
width: 100%;
height: 100%;
}.mx_UserInfo.mx_BaseCard h2 {
text-transform: uppercase;
color: var(--cpd-color-gray-800);
font: var(--cpd-font-body-md-semibold);
font-weight: var(--cpd-font-weight-semibold);
margin: 4px 0;
}.mx_UserInfo.mx_BaseCard p {
margin: 5px 0;
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_header {
margin-bottom: var(--cpd-space-8x);
padding-bottom: 0;
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: var(--cpd-space-1x);
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h1 {
margin: 0;
font-size: 1.25rem;
line-height: 1.5625rem;
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_UserInfo_profile_name {
min-height: 30px;
/* limit to 2 lines, show an ellipsis if it overflows */
/* this looks webkit specific but is supported by Firefox 68+ */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_UserInfo_profile_mxid {
color: var(--cpd-color-text-secondary);
height: 28px;
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_UserInfo_profileStatus {
height: 20px;
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_UserInfo_timezone {
height: 20px;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}/** Overrides for the copy to clipboard button **/.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_CopyableText {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_CopyableText_copyButton {
width: 28px;
height: 28px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: static;
position: initial;
padding-left: var(--cpd-space-2x);
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_CopyableText_copyButton::before {
width: 20px;
height: 20px;
background-color: var(--cpd-color-icon-secondary-alpha);
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_timezone {
margin: var(--cpd-space-1x) 0;
}.mx_UserInfo.mx_BaseCard .mx_PresenceLabel {
font: var(--cpd-font-body-sm-regular);
opacity: 1;
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_verification {
margin-top: var(--cpd-space-4x);
height: 36px;
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_verification .mx_UserInfo_verified_badge {
min-width: 68px;
height: 20px;
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_verification .mx_UserInfo_verified_badge .mx_UserInfo_verified_icon {
-ms-flex-negative: 0;
flex-shrink: 0;
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_verification .mx_UserInfo_verified_badge .mx_UserInfo_verified_label {
margin: 0;
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_verification .mx_UserInfo_verification_unavailable {
color: var(--cpd-color-text-secondary);
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 6px 0;
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_UserInfo_roleDescription {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
/* try to make it the same height as the dropdown */
margin: 11px 0 12px 0;
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_memberDetails .mx_UserInfo_profileField .mx_Field {
margin: 0;
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_field {
line-height: 1rem;
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_statusMessage {
font: var(--cpd-font-body-sm-regular);
font-size: 0.6875rem;
line-height: 1rem;
opacity: 0.5;
overflow: hidden;
word-break: break-word;
text-overflow: ellipsis;
display: -webkit-box;
max-height: calc(1rem * 3);
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}.mx_UserInfo.mx_BaseCard .mx_AutoHideScrollbar {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
}.mx_UserInfo.mx_BaseCard.mx_UserInfo_smallAvatar .mx_UserInfo_avatar .mx_UserInfo_avatar_transition {
max-width: 72px;
margin: 0 auto;
}.mx_UserInfo.mx_BaseCard.mx_UserInfo_smallAvatar .mx_UserInfo_avatar .mx_BaseAvatar {
/* Override the calculated font-size so that the letter isn't tiny */
font-size: 2rem;
}/*
Copyright 2024 New Vector Ltd.
Copyright 2020 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.
*//* center the big shield icon */.mx_VerificationPanel_verified_section .mx_E2EIcon, .mx_VerificationPanel_reciprocate_section .mx_E2EIcon {
/* Override general user info margin */
margin: 20px auto !important;
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) > div > p {
margin-top: 0;
margin-bottom: 0;
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) .mx_VerificationPanel_verifyByEmojiButton,
.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) .mx_UserInfo_wideButton {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) .mx_EncryptionInfo_spinner,
.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) .mx_VerificationShowSas {
-webkit-margin-start: auto;
margin-inline-start: auto;
-webkit-margin-end: auto;
margin-inline-end: auto;
}.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) .mx_Spinner,
.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) .mx_VerificationShowSas {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}.mx_UserInfo.mx_BaseCard .mx_VerificationPanel_qrCode {
padding: 4px 4px 0 4px;
background: white;
border-radius: 4px;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
max-width: 100%;
/* Override general user info margin */
margin: 0 auto !important;
}.mx_UserInfo.mx_BaseCard .mx_VerificationPanel_qrCode canvas {
/* override height and width which are set on the element directly */
height: auto !important;
width: 100% !important;
max-width: 240px;
}.mx_UserInfo.mx_BaseCard .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton {
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
display: block;
margin: 10px 0;
}/* Special case styling for EncryptionPanel in a Modal dialog */.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions, .mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 10px;
margin-bottom: 10px;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions > .mx_VerificationPanel_QRPhase_betweenText, .mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions > .mx_VerificationPanel_QRPhase_betweenText {
width: 50px;
vertical-align: middle;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption, .mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption {
background-color: var(--cpd-color-bg-subtle-secondary);
border-radius: 10px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 20px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
max-width: 310px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption canvas,
.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_noQR,
.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption canvas,
.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_noQR {
width: 220px !important;
height: 220px !important;
background-color: #fff;
border-radius: 4px;
vertical-align: middle;
text-align: center;
padding: 10px;
}.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption > p, .mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption > p {
margin-top: 0;
font-weight: 700;
}.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_helpText, .mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_helpText {
font: var(--cpd-font-body-md-regular);
margin: 30px 0;
text-align: center;
}/* EncryptionPanel when verification is done *//* right align the "Got it" button */.mx_Dialog .mx_VerificationPanel_verified_section .mx_AccessibleButton, .mx_CompleteSecurity_body .mx_VerificationPanel_verified_section .mx_AccessibleButton {
float: right;
}.mx_Dialog .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton, .mx_CompleteSecurity_body .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton {
margin-left: 10px;
padding: 7px 40px;
}.mx_Dialog .mx_VerificationPanel_reciprocate_section .mx_VerificationPanel_reciprocateButtons, .mx_CompleteSecurity_body .mx_VerificationPanel_reciprocate_section .mx_VerificationPanel_reciprocateButtons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}/*
Copyright 2024 New Vector Ltd.
Copyright 2020 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_WidgetCard .mx_AppTileFullWidth {
max-width: none;
max-width: initial;
width: auto !important;
height: 100%;
border: 0;
}/*
Copyright 2019-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_AliasSettings_localAddresses {
cursor: pointer;
color: var(--cpd-color-text-primary);
font-weight: var(--cpd-font-weight-semibold);
text-decoration: underline;
list-style: none;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}/* list-style doesn't do it for webkit */.mx_AliasSettings_localAddresses::-webkit-details-marker {
display: none;
}/*
* 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_RoomListPanel {
background-color: var(--cpd-color-bg-canvas-default);
height: 100%;
border-right: 1px solid var(--cpd-color-bg-subtle-primary);
}/*
Copyright 2024 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.
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.
*/:root {
--AppTile_mini-height: 220px;
}.mx_AppsDrawer {
--minWidth: 240px; /* TODO this should be 300px but that's too large */
margin: 8px;
margin: var(--container-gap-width);
/* The left side gap is fully handled by this margin. To prohibit bleeding on webkit browser. */
margin-right: calc(8px / 2);
margin-right: calc(var(--container-gap-width) / 2);
margin-bottom: 0; /* No bottom margin for the correct gap to the CallView below. */
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}.mx_AppsDrawer .mx_AppsDrawer_resizer {
margin-bottom: 8px;
margin-bottom: var(--container-gap-width);
}.mx_AppsDrawer .mx_AppsDrawer_resizer_container {
width: 100%;
height: 10px;
display: block;
position: relative;
}.mx_AppsDrawer .mx_AppsDrawer_resizer_container .mx_AppsDrawer_resizer_container_handle {
cursor: ns-resize;
/* Override styles from library, making the whole area the target area */
width: 100% !important;
height: 100% !important;
/* This is positioned directly below frame */
position: absolute;
bottom: 50% !important; /* override from library */
/* We then render the pill handle in an ::after to keep it in the handle's */
}/* area without being a massive line across the screen */.mx_AppsDrawer .mx_AppsDrawer_resizer_container .mx_AppsDrawer_resizer_container_handle::after {
content: "";
position: absolute;
border-radius: 3px;
height: 4px;
bottom: 0;
/* Together, these make the bar 64px wide */
/* These are also overridden from the library */
left: calc(50% - 32px);
right: calc(50% - 32px);
}.mx_AppsDrawer:hover .mx_AppsDrawer_resizer_container_handle::after {
opacity: 0.8;
background: var(--cpd-color-text-primary);
}.mx_AppsDrawer:hover .mx_ResizeHandle--horizontal::before {
position: absolute;
left: 3px;
top: 50%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
height: 64px; /* to match width of the ones on roomlist */
width: 4px;
border-radius: 4px;
content: "";
background-color: var(--cpd-color-text-primary);
opacity: 0.8;
}.mx_AppsDrawer .mx_AppTile {
width: 50%;
min-width: var(--minWidth);
}.mx_AppsDrawer.mx_AppsDrawer--maximised {
margin-bottom: 8px;
margin-bottom: var(--container-gap-width);
}.mx_AppsDrawer.mx_AppsDrawer--resizing .mx_AppTile_persistedWrapper {
z-index: 1;
}.mx_AppsDrawer.mx_AppsDrawer--2apps .mx_AppTile {
width: 50%;
}.mx_AppsDrawer.mx_AppsDrawer--2apps .mx_AppTile:nth-child(3) {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
width: 0 !important;
min-width: var(--minWidth) !important;
}.mx_AppsDrawer.mx_AppsDrawer--3apps .mx_AppTile {
width: 33%;
}.mx_AppsDrawer.mx_AppsDrawer--3apps .mx_AppTile:nth-child(3) {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
width: 0 !important;
min-width: var(--minWidth) !important;
}.mx_AppsContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
width: 100%;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
min-height: 0;
}.mx_AppsContainer .mx_AppTile:first-of-type {
border-left-width: 8px;
border-left-width: var(--container-border-width);
border-radius: 10px 0 0 10px;
}.mx_AppsContainer .mx_AppTile:last-of-type {
border-right-width: 8px;
border-right-width: var(--container-border-width);
border-radius: 0 10px 10px 0;
}.mx_AppsContainer .mx_ResizeHandle--horizontal {
position: relative;
}.mx_AppsContainer .mx_ResizeHandle--horizontal > div {
width: 0;
}.mx_AppTile {
border: 8px solid var(--cpd-color-bg-subtle-secondary);
border: var(--container-border-width) solid var(--cpd-color-bg-subtle-secondary);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: var(--cpd-color-bg-subtle-secondary);
}.mx_AppTileFullWidth {
width: 100% !important; /* to override the inline style set by the resizer */
margin: 0;
padding: 0;
border: 8px solid var(--cpd-color-bg-subtle-secondary);
border: var(--container-border-width) solid var(--cpd-color-bg-subtle-secondary);
border-radius: 8px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background-color: var(--cpd-color-bg-subtle-secondary);
}.mx_AppTile_mini {
width: 100%;
margin: 0;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 220px;
height: var(--AppTile_mini-height);
}.mx_AppTile .mx_AppTile_persistedWrapper,
.mx_AppTileFullWidth .mx_AppTile_persistedWrapper,
.mx_AppTile_mini .mx_AppTile_persistedWrapper {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}.mx_AppTile_persistedWrapper div {
width: 100%;
height: 100%;
}.mx_AppTileMenuBar {
margin: 0;
font-size: 0.75rem;
background-color: var(--cpd-color-bg-subtle-secondary);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
padding-top: 3px;
padding-bottom: 6px;
}.mx_AppTileMenuBar .mx_AppTileMenuBar_title {
line-height: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}.mx_AppTileMenuBar .mx_AppTileMenuBar_title .mx_WidgetAvatar {
margin-right: 12px;
}.mx_AppTileMenuBar .mx_AppTileMenuBar_title h1 {
font-size: inherit;
margin: 0;
}.mx_AppTileMenuBar .mx_AppTileMenuBar_title > :last-child {
margin-left: 9px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}.mx_AppTileMenuBar .mx_AppTileMenuBar_widgets {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}.mx_AppTileMenuBar .mx_AppTileMenuBar_widgets .mx_AppTileMenuBar_widgets_button {
--size: 24px; /* Size of the button. Its height and width values should be same */
margin: 0 4px;
position: relative;
height: 24px;
height: var(--size);
width: 24px;
width: var(--size);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}.mx_AppTileMenuBar .mx_AppTileMenuBar_widgets .mx_AppTileMenuBar_widgets_button:hover::after {
content: "";
position: absolute;
height: var(--size);
width: var(--size);
background-color: var(--cpd-color-alpha-gray-300);
border-radius: 50%;
left: 0;
top: 0;
}.mx_AppTileMenuBar .mx_AppTileMenuBar_widgets .mx_AppTileMenuBar_widgets_button .mx_Icon {
color: #91a1c0;
}/* Rules added to this selector style appTileBody generally */.mx_AppTileBody {
/* Apply to every variant of appTileBody */
border-radius: 8px;
}/* Note the loading spinner and the message next to it are not always included in mx_AppTileBody--loading */.mx_AppTileBody .mx_AppTileBody_fadeInSpinner {
/* place spinner and the message at the center of mx_AppTileBody */
height: 100%;
width: 100%;
font-weight: bold; /* message next to the spinner */
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
-webkit-animation-duration: 200ms;
animation-duration: 200ms;
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
-webkit-animation-name: mx_AppTileBody_fadeInSpinnerAnimation;
animation-name: mx_AppTileBody_fadeInSpinnerAnimation;
}.mx_AppTileBody.mx_AppTileBody--large,
.mx_AppTileBody.mx_AppTileBody--mini {
width: 100%;
overflow: hidden;
height: var(--AppTileBody-height);
}.mx_AppTileBody.mx_AppTileBody--large iframe, .mx_AppTileBody.mx_AppTileBody--mini iframe {
border: none;
width: 100%;
height: 100%;
}.mx_AppTileBody.mx_AppTileBody--large {
--AppTileBody-height: 100%;
background-color: var(--cpd-color-alpha-gray-300);
}.mx_AppTileBody.mx_AppTileBody--large iframe {
overflow: hidden;
padding: 0;
margin: 0;
display: block;
}.mx_AppTileBody.mx_AppTileBody--mini {
--AppTileBody-height: var(--AppTile_mini-height);
}.mx_AppTileBody.mx_AppTileBody--loading {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
height: 100%;
/* match bg of border so that the cut corners have the right fill */
background-color: var(--cpd-color-alpha-gray-300) !important;
}.mx_AppTileBody.mx_AppTileBody--loading iframe {
display: none;
}.mx_AppTileBody.mx_AppTileBody--call {
border-radius: 0px;
}/* const loadingElement */.mx_AppTileBody.mx_AppTileBody--call.mx_AppTileBody--mini {
border-radius: 8px;
}/* appTileBody is embedded to PersistedElement outside of mx_AppTile,
so rules to style appTileBody generally should not be included here. */.mx_AppTile .mx_AppTileBody--large,
.mx_AppTileFullWidth .mx_AppTileBody--large,
.mx_AppTile_mini .mx_AppTileBody--mini {
height: inherit;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}@-webkit-keyframes mx_AppTileBody_fadeInSpinnerAnimation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}@keyframes mx_AppTileBody_fadeInSpinnerAnimation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}.mx_Autocomplete {
position: absolute;
bottom: 0;
z-index: 1001;
width: 100%;
border: 1px solid transparent;
background: var(--cpd-color-bg-canvas-default);
border-bottom: none;
border-radius: 8px 8px 0 0;
overflow: clip;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-shadow: 0px -16px 32px rgba(0, 0, 0, 0.28);
box-shadow: 0px -16px 32px rgba(0, 0, 0, 0.28);
}.mx_Autocomplete_ProviderSection {
border-bottom: 1px solid transparent;
width: 100%;
}/* a "block" completion takes up a whole line */.mx_Autocomplete_Completion_block {
min-height: 34px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: var(--cpd-color-text-primary);
}.mx_Autocomplete_Completion_block * {
margin: 0 3px;
}.mx_Autocomplete_Completion_pill {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 2rem;
height: 2.125rem;
padding: 0.4rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: var(--cpd-color-text-primary);
}.mx_Autocomplete_Completion_pill > * {
margin-right: 0.3rem;
}/* styling for common completion elements */.mx_Autocomplete_Completion_subtitle {
font-style: italic;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}.mx_Autocomplete_Completion_description {
color: gray;
min-width: 150px;
}.mx_Autocomplete_Completion_container_pill {
margin: 12px;
height: 100%;
overflow-y: scroll;
}@container roomview (height >= 0px) {
.mx_Autocomplete_Completion_container_pill {
max-height: 40cqh;
}
}.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_title,
.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_subtitle,
.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_description {
/* Ellipsis for long names/subtitles/descriptions */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}.mx_Autocomplete_Completion.selected,
.mx_Autocomplete_Completion:hover {
background: #343a46;
outline: none;
}.mx_Autocomplete_provider_name {
margin: 12px;
color: var(--cpd-color-text-primary);
font-weight: 400;
opacity: 0.4;
}/*
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_AuxPanel {
min-width: 0px;
width: 100%;
margin: 0px auto;
overflow: auto;
}/*
Copyright 2019-2024 New Vector Ltd.
Copyright 2019 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_BasicMessageComposer {
/* These are set in Javascript */
--avatar-letter: "";
--avatar-background: unset;
--avatar-color: unset;
--placeholder: "";
position: relative;
}.mx_BasicMessageComposer .mx_BasicMessageComposer_inputEmpty > :first-child::before {
content: var(--placeholder);
color: var(--cpd-color-text-secondary);
width: 0;
height: 0;
overflow: visible;
display: inline-block;
pointer-events: none;
white-space: nowrap;
}@-webkit-keyframes visualbell {
from {
background-color: #800;
}
to {
background-color: var(--cpd-color-bg-canvas-default);
}
}@keyframes visualbell {
from {
background-color: #800;
}
to {
background-color: var(--cpd-color-bg-canvas-default);
}
}.mx_BasicMessageComposer.mx_BasicMessageComposer_input_error {
-webkit-animation: 0.2s visualbell;
animation: 0.2s visualbell;
}.mx_BasicMessageComposer .mx_BasicMessageComposer_input {
white-space: pre-wrap;
word-wrap: break-word;
outline: none;
overflow-x: hidden;
}/* navigated through in a single keypress */.mx_BasicMessageComposer .mx_BasicMessageComposer_input .caretNode {
-webkit-user-select: all;
-moz-user-select: all;
user-select: all;
}/* Force caret nodes to be selected in full so that they can be */.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill,
.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill,
.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_SpacePill {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-user-select: all;
-moz-user-select: all;
user-select: all;
position: relative;
cursor: inherit; /* We don't want indicate clickability */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill:hover, .mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill:hover, .mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_SpacePill:hover {
/* We don't want indicate clickability | To override the overriding of .markdown-body */
background-color: var(--cpd-color-bg-action-primary-rest) !important;
}/* avatar psuedo element */.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill::before, .mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill::before, .mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_SpacePill::before {
display: inline-block;
content: var(--avatar-letter);
width: 1rem;
min-width: 1rem; /* ensure the avatar is not compressed */
height: 1rem;
-webkit-margin-end: 0.24rem;
margin-inline-end: 0.24rem;
background: var(--avatar-background), var(--cpd-color-bg-canvas-default);
color: var(--avatar-color, var(--cpd-color-bg-canvas-default));
background-repeat: no-repeat;
background-size: 1rem;
border-radius: 1rem;
text-align: center;
font-weight: normal;
line-height: 1rem;
font-size: 0.6275rem;
}.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_disabled {
/* Ignore all user input to avoid accidentally triggering the composer */
pointer-events: none;
}.mx_BasicMessageComposer .mx_BasicMessageComposer_AutoCompleteWrapper {
position: relative;
height: 0;
}.mx_JoinRuleDialog .mx_JoinRuleDialogButtons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-column-gap: 5px;
-moz-column-gap: 5px;
column-gap: 5px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}/*
Copyright 2019-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_E2EIcon {
width: 16px;
height: 16px;
margin: 0 9px;
display: block;
}.mx_E2EIcon svg {
width: inherit;
height: inherit;
display: block;
}.mx_E2EIcon.mx_E2EIcon_inline {
display: inline-block;
}/*
Copyright 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_E2EIconView {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}.mx_E2EIconView_warning {
color: var(--cpd-color-icon-critical-primary);
}.mx_E2EIconView_verified {
color: var(--cpd-color-icon-success-primary);
}/*
Copyright 2019-2024 New Vector Ltd.
Copyright 2019 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_EditMessageComposer {
--EditMessageComposer-padding-inline: 3px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
max-width: 100%; /* disable overflow */
width: auto;
gap: 5px;
padding: 3px 3px;
padding: 3px var(--EditMessageComposer-padding-inline);
}.mx_EditMessageComposer .mx_BasicMessageComposer_input {
border-radius: 4px;
border: solid 1px transparent;
background-color: var(--cpd-color-bg-canvas-default);
max-height: 200px;
padding: 3px 6px;
}.mx_EditMessageComposer .mx_BasicMessageComposer_input:focus {
border-color: var(--cpd-color-border-interactive-primary);
}.mx_EditMessageComposer .mx_EditMessageComposer_buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap-reverse;
flex-flow: row wrap-reverse; /* display "Save" over "Cancel" */
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
gap: 5px;
-webkit-margin-start: auto;
margin-inline-start: auto;
}.mx_EditMessageComposer .mx_EditMessageComposer_buttons .mx_AccessibleButton {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-width: 100px; /* magic number to align the edge of the button with the input area */
}/*
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_EmojiButton {
position: relative;
cursor: pointer;
border-radius: 50%;
}.mx_EmojiButton svg {
color: var(--cpd-color-icon-tertiary);
}.mx_EmojiButton:hover {
background-color: var(--cpd-color-bg-subtle-secondary);
}.mx_EmojiButton:hover svg {
color: var(--cpd-color-icon-secondary);
}.mx_EmojiButton_highlight {
background: var(--cpd-color-bg-subtle-primary);
color: var(--cpd-color-icon-primary) !important;
}.mx_MessageComposer_wysiwyg .mx_EmojiButton {
position: relative;
cursor: pointer;
border-radius: 5px;
}.mx_MessageComposer_wysiwyg .mx_EmojiButton svg {
color: var(--cpd-color-icon-tertiary);
}.mx_MessageComposer_wysiwyg .mx_EmojiButton:hover {
background-color: var(--cpd-color-bg-subtle-secondary);
}.mx_MessageComposer_wysiwyg .mx_EmojiButton:hover svg {
color: var(--cpd-color-gray-800);
}/*
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_RoomView_body[data-layout="bubble"] .mx_RoomView_timeline,
.mx_RoomView_body[data-layout="bubble"] .mx_RoomView_statusArea,
.mx_RoomView_body[data-layout="bubble"] .mx_MessageComposer {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}.mx_EventTile[data-layout="bubble"],
.mx_GenericEventListSummary[data-layout="bubble"] {
--avatarSize: 32px;
--gutterSize: 11px;
--cornerRadius: 12px;
--maxWidth: 70%;
/* For both event tile and event list summary */
--EventTile_bubble-margin-inline-start: 49px;
--EventTile_bubble-margin-inline-end: 60px;
-webkit-margin-start: 49px;
margin-inline-start: 49px;
-webkit-margin-start: var(--EventTile_bubble-margin-inline-start);
margin-inline-start: var(--EventTile_bubble-margin-inline-start);
-webkit-margin-end: 60px;
margin-inline-end: 60px;
-webkit-margin-end: var(--EventTile_bubble-margin-inline-end);
margin-inline-end: var(--EventTile_bubble-margin-inline-end);
}.mx_EventTile[data-layout="bubble"] {
--EventTile_bubble_line-margin-inline-start: -9px;
--EventTile_bubble_line-margin-inline-end: -12px;
--EventTile_bubble_gap-inline: 5px;
}.mx_EventTile[data-layout="bubble"] .mx_MessageTimestamp {
width: auto;
width: initial; /* Cancel the default width */
max-width: 80px;
}.mx_EventTile[data-layout="bubble"] .mx_ThreadSummary {
clear: both;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}.mx_EventTile[data-layout="bubble"] .mx_EventTile_content {
margin-right: 0;
}.mx_EventTile[data-layout="bubble"]:not(.mx_EventTile_info) .mx_EventTile_avatar {
line-height: 0;
border: 4px solid var(--cpd-color-bg-canvas-default);
border-radius: 50%;
position: absolute;
top: 6px;
z-index: 9;
}.mx_EventTile[data-layout="bubble"]:not(.mx_EventTile_info) .mx_EventTile_avatar img {
-webkit-box-shadow: 0 0 0 3px var(--cpd-color-bg-canvas-default);
box-shadow: 0 0 0 3px var(--cpd-color-bg-canvas-default);
border-radius: 50%;
}.mx_EventTile[data-layout="bubble"].mx_EventTile_highlight .mx_EventTile_avatar {
border-color: #25271f;
}.mx_EventTile[data-layout="bubble"].mx_EventTile_highlight::before {
background-color: #25271f;
}.mx_EventTile[data-layout="bubble"]:hover .mx_EventTile_avatar {
border-color: var(--cpd-color-bg-subtle-secondary);
}/* For replies */.mx_EventTile[data-layout="bubble"] .mx_EventTile {
padding-top: 0;
}.mx_EventTile[data-layout="bubble"]::before {
content: "";
position: absolute;
top: -1px;
bottom: -1px;
left: calc(-1 * var(--EventTile_bubble-margin-inline-start));
right: calc(-1 * var(--EventTile_bubble-margin-inline-end));
z-index: -1;
border-radius: 4px;
}.mx_EventTile[data-layout="bubble"]:hover::before, .mx_EventTile[data-layout="bubble"].mx_EventTile_selected::before {
background: var(--cpd-color-bg-subtle-secondary);
}.mx_EventTile[data-layout="bubble"]:hover .mx_EventTile_avatar img, .mx_EventTile[data-layout="bubble"].mx_EventTile_selected .mx_EventTile_avatar img {
-webkit-box-shadow: 0 0 0 3px var(--cpd-color-bg-subtle-secondary);
box-shadow: 0 0 0 3px var(--cpd-color-bg-subtle-secondary);
}.mx_EventTile[data-layout="bubble"] .mx_DisambiguatedProfile,
.mx_EventTile[data-layout="bubble"] .mx_EventTile_line {
--EventBubbleTile_line-max-width: 70%;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
max-width: 70%;
max-width: var(--EventBubbleTile_line-max-width); /* Align message bubble and displayName */
line-height: 1.125rem; /* fixed line height to prevent emoji from being taller than text */
}/* other users profile on bubble layout */.mx_EventTile[data-layout="bubble"] > .mx_DisambiguatedProfile {
white-space: normal; /* display mxid */
}.mx_EventTile[data-layout="bubble"] > .mx_DisambiguatedProfile .mx_DisambiguatedProfile_displayName {
white-space: nowrap; /* truncate long display names */
-webkit-margin-end: 5px;
margin-inline-end: 5px;
/* For RTL displayName */
unicode-bidi: embed;
direction: ltr;
}.mx_EventTile[data-layout="bubble"] > .mx_DisambiguatedProfile .mx_DisambiguatedProfile_mxid {
-webkit-margin-start: 0;
margin-inline-start: 0; /* Align mxid with truncated displayName
inside mx_EventTile[data-layout="bubble"] */
}/* (on the main panel and the chat panel with a maximized widget) */.mx_EventTile[data-layout="bubble"] > .mx_DisambiguatedProfile,
.mx_EventTile[data-layout="bubble"] .mx_EventTile_senderDetails > .mx_DisambiguatedProfile {
position: relative;
top: -2px;
left: 2px;
font-size: 0.9375rem;
}/* inside mx_RoomView_MessageList, outside of mx_ReplyTile */.mx_EventTile[data-layout="bubble"] .mx_MessageActionBar {
top: -28px;
z-index: 9; /* above the avatar */
}.mx_EventTile[data-layout="bubble"] .mx_MediaBody {
/* leave space for the timestamp */
padding-right: 48px !important;
}.mx_EventTile[data-layout="bubble"] .mx_MImageBody .mx_MImageBody_thumbnail_container {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
min-height: calc(1.8rem + var(--gutterSize) + var(--gutterSize));
min-width: calc(1.8rem + var(--gutterSize) + var(--gutterSize));
}.mx_EventTile[data-layout="bubble"] .mx_LegacyCallEvent {
background-color: transparent;
background-color: initial;
border-style: solid;
border-width: 1px;
border-color: var(--cpd-color-gray-400);
}.mx_EventTile[data-layout="bubble"] .mx_EventTile_footer {
margin: var(--cpd-space-1-5x) 0;
margin-inline: var(--EventTile_bubble_line-margin-inline-start) var(--EventTile_bubble_line-margin-inline-end);
}.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_line {
border-bottom-right-radius: var(--cornerRadius);
}.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_line .mx_MImageBody .mx_MImageBody_thumbnail_container,
.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_line .mx_MImageBody::before,
.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_line .mx_MVideoBody .mx_MVideoBody_container,
.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_line .mx_MediaBody,
.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_line .mx_MLocationBody_map,
.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_line .mx_MBeaconBody {
border-bottom-right-radius: var(--cornerRadius) !important;
}.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_avatar {
left: -36px;
}.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar {
inset-inline-start: calc(100% - var(--MessageActionBar-size-box));
right: auto;
right: initial; /* Reset the default value */
}.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_ThreadSummary {
-webkit-margin-start: calc(-1 * var(--gutterSize));
margin-inline-start: calc(-1 * var(--gutterSize));
-webkit-margin-end: auto;
margin-inline-end: auto;
}.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_ReactionsRow,
.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_footer {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}.mx_EventTile[data-layout="bubble"][data-self="false"]{
--backgroundColor: var(--cpd-color-gray-300);
}.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line {
-webkit-margin-start: auto;
margin-inline-start: auto;
border-bottom-left-radius: var(--cornerRadius);
}.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line .mx_MImageBody .mx_MImageBody_thumbnail_container,
.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line .mx_MImageBody::before,
.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line .mx_MVideoBody .mx_MVideoBody_container,
.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line .mx_MediaBody,
.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line .mx_MLocationBody_map,
.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line .mx_MBeaconBody {
border-bottom-left-radius: var(--cornerRadius) !important;
}.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_sticker {
/* align timestamp with those inside bubbles */
margin-right: 32px;
}.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_ThreadSummary {
-webkit-margin-start: auto;
margin-inline-start: auto;
-webkit-margin-end: calc(-1 * var(--gutterSize));
margin-inline-end: calc(-1 * var(--gutterSize));
}.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_DisambiguatedProfile {
display: none;
}.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_ReplyTile .mx_DisambiguatedProfile {
display: block;
max-width: 100%;
}.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_footer {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_ReactionsRow {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_ReactionsRow > :last-child {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1; /* Moving the "add reaction button" before the reactions */
}.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_avatar {
top: -19px; /* height of the sender block */
right: -38px;
}.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_MediaBody {
background: var(--cpd-color-green-300);
}.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_MessageActionBar {
inset-inline-end: 0;
}.mx_EventTile[data-layout="bubble"][data-self="true"]{
--backgroundColor: var(--cpd-color-green-300);
}.mx_EventTile[data-layout="bubble"] .mx_EventTile_line {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 5px var(--EventTile_bubble_gap-inline);
margin-block: 0;
margin-inline: var(--EventTile_bubble_line-margin-inline-start) var(--EventTile_bubble_line-margin-inline-end);
border-top-left-radius: var(--cornerRadius);
border-top-right-radius: var(--cornerRadius);
/* noinspection CssReplaceWithShorthandSafely */
}/* in the DOM depending on the specific rendering context */.mx_EventTile[data-layout="bubble"] .mx_EventTile_line > a,
.mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp {
position: absolute;
padding: 4px 8px;
bottom: 0;
right: 0;
z-index: 3; /* above media and location share maps */
}/* the selector here is quite weird because timestamps can appear linked & unlinked and in different places *//* TODO: Use a common class name instead */.mx_EventTile[data-layout="bubble"] .mx_EventTile_line.mx_EventTile_mediaLine .mx_MFileBody,
.mx_EventTile[data-layout="bubble"] .mx_EventTile_line.mx_EventTile_mediaLine .mx_MAudioBody {
max-width: 100%; /* avoid overflow */
}.mx_EventTile[data-layout="bubble"] .mx_EventTile_line.mx_EventTile_mediaLine .mx_MVoiceMessageBody {
/* allow the event to be collapsed, this causes the waveform to get cropped */
min-width: 0;
}/* we put the timestamps for media (other than stickers) atop the media */.mx_EventTile[data-layout="bubble"] .mx_EventTile_line.mx_EventTile_mediaLine.mx_EventTile_image .mx_MessageTimestamp {
border-radius: 8px;
border-radius: var(--MBody-border-radius);
/* Hardcoded colours because it's the same on all themes */
background-color: rgb(0, 0, 0, 0.6);
color: #ffffff;
padding: 0px 4px 0px 4px;
}.mx_EventTile[data-layout="bubble"] .mx_EventTile_line.mx_EventTile_sticker > a,
.mx_EventTile[data-layout="bubble"] .mx_EventTile_line.mx_EventTile_sticker .mx_MessageActionBar + .mx_MessageTimestamp {
/* position timestamps for stickers to the right of the un-bubbled sticker */
right: auto;
right: initial;
left: 100%;
}.mx_EventTile[data-layout="bubble"] .mx_EventTile_line.mx_EventTile_sticker .mx_MStickerBody_wrapper {
padding: 0;
}.mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_MImageBody {
width: 100%;
}.mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_MImageBody .mx_MImageBody_thumbnail.mx_MImageBody_thumbnail--blurhash {
position: static;
position: initial;
}.mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_MImageBody .mx_MImageBody_thumbnail_container,
.mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_MVideoBody .mx_MVideoBody_container,
.mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_MediaBody {
border-radius: 0;
border-radius: initial;
border-top-left-radius: var(--cornerRadius);
border-top-right-radius: var(--cornerRadius);
}.mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_EventTile_e2eIcon {
-ms-flex-negative: 0;
flex-shrink: 0; /* keep it at full size */
/* Keep height equal to text for shield alignment, additional 2px because of 1px padding on text */
height: calc(1.125rem + 2px);
}.mx_EventTile[data-layout="bubble"]:not(.mx_EventTile_noBubble) .mx_EventTile_line:not(.mx_EventTile_mediaLine) {
/* make the top and bottom padding 1px smaller so that we can pad
.mx_EventTile_content by 1px */
/* to avoid anti-zalgo cutting off our larger than text emojis. */
padding: calc(var(--gutterSize) - 1px);
padding-right: 60px; /* space for the timestamp */
background: var(--backgroundColor);
}.mx_EventTile[data-layout="bubble"]:not(.mx_EventTile_noBubble) .mx_EventTile_line:not(.mx_EventTile_mediaLine) .mx_EventTile_content {
padding: 1px;
}.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="false"] .mx_EventTile_line {
border-top-left-radius: 0;
}.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="false"] .mx_EventTile_line .mx_MImageBody .mx_MImageBody_thumbnail_container,
.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="false"] .mx_EventTile_line .mx_MVideoBody .mx_MVideoBody_container,
.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="false"] .mx_EventTile_line .mx_MImageBody::before,
.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="false"] .mx_EventTile_line .mx_MediaBody,
.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="false"] .mx_EventTile_line .mx_MLocationBody_map,
.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="false"] .mx_EventTile_line .mx_MBeaconBody {
border-top-left-radius: 0;
}.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="false"] .mx_EventTile_line {
border-bottom-left-radius: var(--cornerRadius);
}.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="false"] .mx_EventTile_line .mx_MImageBody .mx_MImageBody_thumbnail_container,
.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="false"] .mx_EventTile_line .mx_MVideoBody .mx_MVideoBody_container,
.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="false"] .mx_EventTile_line .mx_MImageBody::before,
.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="false"] .mx_EventTile_line .mx_MediaBody,
.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="false"] .mx_EventTile_line .mx_MLocationBody_map,
.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="false"] .mx_EventTile_line .mx_MBeaconBody {
border-bottom-left-radius: var(--cornerRadius);
}.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="true"] .mx_EventTile_line {
border-top-right-radius: 0;
}.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="true"] .mx_EventTile_line .mx_MImageBody .mx_MImageBody_thumbnail_container,
.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="true"] .mx_EventTile_line .mx_MVideoBody .mx_MVideoBody_container,
.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="true"] .mx_EventTile_line .mx_MImageBody::before,
.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="true"] .mx_EventTile_line .mx_MediaBody,
.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="true"] .mx_EventTile_line .mx_MLocationBody_map,
.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation[data-self="true"] .mx_EventTile_line .mx_MBeaconBody {
border-top-right-radius: 0;
}.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="true"] .mx_EventTile_line {
border-bottom-right-radius: var(--cornerRadius);
}.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="true"] .mx_EventTile_line .mx_MImageBody .mx_MImageBody_thumbnail_container,
.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="true"] .mx_EventTile_line .mx_MVideoBody .mx_MVideoBody_container,
.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="true"] .mx_EventTile_line .mx_MImageBody::before,
.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="true"] .mx_EventTile_line .mx_MediaBody,
.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="true"] .mx_EventTile_line .mx_MLocationBody_map,
.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection[data-self="true"] .mx_EventTile_line .mx_MBeaconBody {
border-bottom-right-radius: var(--cornerRadius);
}.mx_EventTile[data-layout="bubble"].mx_EventTile_noSender .mx_EventTile_avatar {
top: -19px;
}.mx_EventTile[data-layout="bubble"][data-has-reply="true"] > .mx_EventTile_line {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}.mx_EventTile[data-layout="bubble"][data-has-reply="true"] .mx_ReplyChain .mx_EventTile_reply {
max-width: 90%;
padding: 0;
}.mx_EventTile[data-layout="bubble"][data-has-reply="true"] .mx_ReplyChain .mx_EventTile_reply > a,
.mx_EventTile[data-layout="bubble"][data-has-reply="true"] .mx_ReplyChain .mx_EventTile_reply .mx_MessageActionBar + .mx_MessageTimestamp {
display: none !important;
}.mx_EventTile[data-layout="bubble"][data-has-reply="true"] .mx_ReplyChain .mx_EventTile {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--gutterSize);
}.mx_EventTile[data-layout="bubble"][data-has-reply="true"] .mx_ReplyChain .mx_EventTile .mx_EventTile_avatar {
position: static;
}.mx_EventTile[data-layout="bubble"][data-has-reply="true"] .mx_ReplyChain .mx_EventTile .mx_DisambiguatedProfile {
display: none;
}.mx_EventTile[data-layout="bubble"] .mx_MPollBody {
width: 550px; /* to prevent timestamp overlapping summary text */
max-width: 100%; /* prevent overflowing a reply tile */
}.mx_EventTile[data-layout="bubble"] .mx_MPollBody .mx_MPollBody_totalVotes {
/* align summary text with corner timestamp */
padding: 4px 0;
}.mx_EventTile[data-layout="bubble"].mx_EventTile_bad:hover::before {
background: transparent;
}/* Special layout scenario for "Unable To Decrypt (UTD)" events */.mx_EventTile[data-layout="bubble"].mx_EventTile_bad .mx_EventTile_line {
display: grid;
grid-template:
"reply reply" auto
"shield body" auto
/ auto 1fr;
}.mx_EventTile[data-layout="bubble"].mx_EventTile_bad .mx_EventTile_line .mx_UnknownBody,
.mx_EventTile[data-layout="bubble"].mx_EventTile_bad .mx_EventTile_line .mx_ReplyChain_wrapper,
.mx_EventTile[data-layout="bubble"].mx_EventTile_bad .mx_EventTile_line .mx_ViewSourceEvent {
min-width: 0; /* Prevent a grid blowout */
}.mx_EventTile[data-layout="bubble"].mx_EventTile_bad .mx_EventTile_line .mx_EventTile_e2eIcon {
grid-area: shield;
margin-top: auto;
margin-bottom: auto;
}.mx_EventTile[data-layout="bubble"].mx_EventTile_bad .mx_EventTile_line .mx_UnknownBody,
.mx_EventTile[data-layout="bubble"].mx_EventTile_bad .mx_EventTile_line .mx_DecryptionFailureBody {
grid-area: body;
}.mx_EventTile[data-layout="bubble"].mx_EventTile_bad .mx_EventTile_line .mx_ReplyChain_wrapper {
grid-area: reply;
}/* "Unable To Decrypt" layout for hidden events */.mx_EventTile[data-layout="bubble"].mx_EventTile_bad.mx_EventTile_info .mx_EventTile_line {
gap: 0 9px; /* 9px: margin value of E2E icon */
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
grid-template:
"shield source" auto
/ auto 1fr;
}.mx_EventTile[data-layout="bubble"].mx_EventTile_bad.mx_EventTile_info .mx_EventTile_line .mx_ViewSourceEvent {
grid-area: source;
}.mx_EventTile[data-layout="bubble"] .mx_MTextBody {
max-width: 100%;
}.mx_EventTile[data-layout="bubble"] .mx_LegacyCallEvent_wrapper,
.mx_EventTile[data-layout="bubble"] .mx_CallEvent_wrapper {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}.mx_EventTile.mx_EventTile_noBubble[data-layout="bubble"] {
--backgroundColor: transparent;
}.mx_EventTile.mx_EventTile_noBubble[data-layout="bubble"] .mx_EventTile_line.mx_EventTile_emote {
padding-right: 60px; /* align with bubbles text */
font-style: italic;
}.mx_EventTile.mx_EventTile_noBubble[data-layout="bubble"] .mx_EventTile_line.mx_EventTile_emote > a {
/* timestamp anchor wrapper */
-ms-flex-item-align: center;
align-self: center;
bottom: auto;
bottom: initial;
top: auto;
top: initial;
font-style: normal; /* undo italic above */
}.mx_EventTile.mx_EventTile_noBubble[data-layout="bubble"] .mx_EventTile_line.mx_EventTile_emote .mx_MEmoteBody {
padding: 4px 0;
}.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"] .mx_EventTile_line > a, .mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"] .mx_EventTile_line > a {
/* hide this timestamp as the tile will render its own */
display: none;
}.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"],
.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"],
.mx_EventTile.mx_EventTile_info[data-layout="bubble"] {
padding: 5px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"] .mx_EventTile_line,
.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"] .mx_EventTile_info,
.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"] .mx_EventTile_line,
.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"] .mx_EventTile_info,
.mx_EventTile.mx_EventTile_info[data-layout="bubble"] .mx_EventTile_line,
.mx_EventTile.mx_EventTile_info[data-layout="bubble"] .mx_EventTile_info {
min-width: 100%;
/* Preserve alignment with left edge of text in bubbles */
margin: 0;
}.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"],
.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"],
.mx_EventTile.mx_EventTile_info[data-layout="bubble"],
.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="false"] {
--backgroundColor: transparent;
--gutterSize: 0;
}.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"] .mx_EventTile_avatar, .mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"] .mx_EventTile_avatar, .mx_EventTile.mx_EventTile_info[data-layout="bubble"] .mx_EventTile_avatar, .mx_GenericEventListSummary[data-layout="bubble"][data-expanded="false"] .mx_EventTile_avatar {
position: static;
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
-webkit-margin-end: var(--EventTile_bubble_gap-inline);
margin-inline-end: var(--EventTile_bubble_gap-inline); /* Same spacing between E2E icon and a hidden event */
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"] .mx_EventTile_e2eIcon, .mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"] .mx_EventTile_e2eIcon, .mx_EventTile.mx_EventTile_info[data-layout="bubble"] .mx_EventTile_e2eIcon, .mx_GenericEventListSummary[data-layout="bubble"][data-expanded="false"] .mx_EventTile_e2eIcon {
-webkit-margin-start: 0;
margin-inline-start: 0; /* mx_EventTile_avatar has margin-inline-end, so margin is not needed here */
-ms-flex-item-align: center;
align-self: center;
}.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"] .mx_EventTile_line > a,
.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp,
.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"] .mx_EventTile_line > a,
.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp,
.mx_EventTile.mx_EventTile_info[data-layout="bubble"] .mx_EventTile_line > a,
.mx_EventTile.mx_EventTile_info[data-layout="bubble"] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp,
.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="false"] .mx_EventTile_line > a,
.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="false"] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp {
right: auto;
left: -77px;
bottom: auto;
bottom: initial;
-ms-flex-item-align: center;
align-self: center;
}.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"] .mx_EventTile_line > a .mx_MessageTimestamp,
.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"] .mx_EventTile_line > a.mx_MessageTimestamp,
.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp .mx_MessageTimestamp,
.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp.mx_MessageTimestamp,
.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"] .mx_EventTile_line > a .mx_MessageTimestamp,
.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"] .mx_EventTile_line > a.mx_MessageTimestamp,
.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp .mx_MessageTimestamp,
.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp.mx_MessageTimestamp,
.mx_EventTile.mx_EventTile_info[data-layout="bubble"] .mx_EventTile_line > a .mx_MessageTimestamp,
.mx_EventTile.mx_EventTile_info[data-layout="bubble"] .mx_EventTile_line > a.mx_MessageTimestamp,
.mx_EventTile.mx_EventTile_info[data-layout="bubble"] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp .mx_MessageTimestamp,
.mx_EventTile.mx_EventTile_info[data-layout="bubble"] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp.mx_MessageTimestamp,
.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="false"] .mx_EventTile_line > a .mx_MessageTimestamp,
.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="false"] .mx_EventTile_line > a.mx_MessageTimestamp,
.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="false"] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp .mx_MessageTimestamp,
.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="false"] .mx_EventTile_line .mx_MessageActionBar + .mx_MessageTimestamp.mx_MessageTimestamp {
vertical-align: middle;
}.mx_GenericEventListSummary[data-layout="bubble"] .mx_EventTile.mx_EventTile_info .mx_EventTile_line {
/* Avoid overflow of event info by cancelling width settings */
width: 100%;
min-width: 0;
max-width: 100%;
}/* increase margin between ELS and the next Event to not have our user avatar overlap the expand/collapse button */.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="false"] + .mx_EventTile[data-layout="bubble"][data-self="true"] {
margin-top: 20px;
}.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="true"] .mx_EventTile_info {
padding: 2px 0;
margin-right: 0;
}.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="true"] .mx_EventTile_info .mx_MessageActionBar {
/* Reset .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar */
inset-inline-start: initial;
inset-inline-end: 48px; /* align with that of right-column bubbles */
}.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="true"] .mx_EventTile_info .mx_ReadReceiptGroup {
/* match alignment to RRs of chat bubbles */
inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + 60px);
}.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="true"] .mx_EventTile_info::before {
inset-inline-end: 0; /* match alignment of the hover background to that of chat bubbles */
}.mx_EventTile_tileError[data-layout="bubble"] .mx_EventTile_line {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; /* restore the centering */
}/*
* Copyright 2024 New Vector Ltd.
* Copyright 2024 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_EventPreview {
font: var(--cpd-font-body-sm-regular);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}.mx_EventPreview .mx_EventPreview_prefix {
font: var(--cpd-font-body-sm-semibold);
}/*
Copyright 2024 New Vector Ltd.
Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
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_EventTile {
--EventTile_content-margin-inline-end: 34px;
--EventTile_group_line-spacing-block-start: 1px;
--EventTile_group_line-spacing-block-end: 3px;
--EventTile_group_line-spacing-inline-start: 64px;
--EventTile_group_line-line-height: 1.375rem;
--EventTile_ThreadSummary-line-height: calc(2 * 0.75rem);
-ms-flex-negative: 0;
flex-shrink: 0;
max-width: 100%;
clear: both; /* TODO: check if this is necessary */
padding-top: 18px;
position: relative;
}.mx_EventTile.mx_EventTile_info {
font-size: var(--cpd-font-size-body-sm);
color: var(--cpd-color-text-secondary);
}.mx_EventTile .mx_EventTile_avatar {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}.mx_EventTile .mx_EventTile_body {
overflow-y: hidden;
text-align: start;
}.mx_EventTile .mx_ReadReceiptGroup_container svg {
display: inline-block;
width: 16px;
height: 16px;
color: var(--cpd-color-icon-tertiary);
}.mx_EventTile .mx_EventTile_content.mx_EditMessageComposer,
.mx_EventTile .mx_EventTile_content.mx_EditWysiwygComposer {
/* Make sure the formatting bar is visible */
overflow: visible;
}.mx_EventTile .mx_EventTile_searchHighlight {
background-color: var(--cpd-color-text-action-accent);
color: #f4f6fa;
border-radius: 5px;
padding-inline: 2px;
cursor: pointer;
}.mx_EventTile .mx_EventTile_searchHighlight a {
background-color: var(--cpd-color-text-action-accent);
color: #f4f6fa;
}.mx_EventTile .mx_MessageTimestamp_lateIcon {
position: absolute;
right: 100%;
top: var(--cpd-space-1x);
color: var(--cpd-color-text-secondary);
}.mx_EventTile .mx_EventTileBubble {
margin-block: 10px;
margin-block: var(--EventTileBubble_margin-block);
min-width: 100px;
}.mx_EventTile .mx_MImageBody .mx_MImageBody_thumbnail_container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; /* on every layout */
}.mx_EventTile .mx_DisambiguatedProfile {
color: var(--cpd-color-text-primary);
font: var(--cpd-font-body-md-regular);
display: inline-block;
padding-bottom: 0px;
padding-top: 0px;
}.mx_EventTile .mx_ReactionsRow {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: wrap;
flex-flow: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 4px;
}.mx_EventTile .mx_ReplyChain--expanded .mx_EventTile_body {
/* !important needed to override .mx_ReplyTile .mx_EventTile_content .mx_EventTile_body */
display: block !important;
overflow-y: scroll;
}.mx_EventTile .mx_ReplyChain--expanded .mx_EventTile_collapsedCodeBlock {
/* !important needed due to .mx_ReplyTile .mx_EventTile_content .mx_EventTile_pre_container > pre */
display: block !important;
}.mx_RoomView_searchResultsPanel .mx_EventTile.mx_EventTile_contextual {
opacity: 0.4;
}.mx_EventTile.mx_EventTile_bubbleContainer {
display: grid;
grid-template-columns: 1fr 100px;
}.mx_EventTile.mx_EventTile_bubbleContainer .mx_EventTile_line {
margin-right: 0;
grid-column: 1 / 3;
padding: 0 !important; /* override default padding of mx_EventTile_line so that we can be centered */
}.mx_EventTile.mx_EventTile_bubbleContainer .mx_EventTile_msgOption {
grid-column: 2;
}.mx_EventTile.mx_EventTile_bubbleContainer:hover .mx_EventTile_line {
/* To avoid bubble events being highlighted */
background-color: inherit !important;
}.mx_EventTile.mx_EventTile_isEditing .mx_MessageTimestamp {
visibility: hidden;
}.mx_EventTile[data-layout="irc"],
.mx_EventTile[data-layout="group"] {
--selected-message-border-width: 4px;
/* TODO: adjust the values for IRC layout */
--EventTile-box-shadow-offset-x: calc(50px + var(--selected-message-border-width));
--EventTile-box-shadow-spread-radius: -50px;
/* this is used for the tile for the event which is selected via the URL. */
}.mx_EventTile[data-layout="irc"] .mx_EventTile_e2eIcon, .mx_EventTile[data-layout="group"] .mx_EventTile_e2eIcon {
position: absolute;
}.mx_EventTile[data-layout="irc"] .mx_MImageBody .mx_MImageBody_thumbnail_container, .mx_EventTile[data-layout="group"] .mx_MImageBody .mx_MImageBody_thumbnail_container {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
min-height: 2.75rem;
min-width: 2.75rem;
}.mx_EventTile[data-layout="irc"] .mx_EventTile_line,
.mx_EventTile[data-layout="irc"] .mx_EventTile_reply,
.mx_EventTile[data-layout="group"] .mx_EventTile_line,
.mx_EventTile[data-layout="group"] .mx_EventTile_reply {
position: relative;
border-radius: 8px;
}.mx_EventTile[data-layout="irc"] .mx_EventTile_reply, .mx_EventTile[data-layout="group"] .mx_EventTile_reply {
margin-right: 10px;
}.mx_EventTile[data-layout="irc"] .mx_EventTile_msgOption, .mx_EventTile[data-layout="group"] .mx_EventTile_msgOption {
float: right;
text-align: right;
position: relative;
width: 90px;
/* Hack to stop the height of this pushing the messages apart.
Replaces margin-top: -6px. This interacts better with a read
marker being in between. Content overflows. */
height: 1px;
}.mx_EventTile[data-layout="irc"].mx_EventTile_highlight .mx_EventTile_line, .mx_EventTile[data-layout="irc"].mx_EventTile_highlight .markdown-body .mx_EventTile_line, .mx_EventTile[data-layout="group"].mx_EventTile_highlight .mx_EventTile_line, .mx_EventTile[data-layout="group"].mx_EventTile_highlight .markdown-body .mx_EventTile_line {
background-color: #25271f;
}.mx_EventTile[data-layout="irc"]:focus-visible:focus-within .mx_EventTile_line, .mx_EventTile[data-layout="irc"].mx_EventTile_actionBarFocused .mx_EventTile_line, .mx_EventTile[data-layout="irc"].mx_EventTile_isEditing .mx_EventTile_line, .mx_EventTile[data-layout="irc"].mx_EventTile_selected .mx_EventTile_line, .mx_EventTile[data-layout="group"]:focus-visible:focus-within .mx_EventTile_line, .mx_EventTile[data-layout="group"].mx_EventTile_actionBarFocused .mx_EventTile_line, .mx_EventTile[data-layout="group"].mx_EventTile_isEditing .mx_EventTile_line, .mx_EventTile[data-layout="group"].mx_EventTile_selected .mx_EventTile_line {
background-color: var(--cpd-color-bg-subtle-secondary);
}.mx_EventTile[data-layout="irc"].mx_EventTile_isEditing > .mx_EventTile_line, .mx_EventTile[data-layout="irc"].mx_EventTile_selected > .mx_EventTile_line, .mx_EventTile[data-layout="group"].mx_EventTile_isEditing > .mx_EventTile_line, .mx_EventTile[data-layout="group"].mx_EventTile_selected > .mx_EventTile_line {
/* TODO: ultimately we probably want some transition on here. */
-webkit-box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius)
var(--cpd-color-bg-action-primary-rest);
box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius)
var(--cpd-color-bg-action-primary-rest);
}.mx_EventTile[data-layout="irc"].mx_EventTile_info .mx_EventTile_e2eIcon, .mx_EventTile[data-layout="group"].mx_EventTile_info .mx_EventTile_e2eIcon {
top: 0;
}.mx_EventTile[data-layout="irc"].mx_EventTile_continuation .mx_EventTile_line, .mx_EventTile[data-layout="group"].mx_EventTile_continuation .mx_EventTile_line {
clear: both;
}.mx_EventTile[data-layout="irc"]:hover .mx_EventTile_line, .mx_EventTile[data-layout="group"]:hover .mx_EventTile_line {
background-color: var(--cpd-color-bg-subtle-secondary);
}.mx_EventTile[data-layout="bubble"] .mx_EventTileBubble, .mx_EventTile[data-layout="group"] .mx_EventTileBubble {
margin-inline: auto;
}.mx_EventTile[data-layout="bubble"] .mx_ReplyChain, .mx_EventTile[data-layout="group"] .mx_ReplyChain {
margin-bottom: 8px;
}.mx_EventTile[data-layout="irc"] {
--EventTile_irc_line-padding-block: 1px;
/* add --right-padding value of MessageTimestamp only */
/* stylelint-disable-next-line declaration-colon-space-after */
--EventTile_irc_line_info-margin-inline-start: calc(
var(--name-width) + var(--icon-width) + 1 * var(--right-padding)
);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
padding-top: 0;
}.mx_EventTile[data-layout="irc"] .mx_MessageTimestamp {
min-width: 46px;
min-width: var(--MessageTimestamp-width); /* ensure space for EventTile without timestamp */
text-align: right;
}.mx_EventTile[data-layout="irc"] > * {
margin-right: var(--right-padding);
}.mx_EventTile[data-layout="irc"] .mx_EventTile_avatar,
.mx_EventTile[data-layout="irc"] .mx_EventTile_e2eIcon {
height: 1.125rem;
height: var(--irc-line-height);
}.mx_EventTile[data-layout="irc"] .mx_EventTile_avatar,
.mx_EventTile[data-layout="irc"] .mx_DisambiguatedProfile,
.mx_EventTile[data-layout="irc"] .mx_EventTile_e2eIcon,
.mx_EventTile[data-layout="irc"] .mx_EventTile_msgOption {
-ms-flex-negative: 0;
flex-shrink: 0;
}.mx_EventTile[data-layout="irc"] .mx_EventTile_avatar {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
/* Need to use important to override the js calculated values. */
}.mx_EventTile[data-layout="irc"] .mx_EventTile_avatar > .mx_BaseAvatar,
.mx_EventTile[data-layout="irc"] .mx_EventTile_avatar > .mx_BaseAvatar > * {
font-size: 0.625rem !important;
line-height: calc(0.9375rem - 2px) !important;
}.mx_EventTile[data-layout="irc"] .mx_DisambiguatedProfile {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
width: var(--name-width);
-webkit-margin-end: 0;
margin-inline-end: 0; /* override mx_EventTile > * */
}.mx_EventTile[data-layout="irc"] .mx_DisambiguatedProfile > .mx_DisambiguatedProfile_displayName {
width: 100%;
text-align: end;
overflow: hidden;
text-overflow: ellipsis;
}.mx_EventTile[data-layout="irc"] .mx_DisambiguatedProfile > .mx_DisambiguatedProfile_mxid {
visibility: collapse;
margin-left: 0; /* Override the inherited margin. */
padding: 0 5px;
}.mx_EventTile[data-layout="irc"] .mx_DisambiguatedProfile:hover {
overflow: visible;
z-index: 10;
}.mx_EventTile[data-layout="irc"] .mx_DisambiguatedProfile:hover > .mx_DisambiguatedProfile_displayName {
overflow: visible;
display: inline;
background-color: var(--cpd-color-bg-subtle-secondary);
border-radius: 8px 0 0 8px;
padding-right: 8px;
}.mx_EventTile[data-layout="irc"] .mx_DisambiguatedProfile:hover > .mx_DisambiguatedProfile_mxid {
visibility: visible;
opacity: 1;
background-color: var(--cpd-color-bg-subtle-secondary);
}.mx_EventTile[data-layout="irc"] .mx_EventTile_e2eIcon {
padding: 0;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
background-position: center;
}.mx_EventTile[data-layout="irc"] .mx_EventTile_line .mx_EventTile_e2eIcon,
.mx_EventTile[data-layout="irc"] .mx_EventTile_line .mx_TextualEvent,
.mx_EventTile[data-layout="irc"] .mx_EventTile_line .mx_ViewSourceEvent,
.mx_EventTile[data-layout="irc"] .mx_EventTile_line .mx_MTextBody {
/* add a 1px padding top and bottom because our larger
emoji font otherwise gets cropped by anti-zalgo */
padding: var(--EventTile_irc_line-padding-block) 0;
}.mx_EventTile[data-layout="irc"] .mx_EventTile_line .mx_EventTile_e2eIcon,
.mx_EventTile[data-layout="irc"] .mx_EventTile_line .mx_TextualEvent,
.mx_EventTile[data-layout="irc"] .mx_EventTile_line .mx_MTextBody {
display: inline-block;
}.mx_EventTile[data-layout="irc"] .mx_EventTile_line .mx_ReplyTile .mx_MTextBody {
display: -webkit-box; /* Enable -webkit-line-clamp */
}.mx_EventTile[data-layout="irc"] .mx_EventTile_line,
.mx_EventTile[data-layout="irc"] .mx_EventTile_reply {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
min-width: 0;
}.mx_EventTile[data-layout="irc"] .mx_EventTile_reply {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
}.mx_EventTile[data-layout="irc"] .mx_EventTile_msgOption {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}.mx_EventTile[data-layout="irc"] .mx_EventTile_msgOption .mx_ReadReceiptGroup {
inset-block-start: -0.3rem; /* (var(--irc-line-height) - avatar height) / 2 */
}.mx_EventTile[data-layout="irc"] .mx_ReplyChain {
margin: 0;
}.mx_EventTile[data-layout="irc"] .mx_EditMessageComposer_buttons {
position: relative;
}.mx_EventTile[data-layout="irc"] .mx_EventTileBubble {
position: relative;
left: var(--EventTile_irc_line_info-margin-inline-start);
}.mx_EventTile[data-layout="irc"] .mx_EventTileBubble.mx_cryptoEvent {
left: auto;
left: initial;
}.mx_EventTile[data-layout="irc"] .mx_ReplyTile .mx_EventTileBubble {
left: auto;
left: initial; /* Cancel the value specified above for the tile inside ReplyTile */
}.mx_EventTile[data-layout="irc"].mx_EventTile_isEditing > .mx_EventTile_line .mx_EditMessageComposer {
/* add space for the stroke on box-shadow */
-webkit-padding-start: calc(
var(--selected-message-border-width) + var(--EditMessageComposer-padding-inline)
);
padding-inline-start: calc(
var(--selected-message-border-width) + var(--EditMessageComposer-padding-inline)
);
}.mx_EventTile[data-layout="irc"].mx_EventTile_info .mx_EventTile_avatar {
left: var(--EventTile_irc_line_info-margin-inline-start);
top: 0;
margin-right: var(--right-padding);
padding-block: var(--EventTile_irc_line-padding-block);
}.mx_EventTile[data-layout="irc"].mx_EventTile_info .mx_EventTile_line {
-webkit-margin-start: var(--EventTile_irc_line_info-margin-inline-start);
margin-inline-start: var(--EventTile_irc_line_info-margin-inline-start);
}.mx_EventTile[data-layout="irc"].mx_EventTile_info .mx_ViewSourceEvent,
.mx_EventTile[data-layout="irc"].mx_EventTile_info .mx_TextualEvent {
line-height: 1.125rem;
line-height: var(--irc-line-height);
}.mx_EventTile[data-layout="irc"].mx_EventTile_emote .mx_EventTile_avatar {
/* add --right-padding value of MessageTimestamp only */
margin-left: calc(var(--name-width) + var(--icon-width) + 1 * var(--right-padding));
}.mx_EventTile[data-layout="irc"] .mx_EventTile_footer {
margin: var(--cpd-space-1-5x) 0;
}.mx_EventTile[data-layout="group"] .mx_EventTile_avatar {
top: 14px;
left: 8px;
}.mx_EventTile[data-layout="group"] .mx_EventTile_line,
.mx_EventTile[data-layout="group"] .mx_EventTile_reply {
padding-top: var(--EventTile_group_line-spacing-block-start);
padding-bottom: var(--EventTile_group_line-spacing-block-end);
padding-left: var(--EventTile_group_line-spacing-inline-start);
line-height: var(--EventTile_group_line-line-height);
}.mx_EventTile[data-layout="group"] .mx_EventTile_e2eIcon {
inset: 0 0 0 44px;
/* Keep height equal to text for alignment */
height: var(--EventTile_group_line-line-height);
margin: 1px;
}.mx_EventTile[data-layout="group"] .mx_EventTile_msgOption {
-webkit-margin-end: 10px;
margin-inline-end: 10px;
}.mx_EventTile[data-layout="group"] .mx_EventTile_msgOption .mx_ReadReceiptGroup {
/* This aligns the avatar with the last line of the */
/* message. We want to move it one line up */
/* See .mx_EventTile[data-layout=group] .mx_EventTile_line in _EventTile.scss */
inset-block-start: calc(-1.375rem - 3px);
}.mx_EventTile[data-layout="group"] .mx_MessageTimestamp {
position: absolute;
left: 0;
text-align: center;
}.mx_EventTile[data-layout="group"] .mx_ThreadSummary,
.mx_EventTile[data-layout="group"] .mx_ThreadSummary_icon {
margin-left: 64px;
}.mx_EventTile[data-layout="group"] .mx_EventTile_footer {
margin: var(--cpd-space-1x) var(--EventTile_group_line-spacing-inline-start);
}.mx_EventTile[data-layout="group"] > .mx_DisambiguatedProfile {
line-height: 1.25rem;
margin-left: 64px;
max-width: calc(100% - 64px);
}.mx_EventTile[data-layout="group"] > .mx_EventTile_avatar {
position: absolute;
z-index: 9;
}.mx_RoomView_timeline_rr_enabled .mx_EventTile[data-layout="group"] {
/* on ELS we need the margin to allow interaction with the expand/collapse button */
/* which is normally in the RR gutter */
}.mx_RoomView_timeline_rr_enabled .mx_EventTile[data-layout="group"] .mx_ThreadSummary,
.mx_RoomView_timeline_rr_enabled .mx_EventTile[data-layout="group"] .mx_ThreadSummary_icon,
.mx_RoomView_timeline_rr_enabled .mx_EventTile[data-layout="group"] .mx_EventTile_line {
margin-right: 80px;
min-height: 0.875rem;
}.mx_RoomView_timeline_rr_enabled .mx_EventTile[data-layout="group"] .mx_ThreadSummary {
/* leave space on both left & right gutters */
max-width: min(calc(100% - 64px - 80px), 600px);
}.mx_EventTile[data-layout="group"].mx_EventTile_continuation {
padding-top: 0;
}.mx_EventTile[data-layout="group"].mx_EventTile_info {
padding-top: 0;
}.mx_EventTile[data-layout="group"].mx_EventTile_info .mx_EventTile_avatar,
.mx_EventTile[data-layout="group"].mx_EventTile_info .mx_EventTile_e2eIcon {
line-height: 1;
margin: 3px 0 2px;
}.mx_EventTile[data-layout="group"].mx_EventTile_info .mx_EventTile_avatar {
top: auto;
top: initial;
inset-inline-start: 64px;
height: 14px;
}.mx_EventTile[data-layout="group"].mx_EventTile_info .mx_EventTile_line {
padding-block: 3px 2px;
/* 20px: avatar area */
-webkit-padding-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px);
padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px);
}.mx_EventTile[data-layout="group"].mx_EventTile_info .mx_EventTile_line .mx_MessageTimestamp {
top: 0;
}.mx_EventTile[data-layout="group"].mx_EventTile_info.mx_EventTile_selected .mx_EventTile_line {
/* TODO: check if this would be necessary; */
-webkit-padding-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px);
padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px);
}.mx_EventTile[data-layout="bubble"] {
/* Other half of the gutter is provided by margin-bottom on the last tile
of the section */
margin-top: calc(var(--gutterSize) / 2);
margin-left: var(--EventTile_bubble-margin-inline-start);
/* Reset default values. TODO: remove */
max-width: none;
max-width: initial;
padding-top: 0;
}.mx_EventTile[data-layout="bubble"] .mx_EventTile_msgOption .mx_ReadReceiptGroup {
position: absolute;
inset-block-start: auto;
/* as close to right gutter without clipping as possible */
inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end));
/* (EventTileLine.line-height - ReadReceiptGroup.height) / 2 */
/* this centers the ReadReceiptGroup if we’ve got a single line */
inset-block-end: calc((1.125rem - 24px) / 2);
}.mx_EventTile[data-layout="bubble"] .mx_EventTileBubble {
/* Timestamps are inside the tile, so the width can be less constrained */
max-width: 600px;
}.mx_EventTile[data-layout="bubble"].mx_EventTile_continuation {
margin-top: 2px;
}.mx_EventTile[data-layout="bubble"].mx_EventTile_lastInSection {
/* Other half of the gutter is provided by margin-top on the first
tile of the section */
margin-bottom: calc(var(--gutterSize) / 2);
}.mx_GenericEventListSummary[data-layout="irc"] .mx_EventTile_line .mx_RedactedBody, .mx_GenericEventListSummary[data-layout="group"] .mx_EventTile_line .mx_RedactedBody {
line-height: 1; /* remove spacing between lines */
}/* Apply only collapsed events block */.mx_GenericEventListSummary[data-layout="irc"] > .mx_EventTile_line {
/* add --right-padding value of MessageTimestamp and avatar only */
/* stylelint-disable-next-line declaration-colon-space-after */
padding-left: calc(
var(--name-width) + var(--icon-width) + 46px + 2 * var(--right-padding)
);
padding-left: calc(
var(--name-width) + var(--icon-width) + var(--MessageTimestamp-width) + 2 * var(--right-padding)
);
}.mx_GenericEventListSummary[data-layout="group"] .mx_EventTile_line {
padding-left: 64px;
}.mx_GenericEventListSummary[data-layout="group"] .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
/* override padding-left $left-gutter */
-webkit-padding-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px);
padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px);
}.mx_EventTile_content {
/*
all the overflow-y: hidden; are to trap Zalgos -
but they introduce an implicit overflow-x: auto.
so make that explicitly hidden too to avoid random
horizontal scrollbars occasionally appearing, like in
https://github.com/vector-im/vector-web/issues/1154
*/
overflow-y: hidden;
overflow-x: hidden;
margin-right: var(--EventTile_content-margin-inline-end);
}.mx_EventTile_content .mx_EventTile_edited,
.mx_EventTile_content .mx_EventTile_pendingModeration {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: 0.75rem;
color: var(--cpd-color-text-secondary);
display: inline-block;
-webkit-margin-start: 9px;
margin-inline-start: 9px;
}.mx_EventTile_content .mx_EventTile_edited {
cursor: pointer;
}.mx_EventTile_content .markdown-body {
font: var(--cpd-font-body-md-regular) !important;
letter-spacing: var(--cpd-font-letter-spacing-body-md);
font-family: inherit !important;
white-space: normal !important;
line-height: inherit !important;
background-color: inherit;
color: inherit; /* inherit the colour from the dark or light theme by default (but not for code blocks) */
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
/*
// actually, removing the Italic TTF provides
// better results seemingly
// compensate for Nunito italics being terrible
// https://github.com/google/fonts/issues/1726
em {
transform: skewX(-14deg);
display: inline-block;
}
*/
}.mx_EventTile_content .markdown-body pre,
.mx_EventTile_content .markdown-body code {
font-family: "Fira Code", "", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
"Noto Color Emoji" !important;
font-family: "Fira Code", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
"Noto Color Emoji" !important;
background-color: var(--cpd-color-bg-subtle-secondary);
}.mx_EventTile_content .markdown-body code:not(pre *) {
background-color: var(--cpd-color-bg-subtle-secondary);
border: 1px solid var(--cpd-color-gray-400);
border-radius: 4px;
/* The horizontal padding is added by github-markdown-css .markdown-body */
padding: 2px 0;
/* Avoid inline code blocks to be sticked when on multiple lines */
line-height: 1.375rem;
/* Avoid the border to be glued to the other words */
margin-right: 2px;
}.mx_EventTile_content .markdown-body code {
white-space: pre-wrap; /* don't collapse spaces in inline code blocks */
}.mx_EventTile_content .markdown-body pre {
/* have to use overlay rather than auto otherwise Linux and Windows */
/* Chrome gets very confused about vertical spacing: */
/* https://github.com/vector-im/vector-web/issues/754 */
overflow-x: overlay;
overflow-y: visible;
}.mx_EventTile_content .markdown-body pre::-webkit-scrollbar-corner {
background: transparent;
}.mx_EventTile_content .markdown-body pre{
border: 1px solid var(--cpd-color-gray-400);
}.mx_EventTile_content .markdown-body pre code {
white-space: pre; /* we want code blocks to be scrollable and not wrap */
}.mx_EventTile_content .markdown-body pre code > * {
display: inline;
}.mx_EventTile_content .markdown-body h1,
.mx_EventTile_content .markdown-body h2,
.mx_EventTile_content .markdown-body h3,
.mx_EventTile_content .markdown-body h4,
.mx_EventTile_content .markdown-body h5,
.mx_EventTile_content .markdown-body h6 {
font-family: inherit !important;
color: inherit;
}/* Make h1 and h2 the same size as h3. */.mx_EventTile_content .markdown-body h1,
.mx_EventTile_content .markdown-body h2 {
font-size: 1.5em;
border-bottom: none !important; /* override GFM */
}.mx_EventTile_content .markdown-body a {
color: var(--cpd-color-text-link-external);
}.mx_EventTile_content .markdown-body blockquote {
border-left: 2px solid var(--cpd-color-border-interactive-primary);
color: var(--cpd-color-text-secondary);
border-radius: 2px;
padding: 0 10px;
}/* Support arbitrarily large marker numbers */.mx_EventTile_content .markdown-body ol {
list-style-position: inside;
-webkit-padding-start: 0.5em;
padding-inline-start: 0.5em;
}/* Override nested lists being lower-roman */.mx_EventTile_content .markdown-body ol ol,
.mx_EventTile_content .markdown-body ul ol {
list-style-type: revert;
}/* Make list type disc to match rich text editor */.mx_EventTile_content .markdown-body ul {
list-style-type: disc;
}/* override styles from the base markdown CSS that put markdown content on its own line,
as this isn't what we want for richtext emote content.
*/.mx_EventTile_content .markdown-body::before {
display: none;
}.mx_EventTile_content .markdown-body::after {
display: none;
}/* Spoiler stuff */.mx_EventTile_spoiler {
cursor: pointer;
/* clear button styles */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
border: none;
padding: 0;
margin: 0;
font-size: inherit;
font-family: inherit;
line-height: inherit;
text-align: inherit;
}.mx_EventTile_spoiler .mx_EventTile_spoiler_reason {
color: var(--cpd-color-text-secondary);
font-size: 0.6875rem;
}.mx_EventTile_spoiler .mx_EventTile_spoiler_content {
-webkit-filter: blur(5px) saturate(0.1) sepia(1);
filter: blur(5px) saturate(0.1) sepia(1);
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
pointer-events: none;
}.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
-webkit-filter: none;
filter: none;
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
pointer-events: auto;
}.mx_EventTile_bigEmoji {
font-size: 48px;
line-height: 57px;
}.mx_EventTile_bigEmoji .mx_Emoji {
font-size: inherit !important;
}.mx_EventTile_e2eIcon {
position: relative;
width: 14px;
height: 14px;
display: block;
}.mx_EventTile_e2eIcon svg {
height: inherit;
width: inherit;
display: block;
}.mx_EventTile_body a:hover {
text-decoration: underline;
}.mx_EventTile_body pre {
border: 1px solid transparent;
}.mx_EventTile:hover .mx_EventTile_body pre,
.mx_EventTile:focus-visible:focus-within .mx_EventTile_body pre {
border: 1px solid var(--cpd-color-gray-800);
}/* selector wrongly applies to pill avatars but those have explicit width/height passed at a higher specificity */.mx_EventTile_body.markdown-body img {
-o-object-fit: contain;
object-fit: contain;
-o-object-position: left top;
object-position: left top;
/* Override the default colors of the 'github-markdown-css' library
(#fff for light theme, #000 for dark theme) to match the inherited theme */
background-color: inherit !important;
}.mx_EventTile_clamp .mx_EventTile_body {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
}.mx_EventTile_body .mx_EventTile_pre_container {
/* For correct positioning of _copyButton (See TextualBody) */
position: relative;
}.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_button, .mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_button {
visibility: visible;
}.mx_EventTile_body .mx_EventTile_pre_container .mx_EventTile_collapsedCodeBlock {
max-height: 30vh;
padding-top: 12px;
padding-bottom: 12px;
}/* Inserted adjacent to blocks, (See TextualBody) */.mx_EventTile_body .mx_EventTile_pre_container .mx_EventTile_button {
position: absolute;
top: 8px;
right: 8px;
width: 16px;
height: 16px;
visibility: hidden;
}.mx_EventTile_body .mx_EventTile_pre_container .mx_EventTile_button.mx_EventTile_buttonBottom {
top: 33px;
}.mx_EventTile_body .mx_EventTile_pre_container .mx_EventTile_button svg {
width: inherit;
height: inherit;
display: block;
color: #b9bec6;
}.mx_EventTile_lineNumbers {
float: left;
margin: 0 0.5em 0 -1.5em;
color: gray;
}.mx_EventTile_lineNumbers span {
text-align: right;
display: block;
padding-left: 1em;
}.mx_EventTile_button {
display: inline-block;
cursor: pointer;
}.mx_EventTile_tileError {
color: red;
text-align: center;
/* Remove some of the default tile padding so that the error is centered */
margin-right: 0;
}.mx_EventTile_tileError .mx_EventTile_line {
padding-left: 0;
margin-right: 0;
}.mx_EventTile_tileError .mx_EventTile_line span {
padding: 4px 8px;
}.mx_EventTile_tileError a {
margin-left: 1em;
}.mx_EventTile:hover .mx_MessageActionBar,
.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,
[data-whatinput="keyboard"] .mx_EventTile:focus-within .mx_MessageActionBar,
.mx_EventTile:focus-visible:focus-within .mx_MessageActionBar {
visibility: visible;
}.mx_EventTile[data-shape="ThreadsList"],
.mx_EventTile[data-shape="Notification"] {
--topOffset: 12px;
--leftOffset: 48px; /* notification dot next to the timestamp */
margin: calc(12px + 1px) 0 12px;
margin: calc(var(--topOffset) + 1px) 0 var(--topOffset); /* include the height of horizontal line */
padding: 8px;
border-radius: 8px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: wrap;
flex-flow: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}.mx_EventTile[data-shape="ThreadsList"]::after,
.mx_EventTile[data-shape="ThreadsList"]::before,
.mx_EventTile[data-shape="Notification"]::after,
.mx_EventTile[data-shape="Notification"]::before {
content: "";
position: absolute;
}.mx_EventTile[data-shape="ThreadsList"]::after, .mx_EventTile[data-shape="Notification"]::after { /* exclude the height of horizontal line */
inset: auto calc(-1 * var(--cpd-space-2x)) calc(-1 * var(--topOffset) - 1px) calc(var(--leftOffset) + 8px);
height: 1px;
background-color: var(--cpd-color-gray-400);
pointer-events: none; /* disable the message action bar on hover */
}.mx_EventTile[data-shape="ThreadsList"]::before, .mx_EventTile[data-shape="Notification"]::before {
inset: 0;
pointer-events: none; /* ensures the title for the sender name can be correctly displayed */
}.mx_EventTile[data-shape="ThreadsList"][data-notification="total"]::before, .mx_EventTile[data-shape="Notification"][data-notification="total"]::before {
background-color: var(--cpd-color-icon-tertiary);
}.mx_EventTile[data-shape="ThreadsList"][data-notification="highlight"]::before, .mx_EventTile[data-shape="Notification"][data-notification="highlight"]::before {
background-color: var(--cpd-color-text-critical-primary);
}.mx_EventTile[data-shape="ThreadsList"]:last-child::after, .mx_EventTile[data-shape="Notification"]:last-child::after {
content: normal;
content: initial;
}.mx_EventTile[data-shape="ThreadsList"]:last-child, .mx_EventTile[data-shape="Notification"]:last-child{
margin-bottom: 0;
}.mx_EventTile[data-shape="ThreadsList"]:first-child, .mx_EventTile[data-shape="Notification"]:first-child {
margin-top: 0;
}.mx_EventTile[data-shape="ThreadsList"] .mx_EventTile_avatar, .mx_EventTile[data-shape="Notification"] .mx_EventTile_avatar {
inset: 8px auto auto 8px;
}.mx_EventTile[data-shape="ThreadsList"] .mx_EventTile_details, .mx_EventTile[data-shape="Notification"] .mx_EventTile_details {
overflow: hidden;
}.mx_EventTile[data-shape="ThreadsList"] .mx_DisambiguatedProfile, .mx_EventTile[data-shape="Notification"] .mx_DisambiguatedProfile {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}.mx_EventTile[data-shape="ThreadsList"] .mx_DisambiguatedProfile .mx_DisambiguatedProfile_displayName,
.mx_EventTile[data-shape="ThreadsList"] .mx_DisambiguatedProfile .mx_DisambiguatedProfile_mxid,
.mx_EventTile[data-shape="Notification"] .mx_DisambiguatedProfile .mx_DisambiguatedProfile_displayName,
.mx_EventTile[data-shape="Notification"] .mx_DisambiguatedProfile .mx_DisambiguatedProfile_mxid {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}.mx_EventTile[data-shape="ThreadsList"] .mx_DisambiguatedProfile .mx_DisambiguatedProfile_displayName, .mx_EventTile[data-shape="Notification"] .mx_DisambiguatedProfile .mx_DisambiguatedProfile_displayName {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
max-width: 100%;
}.mx_EventTile[data-shape="ThreadsList"] .mx_DisambiguatedProfile .mx_DisambiguatedProfile_mxid, .mx_EventTile[data-shape="Notification"] .mx_DisambiguatedProfile .mx_DisambiguatedProfile_mxid {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}.mx_EventTile[data-shape="ThreadsList"] .mx_EventTile_line, .mx_EventTile[data-shape="Notification"] .mx_EventTile_line {
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-bottom: 0;
-webkit-padding-start: var(--leftOffset);
padding-inline-start: var(--leftOffset);
}.mx_EventTile[data-shape="ThreadsList"] .mx_MessageTimestamp, .mx_EventTile[data-shape="Notification"] .mx_MessageTimestamp {
font-size: 0.75rem;
width: auto;
width: initial; /* Cancel the default width */
overflow: hidden; /* ensure correct overflow behavior */
text-overflow: ellipsis;
position: static;
position: initial;
margin-left: auto; /* to ensure it's end-aligned even if it's the only element of its parent */
}.mx_EventTile[data-shape="ThreadsList"]:hover, .mx_EventTile[data-shape="Notification"]:hover {
background-color: var(--cpd-color-bg-subtle-secondary);
}/* ThreadsList has always group layout */.mx_EventTile[data-shape="ThreadsList"][data-layout="group"]:hover .mx_EventTile_line, .mx_EventTile[data-shape="Notification"][data-layout="group"]:hover .mx_EventTile_line {
background-color: inherit;
-webkit-box-shadow: none;
box-shadow: none; /* don't show the verification left stroke in the thread list */
}.mx_EventTile[data-shape="ThreadsList"] .mx_ThreadPanel_replies {
margin-top: 8px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
font: var(--cpd-font-body-sm-regular);
}.mx_EventTile[data-shape="ThreadsList"] .mx_ThreadPanel_replies > svg {
display: inline-block;
height: 18px;
width: 18px;
-ms-flex-negative: 0;
flex-shrink: 0;
color: var(--cpd-color-icon-tertiary);
}.mx_EventTile[data-shape="ThreadsList"] .mx_ThreadPanel_replies .mx_ThreadPanel_replies_amount {
color: var(--cpd-color-text-secondary);
font-weight: var(--cpd-font-weight-semibold);
white-space: nowrap;
position: relative;
padding: 0 12px 0 8px;
}.mx_EventTile[data-shape="ThreadsList"] .mx_ThreadPanel_replies .mx_ThreadSummary_content {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}/* For style rules of ThreadView, see _ThreadPanel.pcss */.mx_ThreadView {
--ThreadView_group_spacing-start: 56px; /* 56px: 64px - 8px (padding) */
--ThreadView_group_spacing-end: 8px;
}/* same as padding */.mx_ThreadView .mx_EventTile {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}.mx_ThreadView .mx_EventTile .mx_EventTile_roomName {
display: none;
}/* handling for hidden events (e.g reactions) in the thread view */.mx_ThreadView .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
position: absolute;
/* Align with hidden event content */
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin-top: -2px;
margin-bottom: 0;
}.mx_ThreadView .mx_EventTile.mx_EventTile_info.mx_EventTile_selected .mx_EventTile_line,
.mx_ThreadView .mx_EventTile.mx_EventTile_info .mx_EventTile_line {
-webkit-padding-start: 0;
padding-inline-start: 0;
line-height: 0.75rem;
}.mx_ThreadView .mx_EventTile.mx_EventTile_info.mx_EventTile_selected .mx_EventTile_line .mx_EventTile_content,
.mx_ThreadView .mx_EventTile.mx_EventTile_info.mx_EventTile_selected .mx_EventTile_line .mx_RedactedBody,
.mx_ThreadView .mx_EventTile.mx_EventTile_info .mx_EventTile_line .mx_EventTile_content,
.mx_ThreadView .mx_EventTile.mx_EventTile_info .mx_EventTile_line .mx_RedactedBody {
width: auto;
font-size: 0.75rem;
}.mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="irc"],
.mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="group"] {
padding-top: 0;
}.mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="irc"] .mx_EventTile_avatar, .mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="group"] .mx_EventTile_avatar {
/* 14px: avatar width, 4px: align with text */
left: calc(46px + 14px - 4px);
left: calc(var(--MessageTimestamp-width) + 14px - 4px);
z-index: 9; /* position above the hover styling */
}.mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="irc"] .mx_MessageTimestamp, .mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="group"] .mx_MessageTimestamp {
top: 2px; /* Align with avatar */
}.mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="irc"].mx_EventTile_selected .mx_EventTile_line .mx_EventTile_content,
.mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="irc"].mx_EventTile_selected .mx_EventTile_line .mx_RedactedBody,
.mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="irc"] .mx_EventTile_line .mx_EventTile_content,
.mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="irc"] .mx_EventTile_line .mx_RedactedBody,
.mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="group"].mx_EventTile_selected .mx_EventTile_line .mx_EventTile_content,
.mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="group"].mx_EventTile_selected .mx_EventTile_line .mx_RedactedBody,
.mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="group"] .mx_EventTile_line .mx_EventTile_content,
.mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="group"] .mx_EventTile_line .mx_RedactedBody {
/* 14px: avatar width, 6px: 20px - 14px */
-webkit-margin-start: calc(14px + 6px);
margin-inline-start: calc(14px + 6px);
}.mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="bubble"] .mx_EventTile_avatar {
inset-inline-start: 0;
}.mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="bubble"].mx_EventTile_selected .mx_EventTile_line .mx_EventTile_content,
.mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="bubble"].mx_EventTile_selected .mx_EventTile_line .mx_RedactedBody,
.mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="bubble"] .mx_EventTile_line .mx_EventTile_content,
.mx_ThreadView .mx_EventTile.mx_EventTile_info[data-layout="bubble"] .mx_EventTile_line .mx_RedactedBody {
-webkit-margin-start: calc(var(--ThreadView_group_spacing-start) + 14px + 6px);
margin-inline-start: calc(var(--ThreadView_group_spacing-start) + 14px + 6px);
}.mx_ThreadView .mx_EventTile[data-layout="irc"],
.mx_ThreadView .mx_EventTile[data-layout="group"] {
-webkit-padding-before: 16px;
padding-block-start: 16px;
}.mx_ThreadView .mx_EventTile[data-layout="irc"] .mx_EventTile_line,
.mx_ThreadView .mx_EventTile[data-layout="irc"] .mx_EventTile_footer,
.mx_ThreadView .mx_EventTile[data-layout="group"] .mx_EventTile_line,
.mx_ThreadView .mx_EventTile[data-layout="group"] .mx_EventTile_footer {
-webkit-margin-end: var(--ThreadView_group_spacing-end);
margin-inline-end: var(--ThreadView_group_spacing-end);
}.mx_ThreadView .mx_EventTile[data-layout="irc"] .mx_EventTile_line, .mx_ThreadView .mx_EventTile[data-layout="group"] .mx_EventTile_line {
padding-block: var(--BaseCard_EventTile_line-padding-block);
/* Add padding to align message text with summary text */
/* See: .mx_EventTile[data-layout="group"] .mx_EventTile_line */
-webkit-padding-start: var(--ThreadView_group_spacing-start);
padding-inline-start: var(--ThreadView_group_spacing-start);
}.mx_ThreadView .mx_EventTile[data-layout="irc"] .mx_EventTile_line .mx_EventTile_content.mx_EditMessageComposer, .mx_ThreadView .mx_EventTile[data-layout="group"] .mx_EventTile_line .mx_EventTile_content.mx_EditMessageComposer {
-webkit-padding-start: 0;
padding-inline-start: 0; /* align start of first letter with that of the event body */
}.mx_ThreadView .mx_EventTile[data-layout="irc"] .mx_EventTile_footer, .mx_ThreadView .mx_EventTile[data-layout="group"] .mx_EventTile_footer {
/* Align with message text and summary text */
-webkit-margin-start: var(--ThreadView_group_spacing-start);
margin-inline-start: var(--ThreadView_group_spacing-start);
}.mx_ThreadView .mx_EventTile[data-layout="irc"].mx_EventTile_continuation, .mx_ThreadView .mx_EventTile[data-layout="group"].mx_EventTile_continuation {
-webkit-padding-before: 0;
padding-block-start: 0; /* Cancel padding-block-start */
}.mx_ThreadView .mx_EventTile[data-layout="group"] {
width: 100%;
}.mx_ThreadView .mx_EventTile[data-layout="group"] .mx_EventTile_senderDetails {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 16px; /* gap between the avatar and the sender ID */
-webkit-padding-start: 8px;
padding-inline-start: 8px;
}.mx_ThreadView .mx_EventTile[data-layout="group"] .mx_EventTile_senderDetails a {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
min-width: 0;
min-width: initial;
max-width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}.mx_ThreadView .mx_EventTile[data-layout="group"] .mx_EventTile_senderDetails a .mx_DisambiguatedProfile {
margin-left: 8px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}.mx_ThreadView .mx_EventTile[data-layout="group"] .mx_MessageTimestamp {
position: absolute; /* for IRC layout */
top: 2px; /* Align with mx_EventTile_content */
}.mx_ThreadView .mx_EventTile[data-layout="bubble"] {
margin-inline: var(--BaseCard_EventTile-spacing-inline);
}.mx_ThreadView .mx_EventTile[data-layout="bubble"]::before {
inset-inline: calc(-1 * var(--BaseCard_EventTile-spacing-inline));
z-index: auto; /* enable background color on hover */
}.mx_ThreadView .mx_EventTile[data-layout="bubble"] .mx_ReactionsRow {
position: relative; /* display on hover */
}.mx_ThreadView .mx_EventTile[data-layout="bubble"] .mx_EventTile_line.mx_EventTile_mediaLine {
padding-block: 0;
-webkit-padding-start: 0;
padding-inline-start: 0;
max-width: var(--EventBubbleTile_line-max-width);
}.mx_ThreadView .mx_EventTile[data-layout="bubble"][data-self="true"] {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}.mx_ThreadView .mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line.mx_EventTile_mediaLine {
margin: 0 var(--EventTile_bubble_line-margin-inline-end) 0 0; /* align with normal messages */
}.mx_ThreadView .mx_GenericEventListSummary[data-layout="irc"] > .mx_EventTile_line, .mx_ThreadView .mx_GenericEventListSummary[data-layout="group"] > .mx_EventTile_line {
-webkit-padding-start: var(--ThreadView_group_spacing-start);
padding-inline-start: var(--ThreadView_group_spacing-start); /* align summary text with message text */
-webkit-padding-end: var(--ThreadView_group_spacing-end);
padding-inline-end: var(--ThreadView_group_spacing-end); /* align summary text with message text */
}/* Cascading - compact modern layout on the main timeline and the right panel */.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] {
--MatrixChat_useCompactLayout_group-padding-top: 4px;
--MatrixChat_useCompactLayout-top-avatar: 2px;
--MatrixChat_useCompactLayout_line-spacing-block: 0px;
padding-top: 4px;
padding-top: var(--MatrixChat_useCompactLayout_group-padding-top);
}.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_EventTile_line,
.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_EventTile_reply {
padding-block: var(--MatrixChat_useCompactLayout_line-spacing-block);
}.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_ReplyChain {
margin-bottom: 4px;
}.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"].mx_EventTile_info {
padding-top: 0; /* same as the padding for non-compact .mx_EventTile.mx_EventTile_info */
font-size: 0.8125rem;
}.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"].mx_EventTile_info .mx_EventTile_e2eIcon,
.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"].mx_EventTile_info .mx_EventTile_avatar {
top: 0;
margin-block: var(--MatrixChat_useCompactLayout_line-spacing-block);
}.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"].mx_EventTile_info .mx_EventTile_line,
.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"].mx_EventTile_info .mx_EventTile_reply {
line-height: 1.25rem;
}.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"].mx_EventTile_emote {
padding-top: 8px; /* add a bit more space for emotes so that avatars don't collide */
}.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"].mx_EventTile_emote .mx_EventTile_avatar {
top: var(--MatrixChat_useCompactLayout-top-avatar);
}.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"].mx_EventTile_emote .mx_EventTile_line,
.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"].mx_EventTile_emote .mx_EventTile_reply {
padding-bottom: 1px;
}.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"].mx_EventTile_emote.mx_EventTile_continuation .mx_EventTile_line,
.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"].mx_EventTile_emote.mx_EventTile_continuation .mx_EventTile_reply {
padding-bottom: var(--MatrixChat_useCompactLayout_line-spacing-block);
}/* Cascading - apply zero padding to every element including mx_EventTile_emote */.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"].mx_EventTile_continuation {
padding-top: var(--MatrixChat_useCompactLayout_line-spacing-block);
}.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_EventTile_avatar {
top: var(--MatrixChat_useCompactLayout-top-avatar);
}.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_EventTile_e2eIcon {
margin: 0px;
}.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_DisambiguatedProfile {
font-size: 0.8125rem;
}.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_EventTile_msgOption .mx_ReadReceiptGroup {
/* This aligns the avatar with the last line of the */
/* message. We want to move it one line up - 2rem */
inset-block-start: -2rem;
}.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_EventTile_content .markdown-body p,
.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_EventTile_content .markdown-body ul,
.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_EventTile_content .markdown-body ol,
.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_EventTile_content .markdown-body dl,
.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_EventTile_content .markdown-body blockquote,
.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_EventTile_content .markdown-body pre,
.mx_MatrixChat_useCompactLayout .mx_EventTile[data-layout="group"] .mx_EventTile_content .markdown-body table {
margin-bottom: 4px; /* 1/4 of the non-compact margin-bottom */
}.mx_EventTile_details {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: -webkit-fill-available;
width: -moz-available;
width: stretch;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 8px;
margin-left: var(--leftOffset);
}.mx_EventTile_details .mx_EventTile_truncated {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}.mx_EventTile_annotated {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}.mx_EventTile_footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--cpd-space-2x);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}/* Media query for mobile UI */@media only screen and (max-width: 480px) {
.mx_EventTile_content {
margin-right: 0;
}
}/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Robin Townsend
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_EventTileBubble.mx_HistoryTile {
margin: 10px auto;
margin: var(--EventTileBubble_margin-block) auto;
}.mx_EventTileBubble.mx_HistoryTile svg {
color: #b9bec6;
}/*
Copyright 2024 New Vector Ltd.
Copyright 2020 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.
*/:root {
--irc-line-height: 1.125rem;
}.mx_IRCLayout {
--name-width: 80px; /* cf. ircDisplayNameWidth on Settings.tsx */
--icon-width: 14px;
--line-height: var(--irc-line-height);
--right-padding: 5px;
line-height: 1.125rem !important;
line-height: var(--line-height) !important;
}.mx_IRCLayout blockquote {
margin: 0;
}.mx_IRCLayout .mx_NewRoomIntro > h2 {
line-height: normal;
line-height: initial; /* Cancel var(--irc-line-height) */
}.mx_IRCLayout .mx_ReplyChain .mx_DisambiguatedProfile {
width: auto;
width: initial;
background: transparent;
-webkit-box-ordinal-group: initial;
-ms-flex-order: initial;
order: initial;
-ms-flex-negative: initial;
flex-shrink: initial; /* Unset flex-shrink to prevent long display name blowout */
}.mx_IRCLayout .mx_ReplyChain .mx_EventTile_emote > .mx_EventTile_avatar {
margin-left: 0;
margin-left: initial;
}.mx_IRCLayout .mx_ReplyChain .mx_MessageTimestamp {
width: auto;
width: initial;
}/**
* adding the icon back in the document flow
* if it's not present, there's no unwanted wasted space
*/.mx_IRCLayout .mx_ReplyChain .mx_EventTile_e2eIcon {
position: relative;
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}.mx_IRCLayout .mx_ProfileResizer {
--resizer-width: 15px;
--resizer-a11y: 3px; /* Magic number, to be replaced with something more proper from the perspective of a11y */
position: absolute;
height: 100%;
width: 15px;
width: var(--resizer-width);
cursor: col-resize;
z-index: 100;
/* Add width of every element rendered before the resizer (including padding for the avatar and the display
name), subtracting the resizer width itself to prevent the resizer from overlapping the text and moving
the resizer a bit to the left to make it easier to avoid selecting the resizer when highlighting text.
Please note that MessageTimestamp does not have inline padding. */
inset-inline-start: calc(
18px + 46px + var(--icon-width) +
var(--right-padding) + var(--name-width) + var(--right-padding) - 15px -
3px
);
inset-inline-start: calc(
var(--RoomView_MessageList-padding) + var(--MessageTimestamp-width) + var(--icon-width) +
var(--right-padding) + var(--name-width) + var(--right-padding) - var(--resizer-width) -
var(--resizer-a11y)
);
}/*
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_InvitedIconView {
color: var(--cpd-color-icon-tertiary);
}/*
Copyright 2019-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_JumpToBottomButton {
z-index: 1000;
position: absolute;
/* 12 because height is 50 but button is only 38 = 12+(50-38) = 24 */
bottom: 12px;
right: 24px;
width: 38px;
/* give it a fixed height so the badge doesn't make */
/* it taller and pop upwards when visible */
height: 50px;
text-align: center;
}.mx_JumpToBottomButton_badge {
position: relative;
top: -12px;
border-radius: 16px;
font-weight: bold;
font-size: 0.75rem;
line-height: 0.875rem;
text-align: center;
/* to be able to get it centered */
/* with text-align in parent */
display: inline-block;
padding: 0 4px;
color: var(--cpd-color-text-on-solid-primary);
background-color: var(--cpd-color-icon-secondary);
}.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge {
background-color: var(--cpd-color-icon-critical-primary);
}.mx_JumpToBottomButton_scrollDown {
position: relative;
display: block;
height: 38px;
border-radius: 50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: var(--cpd-color-bg-canvas-default);
border: 1.3px solid var(--cpd-color-icon-tertiary);
cursor: pointer;
}.mx_JumpToBottomButton_scrollDown svg {
height: inherit;
width: inherit;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 7px 8px 7px 6px;
color: var(--cpd-color-icon-tertiary);
}/*
Copyright 2024 New Vector Ltd.
Copyright 2020 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_LegacyRoomList {
padding-right: 7px; /* width of the scrollbar, to line things up */
}/*
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_LegacyRoomListHeader {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}.mx_LegacyRoomListHeader .mx_LegacyRoomListHeader_contextLessTitle,
.mx_LegacyRoomListHeader .mx_LegacyRoomListHeader_contextMenuButton {
font: var(--cpd-font-heading-sm-semibold);
font-weight: var(--cpd-font-weight-semibold);
padding: 1px 24px 1px 4px;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 8px;
margin-right: auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}.mx_LegacyRoomListHeader .mx_LegacyRoomListHeader_contextMenuButton {
border-radius: 6px;
}.mx_LegacyRoomListHeader .mx_LegacyRoomListHeader_contextMenuButton:hover {
background-color: var(--cpd-color-gray-400);
}.mx_LegacyRoomListHeader .mx_LegacyRoomListHeader_contextMenuButton svg {
width: 20px;
height: 20px;
top: 3px;
right: 0;
position: absolute;
color: var(--cpd-color-gray-800);
}.mx_LegacyRoomListHeader .mx_LegacyRoomListHeader_contextMenuButton[aria-expanded="true"] {
background-color: var(--cpd-color-gray-400);
}.mx_LegacyRoomListHeader .mx_LegacyRoomListHeader_plusButton {
width: 32px;
height: 32px;
border-radius: 8px;
position: relative;
padding: 8px;
margin-left: 8px;
margin-right: 12px;
background-color: var(--cpd-color-alpha-gray-300);
-webkit-box-sizing: border-box;
box-sizing: border-box;
-ms-flex-negative: 0;
flex-shrink: 0;
}.mx_LegacyRoomListHeader .mx_LegacyRoomListHeader_plusButton svg {
width: 16px;
height: 16px;
position: absolute;
color: var(--cpd-color-text-secondary);
}.mx_LegacyRoomListHeader .mx_LegacyRoomListHeader_plusButton:hover {
background-color: var(--cpd-color-gray-800);
}.mx_LegacyRoomListHeader .mx_LegacyRoomListHeader_plusButton:hover svg {
color: var(--cpd-color-bg-canvas-default);
}/*
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_LinkPreviewGroup .mx_LinkPreviewGroup_hide {
cursor: pointer;
width: 18px;
height: 18px;
}.mx_LinkPreviewGroup .mx_LinkPreviewGroup_hide svg {
-webkit-box-flex: 0;
-ms-flex: 0 0 40px;
flex: 0 0 40px;
visibility: hidden;
}.mx_LinkPreviewGroup:hover .mx_LinkPreviewGroup_hide svg,
.mx_LinkPreviewGroup .mx_LinkPreviewGroup_hide:focus-visible:focus svg {
visibility: visible;
}.mx_LinkPreviewGroup > .mx_AccessibleButton {
color: var(--cpd-color-text-action-accent);
text-align: center;
}/*
Copyright 2024 New Vector Ltd.
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_LinkPreviewWidget {
margin: 16px 0 16px auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-column-gap: 4px;
-moz-column-gap: 4px;
column-gap: 4px;
-webkit-border-start: 2px solid var(--cpd-color-bg-subtle-primary);
border-inline-start: 2px solid var(--cpd-color-bg-subtle-primary);
border-radius: 2px;
color: var(--cpd-color-gray-900);
}.mx_MatrixChat_useCompactLayout .mx_LinkPreviewWidget {
margin-top: 6px;
margin-bottom: 6px;
}/* Exclude mx_LinkPreviewGroup_hide from wrapping */.mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
row-gap: 8px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}.mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption .mx_LinkPreviewWidget_image,
.mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption .mx_LinkPreviewWidget_caption {
-webkit-margin-start: 16px;
margin-inline-start: 16px;
min-width: 0; /* Prevent blowout */
}.mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption .mx_LinkPreviewWidget_image {
-webkit-box-flex: 0;
-ms-flex: 0 0 100px;
flex: 0 0 100px;
text-align: center;
cursor: pointer;
}.mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption .mx_LinkPreviewWidget_caption {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden; /* cause it to wrap rather than clip */
}.mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption .mx_LinkPreviewWidget_title,
.mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption .mx_LinkPreviewWidget_description {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal;
}.mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption .mx_LinkPreviewWidget_title {
font-weight: bold;
-webkit-line-clamp: 2;
}.mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption .mx_LinkPreviewWidget_title .mx_LinkPreviewWidget_siteName {
font-weight: normal;
}.mx_LinkPreviewWidget .mx_LinkPreviewWidget_wrapImageCaption .mx_LinkPreviewWidget_description {
margin-top: 8px;
word-wrap: break-word;
-webkit-line-clamp: 3;
}/*
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_LiveContentSummary {
color: var(--cpd-color-text-secondary);
}.mx_LiveContentSummary .mx_LiveContentSummary_text svg {
display: inline-block;
vertical-align: text-bottom;
color: var(--cpd-color-text-secondary);
width: 16px;
height: 16px;
margin-right: 4px;
}.mx_LiveContentSummary .mx_LiveContentSummary_text.mx_LiveContentSummary_text_active {
color: var(--cpd-color-text-action-accent);
}.mx_LiveContentSummary .mx_LiveContentSummary_text.mx_LiveContentSummary_text_active svg {
color: var(--cpd-color-text-action-accent);
}.mx_LiveContentSummary .mx_LiveContentSummary_participants svg {
display: inline-block;
vertical-align: middle;
color: var(--cpd-color-text-secondary);
width: 16px;
height: 16px;
margin-right: 2px;
}/*
Copyright 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_MemberListHeaderView {
border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
max-height: 112px;
}.mx_MemberListHeaderView .mx_MemberListHeaderView_container {
margin-top: var(--cpd-space-6x);
width: 100%;
}.mx_MemberListHeaderView .mx_MemberListHeaderView_invite_small {
margin-left: var(--cpd-space-3x);
margin-right: var(--cpd-space-4x);
}.mx_MemberListHeaderView .mx_MemberListHeaderView_invite_large {
width: 288px;
height: 36px;
}.mx_MemberListHeaderView .mx_MemberListHeaderView_label {
padding: var(--cpd-space-6x) 0 var(--cpd-space-2x) var(--cpd-space-4x);
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
color: var(--cpd-color-text-secondary);
font: var(--cpd-font-body-sm-semibold);
}.mx_MemberListHeaderView .mx_MemberListHeaderView_search {
width: 240px;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
margin-left: var(--cpd-space-4x);
}/*
Copyright 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_MemberListView {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 0;
}.mx_MemberListView .mx_MemberListView_container {
height: 100%;
}.mx_MemberListView .mx_MemberListView_separator {
margin: 0;
border: none;
border-top: 2px solid var(--cpd-color-bg-subtle-primary);
}/*
Copyright 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_MemberTileView {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-4x);
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 56px;
border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-gray-300);
}.mx_MemberTileView .mx_MemberTileView_left,
.mx_MemberTileView .mx_MemberTileView_right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: var(--cpd-space-2x);
}.mx_MemberTileView .mx_MemberTileView_left {
-ms-flex-preferred-size: 209px;
flex-basis: 209px;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
min-width: 0;
}.mx_MemberTileView .mx_MemberTileView_name {
font: var(--cpd-font-body-md-medium);
min-width: 0;
}.mx_MemberTileView .mx_MemberTileView_userLabel {
font: var(--cpd-font-body-sm-regular);
color: var(--cpd-color-text-secondary);
margin-left: var(--cpd-space-4x);
}.mx_MemberTileView .mx_MemberTileView_avatar {
position: relative;
height: 32px;
width: 32px;
}/*
Copyright 2018-2024 New Vector Ltd.
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_MessageComposer_wrapper {
vertical-align: middle;
margin: auto;
border-top: 1px solid transparent;
position: relative;
padding-left: 42px;
padding-right: 16px;
}.mx_MessageComposer_replaced_wrapper {
margin-left: auto;
margin-right: auto;
}.mx_MessageComposer_replaced_valign {
height: 60px;
display: table-cell;
vertical-align: middle;
}.mx_MessageComposer_roomReplaced_icon {
float: left;
margin-right: 20px;
margin-top: 5px;
width: 31px;
height: 31px;
}.mx_MessageComposer_roomReplaced_header {
font-weight: bold;
}.mx_MessageComposer_row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}.mx_MessageComposer_actions {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 6px;
}.mx_MessageComposer .mx_MessageComposer_avatar {
position: absolute;
left: 26px;
}.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
display: block;
}.mx_MessageComposer_e2eIconWrapper {
height: 12px; /* Match the height of the E2E icon for alignment */
width: 12px;
position: absolute;
left: 20px;
top: 22px;
margin-right: 0; /* Counteract the E2EIcon class */
margin-left: 3px; /* Counteract the E2EIcon class */
}.mx_MessageComposer_e2eIconWrapper .mx_MessageComposer_e2eIcon {
margin: 0;
width: inherit;
height: inherit;
}.mx_MessageComposer_noperm_error {
width: 100%;
height: 60px;
font-style: italic;
color: var(--cpd-color-gray-900);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}.mx_MessageComposer_input {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
vertical-align: middle;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 60px;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
font: var(--cpd-font-body-md-regular);
margin-right: 6px;
}.mx_MessageComposer_input pre {
background-color: rgba(0, 0, 0, 0.04);
border-radius: 3px;
padding: 10px;
}.mx_MessageComposer_input textarea {
display: block;
width: 100%;
padding: 0px;
margin-top: 6px;
margin-bottom: 6px;
border: 0px;
resize: none;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
color: var(--cpd-color-text-primary);
background-color: var(--cpd-color-bg-canvas-default);
font: var(--cpd-font-body-md-regular);
max-height: 120px;
overflow: auto;
}/* hack for FF as vertical alignment of custom placeholder text is broken */.mx_MessageComposer_input textarea::-moz-placeholder {
line-height: 100%;
color: var(--cpd-color-text-action-accent);
opacity: 1;
}.mx_MessageComposer_input textarea::-webkit-input-placeholder {
color: var(--cpd-color-text-action-accent);
}.mx_MessageComposer_button_highlight {
background: var(--cpd-color-bg-subtle-primary);
color: var(--cpd-color-icon-primary) !important;
}.mx_MessageComposer_button {
position: relative;
cursor: pointer;
border-radius: 50%;
}.mx_MessageComposer_button svg {
color: var(--cpd-color-icon-tertiary);
}.mx_MessageComposer_button:hover {
background-color: var(--cpd-color-bg-subtle-primary);
}.mx_MessageComposer_button:hover svg {
color: var(--cpd-color-icon-primary);
}.mx_MessageComposer_button{
padding: 3px;
height: 20px;
width: 20px;
}.mx_MessageComposer_button:last-child {
margin-right: auto;
}.mx_MessageComposer_button.mx_MessageComposer_closeButtonMenu::after {
background: var(--cpd-color-bg-subtle-primary);
}.mx_MessageComposer_button.mx_MessageComposer_closeButtonMenu::before {
background-color: var(--cpd-color-icon-primary);
z-index: 2;
}.mx_MessageComposer_button svg {
width: inherit;
height: inherit;
}.mx_MessageComposer_wysiwyg .mx_MessageComposer_wrapper {
padding-left: 16px;
margin-top: 6px;
margin-bottom: 12px;
}.mx_MessageComposer_wysiwyg .mx_MessageComposer_row {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}.mx_MessageComposer_wysiwyg .mx_MessageComposer_actions {
/* Height of the composer editor */
height: 40px;
}.mx_MessageComposer_wysiwyg .mx_MediaBody {
padding-top: 4px;
padding-bottom: 4px;
}.mx_MessageComposer_wysiwyg .mx_MessageComposer_button {
position: relative;
cursor: pointer;
border-radius: 5px;
}.mx_MessageComposer_wysiwyg .mx_MessageComposer_button svg {
color: var(--cpd-color-icon-tertiary);
}.mx_MessageComposer_wysiwyg .mx_MessageComposer_button:hover {
background-color: var(--cpd-color-bg-subtle-secondary);
}.mx_MessageComposer_wysiwyg .mx_MessageComposer_button:hover svg {
color: var(--cpd-color-gray-800);
}.mx_MessageComposer_wysiwyg .mx_MessageComposer_button.mx_MessageComposer_closeButtonMenu::after {
background: var(--cpd-color-green-300);
}.mx_MessageComposer_wysiwyg .mx_MessageComposer_button.mx_MessageComposer_closeButtonMenu::before {
background-color: var(--cpd-color-text-action-accent);
z-index: 2;
}.mx_MessageComposer_buttonMenu {
width: 24px;
height: 24px;
padding: 1px;
}.mx_MessageComposer_buttonMenu svg {
width: 24px;
height: 24px;
}.mx_MessageComposer_sendMessage {
cursor: pointer;
position: relative;
padding: var(--cpd-space-2x);
border-radius: 100%;
background-color: var(--cpd-color-icon-accent-tertiary);
height: 16px;
width: 16px;
}.mx_MessageComposer_sendMessage svg {
height: inherit;
width: inherit;
color: var(--cpd-color-icon-on-solid-primary);
}.mx_MatrixChat_useCompactLayout .mx_MessageComposer_input {
min-height: 50px;
}.mx_MatrixChat_useCompactLayout .mx_MessageComposer_noperm_error {
height: 50px;
}/**
* Unstable compact mode
*/.mx_MessageComposer.mx_MessageComposer--compact {
margin-right: 0;
}.mx_MessageComposer.mx_MessageComposer--compact .mx_MessageComposer_wrapper {
padding: 0 0 0 25px;
}.mx_MessageComposer.mx_MessageComposer--compact .mx_MessageComposer_e2eIconWrapper {
left: 0;
}.mx_MessageComposer.mx_MessageComposer--compact:not(.mx_MessageComposer_e2eStatus) .mx_MessageComposer_wrapper {
padding: 0;
}.mx_MessageComposer.mx_MessageComposer--compact .mx_MessageComposer_button:last-child {
margin-right: 0;
}.mx_MessageComposer.mx_MessageComposer--compact .mx_MessageComposer_e2eIcon {
left: 0;
}/*
Copyright 2024 New Vector Ltd.
Copyright 2019 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_MessageComposerFormatBar {
display: none;
width: calc(32px * 6);
height: 32px;
position: absolute;
cursor: pointer;
border-radius: 8px;
background-color: var(--cpd-color-bg-canvas-default);
border: var(--cpd-border-width-1) solid var(--cpd-color-border-disabled);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* equal to z-index of mx_ReplyPreview and mx_RoomView_statusArea (1000) */
/* but as it appears after them in the DOM, will appear on top. */
z-index: 1000;
}.mx_MessageComposerFormatBar.mx_MessageComposerFormatBar_shown {
display: block;
}.mx_MessageComposerFormatBar > * {
white-space: nowrap;
display: inline-block;
position: relative;
margin: 2px;
}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button {
width: 28px;
height: 28px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
vertical-align: middle;
background: none;
border: none;
padding: 0;
}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button svg {
width: inherit;
height: inherit;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: var(--cpd-space-1x);
color: var(--cpd-color-icon-secondary);
}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button:hover {
background: var(--cpd-color-bg-subtle-secondary);
border-radius: 6px;
z-index: 1;
}.mx_MessageComposerFormatBar .mx_MessageComposerFormatBar_button:hover svg {
color: var(--cpd-color-icon-primary);
}.mx_MessageComposerFormatBar_buttonTooltip {
white-space: nowrap;
font-size: 0.8125rem;
font-weight: var(--cpd-font-weight-semibold);
min-width: 54px;
text-align: center;
}/*
Copyright 2024 New Vector Ltd.
Copyright 2020 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_NewRoomIntro {
margin: 40px 0 48px 64px;
}.mx_NewRoomIntro .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover) .mx_MiniAvatarUploader_indicator {
display: none;
}.mx_NewRoomIntro .mx_NewRoomIntro_buttons {
margin-top: 28px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: wrap;
flex-flow: wrap;
gap: 14px 12px;
}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton {
line-height: 1.5rem;
display: inline-block;
}.mx_NewRoomIntro .mx_NewRoomIntro_buttons .mx_AccessibleButton svg {
display: inline-block;
color: var(--cpd-color-bg-canvas-default);
width: 20px;
height: 20px;
margin-right: 5px;
vertical-align: text-bottom;
}.mx_NewRoomIntro > h2 {
margin-top: 24px;
font-size: 1.5rem;
font-weight: var(--cpd-font-weight-semibold);
}.mx_NewRoomIntro > p {
margin: 0;
font-size: 0.9375rem;
color: var(--cpd-color-text-secondary);
}/*
Copyright 2024 New Vector Ltd.
Copyright 2020 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_NotificationBadge {
/* Badges are structured a bit weirdly to work around issues with non-monospace */
/* font styles. The badge pill is actually a background div and the count floats */
/* within that. For example: */
/* ( 99+ ) <-- Rounded pill is a _bg class. */
}.mx_NotificationBadge:not(.mx_NotificationBadge_visible) {
display: none;
}/* ^- The count is an element floating within that. */.mx_NotificationBadge.mx_NotificationBadge_visible {
background-color: var(--cpd-color-icon-secondary);
/* For enhanced visibility under contrast control */
outline: 1px solid transparent;
/* Create a flexbox to order the count a bit easier */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
/* The following is the floating badge */
}/* These are the 3 background types */.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot {
width: 8px;
height: 8px;
border-radius: 8px;
background-color: var(--cpd-color-icon-primary);
}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot .mx_NotificationBadge_count {
display: none;
}/* Redundant sounding name, but a notification badge that indicates there is a regular,
* non-highlight notification
* The green colour only applies for notification dot: badges indicating the same notification
* level are the standard grey.
*/.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot.mx_NotificationBadge_level_notification {
background-color: var(--cpd-color-icon-success-primary);
}/* Badges for highlight notifications. Style for notification level
* badges is in _EventTile.scss because it applies only to notification
* dots, not badges.
*/.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_level_highlight {
background-color: var(--cpd-color-icon-critical-primary);
}.mx_NotificationBadge.mx_NotificationBadge_visible > svg {
width: 16px;
height: 16px;
}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_2char {
width: 1rem;
height: 1rem;
border-radius: 1rem;
}.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_3char {
width: 1.625rem;
height: 1rem;
border-radius: 1rem;
}.mx_NotificationBadge.mx_NotificationBadge_visible .mx_NotificationBadge_count {
font-size: 0.625rem;
line-height: 0.875rem;
font-weight: var(--cpd-font-weight-semibold);
color: var(--cpd-color-text-on-solid-primary);
}/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.
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_OverflowTileView {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: var(--cpd-color-text-primary);
cursor: pointer;
}.mx_OverflowTileView_text {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
overflow: hidden;
font: var(--cpd-font-body-md-regular);
text-overflow: ellipsis;
white-space: nowrap;
font-style: italic;
}.mx_OverflowTileView:hover {
padding-right: 30px;
position: relative; /* to keep the chevron aligned */
}.mx_OverflowTileView:hover .mx_OverflowTileView_chevron {
display: inline;
}.mx_OverflowTileView_chevron {
position: absolute;
top: calc(50% - 12px); /* center */
right: 0;
width: 24px;
height: 24px;
color: #b9bec6;
display: none;
}.mx_OverflowTileView_icon {
padding-left: 3px;
padding-right: 12px;
padding-top: 4px;
padding-bottom: 4px;
position: relative;
line-height: 0;
}/*
Copyright 2024 New Vector Ltd.
Copyright 2017 Travis Ralston
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_PinnedEventTile {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--cpd-space-4x);
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}.mx_PinnedEventTile .mx_PinnedEventTile_wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: var(--cpd-space-1x);
/* Remove avatar width and space between the avatar and the wrapper */
/* We need it to make the location fit */
width: calc(100% - var(--cpd-space-4x) - 32px);
/* Prevent a long sender name to overflow the tile */
overflow: hidden;
}.mx_PinnedEventTile .mx_PinnedEventTile_wrapper .mx_PinnedEventTile_top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--cpd-space-1x);
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}.mx_PinnedEventTile .mx_PinnedEventTile_wrapper .mx_PinnedEventTile_top .mx_PinnedEventTile_sender {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font: var(--cpd-font-body-md-semibold);
}.mx_PinnedEventTile .mx_PinnedEventTile_wrapper .mx_PinnedEventTile_thread {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--cpd-space-2x);
font: var(--cpd-font-body-sm-regular);
}.mx_PinnedEventTile .mx_PinnedEventTile_wrapper .mx_PinnedEventTile_thread svg {
width: 20px;
fill: var(--cpd-color-icon-tertiary);
}.mx_PinnedEventTile .mx_PinnedEventTile_wrapper .mx_PinnedEventTile_thread span {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
color: var(--cpd-color-text-secondary);
}.mx_PinnedEventTile .mx_PinnedEventTile_wrapper .mx_PinnedEventTile_thread button {
background: transparent;
border: none;
cursor: pointer;
text-decoration: underline;
}/*
* Copyright 2024 New Vector Ltd.
* Copyright 2024 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_PinnedMessageBanner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: var(--cpd-space-4x);
/* 64px = 63px + 1px from the bottom border */
height: 63px;
padding: 0 var(--cpd-space-4x);
background-color: var(--cpd-color-bg-canvas-default);
border-bottom: 1px solid var(--cpd-color-gray-400);
/* From figma */
-webkit-box-shadow: 0 var(--cpd-space-2x) var(--cpd-space-6x) calc(var(--cpd-space-2x) * -1) rgb(27, 29, 34, 0.1);
box-shadow: 0 var(--cpd-space-2x) var(--cpd-space-6x) calc(var(--cpd-space-2x) * -1) rgb(27, 29, 34, 0.1);
}.mx_PinnedMessageBanner .mx_PinnedMessageBanner_main {
color: inherit;
background: transparent;
border: none;
text-align: start;
cursor: pointer;
height: 100%;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}.mx_PinnedMessageBanner .mx_PinnedMessageBanner_main .mx_PinnedMessageBanner_content {
display: grid;
grid-template:
"indicators pinIcon title" auto
"indicators pinIcon message" auto;
grid-column-gap: var(--cpd-space-2x);
-webkit-column-gap: var(--cpd-space-2x);
-moz-column-gap: var(--cpd-space-2x);
column-gap: var(--cpd-space-2x);
}.mx_PinnedMessageBanner .mx_PinnedMessageBanner_main .mx_PinnedMessageBanner_Indicators {
grid-area: indicators;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: var(--cpd-space-0-5x);
height: 100%;
}.mx_PinnedMessageBanner .mx_PinnedMessageBanner_main .mx_PinnedMessageBanner_Indicators .mx_PinnedMessageBanner_Indicator {
width: var(--cpd-space-0-5x);
background-color: var(--cpd-color-gray-600);
height: 100%;
}.mx_PinnedMessageBanner .mx_PinnedMessageBanner_main .mx_PinnedMessageBanner_Indicators .mx_PinnedMessageBanner_Indicator--active {
background-color: var(--cpd-color-icon-accent-primary);
}.mx_PinnedMessageBanner .mx_PinnedMessageBanner_main .mx_PinnedMessageBanner_Indicators .mx_PinnedMessageBanner_Indicator--hidden {
background-color: transparent;
}.mx_PinnedMessageBanner .mx_PinnedMessageBanner_main .mx_PinnedMessageBanner_PinIcon {
grid-area: pinIcon;
align-self: center;
fill: var(--cpd-color-icon-secondary-alpha);
}.mx_PinnedMessageBanner .mx_PinnedMessageBanner_main .mx_PinnedMessageBanner_title {
grid-area: title;
font: var(--cpd-font-body-sm-regular);
color: var(--cpd-color-text-action-accent);
line-height: 20px;
}.mx_PinnedMessageBanner .mx_PinnedMessageBanner_main .mx_PinnedMessageBanner_title .mx_PinnedMessageBanner_title_counter {
font: var(--cpd-font-body-sm-semibold);
}.mx_PinnedMessageBanner .mx_PinnedMessageBanner_main .mx_PinnedMessageBanner_message {
grid-area: message;
line-height: 20px;
}.mx_PinnedMessageBanner .mx_PinnedMessageBanner_main .mx_PinnedMessageBanner_redactedMessage {
grid-area: message;
height: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}.mx_PinnedMessageBanner .mx_PinnedMessageBanner_actions {
white-space: nowrap;
}.mx_PinnedMessageBanner[data-single-message="true"] .mx_PinnedMessageBanner_content {
grid-template: "indicators pinIcon message" auto;
}.mx_PinnedMessageBanner[data-single-message="true"] .mx_PinnedMessageBanner_content .mx_PinnedMessageBanner_message {
line-height: 40px;
}/*
Copyright 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_PresenceIconView {
position: absolute;
top: 24px;
left: 24px;
width: 12px;
height: 12px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: var(--cpd-color-bg-canvas-default);
border-radius: 100%;
}.mx_PresenceIconView .mx_PresenceIconView_online {
color: var(--cpd-color-icon-accent-primary);
}.mx_PresenceIconView .mx_PresenceIconView_offline,
.mx_PresenceIconView .mx_PresenceIconView_dnd {
color: var(--cpd-color-icon-tertiary);
}.mx_PresenceIconView .mx_PresenceIconView_unavailable {
color: var(--cpd-color-icon-quaternary);
}/*
Copyright 2024 New Vector Ltd.
Copyright 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_PresenceLabel {
font-size: 0.6875rem;
opacity: 0.5;
}.mx_PresenceLabel_online {
color: var(--cpd-color-text-success-primary);
}/*
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_ReadReceiptGroup {
--ReadReceiptGroup_EventBubbleTile-spacing-end: 78px;
position: relative;
display: inline-block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 1;
}.mx_ReadReceiptGroup .mx_ReadReceiptGroup_button {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
height: 16px;
padding: 4px;
border-radius: 6px;
}.mx_ReadReceiptGroup .mx_ReadReceiptGroup_button.mx_AccessibleButton:hover {
background: var(--cpd-color-bg-subtle-secondary);
}.mx_ReadReceiptGroup .mx_ReadReceiptGroup_remainder {
color: var(--cpd-color-text-secondary);
font-size: 0.6875rem;
line-height: 1rem;
margin-right: 4px;
}.mx_ReadReceiptGroup .mx_ReadReceiptGroup_container {
position: relative;
display: block;
height: 100%;
}.mx_ReadReceiptGroup .mx_ReadReceiptGroup_container .mx_BaseAvatar {
/* Compound uses a border on default avatars but no border on actual images, we want a border in all cases */
-webkit-box-sizing: content-box;
box-sizing: content-box;
border: 1px solid var(--cpd-color-bg-canvas-default) !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;
will-change: left, top;
-webkit-transition:
left 0.1s ease-out,
top 0.3s ease-out;
transition:
left 0.1s ease-out,
top 0.3s ease-out;
-webkit-transition:
left var(--transition-short) ease-out,
top var(--transition-standard) ease-out;
transition:
left var(--transition-short) ease-out,
top var(--transition-standard) ease-out;
}.mx_ReadReceiptGroup_popup {
max-height: 300px;
width: 220px;
border-radius: 8px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: left;
font-size: 12px;
line-height: 15px;
right: 0;
}.mx_ReadReceiptGroup_popup.mx_ContextualMenu_top {
top: 8px;
}.mx_ReadReceiptGroup_popup.mx_ContextualMenu_bottom {
bottom: 8px;
}.mx_ReadReceiptGroup_popup .mx_ReadReceiptGroup_title {
font-size: 12px;
line-height: 15px;
margin: 16px 16px 8px;
font-weight: var(--cpd-font-weight-semibold);
/* shouldn’t be actually focusable */
outline: none;
}.mx_ReadReceiptGroup_popup .mx_AutoHideScrollbar .mx_ReadReceiptGroup_person {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
padding: 4px;
margin: 0 12px;
border-radius: 8px;
}.mx_ReadReceiptGroup_popup .mx_AutoHideScrollbar .mx_ReadReceiptGroup_person:hover {
background: #343a46;
}.mx_ReadReceiptGroup_popup .mx_AutoHideScrollbar .mx_ReadReceiptGroup_person:last-child {
margin-bottom: 8px;
}.mx_ReadReceiptGroup_popup .mx_AutoHideScrollbar .mx_ReadReceiptGroup_person .mx_BaseAvatar {
margin: 6px 8px;
-ms-flex-item-align: center;
align-self: center;
justify-self: center;
-ms-flex-negative: 0;
flex-shrink: 0; /* Long names should not shrink the picture */
}.mx_ReadReceiptGroup_popup .mx_AutoHideScrollbar .mx_ReadReceiptGroup_person .mx_ReadReceiptGroup_name {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
overflow: hidden;
}.mx_ReadReceiptGroup_popup .mx_AutoHideScrollbar .mx_ReadReceiptGroup_person .mx_ReadReceiptGroup_name p {
margin: 2px 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}.mx_ReadReceiptGroup_popup .mx_AutoHideScrollbar .mx_ReadReceiptGroup_person .mx_ReadReceiptGroup_name .mx_ReadReceiptGroup_secondary {
color: var(--cpd-color-text-secondary);
}.mx_ReadReceiptGroup_person--tooltip {
overflow-y: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}/*
Copyright 2024 New Vector Ltd.
Copyright 2018 Vector Creations 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_ReplyPreview {
border: 1px solid transparent;
border-bottom: none;
background: var(--cpd-color-bg-canvas-default);
max-height: 50vh;
overflow: auto;
}.mx_ReplyPreview .mx_ReplyPreview_section {
border-bottom: 1px solid transparent;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
row-gap: 8px;
padding: 8px 8px 0 0;
}.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-column-gap: 8px;
-moz-column-gap: 8px;
column-gap: 8px;
color: var(--cpd-color-text-primary);
font-weight: 400;
opacity: 0.4;
}.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_header .mx_ReplyPreview_header_cancel svg {
color: var(--cpd-color-text-primary);
width: 20px;
height: 20px;
-ms-flex-negative: 0;
flex-shrink: 0;
}.mx_RoomView_body .mx_ReplyPreview {
/* Add box-shadow to the reply preview on the main (left) panel only. */
/* It is not added to the preview on the (right) panel for threads and a chat with a maximized widget. */
-webkit-box-shadow: 0px -16px 32px rgba(0, 0, 0, 0.28);
box-shadow: 0px -16px 32px rgba(0, 0, 0, 0.28);
border-radius: 8px 8px 0 0;
}/*
Copyright 2024 New Vector Ltd.
Copyright 2020 Tulir Asokan
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_ReplyTile {
position: relative;
padding: 2px 0;
font: var(--cpd-font-body-md-regular);
}.mx_ReplyTile > a {
display: grid;
grid-template:
"sender" auto
"message" auto
/ 100%;
text-decoration: none;
color: var(--cpd-color-text-secondary);
-webkit-transition: color ease 0.15s;
transition: color ease 0.15s;
grid-gap: 2px;
gap: 2px;
max-width: 100%;
/* avoid overflow with wide content*/
}.mx_ReplyTile > a:hover {
color: var(--cpd-color-text-primary);
}.mx_ReplyTile .mx_RedactedBody {
line-height: 1.125rem;
}.mx_ReplyTile .mx_RedactedBody,
.mx_ReplyTile .mx_HiddenBody {
padding: 4px 0 2px 20px;
}.mx_ReplyTile .mx_RedactedBody::before, .mx_ReplyTile .mx_HiddenBody::before {
height: 13px;
width: 13px;
top: 3px;
}/* We do reply size limiting with CSS to avoid duplicating the TextualBody component. */.mx_ReplyTile .mx_EventTile_content {
grid-area: message;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}.mx_ReplyTile .mx_EventTile_content .mx_EventTile_body.mx_EventTile_bigEmoji {
line-height: 1.375rem !important; /* Same as var(--EventTile_group_line-line-height) */
font-size: 0.875rem !important; /* Override the big emoji override */
}/* in order to keep the message on two lines, we need to make the body inline*/.mx_ReplyTile .mx_EventTile_content .mx_EventTile_body {
display: inline;
}/* Hide line numbers and edited indicator*/.mx_ReplyTile .mx_EventTile_content .mx_EventTile_lineNumbers,
.mx_ReplyTile .mx_EventTile_content .mx_EventTile_edited {
display: none;
}/* Hack to cut content in tags too */.mx_ReplyTile .mx_EventTile_content .mx_EventTile_pre_container > pre {
overflow-x: scroll;
overflow-y: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
padding: 4px;
}.mx_ReplyTile .mx_EventTile_content .markdown-body blockquote,
.mx_ReplyTile .mx_EventTile_content .markdown-body dl,
.mx_ReplyTile .mx_EventTile_content .markdown-body ol,
.mx_ReplyTile .mx_EventTile_content .markdown-body p,
.mx_ReplyTile .mx_EventTile_content .markdown-body pre,
.mx_ReplyTile .mx_EventTile_content .markdown-body table,
.mx_ReplyTile .mx_EventTile_content .markdown-body ul {
margin-bottom: 4px;
}.mx_ReplyTile.mx_ReplyTile_info {
padding-top: 0;
}.mx_ReplyTile.mx_ReplyTile_inline > a {
/* Render replies to emotes inline with the sender avatar */
grid-template:
"sender message" auto
/ -webkit-max-content auto;
grid-template:
"sender message" auto
/ max-content auto;
gap: 4px; /* increase spacing */
}.mx_ReplyTile .mx_ReplyTile_sender {
grid-area: sender;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 4px;
}.mx_ReplyTile .mx_ReplyTile_sender .mx_DisambiguatedProfile {
font: var(--cpd-font-body-md-regular);
display: inline-block; /* anti-zalgo, with overflow hidden */
padding: 0;
margin: 0;
/* truncate long display names */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}.mx_ReplyTile .mx_ReplyTile_sender .mx_BaseAvatar {
/* Prevent crushing by the flexbox */
-ms-flex-negative: 0;
flex-shrink: 0;
}/*
Copyright 2024 New Vector Ltd.
Copyright 2020 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_RoomBreadcrumbs {
width: 100%;
/* Create a flexbox for the crumbs */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin-bottom: 12px;
/* These classes come from the CSSTransition component. There's many more classes we */
/* could care about, but this is all we worried about for now. The animation works by */
}.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_crumb {
margin-right: 8px;
width: 32px;
}/* sliding it into view. */.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter {
-webkit-transform: translateX(-40px);
transform: translateX(-40px); /* 32px for the avatar, 8px for the margin */
}/* first triggering the enter state with the newest breadcrumb off screen (-40px) then */.mx_RoomBreadcrumbs.mx_RoomBreadcrumbs-enter-active {
-webkit-transform: translateX(0);
transform: translateX(0);
/* Timing function is as-requested by design. */
/* NOTE: The transition time MUST match the value passed to CSSTransition! */
-webkit-transition: -webkit-transform 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
transition: -webkit-transform 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
transition: transform 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
transition: transform 640ms cubic-bezier(0.66, 0.02, 0.36, 1), -webkit-transform 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
}.mx_RoomBreadcrumbs .mx_RoomBreadcrumbs_placeholder {
font: var(--cpd-font-body-md-semibold);
line-height: 32px; /* specifically to match the height this is not scaled */
height: 32px;
}/*
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_RoomCallBanner {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 12px 16px;
color: var(--cpd-color-text-primary);
background-color: var(--cpd-color-bg-subtle-secondary);
cursor: pointer;
}.mx_RoomCallBanner_text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}.mx_RoomCallBanner_label {
color: var(--cpd-color-text-primary);
font-weight: var(--cpd-font-weight-semibold);
padding-right: 8px;
}.mx_RoomCallBanner_label svg {
display: inline-block;
vertical-align: middle;
color: var(--cpd-color-text-secondary);
width: 16px;
height: 16px;
margin-right: 8px;
}/*
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_RoomHeader {
height: 64px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 var(--cpd-space-3x) 0 calc(var(--cpd-space-3x) + var(--cpd-space-1-5x));
border-bottom: 1px solid var(--cpd-color-gray-400);
background-color: var(--cpd-color-bg-canvas-default);
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}.mx_RoomHeader button:has(svg.mx_RoomHeader_toggled) {
/* For enhanced visibility under contrast control */
outline: 1px solid transparent;
}.mx_RoomHeader:hover {
background-color: var(--cpd-color-bg-action-secondary-hovered);
}.mx_RoomHeader_infoWrapper {
/* unset button styles */
color: inherit;
background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
background: initial;
border: medium none currentcolor;
border: initial;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
cursor: pointer;
gap: var(--cpd-space-3x);
text-align: left;
height: 100%;
padding: 0;
}.mx_RoomHeader_info {
/* We want the spacing to be 64px, 13x = 52px but we have a flex gap of
12px set on the flex container, which sums up to 64 */
padding-right: var(--cpd-space-13x);
}.mx_RoomHeader_truncated {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
}.mx_RoomHeader_heading {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--cpd-space-1x);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}.mx_RoomHeader_icon {
-ms-flex-negative: 0;
flex-shrink: 0;
padding: var(--cpd-space-1x);
}.mx_RoomHeader .mx_FacePile {
color: var(--cpd-color-text-secondary);
background: var(--cpd-color-bg-canvas-default);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: var(--cpd-space-2x);
border-radius: 9999px;
padding: var(--cpd-space-1-5x);
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font: var(--cpd-font-body-sm-medium);
}/* RoomAvatar doesn't pass classes down to avatar
So set style here
using div because compound classes are not stable */.mx_RoomHeader .mx_FacePile > div {
-ms-flex-negative: 0;
flex-shrink: 0;
}.mx_RoomHeader .mx_FacePile:hover {
color: var(--cpd-color-text-primary);
background: var(--cpd-color-bg-subtle-primary);
}.mx_RoomHeader .mx_FacePile.mx_FacePile_toggled {
background: var(--cpd-color-bg-success-subtle);
color: var(--cpd-color-text-action-accent);
font: var(--cpd-font-body-sm-semibold);
/* For enhanced visibility under contrast control */
outline: 1px solid transparent;
}.mx_RoomHeader .mx_BaseAvatar {
-ms-flex-negative: 0;
flex-shrink: 0;
}.mx_RoomHeader_videoCallOption {
/* Workaround for https://github.com/element-hq/compound/issues/331 */
min-width: 240px;
}.mx_RoomHeader .mx_RoomHeader_toggled {
fill: var(--cpd-color-icon-accent-primary);
}/*
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_RoomInfoLine {
color: var(--cpd-color-text-secondary);
display: inline-block;
}.mx_RoomInfoLine svg {
margin-right: 6px;
vertical-align: -2px;
color: var(--cpd-color-gray-800);
}.mx_RoomInfoLine .mx_RoomInfoLine_members {
color: inherit;
text-decoration: inherit;
font-weight: inherit;
}.mx_RoomInfoLine .mx_RoomInfoLine_members::before {
content: "·"; /* visual separator */
margin: 0 6px;
}/*
Copyright 2024 New Vector Ltd.
Copyright 2023 Nordeck IT + Consulting GmbH
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_RoomKnocksBar {
background-color: var(--cpd-color-bg-subtle-secondary);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: var(--cpd-space-2x) var(--cpd-space-4x);
}.mx_RoomKnocksBar_content {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
margin: 0 var(--cpd-space-3x);
}.mx_RoomKnocksBar_paragraph {
color: var(--cpd-color-text-secondary);
font-size: var(--cpd-font-size-body-sm);
margin: 0;
}.mx_RoomKnocksBar_link {
margin-left: var(--cpd-space-3x);
}.mx_RoomKnocksBar_action,
.mx_RoomKnocksBar_avatar {
-ms-flex-item-align: center;
align-self: center;
-ms-flex-negative: 0;
flex-shrink: 0;
}.mx_RoomKnocksBar_action + .mx_RoomKnocksBar_action {
margin-left: var(--cpd-space-3x);
}.mx_RoomKnocksBar_avatar + .mx_RoomKnocksBar_avatar {
margin-left: calc(var(--cpd-space-4x) * -1);
}/*
Copyright 2024 New Vector Ltd.
Copyright 2015-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_RoomPreviewBar {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
}.mx_RoomPreviewBar h3 {
font-size: 1.125rem;
font-weight: var(--cpd-font-weight-semibold);
}.mx_RoomPreviewBar h3.mx_RoomPreviewBar_spinnerTitle {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0;
}.mx_RoomPreviewBar h3,
.mx_RoomPreviewBar .mx_RoomPreviewBar_message p {
/* break-word, with fallback to break-all, which is wider supported */
word-break: break-all;
word-break: break-word;
}.mx_RoomPreviewBar .mx_Spinner {
width: auto;
height: auto;
margin: 10px 10px 10px 0;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}.mx_RoomPreviewBar .mx_RoomPreviewBar_footer {
font-size: 0.75rem;
line-height: 1.25rem;
}.mx_RoomPreviewBar .mx_RoomPreviewBar_footer .mx_Spinner {
vertical-align: middle;
display: inline-block;
}.mx_RoomPreviewBar_actions {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}.mx_RoomPreviewBar_message {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}.mx_RoomPreviewBar_message p {
overflow-wrap: break-word;
}.mx_RoomPreviewBar_panel {
padding: 8px 8px 8px 20px;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
padding: 3px 8px;
}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions > * {
margin-left: 12px;
}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message {
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
flex: 1 0 0;
min-width: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message > * {
margin: 4px;
}/* With maximised widgets, the panel fits in better when rounded */.mx_MainSplit_maximisedWidget .mx_RoomPreviewBar_panel {
margin: 8px;
margin: var(--container-gap-width);
margin-right: calc(8px / 2);
margin-right: calc(var(--container-gap-width) / 2); /* Shared with right panel */
margin-top: 0; /* Already covered by apps drawer */
border-radius: 8px;
}.mx_RoomPreviewBar_dialog {
margin: auto;
-webkit-box-sizing: content;
box-sizing: content;
width: 400px;
border-radius: 4px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 20px;
text-align: center;
}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message > * {
margin: 5px 0 20px 0;
}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton {
padding: 7px 50px; /* extra wide */
}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions > * {
margin-top: 12px;
}.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
/* to account for the padding of the primary button which causes inconsistent look between */
/* subsequent secondary (text) buttons */
margin-bottom: 7px;
}.mx_RoomPreviewBar_Invite {
max-height: 100vh;
overflow-y: auto;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}.mx_RoomPreviewBar_Invite h3 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: pre-wrap;
overflow: hidden;
}.mx_RoomPreviewBar_inviter {
font-weight: var(--cpd-font-weight-semibold);
}a.mx_RoomPreviewBar_inviter {
text-decoration: underline;
cursor: pointer;
}.mx_RoomPreviewBar_inviter_mxid {
color: var(--cpd-color-text-secondary);
}.mx_RoomPreviewBar_icon {
margin-right: 8px;
vertical-align: text-top;
}.mx_RoomPreviewBar_fullWidth {
width: 100%;
}/*
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_RoomPreviewCard {
padding: 32px 24px !important; /* Override SpaceRoomView's default padding */
margin: auto;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 480px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: var(--cpd-color-bg-subtle-secondary);
border-radius: 8px;
position: relative;
font: var(--cpd-font-body-md-regular);
}.mx_RoomPreviewCard .mx_RoomPreviewCard_notice {
font-weight: var(--cpd-font-weight-semibold);
line-height: 1.5rem;
color: var(--cpd-color-text-primary);
margin-top: 24px;
}.mx_RoomPreviewCard .mx_RoomPreviewCard_notice svg {
height: 1em;
width: 1em;
margin-right: 8px;
color: var(--cpd-color-text-secondary);
vertical-align: -2px;
}.mx_RoomPreviewCard .mx_RoomPreviewCard_inviter {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 20px;
font-size: 0.9375rem;
}.mx_RoomPreviewCard .mx_RoomPreviewCard_inviter > div {
margin-left: 8px;
}.mx_RoomPreviewCard .mx_RoomPreviewCard_inviter > div .mx_RoomPreviewCard_inviter_name {
line-height: 1.125rem;
}.mx_RoomPreviewCard .mx_RoomPreviewCard_inviter > div .mx_RoomPreviewCard_inviter_mxid {
color: var(--cpd-color-text-secondary);
}.mx_RoomPreviewCard .mx_RoomPreviewCard_avatar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}.mx_RoomPreviewCard .mx_RoomPreviewCard_avatar .mx_RoomPreviewCard_video {
width: 22px;
height: 22px;
padding: 14px;
border-radius: calc((50px + 2 * 3px) / 2);
background-color: var(--cpd-color-text-action-accent);
border: 3px solid var(--cpd-color-bg-subtle-secondary);
left: calc(-50px / 4 - 3px);
}.mx_RoomPreviewCard .mx_RoomPreviewCard_avatar .mx_RoomPreviewCard_video svg {
width: inherit;
height: inherit;
color: var(--cpd-color-text-primary);
}/* XXX Remove this when video rooms leave beta */.mx_RoomPreviewCard .mx_RoomPreviewCard_avatar .mx_BetaCard_betaPill {
position: absolute;
inset-block-start: 32px;
inset-inline-end: 24px;
}.mx_RoomPreviewCard h1.mx_RoomPreviewCard_name {
margin: 16px 0 !important; /* Override SpaceRoomView's default margins */
}.mx_RoomPreviewCard .mx_RoomPreviewCard_topic {
line-height: 1.375rem;
margin-top: 16px;
max-height: 160px;
overflow-y: auto;
}.mx_RoomPreviewCard .mx_FacePile {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 16px;
/* For enhanced visibility under contrast control */
outline: 1px solid transparent;
}.mx_RoomPreviewCard .mx_FacePile :first-child {
-ms-flex-negative: 0;
flex-shrink: 0;
}.mx_RoomPreviewCard .mx_RoomPreviewCard_joinButtons {
margin-top: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 20px;
}.mx_RoomPreviewCard .mx_RoomPreviewCard_joinButtons .mx_AccessibleButton {
max-width: 200px;
padding: 14px 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}/*
Copyright 2024 New Vector Ltd.
Copyright 2024 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_RoomSearchAuxPanel {
/* use `min-height` rather than height, to allow room for the text to wrap if the window is narrow */
min-height: 84px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-color: var(--cpd-color-bg-canvas-default);
border-style: solid;
border-width: 1px 0;
padding: var(--cpd-space-3x);
-webkit-box-sizing: border-box;
box-sizing: border-box;
gap: var(--cpd-space-2x);
}.mx_RoomSearchAuxPanel .mx_RoomSearchAuxPanel_summary {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
display: inherit; /* flex */
gap: var(--cpd-space-2x);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
}.mx_RoomSearchAuxPanel .mx_RoomSearchAuxPanel_summary > svg {
padding: var(--cpd-space-2x);
border-radius: var(--cpd-space-2x);
background-color: var(--cpd-color-bg-subtle-secondary);
color: var(--cpd-color-icon-secondary);
-ms-flex-negative: 0;
flex-shrink: 0;
}.mx_RoomSearchAuxPanel .mx_RoomSearchAuxPanel_summary .mx_RoomSearchAuxPanel_summary_text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
font-size: 0.9375rem;
line-height: 1.375rem;
overflow: hidden;
}.mx_RoomSearchAuxPanel .mx_RoomSearchAuxPanel_summary .mx_RoomSearchAuxPanel_summary_text span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}.mx_RoomSearchAuxPanel .mx_RoomSearchAuxPanel_summary .mx_SearchWarning {
display: contents;
font-size: 0.8125rem;
line-height: 1.25rem;
color: var(--cpd-color-text-secondary);
}.mx_RoomSearchAuxPanel .mx_RoomSearchAuxPanel_buttons {
display: inherit; /* flex */
gap: var(--cpd-space-6x);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-negative: 0;
flex-shrink: 0;
}/*
Copyright 2024,2025 New Vector Ltd.
Copyright 2020 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_RoomSublist {
margin-left: 8px;
margin-bottom: 4px;
/* In the general case, we reserve space for each sublist header to prevent */
/* scroll jumps when they become sticky. However, that leaves a gap when */
}.mx_RoomSublist.mx_RoomSublist_hidden {
display: none;
}.mx_RoomSublist:not(.mx_RoomSublist_minimized) .mx_RoomSublist_headerContainer {
height: auto;
}.mx_RoomSublist .mx_RoomSublist_headerContainer {
/* Create a flexbox to make alignment easy */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
/* *************************** */
/* Sticky Headers Start */
/* Ideally we'd be able to use `position: sticky; top: 0; bottom: 0;` on the */
/* headerContainer, however due to our layout concerns we actually have to */
/* calculate it manually so we can sticky things in the right places. We also */
/* target the headerText instead of the container to reduce jumps when scrolling, */
/* and to help hide the badges/other buttons that could appear on hover. This */
/* all works by ensuring the header text has a fixed height when sticky so the */
/* fixed height of the container can maintain the scroll position. */
/* The combined height must be set in the LeftPanel component for sticky headers */
/* to work correctly. */
padding-bottom: 8px;
height: 24px;
color: var(--cpd-color-text-secondary);
}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickableContainer {
width: 100%;
}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
max-width: 100%;
/* Create a flexbox to make ordering easy */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
/* We use a generic sticky class for 2 reasons: to reduce style duplication and */
/* to identify when a header is sticky. If we didn't have a consistent sticky class, */
/* we'd have to do the "is sticky" checks again on click, as clicking the header */
/* We don't have a top style because the top is dependent on the room list header's */
/* height, and is therefore calculated in JS. */
/* The class, mx_RoomSublist_headerContainer_stickyTop, is applied though. */
}/* when sticky scrolls instead of collapses the list. */.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable.mx_RoomSublist_headerContainer_sticky {
position: fixed;
height: 32px; /* to match the header container */
/* width set by JS because of a compat issue between Firefox and Chrome */
width: calc(100% - 15px);
}/* *************************** */.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer {
/* Create another flexbox row because it's super easy to position the badge this way. */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}/* Apply the width and margin to the badge so the container doesn't occupy dead space */.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer .mx_NotificationBadge {
/* Do not set a width so the badges get properly sized */
margin-left: 8px; /* same as menu+aux buttons */
}/* Sticky Headers End */.mx_RoomSublist .mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_NotificationBadge {
margin-right: 4px; /* just to push it over a bit, aligning it with the other elements */
}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton,
.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton {
margin-left: 8px; /* should be the same as the notification badge */
position: relative;
width: 24px;
height: 24px;
border-radius: 8px;
}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton svg, .mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton svg {
width: 16px;
height: 16px;
position: absolute;
top: 4px;
left: 4px;
color: var(--cpd-color-icon-secondary);
}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:hover svg,
.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton:hover svg {
color: var(--cpd-color-alpha-gray-300);
}/* Hide the menu button by default */.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton {
visibility: hidden;
width: 0;
margin: 0;
}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
max-width: calc(100% - 16px); /* 16px is the badge width */
font: var(--cpd-font-body-sm-semibold);
/* Ellipsize any text overflow */
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn {
display: inline-block;
position: relative;
width: 14px;
height: 14px;
margin-right: 6px;
}.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn svg {
width: 18px;
height: 18px;
position: absolute;
color: var(--cpd-color-icon-secondary);
}/* stick to top), so we make sure to exclude the first visible sublist. */.mx_RoomSublist:not(.mx_RoomSublist_hidden) ~ .mx_RoomSublist .mx_RoomSublist_stickableContainer {
height: 24px;
}/* scrolled to the top above the first sublist (whose header can only ever */.mx_RoomSublist .mx_RoomSublist_resizeBox {
position: relative;
/* Create another flexbox column for the tiles */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
/* Class name comes from the ResizableBox component */
/* The hover state needs to use the whole sublist, not just the resizable box, */
}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_tiles {
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
flex: 1 0 0;
overflow: hidden;
overflow: clip;
/* need this to be flex otherwise the overflow hidden from above */
/* sometimes vertically centers the clipped list ... no idea why it would do this */
/* as the box model should be top aligned. Happens in both FF and Chromium */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-item-align: stretch;
align-self: stretch;
/* without this Firefox will prefer pushing the resizer & show more/less button into the overflow */
min-height: 0;
-webkit-mask-image: linear-gradient(0deg, transparent, black 4px);
mask-image: linear-gradient(0deg, transparent, black 4px);
}.mx_RoomSublist .mx_RoomSublist_resizeBox.mx_RoomSublist_resizeBox_forceExpanded .mx_RoomSublist_tiles {
/* in this state the div can collapse its height entirely in Chromium, */
/* so prevent that by allowing overflow */
overflow: visible;
/* clear the min-height to make it not collapse entirely in a state with no active resizer */
min-height: 0;
min-height: initial;
}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandles_showNButton {
-webkit-box-flex: 0;
-ms-flex: 0 0 32px;
flex: 0 0 32px;
}.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandles {
-webkit-box-flex: 0;
-ms-flex: 0 0 4px;
flex: 0 0 4px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
}/* so that selector is below and one level higher. */.mx_RoomSublist .mx_RoomSublist_resizeBox .mx_RoomSublist_resizerHandle {
cursor: ns-resize;
border-radius: 3px;
/* Override styles from library */
max-width: 64px;
height: 4px !important; /* Update RESIZE_HANDLE_HEIGHT if this changes */
/* This is positioned directly below the 'show more' button. */
position: relative !important;
bottom: 0 !important; /* override from library */
}.mx_RoomSublist .mx_RoomSublist_resizeBox:hover .mx_RoomSublist_resizerHandle, .mx_RoomSublist .mx_RoomSublist_resizeBox.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_resizerHandle {
opacity: 0.8;
background-color: var(--cpd-color-text-primary);
}.mx_RoomSublist .mx_RoomSublist_showNButton {
cursor: pointer;
font-size: 0.8125rem;
line-height: 1.125rem;
color: var(--cpd-color-text-secondary);
/* Update the render() function for RoomSublist if these change */
/* Update the ListLayout class for minVisibleTiles if these change. */
height: 24px;
padding-bottom: 4px;
/* We create a flexbox to cheat at alignment */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}.mx_RoomSublist .mx_RoomSublist_showNButton .mx_RoomSublist_showNButtonChevron {
position: relative;
width: 18px;
height: 18px;
margin-left: 12px;
margin-right: 16px;
color: var(--cpd-color-gray-800);
left: -1px; /* adjust for image position */
}.mx_RoomSublist.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton, .mx_RoomSublist:not(.mx_RoomSublist_minimized) > .mx_RoomSublist_headerContainer:focus-within .mx_RoomSublist_menuButton, .mx_RoomSublist:not(.mx_RoomSublist_minimized) > .mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton {
visibility: visible;
width: 24px;
margin-left: 8px;
}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer {
height: auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
-ms-flex-item-align: end;
align-self: flex-end;
margin-right: 0;
}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
max-width: 100%;
}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
visibility: visible;
width: 32px !important; /* !important to override hover styles */
height: 32px !important; /* !important to override hover styles */
margin-left: 0 !important; /* !important to override hover styles */
background-color: var(--cpd-color-alpha-gray-300);
margin-top: 8px;
}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton svg {
top: 8px;
left: 8px;
}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_resizeBox {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_showNButton {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_showNButton .mx_RoomSublist_showNButtonChevron {
margin-right: 12px; /* to center */
}.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_menuButton {
height: 16px;
}.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton, .mx_RoomSublist.mx_RoomSublist_minimized > .mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton {
visibility: visible;
position: absolute;
bottom: 48px; /* align to middle of name, 40px for aux button (with padding) and 8px for alignment */
right: 0;
width: 16px;
height: 16px;
border-radius: 0;
z-index: 1; /* occlude the list name */
/* This is the same color as the left panel background because it needs */
/* to occlude the sublist title */
background-color: rgba(38, 40, 45, 0.9);
}.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_menuButton svg, .mx_RoomSublist.mx_RoomSublist_minimized > .mx_RoomSublist_headerContainer:hover .mx_RoomSublist_menuButton svg {
top: 0;
left: 0;
}.mx_RoomSublist.mx_RoomSublist_minimized.mx_RoomSublist_hasMenuOpen.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_RoomSublist_menuButton, .mx_RoomSublist.mx_RoomSublist_minimized > .mx_RoomSublist_headerContainer:hover.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) .mx_RoomSublist_menuButton {
bottom: 8px; /* align to the middle of name, 40px less than the `bottom` above. */
}.mx_RoomSublist_contextMenu {
padding: 20px 16px;
width: 250px;
}.mx_RoomSublist_contextMenu hr {
margin-top: 16px;
margin-bottom: 16px;
margin-right: 16px; /* additional 16px */
border: 1px solid var(--cpd-color-text-primary);
opacity: 0.1;
}.mx_RoomSublist_contextMenu .mx_RoomSublist_contextMenu_title {
font-size: 0.9375rem;
line-height: 1.25rem;
font-weight: var(--cpd-font-weight-semibold);
margin-bottom: 4px;
}.mx_RoomSublist_contextMenu .mx_StyledRadioButton {
margin-top: 8px;
}.mx_RoomSublist_skeletonUI {
position: relative;
margin-left: 4px;
height: 240px;
}.mx_RoomSublist_skeletonUI::before {
background-color: var(--cpd-color-bg-subtle-secondary);
width: 100%;
height: 100%;
content: "";
position: absolute;
-webkit-mask-repeat: repeat-y;
mask-repeat: repeat-y;
-webkit-mask-size: auto 48px;
mask-size: auto 48px;
-webkit-mask-image: url(../../img/element-icons/roomlist/skeleton-ui.fde3810.svg);
mask-image: url(../../img/element-icons/roomlist/skeleton-ui.fde3810.svg);
}.mx_RoomSublist_minimized .mx_RoomSublist_skeletonUI {
width: 32px; /* cut off the horizontal lines in the svg */
margin-left: 10px; /* align with sublist + buttons */
}/*
Copyright 2024 New Vector Ltd.
Copyright 2020-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.
*//* Note: the room tile expects to be in a flexbox column container */.mx_RoomTile {
margin-bottom: 4px;
padding: 4px;
/* The tile is also a flexbox row itself */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
contain: content; /* Not strict as it will break when resizing a sublist vertically */
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: var(--cpd-font-size-body-sm);
}.mx_RoomTile.mx_RoomTile_selected,
.mx_RoomTile:hover,
.mx_RoomTile:focus-within,
.mx_RoomTile.mx_RoomTile_hasMenuOpen {
background-color: var(--cpd-color-alpha-gray-300);
border-radius: 8px;
}.mx_RoomTile .mx_DecoratedRoomAvatar,
.mx_RoomTile .mx_RoomTile_avatarContainer {
margin-right: 10px;
}.mx_RoomTile .mx_RoomTile_details {
min-width: 0;
}.mx_RoomTile .mx_RoomTile_titleContainer {
height: 32px;
min-width: 0;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
margin-right: 8px; /* spacing to buttons/badges */
/* Create a new column layout flexbox for the title parts */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}.mx_RoomTile .mx_RoomTile_titleContainer .mx_RoomTile_subtitle {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: var(--cpd-color-text-secondary);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 4px;
line-height: 1.25;
position: relative;
top: -1px;
}.mx_RoomTile .mx_RoomTile_titleContainer .mx_RoomTile_title,
.mx_RoomTile .mx_RoomTile_titleContainer .mx_RoomTile_subtitle_text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}.mx_RoomTile .mx_RoomTile_titleContainer .mx_RoomTile_title {
font: var(--cpd-font-body-md-regular);
line-height: 1.25;
}.mx_RoomTile .mx_RoomTile_titleContainer .mx_RoomTile_title.mx_RoomTile_titleHasUnreadEvents {
font-weight: var(--cpd-font-weight-semibold);
}.mx_RoomTile .mx_RoomTile_titleContainer .mx_RoomTile_titleWithSubtitle {
margin-top: -2px; /* shift the title up a bit more */
}.mx_RoomTile .mx_RoomTile_notificationsButton {
margin-left: 4px; /* spacing between buttons */
}.mx_RoomTile .mx_RoomTile_badgeContainer {
height: 16px;
/* don't set width so that it takes no space when there is no badge to show */
margin: auto 0; /* vertically align */
/* Create a flexbox to make aligning dot badges easier */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge {
margin-right: 2px; /* centering */
}.mx_RoomTile .mx_RoomTile_badgeContainer .mx_NotificationBadge_dot {
/* make the smaller dot occupy the same width for centering */
margin-left: 5px;
margin-right: 7px;
}/* The context menu buttons are hidden by default */.mx_RoomTile .mx_RoomTile_menuButton,
.mx_RoomTile .mx_RoomTile_notificationsButton {
width: 16px;
height: 16px;
padding: var(--cpd-space-0-5x);
-ms-flex-negative: 0;
flex-shrink: 0;
margin-top: auto;
margin-bottom: auto;
position: relative;
display: none;
}.mx_RoomTile .mx_RoomTile_menuButton svg, .mx_RoomTile .mx_RoomTile_notificationsButton svg {
width: inherit;
height: inherit;
display: block;
color: var(--cpd-color-icon-primary);
}/* If the room has an overriden notification setting then we always show the notifications menu button */.mx_RoomTile .mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
display: block;
}/* Hide the badge container on hover because it'll be a menu button */.mx_RoomTile:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky):hover .mx_RoomTile_badgeContainer, .mx_RoomTile:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky):focus-within .mx_RoomTile_badgeContainer, .mx_RoomTile:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky).mx_RoomTile_hasMenuOpen .mx_RoomTile_badgeContainer {
width: 0;
height: 0;
display: none;
}.mx_RoomTile:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky):hover .mx_RoomTile_notificationsButton,
.mx_RoomTile:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky):hover .mx_RoomTile_menuButton,
.mx_RoomTile:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky):focus-within .mx_RoomTile_notificationsButton,
.mx_RoomTile:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky):focus-within .mx_RoomTile_menuButton,
.mx_RoomTile:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky).mx_RoomTile_hasMenuOpen .mx_RoomTile_notificationsButton,
.mx_RoomTile:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky).mx_RoomTile_hasMenuOpen .mx_RoomTile_menuButton {
display: block;
}.mx_RoomTile.mx_RoomTile_minimized {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}.mx_RoomTile.mx_RoomTile_minimized .mx_DecoratedRoomAvatar,
.mx_RoomTile.mx_RoomTile_minimized .mx_RoomTile_avatarContainer {
margin-right: 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_RoomUpgradeWarningBar {
max-height: 235px;
background-color: var(--cpd-color-bg-subtle-secondary);
padding-left: 20px;
padding-right: 20px;
overflow: scroll;
}.mx_RoomUpgradeWarningBar_wrapped {
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-align: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
}.mx_RoomUpgradeWarningBar_header {
color: var(--cpd-color-text-critical-primary);
font-weight: bold;
}.mx_RoomUpgradeWarningBar_body {
color: var(--cpd-color-text-critical-primary);
}.mx_RoomUpgradeWarningBar_upgradelink {
color: var(--cpd-color-text-critical-primary);
text-decoration: underline;
}.mx_RoomUpgradeWarningBar_small {
color: var(--cpd-color-gray-900);
font-size: 70%;
}/*
Copyright 2024 New Vector Ltd.
Copyright 2019 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_SendMessageComposer {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
font: var(--cpd-font-body-md-regular);
/* fixed line height to prevent emoji from being taller than text */
line-height: 1.125rem;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-right: 6px;
/* don't grow wider than available space */
min-width: 0;
}.mx_SendMessageComposer .mx_BasicMessageComposer {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
/* min-height at this level so the mx_BasicMessageComposer_input */
/* still stays vertically centered when less than 55px. */
/* We also set this to ensure the voice message recording widget */
/* doesn't cause a jump. */
min-height: 55px;
}.mx_SendMessageComposer .mx_BasicMessageComposer .mx_BasicMessageComposer_input {
padding: 3px 0;
/* this will center the contenteditable */
/* in it's parent vertically */
/* while keeping the autocomplete at the top */
/* of the composer. The parent needs to be a flex container for this to work. */
margin: auto 0;
/* max-height at this level so autocomplete doesn't get scrolled too */
max-height: 140px;
overflow-y: auto;
}.mx_Stickers_content {
overflow: hidden;
}.mx_Stickers_content_container {
overflow: hidden;
height: 300px;
}#mx_persistedElement_stickerPicker .mx_AppTileFullWidth {
height: auto;
height: initial;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-left: none;
border-right: none;
border-bottom: none;
}#mx_persistedElement_stickerPicker .mx_AppTileMenuBar {
padding: 0;
}#mx_persistedElement_stickerPicker iframe {
/* Sticker picker depends on the fixed height previously used for all tiles */
height: 283px; /* height of the popout minus the AppTile menu bar */
}.mx_Stickers_contentPlaceholder {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}.mx_Stickers_contentPlaceholder p {
max-width: 200px;
}.mx_Stickers_addLink {
display: inline;
cursor: pointer;
color: var(--cpd-color-text-action-accent);
}/*
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_ThirdPartyMemberInfo {
padding: var(--cpd-space-4x);
}/*
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_ThreadSummary,
.mx_ThreadSummary_content {
color: var(--cpd-color-text-secondary);
}.mx_ThreadSummary,
.mx_ThreadSummary_icon {
margin-top: 8px;
}.mx_ThreadSummary {
min-width: 267px;
/* leave space on both left & right gutters */
max-width: min(calc(100% - var(--EventTile_group_line-spacing-inline-start)), 600px);
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
height: 40px;
position: relative;
background-color: var(--cpd-color-bg-subtle-secondary);
padding-inline: 12px 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
border-radius: 8px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
clear: both;
overflow: hidden;
border: 1px solid var(--cpd-color-bg-subtle-secondary); /* always render a border so the hover effect doesn't require a re-layout */
font: var(--cpd-font-body-sm-regular);
}.mx_ThreadSummary .mx_ThreadSummary_chevron {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 60px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* XXX: We use an HEXA `transparent` to work around a Safari <15.4 bug */
background: -webkit-gradient(linear, right top, left top, color-stop(50%, var(--cpd-color-bg-subtle-secondary)), to(#e1e6ec00));
background: linear-gradient(270deg, var(--cpd-color-bg-subtle-secondary) 50%, #e1e6ec00 100%);
opacity: 0;
-webkit-transform: translateX(60px);
transform: translateX(60px);
-webkit-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}.mx_ThreadSummary .mx_ThreadSummary_chevron svg {
position: absolute;
top: 50%;
right: var(--cpd-space-1x);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 24px;
height: 24px;
color: var(--cpd-color-text-secondary);
}.mx_ThreadSummary:hover,
.mx_ThreadSummary:focus {
border-color: var(--cpd-color-gray-400);
}.mx_ThreadSummary:hover .mx_ThreadSummary_chevron, .mx_ThreadSummary:focus .mx_ThreadSummary_chevron {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}.mx_ThreadSummary .mx_ThreadSummary_sender,
.mx_ThreadSummary .mx_ThreadSummary_content,
.mx_ThreadSummary .mx_ThreadSummary_replies_amount {
line-height: var(--EventTile_ThreadSummary-line-height);
}.mx_ThreadSummary .mx_ThreadSummary_sender,
.mx_ThreadSummary .mx_ThreadSummary_content {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}.mx_ThreadSummary .mx_ThreadSummary_sender {
font-weight: var(--cpd-font-weight-semibold);
}.mx_ThreadSummary .mx_ThreadSummary_content {
margin-left: 4px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}.mx_ThreadSummary .mx_ThreadSummary_replies_amount {
color: var(--cpd-color-text-secondary);
font-weight: var(--cpd-font-weight-semibold);
white-space: nowrap;
position: relative;
padding: 0 12px 0 8px;
}.mx_MessagePanel_narrow .mx_ThreadSummary {
min-width: 0;
min-width: initial;
max-width: 100%; /* prevent overflow */
width: auto;
width: initial;
}.mx_ThreadSummary_avatar {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
-ms-flex-negative: 0;
flex-shrink: 0;
}.mx_ThreadSummary_icon {
display: inline-block;
margin-bottom: 8px;
}.mx_ThreadSummary_icon > svg {
display: inline-block;
height: 18px;
width: 18px;
-ms-flex-negative: 0;
flex-shrink: 0;
color: var(--cpd-color-icon-tertiary);
vertical-align: middle;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
margin-top: -2px;
}a.mx_ThreadSummary_icon {
color: var(--cpd-color-text-secondary);
}/*
Copyright 2024 New Vector Ltd.
Copyright 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_TopUnreadMessagesBar {
z-index: 1000;
position: absolute;
top: 24px;
right: 24px;
width: 38px;
}.mx_TopUnreadMessagesBar::after {
content: "";
position: absolute;
top: -8px;
left: 11px;
width: 4px;
height: 4px;
border-radius: 16px;
background-color: var(--cpd-color-bg-canvas-default);
border: 6px solid var(--cpd-color-icon-accent-tertiary);
pointer-events: none;
}.mx_TopUnreadMessagesBar_scrollUp {
height: 38px;
width: 38px;
border-radius: 19px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: var(--cpd-color-bg-canvas-default);
border: 1.3px solid var(--cpd-color-icon-tertiary);
cursor: pointer;
}.mx_TopUnreadMessagesBar_scrollUp svg {
width: 24px;
height: 24px;
padding: 6px;
color: var(--cpd-color-icon-tertiary);
}.mx_TopUnreadMessagesBar_markAsRead {
display: block;
width: 18px;
height: 18px;
background: var(--cpd-color-bg-canvas-default);
border: 1.3px solid var(--cpd-color-icon-tertiary);
border-radius: 10px;
margin: 5px auto;
}.mx_TopUnreadMessagesBar_markAsRead svg {
width: 16px;
height: 16px;
padding: 1px;
color: var(--cpd-color-icon-tertiary);
}/*
Copyright 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_UserIdentityWarning {
/* 42px is the padding-left of .mx_MessageComposer_wrapper in res/css/views/rooms/_MessageComposer.pcss */
margin-left: calc(-42px + 18px);
margin-left: calc(-42px + var(--RoomView_MessageList-padding));
}.mx_UserIdentityWarning .mx_UserIdentityWarning_row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}.mx_UserIdentityWarning .mx_UserIdentityWarning_row .mx_BaseAvatar {
margin-left: var(--cpd-space-2x);
}.mx_UserIdentityWarning .mx_UserIdentityWarning_row .mx_UserIdentityWarning_main {
margin-left: var(--cpd-space-6x);
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}.mx_UserIdentityWarning .mx_UserIdentityWarning_row .mx_UserIdentityWarning_main.critical {
color: var(--cpd-color-text-critical-primary);
}.mx_UserIdentityWarning.critical {
background: -webkit-gradient(linear, left top, left bottom, from(var(--cpd-color-red-100)), to(var(--cpd-color-theme-bg)));
background: linear-gradient(180deg, var(--cpd-color-red-100) 0%, var(--cpd-color-theme-bg) 100%);
}.mx_MessageComposer.mx_MessageComposer--compact > .mx_UserIdentityWarning {
margin-left: calc(-25px + 18px);
margin-left: calc(-25px + var(--RoomView_MessageList-padding));
}/*
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_VoiceRecordComposerTile_stop {
/* 20px + 4px padding + 2px border makes this a 32px square (as intended) */
width: 20px;
height: 20px;
padding: var(--cpd-space-1x);
border: 2px solid var(--cpd-color-gray-600);
border-radius: 32px;
margin-right: 2px; /* between us and the waveform component */
}.mx_VoiceRecordComposerTile_stop svg {
width: inherit;
height: inherit;
color: #ff5b55;
}.mx_VoiceRecordComposerTile_delete {
width: 24px;
height: 24px;
vertical-align: middle;
margin-right: 2px; /* distance from left edge of waveform container (container has some margin too) */
}.mx_VoiceRecordComposerTile_delete svg {
width: inherit;
height: inherit;
color: var(--cpd-color-gray-600);
}.mx_VoiceRecordComposerTile_uploadingState {
margin-right: 10px;
color: var(--cpd-color-text-secondary);
}.mx_VoiceRecordComposerTile_failedState {
margin-right: 21px;
}.mx_VoiceRecordComposerTile_failedState .mx_VoiceRecordComposerTile_uploadState_badge {
display: inline-block;
margin-right: 4px;
vertical-align: middle;
}.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer {
/* Note: remaining class properties are in the PlayerContainer CSS. */
/* fixed height to reduce layout jumps with the play button appearing */
/* https://github.com/vector-im/element-web/issues/18431 */
height: 32px;
margin: 6px; /* force the composer area to put a gutter around us */
margin-right: 6px; /* isolate from stop/send button */
position: relative; /* important for the live circle */
}.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording {
/* We are putting the circle in this padding, so we need +10px from the regular */
/* padding on the left side. */
padding-left: 22px;
}.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording::before {
-webkit-animation: recording-pulse 2s infinite;
animation: recording-pulse 2s infinite;
content: "";
background-color: #ff5b55;
width: 10px;
height: 10px;
position: absolute;
left: 12px; /* 12px from the left edge for container padding */
top: 17px; /* vertically center (middle align with clock) */
border-radius: 10px;
}.mx_MessageComposer_wysiwyg .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording::before {
top: 15px; /* vertically center (middle align with clock) */
}/* The keyframes are slightly weird here to help make a ramping/punch effect *//* for the recording dot. We start and end at 100% opacity to help make the *//* dot feel a bit like a real lamp that is blinking: the animation ends up *//* spending a lot of its time showing a steady state without a fade effect. *//* This lamp effect extends into why the 0% opacity keyframe is not in the *//* midpoint: lamps take longer to turn off than they do to turn on, and the *//* extra frames give it a bit of a realistic punch for when the animation is *//* ramping back up to 100% opacity. *//* Target animation timings: steady for 1.5s, fade out for 0.3s, fade in for 0.2s *//* (intended to be used in a loop for 2s animation speed) */@-webkit-keyframes recording-pulse {
0% {
opacity: 1;
}
35% {
opacity: 0;
}
65% {
opacity: 1;
}
}@keyframes recording-pulse {
0% {
opacity: 1;
}
35% {
opacity: 0;
}
65% {
opacity: 1;
}
}@media (forced-colors: active) {
.mx_VoiceMessagePrimaryContainer {
outline: 1px solid transparent;
}
}/*
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_WhoIsTypingTile {
margin-left: -18px; /* offset padding from mx_RoomView_MessageList to center avatars */
padding-top: 18px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}/* position the indicator in the same place horizontally as .mx_EventTile_avatar. */.mx_WhoIsTypingTile_avatars {
-webkit-box-flex: 0;
-ms-flex: 0 0 82px;
flex: 0 0 82px; /* 18 (padding on message list) + 64 (padding on event lines) */
text-align: center;
}.mx_WhoIsTypingTile_avatars > :not(:first-child) {
margin-left: -12px;
}.mx_WhoIsTypingTile_avatars .mx_BaseAvatar {
border: 1px solid var(--cpd-color-bg-canvas-default);
border-radius: 40px;
}.mx_WhoIsTypingTile_remainingAvatarPlaceholder {
position: relative;
display: inline-block;
color: var(--cpd-color-text-primary);
background-color: var(--cpd-color-gray-400);
border: 1px solid var(--cpd-color-bg-canvas-default);
border-radius: 40px;
width: 24px;
height: 24px;
line-height: 1.5rem;
font-size: 0.8em;
vertical-align: top;
text-align: center;
}.mx_WhoIsTypingTile_label {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
font: var(--cpd-font-body-md-semibold);
color: #b9bec6;
}.mx_WhoIsTypingTile_label > span {
background-image: url(../../img/typing-indicator-2x.e13c259.gif);
background-size: 25px;
background-position: left bottom;
background-repeat: no-repeat;
padding-bottom: 15px;
display: block;
}.mx_MatrixChat_useCompactLayout .mx_WhoIsTypingTile {
padding-top: 4px;
}/*
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_EditWysiwygComposer {
--EditWysiwygComposer-padding-inline: 3px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
max-width: 100%; /* disable overflow */
width: auto;
gap: 8px;
padding: 8px 3px;
padding: 8px var(--EditWysiwygComposer-padding-inline);
}.mx_EditWysiwygComposer .mx_WysiwygComposer_Editor_content {
border-radius: 4px;
border: solid 1px transparent;
background-color: var(--cpd-color-bg-canvas-default);
max-height: 200px;
padding: 3px 6px;
}.mx_EditWysiwygComposer .mx_WysiwygComposer_Editor_content:focus {
border-color: var(--cpd-color-green-400);
}.mx_EditWysiwygComposer .mx_EditWysiwygComposer_buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap-reverse;
flex-flow: row wrap-reverse; /* display "Save" over "Cancel" */
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
gap: 5px;
-webkit-margin-start: auto;
margin-inline-start: auto;
}.mx_EditWysiwygComposer .mx_EditWysiwygComposer_buttons .mx_AccessibleButton {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-width: 100px; /* magic number to align the edge of the button with the input area */
}.mx_EditWysiwygComposer .mx_FormattingButtons_Button:first-child {
margin-left: 0px;
}/*
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_SendWysiwygComposer {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
font: var(--cpd-font-body-md-regular);
/* fixed line height to prevent emoji from being taller than text */
line-height: 1.125rem;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-right: 13px;
gap: 8px;
}.mx_SendWysiwygComposer .mx_FormattingButtons {
margin-left: 12px;
}.mx_SendWysiwygComposer .mx_WysiwygComposer_Editor {
border: 1px solid;
border-color: var(--cpd-color-gray-400);
padding: 6px 11px 6px 12px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
gap: 10px;
}.mx_SendWysiwygComposer .mx_WysiwygComposer_Editor .mx_E2EIcon {
margin: 0 0 7px 0;
width: 12px;
height: 12px;
}.mx_SendWysiwygComposer .mx_WysiwygComposer_Editor[data-is-expanded="true"] {
border-radius: 14px;
}.mx_SendWysiwygComposer .mx_WysiwygComposer_Editor[data-is-expanded="true"] .mx_WysiwygComposer_Editor_container {
margin-top: 3px;
margin-bottom: 3px;
}.mx_SendWysiwygComposer .mx_WysiwygComposer_Editor[data-is-expanded="false"] {
border-radius: 40px;
}.mx_SendWysiwygComposer .mx_WysiwygComposer_Editor .mx_WysiwygComposer_Editor_container {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 22px;
margin-bottom: 2px;
/* don't grow wider than available space */
width: 0;
}.mx_SendWysiwygComposer .mx_WysiwygComposer_Editor .mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content {
/* this will center the contenteditable */
/* in it's parent vertically */
/* while keeping the autocomplete at the top */
/* of the composer. The parent needs to be a flex container for this to work. */
margin: auto 0;
/* the line height is $font-22px (set in _Editor.pcss) and we want to display 16 lines */
max-height: calc(16 * 1.375rem);
overflow-y: auto;
}.mx_SendWysiwygComposer-focused .mx_WysiwygComposer_Editor {
border-color: var(--cpd-color-gray-600);
}/*
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_WysiwygComposer_Editor_container {
/* These are set in Javascript */
--avatar-letter: "";
--avatar-background: unset;
--placeholder: "";
}@keyframes visualbell {
from {
background-color: #800;
}
to {
background-color: var(--cpd-color-bg-canvas-default);
}
}.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content {
line-height: 1.375rem;
white-space: pre-wrap;
word-wrap: break-word;
outline: none;
overflow-x: hidden;
}/* navigated through in a single keypress */.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content .caretNode {
-webkit-user-select: all;
-moz-user-select: all;
user-select: all;
}/* we have any other elements*/.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content br:not(:only-child) {
display: none;
}/* we always have a
tag at the end of the html, we need it to be present at first then hide it as soon as*/.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content p {
margin-top: 0;
margin-bottom: 0;
/* this may seem redundant, but we need to handle zero content formatting tags, which occur when we split a
formatting tag into paragraphs */
min-height: 1.375rem;
}/* Force caret nodes to be selected in full so that they can be */.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content ul,
.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content ol {
margin-top: 0;
margin-bottom: 0;
-webkit-padding-start: 28px;
padding-inline-start: 28px;
}/* Make list type disc to match rich text editor */.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content ul {
list-style-type: disc;
}.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content blockquote {
color: #777;
border-left: 2px solid var(--cpd-color-border-interactive-primary);
border-radius: 2px;
padding: 0 10px;
-webkit-margin-before: 0;
margin-block-start: 0;
-webkit-margin-after: 0;
margin-block-end: 0;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: 0;
margin-inline-end: 0;
}.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content > pre {
font-size: 0.9375rem;
line-height: 1.5rem;
margin-top: 0;
margin-bottom: 0;
padding: 8px 12px;
background-color: var(--cpd-color-bg-subtle-secondary);
border: 1px solid var(--cpd-color-gray-400);
border-radius: 2px;
}.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content code:not(pre *) {
font-family: "Fira Code", "", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
"Noto Color Emoji" !important;
font-family: "Fira Code", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
"Noto Color Emoji" !important;
background-color: var(--cpd-color-bg-subtle-secondary);
border: 1px solid var(--cpd-color-gray-400);
border-radius: 4px;
padding: 2px;
}.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content code:not(pre *):empty {
border: medium none currentcolor;
border: initial;
padding: 0;
padding: initial;
}/* this selector represents what will become a pill
nb despite there being mx_UserPill and mx_RoomPill classes appended to these pills
in the current composer, there don't appear to be any styles associated with those classes
in this repo */.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content a[data-mention-type] {
/* combine mx_Pill from _Pill.pcss */
padding: 0.0625rem 0.4em;
line-height: 1.0625rem;
border-radius: 1rem;
display: inline;
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-width: 100%;
overflow: hidden;
color: var(--cpd-color-text-on-solid-primary);
background-color: var(--cpd-color-bg-action-primary-rest);
/* ...with the overrides from _BasicMessageComposer.pcss */
-webkit-user-select: all;
-moz-user-select: all;
user-select: all;
position: relative;
cursor: inherit; /* We don't want indicate clickability */
text-overflow: ellipsis;
white-space: nowrap;
}/* avatar pseudo element */.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content a[data-mention-type]::before {
/* After consolidation, all of the styling from _Pill.scss was being overridden,
so take what is in _BasicMessageComposer.pcss as the starting point */
display: inline-block;
content: var(--avatar-letter);
background: var(--avatar-background), var(--cpd-color-bg-canvas-default);
width: 1rem;
min-width: 1rem; /* ensure the avatar is not compressed */
height: 1rem;
line-height: 1rem;
text-align: center;
/* Get the positioning of the avatar just right for consistency with timeline */
-webkit-margin-start: -0.4rem;
margin-inline-start: -0.4rem;
-webkit-margin-end: 0.24rem;
margin-inline-end: 0.24rem;
vertical-align: 0.12rem;
background-repeat: no-repeat;
background-size: 1rem;
border-radius: 1rem;
color: var(--avatar-color, var(--cpd-color-bg-canvas-default));
font-weight: bold;
font-size: 0.6275rem;
}.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content_placeholder::before {
content: var(--placeholder);
width: 0;
height: 0;
overflow: visible;
display: inline-block;
pointer-events: none;
white-space: nowrap;
color: var(--cpd-color-text-secondary);
}.mx_WysiwygComposer_AutoCompleteWrapper {
position: relative;
}/* Due to the fact that editing a message now has a larger amount of grey
colour above it (due to the rich text buttons above the composer), we need
to give the autocomplete a bit more visual separation by using a border.
*/.mx_WysiwygComposer_AutoCompleteWrapper > .mx_Autocomplete {
border: 1px solid var(--cpd-color-gray-400);
border-radius: 8px;
}/*
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_FormattingButtons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
gap: 8px;
}.mx_FormattingButtons .mx_FormattingButtons_Button {
--size: 28px;
cursor: pointer;
height: 28px;
height: var(--size);
width: 28px;
width: var(--size);
background-color: transparent;
border: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 5px;
}.mx_FormattingButtons .mx_FormattingButtons_Button_hover:hover {
background: var(--cpd-color-bg-subtle-secondary);
}.mx_FormattingButtons .mx_FormattingButtons_Button_hover:hover .mx_FormattingButtons_Icon {
color: var(--cpd-color-text-secondary);
}.mx_FormattingButtons .mx_FormattingButtons_active {
background: var(--cpd-color-green-300);
}.mx_FormattingButtons .mx_FormattingButtons_active .mx_FormattingButtons_Icon {
color: var(--cpd-color-text-action-accent);
}.mx_FormattingButtons .mx_FormattingButtons_disabled .mx_FormattingButtons_Icon {
color: var(--cpd-color-gray-400);
}.mx_FormattingButtons .mx_FormattingButtons_Icon {
--size: 16px;
height: 16px;
height: var(--size);
width: 16px;
width: var(--size);
color: var(--cpd-color-gray-800);
}.mx_FormattingButtons_Tooltip_KeyboardShortcut kbd {
text-align: center;
display: inline-block;
text-transform: capitalize;
font-family: Inter, sans-serif;
}/*
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_LinkModal {
padding: 32px;
max-width: 600px;
height: 341px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}.mx_LinkModal .mx_LinkModal_content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
gap: 8px;
margin-top: 7px;
}.mx_LinkModal .mx_LinkModal_content .mx_LinkModal_Field {
-webkit-box-flex: initial;
-ms-flex: initial;
flex: initial;
height: 40px;
}.mx_LinkModal .mx_LinkModal_content .mx_LinkModal_buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}.mx_LinkModal .mx_LinkModal_content .mx_LinkModal_buttons .mx_Dialog_buttons {
display: inline-block;
}/*
Copyright 2024 New Vector Ltd.
Copyright 2019, 2020 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_AvatarSetting_avatar {
width: 90px;
min-width: 90px; /* so it doesn't get crushed by the flexbox in languages with longer words */
height: 90px;
margin-top: 8px;
position: relative;
}.mx_AvatarSetting_avatar.mx_AvatarSetting_avatarDisplay:hover .mx_AvatarSetting_hover {
opacity: 1;
}.mx_AvatarSetting_avatar > * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
margin-top: 8px;
}.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_link_sm {
width: 100%;
}.mx_AvatarSetting_avatar > img {
display: block;
height: 90px;
width: inherit;
border-radius: 90px;
cursor: pointer;
-o-object-fit: cover;
object-fit: cover;
}.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton {
width: 28px;
height: 28px;
border-radius: 32px;
border: 1px solid var(--cpd-color-bg-canvas-default);
background-color: var(--cpd-color-bg-canvas-default);
position: absolute;
bottom: 0;
right: 0;
text-align: center;
cursor: pointer;
}.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton svg {
position: relative;
top: 3px;
}.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton:hover,
.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton_active {
background-color: var(--cpd-color-bg-subtle-primary);
}.mx_AvatarSetting_removeMenuItem svg,
.mx_AvatarSetting_removeMenuItem span {
color: var(--cpd-color-text-critical-primary) !important;
}/*
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_FontScalingPanel_preview {
--FontScalingPanel_preview-padding-block: 9px;
border: 1px solid var(--cpd-color-gray-400);
border-radius: 10px;
padding: 0 16px 9px 16px;
padding: 0 16px var(--FontScalingPanel_preview-padding-block) 16px;
pointer-events: none;
display: flow-root;
}.mx_FontScalingPanel_preview.mx_IRCLayout {
padding-top: 9px;
}.mx_FontScalingPanel_preview .mx_EventTile[data-layout="bubble"] {
margin-top: 30px;
}.mx_FontScalingPanel_preview .mx_EventTile_msgOption {
display: none;
}.mx_FontScalingPanel_Dropdown {
width: 120px;
/* Override default mx_Field margin */
margin-bottom: var(--cpd-space-2x) !important;
}/*
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_ImageSizePanel_radios {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
gap: 16px;
}.mx_ImageSizePanel_radios > label {
margin-right: 68px; /* keep the boxes separate */
cursor: pointer;
}.mx_ImageSizePanel_radios .mx_ImageSizePanel_size {
display: block;
color: var(--cpd-color-gray-400);
width: 221px;
height: 148px;
margin-bottom: 14px; /* move radio button away from bottom edge a bit */
}/*
Copyright 2024 New Vector Ltd.
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_IntegrationManager .mx_Dialog_border {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 60%;
height: 70%;
max-width: none;
max-width: initial;
max-height: none;
max-height: initial;
}.mx_IntegrationManager .mx_Dialog {
padding: 0;
overflow: hidden;
}.mx_IntegrationManager iframe {
background-color: #fff;
border: 0;
width: 100%;
height: 100%;
}.mx_IntegrationManager h3 {
margin-block: 20px;
}.mx_IntegrationManager .mx_IntegrationManager_loading,
.mx_IntegrationManager .mx_IntegrationManager_error {
text-align: center;
}.mx_IntegrationManager .mx_IntegrationManager_error h3 {
color: var(--cpd-color-text-critical-primary);
}/*
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_JoinRuleSettings_upgradeRequired {
margin-left: 16px;
padding: 4px 16px;
border: 1px solid var(--cpd-color-text-action-accent);
border-radius: 8px;
color: var(--cpd-color-text-action-accent);
font-size: 0.75rem;
line-height: 0.9375rem;
}.mx_JoinRuleSettings_spacesWithAccess > h4 {
color: var(--cpd-color-text-secondary);
font-weight: var(--cpd-font-weight-semibold);
font-size: 0.75rem;
line-height: 0.9375rem;
text-transform: uppercase;
}.mx_JoinRuleSettings_spacesWithAccess > span {
font: var(--cpd-font-body-md-medium);
line-height: 32px; /* matches height of avatar for v-align */
color: var(--cpd-color-text-secondary);
display: inline-block;
}.mx_JoinRuleSettings_spacesWithAccess > span .mx_BaseAvatar {
margin-right: 8px;
}.mx_JoinRuleSettings_spacesWithAccess > span + span {
margin-left: 16px;
}.mx_JoinRuleSettings_radioButton {
padding-top: 16px;
}.mx_JoinRuleSettings_radioButton .mx_StyledRadioButton_content {
margin-left: 14px;
font-weight: var(--cpd-font-weight-semibold);
font-size: 0.9375rem;
line-height: 1.5rem;
color: var(--cpd-color-text-primary);
display: block;
}.mx_JoinRuleSettings_radioButton.mx_StyledRadioButton_disabled {
opacity: 0.5;
}.mx_JoinRuleSettings_radioButton.mx_StyledRadioButton_disabled + span {
opacity: 0.5;
}.mx_JoinRuleSettings_radioButton + span {
display: inline-block;
margin-left: 34px;
margin-bottom: 16px;
font-size: 0.9375rem;
line-height: 1.5rem;
color: var(--cpd-color-text-secondary);
}.mx_JoinRuleSettings_radioButton + span + .mx_StyledRadioButton {
border-top: 1px solid var(--cpd-color-gray-400);
}.mx_JoinRuleSettings_labelledCheckbox {
font: var(--cpd-font-body-md-regular);
margin-top: var(--cpd-space-2x);
}.mx_JoinRuleSettings_recommended {
color: var(--cpd-color-green-1000);
}/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Šimon Brandner
Copyright 2020 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_KeyboardShortcut kbd {
padding: 5px;
border-radius: 4px;
background-color: var(--cpd-color-bg-canvas-default);
min-width: 20px;
text-align: center;
display: inline-block;
border: 1px solid var(--cpd-color-border-interactive-primary);
-webkit-box-shadow: 0 2px var(--cpd-color-border-interactive-primary);
box-shadow: 0 2px var(--cpd-color-border-interactive-primary);
text-transform: capitalize;
}/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Šimon Brandner
Copyright 2020, 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_LayoutSwitcher_LayoutSelector {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
/**
* The settings form has a default gap of 10px
* We want to have a bigger gap between the layout options
*/
gap: var(--cpd-space-4x) !important;
}.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio {
border: 1px solid var(--cpd-color-border-interactive-primary);
border-radius: var(--cpd-space-2x);
}.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
/*
* 10px
*/
gap: calc(var(--cpd-space-2x) + var(--cpd-space-0-5x));
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline,
.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview {
margin: var(--cpd-space-3x);
}/**
* Override the event tile style to make it fit in the selector
* Tweak also hover style and remove action bar
*/.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview {
pointer-events: none;
}.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview .mx_EventTile {
margin: 0;
}/**
* Hide the message options and message action bar in the preview
*/.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview .mx_EventTile .mx_EventTile_msgOption,
.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview .mx_EventTile .mx_MessageActionBar {
display: none;
}.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview .mx_EventTile .mx_EventTile_content {
margin-right: 0;
}.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview .mx_EventTile[data-layout="group"] {
margin-top: calc(var(--cpd-space-3x) * -1);
}/**
* Add margin to center the bubble
*/.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview .mx_EventTile[data-layout="bubble"] {
/**
* Add the layout margin and the margin to vertically center the bubble
*/
margin-top: var(--cpd-space-6x);
margin-right: 34px;
-ms-flex-negative: 1;
flex-shrink: 1;
}.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview .mx_EventTile[data-layout="irc"] .mx_MessageTimestamp {
display: none; /* hide the container used for spacing consistency */
}.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview .mx_EventTile .mx_EventTile_line {
max-width: 100%;
}.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator {
border-top: 0;
border-bottom: 1px solid var(--cpd-color-border-interactive-secondary);
}/*
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_NotificationPusherSettings .mx_NotificationPusherSettings_description {
color: var(--cpd-color-text-primary);
}.mx_NotificationPusherSettings .mx_NotificationPusherSettings_detail {
margin-top: -4px;
margin-bottom: 12px;
}/*
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_SettingsTab .mx_NotificationSettings2 .mx_SettingsSection_subSections {
color: var(--cpd-color-text-primary);
gap: 32px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}.mx_SettingsTab .mx_NotificationSettings2 .mx_SettingsSection_subSections > form {
gap: 32px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}.mx_SettingsTab .mx_NotificationSettings2 .mx_SettingsSubsection_description {
margin-bottom: 20px;
}.mx_SettingsTab .mx_NotificationSettings2 .mx_SettingsSubsection_description .mx_SettingsSubsection_text .mx_NotificationBadge {
vertical-align: baseline;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
margin: 0 2px;
}.mx_SettingsTab .mx_NotificationSettings2 .mx_SettingsSubsection_content {
margin-top: 12px;
gap: 12px;
justify-items: stretch;
-webkit-box-pack: stretch;
-ms-flex-pack: stretch;
justify-content: stretch;
}.mx_SettingsTab .mx_NotificationSettings2 .mx_StyledRadioButton_content {
margin-left: 10px;
margin-right: 10px;
}.mx_SettingsTab .mx_NotificationSettings2 .mx_TagComposer {
margin-top: 16px;
}.mx_SettingsTab .mx_NotificationSettings2 .mx_TagComposer.mx_TagComposer_disabled {
opacity: 0.7;
}.mx_SettingsTab .mx_NotificationSettings2 .mx_TagComposer .mx_TagComposer_tags {
margin-top: 16px;
gap: 8px;
}.mx_SettingsTab .mx_NotificationSettings2 .mx_TagComposer .mx_TagComposer_tags .mx_Tag {
border-radius: 18px;
padding: 6px 12px;
background: var(--cpd-color-alpha-gray-300);
margin: 0;
}.mx_SettingsTab .mx_NotificationSettings2 .mx_TagComposer .mx_TagComposer_tags .mx_Tag .mx_Tag_delete {
background: var(--cpd-color-gray-800);
color: #fff;
-ms-flex-item-align: initial;
align-self: initial;
}/*
Copyright 2024 New Vector Ltd.
Copyright 2015-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_UserNotifSettings_grid {
width: calc(100% + 12px); /* +12px to line up center of 'Noisy' column with toggle switches */
display: grid;
grid-template-columns: auto repeat(3, 62px);
place-items: center center;
grid-gap: 8px;
gap: 8px;
}/* Override StyledRadioButton default styles */.mx_UserNotifSettings_grid .mx_StyledRadioButton {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}.mx_UserNotifSettings_grid .mx_StyledRadioButton .mx_StyledRadioButton_content {
display: none;
}.mx_UserNotifSettings_grid .mx_StyledRadioButton .mx_StyledRadioButton_spacer {
display: none;
}/* left align section heading*/.mx_UserNotifSettings_grid .mx_SettingsSubsectionHeading {
justify-self: start;
}.mx_UserNotifSettings_gridRowContainer {
display: contents;
}.mx_UserNotifSettings_gridRow {
display: contents;
}.mx_UserNotifSettings_gridRowLabel {
justify-self: start;
/*