22b0758bfb
The preview shown for a room you have not joined — the one carrying the join and ask-to-join buttons — has 4px corners, where the room preview card it stands in place of, the panel form of the same bar, and the surfaces beside it all have 8px. Sitting among them it reads as sharp, which is what was reported. Nothing else in the rule changes, and the panel form already had the right value, so the two forms of the bar now agree with each other as well. Co-authored-by: David Baker <dbkr@users.noreply.github.com>
171 lines
3.7 KiB
Plaintext
171 lines
3.7 KiB
Plaintext
/*
|
|
Copyright 2024 New Vector Ltd.
|
|
Copyright 2015-2022 The Matrix.org Foundation C.I.C.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
|
Please see LICENSE files in the repository root for full details.
|
|
*/
|
|
|
|
.mx_RoomPreviewBar {
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
display: flex;
|
|
-webkit-align-items: center;
|
|
|
|
h3 {
|
|
font-size: $font-18px;
|
|
font-weight: var(--cpd-font-weight-semibold);
|
|
|
|
&.mx_RoomPreviewBar_spinnerTitle {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
h3,
|
|
.mx_RoomPreviewBar_message p {
|
|
/* break-word, with fallback to break-all, which is wider supported */
|
|
word-break: break-all;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.mx_Spinner {
|
|
width: auto;
|
|
height: auto;
|
|
margin: 10px 10px 10px 0;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.mx_RoomPreviewBar_footer {
|
|
font-size: $font-12px;
|
|
line-height: $font-20px;
|
|
|
|
.mx_Spinner {
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mx_RoomPreviewBar_actions {
|
|
display: flex;
|
|
}
|
|
|
|
.mx_RoomPreviewBar_message {
|
|
display: flex;
|
|
align-items: stretch;
|
|
|
|
p {
|
|
overflow-wrap: break-word;
|
|
}
|
|
}
|
|
|
|
.mx_RoomPreviewBar_panel {
|
|
padding: 8px 8px 8px 20px;
|
|
|
|
flex-direction: row;
|
|
|
|
.mx_RoomPreviewBar_actions {
|
|
flex: 0 0 auto;
|
|
flex-direction: row;
|
|
padding: 3px 8px;
|
|
|
|
& > * {
|
|
margin-left: 12px;
|
|
}
|
|
}
|
|
|
|
.mx_RoomPreviewBar_message {
|
|
flex: 1 0 0;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
& > * {
|
|
margin: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* With maximised widgets, the panel fits in better when rounded */
|
|
.mx_MainSplit_maximisedWidget .mx_RoomPreviewBar_panel {
|
|
margin: var(--container-gap-width);
|
|
margin-right: calc(var(--container-gap-width) / 2); /* Shared with right panel */
|
|
margin-top: 0; /* Already covered by apps drawer */
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.mx_RoomPreviewBar_dialog {
|
|
margin: auto;
|
|
box-sizing: content;
|
|
width: 400px;
|
|
/* Matches the room preview card this stands in place of, and the panel form of this same bar */
|
|
border-radius: 8px;
|
|
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%;
|
|
}
|