feat: show call participants in room list (Discord-style)
Docker / Docker Buildx (push) Has been cancelled
Build Debian package / Build package (release) Has been cancelled
Build and Deploy / prepare (release) Has been cancelled
Deploy release / Deploy to Cloudflare Pages (release) Has been cancelled
Build and Deploy / Trigger Pro pipeline (release) Has been cancelled
Build and Deploy / Windows arm64 (release) Has been cancelled
Build and Deploy / Windows x64 (release) Has been cancelled
Build and Deploy / macOS (release) Has been cancelled
Build and Deploy / Linux amd64 (sqlcipher static) (release) Has been cancelled
Build and Deploy / Linux arm64 (sqlcipher static) (release) Has been cancelled
Build and Deploy / ${{ needs.prepare.outputs.deploy == 'true' && 'Deploy' || 'Deploy (dry-run)' }} (release) Has been cancelled
Build and Deploy / Deploy builds to ESS (release) Has been cancelled
Docker / Docker Buildx (push) Has been cancelled
Build Debian package / Build package (release) Has been cancelled
Build and Deploy / prepare (release) Has been cancelled
Deploy release / Deploy to Cloudflare Pages (release) Has been cancelled
Build and Deploy / Trigger Pro pipeline (release) Has been cancelled
Build and Deploy / Windows arm64 (release) Has been cancelled
Build and Deploy / Windows x64 (release) Has been cancelled
Build and Deploy / macOS (release) Has been cancelled
Build and Deploy / Linux amd64 (sqlcipher static) (release) Has been cancelled
Build and Deploy / Linux arm64 (sqlcipher static) (release) Has been cancelled
Build and Deploy / ${{ needs.prepare.outputs.deploy == 'true' && 'Deploy' || 'Deploy (dry-run)' }} (release) Has been cancelled
Build and Deploy / Deploy builds to ESS (release) Has been cancelled
This commit is contained in:
sorB
@@ -0,0 +1,62 @@
|
||||
[
|
||||
{
|
||||
"relation": ["delegate_permission/common.handle_all_urls"],
|
||||
"target": {
|
||||
"namespace": "android_app",
|
||||
"package_name": "im.vector.app.debug",
|
||||
"sha256_cert_fingerprints": [
|
||||
"B0:B0:51:DC:56:5C:81:2F:E1:7F:6F:3E:94:5B:4D:79:04:71:23:AB:0D:A6:12:86:76:9E:B2:94:91:97:13:0E"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"relation": ["delegate_permission/common.handle_all_urls"],
|
||||
"target": {
|
||||
"namespace": "android_app",
|
||||
"package_name": "im.vector.app.nightly",
|
||||
"sha256_cert_fingerprints": [
|
||||
"CA:D3:85:16:84:3A:05:CC:EB:00:AB:7B:D3:80:0F:01:BA:8F:E0:4B:38:86:F3:97:D8:F7:9A:1B:C4:54:E4:0F"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"relation": ["delegate_permission/common.handle_all_urls"],
|
||||
"target": {
|
||||
"namespace": "android_app",
|
||||
"package_name": "im.vector.app",
|
||||
"sha256_cert_fingerprints": [
|
||||
"F3:FF:38:D2:E5:A6:38:84:86:4A:4E:0D:45:C5:3B:19:8E:7E:39:C0:50:5B:D9:63:F5:55:D6:53:2D:EA:BF:5F"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"relation": ["delegate_permission/common.handle_all_urls"],
|
||||
"target": {
|
||||
"namespace": "android_app",
|
||||
"package_name": "io.element.android.x.debug",
|
||||
"sha256_cert_fingerprints": [
|
||||
"B0:B0:51:DC:56:5C:81:2F:E1:7F:6F:3E:94:5B:4D:79:04:71:23:AB:0D:A6:12:86:76:9E:B2:94:91:97:13:0E"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"relation": ["delegate_permission/common.handle_all_urls"],
|
||||
"target": {
|
||||
"namespace": "android_app",
|
||||
"package_name": "io.element.android.x.nightly",
|
||||
"sha256_cert_fingerprints": [
|
||||
"CA:D3:85:16:84:3A:05:CC:EB:00:AB:7B:D3:80:0F:01:BA:8F:E0:4B:38:86:F3:97:D8:F7:9A:1B:C4:54:E4:0F"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"relation": ["delegate_permission/common.handle_all_urls"],
|
||||
"target": {
|
||||
"namespace": "android_app",
|
||||
"package_name": "io.element.android.x",
|
||||
"sha256_cert_fingerprints": [
|
||||
"C6:DB:9B:9C:8C:BD:D6:5D:16:E8:EC:8C:8B:91:C8:31:B9:EF:C9:5C:BF:98:AE:41:F6:A9:D8:35:15:1A:7E:16"
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"applinks": {
|
||||
"details": [
|
||||
{
|
||||
"appIDs": [
|
||||
"7J4U792NQT.im.vector.app",
|
||||
"7J4U792NQT.io.element.elementx",
|
||||
"7J4U792NQT.io.element.elementx.nightly"
|
||||
],
|
||||
"components": [
|
||||
{
|
||||
"?": {
|
||||
"no_universal_links": "?*"
|
||||
},
|
||||
"exclude": true,
|
||||
"comment": "Opt out of universal links"
|
||||
},
|
||||
{
|
||||
"/": "/*",
|
||||
"comment": "Matches any URL"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"webcredentials": {
|
||||
"apps": [
|
||||
"7J4U792NQT.im.vector.app",
|
||||
"7J4U792NQT.io.element.elementx",
|
||||
"7J4U792NQT.io.element.elementx.nightly"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,922 @@
|
||||
/*
|
||||
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 OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
@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;
|
||||
--EventTileBubble_margin-block: 10px;
|
||||
--MessageTimestamp-width: 46px; /* 8 + 30 (avatar) + 8 */
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/**
|
||||
* Disable pointer events inside the persistentElement container when the room-list is being resized.
|
||||
* This is necessary to avoid the pointer events from being hijacked by the content rendered inside
|
||||
* that div.
|
||||
*/
|
||||
:root:has(.mx_Separator[data-separator="active"]) #mx_PersistedElement_container {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 {
|
||||
/* !important because compound overrides these font settings for body */
|
||||
font: var(--cpd-font-body-md-regular) !important;
|
||||
letter-spacing: var(--cpd-font-letter-spacing-body-md) !important;
|
||||
/**
|
||||
* 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 !important;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
/* Keep the legacy link colour without overriding Compound anchors. */
|
||||
a:where(:not([data-kind])):hover,
|
||||
a:where(:not([data-kind])):link,
|
||||
a:where(:not([data-kind])):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("@vector-im/compound-design-tokens/icons/search.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 {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: var(--cpd-space-1x);
|
||||
border-radius: 14px;
|
||||
background-color: var(--cpd-color-bg-subtle-secondary);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--cpd-color-bg-subtle-primary);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
vertical-align: top;
|
||||
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.
|
||||
*/
|
||||
.mx_Dialog
|
||||
button:not(
|
||||
.mx_EncryptionUserSettingsTab button,
|
||||
.mx_EncryptionCard button,
|
||||
.mx_UserProfileSettings button,
|
||||
.mx_ShareDialog button,
|
||||
.mx_UnpinAllDialog button,
|
||||
.mx_ThemeChoicePanel_CustomTheme button,
|
||||
.mx_Dialog_nonDialogButton,
|
||||
.mx_AccessibleButton,
|
||||
.mx_IdentityServerPicker button,
|
||||
.mx_AccessSecretStorageDialog button,
|
||||
.mx_InviteDialog_section button,
|
||||
.mx_InviteDialog_editor button,
|
||||
.mx_UnknownIdentityUsersWarningDialog button,
|
||||
[class|="maplibregl"]
|
||||
),
|
||||
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton),
|
||||
.mx_Dialog input[type="submit"],
|
||||
.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,
|
||||
[class|="maplibregl"],
|
||||
.mx_AccessibleButton,
|
||||
.mx_UserProfileSettings button,
|
||||
.mx_ThemeChoicePanel_CustomTheme button,
|
||||
.mx_UnpinAllDialog button,
|
||||
.mx_ShareDialog button,
|
||||
.mx_EncryptionUserSettingsTab button,
|
||||
.mx_UnknownIdentityUsersWarningDialog button
|
||||
):last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.mx_Dialog
|
||||
button:not(
|
||||
.mx_Dialog_nonDialogButton,
|
||||
[class|="maplibregl"],
|
||||
.mx_AccessibleButton,
|
||||
.mx_UserProfileSettings button,
|
||||
.mx_ThemeChoicePanel_CustomTheme button,
|
||||
.mx_UnpinAllDialog button,
|
||||
.mx_ShareDialog button,
|
||||
.mx_EncryptionUserSettingsTab button,
|
||||
.mx_InviteDialog_section button,
|
||||
.mx_InviteDialog_editor button,
|
||||
.mx_UnknownIdentityUsersWarningDialog button
|
||||
):focus,
|
||||
.mx_Dialog input[type="submit"]:focus,
|
||||
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton):focus,
|
||||
.mx_Dialog_buttons input[type="submit"]:focus {
|
||||
filter: brightness($focus-brightness);
|
||||
}
|
||||
|
||||
.mx_Dialog button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton, [class|="maplibregl"]),
|
||||
.mx_Dialog input[type="submit"].mx_Dialog_primary,
|
||||
.mx_Dialog_buttons
|
||||
button:not(
|
||||
.mx_Dialog_nonDialogButton,
|
||||
.mx_AccessibleButton,
|
||||
.mx_UserProfileSettings button,
|
||||
.mx_ThemeChoicePanel_CustomTheme button,
|
||||
.mx_UnpinAllDialog button,
|
||||
.mx_ShareDialog button,
|
||||
.mx_EncryptionUserSettingsTab button,
|
||||
.mx_UnknownIdentityUsersWarningDialog 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, [class|="maplibregl"]),
|
||||
.mx_Dialog input[type="submit"].danger,
|
||||
.mx_Dialog_buttons
|
||||
button.danger:not(
|
||||
.mx_Dialog_nonDialogButton,
|
||||
.mx_AccessibleButton,
|
||||
.mx_UserProfileSettings button,
|
||||
.mx_ThemeChoicePanel_CustomTheme button,
|
||||
.mx_UnpinAllDialog button,
|
||||
.mx_ShareDialog button,
|
||||
.mx_EncryptionUserSettingsTab button,
|
||||
.mx_UnknownIdentityUsersWarningDialog 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, [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,
|
||||
[class|="maplibregl"],
|
||||
.mx_AccessibleButton,
|
||||
.mx_UserProfileSettings button,
|
||||
.mx_ThemeChoicePanel_CustomTheme button,
|
||||
.mx_UnpinAllDialog button,
|
||||
.mx_ShareDialog button,
|
||||
.mx_EncryptionUserSettingsTab button,
|
||||
.mx_UnknownIdentityUsersWarningDialog button
|
||||
):disabled,
|
||||
.mx_Dialog input[type="submit"]:disabled,
|
||||
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .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 LegacyCallButton {
|
||||
box-sizing: border-box;
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
height: $font-24px;
|
||||
line-height: $font-24px;
|
||||
margin-right: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
color: $button-fg-color;
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
@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 {
|
||||
display: inline-block;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
flex-shrink: 0;
|
||||
color: $icon-button-color;
|
||||
}
|
||||
|
||||
@define-mixin composerButtonHighLight {
|
||||
background: var(--cpd-color-bg-subtle-primary);
|
||||
color: var(--cpd-color-icon-primary) !important;
|
||||
}
|
||||
|
||||
@define-mixin composerButton $border-radius, $hover-color, $hover-bg {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border-radius: $border-radius;
|
||||
|
||||
svg {
|
||||
color: $icon-button-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $hover-bg;
|
||||
|
||||
svg {
|
||||
color: $hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_lineClamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: var(--mx-line-clamp, 1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* This class is used extensively in element-web and are included here for compatibility with the existing timeline and layout.
|
||||
/* TODO: Review mx_MessageTimestamp usage after finishing migration of timeline tiles to shared components. */
|
||||
/* https://github.com/element-hq/element-web/issues/31651 */
|
||||
.mx_MessageTimestamp {
|
||||
color: var(--cpd-color-text-secondary) !important; /* override anchor color */
|
||||
font-size: $font-10px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
display: block; /* enable the width setting below */
|
||||
width: var(--MessageTimestamp-width);
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -0,0 +1,378 @@
|
||||
/* 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/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/encryption/_KeyStoragePanel.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 "./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/_NonUrgentToastContainer.pcss";
|
||||
@import "./structures/_PictureInPictureDragger.pcss";
|
||||
@import "./structures/_QuickSettingsButton.pcss";
|
||||
@import "./structures/_RightPanel.pcss";
|
||||
@import "./structures/_RoomSearch.pcss";
|
||||
@import "./structures/_RoomView.pcss";
|
||||
@import "./structures/_SearchBox.pcss";
|
||||
@import "./structures/_SpaceHierarchy.pcss";
|
||||
@import "./structures/_SpacePanel.pcss";
|
||||
@import "./structures/_SpacePillButton.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/_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/_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/_DefaultWelcome.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/_RoomAvatarView.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/dialogs/_AddExistingToSpaceDialog.pcss";
|
||||
@import "./views/dialogs/_AnalyticsLearnMoreDialog.pcss";
|
||||
@import "./views/dialogs/_BugReportDialog.pcss";
|
||||
@import "./views/dialogs/_ChangelogDialog.pcss";
|
||||
@import "./views/dialogs/_CompoundDialog.pcss";
|
||||
@import "./views/dialogs/_ConfirmKeyStorageOffDialog.pcss";
|
||||
@import "./views/dialogs/_ConfirmSpaceUserActionDialog.pcss";
|
||||
@import "./views/dialogs/_ConfirmUserActionDialog.pcss";
|
||||
@import "./views/dialogs/_CreateRoomDialog.pcss";
|
||||
@import "./views/dialogs/_CreateSectionDialog.pcss";
|
||||
@import "./views/dialogs/_CreateSubspaceDialog.pcss";
|
||||
@import "./views/dialogs/_Crypto.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/_InviteProgressBody.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/_RemoveSectionDialog.pcss";
|
||||
@import "./views/dialogs/_ReportRoomDialog.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/invite/_UnknownIdentityUsersWarningDialog.pcss";
|
||||
@import "./views/dialogs/security/_AccessSecretStorageDialog.pcss";
|
||||
@import "./views/dialogs/security/_CreateCrossSigningDialog.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/_SettingsDropdown.pcss";
|
||||
@import "./views/elements/_SettingsFlag.pcss";
|
||||
@import "./views/elements/_Spinner.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/_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/_DisambiguatedProfile.pcss";
|
||||
@import "./views/messages/_LegacyCallEvent.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/_MPollBody.pcss";
|
||||
@import "./views/messages/_MStickerBody.pcss";
|
||||
@import "./views/messages/_MediaBody.pcss";
|
||||
@import "./views/messages/_MessageActionBar.pcss";
|
||||
@import "./views/messages/_ReactionsRow.pcss";
|
||||
@import "./views/messages/_RoomAvatarEvent.pcss";
|
||||
@import "./views/messages/_TextualEvent.pcss";
|
||||
@import "./views/messages/_ThreadActionBar.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/RoomListPanel/_RoomListPanel.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/_E2EIcon.pcss";
|
||||
@import "./views/rooms/_E2EIconView.pcss";
|
||||
@import "./views/rooms/_EditMessageComposer.pcss";
|
||||
@import "./views/rooms/_EmojiButton.pcss";
|
||||
@import "./views/rooms/_EventBubbleTile.pcss";
|
||||
@import "./views/rooms/_EventPreview.pcss";
|
||||
@import "./views/rooms/_EventTile.pcss";
|
||||
@import "./views/rooms/_HistoryTile.pcss";
|
||||
@import "./views/rooms/_IRCLayout.pcss";
|
||||
@import "./views/rooms/_InvitedIconView.pcss";
|
||||
@import "./views/rooms/_JumpToBottomButton.pcss";
|
||||
@import "./views/rooms/_LegacyRoomList.pcss";
|
||||
@import "./views/rooms/_LegacyRoomListHeader.pcss";
|
||||
@import "./views/rooms/_LiveContentSummary.pcss";
|
||||
@import "./views/rooms/_MemberListHeaderView.pcss";
|
||||
@import "./views/rooms/_MemberListView.pcss";
|
||||
@import "./views/rooms/_MemberTileView.pcss";
|
||||
@import "./views/rooms/_MessageComposer.pcss";
|
||||
@import "./views/rooms/_MessageComposerFormatBar.pcss";
|
||||
@import "./views/rooms/_NewRoomIntro.pcss";
|
||||
@import "./views/rooms/_NotificationBadge.pcss";
|
||||
@import "./views/rooms/_OverflowTile.pcss";
|
||||
@import "./views/rooms/_PinnedEventTile.pcss";
|
||||
@import "./views/rooms/_PinnedMessageBanner.pcss";
|
||||
@import "./views/rooms/_PresenceIconView.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/_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/_UserIdentityWarning.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/_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/_SetIntegrationManager.pcss";
|
||||
@import "./views/settings/_SettingsFieldset.pcss";
|
||||
@import "./views/settings/_SettingsHeader.pcss";
|
||||
@import "./views/settings/_SettingsSubheader.pcss";
|
||||
@import "./views/settings/_SpellCheckLanguages.pcss";
|
||||
@import "./views/settings/_ThemeChoicePanel.pcss";
|
||||
@import "./views/settings/_UpdateCheckButton.pcss";
|
||||
@import "./views/settings/_UserPersonalInfoSettings.pcss";
|
||||
@import "./views/settings/_UserProfileSettings.pcss";
|
||||
@import "./views/settings/encryption/_AdvancedPanel.pcss";
|
||||
@import "./views/settings/encryption/_ChangeRecoveryKey.pcss";
|
||||
@import "./views/settings/encryption/_EncryptionCard.pcss";
|
||||
@import "./views/settings/encryption/_EncryptionCardEmphasisedContent.pcss";
|
||||
@import "./views/settings/encryption/_RecoveryPanelOutOfSync.pcss";
|
||||
@import "./views/settings/encryption/_ResetIdentityPanel.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/_MediaPreviewAccountSettings.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/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/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/_LegacyCallView.pcss";
|
||||
@import "./views/voip/_LegacyCallViewForRoom.pcss";
|
||||
@import "./views/voip/_LegacyCallViewHeader.pcss";
|
||||
@import "./views/voip/_LegacyCallViewSidebar.pcss";
|
||||
@import "./views/voip/_VideoFeed.pcss";
|
||||
@@ -0,0 +1,6 @@
|
||||
/* Shared cascade order: Compound tokens, Compound Web, shared components, then app overrides. */
|
||||
@layer compound-tokens, compound-web, shared-components, app-web;
|
||||
|
||||
/* Modules bundled with compound apply compound lastly. In order to catch issue due to css class ordering, we put compound at the end */
|
||||
@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound-tokens);
|
||||
@import url("@vector-im/compound-web/dist/style.css") layer(compound-web);
|
||||
@@ -0,0 +1,53 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
/*
|
||||
* These variables are now *deprecated* and should not be used in new code; instead Compound typographic tokens
|
||||
* should be used. Direct equivalents for these old font size tokens are listed below; where no equivalent exists,
|
||||
* that suggests that the design is using a non-standard font size and should be updated.
|
||||
*
|
||||
* In fact, modern Figma designs should actually use a named Typography style such as "Web/font/heading/sm/semibold",
|
||||
* translates directly to `font: var(--cpd-font-heading-sm-semibold)`.
|
||||
*/
|
||||
$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; /* Compound equivalent: --cpd-font-size-body-xs */
|
||||
$font-12px: 0.75rem;
|
||||
$font-13px: 0.8125rem; /* Compound equivalent: --cpd-font-size-body-sm */
|
||||
$font-14px: 0.875rem;
|
||||
$font-15px: 0.9375rem; /* Compound equivalent: --cpd-font-size-body-md */
|
||||
$font-16px: 1rem;
|
||||
$font-17px: 1.0625rem; /* Compound equivalent: --cpd-font-size-body-lg */
|
||||
$font-18px: 1.125rem;
|
||||
$font-20px: 1.25rem; /* Compound equivalent: --cpd-font-size-heading-sm */
|
||||
$font-22px: 1.375rem;
|
||||
$font-23px: 1.4375rem;
|
||||
$font-24px: 1.5rem; /* Compound equivalent: --cpd-font-size-heading-md */
|
||||
$font-25px: 1.5625rem;
|
||||
$font-26px: 1.625rem;
|
||||
$font-28px: 1.75rem; /* Compound equivalent: --cpd-font-size-heading-lg */
|
||||
$font-29px: 1.8125rem;
|
||||
$font-30px: 1.875rem;
|
||||
$font-32px: 2rem; /* Compound equivalent: --cpd-font-size-heading-xl */
|
||||
$font-34px: 2.125rem;
|
||||
$font-35px: 2.1875rem;
|
||||
$font-39px: 2.4375rem;
|
||||
$font-42px: 2.625rem;
|
||||
$font-44px: 2.75rem;
|
||||
$font-48px: 3rem;
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_LiveTimeRemaining {
|
||||
color: $secondary-content;
|
||||
font-size: $font-12px;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_KebabContextMenu_icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: $icon-button-color;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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: 16px;
|
||||
width: 16px;
|
||||
margin-right: $spacing-8;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
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;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
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;
|
||||
gap: $spacing-8;
|
||||
margin-top: $spacing-12;
|
||||
}
|
||||
|
||||
.mx_PollListItemEnded_voteCount {
|
||||
/* 6px to match PollOption padding */
|
||||
margin: $spacing-8 0 0 6px;
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
/*
|
||||
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 OR LicenseRef-Element-Commercial
|
||||
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,
|
||||
.mx_AppPermission_content_bolder {
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
}
|
||||
.mx_AppPermission_content {
|
||||
margin-block: auto; /* place at the center */
|
||||
|
||||
> div {
|
||||
margin-block: 12px;
|
||||
}
|
||||
|
||||
.mx_TextWithTooltip_target--helpIcon {
|
||||
display: inline-block;
|
||||
height: $font-14px; /* align with characters on the same line */
|
||||
vertical-align: middle;
|
||||
|
||||
.mx_Icon {
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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 rgb(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 {
|
||||
color: $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;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_LearnMore_button {
|
||||
margin-left: $spacing-4;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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%;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_LiveDurationDropdown {
|
||||
margin-bottom: $spacing-16;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_LocationShareMenu {
|
||||
width: 375px;
|
||||
height: 460px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_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);
|
||||
width: var(--mx-map-error-icon-size);
|
||||
color: var(--mx-map-error-icon-color);
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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 rgb(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;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_ShareDialogButtons {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
button.mx_ShareDialogButtons_button {
|
||||
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 {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 2px;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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 rgb(0, 0, 0, 0.25);
|
||||
|
||||
.mx_ZoomButtons_icon {
|
||||
$ZoomButtons_icon-size: 12px;
|
||||
|
||||
height: $ZoomButtons_icon-size;
|
||||
width: $ZoomButtons_icon-size;
|
||||
color: $primary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_MediaProcessingError_Icon {
|
||||
margin-right: $spacing-4;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2023 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_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 {
|
||||
.mx_PollOption_popularityBackground {
|
||||
.mx_PollOption_popularityAmount {
|
||||
background-color: var(--cpd-color-icon-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* override checked radio button styling to show checkmark instead */
|
||||
.mx_StyledRadioButton_checked {
|
||||
input[type="radio"]:checked + div {
|
||||
border-color: var(--cpd-color-icon-primary);
|
||||
background-color: var(--cpd-color-icon-primary);
|
||||
|
||||
div {
|
||||
background: none;
|
||||
|
||||
svg {
|
||||
color: var(--cpd-color-icon-on-solid-primary);
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin: -2px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_PollOption_ended.mx_PollOption_checked {
|
||||
.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-color: var(--cpd-color-icon-accent-tertiary);
|
||||
background-color: var(--cpd-color-icon-accent-tertiary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 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: var(--cpd-color-icon-primary);
|
||||
}
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_CurrentDeviceSection_deviceDetails {
|
||||
/* align with text of session tile */
|
||||
margin-left: 56px;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
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;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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: 24px;
|
||||
width: 24px;
|
||||
|
||||
transition: all 0.3s;
|
||||
transform: var(--icon-transform);
|
||||
transform-origin: center;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
gap: $spacing-8;
|
||||
grid-auto-flow: column;
|
||||
margin-left: $spacing-8;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
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;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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%;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_SecurityRecommendations_spacing {
|
||||
height: $spacing-16;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
/*
|
||||
Copyright 2024,2025 New Vector Ltd.
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_SelectableDeviceTile {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx_SelectableDeviceTile_checkbox {
|
||||
flex: 1 0;
|
||||
|
||||
> div {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
margin-right: var(--cpd-space-1x);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
/*
|
||||
* Copyright 2025 New Vector Ltd.
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
* Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_KeyStoragePanel_toggleRow {
|
||||
flex-direction: row;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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-6x);
|
||||
}
|
||||
|
||||
*[role="separator"] {
|
||||
/**
|
||||
* The gap between subsections is 32px and inside the subsection is 24px.
|
||||
* The separator separates the subsections, so it should have the same gap as the subsections.
|
||||
* We add 12px and the separator spacing (8px) to the top margin to make the separator visually centered between the subsections.
|
||||
* !important because it's overriding compound margin.
|
||||
*/
|
||||
margin-top: var(--cpd-space-5x) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
gap: var(--cpd-space-4x);
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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%;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 | fgrep -v _compound.pcss | LC_ALL=C sort |
|
||||
while read i; do
|
||||
echo "@import \"$i\";"
|
||||
done
|
||||
} > _components.pcss
|
||||
@@ -0,0 +1,63 @@
|
||||
/*
|
||||
Copyright 2020-2024 New Vector Ltd.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_ErrorView {
|
||||
--width: 520px;
|
||||
--cpd-separator-inset: calc(50% - (var(--width) / 2));
|
||||
--cpd-separator-spacing: var(--cpd-space-8x);
|
||||
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol";
|
||||
text-align: center;
|
||||
color: var(--cpd-color-text-primary);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
padding: var(--cpd-space-20x);
|
||||
|
||||
background-color: var(--cpd-color-theme-bg);
|
||||
background-image: url("../../themes/element/img/compound/fade-arc-light.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
|
||||
.mx_ErrorView_logo {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.mx_ErrorView_container {
|
||||
max-width: var(--width);
|
||||
margin: 0 auto var(--cpd-space-8x);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
color: var(--cpd-color-text-primary);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: var(--cpd-space-8x) 0;
|
||||
font-size: var(--cpd-font-size-heading-sm);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--cpd-color-text-secondary);
|
||||
}
|
||||
|
||||
.mx_ErrorView_flexContainer {
|
||||
margin: 0 auto;
|
||||
max-width: max-content;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.mx_ErrorView_buttons {
|
||||
margin-top: var(--cpd-space-6x);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
/*
|
||||
Copyright 2018-2024 New Vector Ltd.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
/* 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;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
/*
|
||||
Copyright 2021-2024 New Vector Ltd.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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 rgb(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%);
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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 [data-type="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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_GenericDropdownMenu_button {
|
||||
padding: 3px 4px 3px 8px;
|
||||
border-radius: 4px;
|
||||
line-height: 1.5;
|
||||
user-select: none;
|
||||
font-size: $font-12px;
|
||||
color: $secondary-content;
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_GenericDropdownMenu_button:hover,
|
||||
.mx_GenericDropdownMenu_button[aria-expanded="true"] {
|
||||
background: $quinary-content;
|
||||
}
|
||||
|
||||
.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 rgb(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;
|
||||
}
|
||||
|
||||
.mx_GenericDropdownMenu_Option--checkIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: -22px;
|
||||
margin-right: 6px;
|
||||
color: $primary-content;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
/*
|
||||
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 OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_HomePage {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: min(100% - 50px, 960px);
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
container-type: inline-size;
|
||||
container-name: homepage;
|
||||
}
|
||||
|
||||
.mx_HomePage_default {
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 4px;
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
font-size: $font-32px;
|
||||
line-height: 1.375;
|
||||
}
|
||||
|
||||
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: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 5px 40px;
|
||||
width: 100%;
|
||||
margin-top: 80px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 13px;
|
||||
box-sizing: border-box;
|
||||
width: 160px;
|
||||
min-height: 132px;
|
||||
padding: 8px 15px;
|
||||
border-radius: 8px;
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
font-size: $font-15px;
|
||||
line-height: $font-20px;
|
||||
color: #fff; /* on all themes */
|
||||
background-color: $accent;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
object-fit: contain;
|
||||
color: #fff; /* on all themes */
|
||||
}
|
||||
}
|
||||
|
||||
@container homepage (max-width: 559px) {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,232 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_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;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_wrapper,
|
||||
.mx_LeftPanel {
|
||||
--collapsedWidth: 68px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_panel {
|
||||
.mx_LeftPanel_outerWrapper {
|
||||
height: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_wrapper--user {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
/* For enhanced visibility under contrast control */
|
||||
outline: 1px solid transparent;
|
||||
|
||||
&[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_LegacyRoomListHeader {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_dialPadButton,
|
||||
.mx_LeftPanel_exploreButton {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: var(--cpd-space-1-5x);
|
||||
border-radius: 8px;
|
||||
background-color: $panel-actions;
|
||||
margin-left: 8px;
|
||||
/* For enhanced visibility under contrast control */
|
||||
outline: 1px solid transparent;
|
||||
|
||||
svg {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
display: block;
|
||||
color: $secondary-content;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $tertiary-content;
|
||||
|
||||
svg {
|
||||
color: $background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LegacyRoomListHeader: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 {
|
||||
margin-left: 0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeftPanel_newRoomList {
|
||||
/* Thew new rooms list is not designed to be collapsed to just icons. */
|
||||
/* 224 + 68(spaces bar) was deemed by design to be a good minimum for the left panel. */
|
||||
--collapsedWidth: 224px;
|
||||
/* Important to force the color on ED titlebar until we remove the old room list */
|
||||
background-color: var(--cpd-color-bg-canvas-default) !important;
|
||||
}
|
||||
|
||||
#left-panel .mx_LeftPanel_wrapper--user {
|
||||
/*
|
||||
* Disable background when using the new room list.
|
||||
* This background sometimes shows when the panel is resized and it looks like a thicker border.
|
||||
*/
|
||||
background: none;
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
/*
|
||||
Copyright 2019-2024 New Vector Ltd.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_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;
|
||||
}
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
/*
|
||||
Copyright 2026 Element Creations Ltd.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_PictureInPictureDragger {
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
/* Display above any widget elements */
|
||||
z-index: 102;
|
||||
}
|
||||
|
||||
.mx_PictureInPictureDragger:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
/*
|
||||
Copyright 2024,2025 New Vector Ltd.
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_QuickSettingsButton {
|
||||
/* !important override compound */
|
||||
border-radius: 8px !important;
|
||||
margin: 12px auto 12px;
|
||||
|
||||
svg {
|
||||
fill: $secondary-content;
|
||||
}
|
||||
|
||||
&:not(.expanded):hover {
|
||||
/**
|
||||
* override compound default background color when hovered
|
||||
* should disappear when the space panel will be migrated to compound
|
||||
*/
|
||||
background-color: $quaternary-content !important;
|
||||
color: $primary-content;
|
||||
|
||||
svg {
|
||||
fill: $primary-content;
|
||||
}
|
||||
}
|
||||
|
||||
&.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;
|
||||
margin-right: 8px;
|
||||
width: 100%;
|
||||
|
||||
/**
|
||||
* modify internal css of the compound component
|
||||
* dirty but we need to add the label into the indicator icon button
|
||||
**/
|
||||
& > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
svg {
|
||||
/* align with settings label */
|
||||
margin-right: 14px;
|
||||
/* required to set the icon width when into a flex container */
|
||||
width: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
& .mx_QuickSettingsButton_label {
|
||||
/* !important override compound */
|
||||
color: $secondary-content !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mx_QuickSettingsButton_moreOptionsButton {
|
||||
margin-left: var(--cpd-space-7x);
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
color: var(--cpd-color-text-primary);
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mx_QuickSettingsButton_option {
|
||||
margin-bottom: var(--cpd-space-3x);
|
||||
label {
|
||||
/* Correctly line up icons and text. */
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_QuickSettingsButton_ContextMenuWrapper_new_room_list {
|
||||
.mx_QuickThemeSwitcher {
|
||||
margin-top: var(--cpd-space-2x);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_QuickSettingsButton_icon {
|
||||
margin-right: var(--cpd-space-1x);
|
||||
color: $secondary-content;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
/*
|
||||
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 OR LicenseRef-Element-Commercial
|
||||
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 */
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RightPanel .mx_MemberList,
|
||||
.mx_RightPanel .mx_MemberInfo {
|
||||
order: 2;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.mx_RightPanel .mx_RoomView_messagePanelSpinner {
|
||||
order: 2;
|
||||
margin: auto;
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
/* 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;
|
||||
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 {
|
||||
color: $background;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,213 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--RoomView_MessageList-padding: 18px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_panel {
|
||||
.mx_RoomView_wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
svg {
|
||||
color: $info-plinth-fg-color;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: 286px;
|
||||
left: calc(50% - 25px);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomView_body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
container-type: size;
|
||||
container-name: roomview;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_SearchBox {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
min-height: 36px; /* to avoid jumping when the X to clear shows/hides */
|
||||
|
||||
&.mx_SearchBox_blurred:not(:hover) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.mx_SearchBox_closeButton {
|
||||
cursor: pointer;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
padding: 9px;
|
||||
|
||||
svg {
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
color: var(--cpd-color-icon-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,277 @@
|
||||
/*
|
||||
Copyright 2024,2025 New Vector Ltd.
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_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("@vector-im/compound-design-tokens/icons/error-solid.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;
|
||||
|
||||
svg {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
color: $tertiary-content;
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
&.mx_SpaceHierarchy_subspace_toggle_shown svg {
|
||||
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 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mx_SpaceHierarchy_roomTile_joined {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 */
|
||||
}
|
||||
}
|
||||
|
||||
&: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: rgb(141, 151, 165, 0.2);
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.mx_SpaceHierarchy_createRoom {
|
||||
display: block;
|
||||
margin: 16px auto 0;
|
||||
width: max-content;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,374 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_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;
|
||||
|
||||
/* For enhanced visibility under contrast control */
|
||||
outline: 1px solid transparent;
|
||||
|
||||
/* Create another flexbox so the Panel fills the container */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&.collapsed {
|
||||
width: 68px;
|
||||
}
|
||||
|
||||
&.newUi {
|
||||
background-color: var(--cpd-color-bg-canvas-default);
|
||||
border-right: 1px solid var(--cpd-color-bg-subtle-primary);
|
||||
}
|
||||
|
||||
.mx_SpacePanel_toggleCollapse {
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background-color: $tertiary-content;
|
||||
top: 19px; /* v-align with avatar */
|
||||
right: -8px;
|
||||
|
||||
svg {
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
display: inline-block;
|
||||
color: $background;
|
||||
/* Slight alignment tweak to center the asset */
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
&:not(.expanded) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.expanded svg {
|
||||
transform: rotate(180deg);
|
||||
/* Slight alignment tweak to center the asset */
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .mx_SpacePanel_toggleCollapse,
|
||||
.mx_SpacePanel_toggleCollapse:focus-visible {
|
||||
opacity: 1;
|
||||
/* For enhanced visibility under contrast control */
|
||||
outline: 1px solid transparent;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
& > .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%;
|
||||
/* Override the unlayered cursor: grab; rule from react-beautiful-dnd */
|
||||
cursor: pointer !important;
|
||||
|
||||
&.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 {
|
||||
height: 20px;
|
||||
width: var(--gutterSize);
|
||||
flex-shrink: 0;
|
||||
padding: 10px 0;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: inherit;
|
||||
display: inline-block;
|
||||
color: $tertiary-content;
|
||||
/* Re-align with parent */
|
||||
margin-left: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceButton_icon {
|
||||
/* Calculate height excluding padding to allow svg to inherit */
|
||||
width: calc(var(--height-topLevel) - 14px);
|
||||
height: calc(var(--height-topLevel) - 14px);
|
||||
flex-shrink: 0;
|
||||
border-radius: 8px;
|
||||
padding: 7px;
|
||||
background-color: $panel-actions;
|
||||
|
||||
svg {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
display: block;
|
||||
color: $secondary-content;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_SpaceButton_new .mx_SpaceButton_icon {
|
||||
background-color: unset;
|
||||
|
||||
svg {
|
||||
color: $primary-content;
|
||||
transition: all 0.2s ease-in-out; /* TODO transition */
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_SpaceButton_newCancel .mx_SpaceButton_icon svg {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.mx_SpaceButton_menuButton {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: var(--cpd-space-0-5x);
|
||||
flex-shrink: 0;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
|
||||
svg {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
display: block;
|
||||
color: $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_IndicatorScrollbar_topOverflow {
|
||||
mask-image: linear-gradient(to bottom, transparent, black 16px);
|
||||
}
|
||||
|
||||
&.mx_IndicatorScrollbar_bottomOverflow {
|
||||
mask-image: linear-gradient(
|
||||
to top,
|
||||
transparent,
|
||||
rgb(255, 255, 255, 30%) 4px,
|
||||
rgb(255, 255, 255, 55%) 8px,
|
||||
rgb(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,
|
||||
rgb(255, 255, 255, 30%) 4px,
|
||||
rgb(255, 255, 255, 55%) 8px,
|
||||
rgb(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_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_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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
/*
|
||||
Copyright 2025 Element Creations Ltd.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_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;
|
||||
}
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 22px;
|
||||
color: $tertiary-content;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--cpd-color-bg-action-primary-rest);
|
||||
|
||||
svg {
|
||||
color: var(--cpd-color-icon-primary);
|
||||
}
|
||||
|
||||
> span {
|
||||
color: $primary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,224 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_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;
|
||||
/* For enhanced visibility under contrast control */
|
||||
outline: 1px solid transparent;
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_landing_inviteButton,
|
||||
.mx_SpaceRoomView_landing_settingsButton {
|
||||
position: relative;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_landing_inviteButton {
|
||||
padding: 4px 18px 4px 40px;
|
||||
height: min-content;
|
||||
|
||||
svg {
|
||||
left: 8px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
color: var(--cpd-color-icon-on-solid-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SpaceRoomView_landing_settingsButton {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
svg {
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
color: $tertiary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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_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 */
|
||||
color: var(--cpd-color-text-primary);
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
text-decoration: underline;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: var(--cpd-color-icon-primary);
|
||||
}
|
||||
|
||||
& + .mx_AccessibleButton {
|
||||
margin-left: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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%,
|
||||
hsl(250deg, 76%, 71%, 0.261) 0%,
|
||||
hsl(250deg, 100%, 88%, 0) 100%
|
||||
),
|
||||
radial-gradient(41.93% 41.93% at 0% 0%, hsl(222deg, 29%, 20%, 0.28) 0%, hsl(250deg, 100%, 88%, 0) 100%),
|
||||
radial-gradient(100% 100% at 0% 0%, hsl(250deg, 100%, 88%, 0.174) 0%, hsl(0deg, 100%, 86%, 0) 100%),
|
||||
radial-gradient(106.35% 96.26% at 100% 0%, hsl(250deg, 100%, 88%, 0.4) 0%, hsl(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 */ rgb(0, 0, 0, 0.9) 20%,
|
||||
/* 80% dithering at the bottom */ rgb(0, 0, 0, 0.2) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
/*
|
||||
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 OR LicenseRef-Element-Commercial
|
||||
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_tabLabel_active {
|
||||
background-color: var(--cpd-color-bg-subtle-secondary);
|
||||
/* For enhanced visibility under contrast control */
|
||||
outline: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.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_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_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_tabLabels {
|
||||
width: auto;
|
||||
}
|
||||
.mx_TabbedView_tabLabel {
|
||||
padding-inline: 0 0;
|
||||
justify-content: center;
|
||||
svg {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
/*
|
||||
* Copyright 2024 New Vector Ltd.
|
||||
* Copyright 2024 The Matrix.org Foundation C.I.C.
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
* Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_ThreadsActivityCentre_container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mx_ThreadsActivityCentreButton {
|
||||
/* !important override compound */
|
||||
border-radius: 8px !important;
|
||||
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;
|
||||
margin-right: 8px;
|
||||
width: 100%;
|
||||
|
||||
/**
|
||||
* 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;
|
||||
|
||||
&::before {
|
||||
inline-size: 8px;
|
||||
block-size: 8px;
|
||||
left: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
& .mx_ThreadsActivityCentreButton_Icon {
|
||||
/* align with settings label */
|
||||
margin-right: 14px;
|
||||
/* required to set the icon width when into a flex container */
|
||||
width: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
& .mx_ThreadsActivityCentreButton_Text {
|
||||
/* !important override compound */
|
||||
color: $secondary-content !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.expanded) {
|
||||
&:hover,
|
||||
&:hover .mx_ThreadsActivityCentreButton_Icon {
|
||||
/* !important override compound */
|
||||
background-color: $quaternary-content !important;
|
||||
fill: $primary-content;
|
||||
}
|
||||
}
|
||||
|
||||
& .mx_ThreadsActivityCentreButton_Icon {
|
||||
fill: $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;
|
||||
}
|
||||
|
||||
/* Hide the notification badge on hover — compound's `nav-hint ~ *` rule would normally
|
||||
* do this, but the app-web CSS layer overrides compound-web regardless of specificity. */
|
||||
&:hover .mx_NotificationBadge {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ThreadsActivityCentre_emptyCaption {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
/*
|
||||
Copyright 2026 Element Creations Ltd.
|
||||
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 OR LicenseRef-Element-Commercial
|
||||
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 28px 8px;
|
||||
|
||||
&.mx_ToastContainer_stacked::before {
|
||||
content: "";
|
||||
margin: 0 var(--cpd-space-1-5x);
|
||||
grid-row: 2 / -1;
|
||||
grid-column: 1;
|
||||
background-color: $system;
|
||||
box-shadow: 0px 4px 20px rgb(0, 0, 0, 0.5);
|
||||
border-radius: var(--cpd-space-6x);
|
||||
}
|
||||
|
||||
.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 rgb(0, 0, 0, 0.1);
|
||||
border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
|
||||
border-radius: calc(var(--cpd-space-6x) - var(--cpd-border-width-1));
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: 20px 1fr auto;
|
||||
column-gap: var(--cpd-space-2x);
|
||||
row-gap: 4px;
|
||||
align-items: center;
|
||||
padding: calc(var(--cpd-space-5x) - var(--cpd-border-width-1));
|
||||
|
||||
&.mx_Toast_hasIcon {
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.mx_Toast_title {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.mx_Toast_closebutton {
|
||||
grid-column: 3;
|
||||
}
|
||||
}
|
||||
&:not(.mx_Toast_hasIcon) .mx_Toast_title {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.mx_Toast_title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: var(--cpd-space-2x);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font: var(--cpd-font-body-lg-semibold);
|
||||
display: inline;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Toast_body {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.mx_Toast_buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
column-gap: var(--cpd-space-2x);
|
||||
|
||||
.mx_AccessibleButton {
|
||||
min-width: 96px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Toast_description {
|
||||
max-width: 272px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin: var(--cpd-space-1x) 0 11px 0;
|
||||
color: $secondary-content;
|
||||
font: var(--cpd-font-body-sm-regular);
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Toast_deviceID {
|
||||
font-size: $font-10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
/*
|
||||
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 OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_UploadBar {
|
||||
/* line up with the shield area in the composer */
|
||||
padding: 5px 21px 0;
|
||||
position: relative;
|
||||
|
||||
display: grid;
|
||||
grid-template:
|
||||
"icon filename cancel" auto
|
||||
"progress progress progress" auto
|
||||
/ min-content auto min-content;
|
||||
gap: var(--cpd-space-1-5x);
|
||||
|
||||
& > svg {
|
||||
grid-area: icon;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
color: $muted-fg-color;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.mx_UploadBar_filename {
|
||||
grid-area: filename;
|
||||
color: $muted-fg-color;
|
||||
position: relative;
|
||||
font-size: $font-15px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_UploadBar_cancel {
|
||||
grid-area: cancel;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
color: $muted-fg-color;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.mx_ProgressBar {
|
||||
grid-area: progress;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ThreadView {
|
||||
.mx_UploadBar {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_CompleteSecurity_header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_E2EIcon.mx_CompleteSecurity_headerIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mx_E2EIcon.mx_CompleteSecurity_heroIcon {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
/*
|
||||
Copyright 2019-2024 New Vector Ltd.
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_Login_submit {
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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%);
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_MobileRegister_body {
|
||||
padding: 32px;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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 rgb(141, 151, 165, 0.2);
|
||||
|
||||
> * {
|
||||
flex-basis: content;
|
||||
}
|
||||
}
|
||||
@@ -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 OR LicenseRef-Element-Commercial
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_SetupEncryptionBody {
|
||||
width: 600px;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user