- introductie van vue files - bijna werkende versie van eveai_chat_client.
This commit is contained in:
Josako
724
nginx/static/assets/css/eveai-tabulator.css
Normal file
724
nginx/static/assets/css/eveai-tabulator.css
Normal file
@@ -0,0 +1,724 @@
|
||||
/* 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: 400px; /* Verhoogde minimum hoogte */
|
||||
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: #e1e1e1;
|
||||
border-bottom: 2px solid var(--bs-secondary); /* Secondary color for border */
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
font-size: 0.85rem; /* Kleinere font grootte, dezelfde als in de rijen */
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
}
|
||||
|
||||
/* Tekst in invoervelden zwart maken voor betere leesbaarheid */
|
||||
.ordered-list-editor .tabulator-row:hover .tabulator-cell input,
|
||||
.ordered-list-editor .tabulator-row:hover .tabulator-cell select,
|
||||
.ordered-list-editor .tabulator-row:hover .tabulator-cell textarea,
|
||||
.ordered-list-editor .tabulator-row:hover .tabulator-cell .tabulator-editor,
|
||||
.ordered-list-editor .tabulator-row.tabulator-selected .tabulator-cell input,
|
||||
.ordered-list-editor .tabulator-row.tabulator-selected .tabulator-cell select,
|
||||
.ordered-list-editor .tabulator-row.tabulator-selected .tabulator-cell textarea,
|
||||
.ordered-list-editor .tabulator-row.tabulator-selected .tabulator-cell .tabulator-editor {
|
||||
color: #000000 !important; /* Zwarte tekst op witte achtergrond */
|
||||
background-color: #ffffff !important; /* Witte achtergrond verzekeren */
|
||||
border: 1px solid var(--bs-primary) !important; /* Duidelijke rand toevoegen */
|
||||
}
|
||||
|
||||
.tabulator-container {
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
/* Extra specifieke override stijlen voor tabulator paginator en footer */
|
||||
.tabulator .tabulator-footer .tabulator-paginator {
|
||||
background: transparent !important;
|
||||
border-top: none !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-page {
|
||||
font-family: inherit !important;
|
||||
font-weight: normal !important;
|
||||
font-size: 0.85rem !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-page.active {
|
||||
font-weight: bold !important;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-footer .tabulator-paginator .tabulator-page-size {
|
||||
margin-left: 5px !important;
|
||||
padding: 5px 10px !important;
|
||||
border-radius: 4px !important;
|
||||
border: 1px solid white !important;
|
||||
background-color: rgba(255, 255, 255, 0.2) !important;
|
||||
color: #67518c !important;
|
||||
font-size: 0.85rem !important;
|
||||
font-family: inherit !important;
|
||||
}
|
||||
|
||||
/* Styling voor de paginator container */
|
||||
.tabulator .tabulator-footer .tabulator-paginator label {
|
||||
color: #67518c !important;
|
||||
font-size: 0.85rem !important;
|
||||
font-weight: normal !important;
|
||||
margin: 0 5px !important;
|
||||
}
|
||||
|
||||
/* Override specifiek voor .tabulator-page.active */
|
||||
.tabulator .tabulator-footer .tabulator-paginator .tabulator-pages .tabulator-page.active {
|
||||
background-color: var(--bs-primary) !important;
|
||||
color: white !important;
|
||||
border-color: var(--bs-primary) !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
/* Styling voor buttons in de tabulator paginator */
|
||||
.tabulator-footer button,
|
||||
.tabulator .tabulator-footer .tabulator-page {
|
||||
margin: 0 2px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
background-color: rgba(255, 255, 255, 0.2) !important;
|
||||
color: white !important;
|
||||
border: 1px solid white !important;
|
||||
font-size: 0.85rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tabulator-footer button:hover,
|
||||
.tabulator .tabulator-footer .tabulator-page:hover {
|
||||
background-color: var(--bs-secondary) !important;
|
||||
color: white !important;
|
||||
border-color: var(--bs-secondary) !important;
|
||||
}
|
||||
|
||||
.tabulator-footer button.tabulator-page.active,
|
||||
.tabulator .tabulator-footer .tabulator-page.active {
|
||||
background-color: var(--bs-primary) !important;
|
||||
color: white !important;
|
||||
border-color: var(--bs-primary) !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tabulator-footer button:disabled,
|
||||
.tabulator .tabulator-footer .tabulator-page:disabled,
|
||||
.tabulator .tabulator-footer .tabulator-page.disabled {
|
||||
color: var(--bs-gray-500) !important;
|
||||
background-color: var(--bs-gray-200) !important;
|
||||
border-color: var(--bs-gray-300) !important;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
/* Styling voor de tabulator paginator -------------------------------------------------------------- */
|
||||
.tabulator-paginator {
|
||||
background: #e1e1e1;
|
||||
padding: 10px;
|
||||
border-bottom-left-radius: 0.375rem;
|
||||
border-bottom-right-radius: 0.375rem;
|
||||
border-top: 1px solid var(--bs-secondary);
|
||||
}
|
||||
|
||||
.tabulator-paginator .tabulator-page {
|
||||
margin: 0 2px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--bs-light);
|
||||
color: var(--bs-primary);
|
||||
border: 1px solid var(--bs-secondary);
|
||||
font-size: 0.85rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tabulator-paginator .tabulator-page:hover {
|
||||
background-color: var(--bs-secondary);
|
||||
color: #67518c;
|
||||
}
|
||||
|
||||
.tabulator-paginator .tabulator-page.active,
|
||||
.tabulator .tabulator-footer .tabulator-page.active {
|
||||
background-color: var(--bs-primary) !important;
|
||||
color: #67518c !important;
|
||||
border-color: var(--bs-primary) !important;
|
||||
}
|
||||
|
||||
.tabulator-paginator .tabulator-page:disabled,
|
||||
.tabulator-paginator .tabulator-page.disabled {
|
||||
color: var(--bs-gray-500);
|
||||
background-color: var(--bs-gray-200);
|
||||
border-color: var(--bs-gray-300);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.tabulator-paginator .tabulator-page-size {
|
||||
margin-left: 5px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--bs-secondary);
|
||||
background-color: var(--bs-light);
|
||||
color: var(--bs-primary);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.tabulator-footer,
|
||||
.tabulator .tabulator-footer {
|
||||
background: #e1e1e1;
|
||||
border-top: 1px solid var(--bs-secondary) !important;
|
||||
border-bottom-left-radius: 0.375rem !important;
|
||||
border-bottom-right-radius: 0.375rem !important;
|
||||
padding: 8px !important;
|
||||
}
|
||||
.filter-controls .filter-row {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header {
|
||||
background-color: #f8f9fa;
|
||||
border-bottom: 2px solid #dee2e6;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row.tabulator-selected {
|
||||
background-color: #e3f2fd !important;
|
||||
border-left: 3px solid #007bff !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-row:hover {
|
||||
background-color: #f5f5f5;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Visuele indicator dat de rij klikbaar is */
|
||||
.tabulator .tabulator-row {
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
/* Algemene tabulator header stijlen -------------------------------------------------------------- */
|
||||
.tabulator .tabulator-header {
|
||||
background: #e1e1e1;
|
||||
border-bottom: 2px solid var(--bs-secondary);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Voorkom grijze achtergrond bij hover over header elementen */
|
||||
.tabulator-header .tabulator-col:hover,
|
||||
.tabulator-header .tabulator-col-row:hover,
|
||||
.tabulator-header .tabulator-col-group:hover {
|
||||
background: transparent !important; /* Behoudt de transparante achtergrond bij hover */
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col {
|
||||
background: transparent;
|
||||
border-right: none;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
vertical-align: bottom;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Voorkom grijze achtergrond bij hover over kolomkoppen */
|
||||
.tabulator-col:hover {
|
||||
background: transparent !important; /* Behoud dezelfde achtergrond bij hover */
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col-title {
|
||||
color: #67518c;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col-sorter {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
|
||||
color: #67518c;
|
||||
font-size: 0.85rem; /* Kleinere font grootte, dezelfde als in de rijen */
|
||||
}
|
||||
|
||||
.tabulator .tabulator-header .tabulator-header-filter input,
|
||||
.tabulator .tabulator-header .tabulator-header-filter select {
|
||||
border: 1px solid var(--bs-secondary);
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
/* Tabulator List View stijlen ---------------------------------------------------------------------- */
|
||||
.tabulator-list-view {
|
||||
margin-bottom: 1rem;
|
||||
min-height: 400px; /* Verhoogde minimum hoogte voor meer verticale ruimte */
|
||||
}
|
||||
|
||||
/* Tabulator List View paginator stijlen */
|
||||
.tabulator-list-view .tabulator-footer {
|
||||
background: #e1e1e1;
|
||||
padding: 8px;
|
||||
border-bottom-left-radius: 0.375rem;
|
||||
border-bottom-right-radius: 0.375rem;
|
||||
border-top: 1px solid var(--bs-secondary);
|
||||
}
|
||||
|
||||
/* Maximale specifieke selector voor active pagination knoppen */
|
||||
.tabulator-list-view .tabulator-footer .tabulator-paginator .tabulator-pages .tabulator-page.active {
|
||||
background-color: var(--bs-primary) !important;
|
||||
color: white !important;
|
||||
border-color: var(--bs-primary) !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
/* Zorg ervoor dat de Tabulator container een goede hoogte heeft */
|
||||
.tabulator-list-view .tabulator {
|
||||
height: auto; /* Auto hoogte om alle rijen weer te geven */
|
||||
min-height: 500px; /* Verhoogde minimum hoogte */
|
||||
width: 100%;
|
||||
border: 1px solid var(--bs-primary); /* Primaire kleur voor rand */
|
||||
border-radius: 0.375rem; /* Afstemmen op border-radius van applicatie */
|
||||
margin-bottom: 0.5rem;
|
||||
box-shadow: 0 4px 8px rgba(118, 89, 154, 0.2); /* Afstemmen op schaduw stijl van applicatie */
|
||||
}
|
||||
|
||||
/* Stijl voor de tabel header */
|
||||
.tabulator-list-view .tabulator-header {
|
||||
background: #e1e1e1;
|
||||
border-bottom: 2px solid var(--bs-secondary); /* Secundaire kleur voor rand */
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Stijl voor de header cellen */
|
||||
.tabulator-list-view .tabulator-col {
|
||||
background: transparent;
|
||||
padding: 8px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
box-sizing: border-box !important; /* Padding meenemen in breedte berekening */
|
||||
position: relative !important; /* Juiste positionering verzekeren */
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Voorkom kleurverandering bij hover over kolomkoppen */
|
||||
.tabulator .tabulator-header .tabulator-col:hover {
|
||||
background: transparent !important; /* Behoud transparante achtergrond bij hover */
|
||||
}
|
||||
|
||||
/* Stijl voor de inhoud van header cellen */
|
||||
.tabulator-list-view .tabulator-col-title {
|
||||
white-space: normal; /* Sta toe dat header tekst omwikkelt */
|
||||
word-break: break-word; /* Breek woorden om horizontale overflow te voorkomen */
|
||||
font-weight: bold;
|
||||
font-size: 0.85rem; /* Kleinere font grootte, dezelfde als in de rijen */
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Stijl voor de tabel rijen */
|
||||
.tabulator-list-view .tabulator-row {
|
||||
border-bottom: 1px solid var(--bs-gray-300, #dee2e6); /* Match rij rand kleur van applicatie */
|
||||
font-size: 0.85rem; /* Kleinere font grootte zoals gevraagd */
|
||||
}
|
||||
|
||||
/* Hover effect voor rijen */
|
||||
.tabulator-list-view .tabulator-row:hover {
|
||||
background-color: var(--bs-secondary) !important; /* Secundaire kleur bij hover */
|
||||
color: #ffffff !important; /* Witte tekst bij hover */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Zorg ervoor dat alle tekst in rijen bij hover wit wordt */
|
||||
.tabulator-list-view .tabulator-row:hover .tabulator-cell,
|
||||
.tabulator-list-view .tabulator-row:hover .tabulator-cell * {
|
||||
color: #ffffff !important; /* Witte tekst voor alle elementen in rijen bij hover */
|
||||
}
|
||||
|
||||
/* Stijl voor even rijen */
|
||||
.tabulator-list-view .tabulator-row-even {
|
||||
background-color: #f8f9fa; /* Lichtgrijs voor even rijen */
|
||||
}
|
||||
|
||||
/* Stijl voor oneven rijen */
|
||||
.tabulator-list-view .tabulator-row-odd {
|
||||
background-color: #ffffff; /* Wit voor oneven rijen */
|
||||
}
|
||||
|
||||
/* Stijl voor geselecteerde rijen */
|
||||
.tabulator-list-view .tabulator-row.tabulator-selected {
|
||||
background-color: var(--bs-primary) !important; /* Primaire kleur voor geselecteerde rijen */
|
||||
color: #ffffff !important; /* Witte tekst voor contrast */
|
||||
border: none !important; /* Geen lijn voor geselecteerde rij, alleen kleur */
|
||||
}
|
||||
|
||||
/* Stijl voor de tabel cellen */
|
||||
.tabulator-list-view .tabulator-cell {
|
||||
padding: 8px;
|
||||
white-space: normal; /* Sta toe dat tekst omwikkelt */
|
||||
overflow: visible; /* Toon overlopende inhoud */
|
||||
height: auto !important; /* Sta toe dat cel groeit indien nodig */
|
||||
word-break: break-word; /* Breek woorden om horizontale overflow te voorkomen */
|
||||
font-size: 0.85rem; /* Kleinere font grootte */
|
||||
}
|
||||
|
||||
/* Tekst in invoervelden zwart maken voor betere leesbaarheid bij hover/selectie */
|
||||
.tabulator-list-view .tabulator-row:hover .tabulator-cell input,
|
||||
.tabulator-list-view .tabulator-row:hover .tabulator-cell select,
|
||||
.tabulator-list-view .tabulator-row:hover .tabulator-cell textarea,
|
||||
.tabulator-list-view .tabulator-row.tabulator-selected .tabulator-cell input,
|
||||
.tabulator-list-view .tabulator-row.tabulator-selected .tabulator-cell select,
|
||||
.tabulator-list-view .tabulator-row.tabulator-selected .tabulator-cell textarea {
|
||||
color: #000000 !important; /* Zwarte tekst op witte achtergrond */
|
||||
background-color: #ffffff !important; /* Witte achtergrond verzekeren */
|
||||
border: 1px solid var(--bs-primary) !important; /* Duidelijke rand toevoegen */
|
||||
}
|
||||
Reference in New Issue
Block a user