Enhance OTS Signage Theme with Icon Dashboard and UI Improvements
- Updated theme.js to refine dropdown initialization, excluding user menu handling. - Modified authed.twig to allow CSS variable theming for background and text colors, and adjusted content wrapper classes based on navigation state. - Adjusted override-styles.twig to improve layout responsiveness and ensure proper styling for horizontal navigation mode. - Enhanced theme-scripts.twig to improve user menu functionality, including repositioning and click handling. - Introduced a new dashboard-icon-page.twig for a stylized icon dashboard, featuring card-based buttons for quick access to various functionalities, along with custom styles for better user experience.
This commit is contained in:
Matt Batchelder
@@ -31,6 +31,28 @@
|
||||
--ots-radius-lg: 14px;
|
||||
|
||||
--ots-transition: 160ms ease;
|
||||
|
||||
/* Modal pop-ups */
|
||||
--modal-backdrop-bg: rgba(2, 6, 23, 0.55);
|
||||
--modal-backdrop-blur: 6px;
|
||||
--modal-bg: #141c2b;
|
||||
--modal-border: #2c3a54;
|
||||
--modal-radius: 16px;
|
||||
--modal-shadow: 0 24px 64px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
|
||||
--modal-header-bg: #0f172a;
|
||||
--modal-header-border: #2c3a54;
|
||||
--modal-header-text: #f1f5f9;
|
||||
--modal-body-bg: #141c2b;
|
||||
--modal-body-text: #e2e8f0;
|
||||
--modal-footer-bg: #0f172a;
|
||||
--modal-footer-border: #2c3a54;
|
||||
--modal-close-color: #64748b;
|
||||
--modal-close-hover: #f1f5f9;
|
||||
--modal-input-bg: #0b111a;
|
||||
--modal-input-border: #2c3a54;
|
||||
--modal-input-text: #e6eefb;
|
||||
--modal-input-focus-border: #4f8cff;
|
||||
--modal-input-focus-ring: rgba(79, 140, 255, 0.2);
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
@@ -107,6 +129,41 @@ hr {
|
||||
box-shadow: var(--ots-shadow-sm);
|
||||
}
|
||||
|
||||
/* Horizontal nav mode: remove sidebar margins from #content-wrapper */
|
||||
.navbar.navbar-expand-lg ~ #content-wrapper {
|
||||
margin-left: 0 !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
padding-left: 20px !important;
|
||||
padding-right: 20px !important;
|
||||
}
|
||||
|
||||
.navbar.navbar-expand-lg ~ #content-wrapper .page-content {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.navbar.navbar-expand-lg ~ #content-wrapper .page-content .row {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.navbar.navbar-expand-lg ~ #content-wrapper .page-content [class*="col-"] {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.navbar.navbar-expand-lg ~ #content-wrapper .page-content > .row > .col-sm-12 {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.navbar.navbar-expand-lg ~ #content-wrapper,
|
||||
.navbar.navbar-expand-lg ~ #content-wrapper .page-content {
|
||||
background: var(--ots-bg) !important;
|
||||
color: var(--ots-text) !important;
|
||||
}
|
||||
|
||||
.navbar-brand,
|
||||
.navbar-brand .xibo-logo {
|
||||
color: var(--ots-text);
|
||||
@@ -792,54 +849,138 @@ textarea:focus {
|
||||
MODALS
|
||||
============================================================================= */
|
||||
|
||||
/* --- Content wrapper --- */
|
||||
.modal-content {
|
||||
border-radius: var(--ots-radius-lg);
|
||||
background-color: var(--color-surface) !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
border: 1px solid var(--color-border) !important;
|
||||
background-color: var(--modal-bg, var(--ots-surface)) !important;
|
||||
color: var(--modal-body-text, var(--ots-text)) !important;
|
||||
border: 1px solid var(--modal-border, var(--ots-border)) !important;
|
||||
box-shadow: var(--modal-shadow, var(--ots-shadow-lg)) !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* --- Transparent parents --- */
|
||||
.modal,
|
||||
.modal-header,
|
||||
.modal-body,
|
||||
.modal-footer {
|
||||
background-color: transparent !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
color: var(--modal-body-text, var(--ots-text)) !important;
|
||||
}
|
||||
|
||||
/* --- Header --- */
|
||||
.modal-header {
|
||||
background-color: var(--modal-header-bg, var(--ots-surface)) !important;
|
||||
border-bottom: 1px solid var(--modal-header-border, var(--ots-border)) !important;
|
||||
padding: 16px 20px !important;
|
||||
}
|
||||
|
||||
.modal-title,
|
||||
.modal-header h4,
|
||||
.modal-header h5 {
|
||||
color: var(--modal-header-text, var(--ots-text)) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* --- Body --- */
|
||||
.modal-body {
|
||||
background-color: var(--modal-body-bg, var(--ots-surface)) !important;
|
||||
color: var(--modal-body-text, var(--ots-text)) !important;
|
||||
padding: 20px !important;
|
||||
}
|
||||
|
||||
/* --- Backdrop --- */
|
||||
.modal-backdrop,
|
||||
.modal-backdrop.show,
|
||||
.modal-backdrop.in {
|
||||
background-color: rgba(0, 0, 0, 0.3) !important;
|
||||
backdrop-filter: blur(4px) !important;
|
||||
background-color: var(--modal-backdrop-bg, rgba(0, 0, 0, 0.3)) !important;
|
||||
backdrop-filter: blur(var(--modal-backdrop-blur, 4px)) !important;
|
||||
-webkit-backdrop-filter: blur(var(--modal-backdrop-blur, 4px)) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* --- Footer --- */
|
||||
.modal-footer {
|
||||
border-top: 1px solid var(--color-border) !important;
|
||||
background-color: var(--modal-footer-bg, transparent) !important;
|
||||
border-top: 1px solid var(--modal-footer-border, var(--ots-border)) !important;
|
||||
padding: 12px 20px !important;
|
||||
}
|
||||
|
||||
/* Ensure modal footer buttons (cancel/secondary) are readable on dark surfaces */
|
||||
/* Footer buttons — secondary / cancel */
|
||||
.modal-footer .btn,
|
||||
.modal-footer button {
|
||||
background: var(--ots-surface-3);
|
||||
color: var(--ots-text) !important;
|
||||
border: 1px solid var(--ots-border) !important;
|
||||
background: var(--modal-body-bg, var(--ots-surface-3)) !important;
|
||||
color: var(--modal-body-text, var(--ots-text)) !important;
|
||||
border: 1px solid var(--modal-border, var(--ots-border)) !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: var(--ots-radius-sm) !important;
|
||||
transition: background var(--ots-transition),
|
||||
color var(--ots-transition),
|
||||
border-color var(--ots-transition);
|
||||
}
|
||||
|
||||
.modal-footer .btn:hover,
|
||||
.modal-footer button:hover {
|
||||
background: var(--ots-surface-2);
|
||||
background: rgba(79, 140, 255, 0.08) !important;
|
||||
color: var(--ots-primary) !important;
|
||||
border-color: var(--ots-primary) !important;
|
||||
}
|
||||
|
||||
/* Footer buttons — primary / submit */
|
||||
.modal-footer .btn.btn-primary,
|
||||
.modal-footer button.btn-primary {
|
||||
background: var(--ots-primary) !important;
|
||||
color: #0b1020 !important;
|
||||
border-color: var(--ots-primary-2) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.modal-footer .btn.btn-primary:hover,
|
||||
.modal-footer button.btn-primary:hover {
|
||||
background: var(--ots-primary-2) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Footer buttons — danger */
|
||||
.modal-footer .btn.btn-danger {
|
||||
background: var(--ots-danger) !important;
|
||||
color: #ffffff !important;
|
||||
border-color: var(--ots-danger) !important;
|
||||
}
|
||||
|
||||
/* --- Form controls inside modals --- */
|
||||
.modal-body .form-control,
|
||||
.modal-body input[type="text"],
|
||||
.modal-body input[type="number"],
|
||||
.modal-body input[type="email"],
|
||||
.modal-body input[type="password"],
|
||||
.modal-body textarea,
|
||||
.modal-body select {
|
||||
background-color: var(--modal-input-bg, var(--ots-bg)) !important;
|
||||
border: 1px solid var(--modal-input-border, var(--ots-border)) !important;
|
||||
border-radius: var(--ots-radius-sm) !important;
|
||||
color: var(--modal-input-text, var(--ots-text)) !important;
|
||||
}
|
||||
|
||||
.modal-body .form-control:focus,
|
||||
.modal-body input:focus,
|
||||
.modal-body textarea:focus,
|
||||
.modal-body select:focus {
|
||||
border-color: var(--modal-input-focus-border, var(--ots-primary)) !important;
|
||||
box-shadow: 0 0 0 3px var(--modal-input-focus-ring, rgba(79, 140, 255, 0.2)) !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/* --- Close button --- */
|
||||
.modal-header .close,
|
||||
.modal-header [data-dismiss="modal"] {
|
||||
color: var(--modal-close-color, var(--ots-text-muted)) !important;
|
||||
opacity: 1 !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
.modal-header .close:hover,
|
||||
.modal-header [data-dismiss="modal"]:hover {
|
||||
color: var(--modal-close-hover, var(--ots-text)) !important;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
|
||||
Reference in New Issue
Block a user