haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Main UI polishing. Removes rounded corners, fixes gaps. Adding custom avatars.

This commit is contained in:
yanas 2016-02-26 17:19:03 -06:00
parent 32c2d912be
commit 5c0088d2ef
5 changed files with 32 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
css/main.css
View File

@ -38,16 +38,6 @@ html, body{
position: relative; position: relative;
} }
#toolbar a.button::after {
content: '';
display: inline-block;
position: absolute;
left: 40px;
width: 1px;
height: 20px;
background: #373737;
}
#toolbar a.button:last-child::after { #toolbar a.button:last-child::after {
content: none; content: none;
} }
@ -57,7 +47,7 @@ html, body{
position: relative; position: relative;
color: #FFFFFF; color: #FFFFFF;
top: 0; top: 0;
padding: 10px 0; padding: 9px 0;
width: 38px; width: 38px;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
@ -110,7 +100,7 @@ html, body{
height: 13px; height: 13px;
line-height: 13px; line-height: 13px;
font-weight: bold; font-weight: bold;
border-radius: 2px; border-radius: 1px;
font-size: 11px; font-size: 11px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
} }
@ -145,10 +135,8 @@ a.bottomToolbarButton:hover {
top: 0px; top: 0px;
cursor: pointer; cursor: pointer;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
border-radius: 6px; border-radius: 1px;
background-clip: padding-box; -webkit-border-radius: 1px;
-webkit-border-radius: 6px;
-webkit-background-clip: padding-box;
} }
.no-fa-video-camera, .fa-microphone-slash { .no-fa-video-camera, .fa-microphone-slash {
@ -211,7 +199,7 @@ button {
height: 35px; height: 35px;
padding: 0 1em 0 2em; padding: 0 1em 0 2em;
position: relative; position: relative;
border-radius: 3px; border-radius: 1px;
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
line-height: 35px; line-height: 35px;
@ -273,9 +261,8 @@ div.feedbackButton:hover {
margin-right: 5px; margin-right: 5px;
bottom: 40px; bottom: 40px;
width: 29px; width: 29px;
border-radius: 6px; border-radius: 1px;
color: #FFF; color: #FFF;
border: 1px solid rgba(256, 256, 256, 0.2);
background: rgba(0,0,0,0.8); background: rgba(0,0,0,0.8);
z-index: 6; /*+1 from #remoteVideos*/ z-index: 6; /*+1 from #remoteVideos*/
} }

4
css/popup_menu.css
View File

@ -13,7 +13,7 @@ ul.popupmenu {
width: 100px; width: 100px;
background-color: rgba(0,0,0,0.9); background-color: rgba(0,0,0,0.9);
border: 1px solid rgba(256, 256, 256, 0.2); border: 1px solid rgba(256, 256, 256, 0.2);
border-radius:8px; border-radius:3px;
} }
ul.popupmenu:after { ul.popupmenu:after {
@ -31,7 +31,7 @@ ul.popupmenu li {
ul.popupmenu li:hover { ul.popupmenu li:hover {
background-color: rgba(256, 256, 256, .2); background-color: rgba(256, 256, 256, .2);
border-radius:6px; border-radius:3px;
} }
/*Link Appearance*/ /*Link Appearance*/

32
css/videolayout_default.css
View File

@ -21,6 +21,7 @@
z-index: 5; z-index: 5;
transition: bottom 2s; transition: bottom 2s;
overflow: visible !important; overflow: visible !important;
font-size: 0pt; /*!!!Removes the gap between the local video container and the remote videos.*/
} }
#remotevideos.hidden { #remotevideos.hidden {
@ -38,9 +39,9 @@
display: none; display: none;
background-color: black; background-color: black;
background-size: contain; background-size: contain;
border-radius:8px; border-radius:1px;
border: 2px solid #212425; border: 1px solid #212425;
margin-right: 3px; /*margin-right: 1px;*/
} }
#remoteVideos .videocontainer:hover, #remoteVideos .videocontainer:hover,
@ -58,24 +59,24 @@
#remoteVideos .videocontainer:hover { #remoteVideos .videocontainer:hover {
box-shadow: inset 0 0 10px #FFFFFF, 0 0 10px #FFFFFF; box-shadow: inset 0 0 10px #FFFFFF, 0 0 10px #FFFFFF;
border: 2px solid #FFFFFF; border: 1px solid #FFFFFF;
} }
#remoteVideos .videocontainer.videoContainerFocused { #remoteVideos .videocontainer.videoContainerFocused {
box-shadow: inset 0 0 28px #006d91; box-shadow: inset 0 0 28px #006d91;
border: 2px solid #006d91; border: 1px solid #006d91;
} }
#remoteVideos .videocontainer.videoContainerFocused:hover { #remoteVideos .videocontainer.videoContainerFocused:hover {
box-shadow: inset 0 0 5px #FFFFFF, 0 0 10px #FFFFFF, inset 0 0 60px #006d91; box-shadow: inset 0 0 5px #FFFFFF, 0 0 10px #FFFFFF, inset 0 0 60px #006d91;
border: 2px solid #FFFFFF; border: 1px solid #FFFFFF;
} }
#localVideoWrapper { #localVideoWrapper {
display:inline-block; display:inline-block;
-webkit-mask-box-image: url(../images/videomask.svg); /*-webkit-mask-box-image: url(../images/videomask.svg);*/
border-radius:4px !important; /*border-radius:1px !important;*/
border: 0px !important; /*border: 0px !important;*/
} }
/* With TemasysWebRTC plugin <object/> element is used /* With TemasysWebRTC plugin <object/> element is used
@ -83,7 +84,7 @@
#remoteVideos .videocontainer>video, #remoteVideos .videocontainer>video,
#remoteVideos .videocontainer>object { #remoteVideos .videocontainer>object {
cursor: hand; cursor: hand;
border-radius:4px; border-radius:1px;
} }
.flipVideoX { .flipVideoX {
@ -96,7 +97,7 @@
#localVideoWrapper>video, #localVideoWrapper>video,
#localVideoWrapper>object { #localVideoWrapper>object {
cursor: hand; cursor: hand;
border-radius:4px !important; border-radius:1px !important;
} }
#largeVideo, #largeVideo,
@ -177,7 +178,7 @@
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
z-index: 2; z-index: 2;
border-radius:20px; border-radius:3px;
} }
.videocontainer>span.status { .videocontainer>span.status {
@ -196,7 +197,7 @@
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
z-index: 2; z-index: 2;
border-radius:20px; border-radius:3px;
} }
.connectionindicator .connectionindicator
@ -371,8 +372,7 @@
height:38px; height:38px;
width:auto; width:auto;
background-color: rgba(0,0,0,0.8); background-color: rgba(0,0,0,0.8);
border: 1px solid rgba(256, 256, 256, 0.2); border-radius: 1px;
border-radius: 6px;
pointer-events: auto; pointer-events: auto;
} }
@ -395,7 +395,7 @@
display: inline-block; display: inline-block;
position: absolute; position: absolute;
z-index: 0; z-index: 0;
border-radius:10px; border-radius:1px;
pointer-events: none; pointer-events: none;
} }

10
css/welcome_page.css
View File

@ -42,11 +42,11 @@
} }
#enter_room_form { #enter_room_form {
border-radius: 10px; border-radius: 1px;
background-color: #FFFFFF; background-color: #FFFFFF;
border: none; border: none;
-moz-border-radius: 10px; -moz-border-radius: 1px;
-webkit-border-radius: 10px; -webkit-border-radius: 1px;
-webkit-appearance: none; -webkit-appearance: none;
height: 55px; height: 55px;
box-shadow: none; box-shadow: none;
@ -82,8 +82,8 @@
width: 73px; width: 73px;
height: 45px; height: 45px;
background-color: #16a8fe; background-color: #16a8fe;
moz-border-radius: 10px; moz-border-radius: 1px;
-webkit-border-radius: 10px; -webkit-border-radius: 1px;
color: #ffffff; color: #ffffff;
font-weight: 600; font-weight: 600;
border: none; border: none;

6
interface_config.js
View File

@ -1,6 +1,6 @@
var interfaceConfig = { var interfaceConfig = {
CANVAS_EXTRA: 104, CANVAS_EXTRA: 104,
CANVAS_RADIUS: 7, CANVAS_RADIUS: 1,
SHADOW_COLOR: '#ffffff', SHADOW_COLOR: '#ffffff',
INITIAL_TOOLBAR_TIMEOUT: 20000, INITIAL_TOOLBAR_TIMEOUT: 20000,
TOOLBAR_TIMEOUT: 4000, TOOLBAR_TIMEOUT: 4000,
@ -28,7 +28,7 @@ var interfaceConfig = {
* Whether to only show the filmstrip (and hide the toolbar). * Whether to only show the filmstrip (and hide the toolbar).
*/ */
filmStripOnly: false, filmStripOnly: false,
RANDOM_AVATAR_URL_PREFIX: false, RANDOM_AVATAR_URL_PREFIX: "http://abotars.hipch.at/meeple/",
RANDOM_AVATAR_URL_SUFFIX: false, RANDOM_AVATAR_URL_SUFFIX: ".png",
FILM_STRIP_MAX_HEIGHT: 160 FILM_STRIP_MAX_HEIGHT: 160
}; };