/*!
 * (c) 2021 newfire.com
 * html/room/index.css
 */
@import "../index.css";
@import "../lib/object.css";
@import "../lib/User.css";
@import "./chat.css";

:root {
  --color: rgb(255, 255, 255, .7);
  --background-color: #7DA826;
  //--background: url(/images/patternTruchet.svg) var(--background-color) 0px 0px / auto 100px;
  --lobby-background-color: rgba(0, 0, 0, 0.2);
  --lobby-background: radial-gradient(rgb(0 0 0/.7), transparent);
  --xbox-shadow: 1px 1px 3px 0px rgb(0 0 0 / .5);
}

body {
  /* hide scrollbar */
  -ms-overflow-style: none;  //: IE and Edge ;
  scrollbar-width: none;  //: Firefox ;
}

body::-webkit-scrollbar {
  /* hide scrollbar for chrome, safari, opera */
  display: none;
}

center {
  position: absolute;
  display: block;
  top: 0; bottom: 0;
  right: 0; left:0;
}

/* display on the right side */
[display=tile] screens >dummies,
[display=screen] screens{
  position: fixed;
  top: 30; 
  bottom: 40;
  right: 0; 
  width: 15%;
  display: block;
  overflow: auto;

  /* hide scrollbar */
  -ms-overflow-style: none;  //: IE and Edge ;
  scrollbar-width: none;  //: Firefox ;
}

[display=tile] screens dummies::-webkit-scrollbar,
[display=screen] screens::-webkit-scrollbar {
  /* hide scrollbar for chrome, safari, opera */
  display: none;
}

[display=tile] screens{
  position: absolute;
  top: 30; 
  bottom: 40;
  left: 0; 
  width: 85%;
  display: block;
  overflow: hidden;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
}
[display=tile][count="1"] screens,
[display=tile][count="2"] screens{
  width: 100%;
}

client {
  display: block;
  position: relative;
  overflow: hidden;
  z-index: 1;
  box-shadow: var(--box-shadow);
  //margin: 1 1 1 auto; /* align right */
  margin: 2;
  min-height: 25;

  width: 95%;
  //min-width: 150;
  //max-width: 250;
  //cursor: unset!important;
}
screens dummies client[dummy] {
  cursor: unset;
  height: unset;
}
screens dummies client[dummy] name{
  text-align: left;
  margin-left: 25;
}

screens display{
  position: fixed;
  top: 0; 
  right:0;
  z-index: 2;

  background: url("/images/tile.svg") no-repeat center / 17px;
  background-color: rgba(0, 0, 255, .1);
  display: inline-block;
  width: 26;
  height: 26;
  margin: 2;
  cursor: pointer;
  border-radius: 1em;
  box-shadow: var(--box-shadow);
}


/* only display client with name set */
client[name=""] {
  display: none!important;
}

client[speaker] {
  box-shadow: 0px 0px 0px 2px orange;
}

[room][display=tile] screens client:not([zoom=true]) {
  cursor: zoom-in;
}

[display=screen] screens client[zoom=true] {
  position: fixed;
  top: 30; 
  bottom: 40; 
  left: 1; 
  right: 0;
  margin: auto;
  z-index: 0;

  display: flex;
  width: 85%;
  height: unset;
  margin: unset;
}

client video {
  width: 100%;
  //background: rgba(111,111,111,.5);
  background: var(--background);
}

client name {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  text-align: center;
  color: white;
  white-space: nowrap;
  //background: rgba(2,2,2,.3);
  text-shadow: 0px 0px 7px black;
  padding: 4;
}
/* me client */
client[mid='0'] name{
  //background: rgba(222,222,0,.8);
  color: rgba(222,222,0,.8);
}
client[mid='0'] name::before {
  content: "(me) ";
}
client[mirror] video {
  transform: rotateY(180deg);
}

