refactor: organizzazione stili

Author: Pek5892

assets/src/css/style.css

@@ -42,6 +42,9 @@
     color: #000;
 }
 
+/* ===== LOADING INDICATORS ===== */
+
+/* Main loading overlay */
 #main_loading {
     display: block;
     position: fixed;
@@ -64,6 +67,46 @@
     z-index: 9999;
 }
 
+/* Mini loader */
+#mini-loader > div {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    margin-top: -50px;
+    margin-left: -50px;
+    z-index: 9000;
+    width: 100px;
+    height: 100px;
+    background: transparent url(../img/ajax-loader.gif) top left no-repeat;
+}
+
+/* Tiny loader */
+#tiny-loader {
+    position: fixed;
+    z-index: 9000;
+    width: 100%;
+    height: 100%;
+    top: 50%;
+    left: 50%;
+    background: transparent url(../img/ajax-loader.gif) top left no-repeat;
+}
+
+/* Component loader */
+.component-loader {
+    position: absolute;
+    z-index: 20;
+    opacity: 0.5;
+    width: 100%;
+    height: 100%;
+    background: #fff;
+}
+
+.component-loader > div {
+    position: relative;
+    top: 50%;
+    color: #333;
+}
+
 html {
     font-size: 13px;
     height: 100%;
@@ -236,27 +279,7 @@ a:focus {
 }
 
 
-#mini-loader > div{
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    margin-top: -50px;
-    margin-left: -50px;
-    z-index: 9000;
-    width: 100px;
-    height: 100px;
-    background: transparent url(../img/ajax-loader.gif) top left no-repeat;
-}
-
-#tiny-loader {
-    position: fixed;
-    z-index: 9000;
-    width: 100%;
-    height: 100%;
-    top: 50%;
-    left: 50%;
-    background: transparent url(../img/ajax-loader.gif) top left no-repeat;
-}
+/* Mini and tiny loaders moved to the loading indicators section */
 
 body .header .brand-link {
     font-family: inherit;
@@ -343,31 +366,39 @@ span.form-control {
 
 
 
-/* Tooltip dark */
+/* ===== UI TOOLTIP STYLES ===== */
 
 .ui-tooltip {
     background: #222;
     color: white;
     border: 0;
     font-size: 11px;
+    z-index: 9990;
 }
 
-/* Stili per i tooltip con testo troncato */
-.shorten-wrapper, .request-wrapper {
+/* ===== SHORTENED TEXT STYLES ===== */
+
+/* Wrapper for shortened text */
+.shorten-wrapper,
+.request-wrapper {
     position: relative;
     display: inline-block;
     width: 100%;
 }
 
-.shorten-full, .request-full {
+/* Full text display */
+.shorten-full,
+.request-full {
     word-wrap: break-word;
     white-space: normal;
     max-width: 100%;
     line-height: 1.5;
     margin-bottom: 10px;
 }
 
-/* Stile per il tooltip */
+/* ===== TOOLTIP STYLES ===== */
+
+/* Base tooltip styles */
 .tooltipster-shadow {
     border-radius: 4px !important;
     box-shadow: 0 3px 10px rgba(0,0,0,0.2) !important;
@@ -382,8 +413,10 @@ span.form-control {
 .tooltipster-base {
     max-width: 400px !important;
     width: 400px !important;
+    z-index: 10000; /* Consistent z-index for all tooltip states */
 }
 
+/* Tooltip header */
 .tooltip-header {
     position: relative;
     padding: 8px;
@@ -399,6 +432,7 @@ span.form-control {
     font-size: 14px;
 }
 
+/* Close button */
 .tooltip-close-button {
     position: absolute;
     top: 8px;
@@ -415,10 +449,10 @@ span.form-control {
 }
 
 .tooltip-close-button:hover {
-    background-color: rgba(255,255,255,0.4) !important;
+    background-color: rgba(255,255,255,0.4);
 }
 
-/* Stili per le informazioni nel tooltip */
+/* Tooltip content sections */
 .tooltip-info-section {
     margin-bottom: 15px;
     border-bottom: 1px solid #eee;
@@ -448,7 +482,9 @@ span.form-control {
     flex: 1;
 }
 
-.shorten-toggle, .request-toggle {
+/* Toggle buttons for shortened text */
+.shorten-toggle,
+.request-toggle {
     display: inline-block;
     margin: 5px 0;
     color: #fff;
@@ -457,7 +493,6 @@ span.form-control {
     border-radius: 3px;
     font-weight: bold;
     text-decoration: none;
-    z-index: 9999;
     position: relative;
     font-size: 12px;
     border: none;
@@ -468,7 +503,8 @@ span.form-control {
     transition: all 0.3s cubic-bezier(.25,.8,.25,1);
 }
 
-.shorten-toggle:hover, .request-toggle:hover {
+.shorten-toggle:hover,
+.request-toggle:hover {
     background-color: #367fa9;
     color: #fff;
     text-decoration: none;
@@ -692,20 +728,7 @@ input.small-width {
     font-weight: bold;
 }
 
-.component-loader {
-    position: absolute;
-    z-index: 20;
-    opacity: 0.5;
-    width: 100%;
-    height: 100%;
-    background: #fff;
-}
-
-.component-loader>div {
-    position: relative;
-    top: 50%;
-    color: #333;
-}
+/* Component loader moved to the loading indicators section */
 
 .btn-group-flex {
     display: flex;