Changeset View
Changeset View
Standalone View
Standalone View
src/resources/themes/meet.scss
| Show First 20 Lines • Show All 56 Lines • ▼ Show 20 Lines | & + .dropdown-menu { | ||||
| padding-left: 3.5rem; | padding-left: 3.5rem; | ||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| .meet-video { | .meet-video { | ||||
| position: relative; | position: relative; | ||||
| background: $menu-bg-color; | background: $menu-bg-color; | ||||
| // Use flexbox for centering .watermark | /* Use flexbox for centering .watermark */ | ||||
| display: flex; | display: flex; | ||||
| align-items: center; | align-items: center; | ||||
| justify-content: center; | justify-content: center; | ||||
| video { | video { | ||||
| // To make object-fit:cover working we have to set the height in pixels | /* To make object-fit:cover working we have to set the height in pixels | ||||
| // on the wrapper element. This is what javascript method will do. | on the wrapper element. This is what javascript method will do. */ | ||||
| object-fit: cover; | object-fit: cover; | ||||
| width: 100%; | width: 100%; | ||||
| height: 100%; | height: 100%; | ||||
| background: #000; | background: #000; | ||||
| & + .watermark { | & + .watermark { | ||||
| display: none; | display: none; | ||||
| } | } | ||||
| } | } | ||||
| &.screen video { | &.screen video { | ||||
| // For shared screen videos we use the original aspect ratio | /* For shared screen videos we use the original aspect ratio */ | ||||
| object-fit: scale-down; | object-fit: scale-down; | ||||
| background: none; | background: none; | ||||
| } | } | ||||
| &:fullscreen { | &:fullscreen { | ||||
| video { | video { | ||||
| // We don't want the video to be cut in fullscreen | /* We don't want the video to be cut in fullscreen | ||||
| // This will preserve the aspect ratio of the video stream | This will preserve the aspect ratio of the video stream */ | ||||
| object-fit: contain; | object-fit: contain; | ||||
| } | } | ||||
| } | } | ||||
| .watermark { | .watermark { | ||||
| color: darken($menu-bg-color, 20%); | color: darken($menu-bg-color, 20%); | ||||
| width: 50%; | width: 50%; | ||||
| height: 50%; | height: 50%; | ||||
| ▲ Show 20 Lines • Show All 368 Lines • ▼ Show 20 Lines | .media-setup-preview { | ||||
| } | } | ||||
| .volume { | .volume { | ||||
| height: 50%; | height: 50%; | ||||
| position: absolute; | position: absolute; | ||||
| bottom: 1em; | bottom: 1em; | ||||
| right: 2em; | right: 2em; | ||||
| width: 0.5em; | width: 0.5em; | ||||
| background: rgba(0, 0, 0, 0.5); | background: rgba(0, 0, 0, 50%); | ||||
| .bar { | .bar { | ||||
| width: 100%; | width: 100%; | ||||
| position: absolute; | position: absolute; | ||||
| bottom: 0; | bottom: 0; | ||||
| } | } | ||||
| #media-setup-dialog & { | #media-setup-dialog & { | ||||
| ▲ Show 20 Lines • Show All 83 Lines • ▼ Show 20 Lines | #meet-queue { | ||||
| .dropdown { | .dropdown { | ||||
| animation: none !important; | animation: none !important; | ||||
| transition: none; | transition: none; | ||||
| top: 0; | top: 0; | ||||
| } | } | ||||
| } | } | ||||
| .media-setup-preview { | .media-setup-preview { | ||||
| // Fix video element size in Safari/iOS | /* Fix video element size in Safari/iOS */ | ||||
| display: block; | display: block; | ||||
| } | } | ||||
| } | } | ||||