ehealthsolutions/healthchat-web
3
0
Fork 0
mirror of https://github.com/Novaloop-AG/healthchat-web.git synced 2026-11-06 06:28:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Absorb the matrix-react-sdk repository (#28192)

Browse Source 
Co-authored-by: github-merge-queue <118344674+github-merge-queue@users.noreply.github.com>
Co-authored-by: github-merge-queue <github-merge-queue@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
Co-authored-by: Kim Brose <kim.brose@nordeck.net>
Co-authored-by: Florian Duros <florianduros@element.io>
Co-authored-by: R Midhun Suresh <hi@midhun.dev>
Co-authored-by: dbkr <986903+dbkr@users.noreply.github.com>
Co-authored-by: ElementRobot <releases@riot.im>
Co-authored-by: dbkr <dbkr@users.noreply.github.com>
Co-authored-by: David Baker <dbkr@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
Co-authored-by: David Langley <davidl@element.io>
Co-authored-by: Michael Weimann <michaelw@matrix.org>
Co-authored-by: Timshel <Timshel@users.noreply.github.com>
Co-authored-by: Sahil Silare <32628578+sahil9001@users.noreply.github.com>
Co-authored-by: Will Hunt <will@half-shot.uk>
Co-authored-by: Hubert Chathi <hubert@uhoreg.ca>
Co-authored-by: Andrew Ferrazzutti <andrewf@element.io>
Co-authored-by: Robin <robin@robin.town>
Co-authored-by: Tulir Asokan <tulir@maunium.net>
This commit is contained in:
Michael Telatynski
2024-10-16 13:31:55 +01:00
committed by GitHub
parent 2b99496025
commit c05c429803
3280 changed files with 586617 additions and 905 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/views/rooms/_AppsDrawer.pcss
+346
View File
@@ -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
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;
}
h3 {
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;
}
}
res/css/views/rooms/_Autocomplete.pcss
+93
View File
@@ -0,0 +1,93 @@
.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;
max-height: 35vh;
}
.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;
}
res/css/views/rooms/_AuxPanel.pcss
+14
View File
@@ -0,0 +1,14 @@
/*
Copyright 2018-2024 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_AuxPanel {
min-width: 0px;
width: 100%;
margin: 0px auto;
overflow: auto;
}
res/css/views/rooms/_BasicMessageComposer.pcss
+95
View File
@@ -0,0 +1,95 @@
/*
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
Please see LICENSE files in the repository root for full details.
*/
.mx_BasicMessageComposer {
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 {
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;
}
}
res/css/views/rooms/_CallGuestLinkButton.pcss
+7
View File
@@ -0,0 +1,7 @@
.mx_JoinRuleDialog {
.mx_JoinRuleDialogButtons {
display: flex;
column-gap: 5px;
justify-content: center;
}
}
res/css/views/rooms/_DecryptionFailureBar.pcss
+79
View File
@@ -0,0 +1,79 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_DecryptionFailureBar {
--gap-row: $spacing-8;
--gap-column: $spacing-12;
--gap: var(--gap-row) var(--gap-column);
--size-icon: 24px;
background-color: $system;
padding: $spacing-12;
margin-inline: $spacing-16;
border-radius: 4px;
&.mx_DecryptionFailureBar--withEnd {
display: flex;
flex-flow: wrap;
align-items: flex-start;
justify-content: space-between;
row-gap: calc(var(--gap-row) + $spacing-4); /* Increase spacing between the message and the buttons */
.mx_DecryptionFailureBar_end {
display: flex;
flex-wrap: wrap; /* Let the buttons wrapped on a narrow column */
gap: var(--buttons-dialog-gap-row) var(--buttons-dialog-gap-column);
margin-inline-start: calc(var(--size-icon) + var(--gap-column)); /* Align the button(s) and the message */
}
}
.mx_DecryptionFailureBar_start {
display: grid;
gap: var(--gap);
grid-template-areas:
"status headline"
". message";
grid-template-columns: var(--size-icon) auto;
.mx_DecryptionFailureBar_start_status {
grid-area: status;
display: flex;
align-items: center;
gap: var(--gap);
.mx_Spinner {
height: unset; /* Unset height: 100% */
}
.mx_DecryptionFailureBar_start_status_icon {
min-width: var(--size-icon);
height: var(--size-icon);
mask-image: url("$(res)/img/e2e/decryption-failure.svg");
background-color: $e2e-warning-color;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
}
.mx_DecryptionFailureBar_start_headline {
grid-area: headline;
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-16px;
align-self: center;
}
.mx_DecryptionFailureBar_start_message {
grid-area: message;
color: $secondary-content;
}
}
}
res/css/views/rooms/_E2EIcon.pcss
+61
View File
@@ -0,0 +1,61 @@
/*
Copyright 2019-2024 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_E2EIcon {
width: 16px;
height: 16px;
margin: 0 9px;
position: relative;
display: block;
}
.mx_E2EIcon_warning,
.mx_E2EIcon_normal,
.mx_E2EIcon_verified {
&::before,
&::after {
content: "";
display: block;
position: absolute;
inset: 0;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
}
/* transparent-looking border surrounding the shield for when overlain over avatars */
.mx_E2EIcon_bordered {
mask-image: url("$(res)/img/e2e/normal.svg");
background-color: $header-panel-bg-color;
mask-size: 100%;
/* shrink the actual badge */
&::after {
mask-size: 75%;
}
/* shrink the infill of the badge */
&::before {
mask-size: 60%;
background: var(--cpd-color-bg-canvas-default);
}
}
.mx_E2EIcon_warning::after {
mask-image: url("$(res)/img/e2e/warning.svg");
background-color: $e2e-warning-color;
}
.mx_E2EIcon_normal::after {
mask-image: url("$(res)/img/e2e/normal.svg");
background-color: var(--cpd-color-icon-tertiary);
}
.mx_E2EIcon_verified::after {
mask-image: url("$(res)/img/e2e/verified.svg");
background-color: $e2e-verified-color;
}
res/css/views/rooms/_EditMessageComposer.pcss
+44
View File
@@ -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
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 */
}
}
}
res/css/views/rooms/_EmojiButton.pcss
+25
View File
@@ -0,0 +1,25 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_EmojiButton {
@mixin composerButton 50%, var(--cpd-color-icon-secondary), var(--cpd-color-bg-subtle-secondary);
}
.mx_EmojiButton_highlight {
@mixin composerButtonHighLight;
}
.mx_EmojiButton_icon::before {
mask-image: url("$(res)/img/element-icons/room/composer/emoji.svg");
}
.mx_MessageComposer_wysiwyg {
.mx_EmojiButton {
@mixin composerButton 5px, $tertiary-content, $panels;
}
}
res/css/views/rooms/_EntityTile.pcss
+127
View File
@@ -0,0 +1,127 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.
Copyright 2015, 2016 OpenMarket Ltd
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_EntityTile {
display: flex;
align-items: center;
color: $primary-content;
cursor: pointer;
.mx_E2EIcon {
margin: 0;
position: absolute;
bottom: 2px;
right: 7px;
}
}
.mx_EntityTile:hover {
padding-right: 30px;
position: relative; /* to keep the chevron aligned */
}
.mx_EntityTile:hover::before {
content: "";
position: absolute;
top: calc(50% - 8px); /* center */
right: -8px;
mask: url("$(res)/img/member_chevron.png");
mask-repeat: no-repeat;
width: 16px;
height: 16px;
background-color: $header-panel-text-primary-color;
}
.mx_EntityTile:not(.mx_EntityTile_unreachable) .mx_PresenceLabel {
display: none;
}
.mx_EntityTile:hover .mx_PresenceLabel {
display: block;
}
.mx_EntityTile_invite {
display: table-cell;
vertical-align: middle;
margin-left: 10px;
width: 26px;
}
.mx_EntityTile_avatar {
padding-left: 3px;
padding-right: 12px;
padding-top: 4px;
padding-bottom: 4px;
position: relative;
line-height: 0;
}
.mx_EntityTile_name {
flex: 1 1 0;
overflow: hidden;
font: var(--cpd-font-body-md-regular);
text-overflow: ellipsis;
white-space: nowrap;
}
.mx_EntityTile_details {
overflow: hidden;
flex: 1;
}
.mx_EntityTile_ellipsis .mx_EntityTile_name {
font-style: italic;
color: $primary-content;
}
.mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
font-style: italic;
color: $primary-content;
}
.mx_EntityTile_unavailable .mx_EntityTile_avatar,
.mx_EntityTile_unavailable .mx_EntityTile_name,
.mx_EntityTile_offline_beenactive .mx_EntityTile_avatar,
.mx_EntityTile_offline_beenactive .mx_EntityTile_name {
opacity: 0.5;
}
.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar,
.mx_EntityTile_offline_neveractive .mx_EntityTile_name {
opacity: 0.25;
}
.mx_EntityTile_unknown .mx_EntityTile_avatar,
.mx_EntityTile_unknown .mx_EntityTile_name,
.mx_EntityTile_unreachable .mx_EntityTile_avatar,
.mx_EntityTile_unreachable .mx_EntityTile_name {
opacity: 0.25;
}
.mx_EntityTile_subtext {
font-size: $font-11px;
opacity: 0.5;
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
}
.mx_EntityTile_power {
padding-inline-start: 6px;
font-size: $font-10px;
color: $secondary-content;
max-width: 6em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mx_EntityTile:hover .mx_EntityTile_power {
display: none;
}
res/css/views/rooms/_EventBubbleTile.pcss
+651
View File
@@ -0,0 +1,651 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_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: var(--MessageTimestamp-max-width);
}
.mx_ThreadSummary {
clear: both;
width: fit-content;
}
.mx_EventTile_content {
margin-right: 0;
}
.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;
}
.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: rgba(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%;
height: 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);
}
.mx_MPollEndBody {
/* Prevent the poll end body from exceeding the tile width */
width: 100%;
}
}
&: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 */
}
.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 */
}
res/css/views/rooms/_EventTile.pcss
+1474
View File
File diff suppressed because it is too large Load Diff
res/css/views/rooms/_HistoryTile.pcss
+16
View File
@@ -0,0 +1,16 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 Robin Townsend <robin@robin.town>
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_EventTileBubble.mx_HistoryTile {
margin: var(--EventTileBubble_margin-block) auto;
&::before {
background-color: $header-panel-text-primary-color;
mask-image: url("$(res)/img/element-icons/hide.svg");
}
}
res/css/views/rooms/_IRCLayout.pcss
+79
View File
@@ -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
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)
);
}
}
res/css/views/rooms/_JumpToBottomButton.pcss
+62
View File
@@ -0,0 +1,62 @@
/*
Copyright 2019-2024 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_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: 19px;
box-sizing: border-box;
background: $background;
border: 1.3px solid var(--cpd-color-icon-tertiary);
cursor: pointer;
}
.mx_JumpToBottomButton_scrollDown::before {
content: "";
position: absolute;
inset: 0;
mask-image: url("$(res)/img/element-icons/message/chevron-up.svg");
mask-repeat: no-repeat;
mask-size: 20px;
mask-position: center 6px;
transform: rotate(180deg);
background: var(--cpd-color-icon-tertiary);
}
res/css/views/rooms/_LegacyRoomHeader.pcss
+281
View File
@@ -0,0 +1,281 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
Copyright 2015, 2016 OpenMarket Ltd
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
:root {
--RoomHeader-indicator-dot-size: 8px;
--RoomHeader-indicator-dot-offset: -3px;
--RoomHeader-indicator-pulseColor: $alert;
}
.mx_LegacyRoomHeader {
flex: 0 0 50px;
border-bottom: 1px solid $primary-hairline-color;
background-color: $background;
.mx_LegacyRoomHeader_icon {
height: 12px;
width: 12px;
&.mx_LegacyRoomHeader_icon_video {
height: 14px;
width: 14px;
background-color: $secondary-content;
mask-image: url("$(res)/img/element-icons/call/video-call.svg");
mask-size: 100%;
}
&.mx_E2EIcon {
margin: 0;
height: 100%; /* To give the tooltip room to breathe */
}
}
.mx_CallDuration {
margin-top: calc(($font-15px - $font-13px) / 2); /* To align with the name */
font-size: $font-13px;
}
}
.mx_LegacyRoomHeader_wrapper {
height: 44px;
display: flex;
align-items: center;
min-width: 0;
padding: 10px 20px 9px 16px;
border-bottom: 1px solid $separator;
.mx_InviteOnlyIcon_large {
margin: 0;
}
.mx_BetaCard_betaPill {
margin-right: $spacing-8;
}
/* The container of E2EIcon in the legacy header needs to have its height set */
& > span {
height: 100%;
}
}
.mx_LegacyRoomHeader_name {
flex: 0 1 auto;
overflow: hidden;
color: $primary-content;
font: var(--cpd-font-heading-sm-semibold);
font-weight: var(--cpd-font-weight-semibold);
min-height: 24px;
align-items: center;
border-radius: 6px;
margin: 0 3px;
padding: 1px 4px;
display: flex;
user-select: none;
cursor: pointer;
&:hover {
background-color: $quinary-content;
}
.mx_LegacyRoomHeader_nametext {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.mx_LegacyRoomHeader_chevron {
align-self: center;
width: 20px;
height: 20px;
mask-position: center;
mask-size: 20px;
mask-repeat: no-repeat;
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
background-color: $tertiary-content;
}
&.mx_LegacyRoomHeader_name--textonly {
cursor: unset;
&:hover {
background-color: unset;
}
}
&[aria-expanded="true"] {
background-color: $separator;
.mx_LegacyRoomHeader_chevron {
transform: rotate(180deg);
}
}
}
.mx_LegacyRoomHeader_settingsHint {
color: $settings-grey-fg-color !important;
}
.mx_LegacyRoomHeader_searchStatus {
font-weight: normal;
opacity: 0.6;
}
.mx_RoomTopic {
position: relative;
cursor: pointer;
}
.mx_LegacyRoomHeader_topic {
$lines: 2;
flex: 1;
color: $secondary-content;
font: var(--cpd-font-body-sm-regular);
line-height: 1rem;
max-height: calc(1rem * $lines);
overflow: hidden;
-webkit-line-clamp: $lines; /* See: https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp */
-webkit-box-orient: vertical;
display: -webkit-box;
}
.mx_LegacyRoomHeader_topic .mx_Emoji {
/* Undo font size increase to prevent vertical cropping and ensure the same size */
/* as in plain text emojis */
font-size: inherit;
}
.mx_LegacyRoomHeader_avatar {
flex: 0;
margin: 0 7px;
position: relative;
cursor: pointer;
}
.mx_LegacyRoomHeader_button_unreadIndicator_bg {
position: absolute;
right: var(--RoomHeader-indicator-dot-offset);
top: var(--RoomHeader-indicator-dot-offset);
margin: 4px;
width: var(--RoomHeader-indicator-dot-size);
height: var(--RoomHeader-indicator-dot-size);
border-radius: 50%;
transform: scale(1.6);
transform-origin: center center;
background: $background;
}
.mx_LegacyRoomHeader_button_unreadIndicator {
position: absolute;
right: var(--RoomHeader-indicator-dot-offset);
top: var(--RoomHeader-indicator-dot-offset);
margin: 4px;
&.mx_Indicator_highlight {
background: var(--cpd-color-icon-critical-primary);
box-shadow: var(--cpd-color-icon-critical-primary);
}
&.mx_Indicator_notification {
background: var(--cpd-color-icon-success-primary);
box-shadow: var(--cpd-color-icon-success-primary);
}
&.mx_Indicator_activity {
background: var(--cpd-color-icon-primary);
box-shadow: var(--cpd-color-icon-primary);
}
}
.mx_LegacyRoomHeader_forgetButton::before {
mask-image: url("$(res)/img/element-icons/leave.svg");
width: 26px;
}
.mx_LegacyRoomHeader_appsButton::before {
mask-image: url("$(res)/img/element-icons/room/apps.svg");
}
.mx_LegacyRoomHeader_appsButton_highlight::before {
background-color: $accent;
}
.mx_LegacyRoomHeader_searchButton::before {
mask-image: url("$(res)/img/element-icons/room/search-inset.svg");
}
.mx_LegacyRoomHeader_inviteButton::before {
mask-image: url("$(res)/img/element-icons/room/invite.svg");
}
.mx_LegacyRoomHeader_voiceCallButton::before {
mask-image: url("$(res)/img/element-icons/call/voice-call.svg");
/* The call button SVG is padded slightly differently, so match it up to the size */
/* of the other icons */
mask-size: 20px;
mask-position: center;
}
.mx_LegacyRoomHeader_videoCallButton::before {
mask-image: url("$(res)/img/element-icons/call/video-call.svg");
}
.mx_LegacyRoomHeader_layoutButton--freedom::before,
.mx_LegacyRoomHeader_freedomIcon::before {
mask-image: url("$(res)/img/element-icons/call/freedom.svg");
}
.mx_LegacyRoomHeader_layoutButton--spotlight::before,
.mx_LegacyRoomHeader_spotlightIcon::before {
mask-image: url("$(res)/img/element-icons/call/spotlight.svg");
}
.mx_LegacyRoomHeader_closeButton {
&::before {
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-size: 20px;
mask-position: center;
}
&:hover {
background: unset; /* remove background color on hover */
&::before {
background-color: $icon-button-color; /* set the default background color */
}
}
}
.mx_LegacyRoomHeader_minimiseButton::before {
mask-image: url("$(res)/img/element-icons/reduce.svg");
}
.mx_LegacyRoomHeader_layoutMenu .mx_IconizedContextMenu_icon::before {
content: "";
width: 16px;
height: 16px;
display: block;
mask-position: center;
mask-size: 20px;
mask-repeat: no-repeat;
background: $primary-content;
}
@media only screen and (max-width: 480px) {
.mx_LegacyRoomHeader_wrapper {
padding: 0;
margin: 0;
}
.mx_LegacyRoomHeader {
overflow: hidden;
}
}
res/css/views/rooms/_LinkPreviewGroup.pcss
+30
View File
@@ -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
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 img,
.mx_LinkPreviewGroup_hide:focus-visible:focus svg {
visibility: visible;
}
> .mx_AccessibleButton {
color: $accent;
text-align: center;
}
}
res/css/views/rooms/_LinkPreviewWidget.pcss
+69
View File
@@ -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
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;
}
}
}
res/css/views/rooms/_LiveContentSummary.pcss
+48
View File
@@ -0,0 +1,48 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_LiveContentSummary {
color: $secondary-content;
.mx_LiveContentSummary_text {
&::before {
display: inline-block;
vertical-align: text-bottom;
content: "";
background-color: $secondary-content;
mask-size: 16px;
width: 16px;
height: 16px;
margin-right: 4px;
}
&.mx_LiveContentSummary_text_video::before {
mask-image: url("$(res)/img/element-icons/call/video-call.svg");
}
&.mx_LiveContentSummary_text_active {
color: $accent;
&::before {
background-color: $accent;
}
}
}
.mx_LiveContentSummary_participants::before {
display: inline-block;
vertical-align: text-bottom;
content: "";
background-color: $secondary-content;
mask-image: url("$(res)/img/element-icons/group-members.svg");
mask-size: 16px;
width: 16px;
height: 16px;
margin-right: 2px;
}
}
res/css/views/rooms/_MemberList.pcss
+69
View File
@@ -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
Please see LICENSE files in the repository root for full details.
*/
.mx_MemberList {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
.mx_Spinner {
flex: 1 0 auto;
}
.mx_SearchBox {
margin-bottom: 5px;
}
h2 {
text-transform: uppercase;
color: $h3-color;
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-13px;
padding-left: 3px;
padding-right: 12px;
margin-top: 8px;
margin-bottom: 4px;
}
.mx_AutoHideScrollbar {
flex: 1 1 0;
margin-top: var(--cpd-space-3x);
}
}
.mx_MemberList_chevron {
position: absolute;
right: 35px;
margin-top: -15px;
}
.mx_MemberList_border {
overflow-y: auto;
order: 1;
flex: 1 1 0px;
}
.mx_MemberList_query {
height: 16px;
/* stricter rule to override the one in _common.pcss */
&[type="text"] {
font-size: $font-12px;
}
}
.mx_MemberList_wrapper {
padding: 10px;
}
.mx_MemberList_invite {
margin: 0 var(--cpd-space-2x);
width: calc(100% - var(--cpd-space-4x));
}
res/css/views/rooms/_MessageComposer.pcss
+342
View File
@@ -0,0 +1,342 @@
/*
Copyright 2018-2024 New Vector Ltd.
Copyright 2015, 2016 OpenMarket Ltd
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_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_autocomplete_wrapper {
position: relative;
height: 0;
}
.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_composecontrols {
width: 100%;
}
.mx_MessageComposer_e2eIconWrapper {
height: 12px; /* Match the height of the E2E icon for alignment */
}
.mx_MessageComposer_e2eIcon.mx_E2EIcon {
position: absolute;
left: 20px;
margin-right: 0; /* Counteract the E2EIcon class */
margin-left: 3px; /* Counteract the E2EIcon class */
width: 12px;
height: 12px;
}
.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_wrapper {
flex: 1;
display: flex;
flex-direction: column;
cursor: text;
}
.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_editor {
width: 100%;
max-height: 120px;
min-height: 19px;
overflow-y: auto;
overflow-x: hidden;
word-break: break-word;
/* FIXME: rather unpleasant hack to get rid of <p/> margins. */
/* really we should be mixing in markdown-body from github-markdown-css instead */
> :first-child {
margin-top: 0 !important;
}
> :last-child {
margin-bottom: 0 !important;
}
}
@keyframes visualbell {
from {
background-color: $visual-bell-bg-color;
}
to {
background-color: $background;
}
}
.mx_MessageComposer_input_error {
animation: 0.2s visualbell;
}
.mx_MessageComposer_button_highlight {
@mixin composerButtonHighLight;
}
.mx_MessageComposer_button {
@mixin composerButton 50%, var(--cpd-color-icon-primary), var(--cpd-color-bg-subtle-primary);
&: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;
}
}
&.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled)::before {
background-color: $alert;
}
}
.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_hangup:not(.mx_AccessibleButton_disabled)::before {
background-color: $alert;
}
}
}
.mx_MessageComposer_upload::before {
mask-image: url("$(res)/img/element-icons/room/composer/attach.svg");
}
.mx_MessageComposer_poll::before {
mask-image: url("$(res)/img/element-icons/room/composer/poll.svg");
}
.mx_MessageComposer_voiceMessage::before {
mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg");
}
.mx_MessageComposer_voiceBroadcast::before {
mask-image: url("$(res)/img/element-icons/live.svg");
}
.mx_MessageComposer_plain_text::before {
mask-image: url("$(res)/img/element-icons/room/composer/plain_text.svg");
}
.mx_MessageComposer_rich_text::before {
mask-image: url("@vector-im/compound-design-tokens/icons/text-formatting.svg");
}
.mx_MessageComposer_location::before {
mask-image: url("@vector-im/compound-design-tokens/icons/location-pin-solid.svg");
}
.mx_MessageComposer_stickers::before {
mask-image: url("$(res)/img/element-icons/room/composer/sticker.svg");
}
.mx_MessageComposer_buttonMenu::before {
mask-image: url("$(res)/img/image-view/more.svg");
}
.mx_MessageComposer_sendMessage {
cursor: pointer;
position: relative;
width: 32px;
height: 32px;
border-radius: 100%;
background-color: var(--cpd-color-icon-accent-tertiary);
&::before {
position: absolute;
height: 16px;
width: 16px;
top: 8px;
left: 9px;
mask-image: url("$(res)/img/element-icons/send-message.svg");
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
background-color: var(--cpd-color-icon-on-solid-primary);
content: "";
}
}
.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;
}
&:not(.mx_MessageComposer_e2eStatus) {
.mx_MessageComposer_wrapper {
padding: 0;
}
}
.mx_MessageComposer_button:last-child {
margin-right: 0;
}
.mx_MessageComposer_e2eIcon {
left: 0;
}
}
res/css/views/rooms/_MessageComposerFormatBar.pcss
+97
View File
@@ -0,0 +1,97 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2019 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_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;
&:hover {
background: var(--cpd-color-bg-subtle-secondary);
border-radius: 6px;
z-index: 1;
}
}
.mx_MessageComposerFormatBar_button::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 20px;
background-color: var(--cpd-color-icon-secondary);
}
.mx_MessageComposerFormatBar_button:hover::after {
background-color: var(--cpd-color-icon-primary);
}
.mx_MessageComposerFormatBar_buttonIconBold::after {
mask-image: url("@vector-im/compound-design-tokens/icons/bold.svg");
}
.mx_MessageComposerFormatBar_buttonIconItalic::after {
mask-image: url("@vector-im/compound-design-tokens/icons/italic.svg");
}
.mx_MessageComposerFormatBar_buttonIconStrikethrough::after {
mask-image: url("@vector-im/compound-design-tokens/icons/strikethrough.svg");
}
.mx_MessageComposerFormatBar_buttonIconQuote::after {
mask-image: url("@vector-im/compound-design-tokens/icons/quote.svg");
}
.mx_MessageComposerFormatBar_buttonIconCode::after {
mask-image: url("@vector-im/compound-design-tokens/icons/inline-code.svg");
}
.mx_MessageComposerFormatBar_buttonIconInsertLink::after {
mask-image: url("@vector-im/compound-design-tokens/icons/link.svg");
}
}
.mx_MessageComposerFormatBar_buttonTooltip {
white-space: nowrap;
font-size: $font-13px;
font-weight: var(--cpd-font-weight-semibold);
min-width: 54px;
text-align: center;
}
res/css/views/rooms/_NewRoomIntro.pcss
+58
View File
@@ -0,0 +1,58 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_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;
&:not(.mx_AccessibleButton_kind_primary_outline)::before {
content: "";
display: inline-block;
background-color: $button-fg-color;
mask-position: center;
mask-repeat: no-repeat;
mask-size: 20px;
width: 20px;
height: 20px;
margin-right: 5px;
vertical-align: text-bottom;
}
}
.mx_NewRoomIntro_inviteButton::before {
mask-image: url("$(res)/img/element-icons/room/invite.svg");
}
}
> 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;
}
}
res/css/views/rooms/_NotificationBadge.pcss
+85
View File
@@ -0,0 +1,85 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_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;
/* 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);
}
&.mx_NotificationBadge_knocked {
mask-image: url("$(res)/img/element-icons/ask-to-join.svg");
width: 12px;
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);
}
}
}
res/css/views/rooms/_PinnedEventTile.pcss
+61
View File
@@ -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
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;
}
}
}
}
res/css/views/rooms/_PinnedMessageBanner.pcss
+116
View File
@@ -0,0 +1,116 @@
/*
* Copyright 2024 New Vector Ltd.
* Copyright 2024 The Matrix.org Foundation C.I.C.
*
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
* Please see LICENSE files in the repository root for full details.
*/
.mx_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) rgba(27, 29, 34, 0.1);
.mx_PinnedMessageBanner_main {
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;
font: var(--cpd-font-body-sm-regular);
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.mx_PinnedMessageBanner_prefix {
font: var(--cpd-font-body-sm-semibold);
}
}
.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;
}
}
}
res/css/views/rooms/_PresenceLabel.pcss
+16
View File
@@ -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
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);
}
res/css/views/rooms/_ReadReceiptGroup.pcss
+135
View File
@@ -0,0 +1,135 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_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 {
box-sizing: content-box;
position: absolute;
border: 1px solid $background;
width: 14px;
height: 14px;
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;
}
res/css/views/rooms/_ReplyPreview.pcss
+54
View File
@@ -0,0 +1,54 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2018 Vector Creations Ltd
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_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 {
background-color: $primary-content;
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
}
}
}
}
.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;
}
}
res/css/views/rooms/_ReplyTile.pcss
+140
View File
@@ -0,0 +1,140 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2020 Tulir Asokan <tulir@maunium.net>
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
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);
&.mx_ReplyTile_audio .mx_MFileBody_info_icon::before {
mask-image: url("@vector-im/compound-design-tokens/icons/volume-on-solid.svg");
}
&.mx_ReplyTile_video .mx_MFileBody_info_icon::before {
mask-image: url("$(res)/img/element-icons/call/video-call.svg");
}
> 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 {
line-height: 14px; /* To match size */
}
}
}
res/css/views/rooms/_RoomBreadcrumbs.pcss
+43
View File
@@ -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
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;
}
}
res/css/views/rooms/_RoomCallBanner.pcss
+46
View File
@@ -0,0 +1,46 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_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;
&::before {
display: inline-block;
vertical-align: middle;
content: "";
background-color: $secondary-content;
mask-size: 16px;
mask-position-y: center;
width: 16px;
height: 1.2em; /* to match line height */
margin-right: 8px;
mask-image: url("$(res)/img/element-icons/call/video-call.svg");
}
}
res/css/views/rooms/_RoomHeader.pcss
+90
View File
@@ -0,0 +1,90 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_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;
}
.mx_RoomHeader:hover {
background-color: $header-panel-bg-hover;
}
.mx_RoomHeader_infoWrapper {
/* unset button styles */
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;
}
.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;
/* 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_RoomHeader .mx_BaseAvatar {
flex-shrink: 0;
}
res/css/views/rooms/_RoomInfoLine.pcss
+52
View File
@@ -0,0 +1,52 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_RoomInfoLine {
color: $secondary-content;
display: inline-block;
&::before {
content: "";
display: inline-block;
height: 1.2em;
mask-position-y: center;
mask-repeat: no-repeat;
background-color: $tertiary-content;
vertical-align: text-bottom;
margin-right: 6px;
}
&.mx_RoomInfoLine_public::before {
width: 12px;
mask-size: 12px;
mask-image: url("$(res)/img/globe.svg");
}
&.mx_RoomInfoLine_private::before {
width: 10px;
mask-size: 10px;
mask-image: url("$(res)/img/element-icons/lock.svg");
}
&.mx_RoomInfoLine_video::before {
width: 16px;
mask-size: 16px;
mask-image: url("$(res)/img/element-icons/call/video-call.svg");
}
.mx_RoomInfoLine_members {
color: inherit;
text-decoration: inherit;
font-weight: inherit;
&::before {
content: "·"; /* visual separator */
margin: 0 6px;
}
}
}
res/css/views/rooms/_RoomKnocksBar.pcss
+42
View File
@@ -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
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);
}
res/css/views/rooms/_RoomList.pcss
+36
View File
@@ -0,0 +1,36 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_RoomList {
padding-right: 7px; /* width of the scrollbar, to line things up */
}
.mx_RoomList_iconPlus::before {
mask-image: url("$(res)/img/element-icons/roomlist/plus-circle.svg");
}
.mx_RoomList_iconNewRoom::before {
mask-image: url("$(res)/img/element-icons/roomlist/hash-plus.svg");
}
.mx_RoomList_iconNewVideoRoom::before {
mask-image: url("$(res)/img/element-icons/roomlist/hash-video.svg");
}
.mx_RoomList_iconAddExistingRoom::before {
mask-image: url("$(res)/img/element-icons/roomlist/hash.svg");
}
.mx_RoomList_iconExplore::before {
mask-image: url("$(res)/img/element-icons/roomlist/hash-search.svg");
}
.mx_RoomList_iconDialpad::before {
mask-image: url("$(res)/img/element-icons/roomlist/dialpad.svg");
}
.mx_RoomList_iconStartChat::before {
mask-image: url("$(res)/img/element-icons/roomlist/member-plus.svg");
}
.mx_RoomList_iconInvite::before {
mask-image: url("$(res)/img/element-icons/room/share.svg");
}
res/css/views/rooms/_RoomListHeader.pcss
+108
View File
@@ -0,0 +1,108 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_RoomListHeader {
display: flex;
align-items: center;
.mx_RoomListHeader_contextLessTitle,
.mx_RoomListHeader_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_RoomListHeader_contextMenuButton {
border-radius: 6px;
&:hover {
background-color: $quinary-content;
}
&::before {
content: "";
width: 20px;
height: 20px;
top: 3px;
right: 0;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $tertiary-content;
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
}
&[aria-expanded="true"] {
background-color: $quinary-content;
&::before {
transform: rotate(180deg);
}
}
}
.mx_RoomListHeader_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;
&::before {
content: "";
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: $secondary-content;
mask-image: url("$(res)/img/element-icons/roomlist/plus.svg");
}
&:hover {
background-color: $tertiary-content;
&::before {
background-color: $background;
}
}
}
}
.mx_RoomListHeader_iconInvite::before {
mask-image: url("$(res)/img/element-icons/room/invite.svg");
}
.mx_RoomListHeader_iconStartChat::before {
mask-image: url("$(res)/img/element-icons/roomlist/member-plus.svg");
}
.mx_RoomListHeader_iconNewRoom::before {
mask-image: url("$(res)/img/element-icons/roomlist/hash-plus.svg");
}
.mx_RoomListHeader_iconNewVideoRoom::before {
mask-image: url("$(res)/img/element-icons/roomlist/hash-video.svg");
}
.mx_RoomListHeader_iconExplore::before {
mask-image: url("$(res)/img/element-icons/roomlist/hash-search.svg");
}
.mx_RoomListHeader_iconPlus::before {
mask-image: url("$(res)/img/element-icons/plus.svg");
}
res/css/views/rooms/_RoomPreviewBar.pcss
+169
View File
@@ -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
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%;
}
res/css/views/rooms/_RoomPreviewCard.pcss
+122
View File
@@ -0,0 +1,122 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_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;
position: relative;
padding-left: calc(20px + $spacing-8);
&::before {
content: "";
position: absolute;
height: $font-24px;
width: 20px;
left: 0;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: url("$(res)/img/element-icons/room/room-summary.svg");
background-color: $secondary-content;
}
}
.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: 50px;
height: 50px;
border-radius: calc((50px + 2 * 3px) / 2);
background-color: $accent;
border: 3px solid $system;
position: relative;
left: calc(-50px / 4 - 3px);
&::before {
content: "";
background-color: $button-primary-fg-color;
position: absolute;
width: 50px;
height: 50px;
mask-size: 22px;
mask-position: center;
mask-repeat: no-repeat;
mask-image: url("$(res)/img/element-icons/call/video-call.svg");
}
}
/* 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 {
margin-top: $spacing-20;
}
.mx_RoomPreviewCard_joinButtons {
margin-top: $spacing-20;
display: flex;
gap: $spacing-20;
.mx_AccessibleButton {
max-width: 200px;
padding: 14px 0;
flex-grow: 1;
}
}
}
res/css/views/rooms/_RoomSearchAuxPanel.pcss
+64
View File
@@ -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
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;
}
}
res/css/views/rooms/_RoomSublist.pcss
+424
View File
@@ -0,0 +1,424 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_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;
&::before {
content: "";
width: 16px;
height: 16px;
position: absolute;
top: 4px;
left: 4px;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: var(--cpd-color-icon-secondary);
}
}
.mx_RoomSublist_auxButton:hover,
.mx_RoomSublist_menuButton:hover {
background: $panel-actions;
}
/* Hide the menu button by default */
.mx_RoomSublist_menuButton {
visibility: hidden;
width: 0;
margin: 0;
}
.mx_RoomSublist_auxButton::before {
mask-image: url("$(res)/img/element-icons/roomlist/plus.svg");
}
.mx_RoomSublist_menuButton::before {
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
}
.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;
&::before {
content: "";
width: 18px;
height: 18px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-color: var(--cpd-color-icon-secondary);
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
}
&.mx_RoomSublist_collapseBtn_collapsed::before {
transform: rotate(-90deg);
}
}
}
}
/* 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;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: $tertiary-content;
left: -1px; /* adjust for image position */
}
.mx_RoomSublist_showMoreButtonChevron,
.mx_RoomSublist_showLessButtonChevron {
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
}
.mx_RoomSublist_showLessButtonChevron {
transform: rotate(180deg);
}
}
&.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;
&::before {
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;
&::before {
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,
.mx_Checkbox {
margin-top: 8px;
}
}
.mx_RoomSublist_skeletonUI {
position: relative;
margin-left: 4px;
height: 240px;
&::before {
background: $roomsublist-skeleton-ui-bg;
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 */
}
res/css/views/rooms/_RoomTile.pcss
+243
View File
@@ -0,0 +1,243 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2020-2023 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
/* 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: 20px;
min-width: 20px; /* yay flex */
height: 20px;
margin-top: auto;
margin-bottom: auto;
position: relative;
display: none;
&::before {
top: 2px;
left: 2px;
content: "";
width: 16px;
height: 16px;
position: absolute;
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background: 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;
}
.mx_RoomTile_menuButton::before {
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
}
&: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;
}
}
}
/* We use these both in context menus and the room tiles */
.mx_RoomTile_iconBell::before {
mask-image: url("$(res)/img/element-icons/notifications.svg");
}
.mx_RoomTile_iconBellDot::before {
mask-image: url("$(res)/img/element-icons/roomlist/notifications-default.svg");
}
.mx_RoomTile_iconBellCrossed::before {
mask-image: url("$(res)/img/element-icons/roomlist/notifications-off.svg");
}
.mx_RoomTile_iconBellMentions::before {
mask-image: url("$(res)/img/element-icons/roomlist/notifications-dm.svg");
}
.mx_RoomTile_contextMenu {
.mx_RoomTile_iconStar::before {
mask-image: url("$(res)/img/element-icons/roomlist/favorite.svg");
}
.mx_RoomTile_iconArrowDown::before {
mask-image: url("$(res)/img/element-icons/roomlist/low-priority.svg");
}
.mx_RoomTile_iconNotificationsDefault::before {
mask-image: url("$(res)/img/element-icons/notifications.svg");
}
.mx_RoomTile_iconNotificationsAllMessages::before {
mask-image: url("$(res)/img/element-icons/roomlist/notifications-default.svg");
}
.mx_RoomTile_iconNotificationsMentionsKeywords::before {
mask-image: url("$(res)/img/element-icons/roomlist/notifications-dm.svg");
}
.mx_RoomTile_iconNotificationsNone::before {
mask-image: url("$(res)/img/element-icons/roomlist/notifications-off.svg");
}
.mx_RoomTile_iconPeople::before {
mask-image: url("$(res)/img/element-icons/room/members.svg");
}
.mx_RoomTile_iconFiles::before {
mask-image: url("$(res)/img/element-icons/room/files.svg");
}
.mx_RoomTile_iconPins::before {
mask-image: url("$(res)/img/element-icons/room/pin-upright.svg");
}
.mx_RoomTile_iconWidgets::before {
mask-image: url("$(res)/img/element-icons/room/apps.svg");
}
.mx_RoomTile_iconSettings::before {
mask-image: url("$(res)/img/element-icons/settings.svg");
}
.mx_RoomTile_iconExport::before {
mask-image: url("$(res)/img/element-icons/export.svg");
}
.mx_RoomTile_iconCopyLink::before {
mask-image: url("$(res)/img/element-icons/link.svg");
}
.mx_RoomTile_iconInvite::before {
mask-image: url("$(res)/img/element-icons/room/invite.svg");
}
.mx_RoomTile_iconSignOut::before {
mask-image: url("$(res)/img/element-icons/leave.svg");
}
}
res/css/views/rooms/_RoomUpgradeWarningBar.pcss
+44
View File
@@ -0,0 +1,44 @@
/*
Copyright 2018-2024 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_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%;
}
res/css/views/rooms/_SendMessageComposer.pcss
+43
View File
@@ -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
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;
}
}
}
res/css/views/rooms/_Stickers.pcss
+46
View File
@@ -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;
}
res/css/views/rooms/_ThirdPartyMemberInfo.pcss
+11
View File
@@ -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
Please see LICENSE files in the repository root for full details.
*/
.mx_ThirdPartyMemberInfo {
padding: var(--cpd-space-4x);
}
res/css/views/rooms/_ThreadSummary.pcss
+130
View File
@@ -0,0 +1,130 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_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;
&::before {
content: "";
position: absolute;
top: 50%;
right: $spacing-12;
transform: translateY(-50%);
width: 12px;
height: 12px;
mask-image: url("$(res)/img/compound/chevron-right-12px.svg");
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
background-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;
&::before {
@mixin ThreadSummaryIcon;
vertical-align: middle;
margin-inline-end: $spacing-8;
margin-top: -2px;
}
a& {
color: $secondary-content;
}
}
res/css/views/rooms/_TopUnreadMessagesBar.pcss
+71
View File
@@ -0,0 +1,71 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2016 OpenMarket Ltd
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_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;
border-radius: 19px;
box-sizing: border-box;
background: $background;
border: 1.3px solid var(--cpd-color-icon-tertiary);
cursor: pointer;
}
.mx_TopUnreadMessagesBar_scrollUp::before {
content: "";
position: absolute;
width: 36px;
height: 36px;
mask-image: url("$(res)/img/element-icons/message/chevron-up.svg");
mask-repeat: no-repeat;
mask-size: 20px;
mask-position: center;
background: 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;
}
.mx_TopUnreadMessagesBar_markAsRead::before {
content: "";
position: absolute;
width: 18px;
height: 18px;
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-repeat: no-repeat;
mask-size: 16px;
mask-position: center;
background: var(--cpd-color-icon-tertiary);
}
res/css/views/rooms/_VoiceRecordComposerTile.pcss
+117
View File
@@ -0,0 +1,117 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_VoiceRecordComposerTile_stop {
/* 28px plus a 2px border makes this a 32px square (as intended) */
width: 28px;
height: 28px;
border: 2px solid $voice-record-stop-border-color;
border-radius: 32px;
margin-right: 2px; /* between us and the waveform component */
position: relative;
&::after {
content: "";
width: 14px;
height: 14px;
position: absolute;
top: 7px;
left: 7px;
border-radius: 2px;
background-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) */
background-color: $voice-record-icon-color;
mask-repeat: no-repeat;
mask-size: contain;
mask-image: url("$(res)/img/element-icons/trashcan.svg");
}
.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;
}
}
res/css/views/rooms/_WhoIsTypingTile.pcss
+64
View File
@@ -0,0 +1,64 @@
/*
Copyright 2018-2024 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_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;
}
}
res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss
+50
View File
@@ -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
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;
}
}
}
res/css/views/rooms/wysiwyg_composer/_SendWysiwygComposer.pcss
+78
View File
@@ -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
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;
}
}
res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+173
View File
@@ -0,0 +1,173 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_WysiwygComposer_Editor_container {
@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: $tertiary-content;
}
}
.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;
}
}
res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss
+66
View File
@@ -0,0 +1,66 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_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;
}
}
res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
+39
View File
@@ -0,0 +1,39 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_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;
}
}
}
}