neoris/openvidu-livekit-tutorials
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Insecure tutorials new OpenVidu style

Browse Source
This commit is contained in:
pabloFuente 2017-07-26 09:49:52 +02:00
parent ab9857864e
commit d4c8e10dc9
23 changed files with 422 additions and 2556 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
openvidu-getaroom/web/app.js
View File

@ -110,7 +110,7 @@ function leaveRoom() {
// --- 6) Leave the session by calling 'disconnect' method over the Session object --- // --- 6) Leave the session by calling 'disconnect' method over the Session object ---
session.disconnect(); session.disconnect();
showJoinHideSession(); // Back to welcome page
window.location.href = window.location.origin + window.location.pathname; window.location.href = window.location.origin + window.location.pathname;
} }

34
openvidu-getaroom/web/index.html
View File

@ -1,18 +1,11 @@
<html> <html>
<head> <head>
<title>openvidu-getaroom</title>
<title>OpenVidu getaroom</title> <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="resources/images/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="resources/images/favicon.ico" type="image/x-icon">
<script src="OpenVidu.js"></script>
<script src="app.js"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script>
<!-- Bootstrap --> <!-- Bootstrap -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
@ -23,18 +16,19 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap --> <!-- Bootstrap -->
<!--Custom styles -->
<link rel="styleSheet" href="style.css" type="text/css" media="screen"> <link rel="styleSheet" href="style.css" type="text/css" media="screen">
<script src="OpenVidu.js"></script>
<script src="app.js"></script>
</head> </head>
<body> <body>
<nav id="nav-join" class="navbar navbar-default" hidden> <nav id="nav-join" class="navbar navbar-default">
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header">
<a class="navbar-brand" href="#"><span class="arciform">openVidu getaroom</span></a> <a class="navbar-brand" href="/"><img class="demo-logo" src="resources/images/openvidu_vert_white_bg_trans_cropped.png"/> getaroom</a>
<a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-getaroom" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a> <a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-getaroom" title="GitHub Repository" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
<a class="navbar-brand nav-icon" href="http://www.openvidu.io/docs/tutorials/openvidu-getaroom/" title="Documentation" target="_blank"><i class="fa fa-book" aria-hidden="true"></i></a>
</div> </div>
</div> </div>
</nav> </nav>
@ -42,7 +36,7 @@
<nav id="nav-session" class="navbar navbar-default" hidden> <nav id="nav-session" class="navbar navbar-default" hidden>
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header">
<a href="http://www.openvidu.io/" target="_blank"><img src="resources/images/openvidu_globe_bg_transp_cropped.png"/></a> <a class="navbar-brand" href="/"><img class="demo-logo" src="resources/images/openvidu_vert_white_bg_trans_cropped.png"/> getaroom</a>
<button id="leave-room" type="button" class="btn btn-danger" onclick="leaveRoom()">Leave Room</button> <button id="leave-room" type="button" class="btn btn-danger" onclick="leaveRoom()">Leave Room</button>
<form> <form>
<div class="input-group"> <div class="input-group">
@ -66,9 +60,9 @@
<!-- Join page template --> <!-- Join page template -->
<div id="join" class="row no-margin" hidden> <div id="join" class="row no-margin" hidden>
<div class="jumbotron col-lg-4 col-md-6 col-centered"> <div id="img-div"><img src="resources/images/openvidu_grey_bg_transp_cropped.png" /></div>
<div id="img-div"><img src="resources/images/openvidu_grey_bg_transp_cropped.png" /></div> <div id="join-dialog" class="jumbotron vertical-center">
<h1 class="arciform">getaroom</h1> <h1 class="arciform">Get a room</h1>
<button type="button" class="btn btn-success" onclick="joinRoom()">Go!</button> <button type="button" class="btn btn-success" onclick="joinRoom()">Go!</button>
</div> </div>
</div> </div>
@ -85,8 +79,8 @@
<footer class="footer"> <footer class="footer">
<div class="container"> <div class="container">
<div class="text-muted arciform">openVidu © 2017</div> <div class="text-muted">OpenVidu © 2017</div>
<a href="http://www.openvidu.io/" target="_blank"><img src="resources/images/openvidu_globe_bg_transp_cropped.png"/></a> <a href="http://www.openvidu.io/" target="_blank"><img class="openvidu-logo" src="resources/images/openvidu_globe_bg_transp_cropped.png"/></a>
</div> </div>
</footer> </footer>

