riot-web/res/css/views/right_panel/_UserInfo.pcss

266 lines
6.9 KiB
Plaintext
Raw Normal View History

/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
2020-09-08 11:19:51 +02:00
.mx_UserInfo.mx_BaseCard {
/* UserInfo has a circular image at the top so it fits between the back & close buttons */
2020-09-08 11:19:51 +02:00
padding-top: 0;
overflow-y: auto;
font-size: var(--cpd-font-size-body-sm);
2019-11-13 17:59:22 +01:00
.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;
2022-12-12 12:24:14 +01:00
mask-image: url("$(res)/img/minimise.svg");
mask-repeat: no-repeat;
mask-position: 7px center;
2021-11-16 11:10:44 +01:00
background-color: $header-panel-text-primary-color;
}
2019-11-13 17:59:22 +01:00
}
2019-11-13 17:59:22 +01:00
h2 {
font-size: $font-18px;
font-weight: var(--cpd-font-weight-semibold);
margin: 18px 0 0 0;
2019-11-13 17:59:22 +01:00
}
2019-11-13 17:59:22 +01:00
.mx_UserInfo_container {
Organize UserInfo.scss (#8461) * .mx_UserInfo_profileField under .mx_UserInfo_memberDetails Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_UserInfo_container:not(.mx_UserInfo_separator) under .mx_UserInfo_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 1 .mx_UserInfo_avatar > div > div * Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 2 .mx_UserInfo_avatar > div > div Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 3 .mx_UserInfo_avatar > div Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 4 - .mx_BaseAvatar_initial - .mx_BaseAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 5 Move .mx_BaseAvatar_initial under .mx_BaseAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Replace a wildcard with className Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Specify className Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_UserInfo.mx_BaseCard.mx_UserInfo_smallAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix position of the E2E icon of expanding sessions button To prevent the icon from moving down a little bit Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-05-23 13:42:31 +02:00
padding: $spacing-8 $spacing-16;
&:not(.mx_UserInfo_separator) {
padding-top: $spacing-16;
padding-bottom: 0;
> :not(h3) {
margin-inline-start: $spacing-8;
display: flex;
flex-flow: column;
align-items: flex-start;
row-gap: $spacing-8;
}
}
.mx_UserInfo_container_verifyButton {
margin-top: $spacing-8;
}
}
.mx_UserInfo_separator {
border-bottom: 1px solid $separator;
2019-11-13 17:59:22 +01:00
}
2019-11-13 17:59:22 +01:00
.mx_UserInfo_memberDetailsContainer {
padding-top: 0;
2019-11-13 17:59:22 +01:00
padding-bottom: 0;
Organize UserInfo.scss (#8461) * .mx_UserInfo_profileField under .mx_UserInfo_memberDetails Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_UserInfo_container:not(.mx_UserInfo_separator) under .mx_UserInfo_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 1 .mx_UserInfo_avatar > div > div * Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 2 .mx_UserInfo_avatar > div > div Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 3 .mx_UserInfo_avatar > div Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 4 - .mx_BaseAvatar_initial - .mx_BaseAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 5 Move .mx_BaseAvatar_initial under .mx_BaseAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Replace a wildcard with className Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Specify className Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_UserInfo.mx_BaseCard.mx_UserInfo_smallAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix position of the E2E icon of expanding sessions button To prevent the icon from moving down a little bit Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-05-23 13:42:31 +02:00
margin-bottom: $spacing-8;
2019-11-13 17:59:22 +01:00
}
Voice rooms prototype (#8084) * Add voice room labs flag Signed-off-by: Robin Townsend <robin@robin.town> * Add more widget actions for interacting with Jitsi Signed-off-by: Robin Townsend <robin@robin.town> * Factor out a more generic Jitsi creation utility Signed-off-by: Robin Townsend <robin@robin.town> * Add utilities for managing voice channels Signed-off-by: Robin Townsend <robin@robin.town> * Enable creation of voice rooms Signed-off-by: Robin Townsend <robin@robin.town> * Force a maximized view of voice channel widgets Signed-off-by: Robin Townsend <robin@robin.town> * Add voice channel store Signed-off-by: Robin Townsend <robin@robin.town> * Factor out a more generic FacePile Signed-off-by: Robin Townsend <robin@robin.town> * Implement room tile changes for voice rooms Signed-off-by: Robin Townsend <robin@robin.town> * Add interactive radio component to the left panel Signed-off-by: Robin Townsend <robin@robin.town> * Test voice rooms Signed-off-by: Robin Townsend <robin@robin.town> * Update name of call room type Signed-off-by: Robin Townsend <robin@robin.town> * Clarify that voice rooms are under development Signed-off-by: Robin Townsend <robin@robin.town> * Use readonly Signed-off-by: Robin Townsend <robin@robin.town> * Move acks to the end of handlers Signed-off-by: Robin Townsend <robin@robin.town> * Add comment about avatar URLs coming from Jitsi Signed-off-by: Robin Townsend <robin@robin.town> * Don't use unicode ellipses for translation reasons? Signed-off-by: Robin Townsend <robin@robin.town> * Fix tests Signed-off-by: Robin Townsend <robin@robin.town> * Fix tests, again Signed-off-by: Robin Townsend <robin@robin.town> * Remove unnecessary export Signed-off-by: Robin Townsend <robin@robin.town> * Ack Jitsi events when we wait for them Signed-off-by: Robin Townsend <robin@robin.town>
2022-03-22 23:14:11 +01:00
.mx_RoomTile_titleContainer {
2019-11-13 17:59:22 +01:00
width: 154px;
}
2019-11-13 17:59:22 +01:00
.mx_RoomTile_badge {
display: none;
}
Voice rooms prototype (#8084) * Add voice room labs flag Signed-off-by: Robin Townsend <robin@robin.town> * Add more widget actions for interacting with Jitsi Signed-off-by: Robin Townsend <robin@robin.town> * Factor out a more generic Jitsi creation utility Signed-off-by: Robin Townsend <robin@robin.town> * Add utilities for managing voice channels Signed-off-by: Robin Townsend <robin@robin.town> * Enable creation of voice rooms Signed-off-by: Robin Townsend <robin@robin.town> * Force a maximized view of voice channel widgets Signed-off-by: Robin Townsend <robin@robin.town> * Add voice channel store Signed-off-by: Robin Townsend <robin@robin.town> * Factor out a more generic FacePile Signed-off-by: Robin Townsend <robin@robin.town> * Implement room tile changes for voice rooms Signed-off-by: Robin Townsend <robin@robin.town> * Add interactive radio component to the left panel Signed-off-by: Robin Townsend <robin@robin.town> * Test voice rooms Signed-off-by: Robin Townsend <robin@robin.town> * Update name of call room type Signed-off-by: Robin Townsend <robin@robin.town> * Clarify that voice rooms are under development Signed-off-by: Robin Townsend <robin@robin.town> * Use readonly Signed-off-by: Robin Townsend <robin@robin.town> * Move acks to the end of handlers Signed-off-by: Robin Townsend <robin@robin.town> * Add comment about avatar URLs coming from Jitsi Signed-off-by: Robin Townsend <robin@robin.town> * Don't use unicode ellipses for translation reasons? Signed-off-by: Robin Townsend <robin@robin.town> * Fix tests Signed-off-by: Robin Townsend <robin@robin.town> * Fix tests, again Signed-off-by: Robin Townsend <robin@robin.town> * Remove unnecessary export Signed-off-by: Robin Townsend <robin@robin.town> * Ack Jitsi events when we wait for them Signed-off-by: Robin Townsend <robin@robin.town>
2022-03-22 23:14:11 +01:00
.mx_RoomTile_title {
2019-11-13 17:59:22 +01:00
width: 160px;
}
2019-11-13 17:59:22 +01:00
.mx_UserInfo_avatar {
Organize UserInfo.scss (#8461) * .mx_UserInfo_profileField under .mx_UserInfo_memberDetails Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_UserInfo_container:not(.mx_UserInfo_separator) under .mx_UserInfo_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 1 .mx_UserInfo_avatar > div > div * Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 2 .mx_UserInfo_avatar > div > div Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 3 .mx_UserInfo_avatar > div Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 4 - .mx_BaseAvatar_initial - .mx_BaseAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 5 Move .mx_BaseAvatar_initial under .mx_BaseAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Replace a wildcard with className Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Specify className Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_UserInfo.mx_BaseCard.mx_UserInfo_smallAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix position of the E2E icon of expanding sessions button To prevent the icon from moving down a little bit Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-05-23 13:42:31 +02:00
margin: $spacing-24 $spacing-32 0 $spacing-32;
.mx_UserInfo_avatar_transition {
max-width: 30vh;
aspect-ratio: 1 / 1;
Organize UserInfo.scss (#8461) * .mx_UserInfo_profileField under .mx_UserInfo_memberDetails Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_UserInfo_container:not(.mx_UserInfo_separator) under .mx_UserInfo_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 1 .mx_UserInfo_avatar > div > div * Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 2 .mx_UserInfo_avatar > div > div Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 3 .mx_UserInfo_avatar > div Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 4 - .mx_BaseAvatar_initial - .mx_BaseAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 5 Move .mx_BaseAvatar_initial under .mx_BaseAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Replace a wildcard with className Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Specify className Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_UserInfo.mx_BaseCard.mx_UserInfo_smallAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix position of the E2E icon of expanding sessions button To prevent the icon from moving down a little bit Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-05-23 13:42:31 +02:00
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%;
Organize UserInfo.scss (#8461) * .mx_UserInfo_profileField under .mx_UserInfo_memberDetails Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_UserInfo_container:not(.mx_UserInfo_separator) under .mx_UserInfo_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 1 .mx_UserInfo_avatar > div > div * Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 2 .mx_UserInfo_avatar > div > div Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 3 .mx_UserInfo_avatar > div Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 4 - .mx_BaseAvatar_initial - .mx_BaseAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 5 Move .mx_BaseAvatar_initial under .mx_BaseAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Replace a wildcard with className Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Specify className Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_UserInfo.mx_BaseCard.mx_UserInfo_smallAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix position of the E2E icon of expanding sessions button To prevent the icon from moving down a little bit Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-05-23 13:42:31 +02:00
}
}
2019-11-13 17:59:22 +01:00
}
2019-11-13 17:59:22 +01:00
h3 {
text-transform: uppercase;
color: $tertiary-content;
font: var(--cpd-font-heading-sm-semibold);
font-weight: var(--cpd-font-weight-semibold);
Organize UserInfo.scss (#8461) * .mx_UserInfo_profileField under .mx_UserInfo_memberDetails Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_UserInfo_container:not(.mx_UserInfo_separator) under .mx_UserInfo_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 1 .mx_UserInfo_avatar > div > div * Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 2 .mx_UserInfo_avatar > div > div Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 3 .mx_UserInfo_avatar > div Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 4 - .mx_BaseAvatar_initial - .mx_BaseAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 5 Move .mx_BaseAvatar_initial under .mx_BaseAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Replace a wildcard with className Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Specify className Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_UserInfo.mx_BaseCard.mx_UserInfo_smallAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix position of the E2E icon of expanding sessions button To prevent the icon from moving down a little bit Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-05-23 13:42:31 +02:00
margin: $spacing-4 0;
2019-11-13 17:59:22 +01:00
}
2019-11-13 17:59:22 +01:00
p {
margin: 5px 0;
2019-11-13 17:59:22 +01:00
}
2019-11-12 16:26:26 +01:00
2019-11-13 17:59:22 +01:00
.mx_UserInfo_profile {
text-align: center;
h2 {
display: flex;
font-size: $font-17px;
line-height: $font-25px;
2019-11-13 17:59:22 +01:00
flex: 1;
justify-content: center;
// We reverse things here so for accessible technologies the name comes before the e2e shield
flex-direction: row-reverse;
2019-11-13 17:59:22 +01:00
span {
/* 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;
}
2019-11-13 17:59:22 +01:00
.mx_E2EIcon {
margin-top: 3px; /* visual vertical centering to the top line of text. */
margin-inline-end: $spacing-4; /* margin from displayName */
min-width: 18px; /* convince flexbox to not collapse it */
2019-11-13 17:59:22 +01:00
}
}
2019-11-12 16:26:26 +01:00
2019-11-13 17:59:22 +01:00
.mx_UserInfo_profileStatus {
Organize UserInfo.scss (#8461) * .mx_UserInfo_profileField under .mx_UserInfo_memberDetails Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_UserInfo_container:not(.mx_UserInfo_separator) under .mx_UserInfo_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 1 .mx_UserInfo_avatar > div > div * Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 2 .mx_UserInfo_avatar > div > div Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 3 .mx_UserInfo_avatar > div Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 4 - .mx_BaseAvatar_initial - .mx_BaseAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 5 Move .mx_BaseAvatar_initial under .mx_BaseAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Replace a wildcard with className Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Specify className Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_UserInfo.mx_BaseCard.mx_UserInfo_smallAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix position of the E2E icon of expanding sessions button To prevent the icon from moving down a little bit Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-05-23 13:42:31 +02:00
margin-top: $spacing-12;
2019-11-12 16:26:26 +01:00
}
}
Organize UserInfo.scss (#8461) * .mx_UserInfo_profileField under .mx_UserInfo_memberDetails Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_UserInfo_container:not(.mx_UserInfo_separator) under .mx_UserInfo_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 1 .mx_UserInfo_avatar > div > div * Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 2 .mx_UserInfo_avatar > div > div Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 3 .mx_UserInfo_avatar > div Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 4 - .mx_BaseAvatar_initial - .mx_BaseAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 5 Move .mx_BaseAvatar_initial under .mx_BaseAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Replace a wildcard with className Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Specify className Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_UserInfo.mx_BaseCard.mx_UserInfo_smallAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix position of the E2E icon of expanding sessions button To prevent the icon from moving down a little bit Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-05-23 13:42:31 +02:00
.mx_UserInfo_memberDetails {
.mx_UserInfo_profileField {
display: flex;
justify-content: center;
align-items: center;
margin: 6px 0;
Organize UserInfo.scss (#8461) * .mx_UserInfo_profileField under .mx_UserInfo_memberDetails Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_UserInfo_container:not(.mx_UserInfo_separator) under .mx_UserInfo_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 1 .mx_UserInfo_avatar > div > div * Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 2 .mx_UserInfo_avatar > div > div Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 3 .mx_UserInfo_avatar > div Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 4 - .mx_BaseAvatar_initial - .mx_BaseAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 5 Move .mx_BaseAvatar_initial under .mx_BaseAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Replace a wildcard with className Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Specify className Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_UserInfo.mx_BaseCard.mx_UserInfo_smallAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix position of the E2E icon of expanding sessions button To prevent the icon from moving down a little bit Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-05-23 13:42:31 +02:00
.mx_UserInfo_roleDescription {
display: flex;
justify-content: center;
align-items: center;
/* try to make it the same height as the dropdown */
Organize UserInfo.scss (#8461) * .mx_UserInfo_profileField under .mx_UserInfo_memberDetails Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_UserInfo_container:not(.mx_UserInfo_separator) under .mx_UserInfo_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 1 .mx_UserInfo_avatar > div > div * Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 2 .mx_UserInfo_avatar > div > div Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 3 .mx_UserInfo_avatar > div Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 4 - .mx_BaseAvatar_initial - .mx_BaseAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 5 Move .mx_BaseAvatar_initial under .mx_BaseAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Replace a wildcard with className Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Specify className Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_UserInfo.mx_BaseCard.mx_UserInfo_smallAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix position of the E2E icon of expanding sessions button To prevent the icon from moving down a little bit Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-05-23 13:42:31 +02:00
margin: 11px 0 12px 0;
}
.mx_Field {
margin: 0;
}
}
2019-11-12 16:26:26 +01:00
}
2019-11-13 17:59:22 +01:00
.mx_UserInfo_field {
line-height: $font-16px;
2019-11-13 18:00:35 +01:00
&.mx_UserInfo_destructive {
color: $alert;
2019-11-13 18:00:35 +01:00
}
2019-11-13 17:59:22 +01:00
}
2019-11-13 17:59:22 +01:00
.mx_UserInfo_statusMessage {
$statusNumberOfLines: 3;
font: var(--cpd-font-body-sm-regular);
font-size: $font-11px;
line-height: 1rem;
2019-11-13 17:59:22 +01:00
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;
2019-11-13 17:59:22 +01:00
}
.mx_AutoHideScrollbar {
flex: 1 1 0;
2019-11-13 17:59:22 +01:00
}
2019-11-13 17:59:22 +01:00
.mx_UserInfo_devices {
.mx_UserInfo_device {
display: flex;
margin: $spacing-8 0;
2019-11-19 12:51:37 +01:00
2019-11-13 17:59:22 +01:00
&.mx_UserInfo_device_verified {
.mx_UserInfo_device_trusted {
color: $accent;
2019-11-13 17:59:22 +01:00
}
}
&.mx_UserInfo_device_unverified {
.mx_UserInfo_device_trusted {
color: $alert;
2019-11-13 17:59:22 +01:00
}
}
.mx_UserInfo_device_name {
flex: 1;
margin: 0 5px;
2019-11-19 12:51:37 +01:00
word-break: break-word;
2019-11-13 17:59:22 +01:00
}
}
/* both for icon in expand button and device item */
2019-11-13 17:59:22 +01:00
.mx_E2EIcon {
/* don't squeeze */
2019-11-13 17:59:22 +01:00
flex: 0 0 auto;
margin: 0;
2019-11-13 17:59:22 +01:00
width: 12px;
height: 12px;
}
2019-11-13 17:59:22 +01:00
.mx_UserInfo_expand {
column-gap: 5px; /* cf: mx_UserInfo_device_name */
margin-bottom: 11px;
align-items: initial; /* Cancel the default property */
}
}
Organize UserInfo.scss (#8461) * .mx_UserInfo_profileField under .mx_UserInfo_memberDetails Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_UserInfo_container:not(.mx_UserInfo_separator) under .mx_UserInfo_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 1 .mx_UserInfo_avatar > div > div * Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 2 .mx_UserInfo_avatar > div > div Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 3 .mx_UserInfo_avatar > div Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 4 - .mx_BaseAvatar_initial - .mx_BaseAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 5 Move .mx_BaseAvatar_initial under .mx_BaseAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Replace a wildcard with className Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Specify className Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_UserInfo.mx_BaseCard.mx_UserInfo_smallAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix position of the E2E icon of expanding sessions button To prevent the icon from moving down a little bit Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-05-23 13:42:31 +02:00
&.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;
}
Organize UserInfo.scss (#8461) * .mx_UserInfo_profileField under .mx_UserInfo_memberDetails Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_UserInfo_container:not(.mx_UserInfo_separator) under .mx_UserInfo_container Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 1 .mx_UserInfo_avatar > div > div * Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 2 .mx_UserInfo_avatar > div > div Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 3 .mx_UserInfo_avatar > div Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 4 - .mx_BaseAvatar_initial - .mx_BaseAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * reorganize structure of .mx_UserInfo_avatar - 5 Move .mx_BaseAvatar_initial under .mx_BaseAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Replace a wildcard with className Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Specify className Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * .mx_UserInfo.mx_BaseCard.mx_UserInfo_smallAvatar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix position of the E2E icon of expanding sessions button To prevent the icon from moving down a little bit Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-05-23 13:42:31 +02:00
}
2020-01-27 18:17:05 +01:00
}
}