mirror of
https://github.com/Novaloop-AG/healthchat-web.git
synced 2026-11-03 06:55:44 +00:00
Absorb the matrix-react-sdk repository (#28192)
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
committed by
GitHub
GitHub
parent
2b99496025
commit
c05c429803
@@ -0,0 +1,145 @@
|
||||
/*
|
||||
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_BaseCard {
|
||||
--BaseCard_EventTile_line-padding-block: 2px;
|
||||
--BaseCard_EventTile-spacing-inline: 36px;
|
||||
--BaseCard_header-button-size: 28px;
|
||||
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
font-size: var(--cpd-font-size-body-md);
|
||||
|
||||
.mx_BaseCard_header {
|
||||
height: 64px;
|
||||
padding: var(--cpd-space-4x);
|
||||
box-sizing: border-box;
|
||||
/* changing the color from $separator to transparent as it is
|
||||
the best visual output during the transition period. This will be
|
||||
reintroduced at a later stage. */
|
||||
border-bottom: 1px solid transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--cpd-space-3x);
|
||||
flex-shrink: 0;
|
||||
border-block-end: var(--cpd-border-width-1) solid $separator;
|
||||
|
||||
.mx_BaseCard_header_spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
> h2 {
|
||||
margin: 0 44px;
|
||||
font: var(--cpd-font-body-sm-semibold);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mx_BaseCard_header_title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 24px;
|
||||
flex: 1;
|
||||
|
||||
.mx_BaseCard_header_title_heading {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font: var(--cpd-font-body-md-medium);
|
||||
color: var(--cpd-color-text-secondary);
|
||||
}
|
||||
|
||||
.mx_BaseCard_header_title_button--option {
|
||||
position: relative;
|
||||
width: var(--BaseCard_header-button-size);
|
||||
height: var(--BaseCard_header-button-size);
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-image: url("$(res)/img/element-icons/message/overflow-large.svg");
|
||||
background-color: $secondary-content;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
background-color: $primary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AutoHideScrollbar {
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.mx_BaseCard_footer {
|
||||
padding-top: $spacing-4;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.mx_AccessibleButton_kind_secondary {
|
||||
color: $secondary-content;
|
||||
background-color: rgba(141, 151, 165, 0.2);
|
||||
font: var(--cpd-font-body-md-semibold);
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ContextualMenu_wrapper.mx_BaseCard_header_title {
|
||||
.mx_ContextualMenu {
|
||||
position: initial;
|
||||
|
||||
span:first-of-type {
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
font-size: inherit;
|
||||
color: $primary-content;
|
||||
}
|
||||
|
||||
font: var(--cpd-font-body-sm-regular);
|
||||
color: $primary-content;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
|
||||
box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.mx_ContextualMenu_chevron_top {
|
||||
left: auto;
|
||||
right: 22px;
|
||||
border-bottom-color: var(--cpd-color-border-interactive-secondary);
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
border: inherit;
|
||||
border-bottom-color: var(--cpd-color-bg-canvas-default);
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: -8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
/*
|
||||
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_EmptyState {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: var(--cpd-space-4x);
|
||||
text-align: center;
|
||||
|
||||
svg {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
padding: var(--cpd-space-3x);
|
||||
background-color: $panel-actions;
|
||||
}
|
||||
|
||||
&::before {
|
||||
/* Bloom using magic numbers directly out of Figma */
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 642px;
|
||||
height: 775px;
|
||||
right: -253.77px;
|
||||
top: 0;
|
||||
background: radial-gradient(49.95% 49.95% at 50% 50%, rgba(13, 189, 139, 0.12) 0%, rgba(18, 115, 235, 0) 100%);
|
||||
transform: rotate(-89.69deg);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
/*
|
||||
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_EncryptionInfo_spinner {
|
||||
.mx_Spinner {
|
||||
margin-top: 25px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
/*
|
||||
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_ExtensionsCard {
|
||||
--cpd-separator-inset: var(--cpd-space-4x);
|
||||
--cpd-separator-spacing: var(--cpd-space-4x);
|
||||
|
||||
.mx_AutoHideScrollbar {
|
||||
padding: 0 var(--cpd-space-4x);
|
||||
margin-top: var(--cpd-space-3x);
|
||||
box-sizing: border-box;
|
||||
|
||||
/* Styling for the "Add extensions" button */
|
||||
& > button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ExtensionsCard_container {
|
||||
text-align: center;
|
||||
margin: $spacing-20 var(--cpd-space-4x) 0;
|
||||
}
|
||||
|
||||
.mx_ExtensionsCard_Button {
|
||||
/* this button is special so we have to override some of the original styling */
|
||||
/* as we will be applying it in its children */
|
||||
padding: 0;
|
||||
height: auto;
|
||||
color: $tertiary-content;
|
||||
position: relative;
|
||||
|
||||
.mx_WidgetAvatar {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mx_ExtensionsCard_icon_app {
|
||||
padding: var(--cpd-space-2x) var(--cpd-space-12x) var(--cpd-space-2x) var(--cpd-space-3x);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
margin: 0 var(--cpd-space-3x);
|
||||
color: $primary-content;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ExtensionsCard_app_pinToggle,
|
||||
.mx_ExtensionsCard_app_options {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%; /* to give bigger interactive zone */
|
||||
width: 24px;
|
||||
padding: var(--cpd-space-3x) var(--cpd-space-1x);
|
||||
box-sizing: border-box;
|
||||
min-width: 24px; /* prevent flexbox crushing */
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
top: var(--cpd-space-2x); /* equal to padding-top of parent */
|
||||
left: 0;
|
||||
border-radius: 12px;
|
||||
background-color: rgba(141, 151, 165, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: 16px;
|
||||
background-color: $icon-button-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ExtensionsCard_app_pinToggle {
|
||||
right: 8px;
|
||||
|
||||
&::before {
|
||||
mask-image: url("$(res)/img/element-icons/room/pin-upright.svg");
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ExtensionsCard_app_options {
|
||||
right: 32px; /* 24 + 8 */
|
||||
&::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_ExtensionsCard_Button_pinned {
|
||||
&::after {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.mx_ExtensionsCard_app_pinToggle::before {
|
||||
background-color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: unset;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: var(--cpd-space-2x); /* re-align based on the height change */
|
||||
pointer-events: none; /* pass through to the real button */
|
||||
}
|
||||
}
|
||||
|
||||
/* Set layout for everyone button */
|
||||
a[data-kind="primary"] {
|
||||
margin-top: var(--cpd-space-10x);
|
||||
}
|
||||
|
||||
.mx_EmptyState::before {
|
||||
/* Overlap the Add extensions button */
|
||||
top: -76px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
/*
|
||||
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_PinnedMessagesCard {
|
||||
--unpin-height: 76px;
|
||||
|
||||
.mx_PinnedMessagesCard_wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: var(--cpd-space-4x);
|
||||
gap: var(--cpd-space-6x);
|
||||
overflow-y: auto;
|
||||
|
||||
.mx_PinnedMessagesCard_Separator {
|
||||
min-height: 1px;
|
||||
/* Override default compound value */
|
||||
margin-block: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_PinnedMessagesCard_wrapper_unpin_all {
|
||||
/* Remove the unpin all button height and the top and bottom padding */
|
||||
height: calc(100% - var(--unpin-height) - calc(var(--cpd-space-4x) * 2));
|
||||
}
|
||||
|
||||
.mx_PinnedMessagesCard_unpin {
|
||||
/* Make it float at the bottom of the unpin panel */
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: var(--unpin-height);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 4px 24px 0 rgba(27, 29, 34, 0.1);
|
||||
background: var(--cpd-color-bg-canvas-default);
|
||||
}
|
||||
|
||||
.mx_EventTile_body {
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
/*
|
||||
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_RoomSummaryCard {
|
||||
--cpd-separator-inset: var(--cpd-space-4x);
|
||||
--cpd-separator-spacing: var(--cpd-space-4x);
|
||||
|
||||
.mx_RoomSummaryCard_container {
|
||||
text-align: center;
|
||||
margin: $spacing-20 var(--cpd-space-4x) 0;
|
||||
}
|
||||
|
||||
.mx_RoomSummaryCard_roomName,
|
||||
.mx_RoomSummaryCard_alias {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: pre-wrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mx_RoomSummaryCard_alias {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mx_RoomSummaryCard_topic {
|
||||
padding: 0 12px;
|
||||
color: var(--cpd-color-text-secondary);
|
||||
|
||||
.mx_Box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx_RoomSummaryCard_topic_container {
|
||||
text-align: start;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mx_RoomSummaryCard_topic_edit {
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
p {
|
||||
white-space: pre-wrap;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_RoomSummaryCard_topic_chevron {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
&.mx_RoomSummaryCard_topic_collapsed {
|
||||
p {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: normal;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.mx_RoomSummaryCard_topic_chevron {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AccessibleButton_kind_link {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
font-size: $font-13px;
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSummaryCard_badges {
|
||||
margin: var(--cpd-space-4x) 0;
|
||||
}
|
||||
|
||||
.mx_RoomSummaryCard_search {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button {
|
||||
display: unset; /* override _common.pcss which inhibits this */
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomSummaryCard_roomName {
|
||||
margin: $spacing-12 0 $spacing-4;
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2021-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_ThreadPanel {
|
||||
height: 100px;
|
||||
overflow: visible;
|
||||
|
||||
/* Unset flex on the thread list, but not the thread view */
|
||||
&:not(.mx_ThreadView) .mx_BaseCard_header .mx_BaseCard_header_title {
|
||||
flex: unset;
|
||||
}
|
||||
|
||||
.mx_BaseCard_header {
|
||||
.mx_BaseCard_header_title {
|
||||
.mx_AccessibleButton {
|
||||
font-size: 12px;
|
||||
color: $secondary-content;
|
||||
}
|
||||
|
||||
.mx_ThreadPanel_vertical_separator {
|
||||
height: 16px;
|
||||
margin-left: var(--cpd-space-3x);
|
||||
margin-right: var(--cpd-space-1x);
|
||||
border-left: 1px solid var(--cpd-color-gray-400);
|
||||
}
|
||||
|
||||
.mx_ThreadPanel_dropdown {
|
||||
padding: 3px $spacing-4 3px $spacing-8;
|
||||
border-radius: 4px;
|
||||
line-height: 1.5;
|
||||
user-select: none;
|
||||
|
||||
&:hover,
|
||||
&[aria-expanded="true"] {
|
||||
background: $quinary-content;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: currentColor;
|
||||
mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
|
||||
mask-size: 100%;
|
||||
mask-repeat: no-repeat;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AutoHideScrollbar,
|
||||
.mx_RoomView_messagePanelSpinner {
|
||||
background-color: $background;
|
||||
border-radius: 8px;
|
||||
padding-inline-end: 0;
|
||||
overflow-y: scroll; /* set gap between the thread tile and the right border */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mx_EventTile[data-layout="group"] {
|
||||
.mx_MessageActionBar {
|
||||
right: 0;
|
||||
top: -36px; /* 2px above EventTile */
|
||||
z-index: 10; /* See _EventTile.pcss */
|
||||
}
|
||||
}
|
||||
|
||||
/* For style rules of EventTile in a thread, see _EventTile.pcss */
|
||||
&.mx_ThreadView {
|
||||
max-height: 100%;
|
||||
|
||||
.mx_ThreadView_timelinePanelWrapper {
|
||||
position: relative;
|
||||
min-height: 0; /* don't displace the composer */
|
||||
flex-grow: 1;
|
||||
|
||||
.mx_FileDropTarget {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MessageComposer_sendMessage {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// Make use of the space above the composer buttons too
|
||||
.mx_Autocomplete {
|
||||
width: calc(100% + 140px);
|
||||
}
|
||||
&.mx_ThreadView_narrow .mx_Autocomplete {
|
||||
width: calc(100% + 108px);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomView_messagePanel {
|
||||
&.mx_RoomView_messageListWrapper {
|
||||
position: initial;
|
||||
}
|
||||
|
||||
.mx_RoomView_messageListWrapper {
|
||||
width: calc(100% + 6px); /* 8px - 2px */
|
||||
}
|
||||
|
||||
.mx_RoomView_empty {
|
||||
display: contents;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_RoomView_MessageList {
|
||||
padding-inline-start: $spacing-8;
|
||||
padding-inline-end: $spacing-8;
|
||||
content-visibility: visible;
|
||||
}
|
||||
|
||||
.mx_EventTile,
|
||||
.mx_GenericEventListSummary {
|
||||
/* Account for scrollbar when hovering */
|
||||
padding-top: 0;
|
||||
|
||||
.mx_TimelineSeparator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.mx_EventTile_clamp:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MessageComposer {
|
||||
background-color: $background;
|
||||
border-radius: 8px;
|
||||
margin-top: 8px;
|
||||
padding: 0 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mx_MessageTimestamp {
|
||||
color: $secondary-content;
|
||||
}
|
||||
|
||||
.mx_BaseCard_footer {
|
||||
text-align: left;
|
||||
font-size: $font-12px;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 4px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
padding-right: 8px;
|
||||
|
||||
.mx_AccessibleButton_kind_link_inline {
|
||||
color: $secondary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_ThreadPanel_viewInRoom::before {
|
||||
mask-image: url("$(res)/img/element-icons/view-in-room.svg");
|
||||
}
|
||||
|
||||
.mx_ThreadPanel_copyLinkToThread::before {
|
||||
mask-image: url("$(res)/img/element-icons/link.svg");
|
||||
}
|
||||
|
||||
.mx_ContextualMenu_wrapper {
|
||||
.mx_ThreadPanel_Header_FilterOptionItem {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
padding: 10px 20px 10px 30px;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background-color: $event-selected-color;
|
||||
}
|
||||
|
||||
&[aria-checked="true"] {
|
||||
:first-child {
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
:first-child::before {
|
||||
content: "";
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 8px;
|
||||
mask-image: url("$(res)/img/feather-customised/check.svg");
|
||||
mask-size: 100%;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $primary-content;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
:last-child {
|
||||
color: $secondary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,188 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2021, 2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_TimelineCard {
|
||||
.mx_TimelineCard_timeline {
|
||||
overflow: hidden;
|
||||
position: relative; /* offset parent for jump to bottom button */
|
||||
flex: 1;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mx_NewRoomIntro {
|
||||
margin-inline-start: var(--BaseCard_EventTile-spacing-inline);
|
||||
margin-inline-end: var(--BaseCard_EventTile-spacing-inline);
|
||||
}
|
||||
|
||||
.mx_EventTile_content {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mx_EventTile {
|
||||
.mx_ThreadSummary {
|
||||
position: relative;
|
||||
padding-right: 11px;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -16px;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid $message-action-bar-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-layout="irc"],
|
||||
&[data-layout="group"] {
|
||||
--TimelineCard_ReadReceiptGroup-inset-block-start: -6px;
|
||||
|
||||
&.mx_EventTile_info .mx_EventTile_line,
|
||||
.mx_EventTile_line {
|
||||
padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-inline);
|
||||
padding-inline-end: var(--MessageTimestamp-width); /* ensure timestamp is not hidden */
|
||||
|
||||
.mx_EventTile_e2eIcon {
|
||||
inset-inline-start: $spacing-8;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_EventTile_info {
|
||||
.mx_EventTile_avatar {
|
||||
inset-inline-start: 18px;
|
||||
}
|
||||
|
||||
/* Info events should have the same size as state events, those
|
||||
* are usually wrapped in a generic event list summary */
|
||||
font: var(--cpd-font-body-sm-regular);
|
||||
}
|
||||
|
||||
.mx_EventTile_avatar {
|
||||
inset-inline-start: -3px;
|
||||
}
|
||||
|
||||
.mx_EventTile_msgOption {
|
||||
margin-inline-end: 0;
|
||||
|
||||
.mx_ReadReceiptGroup {
|
||||
top: var(--TimelineCard_ReadReceiptGroup-inset-block-start);
|
||||
}
|
||||
}
|
||||
|
||||
.mx_DisambiguatedProfile,
|
||||
.mx_ReactionsRow,
|
||||
.mx_ThreadSummary {
|
||||
margin-inline-start: var(--BaseCard_EventTile-spacing-inline);
|
||||
}
|
||||
|
||||
.mx_DisambiguatedProfile {
|
||||
max-width: calc(100% - var(--BaseCard_EventTile-spacing-inline)); /* instead of $left-gutter */
|
||||
}
|
||||
|
||||
.mx_ReplyTile .mx_DisambiguatedProfile {
|
||||
margin-inline-start: 0;
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
.mx_MessageTimestamp {
|
||||
inset-inline: auto 0;
|
||||
font-size: $font-12px;
|
||||
}
|
||||
|
||||
.mx_ReactionsRow {
|
||||
/* See: var(--ThreadView_group_spacing-end) for ReactionsRow on _EventTile.pcss */
|
||||
margin-inline-end: $spacing-8;
|
||||
}
|
||||
|
||||
.mx_ThreadSummary {
|
||||
margin-inline-end: 0;
|
||||
max-width: min(calc(100% - 36px), 600px);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-layout="irc"] {
|
||||
.mx_EventTile_avatar,
|
||||
.mx_MessageTimestamp {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-layout="group"] {
|
||||
/* Read receipt group on compact modern layout */
|
||||
/* This is required because mx_TimelineCard is a child element wrapped by mx_MatrixChat_useCompactLayout, */
|
||||
/* which specifies the default position of mx_ReadReceiptGroup on compact modern layout. */
|
||||
.mx_MatrixChat_useCompactLayout & .mx_ReadReceiptGroup {
|
||||
top: var(--TimelineCard_ReadReceiptGroup-inset-block-start);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-layout="bubble"] {
|
||||
&::before {
|
||||
z-index: auto; /* enable background color on hover */
|
||||
}
|
||||
|
||||
&.mx_EventTile_info .mx_MessageActionBar {
|
||||
/* 1px: border width */
|
||||
inset-inline-end: calc(var(--container-gap-width) + 1px);
|
||||
}
|
||||
|
||||
.mx_ReactionsRow {
|
||||
position: relative; /* display on hover */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LegacyCallEvent_wrapper {
|
||||
justify-content: center;
|
||||
margin: auto 5px;
|
||||
.mx_LegacyCallEvent {
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_GenericEventListSummary {
|
||||
&[data-layout="irc"],
|
||||
&[data-layout="group"] {
|
||||
.mx_EventTile_line,
|
||||
.mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
|
||||
padding-inline-start: var(--BaseCard_EventTile-spacing-inline);
|
||||
padding-inline-end: var(--MessageTimestamp-width); /* ensure timestamp is not hidden */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_WhoIsTypingTile {
|
||||
margin-left: -12px; /* undo padding on the message list */
|
||||
}
|
||||
|
||||
.mx_WhoIsTypingTile_avatars {
|
||||
flex-basis: 48px; /* 12 (padding on message list) + 36 (padding on event lines) */
|
||||
}
|
||||
|
||||
.mx_GenericEventListSummary_unstyledList, /* RR next to a message on the event list summary */
|
||||
.mx_RoomView_MessageList {
|
||||
/* RR next to a message on the messsge list */
|
||||
.mx_EventTile[data-layout="bubble"] {
|
||||
.mx_ReadReceiptGroup {
|
||||
/* 6px: scroll bar width (magic number) */
|
||||
/* stylelint-disable-next-line declaration-colon-space-after */
|
||||
inset-inline-end: calc(
|
||||
-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + var(--container-gap-width) + 6px
|
||||
);
|
||||
}
|
||||
|
||||
&.mx_EventTile_info {
|
||||
.mx_ReadReceiptGroup {
|
||||
inset-inline-end: -4px; /* align with RR outside of info tile */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,234 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2019 The Matrix.org Foundation C.I.C.
|
||||
Copyright 2015, 2016 OpenMarket Ltd
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_UserInfo.mx_BaseCard {
|
||||
/* UserInfo has a circular image at the top so it fits between the back & close buttons */
|
||||
padding-top: 0;
|
||||
overflow-y: auto;
|
||||
font-size: var(--cpd-font-size-body-sm);
|
||||
|
||||
.mx_UserInfo_cancel {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
border-radius: 4px;
|
||||
background-color: $dark-panel-bg-color;
|
||||
margin: 9px;
|
||||
z-index: 1; /* render on top of the right panel */
|
||||
|
||||
div {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
padding: 4px;
|
||||
mask-image: url("$(res)/img/minimise.svg");
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: 7px center;
|
||||
background-color: $header-panel-text-primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserInfo_container {
|
||||
padding: var(--cpd-space-4x) 0;
|
||||
margin: 0 var(--cpd-space-4x);
|
||||
|
||||
.mx_UserInfo_container_verifyButton {
|
||||
margin-top: $spacing-8;
|
||||
}
|
||||
|
||||
& + .mx_UserInfo_container {
|
||||
border-top: 1px solid $separator;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserInfo_memberDetailsContainer {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: $spacing-8;
|
||||
}
|
||||
|
||||
.mx_RoomTile_titleContainer {
|
||||
width: 154px;
|
||||
}
|
||||
|
||||
.mx_RoomTile_badge {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_RoomTile_title {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.mx_UserInfo_avatar {
|
||||
margin: $spacing-24 $spacing-32 0 $spacing-32;
|
||||
|
||||
.mx_UserInfo_avatar_transition {
|
||||
max-width: 120px;
|
||||
aspect-ratio: 1 / 1;
|
||||
margin: 0 auto;
|
||||
transition: 0.5s;
|
||||
|
||||
.mx_BaseAvatar {
|
||||
/* Override the calculated font-size so that the letter isn't tiny */
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.mx_BaseAvatar,
|
||||
.mx_BaseAvatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-transform: uppercase;
|
||||
color: $tertiary-content;
|
||||
font: var(--cpd-font-body-md-semibold);
|
||||
font-weight: var(--cpd-font-weight-semibold);
|
||||
margin: $spacing-4 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.mx_UserInfo_profile {
|
||||
h1 {
|
||||
font-size: $font-20px;
|
||||
line-height: $font-25px;
|
||||
|
||||
/* limit to 2 lines, show an ellipsis if it overflows */
|
||||
/* this looks webkit specific but is supported by Firefox 68+ */
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
/* E2E icon wrapper */
|
||||
.mx_Flex > span {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserInfo_profileStatus {
|
||||
margin: var(--cpd-space-1x) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserInfo_timezone {
|
||||
margin: var(--cpd-space-1x) 0;
|
||||
}
|
||||
|
||||
.mx_PresenceLabel {
|
||||
font: var(--cpd-font-body-sm-regular);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mx_UserInfo_memberDetails {
|
||||
.mx_UserInfo_profileField {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
margin: 6px 0;
|
||||
|
||||
.mx_UserInfo_roleDescription {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* try to make it the same height as the dropdown */
|
||||
margin: 11px 0 12px 0;
|
||||
}
|
||||
|
||||
.mx_Field {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserInfo_field {
|
||||
line-height: $font-16px;
|
||||
}
|
||||
|
||||
.mx_UserInfo_statusMessage {
|
||||
$statusNumberOfLines: 3;
|
||||
|
||||
font: var(--cpd-font-body-sm-regular);
|
||||
font-size: $font-11px;
|
||||
line-height: 1rem;
|
||||
opacity: 0.5;
|
||||
overflow: hidden;
|
||||
word-break: break-word;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
max-height: calc(1rem * $statusNumberOfLines);
|
||||
-webkit-line-clamp: $statusNumberOfLines;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.mx_AutoHideScrollbar {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.mx_UserInfo_devices {
|
||||
.mx_UserInfo_device {
|
||||
display: flex;
|
||||
margin: $spacing-8 0;
|
||||
|
||||
&.mx_UserInfo_device_verified {
|
||||
.mx_UserInfo_device_trusted {
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
&.mx_UserInfo_device_unverified {
|
||||
.mx_UserInfo_device_trusted {
|
||||
color: $alert;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserInfo_device_name {
|
||||
flex: 1;
|
||||
margin: 0 5px;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
/* both for icon in expand button and device item */
|
||||
.mx_E2EIcon {
|
||||
/* don't squeeze */
|
||||
flex: 0 0 auto;
|
||||
margin: 0;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.mx_UserInfo_expand {
|
||||
column-gap: 5px; /* cf: mx_UserInfo_device_name */
|
||||
margin-bottom: 11px;
|
||||
align-items: initial; /* Cancel the default property */
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_UserInfo_smallAvatar {
|
||||
.mx_UserInfo_avatar {
|
||||
.mx_UserInfo_avatar_transition {
|
||||
max-width: 72px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.mx_BaseAvatar {
|
||||
/* Override the calculated font-size so that the letter isn't tiny */
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
/*
|
||||
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_VerificationPanel_verified_section,
|
||||
.mx_VerificationPanel_reciprocate_section {
|
||||
/* center the big shield icon */
|
||||
.mx_E2EIcon {
|
||||
/* Override general user info margin */
|
||||
margin: 20px auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UserInfo.mx_BaseCard {
|
||||
.mx_UserInfo_container:not(.mx_UserInfo_separator) {
|
||||
> div > p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.mx_VerificationPanel_verifyByEmojiButton,
|
||||
.mx_UserInfo_wideButton {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.mx_EncryptionInfo_spinner,
|
||||
.mx_VerificationShowSas {
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: auto;
|
||||
}
|
||||
|
||||
.mx_Spinner,
|
||||
.mx_VerificationShowSas {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EncryptionPanel_cancel {
|
||||
@mixin customisedCancelButton;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
}
|
||||
|
||||
.mx_VerificationPanel_qrCode {
|
||||
padding: 4px 4px 0 4px;
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
/* Override general user info margin */
|
||||
margin: 0 auto !important;
|
||||
|
||||
canvas {
|
||||
/* override height and width which are set on the element directly */
|
||||
height: auto !important;
|
||||
width: 100% !important;
|
||||
max-width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_VerificationPanel_reciprocate_section {
|
||||
.mx_AccessibleButton {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Special case styling for EncryptionPanel in a Modal dialog */
|
||||
.mx_Dialog,
|
||||
.mx_CompleteSecurity_body {
|
||||
.mx_VerificationPanel_QRPhase_startOptions {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
|
||||
> .mx_VerificationPanel_QRPhase_betweenText {
|
||||
width: 50px;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mx_VerificationPanel_QRPhase_startOption {
|
||||
background-color: $header-panel-bg-color;
|
||||
border-radius: 10px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
max-width: 310px;
|
||||
justify-content: space-between;
|
||||
|
||||
canvas,
|
||||
.mx_VerificationPanel_QRPhase_noQR {
|
||||
width: 220px !important;
|
||||
height: 220px !important;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
> p {
|
||||
margin-top: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.mx_VerificationPanel_QRPhase_helpText {
|
||||
font: var(--cpd-font-body-md-regular);
|
||||
margin: 30px 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* EncryptionPanel when verification is done */
|
||||
.mx_VerificationPanel_verified_section {
|
||||
/* right align the "Got it" button */
|
||||
.mx_AccessibleButton {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_VerificationPanel_reciprocate_section {
|
||||
.mx_AccessibleButton {
|
||||
margin-left: 10px;
|
||||
padding: 7px 40px;
|
||||
}
|
||||
|
||||
.mx_VerificationPanel_reciprocateButtons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
/*
|
||||
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_WidgetCard {
|
||||
.mx_AppTileFullWidth {
|
||||
max-width: unset;
|
||||
width: auto !important;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user