You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
380 lines
6.8 KiB
380 lines
6.8 KiB
/* |
|
* Spreed Speak Freely. |
|
* Copyright (C) 2013-2014 struktur AG |
|
* |
|
* This file is part of Spreed Speak Freely. |
|
* |
|
* This program is free software: you can redistribute it and/or modify |
|
* it under the terms of the GNU Affero General Public License as published by |
|
* the Free Software Foundation, either version 3 of the License, or |
|
* (at your option) any later version. |
|
* |
|
* This program is distributed in the hope that it will be useful, |
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|
* GNU Affero General Public License for more details. |
|
* |
|
* You should have received a copy of the GNU Affero General Public License |
|
* along with this program. If not, see <http://www.gnu.org/licenses/>. |
|
* |
|
*/ |
|
#audiovideo { |
|
position:absolute; |
|
left:0px; |
|
top:44px; |
|
bottom:0px; |
|
right:0px; |
|
border-top:1px solid $bordercolor; |
|
-webkit-user-select: none; |
|
-khtml-user-select: none; |
|
-moz-user-select: none; |
|
-o-user-select: none; |
|
user-select: none; |
|
} |
|
#audiovideo.fullscreen { |
|
top:0px !important; |
|
right:0px !important; |
|
bottom:0px !important; |
|
left:0px !important; |
|
background:black !important; |
|
} |
|
#audiovideo.fullscreen .remoteVideo .peerActions { |
|
display:none; |
|
} |
|
.withChat #audiovideo, .withBuddylist #audiovideo { |
|
right:260px; |
|
} |
|
.withBuddylist.withChat #audiovideo { |
|
right:520px; |
|
} |
|
|
|
.audiovideo { |
|
position:absolute; |
|
top:0px; |
|
left:0px; |
|
bottom:0px; |
|
right:0px; |
|
} |
|
|
|
.audiovideo.active { |
|
perspective: 1000; |
|
-webkit-perspective: 1000; |
|
} |
|
|
|
.audiovideo .audiovideoBase { |
|
position:relative; |
|
width:100%; |
|
height:100%; |
|
transition-property: transform; |
|
-webkit-transition-property: -webkit-transform; |
|
transition-duration: 2s; |
|
-webkit-transition-duration: 2s; |
|
transform: rotateY(0deg); |
|
-webkit-transform: rotateY(0deg); |
|
z-index:2; |
|
} |
|
|
|
.audiovideo.active .audiovideoBase { |
|
transform: rotateY(180deg); |
|
-webkit-transform: rotateY(180deg); |
|
} |
|
|
|
.audiovideo .localContainer { |
|
position: absolute; |
|
left:0px; |
|
right:0px; |
|
top:0px; |
|
bottom:0px; |
|
transform: scale(-1, 1); |
|
-webkit-transform: scale(-1, 1); |
|
pointer-events:none; |
|
z-index:2; |
|
} |
|
|
|
.audiovideo .remoteContainer { |
|
position: absolute; |
|
left:0px; |
|
right:0px; |
|
top:0px; |
|
bottom:0px; |
|
transform: rotateY(180deg); |
|
-webkit-transform: rotateY(180deg); |
|
pointer-events:none; |
|
z-index:2; |
|
} |
|
|
|
.audiovideo .miniContainer { |
|
position: absolute; |
|
max-height: 18%; |
|
bottom: 2px; |
|
right: 2px; |
|
transform: scale(-1, 1); |
|
-webkit-transform: scale(-1, 1); |
|
opacity: 0; |
|
transition-property: opacity; |
|
-webkit-transition-property: opacity; |
|
transition-duration: 0.5s; |
|
-webkit-transition-duration: 0.5s; |
|
} |
|
|
|
.audiovideo .miniContainer.visible { |
|
opacity: 1; |
|
} |
|
|
|
.audiovideo .miniVideo { |
|
max-height: 100%; |
|
max-width:100%; |
|
display:block; |
|
} |
|
|
|
.audiovideo .localVideo { |
|
width: 100%; |
|
max-height: 100%; |
|
opacity: 0; |
|
transition-property: opacity; |
|
-webkit-transition-property: opacity; |
|
transition-duration: 2s; |
|
-webkit-transition-duration: 2s; |
|
background: rgba(0,0,0,0.4); |
|
display:block; |
|
} |
|
|
|
.audiovideo .remoteVideos { |
|
position:absolute; |
|
left:0px; |
|
right:0px; |
|
bottom:0px; |
|
top:0px; |
|
opacity: 0; |
|
transition-property: opacity; |
|
-webkit-transition-property: opacity; |
|
transition-duration: 2s; |
|
-webkit-transition-duration: 2s; |
|
|
|
video { |
|
width:100%; |
|
height:100%; |
|
display:block; |
|
} |
|
} |
|
|
|
.audiovideo { |
|
|
|
.remoteVideo { |
|
display: inline-block; |
|
width:100%; |
|
max-height:100%; |
|
vertical-align:bottom; |
|
position:relative; |
|
visibility:hidden; |
|
background: rgba(0,0,0,0.4); |
|
overflow:hidden; |
|
} |
|
.remoteVideo.withvideo { |
|
visibility:visible; |
|
} |
|
.remoteVideo.onlyaudio { |
|
visibility:visible; |
|
background: #666; |
|
} |
|
.remoteVideo .onlyaudio { |
|
display:none; |
|
position:absolute; |
|
left:0px; |
|
top:45%; |
|
right:0px; |
|
color:rgba(255,255,255,0.3); |
|
text-align:center; |
|
font-size:80px; |
|
margin-top:-40px; |
|
pointer-events:auto; |
|
} |
|
.remoteVideo.onlyaudio video { |
|
display:none; |
|
} |
|
.remoteVideo.onlyaudio .onlyaudio { |
|
display:block; |
|
} |
|
.remoteVideo .peerActions { |
|
position: absolute; |
|
z-index: 10; |
|
left:0px; |
|
right:0px; |
|
bottom:5%; |
|
text-align:center; |
|
opacity:.0; |
|
transition-property: opacity; |
|
-webkit-transition-property: opacity; |
|
transition-duration: 0.2s; |
|
-webkit-transition-duration: 0.2s; |
|
pointer-events:auto; |
|
} |
|
.remoteVideo .peerActions i { |
|
font-size:3vw; |
|
} |
|
.remoteVideo .peerActions:hover { |
|
opacity:.5; |
|
} |
|
.remoteVideo .peerLabel { |
|
position: absolute; |
|
z-index:8; |
|
left:4%; |
|
bottom:4%; |
|
font-size:2.5vw; |
|
color:white; |
|
opacity:.7; |
|
text-shadow: 0px 0px 4px black; |
|
max-width:30%; |
|
overflow:hidden; |
|
white-space:nowrap; |
|
text-overflow:ellipsis; |
|
padding:4px; |
|
} |
|
|
|
} |
|
|
|
.audiovideo .overlayActions { |
|
position: absolute; |
|
left:0px; |
|
top:0px; |
|
bottom:0px; |
|
height:70px; |
|
margin:auto 0; |
|
width:40px; |
|
padding:3px 0; |
|
background: rgba(0,0,0,0.2); |
|
text-shadow: 0 0 5px black; |
|
z-index:5; |
|
opacity:0; |
|
|
|
button { |
|
width:40px; |
|
display: block; |
|
color:#ccc; |
|
cursor:pointer; |
|
} |
|
} |
|
|
|
.audiovideo.active:hover .overlayActions { |
|
opacity: 0.3; |
|
} |
|
|
|
.audiovideo.active .overlayActions:hover { |
|
opacity: 0.6; |
|
} |
|
|
|
.remoteVideo .peerLabel { |
|
-webkit-transition: color 500ms ease-out; |
|
-moz-transition: color 500ms ease-out; |
|
-o-transition: color 500ms ease-out; |
|
transition: color 500ms ease-out; |
|
} |
|
|
|
.remoteVideo.talking .peerLabel { |
|
color: #9dd53a; |
|
} |
|
|
|
.remoteVideo .overlayLogo { |
|
position:absolute; |
|
right:4%; |
|
top:4%; |
|
width:20%; |
|
height:20%; |
|
max-height:40px; |
|
max-width:111px; |
|
background-image: url(../img/logo-overlay.png); |
|
background-size:100%; |
|
background-repeat:no-repeat; |
|
background-position:center; |
|
opacity:0.5; |
|
z-index:2; |
|
pointer-events: none; |
|
} |
|
|
|
.miniContainer video { |
|
border:1px solid transparent; |
|
} |
|
|
|
.miniContainer.talking video { |
|
border:1px solid #9dd53a; |
|
} |
|
|
|
.renderer-smally { |
|
width:150px; |
|
.remoteVideos { |
|
padding-bottom: 85px; |
|
} |
|
.miniContainer { |
|
bottom:0px; |
|
left:0px; |
|
right:0px; |
|
max-height:none; |
|
height:85px; |
|
} |
|
.remoteVideo .peerLabel { |
|
font-size:.9em; |
|
font-weight:bold; |
|
} |
|
.remoteVideo .peerActions i { |
|
font-size:1em; |
|
} |
|
} |
|
|
|
.renderer-conferencekiosk { |
|
.remoteVideos { |
|
top:auto; |
|
bottom:2px; |
|
text-align:center; |
|
background:rgba(0,0,0,0.4); |
|
padding-right:192px; |
|
min-height:108px; |
|
>div { |
|
height:108px; |
|
width:192px; |
|
cursor:pointer; |
|
} |
|
.overlayLogo { |
|
display:none; |
|
} |
|
.peerLabel, .peerActions i { |
|
font-size:1.1em; |
|
} |
|
.peerLabel { |
|
background: rgba(0,0,0,0.9); |
|
} |
|
} |
|
.miniContainer { |
|
max-height: none; |
|
height:108px; |
|
width:192px; |
|
} |
|
.bigVideo { |
|
position:absolute; |
|
left:0px; |
|
right:0px; |
|
bottom:112px; |
|
top:2px; |
|
margin: auto; |
|
opacity: 0; |
|
transition-property: opacity; |
|
-webkit-transition-property: opacity; |
|
transition-duration: 2s; |
|
-webkit-transition-duration: 2s; |
|
} |
|
.bigVideo video { |
|
width:100%; |
|
height:100%; |
|
} |
|
|
|
} |
|
|
|
@media only screen and (max-width: 630px) { |
|
.mainScreenshare #audiovideo { |
|
display:none; |
|
} |
|
} |
|
@media only screen and (max-width:590px) { |
|
#audiovideo { |
|
right:0px; |
|
} |
|
}
|
|
|