imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge matrix-react-sdk into element-web

Browse source 
Merge remote-tracking branch 'repomerge/t3chguy/repomerge' into t3chguy/repo-merge

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-10-15 14:57:26 +01:00
commit f0ee7f7905
No known key found for this signature in database
GPG key ID: A2B008A5F49F5D0D
3265 changed files with 484599 additions and 699 deletions
Download patch file Download diff file Expand all files Collapse all files

59
res/css/views/audio_messages/_AudioPlayer.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_MediaBody.mx_AudioPlayer_container {
padding: 16px 12px 12px 12px;
.mx_AudioPlayer_primaryContainer {
display: flex;
.mx_PlayPauseButton {
margin-right: 8px;
}
.mx_AudioPlayer_mediaInfo {
flex: 1;
overflow: hidden; /* makes the ellipsis on the file name work */
& > * {
display: block;
}
.mx_AudioPlayer_mediaName {
color: $primary-content;
font-size: $font-15px;
line-height: $font-15px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding-bottom: 4px; /* mimics the line-height differences in the Figma */
}
.mx_AudioPlayer_byline {
font-size: $font-12px;
line-height: $font-12px;
}
}
}
.mx_AudioPlayer_seek {
display: flex;
align-items: center;
.mx_SeekBar {
flex: 1;
}
.mx_Clock {
min-width: $font-42px; /* for flexbox */
padding-left: $spacing-4; /* isolate from seek bar */
text-align: justify;
white-space: nowrap;
}
}
}

41
res/css/views/audio_messages/_PlayPauseButton.pcss Normal file
View file

@ -0,0 +1,41 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_PlayPauseButton {
position: relative;
width: 32px;
height: 32px;
min-width: 32px; /* for when the button is used in a flexbox */
min-height: 32px; /* for when the button is used in a flexbox */
border-radius: 32px;
background-color: $system;
&::before {
content: "";
position: absolute; /* sizing varies by icon */
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-size: contain;
top: 6px; /* center */
left: 6px; /* center */
width: 20px;
height: 20px;
}
&.mx_PlayPauseButton_disabled::before {
opacity: 0.5;
}
&.mx_PlayPauseButton_play::before {
mask-image: url("@vector-im/compound-design-tokens/icons/play-solid.svg");
}
&.mx_PlayPauseButton_pause::before {
mask-image: url("@vector-im/compound-design-tokens/icons/pause-solid.svg");
}
}

105
res/css/views/audio_messages/_PlaybackContainer.pcss Normal file
View file

@ -0,0 +1,105 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2021, 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.
*/
/* Dev note: there's no actual component called <PlaybackContainer />. These classes */
/* are shared amongst multiple voice message components. */
/* Container for live recording and playback controls */
.mx_MediaBody.mx_VoiceMessagePrimaryContainer {
/* The waveform (right) has a 1px padding on it that we want to account for, otherwise */
/* inherit from mx_MediaBody */
padding-right: 11px;
/* Cheat at alignment a bit */
display: flex;
align-items: center;
contain: content;
.mx_Waveform,
.mx_RecordingPlayback_timelineLayoutMiddle {
min-width: 0; /* Prevent a blowout */
}
/* Waveforms are present in live recording only */
.mx_Waveform {
.mx_Waveform_bar {
background-color: $quaternary-content;
height: 100%;
/* Variable set by a JS component */
transform: scaleY(max(0.05, var(--barHeight)));
&.mx_Waveform_bar_100pct {
/* Small animation to remove the mechanical feel of progress */
transition: background-color 250ms ease;
background-color: $secondary-content;
}
}
}
.mx_Clock {
width: $font-42px; /* we're not using a monospace font, so fake it */
min-width: $font-42px; /* force sensible layouts in awkward flexboxes (file panel, for example) */
padding-right: 6px; /* with the fixed width this ends up as a visual 8px most of the time, as intended. */
padding-left: 8px; /* isolate from recording circle / play control */
}
.mx_RecordingPlayback_timelineLayoutMiddle {
margin-left: 8px;
margin-right: 6px;
position: relative;
display: inline-block;
flex: 1;
height: 30px; /* same height as mx_Waveform, needed for automatic vertical centering */
.mx_Waveform {
left: 0;
top: 0;
}
.mx_SeekBar {
position: absolute;
left: 0;
height: 30px;
top: -2px; /* visually vertically centered */
/* Hide the hairline progress bar since we're at 100% height. Need to have distinct rules */
/* because CSS is weird. */
background: none;
&::before {
background: none;
}
&::-moz-range-progress {
background: none;
}
/* Make the thumb easier to see. Like the SeekBar original styles, these need to be */
/* distinct. We make it transparent so it doesn't show up on the UI, but also larger */
/* so it's easier to grab by mouse users in some browsers. Most browsers let the user */
/* move and drag the thumb regardless of hitting the thumb, however. */
&::-webkit-slider-thumb {
width: 10px;
height: 10px;
background-color: transparent;
}
&::-moz-range-thumb {
width: 10px;
height: 10px;
background-color: transparent;
}
}
/* For timeline-rendered playback, the clock is on the other side of the waveform. */
& + .mx_Clock {
text-align: right;
/* Take the padding off the clock because it's accounted for by the `timelineLayoutMiddle` */
padding: 0;
}
}
}

96
res/css/views/audio_messages/_SeekBar.pcss Normal file
View file

@ -0,0 +1,96 @@
/*
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.
*/
/* CSS inspiration from: */
/* * https://www.w3schools.com/howto/howto_js_rangeslider.asp */
/* * https://stackoverflow.com/a/28283806 */
/* * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */
.mx_SeekBar {
/* Dev note: we deliberately do not have the -ms-track (and friends) selectors because we don't */
/* need to support IE. */
appearance: none; /* default style override */
width: 100%;
height: 1px;
background: $quaternary-content;
outline: none; /* remove blue selection border */
position: relative; /* for before+after pseudo elements later on */
cursor: pointer;
&::-webkit-slider-thumb {
appearance: none; /* default style override */
/* Dev note: This needs to be duplicated with the -moz-range-thumb selector */
/* because otherwise Edge (webkit) will fail to see the styles and just refuse */
/* to apply them. */
width: 8px;
height: 8px;
border-radius: 8px;
background-color: $tertiary-content;
cursor: pointer;
}
&::-moz-range-thumb {
width: 8px;
height: 8px;
border-radius: 8px;
background-color: $tertiary-content;
cursor: pointer;
/* Firefox adds a border on the thumb */
border: none;
}
/* This is for webkit support, but we can't limit the functionality of it to just webkit */
/* browsers. Firefox responds to webkit-prefixed values now, which means we can't use media */
/* or support queries to selectively apply the rule. An upside is that this CSS doesn't work */
/* in firefox, so it's just wasted CPU/GPU time. */
&::before {
/* ::before to ensure it ends up under the thumb */
content: "";
background-color: $tertiary-content;
/* Absolute positioning to ensure it overlaps with the existing bar */
position: absolute;
top: 0;
left: 0;
/* Sizing to match the bar */
width: 100%;
height: 1px;
/* And finally dynamic width without overly hurting the rendering engine. */
transform-origin: 0 100%;
transform: scaleX(var(--fillTo));
}
/* This is firefox's built-in support for the above, with 100% less hacks. */
&::-moz-range-progress {
background-color: $tertiary-content;
height: 1px;
}
&:disabled {
opacity: 0.5;
}
/* Increase clickable area for the slider (approximately same size as browser default) */
/* We do it this way to keep the same padding and margins of the element, avoiding margin math. */
/* Source: https://front-back.com/expand-clickable-areas-for-a-better-touch-experience/ */
&::after {
content: "";
position: absolute;
top: -6px;
bottom: -6px;
left: 0;
right: 0;
}
}

