nikrozman/element-web
1
0
Fork 0
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Absorb the matrix-react-sdk repository (#28192)

Browse Source 
Co-authored-by: github-merge-queue <118344674+github-merge-queue@users.noreply.github.com>
Co-authored-by: github-merge-queue <github-merge-queue@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
Co-authored-by: Kim Brose <kim.brose@nordeck.net>
Co-authored-by: Florian Duros <florianduros@element.io>
Co-authored-by: R Midhun Suresh <hi@midhun.dev>
Co-authored-by: dbkr <986903+dbkr@users.noreply.github.com>
Co-authored-by: ElementRobot <releases@riot.im>
Co-authored-by: dbkr <dbkr@users.noreply.github.com>
Co-authored-by: David Baker <dbkr@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
Co-authored-by: David Langley <davidl@element.io>
Co-authored-by: Michael Weimann <michaelw@matrix.org>
Co-authored-by: Timshel <Timshel@users.noreply.github.com>
Co-authored-by: Sahil Silare <32628578+sahil9001@users.noreply.github.com>
Co-authored-by: Will Hunt <will@half-shot.uk>
Co-authored-by: Hubert Chathi <hubert@uhoreg.ca>
Co-authored-by: Andrew Ferrazzutti <andrewf@element.io>
Co-authored-by: Robin <robin@robin.town>
Co-authored-by: Tulir Asokan <tulir@maunium.net>
This commit is contained in:
Michael Telatynski
2024-10-16 13:31:55 +01:00
committed by GitHub
parent 2b99496025
commit c05c429803
3280 changed files with 586617 additions and 905 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
res/css/views/dialogs/_AddExistingToSpaceDialog.pcss Normal file
View File

@@ -0,0 +1,234 @@
/*
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
Please see LICENSE files in the repository root for full details.
*/
.mx_AddExistingToSpaceDialog_wrapper {
.mx_Dialog {
display: flex;
flex-direction: column;
}
}
.mx_AddExistingToSpace {
.mx_SearchBox {
/* To match the space around the title */
margin: 0 0 15px 0;
flex-grow: 0;
}
.mx_AddExistingToSpace_content {
flex-grow: 1;
}
.mx_AddExistingToSpace_noResults {
display: block;
margin-top: 24px;
}
.mx_AddExistingToSpace_section {
margin-right: 12px;
// provides space for scrollbar so that checkbox and scrollbar do not collide
&:not(:first-child) {
margin-top: 24px;
}
> h3 {
margin: 0;
color: $secondary-content;
font-size: $font-12px;
font-weight: var(--cpd-font-weight-semibold);
line-height: $font-15px;
}
.mx_AccessibleButton_kind_link {
font-size: $font-12px;
line-height: $font-15px;
margin-top: 8px;
}
}
.mx_AddExistingToSpace_footer {
display: flex;
margin-top: 20px;
> span {
flex-grow: 1;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
.mx_ProgressBar {
height: 8px;
width: 100%;
@mixin ProgressBarBorderRadius 8px;
}
.mx_AddExistingToSpaceDialog_progressText {
margin-top: 8px;
font-size: $font-15px;
line-height: $font-24px;
color: $primary-content;
}
> * {
vertical-align: middle;
}
}
.mx_AddExistingToSpace_error {
padding-left: 12px;
> img {
align-self: center;
}
.mx_AddExistingToSpace_errorHeading {
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-18px;
color: $alert;
}
.mx_AddExistingToSpace_errorCaption {
margin-top: 4px;
font-size: $font-12px;
line-height: $font-15px;
color: $primary-content;
}
}
.mx_AccessibleButton {
display: inline-block;
align-self: center;
}
.mx_AccessibleButton_kind_primary {
padding: 8px 36px;
}
.mx_AddExistingToSpace_retryButton {
margin-left: 12px;
padding-left: 24px;
position: relative;
&::before {
content: "";
position: absolute;
background-color: $primary-content;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url("$(res)/img/element-icons/retry.svg");
width: 18px;
height: 18px;
left: 0;
}
}
}
}
.mx_AddExistingToSpaceDialog {
width: 480px;
color: $primary-content;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
min-height: 0;
height: 80vh;
.mx_AddExistingToSpace {
display: contents;
}
}
.mx_SubspaceSelector {
display: flex;
.mx_BaseAvatar {
margin: auto 16px auto 5px;
}
> div {
> h1 {
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-18px;
line-height: $font-22px;
margin: 0;
}
}
.mx_Dropdown_input {
border: none;
> .mx_Dropdown_option {
padding-left: 0;
flex: unset;
height: unset;
color: $secondary-content;
font-size: $font-15px;
line-height: $font-24px;
.mx_BaseAvatar {
display: none;
}
}
.mx_Dropdown_menu {
.mx_SubspaceSelector_dropdownOptionActive {
color: $accent;
padding-right: 32px;
position: relative;
&::before {
content: "";
width: 20px;
height: 20px;
top: 8px;
right: 0;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $accent;
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
}
}
}
}
.mx_SubspaceSelector_onlySpace {
color: $secondary-content;
font-size: $font-15px;
line-height: $font-24px;
}
}
.mx_AddExistingToSpace_entry {
display: flex;
margin-top: 12px;
.mx_DecoratedRoomAvatar, /* we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling */ {
margin-right: 12px;
}
.mx_AddExistingToSpace_entry_name {
font-size: $font-15px;
line-height: 30px;
flex-grow: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: 12px;
}
.mx_Checkbox {
align-items: center;
}
}

44
res/css/views/dialogs/_AnalyticsLearnMoreDialog.pcss Normal file
View File

@@ -0,0 +1,44 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_AnalyticsLearnMoreDialog {
max-width: 500px;
.mx_AnalyticsLearnMore_image_holder {
background-image: url("$(res)/img/element-shiny.svg");
background-repeat: no-repeat;
background-position: center top;
height: 112px;
padding: 20px 0px;
}
.mx_Dialog_content {
margin-bottom: 0px;
}
.mx_AnalyticsLearnMore_copy {
border-bottom: 1px solid $menu-border-color;
padding-bottom: 20px;
margin-bottom: 20px;
}
a {
color: $accent;
text-decoration: none;
}
.mx_AnalyticsLearnMore_bullets {
padding-left: 0px;
}
.mx_AnalyticsLearnMore_bullets li {
background: url("$(res)/img/tick-circle.svg") no-repeat;
list-style-type: none;
padding: 2px 0px 20px 32px;
vertical-align: middle;
}
}

77
res/css/views/dialogs/_AppDownloadDialog.pcss Normal file
View File

@@ -0,0 +1,77 @@
.mx_AppDownloadDialog {
display: flex;
flex-direction: column;
gap: $spacing-32;
color: $primary-content;
&.mx_Dialog_fixedWidth {
width: 640px;
}
.mx_AppDownloadDialog_desktop {
display: flex;
flex-direction: column;
align-items: center;
gap: $spacing-16;
}
.mx_AppDownloadDialog_mobile {
display: flex;
flex-direction: row;
gap: $spacing-24;
.mx_AppDownloadDialog_app {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-basis: 50%;
align-items: center;
gap: $spacing-16;
.mx_QRCode {
/* intentionally hardcoded color to ensure the QR code is readable in any situation */
background: #ffffff;
padding: $spacing-24;
border: 1px solid $quinary-content;
border-radius: 4px;
align-self: stretch;
display: flex;
align-items: center;
flex-direction: column;
.mx_VerificationQRCode {
height: 144px;
width: 144px;
image-rendering: pixelated;
border-radius: 0;
}
}
.mx_AppDownloadDialog_info {
font-size: $font-12px;
color: $tertiary-content;
}
.mx_AppDownloadDialog_links {
display: flex;
flex-direction: row;
gap: $spacing-8;
.mx_AccessibleButton {
svg {
height: 40px;
}
}
}
}
}
.mx_AppDownloadDialog_legal {
p {
margin: 0;
font-size: $font-12px;
color: $tertiary-content;
}
}
}

15
res/css/views/dialogs/_BugReportDialog.pcss Normal file
View File

@@ -0,0 +1,15 @@
/*
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
Please see LICENSE files in the repository root for full details.
*/
.mx_BugReportDialog {
.mx_BugReportDialog_download {
.mx_AccessibleButton_kind_link {
margin-right: 18px; /* Space between "Downloading logs..." */
}
}
}

19
res/css/views/dialogs/_BulkRedactDialog.pcss Normal file
View File

@@ -0,0 +1,19 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Robin Townsend <robin@robin.town>
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_BulkRedactDialog {
.mx_Checkbox,
.mx_BulkRedactDialog_checkboxMicrocopy {
line-height: $font-20px;
}
.mx_BulkRedactDialog_checkboxMicrocopy {
margin-left: 26px;
color: $secondary-content;
}
}

16
res/css/views/dialogs/_ChangelogDialog.pcss Normal file
View File

@@ -0,0 +1,16 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2016 Aviral Dasgupta
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_ChangelogDialog_content {
max-height: 300px;
overflow: auto;
}
.mx_ChangelogDialog_li {
padding: 0.2em;
}

83
res/css/views/dialogs/_CompoundDialog.pcss Normal file
View File

@@ -0,0 +1,83 @@
/*
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
Please see LICENSE files in the repository root for full details.
*/
/* -------------------------------------------------------------------------------- */
/* DEV NOTE: This stylesheet covers dialogs listed by the compound, including */
/* over multiple React components. The actual inner contents of the dialog should */
/* be in their respective stylesheets. */
/* -------------------------------------------------------------------------------- */
/* Override legacy/default styles for dialogs */
.mx_Dialog_wrapper.mx_CompoundDialog .mx_Dialog {
padding: 0; /* we'll manage it ourselves */
color: $primary-content;
}
.mx_CompoundDialog {
.mx_Dialog {
display: flex;
flex-direction: column;
}
.mx_CompoundDialog_header {
padding: 32px 32px 16px 32px;
h1 {
display: inline-block;
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-24px;
margin: 0; /* managed by header class */
}
}
.mx_CompoundDialog_cancelButton {
@mixin customisedCancelButton;
/* Align with corner radius of dialog */
position: absolute;
top: var(--cpd-space-4x);
right: var(--cpd-space-4x);
}
.mx_CompoundDialog_form {
display: flex;
flex-direction: column;
min-height: 0;
flex: 1;
}
.mx_CompoundDialog_content {
overflow: auto;
padding: 8px 32px;
flex: 1;
}
.mx_CompoundDialog_footer {
padding: 20px 32px;
text-align: right;
.mx_AccessibleButton {
margin-left: 24px;
}
}
}
.mx_ScrollableBaseDialog {
display: flex;
flex-direction: column;
width: 544px; /* fixed */
height: 516px; /* fixed */
max-width: 100%;
min-height: 0;
max-height: 80%;
.mx_CompoundDialog_footer {
box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.05); /* hardcoded colour for both themes */
z-index: 1; /* needed to make footer & shadow appear above dialog content */
}
}

58
res/css/views/dialogs/_ConfirmSpaceUserActionDialog.pcss Normal file
View File

