feat: Enhance dark mode styling and improve dropdown menu behavior for better user experience
This commit is contained in:
Matt Batchelder
@@ -64,6 +64,65 @@ body {
|
||||
max-width: 100vw !important;
|
||||
}
|
||||
|
||||
/* Minimal mapping so `.dashboard-card` inherits the visual treatment used by widgets/panels.
|
||||
This allows collapsing one level of DOM without visual regressions. */
|
||||
/* Consolidated dashboard-card styling (now in CONSOLIDATED CARD/PANEL/WIDGET section) */
|
||||
|
||||
|
||||
/* Floating menus that are moved to body to escape overflowed containers */
|
||||
.ots-floating-menu {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 24px rgba(2,6,23,0.6);
|
||||
background-color: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
overflow: visible !important;
|
||||
position: fixed !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* Elevated z-index for menus so they render above other panels */
|
||||
.ots-floating-menu, .dropdown-menu {
|
||||
z-index: 99999 !important;
|
||||
}
|
||||
|
||||
/* Force ALL dropdown/context menu classes to render on top of everything.
|
||||
This is maximally aggressive to defeat any stacking context or overflow clipping. */
|
||||
.dropdown-menu,
|
||||
.ots-notif-menu,
|
||||
.ots-user-menu,
|
||||
.context-menu,
|
||||
.row-menu,
|
||||
.rowMenu,
|
||||
.menu-popover,
|
||||
.dataTables_buttons .dropdown-menu,
|
||||
.ots-floating-menu {
|
||||
position: fixed !important;
|
||||
z-index: 2147483647 !important;
|
||||
transform: none !important;
|
||||
will-change: auto !important;
|
||||
pointer-events: auto !important;
|
||||
visibility: visible !important;
|
||||
display: block !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Ensure dropdown list items and children aren't clipped */
|
||||
.dropdown-menu li,
|
||||
.dropdown-menu > li > a,
|
||||
.dropdown-menu > li > span,
|
||||
.dropdown-menu ul,
|
||||
.dropdown-menu div {
|
||||
overflow: visible !important;
|
||||
position: relative !important;
|
||||
z-index: 2147483647 !important;
|
||||
}
|
||||
|
||||
/* Remove any transform or overflow from menu ancestors that could create stacking context */
|
||||
.dropdown-menu *,
|
||||
.ots-floating-menu * {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* Light/dark mode toggle */
|
||||
#ots-theme-toggle {
|
||||
display: flex !important;
|
||||
@@ -2602,53 +2661,66 @@ body.ots-sidebar-open .ots-topbar {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Force Xibo panels/cards to dark theme (use higher specificity to override core styles) */
|
||||
body .panel,
|
||||
body .panel.panel-default,
|
||||
/* ============================================================================
|
||||
CONSOLIDATED CARD/PANEL/WIDGET STYLING (Simplified, single source of truth)
|
||||
============================================================================ */
|
||||
|
||||
.card,
|
||||
.panel,
|
||||
.panel.panel-default,
|
||||
.panel.panel-white,
|
||||
.panel.card,
|
||||
.panel.box,
|
||||
.widget {
|
||||
.widget,
|
||||
.dashboard-card {
|
||||
background-color: var(--color-surface) !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
border: 1px solid var(--color-border) !important;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body .panel .panel-body,
|
||||
body .panel .panel-footer,
|
||||
body .panel .panel-heading,
|
||||
.panel .panel-header {
|
||||
background-color: transparent !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
border-color: var(--color-border) !important;
|
||||
}
|
||||
|
||||
body .panel .panel-heading,
|
||||
.panel .panel-header {
|
||||
/* Unified header/heading styling */
|
||||
.panel-heading,
|
||||
.panel-header,
|
||||
.widget-title,
|
||||
.card-header,
|
||||
.dashboard-card-header {
|
||||
background-color: var(--color-surface-elevated) !important;
|
||||
border-bottom: 1px solid var(--color-border) !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
padding: 12px 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Tables inside panels should inherit dark background and readable text */
|
||||
/* Unified body styling */
|
||||
.panel-body,
|
||||
.panel-footer,
|
||||
.widget-body,
|
||||
.card-body,
|
||||
.dashboard-card-body {
|
||||
flex: 1;
|
||||
padding: 12px 16px;
|
||||
color: var(--color-text-primary) !important;
|
||||
background-color: transparent !important;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Tables inside cards inherit styling */
|
||||
.panel table,
|
||||
.panel table thead,
|
||||
.panel table tbody,
|
||||
.panel table tr,
|
||||
.panel table td,
|
||||
.panel table th,
|
||||
.panel .dataTables_wrapper {
|
||||
.panel .dataTables_wrapper,
|
||||
.card .dataTables_wrapper,
|
||||
.widget .dataTables_wrapper {
|
||||
background-color: transparent !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
}
|
||||
|
||||
/* Card-specific fallbacks */
|
||||
.card,
|
||||
.card .card-body {
|
||||
background-color: var(--color-surface) !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
border: 1px solid var(--color-border) !important;
|
||||
}
|
||||
|
||||
.panel-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
@@ -3116,8 +3188,57 @@ body .panel .panel-heading,
|
||||
box-shadow: 0 6px 16px rgba(8, 15, 30, 0.25);
|
||||
}
|
||||
|
||||
/* ============================================================================
|
||||
SIMPLIFIED TABLE & DATATABLES STYLING (Consolidated)
|
||||
============================================================================ */
|
||||
|
||||
.table,
|
||||
.table > thead > tr > th,
|
||||
.table > tbody > tr > td {
|
||||
color: var(--color-text-primary) !important;
|
||||
border-color: var(--color-border) !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.table-striped > tbody > tr:nth-of-type(odd) {
|
||||
background-color: rgba(79, 140, 255, 0.04) !important;
|
||||
}
|
||||
|
||||
.table-hover > tbody > tr:hover {
|
||||
background-color: rgba(79, 140, 255, 0.08) !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
}
|
||||
|
||||
/* Selected rows */
|
||||
.table tbody tr.selected,
|
||||
.table tbody tr.dt-row-selected {
|
||||
background-color: rgba(16, 185, 129, 0.25) !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
}
|
||||
|
||||
/* DataTables controls */
|
||||
.dataTables_wrapper {
|
||||
color: var(--color-text-primary) !important;
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_length,
|
||||
.dataTables_wrapper .dataTables_filter,
|
||||
.dataTables_wrapper .dataTables_info,
|
||||
.dataTables_wrapper .dataTables_paginate {
|
||||
color: var(--color-text-secondary) !important;
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_filter input,
|
||||
.dataTables_wrapper .dataTables_length select {
|
||||
background-color: var(--color-surface) !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
border: 1px solid var(--color-border) !important;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* OTS table card (inherits from consolidated .card rule above) */
|
||||
.ots-table-card {
|
||||
padding: 12px 16px 16px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
@@ -3259,7 +3380,6 @@ body.ots-light-mode .ots-table-toolbar .btn-primary {
|
||||
color: #e2e8f0 !important;
|
||||
border: 1px solid rgba(148, 163, 184, 0.25) !important;
|
||||
}
|
||||
|
||||
/* Extra specificity for Xibo Displays DataTable */
|
||||
.ots-displays-page #datatable-container .XiboData .table,
|
||||
.ots-displays-page #datatable-container .XiboData table.dataTable {
|
||||
|
||||
Reference in New Issue
Block a user