165 lines
3.2 KiB
CSS
Executable File
165 lines
3.2 KiB
CSS
Executable File
/*
|
|
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;
|
|
}
|