summary refs log tree commit diff
path: root/webclient/app.css
diff options
context:
space:
mode:
authorDavid Baker <dbkr@matrix.org>2014-09-19 16:26:46 +0100
committerDavid Baker <dbkr@matrix.org>2014-09-19 16:26:46 +0100
commit03ac0c91ae195b2931967c8c574017deaa77e7c2 (patch)
treeab8fcabb0d9c0f517405485e913d034048a1780e /webclient/app.css
parentSYWEB-13 SYWEB-14: disabled "Call" button if the browser does not support all... (diff)
parentFirst working version of UI chrome for video calls. (diff)
downloadsynapse-03ac0c91ae195b2931967c8c574017deaa77e7c2.tar.xz
Merge branch 'videocalls' into develop
Conflicts:
	webclient/room/room.html
Diffstat (limited to 'webclient/app.css')
-rwxr-xr-xwebclient/app.css74
1 files changed, 74 insertions, 0 deletions
diff --git a/webclient/app.css b/webclient/app.css
index 360263e13f..19b7c4a7f6 100755
--- a/webclient/app.css
+++ b/webclient/app.css
@@ -94,6 +94,79 @@ a:active  { color: #000; }
     font-size: 80%;
 }
 
+#videoBackground {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 32px;
+    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;
+    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;
@@ -101,6 +174,7 @@ a:active  { color: #000; }
     text-align: right;
     height: 32px;
     line-height: 32px;
+    position: relative;
 }
 
 #headerContent a:link,