feat: show call participants in room list (Discord-style)

2026-05-10 14:25:35 +02:00
parent b797925316
commit 3da363517f
4610 changed files with 827237 additions and 1 deletions
@@ -0,0 +1,62 @@
+/*
+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_BeaconListItem {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: $spacing-12 0;
+
+    border-bottom: 1px solid $system;
+
+    cursor: pointer;
+}
+
+.mx_BeaconListItem_avatarIcon {
+    flex: 0 0;
+    height: 32px;
+    width: 32px;
+}
+
+.mx_BeaconListItem_avatar {
+    flex: 0 0;
+    box-sizing: border-box;
+
+    margin-right: $spacing-8;
+    border: 2px solid $location-live-color;
+    border-radius: 50%;
+}
+
+.mx_BeaconListItem_info {
+    flex: 1 1 0;
+    width: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.mx_BeaconListItem_status {
+    /* override beacon status padding */
+    padding: 0 !important;
+    margin-bottom: $spacing-8;
+
+    .mx_BeaconStatus_label {
+        font-weight: var(--cpd-font-weight-semibold);
+    }
+}
+
+.mx_BeaconListItem_lastUpdated {
+    color: $tertiary-content;
+    font-size: $font-10px;
+}
+
+.mx_BeaconListItem_interactions {
+    display: flex;
+    flex-direction: row;
+}
@@ -0,0 +1,65 @@
+/*
+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_BeaconStatus {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+
+    box-sizing: border-box;
+    padding: $spacing-8;
+
+    color: var(--color);
+    font-size: $font-12px;
+}
+
+.mx_BeaconStatus_Loading,
+.mx_BeaconStatus_Stopped {
+    --color: $tertiary-content;
+}
+
+.mx_BeaconStatus_Active,
+.mx_BeaconStatus_Error {
+    --color: $primary-content;
+}
+
+.mx_BeaconStatus_icon {
+    height: 32px;
+    width: 32px;
+
+    flex: 0 0 32px;
+    margin-right: $spacing-8;
+}
+
+.mx_BeaconStatus_description {
+    flex: 1 1 0;
+    display: flex;
+    flex-direction: column;
+    line-height: $font-14px;
+
+    padding-right: $spacing-8;
+
+    white-space: nowrap;
+    overflow: hidden;
+
+    .mx_BeaconStatus_description_status {
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+}
+
+.mx_BeaconStatus_expiryTime {
+    color: $secondary-content;
+}
+
+.mx_BeaconStatus_label {
+    margin-bottom: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
@@ -0,0 +1,24 @@
+/*
+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_BeaconStatusTooltip {
+    position: absolute;
+    top: 42px;
+    max-width: 150px;
+    height: 38px;
+    box-sizing: content-box;
+    padding-top: $spacing-8;
+}
+
+.mx_BeaconStatusTooltip_inner {
+    position: relative;
+    height: 100%;
+    border-radius: 4px;
+    background: $menu-bg-color;
+    box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
+}
@@ -0,0 +1,63 @@
+/*
+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_BeaconViewDialog_wrapper .mx_Dialog {
+    padding: 0px;
+
+    /* Unset contain and position to allow the close button
+    to appear outside the dialog */
+    contain: unset;
+    position: unset;
+}
+
+.mx_BeaconViewDialog {
+    /* subtract 0.5px to prevent single-pixel margin due to rounding */
+    width: calc(80vw - 0.5px);
+    height: calc(80vh - 0.5px);
+    overflow: hidden;
+
+    /* sidebar is absolutely positioned inside */
+    position: relative;
+
+    .mx_Dialog_header {
+        margin: 0px;
+        padding: 0px;
+        position: unset;
+
+        .mx_Dialog_title {
+            display: none;
+        }
+
+        .mx_Dialog_cancelButton {
+            z-index: 4010;
+            position: fixed;
+            right: 5vw;
+            top: 5vh;
+            width: 20px;
+            height: 20px;
+            background-color: $dialog-close-external-color;
+        }
+    }
+}
+
+.mx_BeaconViewDialog_map {
+    width: 80vw;
+    height: 80vh;
+    border-radius: 8px;
+}
+
+.mx_BeaconViewDialog_mapFallbackMessage {
+    color: $secondary-content;
+    margin-bottom: $spacing-16;
+}
+
+.mx_BeaconViewDialog_viewListButton {
+    position: absolute;
+    top: $spacing-24;
+    left: $spacing-24;
+}
@@ -0,0 +1,48 @@
+/*
+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_DialogOwnBeaconStatus {
+    position: absolute;
+    bottom: $spacing-32;
+    width: 300px;
+    margin-left: -150px;
+    left: 50%;
+
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: stretch;
+
+    background: $background;
+    border-radius: 8px;
+    box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
+
+    padding: 0 $spacing-12;
+}
+
+.mx_DialogOwnBeaconStatus_avatarIcon {
+    flex: 0 0;
+    height: 32px;
+    width: 32px;
+    margin: $spacing-8 0 $spacing-8 0;
+}
+
+.mx_DialogOwnBeaconStatus_avatar {
+    flex: 0 0;
+    box-sizing: border-box;
+
+    border: 2px solid $location-live-color;
+    border-radius: 50%;
+    margin: $spacing-8 0 $spacing-8 0;
+}
+
+.mx_DialogOwnBeaconStatus_status {
+    flex: 1 1;
+    padding-right: 0;
+}
@@ -0,0 +1,53 @@
+/*
+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_DialogSidebar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 265px;
+
+    display: flex;
+    flex-direction: column;
+
+    box-sizing: border-box;
+    padding: $spacing-16;
+
+    background-color: $background;
+    box-shadow: 0px 4px 4px $menu-box-shadow-color;
+
+    .mx_DialogSidebar_header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        flex: 0 0;
+        margin-bottom: $spacing-16;
+
+        color: $primary-content;
+
+        .mx_DialogSidebar_closeButtonIcon {
+            color: $tertiary-content;
+        }
+    }
+
+    .mx_DialogSidebar_list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        flex: 1 1 0;
+        width: 100%;
+        overflow: auto;
+    }
+}
+
+.mx_DialogSidebar_noResults {
+    font: var(--cpd-font-body-md-regular);
+    color: $secondary-content;
+}
@@ -0,0 +1,27 @@
+/*
+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_LeftPanelLiveShareWarning {
+    width: 100%;
+    box-sizing: border-box;
+
+    padding: $spacing-4;
+    text-align: center;
+
+    background-color: $accent;
+    color: #fff;
+    font-size: $font-10px;
+
+    /* panel backdrops overlay the whole sidepanel */
+    /* go above to get hover for title */
+    z-index: 1;
+}
+
+.mx_LeftPanelLiveShareWarning__error {
+    background-color: $alert;
+}
@@ -0,0 +1,12 @@
+/*
+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_LiveTimeRemaining {
+    color: $secondary-content;
+    font-size: $font-12px;
+}
@@ -0,0 +1,23 @@
+/*
+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_OwnBeaconStatus_button {
+    margin-left: $spacing-8;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_OwnBeaconStatus_button {
+    /* align to top to make room for timestamp */
+    /* in bubble view */
+    align-self: start;
+}
+
+.mx_OwnBeaconStatus_destructiveButton {
+    /* override button link_inline styles */
+    color: $alert !important;
+    font-weight: var(--cpd-font-weight-semibold) !important;
+}
@@ -0,0 +1,31 @@
+/*
+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_ShareLatestLocation_icon {
+    height: 13px;
+    width: 13px;
+    color: $secondary-content;
+}
+
+/* double class to be more specific than the general mx_CopyableText CSS rule */
+.mx_CopyableText.mx_ShareLatestLocation_copy {
+    /* override copyable text style to make compact */
+    .mx_CopyableText_copyButton {
+        height: 13px;
+        margin-left: $spacing-8 !important;
+        position: relative;
+        top: -1px;
+        width: 13px;
+
+        &::before {
+            background-color: $secondary-content;
+            height: 13px;
+            width: 13px;
+        }
+    }
+}
@@ -0,0 +1,32 @@
+/*
+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_StyledLiveBeaconIcon {
+    flex-grow: 0;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    border-width: 2px;
+    border-style: solid;
+    border-radius: 50%;
+
+    background-color: $location-live-color;
+    border-color: $location-live-color;
+    padding: 2px;
+    /* colors icon */
+    color: white;
+}
+
+.mx_StyledLiveBeaconIcon.mx_StyledLiveBeaconIcon_error {
+    background-color: $alert;
+    border-color: $alert;
+}
+
+.mx_StyledLiveBeaconIcon.mx_StyledLiveBeaconIcon_idle {
+    background-color: $quaternary-content;
+    border-color: $quaternary-content;
+}
@@ -0,0 +1,13 @@
+/*
+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_KebabContextMenu_icon {
+    width: 24px;
+    height: 24px;
+    color: $icon-button-color;
+}
@@ -0,0 +1,19 @@
+/*
+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_PollDetailHeader {
+    /* override accessiblebutton style */
+    font-size: $font-15px !important;
+}
+
+.mx_PollDetailHeader_icon {
+    height: 16px;
+    width: 16px;
+    margin-right: $spacing-8;
+    vertical-align: middle;
+}
@@ -0,0 +1,37 @@
+/*
+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_PollListItem {
+    width: 100%;
+}
+
+.mx_PollListItem_content {
+    width: 100%;
+    display: grid;
+    justify-content: left;
+    align-items: center;
+    gap: $spacing-8;
+    grid-template-columns: auto auto auto;
+    grid-template-rows: auto;
+    cursor: pointer;
+
+    color: $primary-content;
+}
+
+.mx_PollListItem_icon {
+    height: 14px;
+    width: 14px;
+    color: $quaternary-content;
+    padding-left: $spacing-8;
+}
+
+.mx_PollListItem_question {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
@@ -0,0 +1,57 @@
+/*
+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_PollListItemEnded {
+    width: 100%;
+}
+
+.mx_PollListItemEnded_content {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    color: $primary-content;
+    cursor: pointer;
+}
+
+.mx_PollListItemEnded_title {
+    display: grid;
+    justify-content: left;
+    align-items: center;
+    gap: $spacing-8;
+    grid-template-columns: min-content 1fr min-content;
+    grid-template-rows: auto;
+}
+
+.mx_PollListItemEnded_icon {
+    height: 14px;
+    width: 14px;
+    color: $quaternary-content;
+    padding-left: $spacing-8;
+}
+
+.mx_PollListItemEnded_date {
+    font-size: $font-12px;
+    color: $secondary-content;
+}
+
+.mx_PollListItemEnded_question {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.mx_PollListItemEnded_answers {
+    display: grid;
+    gap: $spacing-8;
+    margin-top: $spacing-12;
+}
+
+.mx_PollListItemEnded_voteCount {
+    /* 6px to match PollOption padding */
+    margin: $spacing-8 0 0 6px;
+}
@@ -0,0 +1,35 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2019-2023 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_AppPermission {
+    font-size: $font-12px;
+    width: 100%; /* make mx_AppPermission fill width of mx_AppTileBody so that scroll bar appears on the edge */
+    overflow-y: scroll;
+    .mx_AppPermission_bolder,
+    .mx_AppPermission_content_bolder {
+        font-weight: var(--cpd-font-weight-semibold);
+    }
+    .mx_AppPermission_content {
+        margin-block: auto; /* place at the center */
+
+        > div {
+            margin-block: 12px;
+        }
+
+        .mx_TextWithTooltip_target--helpIcon {
+            display: inline-block;
+            height: $font-14px; /* align with characters on the same line */
+            vertical-align: middle;
+
+            .mx_Icon {
+                color: $accent;
+            }
+        }
+    }
+}
@@ -0,0 +1,17 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 Suguru Hirahara
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_AppWarning {
+    font-size: $font-16px;
+    justify-content: center;
+
+    h4 {
+        margin: 0;
+        padding: 0;
+    }
+}
@@ -0,0 +1,74 @@
+/*
+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_FilterDropdown {
+    .mx_Dropdown_menu {
+        margin-top: $spacing-4;
+        left: unset;
+        right: -$spacing-12;
+        width: 232px;
+        padding: $spacing-12;
+
+        border: 1px solid $quinary-content;
+        border-radius: 8px;
+        box-shadow: 0px 1px 3px rgb(23, 25, 28, 0.05);
+
+        background-color: $system;
+
+        .mx_Dropdown_option_highlight {
+            background-color: transparent;
+        }
+    }
+
+    .mx_Dropdown_input {
+        height: 24px;
+        background-color: transparent;
+        border-color: transparent;
+        color: $secondary-content;
+        border-radius: 4px;
+
+        &:focus,
+        &:hover {
+            background-color: $quinary-content;
+            border-color: $quinary-content;
+        }
+    }
+
+    .mx_Dropdown_arrow {
+        color: $secondary-content;
+    }
+}
+
+.mx_FilterDropdown_option {
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+    padding: $spacing-8 0 $spacing-8 $spacing-20;
+
+    font-size: $font-12px;
+    line-height: $font-15px;
+    color: $primary-content;
+}
+
+.mx_FilterDropdown_optionSelectedIcon {
+    height: 14px;
+    width: 14px;
+    position: absolute;
+    top: $spacing-8;
+    left: 0;
+}
+
+.mx_FilterDropdown_optionLabel {
+    font-weight: var(--cpd-font-weight-semibold);
+    display: block;
+}
+
+.mx_FilterDropdown_optionDescription {
+    color: $secondary-content;
+    margin-top: $spacing-4;
+}
@@ -0,0 +1,38 @@
+/*
+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_FilterTabGroup {
+    color: $primary-content;
+    label {
+        margin-right: $spacing-12;
+        cursor: pointer;
+        span {
+            display: inline-block;
+            line-height: $font-24px;
+        }
+    }
+    input[type="radio"] {
+        appearance: none;
+        margin: 0;
+        padding: 0;
+
+        &:focus,
+        &:hover {
+            & + span {
+                color: $secondary-content;
+            }
+        }
+
+        &:checked + span {
+            color: $accent;
+            font-weight: var(--cpd-font-weight-semibold);
+            /* underline */
+            box-shadow: 0 1.5px 0 0 currentColor;
+        }
+    }
+}
@@ -0,0 +1,11 @@
+/*
+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_LearnMore_button {
+    margin-left: $spacing-4;
+}
@@ -0,0 +1,40 @@
+/*
+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_EnableLiveShare {
+    flex: 1 1 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+
+    padding: $spacing-32 $spacing-16;
+    text-align: center;
+    box-sizing: border-box;
+}
+
+.mx_EnableLiveShare_heading {
+    padding-top: $spacing-24;
+}
+
+.mx_EnableLiveShare_icon {
+    height: 58px;
+    width: 58px;
+}
+
+.mx_EnableLiveShare_description {
+    padding: 0 $spacing-24;
+    margin-bottom: $spacing-32;
+    line-height: $font-20px;
+}
+
+.mx_EnableLiveShare_button {
+    margin-top: $spacing-32;
+    height: 48px;
+    width: 100%;
+}
@@ -0,0 +1,11 @@
+/*
+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_LiveDurationDropdown {
+    margin-bottom: $spacing-16;
+}
@@ -0,0 +1,14 @@
+/*
+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_LocationShareMenu {
+    width: 375px;
+    height: 460px;
+    display: flex;
+    flex-direction: column;
+}
@@ -0,0 +1,58 @@
+/*
+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_MapError {
+    padding: 100px $spacing-32 0;
+    text-align: center;
+
+    --mx-map-error-icon-color: $secondary-content;
+    --mx-map-error-icon-size: 58px;
+}
+
+.mx_MapError.mx_MapError_isMinimised {
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    padding: $spacing-24;
+    background-color: $panels;
+    font-size: $font-12px;
+    line-height: $font-16px;
+
+    --mx-map-error-icon-color: $alert;
+    --mx-map-error-icon-size: 26px;
+
+    .mx_MapError_message {
+        margin: 0;
+        max-width: 275px;
+    }
+
+    .mx_MapError_heading {
+        padding-top: $spacing-8;
+        /* override h3 heading size */
+        font-size: inherit !important;
+        font-weight: normal !important;
+    }
+}
+
+.mx_MapError_message {
+    margin: $spacing-16 0 $spacing-32;
+}
+
+.mx_MapError_heading {
+    padding-top: $spacing-24;
+}
+
+.mx_MapError_icon {
+    height: var(--mx-map-error-icon-size);
+    width: var(--mx-map-error-icon-size);
+    color: var(--mx-map-error-icon-color);
+}
@@ -0,0 +1,37 @@
+/*
+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_MapFallback {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    z-index: 0;
+
+    background-color: $system;
+}
+
+.mx_MapFallback_bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    min-height: 100%;
+    min-width: 100%;
+    color: $quinary-content;
+    z-index: -1;
+
+    pointer-events: none;
+}
+
+.mx_MapFallback_icon {
+    width: 65px;
+    margin-bottom: $spacing-16;
+    color: $quaternary-content;
+}
@@ -0,0 +1,38 @@
+/*
+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_Marker_defaultColor {
+    color: $accent;
+}
+
+.mx_Marker_border {
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    filter: drop-shadow(0px 3px 5px rgb(0, 0, 0, 0.2));
+    background-color: currentColor;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    /* caret down */
+    &::before {
+        content: "";
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        border-top: 5px solid currentColor;
+        position: absolute;
+        bottom: -4px;
+    }
+}
+
+.mx_Marker_icon {
+    color: white;
+    height: 20px;
+}
@@ -0,0 +1,45 @@
+/*
+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_ShareDialogButtons {
+    position: absolute;
+    width: 100%;
+    height: 0;
+    top: 0;
+}
+
+button.mx_ShareDialogButtons_button {
+    height: 24px;
+    width: 24px;
+    border-radius: 50%;
+    background-color: $quinary-content;
+    opacity: 0.8;
+    text-align: center;
+    color: $secondary-content;
+    position: absolute;
+    top: $spacing-16;
+
+    &:hover,
+    &:focus {
+        opacity: 1;
+    }
+
+    &.left {
+        left: $spacing-16;
+    }
+
+    &.right {
+        right: $spacing-16;
+    }
+}
+
+.mx_ShareDialogButtons_button-icon {
+    width: 20px;
+    height: 20px;
+    margin: 2px;
+}
@@ -0,0 +1,90 @@
+/*
+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_ShareType {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+
+    padding: 60px $spacing-12 $spacing-32;
+
+    color: $primary-content;
+
+    .mx_ShareType_wrapper_options {
+        display: flex;
+        flex-direction: column;
+        row-gap: $spacing-12;
+        width: 100%;
+        margin-top: $spacing-12;
+
+        .mx_ShareType_option {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            padding: $spacing-8 $spacing-20;
+            background: none;
+
+            border: 1px solid $quinary-content;
+            border-radius: 8px;
+
+            font-size: $font-15px;
+            font-family: inherit;
+            line-height: inherit;
+            color: $primary-content;
+
+            &:hover,
+            &:focus {
+                border-color: $accent;
+            }
+        }
+    }
+}
+
+.mx_ShareType_badge {
+    height: 60px;
+    width: 60px;
+    margin-bottom: $spacing-20;
+    background-color: $accent;
+    border-radius: 50%;
+    border: 14px solid $accent;
+    /* colors icon */
+    color: white;
+    box-sizing: border-box;
+}
+
+.mx_ShareType_heading {
+    padding-bottom: $spacing-32;
+    text-align: center;
+}
+
+.mx_ShareType_option-icon {
+    height: 40px;
+    width: 40px;
+    box-sizing: border-box;
+    margin-right: $spacing-12;
+    flex: 0 0 40px;
+    border-width: 2px;
+    border-style: solid;
+    border-radius: 50%;
+
+    /* Live is styled by StyledLiveBeaconIcon */
+
+    &.Own {
+        border-color: $accent;
+    }
+
+    &.Pin {
+        border-color: $accent;
+        background-color: $accent;
+        padding: 7px;
+        /* colors icon */
+        color: white;
+    }
+}
@@ -0,0 +1,37 @@
+/*
+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_ZoomButtons {
+    position: absolute;
+    bottom: $spacing-32;
+    right: $spacing-24;
+    display: flex;
+    flex-direction: column;
+    row-gap: $spacing-8;
+
+    .mx_ZoomButtons_button {
+        $ZoomButtons_button-size: 24px;
+
+        border-radius: 4px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: $ZoomButtons_button-size;
+        width: $ZoomButtons_button-size;
+        background: $background;
+        box-shadow: 0px 4px 12px rgb(0, 0, 0, 0.25);
+
+        .mx_ZoomButtons_icon {
+            $ZoomButtons_icon-size: 12px;
+
+            height: $ZoomButtons_icon-size;
+            width: $ZoomButtons_icon-size;
+            color: $primary-content;
+        }
+    }
+}
@@ -0,0 +1,81 @@
+/*
+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_MBeaconBody {
+    position: relative;
+    height: 220px;
+    max-width: 325px;
+    width: 100%;
+
+    border-radius: var(--MBody-border-radius);
+    overflow: hidden;
+}
+
+.mx_MBeaconBody.mx_MBeaconBody_withoutMap {
+    height: auto;
+
+    .mx_MBeaconBody_chin {
+        position: relative;
+        background-color: transparent;
+    }
+}
+
+.mx_MBeaconBody_withoutMapContent {
+    background-color: $panels;
+    border-radius: 4px;
+}
+
+.mx_MBeaconBody_withoutMapInfoLastUpdated {
+    /* 48px lines up with icon in BeaconStatus */
+    margin-top: -$spacing-8;
+    padding: 0 $spacing-8 $spacing-8 48px;
+
+    color: $tertiary-content;
+    font-size: $font-10px;
+}
+
+.mx_MBeaconBody_map {
+    height: 100%;
+    width: 100%;
+    z-index: 0; /* keeps the entire map under the message action bars */
+
+    cursor: pointer;
+}
+
+.mx_MBeaconBody_mapFallback,
+.mx_MBeaconBody_mapError {
+    /* pushes spinner/icon up */
+    /* to appear more centered with the footer */
+    padding-bottom: 50px !important;
+}
+
+.mx_MBeaconBody_mapErrorInteractive {
+    cursor: pointer;
+}
+
+.mx_MBeaconBody_mapFallback {
+    cursor: default;
+}
+
+.mx_MBeaconBody_chin {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background-color: var(--cpd-color-bg-canvas-default);
+    opacity: 0.85;
+}
+
+.mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_MBeaconBody {
+    max-width: 100%;
+    width: 450px;
+}
+
+.mx_ReplyTile .mx_MBeaconBody {
+    /* Prevent clicking a beacon within a reply */
+    pointer-events: none;
+}
@@ -0,0 +1,12 @@
+/*
+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_MediaProcessingError_Icon {
+    margin-right: $spacing-4;
+    vertical-align: text-top;
+}
@@ -0,0 +1,116 @@
+/*
+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_PollOption {
+    border: 1px solid $quinary-content;
+    border-radius: 8px;
+    padding: 6px 12px;
+    background-color: $background;
+
+    .mx_StyledRadioButton_content,
+    .mx_PollOption_endedOption {
+        padding-top: 2px;
+        margin-right: 0px;
+    }
+
+    .mx_StyledRadioButton_spacer {
+        display: none;
+    }
+}
+
+.mx_PollOption,
+/* label has cursor: default in user-agent stylesheet */
+/* override */
+.mx_PollOption_live-option {
+    cursor: pointer;
+}
+
+.mx_PollOption_content {
+    display: flex;
+    justify-content: space-between;
+}
+
+.mx_PollOption_optionVoteCount {
+    color: $secondary-content;
+    font-size: $font-12px;
+    white-space: nowrap;
+}
+
+.mx_PollOption_winnerIcon {
+    height: 12px;
+    width: 12px;
+    color: var(--cpd-color-icon-accent-tertiary);
+    margin-right: $spacing-4;
+    vertical-align: middle;
+}
+
+.mx_PollOption_checked {
+    .mx_PollOption_popularityBackground {
+        .mx_PollOption_popularityAmount {
+            background-color: var(--cpd-color-icon-primary);
+        }
+    }
+
+    /* override checked radio button styling to show checkmark instead */
+    .mx_StyledRadioButton_checked {
+        input[type="radio"]:checked + div {
+            border-color: var(--cpd-color-icon-primary);
+            background-color: var(--cpd-color-icon-primary);
+
+            div {
+                background: none;
+
+                svg {
+                    color: var(--cpd-color-icon-on-solid-primary);
+                    width: 12px;
+                    height: 12px;
+                    margin: -2px;
+                    display: block;
+                }
+            }
+        }
+    }
+}
+
+.mx_PollOption_ended.mx_PollOption_checked {
+    .mx_PollOption_popularityBackground {
+        .mx_PollOption_popularityAmount {
+            background-color: var(--cpd-color-icon-accent-tertiary);
+        }
+    }
+
+    /* override checked radio button styling to show checkmark instead */
+    .mx_StyledRadioButton_checked {
+        input[type="radio"]:checked + div {
+            border-color: var(--cpd-color-icon-accent-tertiary);
+            background-color: var(--cpd-color-icon-accent-tertiary);
+        }
+    }
+}
+
+/* options not actionable in these states */
+.mx_PollOption_checked,
+.mx_PollOption_ended {
+    pointer-events: none;
+}
+
+.mx_PollOption_popularityBackground {
+    width: 100%;
+    height: 8px;
+    margin-right: 12px;
+    border-radius: 8px;
+    background-color: $system;
+    margin-top: $spacing-8;
+
+    .mx_PollOption_popularityAmount {
+        width: 0%;
+        height: 8px;
+        border-radius: 8px;
+        background-color: var(--cpd-color-icon-primary);
+    }
+}
@@ -0,0 +1,41 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2024 The Matrix.org Foundation C.I.C.
+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.
+*/
+
+/*
+ * These used to live in General User Settings. These components are horribly duplicative
+ * but share the same styles. For now I'm putting them here so I can renamed the general
+ * tab sensibly and before I can refactor these components.
+ */
+
+.mx_AddRemoveThreepids_existing {
+    display: flex;
+    align-items: center;
+}
+
+.mx_AddRemoveThreepids_existing_address,
+.mx_AddRemoveThreepids_existing_promptText {
+    flex: 1;
+    margin-right: 10px;
+}
+
+.mx_AddRemoveThreepids_existing_button {
+    margin-left: 5px;
+}
+
+.mx_EmailAddressesPhoneNumbers_verify {
+    display: flex;
+}
+
+.mx_EmailAddressesPhoneNumbers_existing_button {
+    justify-content: right;
+}
+
+.mx_EmailAddressesPhoneNumbers_verify_instructions {
+    flex: 1;
+}
@@ -0,0 +1,12 @@
+/*
+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_CurrentDeviceSection_deviceDetails {
+    /* align with text of session tile */
+    margin-left: 56px;
+}
@@ -0,0 +1,51 @@
+/*
+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_DeviceDetailHeading {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.mx_DeviceDetailHeading_renameCta {
+    flex-shrink: 0;
+}
+
+.mx_DeviceDetailHeading_renameForm {
+    display: grid;
+    gap: $spacing-16;
+    justify-content: left;
+    grid-template-columns: 100%;
+}
+
+.mx_DeviceDetailHeading_renameFormButtons {
+    display: flex;
+    flex-direction: row;
+    gap: $spacing-8;
+
+    .mx_Spinner {
+        width: auto;
+        flex-grow: 0;
+    }
+}
+
+.mx_DeviceDetailHeading_renameFormInput {
+    /* override field styles */
+    margin: 0 0 $spacing-4 0 !important;
+}
+
+.mx_DeviceDetailHeading_renameFormHeading {
+    margin: 0;
+}
+
+.mx_DeviceDetailHeading_renameFormError {
+    color: $alert;
+    padding-right: $spacing-4;
+    display: block;
+}
@@ -0,0 +1,88 @@
+/*
+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_DeviceDetails {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+
+    margin-top: $spacing-16;
+    padding: $spacing-24;
+    border-radius: 8px;
+    border: 1px solid $quinary-content;
+}
+
+.mx_DeviceDetails_section {
+    padding-bottom: $spacing-20;
+    margin-bottom: $spacing-20;
+    border-bottom: 1px solid $quinary-content;
+
+    display: grid;
+    gap: $spacing-24;
+    justify-content: left;
+    grid-template-columns: 100%;
+
+    &:last-child {
+        padding-bottom: 0;
+        border-bottom: 0;
+        margin-bottom: 0;
+    }
+}
+
+.mx_DeviceDetails_sectionHeading {
+    margin: 0;
+
+    .mx_DeviceDetails_sectionSubheading {
+        display: block;
+        font-size: $font-12px;
+        color: $secondary-content;
+        line-height: $font-14px;
+        margin-top: $spacing-4;
+    }
+}
+
+.mx_DeviceDetails_metadataTable {
+    font: var(--cpd-font-body-sm-regular);
+    color: $secondary-content;
+
+    width: 100%;
+
+    border-spacing: 0;
+
+    th {
+        text-transform: uppercase;
+        font-weight: normal;
+        text-align: left;
+    }
+
+    td {
+        padding-top: $spacing-8;
+    }
+
+    .mxDeviceDetails_metadataLabel {
+        width: 160px;
+    }
+
+    .mxDeviceDetails_metadataValue {
+        color: $primary-content;
+    }
+}
+
+.mx_DeviceDetails_signOutButtonContent {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: $spacing-4;
+}
+
+.mx_DeviceDetails_pushNotifications {
+    display: block;
+    .mx_ToggleSwitch {
+        float: right;
+    }
+}
@@ -0,0 +1,41 @@
+/*
+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_DeviceExpandDetailsButton {
+    height: 32px;
+    width: 32px;
+    background: transparent;
+
+    border-radius: 4px;
+    color: $icon-button-color;
+
+    --icon-transform: rotate(-90deg);
+
+    &:hover {
+        background: $quinary-content;
+    }
+}
+
+.mx_DeviceExpandDetailsButton.mx_DeviceExpandDetailsButton_expanded {
+    --icon-transform: rotate(0deg);
+
+    background: $system;
+
+    &:hover {
+        background: $quinary-content;
+    }
+}
+
+.mx_DeviceExpandDetailsButton_icon {
+    height: 24px;
+    width: 24px;
+
+    transition: all 0.3s;
+    transform: var(--icon-transform);
+    transform-origin: center;
+}
@@ -0,0 +1,66 @@
+/*
+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_DeviceSecurityCard {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    box-sizing: border-box;
+
+    padding: $spacing-16;
+
+    border: 1px solid $quinary-content;
+    border-radius: 8px;
+}
+
+.mx_DeviceSecurityCard_icon {
+    flex: 0 0 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: $spacing-16;
+    border-radius: 8px;
+
+    height: 40px;
+    width: 40px;
+
+    color: var(--icon-color);
+    background-color: var(--background-color);
+
+    &.Verified {
+        --icon-color: $e2e-verified-color;
+        --background-color: $e2e-verified-color-light;
+    }
+
+    &.Unverified {
+        --icon-color: $e2e-warning-color;
+        --background-color: $e2e-warning-color-light;
+    }
+
+    &.Inactive {
+        --icon-color: $secondary-content;
+        --background-color: $panels;
+    }
+}
+
+.mx_DeviceSecurityCard_content {
+    flex: 1 1;
+}
+.mx_DeviceSecurityCard_heading {
+    margin: 0 0 $spacing-4 0;
+}
+.mx_DeviceSecurityCard_description {
+    margin: 0;
+    font: var(--cpd-font-body-sm-regular);
+    color: $secondary-content;
+}
+
+.mx_DeviceSecurityCard_actions {
+    margin-top: $spacing-16;
+}
@@ -0,0 +1,41 @@
+/*
+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_DeviceTile {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+}
+
+.mx_DeviceTile_interactive {
+    cursor: pointer;
+}
+
+.mx_DeviceTile_info {
+    flex: 1 1 0;
+}
+
+.mx_DeviceTile_metadata {
+    margin-top: $spacing-4;
+    font: var(--cpd-font-body-sm-regular);
+    color: $secondary-content;
+}
+
+.mx_DeviceTile_inactiveIcon {
+    height: 14px;
+    margin-right: $spacing-8;
+    vertical-align: middle;
+}
+
+.mx_DeviceTile_actions {
+    display: grid;
+    gap: $spacing-8;
+    grid-auto-flow: column;
+    margin-left: $spacing-8;
+}
@@ -0,0 +1,63 @@
+/*
+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_DeviceTypeIcon {
+    flex: 0 0 auto;
+    position: relative;
+    margin-right: $spacing-8;
+    /* creates space for verification icon to overlap */
+    padding: 0 $spacing-8 $spacing-8 0;
+}
+
+.mx_DeviceTypeIcon_deviceIconWrapper {
+    --background-color: $panels;
+    --icon-color: $secondary-content;
+
+    height: 40px;
+    width: 40px;
+    box-sizing: border-box;
+
+    border: $spacing-8 solid var(--background-color);
+    border-radius: 50%;
+    color: var(--icon-color);
+    background-color: var(--background-color);
+}
+
+.mx_DeviceTypeIcon_selected .mx_DeviceTypeIcon_deviceIconWrapper {
+    --background-color: $primary-content;
+    --icon-color: $background;
+}
+
+.mx_DeviceTypeIcon_deviceIcon {
+    height: 24px;
+    width: 24px;
+}
+
+.mx_DeviceTypeIcon_verificationIcon {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    height: 24px;
+    width: 24px;
+    box-sizing: border-box;
+    padding: $spacing-4;
+
+    border: 1px solid $quinary-content;
+    border-radius: 50%;
+    background-color: $background;
+
+    color: var(--v-icon-color);
+
+    &.verified {
+        --v-icon-color: $e2e-verified-color;
+    }
+
+    &.unverified {
+        --v-icon-color: $e2e-warning-color;
+    }
+}
@@ -0,0 +1,49 @@
+/*
+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_FilteredDeviceList {
+    .mx_Dropdown {
+        flex: 1 0 80px;
+    }
+}
+
+.mx_FilteredDeviceList_list {
+    list-style-type: none;
+    display: grid;
+    gap: $spacing-16;
+    margin: 0;
+    padding: 0 $spacing-16;
+}
+
+.mx_FilteredDeviceList_listItem {
+    display: flex;
+    flex-direction: column;
+}
+
+.mx_FilteredDeviceList_securityCard {
+    margin-bottom: $spacing-32;
+}
+
+.mx_FilteredDeviceList_noResults {
+    width: 100%;
+    text-align: center;
+    margin-bottom: $spacing-32;
+}
+
+.mx_FilteredDeviceList_headerButton {
+    flex-shrink: 0;
+    /* override inline button styling */
+    display: flex !important;
+    flex-direction: row;
+    gap: $spacing-8;
+}
+
+.mx_FilteredDeviceList_deviceDetails {
+    /* align with text of session tile */
+    margin-left: 88px;
+}
@@ -0,0 +1,33 @@
+/*
+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_FilteredDeviceListHeader {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    box-sizing: border-box;
+    gap: $spacing-16;
+
+    width: 100%;
+    height: 48px;
+    padding: 0 $spacing-16;
+    margin-bottom: $spacing-32;
+
+    background-color: $panels;
+    border-radius: 8px;
+    color: $secondary-content;
+
+    /* Higher specificity selector to override the flex-start value */
+    .mx_AccessibleButton.mx_AccessibleButton_hasKind {
+        align-self: center;
+    }
+}
+
+.mx_FilteredDeviceListHeader_label {
+    flex: 1 1 100%;
+}
@@ -0,0 +1,11 @@
+/*
+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_SecurityRecommendations_spacing {
+    height: $spacing-16;
+}
@@ -0,0 +1,24 @@
+/*
+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_SelectableDeviceTile {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+}
+
+.mx_SelectableDeviceTile_checkbox {
+    flex: 1 0;
+
+    > div {
+        margin-top: auto;
+        margin-bottom: auto;
+        margin-right: var(--cpd-space-1x);
+    }
+}
@@ -0,0 +1,10 @@
+/*
+ * 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_KeyStoragePanel_toggleRow {
+    flex-direction: row;
+}
@@ -0,0 +1,73 @@
+/*
+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_SettingsSubsection {
+    width: 100%;
+    box-sizing: border-box;
+
+    &.mx_SettingsSubsection_newUi {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-6x);
+    }
+
+    *[role="separator"] {
+        /**
+         * The gap between subsections is 32px and inside the subsection is 24px.
+         * The separator separates the subsections, so it should have the same gap as the subsections.
+         * We add 12px and the separator spacing (8px) to the top margin to make the separator visually centered between the subsections.
+         * !important because it's overriding compound margin.
+         */
+        margin-top: var(--cpd-space-5x) !important;
+    }
+}
+
+.mx_SettingsSubsection_description {
+    margin-top: $spacing-8;
+}
+
+.mx_SettingsSubsection_text {
+    width: 100%;
+    box-sizing: inherit;
+    color: $secondary-content;
+}
+
+.mx_SettingsSubsection_content {
+    width: 100%;
+    display: grid;
+    gap: var(--cpd-space-4x);
+    /* setting minwidth 0 makes columns definitely sized fixing horizontal overflow */
+    grid-template-columns: minmax(0, 1fr);
+    justify-items: flex-start;
+    margin-top: $spacing-24;
+
+    summary {
+        color: $accent;
+    }
+    details[open] {
+        summary {
+            margin-bottom: $spacing-8;
+        }
+    }
+
+    &.mx_SettingsSubsection_contentStretch {
+        justify-items: stretch;
+    }
+
+    &.mx_SettingsSubsection_noHeading {
+        margin-top: 0;
+    }
+    &.mx_SettingsSubsection_content_newUi {
+        gap: var(--cpd-space-6x);
+        margin-top: 0;
+    }
+
+    .mx_SettingsSubsection_dropdown {
+        min-width: 360px;
+    }
+}
@@ -0,0 +1,18 @@
+/*
+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_SettingsSubsectionHeading {
+    display: flex;
+    flex-direction: row;
+
+    gap: $spacing-8;
+}
+
+.mx_SettingsSubsectionHeading_heading {
+    flex: 1 1 100%;
+}
@@ -0,0 +1,32 @@
+/*
+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_QuickThemeSwitcher {
+    display: flex;
+    align-items: center;
+
+    .mx_Dropdown {
+        min-width: 100px;
+        margin-left: auto;
+        height: min-content;
+    }
+
+    .mx_Dropdown_menu {
+        max-height: 70px;
+    }
+}
+
+.mx_QuickThemeSwitcher_heading {
+    font-weight: var(--cpd-font-weight-semibold);
+    font-size: $font-12px;
+    line-height: $font-15px;
+    color: $secondary-content;
+    text-transform: uppercase;
+    display: inline-block;
+    margin: 0;
+}
@@ -0,0 +1,16 @@
+/*
+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_Caption {
+    font: var(--cpd-font-body-sm-regular);
+    color: $secondary-content;
+
+    &.mx_Caption_error {
+        color: $alert;
+    }
+}