Improvement of the color scheme of the table editor.

eveai_app/templates/eveai_ordered_list_editor.html

@@ -48,6 +48,8 @@ window.EveAI.OrderedListEditors = {
                 columns: columns,
                 layout: "fitColumns", // Changed to fitColumns to ensure columns display horizontally
                 movableRows: true,
+                movableRowsPlaceholder: false, // Don't use placeholder, show actual row content
+                movableRowsSender: "table", // Keep a copy of the row in the table while dragging
                 rowHeader: {headerSort:false, resizable: false, minWidth:30, width:30, rowHandle:true, formatter:"handle"},
                 maxHeight: "50%", // Auto height to display all rows
                 placeholder: "No Data Available",
@@ -534,6 +536,67 @@ document.addEventListener('DOMContentLoaded', function() {
     color: #ffffff !important; /* White text for contrast */
 }
 
+/* Style for row being moved */
+.ordered-list-editor .tabulator-row.tabulator-moving {
+    background-color: var(--bs-primary) !important; /* Primary color for moving rows */
+    color: #ffffff !important; /* White text for contrast */
+    border: 2px dashed var(--bs-secondary) !important; /* Dashed border to indicate movement */
+    opacity: 0.9 !important; /* Slightly transparent to distinguish from other rows */
+    box-shadow: 0 0 10px rgba(118, 89, 154, 0.5) !important; /* Shadow for depth */
+    z-index: 100 !important; /* Ensure it appears above other rows */
+    pointer-events: none !important; /* Allow events to pass through to elements below */
+    transform: scale(1.02) !important; /* Slightly larger to stand out */
+    transition: transform 0.2s ease !important; /* Smooth transition */
+}
+
+/* Style for cells in the row being moved */
+.ordered-list-editor .tabulator-row.tabulator-moving .tabulator-cell {
+    color: #ffffff !important; /* Ensure text is white for contrast */
+    background-color: transparent !important; /* Use the row's background color */
+    border-color: transparent !important; /* Hide cell borders */
+    display: table-cell !important; /* Ensure cells are visible */
+    overflow: visible !important; /* Show all content */
+}
+
+/* Style for the moving element (the ghost row that follows the cursor) */
+.tabulator-moving-element {
+    background-color: var(--bs-primary) !important; /* Primary color for moving element */
+    color: #ffffff !important; /* White text for contrast */
+    border: 2px dashed var(--bs-secondary) !important; /* Dashed border to indicate movement */
+    opacity: 0.9 !important; /* Slightly transparent */
+    box-shadow: 0 0 15px rgba(118, 89, 154, 0.7) !important; /* Stronger shadow for better visibility */
+    border-radius: 0.375rem !important; /* Rounded corners */
+    overflow: visible !important; /* Show all content */
+    width: auto !important; /* Allow width to adjust to content */
+    max-width: none !important; /* Don't limit width */
+    pointer-events: none !important; /* Allow events to pass through */
+    display: table !important; /* Ensure it's displayed as a table */
+    table-layout: fixed !important; /* Fixed table layout for consistent cell widths */
+}
+
+/* Style for cells in the moving element */
+.tabulator-moving-element .tabulator-cell,
+.tabulator-moving-element .tabulator-row .tabulator-cell {
+    color: #ffffff !important; /* White text for contrast */
+    background-color: transparent !important; /* Use the row's background color */
+    border-color: transparent !important; /* Hide cell borders */
+    display: table-cell !important; /* Ensure cells are visible */
+    overflow: visible !important; /* Show all content */
+    padding: 8px !important; /* Consistent padding */
+    white-space: normal !important; /* Allow text to wrap */
+    word-break: break-word !important; /* Break words to prevent overflow */
+    font-size: 0.85rem !important; /* Consistent font size */
+    vertical-align: middle !important; /* Center content vertically */
+}
+
+/* Style for the active moving element */
+.tabulator-moving-element-active {
+    opacity: 1 !important; /* Fully opaque when active */
+    transform: scale(1.05) !important; /* Slightly larger when active */
+    box-shadow: 0 0 20px rgba(118, 89, 154, 0.8) !important; /* Stronger shadow when active */
+    z-index: 1000 !important; /* Higher z-index to ensure it's on top */
+}
+
 /* Style for the table cells */
 .ordered-list-editor .tabulator-cell {
     padding: 8px;