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,159 @@
+/*
+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_AccessibleButton {
+    cursor: pointer;
+
+    &.mx_AccessibleButton_disabled {
+        cursor: not-allowed;
+
+        &.mx_AccessibleButton_kind_icon_primary,
+        &.mx_AccessibleButton_kind_icon_primary_outline,
+        &.mx_AccessibleButton_kind_primary,
+        &.mx_AccessibleButton_kind_primary_outline,
+        &.mx_AccessibleButton_kind_primary_sm,
+        &.mx_AccessibleButton_kind_link,
+        &.mx_AccessibleButton_kind_link_accent,
+        &.mx_AccessibleButton_kind_link_inline,
+        &.mx_AccessibleButton_kind_danger_inline,
+        &.mx_AccessibleButton_kind_content_inline,
+        &.mx_AccessibleButton_kind_link_sm {
+            opacity: 0.4;
+        }
+    }
+
+    &.mx_AccessibleButton_hasKind {
+        padding: 7px 18px;
+        text-align: center;
+        border-radius: 24px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font: var(--cpd-font-body-md-semibold);
+        border: none; /* override default <button /> styles */
+        word-break: keep-all; /* prevent button text in Chinese/Japanese/Korean (CJK) from being collapsed */
+        box-sizing: border-box;
+
+        &.mx_AccessibleButton_kind_primary_sm,
+        &.mx_AccessibleButton_kind_danger_sm,
+        &.mx_AccessibleButton_kind_link_sm {
+            padding: 5px 12px;
+        }
+
+        &.mx_AccessibleButton_kind_primary_sm {
+            color: var(--cpd-color-text-on-solid-primary);
+            background-color: var(--cpd-color-bg-action-primary-rest);
+            border: 1px solid var(--cpd-color-bg-action-primary-rest);
+        }
+
+        &.mx_AccessibleButton_kind_danger_sm {
+            color: var(--cpd-color-text-on-solid-primary);
+            background-color: var(--cpd-color-bg-critical-primary);
+            border: 1px solid var(--cpd-color-bg-critical-primary);
+        }
+
+        &.mx_AccessibleButton_kind_link_sm {
+            color: var(--cpd-color-text-primary);
+            text-decoration: underline;
+            font-weight: var(--cpd-font-weight-semibold);
+        }
+
+        &.mx_AccessibleButton_kind_icon,
+        &.mx_AccessibleButton_kind_icon_primary,
+        &.mx_AccessibleButton_kind_icon_primary_outline {
+            padding: 0;
+            height: 32px;
+            width: 32px;
+        }
+    }
+
+    &.mx_AccessibleButton_kind_icon_primary,
+    &.mx_AccessibleButton_kind_icon_primary_outline,
+    &.mx_AccessibleButton_kind_primary,
+    &.mx_AccessibleButton_kind_primary_outline,
+    &.mx_AccessibleButton_kind_secondary {
+        font-weight: var(--cpd-font-weight-semibold);
+    }
+
+    &.mx_AccessibleButton_kind_icon_primary,
+    &.mx_AccessibleButton_kind_primary {
+        border: 1px solid var(--cpd-color-bg-action-primary-rest);
+        color: var(--cpd-color-text-on-solid-primary);
+        background-color: var(--cpd-color-bg-action-primary-rest);
+    }
+
+    &.mx_AccessibleButton_kind_icon_primary_outline,
+    &.mx_AccessibleButton_kind_primary_outline {
+        border: 1px solid var(--cpd-color-border-interactive-secondary);
+        color: var(--cpd-color-text-primary);
+    }
+
+    &.mx_AccessibleButton_kind_secondary {
+        color: var(--cpd-color-text-primary);
+        text-decoration: underline;
+    }
+
+    &.mx_AccessibleButton_kind_danger {
+        color: var(--cpd-color-text-on-solid-primary);
+        background-color: var(--cpd-color-bg-critical-primary);
+        border: 1px solid var(--cpd-color-bg-critical-primary);
+
+        &.mx_AccessibleButton_disabled {
+            color: var(--cpd-color-text-on-solid-primary);
+            background-color: var(--cpd-color-bg-critical-primary);
+        }
+    }
+
+    &.mx_AccessibleButton_kind_danger_outline {
+        color: var(--cpd-color-text-critical-primary);
+        background-color: transparent;
+        border: 1px solid var(--cpd-color-border-critical-subtle);
+
+        &.mx_AccessibleButton_disabled {
+            color: var(--cpd-color-text-disabled);
+            border-color: var(--cpd-color-border-disabled);
+        }
+    }
+
+    &.mx_AccessibleButton_kind_danger_sm {
+        &.mx_AccessibleButton_disabled {
+            color: var(--cpd-color-text-disabled);
+            background-color: var(--cpd-color-bg-subtle-primary);
+        }
+    }
+
+    &.mx_AccessibleButton_kind_link,
+    &.mx_AccessibleButton_kind_link_inline,
+    &.mx_AccessibleButton_kind_danger_inline,
+    &.mx_AccessibleButton_kind_content_inline {
+        font-size: inherit;
+        font-weight: var(--cpd-font-weight-semibold);
+        line-height: inherit;
+        padding: 0;
+        text-decoration: underline;
+    }
+
+    &.mx_AccessibleButton_kind_link,
+    &.mx_AccessibleButton_kind_link_inline {
+        color: var(--cpd-color-text-primary);
+    }
+
+    &.mx_AccessibleButton_kind_danger_inline {
+        color: var(--cpd-color-text-critical-primary);
+    }
+
+    &.mx_AccessibleButton_kind_content_inline {
+        color: $primary-content;
+    }
+
+    &.mx_AccessibleButton_kind_link_inline,
+    &.mx_AccessibleButton_kind_danger_inline,
+    &.mx_AccessibleButton_kind_content_inline {
+        display: inline;
+    }
+}
@@ -0,0 +1,49 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 Šimon Brandner <simon.bra.ag@gmail.com>
+Copyright 2019 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_CopyableText {
+    align-items: flex-start;
+    display: flex;
+    justify-content: space-between;
+    width: max-content;
+    max-width: 100%;
+
+    &.mx_CopyableText_border {
+        overflow: auto;
+        border-radius: 5px;
+        border: solid 1px $light-fg-color;
+        margin-bottom: 10px;
+        margin-top: 10px;
+        padding: 10px 0 10px 10px;
+    }
+
+    .mx_CopyableText_copyButton {
+        flex-shrink: 0;
+        /* using em here to adapt to the local font size */
+        width: 1em;
+        height: 1em;
+        cursor: pointer;
+        padding-left: 12px;
+        padding-right: 10px;
+        display: block;
+        /* If the copy button is used within a scrollable div, make it stick to the right while scrolling */
+        position: sticky;
+        right: 0;
+        /* center to first line */
+        top: 0.15em;
+        background-color: $background;
+
+        svg {
+            width: 1em;
+            height: 1em;
+            color: $message-action-bar-fg-color;
+            display: block;
+        }
+    }
+}
@@ -0,0 +1,48 @@
+/*
+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_desktopCapturerSourcePicker {
+    overflow: hidden;
+
+    .mx_desktopCapturerSourcePicker_tab {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: flex-start;
+        height: 500px;
+        overflow: overlay;
+
+        .mx_desktopCapturerSourcePicker_source {
+            width: 50%;
+            display: flex;
+            flex-direction: column;
+
+            .mx_desktopCapturerSourcePicker_source_thumbnail {
+                margin: 4px;
+                padding: 4px;
+                border-width: 2px;
+                border-radius: 8px;
+                border-style: solid;
+                border-color: transparent;
+
+                &.mx_desktopCapturerSourcePicker_source_thumbnail_selected,
+                &:hover,
+                &:focus {
+                    border-color: $accent;
+                }
+            }
+
+            .mx_desktopCapturerSourcePicker_source_name {
+                margin: 0 4px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+        }
+    }
+}
@@ -0,0 +1,20 @@
+/*
+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_DialPadBackspaceButton {
+    height: 20px;
+    width: 20px;
+    padding: var(--cpd-space-1x);
+
+    svg {
+        color: #8d97a5;
+        width: inherit;
+        height: inherit;
+        display: inline-block;
+    }
+}
@@ -0,0 +1,126 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2017 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_Dropdown {
+    position: relative;
+    color: $primary-content;
+}
+
+.mx_Dropdown_disabled {
+    opacity: 0.3;
+}
+
+.mx_Dropdown_input {
+    display: flex;
+    align-items: center;
+    position: relative;
+    border-radius: 8px;
+    border: 1px solid var(--cpd-color-border-interactive-secondary);
+    font: var(--cpd-font-body-sm-regular);
+    user-select: none;
+}
+
+.mx_Dropdown_input.mx_AccessibleButton_disabled {
+    cursor: not-allowed;
+}
+
+.mx_Dropdown_input:focus {
+    border-color: $accent-alt;
+}
+
+/* Disable dropdown highlight on focus */
+.mx_Dropdown_input.mx_AccessibleButton:focus {
+    filter: none;
+}
+
+svg.mx_Dropdown_arrow {
+    width: 18px;
+    height: 18px;
+    margin-right: 3px;
+    color: $primary-content;
+}
+
+.mx_Dropdown_option {
+    height: 35px;
+    line-height: $font-35px;
+    /* Overwrites the default padding for any li elements */
+    padding: 0 8px;
+}
+
+.mx_Dropdown_input > .mx_Dropdown_option {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    display: inline-flex;
+    align-items: center;
+}
+
+.mx_Dropdown_option div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.mx_Dropdown_option img,
+.mx_Dropdown_option .mx_Dropdown_option_emoji {
+    margin: 5px;
+    width: 16px;
+    vertical-align: middle;
+}
+
+.mx_Dropdown_option_emoji {
+    font-size: $font-16px;
+    line-height: $font-16px;
+}
+
+input.mx_Dropdown_option,
+input.mx_Dropdown_option:focus {
+    font-weight: normal;
+    border: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    /* XXX: hack to prevent text box being too big and pushing */
+    /* its parent out / overlapping the dropdown arrow. Only really */
+    /* works in the Country dropdown. */
+    width: 60%;
+}
+
+.mx_Dropdown_menu {
+    position: absolute;
+    left: -1px;
+    right: -1px;
+    top: 100%;
+    z-index: 2;
+    margin: 0;
+    padding: 0px;
+    border-radius: 4px;
+    border: 1px solid $accent-alt;
+    background-color: $background;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.mx_Dropdown_menu .mx_Dropdown_option {
+    height: auto;
+    min-height: 35px;
+}
+
+ul.mx_Dropdown_menu li.mx_Dropdown_option {
+    list-style: none;
+}
+
+.mx_Dropdown_menu .mx_Dropdown_option_highlight {
+    background-color: $focus-bg-color;
+}
+
+.mx_Dropdown_searchPrompt {
+    font-weight: normal;
+    margin-left: 5px;
+    margin-bottom: 5px;
+}
@@ -0,0 +1,51 @@
+/*
+Copyright 2017-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_EditableItemList {
+    margin-top: 12px;
+    margin-bottom: 10px;
+}
+
+.mx_EditableItem {
+    display: flex;
+    margin-bottom: 5px;
+}
+
+.mx_EditableItem_delete {
+    @mixin customisedCancelButton;
+    order: 3;
+    vertical-align: middle;
+    width: 28px;
+    height: 28px;
+    background-color: $alert;
+    mask-size: 100%;
+}
+
+.mx_EditableItem_email {
+    vertical-align: middle;
+}
+
+.mx_EditableItem_promptText {
+    margin-right: 10px;
+    order: 2;
+}
+
+.mx_EditableItem_confirmBtn {
+    margin-right: 5px;
+}
+
+.mx_EditableItem_item {
+    flex: auto 1 0;
+    order: 1;
+    width: calc(100% - 28px); /* leave space for the remove button */
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+}
+
+.mx_EditableItemList_label {
+    margin-bottom: 5px;
+}
@@ -0,0 +1,26 @@
+/*
+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_ErrorBoundary {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.mx_ErrorBoundary_body {
+    display: flex;
+    flex-direction: column;
+    max-width: 400px;
+    align-items: center;
+
+    .mx_AccessibleButton {
+        margin-top: 5px;
+    }
+}
@@ -0,0 +1,19 @@
+/*
+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_ExternalLink {
+    color: $links;
+}
+
+.mx_ExternalLink_icon {
+    display: inline-block;
+    width: $font-11px;
+    height: $font-11px;
+    margin-left: 0.3rem;
+    vertical-align: middle;
+}
@@ -0,0 +1,31 @@
+/*
+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_FacePile_more {
+    /* Needed to calculate the offset on the face pile */
+    --cpd-avatar-size: 28px;
+    position: relative;
+    border-radius: 100%;
+    width: 28px;
+    height: 28px;
+    box-sizing: border-box;
+    padding: var(--cpd-space-1x);
+    background-color: $panels;
+    color: $tertiary-content;
+    display: inline-block;
+    z-index: 1;
+    /* For enhanced visibility under contrast control */
+    outline: 1px solid transparent;
+}
+
+.mx_FacePile_summary {
+    margin-left: 12px;
+    font: var(--cpd-font-body-md-regular);
+    line-height: $font-24px;
+    color: $tertiary-content;
+}
@@ -0,0 +1,173 @@
+/*
+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.
+*/
+
+/* TODO: Consider unifying with general input styles in _light.pcss */
+
+.mx_Field {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    position: relative;
+    margin: 1em 0;
+    border-radius: 8px;
+    transition: border-color 0.25s;
+    border: 1px solid var(--cpd-color-border-interactive-secondary);
+}
+
+.mx_Field_prefix {
+    border-right: 1px solid var(--cpd-color-border-interactive-secondary);
+}
+
+.mx_Field_postfix {
+    border-left: 1px solid var(--cpd-color-border-interactive-secondary);
+}
+
+.mx_Field input,
+.mx_Field select,
+.mx_Field textarea {
+    font: var(--cpd-font-body-md-regular);
+    border: none;
+    /* Even without a border here, we still need this avoid overlapping the rounded */
+    /* corners on the field above. */
+    border-radius: 8px;
+    padding: 8px 9px;
+    color: $primary-content;
+    background-color: $background;
+    flex: 1;
+    min-width: 0;
+}
+
+.mx_Field select {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    text-overflow: ellipsis;
+}
+
+.mx_Field_select_chevron {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 4px;
+    width: 18px;
+    height: 18px;
+    color: $primary-content;
+    z-index: 1;
+    pointer-events: none;
+}
+
+.mx_Field:focus-within {
+    border-color: $accent-alt;
+}
+
+.mx_Field input:focus,
+.mx_Field select:focus,
+.mx_Field textarea:focus {
+    outline: 0;
+}
+
+.mx_Field input::placeholder,
+.mx_Field textarea::placeholder {
+    transition: color 0.25s ease-in 0s;
+    color: transparent;
+}
+
+.mx_Field input:placeholder-shown:focus::placeholder,
+.mx_Field textarea:placeholder-shown:focus::placeholder,
+.mx_Field.mx_Field_placeholderIsHint input::placeholder {
+    transition: color 0.25s ease-in 0.1s;
+    color: $info-plinth-fg-color;
+}
+
+.mx_Field label {
+    transition:
+        font-size 0.25s ease-out 0.1s,
+        color 0.25s ease-out 0.1s,
+        transform 0.25s ease-out 0.1s,
+        background-color 0.25s ease-out 0.1s;
+    background-color: transparent;
+    font: var(--cpd-font-body-md-regular);
+    color: var(--cpd-color-text-secondary);
+    transform: translateY(0);
+    position: absolute;
+    left: 0px;
+    margin: 7px 8px;
+    padding: 2px;
+    pointer-events: none; /* Allow clicks to fall through to the input */
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: calc(100% - 20px); /* 100% of parent minus margin and padding */
+}
+
+.mx_Field_labelAlwaysTopLeft label,
+.mx_Field select + label /* Always show a select's label on top to not collide with the value */,
+.mx_Field input:focus + label,
+.mx_Field input:not(:placeholder-shown) + label,
+.mx_Field textarea:focus + label,
+.mx_Field textarea:not(:placeholder-shown) + label {
+    transition:
+        font-size 0.25s ease-out 0s,
+        color 0.25s ease-out 0s,
+        transform 0.25s ease-out 0s,
+        background-color 0.25s ease-out 0s;
+    font-size: $font-10px;
+    transform: translateY(-13px);
+    padding: 0 2px;
+    background-color: $background;
+    pointer-events: initial;
+}
+
+.mx_Field input:focus + label,
+.mx_Field select:focus + label,
+.mx_Field textarea:focus + label {
+    color: $accent-alt;
+}
+
+.mx_Field select:disabled,
+.mx_Field select:disabled + label,
+.mx_Field input:disabled,
+.mx_Field input:disabled + label,
+.mx_Field textarea:disabled,
+.mx_Field textarea:disabled + label {
+    background-color: $background;
+    color: $info-plinth-fg-color;
+}
+
+.mx_Field_valid {
+    &.mx_Field,
+    &.mx_Field:focus-within {
+        border-color: $accent;
+    }
+
+    &.mx_Field label,
+    &.mx_Field:focus-within label {
+        color: $accent;
+    }
+}
+
+.mx_Field_invalid {
+    &.mx_Field,
+    &.mx_Field:focus-within {
+        border-color: $alert;
+    }
+
+    &.mx_Field label,
+    &.mx_Field:focus-within label {
+        color: $alert;
+    }
+}
+
+/* Customise other components when placed inside a Field */
+
+.mx_Field .mx_Dropdown_input {
+    border: initial;
+    border-radius: initial;
+}
+
+.mx_Field .mx_CountryDropdown {
+    width: fit-content;
+}
@@ -0,0 +1,133 @@
+/*
+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_GenericEventListSummary {
+    position: relative;
+
+    .mx_GenericEventListSummary_avatars {
+        margin-right: $spacing-8;
+    }
+
+    .mx_GenericEventListSummary_spacer {
+        border-bottom: 1px solid $primary-hairline-color;
+        margin-left: 63px;
+        line-height: $font-30px; /* TODO: Use a variable */
+
+        .mx_IRCLayout & {
+            line-height: var(--line-height);
+        }
+    }
+
+    .mx_GenericEventListSummary_toggle {
+        /* We reuse a title cased translation */
+        text-transform: lowercase;
+    }
+
+    &[data-layout="irc"],
+    &[data-layout="group"] {
+        .mx_GenericEventListSummary_toggle {
+            float: right;
+            margin-inline: 0 10px;
+        }
+    }
+
+    &[data-layout="group"] {
+        margin-top: $spacing-8;
+    }
+
+    &[data-layout="bubble"] {
+        --maxWidth: 70%;
+        display: flex;
+        margin-left: calc(var(--avatarSize) + var(--gutterSize));
+
+        .mx_GenericEventListSummary_toggle {
+            margin-block: 0;
+
+            &[aria-expanded="false"] {
+                order: 9; /* TODO: Remove */
+            }
+
+            &[aria-expanded="true"] {
+                margin-inline-start: auto; /* reduce clickable area */
+                margin-inline-end: var(--EventTile_bubble-margin-inline-end); /* as the parent has zero margin */
+            }
+        }
+
+        .mx_GenericEventListSummary_spacer {
+            display: none;
+        }
+
+        &[data-expanded="false"] {
+            align-items: center;
+            justify-content: space-between;
+            column-gap: 5px;
+        }
+
+        /* ideally we'd use display=contents here for the layout to all work regardless of the *ELS but */
+        /* that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse. */
+        &[data-expanded="true"] {
+            flex-direction: column;
+            margin: 0;
+        }
+
+        &::after {
+            content: "";
+            clear: both;
+        }
+
+        &:hover {
+            &::before {
+                background: transparent;
+            }
+        }
+    }
+
+    .mx_MatrixChat_useCompactLayout & {
+        font-size: $font-13px;
+        margin-top: $spacing-4;
+
+        .mx_EventTile_line {
+            line-height: 1.25;
+        }
+
+        .mx_GenericEventListSummary_spacer {
+            line-height: 1.375;
+        }
+
+        .mx_TextualEvent.mx_GenericEventListSummary_summary {
+            font: var(--cpd-font-body-sm-regular);
+        }
+    }
+
+    /* Make all state events one order smaller than the other events */
+    .mx_EventTile {
+        font: var(--cpd-font-body-sm-regular);
+        color: $secondary-content;
+    }
+}
+
+.mx_GenericEventListSummary_unstyledList {
+    list-style: none;
+    padding: 0;
+}
+
+.mx_TextualEvent.mx_GenericEventListSummary_summary {
+    font: var(--cpd-font-body-sm-regular);
+    display: inline-flex;
+    color: $secondary-content;
+}
+
+.mx_GenericEventListSummary_avatars {
+    display: inline-block;
+    line-height: $font-12px;
+
+    .mx_BaseAvatar {
+        margin-right: -4px;
+        cursor: pointer;
+    }
+}
@@ -0,0 +1,127 @@
+/*
+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.
+*/
+
+$button-size: 32px;
+$button-gap: var(--cpd-space-3x);
+
+:root {
+    --image-view-panel-height: 68px;
+}
+
+.mx_ImageView {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+}
+
+.mx_ImageView_image_wrapper {
+    pointer-events: initial;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    overflow: hidden;
+}
+
+.mx_ImageView_image {
+    flex-shrink: 0;
+
+    &.mx_ImageView_image_animating {
+        transition: transform 200ms ease 0s;
+    }
+
+    &.mx_ImageView_image_animatingLoading {
+        transition: transform 300ms ease 0s;
+    }
+}
+
+.mx_ImageView_panel {
+    width: 100%;
+    height: var(--image-view-panel-height);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    animation-name: mx_ImageView_panel_keyframes;
+    animation-duration: 300ms;
+}
+
+.mx_ImageView_info_wrapper {
+    pointer-events: initial;
+    padding-left: 32px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: $lightbox-fg-color;
+    flex-grow: 1;
+    flex-basis: 0;
+}
+
+.mx_ImageView_info {
+    padding-left: 12px;
+    display: flex;
+    flex-direction: column;
+}
+
+.mx_ImageView_info_sender {
+    font-weight: bold;
+}
+
+.mx_ImageView_title {
+    color: $lightbox-fg-color;
+    font-size: $font-12px;
+    flex-grow: 1;
+    flex-basis: 0;
+    text-align: center;
+}
+
+.mx_ImageView_toolbar {
+    --icon-size: 24px;
+
+    padding-right: 16px;
+    pointer-events: initial;
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    flex-basis: 0;
+    justify-content: flex-end;
+    gap: $button-gap;
+}
+
+.mx_ImageView_button {
+    padding: calc(($button-size - var(--icon-size)) / 2);
+    width: var(--icon-size);
+    height: var(--icon-size);
+    display: block;
+
+    svg {
+        height: inherit;
+        width: inherit;
+        display: block;
+        color: $icon-button-color;
+    }
+}
+
+.mx_ImageView_button_more {
+    --icon-size: 28px;
+}
+
+.mx_ImageView_button_close {
+    border-radius: 100%;
+    background: #21262c; /* same on all themes */
+}
+
+@media (prefers-reduced-motion) {
+    .mx_ImageView_image_animating {
+        transition: none !important;
+    }
+
+    .mx_ImageView_image_animatingLoading {
+        transition: none !important;
+    }
+}
@@ -0,0 +1,24 @@
+/*
+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_InfoTooltip_icon {
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+
+    svg {
+        height: inherit;
+        width: inherit;
+        color: $muted-fg-color;
+    }
+}
+
+.mx_InfoTooltip_icon::before {
+    display: inline-block;
+    vertical-align: middle;
+}
@@ -0,0 +1,16 @@
+/*
+Copyright 2017-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_InlineSpinner {
+    display: inline;
+
+    svg {
+        margin: 0px 6px;
+        vertical-align: -3px;
+        display: inline-block;
+    }
+}
@@ -0,0 +1,91 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2019-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_InteractiveTooltip_wrapper {
+    position: fixed;
+    z-index: 3999;
+}
+
+.mx_InteractiveTooltip {
+    border-radius: 8px;
+    background-color: $background;
+    color: $primary-content;
+    position: absolute;
+    z-index: 5001;
+    box-shadow:
+        0 24px 8px rgb(17 17 26 / 4%),
+        0 8px 32px rgb(17 17 26 / 4%);
+}
+
+.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_top {
+    top: 10px; /* 8px chevron + 2px spacing */
+}
+
+.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_left {
+    left: 10px; /* 8px chevron + 2px spacing */
+}
+
+.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_right {
+    right: 10px; /* 8px chevron + 2px spacing */
+}
+
+.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_bottom {
+    bottom: 10px; /* 8px chevron + 2px spacing */
+}
+
+.mx_InteractiveTooltip_chevron_top {
+    position: absolute;
+    left: calc(50% - 8px);
+    top: -8px;
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-bottom: 8px solid $background;
+    border-right: 8px solid transparent;
+}
+
+/* Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path */
+/* by Sebastiano Guerriero (@guerriero_se) */
+@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
+    .mx_InteractiveTooltip_chevron_top {
+        height: 16px;
+        width: 16px;
+        background-color: inherit;
+        border: none;
+        clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
+        transform: rotate(135deg);
+        border-radius: 0 0 0 3px;
+        top: calc(-8px / 1.414); /* sqrt(2) because of rotation */
+    }
+}
+
+.mx_InteractiveTooltip_chevron_bottom {
+    position: absolute;
+    left: calc(50% - 8px);
+    bottom: -8px;
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-top: 8px solid $background;
+    border-right: 8px solid transparent;
+}
+
+/* Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path */
+/* by Sebastiano Guerriero (@guerriero_se) */
+@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
+    .mx_InteractiveTooltip_chevron_bottom {
+        height: 16px;
+        width: 16px;
+        background-color: inherit;
+        border: none;
+        clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
+        transform: rotate(-45deg);
+        border-radius: 0 0 0 3px;
+        bottom: calc(-8px / 1.414); /* sqrt(2) because of rotation */
+    }
+}
@@ -0,0 +1,44 @@
+/*
+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_InviteReason {
+    position: relative;
+    margin-bottom: 1em;
+
+    .mx_InviteReason_reason {
+        visibility: visible;
+    }
+
+    .mx_InviteReason_view {
+        display: none;
+        position: absolute;
+        inset: 0;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        color: $secondary-content;
+
+        svg {
+            width: 16px;
+            height: 16px;
+            color: $secondary-content;
+            display: inline-block;
+            margin-right: 8px;
+        }
+    }
+}
+
+.mx_InviteReason_hidden {
+    .mx_InviteReason_reason {
+        visibility: hidden;
+    }
+
+    .mx_InviteReason_view {
+        display: flex;
+    }
+}
@@ -0,0 +1,11 @@
+/*
+Copyright 2024,2025 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_LabelledCheckbox {
+    margin-top: var(--cpd-space-2x);
+}
@@ -0,0 +1,13 @@
+/*
+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_LanguageDropdown {
+    .mx_Dropdown_option > div {
+        text-transform: capitalize;
+    }
+}
@@ -0,0 +1,38 @@
+/*
+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_MiniAvatarUploader {
+    position: relative;
+    width: min-content;
+
+    .mx_MiniAvatarUploader_indicator {
+        position: absolute;
+
+        height: 16px;
+        width: 16px;
+        padding: 5px;
+
+        right: -6px;
+        bottom: -6px;
+
+        background-color: $background;
+        border-radius: 50%;
+
+        line-height: 0;
+
+        .mx_MiniAvatarUploader_cameraIcon {
+            height: inherit;
+            width: inherit;
+            color: $secondary-content;
+        }
+    }
+}
+
+.mx_MiniAvatarUploader_input {
+    display: none;
+}
@@ -0,0 +1,101 @@
+/*
+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_Pill {
+    padding: $font-1px 0.4em $font-1px 0.4em;
+    line-height: $font-17px;
+    border-radius: $font-16px;
+    vertical-align: text-top;
+    display: inline-block;
+    box-sizing: border-box;
+    max-width: 100%;
+    overflow: hidden;
+    cursor: pointer;
+
+    color: var(--cpd-color-text-on-solid-primary) !important; /* To override .markdown-body */
+    background-color: $pill-bg-color !important; /* To override .markdown-body */
+    /* For enhanced visibility under contrast control */
+    outline: 1px solid transparent;
+
+    > * {
+        pointer-events: none;
+    }
+
+    &.mx_UserPill_me,
+    &.mx_AtRoomPill,
+    &.mx_KeywordPill {
+        background-color: var(--cpd-color-bg-critical-primary) !important; /* To override .markdown-body */
+    }
+
+    &:hover {
+        background-color: $pill-hover-bg-color !important; /* To override .markdown-body */
+    }
+
+    &:active {
+        background-color: $pill-press-bg-color !important; /* To override .markdown-body */
+    }
+
+    &.mx_UserPill_me:hover {
+        background-color: var(
+            --cpd-color-bg-critical-hovered
+        ) !important; /* To override .markdown-body | same on both themes */
+    }
+
+    /* We don't want to indicate clickability */
+    &.mx_AtRoomPill:hover,
+    &.mx_KeywordPill:hover {
+        background-color: var(--cpd-color-bg-critical-primary) !important; /* To override .markdown-body */
+        cursor: unset;
+    }
+
+    &::before,
+    .mx_BaseAvatar {
+        margin-inline-start: -0.3em; /* Otherwise the gap is too large */
+        margin-inline-end: 0.2em;
+        min-width: $font-16px; /* ensure the avatar is not compressed */
+        user-select: text;
+        vertical-align: top;
+    }
+
+    .mx_Pill_text {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    a& {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        text-decoration: none !important; /* To override .markdown-body */
+    }
+
+    .mx_Pill_LinkIcon {
+        background-color: $link-external;
+        box-sizing: border-box;
+        color: $background;
+        height: 16px;
+        padding: 1px;
+        width: 16px;
+        border-radius: 50%;
+    }
+
+    .mx_Pill_UserIcon {
+        box-sizing: border-box;
+        color: $secondary-content;
+        height: 16px;
+        width: 16px;
+    }
+
+    &.mx_SpacePill {
+        border-top-left-radius: 8px;
+        border-bottom-left-radius: 8px;
+        padding-left: 4px;
+    }
+}
@@ -0,0 +1,15 @@
+/*
+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_PowerSelector {
+    width: 100%;
+}
+
+.mx_PowerSelector .mx_Field select,
+.mx_PowerSelector .mx_Field input {
+    box-sizing: border-box;
+}
@@ -0,0 +1,22 @@
+/*
+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.
+*/
+
+progress.mx_ProgressBar {
+    height: 6px;
+    width: 60px;
+    overflow: hidden;
+    appearance: none;
+    border: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
+
+    @mixin ProgressBarBorderRadius 6px;
+    @mixin ProgressBarColour var(--cpd-color-icon-accent-tertiary);
+    @mixin ProgressBarBgColour $progressbar-bg-color;
+    &::-webkit-progress-value {
+        transition: width 1s;
+    }
+}
@@ -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_QRCode {
+    img {
+        border-radius: 8px;
+    }
+}
@@ -0,0 +1,52 @@
+/*
+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_ReplyChain {
+    margin: 0; /* Reset default blockquote margin */
+    padding-left: 10px;
+    border-left: 2px solid var(--username-color);
+    border-radius: 2px;
+
+    .mx_ReplyChain_show {
+        &.mx_AccessibleButton_kind_link_inline {
+            white-space: nowrap; /* Enforce 'In reply to' to be a single line */
+            color: $secondary-content;
+            transition: color ease 0.15s;
+            font-weight: var(--cpd-font-weight-regular);
+            text-decoration: inherit;
+
+            &:hover {
+                color: $primary-content;
+            }
+        }
+    }
+
+    &.mx_ReplyChain_color1 {
+        --username-color: $username-variant1-color;
+    }
+
+    &.mx_ReplyChain_color2 {
+        --username-color: $username-variant2-color;
+    }
+
+    &.mx_ReplyChain_color3 {
+        --username-color: $username-variant3-color;
+    }
+
+    &.mx_ReplyChain_color4 {
+        --username-color: $username-variant4-color;
+    }
+
+    &.mx_ReplyChain_color5 {
+        --username-color: $username-variant5-color;
+    }
+
+    &.mx_ReplyChain_color6 {
+        --username-color: $username-variant6-color;
+    }
+}
@@ -0,0 +1,32 @@
+/*
+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_ResizeHandle {
+    cursor: row-resize;
+    flex: 0 0 auto;
+    z-index: 100;
+
+    &.mx_ResizeHandle--horizontal {
+        margin: 0 -5px;
+        padding: 0 5px;
+        cursor: col-resize;
+
+        > div {
+            width: 1px;
+            height: 100%;
+        }
+    }
+
+    &.mx_ResizeHandle--vertical {
+        margin: -5px 0;
+        padding: 5px 0;
+
+        > div {
+            height: 1px;
+        }
+    }
+}
@@ -0,0 +1,44 @@
+/* XXX: bleurgh, what is this? These classes totally break the component */
+/* naming scheme; it's completely unclear where or how they're being used */
+/* --Matthew */
+
+.mx_Markdown_BOLD {
+    font-weight: bold;
+}
+
+.mx_Markdown_ITALIC {
+    font-style: italic;
+    /*
+    // interestingly, *not* using the explicit italic font
+    // variant seems yield better results.
+
+    // compensate for Nunito italics being terrible
+    // https://github.com/google/fonts/issues/172
+    transform: skewX(-14deg);
+    display: inline-block;
+    */
+}
+
+.mx_Markdown_CODE {
+    padding: 0.2em 0;
+    margin: 0;
+    font-size: 85%;
+    background-color: $rte-code-bg-color;
+    border-radius: 3px;
+}
+
+.mx_Markdown_HR {
+    display: block;
+    background: $rte-bg-color;
+}
+
+.mx_Markdown_STRIKETHROUGH {
+    text-decoration: line-through;
+}
+
+.mx_Emoji {
+    /* Should be 1.8rem for our default message bodies, and scale with the */
+    /* surrounding text */
+    font-size: max($font-18px, 1em);
+    vertical-align: bottom;
+}
@@ -0,0 +1,49 @@
+/*
+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_RoomAliasField {
+    /* if parent is a flex container, this allows the */
+    /* width to be as wide as needed, and not 100% */
+    flex: 0 1 auto;
+    display: flex;
+    align-items: stretch;
+    min-width: 0;
+    max-width: 100%;
+
+    input {
+        width: 150px;
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    input::placeholder {
+        color: $info-plinth-fg-color;
+        font-weight: normal;
+    }
+
+    .mx_Field_prefix,
+    .mx_Field_postfix {
+        color: $info-plinth-fg-color;
+        border-left: none;
+        border-right: none;
+        font-weight: var(--cpd-font-weight-semibold);
+        padding: 9px 10px;
+        flex: 0 0 auto;
+    }
+
+    .mx_Field_postfix {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        /* this allows the domain name to show */
+        /* as long as it doesn't make the input shrink */
+        /* if it's too big, it shows an ellipsis */
+        /* 180: 28 for prefix, 152 for input */
+        max-width: calc(100% - 180px);
+    }
+}
@@ -0,0 +1,47 @@
+/*
+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_SSOButtons {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    .mx_SSOButtons_row + .mx_SSOButtons_row {
+        margin-top: 16px;
+    }
+
+    .mx_SSOButton {
+        position: relative;
+        width: 100%;
+        display: inline-block;
+
+        svg,
+        img {
+            width: 24px;
+            height: 24px;
+            object-fit: contain;
+            position: absolute;
+            left: 8px;
+            top: 4px;
+            color: var(--cpd-color-icon-primary);
+        }
+    }
+
+    .mx_SSOButton_mini {
+        svg,
+        img {
+            /* 30px parent, 24px self */
+            padding: 3px;
+            position: unset;
+        }
+
+        & + .mx_SSOButton_mini {
+            margin-left: 16px;
+        }
+    }
+}
@@ -0,0 +1,20 @@
+/*
+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_SearchWarning {
+    text-align: center;
+    padding: 0 16px;
+
+    > * {
+        vertical-align: middle;
+    }
+
+    > img {
+        margin-right: 8px;
+    }
+}
@@ -0,0 +1,68 @@
+/*
+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_ServerPicker {
+    margin-bottom: 14px;
+    padding-bottom: $spacing-16;
+    border-bottom: 1px solid rgb(141, 151, 165, 0.2);
+    display: grid;
+    grid-template-columns: auto min-content;
+    grid-template-rows: auto auto auto;
+    font: var(--cpd-font-body-md-regular);
+
+    > h2 {
+        font-weight: var(--cpd-font-weight-semibold);
+        margin: 0 0 20px;
+        grid-column: 1;
+        grid-row: 1;
+    }
+
+    .mx_ServerPicker_help {
+        width: 24px;
+        height: 24px;
+        border-radius: 10px;
+        grid-column: 2;
+        grid-row: 1;
+        margin-left: auto;
+        margin-top: -2px;
+        margin-right: -2px;
+
+        svg {
+            width: inherit;
+            height: inherit;
+            color: $icon-button-color;
+        }
+    }
+
+    .mx_ServerPicker_server {
+        color: $authpage-primary-color;
+        grid-column: 1;
+        grid-row: 2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-right: 8px;
+    }
+
+    .mx_ServerPicker_change {
+        grid-column: 2;
+        grid-row: 2;
+    }
+
+    .mx_ServerPicker_desc {
+        margin-top: 4px;
+        color: $tertiary-content;
+        grid-column: 1 / 2;
+        grid-row: 3;
+    }
+}
+
+.mx_ServerPicker_helpDialog {
+    .mx_Dialog_content {
+        width: 456px;
+    }
+}
@@ -0,0 +1,20 @@
+/*
+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_SettingsDropdown {
+    margin-bottom: var(--cpd-space-1x);
+    width: 100%;
+
+    .mx_SettingsDropdown_label {
+        color: $primary-content;
+        margin: var(--cpd-space-1x) 0;
+    }
+
+    .mx_Dropdown_input {
+        width: 360px;
+    }
+}
@@ -0,0 +1,59 @@
+/*
+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_SettingsFlag {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 4px;
+    width: 100%;
+
+    .mx_ToggleSwitch {
+        flex: 0 0 auto;
+    }
+
+    &.mx_SettingsFlag_toggleInFront {
+        .mx_ToggleSwitch {
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 8px;
+        }
+
+        .mx_SettingsFlag_label {
+            display: inline-block;
+            vertical-align: middle;
+        }
+    }
+}
+
+.mx_SettingsFlag_label {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    color: $primary-content;
+    padding-right: 10px;
+    padding-top: 4px;
+}
+
+.mx_SettingsFlag_microcopy {
+    margin-top: 4px;
+    font: var(--cpd-font-body-sm-regular);
+    color: $secondary-content;
+
+    /* Support code/pre elements in settings flag descriptions */
+    pre,
+    code {
+        font-family: $monospace-font-family !important;
+        background-color: $rte-code-bg-color;
+    }
+
+    .mx_SettingsTab_microcopy_warning::before {
+        content: "⚠️ ";
+    }
+}
@@ -0,0 +1,21 @@
+/*
+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_Spinner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    flex: 1;
+}
+
+.mx_MatrixChat_middlePanel .mx_Spinner {
+    height: auto;
+}
@@ -0,0 +1,124 @@
+/*
+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.
+*/
+
+/**
+* This component expects the parent to specify a positive padding and
+* width
+*/
+
+.mx_StyledRadioButton {
+    $radio-circle-color: var(--cpd-color-border-interactive-primary);
+    $active-radio-circle-color: var(--cpd-color-bg-accent-rest);
+    position: relative;
+
+    display: flex;
+    align-items: baseline;
+    flex-grow: 1;
+
+    > .mx_StyledRadioButton_content {
+        flex-grow: 1;
+
+        display: flex;
+        flex-direction: column;
+
+        margin-left: 8px;
+        margin-right: 8px;
+    }
+
+    .mx_StyledRadioButton_spacer {
+        flex-shrink: 0;
+        flex-grow: 0;
+
+        height: $font-16px;
+        width: $font-16px;
+    }
+
+    input[type="radio"] {
+        /* Remove the OS's representation */
+        margin: 0;
+        padding: 0;
+        appearance: none;
+
+        + div {
+            flex-shrink: 0;
+            flex-grow: 0;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            box-sizing: border-box;
+            height: $font-16px;
+            width: $font-16px;
+            margin-left: 2px; /* For the highlight on focus */
+
+            border: 1px solid $radio-circle-color;
+            border-radius: $font-16px;
+
+            > div {
+                box-sizing: border-box;
+
+                height: $font-8px;
+                width: $font-8px;
+
+                border-radius: $font-8px;
+            }
+        }
+
+        &:focus-visible {
+            & + div {
+                @mixin unreal-focus;
+            }
+        }
+
+        &:checked {
+            & + div {
+                border-color: $active-radio-circle-color;
+
+                & > div {
+                    background: $active-radio-circle-color;
+                    /* For enhanced visibility under contrast control */
+                    outline: 1px solid transparent;
+                }
+            }
+        }
+
+        &:disabled {
+            & + div,
+            & + div + span {
+                opacity: 0.5;
+                cursor: not-allowed;
+            }
+
+            & + div {
+                border-color: $radio-circle-color;
+            }
+        }
+
+        &:checked:disabled {
+            & + div > div {
+                background-color: $radio-circle-color;
+            }
+        }
+    }
+
+    .mx_StyledRadioButton_innerLabel {
+        display: flex;
+        position: relative;
+        top: 4px;
+    }
+}
+
+.mx_StyledRadioButton_outlined {
+    border: 1px solid $input-darker-bg-color;
+    border-radius: 8px;
+}
+
+.mx_StyledRadioButton_checked {
+    border-color: var(--cpd-color-bg-accent-rest);
+}
@@ -0,0 +1,13 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2017 Michael Telatynski <7t3chguy@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_SyntaxHighlight {
+    /* inhibit hljs styling */
+    background: none !important;
+    color: $light-fg-color !important;
+}
@@ -0,0 +1,75 @@
+/*
+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_TagComposer {
+    .mx_TagComposer_input {
+        display: flex;
+        flex-direction: row;
+
+        .mx_AccessibleButton {
+            min-width: 70px;
+            padding: 0 8px; /* override from button styles */
+            align-self: stretch; /* override default settingstab style */
+        }
+
+        .mx_Field,
+        .mx_Field input,
+        .mx_AccessibleButton {
+            /* So they look related to each other by feeling the same */
+            border-radius: 8px;
+        }
+    }
+
+    .mx_TagComposer_tags {
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 12px; /* this plus 12px from the tags makes 24px from the input */
+    }
+
+    .mx_Tag {
+        margin-right: 12px;
+        margin-top: 12px;
+    }
+}
+
+.mx_Tag {
+    font-size: $font-15px;
+
+    display: inline-flex;
+    align-items: center;
+
+    gap: 8px;
+    padding: 8px;
+    border-radius: 8px;
+
+    color: $primary-content;
+    background: $quinary-content;
+
+    > svg:first-child {
+        width: 1em;
+        color: $secondary-content;
+        transform: scale(1.25);
+        transform-origin: center;
+    }
+
+    .mx_Tag_delete {
+        border-radius: 50%;
+        text-align: center;
+        width: 1.066666em; /* 16px; */
+        height: 1.066666em;
+        line-height: 1em;
+        color: $secondary-content;
+        background: $system;
+        position: relative;
+
+        svg {
+            width: 16px;
+            height: 16px;
+        }
+    }
+}
@@ -0,0 +1,13 @@
+/*
+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_TextWithTooltip_target {
+    display: inline;
+}
+
+.mx_TextWithTooltip_tooltip {
+    display: none;
+}
@@ -0,0 +1,60 @@
+/*
+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_ToggleSwitch {
+    --ToggleSwitch-min-width: $font-44px;
+
+    transition:
+        background-color 0.2s ease-out 0.1s,
+        border-color 0.2s ease-out 0.1s;
+
+    width: $font-44px;
+    height: $font-20px;
+    border-radius: 1.5rem;
+    padding: 2px;
+
+    background-color: var(--cpd-color-bg-canvas-disabled);
+    border: 1px solid var(--cpd-color-border-disabled);
+    cursor: not-allowed;
+
+    &.mx_ToggleSwitch_enabled {
+        cursor: pointer;
+        background-color: var(--cpd-color-bg-canvas-default);
+        border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-primary);
+
+        &.mx_ToggleSwitch_on {
+            background-color: var(--cpd-color-bg-accent-rest);
+            border-color: var(--cpd-color-bg-accent-rest);
+        }
+
+        > .mx_ToggleSwitch_ball {
+            background-color: var(--cpd-color-icon-secondary);
+        }
+    }
+
+    &.mx_ToggleSwitch_on {
+        background-color: var(--cpd-color-bg-action-primary-disabled);
+        border-color: var(--cpd-color-bg-action-primary-disabled);
+
+        > .mx_ToggleSwitch_ball {
+            left: calc(100% - $font-20px);
+            background-color: var(--cpd-color-icon-on-solid-primary);
+        }
+    }
+}
+
+.mx_ToggleSwitch_ball {
+    position: relative;
+    width: $font-20px;
+    height: $font-20px;
+    border-radius: $font-20px;
+    background-color: var(--cpd-color-bg-action-primary-disabled);
+    transition:
+        left 0.15s ease-out 0.1s,
+        background-color 0.15s ease-out 0.1s;
+    left: 0;
+}
@@ -0,0 +1,45 @@
+/*
+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_Validation {
+    position: relative;
+    max-width: 200px;
+}
+
+.mx_Validation_details {
+    padding-left: 0;
+    margin: 0;
+}
+
+.mx_Validation_description + .mx_Validation_details {
+    margin: 1em 0 0;
+}
+
+.mx_Validation_detail {
+    font-weight: normal;
+    list-style: none;
+    margin-bottom: 0.5em;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    svg {
+        width: 14px;
+        height: 14px;
+        margin-right: var(--cpd-space-1x);
+        vertical-align: text-bottom;
+    }
+
+    &.mx_Validation_valid {
+        color: $accent;
+    }
+
+    &.mx_Validation_invalid {
+        color: $alert;
+    }
+}