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,69 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_AvatarSetting_avatar {
+    width: 90px;
+    min-width: 90px; /* so it doesn't get crushed by the flexbox in languages with longer words */
+    height: 90px;
+    margin-top: 8px;
+    position: relative;
+
+    &.mx_AvatarSetting_avatarDisplay:hover .mx_AvatarSetting_hover {
+        opacity: 1;
+    }
+
+    & > * {
+        box-sizing: border-box;
+    }
+
+    .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
+        margin-top: 8px;
+    }
+
+    .mx_AccessibleButton.mx_AccessibleButton_kind_link_sm {
+        width: 100%;
+    }
+
+    & > img {
+        display: block;
+        height: 90px;
+        width: inherit;
+        border-radius: 90px;
+        cursor: pointer;
+        object-fit: cover;
+    }
+
+    .mx_AvatarSetting_uploadButton {
+        width: 28px;
+        height: 28px;
+        border-radius: 32px;
+        border: 1px solid var(--cpd-color-bg-canvas-default);
+        background-color: var(--cpd-color-bg-canvas-default);
+
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        text-align: center;
+        cursor: pointer;
+
+        svg {
+            position: relative;
+            top: 3px;
+        }
+    }
+
+    .mx_AvatarSetting_uploadButton:hover,
+    .mx_AvatarSetting_uploadButton_active {
+        background-color: var(--cpd-color-bg-subtle-primary);
+    }
+}
+
+.mx_AvatarSetting_removeMenuItem svg,
+.mx_AvatarSetting_removeMenuItem span {
+    color: var(--cpd-color-text-critical-primary) !important;
+}
@@ -0,0 +1,35 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_FontScalingPanel_preview {
+    --FontScalingPanel_preview-padding-block: 9px;
+
+    border: 1px solid $quinary-content;
+    border-radius: 10px;
+    padding: 0 $spacing-16 var(--FontScalingPanel_preview-padding-block) $spacing-16;
+    pointer-events: none;
+    display: flow-root;
+
+    &.mx_IRCLayout {
+        padding-top: 9px;
+    }
+
+    .mx_EventTile[data-layout="bubble"] {
+        margin-top: 30px;
+    }
+
+    .mx_EventTile_msgOption {
+        display: none;
+    }
+}
+
+.mx_FontScalingPanel_Dropdown {
+    width: 120px;
+    /* Override default mx_Field margin */
+    margin-bottom: var(--cpd-space-2x) !important;
+}
@@ -0,0 +1,26 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_ImageSizePanel_radios {
+    display: flex;
+    flex-direction: row;
+    gap: $spacing-16;
+
+    > label {
+        margin-right: 68px; /* keep the boxes separate */
+        cursor: pointer;
+    }
+
+    .mx_ImageSizePanel_size {
+        display: block;
+        color: $quinary-content;
+        width: 221px;
+        height: 148px;
+        margin-bottom: 14px; /* move radio button away from bottom edge a bit */
+    }
+}
@@ -0,0 +1,42 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_IntegrationManager {
+    .mx_Dialog_border {
+        box-sizing: border-box;
+        width: 60%;
+        height: 70%;
+        max-width: initial;
+        max-height: initial;
+    }
+
+    .mx_Dialog {
+        padding: 0;
+        overflow: hidden;
+    }
+
+    iframe {
+        background-color: #fff;
+        border: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    h3 {
+        margin-block: $spacing-20;
+    }
+
+    .mx_IntegrationManager_loading,
+    .mx_IntegrationManager_error {
+        text-align: center;
+    }
+
+    .mx_IntegrationManager_error h3 {
+        color: $alert;
+    }
+}
@@ -0,0 +1,85 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_JoinRuleSettings_upgradeRequired {
+    margin-left: 16px;
+    padding: 4px 16px;
+    border: 1px solid $accent;
+    border-radius: 8px;
+    color: $accent;
+    font-size: $font-12px;
+    line-height: $font-15px;
+}
+
+.mx_JoinRuleSettings_spacesWithAccess {
+    > h4 {
+        color: $secondary-content;
+        font-weight: var(--cpd-font-weight-semibold);
+        font-size: $font-12px;
+        line-height: $font-15px;
+        text-transform: uppercase;
+    }
+
+    > span {
+        font: var(--cpd-font-body-md-medium);
+        line-height: 32px; /* matches height of avatar for v-align */
+        color: $secondary-content;
+        display: inline-block;
+
+        .mx_BaseAvatar {
+            margin-right: 8px;
+        }
+
+        & + span {
+            margin-left: 16px;
+        }
+    }
+}
+
+.mx_JoinRuleSettings_radioButton {
+    padding-top: 16px;
+
+    .mx_StyledRadioButton_content {
+        margin-left: 14px;
+        font-weight: var(--cpd-font-weight-semibold);
+        font-size: $font-15px;
+        line-height: $font-24px;
+        color: $primary-content;
+        display: block;
+    }
+
+    &.mx_StyledRadioButton_disabled {
+        opacity: 0.5;
+    }
+
+    &.mx_StyledRadioButton_disabled + span {
+        opacity: 0.5;
+    }
+
+    & + span {
+        display: inline-block;
+        margin-left: 34px;
+        margin-bottom: 16px;
+        font-size: $font-15px;
+        line-height: $font-24px;
+        color: $secondary-content;
+
+        & + .mx_StyledRadioButton {
+            border-top: 1px solid $quinary-content;
+        }
+    }
+}
+
+.mx_JoinRuleSettings_labelledCheckbox {
+    font: var(--cpd-font-body-md-regular);
+    margin-top: var(--cpd-space-2x);
+}
+
+.mx_JoinRuleSettings_recommended {
+    color: $accent-1000;
+}
@@ -0,0 +1,22 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_KeyboardShortcut {
+    kbd {
+        padding: 5px;
+        border-radius: 4px;
+        background-color: $background;
+        min-width: 20px;
+        text-align: center;
+        display: inline-block;
+        border: 1px solid $kbd-border-color;
+        box-shadow: 0 2px $kbd-border-color;
+        text-transform: capitalize;
+    }
+}
@@ -0,0 +1,90 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_LayoutSwitcher_LayoutSelector {
+    display: flex;
+    flex-direction: column;
+    /**
+     * The settings form has a default gap of 10px
+     * We want to have a bigger gap between the layout options
+     */
+    gap: var(--cpd-space-4x) !important;
+
+    .mxLayoutSwitcher_LayoutSelector_LayoutRadio {
+        border: 1px solid var(--cpd-color-border-interactive-primary);
+        border-radius: var(--cpd-space-2x);
+
+        .mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline {
+            display: flex;
+            /*
+             * 10px
+             */
+            gap: calc(var(--cpd-space-2x) + var(--cpd-space-0-5x));
+            align-items: center;
+        }
+
+        .mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline,
+        .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview {
+            margin: var(--cpd-space-3x);
+        }
+
+        /**
+         * Override the event tile style to make it fit in the selector
+         * Tweak also hover style and remove action bar
+         */
+        .mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview {
+            pointer-events: none;
+
+            .mx_EventTile {
+                margin: 0;
+
+                /**
+                 * Hide the message options and message action bar in the preview
+                 */
+                .mx_EventTile_msgOption,
+                .mx_MessageActionBar {
+                    display: none;
+                }
+
+                .mx_EventTile_content {
+                    margin-right: 0;
+                }
+
+                &[data-layout="group"] {
+                    margin-top: calc(var(--cpd-space-3x) * -1);
+                }
+
+                /**
+                 * Add margin to center the bubble
+                 */
+                &[data-layout="bubble"] {
+                    /**
+                     * Add the layout margin and the margin to vertically center the bubble
+                     */
+                    margin-top: var(--cpd-space-6x);
+                    margin-right: 34px;
+                    flex-shrink: 1;
+                }
+
+                &[data-layout="irc"] .mx_MessageTimestamp {
+                    display: none; /* hide the container used for spacing consistency */
+                }
+
+                .mx_EventTile_line {
+                    max-width: 100%;
+                }
+            }
+        }
+
+        .mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator {
+            border-top: 0;
+            border-bottom: 1px solid var(--cpd-color-border-interactive-secondary);
+        }
+    }
+}
@@ -0,0 +1,18 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_NotificationPusherSettings {
+    .mx_NotificationPusherSettings_description {
+        color: $primary-content;
+    }
+
+    .mx_NotificationPusherSettings_detail {
+        margin-top: -4px;
+        margin-bottom: 12px;
+    }
+}
@@ -0,0 +1,66 @@
+/*
+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_SettingsTab .mx_NotificationSettings2 {
+    .mx_SettingsSection_subSections {
+        color: $primary-content;
+        gap: 32px;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .mx_SettingsSubsection_description {
+        margin-bottom: 20px;
+
+        .mx_SettingsSubsection_text {
+            .mx_NotificationBadge {
+                vertical-align: baseline;
+                display: inline-flex;
+                margin: 0 2px;
+            }
+        }
+    }
+
+    .mx_SettingsSubsection_content {
+        margin-top: 12px;
+        gap: 12px;
+        justify-items: stretch;
+        justify-content: stretch;
+    }
+
+    .mx_StyledRadioButton_content {
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+
+    .mx_TagComposer {
+        margin-top: 16px;
+
+        &.mx_TagComposer_disabled {
+            opacity: 0.7;
+        }
+
+        .mx_TagComposer_tags {
+            margin-top: 16px;
+            gap: 8px;
+
+            .mx_Tag {
+                border-radius: 18px;
+                padding: 6px 12px;
+                background: $panel-actions;
+                margin: 0;
+
+                .mx_Tag_delete {
+                    background: $tertiary-content;
+                    color: #fff;
+                    align-self: initial;
+                }
+            }
+        }
+    }
+}
@@ -0,0 +1,95 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2015-2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_UserNotifSettings_grid {
+    width: calc(100% + 12px); /* +12px to line up center of 'Noisy' column with toggle switches */
+    display: grid;
+    grid-template-columns: auto repeat(3, 62px);
+    place-items: center center;
+    gap: 8px;
+
+    /* Override StyledRadioButton default styles */
+    .mx_StyledRadioButton {
+        justify-content: center;
+
+        .mx_StyledRadioButton_content {
+            display: none;
+        }
+
+        .mx_StyledRadioButton_spacer {
+            display: none;
+        }
+    }
+
+    // left align section heading
+    .mx_SettingsSubsectionHeading {
+        justify-self: start;
+    }
+}
+
+.mx_UserNotifSettings_gridRowContainer {
+    display: contents;
+}
+
+.mx_UserNotifSettings_gridRow {
+    display: contents;
+}
+
+.mx_UserNotifSettings_gridRowLabel {
+    justify-self: start;
+    /* <legend> does not accept */
+    /* display: inline | inline-block */
+    /* force it inline using float */
+    float: left;
+}
+
+.mx_UserNotifSettings_gridColumnLabel {
+    color: $secondary-content;
+    font: var(--cpd-font-body-sm-semibold);
+}
+.mx_UserNotifSettings_gridRowError {
+    /* occupy full row */
+    grid-column: 1/-1;
+    justify-self: start;
+    padding-right: 30%;
+    /* collapse half of the grid-gap */
+    margin-top: -$spacing-4;
+}
+
+.mx_UserNotifSettings_floatingSection {
+    margin-top: 40px;
+
+    & > div:first-child {
+        /* section header */
+        font-size: $font-18px;
+        font-weight: var(--cpd-font-weight-semibold);
+    }
+
+    > table {
+        border-collapse: collapse;
+        border-spacing: 0;
+        margin-top: 8px;
+
+        tr > td:first-child {
+            /* Just for a bit of spacing */
+            padding-right: 8px;
+        }
+    }
+}
+
+.mx_UserNotifSettings_clearNotifsButton {
+    margin-top: 8px;
+}
+
+.mx_TagComposer {
+    margin-top: 35px; /* lots of distance from the last line of the table */
+}
+
+.mx_AccessibleButton.mx_NotificationSound_browse {
+    margin-right: 10px;
+}
@@ -0,0 +1,29 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_GeneralUserSettingsTab_section--discovery_existing_verification {
+    display: inline-flex;
+    align-items: center;
+
+    .mx_Field {
+        margin: 0 0 0 1em;
+    }
+}
+
+.mx_PhoneNumbers_input {
+    display: flex;
+    align-items: center;
+}
+
+.mx_PhoneNumbers_input > .mx_Field {
+    flex-grow: 1;
+}
+
+.mx_PhoneNumbers_country {
+    width: 80px;
+}
@@ -0,0 +1,11 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ * Copyright 2024 The Matrix.org Foundation C.I.C.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.mx_PowerLevelSelector_Button {
+    align-self: flex-start;
+}
@@ -0,0 +1,48 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2019, 2020 , 2024 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_RoomProfileSettings {
+    border-bottom: 1px solid $quinary-content;
+
+    .mx_RoomProfileSettings_profile {
+        display: flex;
+
+        .mx_RoomProfileSettings_profile_controls {
+            flex-grow: 1;
+            margin-inline-end: 54px;
+
+            .mx_Field {
+                margin-top: $spacing-8;
+            }
+
+            .mx_RoomProfileSettings_profile_controls_topic {
+                margin-top: $spacing-8;
+
+                & > textarea {
+                    font-family: inherit;
+                    resize: vertical;
+                }
+
+                &.mx_RoomProfileSettings_profile_controls_topic--room textarea {
+                    min-height: 4em;
+                }
+            }
+
+            .mx_RoomProfileSettings_profile_controls_userId {
+                margin-inline-end: $spacing-20;
+            }
+        }
+    }
+
+    .mx_RoomProfileSettings_buttons {
+        display: flex;
+        gap: var(--cpd-space-4x);
+        margin-top: 10px; /* 18px is already accounted for by the <p> above the buttons */
+        margin-bottom: $spacing-28;
+    }
+}
@@ -0,0 +1,19 @@
+/*
+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_SetIntegrationManager {
+    .mx_SetIntegrationManager_heading_manager {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        column-gap: $spacing-4;
+    }
+    form {
+        margin-top: var(--cpd-space-3x);
+    }
+}
@@ -0,0 +1,41 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_SettingsFieldset {
+    box-sizing: content-box;
+}
+
+.mx_SettingsFieldset_legend {
+    font: var(--cpd-font-heading-md-semibold);
+    font-weight: var(--cpd-font-weight-semibold);
+    display: block;
+    color: $primary-content;
+    margin-bottom: 10px;
+    margin-top: 12px;
+}
+
+.mx_SettingsFieldset_description {
+    display: block;
+    margin-top: 0;
+    margin-bottom: 10px;
+
+    p {
+        margin-top: 10px;
+        margin-bottom: 0;
+
+        &:first-child {
+            margin: 0;
+        }
+    }
+}
+
+.mx_SettingsFieldset_content {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-8;
+}
@@ -0,0 +1,28 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.mx_SettingsHeader {
+    display: flex;
+    align-items: center;
+    gap: var(--cpd-space-2x);
+    /* Override margin from common.pcss */
+    margin: 0;
+
+    > span {
+        font: var(--cpd-font-body-sm-medium);
+        color: var(--cpd-color-text-action-accent);
+    }
+
+    &.mx_SettingsHeader_recommended::after {
+        display: inline-block;
+        content: "";
+        width: 8px;
+        height: 8px;
+        background-color: var(--cpd-color-icon-critical-primary);
+        clip-path: circle(4px);
+    }
+}
@@ -0,0 +1,27 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.mx_SettingsSubheader {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cpd-space-2x);
+
+    > span {
+        display: flex;
+        align-items: center;
+        gap: var(--cpd-space-2x);
+        font: var(--cpd-font-body-sm-medium);
+    }
+
+    .mx_SettingsSubheader_success {
+        color: var(--cpd-color-text-success-primary);
+    }
+
+    .mx_SettingsSubheader_error {
+        color: var(--cpd-color-text-critical-primary);
+    }
+}
@@ -0,0 +1,21 @@
+/*
+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_ExistingSpellCheckLanguage {
+    display: flex;
+    align-items: center;
+}
+
+.mx_ExistingSpellCheckLanguage_language {
+    flex: 1;
+    margin-right: 10px;
+}
+
+.mx_GeneralUserSettingsTab_spellCheckLanguageInput {
+    margin-bottom: $spacing-8;
+}
@@ -0,0 +1,87 @@
+/*
+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_ThemeChoicePanel_ThemeSelectors {
+    display: flex;
+    flex-wrap: wrap;
+    /* Override form default style */
+    flex-direction: row !important;
+    gap: var(--cpd-space-4x) !important;
+
+    .mx_ThemeChoicePanel_themeSelector {
+        border: 1px solid var(--cpd-color-border-interactive-secondary);
+        border-radius: var(--cpd-space-1-5x);
+        padding: var(--cpd-space-3x) var(--cpd-space-5x) var(--cpd-space-3x) var(--cpd-space-3x);
+        gap: var(--cpd-space-2x);
+        background-color: var(--cpd-color-bg-canvas-default);
+
+        &.mx_ThemeChoicePanel_themeSelector_enabled {
+            border-color: var(--cpd-color-border-interactive-primary);
+        }
+
+        &.mx_ThemeChoicePanel_themeSelector_disabled {
+            border-color: var(--cpd-color-border-disabled);
+
+            .mx_ThemeChoicePanel_themeSelector_Label {
+                color: var(--cpd-color-text-disabled);
+                cursor: not-allowed;
+            }
+        }
+
+        .mx_ThemeChoicePanel_themeSelector_Label {
+            font: var(--cpd-font-body-md-semibold);
+        }
+
+        &:not(.mx_ThemeChoicePanel_themeSelector_disabled) {
+            .mx_ThemeChoicePanel_themeSelector_Label {
+                color: var(--cpd-color-text-primary);
+            }
+        }
+    }
+}
+
+.mx_ThemeChoicePanel_CustomTheme {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--cpd-space-4x);
+
+    .mx_ThemeChoicePanel_CustomTheme_EditInPlace input:focus {
+        /*
+         * When the input is focused, the border is growing
+         * We need to move it a bit to avoid the left border to be under the left panel
+         */
+        margin-left: var(--cpd-space-0-5x);
+    }
+
+    .mx_ThemeChoicePanel_CustomThemeList {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-4x);
+        /*
+         * Override the default padding/margin of the list
+         */
+        padding: 0;
+        margin: 0;
+
+        .mx_ThemeChoicePanel_CustomThemeList_theme {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background-color: var(--cpd-color-gray-200);
+            padding: var(--cpd-space-2x) var(--cpd-space-2x) var(--cpd-space-2x) var(--cpd-space-4x);
+
+            .mx_ThemeChoicePanel_CustomThemeList_name {
+                font: var(--cpd-font-body-sm-semibold);
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+    }
+}
@@ -0,0 +1,11 @@
+/*
+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_UpdateCheckButton_summary {
+    margin-left: 16px;
+}
@@ -0,0 +1,12 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_UserPersonalInfoSettings {
+    h2 {
+        margin: var(--cpd-space-4x) 0;
+    }
+}
@@ -0,0 +1,63 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2019, 2020 , 2024 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_UserProfileSettings {
+    border-bottom: 1px solid $quinary-content;
+
+    h2 {
+        margin: var(--cpd-space-4x) 0;
+    }
+
+    .mx_UserProfileSettings_profile {
+        display: flex;
+        margin-top: var(--cpd-space-6x);
+        gap: 16px;
+
+        .mx_UserProfileSettings_profile_displayName {
+            flex-grow: 1;
+            width: 100%;
+            gap: 0;
+        }
+    }
+
+    .mx_UserProfileSettings_profile_controls {
+        flex-grow: 1;
+    }
+
+    .mx_UserProfileSettings_profile_controls_userId {
+        width: 100%;
+        margin-top: var(--cpd-space-4x);
+        .mx_CopyableText {
+            margin-top: var(--cpd-space-1x);
+            width: 100%;
+            box-sizing: border-box;
+        }
+    }
+
+    .mx_UserProfileSettings_profile_controls_userId_label {
+        font-size: 15px;
+        font-weight: 500;
+    }
+
+    .mx_UserProfileSettings_profile_buttons {
+        margin-top: var(--cpd-space-8x);
+        margin-bottom: var(--cpd-space-8x);
+    }
+
+    .mx_UserProfileSettings_accountmanageIcon {
+        margin-right: var(--cpd-space-2x);
+    }
+}
+
+@media (max-width: 768px) {
+    .mx_UserProfileSettings_profile {
+        flex-direction: column;
+        align-items: center;
+        gap: 30px;
+    }
+}
@@ -0,0 +1,52 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.mx_EncryptionDetails,
+.mx_OtherSettings {
+    display: flex;
+    flex-direction: column;
+    /* !important override compound form */
+    gap: var(--cpd-space-6x) !important;
+    width: 100%;
+    align-items: start;
+
+    .mx_EncryptionDetails_session_title,
+    .mx_OtherSettings_title {
+        font: var(--cpd-font-body-lg-semibold);
+        padding-bottom: var(--cpd-space-2x);
+        border-bottom: 1px solid var(--cpd-color-gray-400);
+        width: 100%;
+        margin: 0;
+    }
+}
+
+.mx_EncryptionDetails {
+    .mx_EncryptionDetails_session {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-4x);
+        width: 100%;
+
+        > div {
+            display: flex;
+
+            > span {
+                width: 50%;
+                word-wrap: break-word;
+            }
+        }
+
+        > div:nth-child(odd) {
+            background-color: var(--cpd-color-gray-200);
+        }
+    }
+
+    .mx_EncryptionDetails_buttons {
+        display: flex;
+        gap: var(--cpd-space-4x);
+    }
+}
@@ -0,0 +1,95 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.mx_ChangeRecoveryKey {
+    .mx_InformationPanel_description {
+        text-align: center;
+    }
+
+    .mx_ChangeRecoveryKey_Form {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-8x);
+
+        .mx_ChangeRecoveryKey_footer {
+            display: flex;
+            flex-direction: column;
+            gap: var(--cpd-space-4x);
+            justify-content: center;
+        }
+    }
+
+    .mx_KeyPanel {
+        display: grid;
+        grid-template:
+            "header button" auto
+            "content button" auto / 1fr;
+
+        column-gap: var(--cpd-space-3x);
+        row-gap: var(--cpd-space-1x);
+        align-items: center;
+
+        > span {
+            grid-area: header;
+        }
+
+        > div {
+            grid-area: content;
+            display: flex;
+            flex-direction: column;
+            gap: var(--cpd-space-2x);
+            color: var(--cpd-color-text-secondary);
+
+            .mx_KeyPanel_key {
+                font-family: "Fira Code", monospace;
+                /*
+                 * From figma https://www.figma.com/design/qTWRfItpO3RdCjnTKPu4mL/Settings?node-id=375-77471&t=t7lozYrSI1AVZZ3U-4
+                 */
+                height: 70px;
+                box-sizing: border-box;
+                border-radius: var(--cpd-space-2x);
+                padding: var(--cpd-space-3x) var(--cpd-space-4x);
+                background-color: var(--cpd-color-bg-subtle-secondary);
+            }
+        }
+
+        > button {
+            margin: 0 var(--cpd-space-1x);
+            grid-area: button;
+            color: var(--cpd-color-icon-secondary-alpha);
+        }
+    }
+
+    .mx_KeyForm {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-8x);
+
+        .mx_KeyForm_password {
+            > input[name="recoveryKey"] {
+                /*
+                 * From figma https://www.figma.com/design/qTWRfItpO3RdCjnTKPu4mL/Settings?node-id=375-77506&t=d82NdRBDoKsUe1C9-4
+                 */
+                height: 70px;
+                padding: var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-4x);
+                border: var(--cpd-border-width-1) solid;
+                border-radius: 8px;
+                margin: 0px;
+            }
+
+            > button {
+                /*
+                 * See figma https://www.figma.com/design/qTWRfItpO3RdCjnTKPu4mL/Settings?node-id=375-77506&t=d82NdRBDoKsUe1C9-4
+                 * Avoid stretching the hide/show symbol to the height of the input, and centre it vertically.
+                 */
+                height: 24.5px;
+                padding: var(--cpd-space-1x);
+                align-self: center;
+            }
+        }
+    }
+}
@@ -0,0 +1,47 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.mx_EncryptionCard {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cpd-space-8x);
+    padding: var(--cpd-space-10x);
+    border-radius: var(--cpd-space-4x);
+    /* From figma */
+    box-shadow: 0 1.2px 2.4px 0 rgb(27, 29, 34, 0.15);
+    border: 1px solid var(--cpd-color-gray-400);
+
+    .mx_EncryptionCard_header {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-4x);
+        align-items: center;
+
+        > h2 {
+            margin: 0;
+        }
+
+        > span {
+            color: var(--cpd-color-text-secondary);
+            text-align: center;
+        }
+    }
+
+    /* extra class for specifying that we don't need a border */
+    &.mx_EncryptionCard_noBorder {
+        border: 0px none;
+        box-shadow: none;
+        padding: 0px;
+    }
+}
+
+.mx_EncryptionCard_buttons {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cpd-space-4x);
+    justify-content: center;
+}
@@ -0,0 +1,13 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.mx_EncryptionCard_emphasisedContent {
+    span {
+        font: var(--cpd-font-body-md-medium);
+        text-align: center;
+    }
+}
@@ -0,0 +1,11 @@
+/*
+ * 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_RecoveryPanelOutOfSync {
+    display: flex;
+    gap: var(--cpd-space-2x);
+}
@@ -0,0 +1,11 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+// Red text for the "Do not close this window" warning
+.mx_ResetIdentityPanel_warning {
+    color: var(--cpd-color-text-critical-primary);
+}
@@ -0,0 +1,25 @@
+/*
+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_SettingsBanner {
+    background: $system;
+    border-radius: 8px;
+    padding: 12px 16px;
+    gap: 12px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .mx_SettingsBanner_content {
+        margin: 0;
+    }
+
+    .mx_AccessibleButton {
+        white-space: nowrap;
+    }
+}
@@ -0,0 +1,14 @@
+/*
+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_SettingsIndent {
+    padding-left: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
@@ -0,0 +1,41 @@
+/*
+Copyright 2023, 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_SettingsSection {
+    --SettingsTab_section-margin-bottom-preferences-labs: 30px;
+    --SettingsTab_heading_nth_child-margin-top: 30px;
+    --SettingsTab_tooltip-max-width: 20px; /* So it fits in the space provided by the page */
+
+    color: $primary-content;
+
+    /* Compound links carry data-kind and provide their own colour. */
+    a:not([data-kind]) {
+        color: $links;
+    }
+
+    &.mx_SettingsSection_newUi {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-6x);
+        align-items: start;
+    }
+
+    .mx_SettingsSection_header {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-3x);
+        color: var(--cpd-color-text-secondary);
+    }
+}
+
+.mx_SettingsSection_subSections {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: $spacing-32;
+
+    margin: $spacing-16 0;
+}
@@ -0,0 +1,88 @@
+/*
+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_SettingsTab {
+    --SettingsTab_tooltip-max-width: 120px; /* So it fits in the space provided by the page */
+
+    color: $primary-content;
+
+    /* Compound links carry data-kind and provide their own colour. */
+    a:not([data-kind]) {
+        color: $links;
+    }
+
+    form {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-3x);
+        flex-grow: 1;
+    }
+
+    // never want full width buttons
+    // event when other content is 100% width
+    .mx_AccessibleButton {
+        align-self: flex-start;
+        justify-self: flex-start;
+    }
+
+    .mx_Field {
+        margin: 0;
+        flex: 1;
+    }
+}
+
+.mx_SettingsTab_warningText {
+    color: $alert;
+}
+
+.mx_SettingsTab_subsectionText {
+    color: $secondary-content;
+    font: var(--cpd-font-body-md-regular);
+    display: block;
+    margin-top: 10px;
+    margin-inline-end: 80px; /* Align with the rest of the view */
+    margin-bottom: 10px;
+    margin-inline-start: 0;
+}
+
+.mx_SettingsTab_section {
+    $end-gutter: 80px;
+
+    margin-bottom: $spacing-24;
+
+    .mx_SettingsFlag {
+        margin-inline-end: $end-gutter;
+        margin-bottom: 10px;
+
+        .mx_SettingsFlag_label {
+            vertical-align: middle;
+            display: inline-block;
+            max-width: calc(100% - $font-48px); /* Force word wrap instead of colliding with the switch */
+            box-sizing: border-box;
+        }
+
+        .mx_ToggleSwitch {
+            float: inline-end;
+        }
+    }
+
+    > p {
+        margin-inline-end: $end-gutter;
+    }
+
+    &.mx_SettingsTab_subsectionText .mx_SettingsFlag {
+        margin-inline-end: 0 !important;
+    }
+}
+
+.mx_SettingsTab_sections {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: $spacing-32;
+
+    padding-bottom: $spacing-16;
+}
@@ -0,0 +1,38 @@
+/*
+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_NotificationSettingsTab_notificationsSection {
+    width: 360px;
+
+    .mx_StyledRadioButton {
+        flex-direction: row-reverse;
+        color: $primary-content;
+        font-size: $font-15px;
+        line-height: $font-18px;
+        font-weight: var(--cpd-font-weight-semibold);
+        margin-top: 16px;
+        position: relative;
+        align-items: center;
+
+        input + div {
+            margin-top: 8px;
+        }
+
+        .mx_NotificationSettingsTab_microCopy {
+            color: $secondary-content;
+            font-weight: normal;
+            font-size: $font-12px;
+            line-height: $font-15px;
+            margin-right: 32px;
+        }
+    }
+}
+
+input[type="file"].mx_NotificationSound_soundUpload {
+    display: none;
+}
@@ -0,0 +1,53 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 Nordeck IT + Consulting GmbH
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_PeopleRoomSettingsTab_knock {
+    display: flex;
+    margin-top: var(--cpd-space-2x);
+}
+
+.mx_PeopleRoomSettingsTab_content {
+    flex-grow: 1;
+    margin: 0 var(--cpd-space-4x);
+}
+
+.mx_PeopleRoomSettingsTab_avatar {
+    align-self: flex-start;
+    flex-shrink: 0;
+}
+
+.mx_PeopleRoomSettingsTab_name {
+    font-weight: var(--cpd-font-weight-semibold);
+}
+
+.mx_PeopleRoomSettingsTab_timestamp {
+    color: $secondary-content;
+    margin-left: var(--cpd-space-1x);
+}
+
+.mx_PeopleRoomSettingsTab_userId {
+    color: $secondary-content;
+    display: block;
+    font-size: var(--cpd-font-size-body-sm);
+}
+
+.mx_PeopleRoomSettingsTab_seeMoreOrLess {
+    margin: var(--cpd-space-3x) 0 0;
+}
+
+.mx_PeopleRoomSettingsTab_action {
+    flex-shrink: 0;
+
+    + .mx_PeopleRoomSettingsTab_action {
+        margin-left: var(--cpd-space-3x);
+    }
+}
+
+.mx_PeopleRoomSettingsTab_paragraph {
+    margin: 0;
+}
@@ -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_RolesRoomSettingsTab_bannedList {
+    margin-bottom: 0;
+}
+
+.mx_RolesRoomSettingsTab_unbanBtn {
+    margin-right: 10px;
+    margin-bottom: 5px;
+}
@@ -0,0 +1,20 @@
+/*
+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_SecurityRoomSettingsTab_advancedSection {
+    margin-top: $spacing-16;
+}
+
+.mx_SecurityRoomSettingsTab_warning {
+    display: flex;
+    align-items: center;
+    column-gap: $spacing-4;
+
+    svg {
+        color: #ff0064; /* Match legacy icon colour until redesign */
+    }
+}
@@ -0,0 +1,13 @@
+/*
+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.
+*/
+
+.mx_Field.mx_AppearanceUserSettingsTab_checkboxControlledField {
+    width: 256px;
+    /* Line up with Settings field toggle button */
+    margin-inline-start: 0;
+}
@@ -0,0 +1,12 @@
+/*
+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_HelpUserSettingsTab_accessTokenDetails {
+    width: fit-content;
+}
@@ -0,0 +1,32 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_KeyboardShortcut_shortcutList {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    display: grid;
+    gap: $spacing-4;
+}
+
+.mx_KeyboardShortcut_shortcutRow,
+.mx_KeyboardShortcut {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.mx_KeyboardShortcut_shortcutRow {
+    column-gap: $spacing-8;
+}
+
+.mx_KeyboardShortcut {
+    flex-wrap: nowrap;
+    column-gap: $spacing-4;
+}
@@ -0,0 +1,29 @@
+/*
+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_MediaPreviewAccountSetting_Radio {
+    margin: var(--cpd-space-1x) 0;
+}
+
+.mx_MediaPreviewAccountSetting {
+    margin-top: var(--cpd-space-1x);
+}
+
+.mx_MediaPreviewAccountSetting_RadioHelp {
+    /* !important because it's overriding compound help message */
+    margin-top: 0 !important;
+    margin-bottom: var(--cpd-space-1x);
+}
+
+.mx_MediaPreviewAccountSetting_Form {
+    width: 100%;
+}
+
+.mx_MediaPreviewAccountSetting_ToggleSwitch {
+    font: var(--cpd-font-body-md-medium);
+    letter-spacing: var(--cpd-font-letter-spacing-body-md);
+}
@@ -0,0 +1,11 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_MjolnirUserSettingsTab_listItem {
+    margin-bottom: 2px;
+}
@@ -0,0 +1,13 @@
+/*
+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.
+*/
+
+.mx_PreferencesUserSettingsTab_section_hint {
+    font: var(--cpd-font-body-sm-regular);
+    color: var(--cpd-color-text-secondary);
+}
@@ -0,0 +1,42 @@
+/*
+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_SecurityUserSettingsTab_bulkOptions {
+    display: flex;
+    flex-direction: row;
+    column-gap: $spacing-8;
+}
+
+.mx_SecurityUserSettingsTab_ignoredUsers {
+    padding-left: 0;
+    margin: 0;
+    list-style: none;
+}
+
+.mx_SecurityUserSettingsTab_ignoredUser {
+    margin-bottom: $spacing-4;
+}
+
+.mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton {
+    margin-right: $spacing-8;
+}
+
+.mx_SecurityUserSettingsTab_warning {
+    color: $alert;
+
+    svg {
+        width: 24px;
+        height: 24px;
+        margin-right: var(--cpd-space-4x);
+        color: $alert;
+    }
+}
+
+form.mx_SecurityUserSettingsTab_posthogSection {
+    /* Inhibit compound spacing here as it clashes with pre-compound UI */
+    display: contents !important;
+}
@@ -0,0 +1,25 @@
+/*
+Copyright 2024,2025 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_SidebarUserSettingsTab_homeAllRoomsCheckbox {
+    margin-left: 24px;
+
+    & + div {
+        margin-left: 48px;
+    }
+}
+
+.mx_SidebarUserSettingsTab_icon {
+    margin-right: var(--cpd-space-2x);
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.mx_SidebarUserSettingsTab_checkbox label {
+    display: flex;
+}