client img{
  position: absolute;
  top: 50%;
  left: 0;
  width: 20;
  margin: 3;
  border-radius: 50%;
}
client img.boot{
  display: none;
  top: 0; 
  right: 0;
  bottom: unset;
  left: unset; 
  cursor: pointer;
}
client:hover img.boot{
  display: unset;
}
client img.photo{
  top: 0; bottom:0; left: 0; right: 0;
  margin: auto;
  height: auto;
  width: 100%;
  border-radius: unset;
  display: none;
}
client[video=false] img.photo{
  display: unset;
}
client img.camera{
  top: calc(50% - 30px);
}
client[dummy] img.microphone{
  top: calc(50% - 14px);
}
client img[live=false]{
  background: red;
}
client img[live=talking]{
  background: green;
}

/* lobby key holder can mute others */
[room].lobby client:not([mid="0"]) img.microphone{
  cursor: pointer;
  box-shadow: var(--box-shadow);
}


screens video.screen{
  position: absolute;
  left: 0;
  height: 100%;
}

[display=tile] screens client{
  position: relative;
  max-width: unset;
  width: 99%; /* initial local client width */
}

[display=tile] screens client video{
  object-fit: cover;
  height: 100%;
}

titlebar {
  position: fixed;
  top: 0; left: 0; right: 0;
  margin: 3;
  //max-width: 300;
  background: transparent;
  text-align: center;
  z-index: 3;
  //pointer-events: none; /* so we can click clients behind it */
}

titlebar title {
  display: inline-block;
  color: rgba(255, 255, 255,.7);
  font-size: larger;
  //border-bottom: 1px solid silver;
  text-align: center;
  text-shadow: -1px -1px 2px rgba(0, 0, 0, .5);
  opacity: .6;
}

titlebar time{
  display: inline-block;
  color: rgba(255, 255, 255, .7);
  height: 13;
  margin: 4;
  text-shadow: -1px -1px 2px rgba(0, 0, 0, .5);
  opacity: .5;
}

titlebar status{
  display: block;
  max-width: 400;
  margin: 10 auto;
  color: silver;
  text-align: center;
}

#lock,
[room] lobby, 
[room] profile {
  display: none;
}

profile{
  position: fixed;
  top: 10; left: unset; right: 10;
  //direction: ltr;
}

.lobby #lock {
  display: inline-block;
  vertical-align: text-bottom;
  background: url("/images/cog.svg") no-repeat center / 17px;
  
  border-radius: 50%;
  padding: 1;
  width: 20;
  height: 20;
  cursor: pointer;
}

[room][locked=true] #lock {
  background: url("/images/lock.svg") no-repeat center / 17px;
  background-color: rgba(255, 0, 0, .4);
}

room-menu{
  display: none;
}
[room] room-menu{
  position: absolute;
  //left: 80;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  //text-align: center;
  padding: 0;
  height: unset;
  display: block;
  z-index: 2;
  //width: 100%;
  width: fit-content;
}

/* for desktop devices, hide after delay and show shen hover 
@media (hover: hover){
  [room] room-menu {
    //animation: name duration delay fill-mode;
    animation: hide-menu 1s 5s forwards;
  }
  [room]:active room-menu,
  [room] room-menu:hover{
    animation: show-menu forwards;
  }
}

@keyframes show-menu{
  from { bottom: -60; }
  to   { bottom: 0; }
}
@keyframes hide-menu{
  from { bottom: 0; }
  to   { bottom: -60; }
}

 */

/* for touchscreen devices, no animation because a touch on where button is going to show up will press that button
@media (hover: none){
  [room]:active room-menu img{
    animation: hover forwards;
  }
}
@keyframes hover{
  to { opacity: 1; }
}
 */

form[disabled] button,
.mi {
  box-shadow: var(--box-shadow);
}

room-menu .mi[disabled] {
  opacity: .3;
}

room-menu .mi {
  background: rgba(0, 0, 0, .1);
}