32
res/css/views/audio_messages/_Waveform.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_Waveform {
position: relative;
height: 30px; /* tallest bar can only be 30px */
top: 1px; /* because of our border trick (see below), we're off by 1px of aligntment */
display: flex;
align-items: center; /* so the bars grow from the middle */
overflow: hidden; /* this is cheaper than a `max-height: calc(100% - 4px)` in the bar's CSS. */
/* A bar is meant to be a 2x2 circle when at zero height, and otherwise a 2px wide line */
/* with rounded caps. */
.mx_Waveform_bar {
width: 0; /* 0px width means we'll end up using the border as our width */
border: 1px solid transparent; /* transparent means we'll use the background colour */
border-radius: 2px; /* rounded end caps, based on the border */
min-height: 0; /* like the width, we'll rely on the border to give us height */
max-height: 100%; /* this makes the `height: 42%` work on the element */
margin-left: 1px; /* we want 2px between each bar, so 1px on either side for balance */
margin-right: 1px;
/* background color is handled by the parent components */
}
}

277
res/css/views/auth/_AuthBody.pcss Normal file
View file

@ -0,0 +1,277 @@
/*
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
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 4px 4px 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 {
background: $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 {
font-weight: var(--cpd-font-weight-semibold);
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 img {
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;
}
}

22
res/css/views/auth/_AuthFooter.pcss Normal file
View file

@ -0,0 +1,22 @@
/*
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_AuthFooter {
text-align: center;
width: 100%;
font: var(--cpd-font-body-md-regular);
opacity: 0.72;
padding: 20px 0;
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}
.mx_AuthFooter a:link,
.mx_AuthFooter a:hover,
.mx_AuthFooter a:visited {
color: $accent-fg-color;
margin: 0 22px;
}

20
res/css/views/auth/_AuthHeader.pcss Normal file
View file

@ -0,0 +1,20 @@
/*
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_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;
}
}

22
res/css/views/auth/_AuthHeaderLogo.pcss Normal file
View file

@ -0,0 +1,22 @@
/*
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_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;
}
}

32
res/css/views/auth/_AuthPage.pcss Normal file
View file

@ -0,0 +1,32 @@
/*
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_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: 4px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
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;
}
}

34
res/css/views/auth/_CompleteSecurityBody.pcss Normal file
View file

@ -0,0 +1,34 @@
/*
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
Please see LICENSE files in the repository root for full details.
*/
.mx_CompleteSecurityBody {
width: 600px;
color: $authpage-primary-color;
background-color: $background;
border-radius: 4px;
padding: 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;
}
}

25
res/css/views/auth/_CountryDropdown.pcss Normal file
View file

@ -0,0 +1,25 @@
/*
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_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;
}

84
res/css/views/auth/_InteractiveAuthEntryComponents.pcss Normal file
View file

@ -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
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;
}
}
}

21
res/css/views/auth/_LanguageSelector.pcss Normal file
View file

@ -0,0 +1,21 @@
/*
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_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 {
background: $authpage-lang-color;
}

243
res/css/views/auth/_LoginWithQR.pcss Normal file
View file

@ -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
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%;
}
}

30
res/css/views/auth/_PassphraseField.pcss Normal file
View file

@ -0,0 +1,30 @@
/*
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.
*/
$PassphraseStrengthHigh: $accent;
$PassphraseStrengthMedium: $username-variant5-color;
$PassphraseStrengthLow: $alert;
progress.mx_PassphraseField_progress {
appearance: none;
width: 100%;
border: 0;
height: 4px;
position: absolute;
top: -12px;
@mixin ProgressBarBorderRadius "2px";
@mixin ProgressBarColour $PassphraseStrengthLow;
&[value="2"],
&[value="3"] {
@mixin ProgressBarColour $PassphraseStrengthMedium;
}
&[value="4"] {
@mixin ProgressBarColour $PassphraseStrengthHigh;
}
}

22
res/css/views/auth/_Welcome.pcss Normal file
View file

@ -0,0 +1,22 @@
/*
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_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;
}

15
res/css/views/avatars/_BaseAvatar.pcss Normal file
View file

@ -0,0 +1,15 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2015, 2016 OpenMarket Ltd
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
button.mx_BaseAvatar {
/* <button> is a form element and by default it uses the user agent (browser) styling.
We want it to inherit the font-family and line-height from its parent.
*/
font-family: inherit;
line-height: inherit;
}

73
res/css/views/avatars/_DecoratedRoomAvatar.pcss Normal file
View file

@ -0,0 +1,73 @@
/*
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_DecoratedRoomAvatar,
.mx_ExtraTile {
position: relative;
contain: content;
line-height: 0;
&.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
mask-image: url("$(res)/img/element-icons/roomlist/decorated-avatar-mask.svg");
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
.mx_DecoratedRoomAvatar_icon {
position: absolute;
/* the following percentage based sizings are to match the scalable svg mask for the cutout */
bottom: 6.25%; /* 2px for a 32x32 avatar */
right: 6.25%;
width: 25%; /* 8px for a 32x32 avatar */
height: 25%;
border-radius: 50%;
}
.mx_DecoratedRoomAvatar_icon::before {
content: "";
width: 100%;
height: 100%;
right: 0;
position: absolute;
border-radius: 8px;
}
.mx_DecoratedRoomAvatar_icon_globe::before {
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $secondary-content;
mask-image: url("$(res)/img/globe.svg");
}
.mx_DecoratedRoomAvatar_icon_offline::before {
background-color: $presence-offline;
}
.mx_DecoratedRoomAvatar_icon_online::before {
background-color: $accent;
}
.mx_DecoratedRoomAvatar_icon_away::before {
background-color: $presence-away;
}
.mx_DecoratedRoomAvatar_icon_busy::before {
background-color: $presence-busy;
}
.mx_NotificationBadge,
.mx_RoomTile_badgeContainer {
position: absolute;
top: 0;
right: 0;
height: 18px;
width: 18px;
}
}

11
res/css/views/avatars/_WidgetAvatar.pcss Normal file
View file

@ -0,0 +1,11 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_WidgetAvatar {
border-radius: 4px;
}

46
res/css/views/avatars/_WithPresenceIndicator.pcss Normal file
View file

