Adam
/
AyCode.Blazor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

DevExpress Fluent theme: grid/info panel refactor 

Major refactor for DevExpress Fluent theme compatibility:
- InfoPanel templates now use strongly-typed context (`InfoPanelContext`)
- Unified grid layout with `MgGridWithInfoPanel` wrapper
- CSS updated to use Fluent theme variables and container queries
- App-wide CSS cleanup and formatting improvements
- `.editorconfig` added for modern CSS support
- Improved InfoPanel instance resolution for nested grids
- Codebase is cleaner, more maintainable, and ready for further customization
This commit is contained in:
Loretta 2025-12-21 08:24:40 +01:00
parent 057f576375
commit 9d682bd741
6 changed files with 265 additions and 299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
AyCode.Blazor.Components/.editorconfig Normal file
View File

@ -0,0 +1,11 @@
root = true
# CSS files
[*.css]
# Disable warnings for modern CSS features
css_disable_validation_warnings = true
css_schema_version = css3
# Allow container queries and modern CSS
css_container_queries = true
css_custom_properties = true

18
AyCode.Blazor.Components/Components/Grids/MgGridBase.cs
View File

@ -112,12 +112,24 @@ public abstract class MgGridBase<TSignalRDataSource, TDataItem, TId, TLoggerClie
private object _focusedDataItem; private object _focusedDataItem;
/// <summary> /// <summary>
/// InfoPanel instance for displaying row details (from wrapper or direct) /// InfoPanel instance for displaying row details.
/// First checks own wrapper, then gets InfoPanel from root grid.
/// </summary> /// </summary>
public IInfoPanelBase? InfoPanelInstance public IInfoPanelBase? InfoPanelInstance
{ {
get => GridWrapper?.InfoPanelInstance; get
set { /* Set through wrapper */ } {
// First check if we have a direct wrapper with InfoPanel
if (GridWrapper?.InfoPanelInstance != null)
return GridWrapper.InfoPanelInstance;
// Get InfoPanel from root grid (handles nested grids)
var rootGrid = GetRootGrid();
if (rootGrid != this)
return rootGrid.InfoPanelInstance;
return null;
}
} }
/// <inheritdoc /> /// <inheritdoc />

22
AyCode.Blazor.Components/Components/Grids/MgGridInfoPanel.razor
View File

