474 lines
6.3 KiB
CSS
474 lines
6.3 KiB
CSS
html {
|
|
position: relative;
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
min-height: 100%;
|
|
}
|
|
|
|
nav {
|
|
height: 50px;
|
|
width: 100%;
|
|
z-index: 1;
|
|
background-color: #4d4d4d !important;
|
|
border-color: #4d4d4d !important;
|
|
border-top-right-radius: 0 !important;
|
|
border-top-left-radius: 0 !important;
|
|
}
|
|
|
|
.navbar-header {
|
|
width: 100%;
|
|
}
|
|
|
|
.nav-icon {
|
|
padding: 5px 15px 5px 15px;
|
|
float: right;
|
|
}
|
|
|
|
nav a {
|
|
color: #ccc !important;
|
|
}
|
|
|
|
nav i.fa {
|
|
font-size: 40px;
|
|
color: #ccc;
|
|
}
|
|
|
|
nav a:hover {
|
|
color: #a9a9a9 !important;
|
|
}
|
|
|
|
nav i.fa:hover {
|
|
color: #a9a9a9;
|
|
}
|
|
|
|
#main-container {
|
|
padding-bottom: 80px;
|
|
height: 100%;
|
|
margin-top: -70px;
|
|
}
|
|
|
|
.vertical-center {
|
|
width: -webkit-fit-content;
|
|
width: fit-content;
|
|
margin: auto;
|
|
}
|
|
|
|
.vertical-center#not-logged form {
|
|
width: -moz-fit-content;
|
|
margin: auto;
|
|
}
|
|
|
|
.vertical-center#not-logged table {
|
|
width: -moz-fit-content;
|
|
margin: auto;
|
|
}
|
|
|
|
.vertical-center table {
|
|
margin-top: 3em !important;
|
|
}
|
|
|
|
.horizontal-center {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.form-control {
|
|
color: #0088aa;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.form-control:focus {
|
|
border-color: #0088aa;
|
|
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 136, 170, 0.6);
|
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(0, 136, 170, 0.6);
|
|
}
|
|
|
|
input.btn {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.btn {
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
.btn-success {
|
|
background-color: #06d362 !important;
|
|
border-color: #06d362;
|
|
}
|
|
|
|
.btn-success:hover {
|
|
background-color: #1abd61 !important;
|
|
border-color: #1abd61;
|
|
}
|
|
|
|
.btn-info {
|
|
background-color: #0088aa !important;
|
|
border-color: #0088aa;
|
|
}
|
|
|
|
.btn-info:hover {
|
|
background-color: #00708c !important;
|
|
border-color: #00708c;
|
|
}
|
|
|
|
.btn-warning {
|
|
background-color: #ffcc00 !important;
|
|
border-color: #ffcc00;
|
|
color: #4d4d4d;
|
|
}
|
|
|
|
.btn-warning:hover {
|
|
background-color: #eabb3a !important;
|
|
border-color: #eabb3a;
|
|
color: #4d4d4d;
|
|
}
|
|
|
|
.btn-warning:active {
|
|
color: #4d4d4d;
|
|
}
|
|
|
|
.btn-warning:focus {
|
|
color: #4d4d4d;
|
|
}
|
|
|
|
.btn-warning:active:focus {
|
|
color: #4d4d4d;
|
|
}
|
|
|
|
.footer {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 60px;
|
|
background-color: #4d4d4d;
|
|
}
|
|
|
|
.footer .text-muted {
|
|
margin: 20px 0;
|
|
float: left;
|
|
color: #ccc;
|
|
}
|
|
|
|
.openvidu-logo {
|
|
height: 35px;
|
|
float: right;
|
|
margin: 12px 0;
|
|
-webkit-transition: all 0.1s ease-in-out;
|
|
-moz-transition: all 0.1s ease-in-out;
|
|
-o-transition: all 0.1s ease-in-out;
|
|
transition: all 0.1s ease-in-out;
|
|
}
|
|
|
|
.openvidu-logo:hover {
|
|
-webkit-filter: grayscale(0.5);
|
|
filter: grayscale(0.5);
|
|
}
|
|
|
|
.demo-logo {
|
|
margin: 0;
|
|
height: 22px;
|
|
float: left;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
a:hover .demo-logo {
|
|
-webkit-filter: brightness(0.7);
|
|
filter: brightness(0.7);
|
|
}
|
|
|
|
#join {
|
|
padding-top: 40px;
|
|
}
|
|
|
|
#not-logged {
|
|
padding-top: 40px;
|
|
}
|
|
|
|
#join-dialog h1 {
|
|
color: #4d4d4d;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
#join-dialog label {
|
|
color: #0088aa;
|
|
}
|
|
|
|
#join-dialog input.btn {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
#join-dialog hr {
|
|
background: #4d4d4d;
|
|
}
|
|
|
|
#img-div {
|
|
text-align: center;
|
|
padding-bottom: 3em;
|
|
}
|
|
|
|
#img-div img {
|
|
height: 15%;
|
|
}
|
|
|
|
#logged {
|
|
width: 100%;
|
|
}
|
|
|
|
#join {
|
|
max-width: 700px;
|
|
margin: auto;
|
|
margin-top: 100px;
|
|
}
|
|
|
|
#room-header {
|
|
margin-bottom: 20px;
|
|
height: 8%;
|
|
margin-top: 70px;
|
|
}
|
|
|
|
#room-header form {
|
|
display: inline-block;
|
|
}
|
|
|
|
#room-header input.btn {
|
|
float: right;
|
|
margin-top: 20px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
#room-title {
|
|
display: inline-block;
|
|
}
|
|
|
|
#room-header .form-control {
|
|
width: initial;
|
|
float: right;
|
|
margin: 18px 0px 0px 5px;
|
|
}
|
|
|
|
#video-container {
|
|
width: 100%;
|
|
max-height: 42%;
|
|
display: block;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#video-container video.two {
|
|
max-width: 50%;
|
|
}
|
|
|
|
#video-container video.three {
|
|
max-width: 33.33%;
|
|
}
|
|
|
|
#video-container video.four {
|
|
max-width: 25%;
|
|
}
|
|
|
|
#video-container div {
|
|
position: absolute;
|
|
display: inline-flex;
|
|
margin-left: calc(-50% + 15px);
|
|
}
|
|
|
|
#video-container p {
|
|
display: inline-block;
|
|
background: #f8f8f8;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
color: #777777;
|
|
font-weight: bold;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
|
|
#video-container p.userName {
|
|
float: right;
|
|
border-bottom-left-radius: 4px;
|
|
border-bottom-right-radius: 0px;
|
|
font-weight: lighter;
|
|
font-size: 12px;
|
|
background: #777777;
|
|
color: #f8f8f8;
|
|
}
|
|
|
|
video {
|
|
width: auto;
|
|
height: auto;
|
|
max-height: 100%;
|
|
object-fit: scale-down;
|
|
}
|
|
|
|
#room {
|
|
height: 100%;
|
|
padding-bottom: 80px;
|
|
}
|
|
|
|
#room img {
|
|
width: 100%;
|
|
height: auto;
|
|
display: inline-block;
|
|
object-fit: contain;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
#room #video-container img {
|
|
position: relative;
|
|
float: left;
|
|
width: 50%;
|
|
cursor: pointer;
|
|
object-fit: cover;
|
|
height: 180px;
|
|
}
|
|
|
|
table i {
|
|
cursor: pointer;
|
|
margin-left: 1em;
|
|
}
|
|
|
|
#tooltip-div {
|
|
text-align: left;
|
|
}
|
|
|
|
#tooltip-div hr {
|
|
margin: 5px 0;
|
|
}
|
|
|
|
#login-info {
|
|
text-align: right;
|
|
}
|
|
|
|
#login-info form {
|
|
display: inline;
|
|
}
|
|
|
|
#login-info div {
|
|
display: inline;
|
|
margin-right: 1em;
|
|
}
|
|
|
|
#name-user {
|
|
font-weight: bold;
|
|
}
|
|
|
|
#recording-btns {
|
|
display: inline-block;
|
|
padding-left: 15px;
|
|
padding-top: 20px;
|
|
width: 100%;
|
|
height: 40%;
|
|
}
|
|
|
|
#recording-btns .btns {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#recording-btns .btns .form-control {
|
|
width: initial;
|
|
display: inline;
|
|
}
|
|
|
|
#recording-btns .btns form {
|
|
display: inline;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
#recording-btns textarea {
|
|
height: 100%;
|
|
}
|
|
|
|
.textarea-container {
|
|
position: relative;
|
|
display: inline-block;
|
|
height: 74%;
|
|
margin-top: 20px;
|
|
resize: none;
|
|
}
|
|
|
|
#textarea-http-container {
|
|
width: 59%;
|
|
}
|
|
|
|
#recordings-list-container {
|
|
width: 39%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.textarea-container button {
|
|
position: absolute;
|
|
top: 1px;
|
|
right: 1px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.textarea-container span {
|
|
position: absolute;
|
|
bottom: 1px;
|
|
right: 1px;
|
|
padding: 3px;
|
|
border-bottom-right-radius: 4px;
|
|
z-index: 1;
|
|
color: #a5a5a5;
|
|
background-color: #ededee;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.textarea-container textarea {
|
|
height: 100%;
|
|
resize: none;
|
|
}
|
|
|
|
.vertical-separator-bottom {
|
|
width: 2px;
|
|
height: 34px;
|
|
display: inline-block;
|
|
background-color: #cbcbcb;
|
|
margin: 0 8px 0 8px;
|
|
margin-bottom: -12px;
|
|
}
|
|
|
|
.vertical-separator-top {
|
|
width: 2px;
|
|
height: 30px;
|
|
background-color: #cbcbcb;
|
|
margin: 20px 8px 0 15px;
|
|
float: right;
|
|
}
|
|
|
|
/* xs ans md screen resolutions*/
|
|
|
|
@media screen and (max-width: 991px) {
|
|
#join {
|
|
padding-top: inherit;
|
|
}
|
|
|
|
#not-logged {
|
|
padding-top: inherit;
|
|
}
|
|
|
|
.container .navbar-header {
|
|
margin-right: 0 !important;
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
.nav-icon {
|
|
padding: 9px 8px 9px 8px;
|
|
}
|
|
|
|
nav i.fa {
|
|
font-size: 32px;
|
|
}
|
|
|
|
.vertical-center {
|
|
padding-top: 10px;
|
|
}
|
|
|
|
#img-div {
|
|
padding-bottom: 1em;
|
|
}
|
|
|
|
#img-div img {
|
|
height: 10%;
|
|
}
|
|
} |