/* ============================================================================= NotificationTheme.css - the app's toast notifications (Lobibox), GLOBAL. WHY GLOBAL AND NOT SCOPED LIKE RefundTheme.css: Lobibox appends its wrapper to , outside every page's root element. A scoped rule (.refund-theme .lobibox-notify) can therefore never reach it - the same trap that left the Approve dialog rendering as an unstyled grey block. Toasts must be styled globally or not at all. That means this file affects EVERY page (~456 callers of ShowNotification), which is exactly what was asked for: one common look, changed in one place. DESIGN: white card, 4px colour accent, dark readable text. The old look was a saturated colour block with white text - it reads as an alert whether the news is good or bad, and white-on-#CE812E (the warning orange) is about 2.4:1 contrast, i.e. below WCAG AA for body text. Here the colour identifies the TYPE (accent bar + icon) while the message itself stays near-black on white (~15:1). Colour carries the meaning; text carries the words. Loaded AFTER Lobibox.css in _Layout, so equal-specificity rules win on order. !important is used only where Lobibox sets the same property inline or from JS. ============================================================================= */ :root { --ntf-ink: #243244; --ntf-muted: #6b7789; --ntf-surface: #ffffff; --ntf-line: #e3e9f0; --ntf-info: #1f5fa8; --ntf-success: #1e7d46; --ntf-warning: #b8730b; --ntf-error: #c0392b; --ntf-default: #4a5568; /* ---- TOAST: solid brand-coloured card ---- Four looks were tried: white (lost on a white page), a 7% tint (also lost), a dark slate card (visible, but foreign - nothing else in this ERP is dark). This is the fourth and it is the one that belongs: the app's own identity is brand blue - the grid headers are a #2462a3->#1f5fa8 gradient, the primary buttons are #1f5fa8 - so the toast simply IS that. The original Lobibox look was already coloured. Its actual defect was never the colour, it was the WASHED-OUT shades: white on #2E79B4 is ~3.4:1 and white on #CE812E is ~2.4:1, both below the 4.5:1 WCAG AA floor for body text. Every colour below is deepened until white text clears AA, so this keeps the original's visibility and fixes the legibility it never had. white on #1f5fa8 = 6.5:1 white on #1e7d46 = 4.9:1 white on #a5620a = 4.9:1 white on #c0392b = 5.9:1 white on #445066 = 8.4:1 */ --ntf-t-info: #1f5fa8; --ntf-t-info-2: #2462a3; /* gradient top, same as .attendance-table thead */ --ntf-t-success: #1e7d46; --ntf-t-success-2: #249052; --ntf-t-warning: #a5620a; --ntf-t-warning-2: #b8730b; --ntf-t-error: #c0392b; --ntf-t-error-2: #d04435; --ntf-t-default: #445066; --ntf-t-default-2: #4f5c74; --ntf-t-ink: #ffffff; } /* Above AdminLTE's fixed header/sidebar and Bootstrap modals (1050), so a toast fired from a dialog is not hidden behind it - a "nothing happened" bug that is really a z-index bug. RAISED FROM 10600 TO 100050 so it also clears the app loader. `.preloader` is `z-index:99999` (spinner.css) and covers the whole viewport, so at 10600 every toast raised while a request was still in flight sat UNDERNEATH it - visibly dimmed by the loader's backdrop, and its close button unclickable. Removing that backdrop fixed the dimming; this fixes the stacking, so the message is both legible and interactive even while the spinner is up. Keep this ABOVE the .preloader value: if the loader's z-index ever changes, this has to stay higher. */ .lobibox-notify-wrapper { z-index: 100050 !important; } /* ---- the card ---- */ .lobibox-notify, .lobibox-notify.notify-mini { min-height: 0 !important; /* mini hard-codes 36px; let content decide */ font-family: 'Segoe UI', Roboto, Arial, sans-serif !important; font-size: 13px !important; background: linear-gradient(180deg, var(--ntf-t-default-2), var(--ntf-t-default)) !important; color: var(--ntf-t-ink) !important; border: none !important; border-radius: 8px !important; box-shadow: 0 12px 32px rgba(16, 32, 56, .30), 0 3px 8px rgba(16, 32, 56, .18) !important; margin: 8px 0 !important; overflow: hidden !important; /* keeps the delay bar inside the rounded corners */ cursor: default !important; /* Lobibox says pointer; only the X actually does anything */ } .lobibox-notify:hover { box-shadow: 0 16px 40px rgba(16, 32, 56, .38), 0 3px 8px rgba(16, 32, 56, .22) !important; border: none !important; /* stock Lobibox flashes the border to white on hover */ } .lobibox-notify.rounded { border-radius: 8px !important; } /* 30px pill looks like a cookie banner */ /* ---- body / message ---- */ .lobibox-notify .lobibox-notify-body, .lobibox-notify.notify-mini .lobibox-notify-body { margin: 12px 34px 12px 52px !important; } .lobibox-notify .lobibox-notify-msg, .lobibox-notify.notify-mini .lobibox-notify-msg { /* The clip fix. ShowNotification passes messageHeight:false so no max-height is set from JS; these two make the wrap actually happen instead of one long unbroken line. */ max-height: none !important; overflow: visible !important; white-space: normal !important; word-break: break-word !important; line-height: 1.5 !important; font-size: 13px !important; font-weight: 400 !important; color: var(--ntf-t-ink) !important; } .lobibox-notify .lobibox-notify-msg b, .lobibox-notify .lobibox-notify-msg strong { font-weight: 700; color: #fff; } /* ---- icon ---- */ .lobibox-notify .lobibox-notify-icon-wrapper, .lobibox-notify.notify-mini .lobibox-notify-icon-wrapper { left: 12px !important; width: 30px !important; } /* the icon sits in a soft translucent disc - reads as designed rather than a glyph dropped on a fill */ .lobibox-notify .lobibox-notify-icon > div, .lobibox-notify.notify-mini .lobibox-notify-icon > div { position: relative; } .lobibox-notify .lobibox-notify-icon > div .icon-el, .lobibox-notify.notify-mini .lobibox-notify-icon > div .icon-el { font-size: 15px !important; /* stock mini is 32px: shouty on a small card */ line-height: 30px !important; width: 30px !important; height: 30px !important; display: inline-block !important; text-align: center !important; color: #fff !important; background: rgba(255, 255, 255, .18); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); } /* ---- close ---- */ .lobibox-notify .lobibox-close { top: 8px !important; right: 8px !important; width: 20px !important; height: 20px !important; line-height: 20px !important; font-size: 15px !important; color: #fff !important; background: transparent !important; opacity: .8; transition: opacity .15s, background .15s; } .lobibox-notify .lobibox-close:hover { opacity: 1; background: rgba(255, 255, 255, .18) !important; } /* ---- delay indicator: a hairline at the bottom, not a slab ---- */ .lobibox-notify .lobibox-delay-indicator { bottom: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: rgba(0, 0, 0, .18) !important; /* the unfilled track, on a coloured fill */ } .lobibox-notify .lobibox-delay-indicator > div { height: 3px !important; background: rgba(255, 255, 255, .85) !important; /* white reads on all five fills */ } /* ============================================================================= PER TYPE - accent bar + icon colour. `color` on the card drives the delay bar via currentColor, while the message re-asserts --ntf-ink so the words never take the accent colour. ============================================================================= */ /* Solid brand fill per type, as a subtle vertical gradient - the same treatment as the grid header (.attendance-table thead: #2462a3 -> #1f5fa8), so a toast looks like it came from this app. White text on every one of these clears WCAG AA (4.9:1 to 8.4:1); the stock Lobibox fills did not. */ .lobibox-notify.lobibox-notify-info, .lobibox-notify.lobibox-notify-info:hover { background: linear-gradient(180deg, var(--ntf-t-info-2), var(--ntf-t-info)) !important; border: none !important; } .lobibox-notify.lobibox-notify-success, .lobibox-notify.lobibox-notify-success:hover { background: linear-gradient(180deg, var(--ntf-t-success-2), var(--ntf-t-success)) !important; border: none !important; } .lobibox-notify.lobibox-notify-warning, .lobibox-notify.lobibox-notify-warning:hover { background: linear-gradient(180deg, var(--ntf-t-warning-2), var(--ntf-t-warning)) !important; border: none !important; } .lobibox-notify.lobibox-notify-error, .lobibox-notify.lobibox-notify-error:hover { background: linear-gradient(180deg, var(--ntf-t-error-2), var(--ntf-t-error)) !important; border: none !important; } .lobibox-notify.lobibox-notify-default, .lobibox-notify.lobibox-notify-default:hover { background: linear-gradient(180deg, var(--ntf-t-default-2), var(--ntf-t-default)) !important; border: none !important; } /* ---- title (rarely used by this app, but keep it consistent if a page passes one) ---- */ .lobibox-notify .lobibox-notify-title, .lobibox-notify.notify-mini .lobibox-notify-title { font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.3 !important; margin: 0 0 2px 0 !important; color: #fff !important; /* dark card: --ntf-ink here would be near-invisible */ } /* ---- phones: a fixed 380px card overflows a 360px viewport ---- */ @media (max-width: 480px) { .lobibox-notify-wrapper { left: 8px !important; right: 8px !important; width: auto !important; } .lobibox-notify { width: auto !important; max-width: 100% !important; } } /* ============================================================================= PART 2 - $ngConfirm DIALOGS (angular-confirm, .ng-confirm-*) ----------------------------------------------------------------------------- The app has THREE notification systems, not one, and they looked like three different products: 1. Lobibox toast -> ShowNotification() ~9,561 calls / 456 files (Part 1 above) 2. angular-confirm -> $ngConfirm() 146 calls / 80 files (here) 3. native alert()/confirm() ~44 calls (see the note at the bottom) This part brings #2 into the same design language as #1 and as the in-page .frr-confirm dialogs: same font, same ink, same radius, same button shapes, same semantic colours. Global for the same reason as Part 1 - angular-confirm appends to , so no scoped theme can reach it (this is the documented reason the Approve dialog once rendered as an unstyled grey block). Callers pass type:'orange'|'red'|'blue'|'green' and their own icon; that vocabulary is preserved - 146 call sites are NOT being rewritten. Only the presentation changes. ============================================================================= */ /* backdrop: readable dimming, not a black wall */ .ng-confirm .ng-confirm-bg { background: rgba(16, 32, 56, .55) !important; } /* the card - match .frr-confirm (8px radius, deep soft shadow, no hard border) */ .ng-confirm .ng-confirm-box { background: var(--ntf-surface) !important; border: none !important; border-radius: 8px !important; box-shadow: 0 12px 44px rgba(0, 0, 0, .32) !important; padding: 0 !important; /* stock 15px 15px 0 fights the header band below */ overflow: hidden !important; font-family: 'Segoe UI', Roboto, Arial, sans-serif !important; color: var(--ntf-ink) !important; } /* ---- header band: coloured strip + white title, mirroring .frr-confirm ---- */ .ng-confirm .ng-confirm-box div.ng-confirm-title-c { display: flex !important; align-items: center !important; gap: 8px; padding: 10px 16px !important; margin: 0 !important; background: var(--ntf-default); /* per-type colour set below */ color: #fff !important; cursor: default !important; } .ng-confirm .ng-confirm-box div.ng-confirm-title-c .ng-confirm-title { font-size: 14px !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: 0 !important; text-transform: none !important; color: #fff !important; } .ng-confirm .ng-confirm-box div.ng-confirm-title-c .ng-confirm-icon-c { margin: 0 !important; color: #fff !important; opacity: .95; } .ng-confirm .ng-confirm-box div.ng-confirm-title-c .ng-confirm-icon-c i { font-size: 15px !important; color: #fff !important; } /* close icon sits ON the coloured band now, so it must be white */ .ng-confirm .ng-confirm-box div.ng-confirm-closeIcon { top: 10px !important; right: 12px !important; color: #fff !important; opacity: .9; font-size: 15px !important; } .ng-confirm .ng-confirm-box div.ng-confirm-closeIcon:hover { opacity: 1 !important; } /* ---- content ---- */ .ng-confirm .ng-confirm-box div.ng-confirm-content-pane { margin: 0 !important; } .ng-confirm .ng-confirm-box div.ng-confirm-content-pane .ng-confirm-content { padding: 14px 16px !important; font-size: 13px !important; line-height: 1.55 !important; color: var(--ntf-ink) !important; text-align: left !important; word-break: break-word; } /* ---- buttons: same shape/weight as .frr-cf-danger / .frr-cf-plain ---- */ .ng-confirm .ng-confirm-box .ng-confirm-buttons { padding: 12px 16px !important; border-top: 1px solid var(--ntf-line); display: flex !important; gap: 10px; justify-content: center !important; float: none !important; } .ng-confirm .ng-confirm-box .ng-confirm-buttons > button { margin: 0 !important; min-width: 96px; font-size: 13px !important; font-weight: 600 !important; padding: 8px 16px !important; border-radius: 5px !important; border: 1px solid transparent !important; text-transform: none !important; box-shadow: none !important; transition: filter .15s; } .ng-confirm .ng-confirm-box .ng-confirm-buttons > button:hover { filter: brightness(.93); } .ng-confirm .ng-confirm-box .ng-confirm-buttons button.btn-default { background: #eef1f5 !important; color: var(--ntf-ink) !important; border-color: var(--ntf-line) !important; } .ng-confirm .ng-confirm-box .ng-confirm-buttons button.btn-blue { background: var(--ntf-info) !important; color: #fff !important; } .ng-confirm .ng-confirm-box .ng-confirm-buttons button.btn-green { background: var(--ntf-success) !important; color: #fff !important; } .ng-confirm .ng-confirm-box .ng-confirm-buttons button.btn-orange { background: var(--ntf-warning) !important; color: #fff !important; } .ng-confirm .ng-confirm-box .ng-confirm-buttons button.btn-red { background: var(--ntf-error) !important; color: #fff !important; } .ng-confirm .ng-confirm-box .ng-confirm-buttons button.btn-purple { background: #6b46c1 !important; color: #fff !important; } .ng-confirm .ng-confirm-box .ng-confirm-buttons button.btn-dark { background: var(--ntf-default) !important; color: #fff !important; } /* ---- per-type header colour. Same semantics as the toast: blue=info, green=ok, orange=warn, red=stop. The library animates a top border in these colours; we colour the whole band instead. ---- */ .ng-confirm .ng-confirm-box.ng-confirm-type-blue div.ng-confirm-title-c { background: var(--ntf-info) !important; } .ng-confirm .ng-confirm-box.ng-confirm-type-green div.ng-confirm-title-c { background: var(--ntf-success) !important; } .ng-confirm .ng-confirm-box.ng-confirm-type-orange div.ng-confirm-title-c { background: var(--ntf-warning) !important; } .ng-confirm .ng-confirm-box.ng-confirm-type-red div.ng-confirm-title-c { background: var(--ntf-error) !important; } .ng-confirm .ng-confirm-box.ng-confirm-type-purple div.ng-confirm-title-c { background: #6b46c1 !important; } .ng-confirm .ng-confirm-box.ng-confirm-type-dark div.ng-confirm-title-c { background: var(--ntf-default) !important; } /* the library draws its type accent as a top border on the box; redundant now and it shows as a stray line above the coloured band */ .ng-confirm .ng-confirm-box[class*="ng-confirm-type-"] { border-top: none !important; } /* ============================================================================= NOT FIXABLE IN CSS - native alert() / confirm(), ~44 call sites. Browser dialogs cannot be styled at all: they show "localhost:42605 says", they block the JS thread, and Chrome lets the user tick "prevent this page from creating more dialogs" - after which your messages silently stop appearing. Several are also leftovers: alert(1), alert('Hello'). These should migrate to ShowNotification() (for a message) or $ngConfirm() (for a decision). Listed rather than silently changed: 25 files, mostly Admission/Exam/GatePass, plus 4 swal() calls in GatePass/StudentRegistration that pull in a whole separate SweetAlert dependency for one "browser too old" string. ============================================================================= */