WIP: Login page styles

lib/views/login.html

@@ -25,9 +25,10 @@
 <div class="main container-fluid">
 
   <div class="row">
-    <div class="login-header p-b-30 col-sm-offset-4 col-sm-4 text-center">
+    <div class="login-header col-sm-offset-4 col-sm-4 text-center">
+      <div class="logo">{% include 'widget/logo.html' %}</div>
       <h1>
-        {{ config.crowi['app:title'] || 'GROWI' }}<br>
+        {{ config.crowi['app:title'] || 'GROWI' }}
       </h1>
     </div>
 
@@ -136,7 +137,10 @@
         </div>
 
         {% if config.crowi['security:registrationMode'] != 'Closed' %}
-        <p class="bottom-text"><a href="#register" id="register"><i class="ti-check-box"></i> {{ t('Sign up is here') }}</a></p>
+        <p class="text-right text-success">
+          <a href="#register" id="register">
+            <i class="ti-check-box"></i> {{ t('Sign up is here') }}
+          </a></p>
         {% endif %}
       </div>
       {% if config.crowi['security:registrationMode'] != 'Closed' %}
@@ -241,7 +245,11 @@
           {% endif %}
         </div>
 
-        <p class="bottom-text"><a href="#login" id="login"><i class="fa fa-sign-out"></i> {{ t('Sign in is here') }}</a></p>
+        <p class="text-right">
+          <a href="#login" id="login">
+            <i class="icon-fw icon-login"></i>{{ t('Sign in is here') }}
+          </a>
+        </p>
       </div>
       {% endif %} {# if registrationMode == Closed #}
 

resource/styles/scss/theme/_login.scss

@@ -21,6 +21,19 @@
       .main {
         width: 100vw;
 
+        > .row {
+          margin-right: 20px;
+          margin-left: 20px;
+        }
+
+        .login-header {
+          padding: 30px;
+
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+
         // flip animation
         .login-dialog.flipper {
           transition: min-height 0.2s;
@@ -54,8 +67,24 @@
     }
   }
 
+  a {
+    color: $gray;
+  }
+
   .login-header {
     background-color: rgba($white, 0.5);
+    .logo {
+      width: 70px;
+      .group1, .group2 {
+        fill: rgba(black, 0.5);
+      }
+
+    }
+    h1 {
+      color: rgba(black, 0.5);
+      font-size: 22px;
+      line-height: 1em;
+    }
   }
   .login-dialog {
     background-color: rgba($white, 0.5);
@@ -110,4 +139,8 @@
       background-color: #3f7263;
     }
   }
+
+  hr {
+    border-color: #ccc;
+  }
 }