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. 

Rearrange elements.

Change out colors for variables.

Change out colors for variables.
pull/30/head
Evan Theurer 12 years ago
parent
adbca1c299
commit
63af6e4462
4 changed files with 316 additions and 336 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. 8
      src/styles/components/_audiolevel.scss
  2. 630
      src/styles/components/_audiovideo.scss
  3. 6
      src/styles/global/_mixins.scss
  4. 8
      src/styles/global/_variables.scss

8
src/styles/components/_audiolevel.scss
Unescape View File

@ -28,16 +28,16 @@
width: 400px; width: 400px;
z-index: 6; z-index: 6;
.audio-level { .audio-level {
background: #9dd53a; /* Old browsers */ background: $audiovideolevel; /* Old browsers */
background: gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */ background: gradient(linear, left top, left bottom, color-stop(0%,$audiovideolevel), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
background: linear-gradient(to bottom, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */ background: linear-gradient(to bottom, $audiovideolevel 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */
border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px;
height: 4px; height: 4px;
left: 0; left: 0;
margin: 0 auto; margin: 0 auto;
position: absolute; position: absolute;
right: 0; right: 0;
transition: width 0.05s ease-in-out; transition: width .05s ease-in-out;
width: 0; width: 0;
} }
} }

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

@ -18,370 +18,336 @@
* 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 {
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 { #audiovideo {
transform: rotateY(180deg); border-top: 1px solid $bordercolor;
-webkit-transform: rotateY(180deg); bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 44px;
user-select: none;
} }
.audiovideo .localContainer { #audiovideo {
position: absolute; &.fullscreen {
left:0px; background: black !important;
right:0px; bottom: 0 !important;
top:0px; left: 0 !important;
bottom:0px; top: 0 !important;
transform: scale(-1, 1); right: 0 !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%; bottom: 0;
max-width:100%; left: 0;
display:block; position: absolute;
top: 0;
right: 0;
&.active {
perspective: 1000;
&:hover .overlayActions {
opacity: .3;
}
.overlayActions:hover {
opacity: .6;
}
.audiovideoBase {
transform: rotateY(180deg);
}
}
.audiovideoBase {
position: relative;
width: 100%;
height: 100%;
transition-property: transform;
transition-duration: 2s;
transform: rotateY(0deg);
z-index: 2;
}
.localContainer {
bottom: 0;
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
transform: scale(-1, 1);
z-index: 2;
}
} }
.audiovideo .localVideo { .audiovideo {
width: 100%; .remoteContainer {
max-height: 100%; bottom: 0;
opacity: 0; left: 0;
transition-property: opacity; pointer-events: none;
-webkit-transition-property: opacity; position: absolute;
transition-duration: 2s; right: 0;
-webkit-transition-duration: 2s; top: 0;
background: rgba(0,0,0,0.4); transform: rotateY(180deg);
display:block; z-index: 2;
}
.miniContainer {
bottom: 2px;
max-height: 18%;
opacity: 0;
position: absolute;
right: 2px;
transform: scale(-1, 1);
transition-property: opacity;
transition-duration: .5s;
&.visible {
opacity: 1;
}
}
.miniVideo {
display: block;
max-height: 100%;
max-width: 100%;
}
.localVideo {
background: $video-background;
display: block;
max-height: 100%;
opacity: 0;
transition-property: opacity;
transition-duration: 2s;
width: 100%;
}
} }
.audiovideo .remoteVideos { .audiovideo .remoteVideos {
position:absolute; bottom: 0;
left:0px; left: 0;
right:0px; opacity: 0;
bottom:0px; position: absolute;
top:0px; right: 0;
opacity: 0; top: 0;
transition-property: opacity; transition-property: opacity;
-webkit-transition-property: opacity; transition-duration: 2s;
transition-duration: 2s; video {
-webkit-transition-duration: 2s; display: block;
height: 100%;
video { width: 100%;
width:100%; }
height:100%;
display:block;
}
} }
.audiovideo { .audiovideo .remoteVideo{
background: $video-background;
.remoteVideo { display: inline-block;
display: inline-block; max-height: 100%;
width:100%; max-width: 100%;
max-width:100%; overflow: hidden;
max-height:100%; position: relative;
vertical-align:bottom; vertical-align: bottom;
position:relative; visibility: hidden;
visibility:hidden; width: 100%;
background: rgba(0,0,0,0.4); &.withvideo {
overflow:hidden; visibility: visible;
} }
.remoteVideo.withvideo { &.onlyaudio {
visibility:visible; background: $video-onlyaudio-background;
} visibility: visible;
.remoteVideo.onlyaudio { }
visibility:visible; .onlyaudio {
background: #666; color: $video-onlyaudio;
} display: none;
.remoteVideo .onlyaudio { font-size: 80px;
display:none; left: 0;
position:absolute; margin-top: -40px;
left:0px; pointer-events: auto;
top:45%; position: absolute;
right:0px; right: 0;
color:rgba(255,255,255,0.3); text-align: center;
text-align:center; top: 45%;
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; bottom: 5%;
} left: 0;
.remoteVideo .peerActions { opacity: 0;
position: absolute; pointer-events: auto;
z-index: 10; position: absolute;
left:0px; right: 0;
right:0px; text-align: center;
bottom:5%; transition-property: opacity;
text-align:center; transition-duration: .2s;
opacity:.0; z-index: 10;
transition-property: opacity; &:hover {
-webkit-transition-property: opacity; opacity: .5;
transition-duration: 0.2s; }
-webkit-transition-duration: 0.2s; i {
pointer-events:auto; font-size: 3vw;
} }
.remoteVideo .peerActions i { }
font-size:3vw; .peerLabel {
} bottom: 4%;
.remoteVideo .peerActions:hover { color: white;
opacity:.5; left: 4%;
} font-size: 2.5vw;
.remoteVideo .peerLabel { max-width: 30%;
position: absolute; opacity: .7;
z-index:8; overflow: hidden;
left:4%; padding: 4px;
bottom:4%; position: absolute;
font-size:2.5vw; text-overflow: ellipsis;
color:white; text-shadow: 0 0 4px black;
opacity:.7; white-space: nowrap;
text-shadow: 0px 0px 4px black; z-index: 8;
max-width:30%; }
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
padding:4px;
}
} }
.audiovideo .overlayActions { .audiovideo .overlayActions {
position: absolute; background: $video-overlayactions;
left:0px; bottom: 0;
top:0px; height: 70px;
bottom:0px; left: 0;
height:70px; margin:auto 0;
margin:auto 0; opacity: 0;
width:40px; padding: 3px 0;
padding:3px 0; position: absolute;
background: rgba(0,0,0,0.9); top: 0;
z-index:5; width: 40px;
opacity:0; z-index: 5;
button {
button { color: #ccc;
width:40px; cursor: pointer;
display: block; display: block;
color:#ccc; outline: 0;
cursor:pointer; text-shadow: 0 0 5px black;
text-shadow: 0 0 5px black; width: 40px;
outline: 0; }
}
}
.audiovideo.active:hover .overlayActions {
opacity: 0.3;
}
.audiovideo.active .overlayActions:hover {
opacity: 0.6;
} }
.remoteVideo .peerLabel { .remoteVideo {
-webkit-transition: color 500ms ease-out; &.talking .peerLabel {
-moz-transition: color 500ms ease-out; color: $audiovideolevel;
-o-transition: color 500ms ease-out; }
transition: color 500ms ease-out; .peerLabel {
transition: color 500ms ease-out;
}
.overlayLogo {
background: url(../img/logo-overlay.png) no-repeat center;
background-size: 100%;
height: 20%;
max-height: 40px;
max-width: 111px;
opacity: .5;
pointer-events: none;
position: absolute;
right: 4%;
top: 4%;
width: 20%;
z-index: 2;
}
} }
.remoteVideo.talking .peerLabel { .miniContainer {
color: #9dd53a; &.talking video {
border: 1px solid $audiovideolevel;
.remoteVideo .overlayLogo { }
position:absolute; video {
right:4%; border: 1px solid transparent;
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 { height: 85px;
font-size:1em; left: 0;
} max-height: none;
.overlayActions { right: 0;
display: none; }
}
} }
.renderer-onepeople { .renderer-onepeople {
} }
.renderer-conferencekiosk { .renderer-conferencekiosk {
.remoteVideos { .remoteVideos {
top:auto; background: $video-background;
bottom:2px; bottom: 2px;
text-align:center; min-height: 108px;
background:rgba(0,0,0,0.4); pointer-events: auto;
min-height:108px; text-align: center;
pointer-events:auto; top: auto;
white-space:nowrap; white-space: nowrap;
>div { > div {
height:108px; cursor: pointer;
width:192px; height: 108px;
cursor:pointer; width: 192px;
} }
.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: $video-overlayactions;
} }
.miniContainer { }
max-height: none; .miniContainer {
height:108px; height: 108px;
width:192px; max-height: none;
} width: 192px;
.bigVideo { }
position:absolute; .bigVideo {
left:0px; bottom: 112px;
right:0px; left: 0;
bottom:112px; margin: auto;
top:2px; opacity: 0;
margin: auto; position: absolute;
opacity: 0; right: 0;
transition-property: opacity; top: 2px;
-webkit-transition-property: opacity; transition-property: opacity;
transition-duration: 2s; transition-duration: 2s;
-webkit-transition-duration: 2s; video {
} width: 100%;
.bigVideo video { height: 100%;
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;
}
} }

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;
}
}

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

@ -40,10 +40,18 @@ $grey4: rgba(0,0,0,.4);
$dgrey: rgb(34,34,34); $dgrey: rgb(34,34,34);
$red: rgb(219,79,57); $red: rgb(219,79,57);
$video-background: rgba(0,0,0,.4);
$video-onlyaudio-background: #666;
$video-onlyaudio: rgba(255,255,255,.3);
$video-overlayactions: rgba(0,0,0,.9);
$breakpoint-small: 480px; $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