Improve group call participants background, padding, margin

This commit is contained in:
ayumi-signal 2024-01-17 12:37:04 -08:00 committed by GitHub
parent 670da5722a
commit a9df5923a3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 39 additions and 16 deletions

View file

@ -3818,6 +3818,7 @@ button.module-image__border-overlay:focus {
&__overflow {
flex: 0 0 auto;
position: relative;
margin-block-start: calc(60px + var(--title-bar-drag-area-height));
margin-inline-end: 16px;
&__inner {
@ -3838,6 +3839,11 @@ button.module-image__border-overlay:focus {
& .module-ongoing-call__group-call-remote-participant {
width: 100%;
margin-bottom: 1rem;
&__footer {
padding-block: 0 10px;
padding-inline: 10px;
}
}
&__scroll-marker {
@ -3892,7 +3898,7 @@ button.module-image__border-overlay:focus {
);
#{$scroll-marker-selector}__button {
margin-block-start: 60px;
margin-block-start: 16px;
transform: rotate(180deg);
}
}
@ -3947,6 +3953,8 @@ button.module-image__border-overlay:focus {
}
&__group-call-remote-participant {
container-type: size;
display: flex;
justify-content: center;
position: relative;
@ -3961,6 +3969,16 @@ button.module-image__border-overlay:focus {
transition: none;
}
$group-call-remote-participant-footer-padding-medium: 12px;
$group-call-remote-participant-footer-padding-large: 16px;
@container (min-width: 180px) or (min-height: 180px) {
.module-ongoing-call__group-call-remote-participant__footer {
padding-block: 0 $group-call-remote-participant-footer-padding-large;
padding-inline: $group-call-remote-participant-footer-padding-large;
}
}
&:after {
content: '';
position: absolute;
@ -3992,6 +4010,10 @@ button.module-image__border-overlay:focus {
}
}
&-background.module-calling__background--no-avatar {
background-color: $color-gray-78;
}
&__blocked {
@include color-svg('../images/icons/v3/block/block.svg', $color-white);
height: 24px;
@ -4022,8 +4044,8 @@ button.module-image__border-overlay:focus {
position: absolute;
bottom: 0;
height: 60px;
padding-block: 0 16px;
padding-inline: 16px;
padding-block: 0 $group-call-remote-participant-footer-padding-medium;
padding-inline: $group-call-remote-participant-footer-padding-medium;
user-select: none;
width: 100%;
z-index: $z-index-above-base;
@ -4216,6 +4238,10 @@ button.module-image__border-overlay:focus {
-webkit-user-drag: none;
-webkit-user-select: none;
}
.module-calling__background--no-avatar {
background: transparent;
}
}
&--local {