💄 Style the login page

This commit is contained in:
Andreas Schneider 2020-10-25 16:36:51 +01:00
parent 180ee02582
commit 0825ac9f8f
2 changed files with 70 additions and 8 deletions

View File

@ -8,6 +8,19 @@
font-weight: bold; font-weight: bold;
} }
input[type="submit"],
input[type="button"] {
padding: .5em;
border-radius: .5em;
border: 0;
background-color: #c4e1ff;
}
input[type="submit"] {
background-color: #a9ca97;
font-weight: bold;
}
#content { #content {
float: right; float: right;
width: 100%; width: 100%;
@ -26,6 +39,7 @@
} }
body { body {
font-family: sans-serif;
margin-left: 200px margin-left: 200px
} }
</style> </style>

View File

@ -3,22 +3,70 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>ShareDAV Login</title> <title>ShareDAV Login</title>
<style>
* {
font-family: sans-serif;
}
#login {
left: 50%;
top: 50%;
position: absolute;
transform: translate(-50%, -50%);
border: solid lightgrey;
padding: 1em;
border-radius: .5em;
}
#login label {
display: block;
margin-bottom: 1em;
}
#message {
margin-bottom: 1em;
font-size: small;
color: darkgray;
}
#controls {
text-align: left;
}
input[type="submit"],
input[type="button"] {
padding: .5em;
border-radius: .5em;
border: 0;
background-color: #c4e1ff;
}
input[type="submit"] {
background-color: #a9ca97;
font-weight: bold;
}
</style>
</head> </head>
<body> <body>
<div> <div id="login">
<form method="post"> <form method="post">
<div>
<label> <label>
Username: <input name="username"/> Username: <input name="username"/>
</label> </label>
<label> <label>
Password: <input type="password" name="password"> Password: <input type="password" name="password">
</label> </label>
<div> </div>
Beware! You need to have cookies enabled for the login to work.<br/> <div id="message">
The cookie will be used solely for keeping the session alive. Beware! You need to have cookies enabled for the login to work.<br/>
</div> The cookie will be used solely for keeping the session alive.
</div>
<div id="controls">
<input type="submit" value="Login"/> <input type="submit" value="Login"/>
</form> </div>
</div> </form>
</div>
</body> </body>
</html> </html>