@@ -0,0 +1,58 @@
/*
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
Please see LICENSE files in the repository root for full details.
*/
.mx_ConfirmSpaceUserActionDialog_wrapper {
.mx_Dialog {
display: flex;
flex-direction: column;
padding: 24px 32px;
}
}
.mx_ConfirmSpaceUserActionDialog {
width: 440px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
height: 520px;
.mx_Dialog_content {
margin: 12px 0;
flex-grow: 1;
overflow-y: auto;
}
.mx_ConfirmUserActionDialog_reasonField {
margin-bottom: 12px;
}
.mx_ConfirmSpaceUserActionDialog_warning {
position: relative;
border-radius: 8px;
padding: 12px 8px 12px 42px;
background-color: $header-panel-bg-color;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
&::before {
content: "";
position: absolute;
left: 10px;
top: calc(50% - 8px); /* vertical centering */
height: 16px;
width: 16px;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
mask-position: center;
}
}
}

32
res/css/views/dialogs/_ConfirmUserActionDialog.pcss Normal file
View File

@@ -0,0 +1,32 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2017 Vector Creations Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_ConfirmUserActionDialog .mx_Dialog_content .mx_ConfirmUserActionDialog_user {
min-height: 48px;
margin-bottom: 24px;
}
.mx_ConfirmUserActionDialog_avatar {
float: left;
margin-right: 20px;
}
.mx_ConfirmUserActionDialog_name {
padding-top: 2px;
font-size: $font-18px;
}
.mx_ConfirmUserActionDialog_userId {
font-size: $font-13px;
}
.mx_ConfirmUserActionDialog_reasonField {
font: var(--cpd-font-body-md-regular);
color: $primary-content;
background-color: $background;
}

114
res/css/views/dialogs/_CreateRoomDialog.pcss Normal file
View File

@@ -0,0 +1,114 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_CreateRoomDialog_details {
margin-top: 15px;
.mx_CreateRoomDialog_details_summary {
list-style: none;
font-weight: var(--cpd-font-weight-semibold);
cursor: pointer;
color: var(--cpd-color-text-primary);
text-decoration: underline;
width: fit-content;
/* list-style doesn't do it for webkit */
&::-webkit-details-marker {
display: none;
}
&:not(:focus-visible) {
outline: none;
}
}
> div {
display: flex;
align-items: flex-start;
margin: 5px 0;
input[type="checkbox"] {
margin-right: 10px;
}
}
}
.mx_CreateRoomDialog_label {
text-align: left;
padding-bottom: 12px;
}
.mx_CreateRoomDialog_input_container {
padding-right: 20px;
}
.mx_CreateRoomDialog_input {
font-size: $font-15px;
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;
color: $primary-content;
background-color: $background;
width: 100%;
}
/* needed to make the alias field only grow as wide as needed */
/* as opposed to full width */
.mx_CreateRoomDialog_aliasContainer {
display: flex;
/* put margin on container so it can collapse with siblings */
margin: 24px 0 10px;
.mx_RoomAliasField {
margin: 0;
}
}
.mx_CreateRoomDialog {
&.mx_Dialog_fixedWidth {
width: 450px;
}
.mx_Dialog_content {
margin-bottom: 40px;
}
p,
.mx_Field_input label {
color: $muted-fg-color;
}
.mx_SettingsFlag {
display: flex;
}
.mx_SettingsFlag_label {
flex: 1 1 0;
min-width: 0;
font-weight: var(--cpd-font-weight-semibold);
}
.mx_ToggleSwitch {
flex: 0 0 auto;
margin-left: 30px;
}
.mx_Dialog_content > .mx_SettingsFlag {
margin-top: 24px;
}
p {
margin: 0 85px 0 0;
font-size: $font-12px;
}
}
.mx_CreateRoomDialog_labelledCheckbox {
color: $muted-fg-color;
margin-top: var(--cpd-space-6x);
}

69
res/css/views/dialogs/_CreateSubspaceDialog.pcss Normal file
View File

@@ -0,0 +1,69 @@
/*
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
Please see LICENSE files in the repository root for full details.
*/
.mx_CreateSubspaceDialog_wrapper {
.mx_Dialog {
display: flex;
flex-direction: column;
}
}
.mx_CreateSubspaceDialog {
width: 480px;
color: $primary-content;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
min-height: 0;
.mx_CreateSubspaceDialog_content {
flex-grow: 1;
.mx_CreateSubspaceDialog_betaNotice {
padding: 12px 16px;
border-radius: 8px;
background-color: $header-panel-bg-color;
.mx_BetaCard_betaPill {
margin-right: 8px;
vertical-align: middle;
}
}
.mx_JoinRuleDropdown + p {
color: $muted-fg-color;
font-size: $font-12px;
}
}
.mx_CreateSubspaceDialog_footer {
display: flex;
margin-top: 20px;
.mx_CreateSubspaceDialog_footer_prompt {
flex-grow: 1;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
> * {
vertical-align: middle;
}
}
.mx_AccessibleButton {
display: inline-block;
align-self: center;
}
.mx_AccessibleButton_kind_primary {
margin-left: 16px;
padding: 8px 36px;
}
}
}

14
res/css/views/dialogs/_DeactivateAccountDialog.pcss Normal file
View File

@@ -0,0 +1,14 @@
/*
Copyright 2018-2024 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_DeactivateAccountDialog .mx_Dialog_content {
margin-bottom: 30px;
}
.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section .mx_Field {
width: 300px;
}

179
res/css/views/dialogs/_DevtoolsDialog.pcss Normal file
View File

@@ -0,0 +1,179 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_DevtoolsDialog_wrapper {
.mx_Dialog {
display: flex;
flex-direction: column;
}
.mx_Dialog_fixedWidth {
display: flex;
flex-direction: column;
min-height: 0;
max-height: 100%;
.mx_Dialog_buttons button {
margin-bottom: 0;
}
}
}
.mx_DevTools_content {
overflow-y: auto;
}
.mx_DevTools_RoomStateExplorer_query {
margin-bottom: 10px;
}
.mx_DevTools_button {
font-family: monospace !important;
margin-bottom: 8px !important;
}
.mx_DevTools_RoomStateExplorer_button_hasSpaces {
text-decoration: underline;
}
.mx_DevTools_button.mx_DevTools_RoomStateExplorer_button_emptyString {
font-style: italic;
}
.mx_DevTools_label_left {
float: left;
}
.mx_DevTools_label_right {
float: right;
}
.mx_DevTools_label_bottom {
clear: both;
border-bottom: 1px solid #e5e5e5;
}
.mx_DevTools_inputRow {
display: table-row;
}
.mx_DevTools_inputLabelCell {
display: table-cell;
font-weight: bold;
padding-right: 24px;
}
.mx_DevTools_textarea {
font-size: $font-12px;
max-width: 684px;
min-height: 250px;
padding: 10px;
}
.mx_DevTools_eventTypeStateKeyGroup {
display: flex;
flex-wrap: wrap;
}
.mx_DevTools_content .mx_Field_input:first-of-type {
margin-right: 42px;
}
.mx_DevTools_VerificationRequest {
border: 1px solid #cccccc;
border-radius: 3px;
padding: 1px 5px;
margin-bottom: 6px;
font-family: $monospace-font-family;
dl {
display: grid;
grid-template-columns: max-content auto;
margin: 0;
}
dd {
grid-column-start: 2;
}
dd:empty {
color: #666666;
&::after {
content: "(empty)";
}
}
dt {
font-weight: bold;
grid-column-start: 1;
}
dt::after {
content: ":";
}
}
.mx_DevTools_SettingsExplorer {
table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
th {
/* Colour choice: first one autocomplete gave me. */
border-bottom: 1px solid $accent;
text-align: left;
}
td,
th {
width: 360px; /* "feels right" number */
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
td + td,
th + th {
width: auto;
}
tr:hover {
/* Colour choice: first one autocomplete gave me. */
background-color: $accent;
}
}
.mx_DevTools_SettingsExplorer_mutable {
background-color: $accent;
}
.mx_DevTools_SettingsExplorer_immutable {
background-color: $alert;
}
.mx_DevTools_SettingsExplorer_edit {
float: right;
margin-right: 16px;
}
.mx_DevTools_SettingsExplorer_warning {
border: 2px solid $alert;
border-radius: 4px;
padding: 4px;
margin-bottom: 8px;
}
}
.mx_DevTools_SettingsExplorer_setting {
/* override default link button color */
/* as it is the same as the background highlight */
/* used on focus */
color: $links !important;
}

88
res/css/views/dialogs/_ExportDialog.pcss Normal file
View File

