1 files changed, 197 insertions, 62 deletions

diff --git a/public/assets/css/class.css b/public/assets/css/class.css
index 6e44227..fb3124a 100644
--- a/public/assets/css/class.css
+++ b/public/assets/css/class.css
@@ -1,24 +1,6 @@
-/** Office sections
- * (main layout css-classes)
- * -----------------------------------------------------------------------------
- *  .office {
- *      .top-bar {
- *          .breadcrumb
- *          .admin
- *      }
- *      .side-bar {
- *          .search
- *          .categories
- *      }
- *      .content
- *  }
- * -----------------------------------------------------------------------------
- */
-
-
-/* Variables
- * ----------------------------------------------------------------------------
- */
+/** Variables ** * *
+////////////////////////////////////////////////////////////////////////////////
+*/
 
 :root {
     --bs-heading-color: #458; /* header color */
@@ -35,7 +17,12 @@
     --form-content-font-size: .87rem;
     --form-input-height: 31px;
     --form-layer-bgr: #dddb; /* form layer background */
-    --select2-arrow-top: 8px;
+
+        /* select2 */
+    --select2-arrow-top: 10px;
+    --select2-height: 31px; 
+
+        /* main themed variables */
     --background-image: #fafafa; /* main background */
     --menu-hover-bgr: #def /* <-- spring-04 ; default: #def */;
     --info-text-color: #554e;
@@ -44,12 +31,18 @@
     --img-credit-bgr: #fff5;
     --img-credit-bgr-hover: #fffa;
     --img-credit-color: #333e;
-    --img-credit-hover-color: #f77;
-
-    
+    --img-credit-hover-color: #f77;  
 }
 
 
