diff --git a/css/modals/virtual-background/_virtual-background.scss b/css/modals/virtual-background/_virtual-background.scss index 1909e17a1..380672653 100644 --- a/css/modals/virtual-background/_virtual-background.scss +++ b/css/modals/virtual-background/_virtual-background.scss @@ -1,5 +1,5 @@ .virtual-background-dialog { - margin-left:-10px; + margin-left: -10px; position: relative; max-height: 300px; color: white; @@ -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; + @media (max-width: 432px) { + height: 60px; + width: 60px; } } .background-option { @@ -40,28 +44,28 @@ } .thumbnail-selected { object-fit: cover; - border: 2px solid #246FE5; + border: 2px solid #246fe5; } - .blur{ + .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{ + .slight-blur { box-shadow: inset 0 0 12px #000000; - background: #A4A4A4; + background: #a4a4a4; padding: 0 10px; } - .slight-blur-selected{ + .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,27 +74,59 @@ } .none-selected { background: #525252; - border: 2px solid #246FE5; + border: 2px solid #246fe5; padding: 0 10px; } - .desktop-share{ + .desktop-share { background: #525252; } - .desktop-share-selected{ + .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){ + @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){ + @media (max-width: 320px) { grid-template-columns: auto auto auto; font-size: 1.5vw; } @@ -109,14 +145,14 @@ .file-upload-btn { display: none; } -.file-upload-label{ +.file-upload-label { font-size: 14px; font-weight: 600; line-height: 20px; 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; } } @@ -139,22 +175,22 @@ .thumbnail-container { position: relative; &:focus-within { - .thumbnail ~ .delete-image-icon{ - display: block; - } + .thumbnail ~ .delete-image-icon { + display: block; + } } } -.add-background{ +.add-background { margin-right: 8px; } -.apply-background-btn{ +.apply-background-btn { margin-top: 16px; float: right; - } +} - .video-background-preview-entry{ +.video-background-preview-entry { margin-left: -10px; height: 250px; width: 570px; @@ -163,33 +199,33 @@ @media (min-width: 432px) and (max-width: 632px) { max-width: 336; } - @media (max-width: 432px){ + @media (max-width: 432px) { max-width: 336; } - } +} - .virtual-background-preview-video{ +.virtual-background-preview-video { margin-left: -10; border-radius: 6px; height: 100%; object-fit: cover; width: 100%; - } - .video-preview-loader{ - border-radius: 6px; - background-color: transparent; - height: 250px; - margin-bottom: 8px; - width: 572px; - position: fixed; - z-index: 2; - @media (min-width: 432px) and (max-width: 632px) { - width: 340px; - } - } +} +.video-preview-loader { + border-radius: 6px; + background-color: transparent; + height: 250px; + margin-bottom: 8px; + width: 572px; + position: fixed; + z-index: 2; + @media (min-width: 432px) and (max-width: 632px) { + width: 340px; + } +} - .video-preview-loader svg{ +.video-preview-loader svg { position: absolute; top: 40%; left: 45%; - } +}