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,54 +8,56 @@
     {% endif %}
 
     <div class="login">
-        <h1>
+        <div class="login-container">
-            Sign in
+            {#{% include('@JotunheimrUser/Social/facebook.html.twig') %}#}
-        </h1>
 
-        <div class="form">
+            <h1>
-            <form action="{{ path("fos_user_security_check") }}" method="post">
+                Sign in
-                <input type="hidden" name="_csrf_token" value="{{ csrf_token }}"/>
+            </h1>
 
-                <div class="input input--kozakura">
+            <div class="form">
-                    <input type="text" id="username" name="_username" value="{{ last_username }}"
+                <form action="{{ path("fos_user_security_check") }}" method="post">
-                           class="input__field input__field--kozakura" autofocus/>
+                    <input type="hidden" name="_csrf_token" value="{{ csrf_token }}"/>
-                    <label class="input__label input__label--kozakura" for="fos_user_registration_form_email">
+
+                    <div class="input input--kozakura">
+                        <input type="text" id="username" name="_username" value="{{ last_username }}"
+                               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>
-                    </label>
+                        </label>
-                    <svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60"
+                        <svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60"
-                         preserveAspectRatio="none">
+                             preserveAspectRatio="none">
-                        <path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
+                            <path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
-                    </svg>
+                        </svg>
-                </div>
+                    </div>
 
-                <div class="input input--kozakura">
+                    <div class="input input--kozakura">
-                    <input type="password" id="password" name="_password"
+                        <input type="password" id="password" name="_password"
-                           class="input__field input__field--kozakura"/>
+                               class="input__field input__field--kozakura"/>
-                    <label class="input__label input__label--kozakura" for="fos_user_registration_form_email">
+                        <label class="input__label input__label--kozakura" for="fos_user_registration_form_email">
-                        <span class="input__label-content input__label-content--kozakura" data-content="Password">Password</span>
+                            <span class="input__label-content input__label-content--kozakura" data-content="Password">Password</span>
-                    </label>
+                        </label>
-                    <svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60"
+                        <svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60"
-                         preserveAspectRatio="none">
+                             preserveAspectRatio="none">
-                        <path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
+                            <path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
-                    </svg>
+                        </svg>
-                </div>
+                    </div>
 
-                <div class="checkbox text-center">
+                    <div class="checkbox text-center">
-                    <label for="remember_me">
+                        <label for="remember_me">
-                        <input type="checkbox" id="remember_me" name="_remember_me" value="on"/>
+                            <input type="checkbox" id="remember_me" name="_remember_me" value="on"/>
-                        {{ 'security.login.remember_me'|trans }}
+                            {{ 'security.login.remember_me'|trans }}
-                    </label>
+                        </label>
-                </div>
+                    </div>
 
-                <div class="input-submit">
+                    <div class="input-submit">
-                    <input class="submit" type="submit" id="_submit" name="_submit"
+                        <input class="submit" type="submit" id="_submit" name="_submit"
-                           value="{{ 'security.login.submit'|trans }}"/>
+                               value="{{ 'security.login.submit'|trans }}"/>
-                </div>
+                    </div>
-            </form>
+                </form>
+            </div>
         </div>
-
-        {% include('@JotunheimrUser/Social/facebook.html.twig') %}
     </div>
 {% endblock fos_user_content %}