/***********************************************\
*                                               *
*  project : WebRemoteDisplay                   *
*                                               *
*  author : Olivier Demengeon @ Inria NGE       *
*  created : 2024                               *
*                                               *
\***********************************************/

:root {
  --ui-margin-left: 12px;
  --ui-margin-right: 12px;

  --ui-control-min-size: 550px;
  --ui-control-max-size: 66vw;

  --ui-onair-top: 0px;
  --ui-onair-height: 72px;
  --ui-connectinfos-height: 212px;
  --ui-useractions-height: 72px;
  --ui-logs-height: 72px;
  --ui-manual-margin-top: 12px;
  --ui-manual-height: 25em;
  --ui-copyright-height: 25px;

  --ui-userlist-padding: 12px;
}

body {
  margin: 0;
  overflow: hidden;
  background: linear-gradient(to right, red var(--ui-margin-left), white var(--ui-margin-left));
}

#divVideo {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#canvasVideo {
  width: 100%;
  height: 100%;
}

#divUI {
  position: absolute;
  margin-left: var(--ui-margin-left);
  margin-right: var(--ui-margin-right);
  top: 0px;
  height: 100vh;
  width: calc(100vw - var(--ui-margin-left) - var(--ui-margin-right));
}

#divHelp {
  display: flex;
  position: relative;
  width: 0px;
  height: 0px;
}

#onAir {
  width: max(calc(
      var(--ui-control-max-size) - var(--ui-margin-left) - var(--ui-margin-right)), 
      var(--ui-control-min-size));
  height: var(--ui-onair-height);

  display: flex;
  justify-content: center;
  align-items: center;
}

#divStatus {
  display: inline-flex;
}

#divQuality {
  margin-left: 8px;
}

#connectInfos {
  width: max(calc(
      var(--ui-control-max-size) - var(--ui-margin-left) - var(--ui-margin-right)), 
      var(--ui-control-min-size));
  height: var(--ui-connectinfos-height);

  display: flex;
  justify-content: center;
  align-items: center;
}

.connectInfosElement {
  display: flex;
  height: 32px;
  align-items: center;
}

#serverActionJoinQuit {
  width: 100%;
  height: 32px;
}

#userActions {
  width: max(calc(
      var(--ui-control-max-size) - var(--ui-margin-left) - var(--ui-margin-right)), 
      var(--ui-control-min-size));
  height: var(--ui-useractions-height);

  display: flex;
  justify-content: center;
  align-items: center;
}

.userActionElement {
  width: 128px;
  height: 32px;
}

#userActionShare {
  width: 128px;
  max-width: 128px;
  height: 32px;
  transition: all 0.2s linear;
}

#userActionShare.shareSpace {
  width: 72px;
  max-width: 72px;
  height: 32px;
}

#userActionShareResume {
  width: 0px;
  max-width: 0px;
  height: 32px;
  overflow: hidden;
  opacity: 0;
  transition: all 0.2s linear;
}

#userActionShareResume.shareSpace {
  width: 72px;
  max-width: 72px;
  height: 32px;
  opacity: 1;
  margin-left: 8px;
}

#serverInfos {
  width: max(calc(
      var(--ui-control-max-size) - var(--ui-margin-left) - var(--ui-margin-right)), 
      var(--ui-control-min-size));
  height: calc(100vh - min(25em, max(0em, calc(100vh - var(--ui-useractions-height) - 
      var(--ui-connectinfos-height) - var(--ui-useractions-height) - var(--ui-copyright-height) - 
      var(--ui-manual-margin-top) - 24px))) - var(--ui-useractions-height) - var(--ui-connectinfos-height) - 
      var(--ui-useractions-height) - var(--ui-copyright-height) - var(--ui-manual-margin-top) - 24px);

  overflow: hidden;
  visibility: visible;
}

#manual {
  padding: 12px;
  margin-top: var(--ui-manual-margin-top);
  width: max(calc(
      var(--ui-control-max-size) - var(--ui-margin-left) - var(--ui-margin-right)) - 24px, 
      var(--ui-control-min-size));
  height: min(25em, max(0em, calc(100vh - var(--ui-useractions-height) - var(--ui-connectinfos-height) - 
      var(--ui-useractions-height) - var(--ui-copyright-height) - var(--ui-manual-margin-top) - 24px)));

  overflow: auto;

  background: linear-gradient(100deg, #384257 0%, #384257 20%, #131f3b 70.71%);
  color: #fff;
}

