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:
Matt Batchelder
2026-02-11 09:17:45 -05:00
parent 54e092ec01
commit 29b56bef4f
28 changed files with 120 additions and 414 deletions

View File

@@ -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. */