@@ -0,0 +1,88 @@
/*
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
Please see LICENSE files in the repository root for full details.
*/
.mx_ExportDialog {
.mx_ExportDialog_subheading {
font-size: $font-16px;
display: block;
font-family: $font-family;
font-weight: var(--cpd-font-weight-semibold);
color: $primary-content;
margin-top: 18px;
margin-bottom: 12px;
}
&.mx_ExportDialog_Exporting {
.mx_ExportDialog_options {
pointer-events: none;
}
.mx_Field_select::before {
display: none;
}
.mx_StyledRadioButton input[type="radio"]:checked + div > div {
background: $info-plinth-fg-color;
}
.mx_StyledRadioButton input[type="radio"]:checked + div {
border-color: unset;
}
.mx_Field_valid.mx_Field label,
.mx_Field_valid.mx_Field:focus-within label {
color: unset;
}
.mx_Field_valid.mx_Field,
.mx_Field_valid.mx_Field:focus-within {
border-color: $input-border-color;
}
.mx_Checkbox input[type="checkbox"]:checked + label > .mx_Checkbox_background {
background: $info-plinth-fg-color;
border-color: $info-plinth-fg-color;
}
}
.mx_ExportDialog_progress {
.mx_Dialog_buttons {
margin-top: unset;
margin-left: 18px;
}
.mx_Spinner {
width: unset;
height: unset;
flex: unset;
margin-right: 10px;
}
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.mx_StyledRadioButton > .mx_StyledRadioButton_content {
margin-top: 5px;
margin-bottom: 5px;
}
.mx_Field {
width: 256px;
}
.mx_Field_postfix {
padding: 9px 10px;
}
}
.mx_ExportDialog_attachments-checkbox {
margin-top: $spacing-16;
}

133
res/css/views/dialogs/_FeedbackDialog.pcss Normal file
View File

@@ -0,0 +1,133 @@
/*
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
Please see LICENSE files in the repository root for full details.
*/
.mx_FeedbackDialog {
hr {
margin: 24px 0;
border-color: $input-border-color;
}
.mx_Dialog_content {
margin-bottom: 24px;
> h2 {
margin-bottom: 32px;
}
}
.mx_FeedbackDialog_section {
position: relative;
padding: 12px 52px 12px 68px;
border-radius: 8px;
border: 1px solid $quinary-content;
& + .mx_FeedbackDialog_section {
margin-top: 16px;
}
> h3 {
margin-top: 0;
margin-bottom: 8px;
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-18px;
line-height: $font-22px;
}
> p {
color: $secondary-content;
font-size: $font-15px;
line-height: $font-24px;
margin: 8px 0 0;
}
.mx_FeedbackDialog_section_microcopy {
font-size: $font-12px;
line-height: $font-15px;
}
a,
.mx_AccessibleButton_kind_link {
text-decoration: underline;
}
&::before,
&::after {
content: "";
position: absolute;
width: 40px;
height: 40px;
left: 16px;
top: 12px;
}
&::before {
background-color: $icon-button-color;
border-radius: 8px;
}
&::after {
background: $avatar-initial-color; /* TODO */
mask-position: center;
mask-size: 24px;
mask-repeat: no-repeat;
}
}
.mx_FeedbackDialog_reportBug {
&::after {
mask-image: url("$(res)/img/feather-customised/bug.svg");
}
}
.mx_FeedbackDialog_rateApp {
.mx_StyledRadioButton {
display: inline-flex;
font-size: 20px;
transition:
font-size 1s,
border 0.5s;
border-radius: 50%;
border: 2px solid transparent;
margin-top: 12px;
margin-bottom: 24px;
vertical-align: top;
cursor: pointer;
input[type="radio"] + div {
display: none;
}
.mx_StyledRadioButton_content {
background: $icon-button-color;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
border-radius: 20px;
margin: 5px;
}
.mx_StyledRadioButton_spacer {
display: none;
}
& + .mx_StyledRadioButton {
margin-left: 16px;
}
}
.mx_StyledRadioButton_checked {
font-size: 24px;
border-color: var(--cpd-color-bg-action-primary-rest);
}
&::after {
mask-image: url("$(res)/img/element-icons/feedback.svg");
}
}
}

166
res/css/views/dialogs/_ForwardDialog.pcss Normal file
View File

@@ -0,0 +1,166 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Robin Townsend <robin@robin.town>
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_ForwardDialog {
width: 520px;
color: $primary-content;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
min-height: 0;
height: 80vh;
> h3 {
margin: 0 0 6px;
color: $secondary-content;
font-size: $font-12px;
font-weight: var(--cpd-font-weight-semibold);
line-height: $font-15px;
}
> .mx_ForwardDialog_preview {
max-height: 30%;
flex-shrink: 0;
overflow-y: auto;
.mx_EventTile[data-layout="bubble"] {
margin-top: 20px;
}
div {
pointer-events: none;
}
/* When forwarding messages from encrypted rooms, EventTile will complain */
/* that our preview is unencrypted, which doesn't actually matter */
/* We also hide download links to not encourage users to try interacting */
.mx_EventTile_msgOption,
.mx_EventTile_e2eIcon_unencrypted,
.mx_EventTile_e2eIcon_warning,
.mx_MFileBody_download {
display: none;
}
}
> hr {
width: 100%;
border: none;
border-top: 1px solid $input-border-color;
margin: 12px 0;
}
> .mx_ForwardList {
display: contents;
.mx_SearchBox {
/* To match the space around the title */
margin: 0 0 15px 0;
flex-grow: 0;
}
.mx_ForwardList_content {
flex-grow: 1;
}
.mx_ForwardList_noResults {
display: block;
margin-top: 24px;
}
.mx_ForwardList_results {
&:not(:first-child) {
margin-top: 24px;
}
.mx_ForwardList_resultsList {
padding-right: 8px;
}
.mx_ForwardList_entry {
display: flex;
justify-content: space-between;
height: 32px;
padding: 6px;
border-radius: 8px;
&:hover,
&.mx_ForwardList_entry_active {
background-color: $spacePanel-bg-color;
}
.mx_ForwardList_roomButton {
display: flex;
margin-right: 12px;
min-width: 0;
.mx_DecoratedRoomAvatar {
margin-right: 12px;
}
.mx_ForwardList_entry_name,
.mx_ForwardList_entry_detail {
line-height: 30px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.mx_ForwardList_entry_name {
font-size: $font-15px;
}
.mx_ForwardList_entry_detail {
font-size: $font-12px;
margin-left: 8px;
color: $tertiary-content;
}
}
.mx_ForwardList_sendButton {
position: relative;
margin-left: 12px;
&:not(.mx_ForwardList_canSend) .mx_ForwardList_sendLabel {
/* Hide the "Send" label while preserving button size */
visibility: hidden;
}
.mx_ForwardList_sendIcon,
.mx_NotificationBadge {
position: absolute;
}
.mx_NotificationBadge {
/* Match the failed to send indicator's color with the disabled button */
background-color: $button-danger-disabled-fg-color;
}
&.mx_ForwardList_sending .mx_ForwardList_sendIcon {
background-color: $accent;
mask-image: url("$(res)/img/element-icons/circle-sending.svg");
mask-position: center;
mask-repeat: no-repeat;
mask-size: 14px;
width: 14px;
height: 14px;
}
&.mx_ForwardList_sent .mx_ForwardList_sendIcon {
background-color: $accent;
mask-image: url("$(res)/img/element-icons/circle-sent.svg");
mask-position: center;
mask-repeat: no-repeat;
mask-size: 14px;
width: 14px;
height: 14px;
}
}
}
}
}
}

16
res/css/views/dialogs/_GenericFeatureFeedbackDialog.pcss Normal file
View File

@@ -0,0 +1,16 @@
/*
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
Please see LICENSE files in the repository root for full details.
*/
.mx_GenericFeatureFeedbackDialog {
.mx_GenericFeatureFeedbackDialog_subheading {
color: $primary-content;
font: var(--cpd-font-body-md-regular);
line-height: $font-20px;
margin-bottom: 24px;
}
}

15
res/css/views/dialogs/_IncomingSasDialog.pcss Normal file
View File

@@ -0,0 +1,15 @@
/*
Copyright 2019-2024 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_IncomingSasDialog_opponentProfile_image {
position: relative;
}
.mx_IncomingSasDialog_opponentProfile h2 {
display: inline-block;
margin-left: 10px;
}

464
res/css/views/dialogs/_InviteDialog.pcss Normal file
View File

@@ -0,0 +1,464 @@
/*
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
Please see LICENSE files in the repository root for full details.
*/
.mx_InviteDialog_flexWrapper .mx_Dialog {
display: flex;
flex-direction: column;
}
.mx_InviteDialog_transferWrapper .mx_Dialog {
padding-bottom: $spacing-16;
}
.mx_InviteDialog_addressBar {
display: flex;
flex-direction: row;
/* Right margin for the design. We could apply this to the whole dialog, but then the scrollbar */
/* for the user section gets weird. */
margin: $spacing-8 45px 0 0;
.mx_InviteDialog_editor {
flex: 1;
width: 100%; /* Needed to make the Field inside grow */
background-color: $header-panel-bg-color;
border-radius: 4px;
min-height: 25px;
padding-inline-start: $spacing-8;
overflow-x: hidden;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
.mx_InviteDialog_userTile {
margin: 6px 6px 0 0;
display: inline-block;
min-width: max-content; /* prevent manipulation by flexbox */
}
/* overrides bunch of our default text input styles */
> input[type="text"] {
margin: 6px 0 !important;
height: 24px;
font: var(--cpd-font-body-md-regular);
line-height: $font-24px;
padding-inline-start: $spacing-12;
border: 0 !important;
outline: 0 !important;
resize: none;
box-sizing: border-box;
min-width: 40%;
flex: 1 !important;
color: $primary-content !important;
}
}
.mx_InviteDialog_goButton {
min-width: 48px;
margin-inline-start: 10px;
height: 25px;
line-height: $font-25px;
}
.mx_InviteDialog_buttonAndSpinner {
.mx_Spinner {
/* Width and height are required to trick the layout engine. */
width: 20px;
height: 20px;
margin-inline-start: 5px;
display: inline-block;
vertical-align: middle;
}
}
}
.mx_InviteDialog_section {
padding-bottom: $spacing-4;
h3 {
font-size: $font-12px;
color: $muted-fg-color;
font-weight: bold;
text-transform: uppercase;
}
> p {
margin: 0;
}
> span {
color: $primary-content;
}
.mx_InviteDialog_section_showMore {
margin: 7px 18px;
display: block;
}
}
.mx_InviteDialog_section_hidden_suggestions_disclaimer {
padding: $spacing-8 0 $spacing-16 0;
font: var(--cpd-font-body-md-regular);
> span {
color: $primary-content;
font-weight: var(--cpd-font-weight-semibold);
}
> p {
margin: 0;
}
}
.mx_InviteDialog_footer {
border-top: 1px solid $input-border-color;
> h3 {
margin: $spacing-12 0;
font-size: $font-12px;
color: $muted-fg-color;
font-weight: bold;
text-transform: uppercase;
}
.mx_CopyableText.mx_CopyableText_border {
width: unset; /* full width */
margin-bottom: 0;
> a {
text-decoration: none;
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
/* Many of these styles are stolen from mx_UserPill, but adjusted for the invite dialog. */
.mx_InviteDialog_userTile {
margin-inline-end: $spacing-8;
.mx_InviteDialog_userTile_pill {
background-color: var(--cpd-color-bg-success-subtle);
border-radius: 12px;
display: inline-block;
height: 24px;
line-height: $font-24px;
padding-inline: $spacing-8;
vertical-align: middle;
color: $primary-content;
.mx_SearchResultAvatar {
border-radius: 20px;
position: relative;
left: -5px;
top: 2px;
}
img.mx_SearchResultAvatar {
vertical-align: top;
}
.mx_InviteDialog_userTile_name {
vertical-align: top;
}
.mx_SearchResultAvatar_threepidAvatar {
background-color: #ffffff; /* this is fine without a var because it's for both themes */
}
}
.mx_InviteDialog_userTile_remove {
display: inline-block;
vertical-align: middle;
svg {
vertical-align: middle;
}
}
}
.mx_InviteDialog_other {
/* Prevent the dialog from jumping around randomly when elements change. */
display: flex;
flex-direction: column;
height: 600px;
overflow: hidden;
h2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: pre-wrap;
overflow: hidden;
}
.mx_InviteDialog_addressBar {
margin-inline-end: 0;
}
.mx_InviteDialog_userSections {
flex-grow: 1;
padding-inline-end: 0;
.mx_InviteDialog_section {
padding-bottom: 0;
margin-top: $spacing-12;
}
}
}
.mx_InviteDialog_content {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden;
}
.mx_InviteDialog_transfer {
width: auto;
.mx_InviteDialog_content {
width: 496px;
height: 430px;
overflow: visible;
.mx_TabbedView {
display: flex;
flex-direction: column;
flex-shrink: 1;
flex-grow: 1;
min-height: 0;
.mx_TabbedView_tabPanel {
flex-direction: column;
.mx_TabbedView_tabPanelContent {
display: flex;
flex-direction: column;
}
}
}
}
.mx_InviteDialog_addressBar {
margin-top: $spacing-8;
}
input[type="checkbox"] {
margin-inline-end: $spacing-8;
}
}
.mx_InviteDialog_userSections {
margin-top: $spacing-4;
overflow-y: auto;
padding: 0 45px $spacing-4 0;
}
.mx_InviteDialog_helpText {
margin: 0;
}
.mx_InviteDialog_dialPad {
width: 224px;
margin-top: $spacing-16;
margin-inline: auto;
.mx_InviteDialog_dialPadField {
border-top: 0;
border-inline: 0;
border-radius: 0;
margin-top: 0;
border-color: $quaternary-content;
&:focus-within {
border-color: $accent;
}
input {
font-size: 18px;
font-weight: var(--cpd-font-weight-semibold);
padding-top: 0;
}
.mx_Field_postfix {
/* Remove border separator between postfix and field content */
border-left: none;
}
}
.mx_DialPad {
row-gap: $spacing-16;
column-gap: 48px;
margin-inline: auto;
}
}
.mx_InviteDialog_transferConsultConnect {
padding-top: $spacing-16;
/* This wants a drop shadow the full width of the dialog, so use negative margin to make it full width,
* then compensate with padding
*/
padding-inline: $spacing-24;
margin-inline: calc(-1 * $spacing-24);
border-top: 1px solid $quinary-content;
display: flex;
flex-direction: row;
align-items: center;
}
.mx_InviteDialog_transferConsultConnect_pushRight {
margin-inline-start: auto;
}
.mx_InviteDialog_userDirectoryIcon::before {
mask-image: url("$(res)/img/voip/tab-userdirectory.svg");
}
.mx_InviteDialog_dialPadIcon::before {
mask-image: url("$(res)/img/voip/tab-dialpad.svg");
}
.mx_InviteDialog_tile {
cursor: pointer;
display: grid;
gap: $spacing-8 $spacing-12;
align-items: center;
&.mx_InviteDialog_tile--room {
/* mx_InviteDialog_tile_avatarStack, mx_InviteDialog_tile_nameStack, time */
grid-template-columns: min-content auto auto;
padding: $spacing-4 $spacing-8;
&:hover {
background-color: $header-panel-bg-color;
border-radius: 4px;
}
.mx_InviteDialog_tile--room_selected {
border-radius: 36px;
background-color: var(--cpd-color-bg-success-subtle);
&::before {
content: "";
width: 24px;
height: 24px;
grid-column: 1;
grid-row: 1;
mask-image: url("$(res)/img/feather-customised/check.svg");
mask-size: 100%;
mask-repeat: no-repeat;
position: absolute;
top: 6px; /* 50% */
left: 6px; /* 50% */
background-color: $primary-content;
}
}
.mx_InviteDialog_tile--room_time {
margin-inline-start: auto;
width: max-content;
font-size: $font-12px;
color: $muted-fg-color;
}
.mx_InviteDialog_tile--room_highlight {
font-weight: 900;
}
}
&.mx_InviteDialog_tile--inviterError {
grid-template-columns: max-content auto; /* max-content = avatar width */
margin-bottom: $spacing-24;
&:last-child {
margin-bottom: 0;
}
.mx_InviteDialog_tile--inviterError_errorText {
grid-row-start: 2;
grid-column-start: 2;
font-size: $font-15px;
color: $alert;
}
}
* {
vertical-align: middle;
}
.mx_InviteDialog_tile_avatarStack,
.mx_InviteDialog_tile--room_selected {
width: 36px;
height: 36px;
display: inline-block;
position: relative;
}
.mx_InviteDialog_tile_avatarStack {
grid-row-start: 1;
grid-column-start: 1;
& > * {
position: absolute;
top: 0;
left: 0;
}
}
.mx_InviteDialog_tile_nameStack {
grid-row-start: 1;
grid-column-start: 2;
display: flex;
flex-flow: column;
align-self: center;
align-items: baseline;
gap: 2px 0;
overflow: hidden;
.mx_InviteDialog_tile_nameStack_name,
.mx_InviteDialog_tile_nameStack_userId {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.mx_InviteDialog_tile_nameStack_name {
font-size: $font-15px;
font-weight: var(--cpd-font-weight-semibold);
color: $primary-content;
}
.mx_InviteDialog_tile_nameStack_userId {
font-size: $font-12px;
color: $muted-fg-color;
}
}
}
.mx_InviteDialog_multiInviterError {
> h4 {
font-size: $font-15px;
line-height: $font-24px;
color: $secondary-content;
font-weight: normal;
}
}
.mx_InviteDialog_identityServer {
margin-top: 1em;
}
.mx_InviteDialog_oneThreepid {
font-size: $font-12px;
margin: $spacing-8 0;
}

65
res/css/views/dialogs/_JoinRuleDropdown.pcss Normal file
View File

@@ -0,0 +1,65 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_JoinRuleDropdown {
margin-bottom: 8px;
font: var(--cpd-font-body-md-regular);
color: $primary-content;
.mx_Dropdown_option {
font: var(--cpd-font-body-md-regular);
line-height: $font-32px;
height: 32px;
min-height: 32px;
> div {
padding-left: 30px;
position: relative;
&::before {
content: "";
position: absolute;
height: 16px;
width: 16px;
left: 6px;
top: 8px;
mask-repeat: no-repeat;
mask-position: center;
background-color: $secondary-content;
}
&.mx_JoinRuleDropdown_knock::before {
content: normal;
}
}
}
.mx_JoinRuleDropdown_invite::before {
box-sizing: border-box;
mask-image: url("$(res)/img/element-icons/lock.svg");
mask-size: contain;
padding: 1px;
}
.mx_JoinRuleDropdown_public::before {
mask-image: url("$(res)/img/globe.svg");
mask-size: 12px;
}
.mx_JoinRuleDropdown_restricted::before {
mask-image: url("$(res)/img/element-icons/group-members.svg");
mask-size: contain;
}
.mx_JoinRuleDropdown_icon {
color: $secondary-content;
position: absolute;
left: 6px;
top: 8px;
}
}

59
res/css/views/dialogs/_LeaveSpaceDialog.pcss Normal file
View File

@@ -0,0 +1,59 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_LeaveSpaceDialog_wrapper {
.mx_Dialog {
display: flex;
flex-direction: column;
padding: 24px 32px;
.mx_LeaveSpaceDialog {
width: 440px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
height: 520px;
.mx_Dialog_content {
flex-grow: 1;
margin: 0;
overflow-y: auto;
.mx_LeaveSpaceDialog_section_warning {
position: relative;
border-radius: 8px;
margin: 12px 0 0;
padding: 12px 8px 12px 42px;
background-color: $header-panel-bg-color;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
&::before {
content: "";
position: absolute;
left: 10px;
top: calc(50% - 8px); /* vertical centering */
height: 16px;
width: 16px;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
mask-position: center;
}
}
> p {
color: $primary-content;
}
}
}
}
}

41
res/css/views/dialogs/_LocationViewDialog.pcss Normal file
View File

@@ -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
Please see LICENSE files in the repository root for full details.
*/
.mx_LocationViewDialog_wrapper .mx_Dialog {
padding: 0px;
}
.mx_LocationViewDialog {
/* subtract 0.5px to prevent single-pixel margin due to rounding */
width: calc(80vw - 0.5px);
height: calc(80vh - 0.5px);
overflow: hidden;
.mx_Dialog_header {
margin: 0px;
padding: 0px;
position: unset;
.mx_Dialog_title {
display: none;
}
}
.mx_Dialog_cancelButton {
z-index: 4010;
position: absolute;
left: var(--cpd-space-4x);
top: var(--cpd-space-4x);
}
}
.mx_LocationViewDialog_map {
width: 80vw;
height: 80vh;
border-radius: 8px;
}

11
res/css/views/dialogs/_LogoutDialog.pcss Normal file
View File

@@ -0,0 +1,11 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2023 Manan Sadana <manancodes.dev@gmail.com>
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_LogoutDialog_ExportKeyAdvanced {
width: fit-content;
}

133
res/css/views/dialogs/_ManageRestrictedJoinRuleDialog.pcss Normal file
View File

@@ -0,0 +1,133 @@
/*
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
Please see LICENSE files in the repository root for full details.
*/
.mx_ManageRestrictedJoinRuleDialog_wrapper {
.mx_Dialog {
display: flex;
flex-direction: column;
}
}
.mx_ManageRestrictedJoinRuleDialog {
width: 480px;
color: $primary-content;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
min-height: 0;
height: 60vh;
.mx_SearchBox {
/* To match the space around the title */
margin: 0 0 15px 0;
flex-grow: 0;
}
.mx_ManageRestrictedJoinRuleDialog_content {
flex-grow: 1;
}
.mx_ManageRestrictedJoinRuleDialog_noResults {
display: block;
margin-top: 24px;
}
.mx_ManageRestrictedJoinRuleDialog_section {
&:not(:first-child) {
margin-top: 24px;
}
> h3 {
margin: 0;
color: $secondary-content;
font-size: $font-12px;
font-weight: var(--cpd-font-weight-semibold);
line-height: $font-15px;
}
.mx_ManageRestrictedJoinRuleDialog_entry {
display: flex;
margin-top: 12px;
> div {
flex-grow: 1;
}
.mx_ManageRestrictedJoinRuleDialog_entry_name {
margin: 0 8px;
font-size: $font-15px;
line-height: 30px;
flex-grow: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.mx_ManageRestrictedJoinRuleDialog_entry_description {
margin-top: 8px;
font-size: $font-12px;
line-height: $font-15px;
color: $tertiary-content;
}
.mx_Checkbox {
align-items: center;
}
}
}
.mx_ManageRestrictedJoinRuleDialog_section_spaces {
.mx_BaseAvatar {
margin-right: 12px;
}
}
.mx_ManageRestrictedJoinRuleDialog_section_info {
position: relative;
border-radius: 8px;
margin: 12px 0;
padding: 8px 8px 8px 42px;
background-color: $header-panel-bg-color;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
&::before {
content: "";
position: absolute;
left: 10px;
top: calc(50% - 8px); /* vertical centering */
height: 16px;
width: 16px;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
mask-position: center;
}
}
.mx_ManageRestrictedJoinRuleDialog_footer {
margin-top: 20px;
.mx_ManageRestrictedJoinRuleDialog_footer_buttons {
display: flex;
width: max-content;
margin-left: auto;
.mx_AccessibleButton {
display: inline-block;
& + .mx_AccessibleButton {
margin-left: 24px;
}
}
}
}
}

94
res/css/views/dialogs/_MessageEditHistoryDialog.pcss Normal file
View File

@@ -0,0 +1,94 @@
/*
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
Please see LICENSE files in the repository root for full details.
*/
.mx_MessageEditHistoryDialog {
display: flex;
flex-direction: column;
max-height: 60vh;
}
.mx_MessageEditHistoryDialog_scrollPanel {
flex: 1 1 auto;
}
.mx_MessageEditHistoryDialog_error {
color: $alert;
text-align: center;
}
.mx_MessageEditHistoryDialog_edits {
list-style-type: none;
font: var(--cpd-font-body-md-regular);
padding: 0;
color: $primary-content;
span.mx_EditHistoryMessage_deletion,
span.mx_EditHistoryMessage_insertion {
padding: 0px 2px;
}
.mx_EditHistoryMessage_deletion {
color: rgb(255, 76, 85);
background-color: rgba(255, 76, 85, 0.1);
text-decoration: line-through;
}
.mx_EditHistoryMessage_insertion {
color: rgb(26, 169, 123);
background-color: rgba(26, 169, 123, 0.1);
text-decoration: underline;
}
/* Emulate mx_EventTile[data-layout="group"] */
.mx_EventTile {
padding-top: 0;
.mx_MessageTimestamp {
position: absolute;
left: 0;
text-align: center;
}
.mx_EventTile_line {
padding-top: var(--EventTile_group_line-spacing-block-start);
padding-bottom: var(--EventTile_group_line-spacing-block-end);
padding-left: var(--EventTile_group_line-spacing-inline-start);
line-height: var(--EventTile_group_line-line-height);
.mx_EventTile_content {
margin-right: 0px;
}
}
&::before {
content: "";
position: absolute;
top: -1px;
bottom: -1px;
left: -10px;
right: -10px;
z-index: -1;
border-radius: 4px;
}
&:hover {
&::before {
background: $eventbubble-bg-hover;
}
}
}
.mx_MessageActionBar .mx_AccessibleButton {
display: flex;
align-items: center;
padding-inline-start: $spacing-8;
padding-inline-end: $spacing-8;
font-size: $font-15px;
}
}

34
res/css/views/dialogs/_ModalWidgetDialog.pcss Normal file
View File

@@ -0,0 +1,34 @@
/*
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
Please see LICENSE files in the repository root for full details.
*/
.mx_ModalWidgetDialog {
.mx_ModalWidgetDialog_warning {
margin-bottom: 24px;
> img {
vertical-align: middle;
margin-right: 8px;
}
}
.mx_ModalWidgetDialog_buttons {
float: right;
margin-top: 24px;
.mx_AccessibleButton + .mx_AccessibleButton {
margin-left: 8px;
}
}
iframe {
width: 100%;
height: 450px;
border: 0;
border-radius: 8px;
}
}

75
res/css/views/dialogs/_PollCreateDialog.pcss Normal file
View File

@@ -0,0 +1,75 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_PollCreateDialog {
.mx_PollCreateDialog_busy {
position: absolute;
inset: 0;
background-color: $overlay-background;
z-index: 1;
}
h2 {
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-24px;
margin-top: 0;
margin-bottom: 8px;
&:nth-child(n + 2) {
margin-top: 20px;
}
}
p {
color: $secondary-content;
}
.mx_PollCreateDialog_option {
display: flex;
align-items: center;
margin-top: 11px;
margin-bottom: 16px; /* 11px from the top will collapse, so this creates a 16px gap between options */
.mx_Field {
flex: 1;
margin: 0;
}
.mx_PollCreateDialog_removeOption {
margin-left: 12px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: $quinary-content;
cursor: pointer;
position: relative;
&::before {
content: "";
mask: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: 16px;
width: inherit;
height: inherit;
position: absolute;
background-color: $secondary-content;
}
}
}
.mx_PollCreateDialog_addOption {
padding: 0;
margin-bottom: 40px; /* arbitrary to create scrollable area under the poll */
}
.mx_AccessibleButton_disabled {
opacity: 0.4;
}
}

20
res/css/views/dialogs/_RegistrationEmailPromptDialog.pcss Normal file
View File

@@ -0,0 +1,20 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_RegistrationEmailPromptDialog {
width: 417px;
.mx_Dialog_content {
margin-bottom: 24px;
color: $tertiary-content;
}
.mx_Dialog_primary {
width: 100%;
}
}

63
res/css/views/dialogs/_RoomSettingsDialog.pcss Normal file
View File

@@ -0,0 +1,63 @@
/*
Copyright 2019-2024 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
/* ICONS */
/* ========================================================== */
.mx_RoomSettingsDialog_settingsIcon::before {
mask-image: url("$(res)/img/element-icons/settings.svg");
}
.mx_RoomSettingsDialog_voiceIcon::before {
mask-image: url("$(res)/img/element-icons/call/voice-call.svg");
}
.mx_RoomSettingsDialog_securityIcon::before {
mask-image: url("$(res)/img/element-icons/security.svg");
}
.mx_RoomSettingsDialog_rolesIcon::before {
mask-image: url("$(res)/img/element-icons/room/settings/roles.svg");
}
.mx_RoomSettingsDialog_notificationsIcon::before {
mask-image: url("$(res)/img/element-icons/notifications.svg");
}
.mx_RoomSettingsDialog_bridgesIcon::before {
/* This icon is pants, please improve :) */
mask-image: url("$(res)/img/feather-customised/bridge.svg");
}
.mx_RoomSettingsDialog_pollsIcon::before {
mask-image: url("$(res)/img/element-icons/room/composer/poll.svg");
}
.mx_RoomSettingsDialog_warningIcon::before {
mask-image: url("$(res)/img/element-icons/room/settings/advanced.svg");
}
.mx_RoomSettingsDialog_peopleIcon::before {
mask-image: url("$(res)/img/element-icons/group-members.svg");
}
.mx_RoomSettingsDialog .mx_Dialog_title {
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin: 0 auto;
padding-right: 80px;
}
/* show a different AvatarSetting placeholder for RoomProfileSettings which is basically a clone of ProfileSettings */
.mx_RoomSettingsDialog .mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder::before {
mask: url("$(res)/img/feather-customised/image.svg");
mask-repeat: no-repeat;
mask-size: 36px;
mask-position: center;
}

107
res/css/views/dialogs/_RoomSettingsDialogBridges.pcss Normal file
View File

@@ -0,0 +1,107 @@
/*
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
Please see LICENSE files in the repository root for full details.
*/
.mx_RoomSettingsDialog_BridgeList {
padding: 0;
li {
list-style-type: none;
&.mx_RoomSettingsDialog_BridgeList_listItem {
display: flex;
flex-wrap: wrap;
gap: $spacing-8;
padding: 5px;
margin-bottom: $spacing-8;
/* border-style around each bridge list item */
border-width: 1px 1px;
border-color: $primary-hairline-color;
border-style: solid;
border-radius: 5px;
.mx_RoomSettingsDialog_column_icon {
.mx_RoomSettingsDialog_protocolIcon,
.mx_RoomSettingsDialog_protocolIcon span,
.mx_RoomSettingsDialog_noProtocolIcon {
box-sizing: border-box;
border-radius: 5px;
border: 1px solid $input-darker-bg-color;
}
.mx_RoomSettingsDialog_noProtocolIcon,
.mx_RoomSettingsDialog_protocolIcon img {
border-radius: 5px;
}
.mx_RoomSettingsDialog_noProtocolIcon {
width: 48px;
height: 48px;
background: $input-darker-bg-color;
}
.mx_RoomSettingsDialog_protocolIcon {
img {
border-width: 1px 1px;
border-color: $primary-hairline-color;
}
span {
/* Correct letter placement */
left: auto;
}
}
}
.mx_RoomSettingsDialog_column_data {
display: inline-block;
width: 85%;
.mx_RoomSettingsDialog_column_data_details,
.mx_RoomSettingsDialog_column_data_metadata,
.mx_RoomSettingsDialog_column_data_metadata li,
.mx_RoomSettingsDialog_column_data_protocolName {
margin-bottom: 0;
}
.mx_RoomSettingsDialog_column_data_details,
.mx_RoomSettingsDialog_column_data_metadata {
margin-top: $spacing-4;
}
.mx_RoomSettingsDialog_column_data_metadata li {
margin-top: $spacing-8;
}
.mx_RoomSettingsDialog_column_data_protocolName {
margin-top: 0;
font-size: 16pt;
color: $primary-content;
}
.mx_RoomSettingsDialog_workspace_channel_details {
color: $primary-content;
font-weight: var(--cpd-font-weight-semibold);
.mx_RoomSettingsDialog_channel {
margin-inline-start: 5px;
}
}
.mx_RoomSettingsDialog_metadata {
color: $muted-fg-color;
margin-bottom: 0;
overflow-y: visible;
text-overflow: ellipsis;
white-space: normal;
padding: 0;
}
}
}
}
}

10
res/css/views/dialogs/_RoomUpgradeDialog.pcss Normal file
View File

@@ -0,0 +1,10 @@
/*
Copyright 2018-2024 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_RoomUpgradeDialog {
padding-right: 70px;
}

44
res/css/views/dialogs/_RoomUpgradeWarningDialog.pcss Normal file
View File

@@ -0,0 +1,44 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2019-2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_RoomUpgradeWarningDialog {
max-width: 38vw;
width: 38vw;
.mx_RoomUpgradeWarningDialog_progress {
.mx_ProgressBar {
height: 8px;
width: 100%;
@mixin ProgressBarBorderRadius 8px;
}
.mx_RoomUpgradeWarningDialog_progressText {
margin-top: 8px;
font-size: $font-15px;
line-height: $font-24px;
color: $primary-content;
}
}
}
.mx_RoomUpgradeWarningDialog .mx_SettingsFlag {
font-weight: 700;
.mx_ToggleSwitch {
display: inline-block;
vertical-align: middle;
margin-left: 8px;
float: right;
}
.mx_SettingsFlag_label {
display: inline-block;
vertical-align: middle;
}
}

63
res/css/views/dialogs/_ServerOfflineDialog.pcss Normal file
View File

@@ -0,0 +1,63 @@
/*
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
Please see LICENSE files in the repository root for full details.
*/
.mx_ServerOfflineDialog {
.mx_ServerOfflineDialog_content {
padding-right: 85px;
color: $primary-content;
hr {
border-color: $primary-content;
opacity: 0.1;
border-bottom: none;
}
ul {
padding: 16px;
li:nth-child(n + 2) {
margin-top: 16px;
}
}
.mx_ServerOfflineDialog_content_context {
.mx_ServerOfflineDialog_content_context_timestamp {
display: inline-block;
width: 115px;
color: $muted-fg-color;
line-height: 24px; /* same as avatar */
vertical-align: top;
}
.mx_ServerOfflineDialog_content_context_timeline {
display: inline-block;
width: calc(100% - 155px); /* 115px timestamp width + 40px right margin */
.mx_ServerOfflineDialog_content_context_timeline_header {
span {
margin-left: 8px;
vertical-align: middle;
}
}
.mx_ServerOfflineDialog_content_context_txn {
position: relative;
margin-top: 8px;
.mx_ServerOfflineDialog_content_context_txn_desc {
width: calc(100% - 100px); /* 100px is an arbitrary margin for the button */
}
.mx_AccessibleButton {
float: right;
}
}
}
}
}
}

71
res/css/views/dialogs/_ServerPickerDialog.pcss Normal file
View File

@@ -0,0 +1,71 @@
/*
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
Please see LICENSE files in the repository root for full details.
*/
.mx_ServerPickerDialog {
width: 468px;
box-sizing: border-box;
.mx_Dialog_content {
margin-bottom: 0;
> p {
color: $secondary-content;
font: var(--cpd-font-body-md-regular);
margin: 16px 0;
&:first-of-type {
margin-bottom: 40px;
}
&:last-of-type {
margin: 0 24px 24px;
}
}
> h2 {
font-size: $font-15px;
font-weight: var(--cpd-font-weight-semibold);
color: $secondary-content;
margin: 16px 0 16px 8px;
}
> a {
color: $accent;
margin-left: 8px;
}
}
.mx_ServerPickerDialog_otherHomeserverRadio {
input[type="radio"] + div {
margin-top: auto;
margin-bottom: auto;
}
}
.mx_ServerPickerDialog_otherHomeserver {
border-top: none;
border-left: none;
border-right: none;
border-radius: unset;
> input {
padding-left: 0;
}
> label {
margin-left: 0;
}
}
.mx_AccessibleButton_kind_primary {
width: calc(100% - 64px);
margin: 0 8px;
padding: 15px 18px;
}
}

25
res/css/views/dialogs/_SetEmailDialog.pcss Normal file
View File

@@ -0,0 +1,25 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2017 Vector Creations Ltd
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_SetEmailDialog_email_input {
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;
color: $input-fg-color;
background-color: $background;
font-size: $font-15px;
width: 100%;
max-width: 280px;
margin-bottom: 10px;
}
.mx_SetEmailDialog_email_input:focus {
outline: none;
box-shadow: none;
border: 1px solid $accent;
}

33
res/css/views/dialogs/_SettingsDialog.pcss Normal file
View File

@@ -0,0 +1,33 @@
/*
Copyright 2019-2024 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
/* Not actually a component but things shared by settings components */
.mx_UserSettingsDialog,
.mx_RoomSettingsDialog,
.mx_SpaceSettingsDialog,
.mx_SpacePreferencesDialog {
width: 90vw;
max-width: 980px;
/* set the height too since tabbed view scrolls itself. */
height: 80vh;
.mx_TabbedView {
top: 90px;
}
.mx_TabbedView .mx_SettingsTab {
box-sizing: border-box;
min-width: 580px;
padding-right: 100px;
display: flex;
flex-direction: column;
/* Put some padding on the bottom to avoid the settings tab from */
/* colliding harshly with the dialog when scrolled down. */
padding-bottom: 100px;
}
}

54
res/css/views/dialogs/_ShareDialog.pcss Normal file
View File

@@ -0,0 +1,54 @@
/*
Copyright 2018-2024 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_ShareDialog hr {
margin-top: 25px;
margin-bottom: 25px;
border-color: $light-fg-color;
}
.mx_ShareDialog .mx_ShareDialog_content {
margin: 10px 0;
.mx_CopyableText {
width: unset; /* full width */
> a {
text-decoration: none;
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.mx_ShareDialog_split {
display: flex;
flex-wrap: wrap;
}
.mx_ShareDialog_qrcode_container {
float: left;
height: 256px;
width: 256px;
margin-right: 64px;
}
.mx_ShareDialog_qrcode_container + .mx_ShareDialog_social_container {
width: 299px;
}
.mx_ShareDialog_social_container {
display: inline-block;
}
.mx_ShareDialog_social_icon {
display: inline-grid;
margin-right: 10px;
margin-bottom: 10px;
}

15
res/css/views/dialogs/_SlashCommandHelpDialog.pcss Normal file
View File

@@ -0,0 +1,15 @@
/*
Copyright 2024 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_SlashCommandHelpDialog .mx_SlashCommandHelpDialog_headerRow h2 {
margin-bottom: 2px;
}
.mx_SlashCommandHelpDialog .mx_Dialog_content {
margin-top: 12px;
margin-bottom: 34px;
}

32
res/css/views/dialogs/_SpacePreferencesDialog.pcss Normal file
View File

@@ -0,0 +1,32 @@
/*
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
Please see LICENSE files in the repository root for full details.
*/
.mx_SpacePreferencesDialog {
width: 700px;
height: 400px;
> h4 {
margin: -12px 0 0;
font-weight: normal;
font-size: $font-15px;
line-height: $font-24px;
color: $secondary-content;
}
.mx_TabbedView {
top: 80px;
.mx_SettingsTab {
min-width: unset;
}
}
}
.mx_SpacePreferencesDialog_appearanceIcon::before {
mask-image: url("$(res)/img/element-icons/settings/appearance.svg");
}

84
res/css/views/dialogs/_SpaceSettingsDialog.pcss Normal file
View File

@@ -0,0 +1,84 @@
/*
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
Please see LICENSE files in the repository root for full details.
*/
.mx_SpaceSettingsDialog {
color: $primary-content;
.mx_SpaceSettings_errorText {
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-12px;
line-height: $font-15px;
color: $alert;
margin-bottom: 28px;
}
.mx_ToggleSwitch {
display: inline-block;
vertical-align: middle;
margin-left: 16px;
}
.mx_SettingsTab_section {
.mx_SettingsTab_section_caption {
margin-top: 12px;
margin-bottom: 20px;
}
.mx_StyledRadioButton {
margin-top: 8px;
margin-bottom: 4px;
.mx_StyledRadioButton_content {
font-weight: var(--cpd-font-weight-semibold);
line-height: $font-18px;
color: $primary-content;
}
& + span {
font-size: $font-15px;
line-height: $font-18px;
color: $secondary-content;
margin-left: 26px;
}
}
}
.mx_SpaceSettingsDialog_buttons {
display: flex;
margin-top: 64px;
.mx_AccessibleButton {
display: inline-block;
}
.mx_AccessibleButton_kind_link {
margin-left: auto;
}
}
.mx_AccessibleButton_hasKind {
&.mx_AccessibleButton_kind_link {
font: var(--cpd-font-body-md-semibold);
margin: 7px 18px;
&.mx_SettingsTab_showAdvanced {
margin: 18px 0;
}
}
}
.mx_TabbedView_tabLabel {
.mx_SpaceSettingsDialog_generalIcon::before {
mask-image: url("$(res)/img/element-icons/settings.svg");
}
.mx_SpaceSettingsDialog_visibilityIcon::before {
mask-image: url("$(res)/img/element-icons/eye.svg");
}
}
}

527
res/css/views/dialogs/_SpotlightDialog.pcss Normal file
View File

@@ -0,0 +1,527 @@
/*
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
Please see LICENSE files in the repository root for full details.
*/
.mx_SpotlightDialog_wrapper {
.mx_Dialog_border {
/* Disable the glass border as this dialog wasn't designed with it in mind */
display: contents;
}
.mx_Dialog {
width: fit-content;
border-radius: 8px;
overflow-y: initial;
position: relative;
height: 60%;
padding: 0;
contain: unset; /* needed for #mx_SpotlightDialog_keyboardPrompt to not be culled */
#mx_SpotlightDialog_keyboardPrompt {
position: absolute;
padding: $spacing-8;
border-radius: 8px;
background-color: $background;
top: -60px; /* relative to the top of the modal */
left: 50%;
transform: translateX(-50%);
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
kbd {
display: inline-block;
padding: 2px $spacing-4;
margin: 0 $spacing-4;
border-radius: 6px;
background-color: $quinary-content;
vertical-align: middle;
color: $tertiary-content;
/* To avoid any styling inherent with <kbd> elements */
font-family: inherit;
font-weight: inherit;
font-size: inherit;
}
}
}
}
.mx_SpotlightDialog {
height: 100%;
display: flex;
flex-direction: column;
.mx_Dialog_header {
display: none;
}
.mx_SpotlightDialog_searchBox {
margin: 0;
border: none;
border-radius: 8px 8px 0 0;
padding: $spacing-12 $spacing-16;
border-bottom: 1px solid $system;
> .mx_SpotlightDialog_filter {
display: flex;
align-content: center;
align-items: center;
border-radius: 8px;
margin-right: $spacing-8;
background-color: $quinary-content;
vertical-align: middle;
color: $primary-content;
position: relative;
padding: $spacing-4 $spacing-8 $spacing-4 37px;
&::before {
background-color: $secondary-content;
content: "";
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
width: 18px;
height: 18px;
position: absolute;
left: $spacing-8;
top: 50%;
transform: translateY(-50%);
}
&.mx_SpotlightDialog_filterPeople::before {
mask-image: url("$(res)/img/element-icons/room/members.svg");
}
&.mx_SpotlightDialog_filterPublicRooms::before {
mask-image: url("$(res)/img/element-icons/roomlist/hash-circle.svg");
}
&.mx_SpotlightDialog_filterPublicSpaces::before {
mask-image: url("$(res)/img/element-icons/spaces.svg");
}
.mx_SpotlightDialog_filter--close {
position: relative;
display: inline-block;
width: 16px;
height: 16px;
background: $system;
border-radius: 8px;
margin-left: $spacing-8;
text-align: center;
line-height: 16px;
color: $secondary-content;
&::before {
background-color: $secondary-content;
content: "";
mask-repeat: no-repeat;
mask-position: center;
mask-size: 14px;
width: inherit;
height: inherit;
position: absolute;
left: 0;
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
}
}
}
> input {
display: block;
box-sizing: border-box;
background-color: transparent;
width: 100%;
height: 32px;
padding: 0;
color: $tertiary-content;
font-weight: normal;
font-size: $font-15px;
line-height: $font-24px;
}
> .mx_Spinner {
flex-grow: 0;
width: unset;
height: unset;
margin-left: $spacing-16;
}
}
#mx_SpotlightDialog_content {
height: 100%;
overflow-y: auto;
padding: $spacing-16;
ul {
padding: 0;
margin: 0;
}
.mx_SpotlightDialog_section {
> h4,
> .mx_SpotlightDialog_sectionHeader > h4 {
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
margin: 0;
}
> h4 {
margin-bottom: $spacing-8;
}
.mx_SpotlightDialog_sectionHeader {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: $spacing-8;
.mx_SpotlightDialog_options {
display: flex;
gap: $spacing-4;
}
}
& + .mx_SpotlightDialog_section {
margin-top: $spacing-24;
}
}
.mx_SpotlightDialog_recentlyViewed {
> div {
display: flex;
white-space: nowrap;
overflow-x: hidden;
margin-right: 1px; /* occlude the 1px visible of the very next tile to prevent it looking broken */
}
.mx_SpotlightDialog_option {
border-radius: 8px;
padding: $spacing-4;
color: $primary-content;
font-size: $font-12px;
line-height: $font-15px;
display: inline-block;
width: 58px;
height: 58px;
min-width: 58px;
box-sizing: border-box;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
.mx_DecoratedRoomAvatar {
margin: 0 9px $spacing-4; /* maintain centering */
}
& + .mx_SpotlightDialog_option {
margin-left: $spacing-16;
}
&:hover,
&[aria-selected="true"] {
background-color: $quinary-content;
}
}
}
.mx_SpotlightDialog_results,
.mx_SpotlightDialog_recentSearches,
.mx_SpotlightDialog_otherSearches,
.mx_SpotlightDialog_hiddenResults {
.mx_SpotlightDialog_option {
padding: 6px $spacing-4;
border-radius: 8px;
font-size: $font-15px;
line-height: $font-24px;
color: $primary-content;
position: relative;
display: flex;
align-items: center;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
.mx_SpotlightDialog_option--endAdornment {
display: inline-flex;
flex-direction: row;
margin-left: auto;
align-items: flex-start;
}
&.mx_SpotlightDialog_result_multiline {
align-items: flex-start;
.mx_AccessibleButton {
padding: $spacing-4 $spacing-20;
margin: 2px $spacing-4;
}
.mx_SpotlightDialog_enterPrompt {
margin-top: 9px;
margin-right: $spacing-8;
}
}
> .mx_SpotlightDialog_metaspaceResult,
> .mx_DecoratedRoomAvatar,
> .mx_BaseAvatar {
margin-right: $spacing-8;
width: 24px;
height: 24px;
flex-shrink: 0;
.mx_BaseAvatar {
width: inherit;
height: inherit;
}
}
.mx_SpotlightDialog_result_publicRoomDetails {
display: flex;
flex-direction: column;
flex-grow: 1;
min-width: 0;
.mx_SpotlightDialog_result_publicRoomHeader {
display: flex;
flex-direction: row;
line-height: $font-24px;
margin-right: $spacing-8;
.mx_SpotlightDialog_result_publicRoomName {
color: $primary-content;
font-size: $font-15px;
overflow: hidden;
text-overflow: ellipsis;
}
.mx_SpotlightDialog_result_publicRoomAlias {
color: $tertiary-content;
font-size: $font-12px;
margin-left: $spacing-8;
overflow: hidden;
text-overflow: ellipsis;
}
}
.mx_SpotlightDialog_result_publicRoomDescription {
color: $secondary-content;
font-size: $font-12px;
white-space: normal;
word-wrap: break-word;
line-height: $font-20px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
}
.mx_NotificationBadge {
margin-left: $spacing-8;
}
.mx_SpotlightDialog_option--menu,
.mx_SpotlightDialog_option--notifications {
width: 20px;
min-width: 20px;
height: 20px;
margin-top: auto;
margin-bottom: auto;
position: relative;
display: none;
&::before {
top: 2px;
left: 2px;
content: "";
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $tertiary-content;
}
&:hover::before,
&[aria-selected="true"]::before {
background-color: $secondary-content;
}
}
.mx_SpotlightDialog_option--menu::before {
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
}
&:hover,
&[aria-selected="true"] {
background-color: $system;
.mx_SpotlightDialog_option--menu,
.mx_SpotlightDialog_option--notifications {
display: block;
}
}
&[aria-selected="true"] .mx_SpotlightDialog_enterPrompt {
display: inline-block;
}
}
}
.mx_SpotlightDialog_inviteLink,
.mx_SpotlightDialog_createRoom {
margin-top: $spacing-8;
.mx_AccessibleButton {
position: relative;
margin: 0;
padding: 3px $spacing-8 3px $spacing-28;
&::before {
content: "";
display: block;
position: absolute;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
left: $spacing-8;
width: 16px;
height: 16px;
background: var(--cpd-color-icon-primary);
}
}
}
.mx_SpotlightDialog_inviteLink .mx_AccessibleButton::before {
mask-image: url("$(res)/img/element-icons/link.svg");
}
.mx_SpotlightDialog_createRoom .mx_AccessibleButton::before {
mask-image: url("$(res)/img/element-icons/roomlist/hash.svg");
}
.mx_SpotlightDialog_otherSearches {
.mx_SpotlightDialog_startChat,
.mx_SpotlightDialog_joinRoomAlias,
.mx_SpotlightDialog_explorePublicRooms,
.mx_SpotlightDialog_explorePublicSpaces,
.mx_SpotlightDialog_startGroupChat {
padding-left: $spacing-32;
position: relative;
&::before {
background-color: $secondary-content;
content: "";
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
width: 24px;
height: 24px;
position: absolute;
left: $spacing-4;
top: 50%;
transform: translateY(-50%);
}
}
.mx_SpotlightDialog_startChat::before {
mask-image: url("$(res)/img/element-icons/room/members.svg");
}
.mx_SpotlightDialog_joinRoomAlias::before {
mask-image: url("$(res)/img/element-icons/roomlist/hash-circle.svg");
}
.mx_SpotlightDialog_explorePublicRooms::before {
mask-image: url("$(res)/img/element-icons/roomlist/hash-circle.svg");
}
.mx_SpotlightDialog_explorePublicSpaces::before {
mask-image: url("$(res)/img/element-icons/spaces.svg");
}
.mx_SpotlightDialog_startGroupChat::before {
mask-image: url("$(res)/img/element-icons/group-members.svg");
}
.mx_SpotlightDialog_otherSearches_messageSearchText {
font-size: $font-15px;
line-height: $font-24px;
}
.mx_SpotlightDialog_otherSearches_messageSearchIcon {
display: inline-block;
width: 24px;
height: 24px;
background-color: $secondary-content;
vertical-align: text-bottom;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url("$(res)/img/element-icons/room/search-inset.svg");
}
}
.mx_SpotlightDialog_result_details {
margin-left: $spacing-8;
margin-right: $spacing-8;
color: $tertiary-content;
font-size: $font-12px;
line-height: $font-15px;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.mx_SpotlightDialog_recentSearches > h4 > .mx_AccessibleButton_kind_link {
float: right;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
}
.mx_SpotlightDialog_enterPrompt {
padding: 2px $spacing-4;
/* To avoid any styling inherent with <kbd> elements */
font-family: inherit;
font-weight: inherit;
font-size: $font-12px;
line-height: $font-15px;
color: $tertiary-content;
border-radius: 6px;
background-color: $quinary-content;
margin-right: $spacing-4;
display: none;
}
.mx_SpotlightDialog_metaspaceResult {
background-color: $secondary-content;
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
&.mx_SpotlightDialog_metaspaceResult_home-space {
mask-image: url("$(res)/img/element-icons/home.svg");
}
&.mx_SpotlightDialog_metaspaceResult_favourites-space {
mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
}
&.mx_SpotlightDialog_metaspaceResult_people-space {
mask-image: url("$(res)/img/element-icons/room/members.svg");
}
&.mx_SpotlightDialog_metaspaceResult_orphans-space {
mask-image: url("$(res)/img/element-icons/roomlist/hash-circle.svg");
}
}
}
}

33
res/css/views/dialogs/_TermsDialog.pcss Normal file
View File

@@ -0,0 +1,33 @@
/*
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
Please see LICENSE files in the repository root for full details.
*/
/*
* To avoid visual glitching of two modals stacking briefly, we customise the
* terms dialog sizing when it will appear for the integration manager so that
* it gets the same basic size as the IM's own modal.
*/
.mx_TermsDialog_forIntegrationManager .mx_Dialog_border {
width: 60%;
height: 70%;
box-sizing: border-box;
}
.mx_TermsDialog_termsTableHeader {
font-weight: bold;
text-align: left;
}
.mx_TermsDialog_termsTable {
font-size: $font-12px;
width: 100%;
}
.mx_TermsDialog_service,
.mx_TermsDialog_summary {
padding-right: 10px;
}

30
res/css/views/dialogs/_UnpinAllDialog.pcss Normal file
View File

@@ -0,0 +1,30 @@
/*
* 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
* Please see LICENSE files in the repository root for full details.
*/
.mx_UnpinAllDialog {
/* 396 is coming from figma and we remove the left and right paddings of the dialog */
width: calc(396px - (var(--cpd-space-10x) * 2));
padding-bottom: var(--cpd-space-2x);
.mx_UnpinAllDialog_title {
/* Override the default heading style */
font: var(--cpd-font-heading-sm-semibold) !important;
margin-bottom: var(--cpd-space-3x);
}
.mx_UnpinAllDialog_buttons {
display: flex;
flex-direction: column;
gap: var(--cpd-space-4x);
margin: var(--cpd-space-8x) var(--cpd-space-2x) 0 var(--cpd-space-2x);
button {
width: 100%;
}
}
}

24
res/css/views/dialogs/_UntrustedDeviceDialog.pcss Normal file
View File

@@ -0,0 +1,24 @@
/*
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
Please see LICENSE files in the repository root for full details.
*/
.mx_UntrustedDeviceDialog {
.mx_Dialog_title {
display: flex;
align-items: center;
.mx_E2EIcon {
margin-left: 0;
}
}
.mx_Dialog_buttons {
display: flex;
justify-content: flex-end;
gap: 8px;
}
}

26
res/css/views/dialogs/_UploadConfirmDialog.pcss Normal file
View File

@@ -0,0 +1,26 @@
/*
Copyright 2019-2024 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_UploadConfirmDialog_fileIcon {
margin-right: 5px;
}
.mx_UploadConfirmDialog_previewOuter {
text-align: center;
}
.mx_UploadConfirmDialog_previewInner {
display: inline-block;
text-align: left;
}
.mx_UploadConfirmDialog_imagePreview {
max-height: 300px;
max-width: 100%;
border-radius: 4px;
border: 1px solid $dialog-close-fg-color;
}

23
res/css/views/dialogs/_UserSettingsDialog.pcss Normal file
View File

@@ -0,0 +1,23 @@
/*
Copyright 2019-2024 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_SettingsDialog_toastContainer {
position: absolute;
bottom: var(--cpd-space-10x);
width: 100%;
display: flex;
justify-content: center;
}
.mx_UserSettingsDialog_title {
/* Override default dialog font style */
font: var(--cpd-font-heading-md-regular) !important;
.mx_UserSettingsDialog_title_strong {
font: var(--cpd-font-heading-md-semibold);
}
}

39
res/css/views/dialogs/_VerifyEMailDialog.pcss Normal file
View File

@@ -0,0 +1,39 @@
/*
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
Please see LICENSE files in the repository root for full details.
*/
.mx_VerifyEMailDialog {
height: auto;
top: 300px;
.mx_Dialog {
color: $primary-content;
font: var(--cpd-font-body-md-regular);
padding: $spacing-24 $spacing-24 $spacing-16;
text-align: center;
width: 485px;
h1 {
font-size: $font-24px;
font-weight: var(--cpd-font-weight-semibold);
}
.mx_VerifyEMailDialog_text-light {
color: $secondary-content;
line-height: 20px;
}
.mx_AuthBody_did-not-receive {
justify-content: center;
margin-bottom: $spacing-8;
}
.mx_Dialog_cancelButton {
right: 10px;
}
}
}

56
res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.pcss Normal file
View File

@@ -0,0 +1,56 @@
/*
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
Please see LICENSE files in the repository root for full details.
*/
.mx_WidgetCapabilitiesPromptDialog {
.text-muted {
font-size: $font-12px;
}
.mx_Dialog_content {
margin-bottom: 16px;
}
.mx_WidgetCapabilitiesPromptDialog_cap {
margin-top: 20px;
font-size: $font-15px;
line-height: $font-15px;
.mx_WidgetCapabilitiesPromptDialog_byline {
color: $muted-fg-color;
margin-left: 26px;
font-size: $font-12px;
line-height: $font-12px;
}
}
.mx_Dialog_buttons {
margin-top: 40px; /* double normal */
}
.mx_SettingsFlag {
line-height: calc($font-14px + 7px + 7px); /* 7px top & bottom padding */
color: $muted-fg-color;
font-size: $font-12px;
.mx_ToggleSwitch {
/* downsize the switch + ball */
width: $font-32px;
height: $font-15px;
&.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
left: calc(100% - $font-15px);
}
.mx_ToggleSwitch_ball {
width: $font-15px;
height: $font-15px;
border-radius: $font-15px;
}
}
}
}

139
res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss Normal file
View File

@@ -0,0 +1,139 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2018, 2019 , 2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_AccessSecretStorageDialog {
.mx_AccessSecretStorageDialog_titleWithIcon {
&::before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
margin-inline-end: $spacing-8;
position: relative;
top: 5px;
background-color: $primary-content;
}
&.mx_AccessSecretStorageDialog_resetBadge::before {
/* The image isn't capable of masking, so we use a background instead. */
background-image: url("$(res)/img/element-icons/warning-badge.svg");
background-size: 24px;
background-color: transparent;
}
&.mx_AccessSecretStorageDialog_secureBackupTitle::before {
mask-image: url("$(res)/img/feather-customised/secure-backup.svg");
}
&.mx_AccessSecretStorageDialog_securePhraseTitle::before {
mask-image: url("$(res)/img/feather-customised/secure-phrase.svg");
}
}
.mx_AccessSecretStorageDialog_primaryContainer {
.mx_AccessSecretStorageDialog_passPhraseInput {
width: 300px;
border: 1px solid $accent;
border-radius: 5px;
}
.mx_AccessSecretStorageDialog_keyStatus {
height: 30px;
}
.mx_AccessSecretStorageDialog_recoveryKeyEntry {
display: flex;
align-items: center;
.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput {
flex-grow: 1;
}
.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
margin: $spacing-16;
}
.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput {
display: none;
}
}
.mx_AccessSecretStorageDialog_recoveryKeyFeedback {
&::before {
content: "";
display: inline-block;
vertical-align: bottom;
width: 20px;
height: 20px;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 20px;
margin-inline-end: 5px;
}
&.mx_AccessSecretStorageDialog_recoveryKeyFeedback--valid {
color: $accent;
&::before {
mask-image: url("$(res)/img/feather-customised/check.svg");
background-color: $accent;
}
}
&.mx_AccessSecretStorageDialog_recoveryKeyFeedback--invalid {
color: $alert;
&::before {
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
background-color: $alert;
}
}
}
.mx_Dialog_buttons {
$spacingStart: $spacing-24; /* 16px icon + 8px padding */
text-align: initial;
display: flex;
flex-flow: column;
gap: 14px;
.mx_Dialog_buttons_additive {
float: none;
.mx_AccessSecretStorageDialog_reset {
position: relative;
padding-inline-start: $spacingStart;
/* To avoid bold styling inherent with <strong> elements */
font-weight: inherit;
&::before {
content: "";
display: inline-block;
position: absolute;
height: 16px;
width: 16px;
left: 0;
top: 2px; /* alignment */
background-image: url("$(res)/img/element-icons/warning-badge.svg");
background-size: contain;
}
.mx_AccessSecretStorageDialog_reset_link {
color: $alert;
}
}
}
.mx_Dialog_buttons_row {
gap: $spacing-16; /* TODO: needs normalization */
padding-inline-start: $spacingStart;
}
}
}
}

25
res/css/views/dialogs/security/_CreateCrossSigningDialog.pcss Normal file
View File

@@ -0,0 +1,25 @@
/*
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
Please see LICENSE files in the repository root for full details.
*/
.mx_CreateCrossSigningDialog {
/* Why you ask? Because CompleteSecurityBody is 600px so this is the width */
/* we end up when in there, but when in our own dialog we set our own width */
/* so need to fix it to something sensible as otherwise we'd end up either */
/* really wide or really narrow depending on the phase. I bet you wish you */
/* never asked. */
width: 560px;
details .mx_AccessibleButton {
margin: 1em 0; /* emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules */
}
}
.mx_CreateCrossSigningDialog .mx_Dialog_title {
/* TODO: Consider setting this for all dialog titles. */
margin-bottom: 1em;
}

73
res/css/views/dialogs/security/_CreateKeyBackupDialog.pcss Normal file
View File

@@ -0,0 +1,73 @@
/*
Copyright 2018-2024 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_CreateKeyBackupDialog .mx_Dialog_title {
/* TODO: Consider setting this for all dialog titles. */
margin-bottom: 1em;
}
.mx_CreateKeyBackupDialog_primaryContainer {
/* FIXME: plinth colour in new theme(s). background-color: $accent; */
padding: 20px;
}
.mx_CreateKeyBackupDialog_primaryContainer::after {
content: "";
clear: both;
display: block;
}
.mx_CreateKeyBackupDialog_passPhraseContainer {
display: flex;
align-items: flex-start;
}
.mx_CreateKeyBackupDialog_passPhraseInput {
flex: none;
width: 250px;
border: 1px solid $accent;
border-radius: 5px;
padding: 10px;
margin-bottom: 1em;
}
.mx_CreateKeyBackupDialog_passPhraseMatch {
margin-left: 20px;
}
.mx_CreateKeyBackupDialog_recoveryKeyHeader {
margin-bottom: 1em;
}
.mx_CreateKeyBackupDialog_recoveryKeyContainer {
display: flex;
}
.mx_CreateKeyBackupDialog_recoveryKey {
width: 262px;
padding: 20px;
color: $info-plinth-fg-color;
background-color: $info-plinth-bg-color;
margin-right: 12px;
}
.mx_CreateKeyBackupDialog_recoveryKeyButtons {
flex: 1;
display: flex;
align-items: center;
}
.mx_CreateKeyBackupDialog_recoveryKeyButtons button {
flex: 1;
white-space: nowrap;
}
.mx_CreateKeyBackupDialog {
details .mx_AccessibleButton {
margin: 1em 0; /* emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules */
}
}

178
res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss Normal file
View File

@@ -0,0 +1,178 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
Copyright 2018 New Vector Ltd
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_CreateSecretStorageDialog {
/* Why you ask? Because CompleteSecurityBody is 600px so this is the width */
/* we end up when in there, but when in our own dialog we set our own width */
/* so need to fix it to something sensible as otherwise we'd end up either */
/* really wide or really narrow depending on the phase. I bet you wish you */
/* never asked. */
width: 560px;
&.mx_SuccessDialog {
padding: 56px; /* 80px from design - 24px wrapper padding */
.mx_Dialog_title {
margin-bottom: $spacing-16;
}
}
.mx_SettingsFlag {
display: flex;
}
.mx_SettingsFlag_label {
flex: 1 1 0;
min-width: 0;
font-weight: var(--cpd-font-weight-semibold);
}
.mx_ToggleSwitch {
flex: 0 0 auto;
margin-left: 30px;
}
details .mx_AccessibleButton {
margin: 1em 0; /* emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules */
}
}
.mx_CreateSecretStorageDialog .mx_Dialog_title {
/* TODO: Consider setting this for all dialog titles. */
margin-bottom: 1em;
}
.mx_CreateSecretStorageDialog_titleWithIcon::before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
margin-right: 8px;
position: relative;
top: 5px;
background-color: $primary-content;
}
.mx_CreateSecretStorageDialog_secureBackupTitle::before {
mask-image: url("$(res)/img/feather-customised/secure-backup.svg");
}
.mx_CreateSecretStorageDialog_securePhraseTitle::before {
mask-image: url("$(res)/img/feather-customised/secure-phrase.svg");
}
.mx_CreateSecretStorageDialog_centeredTitle,
.mx_CreateSecretStorageDialog_centeredBody {
text-align: center;
}
.mx_CreateSecretStorageDialog_primaryContainer {
/* FIXME: plinth colour in new theme(s). background-color: $accent; */
padding-top: 20px;
&.mx_CreateSecretStorageDialog_recoveryKeyPrimarycontainer {
display: flex;
justify-content: center;
}
}
.mx_CreateSecretStorageDialog_primaryContainer::after {
content: "";
clear: both;
display: block;
}
.mx_CreateSecretStorageDialog_primaryContainer .mx_StyledRadioButton {
margin-bottom: 16px;
padding: 11px;
}
.mx_CreateSecretStorageDialog_optionTitle {
color: $dialog-title-fg-color;
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-18px;
padding-bottom: 10px;
}
.mx_CreateSecretStorageDialog_optionIcon {
display: inline-block;
width: 24px;
height: 24px;
margin-right: 8px;
position: relative;
top: 5px;
background-color: $primary-content;
}
.mx_CreateSecretStorageDialog_optionIcon_securePhrase {
mask-image: url("$(res)/img/feather-customised/secure-phrase.svg");
}
.mx_CreateSecretStorageDialog_optionIcon_secureBackup {
mask-image: url("$(res)/img/feather-customised/secure-backup.svg");
}
.mx_CreateSecretStorageDialog_passPhraseContainer {
display: flex;
align-items: flex-start;
}
.mx_Field.mx_CreateSecretStorageDialog_passPhraseField {
margin-top: 0px;
}
.mx_CreateSecretStorageDialog_passPhraseMatch {
width: 200px;
margin-left: 20px;
}
.mx_CreateSecretStorageDialog_recoveryKeyContainer {
display: inline-block;
}
.mx_CreateSecretStorageDialog_recoveryKey {
font-weight: bold;
text-align: center;
padding: 20px;
color: $info-plinth-fg-color;
background-color: $info-plinth-bg-color;
border-radius: 6px;
word-spacing: 1em;
margin-bottom: 20px;
code {
display: inline-block;
width: 30rem;
}
}
.mx_CreateSecretStorageDialog_recoveryKeyButtons {
align-items: center;
display: flex;
gap: 16px;
}
.mx_CreateSecretStorageDialog_recoveryKeyButtons_copyBtn {
flex-direction: column;
}
.mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton {
flex-grow: 1;
white-space: nowrap;
}
.mx_CreateSecretStorageDialog_continueSpinner {
margin-top: 33px;
text-align: right;
}
.mx_CreateSecretStorageDialog_continueSpinner img {
width: 20px;
height: 20px;
}

32
res/css/views/dialogs/security/_KeyBackupFailedDialog.pcss Normal file
View File

@@ -0,0 +1,32 @@
/*
Copyright 2018-2024 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_KeyBackupFailedDialog .mx_Dialog_title {
margin-bottom: 32px;
}
.mx_KeyBackupFailedDialog_title {
position: relative;
padding-left: 45px;
padding-bottom: 10px;
&::before {
mask: url("$(res)/img/e2e/lock-warning-filled.svg");
mask-repeat: no-repeat;
background-color: $primary-content;
content: "";
position: absolute;
top: -6px;
right: 0;
bottom: 0;
left: 0;
}
}
.mx_KeyBackupFailedDialog .mx_Dialog_buttons {
margin-top: 36px;
}

32
res/css/views/dialogs/security/_RestoreKeyBackupDialog.pcss Normal file
View File

@@ -0,0 +1,32 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.
Copyright 2018 New Vector Ltd
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_RestoreKeyBackupDialog_keyStatus {
height: 30px;
}
.mx_RestoreKeyBackupDialog_primaryContainer {
/* FIXME: plinth colour in new theme(s). background-color: $accent; */
padding: 20px;
}
.mx_RestoreKeyBackupDialog_passPhraseInput,
.mx_RestoreKeyBackupDialog_recoveryKeyInput {
width: 300px;
border: 1px solid $accent;
border-radius: 5px;
padding: 10px;
}
.mx_RestoreKeyBackupDialog_content > div {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 110px; /* Empirically measured */
}