@ -0,0 +1,46 @@
/*
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_WithPresenceIndicator {
position: relative;
contain: content;
line-height: 0;
.mx_WithPresenceIndicator_icon {
position: absolute;
right: -2px;
bottom: -2px;
}
.mx_WithPresenceIndicator_icon::before {
content: "";
width: 100%;
height: 100%;
right: 0;
bottom: 0;
position: absolute;
border: 2px solid var(--cpd-color-bg-canvas-default);
border-radius: 50%;
}
.mx_WithPresenceIndicator_icon_offline::before {
background-color: $presence-offline;
}
.mx_WithPresenceIndicator_icon_online::before {
background-color: $accent;
}
.mx_WithPresenceIndicator_icon_away::before {
background-color: $presence-away;
}
.mx_WithPresenceIndicator_icon_busy::before {
background-color: $presence-busy;
}
}

124
res/css/views/beta/_BetaCard.pcss Normal file
View file

@ -0,0 +1,124 @@
/*
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_BetaCard {
padding: $spacing-24;
background-color: $panels;
border-radius: 8px;
box-sizing: border-box;
color: $secondary-content;
.mx_BetaCard_columns {
display: flex;
flex-flow: wrap;
gap: $spacing-20;
justify-content: center;
.mx_BetaCard_columns_description {
flex: 1;
.mx_BetaCard_title {
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-18px;
line-height: $font-22px;
color: $primary-content;
margin: $spacing-4 0 14px;
display: flex;
align-items: center;
column-gap: $spacing-12;
}
.mx_BetaCard_caption {
font-size: $font-15px;
line-height: $font-20px;
}
.mx_BetaCard_buttons {
display: flex;
flex-wrap: wrap-reverse;
gap: $spacing-12;
margin: $spacing-20 auto 0;
.mx_AccessibleButton {
padding: 7px 40px;
width: auto;
flex: 1;
white-space: nowrap; /* text might overflow */
&:nth-child(1) {
order: 2; /* Place feedback button top and right */
}
}
}
.mx_BetaCard_refreshWarning {
margin-top: $spacing-8;
font-size: $font-10px;
text-align: center;
}
.mx_BetaCard_faq {
margin-top: $spacing-20;
font: var(--cpd-font-body-xs-regular);
> h4 {
margin: $spacing-12 0 0;
}
> p {
margin: 0;
}
}
}
.mx_BetaCard_columns_image_wrapper {
margin: auto 0;
.mx_BetaCard_columns_image {
width: 100%;
max-width: 300px;
object-fit: contain;
height: 100%;
border-radius: 4px;
}
}
}
.mx_BetaCard_relatedSettings {
.mx_SettingsFlag {
margin: $spacing-16 0 0;
font-size: $font-15px;
line-height: $font-24px;
color: $primary-content;
.mx_SettingsFlag_microcopy {
margin-top: $spacing-4;
font: var(--cpd-font-body-sm-regular);
}
}
}
}
.mx_BetaCard_betaPill {
background-color: $accent-alt;
padding: $spacing-4 10px;
border-radius: 8px;
text-transform: uppercase;
font-size: $font-12px;
font-weight: var(--cpd-font-weight-semibold);
line-height: 15px;
color: $button-primary-fg-color;
display: inline-block;
vertical-align: text-bottom;
word-break: keep-all; /* avoid multiple lines on CJK language */
&.mx_AccessibleButton {
cursor: pointer;
}
}

19
res/css/views/context_menus/_DeviceContextMenu.pcss Normal file
View file

@ -0,0 +1,19 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_DeviceContextMenu {
max-width: 252px;
.mx_DeviceContextMenu_device_icon {
display: none;
}
.mx_IconizedContextMenu_label {
padding-left: 0 !important;
}
}

178
res/css/views/context_menus/_IconizedContextMenu.pcss Normal file
View file

