style.css

/*
    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;
}