@ -6,7 +6,7 @@
@* Header *@ @* Header *@
@if (HeaderTemplate != null) @if (HeaderTemplate != null)
{ {
@HeaderTemplate(GetActiveDataItem()) @HeaderTemplate(CreateContext())
} }
else if (_currentGrid != null) else if (_currentGrid != null)
{ {
@ -27,12 +27,12 @@
{ {
@if (BeforeColumnsTemplate != null) @if (BeforeColumnsTemplate != null)
{ {
@BeforeColumnsTemplate(GetActiveDataItem()) @BeforeColumnsTemplate(CreateContext())
} }
@if (ColumnsTemplate != null) @if (ColumnsTemplate != null)
{ {
@ColumnsTemplate(GetActiveDataItem()) @ColumnsTemplate(CreateContext())
} }
else else
{ {
@ -41,7 +41,7 @@
@if (AfterColumnsTemplate != null) @if (AfterColumnsTemplate != null)
{ {
@AfterColumnsTemplate(GetActiveDataItem()) @AfterColumnsTemplate(CreateContext())
} }
} }
else else
@ -55,22 +55,24 @@
@* Footer *@ @* Footer *@
@if (FooterTemplate != null) @if (FooterTemplate != null)
{ {
@FooterTemplate(GetActiveDataItem()) @FooterTemplate(CreateContext())
} }
</div> </div>
@code { @code {
[Parameter] public RenderFragment<object?>? HeaderTemplate { get; set; } [Parameter] public RenderFragment<InfoPanelContext>? HeaderTemplate { get; set; }
[Parameter] public RenderFragment<object?>? BeforeColumnsTemplate { get; set; } [Parameter] public RenderFragment<InfoPanelContext>? BeforeColumnsTemplate { get; set; }
[Parameter] public RenderFragment<object?>? ColumnsTemplate { get; set; } [Parameter] public RenderFragment<InfoPanelContext>? ColumnsTemplate { get; set; }
[Parameter] public RenderFragment<object?>? AfterColumnsTemplate { get; set; } [Parameter] public RenderFragment<InfoPanelContext>? AfterColumnsTemplate { get; set; }
[Parameter] public RenderFragment<object?>? FooterTemplate { get; set; } [Parameter] public RenderFragment<InfoPanelContext>? FooterTemplate { get; set; }
/// <summary> /// <summary>
/// Called when the data item changes (row selection changed) /// Called when the data item changes (row selection changed)
/// </summary> /// </summary>
[Parameter] public EventCallback<object?> OnDataItemChanged { get; set; } [Parameter] public EventCallback<object?> OnDataItemChanged { get; set; }
private InfoPanelContext CreateContext() => new(GetActiveDataItem(), _isEditMode);
private string GetColumnCountClass() => FixedColumnCount switch private string GetColumnCountClass() => FixedColumnCount switch
{ {
1 => "mg-columns-1", 1 => "mg-columns-1",

5
AyCode.Blazor.Components/Components/Grids/MgGridInfoPanel.razor.cs
View File

@ -14,6 +14,11 @@ public interface IInfoPanelBase
void RefreshData(IMgGridBase grid, object? dataItem, int visibleIndex = -1); void RefreshData(IMgGridBase grid, object? dataItem, int visibleIndex = -1);
} }
/// <summary>
/// Context for InfoPanel templates containing data item and edit mode state
/// </summary>
public record InfoPanelContext(object? DataItem, bool IsEditMode);
/// <summary> /// <summary>
/// InfoPanel component for displaying and editing grid row details /// InfoPanel component for displaying and editing grid row details
/// </summary> /// </summary>

123
AyCode.Blazor.Components/Components/Grids/MgGridInfoPanel.razor.css
View File

@ -1,110 +1,34 @@
/* Shared edit mode background color configuration - change only here */ /* MgGridInfoPanel scoped styles - component-specific overrides only */
/* Base styles are in wwwroot/css/mg-grid-info-panel.css */
/* Shared edit mode background color configuration */
/* Grid row background: #fffbeb (see MgGridBase.cs OnCustomizeElement) */ /* Grid row background: #fffbeb (see MgGridBase.cs OnCustomizeElement) */
/* InfoPanel background: #fffbeb (see below .edit-mode) */ /* InfoPanel background: #fffbeb (see below .edit-mode) */
/* Border color: #f59e0b */ /* Border color: #f59e0b */
/* Main panel - contained within splitter pane */ /* Edit/View mode transitions and specific colors */
.mg-grid-info-panel { .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; 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%;
/* Default breakpoints - can be overridden via style attribute */
--mg-bp-2col: 500px;
--mg-bp-3col: 800px;
--mg-bp-4col: 1200px;
}
.mg-grid-info-panel.edit-mode {
background-color: #fffbeb !important;
border-left: 3px solid #f59e0b !important;
} }
.mg-grid-info-panel.view-mode { .mg-grid-info-panel.view-mode {
background-color: #f8f9fa !important; background-color: var(--DS-color-surface-neutral-subdued-rest, #f8f9fa) !important;
border-left: 3px solid transparent !important; border-left: 3px solid transparent !important;
} }
/* Content area - scrollable, takes remaining space */ /* Fallback styles for info-panel-form (not in global CSS) */
.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;
}
/* Fixed column count classes - override responsive behavior */
.mg-columns-1 .mg-info-panel-grid {
grid-template-columns: 1fr !important;
}
.mg-columns-2 .mg-info-panel-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.mg-columns-3 .mg-info-panel-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
.mg-columns-4 .mg-info-panel-grid {
grid-template-columns: repeat(4, 1fr) !important;
}
/* Responsive layouts using container queries (when no fixed column count) */
/* 1 column for narrow panels (< 2col breakpoint) - default above */
/* 2 columns for medium width */
@container infopanel (min-width: 500px) {
.mg-grid-info-panel:not(.mg-columns-1):not(.mg-columns-2):not(.mg-columns-3):not(.mg-columns-4) .mg-info-panel-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* 3 columns for wider panels */
@container infopanel (min-width: 800px) {
.mg-grid-info-panel:not(.mg-columns-1):not(.mg-columns-2):not(.mg-columns-3):not(.mg-columns-4) .mg-info-panel-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* 4 columns for very wide panels */
@container infopanel (min-width: 1200px) {
.mg-grid-info-panel:not(.mg-columns-1):not(.mg-columns-2):not(.mg-columns-3):not(.mg-columns-4) .mg-info-panel-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.mg-info-panel-item {
min-width: 0; /* Prevent grid blowout */
}
/* Fallback styles */
.info-panel-form { .info-panel-form {
width: 100%; width: 100%;
} }
.info-panel-form .fw-semibold { .info-panel-form .fw-semibold {
font-weight: 600; font-weight: 600;
color: var(--dxbl-text-secondary, #495057); color: var(--DS-color-content-neutral-subdued-rest, #495057);
font-size: 0.875rem; font-size: 0.875rem;
} }
.info-panel-form .fw-semibold.text-primary { .info-panel-form .fw-semibold.text-primary {
color: var(--dxbl-primary, #0d6efd); color: var(--DS-color-content-primary-default-rest, #0d6efd);
} }
/* Text overflow handling - show ellipsis and full text in tooltip */ /* Text overflow handling - show ellipsis and full text in tooltip */
@ -112,37 +36,12 @@
width: 100%; width: 100%;
} }
.info-panel-text-wrapper input[readonly] { .info-panel-text-wrapper input[readonly] {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
/* View mode value styling - matches DevExpress theme */
.mg-info-panel-value {
padding: 0.375rem 0.75rem;
min-height: 2rem;
display: flex;
align-items: center;
justify-content: flex-start;
background-color: var(--dxbl-bg, #fff);
border: 1px solid var(--dxbl-border-color, #dee2e6);
border-radius: var(--dxbl-border-radius, 0.25rem);
font-size: var(--dxbl-font-size, 0.875rem);
color: var(--dxbl-text, #212529);
overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap; white-space: nowrap;
} }
.mg-info-panel-value-numeric {
font-variant-numeric: tabular-nums;
}
.mg-info-panel-value-bool { .mg-info-panel-value-bool {
/* Keep left aligned */ /* Keep left aligned */
} }
.mg-info-panel-value-date {
font-variant-numeric: tabular-nums;
}

385
AyCode.Blazor.Components/wwwroot/css/mg-grid-info-panel.css
View File

@ -1,287 +1,324 @@
/* MgGridInfoPanel styles - DevExpress theme compatible */ /* MgGridInfoPanel styles - DevExpress Fluent theme compatible */
/* Main panel - uses DevExpress theme variables */ /*
DevExpress Fluent theme uses --DS-* CSS variables (Design System tokens).
These are defined on .dxbl-theme-fluent class and inherited by child elements.
*/
/* Main panel - uses DevExpress Design System variables */
.mg-grid-info-panel { .mg-grid-info-panel {
container-type: inline-size; background-color: var(--DS-color-surface-neutral-subdued-rest, #f8f9fa);
container-name: infopanel; color: var(--DS-color-content-neutral-default-rest, #212529);
background-color: var(--dxbl-bg-secondary); font-family: var(--DS-font-family-sans-serif, inherit);
color: var(--dxbl-text); font-size: var(--DS-font-size-body-1, 14px);
font-family: var(--dxbl-font-family); display: flex;
font-size: var(--dxbl-font-size); flex-direction: column;
display: flex; overflow: hidden;
flex-direction: column; min-height: 0;
overflow: hidden; max-height: 100%;
min-height: 0; border: 1px solid var(--DS-color-border-neutral-default-rest, #dee2e6);
max-height: 100%;
border-left: 1px solid var(--dxbl-border-color);
} }
.mg-grid-info-panel.edit-mode { .mg-grid-info-panel.edit-mode {
background-color: var(--dxbl-warning-bg, #fffbeb); background-color: var(--DS-color-surface-warning-subdued-rest, #fffbeb);
border-left: 3px solid var(--dxbl-warning, #f59e0b); border: 1px solid var(--DS-color-border-neutral-default-rest, #dee2e6);
border-left: 3px solid var(--DS-color-border-warning-default-rest, #f59e0b);
}
/* Container queries support - progressive enhancement */
@supports (container-type: inline-size) {
.mg-grid-info-panel {
container-type: inline-size;
container-name: infopanel;
}
} }
/* Header styling */ /* Header styling */
.mg-grid-info-panel .mg-info-panel-header { .mg-grid-info-panel .mg-info-panel-header {
padding: var(--dxbl-spacer-sm) var(--dxbl-spacer); padding: var(--DS-sizing-80, 0.5rem) var(--DS-sizing-160, 1rem);
background-color: var(--dxbl-bg); background-color: var(--DS-color-surface-neutral-default-rest, #ffffff);
border-bottom: 1px solid var(--dxbl-border-color); border-bottom: 1px solid var(--DS-color-border-neutral-default-rest, #dee2e6);
font-weight: 600; font-weight: var(--DS-font-weight-subtitle-2, 600);
} }
/* Toolbar styling */ /* Toolbar styling */
.mg-info-panel-toolbar { .mg-info-panel-toolbar {
padding: var(--dxbl-spacer-xs) var(--dxbl-spacer-sm); padding: var(--DS-sizing-40, 0.25rem) var(--DS-sizing-80, 0.5rem);
background-color: var(--dxbl-bg); background-color: var(--DS-color-surface-neutral-default-rest, #ffffff);
border-bottom: 1px solid var(--dxbl-border-color); border-bottom: 1px solid var(--DS-color-border-neutral-default-rest, #dee2e6);
} }
/* Content area - scrollable */ /* Content area - scrollable */
.mg-info-panel-content { .mg-info-panel-content {
flex: 1 1 0; flex: 1 1 0;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
padding: var(--dxbl-spacer); padding: var(--DS-sizing-160, 1rem);
min-height: 0; min-height: 0;
} }
/* Grid layout for columns */ /* Grid layout for columns */
.mg-info-panel-grid { .mg-info-panel-grid {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: var(--dxbl-spacer-sm); gap: var(--DS-sizing-80, 0.5rem);
} }
/* Fixed column count classes */ /* Fixed column count classes */
.mg-columns-1 .mg-info-panel-grid { grid-template-columns: 1fr !important; } .mg-columns-1 .mg-info-panel-grid {
.mg-columns-2 .mg-info-panel-grid { grid-template-columns: repeat(2, 1fr) !important; } grid-template-columns: 1fr !important;
.mg-columns-3 .mg-info-panel-grid { grid-template-columns: repeat(3, 1fr) !important; } }
.mg-columns-4 .mg-info-panel-grid { grid-template-columns: repeat(4, 1fr) !important; }
.mg-columns-2 .mg-info-panel-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.mg-columns-3 .mg-info-panel-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
.mg-columns-4 .mg-info-panel-grid {
grid-template-columns: repeat(4, 1fr) !important;
}
/* Responsive layouts using container queries */ /* Responsive layouts using container queries */
@container infopanel (min-width: 400px) { @container infopanel (min-width: 400px) {
.mg-grid-info-panel:not(.mg-columns-1):not(.mg-columns-2):not(.mg-columns-3):not(.mg-columns-4) .mg-info-panel-grid { .mg-grid-info-panel:not(.mg-columns-1):not(.mg-columns-2):not(.mg-columns-3):not(.mg-columns-4) .mg-info-panel-grid {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
} }
@container infopanel (min-width: 800px) { @container infopanel (min-width: 800px) {
.mg-grid-info-panel:not(.mg-columns-1):not(.mg-columns-2):not(.mg-columns-3):not(.mg-columns-4) .mg-info-panel-grid { .mg-grid-info-panel:not(.mg-columns-1):not(.mg-columns-2):not(.mg-columns-3):not(.mg-columns-4) .mg-info-panel-grid {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
} }
} }
@container infopanel (min-width: 1300px) { @container infopanel (min-width: 1300px) {
.mg-grid-info-panel:not(.mg-columns-1):not(.mg-columns-2):not(.mg-columns-3):not(.mg-columns-4) .mg-info-panel-grid { .mg-grid-info-panel:not(.mg-columns-1):not(.mg-columns-2):not(.mg-columns-3):not(.mg-columns-4) .mg-info-panel-grid {
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
} }
} }
/* Grid item */ /* Grid item */
.mg-info-panel-item { .mg-info-panel-item {
min-width: 0; min-width: 0;
} }
/* Label styling */ /* Label styling */
.mg-info-panel-label { .mg-info-panel-label {
display: block; display: block;
margin-bottom: var(--dxbl-spacer-xs); margin-bottom: var(--DS-sizing-40, 0.25rem);
font-size: calc(var(--dxbl-font-size) * 0.875); font-size: var(--DS-font-size-caption-1, 12px);
font-weight: 600; font-weight: var(--DS-font-weight-caption-1-strong, 600);
color: var(--dxbl-text-secondary); color: var(--DS-color-content-neutral-subdued-rest, #6c757d);
} }
.mg-info-panel-label.editable { .mg-info-panel-label.editable {
color: var(--dxbl-primary); color: var(--DS-color-content-primary-default-rest, #0d6efd);
} }
/* View mode value styling */ /* View mode value styling */
.mg-info-panel-value { .mg-info-panel-value {
display: block; display: block;
padding: var(--dxbl-spacer-xs) 0; padding: var(--DS-sizing-40, 0.25rem) 0;
color: var(--dxbl-text); color: var(--DS-color-content-neutral-default-rest, #212529);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.mg-info-panel-value-numeric { .mg-info-panel-value-numeric {
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
.mg-info-panel-value-date { .mg-info-panel-value-date {
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
/* Empty state */ /* Empty state */
.mg-info-panel-empty { .mg-info-panel-empty {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
color: var(--dxbl-text-muted); color: var(--DS-color-content-neutral-subdued-disabled, #adb5bd);
padding: var(--dxbl-spacer-lg); padding: var(--DS-sizing-240, 1.5rem);
text-align: center; text-align: center;
} }
/* ======================================== /* ========================================
Tables inside info panel - Default Base Styling Tables inside info panel - Default Base Styling
Auto-responsive table layout that fits container width
Can be overridden with inline styles if needed
======================================== */ ======================================== */
.mg-info-panel-content table { .mg-info-panel-content table {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
table-layout: fixed; table-layout: fixed;
border-collapse: collapse; border-collapse: collapse;
font-size: var(--dxbl-font-size); font-size: var(--DS-font-size-body-1, 14px);
color: var(--dxbl-text); color: var(--DS-color-content-neutral-default-rest, #212529);
margin-bottom: var(--dxbl-spacer); margin-bottom: var(--DS-sizing-160, 1rem);
} }
.mg-info-panel-content table th, .mg-info-panel-content table th,
.mg-info-panel-content table td { .mg-info-panel-content table td {
padding: var(--dxbl-spacer-xs) var(--dxbl-spacer-sm); padding: var(--DS-sizing-40, 0.25rem) var(--DS-sizing-80, 0.5rem);
border: 1px solid var(--dxbl-border-color); border: 1px solid var(--DS-color-border-neutral-default-rest, #dee2e6);
text-align: left; text-align: left;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
vertical-align: middle; vertical-align: middle;
} }
.mg-info-panel-content table th { .mg-info-panel-content table th {
background-color: var(--dxbl-bg-secondary); background-color: var(--DS-color-surface-neutral-subdued-rest, #f8f9fa);
font-weight: 600; font-weight: var(--DS-font-weight-body-1-strong, 600);
color: var(--dxbl-text-secondary); color: var(--DS-color-content-neutral-subdued-rest, #6c757d);
} }
.mg-info-panel-content table tbody tr:nth-child(odd) { .mg-info-panel-content table tbody tr:nth-child(odd) {
background-color: var(--dxbl-bg); background-color: var(--DS-color-surface-neutral-default-rest, #ffffff);
} }
.mg-info-panel-content table tbody tr:nth-child(even) { .mg-info-panel-content table tbody tr:nth-child(even) {
background-color: var(--dxbl-bg-secondary); background-color: var(--DS-color-surface-neutral-subdued-rest, #f8f9fa);
} }
.mg-info-panel-content table tbody tr:hover { .mg-info-panel-content table tbody tr:hover {
background-color: var(--dxbl-row-hover-bg); background-color: var(--DS-color-surface-neutral-default-hovered, #f5f5f5);
} }
/* Responsive: make table more compact on smaller screens */ /* Responsive: make table more compact on smaller screens */
@media (max-width: 768px) { @media (max-width: 768px) {
.mg-info-panel-content table { .mg-info-panel-content table {
font-size: 0.875rem; font-size: 0.875rem;
} }
.mg-info-panel-content table th, .mg-info-panel-content table th,
.mg-info-panel-content table td { .mg-info-panel-content table td {
padding: 0.375rem; padding: 0.375rem;
} }
} }
/* Splitter pane styling */ /* Splitter pane styling - no padding/margin */
.mg-grid-with-info-panel { .mg-grid-with-info-panel {
height: 100%; height: 100%;
/* Override DevExpress splitter pane padding variables */
--dxbl-splitter-pane-padding-x: 0;
--dxbl-splitter-pane-padding-y: 0;
--dxbl-splitter-pane-padding-x-s: 0;
--dxbl-splitter-pane-padding-x-m: 0;
--dxbl-splitter-pane-padding-x-l: 0;
--dxbl-splitter-pane-padding-y-s: 0;
--dxbl-splitter-pane-padding-y-m: 0;
--dxbl-splitter-pane-padding-y-l: 0;
}
.mg-grid-with-info-panel > .dxbl-splitter-pane {
padding: 0 !important;
margin: 0;
} }
.mg-info-panel-pane { .mg-info-panel-pane {
background-color: var(--dxbl-bg-secondary); background-color: var(--DS-color-surface-neutral-subdued-rest, #f8f9fa);
padding: 0 !important;
margin: 0;
} }
/* Fullscreen overlay styling (Bootstrap 5 based) */ /* Fullscreen overlay styling (Bootstrap 5 based) */
.mg-fullscreen-overlay { .mg-fullscreen-overlay {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
z-index: 1050; z-index: 1050;
background-color: var(--dxbl-bg, #fff); background-color: var(--DS-color-surface-neutral-default-rest, #ffffff);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
} }
.mg-fullscreen-header { .mg-fullscreen-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
background-color: var(--dxbl-primary, #0d6efd); background-color: var(--DS-color-surface-primary-default-rest, #0d6efd);
color: #fff; color: var(--DS-color-content-neutral-static-inverted-rest, #fff);
border-bottom: 1px solid var(--dxbl-border-color); border-bottom: 1px solid var(--DS-color-border-neutral-default-rest, #dee2e6);
flex-shrink: 0; flex-shrink: 0;
} }
.mg-fullscreen-title { .mg-fullscreen-title {
font-size: 1.1rem; font-size: var(--DS-font-size-subtitle-2, 1.1rem);
font-weight: 600; font-weight: var(--DS-font-weight-subtitle-2, 600);
margin: 0; margin: 0;
} }
.mg-fullscreen-header .btn-close-white { .mg-fullscreen-header .btn-close-white {
filter: brightness(0) invert(1); filter: brightness(0) invert(1);
opacity: 0.8; opacity: 0.8;
} }
.mg-fullscreen-header .btn-close-white:hover { .mg-fullscreen-header .btn-close-white:hover {
opacity: 1; opacity: 1;
} }
.mg-fullscreen-body { .mg-fullscreen-body {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.mg-fullscreen-body .mg-grid-with-info-panel, .mg-fullscreen-body .mg-grid-with-info-panel,
.mg-fullscreen-body .dxbl-grid { .mg-fullscreen-body .dxbl-grid {
flex: 1; flex: 1;
height: 100%; height: 100%;
} }
/* Legacy DxWindow styling (kept for backwards compatibility) */ /* Legacy DxWindow styling (kept for backwards compatibility) */
.mg-fullscreen-window { .mg-fullscreen-window {
position: fixed !important; position: fixed !important;
top: 0 !important; top: 0 !important;
left: 0 !important; left: 0 !important;
margin: 0 !important; margin: 0 !important;
border-radius: 0 !important; border-radius: 0 !important;
} }
.mg-fullscreen-window .dxbl-window-body { .mg-fullscreen-window .dxbl-window-body {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.mg-fullscreen-content { .mg-fullscreen-content {
flex: 1; flex: 1;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.mg-fullscreen-content .mg-grid-with-info-panel, .mg-fullscreen-content .mg-grid-with-info-panel,
.mg-fullscreen-content .dxbl-grid { .mg-fullscreen-content .dxbl-grid {
flex: 1; flex: 1;
height: 100%; height: 100%;
} }
/* Fullscreen icon classes */ /* Fullscreen icon classes */
.grid-fullscreen::before { .grid-fullscreen::before {
content: "\e90c"; content: "\e90c";
font-family: 'devextreme-icons'; font-family: 'devextreme-icons';
} }
.grid-fullscreen-exit::before { .grid-fullscreen-exit::before {
content: "\e90d"; content: "\e90d";
font-family: 'devextreme-icons'; font-family: 'devextreme-icons';
} }