@datama/light 0.2.0 → 0.4.0

package/dist/compare.css

@@ -936,6 +936,11 @@ div[data-app="true"] .datama-italic {
 .h-auto {
     height: auto !important;
 }
+
+.opacity-0 {
+    opacity: 0;
+}
+
 /*
  * DATAMA SAS
  * --------------
@@ -4339,6 +4344,14 @@ main.datama-light-modules .datama-light-introduction-section .datama-introductio
     opacity: 1;
     gap: 10px;
 }
+.datama-light-notifications > #container-center-container-center-footer-current-version-notification.datama-notification-show {
+    display: flex;
+    margin-bottom: 20px;
+    flex-direction: column;
+}
+.datama-light-notifications > #container-center-container-center-footer-current-version-notification span.datama-icon.arrow-up-right svg path {
+    fill: var(--color-white) !important;
+}
 .datama-light-notifications > .datama-notification.datama-notification-show::after {
     position: absolute;
     content: '✖';
@@ -5985,19 +5998,71 @@ div[data-app="true"] .reactive-checkbox {
 
 .plotter-legends {
     padding: 12px;
-    display: flex;
-    flex-direction: column;
     min-width: 80px; /* Minimum width to prevent text crushing */
     order: 1;
 }
-.plotter-legends > .plotter-legend {
+.plotter-legends-layout {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 8px;
+}
+.plotter-legends-actions {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+    flex-shrink: 0;
+	opacity: 0;
+}
+.plotter-legends-layout:hover .plotter-legends-actions {
+	opacity: 1;
+}
+.plotter-legends-list {
+    min-width: 0;
+    flex: 1;
+}
+.plotter-legend-sort-control {
+    margin: 0;
+    padding: 2px;
+	border: none;
+    border-radius: 6px;
+    background: rgba(var(--color-dark-rgb), 0.05);
+    color: rgba(var(--color-dark-rgb), 0.9);
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    transition: background-color .15s ease-in, border-color .15s ease-in, color .15s ease-in;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+.plotter-legend-sort-control:hover {
+    background-color: rgba(var(--color-dark-rgb), 0.04);
+}
+.plotter-legend-sort-control {
+    background-color: rgba(var(--datama-primary-rgb), 0.1);
+    color: var(--datama-primary);
+}
+.plotter-legend-sort-control:hover {
+    background-color: rgba(var(--datama-primary-rgb), 0.15);
+}
+.plotter-legend-sort-control > svg,
+.plotter-legend-sort-control > svg path
+{
+    display: block;
+    width: 16px;
+    height: 16px;
+	color: var(--datama-primary);
+    fill: var(--datama-primary);
+}
+.plotter-legends .plotter-legend {
     margin-bottom: 6px;
     line-height: 22px;
     display: flex;
     align-items: center;
     min-height: 22px;
 }
-.plotter-legends > .plotter-legend > svg {
+.plotter-legends .plotter-legend > svg {
     min-width: 20px;
     width: 20px;
     height: 20px;
@@ -6006,7 +6071,7 @@ div[data-app="true"] .reactive-checkbox {
     margin-right: 8px;
     flex-shrink: 0; /* Prevents icon size reduction */
 }
-.plotter-legends > .plotter-legend > span {
+.plotter-legends .plotter-legend > span {
     display: inline-block;
     font-size: 14px;
     max-height: 44px;
@@ -6031,6 +6096,19 @@ div[data-app="true"] .reactive-checkbox {
     opacity: 1;
 }
 
+.plotter-axis-sort-icon {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.plotter-axis-sort-icon.is-active-sort {
+    opacity: 1;
+}
+
+.plotter-axis-header:hover .plotter-axis-sort-icon {
+    opacity: 1;
+}
+
 .legend-disabled {
     opacity: 0.5 !important;
 }
@@ -6042,7 +6120,7 @@ div[data-app="true"] .reactive-checkbox {
         padding: 10px;
         min-width: 70px;
     }
-    .plotter-legends > .plotter-legend > span {
+    .plotter-legends .plotter-legend > span {
         font-size: 13px;
         max-height: 40px;
     }
@@ -6056,11 +6134,11 @@ div[data-app="true"] .reactive-checkbox {
         padding: 8px;
         min-width: 60px;
     }
-    .plotter-legends > .plotter-legend > span {
+    .plotter-legends .plotter-legend > span {
         font-size: 12px;
         max-height: 36px;
     }
-    .plotter-legends > .plotter-legend > svg {
+    .plotter-legends .plotter-legend > svg {
         width: 18px;
         height: 18px;
         margin-right: 6px;
@@ -6072,13 +6150,13 @@ div[data-app="true"] .reactive-checkbox {
         padding: 6px;
         min-width: 50px;
     }
-    .plotter-legends > .plotter-legend > span {
+    .plotter-legends .plotter-legend > span {
         font-size: 11px;
         max-height: 32px;
         -webkit-line-clamp: 1; /* Single line on very small screens */
         line-clamp: 1;
     }
-    .plotter-legends > .plotter-legend > svg {
+    .plotter-legends .plotter-legend > svg {
         width: 16px;
         height: 16px;
         margin-right: 4px;