pieter/eveAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Moved styling elements in eveai_ordered_list_editor.html to eveai.css for consistency

Browse Source
This commit is contained in:
Josako
2025-05-30 10:04:39 +02:00
parent 49f9077a7b
commit 8fb2ad43c5
3 changed files with 381 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files

367
eveai_app/templates/eveai_ordered_list_editor.html
View File

@@ -362,370 +362,3 @@ document.addEventListener('DOMContentLoaded', function() {
}); });
</script> </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>

394
nginx/static/assets/css/eveai.css
View File

@@ -8,7 +8,7 @@
--bs-danger: #9c2d66; --bs-danger: #9c2d66;
} }
/* Overriding the background gradient and text colors */ /* Overriding the background gradient and text colors ------------------------------------------ */
.bg-gradient-success { .bg-gradient-success {
background: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-secondary) 100%); background: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-secondary) 100%);
} }
@@ -44,7 +44,7 @@
font-weight: 700; /* Retain bold text */ font-weight: 700; /* Retain bold text */
} }
/* Navbar customization */ /* Navbar customization ------------------------------------------------------------------------ */
.navbar-light .navbar-brand { .navbar-light .navbar-brand {
color: var(--bs-primary) !important; /* Primary color for the brand text */ color: var(--bs-primary) !important; /* Primary color for the brand text */
} }
@@ -114,7 +114,7 @@
color: var(--bs-white) !important; color: var(--bs-white) !important;
} }
/* Page header customization */ /* Page header customization ------------------------------------------------------------------- */
.page-header { .page-header {
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@@ -148,7 +148,7 @@
margin-top: -5rem; /* Adjust margin to improve vertical alignment */ margin-top: -5rem; /* Adjust margin to improve vertical alignment */
} }
/* Card and table customization */ /* Card and table customization ---------------------------------------------------------------- */
.card { .card {
border: 1px solid var(--bs-secondary) !important; /* Secondary color for the card border */ border: 1px solid var(--bs-secondary) !important; /* Secondary color for the card border */
border-radius: 0.5rem; /* Keeps the border-radius consistent */ border-radius: 0.5rem; /* Keeps the border-radius consistent */
@@ -258,7 +258,6 @@ input[type="radio"] {
.pagination { .pagination {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding-left: 0;
list-style: none; list-style: none;
border-radius: 0.375rem; border-radius: 0.375rem;
margin-left: 0 !important; margin-left: 0 !important;
@@ -314,7 +313,7 @@ input[type="radio"] {
text-align: center !important; text-align: center !important;
} }
/* Form and Input Fields */ /* Form and Input Fields ----------------------------------------------------------------------- */
.form-group label.form-label { .form-group label.form-label {
color: var(--bs-secondary) !important; /* Secondary color for labels */ color: var(--bs-secondary) !important; /* Secondary color for labels */
font-weight: 500; /* Slightly bolder labels */ font-weight: 500; /* Slightly bolder labels */
@@ -353,7 +352,7 @@ input[type="radio"] {
color: var(--bs-body-color) !important; /* Consistent text color for check labels */ color: var(--bs-body-color) !important; /* Consistent text color for check labels */
} }
/* Tabs Navigation */ /* Tabs Navigation ----------------------------------------------------------------------------- */
.nav-pills .nav-link { .nav-pills .nav-link {
color: var(--bs-primary) !important; /* Primary color for inactive tab text */ color: var(--bs-primary) !important; /* Primary color for inactive tab text */
border-radius: 0.375rem !important; /* Rounded corners for tabs */ border-radius: 0.375rem !important; /* Rounded corners for tabs */
@@ -370,7 +369,7 @@ input[type="radio"] {
color: var(--bs-white) !important; /* White text on hover */ color: var(--bs-white) !important; /* White text on hover */
} }
/* Tabs Content */ /* Tabs Content -------------------------------------------------------------------------------- */
.tab-pane { .tab-pane {
padding-top: 1rem; /* Consistent padding inside tabs */ padding-top: 1rem; /* Consistent padding inside tabs */
} }
@@ -379,7 +378,7 @@ input[type="radio"] {
background-color: var(--bs-primary) !important; /* Primary color for the moving tab indicator */ background-color: var(--bs-primary) !important; /* Primary color for the moving tab indicator */
} }
/* Buttons */ /* Buttons ------------------------------------------------------------------------------------- */
.btn-primary:hover { .btn-primary:hover {
background-color: var(--bs-secondary) !important; background-color: var(--bs-secondary) !important;
@@ -436,7 +435,7 @@ input[type="radio"] {
box-shadow: none; box-shadow: none;
} }
/* Custom styles for chat session view */ /* Custom styles for chat session view --------------------------------------------------------- */
.accordion-button:not(.collapsed) { .accordion-button:not(.collapsed) {
background-color: var(--bs-primary); background-color: var(--bs-primary);
color: var(--bs-white); color: var(--bs-white);
@@ -489,7 +488,7 @@ input[type="radio"] {
background-color: var(--bs-light); background-color: var(--bs-light);
} }
/* Markdown content styles */ /* Markdown content styles --------------------------------------------------------------------- */
.markdown-content { .markdown-content {
font-size: 1rem; font-size: 1rem;
line-height: 1.5; line-height: 1.5;
@@ -533,7 +532,7 @@ input[type="radio"] {
display: none !important; display: none !important;
} }
/* Ensure the original select is visible and styled */ /* Ensure the original select is visible and styled -------------------------------------------- */
select.select2 { select.select2 {
display: block !important; display: block !important;
width: 100% !important; width: 100% !important;
@@ -554,7 +553,7 @@ select.select2[multiple] {
height: auto !important; height: auto !important;
} }
/* REQUIRED FIELD SETTINGS ---------------------------------------------------- */ /* REQUIRED FIELD SETTINGS --------------------------------------------------------------------- */
/* Required field indicator styling */ /* Required field indicator styling */
.field-label-wrapper { .field-label-wrapper {
display: flex; display: flex;
@@ -614,7 +613,7 @@ select.select2[multiple] {
border: 0; border: 0;
} }
/* TAB ERROR STYLES ----------------------------------------------------------- */ /* TAB ERROR STYLES ---------------------------------------------------------------------------- */
/* Style for tabs with errors */ /* Style for tabs with errors */
.nav-link.has-error { .nav-link.has-error {
position: relative; position: relative;
@@ -704,7 +703,7 @@ select.select2[multiple] {
font-size: 1.1rem; font-size: 1.1rem;
} }
/* JSON Editor Styling - EveAI Aanpassingen */ /* JSON Editor Styling - EveAI Aanpassingen ---------------------------------------------------- */
:root { :root {
/* Hoofdkleuren gebaseerd op EveAI kleurenschema */ /* Hoofdkleuren gebaseerd op EveAI kleurenschema */
--jse-theme-color: var(--bs-primary); /* Paars als hoofdkleur */ --jse-theme-color: var(--bs-primary); /* Paars als hoofdkleur */
@@ -813,4 +812,369 @@ select.select2[multiple] {
line-height: 1.5; line-height: 1.5;
} }
/* Tabulator styling / ordered_list ------------------------------------------------------------ */
.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
{
}
/* 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 */
}

2
nginx/static/dist/main.css vendored Normal file
View File

File diff suppressed because one or more lines are too long