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; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
width: 100%;
} }
#loading-reload-container { #loading-reload-container {
flex-grow: 0; flex-grow: 0;
} }
.loading-logo-dark { .logo-inverted {
display: none; display: none; /* In dark themes, inverted logo must be used instead */
} }
#sign-in label { #sign-in label {
display: block; display: block;
margin-top: 10px; margin-top: 10px;
width: 100%;
} }
#sign-in .btn { #sign-in .btn {
@ -1574,7 +1576,9 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
#sign-in .error { #sign-in .error {
color: #e74c3c; color: #e74c3c;
display: none; /* This message gets displayed on error only */
margin-top: 1em; margin-top: 1em;
width: 100%;
} }
#connect label { #connect label {
@ -2332,6 +2336,10 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
margin: 10px 0 !important; margin: 10px 0 !important;
} }
#sign-in .btn {
width: 100%;
}
#connect .tls { #connect .tls {
margin: 20px 0; 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"> <article id="windows">
<div id="loading" class="window active"> <div id="loading" class="window active">
<div id="loading-status-container"> <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-bg.svg" class="logo" 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-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> <p id="loading-page-message"><a href="https://enable-javascript.com/" target="_blank" rel="noopener">Your JavaScript must be enabled.</a></p>
</div> </div>
<div id="loading-reload-container"> <div id="loading-reload-container">

View file

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

View file

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

View file

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