BIN
openvidu-getaroom/web/resources/fonts/Arciform.eot
View File

Binary file not shown.

2408
openvidu-getaroom/web/resources/fonts/Arciform.svg
View File

File diff suppressed because it is too large Load Diff
Side by Side

Before

Width:  |  Height:  |  Size: 131 KiB

BIN
openvidu-getaroom/web/resources/fonts/Arciform.ttf
View File

Binary file not shown.

BIN
openvidu-getaroom/web/resources/fonts/Arciform.woff
View File

Binary file not shown.

BIN
openvidu-getaroom/web/resources/images/openvidu_vert_white_bg_trans_cropped.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

79
openvidu-getaroom/web/style.css
View File

@ -40,11 +40,15 @@ nav i.fa:hover {
color: #a9a9a9; color: #a9a9a9;
} }
#main-container {
padding-bottom: 80px;
}
.vertical-center { .vertical-center {
position: absolute; position: absolute;
top: 50%; top: 51%;
left: 50%; left: 50%;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
} }
.horizontal-center { .horizontal-center {
@ -85,7 +89,7 @@ input.btn {
color: #ccc; color: #ccc;
} }
.footer img { .openvidu-logo {
height: 35px; height: 35px;
float: right; float: right;
margin: 12px 0; margin: 12px 0;
@ -95,12 +99,28 @@ input.btn {
transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
} }
.footer img:hover { .openvidu-logo:hover {
-webkit-filter: grayscale(0.5); -webkit-filter: grayscale(0.5);
filter: grayscale(0.5); filter: grayscale(0.5);
} }
#join h1 { .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-dialog {
margin-top: 0;
}
#join-dialog h1 {
color: #4d4d4d; color: #4d4d4d;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
@ -108,17 +128,21 @@ input.btn {
#img-div { #img-div {
text-align: center; text-align: center;
position: absolute;
top: 26%;
left: 50%;
transform: translate(-50%, -50%);
} }
#img-div img { #img-div img {
height: 15%; height: 15%;
} }
#join label { #join-dialog label {
color: #0088aa; color: #0088aa;
} }
#join input.btn { #join-dialog input.btn {
margin-top: 15px; margin-top: 15px;
} }
@ -159,6 +183,11 @@ input.btn {
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
} }
video {
width: 100%;
height: auto;
}
#main-video p { #main-video p {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
@ -189,17 +218,17 @@ input.btn {
} }
.arciform { /* xs ans md screen resolutions*/
font-family: Arciform;
}
@font-face { @media screen and (max-width: 991px) {
font-family: 'Arciform'; .vertical-center {
src: url('/resources/fonts/Arciform.eot'); /* IE9 Compat Modes */ width: 85%;
src: url('/resources/fonts/Arciform.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ padding-top: 10px;
url('/resources/fonts/Arciform.woff') format('woff'), /* Modern Browsers */ top: 57%;
url('/resources/fonts/Arciform.ttf') format('truetype'), /* Safari, Android, iOS */ }
url('/resources/fonts/Arciform.svg#svgFontName') format('svg'); /* Legacy iOS */ #img-div {
top: 32%;
}
} }
html, html,
@ -333,18 +362,8 @@ nav#nav-session div.container {
padding-bottom: 8; padding-bottom: 8;
} }
nav#nav-session img { nav#nav-session .navbar-brand {
height: 35px; padding-top: 7px;
float: left;
-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;
}
nav#nav-session img:hover {
-webkit-filter: grayscale(0.5);
filter: grayscale(0.5);
} }
#leave-room { #leave-room {

20
openvidu-insecure-angular/src/app/app.component.css
View File

@ -1,23 +1,3 @@
.stream-container { .stream-container {
padding: 0; padding: 0;
}
#session {
padding-top: 70px;
height: 100vh;
height: 100%;
width: 100%;
}
#session-header {
margin-bottom: 20px;
}
#session-title {
display: inline-block;
}
#buttonLeaveSession {
float: right;
margin-top: 20px;
} }

