Improvement of the color scheme of the table editor.

eveai_app/templates/eveai_ordered_list_editor.html

@@ -48,7 +48,7 @@ window.EveAI.OrderedListEditors = {
                 columns: columns,
                 layout: "fitColumns", // Changed to fitColumns to ensure columns display horizontally
                 movableRows: true,
-                {#rowHeader: {headerSort:false, resizable: false, minWidth:30, width:30, rowHandle:true, formatter:"handle"},#}
+                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",
                 autoResize: false,
@@ -372,9 +372,10 @@ document.addEventListener('DOMContentLoaded', function() {
     height: auto; /* Auto height to display all rows */
     min-height: 200px; /* Minimum height */
     width: 100%;
-    border: 1px solid #dee2e6;
+    border: 1px solid var(--bs-primary); /* Primary color for border */
-    border-radius: 0.25rem;
+    border-radius: 0.375rem; /* Match application's border-radius */
     margin-bottom: 0.5rem;
+    box-shadow: 0 4px 8px rgba(118, 89, 154, 0.2); /* Match application's shadow style */
 }
 
 /* Ensure the table holder has a scrollbar */
@@ -396,8 +397,14 @@ document.addEventListener('DOMContentLoaded', function() {
 /* Style for the handle column */
 .ordered-list-editor .tabulator-row-handle {
     cursor: move;
-    background-color: #f8f9fa;
+    background-color: var(--bs-light, #f8f9fa);
-    border-right: 1px solid #dee2e6;
+    border-right: 1px solid var(--bs-gray-300, #dee2e6);
+    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
+}
+
+/* Hover effect for handle column */
+.ordered-list-editor .tabulator-row:hover .tabulator-row-handle {
+    background-color: var(--bs-secondary); /* Secondary color on hover */
 }
 
 /* Style for the handle bars to make them more visible */
@@ -410,11 +417,17 @@ document.addEventListener('DOMContentLoaded', function() {
 }
 
 .ordered-list-editor .tabulator-row-handle-bar {
-    background: #666;
+    background: var(--bs-primary); /* Primary color for handle bars */
     display: inline-block;
     width: 10px;
     height: 2px;
     margin: 1px 0;
+    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
+}
+
+/* Change handle bar color on hover */
+.ordered-list-editor .tabulator-row:hover .tabulator-row-handle-bar {
+    background: #ffffff; /* White handle bars on hover */
 }
 
 /* Style for the delete button */
@@ -428,10 +441,27 @@ document.addEventListener('DOMContentLoaded', function() {
     text-align: center;
 }
 
+/* Style for boolean cell icons */
+.ordered-list-editor .tabulator-cell .material-icons {
+    font-size: 1.2rem;
+    vertical-align: middle;
+}
+
+/* Style for true/checked icons */
+.ordered-list-editor .tabulator-cell[aria-checked="true"] .material-icons {
+    color: var(--bs-primary); /* Primary color for checked state */
+}
+
+/* Style for false/unchecked icons */
+.ordered-list-editor .tabulator-cell[aria-checked="false"] .material-icons {
+    color: var(--bs-danger); /* Danger color for unchecked state */
+}
+
 /* Style for the table header */
 .ordered-list-editor .tabulator-header {
-    background-color: #f8f9fa;
+    background: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-secondary) 100%); /* Match JSE gradient */
-    border-bottom: 2px solid #dee2e6;
+    border-bottom: 2px solid var(--bs-secondary); /* Secondary color for border */
+    color: #ffffff; /* White text for better contrast on gradient */
 }
 
 /* Style for the headers container */
@@ -441,13 +471,14 @@ document.addEventListener('DOMContentLoaded', function() {
 
 /* Style for the header cells */
 .ordered-list-editor .tabulator-col {
-    background-color: #f8f9fa;
+    background: transparent; /* Let the header gradient show through */
     padding: 8px;
     font-weight: bold;
     text-align: center;
     display: table-cell !important; /* Force display as table cell */
     box-sizing: border-box !important; /* Include padding in width calculation */
     position: relative !important; /* Ensure proper positioning */
+    color: #ffffff; /* White text for better contrast on gradient */
 }
 
 /* Override any inline styles that might hide column headers */
@@ -466,15 +497,43 @@ document.addEventListener('DOMContentLoaded', function() {
     white-space: normal; /* Allow header text to wrap */
     word-break: break-word; /* Break words to prevent horizontal overflow */
     font-weight: bold;
-    color: #333;
+    color: #ffffff; /* White text for better contrast on gradient */
 }
 
 /* Style for the table rows */
 .ordered-list-editor .tabulator-row {
-    border-bottom: 1px solid #dee2e6;
+    border-bottom: 1px solid var(--bs-gray-300, #dee2e6); /* Match application's row border color */
     display: table-row !important; /* Force display as table row */
 }
 
+/* Hover effect for rows */
+.ordered-list-editor .tabulator-row:hover {
+    background-color: var(--bs-secondary) !important; /* Secondary color on hover */
+    color: #ffffff !important; /* White text on hover */
+}
+
+/* Ensure all text in hovered rows changes to white */
+.ordered-list-editor .tabulator-row:hover .tabulator-cell,
+.ordered-list-editor .tabulator-row:hover .tabulator-cell * {
+    color: #ffffff !important; /* White text for all elements in hovered rows */
+}
+
+/* Style for even rows */
+.ordered-list-editor .tabulator-row-even {
+    background-color: #f8f9fa; /* Light gray for even rows */
+}
+
+/* Style for odd rows */
+.ordered-list-editor .tabulator-row-odd {
+    background-color: #ffffff; /* White for odd rows */
+}
+
+/* Style for selected rows */
+.ordered-list-editor .tabulator-row.tabulator-selected {
+    background-color: var(--bs-primary) !important; /* Primary color for selected rows */
+    color: #ffffff !important; /* White text for contrast */
+}
+
 /* Style for the table cells */
 .ordered-list-editor .tabulator-cell {
     padding: 8px;
@@ -504,8 +563,13 @@ document.addEventListener('DOMContentLoaded', function() {
     right: 0;
     top: 50%;
     transform: translateY(-50%);
-    color: #007bff;
+    color: var(--bs-primary); /* Use primary color for the show more indicator */
     cursor: pointer;
+    transition: color 0.3s ease; /* Smooth transition for hover effect */
+}
+
+.ordered-list-editor .show-more:hover {
+    color: var(--bs-secondary); /* Use secondary color on hover */
 }
 
 /* Style for the visible cells */
@@ -523,18 +587,59 @@ document.addEventListener('DOMContentLoaded', function() {
     min-height: 60px;
     resize: vertical;
     width: 100%; /* Ensure textarea fills the cell */
+    border: 1px solid var(--bs-gray-300, #dee2e6); /* Match application's input border */
+    border-radius: 0.375rem; /* Match application's border-radius */
+    padding: 0.625rem 0.75rem; /* Match application's input padding */
+    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for focus effect */
+}
+
+/* Focus state for textarea */
+.ordered-list-editor .tabulator-cell textarea:focus {
+    border-color: var(--bs-primary); /* Primary color for focus state */
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem rgba(118, 89, 154, 0.25); /* Subtle glow with primary color */
 }
 
 /* Style for the placeholder */
 .ordered-list-editor .tabulator-placeholder {
     padding: 20px;
     text-align: center;
-    color: #6c757d;
+    color: var(--bs-secondary); /* Secondary color for placeholder text */
+    font-style: italic;
+    background-color: var(--bs-light, #f8f9fa); /* Light background for placeholder */
+    border-radius: 0.375rem; /* Match application's border-radius */
+    margin: 10px;
+    border: 1px dashed var(--bs-gray-300, #dee2e6); /* Dashed border for empty state */
 }
 
 /* Style for the Add Row button */
 .ordered-list-editor + .btn-primary {
     margin-top: 0.5rem;
+    background-color: var(--bs-primary) !important;
+    border-color: var(--bs-primary) !important;
+    color: #ffffff !important;
+    transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+/* Hover effect for primary button */
+.ordered-list-editor + .btn-primary:hover {
+    background-color: var(--bs-secondary) !important;
+    border-color: var(--bs-secondary) !important;
+}
+
+/* Style for the Expand button */
+.ordered-list-editor + .btn-primary + .btn-secondary {
+    margin-top: 0.5rem;
+    background-color: var(--bs-secondary) !important;
+    border-color: var(--bs-secondary) !important;
+    color: #ffffff !important;
+    transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+/* Hover effect for secondary button */
+.ordered-list-editor + .btn-primary + .btn-secondary:hover {
+    background-color: var(--bs-primary) !important;
+    border-color: var(--bs-primary) !important;
 }
 
 /* Fullscreen mode styles */
@@ -545,15 +650,19 @@ document.addEventListener('DOMContentLoaded', function() {
     width: 100vw;
     height: 100vh;
     z-index: 9999;
-    background: white;
+    background: var(--bs-light, #f8f9fa); /* Use light background color */
     padding: 20px;
     margin: 0;
     overflow: auto;
     box-sizing: border-box;
+    border: 2px solid var(--bs-primary); /* Primary color border */
+    box-shadow: 0 0 20px rgba(118, 89, 154, 0.3); /* Larger shadow for modal effect */
 }
 
 .ordered-list-editor.fullscreen-mode .tabulator {
     height: calc(100vh - 100px) !important;
     width: 100% !important;
+    border: 1px solid var(--bs-primary); /* Consistent border */
+    box-shadow: 0 4px 8px rgba(118, 89, 154, 0.2); /* Consistent shadow */
 }
 </style>