@ -0,0 +1,178 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2020-2023 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.
*/
/* A context menu that largely fits the | [icon] [label] | format. */
.mx_IconizedContextMenu {
min-width: 146px;
width: max-content;
/* override default ul styles */
margin: 0;
padding: 0;
.mx_IconizedContextMenu_optionList {
& > * {
padding-left: 20px;
padding-right: 20px;
}
.mx_IconizedContextMenu_optionList_label {
font-size: $font-15px;
font-weight: var(--cpd-font-weight-semibold);
}
/* the notFirst class is for cases where the optionList might be under a header of sorts. */
&:nth-child(n + 2),
.mx_IconizedContextMenu_optionList_notFirst {
border-top: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
}
/* round the top corners of the top button for the hover effect to be bounded */
&:first-child .mx_IconizedContextMenu_item:first-child {
border-radius: 8px 8px 0 0; /* radius matches .mx_ContextualMenu */
}
/* round the bottom corners of the bottom button for the hover effect to be bounded */
&:last-child .mx_IconizedContextMenu_item:last-child {
border-radius: 0 0 8px 8px; /* radius matches .mx_ContextualMenu */
}
/* round all corners of the only button for the hover effect to be bounded */
&:first-child:last-child .mx_IconizedContextMenu_item:first-child:last-child {
border-radius: 8px; /* radius matches .mx_ContextualMenu */
}
.mx_IconizedContextMenu_item {
/* pad the inside of the button so that the hover background is padded too */
padding-top: 12px;
padding-bottom: 12px;
text-decoration: none;
color: $primary-content;
font: var(--cpd-font-body-md-regular);
/* Create a flexbox to more easily define the list items */
display: flex;
align-items: center;
&:hover,
&:focus-visible {
background-color: var(--cpd-color-bg-action-secondary-hovered);
}
&.mx_AccessibleButton_disabled {
opacity: 0.5;
cursor: not-allowed;
}
img,
.mx_IconizedContextMenu_icon {
/* icons */
width: 16px;
min-width: 16px;
max-width: 16px;
}
span.mx_IconizedContextMenu_label {
/* labels */
width: 100%;
flex: 1;
/* Ellipsize any text overflow */
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.mx_IconizedContextMenu_icon + .mx_IconizedContextMenu_label {
padding-left: 14px;
}
.mx_BetaCard_betaPill {
margin-left: 16px;
}
}
}
.mx_IconizedContextMenu_icon {
position: relative;
width: 16px;
height: 16px;
&::before {
content: "";
width: inherit;
height: inherit;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: var(--cpd-color-icon-primary);
}
}
.mx_IconizedContextMenu_optionList_red {
.mx_IconizedContextMenu_item {
color: $alert !important;
}
.mx_IconizedContextMenu_icon::before {
background-color: var(--cpd-color-icon-critical-primary);
}
}
.mx_IconizedContextMenu_option_red {
color: $alert !important;
.mx_IconizedContextMenu_icon::before {
background-color: $alert;
}
}
.mx_IconizedContextMenu_active {
&.mx_IconizedContextMenu_item,
.mx_IconizedContextMenu_item {
color: $accent !important;
}
.mx_IconizedContextMenu_icon::before {
background-color: $accent;
}
}
&.mx_IconizedContextMenu_compact {
.mx_IconizedContextMenu_optionList > * {
padding: 8px 16px 8px 12px;
}
}
.mx_IconizedContextMenu_checked,
.mx_IconizedContextMenu_unchecked {
margin-left: 16px;
margin-right: -5px;
}
.mx_IconizedContextMenu_developerTools::before {
mask-image: url("$(res)/img/element-icons/settings/flask.svg");
}
.mx_IconizedContextMenu_checked::before {
mask-image: url("$(res)/img/element-icons/roomlist/checkmark.svg");
}
.mx_IconizedContextMenu_unchecked::before {
content: unset;
}
.mx_IconizedContextMenu_sublabel {
margin-left: 20px;
color: $tertiary-content;
}
}
.mx_IconizedContextMenu_item.mx_IconizedContextMenu_itemDestructive {
color: $alert !important;
}

14
res/css/views/context_menus/_LegacyCallContextMenu.pcss Normal file
View file

@ -0,0 +1,14 @@
/*
Copyright 2020-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_LegacyCallContextMenu_item {
width: 205px;
height: 40px;
padding-left: 16px;
line-height: 40px;
vertical-align: center;
}

115
res/css/views/context_menus/_MessageContextMenu.pcss Normal file
View file

@ -0,0 +1,115 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Michael Weimann <mail@michael-weimann.eu>
Copyright 2015, 2016 OpenMarket 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_MessageContextMenu {
.mx_IconizedContextMenu_icon {
width: 16px;
height: 16px;
display: block;
&::before {
content: "";
width: 16px;
height: 16px;
display: block;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
}
.mx_MessageContextMenu_iconCollapse::before {
mask-image: url("$(res)/img/element-icons/message/chevron-up.svg");
}
.mx_MessageContextMenu_iconReport::before {
mask-image: url("$(res)/img/element-icons/warning-badge.svg");
}
.mx_MessageContextMenu_iconLink::before {
mask-image: url("$(res)/img/element-icons/link.svg");
}
.mx_MessageContextMenu_iconPermalink::before {
mask-image: url("$(res)/img/element-icons/room/share.svg");
}
.mx_MessageContextMenu_iconUnhidePreview::before {
mask-image: url("$(res)/img/element-icons/settings/appearance.svg");
}
.mx_MessageContextMenu_iconOpenInMapSite::before {
mask-image: url("$(res)/img/external-link.svg");
}
.mx_MessageContextMenu_iconEndPoll::before {
mask-image: url("$(res)/img/element-icons/check-white.svg");
}
.mx_MessageContextMenu_iconForward::before {
mask-image: url("$(res)/img/element-icons/message/fwd.svg");
}
.mx_MessageContextMenu_iconRedact::before {
mask-image: url("$(res)/img/element-icons/trashcan.svg");
}
.mx_MessageContextMenu_iconResend::before {
mask-image: url("$(res)/img/element-icons/retry.svg");
}
.mx_MessageContextMenu_iconSource::before {
mask-image: url("@vector-im/compound-design-tokens/icons/inline-code.svg");
}
.mx_MessageContextMenu_iconQuote::before {
mask-image: url("@vector-im/compound-design-tokens/icons/quote.svg");
}
.mx_MessageContextMenu_iconPin::before {
mask-image: url("@vector-im/compound-design-tokens/icons/pin.svg");
}
.mx_MessageContextMenu_iconUnpin::before {
mask-image: url("@vector-im/compound-design-tokens/icons/unpin.svg");
}
.mx_MessageContextMenu_iconCopy::before {
height: 12px;
left: 2px;
mask-image: url($copy-button-url);
position: relative;
width: 12px;
top: 3px;
}
.mx_MessageContextMenu_iconEdit::before {
mask-image: url("$(res)/img/element-icons/room/message-bar/edit.svg");
}
.mx_MessageContextMenu_iconReply::before {
mask-image: url("$(res)/img/element-icons/room/message-bar/reply.svg");
}
.mx_MessageContextMenu_iconReplyInThread::before {
mask-image: url("$(res)/img/element-icons/message/thread.svg");
}
.mx_MessageContextMenu_iconReact::before {
mask-image: url("$(res)/img/element-icons/room/message-bar/emoji.svg");
}
.mx_MessageContextMenu_iconViewInRoom::before {
mask-image: url("$(res)/img/element-icons/view-in-room.svg");
}
.mx_MessageContextMenu_jumpToEvent::before {
mask-image: url("$(res)/img/element-icons/child-relationship.svg");
}
}

71
res/css/views/context_menus/_RoomGeneralContextMenu.pcss Normal file
View file

@ -0,0 +1,71 @@
.mx_RoomGeneralContextMenu_iconStar::before {
mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
}
.mx_RoomGeneralContextMenu_iconArrowDown::before {
mask-image: url("$(res)/img/element-icons/roomlist/low-priority.svg");
}
.mx_RoomGeneralContextMenu_iconMarkAsRead::before {
mask-image: url("$(res)/img/element-icons/roomlist/mark-as-read.svg");
}
.mx_RoomGeneralContextMenu_iconMarkAsUnread::before {
mask-image: url("$(res)/img/element-icons/roomlist/mark-as-unread.svg");
}
.mx_RoomGeneralContextMenu_iconNotificationsDefault::before {
mask-image: url("$(res)/img/element-icons/notifications.svg");
}
.mx_RoomGeneralContextMenu_iconNotificationsAllMessages::before {
mask-image: url("$(res)/img/element-icons/roomlist/notifications-default.svg");
}
.mx_RoomGeneralContextMenu_iconNotificationsMentionsKeywords::before {
mask-image: url("$(res)/img/element-icons/roomlist/notifications-dm.svg");
}
.mx_RoomGeneralContextMenu_iconNotificationsNone::before {
mask-image: url("$(res)/img/element-icons/roomlist/notifications-off.svg");
}
.mx_RoomGeneralContextMenu_iconPeople::before {
mask-image: url("$(res)/img/element-icons/room/members.svg");
}
.mx_RoomGeneralContextMenu_iconFiles::before {
mask-image: url("$(res)/img/element-icons/room/files.svg");
}
.mx_RoomGeneralContextMenu_iconPins::before {
mask-image: url("$(res)/img/element-icons/room/pin-upright.svg");
}
.mx_RoomGeneralContextMenu_iconWidgets::before {
mask-image: url("$(res)/img/element-icons/room/apps.svg");
}
.mx_RoomGeneralContextMenu_iconSettings::before {
mask-image: url("$(res)/img/element-icons/settings.svg");
}
.mx_RoomGeneralContextMenu_iconExport::before {
mask-image: url("$(res)/img/element-icons/export.svg");
}
.mx_RoomGeneralContextMenu_iconDeveloperTools::before {
mask-image: url("$(res)/img/element-icons/settings/flask.svg");
}
.mx_RoomGeneralContextMenu_iconCopyLink::before {
mask-image: url("$(res)/img/element-icons/link.svg");
}
.mx_RoomGeneralContextMenu_iconInvite::before {
mask-image: url("$(res)/img/element-icons/room/invite.svg");
}
.mx_RoomGeneralContextMenu_iconSignOut::before {
mask-image: url("$(res)/img/element-icons/leave.svg");
}

12
res/css/views/context_menus/_RoomNotificationContextMenu.pcss Normal file
View file

@ -0,0 +1,12 @@
.mx_RoomNotificationContextMenu_iconBell::before {
mask-image: url("$(res)/img/element-icons/notifications.svg");
}
.mx_RoomNotificationContextMenu_iconBellDot::before {
mask-image: url("$(res)/img/element-icons/roomlist/notifications-default.svg");
}
.mx_RoomNotificationContextMenu_iconBellMentions::before {
mask-image: url("$(res)/img/element-icons/roomlist/notifications-dm.svg");
}
.mx_RoomNotificationContextMenu_iconBellCrossed::before {
mask-image: url("$(res)/img/element-icons/roomlist/notifications-off.svg");
}

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("$(res)/img/element-icons/roomlist/checkmark.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");
}
}
}

529
res/css/views/dialogs/_SpotlightDialog.pcss Normal file
View file

@ -0,0 +1,529 @@
/*
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: contain;
width: 8px;
height: 8px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
mask-image: url("$(res)/img/cancel-small.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("$(res)/img/element-icons/context-menu.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 */
}

80
res/css/views/directory/_NetworkDropdown.pcss Normal file
View file

