/**
* Copyright (C) 2021 Double Bastion LLC
*
* This file is part of Roundpin, which is licensed under the
* GNU Affero General Public License Version 3.0. The license terms
* are detailed in the "LICENSE.txt" file located in the root directory.
*
* This is a modified version of the original file "cyber_mega_phone.css",
* first modified in 2020. The copyright notice for the original
* content follows:
*/
/******************************************************************************
* Cyber Mega Phone 2K
* Copyright (C) 2017 Digium, Inc.
*
* This program is free software, distributed under the terms of the
* MIT License. See the LICENSE file at the top of the source tree.
******************************************************************************/
html {
background-color: #ebf0f7;
}
body {
font-family: sans-serif;
background-color: #ebf0f7;
}
body:-webkit-full-screen {
width:100%;
height:100%;
}
#media-views {
background-image: linear-gradient(to right top, #63a2ff, #00beff, #00d4fb, #00e6da, #5df2b0);
}
/* Checkbox switch */
.switches {
display: block;
}
.switch {
position: relative;
display: inline-block;
width: 70px;
height: 20px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 12px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #0068b2;
}
input:focus + .slider {
box-shadow: 0 0 1px #0068b2;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(46px);
}
.slider:after {
content: 'no';
color: white;
display: block;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 47%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked + .slider:after {
content: 'yes';
}
/* Account and connection */
#connection {
display: none;
margin-top: 0px;
padding: 0px 0px 6px 0px;
text-align: center;
}
#connection input {
vertical-align: middle;
}
#showConnectionBttns {
display: block;
margin: -15px 0px -3px 0px;
text-align: center;
cursor: pointer;
}
#showConnectionBttns .fa-caret-down {
font-size: 23px;
color: #a2a2a2;
}
#showConnectionBttns .fa-caret-up {
font-size: 23px;
color: #a2a2a2;
}
.account-modal {
text-align: center;
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.account-content {
margin: 10% auto;
padding: 10px;
border: 1px solid #888;
width: 250px;
position: relative;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
background-color: #0c2959;
}
@-webkit-keyframes animatetop {
from {top: -300px; opacity: 0}
to {top: 0; opacity: 1}
}
@keyframes animatetop {
from {top: -300px; opacity: 0}
to {top: 0; opacity: 1}
}
.account-content label {
color: white;
display: block;
text-align: left;
margin-top: 5px;
}
.account-close {
color: #aaa;
float: right;
font-size: 20px;
font-weight: bold;
}
.account-close:hover, .account-close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* Media view and video */
.media-view {
position: relative;
margin-top: -6px;
float: left;
height: auto;
width: 32%;
background-color: #d5e2f5;
z-index: 1;
}
video {
height: auto;
width: 100%;
margin-bottom: -6px;
}
.media-controls {
display: none;
position: absolute;
top: 0px;
right: 0px;
text-align: right;
opacity: 0.7;
cursor: pointer;
z-index: 10;
}
.media-controls button:hover, .media-controls button:focus {
opacity: 1;
}
.media-view:hover .media-controls {
display: inline;
}
.mediaControlBtn {
background-color: #f5f9ff;
border: none;
font-size: 18px;
margin: 4px 4px 0px 0px;
border-radius: 2px;
cursor: pointer;
}
#VideoConferenceLogo {
display: block;
float: left;
margin: -3px 0px 0px -2px;
padding: 0px;
}
#call {
display: inline;
width: 106px;
margin: 2px 6px;
padding: 3px 1px 5px 1px;
border: 1px solid #700b0b;
font-size: 14px;
font-weight: 700;
font-family: Inter, sans-serif;
color: #FFFFFF;
background-color: #a10d0d;
border-radius: 4px;
cursor: pointer;
outline: none;
}
#call:hover {
background-color: #b52222;
border: 1px solid #b52222;
color: #FFFFFF;
}
#call:active {
border: 1px solid #850b0b;
background-color: #850b0b;
color: #FFFFFF;
}
#fullscreen {
display: inline;
width: 126px;
margin: 2px 6px;
padding: 3px 1px 5px 1px;
border: 1px solid #4c84c2;
font-size: 14px;
font-weight: 700;
font-family: Inter, sans-serif;
color: #FFFFFF;
background-color: #3970ad;
border-radius: 4px;
cursor: pointer;
outline: none;
}
#fullscreen:hover {
background-color: #427ec2;
border: 1px solid #427ec2;
color: #FFFFFF;
}
#fullscreen:active {
border: 1px solid #205b96;
background-color: #205b96;
color: #FFFFFF;
}
.enterConfExt {
display: block;
width: 212px;
margin: 10px auto;
padding: 6px;
border: 1px solid #4c84c2;
text-align: center;
font-size: 14px;
font-weight: 700;
font-family: Inter, sans-serif;
color: #FFFFFF;
background-color: #4c84c2;
border-radius: 4px;
cursor: pointer;
outline: none;
}
.enterConfExt:hover {
background-color: #396da8;
border: 1px solid #396da8;
color: #FFFFFF;
}
.enterConfExt:active {
background-color: #2d5787;
border: 1px solid #2d5787;
color: #FFFFFF;
}
#jg_popup_table.jg_popup_basic {
border: 3px solid #ffffff;
border-radius: 6px;
}
#jg_popup_table.jg_popup_basic td {
border: 0;
height: auto;
margin: 0;
padding: 0;
text-align: left;
vertical-align: top;
width: auto;
z-index: auto;
}
#jg_popup_table.jg_popup_basic #jg_popup_close {
display: none !important;
}
#sendPinDialPad table tr td {
margin: 10px;
padding: 4px;
}
#dialText {
display: block;
width: 136px;
margin: 16px auto;
font-size: 16px;
text-align: center;
border-radius: 10px;
border: 0.01em solid;
background-color: transparent;
outline-color: #cbe4ff;
border-color:#989898;
}
#dialText:focus {
outline: none;
}
.dtmfButtons {
font-size: 20px;
color: #222222;
width: 40px;
height: 40px;
border: 1px solid #efefef;
background-color: #ffffff;
cursor: pointer;
}
.dtmfButtons:hover {
color: #FFFFFF;
background-color: #222222;
}
.dtmfButtons:active {
color: #cccccc;
background-color: #000000;
}
.dtmfButtons div{
font-size: 20px;
line-height: 6px;
padding-top: 8px;
}
.dtmfButtons span {
display: block;
font-size: 9px;
padding: 8px 0px 00px 0px;
}