Palestinian Flag Solidarity with Palestine. We seek justice and peace, and strongly oppose all forms of injustice and genocide.
PHPFlasher
Enjoying PHPFlasher? Show your support with a star on GitHub! Thank you
Star

Ruby Theme

Vibrant gradient notifications with shine effect

Data has been saved successfully!
Welcome back!

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

When theme.ruby is set as your default theme: 
flash()->success('Your changes have been saved!');
For specific notifications: 
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 */
}