@ -0,0 +1,80 @@
/*
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_NetworkDropdown_wrapper .mx_ContextualMenu {
.mx_GenericDropdownMenu_Option {
&.mx_GenericDropdownMenu_Option--header {
padding-top: $spacing-12;
padding-bottom: $spacing-4;
min-width: 160px;
}
&.mx_GenericDropdownMenu_Option--item {
padding-top: $spacing-4;
padding-bottom: $spacing-4;
> .mx_GenericDropdownMenu_Option--label span:first-child {
font-weight: normal;
}
}
> .mx_GenericDropdownMenu_Option--label {
flex-direction: row;
align-items: baseline;
align-content: baseline;
color: $primary-content;
span:not(:first-child) {
margin-left: $spacing-4;
color: $secondary-content;
}
}
}
.mx_GenericDropdownMenu_divider {
margin-top: $spacing-4;
margin-bottom: $spacing-4;
}
}
.mx_NetworkDropdown_addServer {
font-weight: normal;
font-size: $font-15px;
}
.mx_NetworkDropdown_removeServer {
position: relative;
display: inline-block;
width: 16px;
height: 16px;
background: $quinary-content;
border-radius: 8px;
text-align: center;
line-height: 16px;
color: $secondary-content;
margin-left: auto;
&::before {
background-color: $secondary-content;
content: "";
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
width: 8px;
height: 8px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
mask-image: url("$(res)/img/cancel-small.svg");
}
}
.mx_NetworkDropdown_dialog .mx_Dialog {
width: 45vw;
}

196
res/css/views/elements/_AccessibleButton.pcss Normal file
View file

@ -0,0 +1,196 @@
/*
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_AccessibleButton {
cursor: pointer;
&.mx_AccessibleButton_disabled {
cursor: not-allowed;
&.mx_AccessibleButton_kind_icon_primary,
&.mx_AccessibleButton_kind_icon_primary_outline,
&.mx_AccessibleButton_kind_primary,
&.mx_AccessibleButton_kind_primary_outline,
&.mx_AccessibleButton_kind_primary_sm,
&.mx_AccessibleButton_kind_link,
&.mx_AccessibleButton_kind_link_accent,
&.mx_AccessibleButton_kind_link_inline,
&.mx_AccessibleButton_kind_danger_inline,
&.mx_AccessibleButton_kind_content_inline,
&.mx_AccessibleButton_kind_link_sm {
opacity: 0.4;
}
}
&.mx_AccessibleButton_hasKind {
padding: 7px 18px;
text-align: center;
border-radius: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
font: var(--cpd-font-body-md-semibold);
border: none; /* override default <button /> styles */
word-break: keep-all; /* prevent button text in Chinese/Japanese/Korean (CJK) from being collapsed */
&.mx_AccessibleButton_kind_primary_sm,
&.mx_AccessibleButton_kind_danger_sm,
&.mx_AccessibleButton_kind_link_sm {
padding: 5px 12px;
}
&.mx_AccessibleButton_kind_primary_sm {
color: var(--cpd-color-text-on-solid-primary);
background-color: var(--cpd-color-bg-action-primary-rest);
}
&.mx_AccessibleButton_kind_danger_sm {
color: var(--cpd-color-text-on-solid-primary);
background-color: var(--cpd-color-bg-critical-primary);
}
&.mx_AccessibleButton_kind_link_sm {
color: var(--cpd-color-text-primary);
text-decoration: underline;
font-weight: var(--cpd-font-weight-semibold);
}
&.mx_AccessibleButton_kind_confirm_sm {
background-color: var(--cpd-color-bg-action-primary-rest);
&::before {
mask-image: url("$(res)/img/feather-customised/check.svg");
}
}
&.mx_AccessibleButton_kind_cancel_sm {
background-color: var(--cpd-color-bg-critical-primary);
&::before {
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
}
}
&.mx_AccessibleButton_kind_icon,
&.mx_AccessibleButton_kind_icon_primary,
&.mx_AccessibleButton_kind_icon_primary_outline {
padding: 0;
height: 32px;
width: 32px;
}
}
&.mx_AccessibleButton_kind_icon_primary,
&.mx_AccessibleButton_kind_icon_primary_outline,
&.mx_AccessibleButton_kind_primary,
&.mx_AccessibleButton_kind_primary_outline,
&.mx_AccessibleButton_kind_secondary {
font-weight: var(--cpd-font-weight-semibold);
}
&.mx_AccessibleButton_kind_icon_primary,
&.mx_AccessibleButton_kind_primary {
border: 1px solid var(--cpd-color-bg-action-primary-rest);
color: var(--cpd-color-text-on-solid-primary);
background-color: var(--cpd-color-bg-action-primary-rest);
}
&.mx_AccessibleButton_kind_icon_primary_outline,
&.mx_AccessibleButton_kind_primary_outline {
border: 1px solid var(--cpd-color-border-interactive-secondary);
color: var(--cpd-color-text-primary);
}
&.mx_AccessibleButton_kind_secondary {
color: var(--cpd-color-text-primary);
text-decoration: underline;
}
&.mx_AccessibleButton_kind_secondary_content {
color: $secondary-content;
}
&.mx_AccessibleButton_kind_danger {
color: var(--cpd-color-text-on-solid-primary);
background-color: var(--cpd-color-bg-critical-primary);
&.mx_AccessibleButton_disabled {
color: var(--cpd-color-text-on-solid-primary);
background-color: var(--cpd-color-bg-critical-primary);
}
}
&.mx_AccessibleButton_kind_danger_outline {
color: var(--cpd-color-text-critical-primary);
background-color: transparent;
border: 1px solid var(--cpd-color-border-critical-subtle);
&.mx_AccessibleButton_disabled {
color: var(--cpd-color-text-disabled);
border-color: var(--cpd-color-border-disabled);
}
}
&.mx_AccessibleButton_kind_danger_sm {
&.mx_AccessibleButton_disabled {
color: var(--cpd-color-text-disabled);
background-color: var(--cpd-color-bg-subtle-primary);
}
}
&.mx_AccessibleButton_kind_link,
&.mx_AccessibleButton_kind_link_inline,
&.mx_AccessibleButton_kind_danger_inline,
&.mx_AccessibleButton_kind_content_inline {
font-size: inherit;
font-weight: var(--cpd-font-weight-semibold);
line-height: inherit;
padding: 0;
text-decoration: underline;
}
&.mx_AccessibleButton_kind_link,
&.mx_AccessibleButton_kind_link_inline {
color: var(--cpd-color-text-primary);
}
&.mx_AccessibleButton_kind_danger_inline {
color: var(--cpd-color-text-critical-primary);
}
&.mx_AccessibleButton_kind_content_inline {
color: $primary-content;
}
&.mx_AccessibleButton_kind_link_inline,
&.mx_AccessibleButton_kind_danger_inline,
&.mx_AccessibleButton_kind_content_inline {
display: inline;
}
&.mx_AccessibleButton_kind_confirm_sm,
&.mx_AccessibleButton_kind_cancel_sm {
padding: 0px;
width: 16px;
height: 16px;
border-radius: 100%;
position: relative;
display: block;
&::before {
content: "";
display: block;
position: absolute;
inset: 0;
background-color: #ffffff;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 80%;
}
}
}

55
res/css/views/elements/_CopyableText.pcss Normal file
View file

