/* ============================================================================ * Investia — jquery-confirm skin * ---------------------------------------------------------------------------- * One dialog design for both sides of the product. The CDN's own themes were * being used raw ("dark"), which painted a grey box and left the message in a * grey barely distinguishable from it — the alert was hard to read on every * page that raised one. * * The colours are not hard-coded here. Each token below falls back through the * two palettes the app already ships, so the dialog simply adopts whichever * page it opens on: * * --adm-* theme-admin/modern.css — the admin UI (light) * --bg-* resources/css/v4/investia.css — the member UI (dark, and light * again under body.light-mode) * * The tokens are declared on .jconfirm rather than :root on purpose: the member * UI's light mode redefines its palette on `body.light-mode`, so resolving them * on a descendant of is what lets the dialog follow that toggle. * * LOAD ORDER: this file is linked after jquery-confirm.min.css in all three * alert-script components, so equal-specificity rules here win. Both the * "light" and "dark" theme classes are covered, because callers set either. * * The responsive/layout rules (box width, button stacking) are NOT here — they * are injected by custom.js as #invJconfirmStyle and are still in force. * * TO REVERT: empty this file. The dialogs fall back to the CDN themes. * ========================================================================== */ .jconfirm { /* Surfaces --------------------------------------------------------- */ --jc-surface: var(--adm-surface, var(--bg-card, #ffffff)); --jc-surface-2: var(--adm-surface-3, var(--bg-card-hover, #f3f4f6)); /* Text ------------------------------------------------------------- */ --jc-text: var(--adm-text, var(--text-primary, #14181f)); --jc-text-soft: var(--adm-text-soft, var(--text-secondary, #4b5563)); --jc-text-muted: var(--adm-text-muted, var(--text-muted, #79808d)); /* Lines ------------------------------------------------------------ */ --jc-border: var(--adm-border, var(--border, rgba(0, 0, 0, 0.08))); /* Status — the accent bar, the icon and the buttons all read from these, so a dialog is one colour from top to bottom. */ --jc-green: var(--adm-success, var(--success, #16a172)); --jc-red: var(--adm-danger, var(--danger, #dc3f4f)); --jc-orange: var(--adm-warning, var(--warning, #d98510)); --jc-blue: var(--adm-info, var(--blue, #3578c0)); --jc-purple: var(--purple, #8b3fd9); --jc-neutral: var(--adm-text-muted, var(--text-muted, #79808d)); /* Default (no `type:` given) follows the brand accent. */ --jc-accent: var(--adm-accent, var(--accent, #1aab87)); } /* ============================================================================ * 1. OVERLAY * ========================================================================== */ .jconfirm .jconfirm-bg { background: rgba(10, 10, 15, 0.55); backdrop-filter: blur(2px); } /* ============================================================================ * 2. BOX * ---------------------------------------------------------------------------- * Both theme classes are listed so a caller passing theme:"dark" (several * member-side calls do) lands on the same design as the default. * ========================================================================== */ .jconfirm.jconfirm-light .jconfirm-box, .jconfirm.jconfirm-dark .jconfirm-box, .jconfirm.jconfirm-material .jconfirm-box { background: var(--jc-surface); color: var(--jc-text); border: 1px solid var(--jc-border); border-radius: 12px; box-shadow: 0 18px 48px rgba(10, 10, 15, 0.22); padding: 26px 26px 20px; } /* The CDN draws the type colour as a 7px slab across the top. Slimmer, and rounded to match the box, so it reads as part of the card. */ .jconfirm.jconfirm-light .jconfirm-box.jconfirm-type-green, .jconfirm.jconfirm-dark .jconfirm-box.jconfirm-type-green, .jconfirm.jconfirm-light .jconfirm-box.jconfirm-type-red, .jconfirm.jconfirm-dark .jconfirm-box.jconfirm-type-red, .jconfirm.jconfirm-light .jconfirm-box.jconfirm-type-orange, .jconfirm.jconfirm-dark .jconfirm-box.jconfirm-type-orange, .jconfirm.jconfirm-light .jconfirm-box.jconfirm-type-blue, .jconfirm.jconfirm-dark .jconfirm-box.jconfirm-type-blue, .jconfirm.jconfirm-light .jconfirm-box.jconfirm-type-purple, .jconfirm.jconfirm-dark .jconfirm-box.jconfirm-type-purple, .jconfirm.jconfirm-light .jconfirm-box.jconfirm-type-dark, .jconfirm.jconfirm-dark .jconfirm-box.jconfirm-type-dark, .jconfirm.jconfirm-light .jconfirm-box.jconfirm-type-default, .jconfirm.jconfirm-dark .jconfirm-box.jconfirm-type-default { border-top: 4px solid var(--jc-type, var(--jc-accent)); border-radius: 12px; } .jconfirm .jconfirm-box.jconfirm-type-green { --jc-type: var(--jc-green); } .jconfirm .jconfirm-box.jconfirm-type-red { --jc-type: var(--jc-red); } .jconfirm .jconfirm-box.jconfirm-type-orange { --jc-type: var(--jc-orange); } .jconfirm .jconfirm-box.jconfirm-type-blue { --jc-type: var(--jc-blue); } .jconfirm .jconfirm-box.jconfirm-type-purple { --jc-type: var(--jc-purple); } .jconfirm .jconfirm-box.jconfirm-type-dark { --jc-type: var(--jc-neutral); } /* ============================================================================ * 3. TITLE + ICON * ========================================================================== */ .jconfirm.jconfirm-light .jconfirm-box .jconfirm-title-c, .jconfirm.jconfirm-dark .jconfirm-box .jconfirm-title-c { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .jconfirm.jconfirm-light .jconfirm-box .jconfirm-title-c .jconfirm-title, .jconfirm.jconfirm-dark .jconfirm-box .jconfirm-title-c .jconfirm-title { color: var(--jc-text); /* The CDN title is 22px/bold — oversized next to the message, and the source of the shouty look in the old dialog. */ font-size: 1.0625rem; font-weight: 600; line-height: 1.35; } .jconfirm.jconfirm-light .jconfirm-box .jconfirm-title-c .jconfirm-icon-c, .jconfirm.jconfirm-dark .jconfirm-box .jconfirm-title-c .jconfirm-icon-c { color: var(--jc-type, var(--jc-accent)); font-size: 1.0625rem; /* The CDN reserves a fixed 32px slot and animates it in; the flex gap above does the spacing now. */ margin: 0; min-width: 0; opacity: 1; } /* ============================================================================ * 4. CONTENT * ---------------------------------------------------------------------------- * The original complaint: dark-grey message text on a dark-grey box. * ========================================================================== */ .jconfirm.jconfirm-light .jconfirm-box div.jconfirm-content-pane .jconfirm-content, .jconfirm.jconfirm-dark .jconfirm-box div.jconfirm-content-pane .jconfirm-content { color: var(--jc-text-soft); font-size: 0.9375rem; line-height: 1.55; } /* Validation errors are handed in as a

. */ .jconfirm .jconfirm-content ul { margin: 0; padding-left: 1.15rem; } .jconfirm .jconfirm-content ul li + li { margin-top: 0.25rem; } .jconfirm .jconfirm-content a { color: var(--jc-accent); } /* ============================================================================ * 5. BUTTONS * ---------------------------------------------------------------------------- * The CDN renders buttons as bare uppercase text, which is why "CLOSE (1)" read * as a stray label rather than a button. * * SPECIFICITY MATTERS HERE, and loading later is not enough. A button declared * as a bare function — `buttons: { confirm: function () {…} }`, which most of * this app's confirm dialogs use — is given btnClass 'btn-default' by the * library itself (jquery-confirm.js: `button.btnClass || 'btn-default'`). The * CDN then styles it at * * .jconfirm.jconfirm-dark .jconfirm-box .jconfirm-buttons button.btn-default * { color: #fff; background: none; } (0,5,1) * * so a plainer selector loses outright: the Confirm button kept the theme's * white text on no background and disappeared against this skin's light box, * leaving a dialog that could only be confirmed by guessing where to click. * Every rule below therefore carries the full theme+box prefix to match that * (0,5,1) and win on load order. Only `button` and `button.btn-default` are * themed by the CDN; the coloured classes need no such prefix. * ========================================================================== */ .jconfirm .jconfirm-buttons { padding-top: 18px; } .jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button, .jconfirm.jconfirm-dark .jconfirm-box .jconfirm-buttons button { border: 1px solid transparent; border-radius: 8px; padding: 0.4rem 1rem; font-size: 0.875rem; font-weight: 600; text-transform: none; letter-spacing: 0; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button:focus-visible, .jconfirm.jconfirm-dark .jconfirm-box .jconfirm-buttons button:focus-visible { outline: 2px solid var(--jc-accent); outline-offset: 2px; } /* Neutral — the class the library falls back to, so this is what an unstyled Confirm looks like. Bordered and filled, never bare text. */ .jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default, .jconfirm.jconfirm-dark .jconfirm-box .jconfirm-buttons button.btn-default { background: var(--jc-surface-2); border-color: var(--jc-border); color: var(--jc-text); } .jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default:hover, .jconfirm.jconfirm-dark .jconfirm-box .jconfirm-buttons button.btn-default:hover { background: var(--jc-border); border-color: var(--jc-border); color: var(--jc-text); } /* Affirmative / destructive / dismiss-coloured */ .jconfirm .jconfirm-buttons button.btn-green, .jconfirm .jconfirm-buttons button.btn-blue, .jconfirm .jconfirm-buttons button.btn-red, .jconfirm .jconfirm-buttons button.btn-orange, .jconfirm .jconfirm-buttons button.btn-purple, .jconfirm .jconfirm-buttons button.btn-dark { color: #ffffff; } .jconfirm .jconfirm-buttons button.btn-green { background: var(--jc-green); } .jconfirm .jconfirm-buttons button.btn-blue { background: var(--jc-blue); } .jconfirm .jconfirm-buttons button.btn-red { background: var(--jc-red); } .jconfirm .jconfirm-buttons button.btn-orange { background: var(--jc-orange); } .jconfirm .jconfirm-buttons button.btn-purple { background: var(--jc-purple); } .jconfirm .jconfirm-buttons button.btn-dark { background: var(--jc-neutral); } .jconfirm .jconfirm-buttons button.btn-green:hover, .jconfirm .jconfirm-buttons button.btn-blue:hover, .jconfirm .jconfirm-buttons button.btn-red:hover, .jconfirm .jconfirm-buttons button.btn-orange:hover, .jconfirm .jconfirm-buttons button.btn-purple:hover, .jconfirm .jconfirm-buttons button.btn-dark:hover { /* One hover treatment for every filled button, so a new colour needs no extra rule here. */ filter: brightness(0.92); color: #ffffff; } /* ============================================================================ * 6. CLOSE ICON * ========================================================================== */ .jconfirm .jconfirm-box .jconfirm-closeIcon { color: var(--jc-text-muted); font-size: 1.5rem; opacity: 1; } .jconfirm .jconfirm-box .jconfirm-closeIcon:hover { color: var(--jc-text); }