WIP: Login page styles

lib/views/login.html

@@ -32,7 +32,7 @@
       </h1>
     </div>
 
-    <div class="login-dialog col-sm-offset-4 col-sm-4 flipper {% if req.query.register or req.body.registerForm or isRegistering or googleId %}to-flip{% endif %}" id="login-dialog">
+    <div class="login-dialog p-b-10 col-sm-offset-4 col-sm-4 flipper {% if req.query.register or req.body.registerForm or isRegistering or googleId %}to-flip{% endif %}" id="login-dialog">
 
       <div class="front">
         <div id="login-form-errors">
@@ -113,7 +113,7 @@
             <input type="password" class="form-control" placeholder="Password" name="loginForm[password]">
           </div>
 
-          <div class="input-group m-t-30 d-flex justify-content-center">
+          <div class="input-group m-t-30 m-b-20 d-flex justify-content-center">
             <input type="hidden" name="_csrf" value="{{ csrf() }}">
             <button type="submit" class="fcbtn btn btn-danger btn-1b btn-login">
               <span class="btn-label"><i class="icon-login"></i></span>
@@ -137,10 +137,9 @@
         </div>
 
         {% if config.crowi['security:registrationMode'] != 'Closed' %}
-        <p class="text-right text-success">
-          <a href="#register" id="register">
-            <i class="ti-check-box"></i> {{ t('Sign up is here') }}
-          </a></p>
+        <a href="#register" id="register" class="pull-right link-switch">
+          <i class="ti-check-box"></i> {{ t('Sign up is here') }}
+        </a>
         {% endif %}
       </div>
       {% if config.crowi['security:registrationMode'] != 'Closed' %}
@@ -223,7 +222,7 @@
           {% endif  %}
           <input type="hidden" name="_csrf" value="{{ csrf() }}">
 
-          <div class="input-group m-t-30 d-flex justify-content-center">
+          <div class="input-group m-t-30 m-b-20 d-flex justify-content-center">
             <button type="submit" class="fcbtn btn btn-success btn-1b btn-register">
               <span class="btn-label"><i class="icon-user-follow"></i></span>
               {{ t('Sign up') }}
@@ -245,15 +244,18 @@
           {% endif %}
         </div>
 
-        <p class="text-right">
-          <a href="#login" id="login">
-            <i class="icon-fw icon-login"></i>{{ t('Sign in is here') }}
-          </a>
-        </p>
+        <a href="#login" id="login" class="pull-right link-switch">
+          <i class="icon-fw icon-login"></i>{{ t('Sign in is here') }}
+        </a>
       </div>
       {% endif %} {# if registrationMode == Closed #}
 
+      <a href="https://growi.org" class="link-growi-org">
+        <span class="growi">GROWI</span>.<span class="org">ORG
+      </a>
+
     </div>
+
   </div>
 
 </div>

resource/styles/scss/theme/_login.scss

@@ -1,4 +1,6 @@
 .login-page {
+  $dark-gray: darken(white, 30%);
+
   // background color
   background:
     linear-gradient(45deg, darken($inverse, 30%)  0%, hsla(340, 100%, 55%, 0) 70%),
@@ -26,19 +28,34 @@
           margin-left: 20px;
         }
 
+        @media(min-width: 480px) {
+          .col-sm-offset-4 {
+            margin-left: calc(50% - 150px);
+          }
+          .col-sm-4 {
+            width: 300px;
+          }
+        }
+
         .login-header {
-          padding: 30px;
+          padding: 30px 30px 10px;
 
           display: flex;
           flex-direction: column;
           align-items: center;
         }
 
+        .link-growi-org {
+          position: absolute;
+          bottom: 9px;
+        }
+
         // flip animation
         .login-dialog.flipper {
           transition: min-height 0.2s;
+
           &.to-flip {
-            min-height: 335px;
+            min-height: 313px;
           }
 
           .front, .back {
@@ -63,13 +80,9 @@
             transform: rotateY(0deg);
           }
         }
-      }
-    }
-  }
-
-  a {
-    color: $gray;
-  }
+      }  // .main
+    }  // #page-wrapper
+  } // #wrapper
 
   .login-header {
     background-color: rgba($white, 0.5);
@@ -96,7 +109,7 @@
     .input-group-addon {
       border: none;
       border-radius: 0;
-      color: white;
+      color: $dark-gray;
       background-color: rgba(black, 0.4);
     }
     .form-control {
@@ -104,7 +117,7 @@
       color: white;
       background-color: rgba(lighten(black, 10%), 0.4);
       &::placeholder {
-        color: rgba($gray-light, 0.6);
+        color: $dark-gray;
       }
     }
   }
@@ -141,6 +154,30 @@
   }
 
   hr {
+    margin: 10px 0;
     border-color: #ccc;
   }
+
+  // footer link text
+  .link-growi-org {
+    color: rgba(black, 0.2);
+    font-weight: bold;
+    font-size: smaller;
+
+    .growi, .org {
+      transition: color 0.8s;
+    }
+
+    &:hover, &.focus {
+      .growi {
+        color: darken($growi-green, 20%);
+      }
+      .org {
+        color: darken($growi-blue, 20%);
+      }
+    }
+  }
+  .link-switch {
+    color: $gray;
+  }
 }