From 2cc42daaa7145e52051d6020d1936923222b01df Mon Sep 17 00:00:00 2001 From: Ludovic <54670129+lbr38@users.noreply.github.com> Date: Tue, 14 Jul 2026 15:31:57 +0200 Subject: [PATCH] 6.11.2 --- www/public/resources/js/classes/ConfirmBox.js | 4 +- www/public/resources/js/classes/EChart.js | 29 ++-- www/public/resources/js/classes/Layout.js | 5 + www/public/resources/js/classes/Modal.js | 25 ++-- www/public/resources/styles/common.css | 136 +++++++++++++++--- .../resources/styles/components/button.css | 100 +++++++++---- .../styles/components/confirmbox.css | 38 +++-- .../resources/styles/components/input.css | 16 ++- .../resources/styles/components/label.css | 45 +++--- .../resources/styles/components/layout.css | 2 +- 10 files changed, 302 insertions(+), 98 deletions(-) diff --git a/www/public/resources/js/classes/ConfirmBox.js b/www/public/resources/js/classes/ConfirmBox.js index e7c33e78..158d4d98 100644 --- a/www/public/resources/js/classes/ConfirmBox.js +++ b/www/public/resources/js/classes/ConfirmBox.js @@ -17,7 +17,7 @@ class ConfirmBox // If there is a title if (data.title != "") { - innerHtml += '
'; + innerHtml += '
'; innerHtml += '
' + data.title.toUpperCase() + '
'; innerHtml += ''; innerHtml += '
'; @@ -38,7 +38,7 @@ class ConfirmBox if (!empty(data.buttons)) { var id = 0; for (const [key, value] of Object.entries(data.buttons)) { - innerHtml += '
' + value.text + '
'; + innerHtml += '
' + value.text + '
'; id++; } } diff --git a/www/public/resources/js/classes/EChart.js b/www/public/resources/js/classes/EChart.js index 9f7ec30c..02a0d27c 100644 --- a/www/public/resources/js/classes/EChart.js +++ b/www/public/resources/js/classes/EChart.js @@ -11,7 +11,6 @@ class EChart // Static registry to store all chart instances for external access static instances = {}; - // If on mobile, default to 1 day range, otherwise 3 days constructor(type, id, autoUpdate = true, autoUpdateInterval = 15000, days = 1, wasInNaturalState = true, periodChanged = false, preservedCurrentType = null) { this.id = id; @@ -25,8 +24,8 @@ class EChart this._periodChanged = periodChanged; this.datasets = []; this.labels = []; - this.chartOptions = []; - this.animate = ''; + this.chartOptions = {}; + this._resizeHandler = null; // Default options (will be cloned before use) this.baseOptions = { @@ -537,7 +536,7 @@ class EChart type: 'pie', roseType: 'radius', radius: [innerRadius, outerRadius], // Configurable radius values - center: ['50%', '50%'], + center: this.chartOptions?.title?.text ? ['50%', '57%'] : ['50%', '50%'], itemStyle: { borderRadius: 2 }, @@ -556,7 +555,7 @@ class EChart }); } - if (this.type === 'doughnut') { + if (this.currentType === 'doughnut') { return this.datasets.map(dataset => { const data = dataset.data.map((v, i) => { const item = { @@ -968,6 +967,12 @@ class EChart options.xAxis.axisLabel.textStyle = { color: '#8A99AA' }; + + // Show all bars by default (override the 80-100% default zoom) + options.dataZoom[0].start = 0; + options.dataZoom[0].end = 100; + options.dataZoom[1].start = 0; + options.dataZoom[1].end = 100; } // For horizontal bar charts, just swap the axes (same as vertical but inverted) @@ -999,6 +1004,9 @@ class EChart if (this.chartOptions.title?.text) { options.title.text = this.chartOptions.title.text; options.title.left = this.chartOptions.title.align || 'left'; + if (this.chartOptions.title.fontSize !== undefined) { + options.title.textStyle.fontSize = this.chartOptions.title.fontSize; + } } // Y-axis features @@ -1235,9 +1243,8 @@ class EChart } // Handle window resize - window.addEventListener('resize', () => { - chart.resize(); - }); + this._resizeHandler = () => { chart.resize(); }; + window.addEventListener('resize', this._resizeHandler); } // helper local formatter (use user's locale and local timezone) @@ -1360,6 +1367,12 @@ EChart.destroyInstance = function(chartId) { if (instance) { instance.stopAutoUpdate(); + // Remove resize listener + if (instance._resizeHandler) { + window.removeEventListener('resize', instance._resizeHandler); + instance._resizeHandler = null; + } + // Clean up DOM element reference const chartElement = document.querySelector("#" + chartId); if (chartElement && chartElement._chartInstance) { diff --git a/www/public/resources/js/classes/Layout.js b/www/public/resources/js/classes/Layout.js index 558f523e..a98d72a7 100644 --- a/www/public/resources/js/classes/Layout.js +++ b/www/public/resources/js/classes/Layout.js @@ -56,6 +56,11 @@ class Layout { $('body').append('
'); } + toggleElementById(id) + { + $('#' + id).toggle(); + } + /** * Reload opened or closed elements that where opened/closed before reloading */ diff --git a/www/public/resources/js/classes/Modal.js b/www/public/resources/js/classes/Modal.js index 8cf4d875..fea9edc6 100644 --- a/www/public/resources/js/classes/Modal.js +++ b/www/public/resources/js/classes/Modal.js @@ -38,18 +38,6 @@ class Modal // Remove existing modal loading window if any $('.modal-window-container.modal-loading').remove(); - // Parse content and if a line contains [ERR] or [WRN], color it accordingly - content = content.split('\n').map(function(line) { - if (line.includes('[ERR]')) { - return '' + line + ''; - } - if (line.includes('[WRN]')) { - return '' + line + ''; - } - - return line; - }).join('\n'); - // Generate content var html = '
' + '
' @@ -61,6 +49,19 @@ class Modal // If content must be wrapped in a 
 tag
         if (inPre) {
+            // Escape HTML entities first to prevent XML/HTML tags from being interpreted by the browser,
+            // then apply [ERR]/[WRN] coloring
+            content = content.split('\n').map(function(line) {
+                const escaped = line.replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"');
+                if (escaped.includes('[ERR]')) {
+                    return '' + escaped + '';
+                }
+                if (escaped.includes('[WRN]')) {
+                    return '' + escaped + '';
+                }
+
+                return escaped;
+            }).join('\n');
             html += '
' + content + '
';
         } else {
             html += content;
diff --git a/www/public/resources/styles/common.css b/www/public/resources/styles/common.css
index 3e00763d..eb45a810 100644
--- a/www/public/resources/styles/common.css
+++ b/www/public/resources/styles/common.css
@@ -1,5 +1,5 @@
 /**
- *  v1.21
+ *  v1.22
  */
 @font-face{font-family: 'Roboto'; src: url('/assets/fonts/Roboto/Roboto-Regular.ttf') format('truetype');}
 
@@ -54,7 +54,7 @@ h1, h2, h3, h4 {
 h3 {
     width: max-content;
     font-size: 18px;
-    margin: 50px 0 40px 0;
+    margin: 40px 0 40px 0;
     border-bottom: 1px solid #15bf7f;
 }
 
@@ -88,6 +88,57 @@ h6 {
     word-break: break-all;
 }
 
+.note-link {
+    font-size: 13px;
+    font-weight: bold;
+}
+
+.note-link::before {
+    filter: brightness(0) saturate(100%) invert(72%) sepia(2%) saturate(2168%) hue-rotate(169deg) brightness(95%) contrast(95%);
+    content: "";
+    background-image: url('/assets/icons/external-link.svg');
+    background-repeat: no-repeat;
+    background-size: contain;
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    margin-left: 4px;
+    margin-right: 1px;
+}
+
+.note-link:hover {
+    color: #ffffff;
+}
+
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    row-gap: 8px;
+    padding: 18px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    border: 1px dashed #5473e8;
+    border-radius: 20px;
+    background-color: #13263a;
+}
+
+.empty-state p {
+    margin: 0;
+}
+
+.empty-state-title {
+    font-weight: bold;
+}
+
+.empty-state-actions {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 10px;
+    row-gap: 8px;
+    margin-top: 4px;
+}
+
 .required::after {
     content: ' *';
     font-size: 12px;
@@ -166,8 +217,9 @@ pre.codeblock {
 .overflowy-hidden{overflow-y:hidden}
 .flex{display:flex!important;}
 .flex-div-15 { flex: 0 0 14%; }.flex-div-20 { flex: 0 0 19%; }.flex-div-25 { flex: 0 0 24%; }.flex-div-30 { flex: 0 0 29%; }
-.flex-div-33 { flex: 0 0 32%; }.flex-div-40 { flex: 0 0 39%; }.flex-div-50 { flex: 0 0 47%; }.flex-div-60 { flex: 0 0 59%; }
+.flex-div-33 { flex: 0 0 32%; }.flex-div-40 { flex: 0 0 39%; }.flex-div-50 { flex: 0 0 48.5%; }.flex-div-60 { flex: 0 0 59%; }
 .flex-div-65 { flex: 0 0 64%; }.flex-div-68 { flex: 0 0 67%; }.flex-div-80 { flex: 0 0 79%; }.flex-div-90 { flex: 0 0 90%; }.flex-div-100 { flex: 0 0 98%; }
+.flex-1{flex:1;}
 .flex-grow { flex-grow: 1; }
 .flex-wrap { flex-wrap: wrap; }
 .flex-nowrap { flex-wrap: nowrap; }
@@ -194,6 +246,7 @@ pre.codeblock {
 /* For responsive */
 /* column on mobile */
 .flexrc{display:flex;flex-direction: column;}
+.flex-wrap-mobile{flex-wrap:wrap;}
 .hide-mobile{display:none!important;}
 .justify-center {justify-content: center}
 .justify-space-between {justify-content: space-between}
@@ -224,14 +277,15 @@ pre.codeblock {
 .margin-top-0 {margin-top: 0px !important}.margin-top-5 {margin-top: 5px !important}.margin-top-8{margin-top:8px!important}.margin-top-10 {margin-top: 10px !important}.margin-top-15 {margin-top: 15px !important}.margin-top-20 {margin-top: 20px !important}.margin-top-30 {margin-top: 30px !important}.margin-top-40 {margin-top: 40px !important}.margin-top-50{margin-top:50px !important}
 .margin-bottom-0 {margin-bottom: 0px !important}.margin-bottom-5 {margin-bottom: 5px !important}.margin-bottom-8{margin-bottom:8px!important}.margin-bottom-10 {margin-bottom: 10px !important}.margin-bottom-15 {margin-bottom: 15px !important}.margin-bottom-20 {margin-bottom: 20px !important}.margin-bottom-30 {margin-bottom: 30px !important}.margin-bottom-40 {margin-bottom: 40px !important} .margin-bottom-50{margin-bottom:50px!important}
 .min-height-100{min-height:100px!important}.min-height-120{min-height:120px!important}.min-height-150{min-height:150px!important}.min-height-200{min-height:200px!important}.min-height-300{min-height:300px!important}.min-height-400{min-height:400px!important}.min-height-500{min-height:500px!important}.min-height-600{min-height:600px!important}.min-height-700{min-height:700px!important}.min-height-800{min-height:800px!important}.min-height-900{min-height:900px!important}.min-height-1000{min-height:1000px!important}
-.min-width-100 {min-width: 100px}.min-width-200 {min-width: 200px}.min-width-300 {min-width: 300px}.min-width-400 {min-width: 400px}.min-width-500 {min-width: 500px}.min-width-600 {min-width: 600px}.min-width-700 {min-width: 700px}.min-width-800 {min-width: 800px}.min-width-900 {min-width: 900px}.min-width-1000 {min-width: 1000px}
+.min-width-100 {min-width: 100px}.min-width-150{min-width: 150px}.min-width-200 {min-width: 200px}.min-width-300 {min-width: 300px}.min-width-400 {min-width: 400px}.min-width-500 {min-width: 500px}.min-width-600 {min-width: 600px}.min-width-700 {min-width: 700px}.min-width-800 {min-width: 800px}.min-width-900 {min-width: 900px}.min-width-1000 {min-width: 1000px}
 .min-height-50vh{min-height:50vh}.min-height-90vh{min-height:90vh}.min-height-100vh{min-height:100vh}
 .min-width-100vw{min-width:100vw}
-.width-100{width:100%}
+.width-50{width:50%}.width-100{width:100%}
 .height-100{height:100%}
 .max-width-fit{max-width:fit-content}
 .max-width-80{max-width:80px}.max-width-100{max-width:100px}.max-width-200{max-width:200px}.max-width-300{max-width:300px}.max-width-400{max-width:400px}.max-width-500{max-width:500px}.max-width-600{max-width:600px}.max-width-700{max-width:700px}.max-width-800{max-width:800px}.max-width-900{max-width:900px}.max-width-1000{max-width:1000px}
 .resize-disabled{resize:none;}
+.dot{font-family: 'Roboto', 'Arial', sans-serif;font-size: 13px;}
 
 code {
     font-family: monospace, monospace;
@@ -265,44 +319,83 @@ code {
     grid-template-columns: fit-content(33%) auto 10%;
 }
 
+.table-container-2 {
+    grid-template-columns: auto 10%;
+}
+
+/**
+ *  Generic modern list items for slide panels
+ */
+.table-container-2.panel-list-item {
+    padding: 12px 18px;
+    border: 1px solid rgba(52, 97, 136, 0.45);
+    border-left: 3px solid #1e3a54;
+    /* border-radius: 10px; */
+    background:
+        linear-gradient(135deg, rgba(17, 33, 50, 0.82), rgba(23, 44, 66, 0.7));
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.03),
+        0 6px 16px rgba(7, 14, 24, 0.24);
+    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
+}
+
+.table-container-2.panel-list-item:hover {
+    background:
+        linear-gradient(135deg, rgba(20, 38, 57, 0.9), rgba(27, 50, 74, 0.76)) !important;
+    border-top-color: rgba(76, 132, 178, 0.58);
+    border-right-color: rgba(76, 132, 178, 0.58);
+    border-bottom-color: rgba(76, 132, 178, 0.58);
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.04),
+        0 8px 20px rgba(8, 16, 28, 0.3);
+}
+
 [class*=' pagination-btn'],[class^='pagination-btn'] {
     display: flex;
     align-items: center;
     justify-content: center;
-    min-width: 35px;
+    min-width: 32px;
     height: 30px;
-    border: none;
-    border-radius: 60px;
-    color: white;
+    border: 1px solid #2d5575;
+    border-radius: 6px;
+    color: #97a5b4;
     text-align: center;
     text-decoration: none;
-    font-size: 14px;
+    font-size: 13px;
     cursor: pointer;
-    background-color: #15bf7f;
-    border-radius: 0;
+    background-color: transparent;
+    margin: 0 2px;
+    transition: all 0.15s ease;
 }
 
 [class*=' pagination-btn']:hover,[class^='pagination-btn']:hover {
-    background-color: #12a16a;
+    background-color: rgba(34, 56, 79, 0.6);
+    border-color: #3d7aab;
+    color: #ffffff;
 }
 
 .pagination-btn-current {
-    background-color: #12a16a;
-    border: 1px solid #10885a;
+    background-color: rgba(21, 191, 127, 0.15);
+    border-color: #15bf7f;
+    color: #15bf7f;
+}
+
+.pagination-btn-current:hover {
+    background-color: rgba(21, 191, 127, 0.25);
+    border-color: #15bf7f;
+    color: #15bf7f;
 }
 
 .pagination-btn-first {
-    border-top-left-radius: 60px;
-    border-bottom-left-radius: 60px;
+    border-radius: 6px;
 }
 
 .pagination-btn-last {
-    border-top-right-radius: 60px;
-    border-bottom-right-radius: 60px;
+    border-radius: 6px;
 }
 
 .pagination-btn-previous, .pagination-btn-next {
-    width: 40px;
+    width: 35px;
 }
 
 .round-item {
@@ -395,6 +488,7 @@ code {
     .grid-rfr-1-6{grid-template-columns:repeat(6, 1fr)!important}
     .grid-rfr-2-4{grid-template-columns:repeat(4, 1fr)!important}
     .flexrc{flex-direction:row!important;}
+    .flex-wrap-mobile{flex-wrap:nowrap!important;}
     .hide-mobile{display:initial!important;}
     .d-align-item-center{align-items:center!important;}
     .table-container-3{grid-template-columns: fit-content(10%) auto 10%!important}
@@ -406,4 +500,4 @@ code {
     #loading {
         display: flex;
     }
-}
\ No newline at end of file
+}
diff --git a/www/public/resources/styles/components/button.css b/www/public/resources/styles/components/button.css
index 368443e0..51d6d4a3 100644
--- a/www/public/resources/styles/components/button.css
+++ b/www/public/resources/styles/components/button.css
@@ -1,7 +1,7 @@
 
 /* All buttons */
 [class^="btn-"], [class*=" btn-"], input::file-selector-button {
-    padding: 10px 5px 10px 5px;
+    padding: 10px;
     border: none;
     border-radius: 60px;
     color: white;
@@ -17,30 +17,46 @@
 .btn-large-tr, .btn-medium-tr, .btn-small-tr, .btn-xsmall-tr, .btn-xxsmall-tr, .btn-fit-tr, .round-btn-tr,
 .btn-large-tr-to-red, .btn-medium-tr-to-red, .btn-small-tr-to-red, .btn-xsmall-tr-to-red, .btn-xxsmall-tr-to-red, .btn-fit-tr-to-red, .round-btn-tr-to-red,
 .btn-auto-tr {
-    background-color: initial;
-    box-shadow: rgb(0 0 0) 0px 10px 13px -12px, rgb(0 0 0 / 15%) 0px 0px 10px 2px;
-    border: 1px solid #ffffff30;
+    background-color: transparent;
+    box-shadow: none;
+    border: 1.5px solid #ffffff45;
+    color: #cdd7e1;
 }
 
 /* All blue buttons */
 .btn-large-blue, .btn-medium-blue, .btn-small-blue, .btn-xsmall-blue, .btn-xxsmall-blue, .btn-fit-blue, .round-btn-blue, .btn-auto-blue {
-    background-color: #22384F;
+    background-color: transparent;
+    border: 1.5px solid #5473e8;
+    color: #5473e8;
+    box-shadow: none;
 }
 /* All blue alt buttons */
 .btn-large-blue-alt, .btn-medium-blue-alt, .btn-small-blue-alt, .btn-xsmall-blue-alt, .btn-xxsmall-blue-alt, .btn-fit-blue-alt, .round-btn-blue-alt, .btn-auto-blue-alt {
-    background-color: #24405b;
+    background-color: transparent;
+    border: 1.5px solid #5473e8;
+    color: #5473e8;
+    box-shadow: none;
 }
 /* All green buttons */
 .btn-large-green, .btn-medium-green, .btn-small-green, .btn-xsmall-green, .btn-xxsmall-green, .btn-fit-green, .round-btn-green, .btn-auto-green {
-    background-color: #15bf7f;
+    background-color: transparent;
+    border: 1.5px solid #15bf7f;
+    color: #15bf7f;
+    box-shadow: none;
 }
 /* All red buttons */
 .btn-large-red, .btn-medium-red, .btn-small-red, .btn-xsmall-red, .btn-xxsmall-red, .btn-fit-red, .round-btn-red, .btn-auto-red {
-    background-color: #F32F63;
+    background-color: transparent;
+    border: 1.5px solid #F32F63;
+    color: #F32F63;
+    box-shadow: none;
 }
 /* All yellow buttons */
 .btn-large-yellow, .btn-medium-yellow, .btn-small-yellow, .btn-xsmall-yellow, .btn-xxsmall-yellow, .btn-fit-yellow, .round-btn-yellow, .btn-auto-yellow {
-    background-color: #ffb536;
+    background-color: transparent;
+    border: 1.5px solid #ffb536;
+    color: #ffb536;
+    box-shadow: none;
 }
 /* All auto buttons */
 .btn-auto-blue, .btn-auto-blue-alt, .btn-auto-green, .btn-auto-red, .btn-auto-yellow {
@@ -86,19 +102,29 @@
 }
 
 /* All blue buttons (hover) */
-.btn-large-blue:hover, .btn-medium-blue:hover, .btn-small-blue:hover, .btn-xsmall-blue:hover, .btn-xxsmall-blue:hover, .btn-fit-blue:hover, .round-btn-blue:hover, .btn-auto-blue:hover {
+.btn-large-blue:hover, .btn-medium-blue:hover, .btn-small-blue:hover, .btn-xsmall-blue:hover, .btn-xxsmall-blue:hover, .btn-fit-blue:hover, .round-btn-blue:hover, .btn-auto-blue:hover,
+.btn-large-blue-alt:hover, .btn-medium-blue-alt:hover, .btn-small-blue-alt:hover, .btn-xsmall-blue-alt:hover, .btn-xxsmall-blue-alt:hover, .btn-fit-blue-alt:hover, .round-btn-blue-alt:hover, .btn-auto-blue-alt:hover {
     transition-duration: 0.2s;
-    background-color: #1e3a54;
+    background-color: rgba(84, 115, 232, 0.15);
+    color: #ffffff;
 }
 /* All green buttons (hover) */
 .btn-large-green:hover, .btn-medium-green:hover, .btn-small-green:hover, .btn-xsmall-green:hover, .btn-xxsmall-green:hover, .btn-fit-green:hover, .round-btn-green:hover, .btn-auto-green:hover {
     transition-duration: 0.2s;
-    background-color: #12a16a;
+    background-color: rgba(21, 191, 127, 0.15);
+    color: #ffffff;
 }
 /* All red buttons (hover) */
 .btn-large-red:hover, .btn-medium-red:hover, .btn-small-red:hover, .btn-xsmall-red:hover, .btn-xxsmall-red:hover, .btn-fit-red:hover, .round-btn-red:hover, .btn-auto-red:hover {
     transition-duration: 0.2s;
-    background-color: #f10e4b;
+    background-color: rgba(243, 47, 99, 0.15);
+    color: #ffffff;
+}
+/* All yellow buttons (hover) */
+.btn-large-yellow:hover, .btn-medium-yellow:hover, .btn-small-yellow:hover, .btn-xsmall-yellow:hover, .btn-xxsmall-yellow:hover, .btn-fit-yellow:hover, .round-btn-yellow:hover, .btn-auto-yellow:hover {
+    transition-duration: 0.2s;
+    background-color: rgba(255, 181, 54, 0.15);
+    color: #ffffff;
 }
 
 /**
@@ -140,10 +166,10 @@
     transition: max-width 0.7s;
     margin: 0 3px 0 3px;
     color: white;
-    /* background-color: #15bf7f; */
     border-radius: 60px;
     cursor: pointer;
-    /* box-shadow: rgba(12, 18, 20, 0.504) 0px 0px 10px 1px; */
+    font-family: 'archivo';
+    font-weight: 700;
 }
 [class^="slide-btn"] img {
     width: 20px;
@@ -168,6 +194,26 @@
 .slide-btn-yellow:hover {
     background-color: #eb984e;
 }
+.slide-btn-green {
+    background-color: rgba(21, 191, 127, 0.22);
+    border: 1px solid rgba(21, 191, 127, 0.8);
+}
+.slide-btn-green span {
+    color: #a0ffd9;
+}
+.slide-btn-green img {
+    filter: brightness(0) saturate(100%) invert(80%) sepia(30%) saturate(400%) hue-rotate(100deg) brightness(110%);
+}
+.slide-btn-green:hover {
+    background-color: rgba(21, 191, 127, 0.38);
+    border-color: #15bf7f;
+}
+.slide-btn-green:hover span {
+    color: #ffffff;
+}
+.slide-btn-green:hover img {
+    filter: brightness(0) invert(1);
+}
 .slide-btn-tr, .slide-btn-medium-tr {
     background-color: initial;
     box-shadow: rgb(32 25 25 / 50%) 0px 0px 15px 1px;
@@ -211,7 +257,8 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: #ccc;
+    background-color: rgba(255, 255, 255, 0.06);
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
     -webkit-transition: .4s;
     transition: .4s;
     border-radius: 34px;
@@ -223,21 +270,23 @@
     width: 16px;
     left: 2px;
     bottom: 2px;
-    background-color: white;
+    background-color: #8b98a5;
     -webkit-transition: .4s;
     transition: .4s;
     border-radius: 50%;
 }
 .onoff-switch-input:checked + .onoff-switch-slider {
-    background-color: #5473e8;
+    background-color: rgba(45, 212, 191, 0.12);
+    box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.35);
 }
 .onoff-switch-input:focus + .onoff-switch-slider {
-    box-shadow: 0 0 1px #5473e8;
+    box-shadow: 0 0 1px #2dd4bf;
 }
 .onoff-switch-input:checked + .onoff-switch-slider:before {
     -webkit-transform: translateX(15px);
     -ms-transform: translateX(15px);
     transform: translateX(15px);
+    background-color: #2dd4bf;
 }
 
 /**
@@ -264,14 +313,14 @@
 
 .switch-field label,
 .single-switch-field label {
-    background-color: white;
-    color: #3b3b3b;
+    background-color: rgba(255, 255, 255, 0.03);
+    color: #8b98a5;
     line-height: 1;
     text-align: center;
     padding: 6px 8px;
     margin-right: -1px;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: none;
     transition: all 0.1s ease-in-out;
 }
 
@@ -282,9 +331,10 @@
 
 .switch-field input:checked + label,
 .single-switch-field input:checked + label {
-    background-color: #5473e8;
+    background-color: rgba(45, 212, 191, 0.12);
+    border-color: rgba(45, 212, 191, 0.35);
     box-shadow: none;
-    color: white;
+    color: #2dd4bf;
 }
 
 .switch-field label:first-of-type {
diff --git a/www/public/resources/styles/components/confirmbox.css b/www/public/resources/styles/components/confirmbox.css
index 7c2f16a2..5c71416b 100644
--- a/www/public/resources/styles/components/confirmbox.css
+++ b/www/public/resources/styles/components/confirmbox.css
@@ -7,20 +7,17 @@
     align-items: flex-start;
     visibility: hidden;
     min-height: 20px;
-    padding: 20px 0px 20px 0px;
+    padding: 20px 0px;
     font-size: 16px;
     position: fixed;
-    bottom: 0;
-    right: -1000px;
     bottom: 50px;
+    right: -1000px;
     z-index: 1000;
-    background-color: #22384F;
-    box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
+    background-color: #182b3e;
+    border: 1px solid #24405c;
+    border-radius: 20px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
     color: white;
-    border-radius: 20px 0 0 20px;
-    border-left: 5px solid #15bf7f;
-    border-top: 1px solid #d1d1d11f;
-    border-bottom: 1px solid #d1d1d11f;
 }
 
 .confirm-box-cancel-btn {
@@ -30,6 +27,29 @@
     cursor: pointer;
 }
 
+.confirm-box .confirm-box-btn {
+    padding: 10px 5px;
+    border-radius: 12px;
+    border: 1px solid #2e5275;
+    background-color: rgba(34, 56, 79, 0.6);
+    box-shadow: none;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.confirm-box .confirm-box-btn:hover {
+    background-color: rgba(79, 195, 247, 0.12);
+    border-color: rgba(79, 195, 247, 0.4);
+}
+
+.confirm-box .confirm-box-btn.btn-auto-red {
+    border-color: #F32F63;
+}
+
+.confirm-box .confirm-box-btn.btn-auto-red:hover {
+    border-color: #F32F63;
+    background-color: rgba(243, 47, 99, 0.15);
+}
+
 /* Desktop configuration */
 @media (min-width:1025px) {
     .confirm-box {
diff --git a/www/public/resources/styles/components/input.css b/www/public/resources/styles/components/input.css
index f7fd1156..6948497a 100644
--- a/www/public/resources/styles/components/input.css
+++ b/www/public/resources/styles/components/input.css
@@ -7,12 +7,18 @@ input[type=text], input[type=date], input[type=time], input[type=number], input[
     margin-top: 4px;
     margin-bottom: 4px;
     padding-left: 10px;
-    border: none;
+    border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 20px;
     box-sizing: border-box;
     font-size: 14px;
     color: white;
     background-color:#22384F;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+input[type=text]:focus, input[type=date]:focus, input[type=time]:focus, input[type=number]:focus, input[type=email]:focus, input[type=password]:focus, select:focus {
+    outline: none;
+    border-color: rgba(84, 115, 232, 0.8);
+    box-shadow: 0 0 10px rgba(84, 115, 232, 0.25);
 }
 input[type=file] {
     background: none !important;
@@ -133,7 +139,13 @@ textarea {
     color: white;
     background-color:#22384F;
     border-radius: 16px;
-    border: none;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+textarea:focus {
+    outline: none;
+    border-color: rgba(84, 115, 232, 0.8);
+    box-shadow: 0 0 10px rgba(84, 115, 232, 0.25);
 }
 .textarea-100 {
     min-height: 100px;
diff --git a/www/public/resources/styles/components/label.css b/www/public/resources/styles/components/label.css
index b61b9e1f..fcc45853 100644
--- a/www/public/resources/styles/components/label.css
+++ b/www/public/resources/styles/components/label.css
@@ -1,16 +1,19 @@
 
 [class^="label"] {
+    font-family: 'archivo';
+    font-weight: 600;
     font-size: 13px;
+    letter-spacing: 0.2px;
     vertical-align: middle;
     display: inline-block;
-    padding: 6px;
+    padding: 6px 10px;
     min-width: 12px;
     min-height: 12px;
     line-height: 12px !important;
     text-align: center;
-    border-radius: 60px;
-    color: white;
-    box-shadow: rgb(12 18 20 / 67%) 0px 0px 0px 1px;
+    border-radius: 20px;
+    background: transparent;
+    box-shadow: none;
 }
 .label-icon-tr {
     display: grid;
@@ -28,29 +31,35 @@
     border: 1px solid #24405c;
     color: white;
     text-align: left;
-    box-shadow: rgb(12 18 20 / 67%) 0px 0px 0px 1px;
-}
-.label-black {
-    background-color: rgb(46, 54, 58);
-    box-shadow: rgb(12 18 20 / 67%) 0px 0px 0px 1px;
+    box-shadow: none;
 }
-.label-white {
-    background-color: white;
-    color: #000000d9;
+
+.label-white, .label-black {
+    color: #c0d0e2;
+    border-color: #c0d0e2;
+    border: 1.5px solid #c0d0e2;
 }
 .label-green {
-    background-color: #15bf7f;
+    color: #15bf7f;
+    border-color: #15bf7f;
+    border: 1.5px solid #15bf7f;
 }
 .label-blue {
-    background-color: #5473e8;
+    color: #5473e8;
+    border-color: #5473e8;
+    border: 1.5px solid #5473e8;
 }
 .label-red {
-    background-color: #F32F63;
+    color: #F32F63;
+    border-color: #F32F63;
+    border: 1.5px solid #F32F63;
 }
 .label-yellow {
-    background-color: #ffb536;
+    color: #ffb536;
+    border-color: #ffb536;
+    border: 1.5px solid #ffb536;
 }
 .label-tr {
-    background-color: initial;
-    border: 1px solid #24405c;
+    color: #8A99AA;
+    border-color: #24405c;
 }
diff --git a/www/public/resources/styles/components/layout.css b/www/public/resources/styles/components/layout.css
index c761c141..275156b6 100644
--- a/www/public/resources/styles/components/layout.css
+++ b/www/public/resources/styles/components/layout.css
@@ -12,12 +12,12 @@ body {
 }
 
 .div-generic-blue {
-    position: relative;
     padding: 15px;
     margin-bottom: 30px;
     border-radius: 20px;
     background-color: #182b3e;
     box-shadow: rgb(0 0 0) 0px 10px 13px -12px, rgb(0 0 0 / 15%) 0px 0px 10px 2px;
+    border: 1px solid #1a4a6a;
 }
 
 .div-generic-blue h3 {