login and register form more design

src/Jotunheimr/UserBundle/Resources/public/css/layout.css

@@ -1,12 +1,15 @@
 main {
-    background: #34495e;
     position: fixed;
     width: 100%;
     height: 100%;
 }
 
+main > div {
+    background: rgba(52, 73, 94, 0.9);
+}
+
 main .form {
-    border-top: 2px solid #3498db;
+    /*border-top: 2px solid #3498db;*/
 }
 
 main .checkbox {
@@ -14,7 +17,7 @@ main .checkbox {
 }
 
 .facebook {
-    border-top: 2px solid #3498db;
+    border-bottom: 1px solid #3498db;
     padding: 40px;
     margin: 20px;
 }
@@ -112,12 +115,15 @@ main .checkbox {
 }
 
 .input__field--kozakura {
+    background: transparent;
+    width: 100%;
+    font-size: 1.55em;
+    color: #2F3238;
+    border-bottom: 1px solid #3498db;
     padding: 0.25em 0.5em;
     margin-top: 1.25em;
-    width: 100%;
+    margin-bottom: 0.5em;
-    background: transparent;
+
-    color: #2F3238;
-    font-size: 1.55em;
     opacity: 0;
 }
 

src/Jotunheimr/UserBundle/Resources/public/css/login.css

@@ -1,3 +1,9 @@
+main {
+    background: url("/bundles/jotunheimruser/images/landscape-2.jpeg");
+    background-size: cover;
+    background-position: center center;
+}
+
 main .login {
     position: fixed;
     display: flex;
@@ -8,11 +14,21 @@ main .login {
     flex-direction: column;
 }
 
+main .login .login-container {
+    background: #FFFFFF;
+    display: table;
+    padding: 1em;
+
+    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
+}
+
 main .login h1 {
     display: block;
     font: normal 40px 'Gloria Hallelujah', cursive;
     text-align: center;
-    color: #FFFFFF;
+    color: #3498db;
+    margin-top: 0;
 }
 
 main .login .form .input {
@@ -20,12 +36,16 @@ main .login .form .input {
     margin: 0 auto;
 }
 
+main .login .form .checkbox {
+    color: #3498db;
+}
+
 main .login .form .submit {
-    background: #3498db;
+    background: none;
     display: block;
     font: bold 22px 'Gloria Hallelujah', cursive;
     color: #FFFFFF;
-    border: 0;
+    border: 2px solid #3498db;
     padding: 10px 20px;
     margin: 20px auto 0 auto;
 
@@ -34,8 +54,7 @@ main .login .form .submit {
 }
 
 main .login .form .submit:hover {
-    background: #FFFFFF;
+    background: #3498db;
-    color: #3498db;
 
     -webkit-transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
     transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);

src/Jotunheimr/UserBundle/Resources/public/css/register.css

@@ -1,3 +1,9 @@
+main {
+    background: url("/bundles/jotunheimruser/images/landscape-3.jpeg");
+    background-size: cover;
+    background-position: center center;
+}
+
 main .register {
     position: fixed;
     display: flex;
@@ -21,11 +27,11 @@ main .register .form .input {
 }
 
 main .register .form .submit {
-    background: #3498db;
+    background: none;
     display: block;
     font: bold 22px 'Gloria Hallelujah', cursive;
     color: #FFFFFF;
-    border: 0;
+    border: 2px solid #3498db;
     padding: 10px 20px;
     margin: 20px auto 0 auto;
 
@@ -34,8 +40,7 @@ main .register .form .submit {
 }
 
 main .register .form .submit:hover {
-    background: #FFFFFF;
+    background: #3498db;
-    color: #3498db;
 
     -webkit-transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
     transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);

src/Jotunheimr/UserBundle/Resources/views/Registration/register.html.twig

@@ -4,12 +4,14 @@
 
 {% block fos_user_content %}
     <div class="register">
+        {% include('@JotunheimrUser/Social/facebook.html.twig') %}
+
         <h1>
             Sign up
         </h1>
         <div class="form">
             {{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'class': 'fos_user_registration_register'}}) }}
-            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}"/>
+            {#<input type="hidden" name="_csrf_token" value="{{ csrf_token }}"/>#}
 
             <div class="input input--kozakura">
                 {{ form_widget(form.email, {'attr': {'class': 'input__field input__field--kozakura'}}) }}
@@ -67,8 +69,6 @@
             </div>
             {{ form_end(form) }}
         </div>
-
-        {% include('@JotunheimrUser/Social/facebook.html.twig') %}
     </div>
 {% endblock fos_user_content %}
 

src/Jotunheimr/UserBundle/Resources/views/Security/login.html.twig

@@ -8,6 +8,9 @@
     {% endif %}
 
     <div class="login">
+        <div class="login-container">
+            {#{% include('@JotunheimrUser/Social/facebook.html.twig') %}#}
+
             <h1>
                 Sign in
             </h1>
@@ -18,7 +21,7 @@
 
                     <div class="input input--kozakura">
                         <input type="text" id="username" name="_username" value="{{ last_username }}"
-                           class="input__field input__field--kozakura" autofocus/>
+                               class="input__field input__field--kozakura"/>
                         <label class="input__label input__label--kozakura" for="fos_user_registration_form_email">
                         <span class="input__label-content input__label-content--kozakura"
                               data-content="Username or Email">Username or Email</span>
@@ -54,8 +57,7 @@
                     </div>
                 </form>
             </div>
-
+        </div>
-        {% include('@JotunheimrUser/Social/facebook.html.twig') %}
     </div>
 {% endblock fos_user_content %}