mirror of
https://github.com/Novaloop-AG/healthchat-web.git
synced 2026-11-05 12:54:39 +00:00
mv element.io @types __mocks__/ debian docker module_system/ playwright res src test webapp Dockerfile .dockerignore .eslintignore .stylelintrc.cjs babel.config.cjs recorder-worklet-loader.cjs .modernizr.json components.json config.json config.sample.json package.json project.json tsconfig.json tsconfig.module_system.json jest.config.ts playwright.config.ts webpack.config.ts build_config.sample.yaml apps/web/
mkdir apps/web/scripts
mv scripts/{cleanup.sh,ci_package.sh,copy-res.ts,deploy.py,package.sh} apps/web/scripts
And a couple of gitignore tweaks
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
@@ -0,0 +1,12 @@
|
||||
/*
|
||||
* 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_RoomListPanel {
|
||||
background-color: var(--cpd-color-bg-canvas-default);
|
||||
height: 100%;
|
||||
border-right: 1px solid var(--cpd-color-bg-subtle-primary);
|
||||
}
|
||||
@@ -0,0 +1,346 @@
|
||||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--AppTile_mini-height: 220px;
|
||||
}
|
||||
|
||||
.mx_AppsDrawer {
|
||||
--minWidth: 240px; /* TODO this should be 300px but that's too large */
|
||||
|
||||
margin: var(--container-gap-width);
|
||||
/* The left side gap is fully handled by this margin. To prohibit bleeding on webkit browser. */
|
||||
margin-right: calc(var(--container-gap-width) / 2);
|
||||
margin-bottom: 0; /* No bottom margin for the correct gap to the CallView below. */
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
flex-grow: 1;
|
||||
|
||||
.mx_AppsDrawer_resizer {
|
||||
margin-bottom: var(--container-gap-width);
|
||||
}
|
||||
|
||||
.mx_AppsDrawer_resizer_container {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
.mx_AppsDrawer_resizer_container_handle {
|
||||
cursor: ns-resize;
|
||||
|
||||
/* Override styles from library, making the whole area the target area */
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
|
||||
/* This is positioned directly below frame */
|
||||
position: absolute;
|
||||
bottom: 50% !important; /* override from library */
|
||||
|
||||
/* We then render the pill handle in an ::after to keep it in the handle's */
|
||||
/* area without being a massive line across the screen */
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-radius: 3px;
|
||||
|
||||
height: 4px;
|
||||
bottom: 0;
|
||||
|
||||
/* Together, these make the bar 64px wide */
|
||||
/* These are also overridden from the library */
|
||||
left: calc(50% - 32px);
|
||||
right: calc(50% - 32px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.mx_AppsDrawer_resizer_container_handle::after {
|
||||
opacity: 0.8;
|
||||
background: $primary-content;
|
||||
}
|
||||
|
||||
.mx_ResizeHandle--horizontal::before {
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
|
||||
height: 64px; /* to match width of the ones on roomlist */
|
||||
width: 4px;
|
||||
border-radius: 4px;
|
||||
|
||||
content: "";
|
||||
|
||||
background-color: $primary-content;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AppTile {
|
||||
width: 50%;
|
||||
min-width: var(--minWidth);
|
||||
}
|
||||
|
||||
&.mx_AppsDrawer--maximised {
|
||||
margin-bottom: var(--container-gap-width);
|
||||
}
|
||||
|
||||
&.mx_AppsDrawer--resizing .mx_AppTile_persistedWrapper {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&.mx_AppsDrawer--2apps .mx_AppTile {
|
||||
width: 50%;
|
||||
|
||||
&:nth-child(3) {
|
||||
flex-grow: 1;
|
||||
width: 0 !important;
|
||||
min-width: var(--minWidth) !important;
|
||||
}
|
||||
}
|
||||
&.mx_AppsDrawer--3apps .mx_AppTile {
|
||||
width: 33%;
|
||||
|
||||
&:nth-child(3) {
|
||||
flex-grow: 1;
|
||||
width: 0 !important;
|
||||
min-width: var(--minWidth) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AppsContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
|
||||
.mx_AppTile:first-of-type {
|
||||
border-left-width: var(--container-border-width);
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
.mx_AppTile:last-of-type {
|
||||
border-right-width: var(--container-border-width);
|
||||
border-radius: 0 10px 10px 0;
|
||||
}
|
||||
|
||||
.mx_ResizeHandle--horizontal {
|
||||
position: relative;
|
||||
|
||||
> div {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AppTile {
|
||||
border: var(--container-border-width) solid $widget-menu-bar-bg-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background-color: $widget-menu-bar-bg-color;
|
||||
}
|
||||
|
||||
.mx_AppTileFullWidth {
|
||||
width: 100% !important; /* to override the inline style set by the resizer */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: var(--container-border-width) solid $widget-menu-bar-bg-color;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: $widget-menu-bar-bg-color;
|
||||
}
|
||||
|
||||
.mx_AppTile_mini {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: var(--AppTile_mini-height);
|
||||
}
|
||||
|
||||
.mx_AppTile .mx_AppTile_persistedWrapper,
|
||||
.mx_AppTileFullWidth .mx_AppTile_persistedWrapper,
|
||||
.mx_AppTile_mini .mx_AppTile_persistedWrapper {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mx_AppTile_persistedWrapper div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mx_AppTileMenuBar {
|
||||
margin: 0;
|
||||
font-size: $font-12px;
|
||||
background-color: $widget-menu-bar-bg-color;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 6px;
|
||||
|
||||
.mx_AppTileMenuBar_title {
|
||||
line-height: 20px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.mx_WidgetAvatar {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-left: 9px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AppTileMenuBar_widgets {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_AppTileMenuBar_widgets_button {
|
||||
--size: 24px; /* Size of the button. Its height and width values should be same */
|
||||
|
||||
margin: 0 4px;
|
||||
position: relative;
|
||||
height: var(--size);
|
||||
width: var(--size);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: var(--size);
|
||||
width: var(--size);
|
||||
background-color: $panel-actions;
|
||||
border-radius: 50%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.mx_Icon {
|
||||
color: $muted-fg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Rules added to this selector style appTileBody generally */
|
||||
.mx_AppTileBody {
|
||||
/* Apply to every variant of appTileBody */
|
||||
border-radius: 8px;
|
||||
|
||||
/* const loadingElement */
|
||||
/* Note the loading spinner and the message next to it are not always included in mx_AppTileBody--loading */
|
||||
.mx_AppTileBody_fadeInSpinner {
|
||||
/* place spinner and the message at the center of mx_AppTileBody */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
font-weight: bold; /* message next to the spinner */
|
||||
animation-fill-mode: backwards;
|
||||
animation-duration: 200ms;
|
||||
animation-delay: 500ms;
|
||||
animation-name: mx_AppTileBody_fadeInSpinnerAnimation;
|
||||
}
|
||||
|
||||
&.mx_AppTileBody--large,
|
||||
&.mx_AppTileBody--mini {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: var(--AppTileBody-height);
|
||||
|
||||
iframe {
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_AppTileBody--large {
|
||||
--AppTileBody-height: 100%;
|
||||
|
||||
background-color: $widget-body-bg-color;
|
||||
|
||||
iframe {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_AppTileBody--mini {
|
||||
--AppTileBody-height: var(--AppTile_mini-height);
|
||||
}
|
||||
|
||||
&.mx_AppTileBody--loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
/* match bg of border so that the cut corners have the right fill */
|
||||
background-color: $widget-body-bg-color !important;
|
||||
|
||||
iframe {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_AppTileBody--call {
|
||||
border-radius: 0px;
|
||||
}
|
||||
&.mx_AppTileBody--call.mx_AppTileBody--mini {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* appTileBody is embedded to PersistedElement outside of mx_AppTile,
|
||||
so rules to style appTileBody generally should not be included here. */
|
||||
.mx_AppTile .mx_AppTileBody--large,
|
||||
.mx_AppTileFullWidth .mx_AppTileBody--large,
|
||||
.mx_AppTile_mini .mx_AppTileBody--mini {
|
||||
height: inherit;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@keyframes mx_AppTileBody_fadeInSpinnerAnimation {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
.mx_Autocomplete {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 1001;
|
||||
width: 100%;
|
||||
border: 1px solid $primary-hairline-color;
|
||||
background: $background;
|
||||
border-bottom: none;
|
||||
border-radius: 8px 8px 0 0;
|
||||
overflow: clip;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0px -16px 32px $composer-shadow-color;
|
||||
}
|
||||
|
||||
.mx_Autocomplete_ProviderSection {
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* a "block" completion takes up a whole line */
|
||||
.mx_Autocomplete_Completion_block {
|
||||
min-height: 34px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 12px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
.mx_Autocomplete_Completion_block * {
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.mx_Autocomplete_Completion_pill {
|
||||
box-sizing: border-box;
|
||||
border-radius: 2rem;
|
||||
height: $font-34px;
|
||||
padding: 0.4rem;
|
||||
display: flex;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
.mx_Autocomplete_Completion_pill > * {
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
|
||||
/* styling for common completion elements */
|
||||
.mx_Autocomplete_Completion_subtitle {
|
||||
font-style: italic;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mx_Autocomplete_Completion_description {
|
||||
color: gray;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.mx_Autocomplete_Completion_container_pill {
|
||||
margin: 12px;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
@container roomview (height >= 0px) {
|
||||
.mx_Autocomplete_Completion_container_pill {
|
||||
max-height: 40cqh;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Autocomplete_Completion_container_truncate {
|
||||
.mx_Autocomplete_Completion_title,
|
||||
.mx_Autocomplete_Completion_subtitle,
|
||||
.mx_Autocomplete_Completion_description {
|
||||
/* Ellipsis for long names/subtitles/descriptions */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Autocomplete_Completion.selected,
|
||||
.mx_Autocomplete_Completion:hover {
|
||||
background: $selected-color;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.mx_Autocomplete_provider_name {
|
||||
margin: 12px;
|
||||
color: $primary-content;
|
||||
font-weight: 400;
|
||||
opacity: 0.4;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
.mx_AuxPanel {
|
||||
min-width: 0px;
|
||||
width: 100%;
|
||||
margin: 0px auto;
|
||||
|
||||
overflow: auto;
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
/*
|
||||
Copyright 2019-2024 New Vector Ltd.
|
||||
Copyright 2019 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_BasicMessageComposer {
|
||||
/* These are set in Javascript */
|
||||
--avatar-letter: "";
|
||||
--avatar-background: unset;
|
||||
--avatar-color: unset;
|
||||
--placeholder: "";
|
||||
|
||||
position: relative;
|
||||
|
||||
.mx_BasicMessageComposer_inputEmpty > :first-child::before {
|
||||
content: var(--placeholder);
|
||||
color: var(--cpd-color-text-secondary);
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
display: inline-block;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@keyframes visualbell {
|
||||
from {
|
||||
background-color: $visual-bell-bg-color;
|
||||
}
|
||||
to {
|
||||
background-color: $background;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_BasicMessageComposer_input_error {
|
||||
animation: 0.2s visualbell;
|
||||
}
|
||||
|
||||
.mx_BasicMessageComposer_input {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
outline: none;
|
||||
overflow-x: hidden;
|
||||
|
||||
/* Force caret nodes to be selected in full so that they can be */
|
||||
/* navigated through in a single keypress */
|
||||
.caretNode {
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
&.mx_BasicMessageComposer_input_shouldShowPillAvatar {
|
||||
span.mx_UserPill,
|
||||
span.mx_RoomPill,
|
||||
span.mx_SpacePill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
user-select: all;
|
||||
position: relative;
|
||||
cursor: unset; /* We don't want indicate clickability */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
/* We don't want indicate clickability | To override the overriding of .markdown-body */
|
||||
background-color: $pill-bg-color !important;
|
||||
}
|
||||
|
||||
/* avatar psuedo element */
|
||||
&::before {
|
||||
display: inline-block;
|
||||
content: var(--avatar-letter);
|
||||
width: $font-16px;
|
||||
min-width: $font-16px; /* ensure the avatar is not compressed */
|
||||
height: $font-16px;
|
||||
margin-inline-end: 0.24rem;
|
||||
background: var(--avatar-background), $background;
|
||||
color: var(--avatar-color, $avatar-initial-color);
|
||||
background-repeat: no-repeat;
|
||||
background-size: $font-16px;
|
||||
border-radius: $font-16px;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
line-height: $font-16px;
|
||||
font-size: $font-10-4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_BasicMessageComposer_input_disabled {
|
||||
/* Ignore all user input to avoid accidentally triggering the composer */
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_BasicMessageComposer_AutoCompleteWrapper {
|
||||
position: relative;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
.mx_JoinRuleDialog {
|
||||
.mx_JoinRuleDialogButtons {
|
||||
display: flex;
|
||||
column-gap: 5px;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
/*
|
||||
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_E2EIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 9px;
|
||||
display: block;
|
||||
|
||||
svg {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_E2EIcon.mx_E2EIcon_inline {
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
/*
|
||||
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_E2EIconView {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_E2EIconView_warning {
|
||||
color: var(--cpd-color-icon-critical-primary);
|
||||
}
|
||||
|
||||
.mx_E2EIconView_verified {
|
||||
color: var(--cpd-color-icon-success-primary);
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
/*
|
||||
Copyright 2019-2024 New Vector Ltd.
|
||||
Copyright 2019 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_EditMessageComposer {
|
||||
--EditMessageComposer-padding-inline: 3px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%; /* disable overflow */
|
||||
width: auto;
|
||||
gap: 5px;
|
||||
padding: 3px var(--EditMessageComposer-padding-inline);
|
||||
|
||||
.mx_BasicMessageComposer_input {
|
||||
border-radius: 4px;
|
||||
border: solid 1px $primary-hairline-color;
|
||||
background-color: $background;
|
||||
max-height: 200px;
|
||||
padding: 3px 6px;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--cpd-color-border-interactive-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EditMessageComposer_buttons {
|
||||
display: flex;
|
||||
flex-flow: row wrap-reverse; /* display "Save" over "Cancel" */
|
||||
justify-content: flex-end;
|
||||
gap: 5px;
|
||||
margin-inline-start: auto;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
min-width: 100px; /* magic number to align the edge of the button with the input area */
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
/*
|
||||
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_EmojiButton {
|
||||
@mixin composerButton 50%, var(--cpd-color-icon-secondary), var(--cpd-color-bg-subtle-secondary);
|
||||
}
|
||||
|
||||
.mx_EmojiButton_highlight {
|
||||
@mixin composerButtonHighLight;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_wysiwyg {
|
||||
.mx_EmojiButton {
|
||||
@mixin composerButton 5px, $tertiary-content, $panels;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,646 @@
|
||||
/*
|
||||
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_RoomView_body[data-layout="bubble"] {
|
||||
.mx_RoomView_timeline,
|
||||
.mx_RoomView_statusArea,
|
||||
.mx_MessageComposer {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile[data-layout="bubble"],
|
||||
.mx_GenericEventListSummary[data-layout="bubble"] {
|
||||
--avatarSize: 32px;
|
||||
--gutterSize: 11px;
|
||||
--cornerRadius: 12px;
|
||||
--maxWidth: 70%;
|
||||
|
||||
/* For both event tile and event list summary */
|
||||
--EventTile_bubble-margin-inline-start: 49px;
|
||||
--EventTile_bubble-margin-inline-end: 60px;
|
||||
|
||||
margin-inline-start: var(--EventTile_bubble-margin-inline-start);
|
||||
margin-inline-end: var(--EventTile_bubble-margin-inline-end);
|
||||
}
|
||||
|
||||
.mx_EventTile[data-layout="bubble"] {
|
||||
--EventTile_bubble_line-margin-inline-start: -9px;
|
||||
--EventTile_bubble_line-margin-inline-end: -12px;
|
||||
--EventTile_bubble_gap-inline: 5px;
|
||||
|
||||
.mx_MessageTimestamp {
|
||||
width: unset; /* Cancel the default width */
|
||||
max-width: 80px;
|
||||
}
|
||||
|
||||
.mx_ThreadSummary {
|
||||
clear: both;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.mx_EventTile_content {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:not(.mx_EventTile_info) .mx_EventTile_avatar {
|
||||
line-height: 0;
|
||||
border: 4px solid $background;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
z-index: 9;
|
||||
img {
|
||||
box-shadow: 0 0 0 3px $background;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_EventTile_highlight {
|
||||
.mx_EventTile_avatar {
|
||||
border-color: $event-highlight-bg-color;
|
||||
}
|
||||
&::before {
|
||||
background-color: $event-highlight-bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.mx_EventTile_avatar {
|
||||
border-color: $eventbubble-bg-hover;
|
||||
}
|
||||
}
|
||||
|
||||
/* For replies */
|
||||
.mx_EventTile {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
bottom: -1px;
|
||||
left: calc(-1 * var(--EventTile_bubble-margin-inline-start));
|
||||
right: calc(-1 * var(--EventTile_bubble-margin-inline-end));
|
||||
z-index: -1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.mx_EventTile_selected {
|
||||
&::before {
|
||||
background: $eventbubble-bg-hover;
|
||||
}
|
||||
|
||||
.mx_EventTile_avatar {
|
||||
img {
|
||||
box-shadow: 0 0 0 3px $eventbubble-bg-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_DisambiguatedProfile,
|
||||
.mx_EventTile_line {
|
||||
--EventBubbleTile_line-max-width: 70%;
|
||||
|
||||
width: fit-content;
|
||||
max-width: var(--EventBubbleTile_line-max-width); /* Align message bubble and displayName */
|
||||
line-height: $font-18px; /* fixed line height to prevent emoji from being taller than text */
|
||||
}
|
||||
|
||||
/* other users profile on bubble layout */
|
||||
> .mx_DisambiguatedProfile {
|
||||
white-space: normal; /* display mxid */
|
||||
|
||||
.mx_DisambiguatedProfile_displayName {
|
||||
white-space: nowrap; /* truncate long display names */
|
||||
margin-inline-end: 5px;
|
||||
|
||||
/* For RTL displayName */
|
||||
unicode-bidi: embed;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.mx_DisambiguatedProfile_mxid {
|
||||
margin-inline-start: 0; /* Align mxid with truncated displayName
|
||||
inside mx_EventTile[data-layout="bubble"] */
|
||||
}
|
||||
}
|
||||
|
||||
/* inside mx_RoomView_MessageList, outside of mx_ReplyTile */
|
||||
/* (on the main panel and the chat panel with a maximized widget) */
|
||||
> .mx_DisambiguatedProfile,
|
||||
/* inside a thread, outside of mx_ReplyTile */
|
||||
.mx_EventTile_senderDetails > .mx_DisambiguatedProfile {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
left: 2px;
|
||||
font-size: $font-15px;
|
||||
}
|
||||
|
||||
.mx_MessageActionBar {
|
||||
top: -28px;
|
||||
z-index: 9; /* above the avatar */
|
||||
}
|
||||
|
||||
.mx_MediaBody {
|
||||
/* leave space for the timestamp */
|
||||
padding-right: 48px !important;
|
||||
}
|
||||
|
||||
.mx_MImageBody {
|
||||
.mx_MImageBody_thumbnail_container {
|
||||
justify-content: center;
|
||||
min-height: calc(1.8rem + var(--gutterSize) + var(--gutterSize));
|
||||
min-width: calc(1.8rem + var(--gutterSize) + var(--gutterSize));
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LegacyCallEvent {
|
||||
background-color: unset;
|
||||
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: $quinary-content;
|
||||
}
|
||||
|
||||
.mx_EventTile_footer {
|
||||
margin: var(--cpd-space-1-5x) 0;
|
||||
margin-inline: var(--EventTile_bubble_line-margin-inline-start) var(--EventTile_bubble_line-margin-inline-end);
|
||||
}
|
||||
|
||||
&[data-self="false"] {
|
||||
.mx_EventTile_line {
|
||||
border-bottom-right-radius: var(--cornerRadius);
|
||||
|
||||
.mx_MImageBody .mx_MImageBody_thumbnail_container,
|
||||
.mx_MImageBody::before,
|
||||
.mx_MVideoBody .mx_MVideoBody_container,
|
||||
.mx_MediaBody,
|
||||
.mx_MLocationBody_map,
|
||||
.mx_MBeaconBody {
|
||||
border-bottom-right-radius: var(--cornerRadius) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_avatar {
|
||||
left: -36px;
|
||||
}
|
||||
|
||||
.mx_MessageActionBar {
|
||||
inset-inline-start: calc(100% - var(--MessageActionBar-size-box));
|
||||
right: initial; /* Reset the default value */
|
||||
}
|
||||
|
||||
.mx_ThreadSummary {
|
||||
margin-inline-start: calc(-1 * var(--gutterSize));
|
||||
margin-inline-end: auto;
|
||||
}
|
||||
|
||||
.mx_ReactionsRow,
|
||||
.mx_EventTile_footer {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
--backgroundColor: $eventbubble-others-bg;
|
||||
}
|
||||
|
||||
&[data-self="true"] {
|
||||
.mx_EventTile_line {
|
||||
margin-inline-start: auto;
|
||||
border-bottom-left-radius: var(--cornerRadius);
|
||||
|
||||
.mx_MImageBody .mx_MImageBody_thumbnail_container,
|
||||
.mx_MImageBody::before,
|
||||
.mx_MVideoBody .mx_MVideoBody_container,
|
||||
.mx_MediaBody,
|
||||
.mx_MLocationBody_map,
|
||||
.mx_MBeaconBody {
|
||||
border-bottom-left-radius: var(--cornerRadius) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_sticker {
|
||||
/* align timestamp with those inside bubbles */
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
.mx_ThreadSummary {
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: calc(-1 * var(--gutterSize));
|
||||
}
|
||||
|
||||
.mx_DisambiguatedProfile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_ReplyTile .mx_DisambiguatedProfile {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mx_EventTile_footer {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.mx_ReactionsRow {
|
||||
justify-content: flex-end;
|
||||
|
||||
> :last-child {
|
||||
order: -1; /* Moving the "add reaction button" before the reactions */
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_avatar {
|
||||
top: -19px; /* height of the sender block */
|
||||
right: -38px;
|
||||
}
|
||||
|
||||
.mx_MediaBody {
|
||||
background: $eventbubble-self-bg;
|
||||
}
|
||||
|
||||
.mx_MessageActionBar {
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
|
||||
--backgroundColor: $eventbubble-self-bg;
|
||||
}
|
||||
|
||||
.mx_EventTile_line {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 5px var(--EventTile_bubble_gap-inline);
|
||||
margin-block: 0;
|
||||
margin-inline: var(--EventTile_bubble_line-margin-inline-start) var(--EventTile_bubble_line-margin-inline-end);
|
||||
border-top-left-radius: var(--cornerRadius);
|
||||
border-top-right-radius: var(--cornerRadius);
|
||||
|
||||
/* the selector here is quite weird because timestamps can appear linked & unlinked and in different places */
|
||||
/* in the DOM depending on the specific rendering context */
|
||||
> a, /* timestamp wrapper anchor */
|
||||
.mx_MessageActionBar + .mx_MessageTimestamp {
|
||||
position: absolute;
|
||||
padding: 4px 8px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 3; /* above media and location share maps */
|
||||
}
|
||||
|
||||
&.mx_EventTile_mediaLine {
|
||||
/* TODO: Use a common class name instead */
|
||||
.mx_MFileBody,
|
||||
.mx_MAudioBody {
|
||||
max-width: 100%; /* avoid overflow */
|
||||
}
|
||||
|
||||
.mx_MVoiceMessageBody {
|
||||
/* allow the event to be collapsed, this causes the waveform to get cropped */
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* we put the timestamps for media (other than stickers) atop the media */
|
||||
&.mx_EventTile_image {
|
||||
.mx_MessageTimestamp {
|
||||
border-radius: var(--MBody-border-radius);
|
||||
/* Hardcoded colours because it's the same on all themes */
|
||||
background-color: rgb(0, 0, 0, 0.6);
|
||||
color: #ffffff;
|
||||
padding: 0px 4px 0px 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_EventTile_sticker {
|
||||
> a, /* timestamp wrapper anchor */
|
||||
.mx_MessageActionBar + .mx_MessageTimestamp {
|
||||
/* position timestamps for stickers to the right of the un-bubbled sticker */
|
||||
right: unset;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.mx_MStickerBody_wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MImageBody {
|
||||
width: 100%;
|
||||
|
||||
.mx_MImageBody_thumbnail.mx_MImageBody_thumbnail--blurhash {
|
||||
position: unset;
|
||||
}
|
||||
}
|
||||
|
||||
/* noinspection CssReplaceWithShorthandSafely */
|
||||
.mx_MImageBody .mx_MImageBody_thumbnail_container,
|
||||
.mx_MVideoBody .mx_MVideoBody_container,
|
||||
.mx_MediaBody {
|
||||
border-radius: unset;
|
||||
border-top-left-radius: var(--cornerRadius);
|
||||
border-top-right-radius: var(--cornerRadius);
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon {
|
||||
flex-shrink: 0; /* keep it at full size */
|
||||
|
||||
/* Keep height equal to text for shield alignment, additional 2px because of 1px padding on text */
|
||||
height: calc($font-18px + 2px);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.mx_EventTile_noBubble) .mx_EventTile_line:not(.mx_EventTile_mediaLine) {
|
||||
/* make the top and bottom padding 1px smaller so that we can pad
|
||||
.mx_EventTile_content by 1px */
|
||||
/* to avoid anti-zalgo cutting off our larger than text emojis. */
|
||||
padding: calc(var(--gutterSize) - 1px);
|
||||
padding-right: 60px; /* space for the timestamp */
|
||||
background: var(--backgroundColor);
|
||||
|
||||
.mx_EventTile_content {
|
||||
padding: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_EventTile_continuation[data-self="false"] .mx_EventTile_line {
|
||||
border-top-left-radius: 0;
|
||||
|
||||
.mx_MImageBody .mx_MImageBody_thumbnail_container,
|
||||
.mx_MVideoBody .mx_MVideoBody_container,
|
||||
.mx_MImageBody::before,
|
||||
.mx_MediaBody,
|
||||
.mx_MLocationBody_map,
|
||||
.mx_MBeaconBody {
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
}
|
||||
&.mx_EventTile_lastInSection[data-self="false"] .mx_EventTile_line {
|
||||
border-bottom-left-radius: var(--cornerRadius);
|
||||
|
||||
.mx_MImageBody .mx_MImageBody_thumbnail_container,
|
||||
.mx_MVideoBody .mx_MVideoBody_container,
|
||||
.mx_MImageBody::before,
|
||||
.mx_MediaBody,
|
||||
.mx_MLocationBody_map,
|
||||
.mx_MBeaconBody {
|
||||
border-bottom-left-radius: var(--cornerRadius);
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_EventTile_continuation[data-self="true"] .mx_EventTile_line {
|
||||
border-top-right-radius: 0;
|
||||
|
||||
.mx_MImageBody .mx_MImageBody_thumbnail_container,
|
||||
.mx_MVideoBody .mx_MVideoBody_container,
|
||||
.mx_MImageBody::before,
|
||||
.mx_MediaBody,
|
||||
.mx_MLocationBody_map,
|
||||
.mx_MBeaconBody {
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
&.mx_EventTile_lastInSection[data-self="true"] .mx_EventTile_line {
|
||||
border-bottom-right-radius: var(--cornerRadius);
|
||||
|
||||
.mx_MImageBody .mx_MImageBody_thumbnail_container,
|
||||
.mx_MVideoBody .mx_MVideoBody_container,
|
||||
.mx_MImageBody::before,
|
||||
.mx_MediaBody,
|
||||
.mx_MLocationBody_map,
|
||||
.mx_MBeaconBody {
|
||||
border-bottom-right-radius: var(--cornerRadius);
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_EventTile_noSender {
|
||||
.mx_EventTile_avatar {
|
||||
top: -19px;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-has-reply="true"] {
|
||||
> .mx_EventTile_line {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mx_ReplyChain {
|
||||
.mx_EventTile_reply {
|
||||
max-width: 90%;
|
||||
padding: 0;
|
||||
> a, /* timestamp wrapper anchor */
|
||||
.mx_MessageActionBar + .mx_MessageTimestamp {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile {
|
||||
display: flex;
|
||||
gap: var(--gutterSize);
|
||||
.mx_EventTile_avatar {
|
||||
position: static;
|
||||
}
|
||||
.mx_DisambiguatedProfile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MPollBody {
|
||||
width: 550px; /* to prevent timestamp overlapping summary text */
|
||||
max-width: 100%; /* prevent overflowing a reply tile */
|
||||
|
||||
.mx_MPollBody_totalVotes {
|
||||
/* align summary text with corner timestamp */
|
||||
padding: 4px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_EventTile_bad {
|
||||
&:hover {
|
||||
&::before {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* Special layout scenario for "Unable To Decrypt (UTD)" events */
|
||||
.mx_EventTile_line {
|
||||
display: grid;
|
||||
grid-template:
|
||||
"reply reply" auto
|
||||
"shield body" auto
|
||||
/ auto 1fr;
|
||||
|
||||
.mx_UnknownBody,
|
||||
.mx_ReplyChain_wrapper,
|
||||
.mx_ViewSourceEvent {
|
||||
min-width: 0; /* Prevent a grid blowout */
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon {
|
||||
grid-area: shield;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.mx_UnknownBody,
|
||||
.mx_DecryptionFailureBody {
|
||||
grid-area: body;
|
||||
}
|
||||
|
||||
.mx_ReplyChain_wrapper {
|
||||
grid-area: reply;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_EventTile_info {
|
||||
/* "Unable To Decrypt" layout for hidden events */
|
||||
.mx_EventTile_line {
|
||||
gap: 0 9px; /* 9px: margin value of E2E icon */
|
||||
align-items: center;
|
||||
grid-template:
|
||||
"shield source" auto
|
||||
/ auto 1fr;
|
||||
|
||||
.mx_ViewSourceEvent {
|
||||
grid-area: source;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MTextBody {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mx_LegacyCallEvent_wrapper,
|
||||
.mx_CallEvent_wrapper {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile.mx_EventTile_noBubble[data-layout="bubble"] {
|
||||
--backgroundColor: transparent;
|
||||
|
||||
.mx_EventTile_line.mx_EventTile_emote {
|
||||
padding-right: 60px; /* align with bubbles text */
|
||||
font-style: italic;
|
||||
|
||||
> a {
|
||||
/* timestamp anchor wrapper */
|
||||
align-self: center;
|
||||
bottom: unset;
|
||||
top: unset;
|
||||
font-style: normal; /* undo italic above */
|
||||
}
|
||||
|
||||
.mx_MEmoteBody {
|
||||
padding: 4px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"],
|
||||
.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"] {
|
||||
.mx_EventTile_line > a {
|
||||
/* hide this timestamp as the tile will render its own */
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"],
|
||||
.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"],
|
||||
.mx_EventTile.mx_EventTile_info[data-layout="bubble"] {
|
||||
padding: 5px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
.mx_EventTile_line,
|
||||
.mx_EventTile_info {
|
||||
min-width: 100%;
|
||||
/* Preserve alignment with left edge of text in bubbles */
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile.mx_EventTile_bubbleContainer[data-layout="bubble"],
|
||||
.mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout="bubble"],
|
||||
.mx_EventTile.mx_EventTile_info[data-layout="bubble"],
|
||||
.mx_GenericEventListSummary[data-layout="bubble"][data-expanded="false"] {
|
||||
--backgroundColor: transparent;
|
||||
--gutterSize: 0;
|
||||
|
||||
.mx_EventTile_avatar {
|
||||
position: static;
|
||||
order: -1;
|
||||
margin-inline-end: var(--EventTile_bubble_gap-inline); /* Same spacing between E2E icon and a hidden event */
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.mx_EventTile_e2eIcon {
|
||||
margin-inline-start: 0; /* mx_EventTile_avatar has margin-inline-end, so margin is not needed here */
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.mx_EventTile_line {
|
||||
> a, /* timestamp wrapper anchor */
|
||||
.mx_MessageActionBar + .mx_MessageTimestamp {
|
||||
right: auto;
|
||||
left: -77px;
|
||||
bottom: unset;
|
||||
align-self: center;
|
||||
|
||||
.mx_MessageTimestamp,
|
||||
&.mx_MessageTimestamp {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_GenericEventListSummary[data-layout="bubble"] {
|
||||
.mx_EventTile.mx_EventTile_info .mx_EventTile_line {
|
||||
/* Avoid overflow of event info by cancelling width settings */
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* increase margin between ELS and the next Event to not have our user avatar overlap the expand/collapse button */
|
||||
&[data-expanded="false"] + .mx_EventTile[data-layout="bubble"][data-self="true"] {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
&[data-expanded="true"] .mx_EventTile_info {
|
||||
padding: 2px 0;
|
||||
margin-right: 0;
|
||||
|
||||
.mx_MessageActionBar {
|
||||
/* Reset .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar */
|
||||
inset-inline-start: initial;
|
||||
inset-inline-end: 48px; /* align with that of right-column bubbles */
|
||||
}
|
||||
|
||||
.mx_ReadReceiptGroup {
|
||||
/* match alignment to RRs of chat bubbles */
|
||||
inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + 60px);
|
||||
}
|
||||
|
||||
&::before {
|
||||
inset-inline-end: 0; /* match alignment of the hover background to that of chat bubbles */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_tileError[data-layout="bubble"] .mx_EventTile_line {
|
||||
flex-direction: column; /* restore the centering */
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
/*
|
||||
* 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_EventPreview {
|
||||
font: var(--cpd-font-body-sm-regular);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
.mx_EventPreview_prefix {
|
||||
font: var(--cpd-font-body-sm-semibold);
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,15 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2021 Robin Townsend <robin@robin.town>
|
||||
|
||||
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_EventTileBubble.mx_HistoryTile {
|
||||
margin: var(--EventTileBubble_margin-block) auto;
|
||||
|
||||
svg {
|
||||
color: $header-panel-text-primary-color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
:root {
|
||||
--irc-line-height: $font-18px;
|
||||
}
|
||||
|
||||
.mx_IRCLayout {
|
||||
--name-width: 80px; /* cf. ircDisplayNameWidth on Settings.tsx */
|
||||
--icon-width: 14px;
|
||||
--line-height: var(--irc-line-height);
|
||||
--right-padding: 5px;
|
||||
|
||||
line-height: var(--line-height) !important;
|
||||
|
||||
blockquote {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mx_NewRoomIntro {
|
||||
> h2 {
|
||||
line-height: initial; /* Cancel var(--irc-line-height) */
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ReplyChain {
|
||||
.mx_DisambiguatedProfile {
|
||||
width: unset;
|
||||
background: transparent;
|
||||
order: unset;
|
||||
flex-shrink: unset; /* Unset flex-shrink to prevent long display name blowout */
|
||||
}
|
||||
|
||||
.mx_EventTile_emote {
|
||||
> .mx_EventTile_avatar {
|
||||
margin-left: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MessageTimestamp {
|
||||
width: initial;
|
||||
}
|
||||
|
||||
/**
|
||||
* adding the icon back in the document flow
|
||||
* if it's not present, there's no unwanted wasted space
|
||||
*/
|
||||
.mx_EventTile_e2eIcon {
|
||||
position: relative;
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ProfileResizer {
|
||||
--resizer-width: 15px;
|
||||
--resizer-a11y: 3px; /* Magic number, to be replaced with something more proper from the perspective of a11y */
|
||||
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: var(--resizer-width);
|
||||
cursor: col-resize;
|
||||
z-index: 100;
|
||||
|
||||
/* Add width of every element rendered before the resizer (including padding for the avatar and the display
|
||||
name), subtracting the resizer width itself to prevent the resizer from overlapping the text and moving
|
||||
the resizer a bit to the left to make it easier to avoid selecting the resizer when highlighting text.
|
||||
Please note that MessageTimestamp does not have inline padding. */
|
||||
inset-inline-start: calc(
|
||||
var(--RoomView_MessageList-padding) + var(--MessageTimestamp-width) + var(--icon-width) +
|
||||
var(--right-padding) + var(--name-width) + var(--right-padding) - var(--resizer-width) -
|
||||
var(--resizer-a11y)
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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_InvitedIconView {
|
||||
color: var(--cpd-color-icon-tertiary);
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
/*
|
||||
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_JumpToBottomButton {
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
/* 12 because height is 50 but button is only 38 = 12+(50-38) = 24 */
|
||||
bottom: 12px;
|
||||
right: 24px;
|
||||
width: 38px;
|
||||
/* give it a fixed height so the badge doesn't make */
|
||||
/* it taller and pop upwards when visible */
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mx_JumpToBottomButton_badge {
|
||||
position: relative;
|
||||
top: -12px;
|
||||
border-radius: 16px;
|
||||
font-weight: bold;
|
||||
font-size: $font-12px;
|
||||
line-height: $font-14px;
|
||||
text-align: center;
|
||||
/* to be able to get it centered */
|
||||
/* with text-align in parent */
|
||||
display: inline-block;
|
||||
padding: 0 4px;
|
||||
color: var(--cpd-color-text-on-solid-primary);
|
||||
background-color: var(--cpd-color-icon-secondary);
|
||||
}
|
||||
|
||||
.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge {
|
||||
background-color: var(--cpd-color-icon-critical-primary);
|
||||
}
|
||||
|
||||
.mx_JumpToBottomButton_scrollDown {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
background: $background;
|
||||
border: 1.3px solid var(--cpd-color-icon-tertiary);
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
box-sizing: border-box;
|
||||
padding: 7px 8px 7px 6px;
|
||||
color: var(--cpd-color-icon-tertiary);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2020 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_LegacyRoomList {
|
||||
padding-right: 7px; /* width of the scrollbar, to line things up */
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_LegacyRoomListHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_LegacyRoomListHeader_contextLessTitle,
|
||||
.mx_LegacyRoomListHeader_contextMenuButton {
|
||||
font: var(--cpd-font-heading-sm-semibold);
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
padding: 1px 24px 1px 4px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-left: 8px;
|
||||
margin-right: auto;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.mx_LegacyRoomListHeader_contextMenuButton {
|
||||
border-radius: 6px;
|
||||
|
||||
&:hover {
|
||||
background-color: $quinary-content;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 3px;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
color: $tertiary-content;
|
||||
}
|
||||
|
||||
&[aria-expanded="true"] {
|
||||
background-color: $quinary-content;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LegacyRoomListHeader_plusButton {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
margin-left: 8px;
|
||||
margin-right: 12px;
|
||||
background-color: $panel-actions;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
color: $secondary-content;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $tertiary-content;
|
||||
|
||||
svg {
|
||||
color: $background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
/*
|
||||
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_LinkPreviewGroup {
|
||||
.mx_LinkPreviewGroup_hide {
|
||||
cursor: pointer;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
||||
svg {
|
||||
flex: 0 0 40px;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .mx_LinkPreviewGroup_hide svg,
|
||||
.mx_LinkPreviewGroup_hide:focus-visible:focus svg {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
> .mx_AccessibleButton {
|
||||
color: $accent;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
/*
|
||||
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_LinkPreviewWidget {
|
||||
margin: $spacing-16 0 $spacing-16 auto;
|
||||
display: flex;
|
||||
column-gap: $spacing-4;
|
||||
border-inline-start: 2px solid $preview-widget-bar-color;
|
||||
border-radius: 2px;
|
||||
color: $info-plinth-fg-color;
|
||||
|
||||
.mx_MatrixChat_useCompactLayout & {
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
/* Exclude mx_LinkPreviewGroup_hide from wrapping */
|
||||
.mx_LinkPreviewWidget_wrapImageCaption {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: $spacing-8;
|
||||
flex: 1;
|
||||
|
||||
.mx_LinkPreviewWidget_image,
|
||||
.mx_LinkPreviewWidget_caption {
|
||||
margin-inline-start: $spacing-16;
|
||||
min-width: 0; /* Prevent blowout */
|
||||
}
|
||||
|
||||
.mx_LinkPreviewWidget_image {
|
||||
flex: 0 0 100px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_LinkPreviewWidget_caption {
|
||||
flex: 1;
|
||||
overflow: hidden; /* cause it to wrap rather than clip */
|
||||
}
|
||||
|
||||
.mx_LinkPreviewWidget_title,
|
||||
.mx_LinkPreviewWidget_description {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.mx_LinkPreviewWidget_title {
|
||||
font-weight: bold;
|
||||
-webkit-line-clamp: 2;
|
||||
|
||||
.mx_LinkPreviewWidget_siteName {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LinkPreviewWidget_description {
|
||||
margin-top: $spacing-8;
|
||||
word-wrap: break-word;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_LiveContentSummary {
|
||||
color: $secondary-content;
|
||||
|
||||
.mx_LiveContentSummary_text {
|
||||
svg {
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
color: $secondary-content;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
&.mx_LiveContentSummary_text_active {
|
||||
color: $accent;
|
||||
|
||||
svg {
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LiveContentSummary_participants svg {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: $secondary-content;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
/*
|
||||
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_MemberListHeaderView {
|
||||
border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
|
||||
max-height: 112px;
|
||||
|
||||
.mx_MemberListHeaderView_container {
|
||||
margin-top: var(--cpd-space-6x);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx_MemberListHeaderView_invite_small {
|
||||
margin-left: var(--cpd-space-3x);
|
||||
margin-right: var(--cpd-space-4x);
|
||||
}
|
||||
|
||||
.mx_MemberListHeaderView_invite_large {
|
||||
width: 288px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.mx_MemberListHeaderView_label {
|
||||
padding: var(--cpd-space-6x) 0 var(--cpd-space-2x) var(--cpd-space-4x);
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
color: var(--cpd-color-text-secondary);
|
||||
font: var(--cpd-font-body-sm-semibold);
|
||||
}
|
||||
|
||||
.mx_MemberListHeaderView_search {
|
||||
width: 240px;
|
||||
flex-grow: 1;
|
||||
margin-left: var(--cpd-space-4x);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
/*
|
||||
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_MemberListView {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
|
||||
.mx_MemberListView_container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mx_MemberListView_separator {
|
||||
margin: 0;
|
||||
border: none;
|
||||
border-top: 2px solid var(--cpd-color-bg-subtle-primary);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
/*
|
||||
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_MemberTileView {
|
||||
display: flex;
|
||||
padding: var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-4x);
|
||||
box-sizing: border-box;
|
||||
height: 56px;
|
||||
border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-gray-300);
|
||||
|
||||
.mx_MemberTileView_left,
|
||||
.mx_MemberTileView_right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--cpd-space-2x);
|
||||
}
|
||||
|
||||
.mx_MemberTileView_left {
|
||||
flex-basis: 209px;
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mx_MemberTileView_name {
|
||||
font: var(--cpd-font-body-md-medium);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mx_MemberTileView_userLabel {
|
||||
font: var(--cpd-font-body-sm-regular);
|
||||
color: var(--cpd-color-text-secondary);
|
||||
margin-left: var(--cpd-space-4x);
|
||||
}
|
||||
|
||||
.mx_MemberTileView_avatar {
|
||||
position: relative;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,270 @@
|
||||
/*
|
||||
Copyright 2018-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_MessageComposer_wrapper {
|
||||
vertical-align: middle;
|
||||
margin: auto;
|
||||
border-top: 1px solid $primary-hairline-color;
|
||||
position: relative;
|
||||
padding-left: 42px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_replaced_wrapper {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_replaced_valign {
|
||||
height: 60px;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_roomReplaced_icon {
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
margin-top: 5px;
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_roomReplaced_header {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer {
|
||||
.mx_MessageComposer_avatar {
|
||||
position: absolute;
|
||||
left: 26px;
|
||||
|
||||
.mx_BaseAvatar {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MessageComposer_e2eIconWrapper {
|
||||
height: 12px; /* Match the height of the E2E icon for alignment */
|
||||
width: 12px;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 22px;
|
||||
margin-right: 0; /* Counteract the E2EIcon class */
|
||||
margin-left: 3px; /* Counteract the E2EIcon class */
|
||||
|
||||
.mx_MessageComposer_e2eIcon {
|
||||
margin: 0;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MessageComposer_noperm_error {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
font-style: italic;
|
||||
color: $info-plinth-fg-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_input {
|
||||
flex: 1;
|
||||
vertical-align: middle;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 60px;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
font: var(--cpd-font-body-md-regular);
|
||||
margin-right: 6px;
|
||||
|
||||
pre {
|
||||
background-color: $rte-code-bg-color;
|
||||
border-radius: 3px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
border: 0px;
|
||||
resize: none;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
color: $primary-content;
|
||||
background-color: $background;
|
||||
font: var(--cpd-font-body-md-regular);
|
||||
max-height: 120px;
|
||||
overflow: auto;
|
||||
|
||||
/* hack for FF as vertical alignment of custom placeholder text is broken */
|
||||
&::-moz-placeholder {
|
||||
line-height: 100%;
|
||||
color: $accent;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MessageComposer_button_highlight {
|
||||
@mixin composerButtonHighLight;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_button {
|
||||
@mixin composerButton 50%, var(--cpd-color-icon-primary), var(--cpd-color-bg-subtle-primary);
|
||||
padding: 3px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&.mx_MessageComposer_closeButtonMenu {
|
||||
&::after {
|
||||
background: var(--cpd-color-bg-subtle-primary);
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: var(--cpd-color-icon-primary);
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
.mx_MessageComposer_wysiwyg {
|
||||
.mx_MessageComposer_wrapper {
|
||||
padding-left: 16px;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_row {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_actions {
|
||||
/* Height of the composer editor */
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.mx_MediaBody {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_button {
|
||||
@mixin composerButton 5px, $tertiary-content, $panels;
|
||||
|
||||
&.mx_MessageComposer_closeButtonMenu {
|
||||
&::after {
|
||||
background: $accent-300;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: $accent;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MessageComposer_buttonMenu {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 1px;
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MessageComposer_sendMessage {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding: var(--cpd-space-2x);
|
||||
border-radius: 100%;
|
||||
background-color: var(--cpd-color-icon-accent-tertiary);
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
|
||||
svg {
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
|
||||
color: var(--cpd-color-icon-on-solid-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MatrixChat_useCompactLayout {
|
||||
.mx_MessageComposer_input {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_noperm_error {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Unstable compact mode
|
||||
*/
|
||||
|
||||
.mx_MessageComposer.mx_MessageComposer--compact {
|
||||
margin-right: 0;
|
||||
|
||||
.mx_MessageComposer_wrapper {
|
||||
padding: 0 0 0 25px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_e2eIconWrapper {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:not(.mx_MessageComposer_e2eStatus) {
|
||||
.mx_MessageComposer_wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MessageComposer_button:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_e2eIcon {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2019 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_MessageComposerFormatBar {
|
||||
display: none;
|
||||
width: calc(32px * 6);
|
||||
height: 32px;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
background-color: $background;
|
||||
border: var(--cpd-border-width-1) solid var(--cpd-color-border-disabled);
|
||||
user-select: none;
|
||||
/* equal to z-index of mx_ReplyPreview and mx_RoomView_statusArea (1000) */
|
||||
/* but as it appears after them in the DOM, will appear on top. */
|
||||
z-index: 1000;
|
||||
|
||||
&.mx_MessageComposerFormatBar_shown {
|
||||
display: block;
|
||||
}
|
||||
|
||||
> * {
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.mx_MessageComposerFormatBar_button {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
box-sizing: border-box;
|
||||
vertical-align: middle;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
|
||||
svg {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
box-sizing: border-box;
|
||||
padding: var(--cpd-space-1x);
|
||||
color: var(--cpd-color-icon-secondary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--cpd-color-bg-subtle-secondary);
|
||||
border-radius: 6px;
|
||||
z-index: 1;
|
||||
|
||||
svg {
|
||||
color: var(--cpd-color-icon-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MessageComposerFormatBar_buttonTooltip {
|
||||
white-space: nowrap;
|
||||
font-size: $font-13px;
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
min-width: 54px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
/*
|
||||
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_NewRoomIntro {
|
||||
margin: 40px 0 48px 64px;
|
||||
|
||||
.mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover) {
|
||||
.mx_MiniAvatarUploader_indicator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_NewRoomIntro_buttons {
|
||||
margin-top: 28px;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
gap: 14px 12px;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
line-height: $font-24px;
|
||||
display: inline-block;
|
||||
|
||||
svg {
|
||||
display: inline-block;
|
||||
color: $button-fg-color;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> h2 {
|
||||
margin-top: 24px;
|
||||
font-size: $font-24px;
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
}
|
||||
|
||||
> p {
|
||||
margin: 0;
|
||||
font-size: $font-15px;
|
||||
color: $secondary-content;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
/*
|
||||
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_NotificationBadge {
|
||||
&:not(.mx_NotificationBadge_visible) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Badges are structured a bit weirdly to work around issues with non-monospace */
|
||||
/* font styles. The badge pill is actually a background div and the count floats */
|
||||
/* within that. For example: */
|
||||
/* ( 99+ ) <-- Rounded pill is a _bg class. */
|
||||
/* ^- The count is an element floating within that. */
|
||||
|
||||
&.mx_NotificationBadge_visible {
|
||||
background-color: $roomtile-default-badge-bg-color;
|
||||
/* For enhanced visibility under contrast control */
|
||||
outline: 1px solid transparent;
|
||||
|
||||
/* Create a flexbox to order the count a bit easier */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
/* These are the 3 background types */
|
||||
|
||||
&.mx_NotificationBadge_dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
background-color: var(--cpd-color-icon-primary);
|
||||
|
||||
.mx_NotificationBadge_count {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Redundant sounding name, but a notification badge that indicates there is a regular,
|
||||
* non-highlight notification
|
||||
* The green colour only applies for notification dot: badges indicating the same notification
|
||||
* level are the standard grey.
|
||||
*/
|
||||
&.mx_NotificationBadge_level_notification {
|
||||
background-color: var(--cpd-color-icon-success-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Badges for highlight notifications. Style for notification level
|
||||
* badges is in _EventTile.scss because it applies only to notification
|
||||
* dots, not badges.
|
||||
*/
|
||||
&.mx_NotificationBadge_level_highlight {
|
||||
background-color: var(--cpd-color-icon-critical-primary);
|
||||
}
|
||||
|
||||
& > svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&.mx_NotificationBadge_2char {
|
||||
width: $font-16px;
|
||||
height: $font-16px;
|
||||
border-radius: $font-16px;
|
||||
}
|
||||
|
||||
&.mx_NotificationBadge_3char {
|
||||
width: $font-26px;
|
||||
height: $font-16px;
|
||||
border-radius: $font-16px;
|
||||
}
|
||||
|
||||
/* The following is the floating badge */
|
||||
|
||||
.mx_NotificationBadge_count {
|
||||
font-size: $font-10px;
|
||||
line-height: $font-14px;
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
color: var(--cpd-color-text-on-solid-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
/*
|
||||
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_OverflowTileView {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $primary-content;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_OverflowTileView_text {
|
||||
flex: 1 1 0;
|
||||
overflow: hidden;
|
||||
font: var(--cpd-font-body-md-regular);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.mx_OverflowTileView:hover {
|
||||
padding-right: 30px;
|
||||
position: relative; /* to keep the chevron aligned */
|
||||
|
||||
.mx_OverflowTileView_chevron {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_OverflowTileView_chevron {
|
||||
position: absolute;
|
||||
top: calc(50% - 12px); /* center */
|
||||
right: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: $header-panel-text-primary-color;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_OverflowTileView_icon {
|
||||
padding-left: 3px;
|
||||
padding-right: 12px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
/*
|
||||
Copyright 2024 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_PinnedEventTile {
|
||||
display: flex;
|
||||
gap: var(--cpd-space-4x);
|
||||
align-items: flex-start;
|
||||
|
||||
.mx_PinnedEventTile_wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--cpd-space-1x);
|
||||
/* Remove avatar width and space between the avatar and the wrapper */
|
||||
/* We need it to make the location fit */
|
||||
width: calc(100% - var(--cpd-space-4x) - 32px);
|
||||
/* Prevent a long sender name to overflow the tile */
|
||||
overflow: hidden;
|
||||
|
||||
.mx_PinnedEventTile_top {
|
||||
display: flex;
|
||||
gap: var(--cpd-space-1x);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.mx_PinnedEventTile_sender {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
font: var(--cpd-font-body-md-semibold);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_PinnedEventTile_thread {
|
||||
display: flex;
|
||||
gap: var(--cpd-space-2x);
|
||||
font: var(--cpd-font-body-sm-regular);
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
fill: var(--cpd-color-icon-tertiary);
|
||||
}
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
color: var(--cpd-color-text-secondary);
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
/*
|
||||
* 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_PinnedMessageBanner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--cpd-space-4x);
|
||||
/* 64px = 63px + 1px from the bottom border */
|
||||
height: 63px;
|
||||
padding: 0 var(--cpd-space-4x);
|
||||
|
||||
background-color: var(--cpd-color-bg-canvas-default);
|
||||
border-bottom: 1px solid var(--cpd-color-gray-400);
|
||||
|
||||
/* From figma */
|
||||
box-shadow: 0 var(--cpd-space-2x) var(--cpd-space-6x) calc(var(--cpd-space-2x) * -1) rgb(27, 29, 34, 0.1);
|
||||
|
||||
.mx_PinnedMessageBanner_main {
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
border: none;
|
||||
text-align: start;
|
||||
cursor: pointer;
|
||||
|
||||
height: 100%;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_PinnedMessageBanner_content {
|
||||
display: grid;
|
||||
grid-template:
|
||||
"indicators pinIcon title" auto
|
||||
"indicators pinIcon message" auto;
|
||||
column-gap: var(--cpd-space-2x);
|
||||
}
|
||||
|
||||
.mx_PinnedMessageBanner_Indicators {
|
||||
grid-area: indicators;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--cpd-space-0-5x);
|
||||
height: 100%;
|
||||
|
||||
.mx_PinnedMessageBanner_Indicator {
|
||||
width: var(--cpd-space-0-5x);
|
||||
background-color: var(--cpd-color-gray-600);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mx_PinnedMessageBanner_Indicator--active {
|
||||
background-color: var(--cpd-color-icon-accent-primary);
|
||||
}
|
||||
|
||||
.mx_PinnedMessageBanner_Indicator--hidden {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_PinnedMessageBanner_PinIcon {
|
||||
grid-area: pinIcon;
|
||||
align-self: center;
|
||||
fill: var(--cpd-color-icon-secondary-alpha);
|
||||
}
|
||||
|
||||
.mx_PinnedMessageBanner_title {
|
||||
grid-area: title;
|
||||
font: var(--cpd-font-body-sm-regular);
|
||||
color: var(--cpd-color-text-action-accent);
|
||||
line-height: 20px;
|
||||
|
||||
.mx_PinnedMessageBanner_title_counter {
|
||||
font: var(--cpd-font-body-sm-semibold);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_PinnedMessageBanner_message {
|
||||
grid-area: message;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.mx_PinnedMessageBanner_redactedMessage {
|
||||
grid-area: message;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_PinnedMessageBanner_actions {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_PinnedMessageBanner[data-single-message="true"] {
|
||||
.mx_PinnedMessageBanner_content {
|
||||
grid-template: "indicators pinIcon message" auto;
|
||||
|
||||
.mx_PinnedMessageBanner_message {
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
/*
|
||||
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_PresenceIconView {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 24px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--cpd-color-bg-canvas-default);
|
||||
border-radius: 100%;
|
||||
|
||||
.mx_PresenceIconView_online {
|
||||
color: var(--cpd-color-icon-accent-primary);
|
||||
}
|
||||
|
||||
.mx_PresenceIconView_offline,
|
||||
.mx_PresenceIconView_dnd {
|
||||
color: var(--cpd-color-icon-tertiary);
|
||||
}
|
||||
|
||||
.mx_PresenceIconView_unavailable {
|
||||
color: var(--cpd-color-icon-quaternary);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
/*
|
||||
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_PresenceLabel {
|
||||
font-size: $font-11px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.mx_PresenceLabel_online {
|
||||
color: var(--cpd-color-text-success-primary);
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
/*
|
||||
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_ReadReceiptGroup {
|
||||
--ReadReceiptGroup_EventBubbleTile-spacing-end: 78px;
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
user-select: none;
|
||||
z-index: 1;
|
||||
|
||||
.mx_ReadReceiptGroup_button {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
height: 16px;
|
||||
padding: 4px;
|
||||
border-radius: 6px;
|
||||
|
||||
&.mx_AccessibleButton {
|
||||
&:hover {
|
||||
background: $event-selected-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ReadReceiptGroup_remainder {
|
||||
color: $secondary-content;
|
||||
font-size: $font-11px;
|
||||
line-height: $font-16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.mx_ReadReceiptGroup_container {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 100%;
|
||||
|
||||
.mx_BaseAvatar {
|
||||
/* Compound uses a border on default avatars but no border on actual images, we want a border in all cases */
|
||||
box-sizing: content-box;
|
||||
border: 1px solid $background !important;
|
||||
/* Reset the line height as we are no longer box-sizing border-box. 14px because avatar is set at 14px in component */
|
||||
line-height: 14px;
|
||||
position: absolute;
|
||||
will-change: left, top;
|
||||
transition:
|
||||
left var(--transition-short) ease-out,
|
||||
top var(--transition-standard) ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ReadReceiptGroup_popup {
|
||||
max-height: 300px;
|
||||
width: 220px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
|
||||
right: 0;
|
||||
|
||||
&.mx_ContextualMenu_top {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
&.mx_ContextualMenu_bottom {
|
||||
bottom: 8px;
|
||||
}
|
||||
|
||||
.mx_ReadReceiptGroup_title {
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
margin: 16px 16px 8px;
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
/* shouldn’t be actually focusable */
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.mx_AutoHideScrollbar {
|
||||
.mx_ReadReceiptGroup_person {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 4px;
|
||||
margin: 0 12px;
|
||||
border-radius: 8px;
|
||||
|
||||
&:hover {
|
||||
background: $menu-selected-color;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mx_BaseAvatar {
|
||||
margin: 6px 8px;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
flex-shrink: 0; /* Long names should not shrink the picture */
|
||||
}
|
||||
|
||||
.mx_ReadReceiptGroup_name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
overflow: hidden;
|
||||
|
||||
p {
|
||||
margin: 2px 0;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mx_ReadReceiptGroup_secondary {
|
||||
color: $secondary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ReadReceiptGroup_person--tooltip {
|
||||
overflow-y: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2018 Vector Creations Ltd
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_ReplyPreview {
|
||||
border: 1px solid $primary-hairline-color;
|
||||
border-bottom: none;
|
||||
background: $background;
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
|
||||
.mx_ReplyPreview_section {
|
||||
border-bottom: 1px solid $primary-hairline-color;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
row-gap: $spacing-8;
|
||||
padding: $spacing-8 $spacing-8 0 0;
|
||||
|
||||
.mx_ReplyPreview_header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
column-gap: 8px;
|
||||
|
||||
color: $primary-content;
|
||||
font-weight: 400;
|
||||
opacity: 0.4;
|
||||
|
||||
.mx_ReplyPreview_header_cancel svg {
|
||||
color: $primary-content;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomView_body {
|
||||
.mx_ReplyPreview {
|
||||
/* Add box-shadow to the reply preview on the main (left) panel only. */
|
||||
/* It is not added to the preview on the (right) panel for threads and a chat with a maximized widget. */
|
||||
box-shadow: 0px -16px 32px $composer-shadow-color;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2020 Tulir Asokan <tulir@maunium.net>
|
||||
|
||||
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_ReplyTile {
|
||||
position: relative;
|
||||
padding: 2px 0;
|
||||
font: var(--cpd-font-body-md-regular);
|
||||
|
||||
> a {
|
||||
display: grid;
|
||||
grid-template:
|
||||
"sender" auto
|
||||
"message" auto
|
||||
/ 100%;
|
||||
text-decoration: none;
|
||||
color: $secondary-content;
|
||||
transition: color ease 0.15s;
|
||||
gap: 2px;
|
||||
max-width: 100%;
|
||||
|
||||
// avoid overflow with wide content
|
||||
|
||||
&:hover {
|
||||
color: $primary-content;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RedactedBody {
|
||||
line-height: $font-18px;
|
||||
}
|
||||
|
||||
.mx_RedactedBody,
|
||||
.mx_HiddenBody {
|
||||
padding: 4px 0 2px 20px;
|
||||
|
||||
&::before {
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
/* We do reply size limiting with CSS to avoid duplicating the TextualBody component. */
|
||||
.mx_EventTile_content {
|
||||
grid-area: message;
|
||||
$reply-lines: 2;
|
||||
$line-height: $font-18px;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: $reply-lines;
|
||||
|
||||
.mx_EventTile_body.mx_EventTile_bigEmoji {
|
||||
line-height: $font-22px !important; /* Same as var(--EventTile_group_line-line-height) */
|
||||
font-size: $font-14px !important; /* Override the big emoji override */
|
||||
}
|
||||
|
||||
// in order to keep the message on two lines, we need to make the body inline
|
||||
.mx_EventTile_body {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
// Hide line numbers and edited indicator
|
||||
.mx_EventTile_lineNumbers,
|
||||
.mx_EventTile_edited {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hack to cut content in <pre> tags too */
|
||||
.mx_EventTile_pre_container > pre {
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: $reply-lines;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.markdown-body blockquote,
|
||||
.markdown-body dl,
|
||||
.markdown-body ol,
|
||||
.markdown-body p,
|
||||
.markdown-body pre,
|
||||
.markdown-body table,
|
||||
.markdown-body ul {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_ReplyTile_info {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&.mx_ReplyTile_inline > a {
|
||||
/* Render replies to emotes inline with the sender avatar */
|
||||
grid-template:
|
||||
"sender message" auto
|
||||
/ max-content auto;
|
||||
gap: 4px; /* increase spacing */
|
||||
}
|
||||
|
||||
.mx_ReplyTile_sender {
|
||||
grid-area: sender;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
.mx_DisambiguatedProfile {
|
||||
font: var(--cpd-font-body-md-regular);
|
||||
|
||||
display: inline-block; /* anti-zalgo, with overflow hidden */
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
/* truncate long display names */
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mx_BaseAvatar {
|
||||
/* Prevent crushing by the flexbox */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
/*
|
||||
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_RoomBreadcrumbs {
|
||||
width: 100%;
|
||||
|
||||
/* Create a flexbox for the crumbs */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.mx_RoomBreadcrumbs_crumb {
|
||||
margin-right: 8px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
/* These classes come from the CSSTransition component. There's many more classes we */
|
||||
/* could care about, but this is all we worried about for now. The animation works by */
|
||||
/* first triggering the enter state with the newest breadcrumb off screen (-40px) then */
|
||||
/* sliding it into view. */
|
||||
&.mx_RoomBreadcrumbs-enter {
|
||||
transform: translateX(-40px); /* 32px for the avatar, 8px for the margin */
|
||||
}
|
||||
&.mx_RoomBreadcrumbs-enter-active {
|
||||
transform: translateX(0);
|
||||
|
||||
/* Timing function is as-requested by design. */
|
||||
/* NOTE: The transition time MUST match the value passed to CSSTransition! */
|
||||
transition: transform 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
|
||||
}
|
||||
|
||||
.mx_RoomBreadcrumbs_placeholder {
|
||||
font: var(--cpd-font-body-md-semibold);
|
||||
line-height: 32px; /* specifically to match the height this is not scaled */
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
/*
|
||||
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_RoomCallBanner {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
box-sizing: border-box;
|
||||
padding: $spacing-12 $spacing-16;
|
||||
|
||||
color: $primary-content;
|
||||
background-color: $system;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_RoomCallBanner_text {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_RoomCallBanner_label {
|
||||
color: $primary-content;
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
padding-right: $spacing-8;
|
||||
|
||||
svg {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: $secondary-content;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
/*
|
||||
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_RoomHeader {
|
||||
height: 64px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 var(--cpd-space-3x) 0 calc(var(--cpd-space-3x) + var(--cpd-space-1-5x));
|
||||
border-bottom: 1px solid $separator;
|
||||
background-color: $background;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
button:has(svg.mx_RoomHeader_toggled) {
|
||||
/* For enhanced visibility under contrast control */
|
||||
outline: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomHeader:hover {
|
||||
background-color: $header-panel-bg-hover;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_infoWrapper {
|
||||
/* unset button styles */
|
||||
color: inherit;
|
||||
background: unset;
|
||||
border: unset;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
cursor: pointer;
|
||||
gap: var(--cpd-space-3x);
|
||||
text-align: left;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_info {
|
||||
/* We want the spacing to be 64px, 13x = 52px but we have a flex gap of
|
||||
12px set on the flex container, which sums up to 64 */
|
||||
padding-right: var(--cpd-space-13x);
|
||||
}
|
||||
|
||||
.mx_RoomHeader_truncated {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_heading {
|
||||
display: flex;
|
||||
gap: var(--cpd-space-1x);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_icon {
|
||||
flex-shrink: 0;
|
||||
padding: var(--cpd-space-1x);
|
||||
}
|
||||
|
||||
.mx_RoomHeader .mx_FacePile {
|
||||
color: $secondary-content;
|
||||
background: $background;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--cpd-space-2x);
|
||||
border-radius: 9999px;
|
||||
padding: var(--cpd-space-1-5x);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font: var(--cpd-font-body-sm-medium);
|
||||
|
||||
/* RoomAvatar doesn't pass classes down to avatar
|
||||
So set style here
|
||||
using div because compound classes are not stable */
|
||||
> div {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $primary-content;
|
||||
background: var(--cpd-color-bg-subtle-primary);
|
||||
}
|
||||
|
||||
&.mx_FacePile_toggled {
|
||||
background: var(--cpd-color-bg-success-subtle);
|
||||
color: var(--cpd-color-text-action-accent);
|
||||
font: var(--cpd-font-body-sm-semibold);
|
||||
/* For enhanced visibility under contrast control */
|
||||
outline: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomHeader .mx_BaseAvatar {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mx_RoomHeader_videoCallOption {
|
||||
/* Workaround for https://github.com/element-hq/compound/issues/331 */
|
||||
min-width: 240px;
|
||||
}
|
||||
|
||||
.mx_RoomHeader .mx_RoomHeader_toggled {
|
||||
fill: var(--cpd-color-icon-accent-primary);
|
||||
}
|
||||
@@ -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_RoomInfoLine {
|
||||
color: $secondary-content;
|
||||
display: inline-block;
|
||||
|
||||
svg {
|
||||
margin-right: 6px;
|
||||
vertical-align: -2px;
|
||||
color: $tertiary-content;
|
||||
}
|
||||
|
||||
.mx_RoomInfoLine_members {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
font-weight: inherit;
|
||||
|
||||
&::before {
|
||||
content: "·"; /* visual separator */
|
||||
margin: 0 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2023 Nordeck IT + Consulting GmbH
|
||||
|
||||
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_RoomKnocksBar {
|
||||
background-color: var(--cpd-color-bg-subtle-secondary);
|
||||
display: flex;
|
||||
padding: var(--cpd-space-2x) var(--cpd-space-4x);
|
||||
}
|
||||
|
||||
.mx_RoomKnocksBar_content {
|
||||
flex-grow: 1;
|
||||
margin: 0 var(--cpd-space-3x);
|
||||
}
|
||||
|
||||
.mx_RoomKnocksBar_paragraph {
|
||||
color: $secondary-content;
|
||||
font-size: var(--cpd-font-size-body-sm);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mx_RoomKnocksBar_link {
|
||||
margin-left: var(--cpd-space-3x);
|
||||
}
|
||||
|
||||
.mx_RoomKnocksBar_action,
|
||||
.mx_RoomKnocksBar_avatar {
|
||||
align-self: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mx_RoomKnocksBar_action + .mx_RoomKnocksBar_action {
|
||||
margin-left: var(--cpd-space-3x);
|
||||
}
|
||||
|
||||
.mx_RoomKnocksBar_avatar + .mx_RoomKnocksBar_avatar {
|
||||
margin-left: calc(var(--cpd-space-4x) * -1);
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2015-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_RoomPreviewBar {
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
|
||||
h3 {
|
||||
font-size: $font-18px;
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
|
||||
&.mx_RoomPreviewBar_spinnerTitle {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h3,
|
||||
.mx_RoomPreviewBar_message p {
|
||||
/* break-word, with fallback to break-all, which is wider supported */
|
||||
word-break: break-all;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.mx_Spinner {
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 10px 10px 10px 0;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.mx_RoomPreviewBar_footer {
|
||||
font-size: $font-12px;
|
||||
line-height: $font-20px;
|
||||
|
||||
.mx_Spinner {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomPreviewBar_actions {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mx_RoomPreviewBar_message {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
|
||||
p {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomPreviewBar_panel {
|
||||
padding: 8px 8px 8px 20px;
|
||||
|
||||
flex-direction: row;
|
||||
|
||||
.mx_RoomPreviewBar_actions {
|
||||
flex: 0 0 auto;
|
||||
flex-direction: row;
|
||||
padding: 3px 8px;
|
||||
|
||||
& > * {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomPreviewBar_message {
|
||||
flex: 1 0 0;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& > * {
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* With maximised widgets, the panel fits in better when rounded */
|
||||
.mx_MainSplit_maximisedWidget .mx_RoomPreviewBar_panel {
|
||||
margin: var(--container-gap-width);
|
||||
margin-right: calc(var(--container-gap-width) / 2); /* Shared with right panel */
|
||||
margin-top: 0; /* Already covered by apps drawer */
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mx_RoomPreviewBar_dialog {
|
||||
margin: auto;
|
||||
box-sizing: content;
|
||||
width: 400px;
|
||||
border-radius: 4px;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
|
||||
.mx_RoomPreviewBar_message {
|
||||
flex-direction: column;
|
||||
|
||||
& > * {
|
||||
margin: 5px 0 20px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomPreviewBar_actions {
|
||||
flex-direction: column;
|
||||
.mx_AccessibleButton {
|
||||
padding: 7px 50px; /* extra wide */
|
||||
}
|
||||
|
||||
& > * {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.mx_AccessibleButton.mx_AccessibleButton_kind_primary {
|
||||
/* to account for the padding of the primary button which causes inconsistent look between */
|
||||
/* subsequent secondary (text) buttons */
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mx_RoomPreviewBar_Invite {
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.mx_RoomPreviewBar_Invite h3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: pre-wrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mx_RoomPreviewBar_inviter {
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
}
|
||||
|
||||
a.mx_RoomPreviewBar_inviter {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_RoomPreviewBar_inviter_mxid {
|
||||
color: var(--cpd-color-text-secondary);
|
||||
}
|
||||
|
||||
.mx_RoomPreviewBar_icon {
|
||||
margin-right: 8px;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
.mx_RoomPreviewBar_fullWidth {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
/*
|
||||
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_RoomPreviewCard {
|
||||
padding: $spacing-32 $spacing-24 !important; /* Override SpaceRoomView's default padding */
|
||||
margin: auto;
|
||||
flex-grow: 1;
|
||||
max-width: 480px;
|
||||
box-sizing: border-box;
|
||||
background-color: $system;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
font: var(--cpd-font-body-md-regular);
|
||||
|
||||
.mx_RoomPreviewCard_notice {
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
line-height: $font-24px;
|
||||
color: $primary-content;
|
||||
margin-top: $spacing-24;
|
||||
|
||||
svg {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
margin-right: $spacing-8;
|
||||
color: $secondary-content;
|
||||
vertical-align: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomPreviewCard_inviter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: $spacing-20;
|
||||
font-size: $font-15px;
|
||||
|
||||
> div {
|
||||
margin-left: $spacing-8;
|
||||
|
||||
.mx_RoomPreviewCard_inviter_name {
|
||||
line-height: $font-18px;
|
||||
}
|
||||
|
||||
.mx_RoomPreviewCard_inviter_mxid {
|
||||
color: $secondary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomPreviewCard_avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_RoomPreviewCard_video {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
padding: 14px;
|
||||
border-radius: calc((50px + 2 * 3px) / 2);
|
||||
background-color: $accent;
|
||||
border: 3px solid $system;
|
||||
|
||||
left: calc(-50px / 4 - 3px);
|
||||
|
||||
svg {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
color: $button-primary-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
/* XXX Remove this when video rooms leave beta */
|
||||
.mx_BetaCard_betaPill {
|
||||
position: absolute;
|
||||
inset-block-start: $spacing-32;
|
||||
inset-inline-end: $spacing-24;
|
||||
}
|
||||
}
|
||||
|
||||
h1.mx_RoomPreviewCard_name {
|
||||
margin: $spacing-16 0 !important; /* Override SpaceRoomView's default margins */
|
||||
}
|
||||
|
||||
.mx_RoomPreviewCard_topic {
|
||||
line-height: $font-22px;
|
||||
margin-top: $spacing-16;
|
||||
max-height: 160px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mx_FacePile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: $spacing-16;
|
||||
/* For enhanced visibility under contrast control */
|
||||
outline: 1px solid transparent;
|
||||
|
||||
:first-child {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomPreviewCard_joinButtons {
|
||||
margin-top: $spacing-20;
|
||||
display: flex;
|
||||
gap: $spacing-20;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
max-width: 200px;
|
||||
padding: 14px 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
/*
|
||||
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_RoomSearchAuxPanel {
|
||||
/* use `min-height` rather than height, to allow room for the text to wrap if the window is narrow */
|
||||
min-height: 84px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-color: var(--cpd-color-bg-canvas-default);
|
||||
border-style: solid;
|
||||
border-width: 1px 0;
|
||||
padding: var(--cpd-space-3x);
|
||||
box-sizing: border-box;
|
||||
gap: var(--cpd-space-2x);
|
||||
|
||||
.mx_RoomSearchAuxPanel_summary {
|
||||
flex-grow: 1;
|
||||
display: inherit; /* flex */
|
||||
gap: var(--cpd-space-2x);
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
> svg {
|
||||
padding: var(--cpd-space-2x);
|
||||
border-radius: var(--cpd-space-2x);
|
||||
background-color: var(--cpd-color-bg-subtle-secondary);
|
||||
color: var(--cpd-color-icon-secondary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mx_RoomSearchAuxPanel_summary_text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: $font-15px;
|
||||
line-height: $font-22px;
|
||||
overflow: hidden;
|
||||
|
||||
span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SearchWarning {
|
||||
display: contents;
|
||||
font-size: $font-13px;
|
||||
line-height: $font-20px;
|
||||
color: var(--cpd-color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSearchAuxPanel_buttons {
|
||||
display: inherit; /* flex */
|
||||
gap: var(--cpd-space-6x);
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,389 @@
|
||||
/*
|
||||
Copyright 2024,2025 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_RoomSublist {
|
||||
margin-left: 8px;
|
||||
margin-bottom: 4px;
|
||||
|
||||
&.mx_RoomSublist_hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:not(.mx_RoomSublist_minimized) {
|
||||
.mx_RoomSublist_headerContainer {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist_headerContainer {
|
||||
/* Create a flexbox to make alignment easy */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
/* *************************** */
|
||||
/* Sticky Headers Start */
|
||||
|
||||
/* Ideally we'd be able to use `position: sticky; top: 0; bottom: 0;` on the */
|
||||
/* headerContainer, however due to our layout concerns we actually have to */
|
||||
/* calculate it manually so we can sticky things in the right places. We also */
|
||||
/* target the headerText instead of the container to reduce jumps when scrolling, */
|
||||
/* and to help hide the badges/other buttons that could appear on hover. This */
|
||||
/* all works by ensuring the header text has a fixed height when sticky so the */
|
||||
/* fixed height of the container can maintain the scroll position. */
|
||||
|
||||
/* The combined height must be set in the LeftPanel component for sticky headers */
|
||||
/* to work correctly. */
|
||||
padding-bottom: 8px;
|
||||
height: 24px;
|
||||
color: $secondary-content;
|
||||
|
||||
.mx_RoomSublist_stickableContainer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx_RoomSublist_stickable {
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
|
||||
/* Create a flexbox to make ordering easy */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
/* We use a generic sticky class for 2 reasons: to reduce style duplication and */
|
||||
/* to identify when a header is sticky. If we didn't have a consistent sticky class, */
|
||||
/* we'd have to do the "is sticky" checks again on click, as clicking the header */
|
||||
/* when sticky scrolls instead of collapses the list. */
|
||||
&.mx_RoomSublist_headerContainer_sticky {
|
||||
position: fixed;
|
||||
height: 32px; /* to match the header container */
|
||||
/* width set by JS because of a compat issue between Firefox and Chrome */
|
||||
width: calc(100% - 15px);
|
||||
}
|
||||
|
||||
/* We don't have a top style because the top is dependent on the room list header's */
|
||||
/* height, and is therefore calculated in JS. */
|
||||
/* The class, mx_RoomSublist_headerContainer_stickyTop, is applied though. */
|
||||
}
|
||||
|
||||
/* Sticky Headers End */
|
||||
/* *************************** */
|
||||
|
||||
.mx_RoomSublist_badgeContainer {
|
||||
/* Create another flexbox row because it's super easy to position the badge this way. */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
/* Apply the width and margin to the badge so the container doesn't occupy dead space */
|
||||
.mx_NotificationBadge {
|
||||
/* Do not set a width so the badges get properly sized */
|
||||
margin-left: 8px; /* same as menu+aux buttons */
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.mx_RoomSublist_headerContainer_withAux) {
|
||||
.mx_NotificationBadge {
|
||||
margin-right: 4px; /* just to push it over a bit, aligning it with the other elements */
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist_auxButton,
|
||||
.mx_RoomSublist_menuButton {
|
||||
margin-left: 8px; /* should be the same as the notification badge */
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 8px;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
color: var(--cpd-color-icon-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist_auxButton:hover svg,
|
||||
.mx_RoomSublist_menuButton:hover svg {
|
||||
color: $panel-actions;
|
||||
}
|
||||
|
||||
/* Hide the menu button by default */
|
||||
.mx_RoomSublist_menuButton {
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mx_RoomSublist_headerText {
|
||||
flex: 1;
|
||||
max-width: calc(100% - 16px); /* 16px is the badge width */
|
||||
font: var(--cpd-font-body-sm-semibold);
|
||||
|
||||
/* Ellipsize any text overflow */
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
.mx_RoomSublist_collapseBtn {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 6px;
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
position: absolute;
|
||||
color: var(--cpd-color-icon-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* In the general case, we reserve space for each sublist header to prevent */
|
||||
/* scroll jumps when they become sticky. However, that leaves a gap when */
|
||||
/* scrolled to the top above the first sublist (whose header can only ever */
|
||||
/* stick to top), so we make sure to exclude the first visible sublist. */
|
||||
&:not(.mx_RoomSublist_hidden) ~ .mx_RoomSublist .mx_RoomSublist_stickableContainer {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.mx_RoomSublist_resizeBox {
|
||||
position: relative;
|
||||
|
||||
/* Create another flexbox column for the tiles */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
.mx_RoomSublist_tiles {
|
||||
flex: 1 0 0;
|
||||
overflow: hidden;
|
||||
overflow: clip;
|
||||
/* need this to be flex otherwise the overflow hidden from above */
|
||||
/* sometimes vertically centers the clipped list ... no idea why it would do this */
|
||||
/* as the box model should be top aligned. Happens in both FF and Chromium */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: stretch;
|
||||
/* without this Firefox will prefer pushing the resizer & show more/less button into the overflow */
|
||||
min-height: 0;
|
||||
|
||||
mask-image: linear-gradient(0deg, transparent, black 4px);
|
||||
}
|
||||
|
||||
&.mx_RoomSublist_resizeBox_forceExpanded .mx_RoomSublist_tiles {
|
||||
/* in this state the div can collapse its height entirely in Chromium, */
|
||||
/* so prevent that by allowing overflow */
|
||||
overflow: visible;
|
||||
/* clear the min-height to make it not collapse entirely in a state with no active resizer */
|
||||
min-height: unset;
|
||||
}
|
||||
|
||||
.mx_RoomSublist_resizerHandles_showNButton {
|
||||
flex: 0 0 32px;
|
||||
}
|
||||
|
||||
.mx_RoomSublist_resizerHandles {
|
||||
flex: 0 0 4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Class name comes from the ResizableBox component */
|
||||
/* The hover state needs to use the whole sublist, not just the resizable box, */
|
||||
/* so that selector is below and one level higher. */
|
||||
.mx_RoomSublist_resizerHandle {
|
||||
cursor: ns-resize;
|
||||
border-radius: 3px;
|
||||
|
||||
/* Override styles from library */
|
||||
max-width: 64px;
|
||||
height: 4px !important; /* Update RESIZE_HANDLE_HEIGHT if this changes */
|
||||
|
||||
/* This is positioned directly below the 'show more' button. */
|
||||
position: relative !important;
|
||||
bottom: 0 !important; /* override from library */
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.mx_RoomSublist_hasMenuOpen {
|
||||
.mx_RoomSublist_resizerHandle {
|
||||
opacity: 0.8;
|
||||
background-color: $primary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist_showNButton {
|
||||
cursor: pointer;
|
||||
font-size: $font-13px;
|
||||
line-height: $font-18px;
|
||||
color: $secondary-content;
|
||||
|
||||
/* Update the render() function for RoomSublist if these change */
|
||||
/* Update the ListLayout class for minVisibleTiles if these change. */
|
||||
height: 24px;
|
||||
padding-bottom: 4px;
|
||||
|
||||
/* We create a flexbox to cheat at alignment */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_RoomSublist_showNButtonChevron {
|
||||
position: relative;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-left: 12px;
|
||||
margin-right: 16px;
|
||||
color: $tertiary-content;
|
||||
left: -1px; /* adjust for image position */
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_RoomSublist_hasMenuOpen,
|
||||
&:not(.mx_RoomSublist_minimized) > .mx_RoomSublist_headerContainer:focus-within,
|
||||
&:not(.mx_RoomSublist_minimized) > .mx_RoomSublist_headerContainer:hover {
|
||||
.mx_RoomSublist_menuButton {
|
||||
visibility: visible;
|
||||
width: 24px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_RoomSublist_minimized {
|
||||
.mx_RoomSublist_headerContainer {
|
||||
height: auto;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.mx_RoomSublist_badgeContainer {
|
||||
order: 0;
|
||||
align-self: flex-end;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mx_RoomSublist_stickable {
|
||||
order: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mx_RoomSublist_auxButton {
|
||||
order: 2;
|
||||
visibility: visible;
|
||||
width: 32px !important; /* !important to override hover styles */
|
||||
height: 32px !important; /* !important to override hover styles */
|
||||
margin-left: 0 !important; /* !important to override hover styles */
|
||||
background-color: $panel-actions;
|
||||
margin-top: 8px;
|
||||
|
||||
svg {
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist_resizeBox {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_RoomSublist_showNButton {
|
||||
flex-direction: column;
|
||||
|
||||
.mx_RoomSublist_showNButtonChevron {
|
||||
margin-right: 12px; /* to center */
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist_menuButton {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&.mx_RoomSublist_hasMenuOpen,
|
||||
& > .mx_RoomSublist_headerContainer:hover {
|
||||
.mx_RoomSublist_menuButton {
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
bottom: 48px; /* align to middle of name, 40px for aux button (with padding) and 8px for alignment */
|
||||
right: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 0;
|
||||
z-index: 1; /* occlude the list name */
|
||||
|
||||
/* This is the same color as the left panel background because it needs */
|
||||
/* to occlude the sublist title */
|
||||
background-color: $roomlist-bg-color;
|
||||
|
||||
svg {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) {
|
||||
.mx_RoomSublist_menuButton {
|
||||
bottom: 8px; /* align to the middle of name, 40px less than the `bottom` above. */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist_contextMenu {
|
||||
padding: 20px 16px;
|
||||
width: 250px;
|
||||
|
||||
hr {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
margin-right: 16px; /* additional 16px */
|
||||
border: 1px solid $primary-content;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.mx_RoomSublist_contextMenu_title {
|
||||
font-size: $font-15px;
|
||||
line-height: $font-20px;
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.mx_StyledRadioButton {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist_skeletonUI {
|
||||
position: relative;
|
||||
margin-left: 4px;
|
||||
height: 240px;
|
||||
|
||||
&::before {
|
||||
background-color: var(--cpd-color-bg-subtle-secondary);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
content: "";
|
||||
position: absolute;
|
||||
mask-repeat: repeat-y;
|
||||
mask-size: auto 48px;
|
||||
mask-image: url("/res/img/element-icons/roomlist/skeleton-ui.svg");
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSublist_minimized .mx_RoomSublist_skeletonUI {
|
||||
width: 32px; /* cut off the horizontal lines in the svg */
|
||||
margin-left: 10px; /* align with sublist + buttons */
|
||||
}
|
||||
@@ -0,0 +1,158 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2020-2023 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
/* Note: the room tile expects to be in a flexbox column container */
|
||||
.mx_RoomTile {
|
||||
margin-bottom: 4px;
|
||||
padding: 4px;
|
||||
|
||||
/* The tile is also a flexbox row itself */
|
||||
display: flex;
|
||||
contain: content; /* Not strict as it will break when resizing a sublist vertically */
|
||||
box-sizing: border-box;
|
||||
|
||||
font-size: var(--cpd-font-size-body-sm);
|
||||
|
||||
&.mx_RoomTile_selected,
|
||||
&:hover,
|
||||
&:focus-within,
|
||||
&.mx_RoomTile_hasMenuOpen {
|
||||
background-color: $panel-actions;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mx_DecoratedRoomAvatar,
|
||||
.mx_RoomTile_avatarContainer {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mx_RoomTile_details {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mx_RoomTile_titleContainer {
|
||||
height: 32px;
|
||||
min-width: 0;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
margin-right: 8px; /* spacing to buttons/badges */
|
||||
|
||||
/* Create a new column layout flexbox for the title parts */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.mx_RoomTile_subtitle {
|
||||
align-items: center;
|
||||
color: $secondary-content;
|
||||
display: flex;
|
||||
gap: $spacing-4;
|
||||
line-height: 1.25;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.mx_RoomTile_title,
|
||||
.mx_RoomTile_subtitle_text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mx_RoomTile_title {
|
||||
font: var(--cpd-font-body-md-regular);
|
||||
line-height: 1.25;
|
||||
|
||||
&.mx_RoomTile_titleHasUnreadEvents {
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomTile_titleWithSubtitle {
|
||||
margin-top: -2px; /* shift the title up a bit more */
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomTile_notificationsButton {
|
||||
margin-left: 4px; /* spacing between buttons */
|
||||
}
|
||||
|
||||
.mx_RoomTile_badgeContainer {
|
||||
height: 16px;
|
||||
/* don't set width so that it takes no space when there is no badge to show */
|
||||
margin: auto 0; /* vertically align */
|
||||
|
||||
/* Create a flexbox to make aligning dot badges easier */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_NotificationBadge {
|
||||
margin-right: 2px; /* centering */
|
||||
}
|
||||
|
||||
.mx_NotificationBadge_dot {
|
||||
/* make the smaller dot occupy the same width for centering */
|
||||
margin-left: 5px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
/* The context menu buttons are hidden by default */
|
||||
.mx_RoomTile_menuButton,
|
||||
.mx_RoomTile_notificationsButton {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: var(--cpd-space-0-5x);
|
||||
flex-shrink: 0;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
position: relative;
|
||||
display: none;
|
||||
|
||||
svg {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
display: block;
|
||||
color: var(--cpd-color-icon-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* If the room has an overriden notification setting then we always show the notifications menu button */
|
||||
.mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky) {
|
||||
&:hover,
|
||||
&:focus-within,
|
||||
&.mx_RoomTile_hasMenuOpen {
|
||||
/* Hide the badge container on hover because it'll be a menu button */
|
||||
.mx_RoomTile_badgeContainer {
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_RoomTile_notificationsButton,
|
||||
.mx_RoomTile_menuButton {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_RoomTile_minimized {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.mx_DecoratedRoomAvatar,
|
||||
.mx_RoomTile_avatarContainer {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
.mx_RoomUpgradeWarningBar {
|
||||
max-height: 235px;
|
||||
background-color: $info-plinth-bg-color;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.mx_RoomUpgradeWarningBar_wrapped {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
}
|
||||
|
||||
.mx_RoomUpgradeWarningBar_header {
|
||||
color: $alert;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mx_RoomUpgradeWarningBar_body {
|
||||
color: $alert;
|
||||
}
|
||||
|
||||
.mx_RoomUpgradeWarningBar_upgradelink {
|
||||
color: $alert;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.mx_RoomUpgradeWarningBar_small {
|
||||
color: $info-plinth-fg-color;
|
||||
font-size: 70%;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2019 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_SendMessageComposer {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font: var(--cpd-font-body-md-regular);
|
||||
/* fixed line height to prevent emoji from being taller than text */
|
||||
line-height: $font-18px;
|
||||
justify-content: center;
|
||||
margin-right: 6px;
|
||||
/* don't grow wider than available space */
|
||||
min-width: 0;
|
||||
|
||||
.mx_BasicMessageComposer {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* min-height at this level so the mx_BasicMessageComposer_input */
|
||||
/* still stays vertically centered when less than 55px. */
|
||||
/* We also set this to ensure the voice message recording widget */
|
||||
/* doesn't cause a jump. */
|
||||
min-height: 55px;
|
||||
|
||||
.mx_BasicMessageComposer_input {
|
||||
padding: 3px 0;
|
||||
/* this will center the contenteditable */
|
||||
/* in it's parent vertically */
|
||||
/* while keeping the autocomplete at the top */
|
||||
/* of the composer. The parent needs to be a flex container for this to work. */
|
||||
margin: auto 0;
|
||||
/* max-height at this level so autocomplete doesn't get scrolled too */
|
||||
max-height: 140px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
.mx_Stickers_content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mx_Stickers_content_container {
|
||||
overflow: hidden;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
#mx_persistedElement_stickerPicker {
|
||||
.mx_AppTileFullWidth {
|
||||
height: unset;
|
||||
box-sizing: border-box;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.mx_AppTileMenuBar {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
iframe {
|
||||
/* Sticker picker depends on the fixed height previously used for all tiles */
|
||||
height: 283px; /* height of the popout minus the AppTile menu bar */
|
||||
}
|
||||
}
|
||||
|
||||
.mx_Stickers_contentPlaceholder {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mx_Stickers_contentPlaceholder p {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.mx_Stickers_addLink {
|
||||
display: inline;
|
||||
cursor: pointer;
|
||||
color: $accent;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
/*
|
||||
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_ThirdPartyMemberInfo {
|
||||
padding: var(--cpd-space-4x);
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
/*
|
||||
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_ThreadSummary,
|
||||
.mx_ThreadSummary_content {
|
||||
color: $secondary-content;
|
||||
}
|
||||
|
||||
.mx_ThreadSummary,
|
||||
.mx_ThreadSummary_icon {
|
||||
margin-top: $spacing-8;
|
||||
}
|
||||
|
||||
.mx_ThreadSummary {
|
||||
min-width: 267px;
|
||||
/* leave space on both left & right gutters */
|
||||
max-width: min(calc(100% - var(--EventTile_group_line-spacing-inline-start)), 600px);
|
||||
width: fit-content;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
background-color: $panels;
|
||||
padding-inline: $spacing-12 $spacing-16;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
border: 1px solid $panels; /* always render a border so the hover effect doesn't require a re-layout */
|
||||
font: var(--cpd-font-body-sm-regular);
|
||||
|
||||
.mx_ThreadSummary_chevron {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 60px;
|
||||
box-sizing: border-box;
|
||||
/* XXX: We use an HEXA `transparent` to work around a Safari <15.4 bug */
|
||||
background: linear-gradient(270deg, $system 50%, $system-transparent 100%);
|
||||
|
||||
opacity: 0;
|
||||
transform: translateX(60px);
|
||||
transition: all 0.1s ease-in-out;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: var(--cpd-space-1x);
|
||||
transform: translateY(-50%);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: $secondary-content;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: $quinary-content;
|
||||
|
||||
.mx_ThreadSummary_chevron {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ThreadSummary_sender,
|
||||
.mx_ThreadSummary_content,
|
||||
.mx_ThreadSummary_replies_amount {
|
||||
line-height: var(--EventTile_ThreadSummary-line-height);
|
||||
}
|
||||
|
||||
.mx_ThreadSummary_sender,
|
||||
.mx_ThreadSummary_content {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mx_ThreadSummary_sender {
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
}
|
||||
|
||||
.mx_ThreadSummary_content {
|
||||
margin-left: $spacing-4;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.mx_ThreadSummary_replies_amount {
|
||||
@mixin ThreadRepliesAmount;
|
||||
}
|
||||
|
||||
.mx_MessagePanel_narrow & {
|
||||
min-width: initial;
|
||||
max-width: 100%; /* prevent overflow */
|
||||
width: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ThreadSummary_avatar {
|
||||
margin-inline-end: $spacing-8;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mx_ThreadSummary_icon {
|
||||
display: inline-block;
|
||||
margin-bottom: $spacing-8;
|
||||
|
||||
> svg {
|
||||
@mixin ThreadSummaryIcon;
|
||||
vertical-align: middle;
|
||||
margin-inline-end: $spacing-8;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
a& {
|
||||
color: $secondary-content;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
/*
|
||||
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_TopUnreadMessagesBar {
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 24px;
|
||||
width: 38px;
|
||||
}
|
||||
|
||||
.mx_TopUnreadMessagesBar::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: 11px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 16px;
|
||||
background-color: var(--cpd-color-bg-canvas-default);
|
||||
border: 6px solid var(--cpd-color-icon-accent-tertiary);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mx_TopUnreadMessagesBar_scrollUp {
|
||||
height: 38px;
|
||||
width: 38px;
|
||||
border-radius: 19px;
|
||||
box-sizing: border-box;
|
||||
background: $background;
|
||||
border: 1.3px solid var(--cpd-color-icon-tertiary);
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 6px;
|
||||
color: var(--cpd-color-icon-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_TopUnreadMessagesBar_markAsRead {
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: $background;
|
||||
border: 1.3px solid var(--cpd-color-icon-tertiary);
|
||||
border-radius: 10px;
|
||||
margin: 5px auto;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 1px;
|
||||
color: var(--cpd-color-icon-tertiary);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
/*
|
||||
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_UserIdentityWarning {
|
||||
/* 42px is the padding-left of .mx_MessageComposer_wrapper in res/css/views/rooms/_MessageComposer.pcss */
|
||||
margin-left: calc(-42px + var(--RoomView_MessageList-padding));
|
||||
|
||||
.mx_UserIdentityWarning_row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mx_BaseAvatar {
|
||||
margin-left: var(--cpd-space-2x);
|
||||
}
|
||||
.mx_UserIdentityWarning_main {
|
||||
margin-left: var(--cpd-space-6x);
|
||||
flex-grow: 1;
|
||||
}
|
||||
.mx_UserIdentityWarning_main.critical {
|
||||
color: var(--cpd-color-text-critical-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
.mx_UserIdentityWarning.critical {
|
||||
background: linear-gradient(180deg, var(--cpd-color-red-100) 0%, var(--cpd-color-theme-bg) 100%);
|
||||
}
|
||||
|
||||
.mx_MessageComposer.mx_MessageComposer--compact > .mx_UserIdentityWarning {
|
||||
margin-left: calc(-25px + var(--RoomView_MessageList-padding));
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
/*
|
||||
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_VoiceRecordComposerTile_stop {
|
||||
/* 20px + 4px padding + 2px border makes this a 32px square (as intended) */
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: var(--cpd-space-1x);
|
||||
border: 2px solid $voice-record-stop-border-color;
|
||||
border-radius: 32px;
|
||||
margin-right: 2px; /* between us and the waveform component */
|
||||
|
||||
svg {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
color: $voice-record-stop-symbol-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_VoiceRecordComposerTile_delete {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
vertical-align: middle;
|
||||
margin-right: 2px; /* distance from left edge of waveform container (container has some margin too) */
|
||||
|
||||
svg {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
color: $voice-record-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_VoiceRecordComposerTile_uploadingState {
|
||||
margin-right: 10px;
|
||||
color: $secondary-content;
|
||||
}
|
||||
|
||||
.mx_VoiceRecordComposerTile_failedState {
|
||||
margin-right: 21px;
|
||||
|
||||
.mx_VoiceRecordComposerTile_uploadState_badge {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer {
|
||||
/* Note: remaining class properties are in the PlayerContainer CSS. */
|
||||
|
||||
/* fixed height to reduce layout jumps with the play button appearing */
|
||||
/* https://github.com/vector-im/element-web/issues/18431 */
|
||||
height: 32px;
|
||||
|
||||
margin: 6px; /* force the composer area to put a gutter around us */
|
||||
margin-right: 6px; /* isolate from stop/send button */
|
||||
|
||||
position: relative; /* important for the live circle */
|
||||
|
||||
&.mx_VoiceRecordComposerTile_recording {
|
||||
/* We are putting the circle in this padding, so we need +10px from the regular */
|
||||
/* padding on the left side. */
|
||||
padding-left: 22px;
|
||||
|
||||
&::before {
|
||||
animation: recording-pulse 2s infinite;
|
||||
|
||||
content: "";
|
||||
background-color: $voice-record-live-circle-color;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
left: 12px; /* 12px from the left edge for container padding */
|
||||
top: 17px; /* vertically center (middle align with clock) */
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MessageComposer_wysiwyg .mx_VoiceMessagePrimaryContainer {
|
||||
&.mx_VoiceRecordComposerTile_recording {
|
||||
&::before {
|
||||
top: 15px; /* vertically center (middle align with clock) */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* The keyframes are slightly weird here to help make a ramping/punch effect */
|
||||
/* for the recording dot. We start and end at 100% opacity to help make the */
|
||||
/* dot feel a bit like a real lamp that is blinking: the animation ends up */
|
||||
/* spending a lot of its time showing a steady state without a fade effect. */
|
||||
/* This lamp effect extends into why the 0% opacity keyframe is not in the */
|
||||
/* midpoint: lamps take longer to turn off than they do to turn on, and the */
|
||||
/* extra frames give it a bit of a realistic punch for when the animation is */
|
||||
/* ramping back up to 100% opacity. */
|
||||
|
||||
/* Target animation timings: steady for 1.5s, fade out for 0.3s, fade in for 0.2s */
|
||||
/* (intended to be used in a loop for 2s animation speed) */
|
||||
@keyframes recording-pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
35% {
|
||||
opacity: 0;
|
||||
}
|
||||
65% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.mx_VoiceMessagePrimaryContainer {
|
||||
outline: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
.mx_WhoIsTypingTile {
|
||||
margin-left: -18px; /* offset padding from mx_RoomView_MessageList to center avatars */
|
||||
padding-top: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* position the indicator in the same place horizontally as .mx_EventTile_avatar. */
|
||||
.mx_WhoIsTypingTile_avatars {
|
||||
flex: 0 0 82px; /* 18 (padding on message list) + 64 (padding on event lines) */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mx_WhoIsTypingTile_avatars > :not(:first-child) {
|
||||
margin-left: -12px;
|
||||
}
|
||||
|
||||
.mx_WhoIsTypingTile_avatars .mx_BaseAvatar {
|
||||
border: 1px solid $background;
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
.mx_WhoIsTypingTile_remainingAvatarPlaceholder {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: $primary-content;
|
||||
background-color: $quinary-content;
|
||||
border: 1px solid $background;
|
||||
border-radius: 40px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: $font-24px;
|
||||
font-size: 0.8em;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mx_WhoIsTypingTile_label {
|
||||
flex: 1;
|
||||
font: var(--cpd-font-body-md-semibold);
|
||||
color: $roomtopic-color;
|
||||
}
|
||||
|
||||
.mx_WhoIsTypingTile_label > span {
|
||||
background-image: url("/res/img/typing-indicator-2x.gif");
|
||||
background-size: 25px;
|
||||
background-position: left bottom;
|
||||
background-repeat: no-repeat;
|
||||
padding-bottom: 15px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mx_MatrixChat_useCompactLayout {
|
||||
.mx_WhoIsTypingTile {
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
/*
|
||||
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_EditWysiwygComposer {
|
||||
--EditWysiwygComposer-padding-inline: 3px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%; /* disable overflow */
|
||||
width: auto;
|
||||
gap: 8px;
|
||||
padding: 8px var(--EditWysiwygComposer-padding-inline);
|
||||
|
||||
.mx_WysiwygComposer_Editor_content {
|
||||
border-radius: 4px;
|
||||
border: solid 1px $primary-hairline-color;
|
||||
background-color: $background;
|
||||
max-height: 200px;
|
||||
padding: 3px 6px;
|
||||
|
||||
&:focus {
|
||||
border-color: $accent-400;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EditWysiwygComposer_buttons {
|
||||
display: flex;
|
||||
flex-flow: row wrap-reverse; /* display "Save" over "Cancel" */
|
||||
justify-content: flex-end;
|
||||
gap: 5px;
|
||||
margin-inline-start: auto;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
min-width: 100px; /* magic number to align the edge of the button with the input area */
|
||||
}
|
||||
}
|
||||
|
||||
.mx_FormattingButtons_Button {
|
||||
&:first-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
/*
|
||||
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_SendWysiwygComposer {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font: var(--cpd-font-body-md-regular);
|
||||
/* fixed line height to prevent emoji from being taller than text */
|
||||
line-height: $font-18px;
|
||||
justify-content: center;
|
||||
margin-right: 13px;
|
||||
gap: 8px;
|
||||
|
||||
.mx_FormattingButtons {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.mx_WysiwygComposer_Editor {
|
||||
border: 1px solid;
|
||||
border-color: $quinary-content;
|
||||
padding: 6px 11px 6px 12px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 10px;
|
||||
|
||||
.mx_E2EIcon {
|
||||
margin: 0 0 7px 0;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
&[data-is-expanded="true"] {
|
||||
border-radius: 14px;
|
||||
|
||||
.mx_WysiwygComposer_Editor_container {
|
||||
margin-top: 3px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-is-expanded="false"] {
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
.mx_WysiwygComposer_Editor_container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 22px;
|
||||
margin-bottom: 2px;
|
||||
/* don't grow wider than available space */
|
||||
width: 0;
|
||||
|
||||
.mx_WysiwygComposer_Editor_content {
|
||||
/* this will center the contenteditable */
|
||||
/* in it's parent vertically */
|
||||
/* while keeping the autocomplete at the top */
|
||||
/* of the composer. The parent needs to be a flex container for this to work. */
|
||||
margin: auto 0;
|
||||
/* the line height is $font-22px (set in _Editor.pcss) and we want to display 16 lines */
|
||||
max-height: calc(16 * $font-22px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_SendWysiwygComposer-focused {
|
||||
.mx_WysiwygComposer_Editor {
|
||||
border-color: $quaternary-content;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,178 @@
|
||||
/*
|
||||
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_WysiwygComposer_Editor_container {
|
||||
/* These are set in Javascript */
|
||||
--avatar-letter: "";
|
||||
--avatar-background: unset;
|
||||
--placeholder: "";
|
||||
|
||||
@keyframes visualbell {
|
||||
from {
|
||||
background-color: $visual-bell-bg-color;
|
||||
}
|
||||
to {
|
||||
background-color: $background;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_WysiwygComposer_Editor_content {
|
||||
line-height: $font-22px;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
outline: none;
|
||||
overflow-x: hidden;
|
||||
|
||||
/* Force caret nodes to be selected in full so that they can be */
|
||||
/* navigated through in a single keypress */
|
||||
.caretNode {
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
// we always have a <br/> tag at the end of the html, we need it to be present at first then hide it as soon as
|
||||
// we have any other elements
|
||||
br:not(:only-child) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
/* this may seem redundant, but we need to handle zero content formatting tags, which occur when we split a
|
||||
formatting tag into paragraphs */
|
||||
min-height: $font-22px;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-inline-start: $spacing-28;
|
||||
}
|
||||
|
||||
/* Make list type disc to match rich text editor */
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
color: #777;
|
||||
border-left: 2px solid $blockquote-bar-color;
|
||||
border-radius: 2px;
|
||||
padding: 0 10px;
|
||||
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
> pre {
|
||||
font-size: $font-15px;
|
||||
line-height: $font-24px;
|
||||
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding: $spacing-8 $spacing-12;
|
||||
|
||||
background-color: $inlinecode-background-color;
|
||||
border: 1px solid $inlinecode-border-color;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
code:not(pre *) {
|
||||
font-family: $monospace-font-family !important;
|
||||
background-color: $inlinecode-background-color;
|
||||
border: 1px solid $inlinecode-border-color;
|
||||
border-radius: 4px;
|
||||
padding: $spacing-2;
|
||||
|
||||
&:empty {
|
||||
border: unset;
|
||||
padding: unset;
|
||||
}
|
||||
}
|
||||
|
||||
/* this selector represents what will become a pill
|
||||
nb despite there being mx_UserPill and mx_RoomPill classes appended to these pills
|
||||
in the current composer, there don't appear to be any styles associated with those classes
|
||||
in this repo */
|
||||
a[data-mention-type] {
|
||||
/* combine mx_Pill from _Pill.pcss */
|
||||
padding: $font-1px 0.4em;
|
||||
line-height: $font-17px;
|
||||
border-radius: $font-16px;
|
||||
display: inline;
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
color: var(--cpd-color-text-on-solid-primary);
|
||||
background-color: $pill-bg-color;
|
||||
|
||||
/* ...with the overrides from _BasicMessageComposer.pcss */
|
||||
user-select: all;
|
||||
position: relative;
|
||||
cursor: unset; /* We don't want indicate clickability */
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
/* avatar pseudo element */
|
||||
&::before {
|
||||
/* After consolidation, all of the styling from _Pill.scss was being overridden,
|
||||
so take what is in _BasicMessageComposer.pcss as the starting point */
|
||||
display: inline-block;
|
||||
content: var(--avatar-letter);
|
||||
background: var(--avatar-background), $background;
|
||||
|
||||
width: $font-16px;
|
||||
min-width: $font-16px; /* ensure the avatar is not compressed */
|
||||
height: $font-16px;
|
||||
line-height: $font-16px;
|
||||
text-align: center;
|
||||
|
||||
/* Get the positioning of the avatar just right for consistency with timeline */
|
||||
margin-inline-start: -0.4rem;
|
||||
margin-inline-end: 0.24rem;
|
||||
vertical-align: 0.12rem;
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-size: $font-16px;
|
||||
border-radius: $font-16px;
|
||||
|
||||
color: var(--avatar-color, $avatar-initial-color);
|
||||
font-weight: bold;
|
||||
font-size: $font-10-4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_WysiwygComposer_Editor_content_placeholder::before {
|
||||
content: var(--placeholder);
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
display: inline-block;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
color: var(--cpd-color-text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_WysiwygComposer_AutoCompleteWrapper {
|
||||
position: relative;
|
||||
|
||||
/* Due to the fact that editing a message now has a larger amount of grey
|
||||
colour above it (due to the rich text buttons above the composer), we need
|
||||
to give the autocomplete a bit more visual separation by using a border.
|
||||
*/
|
||||
> .mx_Autocomplete {
|
||||
border: 1px solid $quinary-content;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
@@ -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_FormattingButtons {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
|
||||
.mx_FormattingButtons_Button {
|
||||
--size: 28px;
|
||||
cursor: pointer;
|
||||
height: var(--size);
|
||||
width: var(--size);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.mx_FormattingButtons_Button_hover {
|
||||
&:hover {
|
||||
background: $panels;
|
||||
|
||||
.mx_FormattingButtons_Icon {
|
||||
color: $secondary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_FormattingButtons_active {
|
||||
background: $accent-300;
|
||||
|
||||
.mx_FormattingButtons_Icon {
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_FormattingButtons_disabled {
|
||||
.mx_FormattingButtons_Icon {
|
||||
color: $quinary-content;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_FormattingButtons_Icon {
|
||||
--size: 16px;
|
||||
height: var(--size);
|
||||
width: var(--size);
|
||||
color: $tertiary-content;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_FormattingButtons_Tooltip_KeyboardShortcut {
|
||||
kbd {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
text-transform: capitalize;
|
||||
font-family: Inter, sans-serif;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_LinkModal {
|
||||
padding: $spacing-32;
|
||||
max-width: 600px;
|
||||
height: 341px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.mx_LinkModal_content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
gap: $spacing-8;
|
||||
margin-top: 7px;
|
||||
|
||||
.mx_LinkModal_Field {
|
||||
flex: initial;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.mx_LinkModal_buttons {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: flex-end;
|
||||
|
||||
.mx_Dialog_buttons {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user