Add logo to the sign in page

This commit is contained in:
Jérémie Astori 2018-03-11 17:20:51 -04:00
parent 74ccef02bf
commit ed67dc5de5
No known key found for this signature in database
GPG key ID: B9A4F245CD67BDE8
6 changed files with 32 additions and 29 deletions

View file

@ -1553,19 +1553,21 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
}
#loading-reload-container {
flex-grow: 0;
}
.loading-logo-dark {
display: none;
.logo-inverted {
display: none; /* In dark themes, inverted logo must be used instead */
}
#sign-in label {
display: block;
margin-top: 10px;
width: 100%;
}
#sign-in .btn {
@ -1574,7 +1576,9 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
#sign-in .error {
color: #e74c3c;
display: none; /* This message gets displayed on error only */
margin-top: 1em;
width: 100%;
}
#connect label {
@ -2332,6 +2336,10 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
margin: 10px 0 !important;
}
#sign-in .btn {
width: 100%;
}
#connect .tls {
margin: 20px 0;
}

View file

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View file

@ -47,8 +47,8 @@
<article id="windows">
<div id="loading" class="window active">
<div id="loading-status-container">
<img src="img/logo-vertical-transparent-bg.svg" class="loading-logo-bright" alt="The Lounge" width="256" height="170">
<img src="img/logo-vertical-transparent-dark.svg" class="loading-logo-dark" alt="The Lounge" width="256" height="170">
<img src="img/logo-vertical-transparent-bg.svg" class="logo" alt="The Lounge" width="256" height="170">
<img src="img/logo-vertical-transparent-bg-inverted.svg" class="logo-inverted" alt="The Lounge" width="256" height="170">
<p id="loading-page-message"><a href="https://enable-javascript.com/" target="_blank" rel="noopener">Your JavaScript must be enabled.</a></p>
</div>
<div id="loading-reload-container">

View file

@ -22,11 +22,11 @@ body {
color: #ccc;
}
.loading-logo-bright {
.logo {
display: none;
}
.loading-logo-dark {
.logo-inverted {
display: inline-block;
}

View file

@ -23,11 +23,11 @@ body {
color: #dcdccc;
}
.loading-logo-bright {
.logo {
display: none;
}
.loading-logo-dark {
.logo-inverted {
display: inline-block;
}

View file

@ -1,23 +1,18 @@
<form class="container" method="post" action="">
<div class="row">
<div class="col-xs-12">
<h1 class="title">Sign in to The Lounge</h1>
</div>
<div class="col-xs-12">
<label>
Username
<input class="input" name="user" autofocus>
</label>
</div>
<div class="col-xs-12">
<label>
Password
<input class="input" type="password" name="password">
</label>
</div>
<div class="col-xs-12 error" style="display: none;">Authentication failed.</div>
<div class="col-xs-12">
<button type="submit" class="btn">Sign in</button>
</div>
</div>
<img src="img/logo-vertical-transparent-bg.svg" class="logo" alt="The Lounge" width="256" height="170">
<img src="img/logo-vertical-transparent-bg-inverted.svg" class="logo-inverted" alt="The Lounge" width="256" height="170">
<label>
Username
<input class="input" name="user" autofocus>
</label>
<label>
Password
<input class="input" type="password" name="password">
</label>
<div class="error">Authentication failed.</div>
<button type="submit" class="btn">Sign in</button>
</form>