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

82
res/css/_animations.pcss Normal file
View file

@ -0,0 +1,82 @@
/*
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.
*/
/**
* React Transition Group animations are prefixed with 'mx_rtg--' so that we
* know they should not be used anywhere outside of React Transition Groups.
*/
.mx_rtg--fade-enter {
opacity: 0;
}
.mx_rtg--fade-enter-active {
opacity: 1;
transition: opacity 300ms ease;
}
.mx_rtg--fade-exit {
opacity: 1;
}
.mx_rtg--fade-exit-active {
opacity: 0;
transition: opacity 300ms ease;
}
:root {
--hover-transition: 0.08s cubic-bezier(0.46, 0.03, 0.52, 0.96); /* quadratic */
}
@keyframes mx--anim-pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.7;
}
100% {
opacity: 1;
}
}
@keyframes mx_Dialog_lightbox_background_keyframes {
from {
opacity: 0;
}
to {
opacity: $lightbox-background-bg-opacity;
}
}
@keyframes mx_ImageView_panel_keyframes {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (prefers-reduced-motion) {
@keyframes mx--anim-pulse {
/* Override all keyframes in reduced-motion */
}
@keyframes mx_Dialog_lightbox_background_keyframes {
/* Override all keyframes in reduced-motion */
}
@keyframes mx_ImageView_panel_keyframes {
/* Override all keyframes in reduced-motion */
}
.mx_rtg--fade-enter-active {
transition: none;
}
.mx_rtg--fade-exit-active {
transition: none;
}
}

911
res/css/_common.pcss Normal file
View file

@ -0,0 +1,911 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2019-2023 The Matrix.org Foundation C.I.C
Copyright 2017-2019 New Vector Ltd
Copyright 2017 Vector Creations 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.
*/
@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
@import url("@vector-im/compound-web/dist/style.css");
@import "./_font-sizes.pcss";
@import "./_animations.pcss";
@import "./_spacing.pcss";
@import url("maplibre-gl/dist/maplibre-gl.css");
:root {
--container-border-width: 8px;
--container-gap-width: 8px; /* only even numbers should be used because otherwise we get 0.5px margin values. */
--transition-short: 0.1s;
--transition-standard: 0.3s;
--buttons-dialog-gap-row: $spacing-8;
--buttons-dialog-gap-column: $spacing-8;
--MBody-border-radius: 8px;
/* Expected z-indexes for dialogs:
4000 - Default wrapper index
4009 - Static dialog background
4010 - Static dialog itself
4011 - Standard dialog background
4012 - Standard dialog itself
These are set up such that the static dialog always appears
underneath the standard dialogs.
*/
--dialog-zIndex-wrapper-default: 4000;
--dialog-zIndex-static-background: 4009;
--dialog-zIndex-static: calc(var(--dialog-zIndex-static-background) + 1); /* 4010 */
--dialog-zIndex-standard-background: calc(var(--dialog-zIndex-static) + 1); /* 4011 */
--dialog-zIndex-standard: calc(var(--dialog-zIndex-standard-background) + 1); /* 4012 */
}
#matrixchat {
/* This is required to ensure Compound tooltips correctly draw where they should with z-index: auto */
contain: strict;
}
#mx_ContextualMenu_Container,
#mx_PersistedElement_container,
#mx_Dialog_Container,
#mx_Dialog_StaticContainer {
/* This is required to ensure Compound tooltips correctly draw where they should with z-index: auto */
isolation: isolate;
}
/**
* We need to increase the specificity of the selector to override the
* custom property set by the design tokens package
*/
[class^="cpd-theme"][class^="cpd-theme"] {
/**
* The design tokens package currently does not expose the fallback fonts
* We want to keep on re-using `$font-family` to not break custom themes
* and because we can to use `Twemoji` to display emoji rather than using
* system ones
*/
--cpd-font-family-sans: $font-family;
}
@media (prefers-reduced-motion) {
:root {
--transition-short: 0;
--transition-standard: 0;
}
}
html {
/* hack to stop overscroll bounce on OSX and iOS.
N.B. Breaks things when we have legitimate horizontal overscroll */
height: 100%;
overflow: hidden;
/* Stop similar overscroll bounce in Firefox Nightly for macOS */
overscroll-behavior: none;
}
body {
font: var(--cpd-font-body-md-regular);
letter-spacing: var(--cpd-font-letter-spacing-body-md);
/**
* We want to apply Inter Dynamic metrics (https://rsms.me/inter/dynmetrics/)
* We need to tweak the `letter-spacing` property and doing so, disables by
* default the optional ligatures
* `font-feature-settings` allows us to override this behaviour and have the
* correct ligatures and the proper dynamic metric spacing.
*/
font-feature-settings:
"kern" 1,
"liga" 1,
"calt" 1;
background-color: $background;
color: $primary-content;
border: 0px;
margin: 0px;
/* needed to match the designs correctly on macOS */
/* see https://github.com/vector-im/element-web/issues/11425 */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
pre,
code {
font-family: $monospace-font-family;
font-size: 100% !important;
}
.error,
.warning,
.text-error,
.text-warning {
color: $alert;
}
.text-success {
color: $accent;
}
.text-muted {
color: $muted-fg-color;
}
.text-primary {
color: $primary-content;
}
.text-secondary {
color: $secondary-content;
}
.mx_Verified {
color: $e2e-verified-color;
}
.mx_Untrusted {
color: $e2e-warning-color;
}
b {
/* On Firefox, the default weight for `<b>` is `bolder` which results in no bold */
/* effect since we only have specific weights of our fonts available. */
font-weight: bold;
}
h2 {
color: $primary-content;
font: var(--cpd-font-heading-lg-regular);
letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
margin-top: 16px;
margin-bottom: 16px;
}
a:hover,
a:link,
a:visited {
color: $accent-alt;
}
:not(.mx_no_textinput):not(.mx_textinput):not(.mx_Field) > input[type="text"],
:not(.mx_no_textinput):not(.mx_textinput):not(.mx_Field) > input[type="search"],
:not(.mx_no_textinput):not(.mx_textinput):not(.mx_Field) > input[type="password"] {
padding: 9px;
font: var(--cpd-font-body-md-semibold);
font-weight: var(--cpd-font-weight-semibold);
min-width: 0;
}
input[type="text"].mx_textinput_icon,
input[type="search"].mx_textinput_icon {
padding-left: 36px;
background-repeat: no-repeat;
background-position: 10px center;
}
/* FIXME THEME - Tint by CSS rather than referencing a duplicate asset */
input[type="text"].mx_textinput_icon.mx_textinput_search,
input[type="search"].mx_textinput_icon.mx_textinput_search {
background-image: url("$(res)/img/feather-customised/search-input.svg");
}
/* dont search UI as not all browsers support it, */
/* we implement it ourselves where needed instead */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
/* Override Firefox's UA style so we get a consistent look across browsers */
input::placeholder,
textarea::placeholder {
opacity: initial;
}
input[type="text"],
input[type="password"],
textarea {
background-color: transparent;
color: $primary-content;
}
/* Required by Firefox */
textarea {
color: $primary-content;
}
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
outline: none;
box-shadow: none;
}
/* This is used to hide the standard outline added by browsers for */
/* accessible (focusable) components. Not intended for buttons, but */
/* should be used on things like focusable containers where the outline */
/* is usually not helping anyone. */
*:focus:not(:focus-visible) {
outline: none;
}
/* override defaults */
fieldset {
display: inline-block;
margin-inline: unset;
padding-block: unset;
padding-inline: unset;
min-inline-size: unset;
border: none;
}
summary {
cursor: pointer;
}
legend {
padding-inline: unset;
border: none;
}
/* .mx_textinput is a container for a text input */
/* + some other controls like buttons, ... */
/* it has the appearance of a text box so the controls */
/* appear to be part of the input */
.mx_Dialog,
.mx_MatrixChat_wrapper {
.mx_textinput > input[type="text"],
.mx_textinput > input[type="search"] {
border: none;
flex: 1;
color: $primary-content;
}
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"],
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"],
.mx_textinput {
display: block;
box-sizing: border-box;
background-color: transparent;
color: $input-darker-fg-color;
border-radius: 4px;
border: 1px solid $secondary-hairline-color;
/* these things should probably not be defined globally */
margin: 9px;
}
.mx_textinput {
display: flex;
align-items: center;
}
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="text"]::placeholder,
:not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type="search"]::placeholder,
.mx_textinput input::placeholder {
color: $input-placeholder;
}
}
/* Prevent ugly dotted highlight around selected elements in Firefox */
::-moz-focus-inner {
border: 0;
}
/* These are magic constants which are excluded from tinting, to let themes */
/* (which only have CSS) tell the app what their non-tinted */
/* colourscheme is by inspecting the stylesheet DOM. */
/* They are not used for layout!! */
#mx_theme_accentColor {
color: $accent;
}
#mx_theme_secondaryAccentColor {
color: $secondary-accent-color;
}
.mx_Dialog_wrapper {
position: fixed;
z-index: var(--dialog-zIndex-wrapper-default);
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.mx_Dialog_border {
z-index: var(--dialog-zIndex-standard);
position: relative;
width: 100%;
max-width: fit-content;
box-sizing: border-box;
max-height: calc(100% - var(--cpd-space-6x));
display: flex;
flex-direction: column;
.mx_Dialog_lightbox & {
/* The lightbox isn't so much of a dialog as a fullscreen overlay. We
don't want the glass border. */
display: contents;
}
}
.mx_Dialog {
background-color: $background;
color: $light-fg-color;
font-size: $font-15px;
position: relative;
padding: var(--cpd-space-8x) var(--cpd-space-10x);
box-sizing: border-box;
overflow-y: auto;
.mx_Dialog_staticWrapper & {
z-index: var(--dialog-zIndex-static);
contain: content;
}
.mx_Dialog_lightbox & {
border-radius: 0px;
background-color: transparent;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
pointer-events: none;
padding: 0;
}
/* Styles copied/inspired by GroupLayout, ReplyTile, and EventTile variants. */
.markdown-body {
font: var(--cpd-font-body-md-regular) !important;
letter-spacing: var(--cpd-font-letter-spacing-body-md);
font-family: inherit !important;
white-space: normal !important;
line-height: inherit !important;
background-color: inherit;
color: inherit; /* inherit the colour from the dark or light theme by default (but not for code blocks) */
pre,
code {
font-family: $monospace-font-family !important;
background-color: $codeblock-background-color;
}
/* this selector wrongly applies to code blocks too but we will unset it in the next one */
code {
white-space: pre-wrap; /* don't collapse spaces in inline code blocks */
}
pre {
/* have to use overlay rather than auto otherwise Linux and Windows */
/* Chrome gets very confused about vertical spacing: */
/* https://github.com/vector-im/vector-web/issues/754 */
overflow-x: overlay;
overflow-y: visible;
&::-webkit-scrollbar-corner {
background: transparent;
}
code {
white-space: pre; /* we want code blocks to be scrollable and not wrap */
> * {
display: inline;
}
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: inherit !important;
color: inherit;
}
/* Make h1 and h2 the same size as h3. */
h1,
h2 {
font-size: 1.5em;
border-bottom: none !important; /* override GFM */
}
a {
color: $accent-alt;
}
blockquote {
border-left: 2px solid $blockquote-bar-color;
color: $secondary-content;
border-radius: 2px;
padding: 0 10px;
}
}
}
.mx_Dialog_fixedWidth {
width: 60vw;
max-width: 704px;
}
.mx_Dialog_background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: $dialog-backdrop-color;
z-index: var(--dialog-zIndex-standard-background);
&.mx_Dialog_staticBackground {
z-index: var(--dialog-zIndex-static-background);
}
.mx_Dialog_wrapperWithStaticUnder & {
/* Roughly half of what it would normally be - we don't want to black out */
/* the app, just make it clear that the dialogs are stacked. */
opacity: 0.4;
}
.mx_Dialog_lightbox & {
opacity: $lightbox-background-bg-opacity;
background-color: $lightbox-background-bg-color;
animation-name: mx_Dialog_lightbox_background_keyframes;
animation-duration: 300ms;
}
}
.mx_Dialog_titleImage {
vertical-align: sub;
width: 25px;
height: 25px;
margin-left: -2px;
margin-right: 4px;
margin-bottom: 2px;
}
.mx_Dialog_title {
color: $dialog-title-fg-color;
display: inline-block;
width: 100%;
box-sizing: border-box;
letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
&.danger {
color: $alert;
}
}
.mx_Dialog_header {
position: relative;
padding: 0;
padding-inline-end: 20px; /* Reserve room for the close button */
margin-bottom: var(--cpd-space-2x);
&.mx_Dialog_headerWithButton > .mx_Dialog_title {
text-align: center;
}
}
@define-mixin customisedCancelButton {
cursor: pointer;
position: relative;
width: 28px;
height: 28px;
border-radius: 14px;
background-color: var(--cpd-color-bg-subtle-secondary);
&:hover {
background-color: var(--cpd-color-bg-subtle-primary);
}
&::before {
content: "";
width: 28px;
height: 28px;
left: 0;
top: 0;
position: absolute;
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: 20px;
background-color: var(--cpd-color-icon-secondary);
}
}
.mx_Dialog_cancelButton {
@mixin customisedCancelButton;
position: absolute;
top: var(--cpd-space-4x);
right: var(--cpd-space-4x);
}
.mx_Dialog_content {
margin: 24px 0 68px;
font: var(--cpd-font-body-md-regular);
color: $primary-content;
word-wrap: break-word;
}
.mx_Dialog_buttons {
margin-top: $spacing-20;
margin-inline-start: auto;
text-align: right;
.mx_Dialog_buttons_additive {
/* The consumer is responsible for positioning their elements. */
float: left;
}
.mx_Dialog_buttons_row {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
text-align: initial;
margin-inline-start: auto;
/* default gap among elements */
column-gap: var(--buttons-dialog-gap-column);
row-gap: var(--buttons-dialog-gap-row);
button {
margin: 0 !important; /* override the margin settings */
}
}
}
@define-mixin mx_DialogButton {
/* align images in buttons (eg spinners) */
vertical-align: middle;
border: 0px;
border-radius: 24px;
font: var(--cpd-font-body-md-regular);
color: $button-fg-color;
background-color: var(--cpd-color-bg-action-primary-rest);
width: auto;
padding: 7px;
padding-left: 1.5em;
padding-right: 1.5em;
cursor: pointer;
display: inline-block;
&:not(:focus-visible) {
outline: none;
}
}
/* XXX: Our button style are a mess: buttons that happen to appear in dialogs get special styles applied
* to them that no button anywhere else in the app gets by default. In practice, buttons in other places
* in the app look the same by being AccessibleButtons, or possibly by having explict button classes.
* We should go through and have one consistent set of styles for buttons throughout the app.
* For now, I am duplicating the selectors here for mx_Dialog and mx_DialogButtons.
*
* Elements that should not be styled like a dialog button are mentioned in a :not() pseudo-class.
* For the widest browser support, we use multiple :not pseudo-classes instead of :not(.a, .b).
*/
.mx_Dialog
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
.mx_UserProfileSettings button
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button),
.mx_Dialog input[type="submit"],
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
.mx_Dialog_buttons input[type="submit"] {
@mixin mx_DialogButton;
margin-left: 0px;
margin-right: var(--buttons-dialog-gap-column);
margin-bottom: 5px;
/* flip colours for the secondary ones */
font-weight: var(--cpd-font-weight-semibold);
border: 1px solid var(--cpd-color-border-interactive-secondary);
color: var(--cpd-color-text-primary);
background-color: transparent;
font-family: inherit;
}
.mx_Dialog
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
.mx_UserProfileSettings button
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):last-child {
margin-right: 0px;
}
.mx_Dialog
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
.mx_UserProfileSettings button
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):focus,
.mx_Dialog input[type="submit"]:focus,
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
.mx_Dialog_buttons input[type="submit"]:focus {
filter: brightness($focus-brightness);
}
.mx_Dialog button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
.mx_Dialog input[type="submit"].mx_Dialog_primary,
.mx_Dialog_buttons
button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(
.mx_UserProfileSettings button
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button),
.mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
color: var(--cpd-color-text-on-solid-primary);
background-color: var(--cpd-color-bg-action-primary-rest);
border-color: var(--cpd-color-bg-action-primary-rest);
min-width: 156px;
}
.mx_Dialog button.danger:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
.mx_Dialog input[type="submit"].danger,
.mx_Dialog_buttons
button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(.mx_UserProfileSettings button):not(
.mx_ThemeChoicePanel_CustomTheme button
):not(.mx_UnpinAllDialog button),
.mx_Dialog_buttons input[type="submit"].danger {
background-color: var(--cpd-color-bg-critical-primary);
border: solid 1px var(--cpd-color-bg-critical-primary);
color: var(--cpd-color-text-on-solid-primary);
}
.mx_Dialog button.warning:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]),
.mx_Dialog input[type="submit"].warning {
border: solid 1px var(--cpd-color-border-critical-subtle);
color: var(--cpd-color-text-critical-primary);
}
.mx_Dialog
button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
.mx_UserProfileSettings button
):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):disabled,
.mx_Dialog input[type="submit"]:disabled,
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled,
.mx_Dialog_buttons input[type="submit"]:disabled {
background-color: $light-fg-color;
border: solid 1px $light-fg-color;
opacity: 0.7;
}
/* Spinner Dialog overide */
.mx_Dialog_wrapper.mx_Dialog_spinner {
/* This is not a real dialog, so we shouldn't show a glass border */
.mx_Dialog_border {
display: contents;
}
.mx_Dialog {
inline-size: auto;
block-size: auto;
border-radius: 8px;
padding: 8px;
box-shadow: none;
/* Don't show scroll-bars on spinner dialogs */
overflow-x: hidden;
overflow-y: hidden;
}
}
/* TODO: Review mx_GeneralButton usage to see if it can use a different class */
/* These classes were brought in from the old UserSettings and are included here to avoid */
/* breaking the app. */
/* Ref: https://github.com/vector-im/element-web/issues/8420 */
.mx_GeneralButton {
@mixin mx_DialogButton;
display: inline;
margin: auto;
}
.mx_TextInputDialog_label {
text-align: left;
padding-bottom: 12px;
}
.mx_TextInputDialog_input {
font-size: $font-15px;
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;
color: $primary-content;
background-color: $background;
}
.mx_button_row {
margin-top: 69px;
}
/* username colors */
/* used by SenderProfile & RoomPreviewBar */
.mx_Username_color1 {
color: $username-variant1-color;
}
.mx_Username_color2 {
color: $username-variant2-color;
}
.mx_Username_color3 {
color: $username-variant3-color;
}
.mx_Username_color4 {
color: $username-variant4-color;
}
.mx_Username_color5 {
color: $username-variant5-color;
}
.mx_Username_color6 {
color: $username-variant6-color;
}
.mx_AppWarning,
.mx_AppPermission {
text-align: center;
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
}
@define-mixin ProgressBarColour $colour {
color: $colour;
&::-moz-progress-bar {
background-color: $colour;
}
&::-webkit-progress-value {
background-color: $colour;
}
}
@define-mixin ProgressBarBgColour $colour {
background-color: $colour;
&::-webkit-progress-bar {
background-color: $colour;
}
}
@define-mixin ProgressBarBorderRadius $radius {
border-radius: $radius;
&::-moz-progress-bar {
border-radius: $radius;
}
&::-webkit-progress-bar,
&::-webkit-progress-value {
border-radius: $radius;
}
}
@define-mixin unreal-focus {
outline-width: 2px;
outline-style: solid;
outline-color: Highlight;
/* WebKit gets its native focus styles. */
@media (-webkit-min-device-pixel-ratio: 0) {
outline-color: -webkit-focus-ring-color;
outline-style: auto;
}
}
@define-mixin ButtonResetDefault {
appearance: none;
background: none;
border: none;
padding: 0;
margin: 0;
font-size: inherit;
font-family: inherit;
line-height: inherit;
cursor: pointer;
}
@define-mixin LegacyCallButton {
box-sizing: border-box;
font-weight: var(--cpd-font-weight-semibold);
height: $font-24px;
line-height: $font-24px;
margin-right: 0;
span {
display: flex;
align-items: center;
&::before {
content: "";
display: inline-block;
background-color: $button-fg-color;
mask-position: center;
mask-repeat: no-repeat;
margin-right: 8px;
}
}
}
@define-mixin ThreadRepliesAmount {
color: $secondary-content;
font-weight: var(--cpd-font-weight-semibold);
white-space: nowrap;
position: relative;
padding: 0 $spacing-12 0 $spacing-8;
}
@define-mixin ThreadSummaryIcon {
content: "";
display: inline-block;
mask-image: url("@vector-im/compound-design-tokens/icons/threads.svg");
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
height: 18px;
min-width: 18px;
background-color: $icon-button-color !important;
}
@define-mixin composerButtonHighLight {
background: var(--cpd-color-bg-subtle-primary);
&::before {
background-color: var(--cpd-color-icon-primary) !important;
}
}
@define-mixin composerButton $border-radius, $hover-color, $hover-bg {
--size: 26px;
position: relative;
cursor: pointer;
height: var(--size);
line-height: var(--size);
width: auto;
padding-left: var(--size);
border-radius: $border-radius;
&::before {
content: "";
position: absolute;
top: 3px;
left: 3px;
height: 20px;
width: 20px;
background-color: $icon-button-color;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
z-index: 2;
}
&::after {
content: "";
position: absolute;
left: 0;
top: 0;
z-index: 0;
width: var(--size);
height: var(--size);
border-radius: $border-radius;
}
&:hover {
&::after {
background: $hover-bg;
}
&::before {
background-color: $hover-color;
}
}
}
.mx_lineClamp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--mx-line-clamp, 1);
overflow: hidden;
}

