100 lines
2.5 KiB
CSS
100 lines
2.5 KiB
CSS
/* Shared edit mode background color configuration - change only here */
|
|
/* Grid row background: #fffbeb (see MgGridBase.cs OnCustomizeElement) */
|
|
/* InfoPanel background: #fffbeb (see below .edit-mode) */
|
|
/* Border color: #f59e0b */
|
|
|
|
/* Breakpoint configuration - CHANGE ONLY THESE VALUES */
|
|
/* 2 column breakpoint: 500px */
|
|
/* 3 column breakpoint: 800px */
|
|
|
|
/* Main panel - contained within splitter pane */
|
|
.mg-grid-info-panel {
|
|
container-type: inline-size;
|
|
container-name: infopanel;
|
|
background-color: var(--dxbl-bg-secondary, #f8f9fa);
|
|
transition: background-color 0.3s ease, border-color 0.3s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
/* Prevent panel from pushing out the splitter */
|
|
min-height: 0;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.mg-grid-info-panel.edit-mode {
|
|
background-color: #fffbeb !important;
|
|
border-left: 3px solid #f59e0b !important;
|
|
}
|
|
|
|
.mg-grid-info-panel.view-mode {
|
|
background-color: #f8f9fa !important;
|
|
border-left: 3px solid transparent !important;
|
|
}
|
|
|
|
/* Content area - scrollable, takes remaining space */
|
|
.mg-info-panel-content {
|
|
flex: 1 1 0;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding: 1rem;
|
|
min-height: 0; /* Critical for flex child to allow shrinking */
|
|
}
|
|
|
|
/* Grid layout with responsive column wrapping based on panel width */
|
|
.mg-info-panel-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
/* 1 column for narrow panels (< 500px) */
|
|
@container infopanel (max-width: 499px) {
|
|
.mg-info-panel-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* 2 columns for medium width (500px - 799px) */
|
|
@container infopanel (min-width: 500px) and (max-width: 799px) {
|
|
.mg-info-panel-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
/* 3 columns for wider panels (>= 800px) */
|
|
@container infopanel (min-width: 800px) {
|
|
.mg-info-panel-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
.mg-info-panel-item {
|
|
min-width: 0; /* Prevent grid blowout */
|
|
}
|
|
|
|
/* Fallback styles */
|
|
.info-panel-form {
|
|
width: 100%;
|
|
}
|
|
|
|
.info-panel-form .fw-semibold {
|
|
font-weight: 600;
|
|
color: var(--dxbl-text-secondary, #495057);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.info-panel-form .fw-semibold.text-primary {
|
|
color: var(--dxbl-primary, #0d6efd);
|
|
}
|
|
|
|
/* Text overflow handling - show ellipsis and full text in tooltip */
|
|
.info-panel-text-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
.info-panel-text-wrapper input[readonly] {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|