35
openvidu-insecure-angular/src/app/app.component.html
View File

@ -1,19 +1,22 @@
<div class="container vertical-center"> <div id="main-container" class="container">
<div *ngIf="!session" id="join" class="jumbotron horizontal-center"> <div *ngIf="!session" id="join">
<h1>Join a video session</h1> <div id="img-div"><img src="src/assets/images/openvidu_grey_bg_transp_cropped.png" /></div>
<form class="form-group" (submit)="joinSession()"> <div id="join-dialog" class="jumbotron vertical-center">
<p> <h1>Join a video session</h1>
<label>Participant</label> <form class="form-group" (submit)="joinSession()">
<input class="form-control" type="text" name="token" id="participantId" [(ngModel)]="token" required> <p>
</p> <label>Participant</label>
<p> <input class="form-control" type="text" id="participantId" name="participantId" [(ngModel)]="token" required>
<label>Session</label> </p>
<input class="form-control" type="text" name="sessionId" id="sessionId" [(ngModel)]="sessionId" required> <p>
</p> <label>Session</label>
<p class="text-center"> <input class="form-control" type="text" id="sessionId" name="sessionId" [(ngModel)]="sessionId" required>
<input class="btn btn-lg btn-success" type="submit" name="commit" value="Join!"> </p>
</p> <p class="text-center">
</form> <input class="btn btn-lg btn-success" type="submit" name="commit" value="Join!">
</p>
</form>
</div>
</div> </div>
<div *ngIf="session" id="session"> <div *ngIf="session" id="session">

BIN
openvidu-insecure-angular/src/assets/images/openvidu_globe_bg_transp_cropped.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
openvidu-insecure-angular/src/assets/images/openvidu_grey_bg_transp_cropped.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
openvidu-insecure-angular/src/assets/images/openvidu_vert_white_bg_trans.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
openvidu-insecure-angular/src/assets/images/openvidu_vert_white_bg_trans_cropped.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
openvidu-insecure-angular/src/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

27
openvidu-insecure-angular/src/index.html
View File

@ -21,23 +21,24 @@
<body> <body>
<nav class="navbar navbar-default"> <nav class="navbar navbar-default">
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header">
<a class="navbar-brand" href="#">OpenVidu Tutorial</a> <a class="navbar-brand" href="/"><img class="demo-logo" src="src/assets/images/openvidu_vert_white_bg_trans_cropped.png"/> Insecure Angular</a>
<a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-insecure-angular" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a> <a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-insecure-angular" title="GitHub Repository" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
</div> <a class="navbar-brand nav-icon" href="http://www.openvidu.io/docs/tutorials/openvidu-insecure-angular/" title="Documentation" target="_blank"><i class="fa fa-book" aria-hidden="true"></i></a>
</div> </div>
</div>
</nav> </nav>
<app-root>Loading...</app-root> <app-root>Loading...</app-root>
<footer class="footer"> <footer class="footer">
<div class="container"> <div class="container">
<div class="text-muted">OpenVidu © 2017</div> <div class="text-muted">OpenVidu © 2017</div>
<a href="http://www.codeurjc.es/" target="_blank"><img src="https://codeurjc.files.wordpress.com/2016/01/logo_cetrado_negro.png?w=275&h=165"/></a> <a href="http://www.openvidu.io/" target="_blank"><img class="openvidu-logo" src="src/assets/images/openvidu_globe_bg_transp_cropped.png"/></a>
</div> </div>
</footer> </footer>
</body> </body>
</html> </html>

183
openvidu-insecure-angular/src/styles.css
View File

