diff --git a/webclient/app.css b/webclient/app.css
index 736aea660c..bdf475d635 100755
--- a/webclient/app.css
+++ b/webclient/app.css
@@ -20,7 +20,12 @@ a:visited { color: #666; }
a:hover { color: #000; }
a:active { color: #000; }
-#page {
+textarea, input {
+ font-family: inherit;
+ font-size: inherit;
+}
+
+.page {
min-height: 100%;
margin-bottom: -32px; /* to make room for the footer */
}
@@ -34,9 +39,15 @@ a:active { color: #000; }
padding-right: 20px;
}
+#unsupportedBrowser {
+ padding-top: 240px;
+ text-align: center;
+}
+
#header
{
position: absolute;
+ z-index: 2;
top: 0px;
width: 100%;
background-color: #333;
@@ -89,6 +100,80 @@ a:active { color: #000; }
font-size: 80%;
}
+#videoBackground {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ top: 0px;
+ left: 0px;
+ z-index: 1;
+ background-color: rgba(0,0,0,0.0);
+ pointer-events: none;
+ transition: background-color linear 500ms;
+}
+
+#videoBackground.large {
+ background-color: rgba(0,0,0,0.85);
+ pointer-events: auto;
+}
+
+#videoContainer {
+ position: relative;
+ top: 32px;
+ max-width: 1280px;
+ margin: auto;
+}
+
+#videoContainerPadding {
+ width: 1280px;
+}
+
+#localVideo {
+ position: absolute;
+ width: 128px;
+ height: 72px;
+ z-index: 1;
+ transition: left linear 500ms, top linear 500ms, width linear 500ms, height linear 500ms;
+}
+
+#localVideo.mini {
+ top: 0px;
+ left: 130px;
+}
+
+#localVideo.large {
+ top: 70px;
+ left: 20px;
+}
+
+#localVideo.ended {
+ -webkit-filter: grayscale(1);
+ filter: grayscale(1);
+}
+
+#remoteVideo {
+ position: relative;
+ height: auto;
+ transition: left linear 500ms, top linear 500ms, width linear 500ms, height linear 500ms;
+}
+
+#remoteVideo.mini {
+ left: 260px;
+ top: 0px;
+ width: 128px;
+}
+
+#remoteVideo.large {
+ left: 0px;
+ top: 50px;
+ width: 100%;
+}
+
+#remoteVideo.ended {
+ -webkit-filter: grayscale(1);
+ filter: grayscale(1);
+}
+
#headerContent {
color: #ccc;
max-width: 1280px;
@@ -96,6 +181,7 @@ a:active { color: #000; }
text-align: right;
height: 32px;
line-height: 32px;
+ position: relative;
}
#headerContent a:link,
|