401
res/css/_components.pcss Normal file
View file

@ -0,0 +1,401 @@
/* autogenerated by rethemendex.sh */
@import "./_animations.pcss";
@import "./_common.pcss";
@import "./_font-sizes.pcss";
@import "./_spacing.pcss";
@import "./components/views/beacon/_BeaconListItem.pcss";
@import "./components/views/beacon/_BeaconStatus.pcss";
@import "./components/views/beacon/_BeaconStatusTooltip.pcss";
@import "./components/views/beacon/_BeaconViewDialog.pcss";
@import "./components/views/beacon/_DialogOwnBeaconStatus.pcss";
@import "./components/views/beacon/_DialogSidebar.pcss";
@import "./components/views/beacon/_LeftPanelLiveShareWarning.pcss";
@import "./components/views/beacon/_LiveTimeRemaining.pcss";
@import "./components/views/beacon/_OwnBeaconStatus.pcss";
@import "./components/views/beacon/_ShareLatestLocation.pcss";
@import "./components/views/beacon/_StyledLiveBeaconIcon.pcss";
@import "./components/views/context_menus/_KebabContextMenu.pcss";
@import "./components/views/dialogs/polls/_PollDetailHeader.pcss";
@import "./components/views/dialogs/polls/_PollListItem.pcss";
@import "./components/views/dialogs/polls/_PollListItemEnded.pcss";
@import "./components/views/elements/_AppPermission.pcss";
@import "./components/views/elements/_AppWarning.pcss";
@import "./components/views/elements/_FilterDropdown.pcss";
@import "./components/views/elements/_FilterTabGroup.pcss";
@import "./components/views/elements/_LearnMore.pcss";
@import "./components/views/location/_EnableLiveShare.pcss";
@import "./components/views/location/_LiveDurationDropdown.pcss";
@import "./components/views/location/_LocationShareMenu.pcss";
@import "./components/views/location/_MapError.pcss";
@import "./components/views/location/_MapFallback.pcss";
@import "./components/views/location/_Marker.pcss";
@import "./components/views/location/_ShareDialogButtons.pcss";
@import "./components/views/location/_ShareType.pcss";
@import "./components/views/location/_ZoomButtons.pcss";
@import "./components/views/messages/_MBeaconBody.pcss";
@import "./components/views/messages/shared/_MediaProcessingError.pcss";
@import "./components/views/pips/_WidgetPip.pcss";
@import "./components/views/polls/_PollOption.pcss";
@import "./components/views/settings/_AddRemoveThreepids.pcss";
@import "./components/views/settings/devices/_CurrentDeviceSection.pcss";
@import "./components/views/settings/devices/_DeviceDetailHeading.pcss";
@import "./components/views/settings/devices/_DeviceDetails.pcss";
@import "./components/views/settings/devices/_DeviceExpandDetailsButton.pcss";
@import "./components/views/settings/devices/_DeviceSecurityCard.pcss";
@import "./components/views/settings/devices/_DeviceTile.pcss";
@import "./components/views/settings/devices/_DeviceTypeIcon.pcss";
@import "./components/views/settings/devices/_FilteredDeviceList.pcss";
@import "./components/views/settings/devices/_FilteredDeviceListHeader.pcss";
@import "./components/views/settings/devices/_SecurityRecommendations.pcss";
@import "./components/views/settings/devices/_SelectableDeviceTile.pcss";
@import "./components/views/settings/shared/_SettingsSubsection.pcss";
@import "./components/views/settings/shared/_SettingsSubsectionHeading.pcss";
@import "./components/views/spaces/_QuickThemeSwitcher.pcss";
@import "./components/views/typography/_Caption.pcss";
@import "./components/views/utils/_Box.pcss";
@import "./components/views/utils/_Flex.pcss";
@import "./compound/_Icon.pcss";
@import "./compound/_SuccessDialog.pcss";
@import "./structures/_AutoHideScrollbar.pcss";
@import "./structures/_AutocompleteInput.pcss";
@import "./structures/_BackdropPanel.pcss";
@import "./structures/_CompatibilityPage.pcss";
@import "./structures/_ContextualMenu.pcss";
@import "./structures/_ErrorMessage.pcss";
@import "./structures/_FileDropTarget.pcss";
@import "./structures/_FilePanel.pcss";
@import "./structures/_GenericDropdownMenu.pcss";
@import "./structures/_HomePage.pcss";
@import "./structures/_LargeLoader.pcss";
@import "./structures/_LeftPanel.pcss";
@import "./structures/_MainSplit.pcss";
@import "./structures/_MatrixChat.pcss";
@import "./structures/_MessagePanel.pcss";
@import "./structures/_NonUrgentToastContainer.pcss";
@import "./structures/_QuickSettingsButton.pcss";
@import "./structures/_RightPanel.pcss";
@import "./structures/_RoomSearch.pcss";
@import "./structures/_RoomStatusBar.pcss";
@import "./structures/_RoomView.pcss";
@import "./structures/_SearchBox.pcss";
@import "./structures/_SpaceHierarchy.pcss";
@import "./structures/_SpacePanel.pcss";
@import "./structures/_SpaceRoomView.pcss";
@import "./structures/_SplashPage.pcss";
@import "./structures/_TabbedView.pcss";
@import "./structures/_ThreadsActivityCentre.pcss";
@import "./structures/_ToastContainer.pcss";
@import "./structures/_UploadBar.pcss";
@import "./structures/_UserMenu.pcss";
@import "./structures/_ViewSource.pcss";
@import "./structures/auth/_CompleteSecurity.pcss";
@import "./structures/auth/_ConfirmSessionLockTheftView.pcss";
@import "./structures/auth/_Login.pcss";
@import "./structures/auth/_LoginSplashView.pcss";
@import "./structures/auth/_MobileRegistration.pcss";
@import "./structures/auth/_Registration.pcss";
@import "./structures/auth/_SessionLockStolenView.pcss";
@import "./structures/auth/_SetupEncryptionBody.pcss";
@import "./views/audio_messages/_AudioPlayer.pcss";
@import "./views/audio_messages/_PlayPauseButton.pcss";
@import "./views/audio_messages/_PlaybackContainer.pcss";
@import "./views/audio_messages/_SeekBar.pcss";
@import "./views/audio_messages/_Waveform.pcss";
@import "./views/auth/_AuthBody.pcss";
@import "./views/auth/_AuthFooter.pcss";
@import "./views/auth/_AuthHeader.pcss";
@import "./views/auth/_AuthHeaderLogo.pcss";
@import "./views/auth/_AuthPage.pcss";
@import "./views/auth/_CompleteSecurityBody.pcss";
@import "./views/auth/_CountryDropdown.pcss";
@import "./views/auth/_InteractiveAuthEntryComponents.pcss";
@import "./views/auth/_LanguageSelector.pcss";
@import "./views/auth/_LoginWithQR.pcss";
@import "./views/auth/_PassphraseField.pcss";
@import "./views/auth/_Welcome.pcss";
@import "./views/avatars/_BaseAvatar.pcss";
@import "./views/avatars/_DecoratedRoomAvatar.pcss";
@import "./views/avatars/_WidgetAvatar.pcss";
@import "./views/avatars/_WithPresenceIndicator.pcss";
@import "./views/beta/_BetaCard.pcss";
@import "./views/context_menus/_DeviceContextMenu.pcss";
@import "./views/context_menus/_IconizedContextMenu.pcss";
@import "./views/context_menus/_LegacyCallContextMenu.pcss";
@import "./views/context_menus/_MessageContextMenu.pcss";
@import "./views/context_menus/_RoomGeneralContextMenu.pcss";
@import "./views/context_menus/_RoomNotificationContextMenu.pcss";
@import "./views/dialogs/_AddExistingToSpaceDialog.pcss";
@import "./views/dialogs/_AnalyticsLearnMoreDialog.pcss";
@import "./views/dialogs/_AppDownloadDialog.pcss";
@import "./views/dialogs/_BugReportDialog.pcss";
@import "./views/dialogs/_BulkRedactDialog.pcss";
@import "./views/dialogs/_ChangelogDialog.pcss";
@import "./views/dialogs/_CompoundDialog.pcss";
@import "./views/dialogs/_ConfirmSpaceUserActionDialog.pcss";
@import "./views/dialogs/_ConfirmUserActionDialog.pcss";
@import "./views/dialogs/_CreateRoomDialog.pcss";
@import "./views/dialogs/_CreateSubspaceDialog.pcss";
@import "./views/dialogs/_DeactivateAccountDialog.pcss";
@import "./views/dialogs/_DevtoolsDialog.pcss";
@import "./views/dialogs/_ExportDialog.pcss";
@import "./views/dialogs/_FeedbackDialog.pcss";
@import "./views/dialogs/_ForwardDialog.pcss";
@import "./views/dialogs/_GenericFeatureFeedbackDialog.pcss";
@import "./views/dialogs/_IncomingSasDialog.pcss";
@import "./views/dialogs/_InviteDialog.pcss";
@import "./views/dialogs/_JoinRuleDropdown.pcss";
@import "./views/dialogs/_LeaveSpaceDialog.pcss";
@import "./views/dialogs/_LocationViewDialog.pcss";
@import "./views/dialogs/_LogoutDialog.pcss";
@import "./views/dialogs/_ManageRestrictedJoinRuleDialog.pcss";
@import "./views/dialogs/_MessageEditHistoryDialog.pcss";
@import "./views/dialogs/_ModalWidgetDialog.pcss";
@import "./views/dialogs/_PollCreateDialog.pcss";
@import "./views/dialogs/_RegistrationEmailPromptDialog.pcss";
@import "./views/dialogs/_RoomSettingsDialog.pcss";
@import "./views/dialogs/_RoomSettingsDialogBridges.pcss";
@import "./views/dialogs/_RoomUpgradeDialog.pcss";
@import "./views/dialogs/_RoomUpgradeWarningDialog.pcss";
@import "./views/dialogs/_ServerOfflineDialog.pcss";
@import "./views/dialogs/_ServerPickerDialog.pcss";
@import "./views/dialogs/_SetEmailDialog.pcss";
@import "./views/dialogs/_SettingsDialog.pcss";
@import "./views/dialogs/_ShareDialog.pcss";
@import "./views/dialogs/_SlashCommandHelpDialog.pcss";
@import "./views/dialogs/_SpacePreferencesDialog.pcss";
@import "./views/dialogs/_SpaceSettingsDialog.pcss";
@import "./views/dialogs/_SpotlightDialog.pcss";
@import "./views/dialogs/_TermsDialog.pcss";
@import "./views/dialogs/_UnpinAllDialog.pcss";
@import "./views/dialogs/_UntrustedDeviceDialog.pcss";
@import "./views/dialogs/_UploadConfirmDialog.pcss";
@import "./views/dialogs/_UserSettingsDialog.pcss";
@import "./views/dialogs/_VerifyEMailDialog.pcss";
@import "./views/dialogs/_WidgetCapabilitiesPromptDialog.pcss";
@import "./views/dialogs/security/_AccessSecretStorageDialog.pcss";
@import "./views/dialogs/security/_CreateCrossSigningDialog.pcss";
@import "./views/dialogs/security/_CreateKeyBackupDialog.pcss";
@import "./views/dialogs/security/_CreateSecretStorageDialog.pcss";
@import "./views/dialogs/security/_KeyBackupFailedDialog.pcss";
@import "./views/dialogs/security/_RestoreKeyBackupDialog.pcss";
@import "./views/directory/_NetworkDropdown.pcss";
@import "./views/elements/_AccessibleButton.pcss";
@import "./views/elements/_CopyableText.pcss";
@import "./views/elements/_DesktopCapturerSourcePicker.pcss";
@import "./views/elements/_DialPadBackspaceButton.pcss";
@import "./views/elements/_Dropdown.pcss";
@import "./views/elements/_EditableItemList.pcss";
@import "./views/elements/_ErrorBoundary.pcss";
@import "./views/elements/_ExternalLink.pcss";
@import "./views/elements/_FacePile.pcss";
@import "./views/elements/_Field.pcss";
@import "./views/elements/_GenericEventListSummary.pcss";
@import "./views/elements/_ImageView.pcss";
@import "./views/elements/_InfoTooltip.pcss";
@import "./views/elements/_InlineSpinner.pcss";
@import "./views/elements/_InteractiveTooltip.pcss";
@import "./views/elements/_InviteReason.pcss";
@import "./views/elements/_LabelledCheckbox.pcss";
@import "./views/elements/_LanguageDropdown.pcss";
@import "./views/elements/_MiniAvatarUploader.pcss";
@import "./views/elements/_Pill.pcss";
@import "./views/elements/_PowerSelector.pcss";
@import "./views/elements/_ProgressBar.pcss";
@import "./views/elements/_QRCode.pcss";
@import "./views/elements/_ReplyChain.pcss";
@import "./views/elements/_ResizeHandle.pcss";
@import "./views/elements/_RichText.pcss";
@import "./views/elements/_RoomAliasField.pcss";
@import "./views/elements/_SSOButtons.pcss";
@import "./views/elements/_SearchWarning.pcss";
@import "./views/elements/_ServerPicker.pcss";
@import "./views/elements/_SettingsFlag.pcss";
@import "./views/elements/_Spinner.pcss";
@import "./views/elements/_StyledCheckbox.pcss";
@import "./views/elements/_StyledRadioButton.pcss";
@import "./views/elements/_SyntaxHighlight.pcss";
@import "./views/elements/_TagComposer.pcss";
@import "./views/elements/_TextWithTooltip.pcss";
@import "./views/elements/_ToggleSwitch.pcss";
@import "./views/elements/_Tooltip.pcss";
@import "./views/elements/_UseCaseSelection.pcss";
@import "./views/elements/_UseCaseSelectionButton.pcss";
@import "./views/elements/_Validation.pcss";
@import "./views/emojipicker/_EmojiPicker.pcss";
@import "./views/location/_LocationPicker.pcss";
@import "./views/messages/_CallEvent.pcss";
@import "./views/messages/_CreateEvent.pcss";
@import "./views/messages/_DateSeparator.pcss";
@import "./views/messages/_DecryptionFailureBody.pcss";
@import "./views/messages/_DisambiguatedProfile.pcss";
@import "./views/messages/_EventTileBubble.pcss";
@import "./views/messages/_HiddenBody.pcss";
@import "./views/messages/_JumpToDatePicker.pcss";
@import "./views/messages/_LegacyCallEvent.pcss";
@import "./views/messages/_MEmoteBody.pcss";
@import "./views/messages/_MFileBody.pcss";
@import "./views/messages/_MImageBody.pcss";
@import "./views/messages/_MImageReplyBody.pcss";
@import "./views/messages/_MJitsiWidgetEvent.pcss";
@import "./views/messages/_MLocationBody.pcss";
@import "./views/messages/_MNoticeBody.pcss";
@import "./views/messages/_MPollBody.pcss";
@import "./views/messages/_MPollEndBody.pcss";
@import "./views/messages/_MStickerBody.pcss";
@import "./views/messages/_MTextBody.pcss";
@import "./views/messages/_MVideoBody.pcss";
@import "./views/messages/_MediaBody.pcss";
@import "./views/messages/_MessageActionBar.pcss";
@import "./views/messages/_MessageTimestamp.pcss";
@import "./views/messages/_MjolnirBody.pcss";
@import "./views/messages/_PinnedMessageBadge.pcss";
@import "./views/messages/_ReactionsRow.pcss";
@import "./views/messages/_ReactionsRowButton.pcss";
@import "./views/messages/_RedactedBody.pcss";
@import "./views/messages/_RoomAvatarEvent.pcss";
@import "./views/messages/_TextualEvent.pcss";
@import "./views/messages/_TimelineSeparator.pcss";
@import "./views/messages/_UnknownBody.pcss";
@import "./views/messages/_ViewSourceEvent.pcss";
@import "./views/messages/_common_CryptoEvent.pcss";
@import "./views/polls/pollHistory/_PollHistory.pcss";
@import "./views/polls/pollHistory/_PollHistoryList.pcss";
@import "./views/right_panel/_BaseCard.pcss";
@import "./views/right_panel/_EmptyState.pcss";
@import "./views/right_panel/_EncryptionInfo.pcss";
@import "./views/right_panel/_ExtensionsCard.pcss";
@import "./views/right_panel/_PinnedMessagesCard.pcss";
@import "./views/right_panel/_RoomSummaryCard.pcss";
@import "./views/right_panel/_ThreadPanel.pcss";
@import "./views/right_panel/_TimelineCard.pcss";
@import "./views/right_panel/_UserInfo.pcss";
@import "./views/right_panel/_VerificationPanel.pcss";
@import "./views/right_panel/_WidgetCard.pcss";
@import "./views/room_settings/_AliasSettings.pcss";
@import "./views/rooms/_AppsDrawer.pcss";
@import "./views/rooms/_Autocomplete.pcss";
@import "./views/rooms/_AuxPanel.pcss";
@import "./views/rooms/_BasicMessageComposer.pcss";
@import "./views/rooms/_CallGuestLinkButton.pcss";
@import "./views/rooms/_DecryptionFailureBar.pcss";
@import "./views/rooms/_E2EIcon.pcss";
@import "./views/rooms/_EditMessageComposer.pcss";
@import "./views/rooms/_EmojiButton.pcss";
@import "./views/rooms/_EntityTile.pcss";
@import "./views/rooms/_EventBubbleTile.pcss";
@import "./views/rooms/_EventTile.pcss";
@import "./views/rooms/_HistoryTile.pcss";
@import "./views/rooms/_IRCLayout.pcss";
@import "./views/rooms/_JumpToBottomButton.pcss";
@import "./views/rooms/_LegacyRoomHeader.pcss";
@import "./views/rooms/_LinkPreviewGroup.pcss";
@import "./views/rooms/_LinkPreviewWidget.pcss";
@import "./views/rooms/_LiveContentSummary.pcss";
@import "./views/rooms/_MemberList.pcss";
@import "./views/rooms/_MessageComposer.pcss";
@import "./views/rooms/_MessageComposerFormatBar.pcss";
@import "./views/rooms/_NewRoomIntro.pcss";
@import "./views/rooms/_NotificationBadge.pcss";
@import "./views/rooms/_PinnedEventTile.pcss";
@import "./views/rooms/_PinnedMessageBanner.pcss";
@import "./views/rooms/_PresenceLabel.pcss";
@import "./views/rooms/_ReadReceiptGroup.pcss";
@import "./views/rooms/_ReplyPreview.pcss";
@import "./views/rooms/_ReplyTile.pcss";
@import "./views/rooms/_RoomBreadcrumbs.pcss";
@import "./views/rooms/_RoomCallBanner.pcss";
@import "./views/rooms/_RoomHeader.pcss";
@import "./views/rooms/_RoomInfoLine.pcss";
@import "./views/rooms/_RoomKnocksBar.pcss";
@import "./views/rooms/_RoomList.pcss";
@import "./views/rooms/_RoomListHeader.pcss";
@import "./views/rooms/_RoomPreviewBar.pcss";
@import "./views/rooms/_RoomPreviewCard.pcss";
@import "./views/rooms/_RoomSearchAuxPanel.pcss";
@import "./views/rooms/_RoomSublist.pcss";
@import "./views/rooms/_RoomTile.pcss";
@import "./views/rooms/_RoomUpgradeWarningBar.pcss";
@import "./views/rooms/_SendMessageComposer.pcss";
@import "./views/rooms/_Stickers.pcss";
@import "./views/rooms/_ThirdPartyMemberInfo.pcss";
@import "./views/rooms/_ThreadSummary.pcss";
@import "./views/rooms/_TopUnreadMessagesBar.pcss";
@import "./views/rooms/_VoiceRecordComposerTile.pcss";
@import "./views/rooms/_WhoIsTypingTile.pcss";
@import "./views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss";
@import "./views/rooms/wysiwyg_composer/_SendWysiwygComposer.pcss";
@import "./views/rooms/wysiwyg_composer/components/_Editor.pcss";
@import "./views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss";
@import "./views/rooms/wysiwyg_composer/components/_LinkModal.pcss";
@import "./views/settings/_AvatarSetting.pcss";
@import "./views/settings/_CrossSigningPanel.pcss";
@import "./views/settings/_CryptographyPanel.pcss";
@import "./views/settings/_FontScalingPanel.pcss";
@import "./views/settings/_ImageSizePanel.pcss";
@import "./views/settings/_IntegrationManager.pcss";
@import "./views/settings/_JoinRuleSettings.pcss";
@import "./views/settings/_KeyboardShortcut.pcss";
@import "./views/settings/_LayoutSwitcher.pcss";
@import "./views/settings/_NotificationPusherSettings.pcss";
@import "./views/settings/_NotificationSettings2.pcss";
@import "./views/settings/_Notifications.pcss";
@import "./views/settings/_PhoneNumbers.pcss";
@import "./views/settings/_PowerLevelSelector.pcss";
@import "./views/settings/_RoomProfileSettings.pcss";
@import "./views/settings/_SecureBackupPanel.pcss";
@import "./views/settings/_SetIdServer.pcss";
@import "./views/settings/_SetIntegrationManager.pcss";
@import "./views/settings/_SettingsFieldset.pcss";
@import "./views/settings/_SpellCheckLanguages.pcss";
@import "./views/settings/_ThemeChoicePanel.pcss";
@import "./views/settings/_UpdateCheckButton.pcss";
@import "./views/settings/_UserProfileSettings.pcss";
@import "./views/settings/tabs/_SettingsBanner.pcss";
@import "./views/settings/tabs/_SettingsIndent.pcss";
@import "./views/settings/tabs/_SettingsSection.pcss";
@import "./views/settings/tabs/_SettingsTab.pcss";
@import "./views/settings/tabs/room/_NotificationSettingsTab.pcss";
@import "./views/settings/tabs/room/_PeopleRoomSettingsTab.pcss";
@import "./views/settings/tabs/room/_RolesRoomSettingsTab.pcss";
@import "./views/settings/tabs/room/_SecurityRoomSettingsTab.pcss";
@import "./views/settings/tabs/user/_AppearanceUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_HelpUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_KeyboardUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_MjolnirUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_PreferencesUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_SecurityUserSettingsTab.pcss";
@import "./views/settings/tabs/user/_SidebarUserSettingsTab.pcss";
@import "./views/spaces/_SpaceBasicSettings.pcss";
@import "./views/spaces/_SpaceChildrenPicker.pcss";
@import "./views/spaces/_SpaceCreateMenu.pcss";
@import "./views/spaces/_SpacePublicShare.pcss";
@import "./views/terms/_InlineTermsAgreement.pcss";
@import "./views/toasts/_AnalyticsToast.pcss";
@import "./views/toasts/_IncomingCallToast.pcss";
@import "./views/toasts/_IncomingLegacyCallToast.pcss";
@import "./views/toasts/_NonUrgentEchoFailureToast.pcss";
@import "./views/typography/_Heading.pcss";
@import "./views/user-onboarding/_UserOnboardingButton.pcss";
@import "./views/user-onboarding/_UserOnboardingHeader.pcss";
@import "./views/user-onboarding/_UserOnboardingList.pcss";
@import "./views/user-onboarding/_UserOnboardingPage.pcss";
@import "./views/user-onboarding/_UserOnboardingTask.pcss";
@import "./views/verification/_VerificationShowSas.pcss";
@import "./views/voip/LegacyCallView/_LegacyCallViewButtons.pcss";
@import "./views/voip/_CallDuration.pcss";
@import "./views/voip/_CallView.pcss";
@import "./views/voip/_DialPad.pcss";
@import "./views/voip/_DialPadContextMenu.pcss";
@import "./views/voip/_DialPadModal.pcss";
@import "./views/voip/_LegacyCallPreview.pcss";
@import "./views/voip/_LegacyCallView.pcss";
@import "./views/voip/_LegacyCallViewForRoom.pcss";
@import "./views/voip/_LegacyCallViewHeader.pcss";
@import "./views/voip/_LegacyCallViewSidebar.pcss";
@import "./views/voip/_VideoFeed.pcss";
@import "./voice-broadcast/atoms/_LiveBadge.pcss";
@import "./voice-broadcast/atoms/_VoiceBroadcastControl.pcss";
@import "./voice-broadcast/atoms/_VoiceBroadcastHeader.pcss";
@import "./voice-broadcast/atoms/_VoiceBroadcastRecordingConnectionError.pcss";
@import "./voice-broadcast/atoms/_VoiceBroadcastRoomSubtitle.pcss";
@import "./voice-broadcast/molecules/_VoiceBroadcastBody.pcss";