@ -5,8 +5,12 @@ html {
nav { nav {
height: 50px; height: 50px;
position: absolute !important;
width: 100%; 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 { .navbar-header {
@ -18,44 +22,201 @@ nav {
float: right; float: right;
} }
nav a {
color: #ccc !important;
}
nav i.fa { nav i.fa {
font-size: 40px; font-size: 40px;
color: #ccc;
}
nav a:hover {
color: #a9a9a9 !important;
}
nav i.fa:hover {
font-size: 40px;
color: #a9a9a9;
}
#main-container {
padding-bottom: 80px;
} }
.vertical-center { .vertical-center {
min-height: 80%; position: absolute;
min-height: 80vh; top: 56%;
display: flex; left: 50%;
align-items: center; transform: translate(-50%, -50%);
} }
.horizontal-center { .horizontal-center {
margin: 0 auto; 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-success {
background-color: #0088aa !important;
border-color: #0088aa;
}
.footer { .footer {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 60px; height: 60px;
background-color: #f8f8f8; background-color: #4d4d4d;
} }
.footer .text-muted { .footer .text-muted {
margin: 20px 0; margin: 20px 0;
float: left; float: left;
color: #ccc;
} }
.footer img { .openvidu-logo {
height: 50px; height: 35px;
float: right; float: right;
margin: 5px 0; 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;
} }
#main-video video { .openvidu-logo:hover {
cursor: auto; -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-dialog h1 {
color: #4d4d4d;
font-weight: bold;
text-align: center;
}
#img-div {
text-align: center;
position: absolute;
top: 19%;
left: 50%;
transform: translate(-50%, -50%);
}
#img-div img {
height: 15%;
}
#join-dialog label {
color: #0088aa;
}
#join-dialog input.btn {
margin-top: 15px;
}
#session-header {
margin-bottom: 20px;
}
#session-title {
display: inline-block;
}
#buttonLeaveSession {
float: right;
margin-top: 20px;
}
#video-container video {
position: relative;
float: left;
cursor: pointer;
}
#video-container p {
display: inline-block;
background: #f8f8f8;
padding-right: 5px;
padding-left: 5px;
color: #777777;
font-weight: bold;
border-bottom-right-radius: 4px;
}
video {
width: 100%;
height: auto;
} }
#main-video p { #main-video p {
position: absolute;
display: inline-block;
background: #f8f8f8;
padding-right: 5px;
padding-left: 5px;
left: 0;
font-size: 22px; font-size: 22px;
color: #777777;
font-weight: bold;
border-bottom-right-radius: 4px;
}
#main-video video {
cursor: initial;
}
#session img {
width: 100%;
height: auto;
display: inline-block;
object-fit: contain;
vertical-align: baseline;
}
#session #video-container img {
position: relative;
float: left;
width: 50%;
cursor: pointer;
object-fit: cover;
height: 180px;
}
/* xs ans md screen resolutions*/
@media screen and (max-width: 991px) {
.vertical-center {
width: 85%;
padding-top: 10px;
top: 57%;
}
} }

43
openvidu-insecure-js/web/index.html
View File

@ -4,6 +4,7 @@
<title>openvidu-insecure-js</title> <title>openvidu-insecure-js</title>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
<link rel="shortcut icon" href="resources/images/favicon.ico" type="image/x-icon">
<!-- Bootstrap --> <!-- Bootstrap -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
@ -25,28 +26,32 @@
<nav class="navbar navbar-default"> <nav class="navbar navbar-default">
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header">
<a class="navbar-brand" href="#">OpenVidu Tutorial</a> <a class="navbar-brand" href="/"><img class="demo-logo" src="resources/images/openvidu_vert_white_bg_trans_cropped.png"/> Insecure JS</a>
<a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-insecure-js" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a> <a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-insecure-js" title="GitHub Repository" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
<a class="navbar-brand nav-icon" href="http://www.openvidu.io/docs/tutorials/openvidu-insecure-js/" title="Documentation" target="_blank"><i class="fa fa-book" aria-hidden="true"></i></a>
</div> </div>
</div> </div>
</nav> </nav>
<div class="container vertical-center"> <div id="main-container" class="container">
<div id="join" class="jumbotron horizontal-center"> <div id="join">
<h1>Join a video session</h1> <div id="img-div"><img src="resources/images/openvidu_grey_bg_transp_cropped.png" /></div>
<form class="form-group" onsubmit="return joinSession()"> <div id="join-dialog" class="jumbotron vertical-center">
<p> <h1>Join a video session</h1>
<label>Participant</label> <form class="form-group" onsubmit="return joinSession()">
<input class="form-control" type="text" id="participantId" required> <p>
</p> <label>Participant</label>
<p> <input class="form-control" type="text" id="participantId" required>
<label>Session</label> </p>
<input class="form-control" type="text" id="sessionId" required> <p>
</p> <label>Session</label>
<p class="text-center"> <input class="form-control" type="text" id="sessionId" required>
<input class="btn btn-lg btn-success" type="submit" name="commit" value="Join!"> </p>
</p> <p class="text-center">
</form> <input class="btn btn-lg btn-success" type="submit" name="commit" value="Join!">
</p>
</form>
</div>
</div> </div>
<div id="session" style="display: none;"> <div id="session" style="display: none;">
@ -62,7 +67,7 @@
<footer class="footer"> <footer class="footer">
<div class="container"> <div class="container">
<div class="text-muted">OpenVidu © 2017</div> <div class="text-muted">OpenVidu © 2017</div>
<a href="http://www.codeurjc.es/" target="_blank"><img src="https://codeurjc.files.wordpress.com/2016/01/logo_cetrado_negro.png?w=275&h=165"/></a> <a href="http://www.openvidu.io/" target="_blank"><img class="openvidu-logo" src="resources/images/openvidu_globe_bg_transp_cropped.png"/></a>
</div> </div>
</footer> </footer>

