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

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

@ -7,16 +7,20 @@
grid-template-columns: auto auto auto auto auto;
column-gap: 9px;
cursor: pointer;
.desktop-share:hover, .thumbnail:hover, .blur:hover, .slight-blur:hover, .virtual-background-none:hover{
opacity: .5;
.desktop-share:hover,
.thumbnail:hover,
.blur:hover,
.slight-blur:hover,
.virtual-background-none:hover {
opacity: 0.5;
border: 2px solid #99bbf3;
@media (min-width: 432px) and (min-width: 432px) and (max-width: 632px) {
height: 56px;
width: 56px;
height: 60px;
width: 60px;
}
@media (max-width: 432px) {
height: 56px;
width: 56px;
height: 60px;
width: 60px;
}
}
.background-option {
@ -40,28 +44,28 @@
}
.thumbnail-selected {
object-fit: cover;
border: 2px solid #246FE5;
border: 2px solid #246fe5;
}
.blur {
box-shadow: inset 0 0 12px #000000;
background: #7E8287;
background: #7e8287;
padding: 0 10px;
}
.blur-selected {
box-shadow: inset 0 0 12px #000000;
background: #7E8287;
border: 2px solid #246FE5;
background: #7e8287;
border: 2px solid #246fe5;
padding: 0 10px;
}
.slight-blur {
box-shadow: inset 0 0 12px #000000;
background: #A4A4A4;
background: #a4a4a4;
padding: 0 10px;
}
.slight-blur-selected {
box-shadow: inset 0 0 12px #000000;
background: #A4A4A4;
border: 2px solid #246FE5;
background: #a4a4a4;
border: 2px solid #246fe5;
padding: 0 10px;
}
.virtual-background-none {
@ -70,7 +74,7 @@
}
.none-selected {
background: #525252;
border: 2px solid #246FE5;
border: 2px solid #246fe5;
padding: 0 10px;
}
@ -79,16 +83,48 @@
}
.desktop-share-selected {
background: #525252;
border: 2px solid #246FE5;
border: 2px solid #246fe5;
padding: 0 10px;
}
@media (min-width: 432px) and (max-width: 632px) {
font-size: 1.5vw;
.desktop-share,
.virtual-background-none,
.thumbnail,
.blur,
.slight-blur {
height: 60px;
width: 60px;
}
.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;
font-size: 1.5vw;
.desktop-share,
.virtual-background-none,
.thumbnail,
.blur,
.slight-blur {
height: 60px;
width: 60px;
}
.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;
@ -116,7 +152,7 @@
margin-left: -10px;
margin-top: 16px;
margin-bottom: 8px;
color: #669AEC;
color: #669aec;
display: inline-flex;
cursor: pointer;
}
@ -128,7 +164,7 @@
left: 96;
bottom: 51;
@media (min-width: 432px) and (max-width: 632px) {
left: 51px
left: 51px;
}
}