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

css/main.css

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

css/popup_menu.css

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

css/videolayout_default.css

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

css/welcome_page.css

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

interface_config.js

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