archive

comms/webrtc-ws-example/style.css

@@ -0,0 +1,164 @@
+/*
+    WebSocket chat client
+
+    WebSocket and WebRTC based multi-user chat sample with two-way video
+    calling, including use of TURN if applicable or necessary.
+
+    This file describes the styling for the contents of the site as
+    presented to users.
+
+    To read about how this sample works:  http://bit.ly/webrtc-from-chat
+
+    Any copyright is dedicated to the Public Domain.
+    http:   creativecommons.org/publicdomain/zero/1.0/
+*/
+
+/* The list of users on the left side */
+
+#userlistbox {
+  border: 1px solid black;
+  width:100%;
+  height:60px;
+  margin-top:0px;
+  margin-right:10px;
+  padding:1px;
+  list-style:none;
+  display:block;
+  line-height:1.1;
+  overflow-y:auto;
+  overflow-x:hidden;
+}
+
+#userlistbox li {
+  cursor: pointer;
+  padding: 1px;
+}
+
+
+/* The video panel */
+.camera-box {
+  width: 500px;
+  height: 760px;
+  display:block;
+  vertical-align:top;
+  position:relative;
+  overflow:auto;
+}
+
+/* The main incoming video box */
+#received_video {
+  border: 1px solid black;
+  box-shadow: 2px 2px 3px black;
+  width: 480px;
+  height: 360px;
+  position:absolute;
+}
+
+/* The small "preview" view of your camera */
+#local_video {
+  width: 120px;
+  height: 90px;
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.75);
+  box-shadow: 0 0 4px black;
+}
+
+/* The "Hang up" button */
+#hangup-button {
+  display:block;
+  width:80px;
+  height:24px;
+  border-radius: 8px;
+  position:relative;
+  margin:auto;
+  top:324px;
+  background-color: rgba(150, 0, 0, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.7);
+  box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);
+  font-size: 14px;
+  font-family: "Lucida Grande", "Arial", sans-serif;
+  color: rgba(255, 255, 255, 1.0);
+  cursor: pointer;
+}
+
+#hangup-button:hover {
+  filter: brightness(150%);
+  -webkit-filter: brightness(150%);
+}
+
+#hangup-button:disabled {
+  filter: grayscale(50%);
+  -webkit-filter: grayscale(50%);
+  cursor: default;
+}
+
+/*** Flexbox layout ***/
+
+.rowParent, .columnParent {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-direction: normal;
+  -webkit-box-orient: horizontal;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: flex-start;
+  -ms-flex-line-pack: stretch;
+  align-content: flex-start;
+  -webkit-box-align: stretch;
+  -webkit-align-items: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.columnParent {
+  -webkit-box-orient: vertical;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.flexChild {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-align-self: auto;
+  -ms-flex-item-align: auto;
+  align-self: auto;
+}
+
+#control-row {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto; height: 70px;
+}
+
+
+#camera-container {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto; width: 500px;
+}
+
+
+#userlist-container {
+ -webkit-box-flex: 0;
+ -webkit-flex: 0 0 auto;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto; width: 120px;
+  line-height:1.1;
+}