room-menu img.m1 {
  background: green;
  border-radius: 50%;
  padding: 8;
  width: 25;
  height: 25;
  cursor: pointer;
}
room-menu img.m1[live] {
  background: red;
}

/* 
 * disable sharescreen when someone else is already sharing screen.
 */
[room][screen]:not([screen="0"]) room-menu #screen {
  visibility: hidden;
}
[room][screen][screen="0"] room-menu #screen {
  background: red;
}

img.m3,
img.m2 {
  border-radius: 50%;
  padding: 5;
  width: 25;
  height: 25;
  cursor: pointer;
}
img.m2[live=false] {
  background: red;
}



rooms {
  display: block;
  margin: 10;
}
rooms room {
  display: block;
  padding: 5;
  font-size: larger;
  background: rgba(255,255,255,.4);
  text-align: justify;
  cursor: pointer;
  opacity: .6;
}
rooms room:hover {
  opacity: .8;
}
rooms room name {
  overflow: hidden;
  display: block;
  white-space: nowrap;
}
rooms room size {
  margin: 0 0 0 6;
  float: right;
}
rooms room size max{
  opacity: .5;
}

rooms room img{
  height: 18;
  border-radius: 50%;
}

select.config {
  display: none;
}
.admin select.config {
  display: inline-block;
  border: 0;
  margin: 10;
  padding: 5;
  background: rgba(255,255,255,.4);
}

lobby {
  position: absolute;
  left:0; right:0;
  top: 15%;
  margin: 0 auto;
  width: max-content;
  background: var(--lobby-background);
  text-align: center;
  display: inline-block;
  padding: 10;
  z-index: 4;
  border-radius: 20px;
}

lobby welcome {
  display: none;
  text-align: justify;
  margin: 20 10;
  padding: 10;
  background: rgba(255, 255, 255, .1);
  border-radius: .5em;
  opacity: .5;
}

/* when showing loginpanel */
lobby[show]{
  display: unset;
  background: rgba(70, 70, 70, .5);
  min-height: 60;
}

/* only show form if not showing others */
lobby[show=true] form.start {
  display: none;
}

lobby:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-top-color: var(--lobby-background-color);
  border-bottom: 0;
  border-left: 0;
  margin-left: 7px;
  margin-bottom: -20px;
}
lobby >.start{
  width: 250;
}

lobby .start >input{
  margin: 15;
  font-size: unset;
  color: var(--color);
  border:0;
  background: transparent;
  width:90%;
  border-bottom: 1px solid silver;
  cursor: text;
  text-align: center;
  display: none;
  opacity: .8;
}

lobby .start input.room{
  background: url(/images/call.svg) no-repeat left / 20px auto;
  display: block;
}
body.lobby lobby .start input.key{
  background: url(/images/key.svg) no-repeat left / 20px auto;
  display: block;
}
lobby .start input.name{
  background: url(/images/user.svg) no-repeat left / 20px auto;
  display: block;
}

lobby status{
  display: block;
  margin: 10;
  color: darkorange;
  width: 230;
}

lobby button{
  min-width: 46;
  height: 46;
  border-radius: 2em;
  font-size: 12;
  padding: 4;
  margin: 2;
  color: white;
  cursor: pointer;
  background: transparent;
}

lobby button.wide{
  border-radius: 1em;
  padding: 7;
  margin: 2;
}

lobby button:hover{
  filter: brightness(1.1)!important;
}
lobby button.test,
lobby button.watch{
  color: #ddd;
  position: absolute;
  right: 20;
  opacity: .06;
}
lobby button.drone {
  position: absolute;
  visibility: hidden;
  margin: 0;
  padding: 0;
  width: 0;
  height: 0;
}

lobby button img{
  height: 14;
  vertical-align: text-top;
}

[contenteditable] {
  white-space: pre-wrap;
}

[contenteditable]:empty:before {
  content: attr(placeholder);
  color: gray;
}


/* <n> for username */
n {
  color: pink;
}