refactor, tab async loading on focus

front/css/app.css

@@ -2090,36 +2090,45 @@ input[readonly] {
 /* -----------------------------------------------------------------------------
    Spin
 ----------------------------------------------------------------------------- */
+#loadingSpinner {
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+    pointer-events: none;
+    display: block;
+    z-index: 999;
+}
+
+#loadingSpinner.visible {
+    opacity: 1;
+    pointer-events: auto;
+}
+
 .pa_semitransparent-panel {
     position: absolute;
-    width: 100%; /*calc (100% -40px);*/
+    width: 100%;
     height: 100%;
-    left: 0;
-    top: 0;
-    display: block;
-
-    opacity: 0.8;
     background-color: #fff;
-    z-index: 800;
+    opacity: 0.8;
+    z-index: 99;
 }
 
 .pa_spinner {
-    position: fixed;
-    left: 0;
-    right: 0;
+    position: absolute;
     top: 100px;
-    margin-left: auto;
-    margin-right: auto;
+    left: 50%;
+    transform: translateX(-50%);
     padding: 15px;
     width: 200px;
     background-color: #fff;
-    z-index: 801;
+    z-index: 1000;
 }
 
-#loadingSpinner
-{
-    z-index: 100;
-}
 
 /* Multi-edit adjustements */
 .box-header

front/css/dark-patch.css

@@ -10,6 +10,16 @@
 *
 * Additional fixes For Pi.Alert UI by leiweibau */
 
+:root {
+  --color-aqua: #00c0ef;
+  --color-lightblue: #3c8dbc;
+  --color-blue: #0060df;
+  --color-green: #00a65a;
+  --color-yellow: #f39c12;
+  --color-red: #dd4b39;
+  --color-gray: #8c8c8c;
+}
+
 :root {
   --datatable-bgcolor: rgba(64, 76, 88, 0.8);
 }
@@ -770,4 +780,9 @@ input[type="password"]::-webkit-caps-lock-indicator {
 .thresholdFormControl
 {
   color:#000;   
+}
+
+.btn:hover
+{
+  color: var(--color-gray);
 }

front/css/system-dark-patch.css

@@ -11,6 +11,16 @@
 * Additional fixes For Pi.Alert UI by leiweibau */
 
 @media (prefers-color-scheme: dark) {
+
+  :root {
+    --color-aqua: #00c0ef;
+    --color-lightblue: #3c8dbc;
+    --color-blue: #0060df;
+    --color-green: #00a65a;
+    --color-yellow: #f39c12;
+    --color-red: #dd4b39;
+    --color-gray: #8c8c8c;
+}
     
   :root {
     --datatable-bgcolor: rgba(64, 76, 88, 0.8);
@@ -781,3 +791,7 @@
   color:#000;   
 }
 
+.btn:hover
+{
+  color: var(--color-gray);
+}