nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

32
res/css/components/views/beacon/_StyledLiveBeaconIcon.pcss Normal file
View File

@@ -0,0 +1,32 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_StyledLiveBeaconIcon {
flex-grow: 0;
flex-shrink: 0;
box-sizing: border-box;
border-width: 2px;
border-style: solid;
border-radius: 50%;
background-color: $location-live-color;
border-color: $location-live-color;
padding: 2px;
/* colors icon */
color: white;
}
.mx_StyledLiveBeaconIcon.mx_StyledLiveBeaconIcon_error {
background-color: $alert;
border-color: $alert;
}
.mx_StyledLiveBeaconIcon.mx_StyledLiveBeaconIcon_idle {
background-color: $quaternary-content;
border-color: $quaternary-content;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,60 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_MapError {
padding: 100px $spacing-32 0;
text-align: center;
--mx-map-error-icon-color: $secondary-content;
--mx-map-error-icon-size: 58px;
}
.mx_MapError.mx_MapError_isMinimised {
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: $spacing-24;
background-color: $panels;
font-size: $font-12px;
line-height: $font-16px;
--mx-map-error-icon-color: $alert;
--mx-map-error-icon-size: 26px;
.mx_MapError_message {
margin: 0;
max-width: 275px;
}
.mx_MapError_heading {
padding-top: $spacing-8;
/* override h3 heading size */
font-size: inherit !important;
font-weight: normal !important;
}
}
.mx_MapError_message {
margin: $spacing-16 0 $spacing-32;
}
.mx_MapError_heading {
padding-top: $spacing-24;
}
.mx_MapError_icon {
height: var(--mx-map-error-icon-size);
path {
fill: var(--mx-map-error-icon-color);
}
}

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

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

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

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

46
res/css/components/views/location/_ShareDialogButtons.pcss Normal file
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_ShareDialogButtons {
position: absolute;
width: 100%;
height: 0;
top: 0;
}
.mx_ShareDialogButtons_button {
@mixin ButtonResetDefault;
height: 24px;
width: 24px;
border-radius: 50%;
background-color: $quinary-content;
opacity: 0.8;
text-align: center;
color: $secondary-content;
position: absolute;
top: $spacing-16;
&:hover,
&:focus {
opacity: 1;
}
&.left {
left: $spacing-16;
}
&.right {
right: $spacing-16;
}
}
.mx_ShareDialogButtons_button-icon {
width: 20px;
height: 20px;
margin: 2px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

41
res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss Normal file
View File

@@ -0,0 +1,41 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_DeviceExpandDetailsButton {
height: 32px;
width: 32px;
background: transparent;
border-radius: 4px;
color: $icon-button-color;
--icon-transform: rotate(-90deg);
&:hover {
background: $quinary-content;
}
}
.mx_DeviceExpandDetailsButton.mx_DeviceExpandDetailsButton_expanded {
--icon-transform: rotate(0deg);
background: $system;
&:hover {
background: $quinary-content;
}
}
.mx_DeviceExpandDetailsButton_icon {
height: 16px;
width: 16px;
transition: all 0.3s;
transform: var(--icon-transform);
transform-origin: center;
}

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

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

41
res/css/components/views/settings/devices/_DeviceTile.pcss Normal file
View File

@@ -0,0 +1,41 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_DeviceTile {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
}
.mx_DeviceTile_interactive {
cursor: pointer;
}
.mx_DeviceTile_info {
flex: 1 1 0;
}
.mx_DeviceTile_metadata {
margin-top: $spacing-4;
font: var(--cpd-font-body-sm-regular);
color: $secondary-content;
}
.mx_DeviceTile_inactiveIcon {
height: 14px;
margin-right: $spacing-8;
vertical-align: middle;
}
.mx_DeviceTile_actions {
display: grid;
grid-gap: $spacing-8;
grid-auto-flow: column;
margin-left: $spacing-8;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

32
res/css/components/views/spaces/_QuickThemeSwitcher.pcss Normal file
View File

@@ -0,0 +1,32 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
.mx_QuickThemeSwitcher {
display: flex;
align-items: center;
.mx_Dropdown {
min-width: 100px;
margin-left: auto;
height: min-content;
}
.mx_Dropdown_menu {
max-height: 70px;
}
}
.mx_QuickThemeSwitcher_heading {
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
text-transform: uppercase;
display: inline-block;
margin: 0;
}

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

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

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

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

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

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