the penalty form (input, new record)

2 files changed, 153 insertions, 48 deletions

diff --git a/public/assets/css/class.css b/public/assets/css/class.css
index 4747507..5333f29 100644
--- a/public/assets/css/class.css
+++ b/public/assets/css/class.css
@@ -28,9 +28,88 @@
     --class-orange-opaque: #f4792099;
     --class-grey-background: #eeedeb;
     --class-red: #d13;
-    --light-grey-bgr: #f2f3f8;
+    --light-grey-bgr: #f5f6f7;
+    --light-grey-layer-bgr: #eeeded;
+    --light-grey-shade: 1px 5px 7px #7773;
+    --form-content-font-size: .87rem;
+    --form-input-height: 31px;
+    --form-layer-border: 1px solid #e7e5e5;
+    --select2-arrow-top: -1px;
 }
 
+html, body,
+select, select option {
+    font-family: "Fira Sans", sans-serif;
+    font-weight: 400;
+    font-size: 1rem;
+}
+
+.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-weight: 400; };
+
+html, body {
+    padding:0; margin:0;
+    font-size:1.25em;
+    color: #037; background: var(--light-grey-bgr);
+    line-height:1.2em; 
+}
+
+.office h3 {
+    font-size: 2em; font-style: normal;
+    color: #05a;
+    margin: 0; padding: 5px;
+    opacity: 0.27;
+    border-bottom: 1px solid #05a;
+}
+
+
+/** micro-positioning classes
+ * -----------------------------------------------------------------------------
+ */
+
+.max420px { max-width: 420px; width: 100%; }
+.max480px { max-width: 480px; width: 100%; }
+.max540px { max-width: 540px; width: 100%; }
+.max720px { max-width: 720px; width: 100%; }
+.bottom3em { padding-bottom: 3em; }
+
+
+
+
+/** central form
+ * -----------------------------------------------------------------------------
+ * includes login / invitation / reset password forms
+ */
+
+.central-form .container {
+    display: flex;
+    min-height: 100vh;
+    align-items:center;
+}
+.central-form .content {
+    width: 100%;
+    margin: auto auto; padding: .5em;
+    font-size: .78em;
+}
+
+.central-form .content-form {
+    padding: 1.5em;
+    background: var(--light-grey-layer-bgr);
+    border-radius: 8px;
+    box-shadow: var(--light-grey-shade);
+    border: var(--form-layer-border);
+}
+
+.central-form .content .info { padding: 1.5em; font-size: .92em; }
+.central-form .content .info p {
+    color: #554e;
+    font-size: .9rem;
+    line-height: 150%;
+}
+
+.central-form form label { font-size: 14px; }
+
+.central-form h4 { font-size: 1.24rem; }
+
 
 
 /* main layout classes
diff --git a/public/assets/css/overides.css b/public/assets/css/overides.css
index 3fd143f..aa3173a 100644
--- a/public/assets/css/overides.css
+++ b/public/assets/css/overides.css
@@ -2,14 +2,14 @@
     --bs-heading-color: #679;
 }
 
-html, body, select, select option, .select2-selection__choice { font-family: "Roboto Slab", serif; font-weight: 400; }
+.content { text-align: unset; }
 
-.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-weight: 400; };
+.form-control-sm { font-size: var(--form-content-font-size); }
 
-.content { text-align: unset; }
+input.form-control-sm { height: var(--form-input-height); }
 
-.form-group { margin-bottom: 8px; }
-.form-control, .form-select { border: 1px solid #7777; font-size: .857em; }
+.form-group { margin-bottom: 12px; }
+.form-control, .form-select { border: 1px solid #7777; }
 .form-label { font-size: .72em; color: var(--bs-heading-color); }
 
 .footer__listLink { color: #bbb; }
@@ -49,7 +49,10 @@ html, body, select, select option, .select2-selection__choice { font-family: "Ro
 .admin-container .table > :not(caption) > * > * { padding: .35rem .35rem; }
 .admin-container .table tbody tr:hover { background: #eee; }
 
-ul.select2-results__options li { font-size: 14px; padding: 4px 8px; }
+ul.select2-results__options li {
+    font-size: var(--form-content-font-size);
+    padding: 4px 8px;
+}
 
 .admin-container .modal-footer .form-actions { display: flex; gap: 8px; }
 
@@ -74,7 +77,6 @@ ul.select2-results__options li { font-size: 14px; padding: 4px 8px; }
     background-color: transparent;
     background-size: contain;
     border: none !important;
-    height: 16 !important;
     width: 12px !important;
     margin: auto !important;
     top: 12px !important;
@@ -82,49 +84,18 @@ ul.select2-results__options li { font-size: 14px; padding: 4px 8px; }
     height: 14px;
 }
 .select2-container--default .select2-selection--single .select2-selection__arrow { width: 24px; }
-.select2-container--default .select2-selection--single { height: 37px; } 
-/* ------------------------------------------------------------------------- end
-*/
-
-/*
-    .admin-container .edit-post textarea[name=intro] { height: 94px ;} 
-
-
-    .admin-container .post-media button.over-bar { margin: -26px 0 0 0; float: right; }
-    .admin-container .post-media ul {
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    padding: 6px;
-    }
-
-    .admin-container .post-media ul li {
-    border-bottom: 1px solid #ddd;
-    list-style-type: none;
-    padding: 3px 6px;
-
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    }
-    .admin-container .post-media ul li:last-child { border-bottom: none ;}
-    .admin-container .post-media ul li:hover { background: #eee; }
-
-    .admin-container .post-media li .btn-xs { font-size: 14px; width: 24px; height: 24px; padding:0; }
-
-    .classroom .edit-post textarea[name=body],
-    .classroom .edit-page textarea[name=body] {
-        min-height:320px;
-        font-family: Consolas, 'Ubuntu Mono','Courier New', Courier, monospace;
-        color: #333;
-    }
-
-*/
-
+.select2-container--default .select2-selection--single { height: var(--form-input-height); } 
 
 /** select2|multiple overides
  * --- -- -- - - -
  */