BIN
openvidu-insecure-js/web/resources/images/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
openvidu-insecure-js/web/resources/images/openvidu_globe_bg_transp_cropped.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
openvidu-insecure-js/web/resources/images/openvidu_grey_bg_transp_cropped.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
openvidu-insecure-js/web/resources/images/openvidu_vert_white_bg_trans_cropped.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

147
openvidu-insecure-js/web/style.css
View File

@ -5,8 +5,12 @@ html {
nav { nav {
height: 50px; height: 50px;
position: absolute !important;
width: 100%; 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 { .navbar-header {
@ -18,45 +22,124 @@ nav {
float: right; float: right;
} }
nav a {
color: #ccc !important;
}
nav i.fa { nav i.fa {
font-size: 40px; font-size: 40px;
color: #ccc;
}
nav a:hover {
color: #a9a9a9 !important;
}
nav i.fa:hover {
font-size: 40px;
color: #a9a9a9;
}
#main-container {
padding-bottom: 80px;
} }
.vertical-center { .vertical-center {
min-height: 80%; position: absolute;
min-height: 80vh; top: 56%;
display: flex; left: 50%;
align-items: center; transform: translate(-50%, -50%);
} }
.horizontal-center { .horizontal-center {
margin: 0 auto; 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-success {
background-color: #0088aa !important;
border-color: #0088aa;
}
.footer { .footer {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 60px; height: 60px;
background-color: #f8f8f8; background-color: #4d4d4d;
} }
.footer .text-muted { .footer .text-muted {
margin: 20px 0; margin: 20px 0;
float: left; float: left;
color: #ccc;
} }
.footer img { .openvidu-logo {
height: 50px; height: 35px;
float: right; float: right;
margin: 5px 0; 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;
} }
#session { .openvidu-logo:hover {
padding-top: 70px; -webkit-filter: grayscale(0.5);
height: 100vh; filter: grayscale(0.5);
height: 100%; }
width: 100%;
.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-dialog h1 {
color: #4d4d4d;
font-weight: bold;
text-align: center;
}
#img-div {
text-align: center;
position: absolute;
top: 19%;
left: 50%;
transform: translate(-50%, -50%);
}
#img-div img {
height: 15%;
}
#join-dialog label {
color: #0088aa;
}
#join-dialog input.btn {
margin-top: 15px;
} }
#session-header { #session-header {
@ -92,8 +175,8 @@ nav i.fa {
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
color: #777777; color: #777777;
font-weight: bold; font-weight: bold;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
} }
video { video {
@ -109,6 +192,34 @@ video {
padding-right: 5px; padding-right: 5px;
font-size: 22px; font-size: 22px;
color: #777777; color: #777777;
font-weight: bold; font-weight: bold;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
}
#session img {
width: 100%;
height: auto;
display: inline-block;
object-fit: contain;
vertical-align: baseline;
}
#session #video-container img {
position: relative;
float: left;
width: 50%;
cursor: pointer;
object-fit: cover;
height: 180px;
}
/* xs ans md screen resolutions*/
@media screen and (max-width: 991px) {
.vertical-center {
width: 85%;
padding-top: 10px;
top: 57%;
}
} }