adjust layout for /admin/security

lib/views/admin/security.html

@@ -107,30 +107,38 @@
           <div class="form-group">
             <div class="col-xs-6">
               <h4>
-                <input type="radio" name="settingForm[security:isEnabledPassport]" value="false"
-                    {% if !settingForm['security:isEnabledPassport'] %}checked="checked"{% endif %}>
-                Official Crowi authentication mechanism
+                <div class="radio radio-primary">
+                  <input type="radio" id="radioPassportAuthMech" name="settingForm[security:isEnabledPassport]" value="true"
+                      {% if true === settingForm['security:isEnabledPassport'] %}checked="checked"{% endif %}>
+                  <label for="radioPassportAuthMech">
+                    <a href="http://passportjs.org/">
+                      <img src="/images/admin/security/passport-logo.svg" class="passport-logo"> Passport
+                    </a> authentication mechanism <small class="text-success">(Recommended)</small>
+                  </label>
+                </div>
               </h4>
               <ul>
                 <li>Username, E-mail and Password authentication</li>
-                <li>Google OAuth2 authentication</li>
+                <li>LDAP authentication</li>
+                <li class="text-muted">(TBD) <del>Google OAuth2 authentication</del></li>
+                <li class="text-muted">(TBD) <del>Facebook OAuth2 authentication</del></li>
+                <li class="text-muted">(TBD) <del>Twitter OAuth authentication</del></li>
+                <li class="text-muted">(TBD) <del>Github OAuth2 authentication</del></li>
               </ul>
             </div>
             <div class="col-xs-6">
               <h4>
-                <input type="radio" name="settingForm[security:isEnabledPassport]" value="true"
-                    {% if true === settingForm['security:isEnabledPassport'] %}checked="checked"{% endif %}>
-                <a href="http://passportjs.org/">
-                  <img src="/images/admin/security/passport-logo.svg" class="passport-logo"> Passport
-                </a> authentication mechanism <small class="text-success">(Recommended)</small>
+                <div class="radio radio-primary">
+                  <input type="radio" id="radioCrowiAuthMech" name="settingForm[security:isEnabledPassport]" value="false"
+                      {% if !settingForm['security:isEnabledPassport'] %}checked="checked"{% endif %}>
+                  <label for="radioCrowiAuthMech">
+                    Crowi classic authentication mechanism
+                  </label>
+                </div>
               </h4>
               <ul>
                 <li>Username, E-mail and Password authentication</li>
-                <li>LDAP authentication</li>
-                <li class="text-muted">(TBD) <del>Google OAuth2 authentication</del></li>
-                <li class="text-muted">(TBD) <del>Facebook OAuth2 authentication</del></li>
-                <li class="text-muted">(TBD) <del>Twitter OAuth authentication</del></li>
-                <li class="text-muted">(TBD) <del>Github OAuth2 authentication</del></li>
+                <li>Google OAuth2 authentication</li>
               </ul>
             </div>
           </div>

resource/styles/agile-admin/inverse/eliteadmin.scss

@@ -1993,7 +1993,7 @@ table.dataTable thead .sorting:after {
       -webkit-transition: 0.3s ease-in-out;
       background-color: $white;
       border-radius: 1px;
-      border: 1px solid $border;
+      border: 1px solid darken($border, 10%);
       content: "";
       display: inline-block;
       height: 17px;
@@ -2178,7 +2178,7 @@ table.dataTable thead .sorting:after {
       -webkit-transition: border 0.5s ease-in-out;
       background-color: $white;
       border-radius: 50%;
-      border: 1px solid $border;
+      border: 1px solid darken($border, 15%);
       content: "";
       display: inline-block;
       height: 17px;

resource/styles/scss/_admin.scss

@@ -35,7 +35,8 @@
 
   .admin-security {
     .passport-logo {
-      padding: 4px;
+      margin-top: -.5em;
+      padding: 3px;
       height: 32px;
       background-color: black;
     }