Solidarity with Palestine.Sapphire Theme
Modern, glassmorphic notification system
Configuration
// config/flasher.php
return [
'default' => 'theme.sapphire',
'themes' => [
'sapphire' => [
'scripts' => [
'/vendor/flasher/themes/theme.sapphire.min.js',
],
'styles' => [
'/vendor/flasher/themes/theme.sapphire.min.css',
],
],
],
];Usage
flash()->success('Your changes have been saved!');flash()->use('theme.sapphire')->success('This uses Sapphire Theme');Key Features
Visual Design
-
Frosted glass effect with semi-transparent backgrounds and backdrop blur
-
Ultra-minimal interface without close buttons or icons
-
Distinctive bounce animation for a more dynamic entrance
-
Type-specific colored backgrounds with consistent visual language
-
Progress bar showing time until auto-dismissal
Accessibility
-
Type-specific ARIA roles for screen readers
-
Appropriate aria-live regions based on message importance
-
Reduced motion option for users with motion sensitivity
-
High contrast between text and all background colors
-
Complete RTL language support
-
Auto-dismissal with visual progress indicator
Customization
:root {
/* Base appearance */
--sapphire-bg-base: rgba(30, 30, 30, 0.9); /* Base background color */
--sapphire-text: #f0f0f0; /* Text color */
--sapphire-shadow: rgba(0, 0, 0, 0.15); /* Shadow color */
--sapphire-border-radius: 12px; /* Corner roundness */
--sapphire-blur: 12px; /* Backdrop blur amount */
/* Progress bar colors */
--sapphire-progress-bg: rgba(255, 255, 255, 0.2); /* Progress background */
--sapphire-progress-fill: rgba(255, 255, 255, 0.9); /* Progress fill */
/* Notification type colors */
--sapphire-success: rgba(16, 185, 129, 0.95); /* Success color */
--sapphire-error: rgba(239, 68, 68, 0.95); /* Error color */
--sapphire-warning: rgba(245, 158, 11, 0.95); /* Warning color */
--sapphire-info: rgba(59, 130, 246, 0.95); /* Info color */
}