@ -0,0 +1,55 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 Šimon Brandner <simon.bra.ag@gmail.com>
Copyright 2019 New Vector Ltd
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_CopyableText {
align-items: flex-start;
display: flex;
justify-content: space-between;
width: max-content;
max-width: 100%;
&.mx_CopyableText_border {
overflow: auto;
border-radius: 5px;
border: solid 1px $light-fg-color;
margin-bottom: 10px;
margin-top: 10px;
padding: 10px 0 10px 10px;
}
.mx_CopyableText_copyButton {
flex-shrink: 0;
/* using em here to adapt to the local font size */
width: 1em;
height: 1em;
cursor: pointer;
padding-left: 12px;
padding-right: 10px;
display: block;
/* If the copy button is used within a scrollable div, make it stick to the right while scrolling */
position: sticky;
right: 0;
/* center to first line */
top: 0.15em;
background-color: $background;
&::before {
content: "";
mask-image: url($copy-button-url);
mask-position: center center;
mask-repeat: no-repeat;
mask-size: contain;
background-color: $message-action-bar-fg-color;
width: 1em;
height: 1em;
display: block;
background-repeat: no-repeat;
}
}
}

48
res/css/views/elements/_DesktopCapturerSourcePicker.pcss Normal file
View file

@ -0,0 +1,48 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_desktopCapturerSourcePicker {
overflow: hidden;
.mx_desktopCapturerSourcePicker_tab {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
height: 500px;
overflow: overlay;
.mx_desktopCapturerSourcePicker_source {
width: 50%;
display: flex;
flex-direction: column;
.mx_desktopCapturerSourcePicker_source_thumbnail {
margin: 4px;
padding: 4px;
border-width: 2px;
border-radius: 8px;
border-style: solid;
border-color: transparent;
&.mx_desktopCapturerSourcePicker_source_thumbnail_selected,
&:hover,
&:focus {
border-color: $accent;
}
}
.mx_desktopCapturerSourcePicker_source_name {
margin: 0 4px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
}
}

32
res/css/views/elements/_DialPadBackspaceButton.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_DialPadBackspaceButton {
position: relative;
height: 28px;
width: 28px;
&::before {
/* force this element to appear on the DOM */
content: "";
background-color: #8d97a5;
width: inherit;
height: inherit;
top: 0px;
left: 0px;
position: absolute;
display: inline-block;
vertical-align: middle;
mask-image: url("$(res)/img/element-icons/call/delete.svg");
mask-position: 8px;
mask-size: 20px;
mask-repeat: no-repeat;
}
}

128
res/css/views/elements/_Dropdown.pcss Normal file
View file

@ -0,0 +1,128 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2017 OpenMarket 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_Dropdown {
position: relative;
color: $primary-content;
}
.mx_Dropdown_disabled {
opacity: 0.3;
}
.mx_Dropdown_input {
display: flex;
align-items: center;
position: relative;
border-radius: 8px;
border: 1px solid var(--cpd-color-border-interactive-secondary);
font: var(--cpd-font-body-sm-regular);
user-select: none;
}
.mx_Dropdown_input.mx_AccessibleButton_disabled {
cursor: not-allowed;
}
.mx_Dropdown_input:focus {
border-color: $accent-alt;
}
/* Disable dropdown highlight on focus */
.mx_Dropdown_input.mx_AccessibleButton:focus {
filter: none;
}
.mx_Dropdown_arrow {
width: 10px;
height: 6px;
padding-right: 9px;
mask: url("$(res)/img/feather-customised/dropdown-arrow.svg");
mask-repeat: no-repeat;
background: $primary-content;
}
.mx_Dropdown_option {
height: 35px;
line-height: $font-35px;
/* Overwrites the default padding for any li elements */
padding: 0 8px;
}
.mx_Dropdown_input > .mx_Dropdown_option {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
display: inline-flex;
align-items: center;
}
.mx_Dropdown_option div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mx_Dropdown_option img,
.mx_Dropdown_option .mx_Dropdown_option_emoji {
margin: 5px;
width: 16px;
vertical-align: middle;
}
.mx_Dropdown_option_emoji {
font-size: $font-16px;
line-height: $font-16px;
}
input.mx_Dropdown_option,
input.mx_Dropdown_option:focus {
font-weight: normal;
border: 0;
padding-top: 0;
padding-bottom: 0;
/* XXX: hack to prevent text box being too big and pushing */
/* its parent out / overlapping the dropdown arrow. Only really */
/* works in the Country dropdown. */
width: 60%;
}
.mx_Dropdown_menu {
position: absolute;
left: -1px;
right: -1px;
top: 100%;
z-index: 2;
margin: 0;
padding: 0px;
border-radius: 4px;
border: 1px solid $accent-alt;
background-color: $background;
max-height: 200px;
overflow-y: auto;
}
.mx_Dropdown_menu .mx_Dropdown_option {
height: auto;
min-height: 35px;
}
ul.mx_Dropdown_menu li.mx_Dropdown_option {
list-style: none;
}
.mx_Dropdown_menu .mx_Dropdown_option_highlight {
background-color: $focus-bg-color;
}
.mx_Dropdown_searchPrompt {
font-weight: normal;
margin-left: 5px;
margin-bottom: 5px;
}

52
res/css/views/elements/_EditableItemList.pcss Normal file
View file

@ -0,0 +1,52 @@
/*
Copyright 2017-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_EditableItemList {
margin-top: 12px;
margin-bottom: 10px;
}
.mx_EditableItem {
display: flex;
margin-bottom: 5px;
}
.mx_EditableItem_delete {
@mixin customisedCancelButton;
order: 3;
margin-right: 5px;
vertical-align: middle;
width: 14px;
height: 14px;
background-color: $alert;
mask-size: 100%;
}
.mx_EditableItem_email {
vertical-align: middle;
}
.mx_EditableItem_promptText {
margin-right: 10px;
order: 2;
}
.mx_EditableItem_confirmBtn {
margin-right: 5px;
}
.mx_EditableItem_item {
flex: auto 1 0;
order: 1;
width: calc(100% - 14px); /* leave space for the remove button */
overflow-x: hidden;
text-overflow: ellipsis;
}
.mx_EditableItemList_label {
margin-bottom: 5px;
}

26
res/css/views/elements/_ErrorBoundary.pcss Normal file
View file

@ -0,0 +1,26 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_ErrorBoundary {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.mx_ErrorBoundary_body {
display: flex;
flex-direction: column;
max-width: 400px;
align-items: center;
.mx_AccessibleButton {
margin-top: 5px;
}
}

23
res/css/views/elements/_ExternalLink.pcss Normal file
View file

@ -0,0 +1,23 @@
/*
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_ExternalLink {
color: $links;
}
.mx_ExternalLink_icon {
display: inline-block;
mask-image: url("$(res)/img/external-link.svg");
background-color: currentColor;
mask-repeat: no-repeat;
mask-size: contain;
width: $font-11px;
height: $font-11px;
margin-left: 0.3rem;
vertical-align: middle;
}

40
res/css/views/elements/_FacePile.pcss Normal file
View file

@ -0,0 +1,40 @@
/*
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_FacePile_more {
/* Needed to calculate the offset on the face pile */
--cpd-avatar-size: 28px;
position: relative;
border-radius: 100%;
width: 28px;
height: 28px;
background-color: $panels;
display: inline-block;
&::before {
content: "";
z-index: 1;
position: absolute;
top: 0;
left: 0;
height: inherit;
width: inherit;
background: $tertiary-content;
mask-position: center;
mask-size: 20px;
mask-repeat: no-repeat;
mask-image: url("$(res)/img/element-icons/room/ellipsis.svg");
}
}
.mx_FacePile_summary {
margin-left: 12px;
font: var(--cpd-font-body-md-regular);
line-height: $font-24px;
color: $tertiary-content;
}

184
res/css/views/elements/_Field.pcss Normal file
View file

@ -0,0 +1,184 @@
/*
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.
*/
/* TODO: Consider unifying with general input styles in _light.pcss */
.mx_Field {
display: flex;
flex: 1;
min-width: 0;
position: relative;
margin: 1em 0;
border-radius: 8px;
transition: border-color 0.25s;
border: 1px solid var(--cpd-color-border-interactive-secondary);
}
.mx_Field_prefix {
border-right: 1px solid var(--cpd-color-border-interactive-secondary);
}
.mx_Field_postfix {
border-left: 1px solid var(--cpd-color-border-interactive-secondary);
}
.mx_Field input,
.mx_Field select,
.mx_Field textarea {
font: var(--cpd-font-body-md-regular);
border: none;
/* Even without a border here, we still need this avoid overlapping the rounded */
/* corners on the field above. */
border-radius: 8px;
padding: 8px 9px;
color: $primary-content;
background-color: $background;
flex: 1;
min-width: 0;
}
.mx_Field select {
-moz-appearance: none;
-webkit-appearance: none;
text-overflow: ellipsis;
}
/* Can't add pseudo-elements to a select directly, so we use its parent. */
.mx_Field_select::before {
content: "";
position: absolute;
top: 15px;
right: 10px;
width: 10px;
height: 6px;
mask: url("$(res)/img/feather-customised/dropdown-arrow.svg");
mask-repeat: no-repeat;
background-color: $primary-content;
z-index: 1;
pointer-events: none;
}
.mx_Field:focus-within {
border-color: $accent-alt;
}
.mx_Field input:focus,
.mx_Field select:focus,
.mx_Field textarea:focus {
outline: 0;
}
.mx_Field input::placeholder,
.mx_Field textarea::placeholder {
transition: color 0.25s ease-in 0s;
color: transparent;
}
.mx_Field input:placeholder-shown:focus::placeholder,
.mx_Field textarea:placeholder-shown:focus::placeholder,
.mx_Field.mx_Field_placeholderIsHint input::placeholder {
transition: color 0.25s ease-in 0.1s;
color: $info-plinth-fg-color;
}
.mx_Field label {
transition:
font-size 0.25s ease-out 0.1s,
color 0.25s ease-out 0.1s,
transform 0.25s ease-out 0.1s,
background-color 0.25s ease-out 0.1s;
background-color: transparent;
font: var(--cpd-font-body-md-regular);
color: var(--cpd-color-text-secondary);
transform: translateY(0);
position: absolute;
left: 0px;
margin: 7px 8px;
padding: 2px;
pointer-events: none; /* Allow clicks to fall through to the input */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: calc(100% - 20px); /* 100% of parent minus margin and padding */
}
.mx_Field_labelAlwaysTopLeft label,
.mx_Field select + label /* Always show a select's label on top to not collide with the value */,
.mx_Field input:focus + label,
.mx_Field input:not(:placeholder-shown) + label,
.mx_Field textarea:focus + label,
.mx_Field textarea:not(:placeholder-shown) + label {
transition:
font-size 0.25s ease-out 0s,
color 0.25s ease-out 0s,
transform 0.25s ease-out 0s,
background-color 0.25s ease-out 0s;
font-size: $font-10px;
transform: translateY(-13px);
padding: 0 2px;
background-color: $background;
pointer-events: initial;
}
.mx_Field input:focus + label,
.mx_Field select:focus + label,
.mx_Field textarea:focus + label {
color: $accent-alt;
}
.mx_Field select:disabled,
.mx_Field select:disabled + label,
.mx_Field input:disabled,
.mx_Field input:disabled + label,
.mx_Field textarea:disabled,
.mx_Field textarea:disabled + label {
background-color: $background;
color: $info-plinth-fg-color;
}
.mx_Field_valid {
&.mx_Field,
&.mx_Field:focus-within {
border-color: $accent;
}
&.mx_Field label,
&.mx_Field:focus-within label {
color: $accent;
}
}
.mx_Field_invalid {
&.mx_Field,
&.mx_Field:focus-within {
border-color: $alert;
}
&.mx_Field label,
&.mx_Field:focus-within label {
color: $alert;
}
}
.mx_Field_tooltip {
width: 200px;
}
.mx_Field_tooltip.mx_Field_valid {
animation: mx_fadeout 1s 2s forwards;
}
/* Customise other components when placed inside a Field */
.mx_Field .mx_Dropdown_input {
border: initial;
border-radius: initial;
}
.mx_Field .mx_CountryDropdown {
width: fit-content;
}

133
res/css/views/elements/_GenericEventListSummary.pcss Normal file
View file

@ -0,0 +1,133 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2016 OpenMarket Ltd
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_GenericEventListSummary {
position: relative;
.mx_GenericEventListSummary_avatars {
margin-right: $spacing-8;
}
.mx_GenericEventListSummary_spacer {
border-bottom: 1px solid $primary-hairline-color;
margin-left: 63px;
line-height: $font-30px; /* TODO: Use a variable */
.mx_IRCLayout & {
line-height: var(--line-height);
}
}
.mx_GenericEventListSummary_toggle {
/* We reuse a title cased translation */
text-transform: lowercase;
}
&[data-layout="irc"],
&[data-layout="group"] {
.mx_GenericEventListSummary_toggle {
float: right;
margin-inline: 0 10px;
}
}
&[data-layout="group"] {
margin-top: $spacing-8;
}
&[data-layout="bubble"] {
--maxWidth: 70%;
display: flex;
margin-left: calc(var(--avatarSize) + var(--gutterSize));
.mx_GenericEventListSummary_toggle {
margin-block: 0;
&[aria-expanded="false"] {
order: 9; /* TODO: Remove */
}
&[aria-expanded="true"] {
margin-inline-start: auto; /* reduce clickable area */
margin-inline-end: var(--EventTile_bubble-margin-inline-end); /* as the parent has zero margin */
}
}
.mx_GenericEventListSummary_spacer {
display: none;
}
&[data-expanded="false"] {
align-items: center;
justify-content: space-between;
column-gap: 5px;
}
/* ideally we'd use display=contents here for the layout to all work regardless of the *ELS but */
/* that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse. */
&[data-expanded="true"] {
flex-direction: column;
margin: 0;
}
&::after {
content: "";
clear: both;
}
&:hover {
&::before {
background: transparent;
}
}
}
.mx_MatrixChat_useCompactLayout & {
font-size: $font-13px;
margin-top: $spacing-4;
.mx_EventTile_line {
line-height: 1.25;
}
.mx_GenericEventListSummary_spacer {
line-height: 1.375;
}
.mx_TextualEvent.mx_GenericEventListSummary_summary {
font: var(--cpd-font-body-sm-regular);
}
}
/* Make all state events one order smaller than the other events */
.mx_EventTile {
font: var(--cpd-font-body-sm-regular);
color: $secondary-content;
}
}
.mx_GenericEventListSummary_unstyledList {
list-style: none;
padding: 0;
}
.mx_TextualEvent.mx_GenericEventListSummary_summary {
font: var(--cpd-font-body-sm-regular);
display: inline-flex;
color: $secondary-content;
}
.mx_GenericEventListSummary_avatars {
display: inline-block;
line-height: $font-12px;
.mx_BaseAvatar {
margin-right: -4px;
cursor: pointer;
}
}

155
res/css/views/elements/_ImageView.pcss Normal file
View file

@ -0,0 +1,155 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2015, 2016 OpenMarket Ltd
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
$button-size: 32px;
$icon-size: 22px;
$button-gap: 24px;
:root {
--image-view-panel-height: 68px;
}
.mx_ImageView {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
}
.mx_ImageView_image_wrapper {
pointer-events: initial;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
overflow: hidden;
}
.mx_ImageView_image {
flex-shrink: 0;
&.mx_ImageView_image_animating {
transition: transform 200ms ease 0s;
}
&.mx_ImageView_image_animatingLoading {
transition: transform 300ms ease 0s;
}
}
.mx_ImageView_panel {
width: 100%;
height: var(--image-view-panel-height);
display: flex;
justify-content: space-between;
align-items: center;
animation-name: mx_ImageView_panel_keyframes;
animation-duration: 300ms;
}
.mx_ImageView_info_wrapper {
pointer-events: initial;
padding-left: 32px;
display: flex;
flex-direction: row;
align-items: center;
color: $lightbox-fg-color;
flex-grow: 1;
flex-basis: 0;
}
.mx_ImageView_info {
padding-left: 12px;
display: flex;
flex-direction: column;
}
.mx_ImageView_info_sender {
font-weight: bold;
}
.mx_ImageView_title {
color: $lightbox-fg-color;
font-size: $font-12px;
flex-grow: 1;
flex-basis: 0;
text-align: center;
}
.mx_ImageView_toolbar {
padding-right: 16px;
pointer-events: initial;
display: flex;
align-items: center;
flex-grow: 1;
flex-basis: 0;
justify-content: flex-end;
gap: calc($button-gap - ($button-size - $icon-size));
}
.mx_ImageView_button {
padding: calc(($button-size - $icon-size) / 2);
display: block;
&::before {
content: "";
height: $icon-size;
width: $icon-size;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
display: block;
background-color: $icon-button-color;
}
}
.mx_ImageView_button_rotateCW::before {
mask-image: url("$(res)/img/image-view/rotate-cw.svg");
}
.mx_ImageView_button_rotateCCW::before {
mask-image: url("$(res)/img/image-view/rotate-ccw.svg");
}
.mx_ImageView_button_zoomOut::before {
mask-image: url("$(res)/img/image-view/zoom-out.svg");
}
.mx_ImageView_button_zoomIn::before {
mask-image: url("$(res)/img/image-view/zoom-in.svg");
}
.mx_ImageView_button_download::before {
mask-image: url("$(res)/img/image-view/download.svg");
}
.mx_ImageView_button_more::before {
mask-image: url("$(res)/img/image-view/more.svg");
}
.mx_ImageView_button_close {
padding: calc($button-size - $button-size);
border-radius: 100%;
background: #21262c; /* same on all themes */
&::before {
width: $button-size;
height: $button-size;
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-size: 24px;
}
}
@media (prefers-reduced-motion) {
.mx_ImageView_image_animating {
transition: none !important;
}
.mx_ImageView_image_animatingLoading {
transition: none !important;
}
}

33
res/css/views/elements/_InfoTooltip.pcss Normal file
View file

@ -0,0 +1,33 @@
/*
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_InfoTooltip_icon {
width: 16px;
height: 16px;
display: inline-block;
}
.mx_InfoTooltip_icon::before {
display: inline-block;
background-color: $muted-fg-color;
mask-repeat: no-repeat;
mask-size: 16px;
width: 16px;
height: 16px;
mask-position: center;
content: "";
vertical-align: middle;
}
.mx_InfoTooltip_icon_info::before {
mask-image: url("$(res)/img/element-icons/info.svg");
}
.mx_InfoTooltip_icon_warning::before {
mask-image: url("$(res)/img/element-icons/warning.svg");
}

20
res/css/views/elements/_InlineSpinner.pcss Normal file
View file

@ -0,0 +1,20 @@
/*
Copyright 2017-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_InlineSpinner {
display: inline;
}
.mx_InlineSpinner img,
.mx_InlineSpinner_icon {
margin: 0px 6px;
vertical-align: -3px;
}
.mx_InlineSpinner_icon {
display: inline-block !important; /* Override regular mx_Spinner_icon */
}

