From 0d9d1b595ee4b68117c568ad5c25e1b746978683 Mon Sep 17 00:00:00 2001
From: Christine Slotty <christine.slotty@software-labor.de>
Date: Sun, 7 Jun 2020 18:50:16 +0200
Subject: [PATCH] form WIP

---
 config/horizontal_form.php                   |  31 +---
 src/Template/TransactionSendCoins/create.ctp |   4 +-
 webroot/css/grd_styles.css                   | 186 +++++++++++++------
 websrc/src/less-files.css                    | 186 +++++++++++++------
 websrc/src/less/02-colors.less               |   3 +
 websrc/src/less/10-center.less               |  25 +--
 websrc/src/less/form.less                    | 159 ++++++++++++----
 7 files changed, 404 insertions(+), 190 deletions(-)

diff --git a/config/horizontal_form.php b/config/horizontal_form.php
index de38a8b3c..849597f27 100644
--- a/config/horizontal_form.php
+++ b/config/horizontal_form.php
@@ -1,6 +1,6 @@
 <?php
 
-/* 
+/*
  * To change this license header, choose License Headers in Project Properties.
  * To change this template file, choose Tools | Templates
  * and open the template in the editor.
@@ -8,35 +8,22 @@
 
 return [
     // Container element used by control().
-    'inputContainer' => '<div class="form-group row showcase_row_area">{{content}}</div>',
+    'inputContainer' => '{{content}}',
     // Container element used by control() when a field has an error.
-    //'inputContainerError' => '<div class="input {{type}}{{required}} error">{{content}}{{error}}</div>',
-    'inputContainerError' => '<div class="form-group row showcase_row_area {{type}}{{required}} is-invalid">{{content}}{{error}}</div>',
+    'inputContainerError' => '<div class="{{type}}{{required}} is-invalid">{{content}}{{error}}</div>',
     // Label element when inputs are not nested inside the label.
-    'label' => '<div class="col-md-3 showcase_text_area">'
-              . '<label{{attrs}}>{{text}}</label>'
-             . '</div>',
+    'label' => '<label{{attrs}} class="form-label">{{text}}</label>',
     // Generic input element.
-    'input' => '<div class="col-md-9 showcase_content_area">'
-              . '<input type="{{type}}" class="form-control" name="{{name}}"{{attrs}}/>'
-             . '</div>',
+    'input' => '<input type="{{type}}" class="form-control" name="{{name}}"{{attrs}}/>',
     // Textarea input element,
-    'textarea' => '<div class="col-md-9 showcase_content_area">'
-                  . '<textarea class="form-control" name="{{name}}"{{attrs}}>{{value}}</textarea>'
-                . '</div>',
+    'textarea' => '<textarea class="form-control" name="{{name}}"{{attrs}}>{{value}}</textarea>',
     // Error message wrapper elements.
-    //'error' => '<div class="error-message">{{content}}</div>',
-    //'error' => '{{content}}',
-    'error' => '<div class="col-md-9 offset-md-3 showcase_content_area invalid-feedback">'
+    'error' => '<div class="invalid-feedback">'
               . '{{content}}'
              . '</div>',
-    
     // Container for error items.
-    //'errorList' => '<ul>{{content}}</ul>',
     'errorList' => '{{content}}',
-    
     // Error item wrapper.
-    //'errorItem' => '<li>{{text}}</li>',
     'errorItem' => '<div>{{text}}</div>'
 ];
 /*
@@ -49,11 +36,11 @@ return [
       <input type="number" step="0.01" class="form-control" id="inputAmount" name="inputAmount" >
     </div>
   </div>
- 
+
 
 <div class="input number required">
   <label for="amount">Amount</label>
   <input type="number" name="amount" required="required" step="0.01" id="amount">
 </div>
- 
+
  */