-input.select2-search__field { font-size: 15px; }
+input.select2-search__field { font-size: var(--form-content-font-size); }
+
+.select2-selection__choice {
+    font-size: var(--form-content-font-size);
+    font-weight: 400;
+}
+
 ul.select2-selection__rendered { margin-bottom: 0; }  /* select2: ul */
 .select2-container--default .select2-selection--multiple .select2-selection__choice { padding: 2px; }   /* select2: li */
 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { /* select2: button */
@@ -141,4 +112,59 @@ ul.select2-selection__rendered { margin-bottom: 0; }  /* select2: ul */
 .select2-container--default .select2-selection--single .select2-selection__clear { margin-right: 32px; }
   
 .select2-container .select2-selection--single .select2-selection__rendered { font-size: 15px; padding: 2px 20px 2px 8px; }
-  
\ No newline at end of file
+  
+.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
+    padding-left: 16px;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__arrow {
+    top: var(--select2-arrow-top);
+}
+
+
+
+
+
+/*
+================================================================================
+
+            - - - -- -- --- C H A N G E S --- -- -- - - -
+
+================================================================================
+*/
+
+
+
+/* overides.css | http://localhost/assets/css/overides.css */
+ 
+   
+  .select2-container .select2-selection--single .select2-selection__rendered {
+    font-size: var(--form-content-font-size);
+  }
+  
+  
+ 
+.central-form form label {
+    /* font-size: 14px; */
+    font-size: .92rem;  color: #554c;
+    }
+  
+  /* bootstrap.min.css | https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css */
+  
+  
+  
+
+
+
+  .select2-container--default .select2-selection--single:focus-visible,
+  .select2-container--focus .select2-selection--multiple {
+    border-color: #86b7fe;
+    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
+    outline: none;
+    color: var(--bs-body-color);
+  }
+
+  .select2-container--default.select2-container--focus .select2-selection--multiple {
+    border: 1px solid #86b7fe;;
+    outline: 0;
+  }
\ No newline at end of file