diff --git a/include/staff/login.tpl.php b/include/staff/login.tpl.php
index d2b94d5516e30ae4e447d328f72f468455ca3b17..4f2364e1ae9fa21a0e79135ae5580fcaffdbcb63 100644
--- a/include/staff/login.tpl.php
+++ b/include/staff/login.tpl.php
@@ -1,26 +1,27 @@
<?php defined('OSTSCPINC') or die('Invalid path'); ?>
+<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
-<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-<title>osTicket:: SCP Login</title>
-<link rel="stylesheet" href="css/login.css" type="text/css" />
-<meta name="robots" content="noindex" />
-<meta http-equiv="cache-control" content="no-cache" />
-<meta http-equiv="pragma" content="no-cache" />
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>osTicket:: SCP Login</title>
+ <link rel="stylesheet" href="css/login.css" type="text/css" />
+ <meta name="robots" content="noindex" />
+ <meta http-equiv="cache-control" content="no-cache" />
+ <meta http-equiv="pragma" content="no-cache" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body id="loginBody">
<div id="loginBox">
- <h1 id="logo"><a href="index.php">osTicket Staff Control Panel</a></h1>
- <h1><?php echo Format::htmlchars($msg); ?></h1>
- <br />
- <form action="login.php" method="post">
- <input type="hidden" name=do value="scplogin" />
- <table border=0 align="center">
- <tr><td width=100px align="right"><b>Username</b>:</td><td><input type="text" name="username" id="name" value="" /></td></tr>
- <tr><td align="right"><b>Password</b>:</td><td><input type="password" name="passwd" id="pass" /></td></tr>
- <tr><td> </td><td> <input class="submit" type="submit" name="submit" value="Login" /></td></tr>
- </table>
-</form>
+ <h1 id="logo"><a href="index.php">osTicket Staff Control Panel</a></h1>
+ <h3><?php echo Format::htmlchars($msg); ?></h3>
+ <form action="login.php" method="post">
+ <input type="hidden" name="d"o value="scplogin">
+ <fieldset>
+ <input type="text" name="username" id="name" value="" placeholder="username" autocorrect="off" autocapitalize="off">
+ <input type="password" name="passwd" id="pass" placeholder="password" autocorrect="off" autocapitalize="off">
+ </fieldset>
+ <input class="submit" type="submit" name="submit" value="Log In">
+ </form>
</div>
<div id="copyRights">Copyright © <a href='http://www.osticket.com' target="_blank">osTicket.com</a></div>
</body>
diff --git a/scp/css/login.css b/scp/css/login.css
index 8516ea0e06cdf7f6a755a1cf31504da350f1df36..a15d4d12e5b0aec8970d802e0095ad53be00620f 100644
--- a/scp/css/login.css
+++ b/scp/css/login.css
@@ -1,88 +1,138 @@
+* {
+ box-sizing: border-box;
+ position: relative;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+}
+
+*:focus {
+ outline-color: rgb(207,16,118);
+ outline-style: auto;
+ outline-width: 5px;
+ z-index:1000;
+}
+
+:-webkit-input-placeholder {
+ color:#888;
+ font-style:italic;
+}
+
+:-moz-placeholder {
+ color:#888;
+ font-style:italic;
+}
+
+html {
+ height:100%;
+ font-size: 100%;
+ overflow-y: scroll;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+}
+
body {
- background:url(/images/bg.gif) #fff;
- font-family:arial, helvetica, sans-serif;
- font-size:10pt;
- color:#000;
-}
-body#loginBody {
- text-align: center;
- margin: 100px;
-}
-h1#logo {
- float: none;
- width: 190px;
- height: 60px;
- padding:10px 0 20px 0;
- background: url(../images/logo-support.gif) center center no-repeat #fff;
- margin: 0 auto 0 auto;
-}
-h1#logo a, h1#logo a:link, h1#logo a:visited, h1#logo a:hover {
- display: block;
- width: 190px;
- height: 60px;
- text-indent: -999em;
- text-decoration: none;
- background: none;
- margin:0 auto 0 auto;
-}
-
-input:focus, textarea:focus {
- color: #F70;
- background: #FEA;
- -moz-outline-style: none;
-}
-
-input[type="hidden"] { border: 0; }
-
-.submit {
- font-family: Arial, Helvetica, sans-serif;
- margin:10px auto 10px auto;
- text-shadow: #333 -1px -1px 0px;
- background-color: #DB8606;
- color: #FFF;
- border:1px solid #666;
- font-weight:bold;
- width:auto;
+ -webkit-font-smoothing:antialiased;
+ background:url(../images/login-background.jpg) top left repeat-x #fff;
+ font-size: 16px;
+ font-smoothing:antialiased;
+ height:100%;
+ line-height: 1.5em;
+ margin: 0;
+ text-align: center;
}
-input[type="submit"]:focus {
- border: 1px solid #E50;
- border-right-color: #FBA;
- border-bottom-color: #FBA;
- background: #F70;
- color: #FEA;
+body, input {
+ font-family: helvetica, arial, sans-serif;
+ font-size: 100%/1.5;
+ color: #000;
}
-h1 { font-size: 0.9em; color: #F70; margin: 0; text-align: center;}
+input[type=reset], input[type=submit], input[type=button] {
+ display: inline-block;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ -moz-tap-highlight-color: rgba(0, 0, 0, 0);
+ -o-tap-highlight-color: rgba(0, 0, 0, 0);
+ tap-highlight-color: rgba(0, 0, 0, 0);
+}
+#loginBox {
+ border:1px solid #2a67ac;
+ border-right:2px solid #2a67ac;
+ border-bottom:3px solid #2a67ac;
+ background:#fff;
+ width:400px;
+ margin:10% auto 0 auto;
+ padding:1em;
+ text-align:center;
+}
-div#loginBox {
- width: 300px;
- padding: 10px 20px 5px 20px;
- margin: 0 auto 0 auto;
- background: #fff;
- text-align: center;
- border:5px solid #ddd;
+h1 {
+ margin:0;
}
-div#copyRights {
- font-size: 0.8em;
- text-align: center;
- color:#666;
+
+#logo a {
+ display:block;
+ width:180px;
+ height:72px;
+ text-decoration:none;
+ text-indent:-9999px;
+ background:url(../images/login-logo.png);
+ margin:0 auto 1em auto;
}
-#copyRights a, #copyRights a:link, #copyRights a:visited, #copyRights a:hover {
+h3 {
+ margin:1em 0;
+ text-align:center;
+ font-size:0.8em;
+ font-weight:normal;
+ color:#d00;
+}
- text-decoration: none;
- background: none;
- color:#666;
+form {
+ width:220px;
+ margin:0 auto;
+ overflow:hidden;
}
+fieldset {
+ border:none;
+ margin:0;
+ padding:0;
+}
-input {
- width: 175px;
- margin-left: 5px
+fieldset input {
+ display:block;
+ width:100%;
+ margin-bottom:1em;
+ border:1px solid #ccc;
+ background:#fff;
+ padding:2px;
}
-input[type="submit"] { width: auto; margin:10px auto 10px auto; }
+input.submit {
+ display:inline-block;
+ float:right;
+ margin:0;
+ height:24px;
+ line-height:24px;
+ font-weight:bold;
+ border:1px solid #666666;
+ padding:0 10px;
+ background: url('../images/grey_btn_bg.png?1312910883') top left repeat-x;
+ color: #333;
+}
-table,form { margin-top:2px; padding: 0; }
+input.submit:hover, input.submit:active {
+ background-position:bottom left;
+}
+
+#copyRights {
+ font-size:0.7em;
+ color:#888;
+ padding:1em;
+ text-align:center;
+}
+
+#copyRights a {
+ color:#888;
+}
diff --git a/scp/images/grey_btn_bg.png b/scp/images/grey_btn_bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..3b7fca9d3c41fcefd6ca49d6aa98ea3fc3fe1a41
Binary files /dev/null and b/scp/images/grey_btn_bg.png differ
diff --git a/scp/images/login-background.jpg b/scp/images/login-background.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..eebfa40b8f24cf1a088e6d4eb1a6b279e958ad7c
Binary files /dev/null and b/scp/images/login-background.jpg differ
diff --git a/scp/images/login-logo.png b/scp/images/login-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..6526ebe0a15f393382e0339b38cef8422d7ff471
Binary files /dev/null and b/scp/images/login-logo.png differ