imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Restyle Avatar

Browse source 
Make it a circle with the profile picture centered,
with a max height/width of 30vh
This commit is contained in:
Bruno Windels 2019-11-11 16:54:12 +01:00
parent 854b5a7af5
commit af4ad488bd
2 changed files with 36 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

27
res/css/views/right_panel/_UserInfo.scss
View file

@ -38,6 +38,7 @@ limitations under the License.
mask-repeat: no-repeat;
mask-position: 16px center;
background-color: $rightpanel-button-color;
position: absolute;
}
.mx_UserInfo_profile h2 {
@ -47,7 +48,7 @@ limitations under the License.
}
.mx_UserInfo h2 {
font-size: 16px;
font-size: 18px;
font-weight: 600;
margin: 16px 0 8px 0;
}
@ -74,15 +75,27 @@ limitations under the License.
}
.mx_UserInfo_avatar {
background: $tagpanel-bg-color;
margin: 24px 32px 0 32px;
}
.mx_UserInfo_avatar > img {
height: auto;
width: 100%;
.mx_UserInfo_avatar > div {
max-width: 30vh;
margin: 0 auto;
}
.mx_UserInfo_avatar > div > div {
/* use padding-top instead of height to make this element square,
as the % in padding is a % of the width (including margin,
that's why we had to put the margin to center on a parent div),
and not a % of the parent height. */
padding-top: 100%;
height: 0;
border-radius: 100%;
max-height: 30vh;
object-fit: contain;
display: block;
box-sizing: content-box;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {