mv element.io @types __mocks__/ debian docker module_system/ playwright res src test webapp Dockerfile .dockerignore .eslintignore .stylelintrc.cjs babel.config.cjs recorder-worklet-loader.cjs .modernizr.json components.json config.json config.sample.json package.json project.json tsconfig.json tsconfig.module_system.json jest.config.ts playwright.config.ts webpack.config.ts build_config.sample.yaml apps/web/
mkdir apps/web/scripts
mv scripts/{cleanup.sh,ci_package.sh,copy-res.ts,deploy.py,package.sh} apps/web/scripts
And a couple of gitignore tweaks
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
@@ -0,0 +1,276 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2020 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_AuthBody {
|
||||
width: 500px;
|
||||
font-size: $font-12px;
|
||||
color: $authpage-secondary-color;
|
||||
background-color: $background;
|
||||
border-radius: 0 var(--cpd-space-6x) var(--cpd-space-6x) 0;
|
||||
padding: 25px 60px;
|
||||
box-sizing: border-box;
|
||||
|
||||
strong {
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
}
|
||||
|
||||
&.mx_AuthBody_flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $font-24px;
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
margin-top: $spacing-8;
|
||||
color: $authpage-primary-color;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font: var(--cpd-font-body-md-semibold);
|
||||
color: $authpage-secondary-color;
|
||||
}
|
||||
|
||||
h2.mx_AuthBody_centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a:link,
|
||||
a:hover,
|
||||
a:visited {
|
||||
color: $accent;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mx_AuthBody_icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.mx_AuthBody_lockIcon {
|
||||
color: $secondary-content;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.mx_AuthBody_text {
|
||||
margin-bottom: $spacing-48;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
color: $authpage-primary-color;
|
||||
}
|
||||
|
||||
.mx_Field label {
|
||||
color: $authpage-secondary-color;
|
||||
}
|
||||
|
||||
.mx_Field input,
|
||||
.mx_Field select {
|
||||
color: $authpage-primary-color;
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
.mx_Field_labelAlwaysTopLeft label,
|
||||
.mx_Field select + label /* Always show a select's label on top to not collide with the value */,
|
||||
.mx_Field input:focus + label,
|
||||
.mx_Field input:not(:placeholder-shown) + label,
|
||||
.mx_Field textarea:focus + label,
|
||||
.mx_Field textarea:not(:placeholder-shown) + label {
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
input.error {
|
||||
color: $alert;
|
||||
}
|
||||
|
||||
.mx_Login_submit {
|
||||
height: 32px;
|
||||
margin-top: $spacing-16;
|
||||
}
|
||||
|
||||
.mx_ErrorMessage {
|
||||
margin-bottom: 12px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.mx_Field input {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mx_Field_select::before {
|
||||
background-color: $authpage-primary-color;
|
||||
}
|
||||
|
||||
.mx_Dropdown {
|
||||
color: $authpage-primary-color;
|
||||
}
|
||||
|
||||
.mx_Dropdown_arrow {
|
||||
color: $authpage-primary-color;
|
||||
}
|
||||
|
||||
.mx_Dropdown_menu {
|
||||
background-color: $background;
|
||||
|
||||
.mx_Dropdown_option_highlight {
|
||||
background-color: $authpage-focus-bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* specialisation for password reset views */
|
||||
.mx_AuthBody.mx_AuthBody_forgot-password {
|
||||
font: var(--cpd-font-body-md-regular);
|
||||
color: $primary-content;
|
||||
padding: 50px 32px;
|
||||
min-height: 600px;
|
||||
|
||||
h1 {
|
||||
margin: $spacing-24 0;
|
||||
}
|
||||
|
||||
.mx_AuthBody_button-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mx_Login_submit {
|
||||
margin: 0 0 $spacing-16;
|
||||
}
|
||||
|
||||
.mx_AuthBody_text {
|
||||
margin-bottom: $spacing-32;
|
||||
|
||||
p {
|
||||
margin: 0 0 $spacing-8;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AuthBody_sign-in-instead-button {
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
padding: $spacing-4;
|
||||
}
|
||||
|
||||
.mx_AuthBody_fieldRow {
|
||||
margin-bottom: $spacing-24;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton.mx_AccessibleButton_hasKind {
|
||||
background: none;
|
||||
|
||||
&:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AuthBody_did-not-receive {
|
||||
align-items: center;
|
||||
color: $secondary-content;
|
||||
display: flex;
|
||||
gap: $spacing-8;
|
||||
}
|
||||
|
||||
.mx_AuthBody_resend-button {
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
color: $accent;
|
||||
display: flex;
|
||||
gap: $spacing-4;
|
||||
padding: $spacing-4;
|
||||
|
||||
&:hover {
|
||||
background-color: $system;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AuthBody_emailPromptIcon {
|
||||
width: 57px;
|
||||
}
|
||||
|
||||
.mx_AuthBody_emailPromptIcon--shifted {
|
||||
margin-bottom: -17px; /* Prevent layout jump by relative positioning. */
|
||||
position: relative;
|
||||
top: -17px; /* This icon is higher than the other icons. Shift up to prevent icon jumping. */
|
||||
width: 57px;
|
||||
}
|
||||
|
||||
.mx_AuthBody_fieldRow {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mx_AuthBody_fieldRow > .mx_Field {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.mx_AuthBody_fieldRow > .mx_Field:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.mx_AuthBody_fieldRow > .mx_Field:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mx_AuthBody_paddedFooter {
|
||||
height: 80px; /* height of the submit button + register link */
|
||||
padding-top: 28px;
|
||||
text-align: center;
|
||||
|
||||
.mx_AuthBody_paddedFooter_title {
|
||||
margin-top: $spacing-16;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
|
||||
.mx_InlineSpinner svg {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AuthBody_paddedFooter_subtitle {
|
||||
margin-top: $spacing-8;
|
||||
font-size: $font-10px;
|
||||
line-height: $font-14px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AuthBody_changeFlow {
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
> a {
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SSOButtons + .mx_AuthBody_changeFlow {
|
||||
margin-top: $spacing-24;
|
||||
}
|
||||
|
||||
.mx_AuthBody_spinner {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.mx_AuthBody {
|
||||
border-radius: 4px;
|
||||
width: auto;
|
||||
max-width: 500px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
/*
|
||||
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_AuthFooter {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font: var(--cpd-font-body-md-regular);
|
||||
opacity: 0.72;
|
||||
padding: 20px 0;
|
||||
background: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 0.8));
|
||||
}
|
||||
|
||||
.mx_AuthFooter a:link,
|
||||
.mx_AuthFooter a:hover,
|
||||
.mx_AuthFooter a:visited {
|
||||
color: $accent-fg-color;
|
||||
margin: 0 22px;
|
||||
}
|
||||
@@ -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_AuthHeader {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 206px;
|
||||
padding: 25px 25px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.mx_AuthHeader {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
/*
|
||||
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_AuthHeaderLogo {
|
||||
margin-top: 15px;
|
||||
flex: 1;
|
||||
padding: 0 25px;
|
||||
}
|
||||
|
||||
.mx_AuthHeaderLogo img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.mx_AuthHeaderLogo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
/*
|
||||
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_AuthPage {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: $authpage-bg-color;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.mx_AuthPage_modal {
|
||||
display: flex;
|
||||
margin: 100px auto auto;
|
||||
border-radius: var(--cpd-space-6x);
|
||||
background-color: $authpage-modal-bg-color;
|
||||
|
||||
@media only screen and (max-height: 768px) {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&.mx_AuthPage_modal_withBlur {
|
||||
/* Apply a blurred shadow around the modal */
|
||||
box-shadow: 0 2px 4px 0 rgb(0, 0, 0, 0.33);
|
||||
|
||||
.mx_AuthPage_modalContent {
|
||||
/* Make the modal's background semitransparent */
|
||||
background-color: $authpage-modal-content-with-blur-bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2020 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_CompleteSecurityBody {
|
||||
color: $authpage-primary-color;
|
||||
background-color: $background;
|
||||
border-radius: 4px;
|
||||
padding: 20px 20px 60px 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
h2 {
|
||||
font-size: $font-24px;
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font: var(--cpd-font-body-md-semibold);
|
||||
}
|
||||
|
||||
a:link,
|
||||
a:hover,
|
||||
a:visited {
|
||||
color: $accent;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
/*
|
||||
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_CountryDropdown .mx_Dropdown_input .mx_Dropdown_option {
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
.mx_CountryDropdown .mx_Dropdown_arrow {
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
.mx_CountryDropdown_shortOption {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mx_CountryDropdown_option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2023 The Matrix.org Foundation C.I.C.
|
||||
Copyright 2017 Vector Creations Ltd
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_InteractiveAuthEntryComponents {
|
||||
.mx_InteractiveAuthEntryComponents_termsSubmit {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 5px;
|
||||
width: 100%;
|
||||
box-sizing: border-box; /* prevent overflowing */
|
||||
}
|
||||
}
|
||||
|
||||
.mx_InteractiveAuthEntryComponents_msisdnWrapper {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mx_InteractiveAuthEntryComponents_msisdnEntry {
|
||||
font-size: 200%;
|
||||
font-weight: bold;
|
||||
border: 1px solid $strong-input-border-color;
|
||||
border-radius: 3px;
|
||||
width: 6em;
|
||||
}
|
||||
|
||||
.mx_InteractiveAuthEntryComponents_msisdnEntry:focus {
|
||||
border: 1px solid $accent;
|
||||
}
|
||||
|
||||
.mx_InteractiveAuthEntryComponents_msisdnSubmit {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* XXX: This should be a common button class */
|
||||
.mx_InteractiveAuthEntryComponents_msisdnSubmit:disabled {
|
||||
background-color: $light-fg-color;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.mx_InteractiveAuthEntryComponents_termsPolicy {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_InteractiveAuthEntryComponents_passwordSection {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.mx_InteractiveAuthEntryComponents_sso_buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_InteractiveAuthEntryComponents_emailWrapper {
|
||||
/* "Resend" button/link */
|
||||
.mx_AccessibleButton_kind_link_inline {
|
||||
/* We need this to be an inline-block so positioning works correctly */
|
||||
display: inline-block !important;
|
||||
|
||||
/* Spinner as end adornment of the "resend" button/link */
|
||||
.mx_Spinner {
|
||||
/* Spinners are usually block elements, but we need it as inline element */
|
||||
display: inline-flex !important;
|
||||
/* Spinners by default fill all available width, but we don't want that */
|
||||
width: auto !important;
|
||||
/* We need to center the spinner relative to the button/link */
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
/*
|
||||
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_AuthBody_language {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx_AuthBody_language .mx_Dropdown_input {
|
||||
border: none;
|
||||
font: var(--cpd-font-body-md-semibold);
|
||||
color: $authpage-lang-color;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.mx_AuthBody_language .mx_Dropdown_arrow {
|
||||
color: $authpage-lang-color;
|
||||
}
|
||||
@@ -0,0 +1,243 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_LoginWithQRSection p {
|
||||
margin-top: 0;
|
||||
margin-bottom: $spacing-16;
|
||||
}
|
||||
|
||||
.mx_LoginWithQRSection {
|
||||
.mx_AccessibleButton_kind_primary + p {
|
||||
color: var(--cpd-color-text-secondary);
|
||||
margin-top: var(--cpd-space-2x);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LoginWithQRSection .mx_AccessibleButton svg {
|
||||
margin-right: $spacing-12;
|
||||
}
|
||||
|
||||
.mx_AuthPage .mx_LoginWithQR {
|
||||
.mx_AccessibleButton {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton + .mx_AccessibleButton {
|
||||
margin-top: $spacing-8;
|
||||
}
|
||||
|
||||
font-size: $font-15px;
|
||||
}
|
||||
|
||||
.mx_UserSettingsDialog .mx_LoginWithQR {
|
||||
font: var(--cpd-font-body-md-regular);
|
||||
|
||||
h1 {
|
||||
font-size: $font-24px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: $spacing-24;
|
||||
}
|
||||
|
||||
.mx_QRCode {
|
||||
margin: $spacing-28 0;
|
||||
}
|
||||
|
||||
.mx_LoginWithQR_qrWrapper {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LoginWithQR {
|
||||
min-height: 350px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
h1 > svg {
|
||||
&.normal {
|
||||
color: $secondary-content;
|
||||
}
|
||||
&.error {
|
||||
color: $alert;
|
||||
}
|
||||
&.success {
|
||||
color: $accent;
|
||||
}
|
||||
height: 1.3em;
|
||||
margin-right: $spacing-8;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_LoginWithQR_confirmationDigits {
|
||||
text-align: center;
|
||||
margin: $spacing-48 auto;
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
font-size: $font-24px;
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
.mx_LoginWithQR_confirmationAlert {
|
||||
border: 1px solid $quaternary-content;
|
||||
border-radius: $spacing-8;
|
||||
padding: $spacing-8;
|
||||
line-height: 1.5em;
|
||||
display: flex;
|
||||
|
||||
svg {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LoginWithQR_separator {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
ol {
|
||||
padding-inline-start: 0;
|
||||
list-style: none; /* list markers do not support the outlined number styling we need */
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
padding-left: var(--cpd-space-7x);
|
||||
color: 1px solid $input-placeholder;
|
||||
margin-bottom: var(--cpd-space-4x);
|
||||
line-height: 20px;
|
||||
text-align: initial;
|
||||
}
|
||||
|
||||
/* Circled number list item marker */
|
||||
li::before {
|
||||
content: counter(list-item);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid $input-placeholder;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
label[for="mx_LoginWithQR_checkCode"] {
|
||||
margin-top: var(--cpd-space-6x);
|
||||
color: var(--cpd-color-text-primary);
|
||||
margin-bottom: var(--cpd-space-1x);
|
||||
}
|
||||
|
||||
.mx_LoginWithQR_icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
padding: var(--cpd-space-3x);
|
||||
gap: 10px;
|
||||
|
||||
background-color: var(--cpd-color-bg-subtle-secondary);
|
||||
svg {
|
||||
color: var(--cpd-color-icon-secondary);
|
||||
}
|
||||
|
||||
&.mx_LoginWithQR_icon--success {
|
||||
background-color: var(--cpd-color-bg-success-subtle);
|
||||
svg {
|
||||
color: var(--cpd-color-icon-success-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_LoginWithQR_icon--critical {
|
||||
background-color: var(--cpd-color-bg-critical-subtle);
|
||||
svg {
|
||||
color: var(--cpd-color-icon-critical-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LoginWithQR_checkCode_input {
|
||||
margin-bottom: var(--cpd-space-1x);
|
||||
text-align: initial;
|
||||
|
||||
input {
|
||||
/* Workaround for one of the input rules in _common.pcss being not specific enough */
|
||||
padding: 0;
|
||||
padding-inline-start: calc(40px / 2 - (1ch / 2));
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LoginWithQR_heading {
|
||||
display: flex;
|
||||
gap: $spacing-12;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_LoginWithQR_BackButton {
|
||||
height: $spacing-28;
|
||||
border-radius: $spacing-28;
|
||||
padding: $spacing-4;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--cpd-color-bg-subtle-secondary);
|
||||
svg {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LoginWithQR_breadcrumbs {
|
||||
font-size: $font-13px;
|
||||
color: $secondary-content;
|
||||
}
|
||||
|
||||
.mx_LoginWithQR_main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
color: $primary-content;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
color: $secondary-content;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_LoginWithQR_error .mx_LoginWithQR_main {
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.mx_LoginWithQR_buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $spacing-16;
|
||||
margin-top: var(--cpd-space-6x);
|
||||
|
||||
.mx_AccessibleButton {
|
||||
width: 300px;
|
||||
height: 48px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_QRCode {
|
||||
border-radius: $spacing-8;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mx_LoginWithQR_spinner {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
$PassphraseStrengthHigh: $accent;
|
||||
$PassphraseStrengthMedium: $username-variant5-color;
|
||||
$PassphraseStrengthLow: $alert;
|
||||
|
||||
progress.mx_PassphraseField_progress {
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
height: 4px;
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 0;
|
||||
|
||||
@mixin ProgressBarBorderRadius "2px";
|
||||
@mixin ProgressBarColour $PassphraseStrengthLow;
|
||||
&[value="2"],
|
||||
&[value="3"] {
|
||||
@mixin ProgressBarColour $PassphraseStrengthMedium;
|
||||
}
|
||||
&[value="4"] {
|
||||
@mixin ProgressBarColour $PassphraseStrengthHigh;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
/*
|
||||
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_Welcome {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
&.mx_WelcomePage_registrationDisabled {
|
||||
.mx_ButtonCreateAccount {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Welcome .mx_AuthBody_language {
|
||||
width: 160px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Invert image colours in dark mode. */
|
||||
.cpd-theme-dark .mx_WelcomePage_logo {
|
||||
filter: invert(1);
|
||||
}
|
||||
Reference in New Issue
Block a user