45
res/css/_font-sizes.pcss Normal file
View file

@ -0,0 +1,45 @@
/*
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.
*/
/*
* SCSS variables defining a range of font sizes.
*
* These are defined in `rem` so that they scale with the `font-size` of the root element (which is adjustable via the
* "Font size" setting). They exist to make the job of converting designs (which tend to be based in pixels) into CSS
* easier.
*
*/
$font-1px: 0.0625rem;
$font-8px: 0.5rem;
$font-9px: 0.5625rem;
$font-10px: 0.625rem;
$font-10-4px: 0.6275rem;
$font-11px: 0.6875rem;
$font-12px: 0.75rem;
$font-13px: 0.8125rem;
$font-14px: 0.875rem;
$font-15px: 0.9375rem;
$font-16px: 1rem;
$font-17px: 1.0625rem;
$font-18px: 1.125rem;
$font-20px: 1.25rem;
$font-22px: 1.375rem;
$font-23px: 1.4375rem;
$font-24px: 1.5rem;
$font-25px: 1.5625rem;
$font-26px: 1.625rem;
$font-28px: 1.75rem;
$font-29px: 1.8125rem;
$font-30px: 1.875rem;
$font-32px: 2rem;
$font-34px: 2.125rem;
$font-35px: 2.1875rem;
$font-39px: 2.4375rem;
$font-42px: 2.625rem;
$font-44px: 2.75rem;
$font-48px: 3rem;

30
res/css/_spacing.pcss Normal file
View file

@ -0,0 +1,30 @@
/*
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.
*/
/* SCSS variables representing a range of standard lengths.
*
* Avoid using these in new code: we cannot adjust their values without causing massive confusion, so they are
* effectively equivalent to using hardcoded values.
*
* In future, we plan to introduce variables named according to their purpose rather than their size. Additionally,
* we want switch to custom CSS properties (https://github.com/vector-im/element-web/issues/21656), so we might have
* `--spacing-standard` or something. For now, you might as well use hardcoded px values for lengths (except for font
* sizes, for which see the `$font-<N>px` variables).
*/
$spacing-2: 2px;
$spacing-4: 4px;
$spacing-8: 8px;
$spacing-12: 12px;
$spacing-16: 16px;
$spacing-20: 20px;
$spacing-24: 24px;
$spacing-28: 28px;
$spacing-32: 32px;
$spacing-40: 40px;
$spacing-48: 48px;
$spacing-64: 64px;

62
res/css/components/views/beacon/_BeaconListItem.pcss Normal file
View file

@ -0,0 +1,62 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_BeaconListItem {
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: flex-start;
padding: $spacing-12 0;
border-bottom: 1px solid $system;
cursor: pointer;
}
.mx_BeaconListItem_avatarIcon {
flex: 0 0;
height: 32px;
width: 32px;
}
.mx_BeaconListItem_avatar {
flex: 0 0;
box-sizing: border-box;
margin-right: $spacing-8;
border: 2px solid $location-live-color;
border-radius: 50%;
}
.mx_BeaconListItem_info {
flex: 1 1 0;
width: 0;
display: flex;
flex-direction: column;
align-items: stretch;
}
.mx_BeaconListItem_status {
/* override beacon status padding */
padding: 0 !important;
margin-bottom: $spacing-8;
.mx_BeaconStatus_label {
font-weight: var(--cpd-font-weight-semibold);
}
}
.mx_BeaconListItem_lastUpdated {
color: $tertiary-content;
font-size: $font-10px;
}
.mx_BeaconListItem_interactions {
display: flex;
flex-direction: row;
}

65
res/css/components/views/beacon/_BeaconStatus.pcss Normal file
View file

@ -0,0 +1,65 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_BeaconStatus {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
padding: $spacing-8;
color: var(--color);
font-size: $font-12px;
}
.mx_BeaconStatus_Loading,
.mx_BeaconStatus_Stopped {
--color: $tertiary-content;
}
.mx_BeaconStatus_Active,
.mx_BeaconStatus_Error {
--color: $primary-content;
}
.mx_BeaconStatus_icon {
height: 32px;
width: 32px;
flex: 0 0 32px;
margin-right: $spacing-8;
}
.mx_BeaconStatus_description {
flex: 1 1 0;
display: flex;
flex-direction: column;
line-height: $font-14px;
padding-right: $spacing-8;
white-space: nowrap;
overflow: hidden;
.mx_BeaconStatus_description_status {
text-overflow: ellipsis;
overflow: hidden;
}
}
.mx_BeaconStatus_expiryTime {
color: $secondary-content;
}
.mx_BeaconStatus_label {
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
}

24
res/css/components/views/beacon/_BeaconStatusTooltip.pcss Normal file
View file

@ -0,0 +1,24 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_BeaconStatusTooltip {
position: absolute;
top: 42px;
max-width: 150px;
height: 38px;
box-sizing: content-box;
padding-top: $spacing-8;
}
.mx_BeaconStatusTooltip_inner {
position: relative;
height: 100%;
border-radius: 4px;
background: $menu-bg-color;
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
}

63
res/css/components/views/beacon/_BeaconViewDialog.pcss Normal file
View file

@ -0,0 +1,63 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_BeaconViewDialog_wrapper .mx_Dialog {
padding: 0px;
/* Unset contain and position to allow the close button
to appear outside the dialog */
contain: unset;
position: unset;
}
.mx_BeaconViewDialog {
/* subtract 0.5px to prevent single-pixel margin due to rounding */
width: calc(80vw - 0.5px);
height: calc(80vh - 0.5px);
overflow: hidden;
/* sidebar is absolutely positioned inside */
position: relative;
.mx_Dialog_header {
margin: 0px;
padding: 0px;
position: unset;
.mx_Dialog_title {
display: none;
}
.mx_Dialog_cancelButton {
z-index: 4010;
position: fixed;
right: 5vw;
top: 5vh;
width: 20px;
height: 20px;
background-color: $dialog-close-external-color;
}
}
}
.mx_BeaconViewDialog_map {
width: 80vw;
height: 80vh;
border-radius: 8px;
}
.mx_BeaconViewDialog_mapFallbackMessage {
color: $secondary-content;
margin-bottom: $spacing-16;
}
.mx_BeaconViewDialog_viewListButton {
position: absolute;
top: $spacing-24;
left: $spacing-24;
}

48
res/css/components/views/beacon/_DialogOwnBeaconStatus.pcss Normal file
View file

@ -0,0 +1,48 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_DialogOwnBeaconStatus {
position: absolute;
bottom: $spacing-32;
width: 300px;
margin-left: -150px;
left: 50%;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: stretch;
background: $background;
border-radius: 8px;
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
padding: 0 $spacing-12;
}
.mx_DialogOwnBeaconStatus_avatarIcon {
flex: 0 0;
height: 32px;
width: 32px;
margin: $spacing-8 0 $spacing-8 0;
}
.mx_DialogOwnBeaconStatus_avatar {
flex: 0 0;
box-sizing: border-box;
border: 2px solid $location-live-color;
border-radius: 50%;
margin: $spacing-8 0 $spacing-8 0;
}
.mx_DialogOwnBeaconStatus_status {
flex: 1 1;
padding-right: 0;
}

53
res/css/components/views/beacon/_DialogSidebar.pcss Normal file
View file

@ -0,0 +1,53 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_DialogSidebar {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 265px;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: $spacing-16;
background-color: $background;
box-shadow: 0px 4px 4px $menu-box-shadow-color;
.mx_DialogSidebar_header {
display: flex;
align-items: center;
justify-content: space-between;
flex: 0 0;
margin-bottom: $spacing-16;
color: $primary-content;
.mx_DialogSidebar_closeButtonIcon {
color: $tertiary-content;
}
}
.mx_DialogSidebar_list {
list-style: none;
padding: 0;
margin: 0;
flex: 1 1 0;
width: 100%;
overflow: auto;
}
}
.mx_DialogSidebar_noResults {
font: var(--cpd-font-body-md-regular);
color: $secondary-content;
}

27
res/css/components/views/beacon/_LeftPanelLiveShareWarning.pcss Normal file
View file

@ -0,0 +1,27 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_LeftPanelLiveShareWarning {
width: 100%;
box-sizing: border-box;
padding: $spacing-4;
text-align: center;
background-color: $accent;
color: #fff;
font-size: $font-10px;
/* panel backdrops overlay the whole sidepanel */
/* go above to get hover for title */
z-index: 1;
}
.mx_LeftPanelLiveShareWarning__error {
background-color: $alert;
}

12
res/css/components/views/beacon/_LiveTimeRemaining.pcss Normal file
View file

@ -0,0 +1,12 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_LiveTimeRemaining {
color: $secondary-content;
font-size: $font-12px;
}

23
res/css/components/views/beacon/_OwnBeaconStatus.pcss Normal file
View file

@ -0,0 +1,23 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_OwnBeaconStatus_button {
margin-left: $spacing-8;
}
.mx_EventTile[data-layout="bubble"] .mx_OwnBeaconStatus_button {
/* align to top to make room for timestamp */
/* in bubble view */
align-self: start;
}
.mx_OwnBeaconStatus_destructiveButton {
/* override button link_inline styles */
color: $alert !important;
font-weight: var(--cpd-font-weight-semibold) !important;
}

31
res/css/components/views/beacon/_ShareLatestLocation.pcss Normal file
View file

@ -0,0 +1,31 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_ShareLatestLocation_icon {
height: 13px;
width: 13px;
color: $secondary-content;
}
/* double class to be more specific than the general mx_CopyableText CSS rule */
.mx_CopyableText.mx_ShareLatestLocation_copy {
/* override copyable text style to make compact */
.mx_CopyableText_copyButton {
height: 13px;
margin-left: $spacing-8 !important;
position: relative;
top: -1px;
width: 13px;
&::before {
background-color: $secondary-content;
height: 13px;
width: 13px;
}
}
}

32
res/css/components/views/beacon/_StyledLiveBeaconIcon.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_StyledLiveBeaconIcon {
flex-grow: 0;
flex-shrink: 0;
box-sizing: border-box;
border-width: 2px;
border-style: solid;
border-radius: 50%;
background-color: $location-live-color;
border-color: $location-live-color;
padding: 2px;
/* colors icon */
color: white;
}
.mx_StyledLiveBeaconIcon.mx_StyledLiveBeaconIcon_error {
background-color: $alert;
border-color: $alert;
}
.mx_StyledLiveBeaconIcon.mx_StyledLiveBeaconIcon_idle {
background-color: $quaternary-content;
border-color: $quaternary-content;
}

12
res/css/components/views/context_menus/_KebabContextMenu.pcss Normal file
View file

@ -0,0 +1,12 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_KebabContextMenu_icon {
width: 24px;
color: $icon-button-color;
}

19
res/css/components/views/dialogs/polls/_PollDetailHeader.pcss Normal file
View file

@ -0,0 +1,19 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_PollDetailHeader {
/* override accessiblebutton style */
font-size: $font-15px !important;
}
.mx_PollDetailHeader_icon {
height: 15px;
width: 15px;
margin-right: $spacing-8;
vertical-align: middle;
}

37
res/css/components/views/dialogs/polls/_PollListItem.pcss Normal file
View file

@ -0,0 +1,37 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_PollListItem {
width: 100%;
}
.mx_PollListItem_content {
width: 100%;
display: grid;
justify-content: left;
align-items: center;
grid-gap: $spacing-8;
grid-template-columns: auto auto auto;
grid-template-rows: auto;
cursor: pointer;
color: $primary-content;
}
.mx_PollListItem_icon {
height: 14px;
width: 14px;
color: $quaternary-content;
padding-left: $spacing-8;
}
.mx_PollListItem_question {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

57
res/css/components/views/dialogs/polls/_PollListItemEnded.pcss Normal file
View file

@ -0,0 +1,57 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_PollListItemEnded {
width: 100%;
}
.mx_PollListItemEnded_content {
width: 100%;
display: flex;
flex-direction: column;
color: $primary-content;
cursor: pointer;
}
.mx_PollListItemEnded_title {
display: grid;
justify-content: left;
align-items: center;
grid-gap: $spacing-8;
grid-template-columns: min-content 1fr min-content;
grid-template-rows: auto;
}
.mx_PollListItemEnded_icon {
height: 14px;
width: 14px;
color: $quaternary-content;
padding-left: $spacing-8;
}
.mx_PollListItemEnded_date {
font-size: $font-12px;
color: $secondary-content;
}
.mx_PollListItemEnded_question {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mx_PollListItemEnded_answers {
display: grid;
grid-gap: $spacing-8;
margin-top: $spacing-12;
}
.mx_PollListItemEnded_voteCount {
/* 6px to match PollOption padding */
margin: $spacing-8 0 0 6px;
}

38
res/css/components/views/elements/_AppPermission.pcss Normal file
View file

@ -0,0 +1,38 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2019-2023 The Matrix.org Foundation C.I.C.
Copyright 2015, 2016 OpenMarket Ltd
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_AppPermission {
font-size: $font-12px;
width: 100%; /* make mx_AppPermission fill width of mx_AppTileBody so that scroll bar appears on the edge */
overflow-y: scroll;
.mx_AppPermission_bolder {
font-weight: var(--cpd-font-weight-semibold);
}
.mx_AppPermission_content {
margin-block: auto; /* place at the center */
> div {
margin-block: 12px;
}
.mx_AppPermission_content_bolder {
font-weight: var(--font-semi-bold);
}
.mx_TextWithTooltip_target--helpIcon {
display: inline-block;
height: $font-14px; /* align with characters on the same line */
vertical-align: middle;
.mx_Icon {
color: $accent;
}
}
}
}

17
res/css/components/views/elements/_AppWarning.pcss Normal file
View file

@ -0,0 +1,17 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2023 Suguru Hirahara
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_AppWarning {
font-size: $font-16px;
justify-content: center;
h4 {
margin: 0;
padding: 0;
}
}

74
res/css/components/views/elements/_FilterDropdown.pcss Normal file
View file

@ -0,0 +1,74 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_FilterDropdown {
.mx_Dropdown_menu {
margin-top: $spacing-4;
left: unset;
right: -$spacing-12;
width: 232px;
padding: $spacing-12;
border: 1px solid $quinary-content;
border-radius: 8px;
box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05);
background-color: $system;
.mx_Dropdown_option_highlight {
background-color: transparent;
}
}
.mx_Dropdown_input {
height: 24px;
background-color: transparent;
border-color: transparent;
color: $secondary-content;
border-radius: 4px;
&:focus,
&:hover {
background-color: $quinary-content;
border-color: $quinary-content;
}
}
.mx_Dropdown_arrow {
background: $secondary-content;
}
}
.mx_FilterDropdown_option {
position: relative;
width: 100%;
box-sizing: border-box;
padding: $spacing-8 0 $spacing-8 $spacing-20;
font-size: $font-12px;
line-height: $font-15px;
color: $primary-content;
}
.mx_FilterDropdown_optionSelectedIcon {
height: 14px;
width: 14px;
position: absolute;
top: $spacing-8;
left: 0;
}
.mx_FilterDropdown_optionLabel {
font-weight: var(--cpd-font-weight-semibold);
display: block;
}
.mx_FilterDropdown_optionDescription {
color: $secondary-content;
margin-top: $spacing-4;
}

38
res/css/components/views/elements/_FilterTabGroup.pcss Normal file
View file

@ -0,0 +1,38 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_FilterTabGroup {
color: $primary-content;
label {
margin-right: $spacing-12;
cursor: pointer;
span {
display: inline-block;
line-height: $font-24px;
}
}
input[type="radio"] {
appearance: none;
margin: 0;
padding: 0;
&:focus,
&:hover {
& + span {
color: $secondary-content;
}
}
&:checked + span {
color: $accent;
font-weight: var(--cpd-font-weight-semibold);
/* underline */
box-shadow: 0 1.5px 0 0 currentColor;
}
}
}

11
res/css/components/views/elements/_LearnMore.pcss Normal file
View file

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

40
res/css/components/views/location/_EnableLiveShare.pcss Normal file
View file

@ -0,0 +1,40 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_EnableLiveShare {
flex: 1 1 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
padding: $spacing-32 $spacing-16;
text-align: center;
box-sizing: border-box;
}
.mx_EnableLiveShare_heading {
padding-top: $spacing-24;
}
.mx_EnableLiveShare_icon {
height: 58px;
width: 58px;
}
.mx_EnableLiveShare_description {
padding: 0 $spacing-24;
margin-bottom: $spacing-32;
line-height: $font-20px;
}
.mx_EnableLiveShare_button {
margin-top: $spacing-32;
height: 48px;
width: 100%;
}

11
res/css/components/views/location/_LiveDurationDropdown.pcss Normal file
View file

@ -0,0 +1,11 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_LiveDurationDropdown {
margin-bottom: $spacing-16;
}

14
res/css/components/views/location/_LocationShareMenu.pcss Normal file
View file

@ -0,0 +1,14 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_LocationShareMenu {
width: 375px;
height: 460px;
display: flex;
flex-direction: column;
}

60
res/css/components/views/location/_MapError.pcss Normal file
View file

@ -0,0 +1,60 @@
/*
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_MapError {
padding: 100px $spacing-32 0;
text-align: center;
--mx-map-error-icon-color: $secondary-content;
--mx-map-error-icon-size: 58px;
}
.mx_MapError.mx_MapError_isMinimised {
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: $spacing-24;
background-color: $panels;
font-size: $font-12px;
line-height: $font-16px;
--mx-map-error-icon-color: $alert;
--mx-map-error-icon-size: 26px;
.mx_MapError_message {
margin: 0;
max-width: 275px;
}
.mx_MapError_heading {
padding-top: $spacing-8;
/* override h3 heading size */
font-size: inherit !important;
font-weight: normal !important;
}
}
.mx_MapError_message {
margin: $spacing-16 0 $spacing-32;
}
.mx_MapError_heading {
padding-top: $spacing-24;
}
.mx_MapError_icon {
height: var(--mx-map-error-icon-size);
path {
fill: var(--mx-map-error-icon-color);
}
}