\ No newline at end of file
diff --git a/src/Template/TransactionSendCoins/create.ctp b/src/Template/TransactionSendCoins/create.ctp
index b819d12e5..cae2638b4 100644
--- a/src/Template/TransactionSendCoins/create.ctp
+++ b/src/Template/TransactionSendCoins/create.ctp
@@ -19,8 +19,8 @@ $this->loadHelper('Form', [
       <?= $this->Form->control('email', ['label' => __('Empfänger'), 'placeholder' => 'E-Mail']) ?>
       <?= $this->Form->control('memo', ['label' => __('Verwendungszweck'), 'rows' => 3]) ?>
       <?= $this->Form->control('amount', ['label' => __('Betrag in GDD')]) ?>
-      <?= $this->Form->button(__('Transaktion abschließen'), ['name' => 'next', 'class' => 'btn btn-sm btn-primary']) ?>
-      <!--<?= $this->Form->button(__('Weitere Transaktion erstellen'), ['name' => 'add', 'class' => 'btn btn-sm']) ?>-->
+      <?= $this->Form->button(__('Transaktion abschließen'), ['name' => 'next', 'class' => 'form-button']) ?>
+      <!--<?= $this->Form->button(__('Weitere Transaktion erstellen'), ['name' => 'add', 'class' => 'form-button']) ?>-->
     <?= $this->Form->end() ?>
   </div>
 </div>
diff --git a/webroot/css/grd_styles.css b/webroot/css/grd_styles.css
index 0eb89988b..4f1d38a5f 100644
--- a/webroot/css/grd_styles.css
+++ b/webroot/css/grd_styles.css
@@ -60,6 +60,7 @@
 /* CONTENT-NAV */
 /* CONTENT-ITEMS */
 /* CONTENT-TABLE */
+/* FORMS */
 /* VARIOUS INDIVIDUAL */
 /* XXX TODO XXX */
 /*rgba(0, 0, 0, 0.5) ??? */
@@ -489,12 +490,12 @@
     border-radius: 0.5em;
     box-shadow: 0 0 10px 0 rgba(183, 192, 206, 0.2);
     border: 1px solid rgba(238, 238, 238, 0.75);
+    margin: 1em 0.25em;
   }
   /* Top Info Above Main */
   .info-container {
     max-width: 70%;
     padding: 0.5em 25px;
-    margin: 1em 0.25em;
   }
   /* Main Container */
   .main-container {
@@ -504,6 +505,7 @@
   .content-region {
     border-bottom: 1px dashed #F5F5F5;
     padding: 0 25px;
+    padding-bottom: 2em;
     margin: 1em 0.25em;
   }
   .content-collection {
@@ -558,24 +560,6 @@
   .wiretransfer {
     grid-template-columns: 5fr 4fr 3fr 2fr 1fr;
   }
-  /* Form Content */
-  .action-form {
-    width: 100%;
-  }
-  .form-header {
-    border-left: 3px solid #047006;
-    background: #f9fafb;
-    padding: 15px 20px;
-    margin: 0;
-    margin-bottom: 15px;
-    border-radius: 0 6px 0 0;
-  }
-  .form-body {
-    margin: 36px 75px;
-  }
-  .form-group {
-    display: flex;
-  }
   /* OTHER */
   .info-item i,
   .info-item-link,
@@ -705,70 +689,164 @@ To change this license header, choose License Headers in Project Properties.
 To change this template file, choose Tools | Templates
 and open the template in the editor.
 */
+/* ============================================================
+
+  Screen styles for forms.
+
+  Datei     :   form.css
+  Datum     :   2020-06-07
+  Autor     :   Christine Slotty
+  Copyright :   Gradio
+
+   ============================================================*/
+@media screen {
+  /* =========
+      FORMS
+     =========*/
+  /* Form Content */
+  .action-form {
+    width: 100%;
+  }
+  .form-header {
+    border-left: 3px solid #047006;
+    background: #f9fafb;
+    padding: 15px 20px;
+    margin: 0;
+    margin-bottom: 15px;
+    border-radius: 0 6px 0 0;
+  }
+  .form-body form {
+    display: grid;
+    grid-template-columns: 200px 1fr;
+    margin: 36px 75px;
+    grid-gap: 1em;
+  }
+  .form-label {
+    grid-column: 0.5;
+    font-weight: 400;
+    text-align: right;
+  }
+  .form-control {
+    grid-column: 0.66666667;
+    width: 100%;
+    height: calc(1.5em + 0.75rem + 2px);
+    margin: 0;
+    padding: 0.375rem 0.75rem;
+    padding-left: 20px;
+    padding-right: 20px;
+    color: rgba(16, 16, 16, 0.8);
+    display: block;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #6c757d;
+    background-color: #f6f7f9;
+    background-clip: padding-box;
+    border: 1px solid #f0f2f5;
+    border-radius: 0.25rem;
+    -webkit-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  }
+  .form-button {
+    cursor: pointer;
+    font: 600 13.3333px Arial;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    text-align: center;
+    vertical-align: middle;
+    color: #fff;
+    background-color: #047006;
+    border-color: #047006;
+    border: 1px solid transparent;
+    border-radius: 0.2rem;
+    height: 35px;
+    max-height: 35px;
+    padding: 4px 15px;
+    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
+  }
+  .form-button:hover {
+    color: #fff;
+    background-color: #034b04;
+    border-color: #023f03;
+  }
+}
 /*
-    Created on : 30.10.2019, 14:41:57
-    Author     : einhornimmond
-*/
-/* Button */
+ Button
 .grd-form-bn:hover,
 .grd-active {
-  background-color: lightgray;
-  border-color: #000;
+background-color: @button-background-active;
+border-color: @button-border-color;
 }
+
 .grd-form-bn {
-  padding: 5px;
-  border: 1px solid grey;
-  display: table-cell;
-  text-align: center;
-  vertical-align: middle;
-  color: #444;
+padding: 5px;
+border: 1px solid @form-button-border;
+display: table-cell;
+text-align: center;
+vertical-align: middle;
+color: @form-button-text;
 }
+
+.grd-form-bn-small {
+}
+
 a.grd-form-bn,
 a.grd-form-bn:visited {
-  color: #000;
-  text-decoration: none;
+color: @button-text;
+text-decoration: none;
 }
+
 .grd-form-bn-succeed {
-  background-color: lightcyan;
-  color: green;
-  margin-top: 3px;
-  margin-bottom: 3px;
+background-color: @success-background;
+color: @success;
+margin-top: 3px;
+margin-bottom: 3px;
 }
+
 .grd-form-bn-succeed:not([disabled]):hover {
-  background-color: lightgreen;
+background-color: @success-background-hover;
 }
+
 .grd-form-bn-discard {
-  margin-left: 5px;
-  border: 1px solid red;
-  color: red;
-  cursor: pointer;
+margin-left: 5px;
+border: 1px solid @error;
+color: @error;
+cursor: pointer;
 }
-/* form elements */
+
+ form elements
 .grd_textarea {
-  border: 1px solid grey;
-  background-color: rgba(0, 0, 0, 0.05);
-  padding: 5px;
-  font-style: italic;
+border: 1px solid grey;
+background-color: @form-text-background;
+padding: 5px;
+font-style: italic;
 }
+
 .grd-input label {
-  display: block;
+display: block;
 }
+
 input.grd-privkey {
-  width: 465px;
+width: 465px;
 }
+
 input.grd-pubkey {
-  width: 465px;
+width: 465px;
 }
+
 input.grd-non-der-keys {
-  width: 900px;
+width: 900px;
 }
+
 input:not([type='radio']) {
-  width: 200px;
+width: 200px;
 }
+
 label:not(.grd_radio_label) {
-  width: 80px;
-  display: inline-block;
+width: 80px;
+display: inline-block;
 }
+*/
 /*
 To change this license header, choose License Headers in Project Properties.
 To change this template file, choose Tools | Templates
diff --git a/websrc/src/less-files.css b/websrc/src/less-files.css
index 0eb89988b..4f1d38a5f 100644
--- a/websrc/src/less-files.css
+++ b/websrc/src/less-files.css
@@ -60,6 +60,7 @@
 /* CONTENT-NAV */
 /* CONTENT-ITEMS */
 /* CONTENT-TABLE */
+/* FORMS */
 /* VARIOUS INDIVIDUAL */
 /* XXX TODO XXX */
 /*rgba(0, 0, 0, 0.5) ??? */
@@ -489,12 +490,12 @@
     border-radius: 0.5em;
     box-shadow: 0 0 10px 0 rgba(183, 192, 206, 0.2);
     border: 1px solid rgba(238, 238, 238, 0.75);
+    margin: 1em 0.25em;
   }
   /* Top Info Above Main */
   .info-container {
     max-width: 70%;
     padding: 0.5em 25px;
-    margin: 1em 0.25em;
   }
   /* Main Container */
   .main-container {
@@ -504,6 +505,7 @@
   .content-region {
     border-bottom: 1px dashed #F5F5F5;
     padding: 0 25px;
+    padding-bottom: 2em;
     margin: 1em 0.25em;
   }
   .content-collection {
@@ -558,24 +560,6 @@
   .wiretransfer {
     grid-template-columns: 5fr 4fr 3fr 2fr 1fr;
   }
-  /* Form Content */
-  .action-form {
-    width: 100%;
-  }
-  .form-header {
-    border-left: 3px solid #047006;
-    background: #f9fafb;
-    padding: 15px 20px;
-    margin: 0;
-    margin-bottom: 15px;
-    border-radius: 0 6px 0 0;
-  }
-  .form-body {
-    margin: 36px 75px;
-  }
-  .form-group {
-    display: flex;
-  }
   /* OTHER */
   .info-item i,
   .info-item-link,
@@ -705,70 +689,164 @@ To change this license header, choose License Headers in Project Properties.
 To change this template file, choose Tools | Templates
 and open the template in the editor.
 */
+/* ============================================================
+
+  Screen styles for forms.
+
+  Datei     :   form.css
+  Datum     :   2020-06-07
+  Autor     :   Christine Slotty
+  Copyright :   Gradio
+
+   ============================================================*/
+@media screen {
+  /* =========
+      FORMS
+     =========*/
+  /* Form Content */
+  .action-form {
+    width: 100%;
+  }
+  .form-header {
+    border-left: 3px solid #047006;
+    background: #f9fafb;
+    padding: 15px 20px;
+    margin: 0;
+    margin-bottom: 15px;
+    border-radius: 0 6px 0 0;
+  }
+  .form-body form {
+    display: grid;
+    grid-template-columns: 200px 1fr;
+    margin: 36px 75px;
+    grid-gap: 1em;
+  }
+  .form-label {
+    grid-column: 0.5;
+    font-weight: 400;
+    text-align: right;
+  }
+  .form-control {
+    grid-column: 0.66666667;
+    width: 100%;
+    height: calc(1.5em + 0.75rem + 2px);
+    margin: 0;
+    padding: 0.375rem 0.75rem;
+    padding-left: 20px;
+    padding-right: 20px;
+    color: rgba(16, 16, 16, 0.8);
+    display: block;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #6c757d;
+    background-color: #f6f7f9;
+    background-clip: padding-box;
+    border: 1px solid #f0f2f5;
+    border-radius: 0.25rem;
+    -webkit-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  }
+  .form-button {
+    cursor: pointer;
+    font: 600 13.3333px Arial;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    text-align: center;
+    vertical-align: middle;
+    color: #fff;
+    background-color: #047006;
+    border-color: #047006;
+    border: 1px solid transparent;
+    border-radius: 0.2rem;
+    height: 35px;
+    max-height: 35px;
+    padding: 4px 15px;
+    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
+  }
+  .form-button:hover {
+    color: #fff;
+    background-color: #034b04;
+    border-color: #023f03;
+  }
+}
 /*
-    Created on : 30.10.2019, 14:41:57
-    Author     : einhornimmond
-*/
-/* Button */
+ Button
 .grd-form-bn:hover,
 .grd-active {
-  background-color: lightgray;
-  border-color: #000;
+background-color: @button-background-active;
+border-color: @button-border-color;
 }
+
 .grd-form-bn {
-  padding: 5px;
-  border: 1px solid grey;
-  display: table-cell;
-  text-align: center;
-  vertical-align: middle;
-  color: #444;
+padding: 5px;
+border: 1px solid @form-button-border;
+display: table-cell;
+text-align: center;
+vertical-align: middle;
+color: @form-button-text;
 }
+
+.grd-form-bn-small {
+}
+
 a.grd-form-bn,
 a.grd-form-bn:visited {
-  color: #000;
-  text-decoration: none;
+color: @button-text;
+text-decoration: none;
 }
+
 .grd-form-bn-succeed {
-  background-color: lightcyan;
-  color: green;
-  margin-top: 3px;
-  margin-bottom: 3px;
+background-color: @success-background;
+color: @success;
+margin-top: 3px;
+margin-bottom: 3px;
 }
+
 .grd-form-bn-succeed:not([disabled]):hover {
-  background-color: lightgreen;
+background-color: @success-background-hover;
 }
+
 .grd-form-bn-discard {
-  margin-left: 5px;
-  border: 1px solid red;
-  color: red;
-  cursor: pointer;
+margin-left: 5px;
+border: 1px solid @error;
+color: @error;
+cursor: pointer;
 }
-/* form elements */
+
+ form elements
 .grd_textarea {
-  border: 1px solid grey;
-  background-color: rgba(0, 0, 0, 0.05);
-  padding: 5px;
-  font-style: italic;
+border: 1px solid grey;
+background-color: @form-text-background;
+padding: 5px;
+font-style: italic;
 }
+
 .grd-input label {
-  display: block;
+display: block;
 }
+
 input.grd-privkey {
-  width: 465px;
+width: 465px;
 }
+
 input.grd-pubkey {
-  width: 465px;
+width: 465px;
 }
+
 input.grd-non-der-keys {
-  width: 900px;
+width: 900px;
 }
+
 input:not([type='radio']) {
-  width: 200px;
+width: 200px;
 }
+
 label:not(.grd_radio_label) {
-  width: 80px;
-  display: inline-block;
+width: 80px;
+display: inline-block;
 }
+*/
 /*
 To change this license header, choose License Headers in Project Properties.
 To change this template file, choose Tools | Templates
diff --git a/websrc/src/less/02-colors.less b/websrc/src/less/02-colors.less
index 09a2447c5..72769cdf7 100644
--- a/websrc/src/less/02-colors.less
+++ b/websrc/src/less/02-colors.less
@@ -42,6 +42,9 @@
 @content-table-header-bg: #fafafa;
 @content-table-header-border: #f2f4f9;
 
+/* FORMS */
+@form-label: #212529;
+
 /* VARIOUS INDIVIDUAL */
 @grd-orange: #ffa600;
 
diff --git a/websrc/src/less/10-center.less b/websrc/src/less/10-center.less
index 787c2d950..9aaa6f920 100644
--- a/websrc/src/less/10-center.less
+++ b/websrc/src/less/10-center.less
@@ -61,13 +61,13 @@
     border-radius: .5em;
     box-shadow: 0 0 10px 0 @container-shadow;
     border: 1px solid @container-border;
+    margin: 1em .25em;
   }
 
   /* Top Info Above Main */
   .info-container {
     max-width: 70%;
     padding: .5em 25px;
-    margin: 1em .25em;
   }
 
   /* Main Container */
@@ -79,6 +79,7 @@
   .content-region {
     border-bottom: 1px dashed @light;
     padding: 0 25px;
+    padding-bottom: 2em;
     margin: 1em .25em;
   }
 
@@ -145,28 +146,6 @@
     grid-template-columns: 5fr 4fr 3fr 2fr 1fr;
   }
 
-  /* Form Content */
-  .action-form {
-    width: 100%;
-  }
-
-  .form-header {
-    border-left: 3px solid @form-header-border;
-    background: @form-header-background;
-    padding: 15px 20px;
-    margin: 0;
-    margin-bottom: 15px;
-    border-radius: 0 6px 0 0;
-  }
-
-  .form-body {
-    margin: 36px 75px;
-  }
-
-  .form-group {
-    display: flex;
-  }
-
   /* OTHER */
   .info-item i,
   .info-item-link,
diff --git a/websrc/src/less/form.less b/websrc/src/less/form.less
index 3118dd88f..5c9c16c08 100644
--- a/websrc/src/less/form.less
+++ b/websrc/src/less/form.less
@@ -4,25 +4,113 @@ To change this template file, choose Tools | Templates
 and open the template in the editor.
 */
 
-/*
-    Created on : 30.10.2019, 14:41:57
-    Author     : einhornimmond
-*/
+/* ============================================================
 
-/* Button */
+  Screen styles for forms.
+
+  Datei     :   form.css
+  Datum     :   2020-06-07
+  Autor     :   Christine Slotty
+  Copyright :   Gradio
+
+   ============================================================*/
+@media screen {
+
+  /* =========
+      FORMS
+     =========*/
+
+  /* Form Content */
+  .action-form {
+    width: 100%;
+  }
+
+  .form-header {
+    border-left: 3px solid @form-header-border;
+    background: @form-header-background;
+    padding: 15px 20px;
+    margin: 0;
+    margin-bottom: 15px;
+    border-radius: 0 6px 0 0;
+  }
+
+  .form-body form {
+    display: grid;
+    grid-template-columns: 200px 1fr;
+    margin: 36px 75px;
+    grid-gap: 1em;
+  }
+
+  .form-label {
+    grid-column: 1 / 2;
+    font-weight: 400;
+    text-align: right;
+  }
+
+  .form-control {
+    grid-column: 2 / 3;
+    display: block;
+    width: 100%;
+    height: calc(1.5em + .75rem + 2px);
+    margin: 0;
+    padding: .375rem .75rem;
+    padding-left: 20px;
+    padding-right: 20px;
+    color: rgba(16, 16, 16, .8);
+    display: block;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #6c757d;
+    background-color: #f6f7f9;
+    background-clip: padding-box;
+    border: 1px solid #f0f2f5;
+    border-radius: .25rem;
+    -webkit-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+  }
+
+  .form-button {
+    cursor: pointer;
+    font: 600 13.3333px Arial;
+    font-size: .875rem;
+    line-height: 1.5;
+    text-align: center;
+    vertical-align: middle;
+    color: #fff;
+    background-color: #047006;
+    border-color: #047006;
+    border: 1px solid transparent;
+    border-radius: .2rem;
+    height: 35px;
+    max-height: 35px;
+    padding: 4px 15px;
+    box-shadow: 0 0 2px 0 rgba(0, 0, 0, .2);
+  }
+
+  .form-button:hover {
+    color: #fff;
+    background-color: #034b04;
+    border-color: #023f03;
+  }
+
+}
+
+/*
+ Button
 .grd-form-bn:hover,
 .grd-active {
 background-color: @button-background-active;
-  border-color: @button-border-color;
+border-color: @button-border-color;
 }
 
 .grd-form-bn {
-  padding: 5px;
-  border: 1px solid @form-button-border;
-  display: table-cell;
-  text-align: center;
-  vertical-align: middle;
-  color: @form-button-text;
+padding: 5px;
+border: 1px solid @form-button-border;
+display: table-cell;
+text-align: center;
+vertical-align: middle;
+color: @form-button-text;
 }
 
 .grd-form-bn-small {
@@ -30,57 +118,58 @@ background-color: @button-background-active;
 
 a.grd-form-bn,
 a.grd-form-bn:visited {
-  color: @button-text;
-  text-decoration: none;
+color: @button-text;
+text-decoration: none;
 }
 
 .grd-form-bn-succeed {
-  background-color: @success-background;
-  color: @success;
-  margin-top: 3px;
-  margin-bottom: 3px;
+background-color: @success-background;
+color: @success;
+margin-top: 3px;
+margin-bottom: 3px;
 }
 
 .grd-form-bn-succeed:not([disabled]):hover {
-  background-color: @success-background-hover;
+background-color: @success-background-hover;
 }
 
 .grd-form-bn-discard {
-  margin-left: 5px;
-  border: 1px solid @error;
-  color: @error;
-  cursor: pointer;
+margin-left: 5px;
+border: 1px solid @error;
+color: @error;
+cursor: pointer;
 }
 
-/* form elements */
+ form elements
 .grd_textarea {
-  border: 1px solid grey;
-  background-color: @form-text-background;
-  padding: 5px;
-  font-style: italic;
+border: 1px solid grey;
+background-color: @form-text-background;
+padding: 5px;
+font-style: italic;
 }
 
 .grd-input label {
-  display: block;
+display: block;
 }
 
 input.grd-privkey {
-  width: 465px;
+width: 465px;
 }
 
 input.grd-pubkey {
-  width: 465px;
+width: 465px;
 }
 
 input.grd-non-der-keys {
-  width: 900px;
+width: 900px;
 }
 
 input:not([type='radio']) {
-  width: 200px;
+width: 200px;
 }
 
 label:not(.grd_radio_label) {
-  width: 80px;
-  display: inline-block;
+width: 80px;
+display: inline-block;
 }
+*/