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 .mx_MImageBody_banner, .mx_MStickerBody_wrapper .mx_MImageBody_banner {
position: absolute;
bottom: 4px;
left: 4px;
padding: 4px;
border-radius: 8px;
border-radius: var(--MBody-border-radius);
font-size: 0.9375rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
max-width: min(100%, 350px);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
background-color: rgb(0, 0, 0, 0.6);
color: #ffffff;
}
.mx_MImageReplyBody .mx_MImageBody_placeholder, .mx_MStickerBody_wrapper .mx_MImageBody_placeholder {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: var(--cpd-color-bg-canvas-default);
}
.mx_MImageReplyBody .mx_MImageBody_placeholder .mx_Blurhash > canvas, .mx_MStickerBody_wrapper .mx_MImageBody_placeholder .mx_Blurhash > canvas {
-webkit-animation: mx--anim-pulse 1.75s infinite cubic-bezier(0.4, 0, 0.6, 1);
animation: mx--anim-pulse 1.75s infinite cubic-bezier(0.4, 0, 0.6, 1);
}
.mx_MImageReplyBody .mx_MImageBody_thumbnail_container, .mx_MStickerBody_wrapper .mx_MImageBody_thumbnail_container {
border-radius: 8px;
border-radius: var(--MBody-border-radius);
overflow: hidden;
contain: paint;
}
.mx_MImageReplyBody .mx_MImageBody_thumbnail, .mx_MStickerBody_wrapper .mx_MImageBody_thumbnail {
display: block;
height: 100%;
width: 100%;
}
.mx_MImageReplyBody .mx_MImageBody_gifLabel, .mx_MStickerBody_wrapper .mx_MImageBody_gifLabel {
position: absolute;
display: block;
top: 0px;
left: 14px;
padding: 5px;
border-radius: 5px;
background: rgba(0, 0, 0, 0.7);
border: 2px solid rgba(0, 0, 0, 0.2);
color: #f4f6fa;
pointer-events: none;
}
.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 */
}
}
@layer app-web{
/*
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;
}
}
@layer app-web{
/*
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;
}
}
@layer app-web{
/*
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);
}
}
@layer app-web{
/*
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-margin: 3px;
position: absolute;
top: calc(
-1 *
(
28px + 2 *
(3px + var(--cpd-border-width-1))
)
);
top: calc(
-1 *
(
var(--MessageActionBar-size-button) + 2 *
(var(--MessageActionBar-size-margin) + var(--cpd-border-width-1))
)
);
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;
}
}
@layer app-web{
/*
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 a {
color: #2e80de;
color: var(--cpd-color-text-action-accent);
}
.mx_RoomView_searchResultsPanel .mx_TextualEvent {
opacity: 1;
opacity: initial; /* Unset the opacity value specified above on the search results panel */
}
.mx_TextualBody_urlPreviews {
/* Let shared-components own preview link colours instead of the app-wide anchor colour. */
}
.mx_TextualBody_urlPreviews a:where(:not([data-kind])):hover,
.mx_TextualBody_urlPreviews a:where(:not([data-kind])):link,
.mx_TextualBody_urlPreviews a:where(:not([data-kind])):visited {
color: revert-layer;
}
}
@layer app-web{
/*
* Copyright 2026 Element 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_ThreadActionBar {
position: absolute;
visibility: hidden;
top: calc(-1 * (28px + 2 * (3px + var(--cpd-border-width-1))));
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_ThreadActionBar::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_ThreadActionBar::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_ThreadActionBar::before {
/* improve clickability of view source event toggle button by removing vertical safe area */
width: 100%;
height: 100%;
top: 0;
left: 0;
}
}
@layer app-web{
/*
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;
}
}
@layer app-web{
/*
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;
}
}
@layer app-web{
/*
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;
}
}
@layer app-web{
/*
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: #ffffff;
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: #ffffff;
color: var(--cpd-color-text-primary);
}
.mx_ContextualMenu_wrapper.mx_BaseCard_header_title .mx_ContextualMenu{
font: var(--cpd-font-body-sm-regular);
color: #ffffff;
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;
}
}
@layer app-web{
/*
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;
}
}
@layer app-web{
/*
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;
}
}
@layer app-web{
/*
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;
/* Set layout for everyone button */
}
.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: #ffffff;
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: #2e80de;
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 */
}
.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));
}
}
@layer app-web{
/*
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;
}
}
@layer app-web{
/*
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);
}
}
@layer app-web{
/*
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;
/* For style rules of EventTile in a thread, see _EventTile.pcss */
}
.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 */
}
.mx_ThreadPanel.mx_ThreadView {
max-height: 100%;
/* Make use of the space above the composer buttons too*/
}
.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;
}
.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_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: #ffffff;
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);
}
}
@layer app-web{
/*
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) */
}
.mx_TimelineCard .mx_GenericEventListSummary_unstyledList,
.mx_TimelineCard .mx_RoomView_MessageList {
/* 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 */
}
}
@layer app-web{
/*
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);
/** Overrides for the copy to clipboard button **/
}
.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;
}
.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;
}
}
@layer app-web{
/*
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_VerificationPanel_verified_section,
.mx_VerificationPanel_reciprocate_section {
/* 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_CompleteSecurity_body {
/* EncryptionPanel when verification is done */
}
.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;
}
.mx_Dialog .mx_VerificationPanel_verified_section, .mx_CompleteSecurity_body .mx_VerificationPanel_verified_section {
/* 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;
}
}
@layer app-web{
/*
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;
}
}
@layer app-web{
/*
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: #ffffff;
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;
}
}
@layer app-web{
/*
* 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%;
}
/* PLX-012: top user bar hosting the avatar/UserMenu (Profile / Settings / Sign out).
The Midnight redesign removed the Spaces rail that used to host this, so we mount
it at the top of the room list. */
.mx_RoomListPanel_userBar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
min-height: 56px;
padding: 10px 10px 4px 12px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* The shared UserMenu wrapper lays the avatar + (optional) displayname in a row.
Inside the room list it should read as a tidy, tappable identity chip. */
.mx_RoomListPanel_userBar .mx_UserMenu {
width: 100%;
margin: 0;
}
.mx_RoomListPanel_userBar .mx_UserMenu > div:first-child {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
/* avatar trigger button -> hover affordance */
.mx_RoomListPanel_userBar .mx_UserMenu button:hover {
opacity: 0.92;
}
/* the displayname rendered to the right of the avatar (expanded mode) */
.mx_RoomListPanel_userBar .mx_UserMenu > span {
margin-left: 10px;
color: #ffffff;
color: var(--plx-text, #ffffff);
font-weight: 600;
font-size: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
}
@layer app-web{
/*
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_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: #ffffff;
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: #ffffff;
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%;
height: 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;
}
.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;
/* const loadingElement */
/* 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%;
height: 100%;
overflow: hidden;
}
.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--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;
}
.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;
}
}
}
@layer app-web{
.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: #ffffff;
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: #ffffff;
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: #ffffff;
color: var(--cpd-color-text-primary);
font-weight: 400;
opacity: 0.4;
}
}
@layer app-web{
/*
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;
}
}
@layer app-web{
/*
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;
/* Force caret nodes to be selected in full so that they can be */
/* navigated through in a single keypress */
}
.mx_BasicMessageComposer .mx_BasicMessageComposer_input .caretNode {
-webkit-user-select: all;
-moz-user-select: all;
user-select: all;
}
.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;
/* avatar psuedo element */
}
.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: #2e80de !important;
background-color: var(--cpd-color-bg-action-primary-rest) !important;
}
.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;
}
}
@layer app-web{
.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;
}
}
@layer app-web{
/*
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;
}
}
@layer app-web{
/*
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: #3ecf8e;
color: var(--cpd-color-icon-success-primary);
}
}
@layer app-web{
/*
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 */
}
}
@layer app-web{
/*
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);
}
}
@layer app-web{
/*
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;
/* For replies */
/* other users profile on bubble layout */
/* inside mx_RoomView_MessageList, outside of mx_ReplyTile */
/* (on the main panel and the chat panel with a maximized widget) */
}
.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);
}
.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 */
}
.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"] */
}
.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;
}
.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_ImageBody .mx_ImageBody_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_ImageBody .mx_ImageBody_container,
.mx_EventTile[data-layout="bubble"][data-self="false"] .mx_EventTile_line .mx_ImageBody::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-button) - 2 * var(--MessageActionBar-size-margin)
);
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_ImageBody .mx_ImageBody_container,
.mx_EventTile[data-layout="bubble"][data-self="true"] .mx_EventTile_line .mx_ImageBody::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: #2e80de;
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);
/* the selector here is quite weird because timestamps can appear linked & unlinked and in different places */
/* in the DOM depending on the specific rendering context */
/* noinspection CssReplaceWithShorthandSafely */
}
.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 */
}
.mx_EventTile[data-layout="bubble"] .mx_EventTile_line.mx_EventTile_mediaLine {
/* TODO: Use a common class name instead */
/* we put the timestamps for media (other than stickers) atop the media */
}
.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;
}
.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_ImageBody {
width: 100%;
}
.mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_ImageBody .mx_ImageBody_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):not(.mx_EventTile_alignedBetweenBubbles)
.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):not(.mx_EventTile_alignedBetweenBubbles)
.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_ImageBody .mx_ImageBody_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_ImageBody::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_ImageBody .mx_ImageBody_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_ImageBody::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_ImageBody .mx_ImageBody_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_ImageBody::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_ImageBody .mx_ImageBody_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_ImageBody::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 {
/* Special layout scenario for "Unable To Decrypt (UTD)" events */
}
.mx_EventTile[data-layout="bubble"].mx_EventTile_bad:hover::before {
background: transparent;
}
.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;
}
.mx_EventTile[data-layout="bubble"].mx_EventTile_bad.mx_EventTile_info {
/* "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[data-layout="bubble"].mx_EventTile_alignedBetweenBubbles {
-webkit-margin-start: calc(
var(--EventTile_bubble-margin-inline-start) + var(--EventTile_bubble_line-margin-inline-start)
);
margin-inline-start: calc(
var(--EventTile_bubble-margin-inline-start) + var(--EventTile_bubble_line-margin-inline-start)
);
-webkit-margin-end: calc(
var(--EventTile_bubble-margin-inline-end) + var(--EventTile_bubble_line-margin-inline-end)
);
margin-inline-end: calc(
var(--EventTile_bubble-margin-inline-end) + var(--EventTile_bubble_line-margin-inline-end)
);
}
.mx_EventTile[data-layout="bubble"].mx_EventTile_alignedBetweenBubbles .mx_EventTile_line {
max-width: 100%;
width: 100%;
margin: 0;
}
.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 {
/* linked timestamp element */
-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"] {
/* increase margin between ELS and the next Event to not have our user avatar overlap the expand/collapse button */
}
.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%;
}
.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 */
}
}
@layer app-web{
/*
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: #2e80de;
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: #2e80de;
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_ImageBody .mx_ImageBody_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: #ffffff;
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_ImageBody .mx_ImageBody_container, .mx_EventTile[data-layout="group"] .mx_ImageBody .mx_ImageBody_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)
#2e80de;
box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius)
#2e80de;
-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 */
}
.mx_GenericEventListSummary[data-layout="irc"] {
/* 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 .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;
/* Make h1 and h2 the same size as h3. */
/*
// 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;
}
*/
/* Support arbitrarily large marker numbers */
/* Override nested lists being lower-roman */
/* Make list type disc to match rich text editor */
/* 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 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;
}
.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;
}
.mx_EventTile_content .markdown-body ol {
list-style-position: inside;
-webkit-padding-start: 0.5em;
padding-inline-start: 0.5em;
}
.mx_EventTile_content .markdown-body ol ol,
.mx_EventTile_content .markdown-body ul ol {
list-style-type: revert;
}
.mx_EventTile_content .markdown-body ul {
list-style-type: disc;
}
.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 {
/* selector wrongly applies to pill avatars but those have explicit width/height passed at a higher specificity */
}
.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);
}
.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;
/* Inserted adjacent to blocks, (See TextualBody) */
}
.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;
}
.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_ThreadActionBar,
.mx_EventTile.mx_EventTile_actionBarFocused .mx_ThreadActionBar,
[data-whatinput="keyboard"] .mx_EventTile:focus-within .mx_ThreadActionBar,
.mx_EventTile:focus-visible:focus-within .mx_ThreadActionBar {
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;
/* ThreadsList has always group layout */
}
.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: #e0454b;
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);
}
.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_ThreadSummary_icon {
display: inline-block;
margin-top: 8px;
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);
}
/* 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;
/* handling for hidden events (e.g reactions) in the thread view */
}
.mx_ThreadView .mx_EventTile .mx_EventTile_roomName {
display: none;
}
.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);
/* Cascading - apply zero padding to every element including mx_EventTile_emote */
}
.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);
}
.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_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;
}
}
}
@layer app-web{
/*
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;
}
}
@layer app-web{
/*
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 {
/**
* adding the icon back in the document flow
* if it's not present, there's no unwanted wasted space
*/
}
.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;
}
.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)
);
}
}
@layer app-web{
/*
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);
}
}
@layer app-web{
/*
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);
}
}
@layer app-web{
/*
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 */
}
}
@layer app-web{
/*
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);
}
}
@layer app-web{
/*
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: #2e80de;
color: var(--cpd-color-text-action-accent);
}
.mx_LiveContentSummary .mx_LiveContentSummary_text.mx_LiveContentSummary_text_active svg {
color: #2e80de;
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;
}
}
@layer app-web{
/*
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);
}
}
@layer app-web{
/*
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);
}
}
@layer app-web{
/*
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 #182533;
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;
}
}
@layer app-web{
/*
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: #ffffff;
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: #2e80de;
color: var(--cpd-color-text-action-accent);
opacity: 1;
}
.mx_MessageComposer_input textarea::-webkit-input-placeholder {
color: #2e80de;
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: #2e80de;
background: var(--cpd-color-green-300);
}
.mx_MessageComposer_wysiwyg .mx_MessageComposer_button.mx_MessageComposer_closeButtonMenu::before {
background-color: #2e80de;
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;
}
}
@layer app-web{
/*
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;
}
}
@layer app-web{
/*
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: var(--cpd-space-6x) 0 var(--cpd-space-4x);
font: var(--cpd-font-heading-md-semibold);
}
.mx_NewRoomIntro > p {
margin: 0;
font-size: 0.9375rem;
color: var(--cpd-color-text-secondary);
}
}
@layer app-web{
/*
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. */
/* ^- The count is an element floating within that. */
}
.mx_NotificationBadge:not(.mx_NotificationBadge_visible) {
display: none;
}
.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;
/* These are the 3 background types */
/* Badges for highlight notifications. Style for notification level
* badges is in _EventTile.scss because it applies only to notification
* dots, not badges.
*/
/* The following is the floating badge */
}
.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot {
width: 8px;
height: 8px;
border-radius: 8px;
background-color: var(--cpd-color-icon-primary);
/* 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_count {
display: none;
}
.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot.mx_NotificationBadge_level_notification {
background-color: #3ecf8e;
background-color: var(--cpd-color-icon-success-primary);
}
.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);
}
}
@layer app-web{
/*
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: #ffffff;
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;
}
}
@layer app-web{
/*
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;
}
}
@layer app-web{
/*
* 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: #2e80de;
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;
}
}
@layer app-web{
/*
PLX unified composer media picker (Midnight).
Opens ABOVE the composer: bg --plx-panel-2 (#202B36), radius 18, ~322px tall,
top tab row with an active-tab pill (rgba(46,128,222,.22)) + close X, accent
--plx-accent (#2E80DE). Falls back to compound tokens if the PLX theme vars
aren't defined (e.g. non-Midnight theme), so it never renders unstyled.
*/
.mx_PlxMediaPicker {
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;
width: 360px;
max-width: calc(100vw - 32px);
height: 322px;
/* Dock cleanly ABOVE the composer input: the picker is an in-flow sibling of
.mx_MessageComposer_row inside the composer wrapper, so it pushes the input
down rather than floating over the timeline. position:relative + z-index keep
its shadow above neighbouring composer chrome without escaping the flow. */
position: relative;
z-index: 1;
margin: 0 12px 8px;
background: #202b36;
background: var(--plx-panel-2, var(--cpd-color-bg-subtle-secondary, #202b36));
border: 1px solid rgba(255, 255, 255, 0.06);
border: 1px solid var(--plx-border, rgba(255, 255, 255, 0.06));
border-radius: 18px;
-webkit-box-shadow:
0 12px 32px rgba(0, 0, 0, 0.45),
0 2px 8px rgba(0, 0, 0, 0.3);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.45),
0 2px 8px rgba(0, 0, 0, 0.3);
overflow: hidden;
color: #ffffff;
color: var(--plx-text, var(--cpd-color-text-primary, #ffffff));
}
.mx_PlxMediaPicker .mx_PlxMediaPicker_header {
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: 8px;
padding: 10px 10px 8px;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.mx_PlxMediaPicker .mx_PlxMediaPicker_tabs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 4px;
}
.mx_PlxMediaPicker .mx_PlxMediaPicker_tab {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background: transparent;
color: #7f91a4;
color: var(--plx-text-secondary, var(--cpd-color-text-secondary, #8c9aa6));
font:
600 14px/1 inherit,
sans-serif;
font:
var(--cpd-font-weight-semibold, 600) 14px/1 inherit,
sans-serif;
font-size: 14px;
font-weight: 600;
padding: 7px 14px;
border-radius: 999px;
cursor: pointer;
-webkit-transition:
background-color 0.12s ease,
color 0.12s ease;
transition:
background-color 0.12s ease,
color 0.12s ease;
}
.mx_PlxMediaPicker .mx_PlxMediaPicker_tab:hover {
color: #ffffff;
color: var(--plx-text, #ffffff);
}
.mx_PlxMediaPicker .mx_PlxMediaPicker_tab_active {
background: rgba(46, 128, 222, 0.22);
color: #2e80de;
color: var(--plx-accent, #2e80de);
}
.mx_PlxMediaPicker .mx_PlxMediaPicker_close {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background: transparent;
color: #7f91a4;
color: var(--plx-text-secondary, var(--cpd-color-icon-secondary, #8c9aa6));
cursor: pointer;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 6px;
border-radius: 50%;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.mx_PlxMediaPicker .mx_PlxMediaPicker_close:hover {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
color: var(--plx-text, #ffffff);
}
.mx_PlxMediaPicker .mx_PlxMediaPicker_error {
margin: 0 12px 6px;
padding: 6px 10px;
font-size: 13px;
border-radius: 8px;
background: rgba(229, 72, 77, 0.16);
color: #ff8a8f;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.mx_PlxMediaPicker .mx_PlxMediaPicker_body {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-height: 0;
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;
}
/* The reused EmojiPicker fills the body and uses its own theming. Pin its
height to the body so its internal category bar + search + scroll list lay
out inside the 322px panel instead of overflowing (which previously made the
panel look like it was floating over the timeline). */
.mx_PlxMediaPicker .mx_EmojiPicker {
width: 100% !important;
height: 100% !important;
max-height: 100% !important;
min-height: 0;
border: none;
background: transparent;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* keep the emoji body scrollable within the fixed panel height */
.mx_PlxMediaPicker .mx_EmojiPicker_body {
min-height: 0;
overflow-y: auto;
}
/* --- GIF / Sticker tabs --- */
.mx_PlxMediaPicker .mx_PlxMediaPicker_mediaTab {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
min-height: 0;
}
.mx_PlxMediaPicker .mx_PlxMediaPicker_search {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 12px 8px;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.mx_PlxMediaPicker .mx_PlxMediaPicker_searchIcon {
position: absolute;
left: 10px;
color: #7f91a4;
color: var(--plx-text-secondary, #8c9aa6);
pointer-events: none;
}
.mx_PlxMediaPicker .mx_PlxMediaPicker_searchInput {
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 9px 12px 9px 34px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.06);
border: 1px solid var(--plx-border, rgba(255, 255, 255, 0.08));
background: #0e1621;
background: var(--plx-bg, rgba(0, 0, 0, 0.25));
color: #ffffff;
color: var(--plx-text, #ffffff);
font-size: 14px;
outline: none;
}
.mx_PlxMediaPicker .mx_PlxMediaPicker_searchInput:focus {
border-color: #2e80de;
border-color: var(--plx-accent, #2e80de);
}
.mx_PlxMediaPicker .mx_PlxMediaPicker_searchInput::-webkit-input-placeholder {
color: #7f91a4;
color: var(--plx-text-secondary, #8c9aa6);
}
.mx_PlxMediaPicker .mx_PlxMediaPicker_searchInput::-moz-placeholder {
color: #7f91a4;
color: var(--plx-text-secondary, #8c9aa6);
}
.mx_PlxMediaPicker .mx_PlxMediaPicker_searchInput:-ms-input-placeholder {
color: #7f91a4;
color: var(--plx-text-secondary, #8c9aa6);
}
.mx_PlxMediaPicker .mx_PlxMediaPicker_searchInput::-ms-input-placeholder {
color: #7f91a4;
color: var(--plx-text-secondary, #8c9aa6);
}
.mx_PlxMediaPicker .mx_PlxMediaPicker_searchInput::placeholder {
color: #7f91a4;
color: var(--plx-text-secondary, #8c9aa6);
}
/* A tidy, non-overlapping 3-column grid. We pin BOTH the column template and
an explicit square row height (grid-auto-rows) so tile geometry never
depends on the flaky `aspect-ratio` on