diff --git a/bin/web/assets/css/global.css b/bin/web/assets/css/global.css
index de6b97e4..5a9c8375 100644
--- a/bin/web/assets/css/global.css
+++ b/bin/web/assets/css/global.css
@@ -1,18 +1,20 @@
-body{
- font-family:Verdana;
- font-size:10pt;
- line-height:14pt;
- height:100%;
- background-image:url(../../assets/img/background.png);
- background-color:#282828;
+html {
+ min-height: 100%;
}
-div.contentContainer{
+body {
+ font-family: Meiryo, Verdana, sans-serif;
+ font-size: 12px;
+ line-height: 14px;
+ height: 100%;
+}
+
+.contentContainer{
width:50%;
float:left;
}
-div.info{
+.info{
width:320px;
height:100%;
margin-left:auto;
@@ -22,7 +24,7 @@ div.info{
background-color:lightgrey;
}
-div.infoFooter{
+.infoFooter{
width:400px;
margin-left:auto;
margin-right:auto;
diff --git a/bin/web/assets/css/styles.css b/bin/web/assets/css/styles.css
index 0d03eddc..2dbfe51a 100644
--- a/bin/web/assets/css/styles.css
+++ b/bin/web/assets/css/styles.css
@@ -1,5 +1,141 @@
-div#TopDiv{
- padding:10px;
+.s-logo {
+ padding: 25px 65px 15px 65px;
+}
+
+.s-logo > img {
+ width: 100%;
+}
+
+/*
+ Consider using vh?
+*/
+.s-left-half {
+ left: 0;
+ background: #003d65 ; /* Old browsers */
+ background: -webkit-linear-gradient(#053250 0%, #13143F 100%);
+ background: -o-linear-gradient(#053250 0%, #13143F 100%);
+ background: linear-gradient(#053250 0%, #13143F 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#053250', endColorstr='#13143F',GradientType=0 );
+ box-shadow: inset -4px 0px 4px -3px #1a1a1ab3;
+ color: white;
+}
+
+.s-right-half {
+ right: 0;
+ background: #232326;
+ border-left: 6px solid #1a1a20;
+ padding: 0;
+}
+
+.s-full-split {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ float: left;
+ z-index: 10;
+}
+
+.s-login-box {
+ background: #1a1a20;
+ position: relative;
+ z-index: 15;
+ padding: 0;
+ overflow: hidden;
+ width: 100%;
+ float: none;
+}
+
+.s-login-box-form {
+ padding: 0 35px 8px 25px;
+ overflow: hidden;
+}
+
+.s-login-input-wrapper {
+ color: white;
+ display: block;
+ width: 100%;
+ margin-bottom: 15px;
+ font-weight: normal;
+ font-size: 14px;
+ color: #fff;
+}
+
+.s-login-input-wrapper > input {
+ background: #444;
+ border: 0;
+ border-bottom: 3px solid #595959;
+ padding: 7px 0 7px 7px;
+ width: 100%;
+ margin-top: 8px;
+ font-size: 13px;
+ color: white;
+}
+
+.s-login-input-wrapper > input:focus {
+ border-color: #1868C2;
+}
+
+.s-login-input-wrapper > input:active {
+ border-color: #1868C2;
+}
+
+.s-login-input-wrapper > input:hover {
+ border-color: #1868C2;
+}
+
+.btn.btn-default {
+ border: 0;
+ color: white;
+ border-radius: 0;
+ font-weight: normal;
+ text-shadow: none;
+ box-shadow: none;
+ border-color: #1868C2;
+ color: white !important;
+}
+
+
+.s-login-btn {
+ width: 150px;
+ background: #0e6bc9;
+ right: -7px; /* ugh. refer to padding-left on input above - more bounding box issues... */
+ position: relative;
+}
+
+.s-login-btn:hover {
+ width: 150px;
+ background: #3593f2;
+}
+
+.s-acc-btn {
+ width: 100%;
+ background: #3B3B3B;
+ padding: 5px 0;
+ margin-top: 4px;
+}
+
+.s-acc-btn:hover {
+ background: #6b6b6b;
+}
+
+.s-error-text {
+ color: #ff3333;
+ margin: 3px;
+}
+
+.s-gears {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ width: 35%;
+ max-width: 350px;
+ overflow: hidden;
+}
+
+.s-gears > img {
+ width: 100%;
+ position: relative;
+ bottom: -40px;
}
img{
@@ -12,8 +148,39 @@ h2.text-center{
color:#fff;
}
-h1.text-center{
- color:#FFF;
+.s-login-call{
+ color: #fff;
+ margin-top: 15px;
+ font-size: 20px;
+}
+
+.s-link-badge-wrapper {
+ clear: both;
+
+}
+
+.s-link-badge {
+ background: #fff;
+ line-height: 48px;
+ text-indent: 55px;
+ display: inline-block;
+ padding: 0;
+ font-size: 17px;
+ margin-top: 25px;
+ color: white;
+ border-bottom: 3px solid #443C6B;
+ margin-bottom: 15px;
+}
+
+.s-link-badge-discord {
+ background: #7082E1 url("../img/fa-discord-icon.png") 10px 7px no-repeat;
+ margin-right: 60px; /* Ideally we'd just use pull-right with the last col-xs-5 but IE7 bounding box render??? */
+}
+
+.s-link-badge-github {
+ background: #fff url("../img/github-icon.png") 10px 7px no-repeat;
+ color: #333;
+ border-bottom-color: #474747;
}
div.login-card{
@@ -30,11 +197,7 @@ input.input-sm{
margin-right:auto;
}
-div#Conttwo.container{
- display:block;
- width:300px;
- background-color:rgba(17, 17, 17, 0.77);
-}
+
div#Split{
padding:2px;
diff --git a/bin/web/assets/img/fa-discord-icon.png b/bin/web/assets/img/fa-discord-icon.png
new file mode 100644
index 00000000..0c3aede3
Binary files /dev/null and b/bin/web/assets/img/fa-discord-icon.png differ
diff --git a/bin/web/assets/img/github-icon.png b/bin/web/assets/img/github-icon.png
new file mode 100644
index 00000000..28716639
Binary files /dev/null and b/bin/web/assets/img/github-icon.png differ
diff --git a/bin/web/assets/img/graffletopia-gears.png b/bin/web/assets/img/graffletopia-gears.png
new file mode 100644
index 00000000..23d5a5ae
Binary files /dev/null and b/bin/web/assets/img/graffletopia-gears.png differ
diff --git a/bin/web/assets/img/sapphire_logo.png b/bin/web/assets/img/sapphire_logo.png
index a7970d0c..56827cd8 100644
Binary files a/bin/web/assets/img/sapphire_logo.png and b/bin/web/assets/img/sapphire_logo.png differ
diff --git a/bin/web/assets/img/sapphire_logo_resize.png b/bin/web/assets/img/sapphire_logo_resize.png
new file mode 100644
index 00000000..f0cd9a2d
Binary files /dev/null and b/bin/web/assets/img/sapphire_logo_resize.png differ
diff --git a/bin/web/createUser.html b/bin/web/createUser.html
index 5d73e5d2..18cb14f2 100644
--- a/bin/web/createUser.html
+++ b/bin/web/createUser.html
@@ -4,7 +4,7 @@
- Sapphire Create Account
+ Sapphire - Account Creation
@@ -23,7 +23,7 @@
var parsed = JSON.parse(response);
window.external.Boot(parsed.sId, parsed.lobbyHost, parsed.frontierHost);
}catch(err){
- document.getElementById("Error").innerHTML = "Create User failed.";
+ document.getElementById("Error").innerHTML = "User creation failed.";
}
}
}
@@ -46,25 +46,55 @@
-
-
-
-
-
Create Account
-
Username:
-
|
-
-
Password:
-
|
-
-
-
-
-
+
+
Github stuff here soon!
+
+
+
+
+
+
+
+
+
