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

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

@ -18,370 +18,336 @@ @@ -18,370 +18,336 @@
* 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 {
background: black !important;
bottom: 0 !important;
left: 0 !important;
top: 0 !important;
right: 0 !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 {
bottom: 0;
left: 0;
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 {
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 {
bottom: 0;
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
transform: rotateY(180deg);
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 {
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;
}
bottom: 0;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
transition-property: opacity;
transition-duration: 2s;
video {
display: block;
height: 100%;
width: 100%;
}
}
.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{
background: $video-background;
display: inline-block;
max-height: 100%;
max-width: 100%;
overflow: hidden;
position: relative;
vertical-align: bottom;
visibility: hidden;
width: 100%;
&.withvideo {
visibility: visible;
}
&.onlyaudio {
background: $video-onlyaudio-background;
visibility: visible;
}
.onlyaudio {
color: $video-onlyaudio;
display: none;
font-size: 80px;
left: 0;
margin-top: -40px;
pointer-events: auto;
position: absolute;
right: 0;
text-align: center;
top: 45%;
}
&.onlyaudio video {
display: none;
}
&.onlyaudio .onlyaudio {
display: block;
}
.peerActions {
bottom: 5%;
left: 0;
opacity: 0;
pointer-events: auto;
position: absolute;
right: 0;
text-align: center;
transition-property: opacity;
transition-duration: .2s;
z-index: 10;
&:hover {
opacity: .5;
}
i {
font-size: 3vw;
}
}
.peerLabel {
bottom: 4%;
color: white;
left: 4%;
font-size: 2.5vw;
max-width: 30%;
opacity: .7;
overflow: hidden;
padding: 4px;
position: absolute;
text-overflow: ellipsis;
text-shadow: 0 0 4px black;
white-space: nowrap;
z-index: 8;
}
}
.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;
}
}
.audiovideo.active:hover .overlayActions {
opacity: 0.3;
}
.audiovideo.active .overlayActions:hover {
opacity: 0.6;
background: $video-overlayactions;
bottom: 0;
height: 70px;
left: 0;
margin:auto 0;
opacity: 0;
padding: 3px 0;
position: absolute;
top: 0;
width: 40px;
z-index: 5;
button {
color: #ccc;
cursor: pointer;
display: block;
outline: 0;
text-shadow: 0 0 5px black;
width: 40px;
}
}
.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: $audiovideolevel;
}
.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 {
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 {
&.talking video {
border: 1px solid $audiovideolevel;
}
video {
border: 1px solid transparent;
}
}
.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;
}
.overlayActions {
display: none;
}
width: 150px;
.remoteVideos {
padding-bottom: 85px;
}
.remoteVideo {
.peerLabel {
font-size: .9em;
font-weight: bold;
}
.peerActions i {
font-size: 1em;
}
}
.miniContainer {
bottom: 0;
height: 85px;
left: 0;
max-height: none;
right: 0;
}
}
.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 {
background: $video-background;
bottom: 2px;
min-height: 108px;
pointer-events: auto;
text-align: center;
top: auto;
white-space: nowrap;
> div {
cursor: pointer;
height: 108px;
width: 192px;
}
.overlayLogo {
display: none;
}
.peerLabel,
.peerActions i {
font-size: 1.1em;
}
.peerLabel {
background: $video-overlayactions;
}
}
.miniContainer {
height: 108px;
max-height: none;
width: 192px;
}
.bigVideo {
bottom: 112px;
left: 0;
margin: auto;
opacity: 0;
position: absolute;
right: 0;
top: 2px;
transition-property: opacity;
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;
}
}

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

@ -40,10 +40,18 @@ $grey4: rgba(0,0,0,.4); @@ -40,10 +40,18 @@ $grey4: rgba(0,0,0,.4);
$dgrey: rgb(34,34,34);
$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-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