You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
800 lines
31 KiB
800 lines
31 KiB
{% load i18n %}
|
|
<div class="json-editor-container">
|
|
<textarea style="display: none" name="{{ widget.name }}" id="{{ widget.attrs.id }}"
|
|
{% include "django/forms/widgets/attrs.html" %}
|
|
>{% if widget.value %}{{ widget.value }}{% endif %}</textarea>
|
|
<div class="json-view-editor" id='date-view-editor-{{ widget.attrs.id }}'></div>
|
|
</div>
|
|
|
|
<script defer="defer">
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
function initJsonEditor() {
|
|
let editor_ = document.getElementById("{{ widget.attrs.id }}");
|
|
if (!editor_) {
|
|
console.error("Editor element not found");
|
|
return;
|
|
}
|
|
|
|
let startValue;
|
|
try {
|
|
startValue = editor_.value && editor_.value.trim() !== '' ? JSON.parse(editor_.value) : [];
|
|
} catch (e) {
|
|
console.error("Error parsing JSON value:", e);
|
|
startValue = [];
|
|
}
|
|
|
|
let jsonViewerDiv = document.getElementById('date-view-editor-{{ widget.attrs.id }}');
|
|
|
|
if (typeof JSONEditor === 'undefined') {
|
|
console.error("JSONEditor is not defined. Make sure the library is loaded.");
|
|
return;
|
|
}
|
|
|
|
// Custom template for add button
|
|
JSONEditor.defaults.templates.button = function(text, icon, title) {
|
|
let el = document.createElement('button');
|
|
el.type = 'button';
|
|
el.classList.add('json-editor-btn-modern');
|
|
|
|
if (icon) {
|
|
let iconEl = document.createElement('span');
|
|
iconEl.classList.add('json-editor-btn-icon');
|
|
iconEl.innerHTML = icon;
|
|
el.appendChild(iconEl);
|
|
}
|
|
|
|
if (text) {
|
|
let textEl = document.createElement('span');
|
|
textEl.classList.add('json-editor-btn-text');
|
|
textEl.textContent = text;
|
|
el.appendChild(textEl);
|
|
}
|
|
|
|
if (title) el.title = title;
|
|
|
|
return el;
|
|
};
|
|
|
|
// Custom icons
|
|
JSONEditor.defaults.iconlib = {
|
|
getIcon: function(key) {
|
|
switch(key) {
|
|
case 'add':
|
|
return '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/></svg>';
|
|
case 'delete':
|
|
return '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/><path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/></svg>';
|
|
case 'edit':
|
|
return '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/></svg>';
|
|
case 'moveup':
|
|
return '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z"/></svg>';
|
|
case 'movedown':
|
|
return '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"/></svg>';
|
|
default:
|
|
return '';
|
|
}
|
|
}
|
|
};
|
|
|
|
try {
|
|
let jsonEditor = new JSONEditor(
|
|
jsonViewerDiv, {
|
|
theme: 'bootstrap4',
|
|
schema: {{ widget.attrs.schema|safe }},
|
|
disable_edit_json: true,
|
|
disable_properties: true,
|
|
disable_array_delete_all_rows: false,
|
|
disable_array_delete_last_row: true, // Disable delete last row button
|
|
disable_array_reorder: true, // Disable array reordering
|
|
grid_columns: 12,
|
|
prompt_before_delete: true,
|
|
disable_collapse: false, // Enable collapse to show button sections
|
|
show_errors: 'always',
|
|
startval: startValue,
|
|
iconlib: 'custom',
|
|
object_layout: 'normal', // Changed from grid to normal for better layout
|
|
enable_array_copy: false, // Disable copy functionality
|
|
show_opt_in: false,
|
|
compact: false,
|
|
array_controls_top: false, // Move array controls to bottom
|
|
show_button_bar: true, // Show button bar
|
|
form_name_root: 'root' // Add a root name for better structure
|
|
}
|
|
);
|
|
|
|
// Store the editor instance on the textarea
|
|
editor_.editor = jsonEditor;
|
|
|
|
// Update the textarea when the editor changes
|
|
jsonEditor.on('change', function() {
|
|
editor_.value = JSON.stringify(jsonEditor.getValue());
|
|
|
|
// Trigger a change event on the textarea
|
|
let event = new Event('change', { bubbles: true });
|
|
editor_.dispatchEvent(event);
|
|
|
|
// Apply styling to newly added elements
|
|
applyCustomStyling();
|
|
});
|
|
|
|
// Function to apply custom styling to all elements
|
|
function applyCustomStyling() {
|
|
// Add modern styling to buttons
|
|
const allButtons = jsonViewerDiv.querySelectorAll('button');
|
|
allButtons.forEach(button => {
|
|
if (!button.classList.contains('json-editor-btn-modern')) {
|
|
button.classList.add('json-editor-btn-modern');
|
|
|
|
// Add specific styling based on button type
|
|
if (button.classList.contains('json-editor-btntype-add')) {
|
|
button.classList.add('json-editor-btn-add');
|
|
} else if (button.classList.contains('json-editor-btntype-delete') ||
|
|
button.classList.contains('json-editor-btntype-deleteall') ||
|
|
button.classList.contains('json-editor-btntype-deletelast')) {
|
|
button.classList.add('json-editor-btn-delete');
|
|
}
|
|
}
|
|
});
|
|
|
|
// Style form controls
|
|
const formControls = jsonViewerDiv.querySelectorAll('input, select, textarea');
|
|
formControls.forEach(control => {
|
|
control.classList.add('modern-form-control');
|
|
});
|
|
|
|
// Style table headers
|
|
const tableHeaders = jsonViewerDiv.querySelectorAll('th');
|
|
tableHeaders.forEach(header => {
|
|
header.classList.add('modern-table-header');
|
|
});
|
|
|
|
// Style table rows
|
|
const tableRows = jsonViewerDiv.querySelectorAll('tr');
|
|
tableRows.forEach(row => {
|
|
row.classList.add('modern-table-row');
|
|
});
|
|
|
|
// Make table full width
|
|
const tables = jsonViewerDiv.querySelectorAll('table');
|
|
tables.forEach(table => {
|
|
table.classList.add('full-width-table');
|
|
});
|
|
|
|
// Make table cells take equal space
|
|
const tableCells = jsonViewerDiv.querySelectorAll('td');
|
|
tableCells.forEach(cell => {
|
|
if (!cell.classList.contains('table-controls-cell')) {
|
|
cell.classList.add('equal-width-cell');
|
|
}
|
|
});
|
|
|
|
// Add special styling to control cells
|
|
const controlCells = jsonViewerDiv.querySelectorAll('td:last-child');
|
|
controlCells.forEach(cell => {
|
|
cell.classList.add('table-controls-cell');
|
|
});
|
|
|
|
// Fix button group styling
|
|
const buttonGroups = jsonViewerDiv.querySelectorAll('.btn-group, .json-editor-btngroup');
|
|
buttonGroups.forEach(group => {
|
|
group.classList.add('modern-btn-group');
|
|
});
|
|
|
|
// Fix card styling
|
|
const cards = jsonViewerDiv.querySelectorAll('.card');
|
|
cards.forEach(card => {
|
|
card.classList.add('modern-card');
|
|
});
|
|
|
|
// Ensure button sections are visible
|
|
const buttonSections = jsonViewerDiv.querySelectorAll('.json-editor-btngroup');
|
|
buttonSections.forEach(section => {
|
|
section.style.display = 'flex';
|
|
section.style.visibility = 'visible';
|
|
});
|
|
|
|
// Style button bars
|
|
const buttonBars = jsonViewerDiv.querySelectorAll('.json-editor-btn-bar');
|
|
buttonBars.forEach(bar => {
|
|
bar.style.display = 'flex';
|
|
bar.style.flexWrap = 'wrap';
|
|
bar.style.gap = '0.5rem';
|
|
bar.style.marginTop = '1rem';
|
|
bar.style.marginBottom = '0';
|
|
bar.style.padding = '0.75rem';
|
|
bar.style.backgroundColor = 'rgba(1, 53, 59, 0.05)';
|
|
bar.style.borderRadius = '0.5rem';
|
|
bar.style.width = '100%';
|
|
bar.style.justifyContent = 'flex-end';
|
|
|
|
// Move button bar to the end of its parent container
|
|
const parent = bar.parentElement;
|
|
if (parent) {
|
|
parent.style.display = 'flex';
|
|
parent.style.flexDirection = 'column';
|
|
parent.appendChild(bar);
|
|
}
|
|
});
|
|
|
|
// Hide specific buttons (Copy, Move up, Move down, Delete Last)
|
|
const buttonsToHide = jsonViewerDiv.querySelectorAll('.json-editor-btntype-copy, .json-editor-btntype-move, .json-editor-btntype-deletelast');
|
|
buttonsToHide.forEach(button => {
|
|
button.style.display = 'none';
|
|
});
|
|
|
|
// Ensure form fields take full width
|
|
const formRows = jsonViewerDiv.querySelectorAll('.row');
|
|
formRows.forEach(row => {
|
|
row.style.width = '100%';
|
|
const cols = row.querySelectorAll('[class*="col-"]');
|
|
cols.forEach(col => {
|
|
col.style.width = '100%';
|
|
col.style.maxWidth = '100%';
|
|
col.style.flex = '0 0 100%';
|
|
});
|
|
});
|
|
}
|
|
|
|
// Apply styling immediately after initialization
|
|
setTimeout(applyCustomStyling, 100);
|
|
|
|
// Process error messages to make them HTML5-like
|
|
function processErrorMessages() {
|
|
const errorElements = jsonViewerDiv.querySelectorAll('.je-error');
|
|
errorElements.forEach(error => {
|
|
// Get the error message text
|
|
const errorText = error.textContent.trim();
|
|
|
|
// Set the data-content attribute for the tooltip
|
|
error.setAttribute('data-content', errorText);
|
|
|
|
// Find the parent form group
|
|
const formGroup = error.closest('.form-group');
|
|
if (formGroup) {
|
|
formGroup.classList.add('has-error');
|
|
|
|
// Find the input element
|
|
const input = formGroup.querySelector('input, select, textarea');
|
|
if (input) {
|
|
// Add error class to the input
|
|
input.classList.add('is-invalid');
|
|
|
|
// Add title attribute for native tooltip
|
|
input.setAttribute('title', errorText);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Remove "Delete Last Course Features" button if it exists
|
|
function removeDeleteLastButton() {
|
|
const deleteLastButtons = jsonViewerDiv.querySelectorAll('button.json-editor-btntype-deletelast');
|
|
deleteLastButtons.forEach(button => {
|
|
const buttonText = button.textContent.trim();
|
|
if (buttonText.includes('Delete Last') && buttonText.includes('Course Features')) {
|
|
button.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Add mutation observer to apply styling to dynamically added elements
|
|
const observer = new MutationObserver(function(mutations) {
|
|
applyCustomStyling();
|
|
processErrorMessages();
|
|
removeDeleteLastButton();
|
|
});
|
|
|
|
observer.observe(jsonViewerDiv, {
|
|
childList: true,
|
|
subtree: true
|
|
});
|
|
|
|
// Initial processing
|
|
setTimeout(() => {
|
|
processErrorMessages();
|
|
removeDeleteLastButton();
|
|
}, 200);
|
|
|
|
} catch (e) {
|
|
console.error("Error initializing JSONEditor:", e);
|
|
}
|
|
}
|
|
|
|
// Initialize the editor
|
|
if (document.readyState === 'complete') {
|
|
initJsonEditor();
|
|
} else {
|
|
window.addEventListener('load', initJsonEditor);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
/* Modern JSON Editor Container - Unfold theme */
|
|
.json-editor-container {
|
|
margin-bottom: 1.5rem;
|
|
background-color: #0C0B1D;
|
|
border-radius: 0.5rem;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
box-shadow: 0 1px 3px rgba(1, 53, 59, 0.08);
|
|
border: 1px solid rgba(1, 53, 59, 0.05);
|
|
}
|
|
|
|
/* Editor container */
|
|
.json-view-editor {
|
|
width: 100%;
|
|
border: none;
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
/* Card styling */
|
|
.card {
|
|
border: none !important;
|
|
margin-bottom: 1.25rem !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 0.75rem 0 !important;
|
|
}
|
|
|
|
/* Hide unnecessary elements */
|
|
.json-view-editor .card-title {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Modern JSON Editor styling */
|
|
.json-editor-modern {
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.jsoneditor-menu {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Modern card styling */
|
|
.modern-card {
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
background: transparent !important;
|
|
margin-bottom: 1rem !important;
|
|
padding: 0 !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 0 !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* Table styling */
|
|
.full-width-table {
|
|
width: 100% !important;
|
|
margin-bottom: 1rem !important;
|
|
border-collapse: separate !important;
|
|
border-spacing: 0 !important;
|
|
}
|
|
|
|
.table-responsive {
|
|
border: 1px solid rgba(1, 53, 59, 0.1);
|
|
border-radius: 0.5rem;
|
|
overflow: hidden;
|
|
margin-bottom: 1.25rem;
|
|
background-color: white;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
|
|
}
|
|
|
|
.equal-width-cell {
|
|
width: 45% !important;
|
|
}
|
|
|
|
.table-controls-cell {
|
|
width: 10% !important;
|
|
text-align: right !important;
|
|
}
|
|
|
|
.modern-table-header {
|
|
background-color: rgba(1, 53, 59, 0.03) !important;
|
|
color: rgb(1, 53, 59) !important;
|
|
font-weight: 600 !important;
|
|
text-transform: uppercase !important;
|
|
font-size: 0.6875rem !important;
|
|
letter-spacing: 0.05em !important;
|
|
padding: 0.625rem 0.875rem !important;
|
|
border-bottom: 1px solid rgba(1, 53, 59, 0.08) !important;
|
|
}
|
|
|
|
.modern-table-row {
|
|
border-bottom: 1px solid rgba(1, 53, 59, 0.06) !important;
|
|
}
|
|
|
|
.modern-table-row:last-child {
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
.modern-table-row:hover {
|
|
background-color: rgba(37, 208, 118, 0.03) !important;
|
|
}
|
|
|
|
.modern-table-row td {
|
|
padding: 0.625rem 0.875rem !important;
|
|
vertical-align: middle !important;
|
|
font-size: 0.875rem !important;
|
|
}
|
|
|
|
/* Modern buttons - Using Unfold color scheme */
|
|
.json-editor-btn-modern {
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
gap: 0.375rem !important;
|
|
background-color: rgb(37, 208, 118) !important; /* Unfold primary-500 */
|
|
color: white !important;
|
|
border: none !important;
|
|
border-radius: 0.375rem !important;
|
|
padding: 0.5rem 0.875rem !important; /* Smaller padding */
|
|
font-weight: 500 !important;
|
|
cursor: pointer !important;
|
|
transition: all 0.2s ease !important;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
|
|
margin: 0 0.25rem !important;
|
|
font-size: 0.8125rem !important; /* Smaller font */
|
|
line-height: 1.4 !important;
|
|
text-transform: none !important;
|
|
letter-spacing: 0.01em !important;
|
|
}
|
|
|
|
.json-editor-btn-modern:hover {
|
|
background-color: rgb(29, 166, 94) !important; /* Unfold primary-600 */
|
|
transform: translateY(-1px) !important;
|
|
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08) !important;
|
|
}
|
|
|
|
.json-editor-btn-modern:active {
|
|
transform: translateY(0) !important;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
|
|
}
|
|
|
|
/* Button sections styling */
|
|
.json-editor-btngroup, .json-editor-btn-bar {
|
|
display: flex !important;
|
|
flex-wrap: wrap !important;
|
|
gap: 0.5rem !important;
|
|
margin-top: 1rem !important;
|
|
margin-bottom: 0 !important;
|
|
padding: 0.75rem !important;
|
|
background-color: rgba(1, 53, 59, 0.05) !important;
|
|
border-radius: 0.5rem !important;
|
|
visibility: visible !important;
|
|
width: 100% !important;
|
|
justify-content: flex-end !important;
|
|
}
|
|
|
|
/* Button icons */
|
|
.json-editor-btn-icon {
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
}
|
|
|
|
/* Add button styling */
|
|
.json-editor-btn-add {
|
|
background-color: rgb(37, 208, 118) !important; /* Unfold primary-500 */
|
|
padding: 0.625rem 1rem !important; /* Smaller padding */
|
|
font-size: 0.875rem !important; /* Smaller font */
|
|
font-weight: 600 !important;
|
|
letter-spacing: 0.01em !important;
|
|
border-radius: 0.375rem !important;
|
|
width: auto !important; /* Not full width */
|
|
margin-bottom: 0.75rem !important;
|
|
}
|
|
|
|
.json-editor-btn-add:hover {
|
|
background-color: rgb(29, 166, 94) !important; /* Unfold primary-600 */
|
|
}
|
|
|
|
/* Modern HTML5-like error styling */
|
|
.je-error-container {
|
|
display: none !important; /* Hide the default error container */
|
|
}
|
|
|
|
/* Style for invalid inputs */
|
|
.je-error + input,
|
|
.je-error + select,
|
|
.je-error + textarea,
|
|
.has-error .modern-form-control {
|
|
border-color: rgb(239, 68, 68) !important;
|
|
padding-right: 2.5rem !important;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 0.75rem center;
|
|
background-size: 1.25rem;
|
|
}
|
|
|
|
/* Custom tooltip for errors */
|
|
.je-error {
|
|
position: relative !important;
|
|
display: inline-block !important;
|
|
color: transparent !important;
|
|
font-size: 0 !important;
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.je-error::after {
|
|
content: attr(data-content) !important;
|
|
position: absolute !important;
|
|
bottom: 125% !important;
|
|
right: 0 !important;
|
|
visibility: hidden !important;
|
|
width: 200px !important;
|
|
background-color: rgb(239, 68, 68) !important;
|
|
color: white !important;
|
|
text-align: center !important;
|
|
border-radius: 0.375rem !important;
|
|
padding: 0.5rem 0.75rem !important;
|
|
font-size: 0.8125rem !important;
|
|
font-weight: 500 !important;
|
|
opacity: 0 !important;
|
|
transition: opacity 0.3s !important;
|
|
z-index: 100 !important;
|
|
pointer-events: none !important;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
|
|
/* Show tooltip on hover over the input */
|
|
.je-error + input:hover + .je-error::after,
|
|
.je-error + select:hover + .je-error::after,
|
|
.je-error + textarea:hover + .je-error::after,
|
|
.has-error .modern-form-control:hover + .je-error::after {
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Arrow for tooltip */
|
|
.je-error::before {
|
|
content: "" !important;
|
|
position: absolute !important;
|
|
bottom: 125% !important;
|
|
right: 10px !important;
|
|
visibility: hidden !important;
|
|
border-width: 5px !important;
|
|
border-style: solid !important;
|
|
border-color: rgb(239, 68, 68) transparent transparent transparent !important;
|
|
opacity: 0 !important;
|
|
transition: opacity 0.3s !important;
|
|
}
|
|
|
|
.je-error + input:hover + .je-error::before,
|
|
.je-error + select:hover + .je-error::before,
|
|
.je-error + textarea:hover + .je-error::before,
|
|
.has-error .modern-form-control:hover + .je-error::before {
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Delete button styling */
|
|
.json-editor-btn-delete {
|
|
background-color: rgb(1, 53, 59) !important; /* Unfold secondary-500 */
|
|
}
|
|
|
|
.json-editor-btn-delete:hover {
|
|
background-color: rgb(1, 43, 48) !important; /* Unfold secondary-600 */
|
|
}
|
|
|
|
/* Hide Delete Last buttons */
|
|
.json-editor-btntype-deletelast {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Move up/down buttons */
|
|
.json-editor-btntype-moveup, .json-editor-btntype-movedown {
|
|
background-color: rgba(1, 53, 59, 0.8) !important;
|
|
}
|
|
|
|
.json-editor-btntype-moveup:hover, .json-editor-btntype-movedown:hover {
|
|
background-color: rgb(1, 53, 59) !important;
|
|
}
|
|
|
|
/* Button sections styling */
|
|
.json-editor-btngroup, .json-editor-btn-bar {
|
|
display: flex !important;
|
|
flex-wrap: wrap !important;
|
|
gap: 0.375rem !important;
|
|
margin-top: 1rem !important;
|
|
padding: 0.625rem !important;
|
|
background-color: rgba(1, 53, 59, 0.03) !important; /* More subtle background */
|
|
border: 1px solid rgba(1, 53, 59, 0.08) !important; /* Subtle border */
|
|
border-radius: 0.5rem !important;
|
|
visibility: visible !important;
|
|
width: 100% !important;
|
|
justify-content: flex-end !important;
|
|
order: 999 !important; /* Ensure it appears at the bottom */
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important; /* Subtle shadow */
|
|
}
|
|
|
|
/* Modern button group styling */
|
|
.modern-btn-group {
|
|
display: inline-flex !important;
|
|
gap: 0.25rem !important;
|
|
margin: 0.125rem !important;
|
|
}
|
|
|
|
/* Form controls - Unfold theme */
|
|
.modern-form-control {
|
|
width: 100% !important;
|
|
border: 1px solid rgba(1, 53, 59, 0.15) !important;
|
|
border-radius: 0.375rem !important;
|
|
padding: 0.625rem 0.875rem !important;
|
|
font-size: 0.875rem !important;
|
|
line-height: 1.5 !important;
|
|
color: rgb(1, 53, 59) !important;
|
|
background-color: #fff !important;
|
|
transition: all 0.2s ease !important;
|
|
appearance: none !important;
|
|
margin-bottom: 0.875rem !important;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
|
|
}
|
|
|
|
.modern-form-control:focus {
|
|
border-color: rgb(37, 208, 118) !important;
|
|
box-shadow: 0 0 0 3px rgba(37, 208, 118, 0.15) !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
.modern-form-control::placeholder {
|
|
color: rgba(1, 53, 59, 0.4) !important;
|
|
}
|
|
|
|
/* Form labels */
|
|
label, .je-label {
|
|
font-size: 0.875rem !important;
|
|
font-weight: 500 !important;
|
|
color: rgb(1, 53, 59) !important;
|
|
margin-bottom: 0.375rem !important;
|
|
display: block !important;
|
|
}
|
|
|
|
/* Button group styling */
|
|
.modern-btn-group {
|
|
display: flex !important;
|
|
flex-wrap: nowrap !important;
|
|
align-items: center !important;
|
|
justify-content: flex-end !important;
|
|
gap: 0.5rem !important;
|
|
}
|
|
|
|
/* Error message styling */
|
|
.invalid-feedback {
|
|
color: #ef4444 !important;
|
|
font-size: 0.875rem !important;
|
|
margin-top: 0.25rem !important;
|
|
margin-bottom: 0.5rem !important;
|
|
}
|
|
|
|
/* Labels */
|
|
label, .je-label {
|
|
display: block !important;
|
|
margin-bottom: 0.5rem !important;
|
|
font-weight: 500 !important;
|
|
color: rgb(1, 53, 59) !important;
|
|
font-size: 0.9375rem !important;
|
|
}
|
|
|
|
/* Form groups */
|
|
.form-group, .je-object__container {
|
|
margin-bottom: 1.5rem !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* Make the JSON editor more responsive */
|
|
@media (max-width: 767px) {
|
|
.modern-form-control {
|
|
font-size: 0.875rem !important;
|
|
padding: 0.5rem 0.625rem !important;
|
|
}
|
|
|
|
.json-editor-btn-modern {
|
|
padding: 0.375rem 0.75rem !important;
|
|
font-size: 0.875rem !important;
|
|
}
|
|
|
|
.modern-table-header {
|
|
font-size: 0.75rem !important;
|
|
padding: 0.625rem 0.75rem !important;
|
|
}
|
|
|
|
.modern-table-row td {
|
|
padding: 0.625rem 0.75rem !important;
|
|
}
|
|
}
|
|
|
|
/* Dark mode support - Using Unfold color scheme */
|
|
@media (prefers-color-scheme: dark) {
|
|
.json-editor-container {
|
|
background-color: rgb(1, 43, 48) !important; /* Unfold secondary-600 */
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.json-view-editor {
|
|
background-color: rgb(1, 43, 48) !important; /* Unfold secondary-600 */
|
|
}
|
|
|
|
.table-responsive {
|
|
border-color: rgb(1, 36, 40) !important; /* Unfold secondary-700 */
|
|
background-color: rgb(1, 43, 48) !important; /* Unfold secondary-600 */
|
|
}
|
|
|
|
.modern-table-header {
|
|
background-color: rgb(1, 30, 34) !important; /* Unfold secondary-800 */
|
|
color: white !important;
|
|
border-bottom-color: rgb(0, 26, 29) !important; /* Unfold secondary-900 */
|
|
}
|
|
|
|
.modern-table-row {
|
|
border-bottom-color: rgb(1, 30, 34) !important; /* Unfold secondary-800 */
|
|
}
|
|
|
|
.modern-table-row:hover {
|
|
background-color: rgb(1, 36, 40) !important; /* Unfold secondary-700 */
|
|
}
|
|
|
|
.modern-table-row td {
|
|
color: white !important;
|
|
}
|
|
|
|
.modern-form-control {
|
|
background-color: rgb(1, 36, 40) !important; /* Unfold secondary-700 */
|
|
border-color: rgb(1, 30, 34) !important; /* Unfold secondary-800 */
|
|
color: white !important;
|
|
}
|
|
|
|
label, .je-label {
|
|
color: white !important;
|
|
}
|
|
|
|
/* Button sections in dark mode */
|
|
.json-editor-btngroup, .json-editor-btn-bar {
|
|
background-color: rgba(1, 30, 34, 0.25) !important; /* More subtle dark background */
|
|
border: 1px solid rgba(37, 208, 118, 0.1) !important; /* Subtle primary color border */
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
|
|
.modern-form-control:focus {
|
|
border-color: rgb(37, 208, 118) !important; /* Unfold primary-500 */
|
|
box-shadow: 0 0 0 3px rgba(37, 208, 118, 0.2) !important;
|
|
}
|
|
|
|
/* Error styling in dark mode */
|
|
.je-error + input,
|
|
.je-error + select,
|
|
.je-error + textarea,
|
|
.has-error .modern-form-control {
|
|
border-color: rgb(252, 165, 165) !important; /* Lighter red for dark mode */
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fca5a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
|
}
|
|
|
|
.je-error::after {
|
|
background-color: rgb(185, 28, 28) !important; /* Darker red background for tooltip */
|
|
color: white !important;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25) !important;
|
|
}
|
|
|
|
.je-error::before {
|
|
border-color: rgb(185, 28, 28) transparent transparent transparent !important;
|
|
}
|
|
|
|
/* Card styling in dark mode */
|
|
.modern-card {
|
|
background-color: rgb(1, 43, 48) !important; /* Unfold secondary-600 */
|
|
}
|
|
|
|
/* Error messages in dark mode */
|
|
.invalid-feedback {
|
|
color: #f87171 !important;
|
|
}
|
|
}
|
|
</style>
|
|
|