/* ============================================================ TRENDSLIVE — SweetAlert2 skin ------------------------------------------------------------ Every Vue screen raises its toasts and confirms through `showNotification()` / `showConfirm()` / `showLoaderNotification()` in eventmie-pro/resources/js/mixins.js. That file is package-owned (never edited), but it already tags each part of the dialog with a `custom-swal-*` class — so the whole thing can be re-skinned from here without touching a line of JS. What it replaces: the package's own skin (eventmie-pro/resources/sass/theme/vendor/_sweetalert.scss) — a light Bootstrap card with tinted pastel backgrounds. Its rules are written with `!important`, so these are too, and they are one level more specific (.swal2-container .custom-swal-popup) so they win. The look is the console's: toasts read like .tl-alert, the confirm reads like .tl-modal + .tl-confirm-* (organiser-pages.css), buttons like .tl-btn. Loaded after every other stylesheet, on all three TL layouts, via trendslive.partials.head-swal. ============================================================ */ /* ---------- shared shell ---------- */ /* The package pins .custom-swal-container to `top: 1rem; right: 1rem` for BOTH the toast and the modal, so a confirm opened in the corner instead of the middle. Each case is given back the geometry SweetAlert itself expects: · modal → a full-viewport grid it can centre in · toast → a small auto-sized box in the corner. It must NOT be full-screen: the container sits above the page, so a full-screen one would swallow every click for as long as the toast is up. */ .swal2-container.custom-swal-container { z-index: 2147483647 !important; position: fixed !important; } .swal2-container.custom-swal-container.swal2-center, .swal2-container.custom-swal-container.swal2-backdrop-show { inset: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; padding: 20px !important; } body.swal2-toast-shown .swal2-container.custom-swal-container.swal2-top-end, body.swal2-toast-shown .swal2-container.custom-swal-container.swal2-top-right { inset: 16px 16px auto auto !important; top: 16px !important; right: 16px !important; bottom: auto !important; left: auto !important; padding: 0 !important; width: auto !important; /* SweetAlert's own base rule is `div:where(.swal2-container){height:100%}` and nothing above overrides it, so with bottom:auto the toast's container ran the whole viewport height. Harmless while it is transparent, but it is what the scrim below used to paint. Hug the toast instead. */ height: auto !important; } /* the modal backdrop — same scrim as .tl-modal-overlay. Toasts never dim the page. */ .swal2-container.custom-swal-container.swal2-backdrop-show { background: rgba(10, 10, 12, 0.82) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* NB `body.swal2-toast-shown …` and NOT `….custom-swal-container.swal2-toast-shown`: SweetAlert puts swal2-toast-shown on and , never on the container (utils/dom/renderers/renderPopup.js), so the container-scoped form matched nothing and every toast kept the modal scrim above — a full-height dark blurred strip down the right of the page for the 5s the toast was up. The container gets swal2-backdrop-show even for toasts (utils/openPopup.js addClasses), which is why it has to be undone here rather than simply not applied. */ body.swal2-toast-shown .swal2-container.custom-swal-container, .swal2-container.custom-swal-container.swal2-backdrop-hide { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .swal2-container .custom-swal-popup, .swal2-container .custom-swal-popup-loader { background: var(--tl-surface-1) !important; border: 1px solid var(--tl-border-strong) !important; border-radius: var(--tl-r-lg) !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5) !important; color: var(--tl-fg) !important; padding: 22px !important; font-family: var(--tl-font-body); } /* NB the long selector: public/css/eventmie-custom.css carries [data-bs-theme="dark"] .swal2-popup.swal2-modal .custom-swal-title { color: var(--bs-white) !important } and eventmie's theme redefines --bs-white to #000000 under [data-bs-theme=dark], so that "dark-mode fix" paints the title black on a black dialog. This has to be more specific than (0,4,0) to win. */ [data-bs-theme="dark"] .swal2-container .swal2-popup .custom-swal-title, [data-bs-theme="dark"] .swal2-container .swal2-popup.swal2-modal .custom-swal-title, .swal2-container .custom-swal-title { font-family: var(--tl-font-app) !important; font-weight: 800 !important; font-size: 17px !important; letter-spacing: -0.01em; color: var(--tl-fg) !important; padding: 0 !important; margin: 0 !important; } /* Centred, not left-ranged. SweetAlert centres the title and message itself (`h2:where(.swal2-title)` / `div:where(.swal2-html-container)`), and its DOM order is icon → title → message, so there is no way to build the prototype's icon-beside-title row without rewriting package JS. The dialog is therefore centred as a whole — including the icon, which otherwise sat off to the left above centred copy. */ .swal2-container .swal2-html-container, .swal2-container .custom-swal-content { font-family: var(--tl-font-body) !important; font-size: 13px !important; line-height: 1.6 !important; color: var(--tl-fg-3) !important; text-align: center !important; margin: 10px 0 0 !important; padding: 0 !important; } .swal2-container .custom-swal-title { text-align: center !important; } .swal2-container .swal2-html-container b, .swal2-container .swal2-html-container strong { color: var(--tl-fg) !important; } /* No close button. mixins.js sets `showCloseButton: true` on showConfirm() — the only dialog in the app that renders one — which puts an X above a pair of Yes/No buttons that already answer the question. The TL confirm has two ways out, not three. (mixins.js is package-owned, so it goes here rather than there; Esc and the scrim still dismiss.) */ .swal2-container .custom-swal-close-button { display: none !important; } /* ---------- buttons: the console's .tl-btn ---------- */ .swal2-container .custom-swal-actions { gap: 10px; margin: 20px 0 0 !important; justify-content: flex-end !important; } .swal2-container .custom-swal-confirm-button, .swal2-container .custom-swal-cancel-button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px !important; border-radius: var(--tl-r-md) !important; font-family: var(--tl-font-mono) !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: none !important; transition: all var(--tl-dur-1, 0.15s) var(--tl-ease, ease); } .swal2-container .custom-swal-confirm-button { background: var(--tl-yellow) !important; border: 1px solid transparent !important; color: #161920 !important; box-shadow: var(--tl-glow-yellow) !important; } .swal2-container .custom-swal-confirm-button:hover { background: var(--tl-yellow-soft) !important; } .swal2-container .custom-swal-cancel-button { background: var(--tl-surface-1) !important; border: 1px solid var(--tl-border-strong) !important; color: var(--tl-fg) !important; } .swal2-container .custom-swal-cancel-button:hover { background: var(--tl-surface-2) !important; border-color: var(--tl-border-yellow) !important; } .swal2-container .custom-swal-confirm-button:focus, .swal2-container .custom-swal-cancel-button:focus { box-shadow: none !important; outline: none !important; } /* The confirm dialog carries no icon. mixins.js passes `icon: 'error'` to showConfirm(), which drew a red ✕ badge above a question the Yes/No buttons already frame — and the prototype's modals have no icon at all. Only this one variant is hidden; `warning` / `success` dialogs keep theirs (styled below). */ .swal2-container .custom-swal-popup-error .swal2-icon { display: none !important; } /* ---------- other icons: .tl-confirm-ic, not swal's ring ---------- */ .swal2-container .custom-swal-popup .swal2-icon { width: 40px; height: 40px; margin: 0 auto 14px !important; border: none !important; border-radius: 50% !important; background: var(--tl-danger-bg) !important; color: var(--tl-danger) !important; } .swal2-container .custom-swal-popup .swal2-icon .swal2-icon-content { font-size: 20px !important; color: inherit !important; } .swal2-container .custom-swal-popup .swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: var(--tl-danger) !important; top: 18px; } .swal2-container .custom-swal-popup .swal2-icon.swal2-error [class^="swal2-x-mark-line"][class$="left"] { left: 11px; width: 18px; } .swal2-container .custom-swal-popup .swal2-icon.swal2-error [class^="swal2-x-mark-line"][class$="right"] { right: 11px; width: 18px; } .swal2-container .custom-swal-popup .swal2-icon.swal2-warning, .swal2-container .custom-swal-popup .swal2-icon.swal2-question { background: rgba(249, 235, 6, 0.12) !important; color: var(--tl-yellow-ink) !important; } .swal2-container .custom-swal-popup .swal2-icon.swal2-success { background: var(--tl-success-bg) !important; color: var(--tl-success) !important; } .swal2-container .custom-swal-popup .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--tl-success) !important; } .swal2-container .custom-swal-popup .swal2-icon.swal2-success .swal2-success-ring { border: none !important; } /* the auto-dismiss bar on the confirm (mixins sets timer: 5000) */ .swal2-container .swal2-timer-progress-bar { background: var(--tl-yellow) !important; } /* ---------- toasts (showNotification) ---------- */ .swal2-container .swal2-toast.custom-swal-popup { display: flex !important; align-items: center !important; gap: 10px; min-width: 260px; max-width: 380px; padding: 13px 16px !important; border-radius: var(--tl-r-md) !important; background: var(--tl-surface-1) !important; border: 1px solid var(--tl-border-strong) !important; border-left-width: 3px !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45) !important; } .swal2-container .swal2-toast .swal2-html-container { display: flex !important; align-items: center; gap: 9px; margin: 0 !important; font-size: 13px !important; font-weight: 500 !important; color: var(--tl-fg) !important; } /* mixins.js injects the icon as a Font Awesome inside the html */ .swal2-container .swal2-toast .swal2-html-container i { flex: none; font-size: 15px !important; } .swal2-container .swal2-toast .swal2-html-container p { margin: 0 !important; color: inherit !important; } .swal2-container .swal2-toast .swal2-timer-progress-bar-container { border-radius: 0 0 var(--tl-r-md) var(--tl-r-md); } /* one accent per type — border edge + icon, body copy stays legible */ .swal2-container .swal2-toast.custom-swal-popup-success { border-left-color: var(--tl-success) !important; } .swal2-container .swal2-toast.custom-swal-popup-success .swal2-html-container i { color: var(--tl-success) !important; } .swal2-container .swal2-toast.custom-swal-popup-error { border-left-color: var(--tl-danger) !important; } .swal2-container .swal2-toast.custom-swal-popup-error .swal2-html-container i { color: var(--tl-danger) !important; } .swal2-container .swal2-toast.custom-swal-popup-warning { border-left-color: var(--tl-warning) !important; } .swal2-container .swal2-toast.custom-swal-popup-warning .swal2-html-container i { color: var(--tl-warning) !important; } .swal2-container .swal2-toast.custom-swal-popup-info { border-left-color: var(--tl-info) !important; } .swal2-container .swal2-toast.custom-swal-popup-info .swal2-html-container i { color: var(--tl-info) !important; } /* ---------- loader (showLoaderNotification) ---------- */ .swal2-container .custom-swal-popup-loader .swal2-loader { border-color: var(--tl-yellow) transparent var(--tl-yellow) transparent !important; width: 36px; height: 36px; } .swal2-container .custom-swal-footer { border-top: 1px solid var(--tl-border) !important; margin-top: 18px !important; padding-top: 14px !important; color: var(--tl-fg-4) !important; font-family: var(--tl-font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; } .swal2-container .custom-swal-footer .brand-logo { height: 16px; width: auto; }