/** * Bootstrap Components CSS - Shared Styles * * Contains reusable CSS for Bootstrap 5.3 components with dark mode support * Extracted from inline styles for browser caching * * @see /php/ide/data/libs/htmlwidgets.php (modal styles) * @see /php/ide/data/dataentry/fieldselect.php (Select2 dark mode) */ /* ============================================ Modal Full-Height Styles For modals that need to fill the viewport ============================================ */ .modal-fullheight .modal-dialog, .modal-fullheight .modal-content { height: 90%; } .modal-fullheight .modal-body { max-height: calc(100% - 100px); overflow-y: auto; display: flex; flex-direction: column; } .modal-fullheight .modal-body iframe { flex: 1; min-height: 0; } /* Legacy support: Apply to all modals using htmlwidgetsmodalcss */ .modal-dialog, .modal-content { /* 80% of window height */ height: 90%; } .modal-body { /* 100% = dialog height, 120px = header + footer */ max-height: calc(100% - 100px); overflow-y: scroll; display: flex; flex-direction: column; } /* Ensure iframe fills modal body */ .modal-body iframe { flex: 1; min-height: 0; } /* ============================================ Select2 Dark Mode Styles Bootstrap 5.3 compatible ============================================ */ /* Selection box */ html[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection, body[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection, [data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection { background-color: #212529 !important; border-color: #495057 !important; color: #dee2e6 !important; } /* Selected text */ html[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered, body[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered, [data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { color: #dee2e6 !important; } /* Placeholder text */ html[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder, body[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder, [data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder { color: #6c757d !important; } /* Dropdown container */ html[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-dropdown, body[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-dropdown, html[data-bs-theme='dark'] .select2-dropdown, body[data-bs-theme='dark'] .select2-dropdown { background-color: #212529 !important; border-color: #495057 !important; color: #dee2e6 !important; } /* Results list container */ html[data-bs-theme='dark'] .select2-results, body[data-bs-theme='dark'] .select2-results { background-color: #212529 !important; } html[data-bs-theme='dark'] .select2-results__options, body[data-bs-theme='dark'] .select2-results__options { background-color: #212529 !important; } /* All options - base state */ html[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-results__option, body[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-results__option, html[data-bs-theme='dark'] .select2-results__option, body[data-bs-theme='dark'] .select2-results__option { background-color: #212529 !important; color: #dee2e6 !important; } /* Selectable options */ html[data-bs-theme='dark'] .select2-results__option--selectable, body[data-bs-theme='dark'] .select2-results__option--selectable { background-color: #212529 !important; color: #dee2e6 !important; } /* Highlighted option (hover/keyboard) */ html[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-results__option--highlighted, body[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-results__option--highlighted, html[data-bs-theme='dark'] .select2-results__option--highlighted, body[data-bs-theme='dark'] .select2-results__option--highlighted, html[data-bs-theme='dark'] .select2-results__option--highlighted.select2-results__option--selectable, body[data-bs-theme='dark'] .select2-results__option--highlighted.select2-results__option--selectable { background-color: #0d6efd !important; color: #fff !important; } /* Selected option */ html[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-results__option--selected, body[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-results__option--selected, html[data-bs-theme='dark'] .select2-results__option--selected, body[data-bs-theme='dark'] .select2-results__option--selected, html[data-bs-theme='dark'] .select2-results__option[aria-selected='true'], body[data-bs-theme='dark'] .select2-results__option[aria-selected='true'] { background-color: #343a40 !important; color: #fff !important; } /* Search field in dropdown */ html[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field, body[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field, html[data-bs-theme='dark'] .select2-search--dropdown .select2-search__field, body[data-bs-theme='dark'] .select2-search--dropdown .select2-search__field { background-color: #2b3035 !important; border-color: #495057 !important; color: #dee2e6 !important; } html[data-bs-theme='dark'] .select2-search--dropdown .select2-search__field::placeholder, body[data-bs-theme='dark'] .select2-search--dropdown .select2-search__field::placeholder { color: #6c757d !important; } /* Multi-select tags */ html[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice, body[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice { background-color: #495057 !important; border-color: #6c757d !important; color: #dee2e6 !important; } html[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove, body[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove { color: #adb5bd !important; } html[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover, body[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover { color: #fff !important; } /* ============================================ Bootstrap Dark Mode Helpers Fixes for bg-* utility classes ============================================ */ [data-bs-theme='dark'] .bg-info:not(.list-group-item), [data-bs-theme='dark'] .bg-primary:not(.list-group-item), [data-bs-theme='dark'] .bg-success:not(.list-group-item), [data-bs-theme='dark'] .bg-danger:not(.list-group-item) { color: #fff; } [data-bs-theme='dark'] .bg-warning:not(.list-group-item) { color: #000; } /* ============================================ Print Styles ============================================ */ @media print { .pagewrap-admin-btn { display: none !important; } }