Solidarity with Palestine.Emerald Theme
Elegant glass-like notifications with bounce effect
Configuration
// config/flasher.php
return [
'default' => 'theme.emerald',
'themes' => [
'emerald' => [
'scripts' => [
'/vendor/flasher/flasher.min.css',
'/vendor/flasher/themes/theme.emerald.min.js',
],
'styles' => [
'/vendor/flasher/themes/theme.emerald.min.css',
],
],
],
];Usage
flash()->success('Your changes have been saved!');flash()->use('theme.emerald')->success('This uses Emerald Theme');Key Features
Visual Design
-
Distinctive bounce animation for eye-catching entrance
-
Glass-like translucent background with blur effect
-
Minimalist design focusing on content clarity
-
Colored text indicators instead of backgrounds for elegance
Accessibility
-
Type-specific ARIA roles for screen readers
-
Appropriate aria-live regions based on message importance
-
Reduced motion option for users with motion sensitivity
-
Relative text sizing that respects user preferences
-
Fully keyboard accessible controls with descriptive labels
Customization
:root {
/* Base colors */
--emerald-bg-light: rgba(255, 255, 255, 0.9); /* Light background */
--emerald-bg-dark: rgba(30, 30, 30, 0.9); /* Dark background */
--emerald-text-light: #333333; /* Light mode text */
--emerald-text-dark: rgba(255, 255, 255, 0.9); /* Dark mode text */
--emerald-shadow: rgba(0, 0, 0, 0.1); /* Shadow color */
--emerald-blur: 8px; /* Blur amount */
/* Type colors */
--emerald-success: #16a085; /* Success color */
--emerald-error: #e74c3c; /* Error color */
--emerald-warning: #f39c12; /* Warning color */
--emerald-info: #3498db; /* Info color */
}