Aggiunte tante cose relative al profilo utente

public/style.css

@@ -29,6 +29,8 @@
     --shadow-1: 0 0 16px 0 #00000018;
 
     --text-input-bg: #fff;
+    --text-input-readonly-bg: #e4e4e4;
+    --text-input-readonly-fg: #777;
 
     --bg-darker-2-1: #c8c8c8;
     --accent-2-lighter: #5cc969;
@@ -401,11 +403,24 @@ li {
     line-height: 1.8;
 }
 
+p + p {
+    padding-top: 0.5rem;
+}
+
 ul,
 ol {
     padding: 0 0 0 1.5rem;
 }
 
+hr {
+    width: 50ch;
+    height: 1px;
+    margin: 0;
+
+    border: none;
+    background-color: var(--bg-darker-2);
+}
+
 pre {
     margin: 0.5rem 0;
 
@@ -431,21 +446,27 @@ p.center {
 
 /* Controls */
 
-a {
+a:not(.button) {
     color: var(--accent-1-fg);
     font-weight: var(--font-weight-medium);
     text-decoration: none;
 }
 
-a:hover {
+a:not(.button):hover {
     color: var(--accent-1);
     text-decoration: underline;
 }
 
+a.button {
+    text-decoration: none;
+}
+
 /* Buttons */
 
 button,
 .button {
+    display: inline-block;
+
     font-family: var(--font-sf);
     font-weight: var(--font-weight-medium);
     font-size: 17px;
@@ -544,6 +565,19 @@ input[type='password'] {
     font-family: caption;
 }
 
+input[type='text']:read-only,
+input[type='password']:read-only {
+    background: var(--text-input-readonly-bg);
+    color: var(--text-input-readonly-fg);
+    box-shadow: 0 0 8px 0 #00000010;
+}
+
+input[type='text'].error,
+input[type='password'].error {
+    background: #faa;
+    color: #311;
+}
+
 /* Compound Controls */
 
 .compound {
@@ -617,10 +651,16 @@ form .field-set {
     padding: 1rem;
 }
 
+form .field-set .fill {
+    grid-column: 1 / span 2;
+}
+
 form .field-set label {
     grid-column: 1 / 2;
     align-self: center;
     justify-self: end;
+
+    font-weight: var(--font-weight-medium);
 }
 
 form .field-set input {

public/theme-dark.css

@@ -1,4 +1,3 @@
-
 body.dark-mode {
     --bg: #282828;
     --fg: #a6cc92;
@@ -24,8 +23,10 @@ body.dark-mode {
     --font-weight-bold: 700;
 
     --shadow-1: 0 0 16px 0 #16182077;
-    
+
     --text-input-bg: var(--bg-darker);
+    --text-input-readonly-bg: hsl(10, 10%, 22%);
+    --text-input-readonly-fg: hsl(10, 10%, 40%);
 
     --bg-darker-2-1: #c8c8c8;
     --accent-2-lighter: #5cc969;
@@ -62,6 +63,19 @@ body.dark-mode {
     background: #4b4342;
 }
 
+.dark-mode input[type='text']:read-only,
+.dark-mode input[type='password']:read-only {
+    background: var(--text-input-readonly-bg);
+    color: var(--text-input-readonly-fg);
+    box-shadow: 0 0 8px 0 #00000010;
+}
+
+.dark-mode input[type='text'].error,
+.dark-mode input[type='password'].error {
+    background: #633;
+    color: #faa;
+}
+
 .dark-mode pre {
     background: var(--bg-darker);
     border: 1px solid var(--bg-darker-2);
@@ -72,6 +86,7 @@ body.dark-mode {
     filter: invert(1);
 }
 
-.dark-mode table td, .dark-mode table th {
+.dark-mode table td,
+.dark-mode table th {
     border-color: var(--fg);
-}
+}