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: var(--cpd-space-1x);
left: var(--cpd-space-1x);
padding: var(--cpd-space-1x);
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: rgb(0, 0, 0, 0.7);
border: 2px solid rgb(0, 0, 0, 0.2);
color: #f4f6fa;
pointer-events: none;
}
.mx_MImageReplyBody {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-column-gap: var(--cpd-space-1x);
-moz-column-gap: var(--cpd-space-1x);
column-gap: var(--cpd-space-1x);
}
.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;
}
/* Location maps use the full event-line width instead of the text-body gutter. */
.mx_EventTile_line .mx_MLocationBody {
--event-tile-content-inline-end: 0;
}
/* In the timeline, we fit the width of the container */
.mx_EventTile_line .mx_MLocationBody .mx_MLocationBody_map {
max-width: 450px;
width: 100%;
}
/* Bubble lines use shrink-to-fit sizing. Give the map an intrinsic width
before constraining it to the available bubble width. */
.mx_EventTile_line .mx_MLocationBody_bubble .mx_MLocationBody_map {
max-width: 100%;
width: 450px;
}
/* EventTileView places the sender and body in separate slot boundaries. */
.mx_EventTile > :has(> .mx_DisambiguatedProfile) ~ .mx_EventTile_line .mx_MLocationBody {
margin-top: 6px; /* See: https://github.com/matrix-org/matrix-react-sdk/pull/8442 */
}
}
@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 */
margin-inline: unset; /* Remove default fieldset margin */
display: inline-block; /* Preserve the fieldset display value we used to set globally */
}
.mx_MPollBody legend {
padding-inline: unset; /* Remove default legend padding */
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: var(--cpd-color-text-secondary);
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: var(--cpd-space-2x);
}
.mx_MPollBody.mx_MPollBody_bubble {
width: 550px; /* to prevent timestamp overlapping summary text */
max-width: 100%; /* prevent overflowing a reply tile */
}
.mx_MPollBody.mx_MPollBody_bubble .mx_MPollBody_totalVotes {
/* align summary text with corner timestamp */
padding: 4px 0;
}
.mx_MPollBody_allOptions {
display: grid;
grid-gap: var(--cpd-space-4x);
gap: var(--cpd-space-4x);
margin-bottom: var(--cpd-space-2x);
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 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.
*/
/* EventTileView owns the generic action-bar geometry. These are application
context exceptions and intentionally target only the outer slot wrapper. */
/* Improve clickability of the first event below a collapsed bubble summary. */
.mx_GenericEventListSummary[data-layout="bubble"]
.mx_GenericEventListSummary_toggle
~ .mx_GenericEventListSummary_unstyledList
.mx_EventTile:first-of-type
.mx_EventTile_line > :has(> .mx_MessageActionBar)::before {
width: 100%;
height: 100%;
inset: 0;
}
/* Remove the vertical safe area for view-source events. */
.mx_EventTile:has(> .mx_EventTile_line .mx_ViewSourceEvent) .mx_EventTile_line > :has(> .mx_MessageActionBar)::before {
width: 100%;
height: 100%;
inset: 0;
}
/* Align event action bars with right-column bubbles in an expanded bubble
summary. */
.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="true"]
> .mx_GenericEventListSummary_unstyledList
> .mx_EventTile
> .mx_EventTile_line
> :has(> .mx_MessageActionBar) {
inset-inline-start: initial;
inset-inline-end: 48px;
}
}
@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_TextualBody_urlPreviews {
/* Separate the preview group from the message text above it. */
margin-top: var(--cpd-space-4x);
/* 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;
}
}
@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: var(--cpd-space-4x);
}
}
@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: var(--cpd-space-5x);
gap: var(--cpd-space-5x);
padding-right: var(--cpd-space-16x);
margin: var(--cpd-space-8x) 0;
}
.mx_PollHistoryList_list.mx_PollHistoryList_list_ENDED {
gap: var(--cpd-space-8x);
}
.mx_PollHistoryList_noResults {
height: 100%;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 var(--cpd-space-16x);
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: var(--cpd-space-4x);
}
.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;
min-width: 0;
}
.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_header_title .mx_BaseCard_header_title_heading {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font: var(--cpd-font-body-md-medium);
color: var(--cpd-color-text-secondary);
}
.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_header_title .mx_BaseCard_header_title_button--option {
position: relative;
width: calc(var(--BaseCard_header-button-size) - 4px);
height: calc(var(--BaseCard_header-button-size) - 4px);
padding: 2px;
}
.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_header_title .mx_BaseCard_header_title_button--option svg {
width: inherit;
height: inherit;
display: block;
color: var(--cpd-color-text-secondary);
}
.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_header_title .mx_BaseCard_header_title_button--option:hover svg {
color: var(--cpd-color-text-primary);
}
.mx_BaseCard .mx_AutoHideScrollbar {
min-height: 0;
width: 100%;
height: 100%;
scrollbar-gutter: stable;
}
.mx_BaseCard .mx_BaseCard_footer {
padding-top: var(--cpd-space-1x);
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_kind_secondary {
color: var(--cpd-color-text-secondary);
background-color: rgb(141, 151, 165, 0.2);
font: var(--cpd-font-body-md-semibold);
}
.mx_BaseCard .mx_BaseCard_footer .mx_AccessibleButton_disabled {
cursor: not-allowed;
}
.mx_ContextualMenu_wrapper.mx_BaseCard_header_title .mx_ContextualMenu {
position: static;
position: initial;
}
.mx_ContextualMenu_wrapper.mx_BaseCard_header_title .mx_ContextualMenu span:first-of-type {
font-weight: var(--cpd-font-weight-semibold);
font-size: inherit;
color: var(--cpd-color-text-primary);
}
.mx_ContextualMenu_wrapper.mx_BaseCard_header_title .mx_ContextualMenu{
font: var(--cpd-font-body-sm-regular);
color: var(--cpd-color-text-primary);
padding-top: 10px;
padding-bottom: 10px;
border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
-webkit-box-shadow: 0px 4px 24px rgb(0, 0, 0, 0.1);
box-shadow: 0px 4px 24px rgb(0, 0, 0, 0.1);
}
.mx_ContextualMenu_wrapper.mx_BaseCard_header_title .mx_ContextualMenu_chevron_top {
left: auto;
right: 22px;
border-bottom-color: var(--cpd-color-border-interactive-secondary);
}
.mx_ContextualMenu_wrapper.mx_BaseCard_header_title .mx_ContextualMenu_chevron_top::after {
content: "";
border: inherit;
border-bottom-color: var(--cpd-color-bg-canvas-default);
position: absolute;
top: 1px;
left: -8px;
}
}
@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;
}
.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: var(--cpd-space-5x) var(--cpd-space-4x) 0;
}
.mx_ExtensionsCard .mx_ExtensionsCard_Button {
/* this button is special so we have to override some of the original styling */
/* as we will be applying it in its children */
padding: 0;
height: auto;
color: var(--cpd-color-gray-800);
position: relative;
}
.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_WidgetAvatar {
-ms-flex-negative: 0;
flex-shrink: 0;
}
.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_icon_app {
padding: var(--cpd-space-2x) var(--cpd-space-12x) var(--cpd-space-2x) var(--cpd-space-3x);
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_icon_app p {
margin: 0 var(--cpd-space-3x);
color: var(--cpd-color-text-primary);
}
.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_app_pinToggle,
.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_app_options {
position: absolute;
top: 0;
height: 100%; /* to give bigger interactive zone */
width: 24px;
padding: var(--cpd-space-3x) var(--cpd-space-1x);
-webkit-box-sizing: border-box;
box-sizing: border-box;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_app_pinToggle svg, .mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_app_options svg {
width: 16px;
height: 16px;
color: var(--cpd-color-icon-tertiary);
}
.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_app_pinToggle:hover::after, .mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_app_options:hover::after {
content: "";
position: absolute;
height: 24px;
width: 24px;
top: var(--cpd-space-2x); /* equal to padding-top of parent */
left: 0;
border-radius: 12px;
background-color: rgb(141, 151, 165, 0.1);
}
.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_app_pinToggle {
right: 8px;
}
.mx_ExtensionsCard .mx_ExtensionsCard_Button .mx_ExtensionsCard_app_options {
right: 32px; /* 24 + 8 */
}
.mx_ExtensionsCard .mx_ExtensionsCard_Button.mx_ExtensionsCard_Button_pinned::after {
opacity: 0.2;
}
.mx_ExtensionsCard .mx_ExtensionsCard_Button.mx_ExtensionsCard_Button_pinned .mx_ExtensionsCard_app_pinToggle svg {
color: var(--cpd-color-text-action-accent);
}
.mx_ExtensionsCard .mx_ExtensionsCard_Button::before {
content: normal;
content: initial;
}
.mx_ExtensionsCard .mx_ExtensionsCard_Button::after {
top: var(--cpd-space-2x); /* re-align based on the height change */
pointer-events: none; /* pass through to the real button */
}
/* Set layout for everyone button */
.mx_ExtensionsCard a[data-kind="primary"] {
margin-top: var(--cpd-space-10x);
}
.mx_ExtensionsCard .mx_EmptyState::before {
/* Overlap the Add extensions button */
top: var(--AddExtension-overlap);
}
.mx_ExtensionsCard .mx_EmptyState {
/* Stop empty state scrolling */
height: calc(100% + var(--AddExtension-overlap));
}
}
@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.
*/
/* The usercontent iframe the document is rendered in. */
.mx_PdfViewer_iframe {
display: block;
border: 0;
/* Lets the panel's background show through around the pages. */
background: transparent;
}
}
@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_line {
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: var(--cpd-space-5x) 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: var(--cpd-space-3x) 0 var(--cpd-space-1x);
}
.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;
}
.mx_ThreadPanel .mx_ThreadPanelHeader {
height: 64px;
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 var(--cpd-space-1x) 3px var(--cpd-space-2x);
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%;
}
/* For style rules of EventTile in a thread, see _EventTile.pcss */
.mx_ThreadPanel.mx_ThreadView {
max-height: 100%;
}
.mx_ThreadPanel.mx_ThreadView .mx_ThreadView_timelinePanelWrapper {
position: relative;
min-height: 0; /* don't displace the composer */
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.mx_ThreadPanel.mx_ThreadView .mx_ThreadView_timelinePanelWrapper .mx_FileDropTarget {
border-radius: 8px;
}
.mx_ThreadPanel.mx_ThreadView .mx_MessageComposer_sendMessage {
margin-right: 0;
}
/* Make use of the space above the composer buttons too */
.mx_ThreadPanel.mx_ThreadView .mx_Autocomplete {
width: calc(100% + 140px);
}
.mx_ThreadPanel.mx_ThreadView.mx_ThreadView_narrow .mx_Autocomplete {
width: calc(100% + 108px);
}
.mx_ThreadPanel .mx_RoomView_messagePanel.mx_RoomView_messageListWrapper {
position: static;
position: initial;
}
.mx_ThreadPanel .mx_RoomView_messagePanel .mx_RoomView_messageListWrapper {
width: calc(100% + 6px); /* 8px - 2px */
}
.mx_ThreadPanel .mx_RoomView_messagePanel .mx_RoomView_empty {
display: contents;
}
.mx_ThreadPanel .mx_RoomView_MessageList {
-webkit-padding-start: var(--cpd-space-2x);
padding-inline-start: var(--cpd-space-2x);
-webkit-padding-end: var(--cpd-space-2x);
padding-inline-end: var(--cpd-space-2x);
content-visibility: visible;
}
.mx_ThreadPanel .mx_GenericEventListSummary {
/* Account for scrollbar when hovering */
padding-top: 0;
}
.mx_ThreadPanel .mx_GenericEventListSummary .mx_TimelineSeparator {
display: none;
}
.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: 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_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 > :has(> .mx_BaseAvatar) ~ .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 > :has(> .mx_BaseAvatar) ~ .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) */
}
}
@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_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: var(--cpd-space-1x) 0;
}
.mx_UserInfo.mx_BaseCard p {
margin: 5px 0;
}
.mx_UserInfo.mx_BaseCard .mx_UserInfo_header {
margin-bottom: var(--cpd-space-8x);
padding-bottom: 0;
}
.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: var(--cpd-space-1x);
}
.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile h1 {
margin: 0;
font-size: 1.25rem;
line-height: 1.5625rem;
}
.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_UserInfo_profile_name {
min-height: 30px;
/* limit to 2 lines, show an ellipsis if it overflows */
/* this looks webkit specific but is supported by Firefox 68+ */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
}
.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_UserInfo_profile_mxid {
color: var(--cpd-color-text-secondary);
height: 28px;
}
.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_UserInfo_profileStatus {
height: 20px;
}
.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_UserInfo_timezone {
height: 20px;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
/** Overrides for the copy to clipboard button **/
.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_CopyableText {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.mx_UserInfo.mx_BaseCard .mx_UserInfo_profile .mx_CopyableText_copyButton {
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;
}
.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_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.
*/
/* center the big shield icon */
.mx_VerificationPanel_verified_section .mx_E2EIcon, .mx_VerificationPanel_reciprocate_section .mx_E2EIcon {
/* Override general user info margin */
margin: 20px auto !important;
}
.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) > div > p {
margin-top: 0;
margin-bottom: 0;
}
.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) .mx_VerificationPanel_verifyByEmojiButton,
.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) .mx_UserInfo_wideButton {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) .mx_EncryptionInfo_spinner,
.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) .mx_VerificationShowSas {
-webkit-margin-start: auto;
margin-inline-start: auto;
-webkit-margin-end: auto;
margin-inline-end: auto;
}
.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) .mx_Spinner,
.mx_UserInfo.mx_BaseCard .mx_UserInfo_container:not(.mx_UserInfo_separator) .mx_VerificationShowSas {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.mx_UserInfo.mx_BaseCard .mx_VerificationPanel_qrCode {
padding: 4px 4px 0 4px;
background: white;
border-radius: 4px;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
max-width: 100%;
/* Override general user info margin */
margin: 0 auto !important;
}
.mx_UserInfo.mx_BaseCard .mx_VerificationPanel_qrCode canvas {
/* override height and width which are set on the element directly */
height: auto !important;
width: 100% !important;
max-width: 240px;
}
.mx_UserInfo.mx_BaseCard .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton {
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
display: block;
margin: 10px 0;
}
/* Special case styling for EncryptionPanel in a Modal dialog */
.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions, .mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 10px;
margin-bottom: 10px;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions > .mx_VerificationPanel_QRPhase_betweenText, .mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions > .mx_VerificationPanel_QRPhase_betweenText {
width: 50px;
vertical-align: middle;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption, .mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption {
background-color: var(--cpd-color-bg-subtle-primary);
border-radius: 10px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 20px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
max-width: 310px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption canvas,
.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_noQR,
.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption canvas,
.mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_noQR {
width: 220px !important;
height: 220px !important;
background-color: #fff;
border-radius: 4px;
vertical-align: middle;
text-align: center;
padding: 10px;
}
.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption > p, .mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption > p {
margin-top: 0;
font-weight: 700;
}
.mx_Dialog .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_helpText, .mx_CompleteSecurity_body .mx_VerificationPanel_QRPhase_startOptions .mx_VerificationPanel_QRPhase_startOption .mx_VerificationPanel_QRPhase_helpText {
font: var(--cpd-font-body-md-regular);
margin: 30px 0;
text-align: center;
}
/* EncryptionPanel when verification is done */
/* right align the "Got it" button */
.mx_Dialog .mx_VerificationPanel_verified_section .mx_AccessibleButton, .mx_CompleteSecurity_body .mx_VerificationPanel_verified_section .mx_AccessibleButton {
float: right;
}
.mx_Dialog .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton, .mx_CompleteSecurity_body .mx_VerificationPanel_reciprocate_section .mx_AccessibleButton {
margin-left: 10px;
padding: 7px 40px;
}
.mx_Dialog .mx_VerificationPanel_reciprocate_section .mx_VerificationPanel_reciprocateButtons, .mx_CompleteSecurity_body .mx_VerificationPanel_reciprocate_section .mx_VerificationPanel_reciprocateButtons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
}
@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: 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%;
}
}
@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: var(--cpd-color-text-primary);
}
.mx_AppsDrawer:hover .mx_ResizeHandle--horizontal::before {
position: absolute;
left: 3px;
top: 50%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
height: 64px; /* to match width of the ones on roomlist */
width: 4px;
border-radius: 4px;
content: "";
background-color: var(--cpd-color-text-primary);
opacity: 0.8;
}
.mx_AppsDrawer .mx_AppTile {
width: 50%;
min-width: var(--minWidth);
}
.mx_AppsDrawer.mx_AppsDrawer--maximised {
margin-bottom: 8px;
margin-bottom: var(--container-gap-width);
}
.mx_AppsDrawer.mx_AppsDrawer--resizing .mx_AppTile_persistedWrapper {
z-index: 1;
}
.mx_AppsDrawer.mx_AppsDrawer--2apps .mx_AppTile {
width: 50%;
}
.mx_AppsDrawer.mx_AppsDrawer--2apps .mx_AppTile:nth-child(3) {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
width: 0 !important;
min-width: var(--minWidth) !important;
}
.mx_AppsDrawer.mx_AppsDrawer--3apps .mx_AppTile {
width: 33%;
}
.mx_AppsDrawer.mx_AppsDrawer--3apps .mx_AppTile:nth-child(3) {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
width: 0 !important;
min-width: var(--minWidth) !important;
}
.mx_AppsContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
width: 100%;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
min-height: 0;
}
.mx_AppsContainer .mx_AppTile:first-of-type {
border-left-width: 8px;
border-left-width: var(--container-border-width);
border-radius: 10px 0 0 10px;
}
.mx_AppsContainer .mx_AppTile:last-of-type {
border-right-width: 8px;
border-right-width: var(--container-border-width);
border-radius: 0 10px 10px 0;
}
.mx_AppsContainer .mx_ResizeHandle--horizontal {
position: relative;
}
.mx_AppsContainer .mx_ResizeHandle--horizontal > div {
width: 0;
}
.mx_AppTile {
border: 8px solid #f2f5f8;
border: var(--container-border-width) solid #f2f5f8;
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: #f2f5f8;
}
.mx_AppTileFullWidth {
width: 100% !important; /* to override the inline style set by the resizer */
margin: 0;
padding: 0;
border: 8px solid #f2f5f8;
border: var(--container-border-width) solid #f2f5f8;
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: #f2f5f8;
}
.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: #f2f5f8;
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: #61708b;
}
/* Rules added to this selector style appTileBody generally */
.mx_AppTileBody {
/* Apply to every variant of appTileBody */
border-radius: 8px;
}
/* Note the loading spinner and the message next to it are not always included in mx_AppTileBody--loading */
.mx_AppTileBody .mx_AppTileBody_fadeInSpinner {
/* place spinner and the message at the center of mx_AppTileBody */
height: 100%;
width: 100%;
font-weight: bold; /* message next to the spinner */
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
-webkit-animation-duration: 200ms;
animation-duration: 200ms;
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
-webkit-animation-name: mx_AppTileBody_fadeInSpinnerAnimation;
animation-name: mx_AppTileBody_fadeInSpinnerAnimation;
}
.mx_AppTileBody.mx_AppTileBody--large,
.mx_AppTileBody.mx_AppTileBody--mini {
width: 100%;
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-bg-canvas-default);
}
.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-bg-canvas-default) !important;
}
.mx_AppTileBody.mx_AppTileBody--loading iframe {
display: none;
}
.mx_AppTileBody.mx_AppTileBody--call {
border-radius: 0px;
}
/* const loadingElement */
.mx_AppTileBody.mx_AppTileBody--call.mx_AppTileBody--mini {
border-radius: 8px;
}
/* appTileBody is embedded to PersistedElement outside of mx_AppTile,
so rules to style appTileBody generally should not be included here. */
.mx_AppTile .mx_AppTileBody--large,
.mx_AppTileFullWidth .mx_AppTileBody--large,
.mx_AppTile_mini .mx_AppTileBody--mini {
height: inherit;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
@-webkit-keyframes mx_AppTileBody_fadeInSpinnerAnimation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes mx_AppTileBody_fadeInSpinnerAnimation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
}
@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 rgb(0, 0, 0, 0.04);
box-shadow: 0px -16px 32px rgb(0, 0, 0, 0.04);
}
.mx_Autocomplete_ProviderSection {
border-bottom: 1px solid transparent;
width: 100%;
}
/* a "block" completion takes up a whole line */
.mx_Autocomplete_Completion_block {
min-height: 34px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: var(--cpd-color-text-primary);
}
.mx_Autocomplete_Completion_block * {
margin: 0 3px;
}
.mx_Autocomplete_Completion_pill {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 2rem;
height: 2.125rem;
padding: 0.4rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: var(--cpd-color-text-primary);
}
.mx_Autocomplete_Completion_pill > * {
margin-right: 0.3rem;
}
/* styling for common completion elements */
.mx_Autocomplete_Completion_subtitle {
font-style: italic;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.mx_Autocomplete_Completion_description {
color: gray;
min-width: 150px;
}
.mx_Autocomplete_Completion_container_pill {
margin: 12px;
height: 100%;
overflow-y: scroll;
}
@container roomview (height >= 0px) {
.mx_Autocomplete_Completion_container_pill {
max-height: 40cqh;
}
}
.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_title,
.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_subtitle,
.mx_Autocomplete_Completion_container_truncate .mx_Autocomplete_Completion_description {
/* Ellipsis for long names/subtitles/descriptions */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mx_Autocomplete_Completion.selected,
.mx_Autocomplete_Completion:hover {
background: #f2f5f8;
outline: none;
}
.mx_Autocomplete_provider_name {
margin: 12px;
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: #faa;
}
to {
background-color: var(--cpd-color-bg-canvas-default);
}
}
@keyframes visualbell {
from {
background-color: #faa;
}
to {
background-color: var(--cpd-color-bg-canvas-default);
}
}
.mx_BasicMessageComposer.mx_BasicMessageComposer_input_error {
-webkit-animation: 0.2s visualbell;
animation: 0.2s visualbell;
}
.mx_BasicMessageComposer .mx_BasicMessageComposer_input {
white-space: pre-wrap;
word-wrap: break-word;
outline: none;
overflow-x: hidden;
}
/* navigated through in a single keypress */
.mx_BasicMessageComposer .mx_BasicMessageComposer_input .caretNode {
-webkit-user-select: all;
-moz-user-select: all;
user-select: all;
}
/* Force caret nodes to be selected in full so that they can be */
.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill,
.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill,
.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_SpacePill {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-user-select: all;
-moz-user-select: all;
user-select: all;
position: relative;
cursor: inherit; /* We don't want indicate clickability */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill:hover, .mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill:hover, .mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_SpacePill:hover {
/* We don't want indicate clickability | To override the overriding of .markdown-body */
background-color: var(--cpd-color-bg-action-primary-rest) !important;
}
/* avatar psuedo element */
.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_UserPill::before, .mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_RoomPill::before, .mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_shouldShowPillAvatar span.mx_SpacePill::before {
display: inline-block;
content: var(--avatar-letter);
width: 1rem;
min-width: 1rem; /* ensure the avatar is not compressed */
height: 1rem;
-webkit-margin-end: 0.24rem;
margin-inline-end: 0.24rem;
background: var(--avatar-background), var(--cpd-color-bg-canvas-default);
color: var(--avatar-color, var(--cpd-color-bg-canvas-default));
background-repeat: no-repeat;
background-size: 1rem;
border-radius: 1rem;
text-align: center;
font-weight: normal;
line-height: 1rem;
font-size: 0.6275rem;
}
.mx_BasicMessageComposer .mx_BasicMessageComposer_input.mx_BasicMessageComposer_input_disabled {
/* Ignore all user input to avoid accidentally triggering the composer */
pointer-events: none;
}
.mx_BasicMessageComposer .mx_BasicMessageComposer_AutoCompleteWrapper {
position: relative;
height: 0;
}
}
@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: 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_GenericEventListSummary[data-layout="bubble"] {
--avatarSize: 32px;
--gutterSize: 11px;
--cornerRadius: 12px;
--maxWidth: 70%;
/* Generic event list summaries still use the legacy bubble variables. */
--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);
}
/* Keep the following event clear of the expand/collapse control when the
summary is collapsed. */
.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="false"] + .mx_EventTile {
-webkit-margin-before: 20px;
margin-block-start: 20px;
}
/* Keep expanded informational rows aligned with the legacy summary layout. */
.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="true"] .mx_EventTile:has(> .mx_EventTile_line :is(.mx_TextualEvent, .mx_ViewSourceEvent)) {
padding-block: 2px;
-webkit-margin-end: 0;
margin-inline-end: 0;
}
/* EventTileView owns the line-height for informational rows. */
.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="true"] .mx_EventTile:has(> .mx_EventTile_line :is(.mx_TextualEvent, .mx_ViewSourceEvent)) > .mx_EventTile_line {
/* EventTileView keeps the state-info line at min-width: 100% for
ordinary bubble rows. Expanded summaries must be allowed to
shrink around the sender avatar, as in the legacy tile. */
width: 100%;
min-width: 0;
max-width: 100%;
}
.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="true"] .mx_EventTile:has(> .mx_EventTile_line :is(.mx_TextualEvent, .mx_ViewSourceEvent)) .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:has(> .mx_EventTile_line :is(.mx_TextualEvent, .mx_ViewSourceEvent))::before {
inset-inline-end: 0; /* match alignment of the hover background to that of chat bubbles */
}
/* Preserve the legacy expanded-summary metrics in RoomView. ThreadView owns
its informational row metrics through EventTileView. */
.mx_RoomView_timeline .mx_GenericEventListSummary[data-layout="bubble"][data-expanded="true"] .mx_EventTile:has(> .mx_EventTile_line :is(.mx_TextualEvent, .mx_ViewSourceEvent)) > .mx_EventTile_line {
line-height: normal;
}
.mx_RoomView_timeline .mx_GenericEventListSummary[data-layout="bubble"][data-expanded="true"] .mx_EventTile:has(> .mx_EventTile_line :is(.mx_TextualEvent, .mx_ViewSourceEvent)) > .mx_EventTile_line :is(.mx_TextualEvent, .mx_ViewSourceEvent) {
padding-block: 0;
}
}
@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 {
/* Pass the application/theme-specific highlight colour to the shared
EventTileView interaction styles. */
--event-tile-state-highlight-background: var(--cpd-color-yellow-200);
--event-tile-state-hover-background: var(--cpd-color-bg-subtle-secondary);
--event-tile-state-selected-background: var(--cpd-color-bg-subtle-secondary);
--event-tile-bubble-hover-background: var(--cpd-color-bg-subtle-secondary);
--event-tile-bubble-other-background: var(--cpd-color-gray-300);
--event-tile-bubble-self-background: var(--cpd-color-green-300);
--event-tile-preview-hover-background: var(--cpd-color-bg-subtle-secondary);
--event-tile-preview-separator-color: var(--cpd-color-gray-400);
--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 */
position: relative;
}
/* Retained for legacy error/fallback markup that does not use EventTileView. */
.mx_EventTile.mx_EventTile_info {
font-size: var(--cpd-font-size-body-sm);
color: var(--cpd-color-text-secondary);
}
.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_EditMessageComposerWrapper {
/* This keeps the autocomplete / format bar visible above the edit composer. */
overflow: visible;
}
.mx_EventTile .mx_EventTile_searchHighlight {
background-color: var(--cpd-color-text-action-accent);
color: #f4f6fa;
border-radius: 5px;
padding-inline: 2px;
cursor: pointer;
}
.mx_EventTile .mx_EventTile_searchHighlight a {
background-color: var(--cpd-color-text-action-accent);
color: #f4f6fa;
}
.mx_EventTile .mx_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_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: var(--cpd-space-1x);
}
.mx_EventTile .mx_ReplyChain--expanded .mx_EventTile_content .mx_EventTile_body {
/* !important needed to override the reply-tile content clamp. */
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;
}
/* Theads do not set a background on mentioned events as they use an indicator dot */
.mx_ThreadPanel .mx_EventTile {
--event-tile-preview-highlight-background: none;
}
.mx_GenericEventListSummary[data-layout="irc"] .mx_EventTile_line .mx_RedactedBody, .mx_GenericEventListSummary[data-layout="group"] .mx_EventTile_line .mx_RedactedBody {
line-height: 1; /* remove spacing between lines */
}
/* Apply only collapsed events block */
.mx_GenericEventListSummary[data-layout="irc"] > .mx_EventTile_line {
/* add --right-padding value of MessageTimestamp and avatar only */
/* stylelint-disable-next-line declaration-colon-space-after */
padding-left: calc(
var(--name-width) + var(--icon-width) + 46px + 2 * var(--right-padding)
);
padding-left: calc(
var(--name-width) + var(--icon-width) + var(--MessageTimestamp-width) + 2 * var(--right-padding)
);
}
/* The collapsed summary has a legacy line outside EventTileView. */
.mx_GenericEventListSummary[data-layout="group"] > .mx_EventTile_line {
-webkit-padding-start: 64px;
padding-inline-start: 64px;
}
.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;
}
.mx_EventTile_content .markdown-body {
font: var(--cpd-font-body-md-regular) !important;
letter-spacing: var(--cpd-font-letter-spacing-body-md);
font-family: inherit !important;
white-space: normal !important;
line-height: inherit !important;
background-color: inherit;
color: inherit; /* inherit the colour from the dark or light theme by default (but not for code blocks) */
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
/*
// actually, removing the Italic TTF provides
// better results seemingly
// compensate for Nunito italics being terrible
// https://github.com/google/fonts/issues/1726
em {
transform: skewX(-14deg);
display: inline-block;
}
*/
}
.mx_EventTile_content .markdown-body pre,
.mx_EventTile_content .markdown-body code {
font-family: "Fira Code", "", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
"Noto Color Emoji" !important;
font-family: "Fira Code", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
"Noto Color Emoji" !important;
background-color: var(--cpd-color-bg-subtle-primary);
}
.mx_EventTile_content .markdown-body code:not(pre *) {
background-color: var(--cpd-color-bg-subtle-primary);
border: 1px solid var(--cpd-color-gray-400);
border-radius: 4px;
/* The horizontal padding is added by github-markdown-css .markdown-body */
padding: var(--cpd-space-0-5x) 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: var(--cpd-space-0-5x);
}
.mx_EventTile_content .markdown-body code {
white-space: pre-wrap; /* don't collapse spaces in inline code blocks */
}
.mx_EventTile_content .markdown-body pre {
/* have to use overlay rather than auto otherwise Linux and Windows */
/* Chrome gets very confused about vertical spacing: */
/* https://github.com/vector-im/vector-web/issues/754 */
overflow-x: overlay;
overflow-y: visible;
}
.mx_EventTile_content .markdown-body pre::-webkit-scrollbar-corner {
background: transparent;
}
.mx_EventTile_content .markdown-body pre{
border: 1px solid var(--cpd-color-gray-400);
}
.mx_EventTile_content .markdown-body pre code {
white-space: pre; /* we want code blocks to be scrollable and not wrap */
}
.mx_EventTile_content .markdown-body pre code > * {
display: inline;
}
.mx_EventTile_content .markdown-body h1,
.mx_EventTile_content .markdown-body h2,
.mx_EventTile_content .markdown-body h3,
.mx_EventTile_content .markdown-body h4,
.mx_EventTile_content .markdown-body h5,
.mx_EventTile_content .markdown-body h6 {
font-family: inherit !important;
color: inherit;
}
/* Make h1 and h2 the same size as h3. */
.mx_EventTile_content .markdown-body h1,
.mx_EventTile_content .markdown-body h2 {
font-size: 1.5em;
border-bottom: none !important; /* override GFM */
}
.mx_EventTile_content .markdown-body a {
color: var(--cpd-color-text-link-external);
}
.mx_EventTile_content .markdown-body blockquote {
border-left: 2px solid var(--cpd-color-border-interactive-primary);
color: var(--cpd-color-text-secondary);
border-radius: 2px;
padding: 0 10px;
}
/* Support arbitrarily large marker numbers */
.mx_EventTile_content .markdown-body ol {
list-style-position: inside;
-webkit-padding-start: 0.5em;
padding-inline-start: 0.5em;
}
/* Override nested lists being lower-roman */
.mx_EventTile_content .markdown-body ol ol,
.mx_EventTile_content .markdown-body ul ol {
list-style-type: revert;
}
/* Make list type disc to match rich text editor */
.mx_EventTile_content .markdown-body ul {
list-style-type: disc;
}
/* override styles from the base markdown CSS that put markdown content on its own line,
as this isn't what we want for richtext emote content.
*/
.mx_EventTile_content .markdown-body::before {
display: none;
}
.mx_EventTile_content .markdown-body::after {
display: none;
}
/* Spoiler stuff */
.mx_EventTile_spoiler {
cursor: pointer;
/* clear button styles */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
border: none;
padding: 0;
margin: 0;
font-size: inherit;
font-family: inherit;
line-height: inherit;
text-align: inherit;
}
.mx_EventTile_spoiler .mx_EventTile_spoiler_reason {
color: var(--cpd-color-text-secondary);
font-size: 0.6875rem;
}
.mx_EventTile_spoiler .mx_EventTile_spoiler_content {
-webkit-filter: blur(5px) saturate(0.1) sepia(1);
filter: blur(5px) saturate(0.1) sepia(1);
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
pointer-events: none;
}
.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
-webkit-filter: none;
filter: none;
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
pointer-events: auto;
}
.mx_EventTile_bigEmoji {
font-size: 48px;
line-height: 57px;
}
.mx_EventTile_bigEmoji .mx_Emoji {
font-size: inherit !important;
}
.mx_EventTile_body pre {
border: 1px solid transparent;
}
.mx_EventTile:hover .mx_EventTile_body pre,
.mx_EventTile:focus-visible:focus-within .mx_EventTile_body pre {
border: 1px solid var(--cpd-color-gray-800);
}
/* selector wrongly applies to pill avatars but those have explicit width/height passed at a higher specificity */
.mx_EventTile_body.markdown-body img {
-o-object-fit: contain;
object-fit: contain;
-o-object-position: left top;
object-position: left top;
/* Override the default colors of the 'github-markdown-css' library
(#fff for light theme, #000 for dark theme) to match the inherited theme */
background-color: inherit !important;
}
.mx_EventTile_body .mx_EventTile_pre_container {
/* For correct positioning of _copyButton (See TextualBody) */
position: relative;
}
/* Emoji are enlarged in prose, but a code block's line numbers are one fixed-height block
per line and cannot follow a line that an enlarged emoji has made taller. */
.mx_EventTile_body .mx_EventTile_pre_container .mx_Emoji {
font-size: inherit;
}
.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: var(--cpd-space-3x);
padding-bottom: var(--cpd-space-3x);
}
/* Inserted adjacent to blocks, (See TextualBody) */
.mx_EventTile_body .mx_EventTile_pre_container .mx_EventTile_button {
position: absolute;
top: var(--cpd-space-2x);
right: var(--cpd-space-2x);
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: var(--cpd-color-text-primary);
}
.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: var(--cpd-space-1x) var(--cpd-space-2x);
}
.mx_EventTile_tileError a {
margin-left: 1em;
}
.mx_EventTile:hover .mx_ThreadActionBar,
[data-whatinput="keyboard"] .mx_EventTile:focus-within .mx_ThreadActionBar,
.mx_EventTile:focus-visible:focus-within .mx_ThreadActionBar {
visibility: visible;
}
/* Thread-list reply summaries retain the legacy application styling while
remaining independent of the EventTileView root DOM contract. */
.mx_EventTile .mx_ThreadPanel_replies {
margin-top: var(--cpd-space-2x);
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 .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 .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 var(--cpd-space-3x) 0 var(--cpd-space-2x);
}
.mx_ThreadSummary_icon {
display: inline-block;
margin-top: var(--cpd-space-2x);
margin-bottom: var(--cpd-space-2x);
}
.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: var(--cpd-space-2x);
margin-inline-end: var(--cpd-space-2x);
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_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 */
}
/* ViewSourceEvent explicitly uses Compound's 11px body-xs token. Legacy
thread info tiles applied their 12px size directly to event content;
keep that override on the body component after its slot boundary. */
.mx_ThreadView .mx_EventTile .mx_EventTile_line .mx_ViewSourceEvent {
font-size: 0.75rem;
}
/* Body-only compact markdown spacing remains application-owned. */
.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body p,
.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body ul,
.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body ol,
.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body dl,
.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body blockquote,
.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body pre,
.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_content .markdown-body table {
margin-bottom: var(--cpd-space-1x); /* 1/4 of the non-compact margin-bottom */
}
/* 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: #91a1c0;
}
}
@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;
/* Map application IRC geometry onto the shared EventTileView API. */
--event-tile-irc-name-width: var(--name-width);
--event-tile-irc-timestamp-width: var(--MessageTimestamp-width);
line-height: 1.125rem !important;
line-height: var(--line-height) !important;
}
.mx_IRCLayout blockquote {
margin: 0;
}
.mx_IRCLayout .mx_NewRoomIntro > h2 {
line-height: normal;
line-height: initial; /* Cancel var(--irc-line-height) */
}
.mx_IRCLayout .mx_ReplyChain .mx_DisambiguatedProfile {
width: auto;
width: initial;
-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_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 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_LiveContentSummary {
color: var(--cpd-color-text-secondary);
}
.mx_LiveContentSummary .mx_LiveContentSummary_text svg {
display: inline-block;
vertical-align: text-bottom;
color: var(--cpd-color-text-secondary);
width: 16px;
height: 16px;
margin-right: 4px;
}
.mx_LiveContentSummary .mx_LiveContentSummary_text.mx_LiveContentSummary_text_active {
color: var(--cpd-color-text-action-accent);
}
.mx_LiveContentSummary .mx_LiveContentSummary_text.mx_LiveContentSummary_text_active svg {
color: var(--cpd-color-text-action-accent);
}
.mx_LiveContentSummary .mx_LiveContentSummary_participants svg {
display: inline-block;
vertical-align: middle;
color: var(--cpd-color-text-secondary);
width: 16px;
height: 16px;
margin-right: 2px;
}
}
@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);
}
.mx_MemberListHeaderView .mx_MemberListHeaderView_container {
margin-top: var(--cpd-space-6x);
padding: 0 var(--cpd-space-4x);
-ms-flex-item-align: stretch;
align-self: stretch;
}
.mx_MemberListHeaderView .mx_MemberListHeaderView_inviteButton {
width: 100%;
max-width: 428px;
}
.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;
}
}
@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 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_name .mx_DisambiguatedProfile {
font: inherit;
}
.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;
}
.mx_MemberTileView .mx_MemberTileView_presence {
position: absolute;
right: -2px;
bottom: 2px;
}
}
@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: rgb(0, 0, 0, 0.04);
border-radius: 3px;
padding: 10px;
}
.mx_MessageComposer_input textarea {
display: block;
width: 100%;
padding: 0px;
margin-top: 6px;
margin-bottom: 6px;
border: 0px;
resize: none;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
color: var(--cpd-color-text-primary);
background-color: var(--cpd-color-bg-canvas-default);
font: var(--cpd-font-body-md-regular);
max-height: 120px;
overflow: auto;
}
/* hack for FF as vertical alignment of custom placeholder text is broken */
.mx_MessageComposer_input textarea::-moz-placeholder {
line-height: 100%;
color: var(--cpd-color-text-action-accent);
opacity: 1;
}
.mx_MessageComposer_input textarea::-webkit-input-placeholder {
color: var(--cpd-color-text-action-accent);
}
.mx_MessageComposer_button_highlight {
background: var(--cpd-color-bg-subtle-primary);
color: var(--cpd-color-icon-primary) !important;
}
.mx_MessageComposer_button {
position: relative;
cursor: pointer;
border-radius: 50%;
}
.mx_MessageComposer_button svg {
color: var(--cpd-color-icon-tertiary);
}
.mx_MessageComposer_button:hover {
background-color: var(--cpd-color-bg-subtle-primary);
}
.mx_MessageComposer_button:hover svg {
color: var(--cpd-color-icon-primary);
}
.mx_MessageComposer_button{
padding: 3px;
height: 20px;
width: 20px;
}
.mx_MessageComposer_button:last-child {
margin-right: auto;
}
.mx_MessageComposer_button.mx_MessageComposer_closeButtonMenu::after {
background: var(--cpd-color-bg-subtle-primary);
}
.mx_MessageComposer_button.mx_MessageComposer_closeButtonMenu::before {
background-color: var(--cpd-color-icon-primary);
z-index: 2;
}
.mx_MessageComposer_button svg {
width: inherit;
height: inherit;
}
.mx_MessageComposer_wysiwyg .mx_MessageComposer_wrapper {
padding-left: 16px;
margin-top: 6px;
margin-bottom: 12px;
}
.mx_MessageComposer_wysiwyg .mx_MessageComposer_row {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.mx_MessageComposer_wysiwyg .mx_MessageComposer_actions {
/* Height of the composer editor */
height: 40px;
}
.mx_MessageComposer_wysiwyg .mx_MediaBody {
padding-top: 4px;
padding-bottom: 4px;
}
.mx_MessageComposer_wysiwyg .mx_MessageComposer_button {
position: relative;
cursor: pointer;
border-radius: 5px;
}
.mx_MessageComposer_wysiwyg .mx_MessageComposer_button svg {
color: var(--cpd-color-icon-tertiary);
}
.mx_MessageComposer_wysiwyg .mx_MessageComposer_button:hover {
background-color: var(--cpd-color-bg-subtle-secondary);
}
.mx_MessageComposer_wysiwyg .mx_MessageComposer_button:hover svg {
color: var(--cpd-color-gray-800);
}
.mx_MessageComposer_wysiwyg .mx_MessageComposer_button.mx_MessageComposer_closeButtonMenu::after {
background: var(--cpd-color-green-300);
}
.mx_MessageComposer_wysiwyg .mx_MessageComposer_button.mx_MessageComposer_closeButtonMenu::before {
background-color: var(--cpd-color-text-action-accent);
z-index: 2;
}
.mx_MessageComposer_buttonMenu {
width: 24px;
height: 24px;
padding: 1px;
}
.mx_MessageComposer_buttonMenu svg {
width: 24px;
height: 24px;
}
.mx_MessageComposer_sendMessage {
cursor: pointer;
position: relative;
padding: var(--cpd-space-2x);
border-radius: 100%;
background-color: var(--cpd-color-icon-accent-tertiary);
height: 16px;
width: 16px;
}
.mx_MessageComposer_sendMessage svg {
height: inherit;
width: inherit;
color: var(--cpd-color-icon-on-solid-primary);
}
.mx_MatrixChat_useCompactLayout .mx_MessageComposer_input {
min-height: 50px;
}
.mx_MatrixChat_useCompactLayout .mx_MessageComposer_noperm_error {
height: 50px;
}
/**
* Unstable compact mode
*/
.mx_MessageComposer.mx_MessageComposer--compact {
margin-right: 0;
}
.mx_MessageComposer.mx_MessageComposer--compact .mx_MessageComposer_wrapper {
padding: 0 0 0 25px;
}
.mx_MessageComposer.mx_MessageComposer--compact .mx_MessageComposer_e2eIconWrapper {
left: 0;
}
.mx_MessageComposer.mx_MessageComposer--compact:not(.mx_MessageComposer_e2eStatus) .mx_MessageComposer_wrapper {
padding: 0;
}
.mx_MessageComposer.mx_MessageComposer--compact .mx_MessageComposer_button:last-child {
margin-right: 0;
}
.mx_MessageComposer.mx_MessageComposer--compact .mx_MessageComposer_e2eIcon {
left: 0;
}
}
@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;
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.
Copyright 2015, 2016 OpenMarket Ltd
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_OverflowTileView {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: var(--cpd-color-text-primary);
cursor: pointer;
}
.mx_OverflowTileView_text {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
overflow: hidden;
font: var(--cpd-font-body-md-regular);
text-overflow: ellipsis;
white-space: nowrap;
font-style: italic;
}
.mx_OverflowTileView:hover {
padding-right: 30px;
position: relative; /* to keep the chevron aligned */
}
.mx_OverflowTileView:hover .mx_OverflowTileView_chevron {
display: inline;
}
.mx_OverflowTileView_chevron {
position: absolute;
top: calc(50% - 12px); /* center */
right: 0;
width: 24px;
height: 24px;
color: #91a1c0;
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: 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{
/*
Copyright 2024 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_PresenceIconView {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: var(--cpd-color-bg-canvas-default);
border-radius: 100%;
}
.mx_PresenceIconView .mx_PresenceIconView_online {
color: var(--cpd-color-icon-accent-primary);
}
.mx_PresenceIconView .mx_PresenceIconView_offline,
.mx_PresenceIconView .mx_PresenceIconView_dnd {
color: var(--cpd-color-icon-tertiary);
}
.mx_PresenceIconView .mx_PresenceIconView_unavailable {
color: var(--cpd-color-icon-quaternary);
}
}
@layer app-web{
/*
Copyright 2024 New Vector Ltd.
Copyright 2016 OpenMarket Ltd
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_PresenceLabel {
font-size: 0.6875rem;
opacity: 0.5;
}
.mx_PresenceLabel_online {
color: var(--cpd-color-text-success-primary);
}
}
@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_ReadReceiptGroup {
--ReadReceiptGroup_EventBubbleTile-spacing-end: 78px;
position: relative;
inset-inline-end: auto;
inset-inline-end: var(--event-tile-read-receipt-inset-inline-end, auto);
display: inline-block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 1;
}
.mx_ReadReceiptGroup .mx_ReadReceiptGroup_button {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
height: 16px;
padding: 4px;
border-radius: 6px;
}
.mx_ReadReceiptGroup .mx_ReadReceiptGroup_button.mx_AccessibleButton:hover {
background: var(--cpd-color-bg-subtle-secondary);
}
.mx_ReadReceiptGroup .mx_ReadReceiptGroup_remainder {
color: var(--cpd-color-text-secondary);
font-size: 0.6875rem;
line-height: 1rem;
margin-right: 4px;
}
.mx_ReadReceiptGroup .mx_ReadReceiptGroup_container {
position: relative;
display: block;
height: 100%;
}
.mx_ReadReceiptGroup .mx_ReadReceiptGroup_container svg {
display: inline-block;
width: 16px;
height: 16px;
color: var(--cpd-color-icon-tertiary);
}
.mx_ReadReceiptGroup .mx_ReadReceiptGroup_container .mx_BaseAvatar {
/* Compound uses a border on default avatars but no border on actual images, we want a border in all cases */
-webkit-box-sizing: content-box;
box-sizing: content-box;
border: 1px solid var(--cpd-color-bg-canvas-default) !important;
/* Reset the line height as we are no longer box-sizing border-box. 14px because avatar is set at 14px in component */
line-height: 14px;
position: absolute;
will-change: left, top;
-webkit-transition:
left 0.1s ease-out,
top 0.3s ease-out;
transition:
left 0.1s ease-out,
top 0.3s ease-out;
-webkit-transition:
left var(--transition-short) ease-out,
top var(--transition-standard) ease-out;
transition:
left var(--transition-short) ease-out,
top var(--transition-standard) ease-out;
}
.mx_ReadReceiptGroup_popup {
max-height: 300px;
width: 220px;
border-radius: 8px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: left;
font-size: 12px;
line-height: 15px;
right: 0;
}
.mx_ReadReceiptGroup_popup.mx_ContextualMenu_top {
top: 8px;
}
.mx_ReadReceiptGroup_popup.mx_ContextualMenu_bottom {
bottom: 8px;
}
.mx_ReadReceiptGroup_popup .mx_ReadReceiptGroup_title {
font-size: 12px;
line-height: 15px;
margin: 16px 16px 8px;
font-weight: var(--cpd-font-weight-semibold);
/* shouldn’t be actually focusable */
outline: none;
}
.mx_ReadReceiptGroup_popup .mx_AutoHideScrollbar .mx_ReadReceiptGroup_person {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
padding: 4px;
margin: 0 12px;
border-radius: 8px;
}
.mx_ReadReceiptGroup_popup .mx_AutoHideScrollbar .mx_ReadReceiptGroup_person:hover {
background: #f5f8fa;
}
.mx_ReadReceiptGroup_popup .mx_AutoHideScrollbar .mx_ReadReceiptGroup_person:last-child {
margin-bottom: 8px;
}
.mx_ReadReceiptGroup_popup .mx_AutoHideScrollbar .mx_ReadReceiptGroup_person .mx_BaseAvatar {
margin: 6px 8px;
-ms-flex-item-align: center;
align-self: center;
justify-self: center;
-ms-flex-negative: 0;
flex-shrink: 0; /* Long names should not shrink the picture */
}
.mx_ReadReceiptGroup_popup .mx_AutoHideScrollbar .mx_ReadReceiptGroup_person .mx_ReadReceiptGroup_name {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
overflow: hidden;
}
.mx_ReadReceiptGroup_popup .mx_AutoHideScrollbar .mx_ReadReceiptGroup_person .mx_ReadReceiptGroup_name p {
margin: 2px 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.mx_ReadReceiptGroup_popup .mx_AutoHideScrollbar .mx_ReadReceiptGroup_person .mx_ReadReceiptGroup_name .mx_ReadReceiptGroup_secondary {
color: var(--cpd-color-text-secondary);
}
.mx_ReadReceiptGroup_person--tooltip {
overflow-y: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@layer app-web{
/*
Copyright 2024 New Vector Ltd.
Copyright 2018 Vector Creations Ltd
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_ReplyPreview {
border: 1px solid transparent;
border-bottom: none;
background: var(--cpd-color-bg-canvas-default);
max-height: 50vh;
overflow: auto;
}
.mx_ReplyPreview .mx_ReplyPreview_section {
border-bottom: 1px solid transparent;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
row-gap: var(--cpd-space-2x);
padding: var(--cpd-space-2x) var(--cpd-space-2x) 0 0;
}
.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-column-gap: 8px;
-moz-column-gap: 8px;
column-gap: 8px;
color: var(--cpd-color-text-primary);
font-weight: 400;
opacity: 0.4;
}
.mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_header .mx_ReplyPreview_header_cancel svg {
color: var(--cpd-color-text-primary);
width: 20px;
height: 20px;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.mx_RoomView_body .mx_ReplyPreview {
/* Add box-shadow to the reply preview on the main (left) panel only. */
/* It is not added to the preview on the (right) panel for threads and a chat with a maximized widget. */
-webkit-box-shadow: 0px -16px 32px rgb(0, 0, 0, 0.04);
box-shadow: 0px -16px 32px rgb(0, 0, 0, 0.04);
border-radius: 8px 8px 0 0;
}
}
@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_RoomHeader {
height: 64px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 var(--cpd-space-3x) 0 calc(var(--cpd-space-3x) + var(--cpd-space-1-5x));
border-bottom: 1px solid var(--cpd-color-gray-400);
background-color: var(--cpd-color-bg-canvas-default);
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.mx_RoomHeader button:has(svg.mx_RoomHeader_toggled) {
/* For enhanced visibility under contrast control */
outline: 1px solid transparent;
}
.mx_RoomHeader:hover {
background-color: var(--cpd-color-bg-action-secondary-hovered);
}
.mx_RoomHeader_infoWrapper {
/* unset button styles */
color: inherit;
background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
background: initial;
border: medium none currentcolor;
border: initial;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
cursor: pointer;
gap: var(--cpd-space-3x);
text-align: left;
height: 100%;
padding: 0;
/* Without this, this flex item reports its unshrunk content width to
mx_RoomHeader which breaks its max-width. */
min-width: 0;
}
.mx_RoomHeader_info {
/* We want the spacing to be 64px, 13x = 52px but we have a flex gap of
12px set on the flex container, which sums up to 64 */
padding-right: var(--cpd-space-13x);
/* See mx_RoomHeader_infoWrapper min-width comment above. */
min-width: 0;
}
.mx_RoomHeader_truncated {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
}
.mx_RoomHeader_heading {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--cpd-space-1-5x);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-width: 0;
}
.mx_RoomHeader_userStatus {
-ms-flex-negative: 1;
flex-shrink: 1;
min-width: 0;
}
.mx_RoomHeader_icon {
-ms-flex-negative: 0;
flex-shrink: 0;
}
.mx_RoomHeader .mx_FacePile {
color: var(--cpd-color-text-secondary);
background: var(--cpd-color-bg-canvas-default);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: var(--cpd-space-2x);
border-radius: 9999px;
padding: var(--cpd-space-1-5x);
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font: var(--cpd-font-body-sm-medium);
}
/* RoomAvatar doesn't pass classes down to avatar
So set style here
using div because compound classes are not stable */
.mx_RoomHeader .mx_FacePile > div {
-ms-flex-negative: 0;
flex-shrink: 0;
}
.mx_RoomHeader .mx_FacePile:hover {
color: var(--cpd-color-text-primary);
background: var(--cpd-color-bg-subtle-primary);
}
.mx_RoomHeader .mx_FacePile.mx_FacePile_toggled {
background: var(--cpd-color-bg-success-subtle);
color: var(--cpd-color-text-action-accent);
font: var(--cpd-font-body-sm-semibold);
/* For enhanced visibility under contrast control */
outline: 1px solid transparent;
}
.mx_RoomHeader .mx_BaseAvatar {
-ms-flex-negative: 0;
flex-shrink: 0;
}
.mx_RoomHeader_videoCallOption {
/* Workaround for https://github.com/element-hq/compound/issues/331 */
min-width: 240px;
}
.mx_RoomHeader .mx_RoomHeader_toggled {
fill: var(--cpd-color-icon-accent-primary);
}
}
@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_RoomInfoLine {
color: var(--cpd-color-text-secondary);
display: inline-block;
}
.mx_RoomInfoLine svg {
margin-right: 6px;
vertical-align: -2px;
color: var(--cpd-color-gray-800);
}
.mx_RoomInfoLine .mx_RoomInfoLine_members {
color: inherit;
text-decoration: inherit;
font-weight: inherit;
}
.mx_RoomInfoLine .mx_RoomInfoLine_members::before {
content: "·"; /* visual separator */
margin: 0 6px;
}
}
@layer app-web{
/*
Copyright 2024 New Vector Ltd.
Copyright 2023 Nordeck IT + Consulting GmbH
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_RoomKnocksBar {
background-color: var(--cpd-color-bg-subtle-secondary);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: var(--cpd-space-2x) var(--cpd-space-4x);
}
.mx_RoomKnocksBar_content {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
margin: 0 var(--cpd-space-3x);
}
.mx_RoomKnocksBar_paragraph {
color: var(--cpd-color-text-secondary);
font-size: var(--cpd-font-size-body-sm);
margin: 0;
}
.mx_RoomKnocksBar_link {
margin-left: var(--cpd-space-3x);
}
.mx_RoomKnocksBar_action,
.mx_RoomKnocksBar_avatar {
-ms-flex-item-align: center;
align-self: center;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.mx_RoomKnocksBar_action + .mx_RoomKnocksBar_action {
margin-left: var(--cpd-space-3x);
}
.mx_RoomKnocksBar_avatar + .mx_RoomKnocksBar_avatar {
margin-left: calc(var(--cpd-space-4x) * -1);
}
}
@layer app-web{
/*
Copyright 2024 New Vector Ltd.
Copyright 2015-2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_RoomPreviewBar {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
}
.mx_RoomPreviewBar h3 {
font-size: 1.125rem;
font-weight: var(--cpd-font-weight-semibold);
}
.mx_RoomPreviewBar h3.mx_RoomPreviewBar_spinnerTitle {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0;
}
.mx_RoomPreviewBar h3,
.mx_RoomPreviewBar .mx_RoomPreviewBar_message p {
/* break-word, with fallback to break-all, which is wider supported */
word-break: break-all;
word-break: break-word;
}
.mx_RoomPreviewBar .mx_Spinner {
width: auto;
height: auto;
margin: 10px 10px 10px 0;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.mx_RoomPreviewBar .mx_RoomPreviewBar_footer {
font-size: 0.75rem;
line-height: 1.25rem;
}
.mx_RoomPreviewBar .mx_RoomPreviewBar_footer .mx_Spinner {
vertical-align: middle;
display: inline-block;
}
.mx_RoomPreviewBar_actions {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.mx_RoomPreviewBar_message {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.mx_RoomPreviewBar_message p {
overflow-wrap: break-word;
}
.mx_RoomPreviewBar_panel {
padding: 8px 8px 8px 20px;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
padding: 3px 8px;
}
.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_actions > * {
margin-left: 12px;
}
.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message {
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
flex: 1 0 0;
min-width: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.mx_RoomPreviewBar_panel .mx_RoomPreviewBar_message > * {
margin: 4px;
}
/* With maximised widgets, the panel fits in better when rounded */
.mx_MainSplit_maximisedWidget .mx_RoomPreviewBar_panel {
margin: 8px;
margin: var(--container-gap-width);
margin-right: calc(8px / 2);
margin-right: calc(var(--container-gap-width) / 2); /* Shared with right panel */
margin-top: 0; /* Already covered by apps drawer */
border-radius: 8px;
}
.mx_RoomPreviewBar_dialog {
margin: auto;
-webkit-box-sizing: content;
box-sizing: content;
width: 400px;
/* Matches the room preview card this stands in place of, and the panel form of this same bar */
border-radius: 8px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 20px;
text-align: center;
}
.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_message > * {
margin: 5px 0 20px 0;
}
.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton {
padding: 7px 50px; /* extra wide */
}
.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions > * {
margin-top: 12px;
}
.mx_RoomPreviewBar_dialog .mx_RoomPreviewBar_actions .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
/* to account for the padding of the primary button which causes inconsistent look between */
/* subsequent secondary (text) buttons */
margin-bottom: 7px;
}
.mx_RoomPreviewBar_Invite {
max-height: 100vh;
overflow-y: auto;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.mx_RoomPreviewBar_Invite h3 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: pre-wrap;
overflow: hidden;
}
.mx_RoomPreviewBar_inviter {
font-weight: var(--cpd-font-weight-semibold);
}
a.mx_RoomPreviewBar_inviter {
text-decoration: underline;
cursor: pointer;
}
.mx_RoomPreviewBar_inviter_mxid {
color: var(--cpd-color-text-secondary);
}
.mx_RoomPreviewBar_icon {
margin-right: 8px;
vertical-align: text-top;
}
.mx_RoomPreviewBar_fullWidth {
width: 100%;
}
}
@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_RoomPreviewCard {
padding: var(--cpd-space-8x) var(--cpd-space-6x) !important; /* Override SpaceRoomView's default padding */
margin: auto;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 480px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: var(--cpd-color-bg-subtle-primary);
border-radius: 8px;
position: relative;
font: var(--cpd-font-body-md-regular);
}
.mx_RoomPreviewCard .mx_RoomPreviewCard_notice {
font-weight: var(--cpd-font-weight-semibold);
line-height: 1.5rem;
color: var(--cpd-color-text-primary);
margin-top: var(--cpd-space-6x);
}
.mx_RoomPreviewCard .mx_RoomPreviewCard_notice svg {
height: 1em;
width: 1em;
margin-right: var(--cpd-space-2x);
color: var(--cpd-color-text-secondary);
vertical-align: -2px;
}
.mx_RoomPreviewCard .mx_RoomPreviewCard_inviter {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: var(--cpd-space-5x);
font-size: 0.9375rem;
}
.mx_RoomPreviewCard .mx_RoomPreviewCard_inviter > div {
margin-left: var(--cpd-space-2x);
}
.mx_RoomPreviewCard .mx_RoomPreviewCard_inviter > div .mx_RoomPreviewCard_inviter_name {
line-height: 1.125rem;
}
.mx_RoomPreviewCard .mx_RoomPreviewCard_inviter > div .mx_RoomPreviewCard_inviter_mxid {
color: var(--cpd-color-text-secondary);
}
.mx_RoomPreviewCard .mx_RoomPreviewCard_avatar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.mx_RoomPreviewCard .mx_RoomPreviewCard_avatar .mx_RoomPreviewCard_video {
width: 22px;
height: 22px;
padding: 14px;
border-radius: calc((50px + 2 * 3px) / 2);
background-color: var(--cpd-color-text-action-accent);
border: 3px solid var(--cpd-color-bg-subtle-primary);
left: calc(-50px / 4 - 3px);
}
.mx_RoomPreviewCard .mx_RoomPreviewCard_avatar .mx_RoomPreviewCard_video svg {
width: inherit;
height: inherit;
color: var(--cpd-color-bg-canvas-default);
}
/* XXX Remove this when video rooms leave beta */
.mx_RoomPreviewCard .mx_RoomPreviewCard_avatar .mx_BetaCard_betaPill {
position: absolute;
inset-block-start: var(--cpd-space-8x);
inset-inline-end: var(--cpd-space-6x);
}
.mx_RoomPreviewCard h1.mx_RoomPreviewCard_name {
margin: var(--cpd-space-4x) 0 !important; /* Override SpaceRoomView's default margins */
}
.mx_RoomPreviewCard .mx_RoomPreviewCard_topic {
line-height: 1.375rem;
margin-top: var(--cpd-space-4x);
max-height: 160px;
overflow-y: auto;
}
.mx_RoomPreviewCard .mx_FacePile {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: var(--cpd-space-4x);
/* For enhanced visibility under contrast control */
outline: 1px solid transparent;
}
.mx_RoomPreviewCard .mx_FacePile :first-child {
-ms-flex-negative: 0;
flex-shrink: 0;
}
.mx_RoomPreviewCard .mx_RoomPreviewCard_joinButtons {
margin-top: var(--cpd-space-5x);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: var(--cpd-space-5x);
}
.mx_RoomPreviewCard .mx_RoomPreviewCard_joinButtons .mx_AccessibleButton {
max-width: 200px;
padding: 14px 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
}
@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_RoomSearchAuxPanel {
/* use `min-height` rather than height, to allow room for the text to wrap if the window is narrow */
min-height: 84px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-color: var(--cpd-color-bg-canvas-default);
border-style: solid;
border-width: 1px 0;
padding: var(--cpd-space-3x);
-webkit-box-sizing: border-box;
box-sizing: border-box;
gap: var(--cpd-space-2x);
}
.mx_RoomSearchAuxPanel .mx_RoomSearchAuxPanel_summary {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
display: inherit; /* flex */
gap: var(--cpd-space-2x);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
}
.mx_RoomSearchAuxPanel .mx_RoomSearchAuxPanel_summary > svg {
padding: var(--cpd-space-2x);
border-radius: var(--cpd-space-2x);
background-color: var(--cpd-color-bg-subtle-secondary);
color: var(--cpd-color-icon-secondary);
-ms-flex-negative: 0;
flex-shrink: 0;
}
.mx_RoomSearchAuxPanel .mx_RoomSearchAuxPanel_summary .mx_RoomSearchAuxPanel_summary_text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
font-size: 0.9375rem;
line-height: 1.375rem;
overflow: hidden;
}
.mx_RoomSearchAuxPanel .mx_RoomSearchAuxPanel_summary .mx_RoomSearchAuxPanel_summary_text span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mx_RoomSearchAuxPanel .mx_RoomSearchAuxPanel_summary .mx_SearchWarning {
display: contents;
font-size: 0.8125rem;
line-height: 1.25rem;
color: var(--cpd-color-text-secondary);
}
.mx_RoomSearchAuxPanel .mx_RoomSearchAuxPanel_buttons {
display: inherit; /* flex */
gap: var(--cpd-space-6x);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-negative: 0;
flex-shrink: 0;
}
}
@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_RoomUpgradeWarningBar {
max-height: 235px;
background-color: #f7f7f7;
padding-left: 20px;
padding-right: 20px;
overflow: scroll;
}
.mx_RoomUpgradeWarningBar_wrapped {
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-align: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
}
.mx_RoomUpgradeWarningBar_header {
color: var(--cpd-color-text-critical-primary);
font-weight: bold;
}
.mx_RoomUpgradeWarningBar_body {
color: var(--cpd-color-text-critical-primary);
}
.mx_RoomUpgradeWarningBar_upgradelink {
color: var(--cpd-color-text-critical-primary);
text-decoration: underline;
}
.mx_RoomUpgradeWarningBar_small {
color: var(--cpd-color-gray-900);
font-size: 70%;
}
}
@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_SendMessageComposer {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
font: var(--cpd-font-body-md-regular);
/* fixed line height to prevent emoji from being taller than text */
line-height: 1.125rem;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-right: 6px;
/* don't grow wider than available space */
min-width: 0;
}
.mx_SendMessageComposer .mx_BasicMessageComposer {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
/* min-height at this level so the mx_BasicMessageComposer_input */
/* still stays vertically centered when less than 55px. */
/* We also set this to ensure the voice message recording widget */
/* doesn't cause a jump. */
min-height: 55px;
}
.mx_SendMessageComposer .mx_BasicMessageComposer .mx_BasicMessageComposer_input {
padding: 3px 0;
/* this will center the contenteditable */
/* in it's parent vertically */
/* while keeping the autocomplete at the top */
/* of the composer. The parent needs to be a flex container for this to work. */
margin: auto 0;
/* max-height at this level so autocomplete doesn't get scrolled too */
max-height: 140px;
overflow-y: auto;
}
}
@layer app-web{
.mx_Stickers_content {
overflow: hidden;
}
.mx_Stickers_content_container {
overflow: hidden;
height: 300px;
}
#mx_persistedElement_stickerPicker .mx_AppTileFullWidth {
height: auto;
height: initial;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-left: none;
border-right: none;
border-bottom: none;
}
#mx_persistedElement_stickerPicker .mx_AppTileMenuBar {
padding: 0;
}
#mx_persistedElement_stickerPicker iframe {
/* Sticker picker depends on the fixed height previously used for all tiles */
height: 283px; /* height of the popout minus the AppTile menu bar */
}
.mx_Stickers_contentPlaceholder {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
.mx_Stickers_contentPlaceholder p {
max-width: 200px;
}
.mx_Stickers_addLink {
display: inline;
cursor: pointer;
color: var(--cpd-color-text-action-accent);
}
}
@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_ThirdPartyMemberInfo {
padding: var(--cpd-space-4x);
}
}
@layer app-web{
/*
Copyright 2024 New Vector Ltd.
Copyright 2016 OpenMarket Ltd
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_TopUnreadMessagesBar {
z-index: 1000;
position: absolute;
top: 24px;
right: 24px;
width: 38px;
}
.mx_TopUnreadMessagesBar::after {
content: "";
position: absolute;
top: -8px;
left: 11px;
width: 4px;
height: 4px;
border-radius: 16px;
background-color: var(--cpd-color-bg-canvas-default);
border: 6px solid var(--cpd-color-icon-accent-tertiary);
pointer-events: none;
}
.mx_TopUnreadMessagesBar_scrollUp {
height: 38px;
width: 38px;
border-radius: 19px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: var(--cpd-color-bg-canvas-default);
border: 1.3px solid var(--cpd-color-icon-tertiary);
cursor: pointer;
}
.mx_TopUnreadMessagesBar_scrollUp svg {
width: 24px;
height: 24px;
padding: 6px;
color: var(--cpd-color-icon-tertiary);
}
.mx_TopUnreadMessagesBar_markAsRead {
display: block;
width: 18px;
height: 18px;
background: var(--cpd-color-bg-canvas-default);
border: 1.3px solid var(--cpd-color-icon-tertiary);
border-radius: 10px;
margin: 5px auto;
}
.mx_TopUnreadMessagesBar_markAsRead svg {
width: 16px;
height: 16px;
padding: 1px;
color: var(--cpd-color-icon-tertiary);
}
}
@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_UserIdentityWarning {
/* 42px is the padding-left of .mx_MessageComposer_wrapper in res/css/views/rooms/_MessageComposer.pcss */
margin-left: calc(-42px + 18px);
margin-left: calc(-42px + var(--RoomView_MessageList-padding));
}
.mx_UserIdentityWarning .mx_UserIdentityWarning_row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.mx_UserIdentityWarning .mx_UserIdentityWarning_row .mx_BaseAvatar {
margin-left: var(--cpd-space-2x);
}
.mx_UserIdentityWarning .mx_UserIdentityWarning_row .mx_UserIdentityWarning_main {
margin-left: var(--cpd-space-6x);
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.mx_UserIdentityWarning .mx_UserIdentityWarning_row .mx_UserIdentityWarning_main.critical {
color: var(--cpd-color-text-critical-primary);
}
.mx_UserIdentityWarning.critical {
background: linear-gradient(180deg, var(--cpd-color-red-100) 0%, var(--cpd-color-theme-bg) 100%);
}
.mx_MessageComposer.mx_MessageComposer--compact > .mx_UserIdentityWarning {
margin-left: calc(-25px + 18px);
margin-left: calc(-25px + var(--RoomView_MessageList-padding));
}
}
@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_VoiceRecordComposerTile_stop {
/* 20px + 4px padding + 2px border makes this a 32px square (as intended) */
width: 20px;
height: 20px;
padding: var(--cpd-space-1x);
border: 2px solid var(--cpd-color-gray-400);
border-radius: 32px;
margin-right: 2px; /* between us and the waveform component */
}
.mx_VoiceRecordComposerTile_stop svg {
width: inherit;
height: inherit;
color: #ff5b55;
}
.mx_VoiceRecordComposerTile_delete {
width: 24px;
height: 24px;
vertical-align: middle;
margin-right: 2px; /* distance from left edge of waveform container (container has some margin too) */
}
.mx_VoiceRecordComposerTile_delete svg {
width: inherit;
height: inherit;
color: var(--cpd-color-gray-800);
}
.mx_VoiceRecordComposerTile_uploadingState {
margin-right: 10px;
color: var(--cpd-color-text-secondary);
}
.mx_VoiceRecordComposerTile_failedState {
margin-right: 21px;
}
.mx_VoiceRecordComposerTile_failedState .mx_VoiceRecordComposerTile_uploadState_badge {
display: inline-block;
margin-right: 4px;
vertical-align: middle;
}
.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer {
/* Note: remaining class properties are in the PlayerContainer CSS. */
/* fixed height to reduce layout jumps with the play button appearing */
/* https://github.com/vector-im/element-web/issues/18431 */
height: 32px;
margin: 6px; /* force the composer area to put a gutter around us */
margin-right: 6px; /* isolate from stop/send button */
position: relative; /* important for the live circle */
}
.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording {
/* We are putting the circle in this padding, so we need +10px from the regular */
/* padding on the left side. */
padding-left: 22px;
}
.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording::before {
-webkit-animation: recording-pulse 2s infinite;
animation: recording-pulse 2s infinite;
content: "";
background-color: #ff5b55;
width: 10px;
height: 10px;
position: absolute;
left: 12px; /* 12px from the left edge for container padding */
top: 17px; /* vertically center (middle align with clock) */
border-radius: 10px;
}
.mx_MessageComposer_wysiwyg .mx_VoiceMessagePrimaryContainer.mx_VoiceRecordComposerTile_recording::before {
top: 15px; /* vertically center (middle align with clock) */
}
/* The keyframes are slightly weird here to help make a ramping/punch effect */
/* for the recording dot. We start and end at 100% opacity to help make the */
/* dot feel a bit like a real lamp that is blinking: the animation ends up */
/* spending a lot of its time showing a steady state without a fade effect. */
/* This lamp effect extends into why the 0% opacity keyframe is not in the */
/* midpoint: lamps take longer to turn off than they do to turn on, and the */
/* extra frames give it a bit of a realistic punch for when the animation is */
/* ramping back up to 100% opacity. */
/* Target animation timings: steady for 1.5s, fade out for 0.3s, fade in for 0.2s */
/* (intended to be used in a loop for 2s animation speed) */
@-webkit-keyframes recording-pulse {
0% {
opacity: 1;
}
35% {
opacity: 0;
}
65% {
opacity: 1;
}
}
@keyframes recording-pulse {
0% {
opacity: 1;
}
35% {
opacity: 0;
}
65% {
opacity: 1;
}
}
@media (forced-colors: active) {
.mx_VoiceMessagePrimaryContainer {
outline: 1px solid transparent;
}
}
}
@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_WhoIsTypingTile {
margin-left: -18px; /* offset padding from mx_RoomView_MessageList to center avatars */
padding-top: 18px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
/* position the indicator in the same place horizontally as the event-tile avatar slot. */
.mx_WhoIsTypingTile_avatars {
-webkit-box-flex: 0;
-ms-flex: 0 0 82px;
flex: 0 0 82px; /* 18 (padding on message list) + 64 (padding on event lines) */
text-align: center;
}
.mx_WhoIsTypingTile_avatars > :not(:first-child) {
margin-left: -12px;
}
.mx_WhoIsTypingTile_avatars .mx_BaseAvatar {
border: 1px solid var(--cpd-color-bg-canvas-default);
border-radius: 40px;
}
.mx_WhoIsTypingTile_remainingAvatarPlaceholder {
position: relative;
display: inline-block;
color: var(--cpd-color-text-primary);
background-color: var(--cpd-color-gray-400);
border: 1px solid var(--cpd-color-bg-canvas-default);
border-radius: 40px;
width: 24px;
height: 24px;
line-height: 1.5rem;
font-size: 0.8em;
vertical-align: top;
text-align: center;
}
.mx_WhoIsTypingTile_label {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
font: var(--cpd-font-body-md-semibold);
color: var(--cpd-color-text-secondary);
}
.mx_WhoIsTypingTile_label > span {
background-image: url(../../img/typing-indicator-2x.e13c259.gif);
background-size: 25px;
background-position: left bottom;
background-repeat: no-repeat;
padding-bottom: 15px;
display: block;
}
.mx_MatrixChat_useCompactLayout .mx_WhoIsTypingTile {
padding-top: 4px;
}
}
@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_EditWysiwygComposer {
--EditWysiwygComposer-padding-inline: 3px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
max-width: 100%; /* disable overflow */
width: auto;
gap: 8px;
padding: 8px 3px;
padding: 8px var(--EditWysiwygComposer-padding-inline);
}
.mx_EditWysiwygComposer .mx_WysiwygComposer_Editor_content {
border-radius: 4px;
border: solid 1px transparent;
background-color: var(--cpd-color-bg-canvas-default);
max-height: 200px;
padding: 3px 6px;
}
.mx_EditWysiwygComposer .mx_WysiwygComposer_Editor_content:focus {
border-color: var(--cpd-color-green-400);
}
.mx_EditWysiwygComposer .mx_EditWysiwygComposer_buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap-reverse;
flex-flow: row wrap-reverse; /* display "Save" over "Cancel" */
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
gap: 5px;
-webkit-margin-start: auto;
margin-inline-start: auto;
}
.mx_EditWysiwygComposer .mx_EditWysiwygComposer_buttons .mx_AccessibleButton {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-width: 100px; /* magic number to align the edge of the button with the input area */
}
.mx_EditWysiwygComposer .mx_FormattingButtons_Button:first-child {
margin-left: 0px;
}
}
@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_SendWysiwygComposer {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
font: var(--cpd-font-body-md-regular);
/* fixed line height to prevent emoji from being taller than text */
line-height: 1.125rem;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-right: 13px;
gap: 8px;
}
.mx_SendWysiwygComposer .mx_FormattingButtons {
margin-left: 12px;
}
.mx_SendWysiwygComposer .mx_WysiwygComposer_Editor {
border: 1px solid;
border-color: var(--cpd-color-gray-400);
padding: 6px 11px 6px 12px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
gap: 10px;
}
.mx_SendWysiwygComposer .mx_WysiwygComposer_Editor .mx_E2EIcon {
margin: 0 0 7px 0;
width: 12px;
height: 12px;
}
.mx_SendWysiwygComposer .mx_WysiwygComposer_Editor[data-is-expanded="true"] {
border-radius: 14px;
}
.mx_SendWysiwygComposer .mx_WysiwygComposer_Editor[data-is-expanded="true"] .mx_WysiwygComposer_Editor_container {
margin-top: 3px;
margin-bottom: 3px;
}
.mx_SendWysiwygComposer .mx_WysiwygComposer_Editor[data-is-expanded="false"] {
border-radius: 40px;
}
.mx_SendWysiwygComposer .mx_WysiwygComposer_Editor .mx_WysiwygComposer_Editor_container {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 22px;
margin-bottom: 2px;
/* don't grow wider than available space */
width: 0;
}
.mx_SendWysiwygComposer .mx_WysiwygComposer_Editor .mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content {
/* this will center the contenteditable */
/* in it's parent vertically */
/* while keeping the autocomplete at the top */
/* of the composer. The parent needs to be a flex container for this to work. */
margin: auto 0;
/* the line height is $font-22px (set in _Editor.pcss) and we want to display 16 lines */
max-height: calc(16 * 1.375rem);
overflow-y: auto;
}
.mx_SendWysiwygComposer-focused .mx_WysiwygComposer_Editor {
border-color: var(--cpd-color-gray-600);
}
}
@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_WysiwygComposer_Editor_container {
/* These are set in Javascript */
--avatar-letter: "";
--avatar-background: unset;
--user-status: none;
--placeholder: "";
}
@-webkit-keyframes visualbell {
from {
background-color: #faa;
}
to {
background-color: var(--cpd-color-bg-canvas-default);
}
}
@keyframes visualbell {
from {
background-color: #faa;
}
to {
background-color: var(--cpd-color-bg-canvas-default);
}
}
.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content {
line-height: 1.375rem;
white-space: pre-wrap;
word-wrap: break-word;
outline: none;
overflow-x: hidden;
}
/* navigated through in a single keypress */
.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content .caretNode {
-webkit-user-select: all;
-moz-user-select: all;
user-select: all;
}
/* we always have a
tag at the end of the html, we need it to be present at first then hide it as soon as
we have any other elements */
.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content br:not(:only-child) {
display: none;
}
/* Force caret nodes to be selected in full so that they can be */
.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content p {
margin-top: 0;
margin-bottom: 0;
/* this may seem redundant, but we need to handle zero content formatting tags, which occur when we split a
formatting tag into paragraphs */
min-height: 1.375rem;
}
.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content ul,
.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content ol {
margin-top: 0;
margin-bottom: 0;
-webkit-padding-start: var(--cpd-space-7x);
padding-inline-start: var(--cpd-space-7x);
}
/* Make list type disc to match rich text editor */
.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content ul {
list-style-type: disc;
}
.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content blockquote {
color: #777;
border-left: 2px solid var(--cpd-color-border-interactive-primary);
border-radius: 2px;
padding: 0 10px;
-webkit-margin-before: 0;
margin-block-start: 0;
-webkit-margin-after: 0;
margin-block-end: 0;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-margin-end: 0;
margin-inline-end: 0;
}
.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content > pre {
font-size: 0.9375rem;
line-height: 1.5rem;
margin-top: 0;
margin-bottom: 0;
padding: var(--cpd-space-2x) var(--cpd-space-3x);
background-color: var(--cpd-color-bg-subtle-primary);
border: 1px solid var(--cpd-color-gray-400);
border-radius: 2px;
}
.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content code:not(pre *) {
font-family: "Fira Code", "", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
"Noto Color Emoji" !important;
font-family: "Fira Code", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
"Noto Color Emoji" !important;
background-color: var(--cpd-color-bg-subtle-primary);
border: 1px solid var(--cpd-color-gray-400);
border-radius: 4px;
padding: var(--cpd-space-0-5x);
}
.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content code:not(pre *):empty {
border: medium none currentcolor;
border: initial;
padding: 0;
padding: initial;
}
/* this selector represents what will become a pill
nb despite there being mx_UserPill and mx_RoomPill classes appended to these pills
in the current composer, there don't appear to be any styles associated with those classes
in this repo */
.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content a[data-mention-type] {
/* combine mx_Pill from _Pill.pcss */
padding: 0.0625rem 0.4em;
line-height: 1.0625rem;
border-radius: 1rem;
display: inline;
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-width: 100%;
overflow: hidden;
color: var(--cpd-color-text-on-solid-primary);
background-color: var(--cpd-color-bg-action-primary-rest);
/* ...with the overrides from _BasicMessageComposer.pcss */
-webkit-user-select: all;
-moz-user-select: all;
user-select: all;
position: relative;
cursor: inherit; /* We don't want indicate clickability */
text-overflow: ellipsis;
white-space: nowrap;
}
/* avatar pseudo element */
.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content a[data-mention-type]::before {
/* After consolidation, all of the styling from _Pill.scss was being overridden,
so take what is in _BasicMessageComposer.pcss as the starting point */
display: inline-block;
content: var(--avatar-letter);
background: var(--avatar-background), var(--cpd-color-bg-canvas-default);
width: 1rem;
min-width: 1rem; /* ensure the avatar is not compressed */
height: 1rem;
line-height: 1rem;
text-align: center;
/* Get the positioning of the avatar just right for consistency with timeline */
-webkit-margin-start: -0.4rem;
margin-inline-start: -0.4rem;
-webkit-margin-end: 0.24rem;
margin-inline-end: 0.24rem;
vertical-align: 0.12rem;
background-repeat: no-repeat;
background-size: 1rem;
border-radius: 1rem;
color: var(--avatar-color, var(--cpd-color-bg-canvas-default));
font-weight: bold;
font-size: 0.6275rem;
}
/* Pseudo element for rendering the user status emoji on mention pills. It is a
pseudo element rather than a child node because the pill's text content is used
verbatim when the message is serialised, so a real node would put the emoji in the
sent message. */
.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content a[data-mention-type]::after {
content: var(--user-status);
-webkit-margin-start: var(--cpd-space-1x);
margin-inline-start: var(--cpd-space-1x);
}
.mx_WysiwygComposer_Editor_container .mx_WysiwygComposer_Editor_content_placeholder::before {
content: var(--placeholder);
width: 0;
height: 0;
overflow: visible;
display: inline-block;
pointer-events: none;
white-space: nowrap;
color: var(--cpd-color-text-secondary);
}
.mx_WysiwygComposer_AutoCompleteWrapper {
position: relative;
}
/* Due to the fact that editing a message now has a larger amount of grey
colour above it (due to the rich text buttons above the composer), we need
to give the autocomplete a bit more visual separation by using a border.
*/
.mx_WysiwygComposer_AutoCompleteWrapper > .mx_Autocomplete {
border: 1px solid var(--cpd-color-gray-400);
border-radius: 8px;
}
}
@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_FormattingButtons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
gap: 8px;
}
.mx_FormattingButtons .mx_FormattingButtons_Button {
--size: 28px;
cursor: pointer;
height: 28px;
height: var(--size);
width: 28px;
width: var(--size);
background-color: transparent;
border: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 5px;
}
.mx_FormattingButtons .mx_FormattingButtons_Button_hover:hover {
background: var(--cpd-color-bg-subtle-secondary);
}
.mx_FormattingButtons .mx_FormattingButtons_Button_hover:hover .mx_FormattingButtons_Icon {
color: var(--cpd-color-text-secondary);
}
.mx_FormattingButtons .mx_FormattingButtons_active {
background: var(--cpd-color-green-300);
}
.mx_FormattingButtons .mx_FormattingButtons_active .mx_FormattingButtons_Icon {
color: var(--cpd-color-text-action-accent);
}
.mx_FormattingButtons .mx_FormattingButtons_disabled .mx_FormattingButtons_Icon {
color: var(--cpd-color-gray-400);
}
.mx_FormattingButtons .mx_FormattingButtons_Icon {
--size: 16px;
height: 16px;
height: var(--size);
width: 16px;
width: var(--size);
color: var(--cpd-color-gray-800);
}
.mx_FormattingButtons_Tooltip_KeyboardShortcut kbd {
text-align: center;
display: inline-block;
text-transform: capitalize;
font-family: Inter, sans-serif;
}
}
@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_LinkModal {
padding: var(--cpd-space-8x);
max-width: 600px;
height: 341px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.mx_LinkModal .mx_LinkModal_content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
gap: var(--cpd-space-2x);
margin-top: 7px;
}
.mx_LinkModal .mx_LinkModal_content .mx_LinkModal_Field {
-webkit-box-flex: initial;
-ms-flex: initial;
flex: initial;
height: 40px;
}
.mx_LinkModal .mx_LinkModal_content .mx_LinkModal_buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.mx_LinkModal .mx_LinkModal_content .mx_LinkModal_buttons .mx_Dialog_buttons {
display: inline-block;
}
}
@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_AvatarSetting_avatar {
width: 120px;
min-width: 120px; /* so it doesn't get crushed by the flexbox in languages with longer words */
height: 120px;
margin-top: 8px;
position: relative;
}
.mx_AvatarSetting_avatar.mx_AvatarSetting_avatarDisplay:hover .mx_AvatarSetting_hover {
opacity: 1;
}
.mx_AvatarSetting_avatar > * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
margin-top: 8px;
}
.mx_AvatarSetting_avatar .mx_AccessibleButton.mx_AccessibleButton_kind_link_sm {
width: 100%;
}
.mx_AvatarSetting_avatar > img {
display: block;
height: 120px;
width: inherit;
border-radius: 120px;
cursor: pointer;
-o-object-fit: cover;
object-fit: cover;
}
.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton {
width: 28px;
height: 28px;
border-radius: 32px;
border: 1px solid var(--cpd-color-bg-canvas-default);
background-color: var(--cpd-color-bg-canvas-default);
position: absolute;
bottom: 0;
right: 0;
text-align: center;
cursor: pointer;
}
.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton svg {
position: relative;
top: 3px;
}
.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton:hover,
.mx_AvatarSetting_avatar .mx_AvatarSetting_uploadButton_active {
background-color: var(--cpd-color-bg-subtle-primary);
}
.mx_AvatarSetting_removeMenuItem svg,
.mx_AvatarSetting_removeMenuItem span {
color: var(--cpd-color-text-critical-primary) !important;
}
}
@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_FontScalingPanel_preview {
--FontScalingPanel_preview-padding-block: 9px;
border: 1px solid var(--cpd-color-gray-400);
border-radius: 10px;
padding: 0 var(--cpd-space-4x) 9px var(--cpd-space-4x);
padding: 0 var(--cpd-space-4x) var(--FontScalingPanel_preview-padding-block) var(--cpd-space-4x);
pointer-events: none;
display: flow-root;
}
.mx_FontScalingPanel_preview.mx_IRCLayout {
padding-top: 9px;
}
.mx_FontScalingPanel_preview .mx_ReadReceiptGroup {
display: none;
}
.mx_FontScalingPanel_Dropdown {
width: 120px;
/* Override default mx_Field margin */
margin-bottom: var(--cpd-space-2x) !important;
}
}
@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_ImageSizePanel_radios {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
gap: var(--cpd-space-4x);
}
.mx_ImageSizePanel_radios > label {
margin-right: 68px; /* keep the boxes separate */
cursor: pointer;
}
.mx_ImageSizePanel_radios .mx_ImageSizePanel_size {
display: block;
color: var(--cpd-color-gray-400);
width: 221px;
height: 148px;
margin-bottom: 14px; /* move radio button away from bottom edge a bit */
}
}
@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_IntegrationManager .mx_Dialog_border {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 60%;
height: 70%;
max-width: none;
max-width: initial;
max-height: none;
max-height: initial;
}
.mx_IntegrationManager .mx_Dialog {
padding: 0;
overflow: hidden;
}
.mx_IntegrationManager iframe {
background-color: #fff;
border: 0;
width: 100%;
height: 100%;
}
.mx_IntegrationManager h3 {
margin-block: var(--cpd-space-5x);
}
.mx_IntegrationManager .mx_IntegrationManager_loading,
.mx_IntegrationManager .mx_IntegrationManager_error {
text-align: center;
}
.mx_IntegrationManager .mx_IntegrationManager_error h3 {
color: var(--cpd-color-text-critical-primary);
}
}
@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_JoinRuleSettings_upgradeRequired {
margin-left: 16px;
padding: 4px 16px;
border: 1px solid var(--cpd-color-text-action-accent);
border-radius: 8px;
color: var(--cpd-color-text-action-accent);
font-size: 0.75rem;
line-height: 0.9375rem;
}
.mx_JoinRuleSettings_spacesWithAccess > h4 {
color: var(--cpd-color-text-secondary);
font-weight: var(--cpd-font-weight-semibold);
font-size: 0.75rem;
line-height: 0.9375rem;
text-transform: uppercase;
}
.mx_JoinRuleSettings_spacesWithAccess > span {
font: var(--cpd-font-body-md-medium);
line-height: 32px; /* matches height of avatar for v-align */
color: var(--cpd-color-text-secondary);
display: inline-block;
}
.mx_JoinRuleSettings_spacesWithAccess > span .mx_BaseAvatar {
margin-right: 8px;
}
.mx_JoinRuleSettings_spacesWithAccess > span + span {
margin-left: 16px;
}
.mx_JoinRuleSettings_radioButton {
padding-top: 16px;
}
.mx_JoinRuleSettings_radioButton .mx_StyledRadioButton_content {
margin-left: 14px;
font-weight: var(--cpd-font-weight-semibold);
font-size: 0.9375rem;
line-height: 1.5rem;
color: var(--cpd-color-text-primary);
display: block;
}
.mx_JoinRuleSettings_radioButton.mx_StyledRadioButton_disabled {
opacity: 0.5;
}
.mx_JoinRuleSettings_radioButton.mx_StyledRadioButton_disabled + span {
opacity: 0.5;
}
.mx_JoinRuleSettings_radioButton + span {
display: inline-block;
margin-left: 34px;
margin-bottom: 16px;
font-size: 0.9375rem;
line-height: 1.5rem;
color: var(--cpd-color-text-secondary);
}
.mx_JoinRuleSettings_radioButton + span + .mx_StyledRadioButton {
border-top: 1px solid var(--cpd-color-gray-400);
}
.mx_JoinRuleSettings_labelledCheckbox {
font: var(--cpd-font-body-md-regular);
margin-top: var(--cpd-space-2x);
}
.mx_JoinRuleSettings_recommended {
color: var(--cpd-color-green-1000);
}
}
@layer app-web{
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Šimon Brandner
Copyright 2020 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_KeyboardShortcut kbd {
padding: 5px;
border-radius: 4px;
background-color: var(--cpd-color-bg-canvas-default);
min-width: 20px;
text-align: center;
display: inline-block;
border: 1px solid var(--cpd-color-border-interactive-primary);
-webkit-box-shadow: 0 2px var(--cpd-color-border-interactive-primary);
box-shadow: 0 2px var(--cpd-color-border-interactive-primary);
text-transform: capitalize;
}
}
@layer app-web{
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Šimon Brandner
Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_LayoutSwitcher_LayoutSelector {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
/**
* The settings form has a default gap of 10px
* We want to have a bigger gap between the layout options
*/
gap: var(--cpd-space-4x) !important;
}
.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio {
border: 1px solid var(--cpd-color-border-interactive-primary);
border-radius: var(--cpd-space-2x);
}
.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
/*
* 10px
*/
gap: calc(var(--cpd-space-2x) + var(--cpd-space-0-5x));
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline,
.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview {
margin: var(--cpd-space-3x);
}
/**
* Override the event tile style to make it fit in the selector
* Tweak also hover style and remove action bar
*/
.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview {
pointer-events: none;
}
.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview .mx_EventTile {
margin: 0;
/*
* EventTileView applies the content gutter through this
* variable on the shell. Keep the preview's content width
* consistent with the legacy preview override below.
*/
--event-tile-content-inline-end: 0;
}
/**
* Hide the message options and message action bar in the preview
*/
.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview .mx_EventTile .mx_ReadReceiptGroup,
.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview .mx_EventTile .mx_MessageActionBar {
display: none;
}
.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview .mx_EventTile .mx_EventTile_content {
margin-right: 0;
-webkit-margin-end: 0;
margin-inline-end: 0;
}
.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview .mx_EventTile:has([data-event-layout="group"]) {
margin-top: calc(var(--cpd-space-3x) * -1);
}
/**
* Add margin to center the bubble
*/
.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview .mx_EventTile:has([data-event-layout="bubble"]) {
/**
* Add the layout margin and the margin to vertically center the bubble
*/
margin-top: var(--cpd-space-6x);
margin-right: 34px;
-ms-flex-negative: 1;
flex-shrink: 1;
}
.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview .mx_EventTile:has([data-event-layout="irc"]) {
/*
* The migrated tile keeps an empty timestamp slot for
* IRC alignment. The preview must hide that slot as the
* legacy preview hid its timestamp element.
*/
}
.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview .mx_EventTile:has([data-event-layout="irc"]) .mx_MessageTimestamp,
.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview .mx_EventTile:has([data-event-layout="irc"]) [data-testid="event-tile-slot-timestamp"] {
display: none;
}
.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview .mx_EventTile .mx_EventTile_line {
max-width: 100%;
}
.mx_LayoutSwitcher_LayoutSelector .mxLayoutSwitcher_LayoutSelector_LayoutRadio .mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator {
border-top: 0;
border-bottom: 1px solid var(--cpd-color-border-interactive-secondary);
}
}
@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_NotificationPusherSettings .mx_NotificationPusherSettings_description {
color: var(--cpd-color-text-primary);
}
.mx_NotificationPusherSettings .mx_NotificationPusherSettings_detail {
margin-top: -4px;
margin-bottom: 12px;
}
}
@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.
*/
/* The labs notice banner renders directly below this, so keep them apart. When it is absent
the margin collapses with the section's own, leaving the spacing below unchanged. */
.mx_SettingsTab .mx_NotificationSettings2 .mx_NotificationSettings2_error {
margin-bottom: var(--cpd-space-4x);
}
/* The alert lays its actions out at flex-basis 0, which would otherwise break the label
across lines rather than wrapping it below the message. */
.mx_SettingsTab .mx_NotificationSettings2 .mx_NotificationSettings2_error .mx_AccessibleButton {
white-space: nowrap;
}
/* Compound drops the action onto its own row for any alert under 600px, which leaves this
short message sitting beside a mostly empty second row. Wrap on demand instead, so the
action only moves below the message once the two genuinely stop fitting side by side.
The children are the alert's content row and the message within it. */
.mx_SettingsTab .mx_NotificationSettings2 .mx_NotificationSettings2_error > div {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.mx_SettingsTab .mx_NotificationSettings2 .mx_NotificationSettings2_error > div > div:first-child {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
/* Compound tints only the icon on a critical alert and leaves the message in the
default text colour, so state it here to read like warnings elsewhere. The action
is a sibling of this element and so keeps its own colour. */
color: var(--cpd-color-text-critical-primary);
}
.mx_SettingsTab .mx_NotificationSettings2 .mx_SettingsSection_subSections {
color: var(--cpd-color-text-primary);
gap: 32px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.mx_SettingsTab .mx_NotificationSettings2 .mx_SettingsSubsection_description {
margin-bottom: 20px;
}
.mx_SettingsTab .mx_NotificationSettings2 .mx_SettingsSubsection_description .mx_SettingsSubsection_text .mx_NotificationSettings2_notificationBadge {
vertical-align: baseline;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
margin: 0 2px;
}
.mx_SettingsTab .mx_NotificationSettings2 .mx_SettingsSubsection_content {
margin-top: 12px;
gap: 12px;
justify-items: stretch;
-webkit-box-pack: stretch;
-ms-flex-pack: stretch;
justify-content: stretch;
}
.mx_SettingsTab .mx_NotificationSettings2 .mx_StyledRadioButton_content {
margin-left: 10px;
margin-right: 10px;
}
.mx_SettingsTab .mx_NotificationSettings2 .mx_TagComposer {
margin-top: 16px;
}
.mx_SettingsTab .mx_NotificationSettings2 .mx_TagComposer.mx_TagComposer_disabled {
opacity: 0.7;
}
.mx_SettingsTab .mx_NotificationSettings2 .mx_TagComposer .mx_TagComposer_tags {
margin-top: 16px;
gap: 8px;
}
.mx_SettingsTab .mx_NotificationSettings2 .mx_TagComposer .mx_TagComposer_tags .mx_Tag {
border-radius: 18px;
padding: 6px 12px;
background: var(--cpd-color-alpha-gray-300);
margin: 0;
}
.mx_SettingsTab .mx_NotificationSettings2 .mx_TagComposer .mx_TagComposer_tags .mx_Tag .mx_Tag_delete {
background: var(--cpd-color-gray-800);
color: #fff;
-ms-flex-item-align: initial;
align-self: initial;
}
}
@layer app-web{
/*
Copyright 2024 New Vector Ltd.
Copyright 2015-2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_UserNotifSettings_grid {
width: calc(100% + 12px); /* +12px to line up center of 'Noisy' column with toggle switches */
display: grid;
grid-template-columns: auto repeat(3, 62px);
place-items: center center;
grid-gap: 8px;
gap: 8px;
}
/* Override StyledRadioButton default styles */
.mx_UserNotifSettings_grid .mx_StyledRadioButton {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.mx_UserNotifSettings_grid .mx_StyledRadioButton .mx_StyledRadioButton_content {
display: none;
}
.mx_UserNotifSettings_grid .mx_StyledRadioButton .mx_StyledRadioButton_spacer {
display: none;
}
/* left align section heading */
.mx_UserNotifSettings_grid .mx_SettingsSubsectionHeading {
justify-self: start;
}
.mx_UserNotifSettings_gridRowContainer {
display: contents;
}
.mx_UserNotifSettings_gridRow {
display: contents;
}
.mx_UserNotifSettings_gridRowLabel {
padding-inline: unset; /* Remove default legend padding */
justify-self: start;
/*