janusweb/media/assets/webui/apps/comms/voip.css

Web client for JanusVR worlds

janus-voip-client {
  position: relative;
  max-width: 75vh;
  flex-wrap: wrap;
}
janus-voip-client-janus {
  display: flex;
  flex-direction: horizontal;
}
janus-voip-localuser {
  display: block;
  bottom: 0px;
  padding: 0px;
  z-index: 10;
}
janus-voip-localuser:empty {
  border: none;
  box-shadow: none;
}
janus-voip-localuser video {
  max-width: 128px;
  height: 128px;
  display: block;
  margin: 1px 0 0 1px;
  border: 1px solid #aaa;
  border-radius: 50%;
  box-shadow: 0 0 2px 2px white;
}
janus-voip-remoteuser {
  xdisplay: inline-block;
  position: relative;
  font-family: monospace;
  transition: transform 250ms ease;
  transform: scale(0, 0);
  min-width: 5em;
  min-width: 32px;
  min-height: 32px;
  text-align: center;
}
janus-voip-remoteuser audio {
  display: inline-block;
}
janus-voip-remoteuser video {
  width: 32px;
  height: 32px;
  border: 1px solid #aaa;
  border-radius: 50%;
  box-shadow: 0 0 2px 2px white;
  display: inline-block;
  background: url(images/mic-disabled.png);
  background-size: contain;
  background-position: center center;
  transition: all 200ms ease-out;
}
janus-voip-remoteuser[hasaudio] video {
  background: url(images/mic-enabled.png);
  background-size: contain;
  background-position: center center;
}
janus-voip-remoteuser[hasvideo] video {
  width: 128px;
  height: 128px;
}
janus-voip-remoteuser video.active {
  display: inline-block;
}
janus-voip-remoteuser[active] {
  transform: scale(1, 1);
}
janus-voip-localuser h2,
janus-voip-remoteuser h2 {
/*
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
*/
  background: rgba(0,0,0,.2);
  text-shadow: 0 0 5px black;
  color: white;
  font-size: .8em;
  margin-bottom: .5em;
}
janus-voip-remoteuser {
}
janus-voip-localuser[speaking],
janus-voip-remoteuser[speaking] {
  xborder: 2px solid #0f0;
}
janus-voip-localuser ui-button {
  position: absolute;
  bottom: 1em;
  left: .2em;
  xdisplay: none;
  opacity: .5;
  font-size: 0;
  width: auto;
  transition: opacity 100ms linear;
  z-index: 100;
}
janus-voip-remoteuser ui-button {
  font-size: 0;
  width: auto;
  opacity: 0;
}
janus-voip-localuser ui-button:before,
janus-voip-remoteuser ui-button:before {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(images/mic-enabled.png);
  background-size: cover;
  content: ' ';
  z-index: 10;
}
janus-voip-localuser ui-button.muted,
janus-voip-remoteuser ui-button.muted {
  background: rgba(255,0,0,.5);
  z-index: 10;
}
janus-voip-localuser ui-button.muted:before {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(images/mic-disabled.png);
  background-size: cover;
  content: ' ';
}
janus-voip-localuser:hover ui-button,
janus-voip-remoteuser:hover ui-button {
  display: block;
  opacity: .6;
}
janus-voip-localuser ui-button:hover,
janus-voip-remoteuser ui-button:hover {
  display: block;
  opacity: 1;
}
janus-voip-picker-audio {
  display: block;
}
janus-voip-picker-audio ul {
  list-style: none;
  text-align: left;
  width: 20em;
  margin: 0 auto;
}
janus-voip-picker-audio ui-label {
  width: 10em;
  color: white;
  font-weight: normal;
}
janus-voip-picker-audio ui-select>select {
  width: 100%;
}
janus-voip-remoteuser ui-panel[bottom] {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
}
janus-voip-remoteuser ui-slider {
  font-size: 1em;
  flex: 1;
  opacity: 0;
  transition: opacity 200ms linear;
}
janus-voip-remoteuser:hover ui-slider {
  opacity: 1;
}
janus-voip-remoteuser ui-button {
/*
  font-size: .5em;
  flex: 0;
  padding: .2em;
*/
}
janus-voip-remoteuser[hasvideo] {
  order: 1;
}
janus-voip-remoteuser:not([hasvideo]) {
  order: 2;
}
janus-voip-picker {
  text-align: left;
}
janus-voip-picker h3 {
  font-size: 1em;
  border-top: 1px solid #666;
  margin-top: .5em;
  padding-top: .5em;
  padding: .5em .5em;
}
janus-voip-picker ul {
  padding: 0 .5em;
}
janus-voip-picker-audio li {
  padding: .2em .5em;
}
janus-voip-picker .micselect {
  display: grid;
  grid-template-columns: auto 80px;
  padding: 0;
}
janus-voip-picker-mictest {
  margin-left: 5px;
}
janus-voip-client-incomingcall ui-flexpanel {
  height: auto;
}
janus-voip-client-incomingcall janus-button-voip[action="accept"] {
  background: #0a0;
  border: 1px solid black;
}
janus-voip-client-incomingcall janus-button-voip[action="accept"]:hover {
  background: #0d0;
}
janus-voip-client-incomingcall janus-button-voip[action="accept"][disabled] {
  opacity: .3;
}
janus-voip-client-incomingcall ui-button[action="reject"] {
  background: #800;
  border: 1px solid black;
}
janus-voip-client-incomingcall ui-button[action="reject"]:hover {
  background: #a00;
}
ui-panel[top]:not([left]):not([right]):has(janus-voip-client[spatialized]) {
  top: 0;
  left: 0;
}
ui-panel[top]:has(janus-voip-client[spatialized])::after {
  position: absolute;
  width: 80vh;
  height: 80vh;
  display: block;
  content: '';
  left: calc(50vw - 40vh);
  top: 10vh;
  border: 2px solid rgba(128,128,128,.5);
  border-radius: 50%;
  pointer-events: none;
}
janus-voip-remoteuser[spatialized] {
  position: absolute;
}