393 lines
7.5 KiB
CSS
393 lines
7.5 KiB
CSS
* {
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
html, body{
|
|
margin:0px;
|
|
height:100%;
|
|
color: #424242;
|
|
font-family:'Helvetica Neue', Helvetica, sans-serif;
|
|
font-weight: 400;
|
|
background: #000000;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.right-panel {
|
|
display:none;
|
|
position:absolute;
|
|
float: right;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
right: 0px;
|
|
width: 0px;
|
|
max-width: 200px;
|
|
overflow: hidden;
|
|
/* background-color:#dfebf1;*/
|
|
background-color:#FFFFFF;
|
|
border-left:1px solid #424242;
|
|
z-index: 5;
|
|
}
|
|
|
|
#nowebrtc {
|
|
display:none;
|
|
}
|
|
|
|
#header_container {
|
|
z-index: 1014;
|
|
}
|
|
|
|
.toolbar_span {
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
|
|
#toolbar a.button:last-child::after {
|
|
content: none;
|
|
}
|
|
|
|
.button {
|
|
display: inline-block;
|
|
position: relative;
|
|
color: #FFFFFF;
|
|
top:0px;
|
|
padding-top: 10px;
|
|
width: 38px;
|
|
height: 28px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
text-shadow: 0 1px 0 rgba(255,255,255,.3), 0 -1px 0 rgba(0,0,0,.6);
|
|
z-index: 1;
|
|
font-size: 1.22em !important;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.button[disabled] {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.toolbar_span>span {
|
|
display: inline-block;
|
|
position: absolute;
|
|
font-size: 7pt;
|
|
color: #ffffff;
|
|
text-align:center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#toolbar_button_chat, #chatBottomButton, #contactListButton, #numberOfParticipants {
|
|
-webkit-transition: all .5s ease-in-out;
|
|
-moz-transition: all .5s ease-in-out;
|
|
transition: all .5s ease-in-out;
|
|
}
|
|
/*#ffde00*/
|
|
#toolbar_button_chat.active, #contactListButton.glowing, #chatBottomButton.glowing {
|
|
-webkit-text-shadow: -1px 0 10px #00ccff,
|
|
0 1px 10px #00ccff,
|
|
1px 0 10px #00ccff,
|
|
0 -1px 10px #00ccff;
|
|
-moz-text-shadow: 1px 0 10px #00ccff,
|
|
0 1px 10px #00ccff,
|
|
1px 0 10px #00ccff,
|
|
0 -1px 10px #00ccff;
|
|
text-shadow: -1px 0 10px #00ccff,
|
|
0 1px 10px #00ccff,
|
|
1px 0 10px #00ccff,
|
|
0 -1px 10px #00ccff;
|
|
}
|
|
|
|
#toolbar_button_hangup {
|
|
color: #ff0000;
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
#numberOfParticipants {
|
|
position: absolute;
|
|
top: 0px;
|
|
right: -1px;
|
|
color: white;
|
|
width: 13px;
|
|
height: 13px;
|
|
line-height: 13px;
|
|
font-weight: bold;
|
|
border-radius: 1px;
|
|
font-size: 11px;
|
|
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
|
|
}
|
|
|
|
#contactListButton.active #numberOfParticipants {
|
|
color: #00ccff;
|
|
}
|
|
|
|
#toolbar {
|
|
display:inline-block;
|
|
position:relative;
|
|
top:5px;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
height:38px;
|
|
width:auto;
|
|
background-color: rgba(0,0,0,0.5);
|
|
border-radius: 1px;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
#toolbar_button_record {
|
|
-webkit-transition: all .5s ease-in-out;
|
|
-moz-transition: all .5s ease-in-out;
|
|
transition: all .5s ease-in-out;
|
|
}
|
|
|
|
a.button:hover,
|
|
a.bottomToolbarButton:hover {
|
|
cursor: pointer;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 1px;
|
|
-webkit-border-radius: 1px;
|
|
}
|
|
|
|
.no-fa-video-camera, .fa-microphone-slash {
|
|
color: #636363;
|
|
}
|
|
|
|
.bottom_button_separator {
|
|
display: inline-block;
|
|
position: relative;
|
|
left: 5px;
|
|
width: 20px;
|
|
height: 1px;
|
|
background: #373737;
|
|
}
|
|
|
|
input[type='text'], input[type='password'], textarea {
|
|
-webkit-user-select: text;
|
|
user-select: text;
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
padding: 5px;
|
|
background: #f3f3f3;
|
|
border-radius: 3px;
|
|
font-weight: 100;
|
|
line-height: 20px;
|
|
height: 40px;
|
|
color: #333;
|
|
text-align: left;
|
|
border:1px solid #ACD8F0;
|
|
outline: none; /* removes the default outline */
|
|
resize: none; /* prevents the user-resizing, adjust to taste */
|
|
}
|
|
|
|
input[type='text'], input[type='password'], textarea:focus {
|
|
box-shadow: inset 0 0 3px 2px #ACD8F0; /* provides a more style-able
|
|
replacement to the outline */
|
|
}
|
|
|
|
textarea {
|
|
overflow: hidden;
|
|
word-wrap: break-word;
|
|
resize: horizontal;
|
|
}
|
|
|
|
button.no-icon {
|
|
padding: 0 1em;
|
|
}
|
|
|
|
button {
|
|
border: none;
|
|
height: 35px;
|
|
padding: 0 1em 0 2em;
|
|
position: relative;
|
|
border-radius: 1px;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
line-height: 35px;
|
|
background: #2c8ad2;
|
|
}
|
|
|
|
button, input, select, textarea {
|
|
margin: 0;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
button, input[type="button"], input[type="reset"], input[type="submit"] {
|
|
cursor: pointer;
|
|
-webkit-appearance: button;
|
|
}
|
|
|
|
form {
|
|
display: block;
|
|
}
|
|
|
|
#downloadlog {
|
|
position: absolute;
|
|
bottom: 5;
|
|
left: 5;
|
|
overflow: visible;
|
|
color: rgba(255,255,255,.50);
|
|
}
|
|
|
|
#feedbackButton {
|
|
position: absolute;
|
|
bottom: 60;
|
|
left: 60;
|
|
overflow: visible;
|
|
color: rgba(255,255,255,.50);
|
|
}
|
|
|
|
#feedbackButtonDiv {
|
|
display: none;
|
|
position: absolute;
|
|
background-color: rgba(0,0,0,.50);
|
|
border-radius: 50%;
|
|
width: 100px;
|
|
height: 100px;
|
|
bottom: -50px;
|
|
left: -50px;
|
|
z-index: 100;
|
|
overflow: hidden;
|
|
transition: all 2s ease-in-out;
|
|
}
|
|
|
|
#feedbackButtonDiv.hidden {
|
|
bottom: -246px;
|
|
}
|
|
|
|
div.feedbackButton:hover {
|
|
transform: scale(1.3);
|
|
}
|
|
|
|
#bottomToolbar {
|
|
display:block;
|
|
position: absolute;
|
|
right: 0;
|
|
margin-right: 5px;
|
|
bottom: 40px;
|
|
width: 29px;
|
|
border-radius: 1px;
|
|
color: #FFF;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 6; /*+1 from #remoteVideos*/
|
|
}
|
|
|
|
.bottomToolbarButton {
|
|
display: inline-block;
|
|
position: relative;
|
|
color: #FFFFFF;
|
|
top: 0;
|
|
padding-top: 6px;
|
|
margin: 2px;
|
|
width: 25px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
font-size: 10pt;
|
|
text-align: center;
|
|
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
|
|
z-index: 1;
|
|
}
|
|
|
|
.active {
|
|
background-color: #00ccff;
|
|
}
|
|
|
|
.bottomToolbar_span>span {
|
|
display: inline-block;
|
|
position: absolute;
|
|
font-size: 7pt;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.glow
|
|
{
|
|
text-shadow: 0px 0px 30px #06a5df, 0px 0px 10px #06a5df, 0px 0px 5px #06a5df,0px 0px 3px #06a5df;
|
|
}
|
|
|
|
.watermark {
|
|
display: block;
|
|
position: absolute;
|
|
top: 15;
|
|
width: 186px;
|
|
height: 74px;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
z-index: 2;
|
|
}
|
|
|
|
.leftwatermark {
|
|
display: none;
|
|
left: 15;
|
|
background-image:url(../images/watermark.png);
|
|
background-position: center left;
|
|
}
|
|
|
|
.rightwatermark {
|
|
display: none;
|
|
right: 15;
|
|
background-position: center right;
|
|
}
|
|
|
|
.poweredby {
|
|
display: none;
|
|
position: absolute;
|
|
left: 25;
|
|
bottom: 7;
|
|
font-size: 11pt;
|
|
color: rgba(255,255,255,.50);
|
|
text-decoration: none;
|
|
z-index: 100;
|
|
}
|
|
|
|
#toast-container.notification-bottom-right {
|
|
bottom: 140px;
|
|
right: 5px;
|
|
}
|
|
|
|
#toast-container.notification-bottom-right-center {
|
|
right: 205px;
|
|
}
|
|
|
|
#toast-container .toast-info {
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.toast-close-button {
|
|
right: -7px;
|
|
top: -19px;
|
|
}
|
|
|
|
#toast-container .toast-info {
|
|
background-color: black;
|
|
border: 1px solid #3a3a3a;
|
|
width: 220px;
|
|
padding: 10px 10px 10px 50px;
|
|
}
|
|
|
|
.connected {
|
|
color: forestgreen;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.disconnected {
|
|
color: darkred;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.lastN {
|
|
color: #a3a3a3;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.toast-close-button:hover,
|
|
.toast-close-button:focus {
|
|
color: #ffffff;
|
|
opacity: 1;
|
|
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
|
filter: alpha(opacity=100);
|
|
}
|
|
|
|
.toast-message .nickname {
|
|
font-weight: bold;
|
|
}
|