91
res/css/views/elements/_InteractiveTooltip.pcss Normal file
View file

@ -0,0 +1,91 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2019-2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_InteractiveTooltip_wrapper {
position: fixed;
z-index: 3999;
}
.mx_InteractiveTooltip {
border-radius: 8px;
background-color: $background;
color: $primary-content;
position: absolute;
z-index: 5001;
box-shadow:
0 24px 8px rgb(17 17 26 / 4%),
0 8px 32px rgb(17 17 26 / 4%);
}
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_top {
top: 10px; /* 8px chevron + 2px spacing */
}
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_left {
left: 10px; /* 8px chevron + 2px spacing */
}
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_right {
right: 10px; /* 8px chevron + 2px spacing */
}
.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_bottom {
bottom: 10px; /* 8px chevron + 2px spacing */
}
.mx_InteractiveTooltip_chevron_top {
position: absolute;
left: calc(50% - 8px);
top: -8px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-bottom: 8px solid $background;
border-right: 8px solid transparent;
}
/* Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path */
/* by Sebastiano Guerriero (@guerriero_se) */
@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
.mx_InteractiveTooltip_chevron_top {
height: 16px;
width: 16px;
background-color: inherit;
border: none;
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
transform: rotate(135deg);
border-radius: 0 0 0 3px;
top: calc(-8px / 1.414); /* sqrt(2) because of rotation */
}
}
.mx_InteractiveTooltip_chevron_bottom {
position: absolute;
left: calc(50% - 8px);
bottom: -8px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-top: 8px solid $background;
border-right: 8px solid transparent;
}
/* Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path */
/* by Sebastiano Guerriero (@guerriero_se) */
@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
.mx_InteractiveTooltip_chevron_bottom {
height: 16px;
width: 16px;
background-color: inherit;
border: none;
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
transform: rotate(-45deg);
border-radius: 0 0 0 3px;
bottom: calc(-8px / 1.414); /* sqrt(2) because of rotation */
}
}