+
+
+
+/** Main styles ** * *
+////////////////////////////////////////////////////////////////////////////////
+*/
+
+
 html, body,
 select, select option {
     font-family: "Fira Sans", sans-serif;
@@ -81,6 +74,13 @@ html, body {
 }
 
 
+
+
+
+/** Buttons ** * *
+////////////////////////////////////////////////////////////////////////////////
+*/
+
 .btn-back2panel,
 .btn-preview { border: 1px solid #aaa7; background: #ddd; }
 
@@ -89,22 +89,43 @@ html, body {
 .btn-back2panel:hover,
 .btn-preview:hover { border: 1px solid #7777; background: #f5f5f5; }
 
+
+
+
+
+
+/** info panel ** * *
+////////////////////////////////////////////////////////////////////////////////
+*/
+
+.list-group { box-shadow: var(--light-grey-shade); }
+
 .info .list-group-item a { display: block; text-decoration: none; font-size: 14px; color: #444; padding: 8px 16px; }
-.info li.list-group-item { margin:0; padding: 0; }
-.info li.list-group-item:hover { background: #f2f2f2; }
-.info li.list-group-item.separator {
-    border: none; padding:2px 8px 1px;
-    background: #f2f2f299; color: #345;
-}
 
+.info li.list-group-item { margin:0; padding: 0; border-bottom: none; }
+.info li.list-group-item:hover { background: var(--menu-hover-bgr); }
 
+.info li.list-group-item.separator {
+    padding:2px 8px 1px;
+    border-bottom: none;
+    color: #776;
+    background: #fff;
+    border-top: 1px solid #edd;
+}
+.info li.list-group-item.separator:hover { background: #fff; }
 
 .info p { font-size: 14px; line-height: 200%; margin-bottom: .33em; }
 .info h4 { font-size: 16px; font-weight: 400; }
 
-/** micro-positioning classes
- * -----------------------------------------------------------------------------
- */
+
+
+
+
+
+
+/** panels width classes ** * *
+////////////////////////////////////////////////////////////////////////////////
+*/
 
 .max320px { max-width: 320px; width: 100%; }
 .max420px { max-width: 420px; width: 100%; }
@@ -116,10 +137,14 @@ html, body {
 .container { max-width: 1400px; }
 
 
-/** central form
- * -----------------------------------------------------------------------------
- * includes login / invitation / reset password forms
- */
+
+
+
+
+/** central form ** * *
+* includes login / invitation / reset password forms
+////////////////////////////////////////////////////////////////////////////////
+*/
 
 .central-form .container {
     display: flex;
@@ -160,34 +185,14 @@ html, body {
 .central-form .x7-lines textarea { height: 156px; }
 
 
-/* main layout classes
- * ----------------------------------------------------------------------------
- */
 
-.office .top-bar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px 14px;
-    border-bottom: 1px solid #ddd;
-    box-shadow: 1px 1px 7px #9997;
-    background: var(--light-grey-bgr);
-}
 
-.office .top-bar .fa,  
-.office .top-bar .fas {
-    width: 32px;
-    text-align: center;
-}
 
 
-.office .main-content {
-    padding: 1.5em;
-    max-width: 1440px;
-    min-height: calc(100vh - 345px);
-}
+/** credits ** * *
+////////////////////////////////////////////////////////////////////////////////
+*/
 
-.office .page-container { max-width: 1024px; }
 
 .image-credits { position: fixed;
     bottom: 8px; right: 8px;
@@ -201,6 +206,136 @@ html, body {
 }
 .image-credits a:hover { color: var(--img-credit-hover-color); }
 
+
+
+
+
+
+
+/** manage > datatable ** * *
+////////////////////////////////////////////////////////////////////////////////
+*/
+
+.manage { padding: 1.5em; } 
+.manage .title-bar h5 { margin-bottom: 1rem; } 
+
 .manage .table tbody tr:hover { background: #eeea; }
+.manage tbody, td, tfoot, th, thead, tr { background: #ddd4; }
+.manage tbody, td, tfoot, th, thead, tr.odd { background: #fff4; }
+.manage tbody td { font-size: 14px; }
+
+
+
+
+
+
+/** select2 ** * *
+////////////////////////////////////////////////////////////////////////////////
+*/
+
+
+/* hack select2-caret to match bootstrap-5 select-caret */
+ .select2-container--default .select2-selection--single .select2-selection__arrow b {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+    background-color: transparent; background-size: contain; border: none !important;
+    height: 14px; width: 12px;
+    margin: auto !important; top: var(--select2-arrow-top); left: auto !important;
+}
+
+ul.select2-results__options li {
+    font-size: var(--form-content-font-size);
+    padding: 4px 8px;
+}
+
+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-container--default .select2-selection--multiple .select2-selection__choice { padding: 2px; }   /* select2: li */
+
+.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
+    border-right: none;
+    padding: 1px 4px;
+}
+.select2-container--default .select2-selection--multiple { font-size: 15px; }
+
+.select2-container--default .select2-selection--single .select2-selection__clear { margin-right: 32px; }
+
+.select2-container .select2-selection--single .select2-selection__rendered {
+    font-size: var(--form-content-font-size);
+    padding: 2px 20px 2px 8px;
+}
+  
+.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
+    padding-left: 16px;
+}
+
+.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;
+}
+
+/* hide already selected options */
+.select2-results__option--selected { display: none; }
+
+/* select2 height */
+.select2-container .select2-selection--single { height: var(--select2-height); }  
+
+
+
+
+
+/*
+================================================================================
+
+            - - - -- -- --- C H A N G E S --- -- -- - - -
+                         (  o v e r i d e s  )
+
+================================================================================
+*/
+
+
+
+.content { text-align: unset; }
+
+.form-control-sm { font-size: var(--form-content-font-size); }
+
+input.form-control-sm { height: var(--form-input-height); }
+
+.form-group { margin-bottom: 12px; }
+.form-control, .form-select { border: 1px solid #7777; }
+.form-label { font-size: .72em; color: var(--bs-heading-color); }
+
+/* .user .dropdown button { min-width: 256px; } */
+.user .dropdown ul.dropdown-menu {
+  right: 0 !important;
+  left: unset !important;
+  transform: translate(0, 34px) !important;
+}
+ 
+ 
+.central-form form label { font-size: 14px; color: #433; }
+  
+
+
+.info li.list-group-item.separator {
+    border-left: 1px solid #dee2e6;
+    border-right: 1px solid #dee2e6;
+}
+  
+
+
+.btn-xs { height: 24px; padding: 1px 8px; font-size: 14px; }
 
-.select2-results__option--selected { display: none; }
\ No newline at end of file