/* * The noticeboard: cards on the dashboard, and the one modal that interrupts. * * Plain CSS for the same reason as dashboard.css, wallet.css, service-page.css * and the rest: the client panel has no Vite build and serves Filament's * pre-compiled app.css, so `class="flex gap-4"` written in a Blade view here is * inert markup. Anything bespoke brings its own rules. * * Registered on the client panel only — notices are a thing said to customers, * and the popup's render hook is already guarded on the panel id for the same * reason (see App\Livewire\NoticePopup): * * Css::make('notices', resource_path('css/notices.css')) * * which `php artisan filament:assets` copies to public/css/app/notices.css. * Editing this file therefore needs that command re-run — composer's * post-autoload-dump does it too, by way of `filament:upgrade`. * * Every colour is a variable FilamentColor writes into :root at runtime * (--gray-*, --primary-*, --success-*, --warning-*, --danger-*, --info-*), so * the board tracks whichever palette the operator chose, and its dark mode, * rather than defining a second one. Dark mode is the `.dark` class on . * * The namespace is `nt-`, kept apart from `db-`, `tk-`, `ct-`, `wl-`, `oc-` and * `sv-` because all of them load on every client page and a shared prefix would * let a rule written for a notice silently restyle a server. * * The five tones are the five NoticeCategory cases. Each is one custom property * set on the card, so the rules below are written once against `--nt-tone` * rather than five times against a colour. */ /* ------------------------------------------------------------------ * * Tones * ------------------------------------------------------------------ */ .nt-card--info, .nt-modal__card--info { --nt-tone: var(--info-500); --nt-tone-soft: var(--info-50); --nt-tone-text: var(--info-700); } .nt-card--success, .nt-modal__card--success { --nt-tone: var(--success-500); --nt-tone-soft: var(--success-50); --nt-tone-text: var(--success-700); } .nt-card--warning, .nt-modal__card--warning { --nt-tone: var(--warning-500); --nt-tone-soft: var(--warning-50); --nt-tone-text: var(--warning-700); } .nt-card--danger, .nt-modal__card--danger { --nt-tone: var(--danger-500); --nt-tone-soft: var(--danger-50); --nt-tone-text: var(--danger-700); } .nt-card--primary, .nt-modal__card--primary { --nt-tone: var(--primary-500); --nt-tone-soft: var(--primary-50); --nt-tone-text: var(--primary-700); } /* * Dark mode inverts the soft fill rather than the accent. A tinted panel that * stayed at 50 would be a white block on a dark dashboard, and the accent is * already legible against both. */ .dark .nt-card, .dark .nt-modal__card { --nt-tone-soft: color-mix(in srgb, var(--nt-tone) 14%, transparent); --nt-tone-text: var(--gray-100); } /* ------------------------------------------------------------------ * * The cards * ------------------------------------------------------------------ */ .nt-board { display: flex; flex-direction: column; gap: 0.75rem; } .nt-card { position: relative; display: flex; gap: 0.875rem; padding: 1rem 1.125rem; border: 1px solid var(--gray-200); /* The accent is a left edge rather than a full border, so five notices in a column read as one list with five kinds and not as five separate boxes. */ border-left: 3px solid var(--nt-tone, var(--gray-400)); border-radius: var(--radius-xl, 0.75rem); background-color: var(--nt-tone-soft, var(--gray-50)); } .dark .nt-card { border-color: var(--gray-700); border-left-color: var(--nt-tone, var(--gray-500)); } .nt-card__mark { flex: none; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9999px; background-color: var(--nt-tone, var(--gray-400)); color: #fff; } .nt-card__icon, .nt-modal__icon { width: 1.125rem; height: 1.125rem; } .nt-card__body { flex: 1 1 auto; /* Without this a long unbroken word in a notice pushes the close button off the card's right edge. */ min-width: 0; } .nt-card__kind { margin: 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nt-tone-text, var(--gray-600)); } .nt-card__title { margin: 0.125rem 0 0; font-size: var(--text-sm, 0.875rem); font-weight: 600; color: var(--gray-950); } .dark .nt-card__title { color: var(--gray-50); } .nt-card__text, .nt-modal__text { margin-top: 0.375rem; font-size: var(--text-sm, 0.875rem); line-height: 1.55; color: var(--gray-700); } .dark .nt-card__text, .dark .nt-modal__text { color: var(--gray-300); } /* The markdown converter emits these, and nothing else styles them here. */ .nt-card__text p, .nt-modal__text p { margin: 0 0 0.5rem; } .nt-card__text p:last-child, .nt-modal__text p:last-child { margin-bottom: 0; } .nt-card__text ul, .nt-card__text ol, .nt-modal__text ul, .nt-modal__text ol { margin: 0 0 0.5rem; padding-left: 1.25rem; } .nt-card__text a, .nt-modal__text a { color: var(--primary-600); text-decoration: underline; } .dark .nt-card__text a, .dark .nt-modal__text a { color: var(--primary-400); } .nt-card__actions, .nt-modal__foot { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } .nt-card__close, .nt-modal__close { flex: none; align-self: flex-start; padding: 0 0.25rem; border: 0; background: transparent; font-size: 1.25rem; line-height: 1; color: var(--gray-400); cursor: pointer; } .nt-card__close:hover, .nt-modal__close:hover { color: var(--gray-700); } .dark .nt-card__close:hover, .dark .nt-modal__close:hover { color: var(--gray-200); } /* ------------------------------------------------------------------ * * The buttons * ------------------------------------------------------------------ */ .nt-btn { display: inline-flex; align-items: center; padding: 0.375rem 0.75rem; border-radius: var(--radius-lg, 0.5rem); font-size: 0.8125rem; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; } .nt-btn--primary { background-color: var(--primary-600); color: #fff; } .nt-btn--primary:hover { background-color: var(--primary-500); } .nt-btn--secondary { border-color: var(--gray-300); background-color: transparent; color: var(--gray-700); } .dark .nt-btn--secondary { border-color: var(--gray-600); color: var(--gray-200); } /* The way out of the modal, and never the loudest thing in it. */ .nt-btn--plain { background: transparent; color: var(--gray-500); } .nt-btn--plain:hover { color: var(--gray-800); } .dark .nt-btn--plain:hover { color: var(--gray-100); } /* ------------------------------------------------------------------ * * The modal * * Its own overlay rather than Filament's, because this is mounted from a render * hook at BODY_END and is not an Action's modal — there is no Action behind it * to open. The z-index sits above the topbar's stack and below nothing else on * the page, which is the point of an interruption. * ------------------------------------------------------------------ */ .nt-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; background-color: rgb(0 0 0 / 0.5); } .nt-modal__card { width: 100%; max-width: 30rem; /* Bounded, so a long notice scrolls inside the card instead of running off a short screen with its buttons below the fold. */ max-height: 85vh; overflow-y: auto; padding: 1.25rem; border-radius: var(--radius-xl, 0.75rem); background-color: #fff; box-shadow: 0 20px 45px rgb(0 0 0 / 0.25); } .dark .nt-modal__card { background-color: var(--gray-900); } .nt-modal__head { display: flex; align-items: flex-start; gap: 0.75rem; } .nt-modal__mark { flex: none; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; background-color: var(--nt-tone, var(--gray-400)); color: #fff; } .nt-modal__kind { margin: 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--nt-tone-text, var(--gray-600)); } .nt-modal__title { margin: 0.125rem 0 0; font-size: 1.0625rem; font-weight: 600; color: var(--gray-950); } .dark .nt-modal__title { color: var(--gray-50); } /* The close cross is pushed to the far edge of the head row. */ .nt-modal__head .nt-modal__close { margin-left: auto; } .nt-modal__foot { justify-content: flex-end; align-items: center; } @media (max-width: 30rem) { /* On a phone the buttons stack and fill the width, because a row of three at 320px is three targets nobody can hit. */ .nt-modal__foot { flex-direction: column-reverse; align-items: stretch; } .nt-modal__foot .nt-btn { justify-content: center; } }