Fixed login CSS to match new output

themes/grav/css-compiled/template.css

@@ -13,6 +13,7 @@
   display: inline-block;
   padding: 0.3rem 1.5rem;
   font-weight: 300;
+  -webkit-font-smoothing: auto;
   cursor: pointer;
   font-family: "Lato", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }
   .button i {
@@ -608,6 +609,13 @@ tr {
   background: #253a47;
   max-width: 24rem;
   margin: 0 auto; }
+  #admin-login .form-field {
+    padding-left: 0;
+    margin-bottom: 0; }
+  #admin-login .form-label {
+    display: none; }
+  #admin-login .form-data {
+    padding-right: 0; }
   #admin-login h1 {
     background: #20333e url(../images/logo.png) 50% 50% no-repeat;
     font-size: 0;
@@ -615,7 +623,7 @@ tr {
     height: 14rem;
     margin: 0; }
   #admin-login form {
-    padding: 3rem; }
+    padding: 2rem 3rem; }
     #admin-login form input {
       margin-bottom: 2rem;
       background: #314d5b;
@@ -624,6 +632,7 @@ tr {
       line-height: 1.5;
       text-align: center;
       font-weight: 300;
+      -webkit-font-smoothing: auto;
       border: 1px solid #1d2e38; }
       #admin-login form input::-webkit-input-placeholder {
         color: #83949c; }

themes/grav/scss/template/_login.scss

@@ -4,6 +4,19 @@
     max-width: 24rem;
     margin: 0 auto;
 
+    .form-field {
+        padding-left: 0;
+        margin-bottom: 0;
+    }
+
+    .form-label {
+        display: none;
+    }
+
+    .form-data {
+        padding-right: 0;
+    }
+
     h1 {
         background: $darker-accent-bg url(../images/logo.png) 50% 50% no-repeat;
         font-size: 0;
@@ -13,7 +26,7 @@
     }
 
     form {
-        padding: 3rem;
+        padding: 2rem 3rem;
         input {
             margin-bottom: 2rem;
             background: $page-bg;
@@ -22,6 +35,7 @@
             line-height: 1.5;
             text-align: center;
             font-weight: 300;
+            -webkit-font-smoothing: auto;
             border: 1px solid shade($accent-bg, 20%);
             @include placeholder {
                 color: tint($page-bg,40%);

themes/grav/scss/template/modules/_buttons.scss

@@ -2,6 +2,7 @@
 	display: inline-block;
 	padding: 0.3rem 1.5rem;
     font-weight: 300;
+    -webkit-font-smoothing: auto;
     cursor: pointer;
 
     font-family: $font-family-default;

themes/grav/templates/forms/fields/password/password.html.twig

@@ -1,24 +1,29 @@
 {% set value = (value is null ? field.default : value) %}
 
-<div class="form-field">
+<div class="form-field grid pure-g">
-    <label class="inline">
+    <div class="form-label block size-1-3 pure-u-1-3">
+        <label>
         {% if field.help %}
         <span class="tooltip" data-asTooltip-position="w" title="{{ field.help|e }}">{{ field.label }}</span>
         {% else %}
         {{ field.label }}
         {% endif %}
         {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
-
+        </label>
-        <input  type="password"
+    </div>
-                class="input"
+    <div class="form-data block size-2-3 pure-u-2-3">
-                name="{{ (scope ~ field.name)|fieldName }}"
+        <div class="form-input-wrapper {{ field.size }}">
-                value="{{ value|join(', ') }}"
+            <input  type="password"
-                {% if field.placeholder %}placeholder="{{ field.placeholder }}"{% endif %}
+                    class="input"
-                {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
+                    name="{{ (scope ~ field.name)|fieldName }}"
-                {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
+                    value="{{ value|join(', ') }}"
-                {% if field.autocomplete in ['on', 'off'] %}autocomplete="{{ field.autocomplete }}"{% endif %}
+                    {% if field.placeholder %}placeholder="{{ field.placeholder }}"{% endif %}
-                {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
+                    {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
-                {% if field.validate.pattern %}pattern="{{ field.validate.pattern }}"{% endif %}
+                    {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
-        />
+                    {% if field.autocomplete in ['on', 'off'] %}autocomplete="{{ field.autocomplete }}"{% endif %}
-    </label>
+                    {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
+                    {% if field.validate.pattern %}pattern="{{ field.validate.pattern }}"{% endif %}
+            />
+        </div>
+    </div>
 </div>

themes/grav/templates/partials/base.html.twig

@@ -68,10 +68,10 @@
         </div>
         {% endif %}
         <div class="content-padding">
-            <div class="default-box-shadow">
+            <div>
                 {% include 'partials/messages.html.twig' %}
                 {% block content_top %}{% endblock %}
-                <div class="admin-block">
+                <div class="admin-block default-box-shadow">
                     {% block content %}{% endblock %}
                 </div>
                 {% block content_bottom %}{% endblock %}