haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(virtual-background): Style adjustments on virtual background dial… (#9484) 

* fix(virtual-background): Style adjustments on virtual background dialog on small screens.

* fix(virtual-background): Style adjustments on virtual background dialog on small screens.

Co-authored-by: tudordan7 <tudor.pop@decagon.tech>
This commit is contained in:
Tudor D. Pop 2021-07-09 10:26:55 +03:00 committed by GitHub
parent bad58f6508
commit d87a40e77e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 88 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
css/modals/virtual-background/_virtual-background.scss
View File

@ -1,5 +1,5 @@
.virtual-background-dialog { .virtual-background-dialog {
margin-left:-10px; margin-left: -10px;
position: relative; position: relative;
max-height: 300px; max-height: 300px;
color: white; color: white;
@ -7,16 +7,20 @@
grid-template-columns: auto auto auto auto auto; grid-template-columns: auto auto auto auto auto;
column-gap: 9px; column-gap: 9px;
cursor: pointer; cursor: pointer;
.desktop-share:hover, .thumbnail:hover, .blur:hover, .slight-blur:hover, .virtual-background-none:hover{ .desktop-share:hover,
opacity: .5; .thumbnail:hover,
.blur:hover,
.slight-blur:hover,
.virtual-background-none:hover {
opacity: 0.5;
border: 2px solid #99bbf3; border: 2px solid #99bbf3;
@media (min-width: 432px) and (min-width: 432px) and (max-width: 632px) { @media (min-width: 432px) and (min-width: 432px) and (max-width: 632px) {
height: 56px; height: 60px;
width: 56px; width: 60px;
} }
@media (max-width: 432px){ @media (max-width: 432px) {
height: 56px; height: 60px;
width: 56px; width: 60px;
} }
} }
.background-option { .background-option {
@ -40,28 +44,28 @@
} }
.thumbnail-selected { .thumbnail-selected {
object-fit: cover; object-fit: cover;
border: 2px solid #246FE5; border: 2px solid #246fe5;
} }
.blur{ .blur {
box-shadow: inset 0 0 12px #000000; box-shadow: inset 0 0 12px #000000;
background: #7E8287; background: #7e8287;
padding: 0 10px; padding: 0 10px;
} }
.blur-selected { .blur-selected {
box-shadow: inset 0 0 12px #000000; box-shadow: inset 0 0 12px #000000;
background: #7E8287; background: #7e8287;
border: 2px solid #246FE5; border: 2px solid #246fe5;
padding: 0 10px; padding: 0 10px;
} }
.slight-blur{ .slight-blur {
box-shadow: inset 0 0 12px #000000; box-shadow: inset 0 0 12px #000000;
background: #A4A4A4; background: #a4a4a4;
padding: 0 10px; padding: 0 10px;
} }
.slight-blur-selected{ .slight-blur-selected {
box-shadow: inset 0 0 12px #000000; box-shadow: inset 0 0 12px #000000;
background: #A4A4A4; background: #a4a4a4;
border: 2px solid #246FE5; border: 2px solid #246fe5;
padding: 0 10px; padding: 0 10px;
} }
.virtual-background-none { .virtual-background-none {
@ -70,27 +74,59 @@
} }
.none-selected { .none-selected {
background: #525252; background: #525252;
border: 2px solid #246FE5; border: 2px solid #246fe5;
padding: 0 10px; padding: 0 10px;
} }
.desktop-share{ .desktop-share {
background: #525252; background: #525252;
} }
.desktop-share-selected{ .desktop-share-selected {
background: #525252; background: #525252;
border: 2px solid #246FE5; border: 2px solid #246fe5;
padding: 0 10px; padding: 0 10px;
} }
@media (min-width: 432px) and (max-width: 632px) { @media (min-width: 432px) and (max-width: 632px) {
font-size: 1.5vw; font-size: 1.5vw;
.desktop-share,
.virtual-background-none,
.thumbnail,
.blur,
.slight-blur {
height: 60px;
width: 60px;
} }
@media (max-width: 432px){ .desktop-share-selected,
.thumbnail-selected,
.none-selected,
.blur-selected,
.slight-blur-selected {
height: 60px;
width: 60px;
}
}
@media (max-width: 432px) {
grid-template-columns: auto auto auto; grid-template-columns: auto auto auto;
font-size: 1.5vw; font-size: 1.5vw;
.desktop-share,
.virtual-background-none,
.thumbnail,
.blur,
.slight-blur {
height: 60px;
width: 60px;
} }
@media (max-width: 320px){ .desktop-share-selected,
.thumbnail-selected,
.none-selected,
.blur-selected,
.slight-blur-selected {
height: 60px;
width: 60px;
}
}
@media (max-width: 320px) {
grid-template-columns: auto auto auto; grid-template-columns: auto auto auto;
font-size: 1.5vw; font-size: 1.5vw;
} }
@ -109,14 +145,14 @@
.file-upload-btn { .file-upload-btn {
display: none; display: none;
} }
.file-upload-label{ .file-upload-label {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
line-height: 20px; line-height: 20px;
margin-left: -10px; margin-left: -10px;
margin-top: 16px; margin-top: 16px;
margin-bottom: 8px; margin-bottom: 8px;
color: #669AEC; color: #669aec;
display: inline-flex; display: inline-flex;
cursor: pointer; cursor: pointer;
} }
@ -128,7 +164,7 @@
left: 96; left: 96;
bottom: 51; bottom: 51;
@media (min-width: 432px) and (max-width: 632px) { @media (min-width: 432px) and (max-width: 632px) {
left: 51px left: 51px;
} }
} }
@ -139,22 +175,22 @@
.thumbnail-container { .thumbnail-container {
position: relative; position: relative;
&:focus-within { &:focus-within {
.thumbnail ~ .delete-image-icon{ .thumbnail ~ .delete-image-icon {
display: block; display: block;
} }
} }
} }
.add-background{ .add-background {
margin-right: 8px; margin-right: 8px;
} }
.apply-background-btn{ .apply-background-btn {
margin-top: 16px; margin-top: 16px;
float: right; float: right;
} }
.video-background-preview-entry{ .video-background-preview-entry {
margin-left: -10px; margin-left: -10px;
height: 250px; height: 250px;
width: 570px; width: 570px;
@ -163,19 +199,19 @@
@media (min-width: 432px) and (max-width: 632px) { @media (min-width: 432px) and (max-width: 632px) {
max-width: 336; max-width: 336;
} }
@media (max-width: 432px){ @media (max-width: 432px) {
max-width: 336; max-width: 336;
} }
} }
.virtual-background-preview-video{ .virtual-background-preview-video {
margin-left: -10; margin-left: -10;
border-radius: 6px; border-radius: 6px;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
width: 100%; width: 100%;
} }
.video-preview-loader{ .video-preview-loader {
border-radius: 6px; border-radius: 6px;
background-color: transparent; background-color: transparent;
height: 250px; height: 250px;
@ -186,10 +222,10 @@
@media (min-width: 432px) and (max-width: 632px) { @media (min-width: 432px) and (max-width: 632px) {
width: 340px; width: 340px;
} }
} }
.video-preview-loader svg{ .video-preview-loader svg {
position: absolute; position: absolute;
top: 40%; top: 40%;
left: 45%; left: 45%;
} }