various user editing css fixes

themes/grav/css-compiled/template.css

@@ -563,10 +563,13 @@ form select {
   padding: 5px 30px 5px 10px;
   cursor: pointer;
   margin: 0; }
-form input[type=text] {
+form input[type=text], form input[type=password] {
   width: 100%;
   border: 1px solid #d4d4d4;
   background: #fff; }
+form input[readonly=readonly] {
+  background: #f2f2f2;
+  font-weight: bold; }
 form textarea {
   width: 100%;
   border: 1px solid #d4d4d4;
@@ -783,6 +786,10 @@ tr {
     float: left; }
   #admin-user-details .admin-user-names {
     margin-left: 45px; }
+    #admin-user-details .admin-user-names a {
+      color: #e6e6e6; }
+      #admin-user-details .admin-user-names a:hover {
+        color: #fff; }
     #admin-user-details .admin-user-names h4, #admin-user-details .admin-user-names h5 {
       margin: 0;
       font-size: 1rem;
@@ -1043,6 +1050,18 @@ tr {
     font-size: 1.2rem;
     line-height: 1.2; }
 
+.user-details {
+  text-align: center; }
+  .user-details img {
+    border-radius: 100%; }
+  .user-details h2 {
+    margin: 0;
+    font-size: 1.8rem; }
+  .user-details h5 {
+    color: #8d959a;
+    font-size: 1.1rem;
+    margin: 0; }
+
 #footer {
   text-align: center;
   padding: 3rem 0 1rem; }

themes/grav/scss/template/_admin.scss

@@ -39,6 +39,13 @@ $update-height: 3rem;
     .admin-user-names {
         margin-left: 45px;
 
+        a {
+            color: darken($accent-fg,10%);
+            &:hover {
+                color: $accent-fg;
+            }
+        }
+
         h4, h5 {
             margin: 0;
             font-size: 1rem;
@@ -403,6 +410,22 @@ $update-height: 3rem;
     }
 }
 
+.user-details {
+    text-align: center;
+    img {
+        border-radius: 100%;
+    }
+    h2 {
+        margin: 0;
+        font-size: 1.8rem;
+    }
+    h5 {
+        color: lighten($content-fg,10%);
+        font-size: 1.1rem;
+        margin: 0;
+    }
+}
+
 #footer {
     text-align: center;
     padding: 3rem 0 1rem;

themes/grav/scss/template/_forms.scss

@@ -210,12 +210,17 @@ form {
         margin: 0;
     }
 
-    input[type=text] {
+    input[type=text], input[type=password] {
         width: 100%;
         border: $form-border-width solid $form-border;
         background: $white;
     }
 
+    input[readonly=readonly] {
+        background: darken($white, 5%);
+        font-weight: bold;
+    }
+
     textarea {
         width: 100%;
         border: $form-border-width solid $form-border;

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

@@ -20,9 +20,11 @@
                     {% if field.placeholder %}placeholder="{{ field.placeholder }}"{% endif %}
                     {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
                     {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
+                    {% if field.readonly in ['on', 'true', 1] %}readonly="readonly"{% endif %}
                     {% if field.autocomplete in ['on', 'off'] %}autocomplete="{{ field.autocomplete }}"{% endif %}
                     {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
                     {% if field.validate.pattern %}pattern="{{ field.validate.pattern }}"{% endif %}
+
             />
         </div>
     </div>

themes/grav/templates/partials/users-details.html.twig

@@ -1,7 +1,8 @@
 {% if user.exists %}
 <div class="user-details">
-    <img src="http://www.gravatar.com/avatar/{{ user.email|md5 }}?s=64" />
-    <h1>{{ user.fullname }}{% if user.title %} <small>({{ user.title }})</small>{% endif %}</h1>
+    <img src="http://www.gravatar.com/avatar/{{ user.email|md5 }}?s=128" />
+    <h2>{{ user.fullname }}</h2>
+    {% if user.title %}<h5>{{ user.title }}</h5>{% endif %}
 </div>
 {% else %}
 <h1>Create new user</h1>