Ruby Theme
Vibrant gradient notifications with shine effect
Configuration
// config/flasher.php
return [
'default' => 'theme.ruby',
'themes' => [
'ruby' => [
'scripts' => [
'/vendor/flasher/flasher.min.css',
'/vendor/flasher/themes/theme.ruby.min.js',
],
'styles' => [
'/vendor/flasher/themes/theme.ruby.min.css',
],
],
],
];
Usage
flash()->success('Your changes have been saved!');
flash()->use('theme.ruby')->success('This uses Ruby Theme');
Key Features
Visual Design
-
Rich diagonal gradient backgrounds in vibrant colors
-
Distinctive shine animation mimicking light reflecting off gemstone surfaces
-
Circular translucent icon containers for clear notification type identification
-
Smooth entrance animation with scale and fade effects
-
Sophisticated shadow treatment for depth and premium feel
Accessibility
-
Type-specific ARIA roles for screen readers
-
Appropriate aria-live regions based on message importance
-
Reduced motion option disables shine animation and entrance effects
-
High contrast white text on colored backgrounds
-
Fully keyboard accessible controls with visual feedback
-
Complete RTL language support with directional adjustments
Customization
:root {
/* Base appearance */
--ruby-text: #ffffff; /* Text color */
--ruby-border-radius: 1.125rem; /* Corner roundness */
--ruby-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.2); /* Shadow depth */
/* Type-specific gradients */
--ruby-success-gradient: linear-gradient(135deg, #059669 0%, #10b981 100%); /* Success */
--ruby-info-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); /* Info */
--ruby-warning-gradient: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); /* Warning */
--ruby-error-gradient: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%); /* Error */
}
Solidarity with Palestine.