Browse Source
Conflicts:
src/styles/components/_audiovideo.scss
src/styles/global/_base.scss
src/styles/global/_variables.scss
src/styles/main.scss
Merge from 7360961617.
pull/29/head
Evan Theurer
12 years ago
43 changed files with 876 additions and 544 deletions
@ -0,0 +1,100 @@
@@ -0,0 +1,100 @@
|
||||
<!DOCTYPE html> |
||||
<title>CSS site color pallete</title> |
||||
<style> |
||||
td { |
||||
width: 20em; |
||||
padding: 0 2%; |
||||
} |
||||
.color-block { |
||||
height: 50px; |
||||
border: 10px solid white; |
||||
} |
||||
.color-desc { |
||||
height: 25px; |
||||
padding: 5% 0 0 0; |
||||
text-align: center; |
||||
} |
||||
</style> |
||||
|
||||
<table> |
||||
<tr> |
||||
<td class="color-desc"> |
||||
$background: #e5e5e5 |
||||
</td> |
||||
<td class="color-desc"> |
||||
$componentbg: #f5f5f5 |
||||
</td> |
||||
<td class="color-desc"> |
||||
$componentfg1: #262626 |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td class="color-block" style="background-color: #e5e5e5;"></td> |
||||
<td class="color-block" style="background-color: #f5f5f5;"></td> |
||||
<td class="color-block" style="background-color: #262626;"></td> |
||||
</tr> |
||||
<tr> |
||||
<td class="color-desc"> |
||||
$componentfg2: rgba(0,0,0,.5) |
||||
</td> |
||||
<td class="color-desc"> |
||||
$componentfg3: rgba(0,0,0,.2) |
||||
</td> |
||||
<td class="color-desc"> |
||||
$componentfg4: #737373 |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td class="color-block" style="background-color: rgba(0,0,0,.5);"></td> |
||||
<td class="color-block" style="background-color: rgba(0,0,0,.2);"></td> |
||||
<td class="color-block" style="background-color: #737373;"></td> |
||||
</tr> |
||||
<tr> |
||||
<td class="color-desc"> |
||||
$sidepanebg: white |
||||
</td> |
||||
<td class="color-desc"> |
||||
$bordercolor: #ccc |
||||
</td> |
||||
<td class="color-desc"> |
||||
$actioncolor1: rgb(132,184,25) |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td class="color-block" style="background-color: white;"></td> |
||||
<td class="color-block" style="background-color: #ccc;"></td> |
||||
<td class="color-block" style="background-color: rgb(132,184,25);"></td> |
||||
</tr> |
||||
<tr> |
||||
<td class="color-desc"> |
||||
$actioncolor2: rgb(0,149,52) |
||||
</td> |
||||
<td class="color-desc"> |
||||
none: #222 |
||||
</td> |
||||
<td class="color-desc"> |
||||
none: #db4f39 |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td class="color-block" style="background-color: rgb(0,149,52);"></td> |
||||
<td class="color-block" style="background-color: #222;"></td> |
||||
<td class="color-block" style="background-color: #db4f39;"></td> |
||||
</tr> |
||||
<tr> |
||||
<td class="color-desc"> |
||||
none: #84b819 |
||||
</td> |
||||
<td class="color-desc"> |
||||
none: rgba(0,0,0,.4) |
||||
</td> |
||||
<td class="color-desc"> |
||||
none: rgba(0,0,0,.3) |
||||
</td> |
||||
</tr> |
||||
<tr> |
||||
<td class="color-block" style="background-color: #84b819;"></td> |
||||
<td class="color-block" style="background-color: rgba(0,0,0,.4);"></td> |
||||
<td class="color-block" style="background-color: rgba(0,0,0,.3);"></td> |
||||
</tr> |
||||
</table> |
||||
@ -1,179 +0,0 @@
@@ -1,179 +0,0 @@
|
||||
/* |
||||
* 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/>. |
||||
* |
||||
*/ |
||||
#container { |
||||
position: absolute; |
||||
/*margin: 0px auto;*/ |
||||
perspective: 1000; |
||||
-webkit-perspective: 1000; |
||||
top:0px; |
||||
left:0px; |
||||
bottom:0px; |
||||
right:0px; |
||||
} |
||||
#container .visible { |
||||
opacity:1 !important; |
||||
} |
||||
#card { |
||||
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); |
||||
} |
||||
#card.active { |
||||
transform: rotateY(180deg); |
||||
-webkit-transform: rotateY(180deg); |
||||
} |
||||
#local { |
||||
position: absolute; |
||||
left:0px; |
||||
right:0px; |
||||
top:0px; |
||||
bottom:0px; |
||||
transform: scale(-1, 1); |
||||
-webkit-transform: scale(-1, 1); |
||||
pointer-events:none; |
||||
} |
||||
#remote { |
||||
position: absolute; |
||||
left:0px; |
||||
right:0px; |
||||
top:0px; |
||||
bottom:0px; |
||||
transform: rotateY(180deg); |
||||
-webkit-transform: rotateY(180deg); |
||||
} |
||||
#mini { |
||||
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; |
||||
} |
||||
#localVideo { |
||||
width: 100%; |
||||
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); |
||||
/*background: red;*/ |
||||
} |
||||
#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; |
||||
/*background: blue;*/ |
||||
} |
||||
#remoteVideos video { |
||||
width:100%; |
||||
height:100%; |
||||
} |
||||
#miniVideo { |
||||
max-height: 100%; |
||||
max-width:100%; |
||||
} |
||||
.remoteVideo { |
||||
display: inline-block; |
||||
width:100%; |
||||
height:100%; |
||||
vertical-align:bottom; |
||||
position:relative; |
||||
visibility:hidden; |
||||
background: rgba(0,0,0,0.4); |
||||
} |
||||
.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; |
||||
} |
||||
.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; |
||||
} |
||||
.remoteVideo .peeractions i { |
||||
font-size:3vw; |
||||
} |
||||
.remoteVideo:hover .peeractions { |
||||
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; |
||||
} |
||||
@ -0,0 +1,23 @@
@@ -0,0 +1,23 @@
|
||||
|
||||
@mixin breakpt($pt) { |
||||
@media (max-width: $pt) { |
||||
@content; |
||||
} |
||||
} |
||||
|
||||
@mixin user-select($select) { |
||||
-khtml-user-select: $select; |
||||
-moz-user-select: $select; |
||||
-ms-user-select: $select; |
||||
-webkit-user-select: $select; |
||||
user-select: $select; |
||||
} |
||||
|
||||
@mixin touch-callout($callout) { |
||||
-webkit-touch-callout: $callout; |
||||
} |
||||
|
||||
@mixin box-shadow($shadow) { |
||||
-webkit-box-shadow: $shadow; |
||||
box-shadow: $shadow; |
||||
} |
||||
@ -1,48 +1,42 @@
@@ -1,48 +1,42 @@
|
||||
|
||||
// ** Custom Variables ** |
||||
// -------------------------------------------------- |
||||
|
||||
// Colors |
||||
/* |
||||
* 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/>. |
||||
* |
||||
*/ |
||||
$background: #e5e5e5; |
||||
$componentbg: #f5f5f5; |
||||
$componentfg1: #262626; |
||||
$componentfg2: rgba(0,0,0,.5); |
||||
$componentfg3: rgba(0,0,0,.2); |
||||
$componentfg3: rgba(0,0,0,.2); //#ccc |
||||
$componentfg4: #737373; |
||||
$sidepanebg: white; |
||||
$bordercolor: #ccc; |
||||
$actioncolor1: rgb(132,184,25); |
||||
$actioncolor2: rgb(0,149,52); |
||||
$audiovideolevel: #9dd53a; |
||||
|
||||
|
||||
|
||||
// ** Fontawsome changed variables ** |
||||
// original at libs/fontawesome/_variables.scss |
||||
// -------------------------- |
||||
|
||||
|
||||
|
||||
// ** Bootstrap changed variables ** |
||||
// original at libs/bootstrap/_variables.scss |
||||
// -------------------------------------------------- |
||||
|
||||
//== Scaffolding |
||||
// |
||||
// ## Settings for some of the most global styles. |
||||
|
||||
//** Background color for `<body>`. |
||||
$body-bg: $background; |
||||
|
||||
|
||||
//== Typography |
||||
// |
||||
//## Font, line-height, and color for body text, headings, and more. |
||||
$grey3: rgba(0,0,0,.3); |
||||
$grey4: rgba(0,0,0,.4); |
||||
$dgrey: rgb(34,34,34); |
||||
$red: rgb(219,79,57); |
||||
|
||||
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; |
||||
$font-family-serif: Georgia, "Times New Roman", Times, serif; |
||||
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`. |
||||
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; |
||||
$font-family-base: $font-family-sans-serif; |
||||
$breakpoint-small: 480px; |
||||
$breakpoint-medium: 700px; |
||||
$breakpoint-large: 1280px; |
||||
|
||||
$font-size-base: 13px; |
||||
$font-sans-serif: "Helvetica Neue",Helvetica,Arial,sans-serif; |
||||
$base-font-size: 13px; |
||||
|
||||
@ -1,12 +1,18 @@
@@ -1,12 +1,18 @@
|
||||
<div id="card"> |
||||
<div id="local"> |
||||
<video id="localVideo" autoplay="autoplay" muted="true"></video> |
||||
<div class="overlaylogo"></div> |
||||
<div class="audiovideo"> |
||||
<div class="audiovideoBase"> |
||||
<div class="localContainer"> |
||||
<video class="localVideo" autoplay="autoplay" muted="true"></video> |
||||
<div class="overlayLogo"></div> |
||||
</div> |
||||
<div id="remote"> |
||||
<div id="remoteVideos"></div> |
||||
<div id="mini" class="localVideo" ng-class="{talking: talking}"> |
||||
<video id="miniVideo" autoplay="autoplay" muted="true"></video> |
||||
<div class="remoteContainer"> |
||||
<div class="remoteVideos nicescroll"></div> |
||||
<div class="miniContainer" ng-class="{talking: talking}"> |
||||
<video class="miniVideo" autoplay="autoplay" muted="true"></video> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="overlayActions"> |
||||
<button class="btn btn-link" title="{{_('Standard view')}}" ng-click="setRenderer('onepeople')"><i class="fa fa-table" ></i></button> |
||||
<button class="btn btn-link" title="{{_('Kiosk view')}}" ng-click="setRenderer('conferencekiosk')"><i class="fa fa-user"></i></button> |
||||
</div> |
||||
</div> |
||||
@ -1,9 +1,9 @@
@@ -1,9 +1,9 @@
|
||||
<div class="remoteVideo" ng-class="{'withvideo': withvideo, 'onlyaudio': onlyaudio, 'talking': talking}"> |
||||
<video autoplay="autoplay"></video> |
||||
<div class="peerlabel">{{peerid|displayName}}</div> |
||||
<div class="peeractions"> |
||||
<div class="peerLabel">{{peerid|displayName}}</div> |
||||
<div class="peerActions"> |
||||
<a title="{{_('Start chat')}}" ng-click="doChat()" class="btn btn-default"><i class="fa fa-comments-o"></i></a> |
||||
</div> |
||||
<div class="onlyaudio"><i class="fa fa-eye-close"></i></div> |
||||
<div class="overlaylogo"></div> |
||||
<div class="overlayLogo"></div> |
||||
</div> |
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue