OTSSigns/OTSSignsTheme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor page structure: Update page classes for consistency

Browse Source 
- Changed class from "ots-displays-page" to "ots-static-page ots-displays-page" in multiple Twig view files to standardize page layout.
- Enhanced schedule-page.twig with improved calendar navigation and dropdown management.
- Added global dropdown dismissal functionality to improve user experience across modals and dropdowns.
This commit is contained in:
Matt Batchelder
2026-02-11 20:47:09 -05:00
parent 29b56bef4f
commit b766487411
34 changed files with 4506 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
custom/otssignange/css/override-dark.css
View File

@@ -970,6 +970,104 @@ textarea:focus {
outline: none !important;
}
/* --- Bootstrap Tagsinput / Tokenfield inside modals --- */
.modal-body .bootstrap-tagsinput,
.modal-body .tagsinput,
.modal-body .tokenfield {
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;
min-height: 36px;
padding: 4px 8px !important;
box-shadow: none !important;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}
.modal-body .bootstrap-tagsinput:focus-within,
.modal-body .tagsinput:focus-within,
.modal-body .tokenfield:focus-within {
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;
}
.modal-body .bootstrap-tagsinput input,
.modal-body .tagsinput input,
.modal-body .tokenfield input.token-input {
background: transparent !important;
color: var(--modal-input-text, var(--ots-text)) !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
margin: 0 !important;
padding: 2px 4px !important;
}
.modal-body .bootstrap-tagsinput input::placeholder,
.modal-body .tagsinput input::placeholder,
.modal-body .tokenfield input.token-input::placeholder {
color: var(--ots-text-faint, #7f8aa3) !important;
}
.modal-body .bootstrap-tagsinput .tag,
.modal-body .bootstrap-tagsinput .badge,
.modal-body .tagsinput .tag,
.modal-body .tokenfield .token {
background: rgba(79, 140, 255, 0.18) !important;
border: 1px solid rgba(79, 140, 255, 0.35) !important;
color: var(--ots-primary, #4f8cff) !important;
border-radius: 999px !important;
padding: 2px 8px !important;
font-size: 0.8rem;
line-height: 1.5;
}
.modal-body .bootstrap-tagsinput .tag [data-role="remove"],
.modal-body .bootstrap-tagsinput .badge [data-role="remove"],
.modal-body .tokenfield .token .close {
color: var(--ots-primary, #4f8cff) !important;
opacity: 0.7;
margin-left: 4px;
cursor: pointer;
}
.modal-body .bootstrap-tagsinput .tag [data-role="remove"]:hover,
.modal-body .bootstrap-tagsinput .badge [data-role="remove"]:hover,
.modal-body .tokenfield .token .close:hover {
opacity: 1;
}
/* Global bootstrap-tagsinput theming (outside modals too) */
.bootstrap-tagsinput,
.tagsinput,
.tokenfield {
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;
box-shadow: none !important;
}
.bootstrap-tagsinput input,
.tagsinput input,
.tokenfield input.token-input {
background: transparent !important;
color: var(--modal-input-text, var(--ots-text)) !important;
}
.bootstrap-tagsinput .tag,
.bootstrap-tagsinput .badge,
.tagsinput .tag,
.tokenfield .token {
background: rgba(79, 140, 255, 0.18) !important;
border: 1px solid rgba(79, 140, 255, 0.35) !important;
color: var(--ots-primary, #4f8cff) !important;
border-radius: 999px !important;
}
/* --- Close button --- */
.modal-header .close,
.modal-header [data-dismiss="modal"] {
@@ -1369,3 +1467,66 @@ html[style], body[style] {
background-color: var(--color-background) !important;
}
/* =============================================================================
OTS UPLOAD MODAL – Dark-mode refinements
Supplements override-styles.twig which uses CSS variables for auto theming.
These rules guarantee the upload modal stays dark when override-dark.css loads.
============================================================================= */
.ots-upload-content {
background: var(--ots-surface, #141c2b);
border-color: var(--ots-border, #2c3a54);
}
.ots-upload-header {
background: var(--ots-bg, #0b111a);
border-bottom-color: var(--ots-border, #2c3a54);
}
.ots-upload-title {
color: var(--ots-text, #e6eefb);
}
.ots-upload-body {
background: var(--ots-surface, #141c2b);
color: var(--ots-text, #e6eefb);
}
.ots-upload-dropzone {
border-color: var(--ots-border, #2c3a54);
background: rgba(79,140,255,0.03);
}
.ots-upload-dropzone:hover,
.ots-upload-dropzone:focus-visible {
border-color: var(--ots-primary, #4f8cff);
background: rgba(79,140,255,0.07);
}
.ots-upload-dropzone--over {
border-color: var(--ots-primary, #4f8cff) !important;
background: rgba(79,140,255,0.12) !important;
}
.ots-upload-file-item {
background: var(--ots-bg, #0b111a);
border-color: var(--ots-border-soft, #243047);
}
.ots-upload-file-name {
color: var(--ots-text, #e6eefb);
}
.ots-upload-file-meta {
color: var(--ots-text-muted, #a9b6cc);
}
.ots-upload-footer {
background: var(--ots-bg, #0b111a);
border-top-color: var(--ots-border, #2c3a54);
}
.ots-upload-btn-cancel {
color: var(--ots-text-muted, #a9b6cc);
border-color: var(--ots-border, #2c3a54);
}
.ots-upload-btn-cancel:hover {
background: rgba(255,255,255,0.06);
color: var(--ots-text, #e6eefb);
}
.ots-upload-option {
background: rgba(79,140,255,0.04);
border-color: rgba(79,140,255,0.08);
color: var(--ots-text, #e6eefb);
}
.ots-upload-option small {
color: var(--ots-text-muted, #a9b6cc);
}