adjust logo color, layout

src/client/styles/scss/_login.scss

@@ -5,6 +5,7 @@
   background: linear-gradient(45deg, darken($inverse, 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
     linear-gradient(135deg, $growi-green 10%, hsla(225, 95%, 50%, 0) 70%), linear-gradient(225deg, $growi-blue 10%, hsla(140, 90%, 50%, 0) 80%),
     linear-gradient(315deg, darken($inverse, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
+
   #page-wrapper {
     background: none;
   }
@@ -21,7 +22,7 @@
       .main {
         width: 100vw;
 
-        > .row {
+        >.row {
           margin-right: 20px;
           margin-left: 20px;
         }
@@ -47,25 +48,32 @@
             }
           }
         }
-      } // .main
-    } // #page-wrapper
-  } // #wrapper
+      }
+
+      // .main
+    }
+
+    // #page-wrapper
+  }
+
+  // #wrapper
 
   // styles
   .login-header {
     background-color: rgba(white, 0.5);
+
     .logo {
-      .group1,
-      .group2 {
-        fill: rgba(black, 0.5);
-      }
+      background-color: rgba(black, 0);
+      fill: rgba(black, 0.5);
     }
+
     h1 {
       font-size: 22px;
       line-height: 1em;
       color: rgba(black, 0.5);
     }
   }
+
   .login-dialog {
     background-color: rgba(white, 0.5);
   }
