mirror of
https://bitbucket.org/projectswg/cucore.git
synced 2026-01-16 23:04:20 -05:00
index.html overhal to make the login page look good - committing on behalf of tacef
This commit is contained in:
Obique PSWG
139
res/webserver/css/style.css
Normal file
139
res/webserver/css/style.css
Normal file
@@ -0,0 +1,139 @@
|
||||
@charset "utf-8";
|
||||
/* CSS Document */
|
||||
|
||||
body, html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: "Helvetica Neue", Helvetica, sans-serif;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.wrapper{
|
||||
min-height:100%;
|
||||
height:100%;
|
||||
}
|
||||
.logo{
|
||||
background-image:url(../images/pswg_server_management.png);
|
||||
width: 200px;
|
||||
height:210px;
|
||||
margin:0 auto;
|
||||
}
|
||||
.login_container {
|
||||
/* position: fixed;*/
|
||||
width: 340px;
|
||||
height: 490px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin:0 auto;
|
||||
/* margin-top: -140px;
|
||||
margin-left: -170px;*/
|
||||
background: #fff;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
|
||||
-webkit-animation-name: bounceIn;
|
||||
-webkit-animation-fill-mode: both;
|
||||
-webkit-animation-duration: 1s;
|
||||
-webkit-animation-iteration-count: 1;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-name: bounceIn;
|
||||
-moz-animation-fill-mode: both;
|
||||
-moz-animation-duration: 1s;
|
||||
-moz-animation-iteration-count: 1;
|
||||
-moz-animation-timing-function: linear;
|
||||
animation-name: bounceIn;
|
||||
animation-fill-mode: both;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: 1;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 0 auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
label {
|
||||
color: #555;
|
||||
display: inline-block;
|
||||
margin-left: 18px;
|
||||
padding-top: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
input {
|
||||
font-family: "Helvetica Neue", Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=password] {
|
||||
color: #777;
|
||||
padding-left: 10px;
|
||||
margin: 10px;
|
||||
margin-top: 12px;
|
||||
margin-left: 18px;
|
||||
width: 290px;
|
||||
height: 35px;
|
||||
border: 1px solid #c7d0d2;
|
||||
border-radius: 2px;
|
||||
-webkit-transition: all .4s ease;
|
||||
-moz-transition: all .4s ease;
|
||||
transition: all .4s ease;
|
||||
}
|
||||
|
||||
#lower {
|
||||
background: #ecf2f5;
|
||||
width: 100%;
|
||||
height: 63px;
|
||||
margin-top: 20px;
|
||||
box-shadow: inset 0 1px 1px #fff;
|
||||
border-top: 1px solid #ccc;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
margin-top: 16px;
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
background-color: #acd6ef; /*IE fallback*/
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8));
|
||||
background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
|
||||
background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
|
||||
border-radius: 30px;
|
||||
border: 1px solid #66add6;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type=text]:hover,
|
||||
input[type=password]:hover {
|
||||
border: 1px solid #b6bfc0;
|
||||
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8;
|
||||
}
|
||||
|
||||
input[type=text]:focus,
|
||||
input[type=password]:focus {
|
||||
border: 1px solid #a8c9e4;
|
||||
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
|
||||
}
|
||||
|
||||
input[type=submit]:hover {
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8));
|
||||
background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
|
||||
background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
|
||||
}
|
||||
|
||||
input[type=submit]:active {
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8), to(#b6e2ff));
|
||||
background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
|
||||
background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
|
||||
}
|
||||
BIN
res/webserver/images/pswg_server_management.png
Normal file
BIN
res/webserver/images/pswg_server_management.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
@@ -1,31 +1,25 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Game Server Diagnostics</title>
|
||||
<style type="text/css">
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.main_container {
|
||||
width: 300px;
|
||||
height: 75px;
|
||||
background-color: #000000;
|
||||
color: #FFFFFF;
|
||||
margin: auto;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main_container">
|
||||
<form action="#" method="POST">
|
||||
Username: <input type="text" name="username" hint="Username" /><br />
|
||||
Password: <input type="password" name="password" hint="Password" /><br />
|
||||
<input type="submit" value="Login" />
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>ProjectSWG Server Management Interface</title>
|
||||
<link href="css/style.css" rel="stylesheet" type="text/css" />
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
|
||||
<div class="login_container">
|
||||
<div class="logo"></div>
|
||||
<form id="login1" name="form" action="#" method="post">
|
||||
<label for="username">Username:</label><input type="text" name="username" id="username" />
|
||||
<br />
|
||||
<label for="password">Password:</label><input type="password" name="password" id="password" /><br />
|
||||
<div id="lower">
|
||||
<input type="submit" value="Login" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user