37
res/css/components/views/location/_MapFallback.pcss Normal file
View file

@ -0,0 +1,37 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_MapFallback {
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
z-index: 0;
background-color: $system;
}
.mx_MapFallback_bg {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
color: $quinary-content;
z-index: -1;
pointer-events: none;
}
.mx_MapFallback_icon {
width: 65px;
margin-bottom: $spacing-16;
color: $quaternary-content;
}

38
res/css/components/views/location/_Marker.pcss Normal file
View file

@ -0,0 +1,38 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_Marker_defaultColor {
color: $accent;
}
.mx_Marker_border {
width: 42px;
height: 42px;
border-radius: 50%;
filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.2));
background-color: currentColor;
display: flex;
justify-content: center;
align-items: center;
/* caret down */
&::before {
content: "";
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid currentColor;
position: absolute;
bottom: -4px;
}
}
.mx_Marker_icon {
color: white;
height: 20px;
}

45
res/css/components/views/location/_ShareDialogButtons.pcss Normal file
View file

@ -0,0 +1,45 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_ShareDialogButtons {
position: absolute;
width: 100%;
height: 0;
top: 0;
}
.mx_ShareDialogButtons_button {
@mixin ButtonResetDefault;
height: 24px;
width: 24px;
border-radius: 50%;
background-color: $quinary-content;
opacity: 0.8;
text-align: center;
color: $secondary-content;
position: absolute;
top: $spacing-16;
&:hover,
&:focus {
opacity: 1;
}
&.left {
left: $spacing-16;
}
&.right {
right: $spacing-16;
}
}
.mx_ShareDialogButtons_button-icon {
height: 10px;
margin-top: 3px;
}

90
res/css/components/views/location/_ShareType.pcss Normal file
View file

@ -0,0 +1,90 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_ShareType {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 60px $spacing-12 $spacing-32;
color: $primary-content;
.mx_ShareType_wrapper_options {
display: flex;
flex-direction: column;
row-gap: $spacing-12;
width: 100%;
margin-top: $spacing-12;
.mx_ShareType_option {
display: flex;
align-items: center;
justify-content: flex-start;
padding: $spacing-8 $spacing-20;
background: none;
border: 1px solid $quinary-content;
border-radius: 8px;
font-size: $font-15px;
font-family: inherit;
line-height: inherit;
color: $primary-content;
&:hover,
&:focus {
border-color: $accent;
}
}
}
}
.mx_ShareType_badge {
height: 60px;
width: 60px;
margin-bottom: $spacing-20;
background-color: $accent;
border-radius: 50%;
border: 14px solid $accent;
/* colors icon */
color: white;
box-sizing: border-box;
}
.mx_ShareType_heading {
padding-bottom: $spacing-32;
text-align: center;
}
.mx_ShareType_option-icon {
height: 40px;
width: 40px;
box-sizing: border-box;
margin-right: $spacing-12;
flex: 0 0 40px;
border-width: 2px;
border-style: solid;
border-radius: 50%;
/* Live is styled by StyledLiveBeaconIcon */
&.Own {
border-color: $accent;
}
&.Pin {
border-color: $accent;
background-color: $accent;
padding: 7px;
/* colors icon */
color: white;
}
}

37
res/css/components/views/location/_ZoomButtons.pcss Normal file
View file

@ -0,0 +1,37 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_ZoomButtons {
position: absolute;
bottom: $spacing-32;
right: $spacing-24;
display: flex;
flex-direction: column;
row-gap: $spacing-8;
.mx_ZoomButtons_button {
$ZoomButtons_button-size: 24px;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
height: $ZoomButtons_button-size;
width: $ZoomButtons_button-size;
background: $background;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
.mx_ZoomButtons_icon {
$ZoomButtons_icon-size: 10px;
height: $ZoomButtons_icon-size;
width: $ZoomButtons_icon-size;
color: $primary-content;
}
}
}

81
res/css/components/views/messages/_MBeaconBody.pcss Normal file
View file

@ -0,0 +1,81 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_MBeaconBody {
position: relative;
height: 220px;
max-width: 325px;
width: 100%;
border-radius: var(--MBody-border-radius);
overflow: hidden;
}
.mx_MBeaconBody.mx_MBeaconBody_withoutMap {
height: auto;
.mx_MBeaconBody_chin {
position: relative;
background-color: transparent;
}
}
.mx_MBeaconBody_withoutMapContent {
background-color: $panels;
border-radius: 4px;
}
.mx_MBeaconBody_withoutMapInfoLastUpdated {
/* 48px lines up with icon in BeaconStatus */
margin-top: -$spacing-8;
padding: 0 $spacing-8 $spacing-8 48px;
color: $tertiary-content;
font-size: $font-10px;
}
.mx_MBeaconBody_map {
height: 100%;
width: 100%;
z-index: 0; /* keeps the entire map under the message action bars */
cursor: pointer;
}
.mx_MBeaconBody_mapFallback,
.mx_MBeaconBody_mapError {
/* pushes spinner/icon up */
/* to appear more centered with the footer */
padding-bottom: 50px !important;
}
.mx_MBeaconBody_mapErrorInteractive {
cursor: pointer;
}
.mx_MBeaconBody_mapFallback {
cursor: default;
}
.mx_MBeaconBody_chin {
position: absolute;
bottom: 0;
width: 100%;
background-color: var(--cpd-color-bg-canvas-default);
opacity: 0.85;
}
.mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_MBeaconBody {
max-width: 100%;
width: 450px;
}
.mx_ReplyTile .mx_MBeaconBody {
/* Prevent clicking a beacon within a reply */
pointer-events: none;
}

12
res/css/components/views/messages/shared/_MediaProcessingError.pcss Normal file
View file

@ -0,0 +1,12 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_MediaProcessingError_Icon {
margin-right: $spacing-4;
vertical-align: text-top;
}

73
res/css/components/views/pips/_WidgetPip.pcss Normal file
View file

@ -0,0 +1,73 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
$width: 320px;
$height: 220px;
.mx_WidgetPip {
width: $width;
height: $height;
}
.mx_WidgetPip_overlay {
width: $width;
height: $height;
position: absolute;
top: 0;
border-radius: 8px;
overflow: hidden;
color: $call-primary-content;
cursor: pointer;
}
.mx_WidgetPip_header,
.mx_WidgetPip_footer {
position: absolute;
left: 0;
height: 60px;
width: 100%;
box-sizing: border-box;
transition: opacity ease 0.15s;
}
.mx_WidgetPip_overlay:not(:hover) {
.mx_WidgetPip_header,
.mx_WidgetPip_footer {
opacity: 0;
}
}
.mx_WidgetPip_header {
top: 0;
padding: $spacing-12;
display: flex;
font-size: $font-12px;
font-weight: var(--cpd-font-weight-semibold);
background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
}
.mx_WidgetPip_backButton {
height: $spacing-24;
display: flex;
align-items: center;
gap: $spacing-12;
> .mx_Icon {
color: $call-light-quaternary-content;
padding: 0;
}
}
.mx_WidgetPip_footer {
bottom: 0;
padding: $spacing-12 $spacing-8;
display: flex;
justify-content: flex-end;
align-items: flex-end;
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
}

99
res/css/components/views/polls/_PollOption.pcss Normal file
View file

@ -0,0 +1,99 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_PollOption {
border: 1px solid $quinary-content;
border-radius: 8px;
padding: 6px 12px;
background-color: $background;
.mx_StyledRadioButton_content,
.mx_PollOption_endedOption {
padding-top: 2px;
margin-right: 0px;
}
.mx_StyledRadioButton_spacer {
display: none;
}
}
.mx_PollOption,
/* label has cursor: default in user-agent stylesheet */
/* override */
.mx_PollOption_live-option {
cursor: pointer;
}
.mx_PollOption_content {
display: flex;
justify-content: space-between;
}
.mx_PollOption_optionVoteCount {
color: $secondary-content;
font-size: $font-12px;
white-space: nowrap;
}
.mx_PollOption_winnerIcon {
height: 12px;
width: 12px;
color: var(--cpd-color-icon-accent-tertiary);
margin-right: $spacing-4;
vertical-align: middle;
}
.mx_PollOption_checked {
border-color: var(--cpd-color-border-interactive-hovered);
.mx_PollOption_popularityBackground {
.mx_PollOption_popularityAmount {
background-color: var(--cpd-color-icon-accent-tertiary);
}
}
/* override checked radio button styling to show checkmark instead */
.mx_StyledRadioButton_checked {
input[type="radio"]:checked + div {
border-width: 2px;
border-color: var(--cpd-color-icon-accent-tertiary);
background-color: var(--cpd-color-icon-accent-tertiary);
background-image: url("$(res)/img/element-icons/check-white.svg");
background-size: 12px;
background-repeat: no-repeat;
background-position: center;
div {
visibility: hidden;
}
}
}
}
/* options not actionable in these states */
.mx_PollOption_checked,
.mx_PollOption_ended {
pointer-events: none;
}
.mx_PollOption_popularityBackground {
width: 100%;
height: 8px;
margin-right: 12px;
border-radius: 8px;
background-color: $system;
margin-top: $spacing-8;
.mx_PollOption_popularityAmount {
width: 0%;
height: 8px;
border-radius: 8px;
background-color: $quaternary-content;
}
}

41
res/css/components/views/settings/_AddRemoveThreepids.pcss Normal file
View file

@ -0,0 +1,41 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2024 The Matrix.org Foundation C.I.C.
Copyright 2019 New Vector Ltd
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
/*
* These used to live in General User Settings. These components are horribly duplicative
* but share the same styles. For now I'm putting them here so I can renamed the general
* tab sensibly and before I can refactor these components.
*/
.mx_AddRemoveThreepids_existing {
display: flex;
align-items: center;
}
.mx_AddRemoveThreepids_existing_address,
.mx_AddRemoveThreepids_existing_promptText {
flex: 1;
margin-right: 10px;
}
.mx_AddRemoveThreepids_existing_button {
margin-left: 5px;
}
.mx_EmailAddressesPhoneNumbers_verify {
display: flex;
}
.mx_EmailAddressesPhoneNumbers_existing_button {
justify-content: right;
}
.mx_EmailAddressesPhoneNumbers_verify_instructions {
flex: 1;
}

12
res/css/components/views/settings/devices/_CurrentDeviceSection.pcss Normal file
View file

@ -0,0 +1,12 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_CurrentDeviceSection_deviceDetails {
/* align with text of session tile */
margin-left: 56px;
}

51
res/css/components/views/settings/devices/_DeviceDetailHeading.pcss Normal file
View file

