Moved styling elements in eveai_ordered_list_editor.html to eveai.css for consistency
This commit is contained in:
Josako
@@ -362,370 +362,3 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Tabulator styling */
|
||||
.ordered-list-editor {
|
||||
margin-bottom: 1rem;
|
||||
min-height: 200px; /* Minimum height, will expand as needed */
|
||||
}
|
||||
|
||||
/* Make sure the Tabulator container has a proper height */
|
||||
.ordered-list-editor .tabulator {
|
||||
height: auto; /* Auto height to display all rows */
|
||||
min-height: 200px; /* Minimum height */
|
||||
width: 100%;
|
||||
border: 1px solid var(--bs-primary); /* Primary color for border */
|
||||
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 */
|
||||
.ordered-list-editor .tabulator-tableholder {
|
||||
/* overflow-y: auto !important; - Removed to allow Tabulator to handle overflow */
|
||||
/* max-height: calc(100% - 42px) !important; - Removed to allow Tabulator to handle height */
|
||||
/* Consider using non-!important values if specific scrolling behavior is needed */
|
||||
overflow-y: auto;
|
||||
max-height: calc(100% - 42px);
|
||||
}
|
||||
|
||||
/* Style for the table element */
|
||||
.ordered-list-editor .tabulator-table {
|
||||
display: table !important; /* Force display as table */
|
||||
width: 100% !important;
|
||||
table-layout: fixed !important; /* Use fixed table layout for consistent column widths */
|
||||
}
|
||||
|
||||
/* Style for the handle column */
|
||||
.ordered-list-editor .tabulator-row-handle {
|
||||
cursor: move;
|
||||
background-color: var(--bs-light, #f8f9fa);
|
||||
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 */
|
||||
.ordered-list-editor .tabulator-row-handle-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ordered-list-editor .tabulator-row-handle-bar {
|
||||
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 */
|
||||
.ordered-list-editor .tabulator-cell button.btn-danger {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Style for boolean columns */
|
||||
.ordered-list-editor .tabulator-cell[data-type="boolean"] {
|
||||
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: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-secondary) 100%); /* Match JSE gradient */
|
||||
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 */
|
||||
.ordered-list-editor .tabulator-headers {
|
||||
display: table-row !important; /* Force display as table row */
|
||||
}
|
||||
|
||||
/* Style for the header cells */
|
||||
.ordered-list-editor .tabulator-col {
|
||||
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 */
|
||||
.ordered-list-editor .tabulator-col[style*="display: none"] {
|
||||
display: table-cell !important; /* Force display as table cell */
|
||||
}
|
||||
|
||||
/* Ensure header cells have the same width as their corresponding data cells */
|
||||
.ordered-list-editor .tabulator-col,
|
||||
.ordered-list-editor .tabulator-cell {
|
||||
{#width: auto !important; /* Let the table-layout: fixed handle the width */#}
|
||||
}
|
||||
|
||||
/* Style for the header cell content */
|
||||
.ordered-list-editor .tabulator-col-title {
|
||||
white-space: normal; /* Allow header text to wrap */
|
||||
word-break: break-word; /* Break words to prevent horizontal overflow */
|
||||
font-weight: bold;
|
||||
color: #ffffff; /* White text for better contrast on gradient */
|
||||
}
|
||||
|
||||
/* Style for the table rows */
|
||||
.ordered-list-editor .tabulator-row {
|
||||
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 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;
|
||||
white-space: normal; /* Allow text to wrap */
|
||||
overflow: visible; /* Show overflowing content */
|
||||
height: auto !important; /* Allow cell to grow as needed */
|
||||
word-break: break-word; /* Break words to prevent horizontal overflow */
|
||||
display: table-cell !important; /* Force display as table cell */
|
||||
scroll-margin-top: 100px; /* Prevent unwanted scrolling when focusing */
|
||||
scroll-behavior: auto; /* Disable smooth scrolling which might cause jumping */
|
||||
font-size: 0.85rem; /* Smaller font size */
|
||||
}
|
||||
|
||||
/* Style for truncated cells */
|
||||
.ordered-list-editor .truncated-cell {
|
||||
position: relative;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.ordered-list-editor .truncated-content {
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.ordered-list-editor .show-more {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
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 */
|
||||
.ordered-list-editor .tabulator-cell-visible {
|
||||
display: table-cell !important; /* Force display as table cell */
|
||||
}
|
||||
|
||||
/* Override any inline styles that might hide cells */
|
||||
.ordered-list-editor .tabulator-cell[style*="display: none"] {
|
||||
display: table-cell !important; /* Force display as table cell */
|
||||
}
|
||||
|
||||
/* Style for the textarea editor */
|
||||
.ordered-list-editor .tabulator-cell textarea {
|
||||
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: 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 */
|
||||
.ordered-list-editor.fullscreen-mode {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 9999;
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user