/* ===================================================================== BBCRM dialog design system — shared by ConfirmPopup + InfoPopUp --------------------------------------------------------------------- Variant accent comes from the theme's semantic token pairs (--bb-warn/-bg etc. in theme.css), so light/dark flips for free. Apply on the ASPxPopupControl: CssClass="bbcrm-dialog bbcrm-dialog--{variant}". ===================================================================== */ .bbcrm-dialog { --dlg-surface: #ffffff; --dlg-border: rgba(0,0,0,.08); --dlg-muted: #5b6472; --dlg-strong: var(--text-color); } [data-bs-theme="dark"] .bbcrm-dialog { --dlg-surface: #21262e; --dlg-border: rgba(255,255,255,.10); --dlg-muted: #9aa4b2; --dlg-strong: #c9d1db; } .bbcrm-dialog--question { --dlg-accent: var(--bb-warn); --dlg-accent-bg: var(--bb-warn-bg); } .bbcrm-dialog--info { --dlg-accent: var(--bb-info); --dlg-accent-bg: var(--bb-info-bg); } .bbcrm-dialog--success { --dlg-accent: var(--bb-ok); --dlg-accent-bg: var(--bb-ok-bg); } .bbcrm-dialog--danger { --dlg-accent: var(--bb-danger); --dlg-accent-bg: var(--bb-danger-bg); } .bbcrm-dialog.dxpc-mainDiv, .bbcrm-dialog .dxpc-mainDiv { border-radius: 16px; overflow: hidden; border: 1px solid var(--dlg-border); box-shadow: 0 18px 40px -12px rgba(0,0,0,.35), 0 6px 14px -8px rgba(0,0,0,.25); } .bbcrm-dialog .dxpc-content { background: var(--dlg-surface); padding: 0 !important; } .bbcrm-dialog .dxpc-footer { background: var(--dlg-surface); padding: 0 !important; border: 0; } .bbcrm-dialog__body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 34px 36px 6px; max-height: 76vh; overflow-y: auto; } .bbcrm-dialog__badge { flex: none; width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--dlg-accent-bg); color: var(--dlg-accent); font-size: 34px; } .bbcrm-dialog__badge i, .bbcrm-dialog__badge svg { width: 1em; height: 1em; line-height: 1; } .bbcrm-dialog__title { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--dlg-strong); border-bottom: 0; text-transform: none; text-shadow: none; } .bbcrm-dialog__message { margin: 0 auto; max-width: 46ch; font-size: 14px; line-height: 1.6; color: var(--dlg-muted); } .bbcrm-dialog__message b, .bbcrm-dialog__message strong { color: var(--dlg-strong); font-weight: 600; } .bbcrm-dialog__footer { display: flex; justify-content: center; gap: 12px; padding: 20px 36px 26px; margin-top: 12px; border-top: 1px solid var(--dlg-border); } /* Short viewports (tablet landscape / iPad) — keep the centered look but shrink vertical rhythm so a long message never overflows the screen. */ @media (max-height: 720px) { .bbcrm-dialog__body { gap: 10px; padding-top: 22px; max-height: 70vh; } .bbcrm-dialog__badge { width: 56px; height: 56px; font-size: 27px; } .bbcrm-dialog__title { font-size: 17px; } .bbcrm-dialog__footer { padding-top: 14px; padding-bottom: 16px; margin-top: 8px; } } /* Payment-terminal transaction detail (staff-facing) — a small key/value list under the message, e.g. auth code / transaction id / response code on the NMI + CC response dialogs. */ .bbcrm-dialog .bbcrm-nmi-detail { width: 100%; max-width: 300px; margin: 4px auto 0; padding-top: 12px; border-top: 1px solid var(--dlg-border); display: grid; gap: 6px; text-align: left; } .bbcrm-dialog .bbcrm-nmi-detail__row { display: flex; justify-content: space-between; gap: 16px; font-size: 12.5px; } .bbcrm-dialog .bbcrm-nmi-detail__k { color: var(--dlg-muted); } .bbcrm-dialog .bbcrm-nmi-detail__v { color: var(--dlg-strong); font-weight: 600; } .bbcrm-dialog .bbcrm-nmi-detail [class*="dxeBase"] { color: inherit !important; font: inherit; } /* ===================================================================== FORM dialog — same card shell + tokens as bbcrm-dialog, adapted for data-entry popups: a left-aligned header (icon chip + title + close) and a left-aligned scrollable body instead of the centered badge. Apply on the ASPxPopupControl: CssClass="bbcrm-form-dialog". ===================================================================== */ .bbcrm-form-dialog { --dlg-surface: #ffffff; --dlg-border: rgba(0,0,0,.08); --dlg-muted: #5b6472; --dlg-strong: var(--text-color); --dlg-accent: var(--bb-info); --dlg-accent-bg: var(--bb-info-bg); } [data-bs-theme="dark"] .bbcrm-form-dialog { --dlg-surface: #21262e; --dlg-border: rgba(255,255,255,.10); --dlg-muted: #9aa4b2; --dlg-strong: #c9d1db; } .bbcrm-form-dialog.dxpc-mainDiv, .bbcrm-form-dialog .dxpc-mainDiv { border-radius: 16px; overflow: hidden; border: 1px solid var(--dlg-border); box-shadow: 0 18px 40px -12px rgba(0,0,0,.35), 0 6px 14px -8px rgba(0,0,0,.25); } .bbcrm-form-dialog .dxpc-content { background: var(--dlg-surface); padding: 0 !important; } .bbcrm-form-dialog .dxpc-footer { background: var(--dlg-surface); padding: 0 !important; border: 0; } /* Page-hosted card variant — same shell as the popup version, for cards that live directly on a page (no ASPxPopupControl / dxpc-mainDiv wrapper). */ .bbcrm-form-dialog.bbcrm-page-card, .bbcrm-dialog.bbcrm-page-card { border-radius: 16px; overflow: hidden; border: 1px solid var(--dlg-border); background: var(--dlg-surface); box-shadow: 0 18px 40px -12px rgba(0,0,0,.35), 0 6px 14px -8px rgba(0,0,0,.25); } /* Header — tinted icon chip + title left, quiet close X right */ .bbcrm-form-dialog__header { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--dlg-border); } .bbcrm-form-dialog__icon { flex: none; width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--dlg-accent-bg); color: var(--dlg-accent); font-size: 18px; } .bbcrm-form-dialog__icon i, .bbcrm-form-dialog__icon svg { width: 1em; height: 1em; line-height: 1; } .bbcrm-form-dialog__title { flex: 1 1 auto; margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--dlg-strong); border-bottom: 0; text-transform: none; text-shadow: none; } .bbcrm-form-dialog__close { flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--dlg-muted); font-size: 16px; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .bbcrm-form-dialog__close:hover { background: var(--dlg-accent-bg); color: var(--dlg-strong); } /* Body — left aligned, scrolls when the dynamic fields make it tall */ .bbcrm-form-dialog__body { padding: 20px 22px; max-height: 66vh; overflow-y: auto; color: var(--dlg-strong); } .bbcrm-form-dialog__body .bs-callout { margin-bottom: 20px; } .bbcrm-form-dialog__body hr { border: 0; border-top: 1px solid var(--dlg-border); margin: 16px 0; } /* Emphasis blocks — the owed-amount and change-due totals (replace the old hardcoded gray bars). Accent-tinted, theme-aware. */ .bbcrm-form-dialog__total { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 18px; border-radius: 12px; text-align: center; background: var(--dlg-accent-bg); border: 1px solid var(--dlg-border); } .bbcrm-form-dialog__total-row { display: flex; align-items: baseline; justify-content: center; gap: 10px; } .bbcrm-form-dialog__total-label { font-size: 13px; font-weight: 600; color: var(--dlg-muted); text-transform: uppercase; letter-spacing: .03em; } .bbcrm-form-dialog__total-value { font-size: 24px; font-weight: 700; color: var(--dlg-strong); } /* Read-only payer/card info box (replaces the inline gray-bordered cell) */ .bbcrm-form-dialog__infobox { min-width: 220px; padding: 8px 12px; border-radius: 10px; background: var(--dlg-accent-bg); border: 1px solid var(--dlg-border); color: var(--dlg-muted); font-size: 12px; line-height: 1.5; } /* Field rows (replace the old layout ): a caption column + control column that stacks to one column on narrow widths (tablet rule). */ .bbcrm-form-dialog__split { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: flex-start; } .bbcrm-form-dialog__split-main { flex: 1 1 300px; min-width: 0; } .bbcrm-form-dialog__row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .bbcrm-form-dialog__row:last-child { margin-bottom: 0; } .bbcrm-form-dialog__label { flex: 0 0 110px; max-width: 110px; } .bbcrm-form-dialog__control { flex: 1 1 auto; min-width: 0; } @media (max-width: 575.98px) { .bbcrm-form-dialog__row { flex-direction: column; align-items: stretch; gap: 4px; } .bbcrm-form-dialog__label { flex: none; max-width: none; } } /* Footer — hairline divider + centered buttons (matches message dialog) */ .bbcrm-form-dialog__footer { display: flex; justify-content: center; gap: 12px; padding: 16px 22px; border-top: 1px solid var(--dlg-border); } @media (max-height: 720px) { .bbcrm-form-dialog__body { max-height: 60vh; padding-top: 14px; } .bbcrm-form-dialog__total-value { font-size: 21px; } } /* ============================================================ Grid popup Edit Form (ASPxGridView PopupEditForm) — auto-themed card matching bbcrm-form-dialog; scoped via the edit-form table class so other DX popups are untouched. ============================================================ */ .dxpc-mainDiv:has(.dxgPEFTW) { --dlg-surface: #ffffff; --dlg-border: rgba(0,0,0,.08); --dlg-muted: #5b6472; --dlg-strong: var(--text-color); border-radius: 16px; overflow: hidden; border: 1px solid var(--dlg-border); box-shadow: 0 18px 50px rgba(0,0,0,.30); background: var(--dlg-surface); } [data-bs-theme="dark"] .dxpc-mainDiv:has(.dxgPEFTW) { --dlg-surface: #21262e; --dlg-border: rgba(255,255,255,.10); --dlg-muted: #9aa4b2; --dlg-strong: #c9d1db; } .dxpc-mainDiv:has(.dxgPEFTW) .dxpc-header { background: var(--dlg-surface); border-bottom: 1px solid var(--dlg-border); padding: 14px 20px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--dlg-strong); } .dxpc-mainDiv:has(.dxgPEFTW) .dxpc-content { background: var(--dlg-surface); padding: 18px 22px 20px; } .dxpc-mainDiv:has(.dxgPEFTW) [class*="dxgvPopupEditForm_"] { background: transparent; color: var(--dlg-strong); } .dxpc-mainDiv:has(.dxgPEFTW) [class*="dxgvPopupEditForm_"] td { padding-top: 3px; padding-bottom: 3px; } /* Auto-generated edit forms: no asterisk — required captions get the softened red instead */ .dxgPEFTW [class*="dxflRequired_"] { display: none; } .dxgPEFTW td[class*="dxflCaptionCell"]:has([class*="dxflRequired_"]) label { color: #b3554d !important; } [data-bs-theme="dark"] .dxgPEFTW td[class*="dxflCaptionCell"]:has([class*="dxflRequired_"]) label { color: #d9908a !important; } /* Auto-generated edit forms: centered footer buttons */ .dxgPEFTW td:has(> .dxflCommandItemSys) { text-align: center !important; } .dxgPEFTW .dxflCommandItemSys { display: inline-block; }