Changeset View
Changeset View
Standalone View
Standalone View
src/resources/themes/meet.scss
- This file was added.
.meet-video { | |||||
position: relative; | |||||
background: $menu-bg-color; | |||||
// Use flexbox for centering .watermark | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
.watermark { | |||||
color: darken($menu-bg-color, 20%); | |||||
width: 50%; | |||||
height: 50%; | |||||
} | |||||
video { | |||||
// 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. | |||||
object-fit: cover; | |||||
width: 100%; | |||||
height: 100%; | |||||
background: #000; | |||||
& + .watermark { | |||||
display: none; | |||||
} | |||||
} | |||||
&.fullscreen { | |||||
video { | |||||
// We don't want the video to be cut in fullscreen | |||||
// This will preserve the aspect ratio of the video stream | |||||
object-fit: contain; | |||||
} | |||||
} | |||||
.controls { | |||||
position: absolute; | |||||
bottom: 0; | |||||
right: 0; | |||||
margin: 0.5em; | |||||
padding: 0 0.05em; | |||||
line-height: 2em; | |||||
border-radius: 1em; | |||||
background: rgba(#000, 0.7); | |||||
button { | |||||
line-height: 2; | |||||
border-radius: 50%; | |||||
padding: 0; | |||||
width: 2em; | |||||
} | |||||
} | |||||
.status { | |||||
position: absolute; | |||||
bottom: 0; | |||||
left: 0; | |||||
margin: 0.5em; | |||||
line-height: 2em; | |||||
span { | |||||
display: inline-block; | |||||
color: #fff; | |||||
border-radius: 50%; | |||||
width: 2em; | |||||
text-align: center; | |||||
margin-right: 0.25em; | |||||
} | |||||
} | |||||
.nickname { | |||||
position: absolute; | |||||
top: 0; | |||||
left: 0; | |||||
margin: 0.5em; | |||||
padding: 0 1em; | |||||
line-height: 2em; | |||||
border-radius: 1em; | |||||
max-width: calc(100% - 1em); | |||||
background: rgba(#fff, 0.8); | |||||
overflow: hidden; | |||||
text-overflow: ellipsis; | |||||
white-space: nowrap; | |||||
button { | |||||
display: none; | |||||
} | |||||
span { | |||||
outline: none; | |||||
} | |||||
} | |||||
&.publisher .nickname { | |||||
cursor: pointer; | |||||
background: rgba($main-color, 0.9); | |||||
&:focus-within { | |||||
box-shadow: $btn-focus-box-shadow; | |||||
} | |||||
span:empty { | |||||
display: block; | |||||
height: 2em; | |||||
&:not(:focus) + button { | |||||
display: block; | |||||
position: absolute; | |||||
top: 0; | |||||
left: 0; | |||||
width: 2em; | |||||
height: 2em; | |||||
border-radius: 50%; | |||||
padding: 0; | |||||
color: $menu-gray; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
#meet-component { | |||||
flex-grow: 1; | |||||
display: flex; | |||||
flex-direction: column; | |||||
& + .filler { | |||||
display: none; | |||||
} | |||||
} | |||||
#app.meet { | |||||
height: 100%; | |||||
#meet-component { | |||||
overflow: hidden; | |||||
} | |||||
} | |||||
#meet-setup { | |||||
max-width: 720px; | |||||
} | |||||
#meet-auth { | |||||
margin-top: 2rem; | |||||
margin-bottom: 2rem; | |||||
flex: 1; | |||||
} | |||||
#meet-session-toolbar { | |||||
display: flex; | |||||
justify-content: center; | |||||
} | |||||
#meet-session-menu { | |||||
button { | |||||
font-size: 1.3em; | |||||
padding: 0 0.25em; | |||||
margin: 0.5em; | |||||
position: relative; | |||||
.badge { | |||||
font-size: 0.5em; | |||||
position: absolute; | |||||
right: -0.5em; | |||||
&:empty { | |||||
display: none; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
#meet-session-layout { | |||||
flex: 1; | |||||
overflow: hidden; | |||||
} | |||||
#meet-session { | |||||
display: flex; | |||||
justify-content: center; | |||||
flex-wrap: wrap; | |||||
flex: 1; | |||||
//overflow: hidden; | |||||
} | |||||
#meet-chat { | |||||
width: 0; | |||||
display: none; | |||||
flex-direction: column; | |||||
&.open { | |||||
width: 30%; | |||||
display: flex !important; | |||||
.mobile & { | |||||
width: 100%; | |||||
z-index: 1; | |||||
background: $body-bg; | |||||
} | |||||
} | |||||
.chat { | |||||
flex: 1; | |||||
overflow-y: auto; | |||||
} | |||||
.message { | |||||
margin: 0 0.5em 0.5em 0.5em; | |||||
padding: 0.25em 0.5em; | |||||
border-radius: 1em; | |||||
background: $menu-bg-color; | |||||
overflow-wrap: break-word; | |||||
&.self { | |||||
background: lighten($main-color, 30%); | |||||
} | |||||
} | |||||
.nickname { | |||||
font-size: 80%; | |||||
color: $secondary; | |||||
text-align: right; | |||||
} | |||||
// TODO: mobile mode | |||||
} | |||||
#setup-preview { | |||||
display: flex; | |||||
video { | |||||
width: 100%; | |||||
transform: rotateY(180deg); | |||||
background: #000; | |||||
} | |||||
.volume { | |||||
height: 50%; | |||||
position: absolute; | |||||
bottom: 1em; | |||||
right: 2em; | |||||
width: 0.5em; | |||||
background: rgba(0, 0, 0, 0.5); | |||||
.bar { | |||||
width: 100%; | |||||
position: absolute; | |||||
bottom: 0; | |||||
} | |||||
} | |||||
} |