@ -0,0 +1,51 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_DeviceDetailHeading {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.mx_DeviceDetailHeading_renameCta {
flex-shrink: 0;
}
.mx_DeviceDetailHeading_renameForm {
display: grid;
grid-gap: $spacing-16;
justify-content: left;
grid-template-columns: 100%;
}
.mx_DeviceDetailHeading_renameFormButtons {
display: flex;
flex-direction: row;
gap: $spacing-8;
.mx_Spinner {
width: auto;
flex-grow: 0;
}
}
.mx_DeviceDetailHeading_renameFormInput {
/* override field styles */
margin: 0 0 $spacing-4 0 !important;
}
.mx_DeviceDetailHeading_renameFormHeading {
margin: 0;
}
.mx_DeviceDetailHeading_renameFormError {
color: $alert;
padding-right: $spacing-4;
display: block;
}

88
res/css/components/views/settings/devices/_DeviceDetails.pcss Normal file
View file

@ -0,0 +1,88 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_DeviceDetails {
display: flex;
flex-direction: column;
box-sizing: border-box;
margin-top: $spacing-16;
padding: $spacing-24;
border-radius: 8px;
border: 1px solid $quinary-content;
}
.mx_DeviceDetails_section {
padding-bottom: $spacing-20;
margin-bottom: $spacing-20;
border-bottom: 1px solid $quinary-content;
display: grid;
grid-gap: $spacing-24;
justify-content: left;
grid-template-columns: 100%;
&:last-child {
padding-bottom: 0;
border-bottom: 0;
margin-bottom: 0;
}
}
.mx_DeviceDetails_sectionHeading {
margin: 0;
.mx_DeviceDetails_sectionSubheading {
display: block;
font-size: $font-12px;
color: $secondary-content;
line-height: $font-14px;
margin-top: $spacing-4;
}
}
.mx_DeviceDetails_metadataTable {
font: var(--cpd-font-body-sm-regular);
color: $secondary-content;
width: 100%;
border-spacing: 0;
th {
text-transform: uppercase;
font-weight: normal;
text-align: left;
}
td {
padding-top: $spacing-8;
}
.mxDeviceDetails_metadataLabel {
width: 160px;
}
.mxDeviceDetails_metadataValue {
color: $primary-content;
}
}
.mx_DeviceDetails_signOutButtonContent {
display: flex;
flex-direction: row;
align-items: center;
gap: $spacing-4;
}
.mx_DeviceDetails_pushNotifications {
display: block;
.mx_ToggleSwitch {
float: right;
}
}

41
res/css/components/views/settings/devices/_DeviceExpandDetailsButton.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_DeviceExpandDetailsButton {
height: 32px;
width: 32px;
background: transparent;
border-radius: 4px;
color: $icon-button-color;
--icon-transform: rotate(-90deg);
&:hover {
background: $quinary-content;
}
}
.mx_DeviceExpandDetailsButton.mx_DeviceExpandDetailsButton_expanded {
--icon-transform: rotate(0deg);
background: $system;
&:hover {
background: $quinary-content;
}
}
.mx_DeviceExpandDetailsButton_icon {
height: 16px;
width: 16px;
transition: all 0.3s;
transform: var(--icon-transform);
transform-origin: center;
}

66
res/css/components/views/settings/devices/_DeviceSecurityCard.pcss Normal file
View file

@ -0,0 +1,66 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_DeviceSecurityCard {
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
box-sizing: border-box;
padding: $spacing-16;
border: 1px solid $quinary-content;
border-radius: 8px;
}
.mx_DeviceSecurityCard_icon {
flex: 0 0 40px;
display: flex;
align-items: center;
justify-content: center;
margin-right: $spacing-16;
border-radius: 8px;
height: 40px;
width: 40px;
color: var(--icon-color);
background-color: var(--background-color);
&.Verified {
--icon-color: $e2e-verified-color;
--background-color: $e2e-verified-color-light;
}
&.Unverified {
--icon-color: $e2e-warning-color;
--background-color: $e2e-warning-color-light;
}
&.Inactive {
--icon-color: $secondary-content;
--background-color: $panels;
}
}
.mx_DeviceSecurityCard_content {
flex: 1 1;
}
.mx_DeviceSecurityCard_heading {
margin: 0 0 $spacing-4 0;
}
.mx_DeviceSecurityCard_description {
margin: 0;
font: var(--cpd-font-body-sm-regular);
color: $secondary-content;
}
.mx_DeviceSecurityCard_actions {
margin-top: $spacing-16;
}

41
res/css/components/views/settings/devices/_DeviceTile.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_DeviceTile {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
}
.mx_DeviceTile_interactive {
cursor: pointer;
}
.mx_DeviceTile_info {
flex: 1 1 0;
}
.mx_DeviceTile_metadata {
margin-top: $spacing-4;
font: var(--cpd-font-body-sm-regular);
color: $secondary-content;
}
.mx_DeviceTile_inactiveIcon {
height: 14px;
margin-right: $spacing-8;
vertical-align: middle;
}
.mx_DeviceTile_actions {
display: grid;
grid-gap: $spacing-8;
grid-auto-flow: column;
margin-left: $spacing-8;
}

63
res/css/components/views/settings/devices/_DeviceTypeIcon.pcss Normal file
View file

@ -0,0 +1,63 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_DeviceTypeIcon {
flex: 0 0 auto;
position: relative;
margin-right: $spacing-8;
/* creates space for verification icon to overlap */
padding: 0 $spacing-8 $spacing-8 0;
}
.mx_DeviceTypeIcon_deviceIconWrapper {
--background-color: $panels;
--icon-color: $secondary-content;
height: 40px;
width: 40px;
box-sizing: border-box;
border: $spacing-8 solid var(--background-color);
border-radius: 50%;
color: var(--icon-color);
background-color: var(--background-color);
}
.mx_DeviceTypeIcon_selected .mx_DeviceTypeIcon_deviceIconWrapper {
--background-color: $primary-content;
--icon-color: $background;
}
.mx_DeviceTypeIcon_deviceIcon {
height: 24px;
width: 24px;
}
.mx_DeviceTypeIcon_verificationIcon {
position: absolute;
bottom: 0;
right: 0;
height: 24px;
width: 24px;
box-sizing: border-box;
padding: $spacing-4;
border: 1px solid $quinary-content;
border-radius: 50%;
background-color: $background;
color: var(--v-icon-color);
&.verified {
--v-icon-color: $e2e-verified-color;
}
&.unverified {
--v-icon-color: $e2e-warning-color;
}
}

49
res/css/components/views/settings/devices/_FilteredDeviceList.pcss Normal file
View file

@ -0,0 +1,49 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_FilteredDeviceList {
.mx_Dropdown {
flex: 1 0 80px;
}
}
.mx_FilteredDeviceList_list {
list-style-type: none;
display: grid;
grid-gap: $spacing-16;
margin: 0;
padding: 0 $spacing-16;
}
.mx_FilteredDeviceList_listItem {
display: flex;
flex-direction: column;
}
.mx_FilteredDeviceList_securityCard {
margin-bottom: $spacing-32;
}
.mx_FilteredDeviceList_noResults {
width: 100%;
text-align: center;
margin-bottom: $spacing-32;
}
.mx_FilteredDeviceList_headerButton {
flex-shrink: 0;
/* override inline button styling */
display: flex !important;
flex-direction: row;
gap: $spacing-8;
}
.mx_FilteredDeviceList_deviceDetails {
/* align with text of session tile */
margin-left: 88px;
}

33
res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss Normal file
View file

@ -0,0 +1,33 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_FilteredDeviceListHeader {
display: flex;
flex-direction: row;
align-items: center;
box-sizing: border-box;
gap: $spacing-16;
width: 100%;
height: 48px;
padding: 0 $spacing-16;
margin-bottom: $spacing-32;
background-color: $panels;
border-radius: 8px;
color: $secondary-content;
/* Higher specificity selector to override the flex-start value */
.mx_AccessibleButton.mx_AccessibleButton_hasKind {
align-self: center;
}
}
.mx_FilteredDeviceListHeader_label {
flex: 1 1 100%;
}

11
res/css/components/views/settings/devices/_SecurityRecommendations.pcss Normal file
View file

@ -0,0 +1,11 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_SecurityRecommendations_spacing {
height: $spacing-16;
}

24
res/css/components/views/settings/devices/_SelectableDeviceTile.pcss Normal file
View file

@ -0,0 +1,24 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_SelectableDeviceTile {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
}
.mx_SelectableDeviceTile_checkbox {
flex: 1 0;
.mx_Checkbox_background + div {
flex: 1 0;
/* override more specific selector */
margin-left: $spacing-16 !important;
}
}

63
res/css/components/views/settings/shared/_SettingsSubsection.pcss Normal file
View file

@ -0,0 +1,63 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_SettingsSubsection {
width: 100%;
box-sizing: border-box;
&.mx_SettingsSubsection_newUi {
display: flex;
flex-direction: column;
gap: var(--cpd-space-8x);
}
}
.mx_SettingsSubsection_description {
margin-top: $spacing-8;
}
.mx_SettingsSubsection_text {
width: 100%;
box-sizing: inherit;
color: $secondary-content;
}
.mx_SettingsSubsection_content {
width: 100%;
display: grid;
grid-gap: $spacing-8;
/* setting minwidth 0 makes columns definitely sized fixing horizontal overflow */
grid-template-columns: minmax(0, 1fr);
justify-items: flex-start;
margin-top: $spacing-24;
summary {
color: $accent;
}
details[open] {
summary {
margin-bottom: $spacing-8;
}
}
&.mx_SettingsSubsection_contentStretch {
justify-items: stretch;
}
&.mx_SettingsSubsection_noHeading {
margin-top: 0;
}
&.mx_SettingsSubsection_content_newUi {
gap: var(--cpd-space-6x);
margin-top: 0;
}
.mx_SettingsSubsection_dropdown {
min-width: 360px;
}
}

18
res/css/components/views/settings/shared/_SettingsSubsectionHeading.pcss Normal file
View file

@ -0,0 +1,18 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_SettingsSubsectionHeading {
display: flex;
flex-direction: row;
gap: $spacing-8;
}
.mx_SettingsSubsectionHeading_heading {
flex: 1 1 100%;
}

32
res/css/components/views/spaces/_QuickThemeSwitcher.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_QuickThemeSwitcher {
display: flex;
align-items: center;
.mx_Dropdown {
min-width: 100px;
margin-left: auto;
height: min-content;
}
.mx_Dropdown_menu {
max-height: 70px;
}
}
.mx_QuickThemeSwitcher_heading {
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
text-transform: uppercase;
display: inline-block;
margin: 0;
}

16
res/css/components/views/typography/_Caption.pcss Normal file
View file

@ -0,0 +1,16 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_Caption {
font: var(--cpd-font-body-sm-regular);
color: $secondary-content;
&.mx_Caption_error {
color: $alert;
}
}

19
res/css/components/views/utils/_Box.pcss Normal file
View file

@ -0,0 +1,19 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_Box--flex {
flex: var(--mx-box-flex, unset);
}
.mx_Box--shrink {
flex-shrink: var(--mx-box-shrink, unset);
}
.mx_Box--grow {
flex-grow: var(--mx-box-grow, unset);
}

15
res/css/components/views/utils/_Flex.pcss Normal file
View file

@ -0,0 +1,15 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_Flex {
display: var(--mx-flex-display, unset);
flex-direction: var(--mx-flex-direction, unset);
align-items: var(--mx-flex-align, unset);
justify-content: var(--mx-flex-justify, unset);
gap: var(--mx-flex-gap, unset);
}

73
res/css/compound/_Icon.pcss Normal file
View file

@ -0,0 +1,73 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
/*
* Compound icon
* {@link https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed}
*/
.mx_Icon {
box-sizing: border-box;
}
.mx_Icon_accent {
color: $accent;
}
.mx_Icon_bg-accent-light {
background-color: $accent-300;
}
.mx_Icon_alert {
color: $alert;
}
.mx_Icon_circle-40 {
border-radius: 20px;
flex: 0 0 40px;
height: 40px;
padding: 0 12px;
width: 40px;
}
.mx_Icon_8 {
flex: 0 0 8px;
height: 8px;
width: 8px;
}
.mx_Icon_10 {
flex: 0 0 10px;
height: 10px;
width: 10px;
}
.mx_Icon_12 {
flex: 0 0 12px;
height: 12px;
width: 12px;
}
.mx_Icon_16 {
flex: 0 0 16px;
height: 16px;
width: 16px;
}
.mx_Icon_24 {
flex: 0 0 24px;
height: 24px;
width: 24px;
}
.mx_Icon_32 {
flex: 0 0 32px;
height: 32px;
width: 32px;
}

40
res/css/compound/_SuccessDialog.pcss Normal file
View file

@ -0,0 +1,40 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_SuccessDialog {
text-align: center;
.mx_Icon {
margin-bottom: $spacing-16;
}
.mx_Dialog_header {
margin: 0 0 $spacing-16;
padding: 0;
}
.mx_Dialog_title {
margin: 0;
}
.mx_Dialog_content {
color: $secondary-content;
margin: 0 0 $spacing-40;
}
.mx_Dialog_buttons {
.mx_Dialog_buttons_row {
justify-content: center;
button.mx_Dialog_primary {
height: 48px;
min-width: 328px;
}
}
}
}

15
res/css/rethemendex.sh Executable file
View file

@ -0,0 +1,15 @@
#!/usr/bin/env sh
cd `dirname $0`
{
echo "/* autogenerated by rethemendex.sh */"
# we used to have exclude /themes from the find at this point.
# as themes are no longer a spurious subdirectory of css/, we don't
# need it any more.
find . -iname _\*.pcss | fgrep -v _components.pcss | LC_ALL=C sort |
while read i; do
echo "@import \"$i\";"
done
} > _components.pcss

53
res/css/structures/_AutoHideScrollbar.pcss Normal file
View file

@ -0,0 +1,53 @@
/*
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.
*/
/* make any scrollbar grey and thin */
html {
scrollbar-color: $scrollbar-thumb-color transparent;
}
/* scrollbar-width is not inherited (but -color is, why?!), */
/* so declare it on every element */
* {
scrollbar-width: thin;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: $scrollbar-thumb-color;
}
/* make auto-hide scrollbars not transparent again on hover */
.mx_AutoHideScrollbar:hover {
scrollbar-color: $scrollbar-thumb-color transparent;
&::-webkit-scrollbar-thumb {
background-color: $scrollbar-thumb-color;
}
}
/* make scrollbars transparent for autohide scrollbars */
.mx_AutoHideScrollbar {
overflow-x: hidden;
overflow-y: auto;
overflow-y: overlay; /* where supported */
-ms-overflow-style: -ms-autohiding-scrollbar;
&::-webkit-scrollbar {
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: transparent;
}
scrollbar-color: transparent transparent;
}

121
res/css/structures/_AutocompleteInput.pcss Normal file
View file

@ -0,0 +1,121 @@
/*
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_AutocompleteInput {
position: relative;
}
.mx_AutocompleteInput_search_icon {
margin-left: $spacing-8;
fill: $secondary-content;
}
.mx_AutocompleteInput_editor {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid $input-border-color;
border-radius: 4px;
transition: border-color 0.25s;
> input {
flex: 1;
min-width: 40%;
resize: none;
/* `!important` is required to bypass global input styles. */
margin: 0 !important;
padding: $spacing-8 9px;
border: none !important;
color: $primary-content !important;
font-weight: normal !important;
&::placeholder {
color: $primary-content !important;
font-weight: normal !important;
}
}
}
.mx_AutocompleteInput_editor--focused {
border-color: $links;
}
.mx_AutocompleteInput_editor--has-suggestions {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.mx_AutocompleteInput_editor_selection {
display: flex;
margin-left: $spacing-8;
}
.mx_AutocompleteInput_editor_selection_pill {
display: flex;
align-items: center;
border-radius: 12px;
padding-left: $spacing-8;
padding-right: $spacing-8;
background-color: $username-variant1-color;
color: #ffffff;
font-size: $font-12px;
}
.mx_AutocompleteInput_editor_selection_remove_button svg {
vertical-align: middle;
}
.mx_AutocompleteInput_matches {
position: absolute;
left: 0;
right: 0;
background-color: $background;
border: 1px solid $links;
border-top-color: $input-border-color;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
z-index: 1000;
}
.mx_AutocompleteInput_suggestion {
display: flex;
align-items: center;
padding: $spacing-8;
cursor: pointer;
> * {
user-select: none;
}
&:hover {
background-color: $quinary-content;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
}
.mx_AutocompleteInput_suggestion--selected {
background-color: $quinary-content;
&:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
}
.mx_AutocompleteInput_suggestion_title {
margin-right: $spacing-8;
}
.mx_AutocompleteInput_suggestion_description {
color: $secondary-content;
font-size: $font-12px;
}

29
res/css/structures/_BackdropPanel.pcss Normal file
View file

@ -0,0 +1,29 @@
/*
Copyright 2021-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_BackdropPanel {
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 100%;
overflow: hidden;
filter: blur(var(--lp-background-blur));
/* Force a new layer for the backdropPanel so it's better hardware supported */
transform: translateZ(0);
}
.mx_BackdropPanel--image {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
z-index: 0;
pointer-events: none;
overflow: hidden;
user-select: none;
}

16
res/css/structures/_CompatibilityPage.pcss Normal file
View file

@ -0,0 +1,16 @@
.mx_CompatibilityPage {
width: 100%;
height: 100%;
background-color: #e55;
}
.mx_CompatibilityPage_box {
position: absolute;
inset: 0;
margin: auto;
width: 500px;
height: 300px;
border: 1px solid;
padding: 10px;
background-color: #fcc;
}

117
res/css/structures/_ContextualMenu.pcss Normal file
View file

@ -0,0 +1,117 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.
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_ContextualMenu_wrapper {
position: fixed;
z-index: 5000;
}
.mx_ContextualMenu_background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
}
.mx_ContextualMenu {
border-radius: 12px;
box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
background-color: var(--cpd-color-bg-canvas-default);
border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
color: $primary-content;
position: absolute;
z-index: 5001;
width: max-content;
}
.mx_ContextualMenu_right {
right: 16px;
}
.mx_ContextualMenu.mx_ContextualMenu_withChevron_right {
right: 8px;
}
.mx_ContextualMenu_chevron_right {
position: absolute;
right: -8px;
top: 0px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-left: 8px solid $menu-bg-color;
border-bottom: 8px solid transparent;
}
.mx_ContextualMenu_left {
left: 0;
}
.mx_ContextualMenu.mx_ContextualMenu_withChevron_left {
left: 8px;
}
.mx_ContextualMenu_chevron_left {
position: absolute;
left: -8px;
top: 0px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 8px solid $menu-bg-color;
border-bottom: 8px solid transparent;
}
.mx_ContextualMenu_top {
top: 0;
}
.mx_ContextualMenu.mx_ContextualMenu_withChevron_top {
top: 8px;
}
.mx_ContextualMenu_chevron_top {
position: absolute;
left: 0px;
top: -8px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-bottom: 8px solid $menu-bg-color;
border-right: 8px solid transparent;
}
.mx_ContextualMenu_bottom {
bottom: 0;
}
.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom {
bottom: 8px;
}
.mx_ContextualMenu_chevron_bottom {
position: absolute;
left: 0px;
bottom: -8px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-top: 8px solid $menu-bg-color;
border-right: 8px solid transparent;
}
.mx_ContextualMenu_rightAligned {
transform: translateX(-100%);
}
.mx_ContextualMenu_bottomAligned {
transform: translateY(-100%);
}

17
res/css/structures/_ErrorMessage.pcss Normal file
View file

@ -0,0 +1,17 @@
/*
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_ErrorMessage {
align-items: center;
color: $alert;
display: flex;
font-size: $font-12px;
gap: $spacing-8;
line-height: 1.2em;
min-height: 2.4em;
}

57
res/css/structures/_FileDropTarget.pcss Normal file
View file

@ -0,0 +1,57 @@
/*
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.
*/
@keyframes mx_FileDropTarget_animation {
from {
opacity: 0;
}
to {
opacity: 0.95;
}
}
.mx_FileDropTarget {
min-width: 0;
width: 100%;
height: 100%;
font-size: $font-18px;
text-align: center;
pointer-events: none;
background-color: $background;
opacity: 0.95;
position: absolute;
z-index: 3000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
animation: mx_FileDropTarget_animation;
animation-duration: 0.5s;
}
@keyframes mx_FileDropTarget_image_animation {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
.mx_FileDropTarget_image {
width: 32px;
animation: mx_FileDropTarget_image_animation;
animation-duration: 0.5s;
margin-bottom: 16px;
}

77
res/css/structures/_FilePanel.pcss Normal file
View file

@ -0,0 +1,77 @@
/*
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_FilePanel {
order: 2;
flex: 1 1 0;
overflow-y: auto;
display: flex;
.mx_RoomView_messageListWrapper {
flex-direction: row;
align-items: center;
justify-content: center;
}
.mx_RoomView_MessageList {
width: 100%;
gap: var(--cpd-space-6x);
}
/* FIXME: rather than having EventTile's default CSS be for MessagePanel,
we should make EventTile a base CSS class and customise it specifically
for usage in {Message,File,Notification}Panel. */
/* Overrides for the attachment body tiles */
.mx_EventTile {
word-break: break-word;
padding-top: 0;
& + .mx_EventTile {
border-top: 1px solid var(--cpd-color-gray-400);
padding-top: var(--cpd-space-6x);
}
.mx_EventTile_line {
padding-inline-start: 0;
}
.mx_MFileBody_download {
margin-top: var(--cpd-space-4x);
}
/* anchor link as wrapper */
.mx_EventTile_senderDetailsLink {
text-decoration: none;
margin-bottom: var(--cpd-space-1x);
display: block;
.mx_EventTile_senderDetails {
display: flex;
margin-top: -2px;
gap: var(--cpd-space-2x);
align-items: center;
.mx_DisambiguatedProfile {
color: $event-timestamp-color; /* for ellipsis. Color of displayName and mxid is inherited */
}
.mx_MessageTimestamp {
margin-left: auto;
font: var(--cpd-font-body-xs-regular);
color: var(--cpd-color-text-secondary);
}
}
}
}
.mx_EventTile_line {
margin-inline-end: 0;
padding-inline-start: 0;
}
}

115
res/css/structures/_GenericDropdownMenu.pcss Normal file
View file

@ -0,0 +1,115 @@
/*
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_GenericDropdownMenu_button {
padding: 3px 4px 3px 8px;
border-radius: 4px;
line-height: 1.5;
user-select: none;
font-size: $font-12px;
color: $secondary-content;
}
.mx_GenericDropdownMenu_button:hover,
.mx_GenericDropdownMenu_button[aria-expanded="true"] {
background: $quinary-content;
}
.mx_GenericDropdownMenu_button::before {
content: "";
width: 18px;
height: 18px;
background: currentColor;
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
mask-size: 100%;
mask-repeat: no-repeat;
float: right;
}
.mx_ContextualMenu_wrapper.mx_GenericDropdownMenu_wrapper {
.mx_ContextualMenu {
position: initial;
font-size: $font-12px;
color: $secondary-content;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid $quinary-content;
box-shadow: 0 1px 3px rgba(23, 25, 28, 0.05);
}
.mx_ContextualMenu_chevron_top {
left: auto;
right: 22px;
border-bottom-color: $quinary-content;
&::after {
content: "";
border: inherit;
border-bottom-color: $menu-bg-color;
position: absolute;
top: 1px;
left: -8px;
}
}
.mx_GenericDropdownMenu_divider {
display: block;
height: 0;
margin-left: 4px;
margin-right: 19px;
border-top: 1px solid $quinary-content;
}
.mx_GenericDropdownMenu_Option {
display: flex;
flex-grow: 1;
flex-direction: row;
align-items: center;
padding: 10px 20px 10px 30px;
position: relative;
> .mx_GenericDropdownMenu_Option--label {
display: flex;
flex-direction: column;
flex-grow: 1;
margin: 0;
span:first-child {
color: $primary-content;
font-weight: var(--cpd-font-weight-semibold);
}
}
&.mx_GenericDropdownMenu_Option--header > .mx_GenericDropdownMenu_Option--label span:first-child {
font-size: $font-15px;
}
&.mx_GenericDropdownMenu_Option--item {
&:hover {
background-color: $menu-selected-color;
}
&[aria-checked="true"]::before {
content: "";
width: 12px;
height: 12px;
margin-left: -20px;
margin-right: 8px;
mask-image: url("$(res)/img/feather-customised/check.svg");
mask-size: 100%;
mask-repeat: no-repeat;
background-color: $primary-content;
display: inline-block;
vertical-align: middle;
}
}
}
}

99
res/css/structures/_HomePage.pcss Normal file
View file

@ -0,0 +1,99 @@
/*
Copyright 2019-2024 New Vector Ltd.
Copyright 2017 Vector Creations 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_HomePage {
max-width: 960px;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.mx_HomePage_default {
text-align: center;
display: flex;
.mx_HomePage_default_wrapper {
margin: auto;
}
img {
height: 48px;
}
h1 {
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-32px;
line-height: 1.375;
margin-bottom: 4px;
}
h2 {
margin-top: 4px;
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-18px;
line-height: $font-25px;
color: $muted-fg-color;
}
.mx_MiniAvatarUploader {
margin: 0 auto;
}
.mx_HomePage_default_buttons {
display: flex;
margin: 60px auto 0;
width: fit-content;
.mx_AccessibleButton {
padding: 73px 8px 15px; /* top: 20px top padding + 40px icon + 13px margin */
width: 160px;
min-height: 132px;
margin: 20px;
position: relative;
display: inline-block;
border-radius: 8px;
vertical-align: top;
word-break: break-word;
box-sizing: border-box;
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-20px;
color: #fff; /* on all themes */
background-color: $accent;
&::before {
top: 20px;
left: 60px; /* (160px-40px)/2 */
width: 40px;
height: 40px;
content: "";
position: absolute;
background-color: #fff; /* on all themes */
mask-repeat: no-repeat;
mask-size: contain;
}
&.mx_HomePage_button_sendDm::before {
mask-image: url("$(res)/img/element-icons/feedback.svg");
}
&.mx_HomePage_button_explore::before {
mask-image: url("$(res)/img/element-icons/roomlist/explore.svg");
}
&.mx_HomePage_button_createGroup::before {
mask-image: url("$(res)/img/element-icons/group-members.svg");
}
}
}
}

29
res/css/structures/_LargeLoader.pcss Normal file
View file

@ -0,0 +1,29 @@
/*
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_LargeLoader {
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
.mx_Spinner {
flex: unset;
height: auto;
margin-bottom: 32px;
margin-top: 33vh;
}
.mx_LargeLoader_text {
font-size: 24px;
font-weight: var(--cpd-font-weight-semibold);
padding: 0 16px;
position: relative;
text-align: center;
}
}

242
res/css/structures/_LeftPanel.pcss Normal file
View file

@ -0,0 +1,242 @@
/*
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_MatrixChat--with-avatar {
.mx_LeftPanel,
.mx_LeftPanel .mx_LeftPanel_roomListContainer {
background-color: transparent;
}
}
.mx_LeftPanel_outerWrapper {
display: flex;
flex-direction: column;
max-width: 50%;
position: relative;
/* Contain the amount of layers rendered by constraining what actually needs re-layering via css */
contain: layout paint;
}
.mx_LeftPanel_wrapper,
.mx_LeftPanel {
--collapsedWidth: 68px;
}
.mx_LeftPanel_wrapper {
display: flex;
flex-direction: row;
flex: 1;
height: 100%; /* ensure space panel is still scrollable with an outer wrapper */
.mx_LeftPanel_wrapper--user {
background-color: $roomlist-bg-color;
display: flex;
overflow: hidden;
position: relative;
&[data-collapsed] {
max-width: var(--collapsedWidth);
}
}
}
.mx_LeftPanel {
background-color: $roomlist-bg-color;
/* Create a row-based flexbox for the space panel and the room list */
display: flex;
contain: content;
position: relative;
flex-grow: 1;
overflow: hidden;
/* Note: The 'room list' in this context is actually everything that isn't the tag */
/* panel, such as the menu options, breadcrumbs, filtering, etc */
.mx_LeftPanel_roomListContainer {
background-color: $roomlist-bg-color;
flex: 1 0 0;
min-width: 0;
/* Create another flexbox (this time a column) for the room list components */
display: flex;
flex-direction: column;
.mx_LeftPanel_userHeader {
/* 12px top, 12px sides, 20px bottom (using 13px bottom to account
* for internal whitespace in the breadcrumbs)
*/
padding: 12px;
flex-shrink: 0; /* to convince safari's layout engine the flexbox is fine */
/* Create another flexbox column for the rows to stack within */
display: flex;
flex-direction: column;
}
.mx_LeftPanel_breadcrumbsContainer {
overflow-y: hidden;
overflow-x: scroll;
margin: 12px 12px 0 12px;
flex: 0 0 auto;
/* Create yet another flexbox, this time within the row, to ensure items stay */
/* aligned correctly. This is also a row-based flexbox. */
display: flex;
align-items: center;
contain: content;
&.mx_IndicatorScrollbar_leftOverflow {
mask-image: linear-gradient(90deg, transparent, black 5%);
}
&.mx_IndicatorScrollbar_rightOverflow {
mask-image: linear-gradient(90deg, black, black 95%, transparent);
}
&.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}
}
.mx_LeftPanel_filterContainer {
margin: 0 12px;
padding: 12px 0 8px;
border-bottom: 1px solid $quinary-content;
flex-shrink: 0; /* to convince safari's layout engine the flexbox is fine */
/* Create a flexbox to organize the inputs */
display: flex;
align-items: center;
& + .mx_RoomListHeader {
margin-top: 12px;
}
.mx_LeftPanel_dialPadButton {
width: 32px;
height: 32px;
border-radius: 8px;
background-color: $panel-actions;
position: relative;
margin-left: 8px;
&::before {
content: "";
position: absolute;
top: 8px;
left: 8px;
width: 16px;
height: 16px;
mask-image: url("$(res)/img/element-icons/call/dialpad.svg");
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $secondary-content;
}
}
.mx_LeftPanel_exploreButton,
.mx_LeftPanel_recentsButton {
width: 32px;
height: 32px;
border-radius: 8px;
background-color: $panel-actions;
position: relative;
margin-left: 8px;
&::before {
content: "";
position: absolute;
top: 8px;
left: 8px;
width: 16px;
height: 16px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $secondary-content;
}
&:hover {
background-color: $tertiary-content;
&::before {
background-color: $background;
}
}
}
.mx_LeftPanel_exploreButton::before {
mask-image: url("$(res)/img/element-icons/roomlist/explore.svg");
}
.mx_LeftPanel_recentsButton::before {
mask-image: url("$(res)/img/element-icons/clock.svg");
}
}
.mx_RoomListHeader:first-child {
margin-top: 12px;
}
.mx_LeftPanel_roomListWrapper {
/* Make the y-scrollbar more responsive */
padding-right: 2px;
overflow: hidden;
margin-top: 10px; /* so we're not up against the search/filter */
flex: 1 0 0; /* needed in Safari to properly set flex-basis */
&.mx_LeftPanel_roomListWrapper_stickyBottom {
padding-bottom: 32px;
}
&.mx_LeftPanel_roomListWrapper_stickyTop {
padding-top: 32px;
}
}
.mx_LeftPanel_actualRoomListContainer {
position: relative; /* for sticky headers */
height: 100%; /* ensure scrolling still works */
}
}
/* These styles override the defaults for the minimized (66px) layout */
&.mx_LeftPanel_minimized {
flex-grow: 0;
min-width: unset;
width: unset !important;
.mx_LeftPanel_roomListContainer {
width: var(--collapsedWidth);
.mx_LeftPanel_userHeader {
flex-direction: row;
justify-content: center;
}
.mx_LeftPanel_filterContainer {
/* Organize the flexbox into a centered column layout */
flex-direction: column;
justify-content: center;
.mx_LeftPanel_dialPadButton {
margin-left: 0;
margin-top: 8px;
background-color: transparent;
}
.mx_LeftPanel_exploreButton,
.mx_LeftPanel_recentsButton {
margin-left: 0;
margin-top: 8px;
}
}
}
}
}

