Skip to content

Commit

Permalink
Updating login page. Closes #548
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexsielicki
alexsielicki committed Jan 12, 2016
1 parent 2dfb007 commit 8793a29
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 271 deletions.
1 change: 1 addition & 0 deletions web-server/slycat-login/css/namespaced-bootstrap.min.css
View file

Large diffs are not rendered by default.

210 changes: 33 additions & 177 deletions web-server/slycat-login/css/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,182 +1,38 @@
/* Stylesheet */


/* Imports */

@import url(animate.css);

/* Selections */

::selection {
color: #fff;
text-shadow: none;
background: #444;
}

::-moz-selection {
color: #fff;
text-shadow: none;
background: #444;
}

/* Basics */

html, body {
height: 100%;
body {
background-color: #F2F2F2;
background-image: url('/resources/global/slycat-logo-navbar.png');
background-repeat: no-repeat;
background-position: 50% 15%;
background-size: 50%;
background-position: 50% 100px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
-webkit-font-smoothing: antialiased;

}

#container {
position: fixed;
width: 340px;
height: 280px;
top: 50%;
left: 50%;
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;
}

p a {
font-size: 11px;
color: #aaa;
float: right;
margin-top: -13px;
margin-right: 20px;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
transition: all .4s ease;
}

p a:hover {
color: #555;
}

input {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 12px;
outline: none;
}

input[type=name],
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;
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
transition: all .4s ease;
}

input[type=name]: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=name]: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;
}

#lower {
background: #D7D7D7;
width: 100%;
height: 69px;
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=checkbox] {
margin-left: 20px;
margin-top: 30px;
}

.check {
margin-left: 3px;
font-size: 11px;
color: #444;
text-shadow: 0 1px 0 #fff;
}

input[type=submit] {
float: right;
margin-right: 20px;
margin-top: 20px;
width: 80px;
height: 30px;
font-size: 14px;
font-weight: bold;
color: #800;
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 #444;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
cursor: pointer;
}

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%);
}



.form-signin {
max-width: 330px;
padding: 15px;
margin: 300px auto 0px auto;
}
.form-signin .form-signin-heading
{
margin-bottom: 10px;
}
.form-signin .form-control {
position: relative;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="text"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 20px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
105 changes: 11 additions & 94 deletions web-server/slycat-login/slycat-login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,105 +6,22 @@
<title>Sign in</title>
<script src="js/require.js" data-main="js/app"></script>
<!-- CSS -->

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/styles.css">
<style type="text/css" media="screen">

body {
height: 100%;
background-color: #F2F2F2;
background-image: url('/resources/global/slycat-logo-navbar.png');
background-repeat: no-repeat;
background-position: 50% 15%;
background-size: 50%;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.not-found {
font-size: 74px;
font-weight: bold;
text-align: center;
margin-top: 28%;
}

.increased-security {
text-align: center;
margin-bottom: 40px;
font-size: 24px;
}
.increased-security a {
color: black;
text-decoration: none;
cursor: default;
}

.return-home {
text-align: center;
margin-top: 1%;
}

.return-home a {
font-weight: bold;
color: #800;
}
</style>
<link rel="stylesheet" href="css/namespaced-bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>

<body>
<!-- Begin Page Content -->

<div id="container">

<form>

<label for="name">Username:</label>

<input type="name" id="username">

<label for="username">Password:</label>

<p>

<input type="password" id="password">

<div id="lower">

<input type="submit" id="go" value="Login">

</div>

</form>

</div>
<div class="container bootstrap-styles">
<form class="form-signin">

<label for="username" class="sr-only">Username</label>
<input id="username" class="form-control" placeholder="Username" required="" autofocus="" type="text">

<!-- End Page Content -->
<!--<div class="bootstrap-styles" style="-webkit-flex:1;flex:1;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;padding:20%;">-->
<!--<div class="form-group">-->
<label for="password" class="sr-only">Password</label>
<input id="password" class="form-control" placeholder="Password" required="" type="password">

<!--<h1 class="title">Login</h1>-->
<!--<form>-->
<!--<div class="input-container">-->
<!--<input type="text" id="Username" required="required"/>-->
<!--<label for="Username" class="col-sm-2 control-label" >Username</label>-->
<!--<div class="bar"></div>-->
<!--</div>-->
<!--<div class="input-container">-->
<!--<input type="password" id="Password" required="required"/>-->
<!--<label for="Password" class="col-sm-2 control-label">Password</label>-->
<!--<div class="bar"></div>-->
<!--</div>-->
<!--</form>-->
<!--<div class="button-container">-->
<!--<button class="btn btn-default" id="go">GO</button>-->
<!--</div>-->
<!--&lt;!&ndash;<div class="button-container">&ndash;&gt;-->
<!--&lt;!&ndash;<button class="btn btn-default" id="logout">LOGOUT</button>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<button class="btn btn-lg btn-primary btn-block" id="go" type="submit">Sign In</button>

<!--</div>-->
<!--</div>-->
</form>
</div>
</body>
</html>

0 comments on commit 8793a29

Please sign in to comment.