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
Unified 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 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>. * 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 { #audiovideo {
perspective: 1000; border-top: 1px solid $bordercolor;
-webkit-perspective: 1000; bottom: 0;
} left: 0;
position: absolute;
.audiovideo .audiovideoBase { right: 0;
position:relative; top: 44px;
width:100%; user-select: none;
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 { #audiovideo {
position: absolute; &.fullscreen {
left:0px; top: 0 !important;
right:0px; right: 0 !important;
top:0px; bottom: 0 !important;
bottom:0px; left: 0 !important;
transform: scale(-1, 1); background: black !important;
-webkit-transform: scale(-1, 1); .remoteVideo .peerActions {
pointer-events:none; display: none;
z-index:2; }
}
@include breakpt-only-screen($breakpoint-video-small) {
right: 0;
}
} }
.audiovideo .remoteContainer { .mainScreenshare #audiovideo {
position: absolute; @include breakpt-only-screen($breakpoint-video-medium) {
left:0px; display: none;
right:0px; }
top:0px;
bottom:0px;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
pointer-events:none;
z-index:2;
} }
.audiovideo .miniContainer { .withChat #audiovideo,
position: absolute; .withBuddylist #audiovideo {
max-height: 18%; right: 260px;
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 { .withBuddylist.withChat #audiovideo {
opacity: 1; right: 520px;
} }
.audiovideo .miniVideo { .audiovideo {
max-height: 100%; position: absolute;
max-width:100%; top: 0;
display:block; 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 { .audiovideo {
width: 100%; .remoteContainer {
max-height: 100%; position: absolute;
opacity: 0; left: 0;
transition-property: opacity; right: 0;
-webkit-transition-property: opacity; top: 0;
transition-duration: 2s; bottom: 0;
-webkit-transition-duration: 2s; transform: rotateY(180deg);
background: rgba(0,0,0,0.4); -webkit-transform: rotateY(180deg);
display:block; 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 { .audiovideo .remoteVideos {
position:absolute; position: absolute;
left:0px; left: 0;
right:0px; right: 0;
bottom:0px; bottom: 0;
top:0px; top: 0;
opacity: 0; opacity: 0;
transition-property: opacity; transition-property: opacity;
-webkit-transition-property: opacity; -webkit-transition-property: opacity;
transition-duration: 2s; transition-duration: 2s;
-webkit-transition-duration: 2s; -webkit-transition-duration: 2s;
video {
video { width: 100%;
width:100%; height: 100%;
height:100%; display: block;
display:block; }
}
} }
.audiovideo { .audiovideo .remoteVideo{
display: inline-block;
.remoteVideo { width: 100%;
display: inline-block; max-width: 100%;
width:100%; max-height: 100%;
max-width:100%; vertical-align: bottom;
max-height:100%; position: relative;
vertical-align:bottom; visibility: hidden;
position:relative; background: rgba(0,0,0,0.4);
visibility:hidden; overflow: hidden;
background: rgba(0,0,0,0.4); &.withvideo {
overflow:hidden; visibility: visible;
} }
.remoteVideo.withvideo { &.onlyaudio {
visibility:visible; visibility: visible;
} background: #666;
.remoteVideo.onlyaudio { }
visibility:visible; .onlyaudio {
background: #666; display: none;
} position: absolute;
.remoteVideo .onlyaudio { left: 0px;
display:none; top: 45%;
position:absolute; right: 0px;
left:0px; color: rgba(255,255,255,0.3);
top:45%; text-align: center;
right:0px; font-size: 80px;
color:rgba(255,255,255,0.3); margin-top: -40px;
text-align:center; pointer-events: auto;
font-size:80px; }
margin-top:-40px; &.onlyaudio video {
pointer-events:auto; display: none;
} }
.remoteVideo.onlyaudio video { &.onlyaudio .onlyaudio {
display:none; display: block;
} }
.remoteVideo.onlyaudio .onlyaudio { .peerActions {
display:block; position: absolute;
} z-index: 10;
.remoteVideo .peerActions { left: 0px;
position: absolute; right: 0px;
z-index: 10; bottom: 5%;
left:0px; text-align: center;
right:0px; opacity: .0;
bottom:5%; transition-property: opacity;
text-align:center; -webkit-transition-property: opacity;
opacity:.0; transition-duration: 0.2s;
transition-property: opacity; -webkit-transition-duration: 0.2s;
-webkit-transition-property: opacity; pointer-events: auto;
transition-duration: 0.2s; &:hover {
-webkit-transition-duration: 0.2s; opacity: .5;
pointer-events:auto; }
} i {
.remoteVideo .peerActions i { font-size: 3vw;
font-size:3vw; }
} }
.remoteVideo .peerActions:hover { .peerLabel {
opacity:.5; position: absolute;
} z-index: 8;
.remoteVideo .peerLabel { left: 4%;
position: absolute; bottom: 4%;
z-index:8; font-size: 2.5vw;
left:4%; color: white;
bottom:4%; opacity: .7;
font-size:2.5vw; text-shadow: 0px 0px 4px black;
color:white; max-width: 30%;
opacity:.7; overflow: hidden;
text-shadow: 0px 0px 4px black; white-space: nowrap;
max-width:30%; text-overflow: ellipsis;
overflow:hidden; padding: 4px;
white-space:nowrap; }
text-overflow:ellipsis;
padding:4px;
}
} }
.audiovideo .overlayActions { .audiovideo .overlayActions {
position: absolute; position: absolute;
left:0px; left: 0px;
top:0px; top: 0px;
bottom:0px; bottom: 0px;
height:70px; height: 70px;
margin:auto 0; margin:auto 0;
width:40px; width: 40px;
padding:3px 0; padding: 3px 0;
background: rgba(0,0,0,0.9); background: rgba(0,0,0,0.9);
z-index:5; z-index: 5;
opacity:0; opacity: 0;
button {
button { width: 40px;
width:40px; display: block;
display: block; color: #ccc;
color:#ccc; cursor: pointer;
cursor:pointer; text-shadow: 0 0 5px black;
text-shadow: 0 0 5px black; outline: 0;
outline: 0; }
}
} }
.audiovideo.active:hover .overlayActions { .remoteVideo {
opacity: 0.3; &.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 { .miniContainer {
opacity: 0.6; &.talking video {
} border: 1px solid #9dd53a;
}
.remoteVideo .peerLabel { video {
-webkit-transition: color 500ms ease-out; border: 1px solid transparent;
-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 { .renderer-smally {
width:150px; width: 150px;
.remoteVideos { .remoteVideos {
padding-bottom: 85px; padding-bottom: 85px;
} }
.miniContainer { .remoteVideo {
bottom:0px; .peerLabel {
left:0px; font-size: .9em;
right:0px; font-weight: bold;
max-height:none; }
height:85px; .peerActions i {
} font-size: 1em;
.remoteVideo .peerLabel { }
font-size:.9em; }
font-weight:bold; .miniContainer {
} bottom: 0;
.remoteVideo .peerActions i { left: 0;
font-size:1em; right: 0;
} max-height: none;
height: 85px;
}
} }
.renderer-onepeople { .renderer-onepeople {
} }
.renderer-conferencekiosk { .renderer-conferencekiosk {
.remoteVideos { .remoteVideos {
top:auto; top: auto;
bottom:2px; bottom: 2px;
text-align:center; text-align: center;
background:rgba(0,0,0,0.4); background: rgba(0,0,0,0.4);
min-height:108px; min-height: 108px;
pointer-events:auto; pointer-events: auto;
white-space:nowrap; white-space: nowrap;
>div { > div {
height:108px; height: 108px;
width:192px; width: 192px;
cursor:pointer; cursor: pointer;
} }
.overlayLogo { .overlayLogo {
display:none; display: none;
} }
.peerLabel, .peerActions i { .peerLabel,
font-size:1.1em; .peerActions i {
} font-size: 1.1em;
.peerLabel { }
background: rgba(0,0,0,0.9); .peerLabel {
} background: rgba(0,0,0,0.9);
} }
.miniContainer { }
max-height: none; .miniContainer {
height:108px; max-height: none;
width:192px; height: 108px;
} width: 192px;
.bigVideo { }
position:absolute; .bigVideo {
left:0px; position: absolute;
right:0px; left: 0;
bottom:112px; right: 0;
top:2px; bottom: 112px;
margin: auto; top: 2px;
opacity: 0; margin: auto;
transition-property: opacity; opacity: 0;
-webkit-transition-property: opacity; transition-property: opacity;
transition-duration: 2s; -webkit-transition-property: opacity;
-webkit-transition-duration: 2s; transition-duration: 2s;
} -webkit-transition-duration: 2s;
.bigVideo video { video {
width:100%; width: 100%;
height:100%; height: 100%;
} }
}
}
@media only screen and (max-width: 630px) {
.mainScreenshare #audiovideo {
display:none;
}
}
@media only screen and (max-width:590px) {
#audiovideo {
right:0px;
}
} }

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

@ -4,3 +4,9 @@
@content; @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;
$breakpoint-medium: 700px; $breakpoint-medium: 700px;
$breakpoint-large: 1280px; $breakpoint-large: 1280px;
$breakpoint-video-small: 590px;
$breakpoint-video-medium: 630px;
$font-sans-serif: "Helvetica Neue",Helvetica,Arial,sans-serif; $font-sans-serif: "Helvetica Neue",Helvetica,Arial,sans-serif;
// compass // compass

Write Preview
Loading…
Cancel
Save