Refactor dashboard card classes to use 'content-card' instead of 'dashboard-card'
- Updated various views to replace 'dashboard-card' with 'content-card' for consistency in styling. - Modified filter and table card classes across multiple pages including applications, campaigns, commands, datasets, dayparts, displays, display groups, display profiles, fonts, layouts, libraries, menu boards, modules, player software, playlists, resolutions, schedules, settings, sync groups, tags, tasks, templates, transitions, users, and user groups.
This commit is contained in:
@@ -485,7 +485,7 @@ html::before, html::after, body::before, body::after, #page-wrapper::before, #pa
|
||||
}
|
||||
|
||||
/* Defensive: override any explicit white panel backgrounds that leak outside their container */
|
||||
.card, .panel, .panel-body, .dashboard-card, .ots-sidebar li.sidebar-list.active > a {
|
||||
.card, .panel, .panel-body, .dashboard-card, .content-card, .ots-sidebar li.sidebar-list.active > a {
|
||||
background-color: var(--color-surface) !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
}
|
||||
@@ -1341,7 +1341,7 @@ body.login-page *::after {
|
||||
|
||||
|
||||
/* EXTRA DEFENSIVE: ensure no white background shows through on long pages */
|
||||
html, body, #page-wrapper, .ots-shell, .ots-main, #content-wrapper, .content-wrapper, .ots-content, .page-content, .container, .container-fluid, .dashboard-page, .dashboard, .dashboard-card, .page {
|
||||
html, body, #page-wrapper, .ots-shell, .ots-main, #content-wrapper, .content-wrapper, .ots-content, .page-content, .container, .container-fluid, .dashboard-page, .dashboard, .dashboard-card, .content-card, .page {
|
||||
background-color: var(--color-background) !important;
|
||||
background-image: none !important;
|
||||
background-repeat: no-repeat !important;
|
||||
|
||||
@@ -438,7 +438,8 @@ body.ots-light-mode .ots-topbar .nav-link:hover {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
body.ots-light-mode .dashboard-card {
|
||||
body.ots-light-mode .dashboard-card,
|
||||
body.ots-light-mode .content-card {
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.95));
|
||||
border-color: #e2e8f0;
|
||||
}
|
||||
@@ -480,6 +481,7 @@ html, body, #page-wrapper, .ots-main, .ots-content, .page-content {
|
||||
.ots-topbar,
|
||||
.ots-footer,
|
||||
.dashboard-card,
|
||||
.content-card,
|
||||
.dropdown-menu,
|
||||
.dropdown-right,
|
||||
.modal-content {
|
||||
@@ -3772,16 +3774,20 @@ body.ots-sidebar-open .ots-topbar {
|
||||
DASHBOARD PAGE
|
||||
============================================================================ */
|
||||
|
||||
.dashboard-card {
|
||||
.dashboard-card,
|
||||
.content-card {
|
||||
background: linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.92));
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 18px 40px rgba(8, 15, 30, 0.35);
|
||||
backdrop-filter: blur(6px);
|
||||
transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
|
||||
}
|
||||
|
||||
.dashboard-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 22px 50px rgba(8, 15, 30, 0.45);
|
||||
@@ -3789,7 +3795,9 @@ body.ots-sidebar-open .ots-topbar {
|
||||
}
|
||||
|
||||
.dashboard-card .panel-header,
|
||||
.dashboard-card .widget-title {
|
||||
.dashboard-card .widget-title,
|
||||
.content-card .panel-header,
|
||||
.content-card .widget-title {
|
||||
background: linear-gradient(90deg, rgba(59, 130, 246, 0.16), rgba(99, 102, 241, 0.12));
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.2);
|
||||
padding: 18px 20px;
|
||||
@@ -3799,13 +3807,19 @@ body.ots-sidebar-open .ots-topbar {
|
||||
.dashboard-card .panel-header h3,
|
||||
.dashboard-card .widget-title h3,
|
||||
.dashboard-card .panel-header h4,
|
||||
.dashboard-card .widget-title h4 {
|
||||
.dashboard-card .widget-title h4,
|
||||
.content-card .panel-header h3,
|
||||
.content-card .widget-title h3,
|
||||
.content-card .panel-header h4,
|
||||
.content-card .widget-title h4 {
|
||||
color: var(--color-text-primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.dashboard-card .panel-body,
|
||||
.dashboard-card .widget-body {
|
||||
.dashboard-card .widget-body,
|
||||
.content-card .panel-body,
|
||||
.content-card .widget-body {
|
||||
padding: 20px;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
@@ -4320,7 +4334,8 @@ body.ots-sidebar-open .ots-topbar {
|
||||
.panel.panel-white,
|
||||
.panel.box,
|
||||
.widget,
|
||||
.dashboard-card {
|
||||
.dashboard-card,
|
||||
.content-card {
|
||||
background-color: var(--color-surface) !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
border: 1px solid var(--color-border) !important;
|
||||
@@ -6809,6 +6824,17 @@ body.ots-light-mode .ots-displays-page #datatable-container .XiboData table.data
|
||||
will-change: auto !important;
|
||||
}
|
||||
|
||||
/* Content cards are static – no hover animation */
|
||||
.content-card {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.content-card:hover {
|
||||
transform: none !important;
|
||||
box-shadow: 0 18px 40px rgba(8, 15, 30, 0.35) !important;
|
||||
border-color: rgba(148, 163, 184, 0.18) !important;
|
||||
}
|
||||
|
||||
/* Ensure the very bottom of the page follows the theme variables (light/dark)
|
||||
by forcing html/body and shell containers to use the variable-driven
|
||||
background. This prevents residual dark bars under the footer. */
|
||||
|
||||
Reference in New Issue
Block a user