openvidu-js-java styled
This commit is contained in:
pabloFuente
parent
ce65f30e4d
commit
bcabb94cea
File diff suppressed because one or more lines are too long
@ -2,41 +2,112 @@ var OV;
|
||||
var userName;
|
||||
var session;
|
||||
var sessionName;
|
||||
var participantName;
|
||||
var sessionId;
|
||||
var token;
|
||||
|
||||
|
||||
/* APPLICATION BROWSER METHODS */
|
||||
/* OPENVIDU METHODS */
|
||||
|
||||
window.onbeforeunload = function () { // Gracefully leave session
|
||||
if (session) {
|
||||
removeUser();
|
||||
leaveSession();
|
||||
}
|
||||
logOut();
|
||||
function joinSession() {
|
||||
getSessionIdAndToken(function () {
|
||||
|
||||
// --- 1) Get an OpenVidu object and init a session with the retrieved sessionId ---
|
||||
|
||||
OV = new OpenVidu();
|
||||
session = OV.initSession(sessionId);
|
||||
|
||||
|
||||
// --- 2) Specify the actions when events take place ---
|
||||
|
||||
// On every new Stream received...
|
||||
session.on('streamCreated', function (event) {
|
||||
|
||||
// Subscribe to the Stream to receive it
|
||||
// HTML video will be appended to element with 'subscriber' id
|
||||
var subscriber = session.subscribe(event.stream, 'subscriber');
|
||||
|
||||
// When the HTML video has been appended to DOM...
|
||||
subscriber.on('videoElementCreated', function (event) {
|
||||
|
||||
// Add a new <p> element for the user's name and nickname just below its video
|
||||
appendUserData(event.element, subscriber.stream.connection);
|
||||
});
|
||||
});
|
||||
|
||||
// On every Stream destroyed...
|
||||
session.on('streamDestroyed', function (event) {
|
||||
// Delete the HTML element with the user's name and nickname
|
||||
removeUserData(event.stream.connection);
|
||||
});
|
||||
|
||||
// --- 3) Connect to the session passing the retrieved token and some more data from
|
||||
// the client (in this case a JSON with the nickname chosen by the user) ---
|
||||
|
||||
session.connect(token, '{"clientData": "' + participantName + '"}', function (error) {
|
||||
|
||||
// If the connection is successful, initialize a publisher and publish to the session
|
||||
if (!error) {
|
||||
|
||||
// Here we check somehow if the user has at least 'PUBLISHER' role before
|
||||
// trying to publish its stream. Even if someone modified the client's code and
|
||||
// published the stream, it wouldn't work if the token sent in Session.connect
|
||||
// method doesn't belong to a 'PUBLIHSER' role
|
||||
if (isPublisher()) {
|
||||
|
||||
// --- 4) Get your own camera stream ---
|
||||
|
||||
var publisher = OV.initPublisher('video-container', {
|
||||
audio: true,
|
||||
video: true,
|
||||
quality: 'MEDIUM'
|
||||
});
|
||||
|
||||
// When our HTML video has been added to DOM...
|
||||
publisher.on('videoElementCreated', function (event) {
|
||||
// Init the main video with ours and append our data
|
||||
var userData = {nickName: participantName, userName: userName};
|
||||
initMainVideo(event.element, userData);
|
||||
appendUserData(event.element, userData);
|
||||
});
|
||||
|
||||
|
||||
// --- 5) Publish your stream ---
|
||||
|
||||
session.publish(publisher);
|
||||
|
||||
} else {
|
||||
console.warn('You don\'t have permissions to publish');
|
||||
initMainVideoThumbnail();
|
||||
}
|
||||
} else {
|
||||
console.warn('There was an error connecting to the session:', error.code, error.message);
|
||||
}
|
||||
});
|
||||
|
||||
$('#session-title').text(sessionName);
|
||||
$('#join').hide();
|
||||
$('#session').show();
|
||||
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
function appendUserData(videoElement, connection) {
|
||||
var clientDataJSON = JSON.parse(connection.data.split('%/%')[0]);
|
||||
var serverDataJSON = JSON.parse(connection.data.split('%/%')[1]);
|
||||
$("<p id='data-" + connection.connectionId + "' class='data-node'>Nickname: " + clientDataJSON.clientData +
|
||||
"<br/>Username: " + serverDataJSON.serverData + "</p>"
|
||||
).insertAfter(videoElement);
|
||||
function leaveSession() {
|
||||
|
||||
// 6) Leave the session by calling 'disconnect' method over the Session object
|
||||
|
||||
session.disconnect();
|
||||
session = null;
|
||||
|
||||
// Removing all HTML elements with the user's nicknames
|
||||
cleanSessionView();
|
||||
|
||||
$('#join').show();
|
||||
$('#session').hide();
|
||||
}
|
||||
|
||||
function removeUserData(connection) {
|
||||
$("#data-" + connection.connectionId).remove();
|
||||
}
|
||||
|
||||
function removeAllUserData() {
|
||||
$(".data-node").remove();
|
||||
}
|
||||
|
||||
function isPublisher() {
|
||||
return userName.includes('publisher');
|
||||
}
|
||||
|
||||
/* APPLICATION BROWSER METHODS */
|
||||
/* OPENVIDU METHODS */
|
||||
|
||||
|
||||
|
||||
@ -71,6 +142,7 @@ function logOut() {
|
||||
}
|
||||
|
||||
function getSessionIdAndToken(callback) {
|
||||
participantName = $("#participantName").val();
|
||||
sessionName = $("#sessionName").val();
|
||||
var jsonBody = JSON.stringify({
|
||||
'session': sessionName
|
||||
@ -122,84 +194,85 @@ function httpRequest(method, url, body, errorMsg, callback) {
|
||||
|
||||
|
||||
|
||||
/* OPENVIDU METHODS */
|
||||
/* APPLICATION BROWSER METHODS */
|
||||
|
||||
function joinSession() {
|
||||
getSessionIdAndToken(function () {
|
||||
window.onbeforeunload = function () { // Gracefully leave session
|
||||
if (session) {
|
||||
removeUser();
|
||||
leaveSession();
|
||||
}
|
||||
logOut();
|
||||
}
|
||||
|
||||
// 1) Get an OpenVidu object and init a session with a sessionId
|
||||
function appendUserData(videoElement, connection) {
|
||||
var clientData;
|
||||
var serverData;
|
||||
var nodeId;
|
||||
if (connection.nickName) { // Appending local video data
|
||||
clientData = connection.nickName;
|
||||
serverData = connection.userName;
|
||||
nodeId = 'main-videodata';
|
||||
} else {
|
||||
clientData = JSON.parse(connection.data.split('%/%')[0]).clientData;
|
||||
serverData = JSON.parse(connection.data.split('%/%')[1]).serverData;
|
||||
nodeId = connection.connectionId;
|
||||
}
|
||||
var dataNode = document.createElement('div');
|
||||
dataNode.className = "data-node";
|
||||
dataNode.id = "data-" + nodeId;
|
||||
dataNode.innerHTML = "<p class='nickName'>" + clientData + "</p><p class='userName'>" + serverData + "</p>";
|
||||
videoElement.parentNode.insertBefore(dataNode, videoElement.nextSibling);
|
||||
addClickListener(videoElement, clientData, serverData);
|
||||
}
|
||||
|
||||
OV = new OpenVidu();
|
||||
session = OV.initSession(sessionId);
|
||||
function removeUserData(connection) {
|
||||
var userNameRemoved = $("#data-" + connection.connectionId);
|
||||
if ($(userNameRemoved).find('p.userName').html() === $('#main-video p.userName').html()){
|
||||
cleanMainVideo(); // The participant focused in the main video has left
|
||||
}
|
||||
$("#data-" + connection.connectionId).remove();
|
||||
}
|
||||
|
||||
function removeAllUserData() {
|
||||
$(".data-node").remove();
|
||||
}
|
||||
|
||||
// 2) Specify the actions when events take place
|
||||
|
||||
session.on('streamCreated', function (event) {
|
||||
// Subscribe to the stream to receive it
|
||||
var subscriber = session.subscribe(event.stream, 'subscriber');
|
||||
subscriber.on('videoElementCreated', function (event) {
|
||||
// Add a new HTML element for the user's nickname
|
||||
appendUserData(event.element, subscriber.stream.connection);
|
||||
});
|
||||
});
|
||||
|
||||
session.on('streamDestroyed', function (event) {
|
||||
// Delete the HTML element with the user's nickname
|
||||
removeUserData(event.stream.connection);
|
||||
});
|
||||
|
||||
// 3) Connect to the session
|
||||
|
||||
session.connect(token, '{"clientData": "' + $("#participantName").val() + '"}', function (error) {
|
||||
|
||||
// If the connection is successful, initialize a publisher and publish to the session (only if the user is supposed to do so)
|
||||
if (!error) {
|
||||
|
||||
// If the user has enough permissions
|
||||
if (isPublisher()) {
|
||||
|
||||
// 4) Get your own camera stream with the desired resolution
|
||||
|
||||
var publisher = OV.initPublisher('publisher', {
|
||||
audio: true,
|
||||
video: true,
|
||||
quality: 'MEDIUM'
|
||||
});
|
||||
|
||||
|
||||
// 5) Publish your stream
|
||||
|
||||
session.publish(publisher);
|
||||
|
||||
} else {
|
||||
console.warn('You don\'t have permissions to publish');
|
||||
}
|
||||
} else {
|
||||
console.warn('There was an error connecting to the session:', error.code, error.message);
|
||||
}
|
||||
});
|
||||
|
||||
$('#session-header').text(sessionName);
|
||||
$('#join').hide();
|
||||
$('#session').show();
|
||||
|
||||
return false;
|
||||
function cleanMainVideo() {
|
||||
$('#main-video video').attr('src', '');
|
||||
$('#main-video p').each(function () {
|
||||
$(this).html('');
|
||||
});
|
||||
}
|
||||
|
||||
function leaveSession() {
|
||||
|
||||
// 6) Leave the session by calling 'disconnect' method over the Session object
|
||||
|
||||
session.disconnect();
|
||||
session = null;
|
||||
|
||||
// Removing all HTML elements with the user's nicknames
|
||||
removeAllUserData();
|
||||
|
||||
$('#join').show();
|
||||
$('#session').hide();
|
||||
function addClickListener(videoElement, clientData, serverData) {
|
||||
videoElement.addEventListener('click', function () {
|
||||
var mainVideo = $('#main-video video');
|
||||
if (mainVideo.attr('src') !== videoElement.src) {
|
||||
$('#main-video p.nickName').html(clientData);
|
||||
$('#main-video p.userName').html(serverData);
|
||||
mainVideo.attr('src', videoElement.src);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* OPENVIDU METHODS */
|
||||
function initMainVideo(videoElement, userData) {
|
||||
$('#main-video video').attr("src", videoElement.src);
|
||||
$('#main-video p.nickName').html(userData.nickName);
|
||||
$('#main-video p.userName').html(userData.userName);
|
||||
}
|
||||
|
||||
function initMainVideoThumbnail() {
|
||||
$('#main-video video').css("background", "url('images/subscriber-msg.jpg') round");
|
||||
}
|
||||
|
||||
function isPublisher() {
|
||||
return userName.includes('publisher');
|
||||
}
|
||||
|
||||
function cleanSessionView() {
|
||||
removeAllUserData();
|
||||
cleanMainVideo();
|
||||
$('#main-video video').css("background", "");
|
||||
}
|
||||
|
||||
/* APPLICATION BROWSER METHODS */
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
@ -1,82 +1,125 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>OpenVidu Sample</title>
|
||||
<title>openvidu-js-java</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
|
||||
crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
|
||||
crossorigin="anonymous">
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
|
||||
crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<!-- Bootstrap -->
|
||||
|
||||
<meta charset="utf-8">
|
||||
<link rel="styleSheet" href="style.css" type="text/css" media="screen">
|
||||
|
||||
<script src="OpenVidu.js"></script>
|
||||
<script src="app.js"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('[data-toggle="tooltip"]').tooltip({
|
||||
html: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="not-logged">
|
||||
<form onsubmit="return false">
|
||||
<p>
|
||||
<label>User</label>
|
||||
<input type="text" id="user" required>
|
||||
</p>
|
||||
<p>
|
||||
<label>Pass</label>
|
||||
<input type="password" id="pass" required>
|
||||
</p>
|
||||
<p>
|
||||
<button id="login-btn" onclick="logIn()">Log in</button>
|
||||
</p>
|
||||
</form>
|
||||
<table style="border: 1px solid">
|
||||
<tr>
|
||||
<th>User</th>
|
||||
<th>Pass</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>publisher1</td>
|
||||
<td>pass</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>publisher2</td>
|
||||
<td>pass</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>subscriber</td>
|
||||
<td>pass</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>PUBLISHER: send and receive media</p><p>SUBSCRIBER: receive media</p>
|
||||
</div>
|
||||
<nav class="navbar navbar-default">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="#">OpenVidu Tutorial</a>
|
||||
<a class="navbar-brand nav-icon" href="https://github.com/OpenVidu/openvidu-tutorials/tree/master/openvidu-js-java" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div id="logged" hidden>
|
||||
<div id="join">
|
||||
<h1>Hello, <span id="name-user" style="color:red"></span>! Join a video session</h1>
|
||||
<form onsubmit="return false">
|
||||
<div class="container vertical-center">
|
||||
<div id="not-logged" class="horizontal-center">
|
||||
<form class="form-group jumbotron" onsubmit="return false">
|
||||
<p>
|
||||
<label>Name:</label>
|
||||
<input type="text" id="participantName" required>
|
||||
<label>User</label>
|
||||
<input class="form-control" type="text" id="user" required>
|
||||
</p>
|
||||
<p>
|
||||
<label>Session:</label>
|
||||
<input type="text" id="sessionName" required>
|
||||
<label>Pass</label>
|
||||
<input class="form-control" type="password" id="pass" required>
|
||||
</p>
|
||||
<p>
|
||||
<button id="join-btn" onclick="joinSession()">Join!</button>
|
||||
<p class="text-center">
|
||||
<button class="btn btn-lg btn-info" id="login-btn" onclick="logIn()">Log in</button>
|
||||
</p>
|
||||
</form>
|
||||
<p>
|
||||
<button id="logout-btn" onclick="logOut()">Log out</button>
|
||||
</p>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<th>User</th>
|
||||
<th>Pass</th>
|
||||
<th>Role<i data-toggle="tooltip" data-placement="bottom" title="" data-original-title="<div id='tooltip-div'>PUBLISHER<div>Send and receive media<hr></div>SUBSCRIBER<div>Receive media</div></div>"
|
||||
class="glyphicon glyphicon-info-sign"></i></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>publisher1</td>
|
||||
<td>pass</td>
|
||||
<td>PUBLISHER</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>publisher2</td>
|
||||
<td>pass</td>
|
||||
<td>PUBLISHER</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>subscriber</td>
|
||||
<td>pass</td>
|
||||
<td>SUBSCRIBER</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="session" style="display: none;">
|
||||
<h2 id="session-header"></h2>
|
||||
<input type="button" id="buttonLeaveSession" onmouseup="removeUser(); leaveSession()" value="Leave session">
|
||||
<div id="publisher"></div>
|
||||
<div id="subscriber"></div>
|
||||
<div id="logged" class="horizontal-center" hidden>
|
||||
<div id="join">
|
||||
<div id="login-info">
|
||||
<div>Logged as <span id="name-user"></span></div>
|
||||
<button id="logout-btn" class="btn btn-warning" onclick="logOut()">Log out</button>
|
||||
</div>
|
||||
<div class="jumbotron">
|
||||
<h1>Join a video session</h1>
|
||||
<form class="form-group" onsubmit="return false">
|
||||
<p>
|
||||
<label>Participant</label>
|
||||
<input class="form-control" type="text" id="participantName" required>
|
||||
</p>
|
||||
<p>
|
||||
<label>Session</label>
|
||||
<input class="form-control" type="text" id="sessionName" required>
|
||||
</p>
|
||||
<p class="text-center">
|
||||
<button id="join-btn" class="btn btn-lg btn-success" onclick="joinSession()">Join!</button>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="session" style="display: none;">
|
||||
<div id="session-header">
|
||||
<h1 id="session-title"></h1>
|
||||
<input class="btn btn-large btn-danger" type="button" id="buttonLeaveSession" onmouseup="removeUser(); leaveSession()" value="Leave session">
|
||||
</div>
|
||||
<div id="main-video" class="col-md-6"><p class="nickName"></p><p class="userName"></p><video autoplay src=""></video></div>
|
||||
<div id="video-container" class="col-md-6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<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>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||
<script src="OpenVidu.js"></script>
|
||||
<script src="app.js"></script>
|
||||
|
||||
</html>
|
||||
@ -1,13 +1,118 @@
|
||||
#publisher {
|
||||
float: left;
|
||||
width: 20%;
|
||||
margin: 10px;
|
||||
html {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
#subscriber {
|
||||
nav {
|
||||
height: 50px;
|
||||
position: absolute !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
padding: 5px 15px 5px 15px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
nav i.fa {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.vertical-center {
|
||||
min-height: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.horizontal-center {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.footer .text-muted {
|
||||
margin: 20px 0;
|
||||
float: left;
|
||||
width: 20%;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.footer img {
|
||||
height: 50px;
|
||||
float: right;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
#logged {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#join {
|
||||
max-width: 700px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
#video-container video {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#video-container div {
|
||||
float: left;
|
||||
width: 50%;
|
||||
position: relative;
|
||||
margin-left: -50%;
|
||||
}
|
||||
|
||||
#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 {
|
||||
@ -15,15 +120,72 @@ video {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
border: 0;
|
||||
#main-video p {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
background: #f8f8f8;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
font-size: 22px;
|
||||
color: #777777;
|
||||
font-weight: bold;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
th {
|
||||
#main-video p.userName {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
font-size: 16px !important;
|
||||
margin-right: 15px;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 0px;
|
||||
font-weight: lighter;
|
||||
font-size: 12px;
|
||||
background: #777777;
|
||||
color: #f8f8f8;
|
||||
}
|
||||
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
table i {
|
||||
cursor: pointer;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
#tooltip-div {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td {
|
||||
text-align: left;
|
||||
padding-right: 15px;
|
||||
#tooltip-div hr {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
#login-info {
|
||||
text-align: right;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#login-info div {
|
||||
display: inline;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
#name-user {
|
||||
font-weight: bold;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user