@@ -73,21 +81,24 @@
   .input-group {
     margin-bottom: 10px;
 
-    .input-group-addon {
+    .input-group-text {
       color: $gray-800-for-login;
       text-align: center;
       background-color: rgba(black, 0.4);
       border: none;
       border-radius: 0;
     }
+
     .form-control {
       color: white;
       background-color: rgba(lighten(black, 10%), 0.4);
+
       &::placeholder {
         color: $gray-800-for-login;
       }
     }
   }
+
   .input-group:not(.has-error) {
     .form-control {
       border: transparent;
@@ -97,10 +108,12 @@
   .external-auth {
     form {
       flex: 1;
+
       @media (min-width: 350px) {
         flex: 0.49;
       }
     }
+
     .spacer {
       height: 10px;
     }
@@ -108,6 +121,7 @@
 
   .collapse-external-auth {
     overflow: hidden;
+
     &:not(.in) {
       height: 0;
       padding: 0 !important;
@@ -127,72 +141,90 @@
       padding: 9px 15px;
       margin: -8px 20px -8px -20px;
     }
+
     &:focus {
       border: none;
     }
   }
+
   .btn-login-oauth {
     flex: 1;
+
     .btn-label-text {
       flex: 1;
     }
   }
+
   .btn-login.fcbtn {
     .btn-label {
       background-color: rgba($danger, 0.4);
     }
+
     &:after {
       background-color: #7e4153;
     }
   }
+
   .btn-login-oauth.fcbtn#google {
     .btn-label {
       background: rgba(#f13d25, 0.4);
     }
+
     &:after {
       background-color: #555;
     }
   }
+
   .btn-login-oauth.fcbtn#github {
     .btn-label {
       background-color: rgba(#24292e, 0.4);
     }
+
     &:after {
       background-color: #555;
     }
   }
+
   .btn-login-oauth.fcbtn#facebook {
     .btn-label {
       background-color: rgba(#29487d, 0.4);
     }
+
     &:after {
       background-color: #555;
     }
   }
+
   .btn-login-oauth.fcbtn#twitter {
     .btn-label {
       background-color: rgba(#1da1f2, 0.4);
     }
+
     &:after {
       background-color: #555;
     }
   }
+
   .btn-login-oauth.fcbtn#saml {
     .btn-label {
       background-color: rgba(#55a79a, 0.4);
     }
+
     &:after {
       background-color: #555;
     }
   }
+
   .btn-register.fcbtn {
     .btn-label {
       background-color: rgba($success, 0.4);
     }
+
     .btn-label-text {
       display: inline-block;
       min-width: 45px;
     }
+
     &:after {
       background-color: #3f7263;
     }
@@ -218,16 +250,20 @@
     &:hover,
     &.focus {
       color: black;
+
       .growi {
         color: darken($growi-green, 20%);
       }
+
       .org {
         color: darken($growi-blue, 15%);
       }
     }
   }
+
   .link-switch {
     color: $gray-200;
+
     &:hover {
       color: white;
     }
@@ -235,17 +271,20 @@
 }
 
 .login-page {
+
   // layout
   .main .row {
     @media (min-width: 350px) {
       .col-sm-offset-4 {
         margin-left: calc(50% - 160px);
       }
+
       .col-sm-4 {
         width: 320px;
       }
     }
   }
+
   .link-growi-org {
     position: absolute;
     bottom: 9px;
@@ -258,6 +297,7 @@
 
     &.to-flip {
       min-height: 295px;
+
       // has-error
       &.has-error {
         min-height: #{295px + 32px};
@@ -273,15 +313,18 @@
       -webkit-backface-visibility: hidden;
       -webkit-transform-style: preserve-3d;
     }
+
     .front {
       z-index: 2;
     }
+
     .back {
       position: absolute;
       top: 0;
       right: 15px;
       left: 15px;
     }
+
     .back,
     &.to-flip .front {
       transform: rotateY(180deg);
@@ -293,6 +336,7 @@
         opacity: 0.3;
       }
     }
+
     &.to-flip .back {
       transform: rotateY(0deg);
     }
@@ -307,6 +351,7 @@
       .col-sm-offset-4 {
         margin-left: calc(50% - 240px);
       }
+
       .col-sm-4 {
         width: 480px;
       }

src/server/views/login.html

@@ -111,21 +111,10 @@
 
         {% if isLocalOrLdapStrategiesEnabled %}
         <form role="form" action="/login" method="post">
-          <div class="input-group">
-            <span class="input-group-addon"><i class="icon-user"></i></span>
-            <input type="text" class="form-control" placeholder="Username or E-mail" name="loginForm[username]">
-            {% if passportService.isLdapStrategySetup %}
-            <span class="input-group-addon">
-              <small class="text-success">
-                <i class="icon-fw icon-check"></i> LDAP
-              </small>
-            </span>
-            {% endif %}
-          </div>
 
           <div class="input-group">
-            <div class="input-group-append ">
-              <span><i class="icon-user"></i></span>
+            <div class="input-group-prepend">
+              <span class="input-group-text"><i class="icon-user"></i></span>
             </div>
             <input type="text" class="form-control" placeholder="Username or E-mail" name="loginForm[username]">
             {% if passportService.isLdapStrategySetup %}
@@ -137,23 +126,17 @@
             {% endif %}
           </div>
 
-
-          <div class="input-group">
-            <span class="input-group-addon"><i class="icon-lock"></i></span>
-            <input type="password" class="form-control" placeholder="Password" name="loginForm[password]">
-          </div>
-
           <div class="input-group">
-            <div class="input-group-append">
-              <span><i class="icon-lock"></i></span>
+            <div class="input-group-prepend">
+              <span class="input-group-text"><i class="icon-lock"></i></span>
             </div>
             <input type="password" class="form-control" placeholder="Password" name="loginForm[password]">
           </div>
 
 
-          <div class="input-group mt-5 m-b-20 d-flex justify-content-center">
+          <div class="input-group justify-content-center mt-5">
             <input type="hidden" name="_csrf" value="{{ csrf() }}">
-            <button type="submit" class="fcbtn btn btn-danger btn-1b btn-login">
+            <button type="submit" class="fcbtn btn btn-login">
               <span class="btn-label"><i class="icon-login"></i></span>
               {{ t('Sign in') }}
             </button>