46
res/css/views/elements/_InviteReason.pcss Normal file
View file

@ -0,0 +1,46 @@
/*
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_InviteReason {
position: relative;
margin-bottom: 1em;
.mx_InviteReason_reason {
visibility: visible;
}
.mx_InviteReason_view {
display: none;
position: absolute;
inset: 0;
justify-content: center;
align-items: center;
cursor: pointer;
color: $secondary-content;
&::before {
content: "";
margin-right: 8px;
background-color: $secondary-content;
mask-image: url("$(res)/img/feather-customised/eye.svg");
display: inline-block;
width: 18px;
height: 14px;
}
}
}
.mx_InviteReason_hidden {
.mx_InviteReason_reason {
visibility: hidden;
}
.mx_InviteReason_view {
display: flex;
}
}

32
res/css/views/elements/_LabelledCheckbox.pcss Normal file
View file

@ -0,0 +1,32 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_LabelledCheckbox {
display: flex;
gap: 8px;
flex-direction: row;
.mx_Checkbox {
margin-top: 3px; /* visually align with label text */
}
.mx_LabelledCheckbox_labels {
flex: 1;
.mx_LabelledCheckbox_label {
vertical-align: middle;
}
.mx_LabelledCheckbox_byline {
display: block;
padding-top: $spacing-4;
color: $muted-fg-color;
font-size: $font-11px;
}
}
}

Some files were not shown because too many files have changed in this diff Show more