/* * Material You for the Filament panels (admin + donor portal). * * Filament keeps its own layout; this sheet brings it onto the same M3 system * as the public site and /m: the brand tonal colours (panel palette set in the * PanelProviders), Roboto Flex, M3 surfaces (surface / surface-container), * pill buttons and navigation indicators, 12-16px cards, 28px dialogs, 4px * outlined fields. Filament's dark mode is the `.dark` class on , so * the M3 roles are declared for `.dark` here rather than by media query. * See docs/DESIGN-M3.md. */ :root { --md-primary: #2a14b4; --md-on-primary: #ffffff; --md-primary-container: #4338ca; --md-on-primary-container: #c1beff; --md-secondary: #5a5893; --md-on-secondary: #ffffff; --md-secondary-container: #c0bdff; --md-on-secondary-container: #4c4a84; --md-tertiary: #692400; --md-on-tertiary: #ffffff; --md-tertiary-container: #8f3400; --md-on-tertiary-container: #ffb393; --md-error: #ba1a1a; --md-on-error: #ffffff; --md-error-container: #ffdad6; --md-on-error-container: #93000a; --md-background: #fcf8ff; --md-on-background: #1b1b23; --md-surface: #fcf8ff; --md-on-surface: #1b1b23; --md-surface-variant: #e4e0f3; --md-on-surface-variant: #464554; --md-outline: #777586; --md-outline-variant: #c7c4d7; --md-inverse-surface: #302f39; --md-inverse-on-surface: #f3effb; --md-inverse-primary: #c3c0ff; --md-surface-dim: #dcd8e4; --md-surface-bright: #fcf8ff; --md-surface-container-lowest: #ffffff; --md-surface-container-low: #f6f2fe; --md-surface-container: #f0ecf8; --md-surface-container-high: #eae6f3; --md-surface-container-highest: #e4e1ed; --md-scrim: #000000; --md-shadow: #000000; --md-gold: #885200; --md-on-gold: #ffffff; --md-gold-container: #ffddbb; --md-on-gold-container: #2b1700; --md-font: 'Roboto Flex', 'Roboto', system-ui, sans-serif; --md-elev-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15); } .dark { --md-primary: #c3c0ff; --md-on-primary: #1f00a4; --md-primary-container: #4338ca; --md-on-primary-container: #c1beff; --md-secondary: #c3c0ff; --md-on-secondary: #2c2961; --md-secondary-container: #42407a; --md-on-secondary-container: #b1aff0; --md-tertiary: #ffb597; --md-on-tertiary: #591d00; --md-tertiary-container: #8f3400; --md-on-tertiary-container: #ffb393; --md-error: #ffb4ab; --md-on-error: #690005; --md-error-container: #93000a; --md-on-error-container: #ffdad6; --md-background: #13121b; --md-on-background: #e4e1ed; --md-surface: #13121b; --md-on-surface: #e4e1ed; --md-surface-variant: #464554; --md-on-surface-variant: #c7c4d7; --md-outline: #918fa0; --md-outline-variant: #464554; --md-inverse-surface: #e4e1ed; --md-inverse-on-surface: #302f39; --md-inverse-primary: #5148d7; --md-surface-dim: #13121b; --md-surface-bright: #393842; --md-surface-container-lowest: #0e0d15; --md-surface-container-low: #1b1b23; --md-surface-container: #1f1f27; --md-surface-container-high: #2a2932; --md-surface-container-highest: #35343d; --md-scrim: #000000; --md-shadow: #000000; --md-gold: #ffb867; --md-on-gold: #482900; --md-gold-container: #673d00; --md-on-gold-container: #ffddbb; } /* ---------- Page surfaces ---------- */ .fi-body, .fi-simple-layout { background: var(--md-surface) !important; color: var(--md-on-surface); } .fi-body { font-family: var(--md-font); } .fi-topbar > nav { background: var(--md-surface) !important; box-shadow: none !important; --tw-ring-shadow: 0 0 #0000 !important; border-bottom: 1px solid var(--md-outline-variant); } .fi-sidebar { background: var(--md-surface-container-low) !important; } .fi-sidebar-header { background: var(--md-surface-container-low) !important; box-shadow: none !important; --tw-ring-shadow: 0 0 #0000 !important; } /* Navigation drawer items: full-pill, secondary-container indicator */ .fi-sidebar-item-button { border-radius: 9999px !important; min-height: 48px; padding-inline: 16px !important; } .fi-sidebar-item.fi-active > .fi-sidebar-item-button, .fi-sidebar-item-active > .fi-sidebar-item-button { background: var(--md-secondary-container) !important; } .fi-sidebar-item.fi-active .fi-sidebar-item-label, .fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: var(--md-on-secondary-container) !important; } .fi-sidebar-group-label { font-weight: 500; letter-spacing: .1px; color: var(--md-on-surface-variant) !important; } /* ---------- Cards: sections, tables, stats, widgets ---------- */ .fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-fo-tabs, .fi-in-tabs, .fi-wi-chart .fi-section { background: var(--md-surface-container-low) !important; border-radius: 16px !important; box-shadow: none !important; --tw-ring-shadow: 0 0 #0000 !important; border: 1px solid var(--md-outline-variant); } .fi-section-header { border-color: var(--md-outline-variant) !important; } .fi-ta-header-ctn, .fi-ta-content, .fi-ta-footer { border-color: var(--md-outline-variant) !important; } .fi-ta-row:hover { background: color-mix(in srgb, var(--md-on-surface) 6%, transparent) !important; } .fi-ta-header-cell { color: var(--md-on-surface-variant) !important; } /* ---------- Buttons: M3 pills ---------- */ .fi-btn, .fi-ac-btn-action, .fi-link { border-radius: 9999px !important; } .fi-btn { min-height: 40px; padding-inline: 20px !important; font-weight: 500; letter-spacing: .1px; } .fi-btn.fi-color-gray { box-shadow: inset 0 0 0 1px var(--md-outline) !important; background: transparent !important; color: var(--md-primary) !important; } .fi-icon-btn { border-radius: 9999px !important; } /* Small buttons keep Filament's tighter padding, and header action rows wrap at every width — the pill padding above pushed contact-page actions off-screen. */ .fi-btn.fi-size-xs, .fi-btn.fi-size-sm { padding-inline: 12px !important; } .fi-header > .shrink-0 { flex-shrink: 1 !important; min-width: 0; } .fi-header .fi-ac { flex-wrap: wrap; justify-content: flex-end; } .km3-actions { display: flex; flex-wrap: wrap; gap: 8px; } /* ---------- Fields: outlined, 4px corners ---------- */ .fi-input-wrp { border-radius: 4px !important; background: transparent !important; --tw-ring-color: var(--md-outline) !important; } .fi-input-wrp:focus-within { --tw-ring-color: var(--md-primary) !important; --tw-ring-offset-width: 0px; } .fi-fo-field-wrp-label span { color: var(--md-on-surface-variant); } /* ---------- Chips / badges / tabs ---------- */ .fi-badge { border-radius: 9999px !important; } .fi-tabs { background: var(--md-surface-container) !important; border-radius: 9999px !important; box-shadow: none !important; --tw-ring-shadow: 0 0 #0000 !important; } .fi-tabs-item { border-radius: 9999px !important; } .fi-tabs-item.fi-active { background: var(--md-secondary-container) !important; } .fi-tabs-item.fi-active .fi-tabs-item-label, .fi-tabs-item.fi-active .fi-tabs-item-icon { color: var(--md-on-secondary-container) !important; } /* ---------- Dialogs, menus, auth card ---------- */ .fi-modal-window { border-radius: 28px !important; background: var(--md-surface-container-high) !important; } .fi-dropdown-panel { border-radius: 4px !important; background: var(--md-surface-container) !important; box-shadow: var(--md-elev-1) !important; } .fi-simple-main { border-radius: 28px !important; background: var(--md-surface-container-low) !important; box-shadow: none !important; --tw-ring-shadow: 0 0 #0000 !important; } .fi-no-notification { border-radius: 12px !important; background: var(--md-inverse-surface) !important; } .fi-no-notification .fi-no-notification-title, .fi-no-notification .fi-no-notification-body { color: var(--md-inverse-on-surface) !important; } /* ---------- Type ---------- */ .fi-header-heading { font-weight: 400 !important; letter-spacing: 0 !important; } /* ---------- Dashboard quick actions (M3 elevated action cards) ---------- */ .km3-actions { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 768px) { .km3-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .km3-action { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 16px; background: var(--md-surface-container-low); border: 1px solid var(--md-outline-variant); color: var(--md-on-surface); text-decoration: none; transition: box-shadow 200ms cubic-bezier(.2,0,0,1), background-color 200ms cubic-bezier(.2,0,0,1); } .km3-action::before { content: ""; position: absolute; inset: 0; background: var(--md-on-surface); opacity: 0; z-index: -1; transition: opacity 200ms cubic-bezier(.2,0,0,1); } .km3-action:hover { box-shadow: var(--md-elev-1); } .km3-action:hover::before { opacity: .06; } .km3-action:focus-visible { outline: 3px solid var(--md-primary); outline-offset: 2px; } .km3-action__icon { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 16px; background: var(--md-secondary-container); } .km3-action__icon svg { width: 24px; height: 24px; } .km3-action__title { display: block; font: 500 16px/24px var(--md-font); letter-spacing: .15px; color: var(--md-on-surface); } .km3-action__desc { display: block; margin-top: 2px; font: 400 14px/20px var(--md-font); letter-spacing: .25px; color: var(--md-on-surface-variant); } /* The pinned row-action column (admin-mobile.css) sits on the table's M3 surface instead of plain white / zinc. */ .fi-ta-table tr:has(.fi-ta-actions) > td:last-child, .fi-ta-table tr:has(.fi-ta-actions) > th:last-child { background-color: var(--md-surface-container-low) !important; }