/* ============================================================================ * vnext-groupes-modals.css — the group SECONDARY modals, on the token layer. * * Two modals were still raw Bootstrap, built as template strings in * script/js/groups-join-requests.js and appended to : * * #requestJoinGroupModal « Demander à rejoindre » * #pendingRequestsModal « Demandes d'adhésion en attente » * * Being appended to puts them OUTSIDE [data-qz-skin="groupes"], so the * skin never reached them — they kept Bootstrap's white card, blue .btn-primary * and grey .btn-secondary while the rest of the page had moved on. In dark mode * that reads as a different application. * * They are restyled HERE rather than rewritten in JS on purpose: the markup * carries the click contracts (#confirmRequestJoin, .approve-join-request, * .deny-join-request, data-bs-dismiss). Re-emitting it to add classes would put * those handlers at risk for a purely visual gain. Same decision, and the same * shape, as style/features/vnext-targets-modals.css. * * #delegatesModal is NOT here: it already has its sheet chrome in * vnext-groupes-detail.css:1520-1549 and is folded into the group-params view. * ==========================================================================*/ /* ── Bottom-sheet chrome ──────────────────────────────────────────────────── The app's proven conversion (see .messages-dialog / #delegatesModal): a flex dialog filling the modal height with the content flushed to the bottom — NOT position:fixed. !important is required to beat Bootstrap's own .modal-dialog rules, which are more specific than an id alone in this cascade. */ #requestJoinGroupModal .modal-dialog, #pendingRequestsModal .modal-dialog { display: flex !important; align-items: flex-end !important; min-height: 100% !important; width: 100% !important; max-width: 480px !important; margin: 0 auto !important; } #requestJoinGroupModal .modal-content, #pendingRequestsModal .modal-content { width: 100% !important; max-height: 88vh !important; border: 1px solid var(--qz-line) !important; border-bottom: 0 !important; border-radius: 24px 24px 0 0 !important; background: var(--qz-surface) !important; color: var(--qz-text) !important; box-shadow: 0 -24px 48px rgba(15, 23, 42, .18) !important; } /* ── Head ─────────────────────────────────────────────────────────────────── */ #requestJoinGroupModal .modal-header, #pendingRequestsModal .modal-header { border-bottom: 1px solid var(--qz-line) !important; padding: 14px 18px !important; } #requestJoinGroupModal .modal-title, #pendingRequestsModal .modal-title { font-size: var(--qz-fs-h3, 1.02rem); font-weight: var(--qz-fw-strong, 800); color: var(--qz-text) !important; } /* Bootstrap's .btn-close is a background-image X baked in near-black, so on a dark surface it is a dark cross on a dark panel. Bootstrap's own answer is a second class (.btn-close-white) we cannot add without re-emitting the markup, so it is inverted here — under [data-mode="dark"], the hook Phase E settled on and a test asserts. */ #requestJoinGroupModal .btn-close, #pendingRequestsModal .btn-close { opacity: .6; } #requestJoinGroupModal .btn-close:hover, #pendingRequestsModal .btn-close:hover { opacity: 1; } [data-mode="dark"] #requestJoinGroupModal .btn-close, [data-mode="dark"] #pendingRequestsModal .btn-close { filter: invert(1) grayscale(1); } /* ── Body ─────────────────────────────────────────────────────────────────── */ #requestJoinGroupModal .modal-body, #pendingRequestsModal .modal-body { padding: 16px 18px !important; color: var(--qz-text); } #requestJoinGroupModal .modal-body p, #pendingRequestsModal .modal-body p { color: var(--qz-text); } /* .text-muted is a Bootstrap grey with no theme awareness. */ #requestJoinGroupModal .text-muted, #pendingRequestsModal .text-muted, #requestJoinGroupModal .form-text, #pendingRequestsModal .form-text { color: var(--qz-muted) !important; } #requestJoinGroupModal label { display: block; margin-bottom: 6px; font-size: var(--qz-fs-sm); font-weight: var(--qz-fw-strong, 700); color: var(--qz-text); } #requestJoinGroupModal .form-control { background: var(--qz-surface) !important; color: var(--qz-text) !important; border: 1.5px solid var(--qz-line) !important; border-radius: var(--qz-r-field, 14px) !important; padding: 10px 14px !important; } #requestJoinGroupModal .form-control:focus { border-color: var(--qz-accent) !important; box-shadow: var(--qz-focus-ring) !important; } /* ── Pending-request cards ────────────────────────────────────────────────── */ #pendingRequestsModal .join-request-item { background: var(--qz-surface) !important; border: 1px solid var(--qz-line) !important; border-radius: var(--qz-r-card) !important; box-shadow: none !important; } #pendingRequestsModal .join-request-item .card-body { padding: 14px !important; } #pendingRequestsModal .join-request-item h6 { font-weight: var(--qz-fw-strong, 800); color: var(--qz-text) !important; } #pendingRequestsModal .join-request-item .card-text { color: var(--qz-text) !important; } /* The approve / deny pair. Semantic tokens, not Bootstrap's green and red: both halves of each pair flip with the theme, so no dark-mode twin is needed — the same reasoning as the group-card access badges. */ #pendingRequestsModal .btn-group { gap: 8px; display: flex; } #pendingRequestsModal .approve-join-request, #pendingRequestsModal .deny-join-request { border-radius: var(--qz-r-pill) !important; font-weight: var(--qz-fw-strong, 700); padding: 7px 16px !important; border: 1px solid transparent !important; } #pendingRequestsModal .approve-join-request { background: var(--qz-success-bg) !important; color: var(--qz-success-ink, var(--qz-success)) !important; border-color: var(--qz-success-bg) !important; } #pendingRequestsModal .deny-join-request { background: var(--qz-error-bg) !important; color: var(--qz-error-ink, var(--qz-error)) !important; border-color: var(--qz-error-bg) !important; } /* ── Foot ─────────────────────────────────────────────────────────────────── */ #requestJoinGroupModal .modal-footer, #pendingRequestsModal .modal-footer { border-top: 1px solid var(--qz-line) !important; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)) !important; gap: 8px; } /* The primary action wears the accent; the dismiss wears the surface. Matching .btn-ux rather than importing it, because these buttons are Bootstrap-classed in JS and adding classes there would mean re-emitting the markup. */ #requestJoinGroupModal .btn-primary, #pendingRequestsModal .btn-primary { background: var(--qz-accent) !important; color: var(--qz-on-accent) !important; border: none !important; border-bottom: 3px solid var(--qz-accent-deep) !important; border-radius: var(--qz-r-control) !important; font-weight: var(--qz-fw-strong, 700); } #requestJoinGroupModal .btn-primary:hover, #pendingRequestsModal .btn-primary:hover { filter: brightness(1.05); } #requestJoinGroupModal .btn-secondary, #pendingRequestsModal .btn-secondary { background: var(--qz-surface) !important; color: var(--qz-text) !important; border: 1px solid var(--qz-line) !important; border-bottom: 3px solid var(--qz-line-strong, var(--qz-line)) !important; border-radius: var(--qz-r-control) !important; font-weight: var(--qz-fw-strong, 700); } #requestJoinGroupModal .btn-secondary:hover, #pendingRequestsModal .btn-secondary:hover { border-color: var(--qz-accent-mid, var(--qz-accent)) !important; background: var(--qz-accent-soft) !important; } /* Backdrop: Bootstrap's is a flat black. Match the sheet backdrop used by .mp-modal so opening one of these does not dim the page differently. */ #requestJoinGroupModal + .modal-backdrop, #pendingRequestsModal + .modal-backdrop { background: rgba(9, 18, 15, .55); }