mv element.io @types __mocks__/ debian docker module_system/ playwright res src test webapp Dockerfile .dockerignore .eslintignore .stylelintrc.cjs babel.config.cjs recorder-worklet-loader.cjs .modernizr.json components.json config.json config.sample.json package.json project.json tsconfig.json tsconfig.module_system.json jest.config.ts playwright.config.ts webpack.config.ts build_config.sample.yaml apps/web/

mkdir apps/web/scripts mv scripts/{cleanup.sh,ci_package.sh,copy-res.ts,deploy.py,package.sh} apps/web/scripts And a couple of gitignore tweaks Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2026-02-24 15:43:58 +00:00
parent e7509c92a1
commit 91a3cb03c1
3408 changed files with 28 additions and 32 deletions
@@ -0,0 +1,87 @@
+/*
+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_CallEvent_wrapper {
+    display: flex;
+    width: 100%;
+}
+
+.mx_CallEvent {
+    padding: 12px;
+    box-sizing: border-box;
+    min-height: 60px;
+    max-width: 600px;
+    width: 100%;
+    background-color: $system;
+    border-radius: 8px;
+
+    display: flex;
+    gap: $spacing-8;
+
+    > .mx_BaseAvatar,
+    > .mx_Icon {
+        align-self: flex-start;
+    }
+
+    > .mx_Icon {
+        padding: 0;
+        margin: $spacing-4 0;
+        color: $secondary-content;
+    }
+
+    .mx_LiveContentSummary {
+        font-size: $font-12px;
+    }
+
+    --facepile-background: $system;
+}
+
+.mx_CallEvent_title {
+    font-size: $font-15px;
+    line-height: 24px; /* in px to match the avatar */
+}
+
+.mx_CallEvent_inactive .mx_CallEvent_title svg {
+    display: inline-block;
+    vertical-align: middle;
+    color: $secondary-content;
+    width: 16px;
+    height: 16px;
+    margin-right: $spacing-8;
+}
+
+.mx_CallEvent_active .mx_CallEvent_title {
+    font-weight: var(--cpd-font-weight-semibold);
+}
+
+.mx_CallEvent_columns {
+    flex-grow: 1;
+    display: flex;
+    gap: $spacing-12;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.mx_TimelineCard .mx_CallEvent_columns {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: $spacing-8;
+}
+
+.mx_CallEvent_details {
+    flex-grow: 1;
+
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.mx_CallEvent_button {
+    box-sizing: border-box;
+    min-width: 120px;
+}
@@ -0,0 +1,15 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2018-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_CreateEvent {
+    margin: var(--EventTileBubble_margin-block) auto;
+
+    svg {
+        color: $header-panel-text-primary-color;
+    }
+}
@@ -0,0 +1,31 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2017 Vector Creations Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_DateSeparator_dateContent {
+    padding: 0 25px;
+}
+
+.mx_DateSeparator_dateHeading {
+    flex: 0 0 auto;
+    margin: 0;
+    font-size: inherit;
+    font-weight: inherit;
+    color: inherit;
+    text-transform: capitalize;
+}
+
+.mx_DateSeparator_jumpToDateMenu {
+    display: flex;
+}
+
+.mx_DateSeparator_chevron {
+    align-self: center;
+    width: 16px;
+    height: 16px;
+    color: var(--cpd-color-icon-secondary);
+}
@@ -0,0 +1,51 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+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_DisambiguatedProfile {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+
+    .mx_DisambiguatedProfile_displayName {
+        font: var(--cpd-font-body-md-semibold);
+        margin-inline-end: 0;
+        /* keeps the height in check, important for the bubble apperance */
+        line-height: 1;
+    }
+
+    .mx_DisambiguatedProfile_mxid {
+        color: $secondary-content;
+        font-size: var(--cpd-font-size-body-sm);
+        margin-inline-start: 5px;
+    }
+}
+
+/** Disambiguated profile needs to have a different layout in the member tile */
+.mx_MemberTileView .mx_DisambiguatedProfile {
+    display: flex;
+    flex-direction: column;
+
+    .mx_DisambiguatedProfile_mxid {
+        margin-inline-start: 0;
+        font: var(--cpd-font-body-sm-regular);
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    span:not(.mx_DisambiguatedProfile_mxid) {
+        /**
+        In a member tile, this span element is a flex child and so
+        we need the following for text overflow to work.
+        **/
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
@@ -0,0 +1,22 @@
+/*
+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_HiddenBody {
+    white-space: pre-wrap;
+    color: $muted-fg-color;
+    vertical-align: middle;
+
+    svg {
+        height: 14px;
+        width: 14px;
+        display: inline-block;
+        margin-right: var(--cpd-space-1-5x);
+        color: $muted-fg-color;
+        vertical-align: -2px;
+    }
+}
@@ -0,0 +1,29 @@
+.mx_HiddenMediaPlaceholder {
+    border: none;
+    width: 100%;
+    height: 100%;
+    inset: 0;
+
+    /* To center the text in the middle of the frame */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+
+    cursor: pointer;
+    background-color: $header-panel-bg-color;
+
+    > div {
+        color: $accent;
+        /* Icon alignment */
+        display: flex;
+        > svg {
+            margin-top: auto;
+            margin-bottom: auto;
+        }
+    }
+}
+
+.mx_EventTile:hover .mx_HiddenMediaPlaceholder {
+    background-color: $background;
+}
@@ -0,0 +1,34 @@
+/*
+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_JumpToDatePicker_form {
+    display: flex;
+    /* This matches the default padding of IconizedContextMenuOption */
+    /* (see context_menus/_IconizedContextMenu.pcss) */
+    padding-top: 12px;
+    padding-bottom: 12px;
+}
+
+.mx_JumpToDatePicker_label {
+    align-self: center;
+    font-size: $font-15px;
+}
+
+.mx_JumpToDatePicker_datePicker {
+    margin: 0;
+    margin-left: 8px;
+
+    &,
+    & > input {
+        border-radius: 8px;
+    }
+}
+
+.mx_JumpToDatePicker_submitButton {
+    margin-left: 8px;
+}
@@ -0,0 +1,159 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+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_LegacyCallEvent_wrapper {
+    display: flex;
+    width: 100%;
+
+    .mx_LegacyCallEvent {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: space-between;
+        gap: $spacing-4 0;
+
+        position: relative;
+        margin: $spacing-4 0;
+        padding: $spacing-12 $spacing-24;
+        box-sizing: border-box;
+        background-color: $dark-panel-bg-color;
+        border-radius: 8px;
+        width: 65%;
+        height: fit-content;
+
+        .mx_LegacyCallEvent_iconButton {
+            display: inline-flex;
+
+            svg {
+                height: 16px;
+                width: 16px;
+                color: $secondary-content;
+            }
+        }
+
+        .mx_LegacyCallEvent_info {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            width: fit-content;
+            max-width: 100%;
+
+            .mx_LegacyCallEvent_info_basic {
+                display: flex;
+                flex-direction: column;
+                gap: $spacing-4;
+                margin-left: 10px; /* To match mx_LegacyCallEvent */
+                margin-right: 10px;
+                min-width: 0;
+
+                .mx_LegacyCallEvent_sender {
+                    font-weight: var(--cpd-font-weight-semibold);
+                    margin-bottom: $spacing-4;
+
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+
+                .mx_LegacyCallEvent_type {
+                    font-weight: 400;
+                    color: $secondary-content;
+                }
+            }
+        }
+
+        .mx_LegacyCallEvent_content {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            color: $secondary-content;
+            font-size: $font-12px;
+            gap: $spacing-12; /* See mx_IncomingLegacyCallToast_buttons */
+            margin-inline-start: 42px; /* avatar (32px) + mx_LegacyCallEvent_info_basic margin (10px) */
+            word-break: break-word;
+            max-width: fit-content;
+
+            .mx_LegacyCallEvent_content_button {
+                @mixin LegacyCallButton;
+                padding: 0 $spacing-12;
+                font-size: inherit;
+            }
+
+            .mx_LegacyCallEvent_content_tooltip {
+                margin-right: 5px;
+            }
+        }
+
+        &.mx_LegacyCallEvent_narrow {
+            flex-direction: column;
+            align-items: unset;
+            gap: $spacing-4 $spacing-16;
+            height: unset;
+            min-width: 290px;
+
+            .mx_LegacyCallEvent_iconButton {
+                position: absolute;
+                margin-right: 0;
+                top: 12px;
+                right: 12px;
+                height: 16px;
+                width: 16px;
+                display: flex;
+            }
+
+            .mx_LegacyCallEvent_info {
+                align-items: center;
+            }
+        }
+    }
+}
+
+.mx_LegacyCallEvent_type_icon {
+    height: 16px;
+    width: 16px;
+    margin-right: 6px;
+    display: inline-block;
+    vertical-align: -2px;
+
+    svg {
+        position: absolute;
+        height: inherit;
+        width: inherit;
+        color: $tertiary-content;
+    }
+}
+
+.mx_EventTile[data-layout="bubble"] {
+    .mx_EventTile_e2eIcon + .mx_LegacyCallEvent_wrapper {
+        .mx_LegacyCallEvent {
+            position: relative;
+
+            /* 5px (gap) + 14px (e2e icon size * mask-size) + 9px (margin-left of e2e icon) */
+            right: calc(5px + 14px + 9px);
+        }
+    }
+}
+
+.mx_EventTile_leftAlignedBubble {
+    .mx_LegacyCallEvent_wrapper {
+        .mx_LegacyCallEvent {
+            &.mx_LegacyCallEvent_narrow {
+                gap: $spacing-8 $spacing-4;
+            }
+        }
+    }
+}
+
+.mx_IRCLayout {
+    .mx_LegacyCallEvent_wrapper {
+        .mx_LegacyCallEvent {
+            margin-inline-start: $spacing-4; /* display green line */
+        }
+    }
+}
@@ -0,0 +1,16 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2017 Vector Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_MEmoteBody {
+    white-space: pre-wrap;
+    text-align: start;
+}
+
+.mx_MEmoteBody_sender {
+    cursor: pointer;
+}
@@ -0,0 +1,61 @@
+/*
+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_MFileBody_download {
+    color: $accent;
+    height: var(--cpd-space-9x);
+}
+
+.mx_MFileBody_download object {
+    margin-left: -16px;
+    padding-right: 4px;
+    margin-top: -4px;
+    vertical-align: middle;
+    pointer-events: none;
+}
+
+/* Remove the border and padding for iframes for download links. */
+.mx_MFileBody_download iframe {
+    margin: 0px;
+    padding: 0px;
+    border: none;
+    width: 100%;
+}
+
+.mx_MFileBody_info {
+    cursor: pointer;
+
+    .mx_MFileBody_info_icon {
+        background-color: $system;
+        border-radius: 20px;
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        padding: var(--cpd-space-2x);
+        vertical-align: middle;
+        margin-right: 12px;
+
+        svg {
+            color: $secondary-content;
+            width: inherit;
+            height: inherit;
+            display: block;
+        }
+    }
+
+    .mx_MFileBody_info_filename {
+        font: var(--cpd-font-body-md-regular);
+        color: var(--cpd-color-text-primary);
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        display: inline-block;
+        width: calc(100% - 32px - 12px); /* 32px icon, 12px margin on the icon */
+        vertical-align: middle;
+    }
+}
@@ -0,0 +1,81 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 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_MImageBody_banner {
+    position: absolute;
+    bottom: $spacing-4;
+    left: $spacing-4;
+    padding: $spacing-4;
+    border-radius: var(--MBody-border-radius);
+    font-size: $font-15px;
+    user-select: none; /* prevent banner text from being selected */
+    pointer-events: none; /* let the cursor go through to the media underneath */
+
+    /* Trying to match the width of the image is surprisingly difficult, so arbitrarily break it off early. */
+    max-width: min(100%, 350px);
+
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+
+    /* Hardcoded colours because it's the same on all themes */
+    background-color: rgb(0, 0, 0, 0.6);
+    color: #ffffff;
+}
+
+.mx_MImageBody_placeholder {
+    /* Position the placeholder on top of the thumbnail, so that the reveal animation can work */
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+
+    background-color: $background;
+
+    .mx_Blurhash > canvas {
+        animation: mx--anim-pulse 1.75s infinite cubic-bezier(0.4, 0, 0.6, 1);
+    }
+}
+
+.mx_MImageBody_thumbnail_container {
+    border-radius: var(--MBody-border-radius);
+
+    /* Necessary for the border radius to apply correctly to the placeholder */
+    overflow: hidden;
+    contain: paint;
+}
+
+.mx_MImageBody_thumbnail {
+    display: block;
+
+    /* Force the image to be the full size of the container, even if the */
+    /* pixel size is smaller. The problem here is that we don't know what */
+    /* thumbnail size the HS is going to give us, but we have to commit to */
+    /* a container size immediately and not change it when the image loads */
+    /* or we'll get a scroll jump (or have to leave blank space). */
+    /* This will obviously result in an upscaled image which will be a bit */
+    /* blurry. The best fix would be for the HS to advertise what size thumbnails */
+    /* it guarantees to produce. */
+    height: 100%;
+    width: 100%;
+}
+
+.mx_MImageBody_gifLabel {
+    position: absolute;
+    display: block;
+    top: 0px;
+    left: 14px;
+    padding: 5px;
+    border-radius: 5px;
+    background: $imagebody-giflabel;
+    border: 2px solid $imagebody-giflabel-border;
+    color: $imagebody-giflabel-color;
+    pointer-events: none;
+}
@@ -0,0 +1,17 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 Tulir Asokan <tulir@maunium.net>
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_MImageReplyBody {
+    display: flex;
+    column-gap: $spacing-4;
+
+    .mx_MImageBody_thumbnail_container {
+        flex: 1;
+        min-width: 0; /* Prevent a blowout */
+    }
+}
@@ -0,0 +1,13 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_EventTileBubble.mx_MJitsiWidgetEvent {
+    svg {
+        color: $header-panel-text-primary-color; /* XXX: Variable abuse */
+    }
+}
@@ -0,0 +1,41 @@
+/*
+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_map {
+        max-width: 100%;
+        width: 450px;
+        height: 300px;
+        z-index: 0; /* keeps the entire map under the message action bar */
+
+        border-radius: var(--MBody-border-radius);
+        cursor: pointer;
+    }
+}
+
+/* In the timeline, we fit the width of the container */
+.mx_EventTile_line .mx_MLocationBody .mx_MLocationBody_map {
+    max-width: 450px;
+    width: 100%;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_MLocationBody .mx_MLocationBody_map {
+    max-width: 100%;
+    width: 450px;
+}
+
+.mx_DisambiguatedProfile ~ .mx_MLocationBody {
+    margin-top: 6px; /* See: https://github.com/matrix-org/matrix-react-sdk/pull/8442 */
+}
+
+.mx_ReplyTile .mx_MLocationBody {
+    /* Prevent clicking a location within a reply */
+    pointer-events: none;
+}
@@ -0,0 +1,12 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_MNoticeBody {
+    white-space: pre-wrap;
+    color: $secondary-content;
+}
@@ -0,0 +1,65 @@
+/*
+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.
+*/
+
+$poll-max-width: 550px;
+
+.mx_MPollBody {
+    margin-top: var(--cpd-space-2x);
+    min-width: 0; /* Override fieldset default min-width: min-content */
+    width: 100%; /* Ensure fieldset takes full available width */
+    border: none; /* Remove default fieldset border */
+    padding: 0; /* Remove default fieldset padding */
+
+    legend {
+        font-weight: var(--cpd-font-weight-semibold);
+        font-size: $font-15px;
+        line-height: $font-24px;
+        margin-top: 0;
+        margin-bottom: var(--cpd-space-2x);
+        letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
+        display: flex;
+        align-items: center;
+        gap: var(--cpd-space-3x);
+
+        svg {
+            flex-shrink: 0;
+            color: var(--cpd-color-icon-primary);
+        }
+
+        .mx_MPollBody_edited {
+            color: $roomtopic-color;
+            font-size: $font-12px;
+            opacity: 0.6;
+        }
+    }
+
+    .mx_MPollBody_totalVotes {
+        display: flex;
+        flex-direction: inline;
+        justify-content: start;
+        color: $secondary-content;
+        font-size: $font-12px;
+
+        .mx_Spinner {
+            flex: 0;
+            margin-left: $spacing-8;
+        }
+    }
+}
+
+/* Prevent clicking a poll within a reply */
+.mx_ReplyTile .mx_MPollBody {
+    pointer-events: none;
+}
+
+.mx_MPollBody_allOptions {
+    display: grid;
+    gap: $spacing-16;
+    margin-bottom: $spacing-8;
+    max-width: $poll-max-width;
+}
@@ -0,0 +1,28 @@
+/*
+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: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.mx_MStickerBody_placeholder {
+    /* centering */
+    position: absolute;
+    left: calc(50% - 40px);
+    top: calc(50% - 40px);
+}
@@ -0,0 +1,11 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_MTextBody {
+    white-space: pre-wrap;
+}
@@ -0,0 +1,21 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+span.mx_MVideoBody {
+    overflow: hidden;
+
+    .mx_MVideoBody_container {
+        border-radius: var(--MBody-border-radius);
+        overflow: hidden;
+
+        video {
+            height: 100%;
+            width: 100%;
+        }
+    }
+}
@@ -0,0 +1,22 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/* A "media body" is any file upload looking thing, apart from images and videos (they */
+/* have unique styles). */
+
+.mx_MediaBody {
+    background-color: $panels;
+    border-radius: 12px;
+    max-width: 243px; /* use max-width instead of width so it fits within right panels */
+
+    color: $secondary-content;
+    font: var(--cpd-font-body-md-regular);
+    line-height: $font-24px;
+
+    padding: 6px 12px;
+}
@@ -0,0 +1,137 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_MessageActionBar {
+    --MessageActionBar-size-button: 28px;
+    --MessageActionBar-size-box: 32px; /* 28px + 2px (margin) * 2 */
+    --MessageActionBar-item-hover-background: var(--cpd-color-bg-subtle-secondary);
+    --MessageActionBar-item-hover-borderRadius: 6px;
+    --MessageActionBar-item-hover-zIndex: 1;
+
+    position: absolute;
+    visibility: hidden;
+    cursor: pointer;
+    display: flex;
+    height: var(--MessageActionBar-size-box);
+    line-height: $font-24px;
+    border-radius: 8px;
+    background: $background;
+    border: var(--cpd-border-width-1) solid var(--cpd-color-border-disabled);
+    top: -32px;
+    right: 8px;
+    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. */
+    &::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: initial;
+
+        /* stylelint-disable-next-line max-line-length */
+        .mx_GenericEventListSummary[data-layout="bubble"]
+            .mx_GenericEventListSummary_toggle
+            ~ .mx_GenericEventListSummary_unstyledList
+            .mx_EventTile_info:first-of-type
+            & {
+            /* improve clickability of "collapse" link button on bubble layout by reducing width and height values */
+            /* mx_GenericEventListSummary_toggle ~: to apply rules to action bar when "collapse" button is available */
+            /* mx_EventTile_info:first-of-type: to apply rules to the info event tile just under "collapse" button */
+            /* TODO: use a new class name instead */
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+        }
+
+        .mx_EventTile_info .mx_ViewSourceEvent ~ & {
+            /* improve clickability of view source event toggle button by removing vertical safe area */
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+        }
+    }
+
+    > * {
+        white-space: nowrap;
+        display: inline-block;
+        position: relative;
+        margin: 2px;
+
+        &:hover {
+            background: var(--MessageActionBar-item-hover-background);
+            border-radius: var(--MessageActionBar-item-hover-borderRadius);
+            z-index: var(--MessageActionBar-item-hover-zIndex);
+        }
+    }
+
+    .mx_MessageActionBar_iconButton {
+        --MessageActionBar-icon-size: 18px;
+        width: var(--MessageActionBar-size-button);
+        height: var(--MessageActionBar-size-button);
+        color: var(--cpd-color-icon-secondary);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        svg {
+            height: var(--MessageActionBar-icon-size);
+            width: var(--MessageActionBar-icon-size);
+            flex: 0 0 var(--MessageActionBar-icon-size);
+        }
+
+        &:disabled,
+        &[disabled] {
+            cursor: not-allowed;
+            opacity: 0.75;
+        }
+
+        &:hover {
+            color: var(--cpd-color-icon-primary);
+        }
+
+        &.mx_MessageActionBar_threadButton {
+            --MessageActionBar-icon-size: 20px;
+        }
+
+        &.mx_MessageActionBar_retryButton {
+            --MessageActionBar-icon-size: 16px;
+        }
+
+        &.mx_MessageActionBar_downloadButton {
+            --MessageActionBar-icon-size: 20px;
+
+            &.mx_MessageActionBar_downloadSpinnerButton {
+                svg {
+                    display: none; /* hide the download icon */
+                }
+            }
+        }
+
+        &.mx_MessageActionBar_expandCollapseMessageButton {
+            --MessageActionBar-icon-size: 12px;
+        }
+    }
+
+    .mx_MessageActionBar_optionsButton {
+        --MessageActionBar-icon-size: 22px;
+    }
+}
@@ -0,0 +1,11 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_MjolnirBody {
+    opacity: 0.4;
+}
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.mx_PinnedMessageBadge {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--cpd-space-1x);
+
+    padding: var(--cpd-space-1x) var(--cpd-space-3x) var(--cpd-space-1x) var(--cpd-space-1x);
+    font: var(--cpd-font-body-xs-medium);
+    background-color: var(--cpd-color-bg-subtle-secondary);
+    color: var(--cpd-color-text-secondary);
+
+    border-radius: 99px;
+    border: 1px solid var(--cpd-color-alpha-gray-400);
+
+    svg {
+        fill: var(--cpd-color-icon-secondary);
+    }
+}
@@ -0,0 +1,57 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ReactionsRow {
+    color: var(--cpd-color-text-primary);
+
+    .mx_ReactionsRow_addReactionButton {
+        display: inline-block;
+        visibility: hidden; /* show on hover of the .mx_EventTile */
+        width: 16px;
+        height: 16px;
+        padding: var(--cpd-space-1x);
+        vertical-align: middle;
+        margin-left: 4px;
+        margin-right: 4px;
+
+        svg {
+            height: inherit;
+            width: inherit;
+            color: $tertiary-content;
+        }
+
+        &.mx_ReactionsRow_addReactionButton_active {
+            visibility: visible; /* keep showing whilst the context menu is shown */
+        }
+
+        &:hover,
+        &.mx_ReactionsRow_addReactionButton_active {
+            svg {
+                color: $primary-content;
+            }
+        }
+    }
+}
+
+.mx_EventTile:hover .mx_ReactionsRow_addReactionButton {
+    visibility: visible;
+}
+
+.mx_ReactionsRow_showAll {
+    color: $tertiary-content;
+
+    &.mx_AccessibleButton_kind_link_inline {
+        font-size: $font-12px;
+        line-height: $font-20px;
+        margin-inline-start: $spacing-4;
+        vertical-align: middle;
+
+        &:hover {
+            color: $primary-content;
+        }
+    }
+}
@@ -0,0 +1,34 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ReactionsRowButton {
+    display: inline-flex;
+    line-height: $font-20px;
+    padding: 1px 6px;
+    border: 1px solid var(--cpd-color-gray-400);
+    border-radius: 10px;
+    background-color: var(--cpd-color-gray-200);
+    user-select: none;
+    align-items: center;
+
+    &.mx_ReactionsRowButton_selected {
+        background-color: $accent-300;
+        border-color: $accent-800;
+    }
+
+    &.mx_AccessibleButton_disabled {
+        cursor: not-allowed;
+    }
+
+    .mx_ReactionsRowButton_content {
+        max-width: 100px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        padding-right: 4px;
+    }
+}
@@ -0,0 +1,21 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_RedactedBody {
+    white-space: pre-wrap;
+    color: $secondary-content;
+    vertical-align: middle;
+
+    svg {
+        margin-right: 6px;
+        height: 14px;
+        width: 14px;
+        color: $icon-button-color;
+        vertical-align: -2px;
+    }
+}
@@ -0,0 +1,13 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2017 Vector Creations Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_RoomAvatarEvent_avatar {
+    display: inline;
+    position: relative;
+    top: 3px;
+}
@@ -0,0 +1,21 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_TextualEvent {
+    overflow-y: hidden;
+    line-height: normal;
+
+    a {
+        color: $accent;
+        cursor: pointer;
+    }
+
+    .mx_RoomView_searchResultsPanel & {
+        opacity: unset; /* Unset the opacity value specified above on the search results panel */
+    }
+}
@@ -0,0 +1,11 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_UnknownBody {
+    white-space: pre-wrap;
+}
@@ -0,0 +1,50 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_EventTile_content.mx_ViewSourceEvent {
+    display: flex;
+    opacity: 0.6;
+    font-size: $font-12px;
+    width: 100%;
+    overflow-x: auto; /* Cancel overflow setting of .mx_EventTile_content */
+    line-height: normal; /* Align with avatar and E2E icon */
+
+    pre,
+    code {
+        flex: 1;
+    }
+
+    pre {
+        line-height: 1.2;
+        margin: 3.5px 0;
+    }
+
+    .mx_ViewSourceEvent_toggle {
+        --ViewSourceEvent_toggle-size: 16px;
+
+        visibility: hidden;
+        /* icon */
+        width: var(--ViewSourceEvent_toggle-size);
+        min-width: var(--ViewSourceEvent_toggle-size);
+
+        svg {
+            color: $accent;
+            width: var(--ViewSourceEvent_toggle-size);
+            height: var(--ViewSourceEvent_toggle-size);
+        }
+
+        .mx_EventTile:hover & {
+            visibility: visible;
+        }
+    }
+
+    &.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle {
+        align-self: flex-end;
+        height: var(--ViewSourceEvent_toggle-size);
+    }
+}
@@ -0,0 +1,37 @@
+/*
+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: var(--EventTileBubble_margin-block) auto;
+
+    &.mx_cryptoEvent_icon svg {
+        color: $header-panel-text-primary-color;
+    }
+
+    .mx_cryptoEvent_state,
+    .mx_cryptoEvent_buttons {
+        grid-column: 3;
+        grid-row: 1 / 3;
+    }
+
+    .mx_cryptoEvent_buttons {
+        align-items: center;
+        display: flex;
+        gap: 5px;
+    }
+
+    .mx_cryptoEvent_state {
+        width: 130px;
+        padding: 10px 20px;
+        margin: auto 0;
+        text-align: center;
+        color: $tertiary-content;
+        overflow-wrap: break-word;
+        font-size: $font-12px;
+    }
+}