Improve styling.

1 files changed, 20 insertions, 5 deletions

diff --git a/qc_app/static/css/styles.css b/qc_app/static/css/styles.css
index 4c48a8a..8cfd15f 100644
--- a/qc_app/static/css/styles.css
+++ b/qc_app/static/css/styles.css
@@ -121,6 +121,11 @@ form {
     border-width: 1px;
     border-style: solid;
     border-color: #336699;
+    background-color: #D1D1D1;
+}
+
+form fieldset:nth-child(odd) {
+    background-color: #F1F1F1;
 }
 
 @media(min-width: 1250px) {
@@ -128,13 +133,16 @@ form {
 	width: 40%;
     }
 
-    #explainer {
+    .explainer {
 	width: 65ch;
     }
 }
 
 fieldset {
-    border-style: none;
+    border-style: solid;
+    border-color: #F1F1F1;
+    border-width: 1px 1px 0 1px;
+    border-bottom-style: none;
     display: grid;
     grid-template-columns: 2fr 8fr;
     column-gap: 5px;
@@ -144,7 +152,7 @@ fieldset {
     grid-column: 1 / 2;
 }
 
-.form-col-2 {
+.form-col-2, .form-input-help {
     grid-column: 2 / 3;
 }
 
@@ -158,10 +166,17 @@ input[disabled="true"],input[disabled="disabled"] {
 }
 
 form fieldset legend {
-    padding-left: 3em;
-    text-transform: capitalize;
+    padding: 0 1.2em 0 1.2em;
     font-weight: bolder;
     line-height: 2em;
+    text-align: center;
+    text-transform: capitalize;
+    background-color: inherit;
+
+    border-style: solid;
+    border-radius: 0.5em;
+    border-color: #F1F1F1;
+    border-width: 0 1px 0 1px;
 }
 
 .cli-output {