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! It helps others discover this tool and motivates us to keep improving it. Thank you
Star

Ruby Theme

Vibrant gradient notifications with shine effect

Data has been saved successfully!
Welcome back!

Configuration

Setting as Default in Laravel 
// config/flasher.php

return [
    'default' => 'theme.ruby',

    'themes' => [
        'ruby' => [
            'scripts' => [
                '/vendor/flasher/themes/theme.ruby.min.js',
            ],
            'styles' => [
                '/vendor/flasher/themes/theme.ruby.min.css',
            ],
        ],
    ],
];

Theme Usage

When theme.ruby is set as your default theme, you can call methods directly. 
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

CSS Variables

: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 */
}

HTML Structure

<div class="fl-ruby fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
    <div class="fl-shine"></div>
    <div class="fl-content">
        <div class="fl-icon-circle">
            <div class="fl-icon"></div>
        </div>
        <div class="fl-text">
            <div class="fl-message">Message text</div>
        </div>
        <button class="fl-close" aria-label="Close [type] message">×</button>
    </div>
    <div class="fl-progress-bar">
        <div class="fl-progress"></div>
    </div>
</div>

Browser Support

Chrome
Firefox
Safari
Edge
Mobile
Dark