32
res/css/structures/_MainSplit.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_MainSplit {
display: flex;
flex-direction: row;
min-width: 0;
min-height: 0;
height: 100%;
}
.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
&:hover .mx_ResizeHandle--horizontal::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-150%, -50%);
height: 64px; /* to match width of the ones on roomlist */
width: 4px;
border-radius: 4px;
content: "";
background-color: $primary-content;
opacity: 0.8;
}
}

70
res/css/structures/_MatrixChat.pcss Normal file
View file

@ -0,0 +1,70 @@
/*
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.
*/
.mx_MatrixChat_splash {
position: relative;
height: 100%;
}
.mx_MatrixChat_wrapper {
display: flex;
width: 100%;
height: 100%;
}
.mx_MatrixToolbar {
order: 1;
height: 40px;
}
.mx_MatrixChat {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex: 1;
min-height: 0;
}
/* not the left panel, and not the resize handle, so the roomview and friends */
.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle):not(.mx_LeftPanel_outerWrapper) {
background-color: $background;
flex: 1 1 0;
min-width: 0;
/* To fix https://github.com/vector-im/element-web/issues/3298 where Safari
needed height 100% all the way down to the HomePage. Height does not
have to be auto, empirically.
*/
height: 100%;
}
.mx_MatrixChat > .mx_ResizeHandle--horizontal:hover {
position: relative;
&::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 64px; /* to match width of the ones on roomlist */
width: 4px;
border-radius: 4px;
content: " ";
background-color: $primary-content;
opacity: 0.8;
}
}

29
res/css/structures/_MessagePanel.pcss Normal file
View file

@ -0,0 +1,29 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_MessagePanel_myReadMarker {
height: 0;
margin: 0;
padding: 0;
border: 0;
hr {
border-top: solid 1px $accent;
border-bottom: solid 1px $accent;
margin-top: 0;
position: relative;
top: -1px;
z-index: 1;
will-change: width;
transition:
width 400ms easeinsine 1s,
opacity 400ms easeinsine 1s;
width: 99%;
opacity: 1;
}
}

27
res/css/structures/_NonUrgentToastContainer.pcss Normal file
View file

@ -0,0 +1,27 @@
/*
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_NonUrgentToastContainer {
position: absolute;
bottom: 30px;
left: 28px;
z-index: 101; /* same level as other toasts */
.mx_NonUrgentToastContainer_toast {
padding: 10px 12px;
border-radius: 8px;
width: 320px;
font-size: $font-13px;
margin-top: 8px;
/* We don't use variables on the colours because we want it to be the same */
/* in all themes. */
background-color: #17191c;
color: #fff;
}
}

119
res/css/structures/_QuickSettingsButton.pcss Normal file
View file

@ -0,0 +1,119 @@
/*
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_QuickSettingsButton {
flex: 0 0 auto;
border-radius: 8px;
position: relative;
margin: 12px auto;
color: $secondary-content;
min-width: 32px;
min-height: 32px;
line-height: 32px;
&.expanded {
margin-left: 20px;
padding-left: 44px; /* align with toggle collapse button text */
padding-right: 8px;
}
&::before {
content: "";
position: absolute;
width: 32px;
height: 32px;
left: 0;
mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: 24px;
background: $secondary-content;
}
&:not(.expanded):hover {
background-color: $quaternary-content;
&::before {
background-color: $primary-content;
}
}
}
.mx_QuickSettingsButton_ContextMenuWrapper .mx_ContextualMenu {
padding: 16px;
width: max-content;
min-width: 200px;
contain: unset; /* let the dropdown paint beyond the context menu */
> div > h2 {
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-24px;
color: var(--cpd-color-text-secondary);
margin: 0 0 16px;
}
.mx_AccessibleButton_hasKind {
display: block;
margin-top: 4px;
}
> div > h4 {
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-12px;
line-height: $font-15px;
text-transform: uppercase;
color: var(--cpd-color-text-secondary);
margin: 20px 0 12px;
}
.mx_QuickSettingsButton_pinToSidebarHeading {
padding-left: 24px;
position: relative;
}
.mx_Checkbox {
margin-bottom: 8px;
}
.mx_QuickSettingsButton_favouritesCheckbox,
.mx_QuickSettingsButton_peopleCheckbox {
.mx_Checkbox_background + div {
padding-left: 22px;
position: relative;
margin-left: 6px;
font-size: $font-15px;
line-height: $font-24px;
color: var(--cpd-color-text-primary);
}
}
.mx_QuickSettingsButton_moreOptionsButton {
padding-left: 22px;
margin-left: 22px;
font-size: $font-15px;
line-height: $font-24px;
color: var(--cpd-color-text-primary);
position: relative;
margin-bottom: 16px;
}
}
.mx_QuickSettingsButton_icon {
// TODO remove when all icons have fill=currentColor
* {
fill: $secondary-content;
}
color: $secondary-content;
width: 16px;
height: 16px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}

66
res/css/structures/_RightPanel.pcss Normal file
View file

@ -0,0 +1,66 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.
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_RightPanel {
overflow-x: hidden;
flex: 0 0 auto;
position: relative;
display: flex;
flex-direction: column;
border-left: 1px solid $separator;
box-sizing: border-box;
height: 100%;
contain: strict;
background-color: var(--cpd-color-bg-canvas-default);
.mx_RoomView_MessageList {
padding: 14px 18px; /* top and bottom is 4px smaller to balance with the padding set above */
}
}
/** Fixme - factor this out with the main header **/
.mx_RightPanel_threadsButton::before {
mask-image: url("$(res)/img/element-icons/room/thread.svg");
}
.mx_RightPanel_notifsButton::before {
mask-image: url("$(res)/img/element-icons/notifications.svg");
mask-position: center;
}
.mx_RightPanel_roomSummaryButton::before {
mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
mask-position: center;
}
.mx_RightPanel_pinnedMessagesButton {
&::before {
mask-image: url("$(res)/img/element-icons/room/pin.svg");
mask-position: center;
}
}
.mx_RightPanel_timelineCardButton {
&::before {
mask-image: url("$(res)/img/element-icons/feedback.svg");
mask-position: center;
}
}
.mx_RightPanel .mx_MemberList,
.mx_RightPanel .mx_MemberInfo {
order: 2;
flex: 1 1 0;
}
.mx_RightPanel .mx_RoomView_messagePanelSpinner {
order: 2;
margin: auto;
}

96
res/css/structures/_RoomSearch.pcss Normal file
View file

@ -0,0 +1,96 @@
/*
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.
*/
/* Note: this component expects to be contained within a flexbox */
.mx_RoomSearch {
flex: 1;
min-width: 0;
border-radius: 8px;
background-color: $panel-actions;
/* keep border thickness consistent to prevent movement */
border: 1px solid transparent;
height: 28px;
padding: 1px;
/* Create a flexbox for the icons (easier to manage) */
display: flex;
align-items: center;
cursor: pointer;
.mx_RoomSearch_icon {
width: 20px;
height: 20px;
mask-image: url("@vector-im/compound-design-tokens/icons/search.svg");
mask-repeat: no-repeat;
mask-size: contain;
background-color: $secondary-content;
margin-left: var(--cpd-space-2x);
flex-shrink: 0;
}
.mx_RoomSearch_spotlightTriggerText {
color: var(--cpd-color-text-secondary);
flex: 1;
min-width: 0;
/* the following rules are to match that of a real input field */
overflow: hidden;
margin: 9px;
font: var(--cpd-font-body-sm-semibold);
}
.mx_RoomSearch_shortcutPrompt {
border-radius: 6px;
background-color: $panel-actions;
padding: 2px 4px;
user-select: none;
font-size: $font-12px;
line-height: $font-15px;
font-family: inherit;
font-weight: var(--cpd-font-weight-semibold);
color: $light-fg-color;
margin-right: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&.mx_RoomSearch_minimized {
height: 32px;
min-height: 32px;
width: 32px;
box-sizing: border-box;
.mx_RoomSearch_icon {
margin: 0 auto;
padding: 1px;
align-self: center;
}
.mx_RoomSearch_shortcutPrompt {
display: none;
}
}
&:hover {
background-color: $tertiary-content;
.mx_RoomSearch_spotlightTriggerText {
color: $background;
}
.mx_RoomSearch_shortcutPrompt {
background-color: $background;
color: $secondary-content;
}
.mx_RoomSearch_icon {
background-color: $background;
}
}
}

192
res/css/structures/_RoomStatusBar.pcss Normal file
View file

@ -0,0 +1,192 @@
/*
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.
*/
.mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
margin-left: 65px;
min-height: 50px;
}
.mx_RoomStatusBar_typingIndicatorAvatars {
width: 52px;
margin-top: -1px;
text-align: left;
}
.mx_RoomStatusBar_typingIndicatorRemaining {
display: inline-block;
color: #acacac;
background-color: #ddd;
border: 1px solid $background;
border-radius: 40px;
width: 24px;
height: 24px;
line-height: $font-24px;
font-size: 0.8em;
vertical-align: top;
text-align: center;
position: absolute;
}
.mx_RoomStatusBar_scrollDownIndicator {
cursor: pointer;
padding-left: 1px;
}
.mx_RoomStatusBar_unreadMessagesBar {
padding-top: 10px;
color: $alert;
cursor: pointer;
}
.mx_RoomStatusBar_connectionLostBar {
display: flex;
margin-top: 19px;
min-height: 58px;
}
.mx_RoomStatusBar_unsentMessages {
> div[role="alert"] {
/* cheat some basic alignment */
display: flex;
align-items: center;
min-height: 70px;
margin: 12px;
padding-left: 16px;
background-color: $header-panel-bg-color;
border-radius: 4px;
}
.mx_RoomStatusBar_unsentBadge {
margin-right: 12px;
.mx_NotificationBadge {
/* Override sizing from the default badge */
width: 24px !important;
height: 24px !important;
border-radius: 24px !important;
.mx_NotificationBadge_count {
font-size: $font-16px !important; /* override default */
}
}
}
.mx_RoomStatusBar_unsentTitle {
color: $alert;
font-size: $font-15px;
}
.mx_RoomStatusBar_unsentDescription {
font-size: $font-12px;
}
.mx_RoomStatusBar_unsentButtonBar {
flex-grow: 1;
text-align: right;
margin-right: 22px;
color: $muted-fg-color;
.mx_AccessibleButton {
padding: 5px 10px;
padding-left: 30px; /* 18px for the icon, 2px margin to text, 10px regular padding */
display: inline-block;
position: relative;
user-select: none;
&:nth-child(2) {
border-left: 1px solid $resend-button-divider-color;
}
&::before {
content: "";
position: absolute;
left: 10px; /* inset for regular button padding */
background-color: $muted-fg-color;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
width: 18px;
height: 18px;
top: 50%; /* text sizes are dynamic */
transform: translateY(-50%);
}
&.mx_RoomStatusBar_unsentCancelAllBtn::before {
mask-image: url("$(res)/img/element-icons/trashcan.svg");
}
&.mx_RoomStatusBar_unsentRetry {
padding-left: 34px; /* 28px from above, but +6px to account for the wider icon */
&::before {
mask-image: url("$(res)/img/element-icons/retry.svg");
}
}
}
.mx_InlineSpinner {
vertical-align: middle;
margin-right: 5px;
top: 1px; /* just to help the vertical alignment be slightly better */
& + span {
margin-right: 10px; /* same margin/padding as the rightmost button */
}
}
}
}
.mx_RoomStatusBar_connectionLostBar svg {
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: left;
}
.mx_RoomStatusBar_connectionLostBar_title {
color: $alert;
}
.mx_RoomStatusBar_connectionLostBar_desc {
color: $primary-content;
font-size: $font-13px;
opacity: 0.5;
padding-bottom: 20px;
}
.mx_RoomStatusBar_resend_link {
color: $primary-content !important;
text-decoration: underline !important;
cursor: pointer;
}
.mx_RoomStatusBar_typingBar {
height: 50px;
line-height: 50px;
color: $primary-content;
opacity: 0.5;
overflow-y: hidden;
display: block;
}
.mx_MatrixChat_useCompactLayout {
.mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
min-height: 40px;
}
.mx_RoomStatusBar_indicator {
margin-top: 10px;
}
.mx_RoomStatusBar_typingBar {
height: 40px;
line-height: 40px;
}
}

273
res/css/structures/_RoomView.pcss Normal file
View file

@ -0,0 +1,273 @@
/*
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.
*/
:root {
--RoomView_MessageList-padding: 18px;
}
.mx_RoomView_wrapper {
display: flex;
flex-direction: column;
flex: 1;
position: relative;
justify-content: center;
/* Contain the amount of layers rendered by constraining what actually needs re-layering via css */
contain: strict;
}
.mx_RoomView {
word-wrap: break-word;
display: flex;
flex-direction: column;
flex: 1;
position: relative;
.mx_MainSplit {
flex: 1 1 0;
}
.mx_MessageComposer {
width: 100%;
flex: 0 0 auto;
margin-right: 2px;
}
}
.mx_RoomView_auxPanel_hiddenHighlights {
border-bottom: 1px solid $primary-hairline-color;
padding: 10px 26px;
color: $alert;
cursor: pointer;
}
.mx_RoomView_messagePanel {
width: 100%;
overflow-y: auto;
flex: 1 1 0;
overflow-anchor: none;
}
.mx_RoomView_messagePanelSearchSpinner {
flex: 1;
background-image: url("$(res)/img/typing-indicator-2x.gif");
background-position: center 367px;
background-size: 25px;
background-repeat: no-repeat;
position: relative;
&::before {
background-color: $info-plinth-fg-color;
mask: url("$(res)/img/feather-customised/search-input.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: 50px;
content: "";
position: absolute;
top: 286px;
left: 0;
right: 0;
height: 50px;
}
}
.mx_RoomView_body {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
.mx_RoomView_messagePanel,
.mx_RoomView_messagePanelSpinner,
.mx_RoomView_messagePanelSearchSpinner {
order: 2;
}
.mx_RoomView_timeline {
/* offset parent for mx_RoomView_topUnreadMessagesBar */
position: relative;
flex: 1;
display: flex;
flex-direction: column;
margin-right: calc(var(--container-gap-width) / 2);
}
}
.mx_RoomView_statusArea {
width: 100%;
flex: 0 0 auto;
max-height: 0px;
background-color: $background;
z-index: 1000;
overflow: hidden;
transition: all 0.2s ease-out;
}
.mx_RoomView_statusArea_expanded {
max-height: 100px;
}
.mx_RoomView_statusAreaBox {
margin: auto;
min-height: 50px;
}
.mx_RoomView_statusAreaBox_line {
margin-left: 65px;
border-top: 1px solid $primary-hairline-color;
height: 1px;
}
.mx_RoomView_messageListWrapper {
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
}
.mx_RoomView_searchResultsPanel {
.mx_RoomView_messageListWrapper {
justify-content: flex-start;
> .mx_RoomView_MessageList > li > ol {
list-style-type: none;
}
}
a {
text-decoration: none;
color: inherit;
}
}
.mx_RoomView_empty {
font-size: $font-13px;
padding: 0 24px;
margin-right: 30px;
text-align: center;
margin-bottom: 80px; /* visually center the content (intentional offset) */
}
.mx_RoomView_MessageList {
list-style-type: none;
padding: var(--RoomView_MessageList-padding); /* mx_ProfileResizer depends on this value */
margin: 0;
/* needed as min-height is set to clientHeight in ScrollPanel
to prevent shrinking when WhoIsTypingTile is hidden */
box-sizing: border-box;
li {
clear: both;
}
.mx_ScrollPanel & {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
content-visibility: auto;
contain-intrinsic-size: 50px;
}
.mx_RoomView--local .mx_ScrollPanel & {
justify-content: center;
}
}
/* Rooms with immersive content */
.mx_RoomView_immersive .mx_LegacyRoomHeader_wrapper {
border: unset;
}
.mx_RoomView_inCall {
.mx_RoomView_statusAreaBox_line {
margin-top: 2px;
border: none;
height: 0px;
}
.mx_MessageComposer_wrapper {
border-top: 2px hidden;
padding-top: 1px;
}
}
.mx_MatrixChat_useCompactLayout {
.mx_RoomView_MessageList {
margin-bottom: 4px;
h2 {
margin-top: 6px;
}
}
.mx_RoomView_statusAreaBox {
min-height: 42px;
}
}
@keyframes mx_Indicator_pulse {
0% {
transform: scale(0.95);
}
70% {
transform: scale(1);
}
100% {
transform: scale(0.95);
}
}
@keyframes mx_Indicator_pulse_shadow {
0% {
opacity: 0.7;
}
70% {
transform: scale(2.2);
opacity: 0;
}
100% {
opacity: 0;
}
}
.mx_Indicator {
position: absolute;
right: -3px;
top: -3px;
width: var(--RoomHeader-indicator-dot-size);
height: var(--RoomHeader-indicator-dot-size);
border-radius: 50%;
transform: scale(1);
background: var(--RoomHeader-indicator-pulseColor);
box-shadow: 0 0 0 0 var(--RoomHeader-indicator-pulseColor);
animation: mx_Indicator_pulse 2s infinite;
animation-iteration-count: 1;
&::after {
content: "";
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
transform: scale(1);
transform-origin: center center;
animation-name: mx_Indicator_pulse_shadow;
animation-duration: inherit;
animation-iteration-count: inherit;
border-radius: 50%;
background: inherit;
}
}

28
res/css/structures/_SearchBox.pcss Normal file
View file

@ -0,0 +1,28 @@
/*
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.
*/
.mx_SearchBox {
flex: 1 1 0;
min-width: 0;
&.mx_SearchBox_blurred:not(:hover) {
background-color: transparent;
}
.mx_SearchBox_closeButton {
cursor: pointer;
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: 16px;
width: 16px;
height: 16px;
padding: 9px;
background-color: var(--cpd-color-icon-secondary);
}
}

314
res/css/structures/_SpaceHierarchy.pcss Normal file
View file

@ -0,0 +1,314 @@
/*
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_SpaceRoomView_landing {
.mx_AccessibleButton_kind_link {
font-size: inherit;
}
.mx_SearchBox {
margin: 24px 0 16px;
}
.mx_SpaceHierarchy_noResults {
text-align: center;
> div {
font-size: $font-15px;
line-height: $font-24px;
color: $secondary-content;
}
}
.mx_SpaceHierarchy_listHeader {
display: flex;
flex-flow: wrap;
justify-content: space-between;
align-items: center;
gap: 12px;
font-size: $font-15px;
line-height: $font-24px;
color: $primary-content;
margin-bottom: 12px;
.mx_SpaceHierarchy_listHeader_header {
grid-column-start: 1;
font-weight: var(--cpd-font-weight-semibold);
margin: 0;
}
.mx_SpaceHierarchy_listHeader_buttons {
grid-column-start: 2;
display: flex;
flex-flow: wrap;
gap: 12px;
min-height: 32px;
.mx_AccessibleButton {
padding: 4px 12px;
font-weight: normal;
}
}
.mx_AccessibleButton_kind_danger_outline,
.mx_AccessibleButton_kind_primary_outline {
padding: 3px 12px; /* to account for the 1px border */
}
}
.mx_SpaceHierarchy_error {
position: relative;
font-weight: var(--cpd-font-weight-semibold);
color: $alert;
font-size: $font-15px;
line-height: $font-18px;
margin: 20px auto 12px;
padding-left: 24px;
width: max-content;
&::before {
content: "";
position: absolute;
height: 16px;
width: 16px;
left: 0;
background-image: url("$(res)/img/element-icons/warning-badge.svg");
background-size: cover;
background-repeat: no-repeat;
}
}
.mx_SpaceHierarchy_roomCount {
> h3 {
display: inline;
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-18px;
line-height: $font-22px;
color: $primary-content;
}
> span {
margin-left: 8px;
font-size: $font-15px;
line-height: $font-24px;
color: $secondary-content;
}
}
.mx_SpaceHierarchy_subspace_toggle {
position: absolute;
left: -1px;
top: 10px;
height: 16px;
width: 16px;
border-radius: 4px;
background-color: $background;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 16px;
width: 16px;
mask-repeat: no-repeat;
mask-position: center;
background-color: $tertiary-content;
mask-size: 16px;
transform: rotate(270deg);
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
}
&.mx_SpaceHierarchy_subspace_toggle_shown::before {
transform: rotate(0deg);
}
}
.mx_SpaceHierarchy_subspace_children {
position: relative;
padding-left: 12px;
}
.mx_SpaceHierarchy_list {
list-style: none;
padding: 0;
margin: 0;
li.mx_SpaceHierarchy_roomTileWrapper {
list-style: none;
.mx_SpaceHierarchy_roomTile {
position: relative;
padding: 8px 16px;
border-radius: 8px;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
gap: 6px 12px;
.mx_SpaceHierarchy_roomTile_item {
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-18px;
display: grid;
grid-template-columns: 20px auto;
gap: 6px 8px;
align-items: center;
flex: 1; /* wrap action buttons */
.mx_SpaceHierarchy_roomTile_avatar {
grid-row: 1;
grid-column: 1;
}
.mx_SpaceHierarchy_roomTile_name {
grid-row: 1;
grid-column: 2;
.mx_InfoTooltip,
.mx_SpaceHierarchy_roomTile_joined {
margin-left: 12px;
color: $tertiary-content;
font-size: $font-12px;
line-height: $font-15px;
.mx_InfoTooltip_icon {
margin-right: 4px;
position: relative;
vertical-align: text-top;
&::before {
position: absolute;
top: 0;
left: 0;
}
}
}
.mx_InfoTooltip {
display: inline-block;
}
.mx_SpaceHierarchy_roomTile_joined {
display: inline;
position: relative;
padding-left: 16px;
&::before {
content: "";
width: 20px;
height: 20px;
top: -2px;
left: -4px;
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_SpaceHierarchy_roomTile_info {
grid-row: 2;
grid-column: 2;
font: var(--cpd-font-body-md-regular);
font-weight: initial;
line-height: $font-18px;
color: $secondary-content;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
}
.mx_SpaceHierarchy_actions {
display: flex;
align-items: center;
column-gap: 12px;
margin-left: auto;
.mx_AccessibleButton {
line-height: $font-24px;
padding: 4px 16px;
display: inline-block;
visibility: hidden;
}
.mx_AccessibleButton_kind_danger_outline,
.mx_AccessibleButton_kind_primary_outline {
padding: 3px 16px; /* to account for the 1px border */
}
.mx_Checkbox {
display: inline-flex;
label {
width: 16px;
height: 16px;
}
}
}
&:hover,
&:focus-within {
background-color: $spacePanel-bg-color;
.mx_AccessibleButton {
visibility: visible;
}
}
&.mx_SpaceHierarchy_joining {
.mx_AccessibleButton {
visibility: visible;
padding: 4px 18px;
}
}
}
}
}
.mx_SpaceHierarchy_roomTile,
.mx_SpaceHierarchy_subspace_children {
&::before {
content: "";
position: absolute;
background-color: $spacePanel-bg-color;
width: 1px;
height: 100%;
left: 6px;
top: 0;
}
}
.mx_SpaceHierarchy_actions {
.mx_SpaceHierarchy_actionsText {
font-weight: normal;
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
}
}
> hr {
border: none;
height: 1px;
background-color: rgba(141, 151, 165, 0.2);
margin: 20px 0;
}
.mx_SpaceHierarchy_createRoom {
display: block;
margin: 16px auto 0;
width: max-content;
}
}

473
res/css/structures/_SpacePanel.pcss Normal file
View file

@ -0,0 +1,473 @@
/*
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_SpacePanel {
--activeBackground-color: $panel-actions;
--activeBorder-color: $primary-content;
--activeBorder-transparent-gap: 1px;
--gutterSize: 14px;
--height-nested: 24px;
--height-topLevel: 32px;
background-color: $spacePanel-bg-color;
flex: 0 0 auto;
padding: 0;
margin: 0;
position: relative;
/* Fix for the blurred avatar-background */
z-index: 1;
/* Create another flexbox so the Panel fills the container */
display: flex;
flex-direction: column;
&.collapsed {
width: 68px;
}
.mx_SpacePanel_toggleCollapse {
position: absolute;
width: 18px;
height: 18px;
border-radius: 50%;
background-color: $tertiary-content;
top: 19px; /* v-align with avatar */
right: -8px;
&::before {
content: "";
position: absolute;
width: inherit;
height: inherit;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $background;
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
transform: rotate(270deg);
}
&:not(.expanded) {
opacity: 0;
&::before {
mask-position: center 1px;
}
}
&.expanded::before {
transform: rotate(90deg);
}
}
&:hover .mx_SpacePanel_toggleCollapse {
opacity: 1;
}
ul {
margin: 0;
list-style: none;
padding: 0;
}
.mx_SpaceButton_toggleCollapse {
cursor: pointer;
}
.mx_SpaceItem_dragging {
.mx_SpaceButton_toggleCollapse {
visibility: hidden;
}
}
.mx_SpaceItem {
display: inline-flex;
flex-flow: wrap;
&.mx_SpaceItem_narrow {
align-self: baseline;
}
}
.mx_SpaceItem.collapsed {
& > .mx_SpaceButton > .mx_SpaceButton_toggleCollapse {
padding: 0 10px;
margin: 0 -10px;
transform: rotate(-90deg);
}
& > .mx_SpaceTreeLevel {
display: none;
}
}
.mx_SpaceItem_new {
position: relative;
}
.mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton {
margin-left: var(--gutterSize);
min-width: 40px;
}
.mx_SpaceButton {
border-radius: 8px;
display: flex;
align-items: center;
padding: 4px 4px 4px 0;
width: 100%;
cursor: pointer;
&.mx_SpaceButton_active {
&:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper {
background-color: var(--activeBackground-color);
}
&.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper {
padding: var(--activeBorder-transparent-gap);
border: 3px var(--activeBorder-color) solid;
}
}
.mx_SpaceButton_selectionWrapper {
position: relative;
display: flex;
flex: 1;
align-items: center;
border-radius: 12px;
padding: 4px;
width: calc(100% - 32px);
min-width: 0;
}
&.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper {
flex: initial;
width: 32px;
}
.mx_SpaceButton_name {
flex: 1;
margin-left: 8px;
white-space: nowrap;
display: block;
text-overflow: ellipsis;
overflow: hidden;
font: var(--cpd-font-body-md-regular);
}
.mx_SpaceButton_toggleCollapse {
width: var(--gutterSize);
padding: 10px 0;
min-width: var(--gutterSize);
height: 20px;
mask-position: center;
mask-size: 20px;
mask-repeat: no-repeat;
background-color: $tertiary-content;
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
}
.mx_SpaceButton_icon {
width: var(--height-topLevel);
min-width: var(--height-topLevel);
height: var(--height-topLevel);
border-radius: 8px;
position: relative;
&::before {
position: absolute;
content: "";
width: var(--height-topLevel);
height: var(--height-topLevel);
top: 0;
left: 0;
mask-position: center;
mask-repeat: no-repeat;
mask-size: 18px;
}
}
&.mx_SpaceButton_home,
&.mx_SpaceButton_favourites,
&.mx_SpaceButton_people,
&.mx_SpaceButton_orphans,
&.mx_SpaceButton_videoRooms {
.mx_SpaceButton_icon {
background-color: $panel-actions;
&::before {
background-color: $secondary-content;
}
}
}
&.mx_SpaceButton_home .mx_SpaceButton_icon::before {
mask-image: url("$(res)/img/element-icons/home.svg");
}
&.mx_SpaceButton_favourites .mx_SpaceButton_icon::before {
mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
}
&.mx_SpaceButton_people .mx_SpaceButton_icon::before {
mask-image: url("$(res)/img/element-icons/room/members.svg");
}
&.mx_SpaceButton_orphans .mx_SpaceButton_icon::before {
mask-image: url("$(res)/img/element-icons/roomlist/hash-circle.svg");
}
&.mx_SpaceButton_videoRooms .mx_SpaceButton_icon::before {
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
}
&.mx_SpaceButton_new .mx_SpaceButton_icon {
&::before {
background-color: $primary-content;
mask-image: url("$(res)/img/element-icons/plus.svg");
transition: all 0.2s ease-in-out; /* TODO transition */
}
}
&.mx_SpaceButton_newCancel .mx_SpaceButton_icon::before {
transform: rotate(45deg);
}
.mx_SpaceButton_menuButton {
width: 20px;
min-width: 20px; /* yay flex */
height: 20px;
margin-top: auto;
margin-bottom: auto;
display: none;
position: absolute;
right: 4px;
&::before {
top: 3px;
left: 2px;
content: "";
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
mask-image: url("$(res)/img/element-icons/context-menu.svg");
background: $primary-content;
}
}
}
.mx_SpaceTreeLevel {
display: flex;
flex-direction: column;
max-width: 250px;
min-width: 0;
flex-grow: 1;
.mx_SpaceTreeLevel {
/* Indent subspaces */
padding-left: 16px;
}
}
.mx_SpaceButton_avatarWrapper {
position: relative;
line-height: 0;
}
.mx_SpacePanel_badgeContainer {
/* Create a flexbox to make aligning dot badges easier */
display: flex;
align-items: center;
position: absolute;
right: -3px;
top: -3px;
.mx_NotificationBadge {
margin: 0 2px; /* centering */
background-clip: padding-box;
}
.mx_NotificationBadge_dot {
/* make the smaller dot occupy the same width for centering */
margin: 0 -1px 0 0;
border: 3px solid $spacePanel-bg-color;
}
.mx_NotificationBadge_2char,
.mx_NotificationBadge_3char {
margin: -5px -5px 0 0;
border: 2px solid $spacePanel-bg-color;
}
}
.mx_SpaceButton:hover,
.mx_SpaceButton:focus-within,
.mx_SpaceButton_hasMenuOpen {
&:not(.mx_SpaceButton_narrow):not(.mx_SpaceButton_invite) .mx_SpaceButton_menuButton {
display: block;
}
}
.mx_SpaceItem:not(.mx_SpaceItem_new) {
.mx_SpaceButton:hover,
.mx_SpaceButton:focus-within,
.mx_SpaceButton_hasMenuOpen {
&:not(.mx_SpaceButton_narrow):not(.mx_SpaceButton_invite) .mx_SpaceButton_name {
max-width: calc(100% - 56px);
}
}
}
/* root space buttons are bigger and not indented */
& > .mx_AutoHideScrollbar {
flex: 1;
padding: 0 0 16px 0;
scrollbar-gutter: stable;
& > .mx_SpaceButton {
height: var(--height-topLevel);
&.mx_SpaceButton_active::before {
height: var(--height-topLevel);
}
}
& > ul {
padding-left: 0;
}
&.mx_IndicatorScrollbar_topOverflow {
mask-image: linear-gradient(to bottom, transparent, black 16px);
}
&.mx_IndicatorScrollbar_bottomOverflow {
mask-image: linear-gradient(
to top,
transparent,
rgba(255, 255, 255, 30%) 4px,
rgba(255, 255, 255, 55%) 8px,
rgba(255, 255, 255, 75%) 12px,
black 16px
);
}
&.mx_IndicatorScrollbar_topOverflow.mx_IndicatorScrollbar_bottomOverflow {
/* This stacks two gradients on top of one another, which lets us
have a fixed pixel offset from both top and bottom for the colour stops.
Note the top fade is much smaller because the spaces start close to the top,
so otherwise a large gradient suddenly appears when you scroll down.
*/
mask-image: linear-gradient(to bottom, transparent, black 16px),
linear-gradient(
to top,
transparent,
rgba(255, 255, 255, 30%) 4px,
rgba(255, 255, 255, 55%) 8px,
rgba(255, 255, 255, 75%) 12px,
black 16px
);
mask-position:
0% 0%,
0% 100%;
mask-size:
calc(100% - 10px) 50%,
calc(100% - 10px) 50%;
mask-repeat: no-repeat;
}
}
.mx_UserMenu {
padding-bottom: 12px;
border-bottom: 1px solid $separator;
margin: 12px 14px 4px 18px;
width: min-content;
max-width: 226px;
/* Display the container and img here as block elements so they don't take
* up extra vertical space.
*/
.mx_UserMenu_userAvatar_BaseAvatar {
display: block;
}
}
}
.mx_SpacePanel_contextMenu {
max-width: 360px;
.mx_SpacePanel_contextMenu_header {
margin: 12px 16px 12px;
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mx_SpacePanel_iconHome::before {
mask-image: url("$(res)/img/element-icons/home.svg");
}
.mx_SpacePanel_iconInvite::before {
mask-image: url("$(res)/img/element-icons/room/invite.svg");
}
.mx_SpacePanel_iconSettings::before {
mask-image: url("$(res)/img/element-icons/settings.svg");
}
.mx_SpacePanel_iconLeave::before {
mask-image: url("$(res)/img/element-icons/leave.svg");
}
.mx_SpacePanel_iconMembers::before {
mask-image: url("$(res)/img/element-icons/room/members.svg");
}
.mx_SpacePanel_iconPlus::before {
mask-image: url("$(res)/img/element-icons/plus.svg");
}
.mx_SpacePanel_iconExplore::before {
mask-image: url("$(res)/img/element-icons/roomlist/hash-search.svg");
}
.mx_SpacePanel_iconPreferences::before {
mask-image: url("$(res)/img/element-icons/settings/preference.svg");
}
.mx_SpacePanel_noIcon {
display: none;
& + .mx_IconizedContextMenu_label {
padding-left: 5px !important; /* override default iconized label style to align with header */
}
}
.mx_SpacePanel_contextMenu_separatorLabel {
color: $tertiary-content;
font-size: $font-10px;
line-height: $font-12px;
font-weight: var(--cpd-font-weight-semibold);
}
}
.mx_SpacePanel_sharePublicSpace {
margin: 0;
}
.mx_SpacePanel_Tooltip_KeyboardShortcut {
kbd {
font-family: inherit;
text-transform: capitalize;
}
}

299
res/css/structures/_SpaceRoomView.pcss Normal file
View file

@ -0,0 +1,299 @@
/*
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.
*/
@define-mixin SpacePillButton {
position: relative;
padding: 16px 32px 16px 72px;
width: 432px;
box-sizing: border-box;
border-radius: 8px;
border: 1px solid $input-border-color;
font-size: $font-17px;
font-weight: var(--cpd-font-weight-semibold);
margin: 20px 0;
> div {
margin-top: 4px;
font-weight: normal;
font-size: $font-15px;
color: $secondary-content;
}
&::before {
position: absolute;
content: "";
width: 24px;
height: 24px;
top: 27px;
left: 20px;
mask-position: center;
mask-repeat: no-repeat;
mask-size: 24px;
background-color: $tertiary-content;
}
&:hover {
border-color: var(--cpd-color-bg-interactive-primary-rest);
&::before {
background-color: var(--cpd-color-icon-primary);
}
> span {
color: $primary-content;
}
}
}
.mx_SpaceRoomView {
--innerWidth: 428px;
overflow-y: auto;
flex: 1;
.mx_MainSplit > div:first-child {
padding: 80px 60px;
flex-grow: 1;
max-height: 100%;
overflow-y: auto;
h1 {
margin: 0;
font-size: $font-24px;
font-weight: var(--cpd-font-weight-semibold);
color: $primary-content;
width: max-content;
}
.mx_SpaceRoomView_description {
font-size: $font-15px;
color: $secondary-content;
margin-top: 12px;
margin-bottom: 24px;
max-width: var(--innerWidth);
}
.mx_AddExistingToSpace {
max-width: var(--innerWidth);
.mx_AddExistingToSpace_content {
height: calc(100vh - 360px);
max-height: 400px;
}
}
.mx_SpaceRoomView_buttons {
display: block;
margin-top: 44px;
width: var(--innerWidth);
text-align: right; /* button alignment right */
.mx_AccessibleButton_hasKind {
padding: 8px 22px;
margin-left: 16px;
}
input.mx_AccessibleButton {
border: none; /* override default styles */
}
}
.mx_Field {
max-width: var(--innerWidth);
& + .mx_Field {
margin-top: 28px;
}
}
.mx_SpaceRoomView_errorText {
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-12px;
line-height: $font-15px;
color: $alert;
margin-bottom: 28px;
}
.mx_AccessibleButton_disabled {
cursor: not-allowed;
}
}
.mx_SpaceRoomView_landing {
display: flex;
flex-direction: column;
min-width: 0;
.mx_SpaceRoomView_landing_header {
display: flex;
justify-content: space-between;
.mx_BaseAvatar {
width: 80px;
}
}
.mx_SpaceRoomView_landing_name {
margin: 24px 0 16px;
font-size: $font-15px;
color: $secondary-content;
> span {
display: flex;
flex-flow: column;
gap: 12px 0;
h1 {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
}
.mx_SpaceRoomView_landing_inviter {
.mx_BaseAvatar {
margin-right: 4px;
vertical-align: middle;
}
}
}
.mx_SpaceRoomView_landing_infoBar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
line-height: $font-24px;
.mx_SpaceRoomView_landing_infoBar_interactive {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 12px;
.mx_FacePile {
display: inline-block;
cursor: pointer;
}
.mx_SpaceRoomView_landing_inviteButton,
.mx_SpaceRoomView_landing_settingsButton {
position: relative;
&::before {
position: absolute;
content: "";
mask-position: center;
mask-repeat: no-repeat;
}
}
.mx_SpaceRoomView_landing_inviteButton {
padding: 4px 18px 4px 40px;
height: min-content;
&::before {
left: 8px;
height: 16px;
width: 16px;
background: var(--cpd-color-icon-on-solid-primary);
mask-size: 16px;
mask-image: url("$(res)/img/element-icons/room/invite.svg");
}
}
.mx_SpaceRoomView_landing_settingsButton {
width: 24px;
height: 24px;
&::before {
left: 0;
top: 0;
height: 24px;
width: 24px;
background: $tertiary-content;
mask-size: contain;
mask-image: url("$(res)/img/element-icons/settings.svg");
}
}
}
}
.mx_SpaceRoomView_landing_topic {
font-size: $font-15px;
margin-top: 12px;
margin-bottom: 16px;
white-space: pre-wrap;
word-wrap: break-word;
}
.mx_SearchBox {
margin: 0 0 20px;
flex: 0;
}
}
.mx_SpaceRoomView_privateScope {
> .mx_AccessibleButton {
@mixin SpacePillButton;
}
.mx_SpaceRoomView_privateScope_justMeButton::before {
mask-image: url("$(res)/img/element-icons/room/members.svg");
}
.mx_SpaceRoomView_privateScope_meAndMyTeammatesButton::before {
mask-image: url("$(res)/img/element-icons/group-members.svg");
}
}
.mx_SpaceRoomView_inviteTeammates {
.mx_SpaceRoomView_inviteTeammates_buttons {
color: $secondary-content;
margin-top: 28px;
.mx_AccessibleButton {
position: relative;
display: inline-block;
padding-left: 32px;
line-height: 24px; /* to center icons */
&::before {
content: "";
position: absolute;
height: 24px;
width: 24px;
top: 0;
left: 0;
background-color: $secondary-content;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
& + .mx_AccessibleButton {
margin-left: 32px;
}
}
.mx_SpaceRoomView_inviteTeammates_inviteDialogButton {
color: var(--cpd-color-text-primary);
font-weight: var(--cpd-font-weight-semibold);
text-decoration: underline;
&::before {
mask-image: url("$(res)/img/element-icons/room/invite.svg");
background-color: var(--cpd-color-icon-primary);
}
}
}
}
}

40
res/css/structures/_SplashPage.pcss Normal file
View file

@ -0,0 +1,40 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_SplashPage {
position: relative;
height: 100%;
&::before {
content: "";
display: block;
position: absolute;
z-index: -1;
opacity: 0.6;
background-image: radial-gradient(
53.85% 66.75% at 87.55% 0%,
hsla(250deg, 76%, 71%, 0.261) 0%,
hsla(250deg, 100%, 88%, 0) 100%
),
radial-gradient(41.93% 41.93% at 0% 0%, hsla(222deg, 29%, 20%, 0.28) 0%, hsla(250deg, 100%, 88%, 0) 100%),
radial-gradient(100% 100% at 0% 0%, hsla(250deg, 100%, 88%, 0.174) 0%, hsla(0deg, 100%, 86%, 0) 100%),
radial-gradient(106.35% 96.26% at 100% 0%, hsla(250deg, 100%, 88%, 0.4) 0%, hsla(167deg, 76%, 82%, 0) 100%);
/* blur to reduce color banding issues due to alpha-blending multiple gradients */
filter: blur(8px);
inset: -9px;
mask:
/* mask to dither resulting combined gradient */
url("$(res)/img/noise.png"),
/* gradient to apply different amounts of dithering to different parts of the gradient */
linear-gradient(
to bottom,
/* 10% dithering at the top */ rgba(0, 0, 0, 0.9) 20%,
/* 80% dithering at the bottom */ rgba(0, 0, 0, 0.2) 100%
);
}
}

191
res/css/structures/_TabbedView.pcss Normal file
View file

@ -0,0 +1,191 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.
Copyright 2019 New Vector Ltd
Copyright 2017 Travis Ralston
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_TabbedView {
margin: 0;
padding: 0 0 0 var(--cpd-space-8x);
display: flex;
flex-direction: column;
inset: 0;
margin-top: 8px;
}
.mx_TabbedView_tabsOnLeft {
flex-direction: column;
position: absolute;
.mx_TabbedView_tabLabels {
width: 220px;
max-width: 220px;
position: fixed;
margin: 0; /* Remove the default value */
padding: 0; /* Remove the default value */
}
.mx_TabbedView_tabPanel {
margin-left: 280px; /* 220px sidebar + 60px padding */
flex-direction: column;
}
.mx_TabbedView_tabLabel:hover,
.mx_TabbedView_tabLabel_active {
color: $tab-label-active-fg-color;
.mx_TabbedView_maskedIcon::before {
background-color: var(--cpd-color-icon-primary);
}
}
.mx_TabbedView_tabLabel_active {
background-color: var(--cpd-color-bg-subtle-secondary);
}
.mx_TabbedView_maskedIcon {
width: 20px;
height: 20px;
margin-right: var(--cpd-space-3x);
}
.mx_TabbedView_maskedIcon::before {
mask-size: 20px;
width: 20px;
height: 20px;
transition: background-color 0.1s;
}
}
.mx_TabbedView_tabsOnTop {
flex-direction: column;
.mx_TabbedView_tabLabels {
display: flex;
margin-bottom: 8px;
}
.mx_TabbedView_tabLabel {
padding-left: 0px;
padding-right: 52px;
.mx_TabbedView_tabLabel_text {
font-size: 15px;
color: $tertiary-content;
}
}
.mx_TabbedView_tabPanel {
flex-direction: row;
}
.mx_TabbedView_tabLabel_active {
color: $accent;
.mx_TabbedView_tabLabel_text {
color: $accent;
}
}
.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
background-color: $accent;
}
.mx_TabbedView_maskedIcon {
width: 22px;
height: 22px;
margin-left: 0px;
margin-right: 8px;
}
.mx_TabbedView_maskedIcon::before {
mask-size: 22px;
width: inherit;
height: inherit;
}
}
.mx_TabbedView_tabLabels {
color: $tab-label-fg-color;
}
.mx_TabbedView_tabLabel {
display: flex;
align-items: center;
vertical-align: text-top;
cursor: pointer;
padding-block: var(--cpd-space-2x);
padding-inline: var(--cpd-space-3x) var(--cpd-space-4x);
box-sizing: border-box;
min-block-size: 40px;
min-inline-size: 40px;
border-radius: 24px;
font: var(--cpd-font-body-md-medium);
position: relative;
transition:
color 0.1s,
background-color 0.1s;
svg {
width: 20px;
height: 20px;
margin-right: var(--cpd-space-3x);
}
}
.mx_TabbedView_maskedIcon {
display: inline-block;
}
.mx_TabbedView_maskedIcon::before {
display: inline-block;
background-color: var(--cpd-color-icon-secondary);
mask-repeat: no-repeat;
mask-position: center;
content: "";
}
.mx_TabbedView_tabLabel_text {
vertical-align: middle;
}
.mx_TabbedView_tabPanel {
flex-grow: 1;
display: flex;
min-height: 0; /* firefox */
}
.mx_TabbedView_tabPanelContent {
flex-grow: 1;
overflow: auto;
min-height: 0; /* firefox */
}
/* Hide the labels on tabs, showing only the icons, on narrow viewports. */
@media (max-width: 1024px) {
.mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive {
.mx_TabbedView_tabLabel_text {
display: none;
}
.mx_TabbedView_tabPanel {
margin-left: 72px; /* 40px sidebar + 32px padding */
}
.mx_TabbedView_maskedIcon {
margin-right: auto;
margin-left: auto;
}
.mx_TabbedView_tabLabels {
width: auto;
}
.mx_TabbedView_tabLabel {
padding-inline: 0 0;
justify-content: center;
svg {
margin-right: 0;
}
}
}
}

84
res/css/structures/_ThreadsActivityCentre.pcss Normal file
View file

@ -0,0 +1,84 @@
/*
* 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_ThreadsActivityCentre_container {
display: flex;
}
.mx_ThreadsActivityCentreButton {
border-radius: 8px;
margin: 18px auto auto auto;
&.expanded {
/**
* override compound default background color when hovered
* should disappear when the space panel will be migrated to compound
*/
background-color: transparent !important;
/* align with settings icon */
margin-left: 21px;
/**
* modify internal css of the compound component
* dirty but we need to add the `Threads` label into the indicator icon button
**/
& > div {
display: flex;
align-items: center;
}
& .mx_ThreadsActivityCentreButton_Icon {
/* align with settings label */
margin-right: 14px;
/* required to set the icon width when into a flex container */
min-width: 24px;
}
& .mx_ThreadsActivityCentreButton_Text {
color: $secondary-content;
}
}
&:not(.expanded) {
&:hover,
&:hover .mx_ThreadsActivityCentreButton_Icon {
background-color: $quaternary-content;
color: $primary-content;
}
}
& .mx_ThreadsActivityCentreButton_Icon {
color: $secondary-content;
}
}
.mx_ThreadsActivityCentre_rows {
overflow-y: scroll;
/* Let some space at the top and the bottom of the pop-up */
max-height: calc(100vh - 200px);
.mx_ThreadsActivityCentreRow {
height: 48px;
/* Make the label of the MenuItem stay on one line and truncate with ellipsis if needed */
& > span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* Arbitrary size, keep the TAC as the wanted width */
width: 202px;
}
}
}
.mx_ThreadsActivityCentre_emptyCaption {
padding-left: 16px;
padding-right: 16px;
font-size: 13px;
}

160
res/css/structures/_ToastContainer.pcss Normal file
View file

@ -0,0 +1,160 @@
/*
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_ToastContainer {
position: absolute;
top: 0;
left: 70px;
z-index: 101;
padding: 4px;
display: grid;
grid-template-rows: 1fr 14px 6px;
&.mx_ToastContainer_stacked::before {
content: "";
margin: 0 4px;
grid-row: 2 / 4;
grid-column: 1;
background-color: $system;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
border-radius: 8px;
}
.mx_Toast_toast {
grid-row: 1 / 3;
grid-column: 1;
background-color: var(--cpd-color-bg-canvas-default);
color: $primary-content;
box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
border-radius: 12px;
overflow: hidden;
display: grid;
grid-template-columns: 22px 1fr;
column-gap: 8px;
row-gap: 4px;
padding: var(--cpd-space-3x);
&.mx_Toast_hasIcon {
&::before,
&::after {
content: "";
width: 22px;
height: 22px;
grid-column: 1;
grid-row: 1;
mask-size: 100%;
mask-position: center;
mask-repeat: no-repeat;
background-size: 100%;
background-repeat: no-repeat;
}
&.mx_Toast_icon_verification::after {
mask-image: url("$(res)/img/e2e/normal.svg");
background-color: $primary-content;
}
&.mx_Toast_icon_verification_warning {
/* white infill for the hollow svg mask */
&::before {
background-color: #ffffff;
mask-image: url("$(res)/img/e2e/normal.svg");
mask-size: 80%;
}
&::after {
mask-image: url("$(res)/img/e2e/warning.svg");
background-color: $e2e-warning-color;
}
}
&.mx_Toast_icon_secure_backup::after {
mask-image: url("$(res)/img/feather-customised/secure-backup.svg");
background-color: $primary-content;
}
&.mx_Toast_icon_labs::after {
mask-image: url("$(res)/img/element-icons/flask.svg");
background-color: $secondary-content;
}
.mx_Toast_title,
.mx_Toast_body {
grid-column: 2;
}
}
&:not(.mx_Toast_hasIcon) {
padding-left: 12px;
.mx_Toast_title {
grid-column: 1 / -1;
}
}
.mx_Toast_title,
.mx_Toast_description {
padding-right: 8px;
}
.mx_Toast_title {
display: flex;
align-items: center;
column-gap: 8px;
width: 100%;
box-sizing: border-box;
h2 {
margin: 0;
font: var(--cpd-font-body-lg-semibold);
display: inline;
width: auto;
}
.mx_Toast_title_countIndicator {
font-size: $font-12px;
line-height: $font-22px;
color: $secondary-content;
margin-inline-start: auto; /* on the end side of the div */
}
}
.mx_Toast_body {
grid-column: 1 / 3;
grid-row: 2;
}
.mx_Toast_buttons {
display: flex;
justify-content: flex-end;
column-gap: 5px;
.mx_AccessibleButton {
min-width: 96px;
box-sizing: border-box;
}
}
.mx_Toast_description {
max-width: 272px;
overflow: hidden;
text-overflow: ellipsis;
margin: 4px 0 11px 0;
color: $secondary-content;
font: var(--cpd-font-body-sm-regular);
a {
text-decoration: none;
}
}
.mx_Toast_deviceID {
font-size: $font-10px;
}
}
}

59
res/css/structures/_UploadBar.pcss Normal file
View file

@ -0,0 +1,59 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2015, 2016 , 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_UploadBar {
padding-left: 65px; /* line up with the shield area in the composer */
padding-top: 5px;
position: relative;
.mx_ProgressBar {
width: calc(100% - 40px); /* cheating at a right margin */
}
}
.mx_ThreadView {
.mx_UploadBar {
padding-left: 0;
}
}
.mx_UploadBar_filename {
color: $muted-fg-color;
position: relative;
padding-right: 38px; /* 32px for cancel icon, 6px for padding */
padding-left: 22px; /* 18px for icon, 4px for padding */
font-size: $font-15px;
vertical-align: middle;
&::before {
content: "";
height: 18px;
width: 18px;
position: absolute;
top: 0;
left: 0;
mask-repeat: no-repeat;
mask-position: center;
background-color: $muted-fg-color;
mask-image: url("$(res)/img/element-icons/upload.svg");
}
}
.mx_UploadBar_cancel {
position: absolute;
top: 0;
right: 0;
height: 16px;
width: 16px;
margin-right: 16px; /* align over rightmost button in composer */
margin-top: 5px;
mask-repeat: no-repeat;
mask-position: center;
background-color: $muted-fg-color;
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
}

206
res/css/structures/_UserMenu.pcss Normal file
View file

@ -0,0 +1,206 @@
/*
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_UserMenu {
box-sizing: border-box;
display: flex;
align-items: center;
.mx_AccessibleButton {
display: flex;
align-items: center;
.mx_UserMenu_userAvatar {
position: relative;
.mx_BaseAvatar {
pointer-events: none; /* makes the avatar non-draggable */
}
}
.mx_UserMenu_userAvatarLive {
align-items: center;
background-color: $alert;
border-radius: 6px;
color: $live-badge-color;
display: flex;
height: 12px;
justify-content: center;
left: 25px;
position: absolute;
top: 20px;
width: 12px;
}
}
.mx_UserMenu_contextMenuButton {
width: 100%;
}
.mx_UserMenu_name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-24px;
margin-left: 10px;
}
.mx_UserMenu_dndBadge {
position: absolute;
bottom: -2px;
right: -7px;
width: 16px;
height: 16px;
border-radius: 50%;
&::before {
content: "";
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $alert;
mask-image: url("$(res)/img/element-icons/roomlist/dnd.svg");
}
}
}
.mx_IconizedContextMenu {
&.mx_UserMenu_contextMenu {
width: 258px;
}
}
.mx_UserMenu_contextMenu {
&.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList_red {
.mx_AccessibleButton {
padding-top: 16px;
padding-bottom: 16px;
}
}
.mx_UserMenu_contextMenu_header {
padding: 20px;
/* Create a flexbox to organize the header a bit easier */
display: flex;
align-items: center;
.mx_UserMenu_contextMenu_name {
/* Create another flexbox of columns to handle large user IDs */
display: flex;
flex-direction: column;
width: calc(100% - 40px); /* 40px = 32px theme button + 8px margin to theme button */
.mx_UserMenu_contextMenu_displayName,
.mx_UserMenu_contextMenu_userId {
font: var(--cpd-font-body-lg-regular);
/* Automatically grow subelements to fit the container */
flex: 1;
width: 100%;
/* Ellipsize text overflow */
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.mx_UserMenu_contextMenu_displayName {
font-weight: var(--cpd-font-weight-semibold);
}
}
.mx_UserMenu_contextMenu_themeButton {
min-width: 32px;
max-width: 32px;
width: 32px;
height: 32px;
margin-left: 8px;
border-radius: 32px;
background-color: $theme-button-bg-color;
cursor: pointer;
/* to make alignment easier, create flexbox for the image */
display: flex;
align-items: center;
justify-content: center;
}
&.mx_UserMenu_contextMenu_guestPrompts {
padding-top: 0;
display: inline-block;
> span {
font-weight: var(--cpd-font-weight-semibold);
display: block;
& + span {
margin-top: 8px;
}
}
}
}
.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;
background: $icon-button-color;
}
}
.mx_UserMenu_iconHome::before {
mask-image: url("$(res)/img/element-icons/home.svg");
}
.mx_UserMenu_iconDnd::before {
mask-image: url("$(res)/img/element-icons/roomlist/dnd.svg");
}
.mx_UserMenu_iconDndOff::before {
mask-image: url("$(res)/img/element-icons/roomlist/dnd-cross.svg");
}
.mx_UserMenu_iconBell::before {
mask-image: url("$(res)/img/element-icons/notifications.svg");
}
.mx_UserMenu_iconLock::before {
mask-image: url("$(res)/img/element-icons/security.svg");
}
.mx_UserMenu_iconSettings::before {
mask-image: url("$(res)/img/element-icons/settings.svg");
}
.mx_UserMenu_iconMessage::before {
mask-image: url("$(res)/img/element-icons/feedback.svg");
}
.mx_UserMenu_iconSignOut::before {
mask-image: url("$(res)/img/element-icons/leave.svg");
}
.mx_UserMenu_iconQr::before {
mask-image: url("@vector-im/compound-design-tokens/icons/qr-code.svg");
}
}

44
res/css/structures/_ViewSource.pcss Normal file
View file

@ -0,0 +1,44 @@
/*
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.
*/
.mx_ViewSource {
pre {
font-size: $font-12px;
padding: 0.5em 1em;
word-wrap: break-word;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.mx_ViewSource_header {
border-bottom: 1px solid $quinary-content;
padding-bottom: $spacing-12;
margin-bottom: $spacing-12;
font-family: monospace;
.mx_CopyableText {
word-break: break-all;
}
}
.mx_ViewSource_heading {
font-size: $font-17px;
font-weight: 400;
color: $primary-content;
margin-top: $spacing-12;
}
.mx_ViewSource_details {
margin-top: $spacing-12;
}
.mx_CopyableText_border {
box-sizing: border-box;
width: 100%;
}
}

54
res/css/structures/auth/_CompleteSecurity.pcss Normal file
View file

@ -0,0 +1,54 @@
/*
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_CompleteSecurity_header {
display: flex;
align-items: center;
}
.mx_CompleteSecurity_headerIcon {
width: 24px;
height: 24px;
margin-right: 4px;
position: relative;
}
.mx_CompleteSecurity_heroIcon {
width: 128px;
height: 128px;
position: relative;
margin: 0 auto;
}
.mx_CompleteSecurity_skip {
@mixin customisedCancelButton;
position: absolute;
right: 24px;
}
.mx_CompleteSecurity_body {
font-size: $font-15px;
}
.mx_CompleteSecurity_waiting {
color: $tertiary-content;
}
.mx_CompleteSecurity_actionRow {
display: flex;
justify-content: flex-end;
margin-top: $font-28px;
.mx_AccessibleButton {
margin-inline-start: 18px;
&.warning {
color: $alert;
}
}
}

22
res/css/structures/auth/_ConfirmSessionLockTheftView.pcss Normal file
View file

@ -0,0 +1,22 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2019-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.
*/
.mx_ConfirmSessionLockTheftView {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.mx_ConfirmSessionLockTheftView_body {
display: flex;
flex-direction: column;
max-width: 400px;
align-items: center;
}

97
res/css/structures/auth/_Login.pcss Normal file
View file

@ -0,0 +1,97 @@
/*
Copyright 2019-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.
*/
.mx_Login_submit {
@mixin mx_DialogButton;
font-size: 15px;
font-weight: var(--cpd-font-weight-semibold);
width: 100%;
margin-top: 24px;
margin-bottom: 24px;
box-sizing: border-box;
text-align: center;
}
.mx_Login_submit:disabled {
opacity: 0.3;
cursor: default;
}
.mx_Login_loader {
display: inline;
position: relative;
top: 2px;
left: 8px;
}
.mx_Login_loader .mx_Spinner {
display: inline;
}
.mx_Login_loader .mx_Spinner img {
width: 16px;
height: 16px;
}
.mx_Login_error {
color: $alert;
font-weight: bold;
text-align: center;
margin-top: 12px;
margin-bottom: 12px;
}
.mx_Login_error.mx_Login_serverError {
text-align: left;
font-weight: normal;
}
.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal {
color: #ff8d13; /* Only used here */
}
.mx_Login_type_container {
display: flex;
align-items: center;
color: $authpage-primary-color;
.mx_Field {
margin: 0;
}
}
.mx_Login_type_label {
flex: 1;
}
.mx_Login_underlinedServerName {
width: max-content;
border-bottom: 1px dashed $accent;
}
div.mx_AccessibleButton_kind_link.mx_Login_forgot {
display: block;
margin-top: 24px;
&.mx_AccessibleButton_disabled {
cursor: not-allowed;
}
}
.mx_Login_spinner {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding: 14px;
}
.mx_Login_fullWidthButton {
width: 100%;
margin-bottom: 16px;
}

43
res/css/structures/auth/_LoginSplashView.pcss Normal file
View file

@ -0,0 +1,43 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2015-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_LoginSplashView_migrationProgress {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
.mx_ProgressBar {
height: 8px;
width: 600px;
@mixin ProgressBarBorderRadius 8px;
}
}
.mx_LoginSplashView_splashButtons {
text-align: center;
width: 100%;
position: absolute;
bottom: 30px;
}
.mx_LoginSplashView_syncError {
color: $accent-fg-color;
background-color: #df2a8b; /* Only used here */
border-radius: 5px;
display: table;
padding: 30px;
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
}

13
res/css/structures/auth/_MobileRegistration.pcss Normal file
View file

@ -0,0 +1,13 @@
/*
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_MobileRegister_body {
padding: 32px;
height: 100vh;
overflow-y: auto;
box-sizing: border-box;
}

45
res/css/structures/auth/_Registration.pcss Normal file
View file

@ -0,0 +1,45 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_Register_mainContent {
display: flex;
flex-direction: column;
flex-grow: 1;
min-height: 270px;
p {
font: var(--cpd-font-body-md-regular);
color: $authpage-primary-color;
&.secondary {
color: $authpage-secondary-color;
}
}
> img:first-child {
margin-bottom: 16px;
width: max-content;
}
.mx_Login_submit {
margin-bottom: 0;
}
}
.mx_Register_footerActions {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: 16px;
margin-top: 16px;
border-top: 1px solid rgba(141, 151, 165, 0.2);
> * {
flex-basis: content;
}
}

22
res/css/structures/auth/_SessionLockStolenView.pcss Normal file
View file

@ -0,0 +1,22 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_SessionLockStolenView {
h1 {
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-32px;
text-align: center;
}
h2 {
margin: 0;
font-weight: 500;
font-size: $font-24px;
text-align: center;
}
}

18
res/css/structures/auth/_SetupEncryptionBody.pcss Normal file
View file

@ -0,0 +1,18 @@
/*
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_SetupEncryptionBody_reset {
color: $light-fg-color;
margin-top: $font-14px;
.mx_SetupEncryptionBody_reset_link {
&.mx_AccessibleButton_kind_link_inline {
color: $alert;
}
}
}

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

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