#copyright {
  position: absolute;
  top: calc(100% - var(--ui-copyright-height));
  width: max(calc(
      var(--ui-control-max-size) - var(--ui-margin-left) - var(--ui-margin-right)), 
      var(--ui-control-min-size));
  height: var(--ui-copyright-height);

  display: flex;
  align-items: center;

  background: linear-gradient(100deg, #384257 0%, #384257 20%, #131f3b 70.71%);
  color: #fff;
}

#rightColumn {
  cursor: default;
  user-select: none;
  position: absolute;
  padding: var(--ui-userlist-padding);
  top: 0px;
  left: max(calc(
      var(--ui-control-max-size) - var(--ui-margin-left) - var(--ui-margin-right)), 
      var(--ui-control-min-size));
  width: calc(100vw - var(--ui-margin-left) - (2 * var(--ui-userlist-padding)) - 
      max(calc(var(--ui-control-max-size) - var(--ui-margin-left) - var(--ui-margin-right)), 
      var(--ui-control-min-size)));
  height: calc(100vh - (2 * var(--ui-userlist-padding)));

  background-color: #F8F8F8;
}

#quitFollow {
  cursor: default;
  user-select: none;
  background-color: white;
  position: absolute;
  border-radius: 30px;
  margin: 12px;
  padding: 16px;
  top: 0vh;
  right: 0px;
  width: 256px;
  height: 32px;
  visibility: collapse;
  display: flex;
  justify-content: end;
  align-items: center;
}

#dialogBox {
  background-color: white;

  position: absolute;
  top: calc(calc(100vh - 360px) / 2);
  left: calc(calc(100vw - 600px) / 2);;
  width: 600px;
  height: 360px;

  border-radius: 30px;
  filter: drop-shadow(2px 4px 6px black);
}

#dialogBoxTitle {
  border-radius: 30px 30px 0px 0px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 20px;
  padding-right: 20px;
  height: 50px;
  display: flex;
  align-items: center;

  background: linear-gradient(100deg, #384257 0%, #384257 20%, #131f3b 70.71%);
  color: #fff;
}

#dialogBoxContent {
  margin: 12px;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#dialogBoxContent > div > label {
  display: block;
  position: unset;
  top: unset;
  left: unset;
  width: unset;
  font-size: unset;
  font-weight: unset;
}

#dialogBoxButtons {
  margin: 12px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialogBoxBt {
  height: 32px;
  width: 100px;
}

/* For the dialog box scroolbar used with debug */

#dialogBoxContent > div > * {
  margin-right: 8px;
}

#dialogBoxContent > div::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#dialogBoxContent > div::-webkit-scrollbar {
	width: 12px;
	background-color: #F5F5F5;
}

#dialogBoxContent > div::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #D62929;
}

/************************************************/

.helpWidget {
  user-select: none;
  pointer-events: none;
  position: absolute;
  background-color: white;
  border-radius: 30px 30px 30px 30px;
  filter: drop-shadow(2px 4px 6px black);
}

button {
  color: white;
  background: #E63319;
  /*padding: 0.7em 1.7em;*/
  font-size: 12px;
  /*border-radius: 0.5em;*/
  border: 1px solid #e8e8e8;
  transition: all 0.3s;
  box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
}

button:disabled {
  color: rgba(255, 255, 255, 0.5);
  transition: none;
}

/*button:enabled:hover {
  border: 1px solid white;
}*/

button:enabled:active {
  box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;
}

label {
  display: inline-block;
  font-size: 0.75rem;
  color: #E63319;
  font-weight: 700;
  position: relative;
  top: -1.9lh;
  left: 0px;
  width: 0px;
}

input[type=text] {
  padding: 11px 10px;
  font-size: 0.75rem;
  border: 2px #E63319 solid;
  border-radius: 5px;
  background: white;
}

input[type=text]:focus {
  outline:none;
  border: 3px #ff0000 solid;
}

input[type=text]::placeholder {
  color: #c5c5c5;
}