pimhwang
/
spreed-webrtc
mirror of https://github.com/strukturag/spreed-webrtc.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Update audiovideo to scss.

pull/29/head^2
Evan Theurer 12 years ago
parent
32d3e48e59
commit
25544de258
3 changed files with 325 additions and 331 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 647
      src/styles/components/_audiovideo.scss
  2. 6
      src/styles/global/_mixins.scss
  3. 3
      src/styles/global/_variables.scss

647
src/styles/components/_audiovideo.scss
Unescape View File

@ -18,369 +18,354 @@ @@ -18,369 +18,354 @@
* 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 {
border-top: 1px solid $bordercolor;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 44px;
user-select: none;
}
.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 {
&.fullscreen {
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
background: black !important;
.remoteVideo .peerActions {
display: none;
}
}
@include breakpt-only-screen($breakpoint-video-small) {
right: 0;
}
}
.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;
.mainScreenshare #audiovideo {
@include breakpt-only-screen($breakpoint-video-medium) {
display: none;
}
}
.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;
.withChat #audiovideo,
.withBuddylist #audiovideo {
right: 260px;
}
.audiovideo .miniContainer.visible {
opacity: 1;
.withBuddylist.withChat #audiovideo {
right: 520px;
}
.audiovideo .miniVideo {
max-height: 100%;
max-width:100%;
display:block;
.audiovideo {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
&.active {
perspective: 1000;
&:hover .overlayActions {
opacity: 0.3;
}
.overlayActions:hover {
opacity: 0.6;
}
.audiovideoBase {
transform: rotateY(180deg);
}
}
.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;
}
.localContainer {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
pointer-events: none;
z-index: 2;
}
}
.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 {
.remoteContainer {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
pointer-events: none;
z-index: 2;
}
.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;
&.visible {
opacity: 1;
}
}
.miniVideo {
max-height: 100%;
max-width: 100%;
display: block;
}
.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;
}
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
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-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 .remoteVideo{
display: inline-block;
width: 100%;
max-width: 100%;
max-height: 100%;
vertical-align: bottom;
position: relative;
visibility: hidden;
background: rgba(0,0,0,0.4);
overflow: hidden;
&.withvideo {
visibility: visible;
}
&.onlyaudio {
visibility: visible;
background: #666;
}
.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;
}
&.onlyaudio video {
display: none;
}
&.onlyaudio .onlyaudio {
display: block;
}
.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;
&:hover {
opacity: .5;
}
i {
font-size: 3vw;
}
}
.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.9);
z-index:5;
opacity:0;
button {
width:40px;
display: block;
color:#ccc;
cursor:pointer;
text-shadow: 0 0 5px black;
outline: 0;
}
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
height: 70px;
margin:auto 0;
width: 40px;
padding: 3px 0;
background: rgba(0,0,0,0.9);
z-index: 5;
opacity: 0;
button {
width: 40px;
display: block;
color: #ccc;
cursor: pointer;
text-shadow: 0 0 5px black;
outline: 0;
}
}
.audiovideo.active:hover .overlayActions {
opacity: 0.3;
.remoteVideo {
&.talking .peerLabel {
color: #9dd53a;
}
.peerLabel {
transition: color 500ms ease-out;
}
.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;
}
}
.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;
.miniContainer {
&.talking video {
border: 1px solid #9dd53a;
}
video {
border: 1px solid transparent;
}
}
.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;
}
width: 150px;
.remoteVideos {
padding-bottom: 85px;
}
.remoteVideo {
.peerLabel {
font-size: .9em;
font-weight: bold;
}
.peerActions i {
font-size: 1em;
}
}
.miniContainer {
bottom: 0;
left: 0;
right: 0;
max-height: none;
height: 85px;
}
}
.renderer-onepeople {
}
.renderer-conferencekiosk {
.remoteVideos {
top:auto;
bottom:2px;
text-align:center;
background:rgba(0,0,0,0.4);
min-height:108px;
pointer-events:auto;
white-space:nowrap;
>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;
}
.remoteVideos {
top: auto;
bottom: 2px;
text-align: center;
background: rgba(0,0,0,0.4);
min-height: 108px;
pointer-events: auto;
white-space: nowrap;
> 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: 0;
right: 0;
bottom: 112px;
top: 2px;
margin: auto;
opacity: 0;
transition-property: opacity;
-webkit-transition-property: opacity;
transition-duration: 2s;
-webkit-transition-duration: 2s;
video {
width: 100%;
height: 100%;
}
}
}

6
src/styles/global/_mixins.scss
Unescape View File

@ -4,3 +4,9 @@ @@ -4,3 +4,9 @@
@content;
}
}
@mixin breakpt-only-screen($pt) {
@media only screen and (max-width: $pt) {
@content;
}
}

3
src/styles/global/_variables.scss
Unescape View File

@ -44,6 +44,9 @@ $breakpoint-small: 480px; @@ -44,6 +44,9 @@ $breakpoint-small: 480px;
$breakpoint-medium: 700px;
$breakpoint-large: 1280px;
$breakpoint-video-small: 590px;
$breakpoint-video-medium: 630px;
$font-sans-serif: "Helvetica Neue",Helvetica,Arial,sans-serif;
// compass

Write Preview
Loading…
Cancel
Save