/* ========================================================================= Filament-style login theme ========================================================================= Self-contained stylesheet for the admin login screen. It intentionally does NOT depend on Bootstrap so the page can be styled without fighting framework specificity. Colour palettes mirror Filament's defaults: - gray -> Tailwind "zinc" - primary -> Tailwind "amber" Theming works through custom properties re-declared under [data-theme="dark"] / [data-theme="light"] on . Every rule below consumes the semantic tokens (--surface, --text, ...) only, so a new theme means adding one block instead of editing the whole file. ========================================================================= */ /* ------------------------------------------------------------------------- 1. Palette (theme-independent raw values) ------------------------------------------------------------------------- */ :root { --gray-50: #fafafa; --gray-100: #f4f4f5; --gray-200: #e4e4e7; --gray-300: #d4d4d8; --gray-400: #a1a1aa; --gray-500: #71717a; --gray-600: #52525b; --gray-700: #3f3f46; --gray-800: #27272a; --gray-900: #18181b; --gray-950: #09090b; --primary-400: #fbbf24; --primary-500: #f59e0b; --primary-600: #d97706; --primary-700: #b45309; --danger-400: #f87171; --danger-500: #ef4444; --danger-600: #dc2626; --success-400: #4ade80; --success-600: #16a34a; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-full: 9999px; --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); } /* ------------------------------------------------------------------------- 2. Semantic tokens per theme ------------------------------------------------------------------------- */ [data-theme='dark'] { color-scheme: dark; --bg: var(--gray-950); --bg-accent: rgba(245, 158, 11, 0.06); --surface: var(--gray-900); --surface-muted: rgba(255, 255, 255, 0.05); --border: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.2); --text: #ffffff; --text-muted: var(--gray-400); --text-subtle: var(--gray-500); --field-bg: rgba(255, 255, 255, 0.05); --field-placeholder: var(--gray-500); --accent: var(--primary-500); --accent-hover: var(--primary-400); --accent-ring: var(--primary-500); --on-accent: var(--gray-950); --danger-text: var(--danger-400); --danger-bg: rgba(239, 68, 68, 0.1); --danger-border: rgba(248, 113, 113, 0.3); --success-text: var(--success-400); --success-bg: rgba(34, 197, 94, 0.1); --success-border: rgba(74, 222, 128, 0.3); --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.5); } [data-theme='light'] { color-scheme: light; --bg: var(--gray-50); --bg-accent: rgba(245, 158, 11, 0.08); --surface: #ffffff; --surface-muted: var(--gray-50); --border: rgba(9, 9, 11, 0.05); --border-strong: rgba(9, 9, 11, 0.1); --text: var(--gray-950); --text-muted: var(--gray-500); --text-subtle: var(--gray-400); --field-bg: #ffffff; --field-placeholder: var(--gray-400); --accent: var(--primary-600); --accent-hover: var(--primary-500); --accent-ring: var(--primary-600); --on-accent: #ffffff; --danger-text: var(--danger-600); --danger-bg: rgba(239, 68, 68, 0.08); --danger-border: rgba(220, 38, 38, 0.2); --success-text: var(--success-600); --success-bg: rgba(34, 197, 94, 0.08); --success-border: rgba(22, 163, 74, 0.2); --shadow-card: 0 1px 3px 0 rgba(9, 9, 11, 0.08), 0 1px 2px -1px rgba(9, 9, 11, 0.06); } /* ------------------------------------------------------------------------- 3. Base ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.5; color: var(--text); background-color: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--transition), color var(--transition); } /* Subtle radial accent glow behind the content, as seen on Filament panels. */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(60rem 40rem at 15% -10%, var(--bg-accent), transparent 60%), radial-gradient(50rem 35rem at 100% 100%, var(--bg-accent), transparent 55%); } img { max-width: 100%; height: auto; } a { color: var(--accent); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--accent-hover); text-decoration: underline; } /* Consistent, visible keyboard focus for every interactive element. */ :focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; } /* ------------------------------------------------------------------------- 4. Layout ------------------------------------------------------------------------- */ .fi-page { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; padding: 1.5rem 1rem 2.5rem; } .fi-topbar { display: flex; justify-content: flex-end; margin-bottom: 1.5rem; } .fi-main { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; width: 100%; } .fi-grid { display: grid; gap: 2rem; width: 100%; max-width: 28rem; margin-inline: auto; } /* Two-column split only when the notices panel is rendered. */ .fi-grid--split { max-width: 64rem; } @media (min-width: 64rem) { .fi-grid--split { grid-template-columns: 26rem minmax(0, 1fr); align-items: start; gap: 3rem; } } /* ------------------------------------------------------------------------- 5. Brand ------------------------------------------------------------------------- */ .fi-brand { display: flex; justify-content: center; margin-bottom: 1.5rem; } .fi-brand__logo { max-height: 3rem; width: auto; } /* ------------------------------------------------------------------------- 6. Card ------------------------------------------------------------------------- */ .fi-card { background-color: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card), 0 0 0 1px var(--border); padding: 2rem; transition: background-color var(--transition), box-shadow var(--transition); } .fi-card__header { margin-bottom: 1.5rem; } .fi-card__title { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; color: var(--text); } .fi-card__subtitle { margin: 0.375rem 0 0; font-size: 0.875rem; color: var(--text-muted); } /* ------------------------------------------------------------------------- 7. Alerts ------------------------------------------------------------------------- */ .fi-alert { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 1rem; margin-bottom: 1.25rem; font-size: 0.875rem; border-radius: var(--radius-md); } .fi-alert__icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.0625rem; } .fi-alert--danger { color: var(--danger-text); background-color: var(--danger-bg); box-shadow: inset 0 0 0 1px var(--danger-border); } .fi-alert--success { color: var(--success-text); background-color: var(--success-bg); box-shadow: inset 0 0 0 1px var(--success-border); } /* ------------------------------------------------------------------------- 8. Form ------------------------------------------------------------------------- */ .fi-form { display: flex; flex-direction: column; gap: 1.25rem; } .fi-field__label { display: block; margin-bottom: 0.375rem; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; color: var(--text); } .fi-field__required { color: var(--danger-text); } .fi-input-wrapper { position: relative; display: flex; align-items: center; } .fi-input-wrapper__icon { position: absolute; inset-inline-start: 0.75rem; width: 1.125rem; height: 1.125rem; color: var(--text-subtle); pointer-events: none; } .fi-input { width: 100%; /* Logical properties keep the icon gutter on the correct side under RTL. */ padding-block: 0.5rem; padding-inline: 2.5rem 0.75rem; font-family: inherit; font-size: 0.875rem; line-height: 1.5rem; color: var(--text); background-color: var(--field-bg); border: 0; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border-strong); transition: box-shadow var(--transition), background-color var(--transition); appearance: none; } .fi-input::placeholder { color: var(--field-placeholder); } .fi-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent-ring); } /* Password field leaves room for the reveal toggle on the trailing edge. */ .fi-input--password { padding-inline-end: 2.75rem; } .fi-input--plain { padding-inline-start: 0.75rem; } .fi-input[aria-invalid='true'] { box-shadow: inset 0 0 0 2px var(--danger-text); } .fi-field__error { display: block; margin-top: 0.375rem; font-size: 0.75rem; color: var(--danger-text); } .fi-field__error:empty { display: none; } /* Icon-only button used next to a field (captcha refresh, password reveal). */ .fi-input-action { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; color: var(--text-subtle); background: none; border: 0; border-radius: var(--radius-md); cursor: pointer; transition: color var(--transition), background-color var(--transition); } /* Overlays the trailing edge of its field instead of sitting beside it. */ .fi-input-action--floating { position: absolute; inset-inline-end: 0.5rem; } .fi-input-action:hover { color: var(--text); background-color: var(--surface-muted); } .fi-input-action svg { width: 1.125rem; height: 1.125rem; } /* ------------------------------------------------------------------------- 9. Captcha ------------------------------------------------------------------------- */ .fi-captcha { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .fi-captcha__image { display: inline-flex; align-items: center; padding: 0.25rem; background-color: #ffffff; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border-strong); } .fi-captcha__image img { display: block; border-radius: calc(var(--radius-md) - 0.25rem); } .fi-captcha__input { flex: 1 1 8rem; min-width: 8rem; } /* ------------------------------------------------------------------------- 10. Buttons ------------------------------------------------------------------------- */ .fi-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.625rem 1rem; font-family: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; color: var(--on-accent); background-color: var(--accent); border: 0; border-radius: var(--radius-md); cursor: pointer; transition: background-color var(--transition), opacity var(--transition); } .fi-btn:hover { background-color: var(--accent-hover); } .fi-btn:active { opacity: 0.85; } .fi-btn svg { width: 1.125rem; height: 1.125rem; } .fi-card__footer { margin-top: 1.5rem; font-size: 0.875rem; text-align: center; color: var(--text-muted); } /* Circular icon button used by the theme switcher. */ .fi-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; color: var(--text-muted); background-color: var(--surface); border: 0; border-radius: var(--radius-full); box-shadow: 0 0 0 1px var(--border); cursor: pointer; transition: color var(--transition), background-color var(--transition); } .fi-icon-btn:hover { color: var(--text); } .fi-icon-btn svg { width: 1.25rem; height: 1.25rem; } /* Only one of the two icons is shown, depending on the active theme. */ [data-theme='dark'] .fi-icon-btn__moon, [data-theme='light'] .fi-icon-btn__sun { display: none; } /* ------------------------------------------------------------------------- 11. Notices panel ------------------------------------------------------------------------- */ .fi-notices__title { margin: 0 0 1.25rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; color: var(--text); } .fi-notices__list { display: flex; flex-direction: column; gap: 0.75rem; max-height: 26rem; padding-inline-end: 0.5rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .fi-notices__list::-webkit-scrollbar { width: 0.375rem; } .fi-notices__list::-webkit-scrollbar-track { background: transparent; } .fi-notices__list::-webkit-scrollbar-thumb { background-color: var(--border-strong); border-radius: var(--radius-full); } .fi-notice { padding: 1rem 1.25rem; background-color: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--border); transition: background-color var(--transition); } .fi-notice__title { margin: 0 0 0.375rem; font-size: 0.9375rem; font-weight: 600; color: var(--text); } .fi-notice__body { margin: 0; font-size: 0.875rem; color: var(--text-muted); } /* ------------------------------------------------------------------------- 12. Utilities ------------------------------------------------------------------------- */ .fi-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }