/* ============================================================================ * vnext-targets-modals.css — target modals aligned to the vNext token layer. * * The target modals render via dialog2_ as Bootstrap `.modal` dialogs appended * to (outside the [data-qz-skin="targets"] container), so they are * scoped here by their per-modal classes instead: * .targets-create-modal (create / edit objective) * .targets-summary-modal (target HUD / quiz detail) * .targets-attempt-modal (attempt detail) * .targets-detail-modal (legacy detail sheet) * * Phase-2 groundwork: modal radius + form-control radius + label visibility, * all on --qz-* tokens (auto-inverts in dark mode). Full bottom-sheet chrome * conversion comes later; this brings the existing chrome in line first. * ==========================================================================*/ /* ── Bottom-sheet chrome ───────────────────────────────────────────────── * dialog2_ emits centered Bootstrap dialogs. Convert them to vNext bottom- * sheets using the app's PROVEN pattern (see .messages-dialog / #delegatesModal * in vnext-groupes-detail.css): a flex dialog filling the modal height with the * content flushed to the bottom — NOT position:fixed. !important is required to * beat Bootstrap's `.modal-dialog-centered` (align-items:center + min-height) * and any global .modal-dialog rules. Applies to all four target variants. */ /* IMPORTANT: dialog2_ applies the target class (targets-*-modal) to the .modal-DIALOG, not the .modal root. So target the dialog directly. The `.modal-dialog-centered` / `.modal-dialog-scrollable` classes ride on that same dialog; height:100% beats Bootstrap's `.modal-dialog-scrollable{height: calc(100% - 1rem)}` and align-items:flex-end flushes the content to the bottom of the .modal root (which stays position:fixed inset:0 = full viewport), so the sheet lands exactly on the bottom edge. The class-on- ancestor selectors are kept too, in case a future call places it on the root. */ .modal-dialog.targets-create-modal, .modal-dialog.targets-summary-modal, .modal-dialog.targets-attempt-modal, .modal-dialog.targets-detail-modal, .targets-create-modal .modal-dialog, .targets-summary-modal .modal-dialog, .targets-attempt-modal .modal-dialog, .targets-detail-modal .modal-dialog { display: flex !important; align-items: flex-end !important; /* flush content to the viewport bottom */ min-height: 100% !important; height: 100% !important; /* beat modal-dialog-scrollable's calc() */ width: 100% !important; max-width: 560px !important; margin: 0 auto !important; /* kill Bootstrap's default dialog margin */ transform: none !important; /* cancel Bootstrap's fade-down on dialog */ } /* Slide the sheet up on open via a ONE-SHOT keyframe (not a persistent transform). A lingering `transform: translateY(100%)` was winning the cascade over the shown-state override and leaving the sheet stuck below the fold; an animation plays once when `.show` appears and leaves no residual transform. */ @keyframes qzrTargetSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .modal.show .modal-dialog.targets-create-modal .modal-content, .modal.show .modal-dialog.targets-summary-modal .modal-content, .modal.show .modal-dialog.targets-attempt-modal .modal-content, .modal.show .modal-dialog.targets-detail-modal .modal-content, .modal.show .targets-create-modal .modal-content, .modal.show .targets-summary-modal .modal-content, .modal.show .targets-attempt-modal .modal-content, .modal.show .targets-detail-modal .modal-content { animation: qzrTargetSheetUp var(--qz-dur-pop) var(--qz-ease); } .targets-create-modal .modal-content, .targets-summary-modal .modal-content, .targets-attempt-modal .modal-content, .targets-detail-modal .modal-content { width: 100% !important; border: 1px solid var(--qz-line); border-bottom: 0; border-radius: var(--qz-r-screen) var(--qz-r-screen) 0 0 !important; background: var(--qz-surface); color: var(--qz-text); overflow: hidden; max-height: 92vh; box-shadow: 0 -12px 40px rgba(6, 52, 42, .18); } /* Grab handle at the top of every sheet. */ .targets-create-modal .modal-content::before, .targets-summary-modal .modal-content::before, .targets-attempt-modal .modal-content::before, .targets-detail-modal .modal-content::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: var(--qz-r-pill); background: var(--qz-line-strong); z-index: 2; } /* Keep the scrollable body inside the sheet, not the whole dialog. */ .targets-create-modal .modal-body, .targets-summary-modal .modal-body, .targets-attempt-modal .modal-body, .targets-detail-modal .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; } .targets-create-modal .modal-header, .targets-summary-modal .modal-header, .targets-attempt-modal .modal-header, .targets-detail-modal .modal-header { border-bottom: 1px solid var(--qz-line); color: var(--qz-text); padding: var(--qz-4) var(--qz-5); } .targets-create-modal .modal-header h5, .targets-create-modal .modal-header .h5, .targets-summary-modal .modal-header h5 { font-weight: var(--qz-fw-strong); color: var(--qz-text); } .targets-create-modal .modal-footer, .targets-summary-modal .modal-footer, .targets-attempt-modal .modal-footer, .targets-detail-modal .modal-footer { border-top: 1px solid var(--qz-line); padding: var(--qz-3) var(--qz-5) var(--qz-4); } /* ── Form labels: fix visibility (legacy used a near-invisible #06113d29) ── */ .targets-create-modal .form-label { color: var(--qz-text); font-size: var(--qz-fs-sm); font-weight: var(--qz-fw-strong); margin-bottom: 6px; } .targets-create-modal .form-text, .targets-create-modal .targets-create-quiz-feedback { color: var(--qz-muted); font-size: var(--qz-fs-xs); } /* ── Inputs / selects: token radius, borders, focus ring ─────────────────── */ .targets-create-modal .form-control, .targets-create-modal .form-select { border: 1px solid var(--qz-line-strong); border-radius: var(--qz-r-field); background: var(--qz-surface); color: var(--qz-text); font-size: var(--qz-fs-body); padding: 10px var(--qz-3); transition: border-color var(--qz-dur-press) var(--qz-ease), box-shadow var(--qz-dur-press) var(--qz-ease); } .targets-create-modal .form-control::placeholder { color: var(--qz-muted); } .targets-create-modal .form-control:focus, .targets-create-modal .form-select:focus { border-color: var(--qz-accent); box-shadow: var(--qz-focus-ring); outline: none; } /* ── Selected private-quiz chips ─────────────────────────────────────────── */ .targets-create-modal .targets-create-selected-list { display: flex; flex-wrap: wrap; gap: var(--qz-2); } /* ── Primary submit + close buttons → vNext look ─────────────────────────── */ .targets-create-modal .targets-create-submit-btn { border: 0; border-radius: var(--qz-r-control); background: var(--qz-accent); color: var(--qz-on-accent); font-weight: var(--qz-fw-strong); padding: 12px var(--qz-5); transition: background var(--qz-dur-press) var(--qz-ease); } .targets-create-modal .targets-create-submit-btn:hover, .targets-create-modal .targets-create-submit-btn:focus { background: var(--qz-accent-deep); color: var(--qz-on-accent); } .targets-create-modal .modal-footer .btn-outline-secondary { border-radius: var(--qz-r-control); border-color: var(--qz-line-strong); color: var(--qz-muted); } .targets-create-modal .modal-footer .btn-outline-secondary:hover { background: var(--qz-screen); border-color: var(--qz-accent-mid); color: var(--qz-accent-ink); } /* ── Inline error alert ──────────────────────────────────────────────────── */ .targets-create-modal .targets-create-error.alert-danger { border-radius: var(--qz-r-control); border: 1px solid var(--qz-error); background: var(--qz-error-bg); color: var(--qz-error-strong); } /* ============================================================================ * Summary modal (target HUD / quiz detail) — .qzr-modal-premium block. * Legacy targets.premium.css styled this with dark gradients + blue accents; * re-tint to the vNext token layer. The modal-body carries a Bootstrap * `bg-white` utility — neutralise it so dark mode follows --qz-surface. * ==========================================================================*/ .targets-summary-modal .modal-body.bg-white, .targets-summary-modal .modal-content .bg-white { background: var(--qz-surface) !important; color: var(--qz-text) !important; } .targets-summary-modal .modal-body { padding: 0; } .targets-summary-modal .qzr-modal-premium { display: flex; flex-direction: column; gap: var(--qz-4); padding: var(--qz-5); background: var(--qz-surface); color: var(--qz-text); } /* Hero */ .targets-summary-modal .qzr-modal-hero { display: flex; align-items: center; justify-content: space-between; gap: var(--qz-4); background: var(--qz-screen); border: 1px solid var(--qz-line); border-radius: var(--qz-r-card); padding: var(--qz-4) var(--qz-5); } .targets-summary-modal .qzr-modal-eyebrow { display: inline-block; font-size: var(--qz-fs-xs); font-weight: var(--qz-fw-strong); letter-spacing: .08em; text-transform: uppercase; color: var(--qz-accent-ink); margin-bottom: 4px; } .targets-summary-modal .qzr-modal-hero h3 { font-size: var(--qz-fs-h2); font-weight: var(--qz-fw-strong); color: var(--qz-text); margin: 0 0 var(--qz-2); } .targets-summary-modal .target-params { display: flex; flex-wrap: wrap; gap: 6px; } .targets-summary-modal .target-params .badge { font-size: var(--qz-fs-xs); font-weight: var(--qz-fw); color: var(--qz-accent-ink); background: var(--qz-accent-soft) !important; border: 1px solid var(--qz-line) !important; border-radius: var(--qz-r-pill); padding: 4px 10px; } /* Success ring (reuses the conic pattern from the page KPI ring) */ .targets-summary-modal .qzr-modal-ring { --value: 0; flex: 0 0 auto; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--qz-accent) calc(var(--value) * 1%), var(--qz-accent-soft) 0); } .targets-summary-modal .qzr-modal-ring::before { content: ""; grid-area: 1 / 1; width: 52px; height: 52px; border-radius: 50%; background: var(--qz-surface); } .targets-summary-modal .qzr-modal-ring span { grid-area: 1 / 1; font-size: var(--qz-fs-body); font-weight: var(--qz-fw-strong); color: var(--qz-accent-ink); } /* KPI row */ .targets-summary-modal .qzr-modal-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--qz-2); margin: 0; } .targets-summary-modal .qzr-modal-kpi { display: flex; flex-direction: column; gap: 2px; width: auto; background: var(--qz-surface); border: 1px solid var(--qz-line); border-radius: var(--qz-r-control); padding: var(--qz-3); text-align: center; } .targets-summary-modal .qzr-modal-kpi span { font-size: var(--qz-fs-xs); color: var(--qz-muted); letter-spacing: .02em; } .targets-summary-modal .qzr-modal-kpi strong { font-size: var(--qz-fs-h3); font-weight: var(--qz-fw-strong); color: var(--qz-text); } /* History section */ .targets-summary-modal .qzr-modal-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--qz-2); } .targets-summary-modal .qzr-modal-section-head span { font-size: var(--qz-fs-xs); font-weight: var(--qz-fw-strong); letter-spacing: .04em; text-transform: uppercase; color: var(--qz-muted); } .targets-summary-modal .qzr-attempt-list { display: flex; flex-direction: column; gap: var(--qz-2); } .targets-summary-modal .qzr-attempt-row { display: flex; align-items: center; justify-content: space-between; gap: var(--qz-3); background: var(--qz-surface); border: 1px solid var(--qz-line); border-radius: var(--qz-r-control); padding: 10px var(--qz-3); cursor: pointer; transition: border-color var(--qz-dur-press) var(--qz-ease), background var(--qz-dur-press) var(--qz-ease); } .targets-summary-modal .qzr-attempt-row:hover { border-color: var(--qz-accent-mid); background: var(--qz-accent-soft); } .targets-summary-modal .qzr-attempt-date { font-size: var(--qz-fs-sm); font-weight: var(--qz-fw-strong); color: var(--qz-text); } .targets-summary-modal .qzr-attempt-main > span:last-child { font-size: var(--qz-fs-xs); color: var(--qz-muted); } .targets-summary-modal .qzr-attempt-side { display: flex; align-items: center; gap: var(--qz-2); text-align: right; } .targets-summary-modal .qzr-attempt-side b { font-size: var(--qz-fs-sm); color: var(--qz-text); } .targets-summary-modal .qzr-attempt-side .badge { font-size: var(--qz-fs-xs); font-weight: var(--qz-fw-strong); border-radius: var(--qz-r-pill); padding: 3px 9px; } .targets-summary-modal .qzr-attempt-side .status-chip--success, .targets-summary-modal .qzr-attempt-side .bg-success { color: var(--qz-success-ink) !important; background: var(--qz-success-bg) !important; } .targets-summary-modal .qzr-attempt-side .status-chip--muted, .targets-summary-modal .qzr-attempt-side .bg-secondary { color: var(--qz-muted) !important; background: var(--qz-screen) !important; } .targets-summary-modal .qzr-empty { text-align: center; color: var(--qz-muted); font-size: var(--qz-fs-sm); padding: var(--qz-5) 0; } /* Progress bar inside the read-only quest summary (modal is outside the [data-qz-skin] container, so it needs its own rule). */ .targets-summary-modal .qzr-progress { height: 8px; border-radius: var(--qz-r-pill); background: var(--qz-accent-soft); overflow: hidden; } .targets-summary-modal .qzr-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--qz-accent); } /* Action buttons (clone / edit / delete) */ .targets-summary-modal .qzr-modal-actions { display: flex; gap: var(--qz-2); flex-wrap: wrap; border-top: 1px solid var(--qz-line); padding-top: var(--qz-4); } .targets-summary-modal .qzr-action-btn { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--qz-line-strong); border-radius: var(--qz-r-control); background: var(--qz-surface); color: var(--qz-text); font-size: var(--qz-fs-sm); font-weight: var(--qz-fw-strong); padding: 10px var(--qz-3); cursor: pointer; transition: background var(--qz-dur-press) var(--qz-ease), border-color var(--qz-dur-press) var(--qz-ease), color var(--qz-dur-press) var(--qz-ease); } .targets-summary-modal .qzr-action-btn:hover { border-color: var(--qz-accent-mid); background: var(--qz-accent-soft); color: var(--qz-accent-ink); } .targets-summary-modal .qzr-action-edit { border-color: transparent; background: var(--qz-accent); color: var(--qz-on-accent); } .targets-summary-modal .qzr-action-edit:hover { background: var(--qz-accent-deep); color: var(--qz-on-accent); } .targets-summary-modal .qzr-action-delete { color: var(--qz-error-strong); } .targets-summary-modal .qzr-action-delete:hover { border-color: var(--qz-error-ink); background: var(--qz-error-bg); color: var(--qz-error-strong); } @media (max-width: 520px) { .targets-summary-modal .qzr-modal-kpis { grid-template-columns: repeat(2, 1fr); } .targets-summary-modal .qzr-modal-hero { flex-direction: column; align-items: flex-start; } }