Skip to content

Instantly share code, notes, and snippets.

@awcodes
Created July 25, 2023 01:47
Show Gist options
  • Save awcodes/00d574dc66e4de0f473c51b02bd585c1 to your computer and use it in GitHub Desktop.
Save awcodes/00d574dc66e4de0f473c51b02bd585c1 to your computer and use it in GitHub Desktop.
Filament v3 Custom Login
.fi-simple-main-ctn::before {
content: '';
position: absolute;
inset: 0;
opacity: 0.90;
background-image: radial-gradient(
circle at top,
theme('colors.primary.300'),
theme('colors.transparent'),
theme('colors.transparent') 100%
);
}
.dark .fi-simple-main-ctn::before {
background-image: radial-gradient(
circle at top,
theme('colors.primary.800'),
theme('colors.gray.950'),
theme('colors.gray.950') 100%
);
}
.fi-simple-layout::before {
content: '';
position: absolute;
inset: 0;
background-image: url('https://images.unsplash.com/photo-1605362001336-f91645086f32?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80');
background-size: cover;
background-position-y: bottom;
filter: grayscale(100) invert(100) blur(10px);
}
.dark .fi-simple-layout::before {
filter: grayscale(100);
}
.fi-simple-main {
@apply relative dark:!bg-gray-950/60 backdrop-blur-2xl;
}
.fi-simple-main::before {
@apply absolute inset-x-0 mx-auto h-px w-2/3 bg-gradient-to-r from-transparent via-primary-500 to-transparent dark:from-transparent dark:via-primary-500 dark:to-transparent;
content: '';
z-index: 1;
top: -1px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment