leviathonbeast/php-flasher
1
0
Fork 0
mirror of https://github.com/php-flasher/php-flasher.git synced 2026-03-31 15:07:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

update the themes in the docs

Browse Source
This commit is contained in:
Younes ENNAJI
2025-03-11 05:07:01 +00:00
parent e1d7ae94ee
commit ea47e9043b
73 changed files with 1858 additions and 4092 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demo/symfony/config/packages/flasher.yaml
+92 -2
View File
@@ -19,7 +19,7 @@ flasher:
# Global options
options:
# timeout in milliseconds
timeout: 10000
timeout: 600000
position: 'top-right'
# Map Symfony session keys to PHPFlasher notification types
@@ -35,8 +35,98 @@ flasher:
# limit: 5
plugins:
theme.amazon:
scripts: ['/vendor/flasher/themes/amazon/amazon.min.js']
styles:
- '/vendor/flasher/flasher.min.css'
- '/vendor/flasher/themes/amazon/amazon.min.css'
theme.amber:
scripts: ['/vendor/flasher/themes/amber/amber.min.js']
styles:
- '/vendor/flasher/flasher.min.css'
- '/vendor/flasher/themes/amber/amber.min.css'
theme.jade:
scripts: ['/vendor/flasher/themes/jade/jade.min.js']
styles:
# - '/vendor/flasher/flasher.min.css'
- '/vendor/flasher/flasher.min.css'
- '/vendor/flasher/themes/jade/jade.min.css'
theme.crystal:
scripts: ['/vendor/flasher/themes/crystal/crystal.min.js']
styles:
- '/vendor/flasher/flasher.min.css'
- '/vendor/flasher/themes/crystal/crystal.min.css'
theme.emerald:
scripts: ['/vendor/flasher/themes/emerald/emerald.min.js']
styles:
- '/vendor/flasher/flasher.min.css'
- '/vendor/flasher/themes/emerald/emerald.min.css'
theme.sapphire:
scripts: ['/vendor/flasher/themes/sapphire/sapphire.min.js']
styles:
- '/vendor/flasher/flasher.min.css'
- '/vendor/flasher/themes/sapphire/sapphire.min.css'
theme.ruby:
scripts: ['/vendor/flasher/themes/ruby/ruby.min.js']
styles:
- '/vendor/flasher/flasher.min.css'
- '/vendor/flasher/themes/ruby/ruby.min.css'
theme.onyx:
scripts: ['/vendor/flasher/themes/onyx/onyx.min.js']
styles:
- '/vendor/flasher/flasher.min.css'
- '/vendor/flasher/themes/onyx/onyx.min.css'
theme.neon:
scripts: ['/vendor/flasher/themes/neon/neon.min.js']
styles:
- '/vendor/flasher/flasher.min.css'
- '/vendor/flasher/themes/neon/neon.min.css'
theme.aurora:
scripts: ['/vendor/flasher/themes/aurora/aurora.min.js']
styles:
- '/vendor/flasher/flasher.min.css'
- '/vendor/flasher/themes/aurora/aurora.min.css'
theme.minimal:
scripts: ['/vendor/flasher/themes/minimal/minimal.min.js']
styles:
- '/vendor/flasher/flasher.min.css'
- '/vendor/flasher/themes/minimal/minimal.min.css'
theme.material:
scripts: ['/vendor/flasher/themes/material/material.min.js']
styles:
- '/vendor/flasher/flasher.min.css'
- '/vendor/flasher/themes/material/material.min.css'
theme.google:
scripts: ['/vendor/flasher/themes/google/google.min.js']
styles:
- '/vendor/flasher/flasher.min.css'
- '/vendor/flasher/themes/google/google.min.css'
theme.ios:
scripts: ['/vendor/flasher/themes/ios/ios.min.js']
styles:
- '/vendor/flasher/flasher.min.css'
- '/vendor/flasher/themes/ios/ios.min.css'
theme.slack:
scripts: ['/vendor/flasher/themes/slack/slack.min.js']
styles:
- '/vendor/flasher/flasher.min.css'
- '/vendor/flasher/themes/slack/slack.min.css'
theme.facebook:
scripts: ['/vendor/flasher/themes/facebook/facebook.min.js']
styles:
- '/vendor/flasher/flasher.min.css'
- '/vendor/flasher/themes/facebook/facebook.min.css'
demo/symfony/src/Controller/HomeController.php
+16 -16
View File
@@ -14,7 +14,7 @@ class HomeController extends AbstractController
public function index(): Response
{
$themes = [
'flasher',
// 'flasher',
// 'amber',
// 'sapphire',
// 'crystal',
@@ -23,7 +23,7 @@ class HomeController extends AbstractController
// 'ruby',
// 'onyx',
'jade',
// 'jade',
// 'aurora',
// 'neon',
// 'minimal',
@@ -34,33 +34,33 @@ class HomeController extends AbstractController
// 'ios',
// 'slack',
// 'facebook',
// 'amazon',
'amazon',
];
$positions = [
'top-left',
// 'top-left',
'top-right',
'bottom-left',
'bottom-right',
'top-center',
'bottom-center',
'center-left',
'center-right',
'center-center',
// 'bottom-left',
// 'bottom-right',
// 'top-center',
// 'bottom-center',
// 'center-left',
// 'center-right',
// 'center-center',
];
$messages = [
'success' => 'Your profile has been updated successfully',
'info' => 'New: You can now export your reports in PDF format',
'warning' => 'Your premium subscription will expire in 3 days',
'error' => 'Payment failed: Your card has been declined',
'info' => 'Welcome back!',
'warning' => 'Are you sure you want to proceed?',
'error' => 'Oops! Something went wrong!',
'success' => 'Data has been saved successfully!',
];
foreach ($themes as $index => $theme) {
foreach ($messages as $type => $message) {
$position = $positions[$index % \count($positions)];
$message = \sprintf('%s: %s', $theme, $message);
// $message = \sprintf('%s: %s', $theme, $message);
flash()
->use("theme.$theme")
docs/_data/manifest.json
+2 -2
View File
@@ -1,6 +1,6 @@
{
"dist/main.css": "/dist/main.047f18a1.css",
"dist/main.js": "/dist/main.855339d4.js",
"dist/main.css": "/dist/main.f204747f.css",
"dist/main.js": "/dist/main.c89a204f.js",
"dist/455.3a7b4474.css": "/dist/455.3a7b4474.css",
"dist/455.17bc016b.js": "/dist/455.17bc016b.js",
"dist/411.29cd993e.css": "/dist/411.29cd993e.css",
docs/_includes/theme-notification.html
-13
View File
@@ -1,13 +0,0 @@
<div class="{{ include.theme | default: 'fl-flasher' }} {{ include.theme | default: 'fl' }}-{{ include.type }} {{ include.theme | default: 'fl' }}-container {{ include.theme | default: 'fl' }}-show hover:-translate-y-0.5 transition-all duration-200" role="{{ include.role }}" aria-live="{{ include.aria-live }}" aria-atomic="true">
<div class="{{ include.theme | default: 'fl' }}-content">
<div class="{{ include.theme | default: 'fl' }}-icon"></div>
<div>
<strong class="{{ include.theme | default: 'fl' }}-title">{{ include.title }}</strong>
<span class="{{ include.theme | default: 'fl' }}-message">{{ include.message }}</span>
</div>
<button class="{{ include.theme | default: 'fl' }}-close" aria-label="Close {{ include.type }} message">×</button>
</div>
<span class="{{ include.theme | default: 'fl' }}-progress-bar">
<span class="{{ include.theme | default: 'fl' }}-progress" style="width: {{ include.progress }}%;"></span>
</span>
</div>
docs/_includes/themes/amazon.html
+98
View File
@@ -0,0 +1,98 @@
<!-- Flasher Theme Notifications -->
<div class="p-3 grid grid-cols-1 md:grid-cols-2 gap-3">
<!-- Success -->
<div class="fl-amazon fl-success fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-amazon-alert">
<div class="fl-alert-content">
<div class="fl-icon-container">
<svg viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
</svg>
</div>
<div class="fl-text-content">
<div class="fl-alert-title">Success!</div>
<div class="fl-alert-message">Data has been saved successfully!</div>
</div>
</div>
<div class="fl-alert-actions">
<button class="fl-close" aria-label="Close notification">
<svg viewBox="0 0 24 24" width="16" height="16">
<path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- Error -->
<div class="fl-amazon fl-error fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-amazon-alert">
<div class="fl-alert-content">
<div class="fl-icon-container">
<svg viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
</svg>
</div>
<div class="fl-text-content">
<div class="fl-alert-title">Problem</div>
<div class="fl-alert-message">Oops! Something went wrong!</div>
</div>
</div>
<div class="fl-alert-actions">
<button class="fl-close" aria-label="Close notification">
<svg viewBox="0 0 24 24" width="16" height="16">
<path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- Warning -->
<div class="fl-amazon fl-warning fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-amazon-alert">
<div class="fl-alert-content">
<div class="fl-icon-container">
<svg viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path>
</svg>
</div>
<div class="fl-text-content">
<div class="fl-alert-title">Warning</div>
<div class="fl-alert-message">Are you sure you want to proceed?</div>
</div>
</div>
<div class="fl-alert-actions">
<button class="fl-close" aria-label="Close notification">
<svg viewBox="0 0 24 24" width="16" height="16">
<path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- Info -->
<div class="fl-amazon fl-info fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-amazon-alert">
<div class="fl-alert-content">
<div class="fl-icon-container">
<svg viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path>
</svg>
</div>
<div class="fl-text-content">
<div class="fl-alert-title">Information</div>
<div class="fl-alert-message">Welcome back!</div>
</div>
</div>
<div class="fl-alert-actions">
<button class="fl-close" aria-label="Close notification">
<svg viewBox="0 0 24 24" width="16" height="16">
<path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
docs/_includes/themes/amber.html
+58
View File
@@ -0,0 +1,58 @@
<!-- Flasher Theme Notifications -->
<div class="p-3 grid grid-cols-1 md:grid-cols-2 gap-3">
<!-- Success -->
<div class="fl-amber fl-success fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-content">
<div class="fl-icon"></div>
<div class="fl-text">
<div class="fl-message">Data has been saved successfully!</div>
</div>
<button class="fl-close" aria-label="Close success message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 40%;"></div>
</div>
</div>
<!-- Error -->
<div class="fl-amber fl-error fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-content">
<div class="fl-icon"></div>
<div class="fl-text">
<div class="fl-message">Oops! Something went wrong!</div>
</div>
<button class="fl-close" aria-label="Close error message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 30%;"></div>
</div>
</div>
<!-- Warning -->
<div class="fl-amber fl-warning fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-content">
<div class="fl-icon"></div>
<div class="fl-text">
<div class="fl-message">Are you sure you want to proceed?</div>
</div>
<button class="fl-close" aria-label="Close warning message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 20%;"></div>
</div>
</div>
<!-- Info -->
<div class="fl-amber fl-info fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-content">
<div class="fl-icon"></div>
<div class="fl-text">
<div class="fl-message">Welcome back!</div>
</div>
<button class="fl-close" aria-label="Close info message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 10%;"></div>
</div>
</div>
</div>
docs/_includes/themes/aurora.html
+46
View File
@@ -0,0 +1,46 @@
<!-- Flasher Theme Notifications -->
<div class="p-3 grid grid-cols-1 md:grid-cols-2 gap-3">
<!-- Success -->
<div class="fl-aurora fl-success fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Data has been saved successfully!</div>
<button class="fl-close" aria-label="Close success message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 40%;"></div>
</div>
</div>
<!-- Error -->
<div class="fl-aurora fl-error fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Oops! Something went wrong!</div>
<button class="fl-close" aria-label="Close error message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 30%;"></div>
</div>
</div>
<!-- Warning -->
<div class="fl-aurora fl-warning fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Are you sure you want to proceed?</div>
<button class="fl-close" aria-label="Close warning message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 20%;"></div>
</div>
</div>
<!-- Info -->
<div class="fl-aurora fl-info fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Welcome back!</div>
<button class="fl-close" aria-label="Close info message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 10%;"></div>
</div>
</div>
</div>
docs/_includes/themes/crystal.html
+54
View File
@@ -0,0 +1,54 @@
<!-- Flasher Theme Notifications -->
<div class="p-3 grid grid-cols-1 md:grid-cols-2 gap-3">
<!-- Success -->
<div class="fl-crystal fl-success fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-content">
<div class="fl-text">
<p class="fl-message">Data has been saved successfully!</p>
</div>
<button class="fl-close" aria-label="Close success message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 40%;"></div>
</div>
</div>
<!-- Error -->
<div class="fl-crystal fl-error fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-content">
<div class="fl-text">
<p class="fl-message">Oops! Something went wrong!</p>
</div>
<button class="fl-close" aria-label="Close error message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 30%;"></div>
</div>
</div>
<!-- Warning -->
<div class="fl-crystal fl-warning fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-content">
<div class="fl-text">
<p class="fl-message">Are you sure you want to proceed?</p>
</div>
<button class="fl-close" aria-label="Close warning message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 20%;"></div>
</div>
</div>
<!-- Info -->
<div class="fl-crystal fl-info fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-content">
<div class="fl-text">
<p class="fl-message">Welcome back!</p>
</div>
<button class="fl-close" aria-label="Close info message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 10%;"></div>
</div>
</div>
</div>
docs/_includes/themes/emerald.html
+34
View File
@@ -0,0 +1,34 @@
<!-- Flasher Theme Notifications -->
<div class="p-3 grid grid-cols-1 md:grid-cols-2 gap-3">
<!-- Success -->
<div class="fl-emerald fl-success fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Data has been saved successfully!</div>
<button class="fl-close" aria-label="Close success message">×</button>
</div>
</div>
<!-- Error -->
<div class="fl-emerald fl-error fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Oops! Something went wrong!</div>
<button class="fl-close" aria-label="Close error message">×</button>
</div>
</div>
<!-- Warning -->
<div class="fl-emerald fl-warning fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Are you sure you want to proceed?</div>
<button class="fl-close" aria-label="Close warning message">×</button>
</div>
</div>
<!-- Info -->
<div class="fl-emerald fl-info fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Welcome back!</div>
<button class="fl-close" aria-label="Close info message">×</button>
</div>
</div>
</div>
docs/_includes/themes/facebook.html
+122
View File
@@ -0,0 +1,122 @@
<!-- Flasher Theme Notifications -->
<div class="p-3 grid grid-cols-1 md:grid-cols-2 gap-3">
<!-- Success -->
<div class="fl-facebook fl-success fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-fb-notification">
<div class="fl-icon-container">
<div class="fl-fb-icon fl-fb-icon-success">
<svg viewBox="0 0 24 24" width="16" height="16">
<path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z"></path>
</svg>
</div>
</div>
<div class="fl-content">
<div class="fl-message">
Data has been saved successfully!
</div>
<div class="fl-meta">
<span class="fl-time">06:49</span>
</div>
</div>
<div class="fl-actions">
<button class="fl-button fl-close" aria-label="Close success message">
<div class="fl-button-icon">
<svg viewBox="0 0 24 24" width="20" height="20">
<path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path>
</svg>
</div>
</button>
</div>
</div>
</div>
<!-- Error -->
<div class="fl-facebook fl-error fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-fb-notification">
<div class="fl-icon-container">
<div class="fl-fb-icon fl-fb-icon-error">
<svg viewBox="0 0 24 24" width="16" height="16">
<path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.5c-.69 0-1.25.56-1.25 1.25S11.31 13 12 13s1.25-.56 1.25-1.25S12.69 10.5 12 10.5zM12 9c.552 0 1-.448 1-1V7c0-.552-.448-1-1-1s-1 .448-1 1v1c0 .552.448 1 1 1z"></path>
</svg>
</div>
</div>
<div class="fl-content">
<div class="fl-message">
Oops! Something went wrong!
</div>
<div class="fl-meta">
<span class="fl-time">06:49</span>
</div>
</div>
<div class="fl-actions">
<button class="fl-button fl-close" aria-label="Close error message">
<div class="fl-button-icon">
<svg viewBox="0 0 24 24" width="20" height="20">
<path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path>
</svg>
</div>
</button>
</div>
</div>
</div>
<!-- Warning -->
<div class="fl-facebook fl-warning fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-fb-notification">
<div class="fl-icon-container">
<div class="fl-fb-icon fl-fb-icon-warning">
<svg viewBox="0 0 24 24" width="16" height="16">
<path fill="currentColor" d="M12.865 3.00017L22.3912 19.5002C22.6674 19.9785 22.5035 20.5901 22.0252 20.8662C21.8732 20.954 21.7008 21.0002 21.5252 21.0002H2.47266C1.92037 21.0002 1.47266 20.5525 1.47266 20.0002C1.47266 19.8246 1.51886 19.6522 1.60663 19.5002L11.1329 3.00017C11.409 2.52187 12.0206 2.358 12.4989 2.63414C12.651 2.72192 12.7772 2.84815 12.865 3.00017ZM11 16.0002V18.0002H13V16.0002H11ZM11 8.00017V14.0002H13V8.00017H11Z"></path>
</svg>
</div>
</div>
<div class="fl-content">
<div class="fl-message">
Are you sure you want to proceed?
</div>
<div class="fl-meta">
<span class="fl-time">06:49</span>
</div>
</div>
<div class="fl-actions">
<button class="fl-button fl-close" aria-label="Close warning message">
<div class="fl-button-icon">
<svg viewBox="0 0 24 24" width="20" height="20">
<path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path>
</svg>
</div>
</button>
</div>
</div>
</div>
<!-- Info -->
<div class="fl-facebook fl-info fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-fb-notification">
<div class="fl-icon-container">
<div class="fl-fb-icon fl-fb-icon-info">
<svg viewBox="0 0 24 24" width="16" height="16">
<path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 100-16 8 8 0 000 16zm-1-5h2v-2h-2v2zm0-4h2V7h-2v4z"></path>
</svg>
</div>
</div>
<div class="fl-content">
<div class="fl-message">
Welcome back!
</div>
<div class="fl-meta">
<span class="fl-time">06:49</span>
</div>
</div>
<div class="fl-actions">
<button class="fl-button fl-close" aria-label="Close info message">
<div class="fl-button-icon">
<svg viewBox="0 0 24 24" width="20" height="20">
<path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path>
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
docs/_includes/themes/flasher.html
+3 -3
View File
@@ -26,7 +26,7 @@
<button class="fl-close" aria-label="Close error message">×</button>
</div>
<span class="fl-progress-bar">
<span class="fl-progress" style="width: 25%;"></span>
<span class="fl-progress" style="width: 30%;"></span>
</span>
</div>
@@ -41,7 +41,7 @@
<button class="fl-close" aria-label="Close warning message">×</button>
</div>
<span class="fl-progress-bar">
<span class="fl-progress" style="width: 10%;"></span>
<span class="fl-progress" style="width: 20%;"></span>
</span>
</div>
@@ -56,7 +56,7 @@
<button class="fl-close" aria-label="Close info message">×</button>
</div>
<span class="fl-progress-bar">
<span class="fl-progress" style="width: 5%;"></span>
<span class="fl-progress" style="width: 10%;"></span>
</span>
</div>
</div>
docs/_includes/themes/google.html
+102
View File
@@ -0,0 +1,102 @@
<!-- Flasher Theme Notifications -->
<div class="p-3 grid grid-cols-1 md:grid-cols-2 gap-3">
<!-- Success -->
<div class="fl-google fl-success fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-md-card">
<div class="fl-content">
<div class="fl-icon-wrapper">
<svg class="fl-icon-svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
</svg>
</div>
<div class="fl-text-content">
<div class="fl-title">Success</div>
<div class="fl-message">Data has been saved successfully!</div>
</div>
</div>
<div class="fl-actions">
<button class="fl-action-button fl-close" aria-label="Close success message">
DISMISS
</button>
</div>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 40%;"></div>
</div>
</div>
<!-- Error -->
<div class="fl-google fl-error fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-md-card">
<div class="fl-content">
<div class="fl-icon-wrapper">
<svg class="fl-icon-svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"></path>
</svg>
</div>
<div class="fl-text-content">
<div class="fl-title">Error</div>
<div class="fl-message">Oops! Something went wrong!</div>
</div>
</div>
<div class="fl-actions">
<button class="fl-action-button fl-close" aria-label="Close error message">
DISMISS
</button>
</div>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 30%;"></div>
</div>
</div>
<!-- Warning -->
<div class="fl-google fl-warning fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-md-card">
<div class="fl-content">
<div class="fl-icon-wrapper">
<svg class="fl-icon-svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"></path>
</svg>
</div>
<div class="fl-text-content">
<div class="fl-title">Warning</div>
<div class="fl-message">Are you sure you want to proceed?</div>
</div>
</div>
<div class="fl-actions">
<button class="fl-action-button fl-close" aria-label="Close warning message">
DISMISS
</button>
</div>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 20%;"></div>
</div>
</div>
<!-- Info -->
<div class="fl-google fl-info fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-md-card">
<div class="fl-content">
<div class="fl-icon-wrapper">
<svg class="fl-icon-svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path>
</svg>
</div>
<div class="fl-text-content">
<div class="fl-title">Info</div>
<div class="fl-message">Welcome back!</div>
</div>
</div>
<div class="fl-actions">
<button class="fl-action-button fl-close" aria-label="Close info message">
DISMISS
</button>
</div>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 10%;"></div>
</div>
</div>
</div>
docs/_includes/themes/ios.html
+94
View File
@@ -0,0 +1,94 @@
<!-- Flasher Theme Notifications -->
<div class="p-3 grid grid-cols-1 md:grid-cols-2 gap-3">
<!-- Success -->
<div class="fl-ios fl-success fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-ios-notification">
<div class="fl-header">
<div class="fl-app-icon">
<svg class="fl-icon-svg" viewBox="0 0 24 24" width="20" height="20">
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
</svg>
</div>
<div class="fl-app-info">
<div class="fl-app-name">Success</div>
<div class="fl-time">4:32 AM</div>
</div>
</div>
<div class="fl-content">
<div class="fl-message">Data has been saved successfully!</div>
</div>
<button class="fl-close" aria-label="Close success message">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<!-- Error -->
<div class="fl-ios fl-error fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-ios-notification">
<div class="fl-header">
<div class="fl-app-icon">
<svg class="fl-icon-svg" viewBox="0 0 24 24" width="20" height="20">
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
</svg>
</div>
<div class="fl-app-info">
<div class="fl-app-name">Error</div>
<div class="fl-time">4:32 AM</div>
</div>
</div>
<div class="fl-content">
<div class="fl-message">Oops! Something went wrong!</div>
</div>
<button class="fl-close" aria-label="Close error message">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<!-- Warning -->
<div class="fl-ios fl-warning fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-ios-notification">
<div class="fl-header">
<div class="fl-app-icon">
<svg class="fl-icon-svg" viewBox="0 0 24 24" width="20" height="20">
<path fill="currentColor" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path>
</svg>
</div>
<div class="fl-app-info">
<div class="fl-app-name">Warning</div>
<div class="fl-time">4:32 AM</div>
</div>
</div>
<div class="fl-content">
<div class="fl-message">Are you sure you want to proceed?</div>
</div>
<button class="fl-close" aria-label="Close warning message">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<!-- Info -->
<div class="fl-ios fl-info fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-ios-notification">
<div class="fl-header">
<div class="fl-app-icon">
<svg class="fl-icon-svg" viewBox="0 0 24 24" width="20" height="20">
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path>
</svg>
</div>
<div class="fl-app-info">
<div class="fl-app-name">Info</div>
<div class="fl-time">4:32 AM</div>
</div>
</div>
<div class="fl-content">
<div class="fl-message">Welcome back!</div>
</div>
<button class="fl-close" aria-label="Close info message">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
docs/_includes/themes/jade.html
+46
View File
@@ -0,0 +1,46 @@
<!-- Flasher Theme Notifications -->
<div class="p-3 grid grid-cols-1 md:grid-cols-2 gap-3">
<!-- Success -->
<div class="fl-jade fl-success fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Data has been saved successfully!</div>
<button class="fl-close" aria-label="Close success message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 40%;"></div>
</div>
</div>
<!-- Error -->
<div class="fl-jade fl-error fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Oops! Something went wrong!</div>
<button class="fl-close" aria-label="Close error message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 30%;"></div>
</div>
</div>
<!-- Warning -->
<div class="fl-jade fl-warning fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Are you sure you want to proceed?</div>
<button class="fl-close" aria-label="Close warning message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 20%;"></div>
</div>
</div>
<!-- Info -->
<div class="fl-jade fl-info fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Welcome back!</div>
<button class="fl-close" aria-label="Close info message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 10%;"></div>
</div>
</div>
</div>
docs/_includes/themes/material.html
+78
View File
@@ -0,0 +1,78 @@
<!-- Flasher Theme Notifications -->
<div class="p-3 grid grid-cols-1 md:grid-cols-2 gap-3">
<!-- Success -->
<div class="fl-material fl-success fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-md-card">
<div class="fl-content">
<div class="fl-text-content">
<div class="fl-message">Data has been saved successfully!</div>
</div>
</div>
<div class="fl-actions">
<button class="fl-action-button fl-close" aria-label="Close success message">
DISMISS
</button>
</div>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 40%;"></div>
</div>
</div>
<!-- Error -->
<div class="fl-material fl-error fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-md-card">
<div class="fl-content">
<div class="fl-text-content">
<div class="fl-message">Oops! Something went wrong!</div>
</div>
</div>
<div class="fl-actions">
<button class="fl-action-button fl-close" aria-label="Close error message">
DISMISS
</button>
</div>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 30%;"></div>
</div>
</div>
<!-- Warning -->
<div class="fl-material fl-warning fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-md-card">
<div class="fl-content">
<div class="fl-text-content">
<div class="fl-message">Are you sure you want to proceed?</div>
</div>
</div>
<div class="fl-actions">
<button class="fl-action-button fl-close" aria-label="Close warning message">
DISMISS
</button>
</div>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 20%;"></div>
</div>
</div>
<!-- Info -->
<div class="fl-material fl-info fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-md-card">
<div class="fl-content">
<div class="fl-text-content">
<div class="fl-message">Welcome back!</div>
</div>
</div>
<div class="fl-actions">
<button class="fl-action-button fl-close" aria-label="Close info message">
DISMISS
</button>
</div>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 10%;"></div>
</div>
</div>
</div>
docs/_includes/themes/minimal.html
+46
View File
@@ -0,0 +1,46 @@
<!-- Flasher Theme Notifications -->
<div class="p-3 grid grid-cols-1 md:grid-cols-2 gap-3">
<!-- Success -->
<div class="fl-minimal fl-success fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Data has been saved successfully!</div>
<button class="fl-close" aria-label="Close success message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 40%;"></div>
</div>
</div>
<!-- Error -->
<div class="fl-minimal fl-error fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Oops! Something went wrong!</div>
<button class="fl-close" aria-label="Close error message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 30%;"></div>
</div>
</div>
<!-- Warning -->
<div class="fl-minimal fl-warning fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Are you sure you want to proceed?</div>
<button class="fl-close" aria-label="Close warning message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 20%;"></div>
</div>
</div>
<!-- Info -->
<div class="fl-minimal fl-info fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Welcome back!</div>
<button class="fl-close" aria-label="Close info message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 10%;"></div>
</div>
</div>
</div>
docs/_includes/themes/neon.html
+46
View File
@@ -0,0 +1,46 @@
<!-- Flasher Theme Notifications -->
<div class="p-3 grid grid-cols-1 md:grid-cols-2 gap-3">
<!-- Success -->
<div class="fl-neon fl-success fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Data has been saved successfully!</div>
<button class="fl-close" aria-label="Close success message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 40%;"></div>
</div>
</div>
<!-- Error -->
<div class="fl-neon fl-error fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Oops! Something went wrong!</div>
<button class="fl-close" aria-label="Close error message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 30%;"></div>
</div>
</div>
<!-- Warning -->
<div class="fl-neon fl-warning fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Are you sure you want to proceed?</div>
<button class="fl-close" aria-label="Close warning message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 20%;"></div>
</div>
</div>
<!-- Info -->
<div class="fl-neon fl-info fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Welcome back!</div>
<button class="fl-close" aria-label="Close info message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 10%;"></div>
</div>
</div>
</div>
docs/_includes/themes/onyx.html
+54
View File
@@ -0,0 +1,54 @@
<!-- Flasher Theme Notifications -->
<div class="p-3 grid grid-cols-1 md:grid-cols-2 gap-3">
<!-- Success -->
<div class="fl-onyx fl-success fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-content">
<div class="fl-text">
<div class="fl-message">Data has been saved successfully!</div>
</div>
<button class="fl-close" aria-label="Close success message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 40%;"></div>
</div>
</div>
<!-- Error -->
<div class="fl-onyx fl-error fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-content">
<div class="fl-text">
<div class="fl-message">Oops! Something went wrong!</div>
</div>
<button class="fl-close" aria-label="Close error message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 30%;"></div>
</div>
</div>
<!-- Warning -->
<div class="fl-onyx fl-warning fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-content">
<div class="fl-text">
<div class="fl-message">Are you sure you want to proceed?</div>
</div>
<button class="fl-close" aria-label="Close warning message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 20%;"></div>
</div>
</div>
<!-- Info -->
<div class="fl-onyx fl-info fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-content">
<div class="fl-text">
<div class="fl-message">Welcome back!</div>
</div>
<button class="fl-close" aria-label="Close info message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 10%;"></div>
</div>
</div>
</div>
docs/_includes/themes/ruby.html
+70
View File
@@ -0,0 +1,70 @@
<!-- Flasher Theme Notifications -->
<div class="p-3 grid grid-cols-1 md:grid-cols-2 gap-3">
<!-- Success -->
<div class="fl-ruby fl-success fl-container fl-show" role="status" aria-live="polite" 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">Data has been saved successfully!</div>
</div>
<button class="fl-close" aria-label="Close success message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 40%;"></div>
</div>
</div>
<!-- Error -->
<div class="fl-ruby fl-error fl-container fl-show" role="alert" aria-live="assertive" 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">Oops! Something went wrong!</div>
</div>
<button class="fl-close" aria-label="Close error message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 30%;"></div>
</div>
</div>
<!-- Warning -->
<div class="fl-ruby fl-warning fl-container fl-show" role="alert" aria-live="assertive" 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">Are you sure you want to proceed?</div>
</div>
<button class="fl-close" aria-label="Close warning message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 20%;"></div>
</div>
</div>
<!-- Info -->
<div class="fl-ruby fl-info fl-container fl-show" role="status" aria-live="polite" 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">Welcome back!</div>
</div>
<button class="fl-close" aria-label="Close info message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 10%;"></div>
</div>
</div>
</div>
docs/_includes/themes/sapphire.html
+42
View File
@@ -0,0 +1,42 @@
<!-- Flasher Theme Notifications -->
<div class="p-3 grid grid-cols-1 md:grid-cols-2 gap-3">
<!-- Success -->
<div class="fl-sapphire fl-success fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-content">
<span class="fl-message">Data has been saved successfully!</span>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 40%;"></div>
</div>
</div>
<!-- Error -->
<div class="fl-sapphire fl-error fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-content">
<span class="fl-message">Oops! Something went wrong!</span>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 30%;"></div>
</div>
</div>
<!-- Warning -->
<div class="fl-sapphire fl-warning fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-content">
<span class="fl-message">Are you sure you want to proceed?</span>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 20%;"></div>
</div>
</div>
<!-- Info -->
<div class="fl-sapphire fl-info fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-content">
<span class="fl-message">Welcome back!</span>
</div>
<div class="fl-progress-bar">
<div class="fl-progress" style="width: 10%;"></div>
</div>
</div>
</div>
docs/_includes/themes/slack.html
+78
View File
@@ -0,0 +1,78 @@
<!-- Flasher Theme Notifications -->
<div class="p-3 grid grid-cols-1 md:grid-cols-2 gap-3">
<!-- Success -->
<div class="fl-slack fl-success fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-slack-message">
<div class="fl-avatar">
<div class="fl-type-icon fl-success-icon">✓</div>
</div>
<div class="fl-message-content">
<div class="fl-message-text">Data has been saved successfully!</div>
</div>
<div class="fl-actions">
<button class="fl-close" aria-label="Close success message">
<svg viewBox="0 0 20 20" width="16" height="16">
<path fill="currentColor" d="M10 8.586L6.707 5.293a1 1 0 00-1.414 1.414L8.586 10l-3.293 3.293a1 1 0 101.414 1.414L10 11.414l3.293 3.293a1 1 0 001.414-1.414L11.414 10l3.293-3.293a1 1 0 00-1.414-1.414L10 8.586z"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- Error -->
<div class="fl-slack fl-error fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-slack-message">
<div class="fl-avatar">
<div class="fl-type-icon fl-error-icon">✕</div>
</div>
<div class="fl-message-content">
<div class="fl-message-text">Oops! Something went wrong!</div>
</div>
<div class="fl-actions">
<button class="fl-close" aria-label="Close error message">
<svg viewBox="0 0 20 20" width="16" height="16">
<path fill="currentColor" d="M10 8.586L6.707 5.293a1 1 0 00-1.414 1.414L8.586 10l-3.293 3.293a1 1 0 101.414 1.414L10 11.414l3.293 3.293a1 1 0 001.414-1.414L11.414 10l3.293-3.293a1 1 0 00-1.414-1.414L10 8.586z"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- Warning -->
<div class="fl-slack fl-warning fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="fl-slack-message">
<div class="fl-avatar">
<div class="fl-type-icon fl-warning-icon">!</div>
</div>
<div class="fl-message-content">
<div class="fl-message-text">Are you sure you want to proceed?</div>
</div>
<div class="fl-actions">
<button class="fl-close" aria-label="Close warning message">
<svg viewBox="0 0 20 20" width="16" height="16">
<path fill="currentColor" d="M10 8.586L6.707 5.293a1 1 0 00-1.414 1.414L8.586 10l-3.293 3.293a1 1 0 101.414 1.414L10 11.414l3.293 3.293a1 1 0 001.414-1.414L11.414 10l3.293-3.293a1 1 0 00-1.414-1.414L10 8.586z"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- Info -->
<div class="fl-slack fl-info fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
<div class="fl-slack-message">
<div class="fl-avatar">
<div class="fl-type-icon fl-info-icon">i</div>
</div>
<div class="fl-message-content">
<div class="fl-message-text">Welcome back!</div>
</div>
<div class="fl-actions">
<button class="fl-close" aria-label="Close info message">
<svg viewBox="0 0 20 20" width="16" height="16">
<path fill="currentColor" d="M10 8.586L6.707 5.293a1 1 0 00-1.414 1.414L8.586 10l-3.293 3.293a1 1 0 101.414 1.414L10 11.414l3.293 3.293a1 1 0 001.414-1.414L11.414 10l3.293-3.293a1 1 0 00-1.414-1.414L10 8.586z"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
docs/_layouts/theme.html
+1 -1
View File
@@ -52,7 +52,7 @@ layout: default
<!-- Notification Examples with darker background -->
<section class="bg-slate-50 rounded-lg shadow-sm overflow-hidden mb-8">
{% include themes/{{ page.theme_name }}.html %}
{% include themes/{{ page.theme_name_short }}.html %}
</section>
<!-- Configuration Section -->
docs/assets/js/controllers/anchor_controller.js
+1 -1
View File
@@ -72,7 +72,7 @@ export default class extends Controller {
const stickies = document.querySelectorAll('.sticky')
stickies.forEach((sticky) => {
if (sticky.offsetHeight > window.innerHeight && article.clientHeight > sticky.offsetHeight) {
if (sticky.offsetHeight > window.innerHeight && article && article.clientHeight > sticky.offsetHeight) {
const div = document.createElement('div')
div.className = 'h-screen overflow-y-auto'
div.innerHTML = sticky.innerHTML
docs/dist/entrypoints.json
Vendored
+2 -2
View File
@@ -2,10 +2,10 @@
"entrypoints": {
"main": {
"css": [
"/dist/main.047f18a1.css"
"/dist/main.f204747f.css"
],
"js": [
"/dist/main.855339d4.js"
"/dist/main.c89a204f.js"
]
}
}
docs/dist/main.047f18a1.css
Vendored
-1
View File
File diff suppressed because one or more lines are too long
docs/dist/main.855339d4.js
Vendored
-2
View File
File diff suppressed because one or more lines are too long
docs/dist/main.c89a204f.js
Vendored
+2
View File
File diff suppressed because one or more lines are too long
docs/dist/main.855339d4.js.LICENSE.txt → docs/dist/main.c89a204f.js.LICENSE.txt
Vendored
View File
docs/dist/main.f204747f.css
Vendored
+1
View File
File diff suppressed because one or more lines are too long
docs/pages/themes/amazon.md
+41 -217
View File
@@ -1,159 +1,30 @@
---
layout: theme
permalink: /theme/amazon/
title: Amazon Theme
subtitle: E-commerce inspired notification system
description: Transform your notifications with the Amazon-inspired theme for PHPFlasher. Create clean, minimal notifications that match Amazon's design language with built-in accessibility and dark mode support.
handler: theme.amazon
data-controller: theme-amazon
---
theme_name: theme.amazon
theme_name_short: amazon
theme_class: fl-amazon
icon: fa-store
color: amber
has_assets: true
## <i class="fa-solid fa-store"></i> Amazon Theme
visual_features:
- Clean, minimal design inspired by Amazon's UI
- Distinct colors for each notification type
- Dark mode support with automatic detection
- Customizable color scheme
The Amazon theme provides notification styling inspired by Amazon's e-commerce platform, featuring clean, minimal design with a focus on readability and accessibility.
accessibility_features:
- ARIA roles and live regions for screen readers
- Keyboard accessible controls
- High contrast text meeting WCAG 2.1 AA standards
- Supports reduced motion preferences
> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
> New to PHPFlasher? Check the [installation guide](/installation/) first.
## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup
The easiest way to use the Amazon theme is to set it as your **default theme**:
### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
```php
<?php // config/flasher.php
return [
'default' => 'theme.amazon', // Make Amazon the default theme
'themes' => [
'amazon' => [
'scripts' => [
'/vendor/flasher/themes/amazon.min.js',
],
'styles' => [
'/vendor/flasher/themes/amazon.min.css',
],
],
],
];
```
### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
```yaml
# config/packages/flasher.yaml
flasher:
default: theme.amazon # Make Amazon the default theme
themes:
amazon:
scripts:
- '/vendor/flasher/themes/amazon.min.js'
styles:
- '/vendor/flasher/themes/amazon.min.css'
```
### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript
```typescript
// Import the theme (if not auto-registered)
import { amazonTheme } from '@flasher/flasher/themes';
flasher.addTheme('amazon', amazonTheme);
// Set as default theme
flasher.defaultPlugin = 'theme.amazon';
// Or use it for specific notifications
flasher.success('Your order has been completed successfully');
```
## <i class="fa-solid fa-palette"></i> Notification Types
Once configured, use standard PHPFlasher methods to create notifications with Amazon styling:
{% assign successMessage = 'Order #12345 has been confirmed.' %}
{% assign errorMessage = 'Your payment was declined.' %}
{% assign warningMessage = 'Your subscription will expire soon.' %}
{% assign infoMessage = 'New products are available in your area.' %}
<script type="text/javascript">
messages['#/ amazon types'] = [
{
handler: 'theme.amazon',
type: 'success',
message: '{{ successMessage }}',
options: { theme: 'amazon' },
},
{
handler: 'theme.amazon',
type: 'error',
message: '{{ errorMessage }}',
options: { theme: 'amazon' },
},
{
handler: 'theme.amazon',
type: 'warning',
message: '{{ warningMessage }}',
options: { theme: 'amazon' },
},
{
handler: 'theme.amazon',
type: 'info',
message: '{{ infoMessage }}',
options: { theme: 'amazon' },
}
];
</script>
### PHP
```php
#/ amazon types
// With Amazon set as default theme
flash()->success('{{ successMessage }}');
flash()->error('{{ errorMessage }}');
flash()->warning('{{ warningMessage }}');
flash()->info('{{ infoMessage }}');
```
### JavaScript
```javascript
// With Amazon set as default theme
flasher.success('{{ successMessage }}');
flasher.error('{{ errorMessage }}');
flasher.warning('{{ warningMessage }}');
flasher.info('{{ infoMessage }}');
```
## <i class="fa-solid fa-brush"></i> Customization
### Using Amazon Theme for Specific Notifications
If Amazon isn't your default theme, you can use it for specific notifications:
#### PHP
```php
flash()
->use('theme.amazon')
->success('This notification uses Amazon theme.');
```
#### JavaScript
```javascript
flasher.use('theme.amazon').success('This notification uses Amazon theme.');
```
### Custom Colors
The Amazon theme uses CSS variables that can be customized to match your brand:
```css
:root {
css_variables: |
:root {
/* Amazon theme colors - Light mode */
--amazon-success-bg: #f0fff5; /* Success background */
--amazon-success-border: #7fda95; /* Success border */
@@ -181,72 +52,25 @@ The Amazon theme uses CSS variables that can be customized to match your brand:
--amazon-error-bg-dark: #400a0a;
--amazon-error-border-dark: #6e2a2a;
--amazon-error-icon-dark: #ff8f8f;
}
```
}
## <i class="fa-solid fa-code"></i> HTML Structure
The Amazon theme generates notifications with the following HTML structure:
```html
<div class="fl-amazon fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-amazon-alert">
<div class="fl-alert-content">
<div class="fl-icon-container">
<!-- SVG icon -->
</div>
<div class="fl-text-content">
<div class="fl-alert-title">Title</div>
<div class="fl-alert-message">Message</div>
</div>
</div>
<div class="fl-alert-actions">
<button class="fl-close" aria-label="Close notification">
<!-- Close icon -->
</button>
</div>
</div>
</div>
```
This structure provides proper semantic markup and accessibility attributes for screen readers and assistive technologies.
## <i class="fa-solid fa-lightbulb"></i> Theme Features
### Dark Mode
The Amazon theme automatically adapts to system dark mode preferences without additional configuration using the `prefers-color-scheme` media query.
### Accessibility Features
The Amazon theme includes several accessibility features:
- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages
- **Reduced Motion**: Respects `prefers-reduced-motion` media query
- **Keyboard Access**: Close button is fully keyboard accessible
- **High Contrast**: All text meets WCAG 2.1 AA color contrast standards
- **Screen Reader Support**: Proper labeling of interactive elements
## <i class="fa-solid fa-browser"></i> Browser Support
The Amazon theme is compatible with all modern browsers:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Opera (latest)
- Mobile browsers on iOS and Android
## <i class="fa-solid fa-gears"></i> Implementation Details
The Amazon theme uses modern web technologies:
- **CSS Variables**: For theme customization and dark mode support
- **Flexbox Layout**: For responsive and flexible notification structure
- **SVG Icons**: For resolution-independent, lightweight icons
- **Media Queries**: For responsive design, dark mode, and reduced motion support
- **ARIA Attributes**: For accessibility and screen reader support
All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
html_structure: |
<div class="fl-amazon fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-amazon-alert">
<div class="fl-alert-content">
<div class="fl-icon-container">
<!-- SVG icon -->
</div>
<div class="fl-text-content">
<div class="fl-alert-title">Title</div>
<div class="fl-alert-message">Message</div>
</div>
</div>
<div class="fl-alert-actions">
<button class="fl-close" aria-label="Close notification">
<!-- Close icon -->
</button>
</div>
</div>
</div>
---
docs/pages/themes/amber.md
+37 -222
View File
@@ -1,159 +1,32 @@
---
layout: theme
permalink: /theme/amber/
title: Amber Theme
subtitle: Modern, elegant notification system
description: Transform your notifications with the elegant Amber theme for PHPFlasher. Featuring a modern, minimalist design with subtle animations and comprehensive dark mode support.
handler: theme.amber
data-controller: theme-amber
---
theme_name: theme.amber
theme_name_short: amber
theme_class: fl-amber
icon: fa-sun
color: amber
has_assets: true
## <i class="fa-solid fa-sun"></i> Amber Theme
visual_features:
- Modern, minimalist design with clean aesthetics
- Subtle animations and transitions for a refined feel
- Visual progress bar indicating time before auto-dismiss
- Automatic dark mode support with elegant color shifts
The Amber theme offers a modern, elegant notification style with refined aesthetics that focuses on clean design and readability. It provides a minimalist approach while maintaining visual appeal with subtle animations and transitions.
accessibility_features:
- Proper ARIA roles for different notification types
- Live regions with appropriate assertiveness levels
- Respects user's reduced motion preferences
- Fully keyboard accessible controls
- High contrast text meeting WCAG 2.1 AA standards
- Descriptive aria-labels for screen readers
> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
> New to PHPFlasher? Check the [installation guide](/installation/) first.
## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup
The easiest way to use the Amber theme is to set it as your **default theme**:
### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
```php
<?php // config/flasher.php
return [
'default' => 'theme.amber', // Make Amber the default theme
'themes' => [
'amber' => [
'scripts' => [
'/vendor/flasher/themes/amber.min.js',
],
'styles' => [
'/vendor/flasher/themes/amber.min.css',
],
],
],
];
```
### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
```yaml
# config/packages/flasher.yaml
flasher:
default: theme.amber # Make Amber the default theme
themes:
amber:
scripts:
- '/vendor/flasher/themes/amber.min.js'
styles:
- '/vendor/flasher/themes/amber.min.css'
```
### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript
```typescript
// Import the theme (if not auto-registered)
import { amberTheme } from '@flasher/flasher/themes';
flasher.addTheme('amber', amberTheme);
// Set as default theme
flasher.defaultPlugin = 'theme.amber';
// Or use it for specific notifications
flasher.success('Your changes have been saved successfully');
```
## <i class="fa-solid fa-palette"></i> Notification Types
Once configured, use standard PHPFlasher methods to create notifications with Amber styling:
{% assign successMessage = 'Your changes have been saved successfully.' %}
{% assign errorMessage = 'An error occurred while saving your changes.' %}
{% assign warningMessage = 'Your session will expire in 5 minutes.' %}
{% assign infoMessage = 'New features have been added to your account.' %}
<script type="text/javascript">
messages['#/ amber types'] = [
{
handler: 'theme.amber',
type: 'success',
message: '{{ successMessage }}',
options: { theme: 'amber' },
},
{
handler: 'theme.amber',
type: 'error',
message: '{{ errorMessage }}',
options: { theme: 'amber' },
},
{
handler: 'theme.amber',
type: 'warning',
message: '{{ warningMessage }}',
options: { theme: 'amber' },
},
{
handler: 'theme.amber',
type: 'info',
message: '{{ infoMessage }}',
options: { theme: 'amber' },
}
];
</script>
### PHP
```php
#/ amber types
// With Amber set as default theme
flash()->success('{{ successMessage }}');
flash()->error('{{ errorMessage }}');
flash()->warning('{{ warningMessage }}');
flash()->info('{{ infoMessage }}');
```
### JavaScript
```javascript
// With Amber set as default theme
flasher.success('{{ successMessage }}');
flasher.error('{{ errorMessage }}');
flasher.warning('{{ warningMessage }}');
flasher.info('{{ infoMessage }}');
```
## <i class="fa-solid fa-brush"></i> Customization
### Using Amber Theme for Specific Notifications
If Amber isn't your default theme, you can use it for specific notifications:
#### PHP
```php
flash()
->use('theme.amber')
->success('This notification uses Amber theme.');
```
#### JavaScript
```javascript
flasher.use('theme.amber').success('This notification uses Amber theme.');
```
### Custom Colors
The Amber theme uses CSS variables that can be customized to match your brand:
```css
:root {
css_variables: |
:root {
/* Base appearance */
--amber-bg-light: #ffffff; /* Light mode background */
--amber-bg-dark: #1e293b; /* Dark mode background */
@@ -170,77 +43,19 @@ The Amber theme uses CSS variables that can be customized to match your brand:
/* Dark mode shadows */
--amber-shadow-dark: 0 5px 15px rgba(0, 0, 0, 0.25);
}
```
}
## <i class="fa-solid fa-code"></i> HTML Structure
The Amber theme generates notifications with the following HTML structure:
```html
<div class="fl-amber fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-content">
<div class="fl-icon"></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>
```
This structure includes a progress bar that shows the time remaining before the notification auto-dismisses.
## <i class="fa-solid fa-lightbulb"></i> Theme Features
### Dark Mode
The Amber theme automatically adapts to system dark mode preferences without additional configuration using the `prefers-color-scheme` media query.
### Accessibility Features
The Amber theme includes several accessibility features:
- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
- **Reduced Motion**: Respects `prefers-reduced-motion` media query
- **Keyboard Access**: Close button is fully keyboard accessible
- **Color Contrast**: All text meets WCAG 2.1 AA color contrast standards
- **Button Labels**: Close button has descriptive aria-label for screen readers
### Key Differences from Default Theme
The Amber theme differs from the default theme in several ways:
1. **More Minimal**: Cleaner design with less ornamentation
2. **Subtle Shadows**: Uses softer box shadows for a modern look
3. **Smaller Icon**: Uses a more compact icon size
4. **Progress Bar**: Visual indicator for auto-dismiss timing
5. **Different Animation**: Uses a top-down entrance animation
6. **Colored Close Button**: Close button color matches notification type
## <i class="fa-solid fa-browser"></i> Browser Support
The Amber theme is compatible with all modern browsers:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Opera (latest)
- Mobile browsers on iOS and Android
## <i class="fa-solid fa-gears"></i> Implementation Details
The Amber theme uses modern web technologies:
- **CSS Variables**: For theme customization and dark mode support
- **Flexbox Layout**: For responsive and flexible notification structure
- **CSS Animations**: For entrance effects and progress bar
- **Media Queries**: For responsive design, dark mode, and reduced motion support
- **Core Icons**: Uses the PHPFlasher core icon system
All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
html_structure: |
<div class="fl-amber fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-content">
<div class="fl-icon"></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>
---
docs/pages/themes/aurora.md
+33 -224
View File
@@ -1,159 +1,31 @@
---
layout: theme
permalink: /theme/aurora/
title: Aurora Theme
subtitle: Elegant glass-like notification system
description: Add elegant glass-like notifications to your application with the Aurora theme for PHPFlasher. Featuring translucent backgrounds, subtle gradients, and modern backdrop blur effects.
handler: theme.aurora
data-controller: theme-aurora
---
theme_name: theme.aurora
theme_name_short: aurora
theme_class: fl-aurora
icon: fa-sparkles
color: blue
has_assets: true
## <i class="fa-solid fa-sparkles"></i> Aurora Theme
visual_features:
- Glass-like appearance with translucent backgrounds
- Subtle gradient overlays for each notification type
- Modern backdrop blur effect for a frosted glass look
- Elegant animation combining fade, translation and scale
The Aurora theme provides an elegant, glass-like notification style with translucent backgrounds, subtle gradients, and backdrop blur effects. It offers a modern, refined aesthetic inspired by contemporary UI design trends like glass morphism.
accessibility_features:
- Type-specific ARIA roles for screen readers
- Appropriate aria-live regions based on message importance
- Reduced motion adaptation for users with motion sensitivity
- High contrast maintained despite translucent backgrounds
- Fully keyboard accessible controls
> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
> New to PHPFlasher? Check the [installation guide](/installation/) first.
## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup
The easiest way to use the Aurora theme is to set it as your **default theme**:
### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
```php
<?php // config/flasher.php
return [
'default' => 'theme.aurora', // Make Aurora the default theme
'themes' => [
'aurora' => [
'scripts' => [
'/vendor/flasher/themes/aurora.min.js',
],
'styles' => [
'/vendor/flasher/themes/aurora.min.css',
],
],
],
];
```
### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
```yaml
# config/packages/flasher.yaml
flasher:
default: theme.aurora # Make Aurora the default theme
themes:
aurora:
scripts:
- '/vendor/flasher/themes/aurora.min.js'
styles:
- '/vendor/flasher/themes/aurora.min.css'
```
### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript
```typescript
// Import the theme (if not auto-registered)
import { auroraTheme } from '@flasher/flasher/themes';
flasher.addTheme('aurora', auroraTheme);
// Set as default theme
flasher.defaultPlugin = 'theme.aurora';
// Or use it for specific notifications
flasher.success('Your profile has been updated');
```
## <i class="fa-solid fa-palette"></i> Notification Types
Once configured, use standard PHPFlasher methods to create notifications with Aurora styling:
{% assign successMessage = 'Your profile has been updated successfully.' %}
{% assign errorMessage = 'Please check your connection and try again.' %}
{% assign warningMessage = 'Your session will expire in 5 minutes.' %}
{% assign infoMessage = 'New feature available in your dashboard.' %}
<script type="text/javascript">
messages['#/ aurora types'] = [
{
handler: 'theme.aurora',
type: 'success',
message: '{{ successMessage }}',
options: { theme: 'aurora' },
},
{
handler: 'theme.aurora',
type: 'error',
message: '{{ errorMessage }}',
options: { theme: 'aurora' },
},
{
handler: 'theme.aurora',
type: 'warning',
message: '{{ warningMessage }}',
options: { theme: 'aurora' },
},
{
handler: 'theme.aurora',
type: 'info',
message: '{{ infoMessage }}',
options: { theme: 'aurora' },
}
];
</script>
### PHP
```php
#/ aurora types
// With Aurora set as default theme
flash()->success('{{ successMessage }}');
flash()->error('{{ errorMessage }}');
flash()->warning('{{ warningMessage }}');
flash()->info('{{ infoMessage }}');
```
### JavaScript
```javascript
// With Aurora set as default theme
flasher.success('{{ successMessage }}');
flasher.error('{{ errorMessage }}');
flasher.warning('{{ warningMessage }}');
flasher.info('{{ infoMessage }}');
```
## <i class="fa-solid fa-brush"></i> Customization
### Using Aurora Theme for Specific Notifications
If Aurora isn't your default theme, you can use it for specific notifications:
#### PHP
```php
flash()
->use('theme.aurora')
->success('This notification uses Aurora theme.');
```
#### JavaScript
```javascript
flasher.use('theme.aurora').success('This notification uses Aurora theme.');
```
### Custom Colors and Appearance
The Aurora theme uses CSS variables that can be customized to match your brand:
```css
:root {
css_variables: |
:root {
/* Base appearance */
--aurora-bg-light: rgba(255, 255, 255, 0.95); /* Light background */
--aurora-bg-dark: rgba(20, 20, 28, 0.92); /* Dark background */
@@ -173,79 +45,16 @@ The Aurora theme uses CSS variables that can be customized to match your brand:
--aurora-info-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.2) 100%);
--aurora-warning-gradient: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.2) 100%);
--aurora-error-gradient: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.2) 100%);
}
```
}
## <i class="fa-solid fa-code"></i> HTML Structure
The Aurora theme generates notifications with the following HTML structure:
```html
<div class="fl-aurora fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Message text</div>
<button class="fl-close" aria-label="Close [type] message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress"></div>
</div>
</div>
```
This minimalist structure focuses on content by omitting unnecessary UI elements while still maintaining a progress bar that shows the time remaining before auto-dismiss.
## <i class="fa-solid fa-lightbulb"></i> Theme Features
### Glass Morphism Effect
The Aurora theme uses CSS `backdrop-filter` to create its signature glass effect, giving notifications a modern, translucent appearance with background blur.
### Dark Mode
The theme automatically adapts to system dark mode preferences without additional configuration, adjusting both the background transparency and text colors for optimal readability.
### Accessibility Features
The Aurora theme includes several accessibility features:
- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
- **Reduced Motion**: Respects `prefers-reduced-motion` media query
- **Keyboard Access**: Close button is fully keyboard accessible
- **Color Contrast**: Maintains proper contrast ratios even with translucent backgrounds
- **Button Labels**: Close button has descriptive aria-label for screen readers
### Animation Technique
The entrance animation combines three effects for a refined appearance:
1. **Opacity**: Fade in from transparent to visible
2. **Translation**: Slight movement from above
3. **Scale**: Subtle growth from slightly smaller to full size
This combination creates a more organic, sophisticated appearance than simple fades or slides.
## <i class="fa-solid fa-browser"></i> Browser Support
The Aurora theme is compatible with all modern browsers that support CSS variables and backdrop filters:
- Chrome 76+
- Firefox 70+
- Safari 9+
- Edge 17+
- Opera 64+
- Mobile browsers on iOS and Android
For browsers that don't support backdrop filters, the theme gracefully degrades to using just the translucent background.
## <i class="fa-solid fa-gears"></i> Implementation Details
The Aurora theme uses modern web technologies:
- **CSS Variables**: For theme customization and dark mode support
- **Backdrop Filter**: For the frosted glass effect
- **Gradient Overlays**: Using `::before` pseudo-elements for type-specific styling
- **CSS Animations**: For smooth entrance effects and progress bar
- **Media Queries**: For responsive design, dark mode, and reduced motion support
All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
html_structure: |
<div class="fl-aurora fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Message text</div>
<button class="fl-close" aria-label="Close [type] message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress"></div>
</div>
</div>
---
docs/pages/themes/crystal.md
+36 -224
View File
@@ -1,159 +1,32 @@
---
layout: theme
permalink: /theme/crystal/
title: Crystal Theme
subtitle: Clean, monochromatic notification system
description: Enhance your notifications with the elegant Crystal theme for PHPFlasher. Featuring a clean, monochromatic design with colored text and subtle animation effects.
handler: theme.crystal
data-controller: theme-crystal
---
theme_name: theme.crystal
theme_name_short: crystal
theme_class: fl-crystal
icon: fa-diamond
color: indigo
has_assets: true
## <i class="fa-solid fa-diamond"></i> Crystal Theme
visual_features:
- Monochromatic design with type-specific colored text
- Subtle entrance animation with smooth slide-in and fade effects
- Gentle pulsing shadow on hover creates a "breathing" effect
- Clean, minimalist interface focused on content clarity
The Crystal theme provides an elegant, clean notification style with subtle animations and a focus on simplicity. It features a monochromatic design with type-specific colored text and a gentle pulsing shadow effect on hover.
accessibility_features:
- Type-appropriate ARIA roles for screen readers
- Optimized aria-live regions based on message importance
- Reduced motion adaptation for motion-sensitive users
- High contrast text for optimal readability
- Fully keyboard accessible with visual feedback
- Descriptive aria-labels for interactive elements
> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
> New to PHPFlasher? Check the [installation guide](/installation/) first.
## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup
The easiest way to use the Crystal theme is to set it as your **default theme**:
### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
```php
<?php // config/flasher.php
return [
'default' => 'theme.crystal', // Make Crystal the default theme
'themes' => [
'crystal' => [
'scripts' => [
'/vendor/flasher/themes/crystal.min.js',
],
'styles' => [
'/vendor/flasher/themes/crystal.min.css',
],
],
],
];
```
### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
```yaml
# config/packages/flasher.yaml
flasher:
default: theme.crystal # Make Crystal the default theme
themes:
crystal:
scripts:
- '/vendor/flasher/themes/crystal.min.js'
styles:
- '/vendor/flasher/themes/crystal.min.css'
```
### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript
```typescript
// Import the theme (if not auto-registered)
import { crystalTheme } from '@flasher/flasher/themes';
flasher.addTheme('crystal', crystalTheme);
// Set as default theme
flasher.defaultPlugin = 'theme.crystal';
// Or use it for specific notifications
flasher.success('Document saved successfully');
```
## <i class="fa-solid fa-palette"></i> Notification Types
Once configured, use standard PHPFlasher methods to create notifications with Crystal styling:
{% assign successMessage = 'Document saved successfully.' %}
{% assign errorMessage = 'An error occurred while saving your document.' %}
{% assign warningMessage = 'Your session will expire in 5 minutes.' %}
{% assign infoMessage = 'New features have been added to the editor.' %}
<script type="text/javascript">
messages['#/ crystal types'] = [
{
handler: 'theme.crystal',
type: 'success',
message: '{{ successMessage }}',
options: { theme: 'crystal' },
},
{
handler: 'theme.crystal',
type: 'error',
message: '{{ errorMessage }}',
options: { theme: 'crystal' },
},
{
handler: 'theme.crystal',
type: 'warning',
message: '{{ warningMessage }}',
options: { theme: 'crystal' },
},
{
handler: 'theme.crystal',
type: 'info',
message: '{{ infoMessage }}',
options: { theme: 'crystal' },
}
];
</script>
### PHP
```php
#/ crystal types
// With Crystal set as default theme
flash()->success('{{ successMessage }}');
flash()->error('{{ errorMessage }}');
flash()->warning('{{ warningMessage }}');
flash()->info('{{ infoMessage }}');
```
### JavaScript
```javascript
// With Crystal set as default theme
flasher.success('{{ successMessage }}');
flasher.error('{{ errorMessage }}');
flasher.warning('{{ warningMessage }}');
flasher.info('{{ infoMessage }}');
```
## <i class="fa-solid fa-brush"></i> Customization
### Using Crystal Theme for Specific Notifications
If Crystal isn't your default theme, you can use it for specific notifications:
#### PHP
```php
flash()
->use('theme.crystal')
->success('This notification uses Crystal theme.');
```
#### JavaScript
```javascript
flasher.use('theme.crystal').success('This notification uses Crystal theme.');
```
### Custom Colors and Appearance
The Crystal theme uses CSS variables that can be customized to match your brand:
```css
:root {
css_variables: |
:root {
/* Base appearance */
--crystal-bg-light: #ffffff; /* Light mode background */
--crystal-bg-dark: rgba(30, 30, 30, 0.95); /* Dark mode background */
@@ -167,79 +40,18 @@ The Crystal theme uses CSS variables that can be customized to match your brand:
--fl-info: #3b82f6; /* Info color */
--fl-warning: #f59e0b; /* Warning color */
--fl-error: #ef4444; /* Error color */
}
```
}
## <i class="fa-solid fa-code"></i> HTML Structure
The Crystal theme generates notifications with the following HTML structure:
```html
<div class="fl-crystal fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-content">
<div class="fl-text">
<p class="fl-message">Message text</p>
</div>
<button class="fl-close" aria-label="Close [type] message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress"></div>
</div>
</div>
```
This minimalist structure focuses on content with a clean design, while still maintaining a progress bar that shows the time remaining before auto-dismiss.
## <i class="fa-solid fa-lightbulb"></i> Theme Features
### Elegant Animations
The Crystal theme features two distinct animations:
1. **Entrance Animation**: A smooth slide-in from above with a fade-in effect
2. **Hover Animation**: A gentle pulsing shadow that creates a subtle "breathing" effect
The hover animation is disabled in dark mode and for users who prefer reduced motion, replaced with a static enhanced shadow effect.
### Dark Mode
The theme automatically adapts to system dark mode preferences without additional configuration, adjusting both the background and text colors for optimal readability.
### Design Philosophy
The Crystal theme embodies clarity and simplicity. Rather than using colored backgrounds or borders, it employs colored text to indicate notification types. This creates a cleaner, more sophisticated appearance while still providing clear visual cues about the notification's nature.
### Accessibility Features
The Crystal theme includes several accessibility features:
- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
- **Reduced Motion**: Respects `prefers-reduced-motion` media query and disables animations
- **Keyboard Access**: Close button is fully keyboard accessible with visual feedback
- **Color Contrast**: High contrast between text and background for readability
- **Button Labels**: Close button has descriptive aria-label for screen readers
## <i class="fa-solid fa-browser"></i> Browser Support
The Crystal theme is compatible with all modern browsers:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Opera (latest)
- Mobile browsers on iOS and Android
## <i class="fa-solid fa-gears"></i> Implementation Details
The Crystal theme uses modern web technologies:
- **CSS Variables**: For theme customization and dark mode support
- **CSS Transitions**: For smooth hover effects
- **Keyframe Animations**: For entrance and pulsing shadow effects
- **Absolute Positioning**: For consistent close button layout
- **Progress Bar**: Shows countdown until notification dismissal
- **Media Queries**: For responsive design, dark mode, and reduced motion support
All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
html_structure: |
<div class="fl-crystal fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-content">
<div class="fl-text">
<p class="fl-message">Message text</p>
</div>
<button class="fl-close" aria-label="Close [type] message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress"></div>
</div>
</div>
---
docs/pages/themes/emerald.md
+30 -232
View File
@@ -1,159 +1,31 @@
---
layout: theme
permalink: /theme/emerald/
title: Emerald Theme
subtitle: Elegant glass-like notifications with bounce effect
description: Enhance your notifications with the elegant Emerald theme for PHPFlasher. Featuring a glass-like appearance with bounce animation and minimalist design for a modern, polished user experience.
handler: theme.emerald
data-controller: theme-emerald
---
theme_name: theme.emerald
theme_name_short: emerald
theme_class: fl-emerald
icon: fa-gem
color: emerald
has_assets: true
## <i class="fa-solid fa-gem"></i> Emerald Theme
visual_features:
- 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
The Emerald theme provides an elegant, glass-like notification style with a distinctive bounce animation and translucent background. It focuses on minimalism and modern aesthetics, featuring colored text rather than backgrounds to indicate notification types.
accessibility_features:
- 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
> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
> New to PHPFlasher? Check the [installation guide](/installation/) first.
## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup
The easiest way to use the Emerald theme is to set it as your **default theme**:
### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
```php
<?php // config/flasher.php
return [
'default' => 'theme.emerald', // Make Emerald the default theme
'themes' => [
'emerald' => [
'scripts' => [
'/vendor/flasher/themes/emerald.min.js',
],
'styles' => [
'/vendor/flasher/themes/emerald.min.css',
],
],
],
];
```
### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
```yaml
# config/packages/flasher.yaml
flasher:
default: theme.emerald # Make Emerald the default theme
themes:
emerald:
scripts:
- '/vendor/flasher/themes/emerald.min.js'
styles:
- '/vendor/flasher/themes/emerald.min.css'
```
### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript
```typescript
// Import the theme (if not auto-registered)
import { emeraldTheme } from '@flasher/flasher/themes';
flasher.addTheme('emerald', emeraldTheme);
// Set as default theme
flasher.defaultPlugin = 'theme.emerald';
// Or use it for specific notifications
flasher.success('Your changes have been saved');
```
## <i class="fa-solid fa-palette"></i> Notification Types
Once configured, use standard PHPFlasher methods to create notifications with Emerald styling:
{% assign successMessage = 'Your changes have been saved successfully.' %}
{% assign errorMessage = 'An error occurred while saving your changes.' %}
{% assign warningMessage = 'Your session will expire soon.' %}
{% assign infoMessage = 'New features have been added to your dashboard.' %}
<script type="text/javascript">
messages['#/ emerald types'] = [
{
handler: 'theme.emerald',
type: 'success',
message: '{{ successMessage }}',
options: { theme: 'emerald' },
},
{
handler: 'theme.emerald',
type: 'error',
message: '{{ errorMessage }}',
options: { theme: 'emerald' },
},
{
handler: 'theme.emerald',
type: 'warning',
message: '{{ warningMessage }}',
options: { theme: 'emerald' },
},
{
handler: 'theme.emerald',
type: 'info',
message: '{{ infoMessage }}',
options: { theme: 'emerald' },
}
];
</script>
### PHP
```php
#/ emerald types
// With Emerald set as default theme
flash()->success('{{ successMessage }}');
flash()->error('{{ errorMessage }}');
flash()->warning('{{ warningMessage }}');
flash()->info('{{ infoMessage }}');
```
### JavaScript
```javascript
// With Emerald set as default theme
flasher.success('{{ successMessage }}');
flasher.error('{{ errorMessage }}');
flasher.warning('{{ warningMessage }}');
flasher.info('{{ infoMessage }}');
```
## <i class="fa-solid fa-brush"></i> Customization
### Using Emerald Theme for Specific Notifications
If Emerald isn't your default theme, you can use it for specific notifications:
#### PHP
```php
flash()
->use('theme.emerald')
->success('This notification uses Emerald theme.');
```
#### JavaScript
```javascript
flasher.use('theme.emerald').success('This notification uses Emerald theme.');
```
### Custom Colors and Appearance
The Emerald theme uses CSS variables that can be customized to match your brand:
```css
:root {
css_variables: |
: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 */
@@ -167,87 +39,13 @@ The Emerald theme uses CSS variables that can be customized to match your brand:
--emerald-error: #e74c3c; /* Error color */
--emerald-warning: #f39c12; /* Warning color */
--emerald-info: #3498db; /* Info color */
}
```
}
## <i class="fa-solid fa-code"></i> HTML Structure
The Emerald theme generates notifications with the following HTML structure:
```html
<div class="fl-emerald fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Message text</div>
<button class="fl-close" aria-label="Close [type] message">×</button>
</div>
</div>
```
This minimalist structure focuses on content by omitting unnecessary UI elements for a cleaner, more elegant look.
## <i class="fa-solid fa-lightbulb"></i> Theme Features
### Distinctive Animation
The Emerald theme features a unique bounce animation that works as follows:
1. **Start**: The notification begins at 50% size and slightly below its final position
2. **Middle**: It quickly grows to 110% size and slightly above its final position
3. **End**: It settles back to 100% size at its final position
This creates a playful yet elegant "bounce" effect that draws attention without being too disruptive.
### Glass Morphism Effect
The theme uses CSS `backdrop-filter` to create a frosted glass effect, giving notifications a modern, translucent appearance with background blur.
### Dark Mode
The theme automatically adapts to system dark mode preferences without additional configuration, adjusting both the background transparency and text colors for optimal readability.
### Design Philosophy
The Emerald theme is named after its polished, refined appearance that gives notifications a gem-like quality. Its design principles include:
- **Simplicity**: Only essential elements are included
- **Elegance**: Soft blurs, shadows, and animations create a premium feel
- **Subtlety**: Colored text rather than backgrounds for a more refined look
- **Modernity**: Contemporary typography and glass-like effects
- **Focus**: Clear emphasis on the message content
### Accessibility Features
The Emerald theme includes several accessibility features:
- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
- **Reduced Motion**: Respects `prefers-reduced-motion` media query
- **Keyboard Access**: Close button is fully keyboard accessible
- **Text Sizing**: Uses relative units (rem) for text to respect user font size preferences
- **Button Labels**: Close button has descriptive aria-label for screen readers
## <i class="fa-solid fa-browser"></i> Browser Support
The Emerald theme is compatible with all modern browsers:
- Chrome 76+
- Firefox 70+
- Safari 9+
- Edge 79+
- Opera 63+
- Mobile browsers on iOS and Android
For browsers that don't support backdrop-filter, the theme gracefully degrades to a translucent background without blur.
## <i class="fa-solid fa-gears"></i> Implementation Details
The Emerald theme uses modern web technologies:
- **CSS Variables**: For theme customization and dark mode support
- **Backdrop Filter**: For the frosted glass effect
- **CSS Animations**: For the distinctive bounce entrance effect
- **Inter Font**: Optimized for clean, modern typography (with system font fallback)
- **Box Shadows**: For subtle depth and dimension
- **Media Queries**: For responsive design, dark mode, and reduced motion support
All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
html_structure: |
<div class="fl-emerald fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Message text</div>
<button class="fl-close" aria-label="Close [type] message">×</button>
</div>
</div>
---
docs/pages/themes/facebook.md
+48 -253
View File
@@ -1,180 +1,33 @@
---
layout: theme
permalink: /theme/facebook/
title: Facebook Theme
subtitle: Familiar social media notification style
description: Add Facebook-style notifications to your application with the Facebook theme for PHPFlasher. Featuring familiar notification cards, circular icons, and Facebook's signature design elements.
handler: theme.facebook
data-controller: theme-facebook
---
theme_name: theme.facebook
theme_name_short: facebook
theme_class: fl-facebook
icon: fa-facebook
color: blue
has_assets: true
## <i class="fa-brands fa-facebook"></i> Facebook Theme
visual_features:
- Rounded notification cards with subtle drop shadows
- Circular colored icons for each notification type
- Facebook's signature typography and color scheme
- Timestamp display showing when notifications were created
- Interactive elements with familiar hover states
The Facebook theme replicates the familiar notification style from Facebook's interface, providing a user experience that billions of people worldwide will instantly recognize. It features Facebook's signature look and feel, including rounded cards, circular icons, and the platform's distinctive typography and color scheme.
accessibility_features:
- Type-specific ARIA roles for screen readers
- Appropriate aria-live regions based on message importance
- Reduced motion support for users with motion sensitivity
- Fully keyboard accessible interactive elements
- Color contrast optimized for readability while maintaining Facebook's look
- Descriptive aria-labels for all controls
> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
> New to PHPFlasher? Check the [installation guide](/installation/) first.
## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup
The easiest way to use the Facebook theme is to set it as your **default theme**:
### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
```php
<?php // config/flasher.php
return [
'default' => 'theme.facebook', // Make Facebook the default theme
'themes' => [
'facebook' => [
'scripts' => [
'/vendor/flasher/themes/facebook.min.js',
],
'styles' => [
'/vendor/flasher/themes/facebook.min.css',
],
],
],
];
```
### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
```yaml
# config/packages/flasher.yaml
flasher:
default: theme.facebook # Make Facebook the default theme
themes:
facebook:
scripts:
- '/vendor/flasher/themes/facebook.min.js'
styles:
- '/vendor/flasher/themes/facebook.min.css'
```
### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript
```typescript
// Import the theme (if not auto-registered)
import { facebookTheme } from '@flasher/flasher/themes';
flasher.addTheme('facebook', facebookTheme);
// Set as default theme
flasher.defaultPlugin = 'theme.facebook';
// Or use it for specific notifications
flasher.success('Your post was published successfully');
```
## <i class="fa-solid fa-palette"></i> Notification Types
Once configured, use standard PHPFlasher methods to create notifications with Facebook styling:
{% assign successMessage = 'Your post was published successfully.' %}
{% assign errorMessage = 'There was a problem uploading your photo.' %}
{% assign warningMessage = 'Your account is approaching storage limits.' %}
{% assign infoMessage = '3 people reacted to your comment.' %}
<script type="text/javascript">
messages['#/ facebook types'] = [
{
handler: 'theme.facebook',
type: 'success',
message: '{{ successMessage }}',
options: { theme: 'facebook' },
},
{
handler: 'theme.facebook',
type: 'error',
message: '{{ errorMessage }}',
options: { theme: 'facebook' },
},
{
handler: 'theme.facebook',
type: 'warning',
message: '{{ warningMessage }}',
options: { theme: 'facebook' },
},
{
handler: 'theme.facebook',
type: 'info',
message: '{{ infoMessage }}',
options: { theme: 'facebook' },
}
];
</script>
### PHP
```php
#/ facebook types
// With Facebook set as default theme
flash()->success('{{ successMessage }}');
flash()->error('{{ errorMessage }}');
flash()->warning('{{ warningMessage }}');
flash()->info('{{ infoMessage }}');
```
### JavaScript
```javascript
// With Facebook set as default theme
flasher.success('{{ successMessage }}');
flasher.error('{{ errorMessage }}');
flasher.warning('{{ warningMessage }}');
flasher.info('{{ infoMessage }}');
```
## <i class="fa-solid fa-brush"></i> Customization
### Using Facebook Theme for Specific Notifications
If Facebook isn't your default theme, you can use it for specific notifications:
#### PHP
```php
flash()
->use('theme.facebook')
->success('This notification uses Facebook theme.');
```
#### JavaScript
```javascript
flasher.use('theme.facebook').success('This notification uses Facebook theme.');
```
### Adding a Timestamp
You can add a timestamp to your Facebook-style notification:
#### PHP
```php
flash()
->use('theme.facebook')
->success('Your post was published successfully.');
```
#### JavaScript
```javascript
flasher.use('theme.facebook')
.success('Your post was published successfully');
```
If no timestamp is provided, the current time will be used automatically.
### Custom Colors and Appearance
The Facebook theme uses CSS variables that can be customized to match your brand:
```css
:root {
css_variables: |
:root {
/* Base colors */
--fb-bg-light: #ffffff; /* Light mode background */
--fb-bg-dark: #242526; /* Dark mode background */
@@ -190,87 +43,29 @@ The Facebook theme uses CSS variables that can be customized to match your brand
--fb-info: #1876f2; /* Info color (Facebook blue) */
--fb-warning: #f7b928; /* Warning color */
--fb-error: #e41e3f; /* Error color */
}
```
}
## <i class="fa-solid fa-code"></i> HTML Structure
The Facebook theme generates notifications with the following HTML structure:
```html
<div class="fl-facebook fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-fb-notification">
<div class="fl-icon-container">
<div class="fl-fb-icon fl-fb-icon-[type]">
<!-- SVG icon -->
</div>
</div>
<div class="fl-content">
<div class="fl-message">Message text</div>
<div class="fl-meta">
<span class="fl-time">15:43</span>
</div>
</div>
<div class="fl-actions">
<button class="fl-button fl-close" aria-label="Close [type] message">
<div class="fl-button-icon">
<!-- Close SVG icon -->
</div>
</button>
</div>
</div>
</div>
```
This structure closely mimics Facebook's notification layout, including the circular icons, message content, timestamp, and close button.
## <i class="fa-solid fa-lightbulb"></i> Theme Features
### Facebook-Style Design
The Facebook theme accurately recreates Facebook's notification appearance with:
- Rounded notification cards with subtle shadows
- Circular colored icons for each notification type
- Timestamp display showing when the notification was created
- Interactive close button with hover effects
- Facebook's signature typography
### Dark Mode
The theme automatically adapts to system dark mode preferences without additional configuration, switching to Facebook's dark theme colors for a consistent experience.
### Accessibility Features
The Facebook theme includes several accessibility features:
- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
- **Reduced Motion**: Respects `prefers-reduced-motion` media query
- **Keyboard Access**: Close button is fully keyboard accessible
- **Color Contrast**: Maintains Facebook's visual identity while ensuring readability
- **Button Labels**: Close button has descriptive aria-label for screen readers
## <i class="fa-solid fa-browser"></i> Browser Support
The Facebook theme is compatible with all modern browsers:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Opera (latest)
- Mobile browsers on iOS and Android
## <i class="fa-solid fa-gears"></i> Implementation Details
The Facebook theme uses modern web technologies:
- **CSS Variables**: For theme customization and dark mode support
- **Facebook's Font Stack**: For authentic typography
- **SVG Icons**: For high-quality, resolution-independent icons
- **CSS Animations**: For subtle entrance effects
- **CSS Box Shadows**: For depth and dimension
- **Media Queries**: For responsive design, dark mode, and reduced motion support
All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
html_structure: |
<div class="fl-facebook fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-fb-notification">
<div class="fl-icon-container">
<div class="fl-fb-icon fl-fb-icon-[type]">
<!-- SVG icon -->
</div>
</div>
<div class="fl-content">
<div class="fl-message">Message text</div>
<div class="fl-meta">
<span class="fl-time">15:43</span>
</div>
</div>
<div class="fl-actions">
<button class="fl-button fl-close" aria-label="Close [type] message">
<div class="fl-button-icon">
<!-- Close SVG icon -->
</div>
</button>
</div>
</div>
</div>
---
docs/pages/themes/flasher.md
+1 -1
View File
@@ -4,7 +4,7 @@ permalink: /theme/flasher/
title: Flasher Theme
subtitle: The default notification system for PHPFlasher
description: The default notification theme for PHPFlasher with a clean design, colored borders, and accessible notifications for your web applications.
theme_name: flasher
theme_name: theme.flasher
theme_name_short: flasher
theme_class: fl
icon: fa-bolt
docs/pages/themes/google.md
+47 -269
View File
@@ -1,163 +1,33 @@
---
layout: theme
permalink: /theme/google/
title: Google Theme
subtitle: Material Design-inspired notifications
description: Add Material Design-inspired notifications to your application with the Google theme for PHPFlasher. Featuring Google's card-based layout, typography, and interactive elements like ripple effects.
handler: theme.google
data-controller: theme-google
---
theme_name: theme.google
theme_name_short: google
theme_class: fl-google
icon: fa-google
color: red
has_assets: true
## <i class="fa-brands fa-google"></i> Google Theme
visual_features:
- Material Design elevation with three-component shadow system
- Card-based layout with Google's signature typography
- Interactive ripple effect for tactile button feedback
- Progress bar showing time until auto-dismiss
- Responsive design that adapts to different screen sizes
The Google theme provides notifications inspired by Google's Material Design system, one of the most recognized design languages worldwide. It features Google's distinctive card-based layout, typography, elevation patterns, and interactive elements like ripple effects that will be immediately familiar to users of Google products.
accessibility_features:
- ARIA roles specific to each notification type
- Appropriate aria-live regions based on message importance
- Reduced motion option for users with motion sensitivity
- High contrast text meeting WCAG 2.1 AA standards
- Fully keyboard accessible with clear focus indicators
- Descriptive aria-labels for interactive elements
> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
> New to PHPFlasher? Check the [installation guide](/installation/) first.
## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup
The easiest way to use the Google theme is to set it as your **default theme**:
### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
```php
<?php // config/flasher.php
return [
'default' => 'theme.google', // Make Google the default theme
'themes' => [
'google' => [
'scripts' => [
'/vendor/flasher/themes/google.min.js',
],
'styles' => [
'/vendor/flasher/themes/google.min.css',
],
],
],
];
```
### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
```yaml
# config/packages/flasher.yaml
flasher:
default: theme.google # Make Google the default theme
themes:
google:
scripts:
- '/vendor/flasher/themes/google.min.js'
styles:
- '/vendor/flasher/themes/google.min.css'
```
### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript
```typescript
// Import the theme (if not auto-registered)
import { googleTheme } from '@flasher/flasher/themes';
flasher.addTheme('google', googleTheme);
// Set as default theme
flasher.defaultPlugin = 'theme.google';
// Or use it for specific notifications
flasher.success('Operation completed successfully');
```
## <i class="fa-solid fa-palette"></i> Notification Types
Once configured, use standard PHPFlasher methods to create notifications with Google styling:
{% assign successMessage = 'Operation completed successfully.' %}
{% assign errorMessage = 'An error occurred during the operation.' %}
{% assign warningMessage = 'This action cannot be undone.' %}
{% assign infoMessage = 'New updates are available.' %}
<script type="text/javascript">
messages['#/ google types'] = [
{
handler: 'theme.google',
type: 'success',
message: '{{ successMessage }}',
title: 'Success',
options: { theme: 'google' },
},
{
handler: 'theme.google',
type: 'error',
message: '{{ errorMessage }}',
title: 'Error',
options: { theme: 'google' },
},
{
handler: 'theme.google',
type: 'warning',
message: '{{ warningMessage }}',
title: 'Warning',
options: { theme: 'google' },
},
{
handler: 'theme.google',
type: 'info',
message: '{{ infoMessage }}',
title: 'Information',
options: { theme: 'google' },
}
];
</script>
### PHP
```php
#/ google types
// With Google set as default theme
flash()->success('{{ successMessage }}', 'Success');
flash()->error('{{ errorMessage }}', 'Error');
flash()->warning('{{ warningMessage }}', 'Warning');
flash()->info('{{ infoMessage }}', 'Information');
```
### JavaScript
```javascript
// With Google set as default theme
flasher.success('{{ successMessage }}', 'Success');
flasher.error('{{ errorMessage }}', 'Error');
flasher.warning('{{ warningMessage }}', 'Warning');
flasher.info('{{ infoMessage }}', 'Information');
```
## <i class="fa-solid fa-brush"></i> Customization
### Using Google Theme for Specific Notifications
If Google isn't your default theme, you can use it for specific notifications:
#### PHP
```php
flash()
->use('theme.google')
->success('This notification uses Google theme.');
```
#### JavaScript
```javascript
flasher.use('theme.google').success('This notification uses Google theme.');
```
### Custom Colors and Appearance
The Google theme uses CSS variables that can be customized to match your brand while maintaining the Material Design feel:
```css
:root {
css_variables: |
:root {
/* Base appearance */
--md-bg-light: #ffffff; /* Light mode background */
--md-bg-dark: #2d2d2d; /* Dark mode background */
@@ -177,120 +47,28 @@ The Google theme uses CSS variables that can be customized to match your brand w
/* Animation timing */
--md-animation-duration: 0.3s; /* Entrance animation duration */
--md-ripple-duration: 0.6s; /* Button ripple effect duration */
}
```
}
## <i class="fa-solid fa-code"></i> HTML Structure
The Google theme generates notifications with the following HTML structure:
```html
<div class="fl-google fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-md-card">
<div class="fl-content">
<div class="fl-icon-wrapper">
<!-- SVG icon -->
</div>
<div class="fl-text-content">
<div class="fl-title">Title (if provided)</div>
<div class="fl-message">Message text</div>
</div>
</div>
<div class="fl-actions">
<button class="fl-action-button fl-close" aria-label="Close [type] message">
DISMISS
</button>
</div>
</div>
<div class="fl-progress-bar">
<div class="fl-progress"></div>
</div>
</div>
```
This structure follows Material Design principles with cards, proper typography hierarchy, and interactive elements.
## <i class="fa-solid fa-lightbulb"></i> Theme Features
### Material Design Elements
#### Elevation
The theme uses proper Material Design elevation with three shadow components:
1. **Umbra**: The darkest, sharpest shadow representing the main shadow
2. **Penumbra**: The mid-tone, slightly softer shadow
3. **Ambient**: The lightest, most diffuse shadow
This creates the characteristic Material Design "floating" effect for cards.
#### Typography
Following Material Design typography guidelines:
- **Title**: 16px (1rem), medium weight (500)
- **Message**: 14px (0.875rem), regular weight (400), 60% opacity for secondary text
- **Button**: 13px (0.8125rem), medium weight (500), uppercase with letterSpacing
#### Ripple Effect
The theme includes Material Design's signature "ink ripple" effect:
1. A small circle appears at the point of interaction
2. The circle rapidly expands outward
3. The effect fades out as it reaches full size
This provides visual feedback that enhances the tactile feeling of the interface.
### Dark Mode
The Google theme implements Material Design's dark theme guidelines:
- Dark surfaces (#2d2d2d)
- Light text (87% white for primary, 60% white for secondary)
- Adjusted shadows for better visibility on dark backgrounds
- Higher contrast for hover states (8% opacity instead of 4%)
### Accessibility Features
The Google theme includes several accessibility features:
- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
- **Reduced Motion**: Respects `prefers-reduced-motion` media query and disables animations
- **Keyboard Access**: Action button is fully keyboard accessible
- **Color Contrast**: All text meets WCAG 2.1 AA color contrast standards
- **Text Alternatives**: Descriptive aria-labels for interactive elements
## <i class="fa-solid fa-browser"></i> Browser Support
The Google theme is compatible with all modern browsers:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Opera (latest)
- Mobile browsers on iOS and Android
The ripple effect and other animations may have slightly different appearances across browsers, but the core functionality works everywhere.
## <i class="fa-solid fa-gears"></i> Implementation Details
The Google theme uses modern web technologies:
- **CSS Variables**: For theme customization and dark mode support
- **Material Design Elevation**: Proper shadow implementation for depth
- **Ripple Animation**: For tactile button feedback
- **CSS Animations**: With Material Design easing curves
- **Linear Progress**: For countdown visualization
- **Roboto Font**: Falls back to system fonts if unavailable
- **Media Queries**: For responsive design, dark mode, and reduced motion support
All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
For the best experience, it's recommended to include the Roboto font in your project:
```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
```
html_structure: |
<div class="fl-google fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-md-card">
<div class="fl-content">
<div class="fl-icon-wrapper">
<!-- SVG icon -->
</div>
<div class="fl-text-content">
<div class="fl-title">Title (if provided)</div>
<div class="fl-message">Message text</div>
</div>
</div>
<div class="fl-actions">
<button class="fl-action-button fl-close" aria-label="Close [type] message">
DISMISS
</button>
</div>
</div>
<div class="fl-progress-bar">
<div class="fl-progress"></div>
</div>
</div>
---
docs/pages/themes/ios.md
+45 -257
View File
@@ -1,163 +1,33 @@
---
layout: theme
permalink: /theme/ios/
title: iOS Theme
subtitle: Apple-style notification system
description: Add Apple iOS-style notifications to your application with the iOS theme for PHPFlasher. Featuring frosted glass effects, app icons, and animations that mimic native iOS notifications.
handler: theme.ios
data-controller: theme-ios
---
theme_name: theme.ios
theme_name_short: ios
theme_class: fl-ios
icon: fa-apple
color: slate
has_assets: true
## <i class="fa-brands fa-apple"></i> iOS Theme
visual_features:
- Apple's signature frosted glass backdrop effect
- App icon design with colored backgrounds
- Real-time timestamp display in iOS format
- Smooth entrance and content expansion animations
- Adaptive design that matches iOS light and dark mode
The iOS theme provides notifications styled after Apple's iOS notification system, creating a familiar experience for users of iPhones and iPads. It features Apple's distinctive frosted glass effect, app icon style, and subtle animations that mimic native iOS notifications.
accessibility_features:
- Type-specific ARIA roles for screen readers
- Appropriate aria-live regions based on message importance
- Reduced motion option for motion-sensitive users
- High contrast text that adapts to light and dark modes
- Fully keyboard accessible close button
- Mobile-optimized responsive layout
> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
> New to PHPFlasher? Check the [installation guide](/installation/) first.
## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup
The easiest way to use the iOS theme is to set it as your **default theme**:
### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
```php
<?php // config/flasher.php
return [
'default' => 'theme.ios', // Make iOS the default theme
'themes' => [
'ios' => [
'scripts' => [
'/vendor/flasher/themes/ios.min.js',
],
'styles' => [
'/vendor/flasher/themes/ios.min.css',
],
],
],
];
```
### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
```yaml
# config/packages/flasher.yaml
flasher:
default: theme.ios # Make iOS the default theme
themes:
ios:
scripts:
- '/vendor/flasher/themes/ios.min.js'
styles:
- '/vendor/flasher/themes/ios.min.css'
```
### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript
```typescript
// Import the theme (if not auto-registered)
import { iosTheme } from '@flasher/flasher/themes';
flasher.addTheme('ios', iosTheme);
// Set as default theme
flasher.defaultPlugin = 'theme.ios';
// Or use it for specific notifications
flasher.success('Your photo was uploaded successfully');
```
## <i class="fa-solid fa-palette"></i> Notification Types
Once configured, use standard PHPFlasher methods to create notifications with iOS styling:
{% assign successMessage = 'Your photo was uploaded successfully.' %}
{% assign errorMessage = 'Unable to connect to server.' %}
{% assign warningMessage = 'Low storage space on your device.' %}
{% assign infoMessage = 'New software update available.' %}
<script type="text/javascript">
messages['#/ ios types'] = [
{
handler: 'theme.ios',
type: 'success',
message: '{{ successMessage }}',
title: 'Photos',
options: { theme: 'ios' },
},
{
handler: 'theme.ios',
type: 'error',
message: '{{ errorMessage }}',
title: 'Settings',
options: { theme: 'ios' },
},
{
handler: 'theme.ios',
type: 'warning',
message: '{{ warningMessage }}',
title: 'Storage',
options: { theme: 'ios' },
},
{
handler: 'theme.ios',
type: 'info',
message: '{{ infoMessage }}',
title: 'App Store',
options: { theme: 'ios' },
}
];
</script>
### PHP
```php
#/ ios types
// With iOS set as default theme
flash()->success('{{ successMessage }}', 'Photos');
flash()->error('{{ errorMessage }}', 'Settings');
flash()->warning('{{ warningMessage }}', 'Storage');
flash()->info('{{ infoMessage }}', 'App Store');
```
### JavaScript
```javascript
// With iOS set as default theme
flasher.success('{{ successMessage }}', 'Photos');
flasher.error('{{ errorMessage }}', 'Settings');
flasher.warning('{{ warningMessage }}', 'Storage');
flasher.info('{{ infoMessage }}', 'App Store');
```
## <i class="fa-solid fa-brush"></i> Customization
### Using iOS Theme for Specific Notifications
If iOS isn't your default theme, you can use it for specific notifications:
#### PHP
```php
flash()
->use('theme.ios')
->success('This notification uses iOS theme.', 'Photos');
```
#### JavaScript
```javascript
flasher.use('theme.ios').success('This notification uses iOS theme.', 'Photos');
```
### Custom Colors and Appearance
The iOS theme uses CSS variables that can be customized to match your brand while maintaining the iOS look:
```css
:root {
css_variables: |
:root {
/* Base appearance */
--ios-bg-light: rgba(255, 255, 255, 0.85); /* Light mode background */
--ios-bg-dark: rgba(30, 30, 30, 0.85); /* Dark mode background */
@@ -173,108 +43,26 @@ The iOS theme uses CSS variables that can be customized to match your brand whil
--ios-info: #007aff; /* iOS blue */
--ios-warning: #ff9500; /* iOS orange */
--ios-error: #ff3b30; /* iOS red */
}
```
}
## <i class="fa-solid fa-code"></i> HTML Structure
The iOS theme generates notifications with the following HTML structure:
```html
<div class="fl-ios fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-ios-notification">
<div class="fl-header">
<div class="fl-app-icon">
<!-- SVG icon -->
</div>
<div class="fl-app-info">
<div class="fl-app-name">App Name/Title</div>
<div class="fl-time">2025-03-10 00:14:11</div>
</div>
</div>
<div class="fl-content">
<div class="fl-message">Message text</div>
</div>
<button class="fl-close" aria-label="Close [type] message">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
```
This structure mimics the iOS notification layout, including the app icon, app name, current time, and message content.
## <i class="fa-solid fa-lightbulb"></i> Theme Features
### iOS-Specific Design Elements
#### Frosted Glass Effect
The iOS theme uses `backdrop-filter: blur()` to create Apple's signature frosted glass effect. This creates a semi-transparent background that blurs content behind the notification.
#### App Icon
The app icon follows iOS design principles:
- Square with slightly rounded corners (5px radius)
- Colored background based on notification type
- White icon centered within the square
#### Real-Time Timestamp
The theme automatically displays the current time in the iOS format (HH:MM), just like native iOS notifications.
#### Smooth Animations
The iOS theme features two carefully crafted animations:
1. **Entrance Animation**: Slides in from above with a subtle scaling effect
2. **Content Expansion**: The content area expands with a slight delay after the header appears
These animations mimic the iOS notification animation style with a quick start and gentle end.
### Dark Mode
The theme automatically adapts to system dark mode preferences, switching to the iOS dark appearance:
- Dark semi-transparent background
- Light text
- Adjusted shadows for better visibility
- Lighter close button background
### Accessibility Features
The iOS theme includes several accessibility features:
- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
- **Reduced Motion**: Respects `prefers-reduced-motion` media query and disables animations
- **Keyboard Access**: Close button is fully keyboard accessible
- **Color Contrast**: Maintains proper contrast ratios in both light and dark modes
- **Mobile Optimization**: Responsive design that adjusts for small screens
## <i class="fa-solid fa-browser"></i> Browser Support
The iOS theme is compatible with all modern browsers:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Opera (latest)
- Mobile browsers on iOS and Android
For browsers that don't support backdrop-filter, the theme gracefully degrades to using just the semi-transparent background without blur.
## <i class="fa-solid fa-gears"></i> Implementation Details
The iOS theme uses modern web technologies:
- **CSS Variables**: For theme customization and dark mode support
- **Backdrop Filter**: For the frosted glass effect
- **CSS Animations**: For entrance and content expansion effects
- **San Francisco Font**: Uses Apple's system font stack with appropriate fallbacks
- **Real-Time Timestamps**: Automatically displays current time in iOS format
- **Media Queries**: For responsive design, dark mode, and reduced motion support
All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
**Note:** The title parameter is used as the "app name" in the notification. If no title is provided, it defaults to "PHPFlasher".
html_structure: |
<div class="fl-ios fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-ios-notification">
<div class="fl-header">
<div class="fl-app-icon">
<!-- SVG icon -->
</div>
<div class="fl-app-info">
<div class="fl-app-name">App Name/Title</div>
<div class="fl-time">2025-03-10 00:14:11</div>
</div>
</div>
<div class="fl-content">
<div class="fl-message">Message text</div>
</div>
<button class="fl-close" aria-label="Close [type] message">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
---
docs/pages/themes/jade.md
+34 -243
View File
@@ -1,159 +1,32 @@
---
layout: theme
permalink: /theme/jade/
title: Jade Theme
subtitle: Calm, minimalist notification system
description: Enhance your notifications with the calm, minimalist Jade theme for PHPFlasher. Featuring soft colors, rounded corners, and subtle animations for a soothing user experience.
handler: theme.jade
data-controller: theme-jade
---
theme_name: theme.jade
theme_name_short: jade
theme_class: fl-jade
icon: fa-leaf
color: green
has_assets: true
## <i class="fa-solid fa-leaf"></i> Jade Theme
visual_features:
- Soft, pastel colors with generous padding for a calm appearance
- Rounded corners (1rem radius) creating a gentle, friendly feel
- Refined entrance animation combining fade, scaling and movement
- Clean design that emphasizes content without unnecessary elements
The Jade theme provides a calm, minimalist notification style with soft colors and subtle animations. It features a clean design that emphasizes message content through generous padding, rounded corners, and type-specific color schemes. The theme takes its name from the natural, soothing quality of its appearance.
accessibility_features:
- 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 background and text colors
- Fully keyboard accessible close button with visual feedback
- Descriptive aria-labels for interactive elements
> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
> New to PHPFlasher? Check the [installation guide](/installation/) first.
## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup
The easiest way to use the Jade theme is to set it as your **default theme**:
### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
```php
<?php // config/flasher.php
return [
'default' => 'theme.jade', // Make Jade the default theme
'themes' => [
'jade' => [
'scripts' => [
'/vendor/flasher/themes/jade.min.js',
],
'styles' => [
'/vendor/flasher/themes/jade.min.css',
],
],
],
];
```
### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
```yaml
# config/packages/flasher.yaml
flasher:
default: theme.jade # Make Jade the default theme
themes:
jade:
scripts:
- '/vendor/flasher/themes/jade.min.js'
styles:
- '/vendor/flasher/themes/jade.min.css'
```
### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript
```typescript
// Import the theme (if not auto-registered)
import { jadeTheme } from '@flasher/flasher/themes';
flasher.addTheme('jade', jadeTheme);
// Set as default theme
flasher.defaultPlugin = 'theme.jade';
// Or use it for specific notifications
flasher.success('Your changes have been saved');
```
## <i class="fa-solid fa-palette"></i> Notification Types
Once configured, use standard PHPFlasher methods to create notifications with Jade styling:
{% assign successMessage = 'Your changes have been saved successfully.' %}
{% assign errorMessage = 'An error occurred while saving your changes.' %}
{% assign warningMessage = 'Your session will expire in 5 minutes.' %}
{% assign infoMessage = 'New features have been added to your dashboard.' %}
<script type="text/javascript">
messages['#/ jade types'] = [
{
handler: 'theme.jade',
type: 'success',
message: '{{ successMessage }}',
options: { theme: 'jade' },
},
{
handler: 'theme.jade',
type: 'error',
message: '{{ errorMessage }}',
options: { theme: 'jade' },
},
{
handler: 'theme.jade',
type: 'warning',
message: '{{ warningMessage }}',
options: { theme: 'jade' },
},
{
handler: 'theme.jade',
type: 'info',
message: '{{ infoMessage }}',
options: { theme: 'jade' },
}
];
</script>
### PHP
```php
#/ jade types
// With Jade set as default theme
flash()->success('{{ successMessage }}');
flash()->error('{{ errorMessage }}');
flash()->warning('{{ warningMessage }}');
flash()->info('{{ infoMessage }}');
```
### JavaScript
```javascript
// With Jade set as default theme
flasher.success('{{ successMessage }}');
flasher.error('{{ errorMessage }}');
flasher.warning('{{ warningMessage }}');
flasher.info('{{ infoMessage }}');
```
## <i class="fa-solid fa-brush"></i> Customization
### Using Jade Theme for Specific Notifications
If Jade isn't your default theme, you can use it for specific notifications:
#### PHP
```php
flash()
->use('theme.jade')
->success('This notification uses Jade theme.');
```
#### JavaScript
```javascript
flasher.use('theme.jade').success('This notification uses Jade theme.');
```
### Custom Colors and Appearance
The Jade theme uses CSS variables that can be customized to match your brand while maintaining its calm aesthetic:
```css
:root {
css_variables: |
:root {
/* Base appearance */
--jade-text-light: #5f6c7b; /* Text color in light mode */
--jade-text-dark: #e2e8f0; /* Text color in dark mode */
@@ -174,98 +47,16 @@ The Jade theme uses CSS variables that can be customized to match your brand whi
--jade-info-bg-dark: rgba(59, 130, 246, 0.15); /* Dark mode info */
--jade-warning-bg-dark: rgba(245, 158, 11, 0.15); /* Dark mode warning */
--jade-error-bg-dark: rgba(220, 38, 38, 0.15); /* Dark mode error */
}
```
}
## <i class="fa-solid fa-code"></i> HTML Structure
The Jade theme generates notifications with the following HTML structure:
```html
<div class="fl-jade fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Message text</div>
<button class="fl-close" aria-label="Close [type] message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress"></div>
</div>
</div>
```
This minimalist structure focuses on content by omitting icons and unnecessary UI elements for a cleaner, more elegant look.
## <i class="fa-solid fa-lightbulb"></i> Theme Features
### Design Philosophy
The Jade theme embodies several design principles:
1. **Simplicity**: Only essential elements are included, with no icons or extraneous components
2. **Softness**: Rounded corners, pastel colors, and subtle transitions create a gentle feel
3. **Clarity**: Clear color coding with strong contrast between background and text
4. **Refinement**: Thoughtful attention to details like animation timing and hover states
5. **Consistency**: Each notification type follows the same pattern with its own color scheme
### Color System
The Jade theme uses a dual-color system for each notification type:
- **Background**: Very light, pastel version of the type color (e.g., very light green for success)
- **Text/Accents**: More saturated version of the same color (e.g., medium green for success text)
This approach maintains excellent readability while providing clear visual differentiation between notification types.
### Animation
The Jade theme features a refined entrance animation that combines scaling and movement:
- Notifications fade in from invisible to fully visible
- They move upward slightly from their initial position
- They scale from 95% to 100% of their final size
This combination creates a more organic, refined entrance than simple fades or slides, using a carefully tuned easing curve for a natural feel.
### Dark Mode
The theme automatically adapts to system dark mode preferences, with semi-transparent colored backgrounds that create a subtle glow effect:
- Base text becomes lighter (#e2e8f0)
- Backgrounds use semi-transparent colored overlays (15% opacity)
- Hover states use white instead of black (10% white opacity)
This creates a cohesive dark appearance that maintains the theme's calm aesthetic.
### Accessibility Features
The Jade theme includes several accessibility features:
- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
- **Reduced Motion**: Respects `prefers-reduced-motion` media query
- **Keyboard Access**: Close button is fully keyboard accessible with visual feedback
- **Color Contrast**: All text meets WCAG 2.1 AA color contrast standards
- **Button Labeling**: Close button has descriptive aria-label for screen readers
## <i class="fa-solid fa-browser"></i> Browser Support
The Jade theme is compatible with all modern browsers:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Opera (latest)
- Mobile browsers on iOS and Android
## <i class="fa-solid fa-gears"></i> Implementation Details
The Jade theme uses modern web technologies:
- **CSS Variables**: For theme customization and dark mode support
- **CSS Animations**: For refined entrance effects
- **CSS Transitions**: For smooth hover interactions
- **Progress Bar**: Shows countdown until notification dismissal
- **Media Queries**: For responsive design, dark mode, and reduced motion support
All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
html_structure: |
<div class="fl-jade fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Message text</div>
<button class="fl-close" aria-label="Close [type] message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress"></div>
</div>
</div>
---
docs/pages/themes/material.md
+43 -281
View File
@@ -1,159 +1,33 @@
---
layout: theme
permalink: /theme/material/
title: Material Theme
subtitle: Minimalist Material Design notifications
description: Add minimalist Material Design notifications to your application with the Material theme for PHPFlasher. Featuring clean cards, proper elevation, and interactive elements following Material guidelines.
handler: theme.material
data-controller: theme-material
---
theme_name: theme.material
theme_name_short: material
theme_class: fl-material
icon: fa-square
color: indigo
has_assets: true
## <i class="fa-solid fa-square"></i> Material Theme
visual_features:
- Clean card design with proper Material Design elevation
- Minimalist appearance focusing entirely on message content
- Interactive elements with signature Material ripple effect
- Progress bar showing time until auto-dismiss
- Subtle slide-up entrance animation with Material motion curve
The Material theme provides a minimalist implementation of Google's Material Design system for notifications. It features clean cards with proper elevation, Material Design typography, and interactive elements that follow Material guidelines, all without unnecessary visual elements to maintain focus on the message content.
accessibility_features:
- ARIA roles specific to each notification type
- Appropriate aria-live regions based on message importance
- Reduced motion option for users with motion sensitivity
- High contrast text meeting WCAG 2.1 AA standards
- Fully keyboard accessible with clear focus indicators
- Descriptive aria-labels for interactive elements
> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
> New to PHPFlasher? Check the [installation guide](/installation/) first.
## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup
The easiest way to use the Material theme is to set it as your **default theme**:
### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
```php
<?php // config/flasher.php
return [
'default' => 'theme.material', // Make Material the default theme
'themes' => [
'material' => [
'scripts' => [
'/vendor/flasher/themes/material.min.js',
],
'styles' => [
'/vendor/flasher/themes/material.min.css',
],
],
],
];
```
### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
```yaml
# config/packages/flasher.yaml
flasher:
default: theme.material # Make Material the default theme
themes:
material:
scripts:
- '/vendor/flasher/themes/material.min.js'
styles:
- '/vendor/flasher/themes/material.min.css'
```
### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript
```typescript
// Import the theme (if not auto-registered)
import { materialTheme } from '@flasher/flasher/themes';
flasher.addTheme('material', materialTheme);
// Set as default theme
flasher.defaultPlugin = 'theme.material';
// Or use it for specific notifications
flasher.success('Operation completed successfully');
```
## <i class="fa-solid fa-palette"></i> Notification Types
Once configured, use standard PHPFlasher methods to create notifications with Material styling:
{% assign successMessage = 'Operation completed successfully.' %}
{% assign errorMessage = 'An error occurred during the operation.' %}
{% assign warningMessage = 'This action cannot be undone.' %}
{% assign infoMessage = 'New updates are available.' %}
<script type="text/javascript">
messages['#/ material types'] = [
{
handler: 'theme.material',
type: 'success',
message: '{{ successMessage }}',
options: { theme: 'material' },
},
{
handler: 'theme.material',
type: 'error',
message: '{{ errorMessage }}',
options: { theme: 'material' },
},
{
handler: 'theme.material',
type: 'warning',
message: '{{ warningMessage }}',
options: { theme: 'material' },
},
{
handler: 'theme.material',
type: 'info',
message: '{{ infoMessage }}',
options: { theme: 'material' },
}
];
</script>
### PHP
```php
#/ material types
// With Material set as default theme
flash()->success('{{ successMessage }}');
flash()->error('{{ errorMessage }}');
flash()->warning('{{ warningMessage }}');
flash()->info('{{ infoMessage }}');
```
### JavaScript
```javascript
// With Material set as default theme
flasher.success('{{ successMessage }}');
flasher.error('{{ errorMessage }}');
flasher.warning('{{ warningMessage }}');
flasher.info('{{ infoMessage }}');
```
## <i class="fa-solid fa-brush"></i> Customization
### Using Material Theme for Specific Notifications
If Material isn't your default theme, you can use it for specific notifications:
#### PHP
```php
flash()
->use('theme.material')
->success('This notification uses Material theme.');
```
#### JavaScript
```javascript
flasher.use('theme.material').success('This notification uses Material theme.');
```
### Custom Colors and Appearance
The Material theme uses CSS variables that can be customized to match your brand while maintaining the Material Design feel:
```css
:root {
css_variables: |
:root {
/* Base appearance */
--md-bg-light: #ffffff; /* Light mode background */
--md-bg-dark: #2d2d2d; /* Dark mode background */
@@ -173,136 +47,24 @@ The Material theme uses CSS variables that can be customized to match your brand
/* Animation timing */
--md-animation-duration: 0.3s; /* Entrance animation duration */
--md-ripple-duration: 0.6s; /* Button ripple effect duration */
}
```
}
## <i class="fa-solid fa-code"></i> HTML Structure
The Material theme generates notifications with the following HTML structure:
```html
<div class="fl-material fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-md-card">
<div class="fl-content">
<div class="fl-text-content">
<div class="fl-message">Message text</div>
</div>
</div>
<div class="fl-actions">
<button class="fl-action-button fl-close" aria-label="Close [type] message">
DISMISS
</button>
</div>
</div>
<div class="fl-progress-bar">
<div class="fl-progress"></div>
</div>
</div>
```
This minimalist structure focuses on content by omitting unnecessary UI elements for a cleaner appearance.
## <i class="fa-solid fa-lightbulb"></i> Theme Features
### Material Design Elements
#### Elevation
The theme uses proper Material Design elevation with three shadow components:
1. **Umbra**: The darkest, sharpest shadow representing the main shadow
2. **Penumbra**: The mid-tone, slightly softer shadow
3. **Ambient**: The lightest, most diffuse shadow
This creates the characteristic Material Design "floating" effect for cards.
#### Typography
Following Material Design typography guidelines:
- **Message**: 14px (0.875rem), regular weight (400), 60% opacity for secondary text
- **Button**: 13px (0.8125rem), medium weight (500), uppercase with letterSpacing
#### Ripple Effect
The theme includes Material Design's signature "ink ripple" effect:
1. A small circle appears at the point of interaction
2. The circle rapidly expands outward
3. The effect fades out as it reaches full size
This provides visual feedback that enhances the tactile feeling of the interface.
### Animation Details
The Material theme uses Material Design's standard motion curve (cubic-bezier(0.4, 0, 0.2, 1)) for its slide-up animation. This creates a natural-feeling motion that follows the principles of Material motion:
- Quick acceleration from start
- Smooth deceleration to end
- Total duration of 300ms
The theme also includes several interaction animations:
1. **Button Hover**: Background color transition (200ms)
2. **Button Press**: Ripple effect (600ms)
3. **Progress Bar**: Linear progress animation
### Differences from Google Theme
While both the Material theme and Google theme follow Material Design guidelines, they differ in these key ways:
1. **Minimalist Approach**: The Material theme omits icons entirely for a more streamlined appearance
2. **Focus on Content**: With fewer visual elements, more focus is placed on the message text
3. **Simplified Structure**: The HTML structure is more straightforward without icon containers
### Dark Mode
The Material theme implements Material Design's dark theme guidelines:
- Dark surfaces (#2d2d2d)
- Light text (87% white for primary, 60% white for secondary)
- Adjusted shadows for better visibility on dark backgrounds
- Higher contrast for hover states (8% opacity instead of 4%)
### Accessibility Features
The Material theme includes several accessibility features:
- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
- **Reduced Motion**: Respects `prefers-reduced-motion` media query and disables animations
- **Keyboard Access**: Action button is fully keyboard accessible
- **Color Contrast**: All text meets WCAG 2.1 AA color contrast standards
- **Text Alternatives**: Descriptive aria-labels for interactive elements
## <i class="fa-solid fa-browser"></i> Browser Support
The Material theme is compatible with all modern browsers:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Opera (latest)
- Mobile browsers on iOS and Android
The ripple effect and other animations may have slightly different appearances across browsers, but the core functionality works everywhere.
## <i class="fa-solid fa-gears"></i> Implementation Details
The Material theme uses modern web technologies:
- **CSS Variables**: For theme customization and dark mode support
- **Material Design Elevation**: Proper shadow implementation for depth
- **Ripple Animation**: For tactile button feedback
- **CSS Animations**: With Material Design easing curves
- **Linear Progress**: For countdown visualization
- **Media Queries**: For responsive design, dark mode, and reduced motion support
All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
For the best experience, it's recommended to include the Roboto font in your project:
```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
```
html_structure: |
<div class="fl-material fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-md-card">
<div class="fl-content">
<div class="fl-text-content">
<div class="fl-message">Message text</div>
</div>
</div>
<div class="fl-actions">
<button class="fl-action-button fl-close" aria-label="Close [type] message">
DISMISS
</button>
</div>
</div>
<div class="fl-progress-bar">
<div class="fl-progress"></div>
</div>
</div>
---
docs/pages/themes/minimal.md
+36 -246
View File
@@ -1,159 +1,33 @@
---
layout: theme
permalink: /theme/minimal/
title: Minimal Theme
subtitle: Ultra-clean, distraction-free notification system
description: Enhance your application with ultra-clean, distraction-free notifications using the Minimal theme for PHPFlasher. Featuring a translucent design with subtle styling for unobtrusive messaging.
handler: theme.minimal
data-controller: theme-minimal
---
theme_name: theme.minimal
theme_name_short: minimal
theme_class: fl-minimal
icon: fa-minus
color: gray
has_assets: true
## <i class="fa-solid fa-minus"></i> Minimal Theme
visual_features:
- Ultra-clean design with minimal visual elements
- Subtle translucent background with frosted glass effect
- Small colored dot to indicate notification type
- Compact size and spacing for unobtrusive appearance
- System fonts for optimal native readability
The Minimal theme provides an ultra-clean, distraction-free notification design that prioritizes simplicity and unobtrusiveness. With its compact dimensions, subtle visual styling, and reduced visual elements, this theme is perfect for applications where notifications should provide information without competing for attention with the main interface.
accessibility_features:
- Type-specific ARIA roles for screen readers
- Appropriate aria-live regions based on message importance
- Reduced motion adaptation for users with motion sensitivity
- Color indications that don't rely solely on color
- System fonts that respect user's platform for improved readability
- Fully keyboard accessible close button
> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
> New to PHPFlasher? Check the [installation guide](/installation/) first.
## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup
The easiest way to use the Minimal theme is to set it as your **default theme**:
### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
```php
<?php // config/flasher.php
return [
'default' => 'theme.minimal', // Make Minimal the default theme
'themes' => [
'minimal' => [
'scripts' => [
'/vendor/flasher/themes/minimal.min.js',
],
'styles' => [
'/vendor/flasher/themes/minimal.min.css',
],
],
],
];
```
### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
```yaml
# config/packages/flasher.yaml
flasher:
default: theme.minimal # Make Minimal the default theme
themes:
minimal:
scripts:
- '/vendor/flasher/themes/minimal.min.js'
styles:
- '/vendor/flasher/themes/minimal.min.css'
```
### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript
```typescript
// Import the theme (if not auto-registered)
import { minimalTheme } from '@flasher/flasher/themes';
flasher.addTheme('minimal', minimalTheme);
// Set as default theme
flasher.defaultPlugin = 'theme.minimal';
// Or use it for specific notifications
flasher.success('Changes saved');
```
## <i class="fa-solid fa-palette"></i> Notification Types
Once configured, use standard PHPFlasher methods to create notifications with Minimal styling:
{% assign successMessage = 'Changes saved.' %}
{% assign errorMessage = 'Connection lost.' %}
{% assign warningMessage = 'Low disk space.' %}
{% assign infoMessage = 'Updates available.' %}
<script type="text/javascript">
messages['#/ minimal types'] = [
{
handler: 'theme.minimal',
type: 'success',
message: '{{ successMessage }}',
options: { theme: 'minimal' },
},
{
handler: 'theme.minimal',
type: 'error',
message: '{{ errorMessage }}',
options: { theme: 'minimal' },
},
{
handler: 'theme.minimal',
type: 'warning',
message: '{{ warningMessage }}',
options: { theme: 'minimal' },
},
{
handler: 'theme.minimal',
type: 'info',
message: '{{ infoMessage }}',
options: { theme: 'minimal' },
}
];
</script>
### PHP
```php
#/ minimal types
// With Minimal set as default theme
flash()->success('{{ successMessage }}');
flash()->error('{{ errorMessage }}');
flash()->warning('{{ warningMessage }}');
flash()->info('{{ infoMessage }}');
```
### JavaScript
```javascript
// With Minimal set as default theme
flasher.success('{{ successMessage }}');
flasher.error('{{ errorMessage }}');
flasher.warning('{{ warningMessage }}');
flasher.info('{{ infoMessage }}');
```
## <i class="fa-solid fa-brush"></i> Customization
### Using Minimal Theme for Specific Notifications
If Minimal isn't your default theme, you can use it for specific notifications:
#### PHP
```php
flash()
->use('theme.minimal')
->success('This notification uses Minimal theme.');
```
#### JavaScript
```javascript
flasher.use('theme.minimal').success('This notification uses Minimal theme.');
```
### Custom Colors and Appearance
The Minimal theme uses CSS variables that can be customized to match your brand:
```css
:root {
css_variables: |
:root {
/* Base appearance */
--minimal-bg-light: rgba(255, 255, 255, 0.8); /* Light mode background */
--minimal-bg-dark: rgba(25, 25, 25, 0.8); /* Dark mode background */
@@ -170,101 +44,17 @@ The Minimal theme uses CSS variables that can be customized to match your brand:
/* Additional customization */
--minimal-blur: 8px; /* Backdrop blur amount */
--minimal-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Shadow */
}
```
## <i class="fa-solid fa-code"></i> HTML Structure
The Minimal theme generates notifications with the following HTML structure:
```html
<div class="fl-minimal fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-content">
<div class="fl-dot"></div>
<div class="fl-message">Message text</div>
<button class="fl-close" aria-label="Close [type] message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress"></div>
</div>
</div>
```
This structure is deliberately minimalist, with just a small colored dot to indicate notification type and a thin progress bar at the bottom.
## <i class="fa-solid fa-lightbulb"></i> Theme Features
### Design Philosophy
The Minimal theme embodies several key design principles:
1. **Reduction**: Eliminating all non-essential visual elements
2. **Unobtrusiveness**: Staying out of the way while delivering information
3. **Clarity**: Maintaining excellent readability with system fonts
4. **Subtlety**: Using transparency, small indicators, and minimal animation
5. **Consistency**: Applying the same minimal approach to all aspects
The theme deliberately avoids large icons, bold colors, or pronounced animations that might distract users from their primary tasks. The small colored dot provides just enough visual indication of the notification type without overwhelming the interface.
### Visual Characteristics
#### Frosted Glass Effect
The theme uses a semi-transparent background (80% opacity) with an 8px backdrop blur, creating a subtle "frosted glass" effect that lets the underlying content partially show through.
#### System Font Stack
The theme uses the system UI font of the user's device (San Francisco on Apple devices, Segoe UI on Windows, etc.), ensuring that notifications look native to the platform.
#### Compact Size and Spacing
- **Max Width**: 320px
- **Padding**: 0.75rem 1rem (12px 16px at default font size)
- **Text Size**: 0.875rem (14px at default font size)
- **Dot Size**: 8px diameter
#### Quick Animation
The entrance animation is intentionally brief (0.2s) and subtle, with just a small movement from above and fade-in effect.
### Dark Mode
The theme automatically adapts to system dark mode preferences, with a dark semi-transparent background and light text that maintains the minimal aesthetic while ensuring readability.
### Accessibility Features
The Minimal theme includes several accessibility features:
- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
- **Reduced Motion**: Respects `prefers-reduced-motion` media query
- **Keyboard Access**: Close button is fully keyboard accessible
- **Color Indications**: Uses color dots to indicate type without relying solely on color
- **System Fonts**: Improved readability through native font rendering
- **Adequate Contrast**: Maintains good contrast ratio between text and background
## <i class="fa-solid fa-browser"></i> Browser Support
The Minimal theme is compatible with all modern browsers:
- Chrome (latest)
- Firefox (latest) - falls back gracefully to semi-transparent background without blur
- Safari (latest)
- Edge (latest)
- Opera (latest)
- Mobile browsers on iOS and Android
## <i class="fa-solid fa-gears"></i> Implementation Details
The Minimal theme uses modern web technologies:
- **CSS Variables**: For theme customization and dark mode support
- **Backdrop Filter**: For the subtle frosted glass effect
- **System Font Stack**: For optimal readability with native fonts
- **CSS Transitions**: For subtle hover effects
- **CSS Animations**: For quick, minimal entrance animation
- **Performance Optimization**: Uses `will-change: transform, opacity` for smooth animations
- **Media Queries**: For responsive design, dark mode, and reduced motion support
All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times and minimal impact on application performance.
}
html_structure: |
<div class="fl-minimal fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-content">
<div class="fl-dot"></div>
<div class="fl-message">Message text</div>
<button class="fl-close" aria-label="Close [type] message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress"></div>
</div>
</div>
---
docs/pages/themes/neon.md
+35 -255
View File
@@ -1,159 +1,33 @@
---
layout: theme
permalink: /theme/neon/
title: Neon Theme
subtitle: Elegant notifications with subtle glowing accents
description: Add elegant notifications with subtle glowing accents to your application using the Neon theme for PHPFlasher. Featuring frosted glass backgrounds, floating illuminated indicators, and refined typography.
handler: theme.neon
data-controller: theme-neon
---
theme_name: theme.neon
theme_name_short: neon
theme_class: fl-neon
icon: fa-lightbulb
color: purple
has_assets: true
## <i class="fa-solid fa-lightbulb"></i> Neon Theme
visual_features:
- Distinctive floating indicator with subtle glow effect
- Frosted glass background with backdrop blur
- Gentle "breathing" animation for the glowing elements
- Refined entrance animation combining fade and movement
- Modern typography with clean, readable font
The Neon theme provides elegant notifications with subtle glowing accents that evoke the gentle illumination of neon lights. It features a frosted glass background, floating illuminated indicators, and refined typography that come together to create a modern, sophisticated appearance.
accessibility_features:
- Type-specific ARIA roles for screen readers
- Appropriate aria-live regions based on message importance
- Reduced motion option disables both entrance and glow animations
- Fully keyboard accessible close button with visual feedback
- Both color and position used to indicate notification type
- Sufficient contrast between text and background
> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
> New to PHPFlasher? Check the [installation guide](/installation/) first.
## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup
The easiest way to use the Neon theme is to set it as your **default theme**:
### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
```php
<?php // config/flasher.php
return [
'default' => 'theme.neon', // Make Neon the default theme
'themes' => [
'neon' => [
'scripts' => [
'/vendor/flasher/themes/neon.min.js',
],
'styles' => [
'/vendor/flasher/themes/neon.min.css',
],
],
],
];
```
### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
```yaml
# config/packages/flasher.yaml
flasher:
default: theme.neon # Make Neon the default theme
themes:
neon:
scripts:
- '/vendor/flasher/themes/neon.min.js'
styles:
- '/vendor/flasher/themes/neon.min.css'
```
### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript
```typescript
// Import the theme (if not auto-registered)
import { neonTheme } from '@flasher/flasher/themes';
flasher.addTheme('neon', neonTheme);
// Set as default theme
flasher.defaultPlugin = 'theme.neon';
// Or use it for specific notifications
flasher.success('Your changes have been saved');
```
## <i class="fa-solid fa-palette"></i> Notification Types
Once configured, use standard PHPFlasher methods to create notifications with Neon styling:
{% assign successMessage = 'Your changes have been saved successfully.' %}
{% assign errorMessage = 'There was a problem saving your changes.' %}
{% assign warningMessage = 'This action cannot be undone.' %}
{% assign infoMessage = 'New features are available.' %}
<script type="text/javascript">
messages['#/ neon types'] = [
{
handler: 'theme.neon',
type: 'success',
message: '{{ successMessage }}',
options: { theme: 'neon' },
},
{
handler: 'theme.neon',
type: 'error',
message: '{{ errorMessage }}',
options: { theme: 'neon' },
},
{
handler: 'theme.neon',
type: 'warning',
message: '{{ warningMessage }}',
options: { theme: 'neon' },
},
{
handler: 'theme.neon',
type: 'info',
message: '{{ infoMessage }}',
options: { theme: 'neon' },
}
];
</script>
### PHP
```php
#/ neon types
// With Neon set as default theme
flash()->success('{{ successMessage }}');
flash()->error('{{ errorMessage }}');
flash()->warning('{{ warningMessage }}');
flash()->info('{{ infoMessage }}');
```
### JavaScript
```javascript
// With Neon set as default theme
flasher.success('{{ successMessage }}');
flasher.error('{{ errorMessage }}');
flasher.warning('{{ warningMessage }}');
flasher.info('{{ infoMessage }}');
```
## <i class="fa-solid fa-brush"></i> Customization
### Using Neon Theme for Specific Notifications
If Neon isn't your default theme, you can use it for specific notifications:
#### PHP
```php
flash()
->use('theme.neon')
->success('This notification uses Neon theme.');
```
#### JavaScript
```javascript
flasher.use('theme.neon').success('This notification uses Neon theme.');
```
### Custom Colors and Appearance
The Neon theme uses CSS variables that can be customized to match your brand:
```css
:root {
css_variables: |
:root {
/* Base appearance */
--neon-bg-light: rgba(255, 255, 255, 0.9); /* Light mode background */
--neon-bg-dark: rgba(15, 23, 42, 0.9); /* Dark mode background */
@@ -170,110 +44,16 @@ The Neon theme uses CSS variables that can be customized to match your brand:
/* Glow properties */
--neon-glow-strength: 10px; /* How far the glow extends */
--neon-blur: 10px; /* Backdrop blur amount */
}
```
}
## <i class="fa-solid fa-code"></i> HTML Structure
The Neon theme generates notifications with the following HTML structure:
```html
<div class="fl-neon fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Message text</div>
<button class="fl-close" aria-label="Close [type] message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress"></div>
</div>
</div>
```
The floating illuminated indicator is created using CSS pseudo-elements rather than being part of the HTML structure.
## <i class="fa-solid fa-lightbulb"></i> Theme Features
### Floating Illuminated Indicator
The Neon theme features a distinctive floating indicator that appears to hover above the notification with a subtle glow:
1. **Container**: Positioned above the notification's top edge
2. **Glow**: Applied using a filter drop-shadow with the notification type's color
3. **Background**: Semi-transparent circle created with ::before pseudo-element
4. **Center dot**: Solid-colored small dot created with ::after pseudo-element
This layering creates the illusion of a floating, glowing dot that serves as a visual indicator of the notification type.
### Animation Effects
The Neon theme features two distinctive animations:
#### Entrance Animation
A combined animation creates a refined entrance where notifications:
1. Fade in from invisible to fully visible
2. Move downward slightly from above
3. Transition from a blurred state to sharp focus
#### Glow Animation
A subtle "breathing" effect where the glow gently pulses, becoming slightly dimmer in the middle of the animation cycle before returning to full brightness.
### Frosted Glass Effect
The theme uses a semi-transparent background combined with backdrop-filter to create a frosted glass effect that gives notifications a modern, sophisticated appearance where they appear to float above the page with a subtle blur applied to content behind them.
### Dark Mode
The dark mode implementation maintains the glowing aesthetic while adjusting for low-light environments:
- Dark slate semi-transparent background
- Light colored text for better contrast
- Stronger shadow for better depth perception
- Adjusted hover state for the close button
The glowing colors remain consistent between light and dark modes to maintain brand color recognition.
### Accessibility Features
The Neon theme includes several accessibility features:
- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
- **Reduced Motion**: Respects `prefers-reduced-motion` media query and disables both entrance and glow animations
- **Keyboard Access**: Close button is fully keyboard accessible with visual feedback
- **Color Contrast**: Maintains sufficient contrast ratio between text and background
- **Visual Indicators**: Uses both color and position to signal notification type
## <i class="fa-solid fa-browser"></i> Browser Support
The Neon theme is compatible with all modern browsers:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Opera (latest)
- Mobile browsers on iOS and Android
For browsers that don't support backdrop-filter (like Firefox), the theme gracefully degrades to using just the semi-transparent background without the blur effect.
## <i class="fa-solid fa-gears"></i> Implementation Details
The Neon theme uses modern web technologies:
- **CSS Variables**: For theme customization and dark mode support
- **CSS Pseudo-elements**: For creating the floating indicator without extra HTML
- **Backdrop Filter**: For the frosted glass effect
- **Filter Effects**: For creating the glowing appearance
- **CSS Animations**: For entrance and glow pulsing effects
- **Typography**: Uses Inter font (with fallbacks) for a clean, modern look
- **Media Queries**: For responsive design, dark mode, and reduced motion support
All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
For the best experience with the Neon theme, it's recommended to include the Inter font in your project:
```html
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
```
html_structure: |
<div class="fl-neon fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-content">
<div class="fl-message">Message text</div>
<button class="fl-close" aria-label="Close [type] message">×</button>
</div>
<div class="fl-progress-bar">
<div class="fl-progress"></div>
</div>
</div>
---
docs/pages/themes/onyx.md
+37 -252
View File
@@ -1,159 +1,33 @@
---
layout: theme
permalink: /theme/onyx/
title: Onyx Theme
subtitle: Modern, floating notifications with elegant details
description: Add modern, floating notifications to your application with the Onyx theme for PHPFlasher. Featuring elegant shadows, colored corner dots, and smooth animations for a sophisticated appearance.
handler: theme.onyx
data-controller: theme-onyx
---
theme_name: theme.onyx
theme_name_short: onyx
theme_class: fl-onyx
icon: fa-gem
color: black
has_assets: true
## <i class="fa-solid fa-gem"></i> Onyx Theme
visual_features:
- Sophisticated floating card design with elegant shadows
- Distinctive colored accent dots in corners to indicate notification type
- Clean, minimalist appearance focusing on content clarity
- Refined entrance animation combining fade, movement and focus effects
- Generous spacing and rounded corners (1rem radius) for a contemporary look
The Onyx theme provides modern, floating notifications with a clean design and subtle accent elements. It features elegant shadows, colored corner dots indicating notification type, and smooth animations to create a sophisticated, contemporary appearance that integrates well with modern interfaces.
accessibility_features:
- Type-specific ARIA roles for screen readers
- Appropriate aria-live regions based on message importance
- Reduced motion option for users with motion sensitivity
- Colored dots provide type indication without relying solely on color
- Fully keyboard accessible close button with visual feedback
- High contrast between text and background in both light and dark modes
> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
> New to PHPFlasher? Check the [installation guide](/installation/) first.
## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup
The easiest way to use the Onyx theme is to set it as your **default theme**:
### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
```php
<?php // config/flasher.php
return [
'default' => 'theme.onyx', // Make Onyx the default theme
'themes' => [
'onyx' => [
'scripts' => [
'/vendor/flasher/themes/onyx.min.js',
],
'styles' => [
'/vendor/flasher/themes/onyx.min.css',
],
],
],
];
```
### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
```yaml
# config/packages/flasher.yaml
flasher:
default: theme.onyx # Make Onyx the default theme
themes:
onyx:
scripts:
- '/vendor/flasher/themes/onyx.min.js'
styles:
- '/vendor/flasher/themes/onyx.min.css'
```
### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript
```typescript
// Import the theme (if not auto-registered)
import { onyxTheme } from '@flasher/flasher/themes';
flasher.addTheme('onyx', onyxTheme);
// Set as default theme
flasher.defaultPlugin = 'theme.onyx';
// Or use it for specific notifications
flasher.success('Your changes have been saved');
```
## <i class="fa-solid fa-palette"></i> Notification Types
Once configured, use standard PHPFlasher methods to create notifications with Onyx styling:
{% assign successMessage = 'Your changes have been saved successfully.' %}
{% assign errorMessage = 'There was a problem saving your changes.' %}
{% assign warningMessage = 'This action cannot be undone.' %}
{% assign infoMessage = 'New features are available.' %}
<script type="text/javascript">
messages['#/ onyx types'] = [
{
handler: 'theme.onyx',
type: 'success',
message: '{{ successMessage }}',
options: { theme: 'onyx' },
},
{
handler: 'theme.onyx',
type: 'error',
message: '{{ errorMessage }}',
options: { theme: 'onyx' },
},
{
handler: 'theme.onyx',
type: 'warning',
message: '{{ warningMessage }}',
options: { theme: 'onyx' },
},
{
handler: 'theme.onyx',
type: 'info',
message: '{{ infoMessage }}',
options: { theme: 'onyx' },
}
];
</script>
### PHP
```php
#/ onyx types
// With Onyx set as default theme
flash()->success('{{ successMessage }}');
flash()->error('{{ errorMessage }}');
flash()->warning('{{ warningMessage }}');
flash()->info('{{ infoMessage }}');
```
### JavaScript
```javascript
// With Onyx set as default theme
flasher.success('{{ successMessage }}');
flasher.error('{{ errorMessage }}');
flasher.warning('{{ warningMessage }}');
flasher.info('{{ infoMessage }}');
```
## <i class="fa-solid fa-brush"></i> Customization
### Using Onyx Theme for Specific Notifications
If Onyx isn't your default theme, you can use it for specific notifications:
#### PHP
```php
flash()
->use('theme.onyx')
->success('This notification uses Onyx theme.');
```
#### JavaScript
```javascript
flasher.use('theme.onyx').success('This notification uses Onyx theme.');
```
### Custom Colors and Appearance
The Onyx theme uses CSS variables that can be customized to match your brand:
```css
:root {
css_variables: |
:root {
/* Base appearance */
--onyx-bg-light: #ffffff; /* Light mode background */
--onyx-bg-dark: #1e1e1e; /* Dark mode background */
@@ -168,107 +42,18 @@ The Onyx theme uses CSS variables that can be customized to match your brand:
--onyx-info: #3b82f6; /* Info color */
--onyx-warning: #f59e0b; /* Warning color */
--onyx-error: #ef4444; /* Error color */
}
```
}
## <i class="fa-solid fa-code"></i> HTML Structure
The Onyx theme generates notifications with the following HTML structure:
```html
<div class="fl-onyx fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-content">
<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>
```
The accent dots are created using CSS pseudo-elements (`::before` and `::after`) rather than being part of the HTML structure.
## <i class="fa-solid fa-lightbulb"></i> Theme Features
### Design Philosophy
The Onyx theme embodies several design principles:
1. **Elegance**: Clean, sophisticated appearance with subtle details
2. **Minimalism**: Only essential elements are included, with no icons or extraneous components
3. **Focus**: The clean design keeps attention on the message content
4. **Refinement**: Thoughtful attention to details like animation timing and corner dots
5. **Consistency**: Each notification type follows the same pattern with its own accent color
### Accent Dots Design
One of the distinctive features of the Onyx theme is its use of subtle accent dots in the corners:
- **Top-left dot**: Positioned 10px from the top and left edges
- **Bottom-right dot**: Positioned 10px from the bottom and right edges
- **Small size**: Each dot is just 6px in diameter
- **Type-specific colors**: The dots match the color associated with the notification type
These small visual elements provide a subtle but clear indication of the notification type without requiring large icons or colored backgrounds.
### Animation Effects
The Onyx theme features a sophisticated entrance animation that combines multiple effects:
- Notifications fade in from invisible to fully visible
- They move upward slightly from below their final position
- They transition from a blurred state to sharp focus
The animation uses a carefully crafted easing curve for a natural, refined movement.
### Dark Mode
The dark mode implementation maintains the sophisticated aesthetic while adjusting for low-light environments:
- Dark background (#1e1e1e)
- Light text color (#f5f5f5)
- Deeper shadow for enhanced depth perception
- Adjusted hover state for the close button using white opacity
The accent dot colors remain consistent between light and dark modes to maintain brand color recognition.
### Accessibility Features
The Onyx theme includes several accessibility features:
- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
- **Reduced Motion**: Respects `prefers-reduced-motion` media query and disables entrance animation
- **Keyboard Access**: Close button is fully keyboard accessible with visual feedback
- **Color Indicators**: Uses colored dots to indicate type without relying solely on color for meaning
- **Adequate Contrast**: Ensures good contrast between text and background in both light and dark modes
## <i class="fa-solid fa-browser"></i> Browser Support
The Onyx theme is compatible with all modern browsers:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Opera (latest)
- Mobile browsers on iOS and Android
No special polyfills or fallbacks are required as the theme uses standard CSS features that are well-supported across browsers.
## <i class="fa-solid fa-gears"></i> Implementation Details
The Onyx theme uses modern web technologies:
- **CSS Variables**: For theme customization and dark mode support
- **CSS Pseudo-elements**: For creating the accent dots without extra HTML
- **Box Shadows**: For the floating card appearance
- **CSS Animations**: For refined entrance effects combining movement and blur
- **CSS Transitions**: For smooth hover interactions
- **Progress Bar**: Shows countdown until notification dismissal with type-specific colors
- **Media Queries**: For responsive design, dark mode, and reduced motion support
All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
html_structure: |
<div class="fl-onyx fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-content">
<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>
---
docs/pages/themes/ruby.md
+41 -264
View File
@@ -1,159 +1,33 @@
---
layout: theme
permalink: /theme/ruby/
title: Ruby Theme
subtitle: Vibrant gradient notifications with shine effect
description: Add vibrant notifications with rich gradient backgrounds to your application using the Ruby theme for PHPFlasher. Featuring an elegant shine animation, circular icons, and gemstone-like appearance.
handler: theme.ruby
data-controller: theme-ruby
---
theme_name: theme.ruby
theme_name_short: ruby
theme_class: fl-ruby
icon: fa-gem
color: red
has_assets: true
## <i class="fa-solid fa-gem text-red-500"></i> Ruby Theme
visual_features:
- 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
The Ruby theme provides vibrant notifications with rich gradient backgrounds and a distinctive gemstone-like appearance. It features an elegant shine animation that mimics light reflecting off a precious stone, along with circular icon containers and smooth animations to create a premium, eye-catching visual experience.
accessibility_features:
- 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
> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
> New to PHPFlasher? Check the [installation guide](/installation/) first.
## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup
The easiest way to use the Ruby theme is to set it as your **default theme**:
### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
```php
<?php // config/flasher.php
return [
'default' => 'theme.ruby', // Make Ruby the default theme
'themes' => [
'ruby' => [
'scripts' => [
'/vendor/flasher/themes/ruby.min.js',
],
'styles' => [
'/vendor/flasher/themes/ruby.min.css',
],
],
],
];
```
### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
```yaml
# config/packages/flasher.yaml
flasher:
default: theme.ruby # Make Ruby the default theme
themes:
ruby:
scripts:
- '/vendor/flasher/themes/ruby.min.js'
styles:
- '/vendor/flasher/themes/ruby.min.css'
```
### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript
```typescript
// Import the theme (if not auto-registered)
import { rubyTheme } from '@flasher/flasher/themes';
flasher.addTheme('ruby', rubyTheme);
// Set as default theme
flasher.defaultPlugin = 'theme.ruby';
// Or use it for specific notifications
flasher.success('Your changes have been saved');
```
## <i class="fa-solid fa-palette"></i> Notification Types
Once configured, use standard PHPFlasher methods to create notifications with Ruby styling:
{% assign successMessage = 'Your changes have been saved successfully.' %}
{% assign errorMessage = 'There was a problem saving your changes.' %}
{% assign warningMessage = 'This action cannot be undone.' %}
{% assign infoMessage = 'New features are available.' %}
<script type="text/javascript">
messages['#/ ruby types'] = [
{
handler: 'theme.ruby',
type: 'success',
message: '{{ successMessage }}',
options: { theme: 'ruby' },
},
{
handler: 'theme.ruby',
type: 'error',
message: '{{ errorMessage }}',
options: { theme: 'ruby' },
},
{
handler: 'theme.ruby',
type: 'warning',
message: '{{ warningMessage }}',
options: { theme: 'ruby' },
},
{
handler: 'theme.ruby',
type: 'info',
message: '{{ infoMessage }}',
options: { theme: 'ruby' },
}
];
</script>
### PHP
```php
#/ ruby types
// With Ruby set as default theme
flash()->success('{{ successMessage }}');
flash()->error('{{ errorMessage }}');
flash()->warning('{{ warningMessage }}');
flash()->info('{{ infoMessage }}');
```
### JavaScript
```javascript
// With Ruby set as default theme
flasher.success('{{ successMessage }}');
flasher.error('{{ errorMessage }}');
flasher.warning('{{ warningMessage }}');
flasher.info('{{ infoMessage }}');
```
## <i class="fa-solid fa-brush"></i> Customization
### Using Ruby Theme for Specific Notifications
If Ruby isn't your default theme, you can use it for specific notifications:
#### PHP
```php
flash()
->use('theme.ruby')
->success('This notification uses Ruby theme.');
```
#### JavaScript
```javascript
flasher.use('theme.ruby').success('This notification uses Ruby theme.');
```
### Custom Colors and Appearance
The Ruby theme uses CSS variables that can be customized to match your brand:
```css
:root {
css_variables: |
:root {
/* Base appearance */
--ruby-text: #ffffff; /* Text color */
--ruby-border-radius: 1.125rem; /* Corner roundness */
@@ -164,119 +38,22 @@ The Ruby theme uses CSS variables that can be customized to match your brand:
--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 */
}
```
}
## <i class="fa-solid fa-code"></i> HTML Structure
The Ruby theme generates notifications with the following HTML structure:
```html
<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>
```
This structure includes the shine element that creates the gemstone-like reflection animation and the circular icon container that's distinctive to this theme.
## <i class="fa-solid fa-lightbulb"></i> Theme Features
### Gradient Design
The theme uses rich, vibrant gradients that flow from a deeper shade to a brighter one:
- **Success**: Green gradient from #059669 to #10b981
- **Info**: Blue gradient from #2563eb to #3b82f6
- **Warning**: Amber gradient from #d97706 to #f59e0b
- **Error**: Red gradient from #b91c1c to #ef4444
All gradients are angled at 135 degrees, creating a consistent diagonal flow across all notification types.
### Shine Animation
The Ruby theme features a distinctive shine animation that mimics light reflecting off a gemstone surface:
- A moving highlight travels across the notification from left to right
- The effect is angled with a skew transform
- Uses a semi-transparent white gradient
- Repeats every 6 seconds after an initial 1-second delay
- Fades out at the end of each cycle
This animation adds a premium, dynamic quality to the notifications that draws the user's attention.
### Circular Icon Container
The circular icon container uses:
- Semi-transparent white background (25% opacity)
- Perfect circular shape (border-radius: 50%)
- 36px diameter (2.25rem)
- Centered icon with white color
This creates a subtle but distinctive visual element that helps identify the notification type.
### Animation Effects
In addition to the shine animation, the Ruby theme includes:
- **Entrance Animation**: A smooth scale-up from 96% to 100% combined with a fade-in
- **Close Button Interactions**: Scale and opacity changes on hover
- **Progress Bar Animation**: A fluid countdown indicator
### Design Philosophy
The Ruby theme embodies a premium, attention-grabbing design philosophy:
1. **Vibrance**: Rich, saturated colors that stand out
2. **Movement**: Dynamic shine animation that draws the eye
3. **Depth**: Shadows and translucent elements create a layered appearance
4. **Polish**: Refined animations and hover states reflect a premium quality
5. **Legibility**: Despite the colorful backgrounds, text remains highly readable
### Accessibility Features
The Ruby theme includes several accessibility features:
- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
- **Reduced Motion**: Respects `prefers-reduced-motion` media query by disabling animations and shine effect
- **Color Contrast**: White text (#ffffff) on colored backgrounds meets WCAG 2.1 AA contrast requirements
- **Keyboard Access**: Close button is fully keyboard accessible with visual feedback
- **RTL Support**: Complete right-to-left language support with appropriate directional adjustments
## <i class="fa-solid fa-browser"></i> Browser Support
The Ruby theme is compatible with all modern browsers:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Opera (latest)
- Mobile browsers on iOS and Android
The gradient backgrounds and animations are well-supported across modern browsers, requiring no special fallbacks.
## <i class="fa-solid fa-gears"></i> Implementation Details
The Ruby theme uses modern web technologies:
- **CSS Variables**: For theme customization
- **CSS Gradients**: For rich, vibrant backgrounds
- **CSS Animations**: For shine effect and entrance animations
- **CSS Transitions**: For smooth hover interactions
- **Box Shadows**: For depth and premium feel
- **SVG Icons**: For crisp, scalable notification type indicators
- **Media Queries**: For responsive design, dark mode, and reduced motion support
All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
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>
---
docs/pages/themes/sapphire.md
+34 -250
View File
@@ -1,159 +1,33 @@
---
layout: theme
permalink: /theme/sapphire/
title: Sapphire Theme
subtitle: Modern, glassmorphic notification system
description: Add modern, glassmorphic notifications to your application with the Sapphire theme for PHPFlasher. Featuring a blurred backdrop effect, minimal interface, and subtle animations.
handler: theme.sapphire
data-controller: theme-sapphire
---
theme_name: theme.sapphire
theme_name_short: sapphire
theme_class: fl-sapphire
icon: fa-gem
color: blue
has_assets: true
## <i class="fa-solid fa-gem text-blue-500"></i> Sapphire Theme
visual_features:
- 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
The Sapphire theme provides modern, glassmorphic notifications with a blurred backdrop effect. It features a clean, minimal design that emphasizes simplicity and contemporary aesthetics, with semi-transparent colored backgrounds and subtle animations that create a sophisticated, unobtrusive appearance.
accessibility_features:
- 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
> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
> New to PHPFlasher? Check the [installation guide](/installation/) first.
## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup
The easiest way to use the Sapphire theme is to set it as your **default theme**:
### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
```php
<?php // config/flasher.php
return [
'default' => 'theme.sapphire', // Make Sapphire the default theme
'themes' => [
'sapphire' => [
'scripts' => [
'/vendor/flasher/themes/sapphire.min.js',
],
'styles' => [
'/vendor/flasher/themes/sapphire.min.css',
],
],
],
];
```
### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
```yaml
# config/packages/flasher.yaml
flasher:
default: theme.sapphire # Make Sapphire the default theme
themes:
sapphire:
scripts:
- '/vendor/flasher/themes/sapphire.min.js'
styles:
- '/vendor/flasher/themes/sapphire.min.css'
```
### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript
```typescript
// Import the theme (if not auto-registered)
import { sapphireTheme } from '@flasher/flasher/themes';
flasher.addTheme('sapphire', sapphireTheme);
// Set as default theme
flasher.defaultPlugin = 'theme.sapphire';
// Or use it for specific notifications
flasher.success('Your changes have been saved');
```
## <i class="fa-solid fa-palette"></i> Notification Types
Once configured, use standard PHPFlasher methods to create notifications with Sapphire styling:
{% assign successMessage = 'Your changes have been saved successfully.' %}
{% assign errorMessage = 'There was a problem saving your changes.' %}
{% assign warningMessage = 'This action cannot be undone.' %}
{% assign infoMessage = 'New features are available.' %}
<script type="text/javascript">
messages['#/ sapphire types'] = [
{
handler: 'theme.sapphire',
type: 'success',
message: '{{ successMessage }}',
options: { theme: 'sapphire' },
},
{
handler: 'theme.sapphire',
type: 'error',
message: '{{ errorMessage }}',
options: { theme: 'sapphire' },
},
{
handler: 'theme.sapphire',
type: 'warning',
message: '{{ warningMessage }}',
options: { theme: 'sapphire' },
},
{
handler: 'theme.sapphire',
type: 'info',
message: '{{ infoMessage }}',
options: { theme: 'sapphire' },
}
];
</script>
### PHP
```php
#/ sapphire types
// With Sapphire set as default theme
flash()->success('{{ successMessage }}');
flash()->error('{{ errorMessage }}');
flash()->warning('{{ warningMessage }}');
flash()->info('{{ infoMessage }}');
```
### JavaScript
```javascript
// With Sapphire set as default theme
flasher.success('{{ successMessage }}');
flasher.error('{{ errorMessage }}');
flasher.warning('{{ warningMessage }}');
flasher.info('{{ infoMessage }}');
```
## <i class="fa-solid fa-brush"></i> Customization
### Using Sapphire Theme for Specific Notifications
If Sapphire isn't your default theme, you can use it for specific notifications:
#### PHP
```php
flash()
->use('theme.sapphire')
->success('This notification uses Sapphire theme.');
```
#### JavaScript
```javascript
flasher.use('theme.sapphire').success('This notification uses Sapphire theme.');
```
### Custom Colors and Appearance
The Sapphire theme uses CSS variables that can be customized to match your brand:
```css
:root {
css_variables: |
:root {
/* Base appearance */
--sapphire-bg-base: rgba(30, 30, 30, 0.9); /* Base background color */
--sapphire-text: #f0f0f0; /* Text color */
@@ -170,105 +44,15 @@ The Sapphire theme uses CSS variables that can be customized to match your brand
--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 */
}
```
}
## <i class="fa-solid fa-code"></i> HTML Structure
The Sapphire theme generates notifications with the following HTML structure:
```html
<div class="fl-sapphire fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-content">
<span class="fl-message">Message text</span>
</div>
<div class="fl-progress-bar">
<div class="fl-progress"></div>
</div>
</div>
```
Note that unlike most themes, Sapphire intentionally omits a close button and icons for a more streamlined appearance.
## <i class="fa-solid fa-lightbulb"></i> Theme Features
### Glassmorphic Design
The Sapphire theme implements the popular glassmorphism design trend with a semi-transparent background and backdrop blur that creates a frosted glass effect where:
- The notification background is semi-transparent
- Content behind the notification appears blurred
- The effect creates depth and visual interest
- The notification feels like it's floating above the content
### Minimalist Approach
Unlike many notification themes, Sapphire takes a distinctly minimalist approach:
- No close button (notifications auto-dismiss)
- No icons or visual indicators beyond color
- Clean typography with minimal styling
- Focus purely on the message content
- Subtle progress indicator
This approach reduces visual noise and creates a more elegant, unobtrusive notification experience.
### Animation Effects
The Sapphire theme features a distinctive bounce animation for a more dynamic entrance where notifications:
1. Fade in from invisible to fully visible
2. Move upward from below their final position
3. Slightly overshoot their target position before settling (bounce effect)
The animation uses a carefully tuned easing curve that enhances the natural feel of the motion.
### Color System
The theme uses a sophisticated color system:
- High transparency backgrounds (95% opacity)
- Type-specific colors that maintain a consistent visual language
- Light text (#f0f0f0) for excellent contrast on all background colors
- Semi-transparent progress indicator that works across all notification types
### Accessibility Features
The Sapphire theme includes several accessibility features:
- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
- **Reduced Motion**: Respects `prefers-reduced-motion` media query and disables animations
- **Color Contrast**: Ensures good contrast between text and all background colors
- **RTL Support**: Complete right-to-left language support
## <i class="fa-solid fa-browser"></i> Browser Support
The Sapphire theme is compatible with all modern browsers:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Opera (latest)
- Mobile browsers on iOS and Android
For browsers that don't support backdrop-filter (like older Firefox versions), the theme gracefully degrades to using just the semi-transparent background without the blur effect.
## <i class="fa-solid fa-gears"></i> Implementation Details
The Sapphire theme uses modern web technologies:
- **CSS Variables**: For theme customization
- **Backdrop Filter**: For the frosted glass effect
- **CSS Animations**: For the bounce entrance effect
- **CSS Transitions**: For smooth progress bar animation
- **Media Queries**: For responsive design and reduced motion support
All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
For the best experience with the Sapphire theme, it's recommended to include the Roboto font in your project:
```html
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
```
html_structure: |
<div class="fl-sapphire fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-content">
<span class="fl-message">Message text</span>
</div>
<div class="fl-progress-bar">
<div class="fl-progress"></div>
</div>
</div>
---
docs/pages/themes/slack.md
+42 -273
View File
@@ -1,159 +1,34 @@
---
layout: theme
permalink: /theme/slack/
title: Slack Theme
subtitle: Familiar workspace messaging style
description: Add Slack-style notifications to your application with the Slack theme for PHPFlasher. Featuring message bubbles with colored avatars, clean typography, and interactive hover effects.
handler: theme.slack
data-controller: theme-slack
---
theme_name: theme.slack
theme_name_short: slack
theme_class: fl-slack
icon: fa-slack
color: purple
has_assets: true
## <i class="fa-brands fa-slack"></i> Slack Theme
visual_features:
- Message bubble design with subtle borders and shadow effects
- Colored square avatars with notification type symbols
- Clean typography mimicking Slack's font styling
- Interactive close button that appears on hover
- Consistent styling between notification types with color-coded avatars
The Slack theme provides notifications styled after Slack's familiar messaging interface. It features message bubbles with colored avatars, clean typography, and interactive hover effects that closely resemble the appearance and behavior of messages in the popular workplace communication platform.
accessibility_features:
- Type-specific ARIA roles for screen readers
- Appropriate aria-live regions based on message importance
- Reduced motion option for users with motion sensitivity
- Fully keyboard accessible close button
- Multiple indicators (color and symbol) for notification types
- High contrast text in both light and dark modes
- Complete RTL language support with properly flipped layout
> <i class="fa-solid fa-circle-info text-blue-400"></i> **Note:**
> New to PHPFlasher? Check the [installation guide](/installation/) first.
## <i class="fa-solid fa-wand-magic-sparkles"></i> Setup
The easiest way to use the Slack theme is to set it as your **default theme**:
### <i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel
```php
<?php // config/flasher.php
return [
'default' => 'theme.slack', // Make Slack the default theme
'themes' => [
'slack' => [
'scripts' => [
'/vendor/flasher/themes/slack.min.js',
],
'styles' => [
'/vendor/flasher/themes/slack.min.css',
],
],
],
];
```
### <i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony
```yaml
# config/packages/flasher.yaml
flasher:
default: theme.slack # Make Slack the default theme
themes:
slack:
scripts:
- '/vendor/flasher/themes/slack.min.js'
styles:
- '/vendor/flasher/themes/slack.min.css'
```
### <i class="fa-brands fa-js fa-lg text-yellow-400 mr-1"></i> JavaScript/TypeScript
```typescript
// Import the theme (if not auto-registered)
import { slackTheme } from '@flasher/flasher/themes';
flasher.addTheme('slack', slackTheme);
// Set as default theme
flasher.defaultPlugin = 'theme.slack';
// Or use it for specific notifications
flasher.success('Your file was uploaded successfully');
```
## <i class="fa-solid fa-palette"></i> Notification Types
Once configured, use standard PHPFlasher methods to create notifications with Slack styling:
{% assign successMessage = 'Your file was uploaded successfully.' %}
{% assign errorMessage = 'Unable to connect to the server.' %}
{% assign warningMessage = 'Your session will expire soon.' %}
{% assign infoMessage = 'New comments on your post.' %}
<script type="text/javascript">
messages['#/ slack types'] = [
{
handler: 'theme.slack',
type: 'success',
message: '{{ successMessage }}',
options: { theme: 'slack' },
},
{
handler: 'theme.slack',
type: 'error',
message: '{{ errorMessage }}',
options: { theme: 'slack' },
},
{
handler: 'theme.slack',
type: 'warning',
message: '{{ warningMessage }}',
options: { theme: 'slack' },
},
{
handler: 'theme.slack',
type: 'info',
message: '{{ infoMessage }}',
options: { theme: 'slack' },
}
];
</script>
### PHP
```php
#/ slack types
// With Slack set as default theme
flash()->success('{{ successMessage }}');
flash()->error('{{ errorMessage }}');
flash()->warning('{{ warningMessage }}');
flash()->info('{{ infoMessage }}');
```
### JavaScript
```javascript
// With Slack set as default theme
flasher.success('{{ successMessage }}');
flasher.error('{{ errorMessage }}');
flasher.warning('{{ warningMessage }}');
flasher.info('{{ infoMessage }}');
```
## <i class="fa-solid fa-brush"></i> Customization
### Using Slack Theme for Specific Notifications
If Slack isn't your default theme, you can use it for specific notifications:
#### PHP
```php
flash()
->use('theme.slack')
->success('This notification uses Slack theme.');
```
#### JavaScript
```javascript
flasher.use('theme.slack').success('This notification uses Slack theme.');
```
### Custom Colors and Appearance
The Slack theme uses CSS variables that can be customized to match your brand while maintaining the Slack-like appearance:
```css
:root {
css_variables: |
:root {
/* Base appearance */
--slack-bg-light: #ffffff; /* Light mode background */
--slack-bg-dark: #1a1d21; /* Dark mode background */
@@ -168,128 +43,22 @@ The Slack theme uses CSS variables that can be customized to match your brand wh
--slack-info: #1264a3; /* Info avatar color */
--slack-warning: #e8912d; /* Warning avatar color */
--slack-error: #e01e5a; /* Error avatar color */
}
```
}
## <i class="fa-solid fa-code"></i> HTML Structure
The Slack theme generates notifications with the following HTML structure:
```html
<div class="fl-slack fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-slack-message">
<div class="fl-avatar">
<div class="fl-type-icon fl-[type]-icon">[Symbol]</div>
</div>
<div class="fl-message-content">
<div class="fl-message-text">Message text</div>
</div>
<div class="fl-actions">
<button class="fl-close" aria-label="Close [type] message">
<svg><!-- Close icon --></svg>
</button>
</div>
</div>
</div>
```
This structure mirrors Slack's message layout with an avatar container, message content, and action button.
## <i class="fa-solid fa-lightbulb"></i> Theme Features
### Message Bubble Design
The main container follows Slack's message styling:
- White background (#ffffff) in light mode
- Dark background (#1a1d21) in dark mode
- Subtle border (1px solid #e0e0e0)
- Slight bottom shadow for depth (0 1px 0 rgba(0, 0, 0, 0.1))
- Subtle hover state (#f8f8f8)
- 4px border radius
### Avatar Design
Each notification type has a colored square avatar:
- Success: Green (#2bac76) with ✓ symbol
- Error: Pink/Red (#e01e5a) with ✕ symbol
- Warning: Orange (#e8912d) with ! symbol
- Info: Blue (#1264a3) with i symbol
The avatars are 36px × 36px squares with slightly rounded corners (4px border radius).
### Interactive Elements
The close button appears on hover:
- Initially hidden (opacity: 0, visibility: hidden)
- Fades in when hovering over the message
- Uses Slack's "X" SVG icon
- Changes color on hover (from #616061 to #1d1c1d)
- Has a subtle background on hover (#f8f8f8)
### Animation Effects
The theme uses a simple, quick fade-in animation:
- Duration: 150ms (matches Slack's quick, responsive feel)
- Timing function: ease-out
- Effect: Simple opacity change from 0 to 1
### Typography
The theme uses Slack's typography style:
- Font family: Lato, Slack-Lato, Helvetica Neue, Helvetica, sans-serif
- Font size: 15px for message text
- Line height: 1.46668 (Slack's specific line height)
- Text color: Near black (#1d1c1d) in light mode, off-white (#e0e0e0) in dark mode
### Dark Mode
The dark mode implementation closely matches Slack's dark theme:
- Background: #1a1d21 (Slack's dark mode color)
- Text: #e0e0e0 (light gray)
- Border: #393a3e (dark gray)
- Hover background: #222529 (slightly lighter than the background)
The avatar colors remain consistent between light and dark modes to maintain clear visual indicators.
### Accessibility Features
The Slack theme includes several accessibility features:
- **ARIA Roles**: Uses appropriate `role="alert"` for error/warning and `role="status"` for success/info
- **ARIA Live Regions**: Uses `aria-live="assertive"` for critical messages and `aria-live="polite"` for non-critical messages
- **Reduced Motion**: Respects `prefers-reduced-motion` media query and disables animations
- **Keyboard Access**: Close button is fully keyboard accessible
- **Color Indicators**: Each notification type has its own color, but also includes a symbol
- **Text Contrast**: Maintains good contrast ratios in both light and dark modes
- **RTL Support**: Complete right-to-left language support with properly flipped layout
## <i class="fa-solid fa-browser"></i> Browser Support
The Slack theme is compatible with all modern browsers:
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Opera (latest)
- Mobile browsers on iOS and Android
The theme uses standard CSS features that are well-supported across browsers, ensuring a consistent experience for all users.
## <i class="fa-solid fa-gears"></i> Implementation Details
The Slack theme uses modern web technologies:
- **CSS Variables**: For theme customization and dark mode support
- **CSS Flexbox**: For proper message layout and alignment
- **CSS Transitions**: For smooth hover interactions
- **SVG Icons**: For the close button and notification type indicators
- **Media Queries**: For responsive design, dark mode, and reduced motion support
All theme files are optimized for production use, with minified JavaScript and CSS to ensure fast loading times.
For the best experience with the Slack theme, it's recommended to include the Lato font in your project:
```html
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
```
html_structure: |
<div class="fl-slack fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true">
<div class="fl-slack-message">
<div class="fl-avatar">
<div class="fl-type-icon fl-[type]-icon">[Symbol]</div>
</div>
<div class="fl-message-content">
<div class="fl-message-text">Message text</div>
</div>
<div class="fl-actions">
<button class="fl-close" aria-label="Close [type] message">
<svg><!-- Close icon --></svg>
</button>
</div>
</div>
</div>
---
package-lock.json
Generated
+11 -11
View File
@@ -30,7 +30,7 @@
"@typescript-eslint/eslint-plugin": "^7.18.0",
"@typescript-eslint/parser": "^7.18.0",
"all-contributors-cli": "^6.26.1",
"autoprefixer": "^10.4.20",
"autoprefixer": "^10.4.21",
"browserslist": "^4.24.4",
"cross-env": "^7.0.3",
"cssnano": "^7.0.6",
@@ -38,7 +38,7 @@
"eslint": "^8.57.1",
"eslint-config-airbnb-typescript": "^18.0.0",
"eslint-config-prettier": "^9.1.0",
"eslint-import-resolver-typescript": "^3.8.3",
"eslint-import-resolver-typescript": "^3.8.4",
"eslint-plugin-babel": "^5.3.1",
"eslint-plugin-import": "^2.31.0",
"eslint-plugin-prettier": "^5.2.3",
@@ -4838,9 +4838,9 @@
}
},
"node_modules/autoprefixer": {
"version": "10.4.20",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
"integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
"version": "10.4.21",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
"integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
"dev": true,
"funding": [
{
@@ -4858,11 +4858,11 @@
],
"license": "MIT",
"dependencies": {
"browserslist": "^4.23.3",
"caniuse-lite": "^1.0.30001646",
"browserslist": "^4.24.4",
"caniuse-lite": "^1.0.30001702",
"fraction.js": "^4.3.7",
"normalize-range": "^0.1.2",
"picocolors": "^1.0.1",
"picocolors": "^1.1.1",
"postcss-value-parser": "^4.2.0"
},
"bin": {
@@ -6628,9 +6628,9 @@
}
},
"node_modules/eslint-import-resolver-typescript": {
"version": "3.8.3",
"resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.8.3.tgz",
"integrity": "sha512-A0bu4Ks2QqDWNpeEgTQMPTngaMhuDu4yv6xpftBMAf+1ziXnpx+eSR1WRfoPTe2BAiAjHFZ7kSNx1fvr5g5pmQ==",
"version": "3.8.4",
"resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.8.4.tgz",
"integrity": "sha512-vjTGvhr528DzCOLQnBxvoB9a2YuzegT1ogfrUwOqMXS/J6vNYQKSHDJxxDVU1gRuTiUK8N2wyp8Uik9JSPAygA==",
"dev": true,
"license": "ISC",
"dependencies": {
package.json
+2 -2
View File
@@ -58,7 +58,7 @@
"@typescript-eslint/eslint-plugin": "^7.18.0",
"@typescript-eslint/parser": "^7.18.0",
"all-contributors-cli": "^6.26.1",
"autoprefixer": "^10.4.20",
"autoprefixer": "^10.4.21",
"browserslist": "^4.24.4",
"cross-env": "^7.0.3",
"cssnano": "^7.0.6",
@@ -66,7 +66,7 @@
"eslint": "^8.57.1",
"eslint-config-airbnb-typescript": "^18.0.0",
"eslint-config-prettier": "^9.1.0",
"eslint-import-resolver-typescript": "^3.8.3",
"eslint-import-resolver-typescript": "^3.8.4",
"eslint-plugin-babel": "^5.3.1",
"eslint-plugin-import": "^2.31.0",
"eslint-plugin-prettier": "^5.2.3",
src/Prime/Resources/assets/themes/amber/amber.scss
-5
View File
@@ -57,11 +57,6 @@
font-family: var(--fl-font), serif;
will-change: transform, opacity;
/* Remove margin from last notification in a stack */
&:last-child {
margin-bottom: 0;
}
/**
* Content container
* Holds all notification elements in a flexbox layout
src/Prime/Resources/assets/themes/crystal/crystal.scss
-7
View File
@@ -81,13 +81,6 @@
animation: crystalPulse 2s ease-in-out infinite;
}
/**
* Remove margin from last notification in a stack
*/
&:last-child {
margin-bottom: 0;
}
/**
* Content container
* Holds the message and close button
src/Prime/Resources/assets/themes/facebook/facebook.ts
+4 -6
View File
@@ -50,11 +50,9 @@ export const facebookTheme = {
const role = isAlert ? 'alert' : 'status'
const ariaLive = isAlert ? 'assertive' : 'polite'
// Extract timestamp from options or use current time
const timestamp = String(envelope.options?.timestamp || '2025-03-02 06:49:21')
// Format time to be more readable (HH:MM format)
const formattedTime = timestamp.split(' ')[1].substring(0, 5)
// Format current time in Facebook style (hour:minute)
const now = new Date()
const timeString = now.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
/**
* Gets the appropriate icon based on notification type.
@@ -103,7 +101,7 @@ export const facebookTheme = {
${message}
</div>
<div class="fl-meta">
<span class="fl-time">${formattedTime}</span>
<span class="fl-time">${timeString}</span>
</div>
</div>
<div class="fl-actions">
src/Prime/Resources/assets/themes/jade/jade.scss
-7
View File
@@ -68,13 +68,6 @@
border: 1px solid transparent; /* Border for type-specific colors */
overflow: hidden; /* Contain progress bar */
/**
* Remove margin from last notification in a stack
*/
&:last-child {
margin-bottom: 0;
}
/**
* Content container
* Holds message and close button
src/Prime/Resources/assets/themes/minimal/minimal.scss
-7
View File
@@ -65,13 +65,6 @@
border: 1px solid var(--minimal-border-color); /* Nearly invisible border */
max-width: 320px; /* Limit width for readability */
/**
* Remove margin from last notification in a stack
*/
&:last-child {
margin-bottom: 0;
}
/**
* Content container
* Holds message and close button
src/Prime/Resources/assets/themes/neon/neon.scss
+1
View File
@@ -77,6 +77,7 @@
animation: neonEntrance var(--neon-animation-duration) ease-out;
font-family: 'Inter', var(--fl-font), sans-serif; /* Prefer Inter font for elegant typography */
will-change: transform, opacity, filter; /* Optimize for animation performance */
overflow: hidden; /* Contain progress bar */
/* Frosted glass effect */
backdrop-filter: blur(10px);
src/Prime/Resources/assets/themes/sapphire/sapphire.scss
-7
View File
@@ -75,13 +75,6 @@
backdrop-filter: blur(12px); /* Strong blur effect */
-webkit-backdrop-filter: blur(12px); /* Safari support */
/**
* Remove margin from last notification in a stack
*/
&:last-child {
margin-bottom: 0;
}
/**
* Message styling
* Clean, readable text
src/Prime/Resources/dist/flasher.min.css
Vendored
+6 -6
View File
File diff suppressed because one or more lines are too long
src/Prime/Resources/dist/themes/amber/amber.min.css
Vendored
+1 -1
View File
@@ -1 +1 @@
.fl-amber{--amber-bg-light:#fff;--amber-bg-dark:#1e293b;--amber-text-light:#4b5563;--amber-text-dark:#f1f5f9;--amber-shadow:0 5px 15px rgba(0,0,0,.08);--amber-shadow-dark:0 5px 15px rgba(0,0,0,.2);--amber-border-radius:0.4rem;--amber-success:#10b981;--amber-info:#3b82f6;--amber-warning:#f59e0b;--amber-error:#ef4444}@keyframes amberIn{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.fl-amber{animation:amberIn .3s ease-out;background-color:var(--amber-bg-light);border-radius:var(--amber-border-radius);box-shadow:var(--amber-shadow);color:var(--amber-text-light);font-family:var(--fl-font),serif;margin:.6rem 0;padding:.85rem 1rem;position:relative;will-change:transform,opacity}.fl-amber:last-child{margin-bottom:0}.fl-amber .fl-content{align-items:center;display:flex}.fl-amber .fl-icon{font-size:1.85em;margin-right:.8rem}.fl-amber .fl-text{flex:1}.fl-amber .fl-message{font-size:.875em;line-height:1.4}.fl-amber .fl-close{background:none;border:none;color:currentColor;cursor:pointer;flex-shrink:0;font-size:1.15rem;margin-left:1rem;opacity:.6;padding:.25rem;touch-action:manipulation;transition:opacity .2s}.fl-amber .fl-close:focus,.fl-amber .fl-close:hover{opacity:1}.fl-amber .fl-progress-bar{bottom:0;height:3px;left:0;overflow:hidden;position:absolute;right:0}.fl-amber .fl-progress-bar .fl-progress{height:100%;width:100%}.fl-amber.fl-success .fl-close{color:var(--amber-success)}.fl-amber.fl-info .fl-close{color:var(--amber-info)}.fl-amber.fl-warning .fl-close{color:var(--amber-warning)}.fl-amber.fl-error .fl-close{color:var(--amber-error)}.fl-amber.fl-rtl{direction:rtl}.fl-amber.fl-rtl .fl-icon{margin-left:.8rem;margin-right:0}.fl-amber.fl-rtl .fl-close{margin-left:0;margin-right:1rem}.fl-amber.fl-rtl .fl-progress .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-amber{animation:none}}.fl-amber.fl-auto-dark,body.fl-dark .fl-amber,html.fl-dark .fl-amber{background-color:var(--amber-bg-dark);box-shadow:var(--amber-shadow-dark);color:var(--amber-text-dark)}
.fl-amber{--amber-bg-light:#fff;--amber-bg-dark:#1e293b;--amber-text-light:#4b5563;--amber-text-dark:#f1f5f9;--amber-shadow:0 5px 15px rgba(0,0,0,.08);--amber-shadow-dark:0 5px 15px rgba(0,0,0,.2);--amber-border-radius:0.4rem;--amber-success:#10b981;--amber-info:#3b82f6;--amber-warning:#f59e0b;--amber-error:#ef4444}@keyframes amberIn{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.fl-amber{animation:amberIn .3s ease-out;background-color:var(--amber-bg-light);border-radius:var(--amber-border-radius);box-shadow:var(--amber-shadow);color:var(--amber-text-light);font-family:var(--fl-font),serif;margin:.6rem 0;padding:.85rem 1rem;position:relative;will-change:transform,opacity}.fl-amber .fl-content{align-items:center;display:flex}.fl-amber .fl-icon{font-size:1.85em;margin-right:.8rem}.fl-amber .fl-text{flex:1}.fl-amber .fl-message{font-size:.875em;line-height:1.4}.fl-amber .fl-close{background:none;border:none;color:currentColor;cursor:pointer;flex-shrink:0;font-size:1.15rem;margin-left:1rem;opacity:.6;padding:.25rem;touch-action:manipulation;transition:opacity .2s}.fl-amber .fl-close:focus,.fl-amber .fl-close:hover{opacity:1}.fl-amber .fl-progress-bar{bottom:0;height:3px;left:0;overflow:hidden;position:absolute;right:0}.fl-amber .fl-progress-bar .fl-progress{height:100%;width:100%}.fl-amber.fl-success .fl-close{color:var(--amber-success)}.fl-amber.fl-info .fl-close{color:var(--amber-info)}.fl-amber.fl-warning .fl-close{color:var(--amber-warning)}.fl-amber.fl-error .fl-close{color:var(--amber-error)}.fl-amber.fl-rtl{direction:rtl}.fl-amber.fl-rtl .fl-icon{margin-left:.8rem;margin-right:0}.fl-amber.fl-rtl .fl-close{margin-left:0;margin-right:1rem}.fl-amber.fl-rtl .fl-progress .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-amber{animation:none}}.fl-amber.fl-auto-dark,body.fl-dark .fl-amber,html.fl-dark .fl-amber{background-color:var(--amber-bg-dark);box-shadow:var(--amber-shadow-dark);color:var(--amber-text-dark)}
src/Prime/Resources/dist/themes/crystal/crystal.min.css
Vendored
+1 -1
View File
@@ -1 +1 @@
.fl-crystal{--crystal-bg-light:#fff;--crystal-bg-dark:rgba(30,30,30,.95);--crystal-text-light:#2c3e50;--crystal-text-dark:hsla(0,0%,100%,.95);--crystal-shadow:rgba(0,0,0,.08);--crystal-shadow-dark:rgba(0,0,0,.25)}@keyframes crystalIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes crystalPulse{0%{box-shadow:0 2px 8px var(--crystal-shadow)}50%{box-shadow:0 4px 12px var(--crystal-shadow)}to{box-shadow:0 2px 8px var(--crystal-shadow)}}.fl-crystal{animation:crystalIn .3s ease-out;background:var(--crystal-bg-light,var(--fl-bg-light));border-radius:var(--fl-border-radius,4px);box-shadow:0 2px 8px var(--crystal-shadow);font-family:var(--fl-font),serif;margin:0 0 1rem;max-width:380px;position:relative;transition:box-shadow .3s ease;will-change:transform,opacity}.fl-crystal:hover{animation:crystalPulse 2s ease-in-out infinite}.fl-crystal:last-child{margin-bottom:0}.fl-crystal .fl-content{align-items:center;display:flex;gap:.75rem;padding:1rem 2.5rem 1rem 1rem}.fl-crystal .fl-text{flex:1}.fl-crystal .fl-message{color:var(--crystal-text-light,var(--fl-text-light));font-size:.9375rem;line-height:1.4;margin:0}.fl-crystal .fl-close{background:none;border:none;color:currentColor;cursor:pointer;font-size:1.25rem;line-height:1;opacity:.5;padding:.25rem;position:absolute;right:.75rem;top:50%;touch-action:manipulation;transform:translateY(-50%);transition:all .2s ease}.fl-crystal .fl-close:focus,.fl-crystal .fl-close:hover{opacity:1;transform:translateY(-50%) scale(1.1)}.fl-crystal .fl-progress-bar{bottom:0;height:3px;left:0;overflow:hidden;position:absolute;right:0}.fl-crystal .fl-progress-bar .fl-progress{height:100%;transform-origin:left center;width:100%}.fl-crystal.fl-success,.fl-crystal.fl-success .fl-message{color:var(--success-color,var(--fl-success))}.fl-crystal.fl-error,.fl-crystal.fl-error .fl-message{color:var(--error-color,var(--fl-error))}.fl-crystal.fl-warning,.fl-crystal.fl-warning .fl-message{color:var(--warning-color,var(--fl-warning))}.fl-crystal.fl-info,.fl-crystal.fl-info .fl-message{color:var(--info-color,var(--fl-info))}.fl-crystal.fl-rtl{direction:rtl}.fl-crystal.fl-rtl .fl-content{padding:1rem 1rem 1rem 2.5rem}.fl-crystal.fl-rtl .fl-close{left:.75rem;right:auto}.fl-crystal.fl-rtl .fl-progress .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-crystal{animation:none}.fl-crystal:hover{animation:none;box-shadow:0 2px 8px var(--crystal-shadow)}}.fl-crystal.fl-auto-dark,body.fl-dark .fl-crystal,html.fl-dark .fl-crystal{background-color:var(--crystal-bg-dark,var(--fl-bg-dark));box-shadow:0 2px 8px var(--crystal-shadow-dark)}.fl-crystal.fl-auto-dark .fl-message,body.fl-dark .fl-crystal .fl-message,html.fl-dark .fl-crystal .fl-message{color:var(--crystal-text-dark,var(--fl-text-dark))}.fl-crystal.fl-auto-dark:hover,body.fl-dark .fl-crystal:hover,html.fl-dark .fl-crystal:hover{animation:none;box-shadow:0 4px 16px var(--crystal-shadow-dark)}
.fl-crystal{--crystal-bg-light:#fff;--crystal-bg-dark:rgba(30,30,30,.95);--crystal-text-light:#2c3e50;--crystal-text-dark:hsla(0,0%,100%,.95);--crystal-shadow:rgba(0,0,0,.08);--crystal-shadow-dark:rgba(0,0,0,.25)}@keyframes crystalIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes crystalPulse{0%{box-shadow:0 2px 8px var(--crystal-shadow)}50%{box-shadow:0 4px 12px var(--crystal-shadow)}to{box-shadow:0 2px 8px var(--crystal-shadow)}}.fl-crystal{animation:crystalIn .3s ease-out;background:var(--crystal-bg-light,var(--fl-bg-light));border-radius:var(--fl-border-radius,4px);box-shadow:0 2px 8px var(--crystal-shadow);font-family:var(--fl-font),serif;margin:0 0 1rem;max-width:380px;position:relative;transition:box-shadow .3s ease;will-change:transform,opacity}.fl-crystal:hover{animation:crystalPulse 2s ease-in-out infinite}.fl-crystal .fl-content{align-items:center;display:flex;gap:.75rem;padding:1rem 2.5rem 1rem 1rem}.fl-crystal .fl-text{flex:1}.fl-crystal .fl-message{color:var(--crystal-text-light,var(--fl-text-light));font-size:.9375rem;line-height:1.4;margin:0}.fl-crystal .fl-close{background:none;border:none;color:currentColor;cursor:pointer;font-size:1.25rem;line-height:1;opacity:.5;padding:.25rem;position:absolute;right:.75rem;top:50%;touch-action:manipulation;transform:translateY(-50%);transition:all .2s ease}.fl-crystal .fl-close:focus,.fl-crystal .fl-close:hover{opacity:1;transform:translateY(-50%) scale(1.1)}.fl-crystal .fl-progress-bar{bottom:0;height:3px;left:0;overflow:hidden;position:absolute;right:0}.fl-crystal .fl-progress-bar .fl-progress{height:100%;transform-origin:left center;width:100%}.fl-crystal.fl-success,.fl-crystal.fl-success .fl-message{color:var(--success-color,var(--fl-success))}.fl-crystal.fl-error,.fl-crystal.fl-error .fl-message{color:var(--error-color,var(--fl-error))}.fl-crystal.fl-warning,.fl-crystal.fl-warning .fl-message{color:var(--warning-color,var(--fl-warning))}.fl-crystal.fl-info,.fl-crystal.fl-info .fl-message{color:var(--info-color,var(--fl-info))}.fl-crystal.fl-rtl{direction:rtl}.fl-crystal.fl-rtl .fl-content{padding:1rem 1rem 1rem 2.5rem}.fl-crystal.fl-rtl .fl-close{left:.75rem;right:auto}.fl-crystal.fl-rtl .fl-progress .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-crystal{animation:none}.fl-crystal:hover{animation:none;box-shadow:0 2px 8px var(--crystal-shadow)}}.fl-crystal.fl-auto-dark,body.fl-dark .fl-crystal,html.fl-dark .fl-crystal{background-color:var(--crystal-bg-dark,var(--fl-bg-dark));box-shadow:0 2px 8px var(--crystal-shadow-dark)}.fl-crystal.fl-auto-dark .fl-message,body.fl-dark .fl-crystal .fl-message,html.fl-dark .fl-crystal .fl-message{color:var(--crystal-text-dark,var(--fl-text-dark))}.fl-crystal.fl-auto-dark:hover,body.fl-dark .fl-crystal:hover,html.fl-dark .fl-crystal:hover{animation:none;box-shadow:0 4px 16px var(--crystal-shadow-dark)}
src/Prime/Resources/dist/themes/facebook/facebook.esm.js
Vendored
+3 -4
View File
@@ -7,13 +7,12 @@ import flasher from '@flasher/flasher';
const facebookTheme = {
render: (envelope) => {
var _a;
const { type, message } = envelope;
const isAlert = type === 'error' || type === 'warning';
const role = isAlert ? 'alert' : 'status';
const ariaLive = isAlert ? 'assertive' : 'polite';
const timestamp = String(((_a = envelope.options) === null || _a === void 0 ? void 0 : _a.timestamp) || '2025-03-02 06:49:21');
const formattedTime = timestamp.split(' ')[1].substring(0, 5);
const now = new Date();
const timeString = now.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
const getNotificationIcon = () => {
switch (type) {
case 'success':
@@ -54,7 +53,7 @@ const facebookTheme = {
${message}
</div>
<div class="fl-meta">
<span class="fl-time">${formattedTime}</span>
<span class="fl-time">${timeString}</span>
</div>
</div>
<div class="fl-actions">
src/Prime/Resources/dist/themes/facebook/facebook.js
Vendored
+3 -4
View File
@@ -11,13 +11,12 @@
const facebookTheme = {
render: (envelope) => {
var _a;
const { type, message } = envelope;
const isAlert = type === 'error' || type === 'warning';
const role = isAlert ? 'alert' : 'status';
const ariaLive = isAlert ? 'assertive' : 'polite';
const timestamp = String(((_a = envelope.options) === null || _a === void 0 ? void 0 : _a.timestamp) || '2025-03-02 06:49:21');
const formattedTime = timestamp.split(' ')[1].substring(0, 5);
const now = new Date();
const timeString = now.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
const getNotificationIcon = () => {
switch (type) {
case 'success':
@@ -58,7 +57,7 @@
${message}
</div>
<div class="fl-meta">
<span class="fl-time">${formattedTime}</span>
<span class="fl-time">${timeString}</span>
</div>
</div>
<div class="fl-actions">
src/Prime/Resources/dist/themes/facebook/facebook.min.js
Vendored
+1 -1
View File
@@ -1 +1 @@
!function(n,i){"object"==typeof exports&&"undefined"!=typeof module?i(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],i):i((n="undefined"!=typeof globalThis?globalThis:n||self).flasher)}(this,(function(n){"use strict";const i={render:n=>{var i;const{type:s,message:e}=n,l="error"===s||"warning"===s,t=l?"alert":"status",o=l?"assertive":"polite",r=String((null===(i=n.options)||void 0===i?void 0:i.timestamp)||"2025-03-02 06:49:21").split(" ")[1].substring(0,5);return`\n <div class="fl-facebook fl-${s}" role="${t}" aria-live="${o}" aria-atomic="true">\n <div class="fl-fb-notification">\n <div class="fl-icon-container">\n ${(()=>{switch(s){case"success":return'<div class="fl-fb-icon fl-fb-icon-success">\n <svg viewBox="0 0 24 24" width="16" height="16">\n <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z"/>\n </svg>\n </div>';case"error":return'<div class="fl-fb-icon fl-fb-icon-error">\n <svg viewBox="0 0 24 24" width="16" height="16">\n <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.5c-.69 0-1.25.56-1.25 1.25S11.31 13 12 13s1.25-.56 1.25-1.25S12.69 10.5 12 10.5zM12 9c.552 0 1-.448 1-1V7c0-.552-.448-1-1-1s-1 .448-1 1v1c0 .552.448 1 1 1z"/>\n </svg>\n </div>';case"warning":return'<div class="fl-fb-icon fl-fb-icon-warning">\n <svg viewBox="0 0 24 24" width="16" height="16">\n <path fill="currentColor" d="M12.865 3.00017L22.3912 19.5002C22.6674 19.9785 22.5035 20.5901 22.0252 20.8662C21.8732 20.954 21.7008 21.0002 21.5252 21.0002H2.47266C1.92037 21.0002 1.47266 20.5525 1.47266 20.0002C1.47266 19.8246 1.51886 19.6522 1.60663 19.5002L11.1329 3.00017C11.409 2.52187 12.0206 2.358 12.4989 2.63414C12.651 2.72192 12.7772 2.84815 12.865 3.00017ZM11 16.0002V18.0002H13V16.0002H11ZM11 8.00017V14.0002H13V8.00017H11Z"/>\n </svg>\n </div>';case"info":return'<div class="fl-fb-icon fl-fb-icon-info">\n <svg viewBox="0 0 24 24" width="16" height="16">\n <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 100-16 8 8 0 000 16zm-1-5h2v-2h-2v2zm0-4h2V7h-2v4z"/>\n </svg>\n </div>'}return""})()}\n </div>\n <div class="fl-content">\n <div class="fl-message">\n ${e}\n </div>\n <div class="fl-meta">\n <span class="fl-time">${r}</span>\n </div>\n </div>\n <div class="fl-actions">\n <button class="fl-button fl-close" aria-label="Close ${s} message">\n <div class="fl-button-icon">\n <svg viewBox="0 0 24 24" width="20" height="20">\n <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>\n </svg>\n </div>\n </button>\n </div>\n </div>\n </div>`}};n.addTheme("facebook",i)}));
!function(n,i){"object"==typeof exports&&"undefined"!=typeof module?i(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],i):i((n="undefined"!=typeof globalThis?globalThis:n||self).flasher)}(this,(function(n){"use strict";const i={render:n=>{const{type:i,message:e}=n,s="error"===i||"warning"===i,t=s?"alert":"status",l=s?"assertive":"polite",o=(new Date).toLocaleTimeString([],{hour:"numeric",minute:"2-digit"});return`\n <div class="fl-facebook fl-${i}" role="${t}" aria-live="${l}" aria-atomic="true">\n <div class="fl-fb-notification">\n <div class="fl-icon-container">\n ${(()=>{switch(i){case"success":return'<div class="fl-fb-icon fl-fb-icon-success">\n <svg viewBox="0 0 24 24" width="16" height="16">\n <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z"/>\n </svg>\n </div>';case"error":return'<div class="fl-fb-icon fl-fb-icon-error">\n <svg viewBox="0 0 24 24" width="16" height="16">\n <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.5c-.69 0-1.25.56-1.25 1.25S11.31 13 12 13s1.25-.56 1.25-1.25S12.69 10.5 12 10.5zM12 9c.552 0 1-.448 1-1V7c0-.552-.448-1-1-1s-1 .448-1 1v1c0 .552.448 1 1 1z"/>\n </svg>\n </div>';case"warning":return'<div class="fl-fb-icon fl-fb-icon-warning">\n <svg viewBox="0 0 24 24" width="16" height="16">\n <path fill="currentColor" d="M12.865 3.00017L22.3912 19.5002C22.6674 19.9785 22.5035 20.5901 22.0252 20.8662C21.8732 20.954 21.7008 21.0002 21.5252 21.0002H2.47266C1.92037 21.0002 1.47266 20.5525 1.47266 20.0002C1.47266 19.8246 1.51886 19.6522 1.60663 19.5002L11.1329 3.00017C11.409 2.52187 12.0206 2.358 12.4989 2.63414C12.651 2.72192 12.7772 2.84815 12.865 3.00017ZM11 16.0002V18.0002H13V16.0002H11ZM11 8.00017V14.0002H13V8.00017H11Z"/>\n </svg>\n </div>';case"info":return'<div class="fl-fb-icon fl-fb-icon-info">\n <svg viewBox="0 0 24 24" width="16" height="16">\n <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 100-16 8 8 0 000 16zm-1-5h2v-2h-2v2zm0-4h2V7h-2v4z"/>\n </svg>\n </div>'}return""})()}\n </div>\n <div class="fl-content">\n <div class="fl-message">\n ${e}\n </div>\n <div class="fl-meta">\n <span class="fl-time">${o}</span>\n </div>\n </div>\n <div class="fl-actions">\n <button class="fl-button fl-close" aria-label="Close ${i} message">\n <div class="fl-button-icon">\n <svg viewBox="0 0 24 24" width="20" height="20">\n <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>\n </svg>\n </div>\n </button>\n </div>\n </div>\n </div>`}};n.addTheme("facebook",i)}));
src/Prime/Resources/dist/themes/jade/jade.min.css
Vendored
+1 -1
View File
@@ -1 +1 @@
.fl-jade{--jade-text-light:#5f6c7b;--jade-text-dark:#e2e8f0;--jade-shadow:0 8px 24px hsla(210,8%,62%,.1);--jade-shadow-dark:0 8px 24px rgba(0,0,0,.2);--jade-border-radius:1rem;--jade-transition:0.3s cubic-bezier(0.4,0,0.2,1);--jade-success-bg:#f0fdf4;--jade-success-color:#16a34a;--jade-info-bg:#eff6ff;--jade-info-color:#3b82f6;--jade-warning-bg:#fffbeb;--jade-warning-color:#f59e0b;--jade-error-bg:#fef2f2;--jade-error-color:#dc2626;--jade-success-bg-dark:rgba(22,163,74,.15);--jade-info-bg-dark:rgba(59,130,246,.15);--jade-warning-bg-dark:rgba(245,158,11,.15);--jade-error-bg-dark:rgba(220,38,38,.15)}@keyframes jadeIn{0%{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.fl-jade{animation:jadeIn .4s var(--jade-transition);border:1px solid transparent;border-radius:var(--jade-border-radius);box-shadow:var(--jade-shadow);font-family:var(--fl-font),serif;margin:.5rem 0;overflow:hidden;padding:1rem 1.25rem;position:relative;will-change:transform,opacity}.fl-jade:last-child{margin-bottom:0}.fl-jade .fl-content{align-items:center;display:flex}.fl-jade .fl-message{flex:1;font-size:.875rem;font-weight:500;line-height:1.5;padding-right:.75rem}.fl-jade .fl-close{align-items:center;background:none;border:none;border-radius:50%;cursor:pointer;display:flex;flex-shrink:0;font-size:1.125rem;height:1.875rem;justify-content:center;opacity:.6;padding:.375rem;transition:all var(--jade-transition);width:1.875rem}.fl-jade .fl-close:focus,.fl-jade .fl-close:hover{background-color:rgba(0,0,0,.05);opacity:1}.fl-jade .fl-progress-bar{border-radius:0 0 var(--jade-border-radius) var(--jade-border-radius);bottom:0;height:3px;left:0;opacity:.7;overflow:hidden;position:absolute;right:0}.fl-jade .fl-progress-bar .fl-progress{height:100%;width:100%}.fl-jade.fl-success{background-color:var(--jade-success-bg);border-color:rgba(22,163,74,.1)}.fl-jade.fl-success,.fl-jade.fl-success .fl-close{color:var(--jade-success-color)}.fl-jade.fl-success .fl-close:focus,.fl-jade.fl-success .fl-close:hover{background-color:rgba(22,163,74,.1)}.fl-jade.fl-success .fl-progress-bar .fl-progress{background-color:var(--jade-success-color)}.fl-jade.fl-info{background-color:var(--jade-info-bg);border-color:rgba(59,130,246,.1)}.fl-jade.fl-info,.fl-jade.fl-info .fl-close{color:var(--jade-info-color)}.fl-jade.fl-info .fl-close:focus,.fl-jade.fl-info .fl-close:hover{background-color:rgba(59,130,246,.1)}.fl-jade.fl-info .fl-progress-bar .fl-progress{background-color:var(--jade-info-color)}.fl-jade.fl-warning{background-color:var(--jade-warning-bg);border-color:rgba(245,158,11,.1)}.fl-jade.fl-warning,.fl-jade.fl-warning .fl-close{color:var(--jade-warning-color)}.fl-jade.fl-warning .fl-close:focus,.fl-jade.fl-warning .fl-close:hover{background-color:rgba(245,158,11,.1)}.fl-jade.fl-warning .fl-progress-bar .fl-progress{background-color:var(--jade-warning-color)}.fl-jade.fl-error{background-color:var(--jade-error-bg);border-color:rgba(220,38,38,.1)}.fl-jade.fl-error,.fl-jade.fl-error .fl-close{color:var(--jade-error-color)}.fl-jade.fl-error .fl-close:focus,.fl-jade.fl-error .fl-close:hover{background-color:rgba(220,38,38,.1)}.fl-jade.fl-error .fl-progress-bar .fl-progress{background-color:var(--jade-error-color)}.fl-jade.fl-rtl{direction:rtl}.fl-jade.fl-rtl .fl-message{padding-left:.75rem;padding-right:0}.fl-jade.fl-rtl .fl-progress .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-jade{animation:none}}.fl-jade.fl-auto-dark,body.fl-dark .fl-jade,html.fl-dark .fl-jade{box-shadow:var(--jade-shadow-dark);color:var(--jade-text-dark)}.fl-jade.fl-auto-dark.fl-success,body.fl-dark .fl-jade.fl-success,html.fl-dark .fl-jade.fl-success{background-color:var(--jade-success-bg-dark);border-color:rgba(22,163,74,.2)}.fl-jade.fl-auto-dark.fl-info,body.fl-dark .fl-jade.fl-info,html.fl-dark .fl-jade.fl-info{background-color:var(--jade-info-bg-dark);border-color:rgba(59,130,246,.2)}.fl-jade.fl-auto-dark.fl-warning,body.fl-dark .fl-jade.fl-warning,html.fl-dark .fl-jade.fl-warning{background-color:var(--jade-warning-bg-dark);border-color:rgba(245,158,11,.2)}.fl-jade.fl-auto-dark.fl-error,body.fl-dark .fl-jade.fl-error,html.fl-dark .fl-jade.fl-error{background-color:var(--jade-error-bg-dark);border-color:rgba(220,38,38,.2)}.fl-jade.fl-auto-dark .fl-close:focus,.fl-jade.fl-auto-dark .fl-close:hover,body.fl-dark .fl-jade .fl-close:focus,body.fl-dark .fl-jade .fl-close:hover,html.fl-dark .fl-jade .fl-close:focus,html.fl-dark .fl-jade .fl-close:hover{background-color:hsla(0,0%,100%,.1)}
.fl-jade{--jade-text-light:#5f6c7b;--jade-text-dark:#e2e8f0;--jade-shadow:0 8px 24px hsla(210,8%,62%,.1);--jade-shadow-dark:0 8px 24px rgba(0,0,0,.2);--jade-border-radius:1rem;--jade-transition:0.3s cubic-bezier(0.4,0,0.2,1);--jade-success-bg:#f0fdf4;--jade-success-color:#16a34a;--jade-info-bg:#eff6ff;--jade-info-color:#3b82f6;--jade-warning-bg:#fffbeb;--jade-warning-color:#f59e0b;--jade-error-bg:#fef2f2;--jade-error-color:#dc2626;--jade-success-bg-dark:rgba(22,163,74,.15);--jade-info-bg-dark:rgba(59,130,246,.15);--jade-warning-bg-dark:rgba(245,158,11,.15);--jade-error-bg-dark:rgba(220,38,38,.15)}@keyframes jadeIn{0%{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.fl-jade{animation:jadeIn .4s var(--jade-transition);border:1px solid transparent;border-radius:var(--jade-border-radius);box-shadow:var(--jade-shadow);font-family:var(--fl-font),serif;margin:.5rem 0;overflow:hidden;padding:1rem 1.25rem;position:relative;will-change:transform,opacity}.fl-jade .fl-content{align-items:center;display:flex}.fl-jade .fl-message{flex:1;font-size:.875rem;font-weight:500;line-height:1.5;padding-right:.75rem}.fl-jade .fl-close{align-items:center;background:none;border:none;border-radius:50%;cursor:pointer;display:flex;flex-shrink:0;font-size:1.125rem;height:1.875rem;justify-content:center;opacity:.6;padding:.375rem;transition:all var(--jade-transition);width:1.875rem}.fl-jade .fl-close:focus,.fl-jade .fl-close:hover{background-color:rgba(0,0,0,.05);opacity:1}.fl-jade .fl-progress-bar{border-radius:0 0 var(--jade-border-radius) var(--jade-border-radius);bottom:0;height:3px;left:0;opacity:.7;overflow:hidden;position:absolute;right:0}.fl-jade .fl-progress-bar .fl-progress{height:100%;width:100%}.fl-jade.fl-success{background-color:var(--jade-success-bg);border-color:rgba(22,163,74,.1)}.fl-jade.fl-success,.fl-jade.fl-success .fl-close{color:var(--jade-success-color)}.fl-jade.fl-success .fl-close:focus,.fl-jade.fl-success .fl-close:hover{background-color:rgba(22,163,74,.1)}.fl-jade.fl-success .fl-progress-bar .fl-progress{background-color:var(--jade-success-color)}.fl-jade.fl-info{background-color:var(--jade-info-bg);border-color:rgba(59,130,246,.1)}.fl-jade.fl-info,.fl-jade.fl-info .fl-close{color:var(--jade-info-color)}.fl-jade.fl-info .fl-close:focus,.fl-jade.fl-info .fl-close:hover{background-color:rgba(59,130,246,.1)}.fl-jade.fl-info .fl-progress-bar .fl-progress{background-color:var(--jade-info-color)}.fl-jade.fl-warning{background-color:var(--jade-warning-bg);border-color:rgba(245,158,11,.1)}.fl-jade.fl-warning,.fl-jade.fl-warning .fl-close{color:var(--jade-warning-color)}.fl-jade.fl-warning .fl-close:focus,.fl-jade.fl-warning .fl-close:hover{background-color:rgba(245,158,11,.1)}.fl-jade.fl-warning .fl-progress-bar .fl-progress{background-color:var(--jade-warning-color)}.fl-jade.fl-error{background-color:var(--jade-error-bg);border-color:rgba(220,38,38,.1)}.fl-jade.fl-error,.fl-jade.fl-error .fl-close{color:var(--jade-error-color)}.fl-jade.fl-error .fl-close:focus,.fl-jade.fl-error .fl-close:hover{background-color:rgba(220,38,38,.1)}.fl-jade.fl-error .fl-progress-bar .fl-progress{background-color:var(--jade-error-color)}.fl-jade.fl-rtl{direction:rtl}.fl-jade.fl-rtl .fl-message{padding-left:.75rem;padding-right:0}.fl-jade.fl-rtl .fl-progress .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-jade{animation:none}}.fl-jade.fl-auto-dark,body.fl-dark .fl-jade,html.fl-dark .fl-jade{box-shadow:var(--jade-shadow-dark);color:var(--jade-text-dark)}.fl-jade.fl-auto-dark.fl-success,body.fl-dark .fl-jade.fl-success,html.fl-dark .fl-jade.fl-success{background-color:var(--jade-success-bg-dark);border-color:rgba(22,163,74,.2)}.fl-jade.fl-auto-dark.fl-info,body.fl-dark .fl-jade.fl-info,html.fl-dark .fl-jade.fl-info{background-color:var(--jade-info-bg-dark);border-color:rgba(59,130,246,.2)}.fl-jade.fl-auto-dark.fl-warning,body.fl-dark .fl-jade.fl-warning,html.fl-dark .fl-jade.fl-warning{background-color:var(--jade-warning-bg-dark);border-color:rgba(245,158,11,.2)}.fl-jade.fl-auto-dark.fl-error,body.fl-dark .fl-jade.fl-error,html.fl-dark .fl-jade.fl-error{background-color:var(--jade-error-bg-dark);border-color:rgba(220,38,38,.2)}.fl-jade.fl-auto-dark .fl-close:focus,.fl-jade.fl-auto-dark .fl-close:hover,body.fl-dark .fl-jade .fl-close:focus,body.fl-dark .fl-jade .fl-close:hover,html.fl-dark .fl-jade .fl-close:focus,html.fl-dark .fl-jade .fl-close:hover{background-color:hsla(0,0%,100%,.1)}
src/Prime/Resources/dist/themes/minimal/minimal.min.css
Vendored
+1 -1
View File
@@ -1 +1 @@
.fl-minimal{--minimal-bg-light:hsla(0,0%,100%,.8);--minimal-bg-dark:rgba(25,25,25,.8);--minimal-text-light:#333;--minimal-text-dark:#f5f5f5;--minimal-shadow:0 2px 8px rgba(0,0,0,.08);--minimal-shadow-dark:0 2px 8px rgba(0,0,0,.15);--minimal-border-radius:6px;--minimal-border-color:rgba(0,0,0,.05);--minimal-border-color-dark:hsla(0,0%,100%,.1);--minimal-success:rgba(34,197,94,.9);--minimal-info:rgba(14,165,233,.9);--minimal-warning:rgba(245,158,11,.9);--minimal-error:rgba(239,68,68,.9)}@keyframes minimalIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.fl-minimal{animation:minimalIn .2s ease-out;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background-color:var(--minimal-bg-light);border:1px solid var(--minimal-border-color);border-radius:var(--minimal-border-radius);box-shadow:var(--minimal-shadow);color:var(--minimal-text-light);font-family:-apple-system,BlinkMacSystemFont,var(--fl-font),sans-serif;margin:.5rem 0;max-width:320px;padding:.75rem 1rem;position:relative;will-change:transform,opacity}.fl-minimal:last-child{margin-bottom:0}.fl-minimal .fl-content{align-items:center;display:flex;gap:.75rem}.fl-minimal .fl-dot{border-radius:50%;flex-shrink:0;height:8px;width:8px}.fl-minimal .fl-message{flex:1;font-size:.875rem;font-weight:450;line-height:1.4;margin:0}.fl-minimal .fl-close{align-items:center;background:none;border:none;color:currentColor;cursor:pointer;display:flex;flex-shrink:0;font-size:1rem;height:1.5rem;justify-content:center;opacity:.5;padding:.25rem;transition:opacity .15s;width:1.5rem}.fl-minimal .fl-close:focus,.fl-minimal .fl-close:hover{opacity:.8}.fl-minimal .fl-progress-bar{border-radius:0 0 var(--minimal-border-radius) var(--minimal-border-radius);bottom:0;height:2px;left:0;opacity:.7;overflow:hidden;position:absolute;right:0}.fl-minimal .fl-progress-bar .fl-progress{height:100%;width:100%}.fl-minimal.fl-success .fl-dot,.fl-minimal.fl-success .fl-progress-bar .fl-progress{background-color:var(--minimal-success)}.fl-minimal.fl-info .fl-dot,.fl-minimal.fl-info .fl-progress-bar .fl-progress{background-color:var(--minimal-info)}.fl-minimal.fl-warning .fl-dot,.fl-minimal.fl-warning .fl-progress-bar .fl-progress{background-color:var(--minimal-warning)}.fl-minimal.fl-error .fl-dot,.fl-minimal.fl-error .fl-progress-bar .fl-progress{background-color:var(--minimal-error)}.fl-minimal.fl-rtl{direction:rtl}.fl-minimal.fl-rtl .fl-progress .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-minimal{animation:none}}.fl-minimal.fl-auto-dark,body.fl-dark .fl-minimal,html.fl-dark .fl-minimal{background-color:var(--minimal-bg-dark);border-color:var(--minimal-border-color-dark);box-shadow:var(--minimal-shadow-dark);color:var(--minimal-text-dark)}
.fl-minimal{--minimal-bg-light:hsla(0,0%,100%,.8);--minimal-bg-dark:rgba(25,25,25,.8);--minimal-text-light:#333;--minimal-text-dark:#f5f5f5;--minimal-shadow:0 2px 8px rgba(0,0,0,.08);--minimal-shadow-dark:0 2px 8px rgba(0,0,0,.15);--minimal-border-radius:6px;--minimal-border-color:rgba(0,0,0,.05);--minimal-border-color-dark:hsla(0,0%,100%,.1);--minimal-success:rgba(34,197,94,.9);--minimal-info:rgba(14,165,233,.9);--minimal-warning:rgba(245,158,11,.9);--minimal-error:rgba(239,68,68,.9)}@keyframes minimalIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.fl-minimal{animation:minimalIn .2s ease-out;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background-color:var(--minimal-bg-light);border:1px solid var(--minimal-border-color);border-radius:var(--minimal-border-radius);box-shadow:var(--minimal-shadow);color:var(--minimal-text-light);font-family:-apple-system,BlinkMacSystemFont,var(--fl-font),sans-serif;margin:.5rem 0;max-width:320px;padding:.75rem 1rem;position:relative;will-change:transform,opacity}.fl-minimal .fl-content{align-items:center;display:flex;gap:.75rem}.fl-minimal .fl-dot{border-radius:50%;flex-shrink:0;height:8px;width:8px}.fl-minimal .fl-message{flex:1;font-size:.875rem;font-weight:450;line-height:1.4;margin:0}.fl-minimal .fl-close{align-items:center;background:none;border:none;color:currentColor;cursor:pointer;display:flex;flex-shrink:0;font-size:1rem;height:1.5rem;justify-content:center;opacity:.5;padding:.25rem;transition:opacity .15s;width:1.5rem}.fl-minimal .fl-close:focus,.fl-minimal .fl-close:hover{opacity:.8}.fl-minimal .fl-progress-bar{border-radius:0 0 var(--minimal-border-radius) var(--minimal-border-radius);bottom:0;height:2px;left:0;opacity:.7;overflow:hidden;position:absolute;right:0}.fl-minimal .fl-progress-bar .fl-progress{height:100%;width:100%}.fl-minimal.fl-success .fl-dot,.fl-minimal.fl-success .fl-progress-bar .fl-progress{background-color:var(--minimal-success)}.fl-minimal.fl-info .fl-dot,.fl-minimal.fl-info .fl-progress-bar .fl-progress{background-color:var(--minimal-info)}.fl-minimal.fl-warning .fl-dot,.fl-minimal.fl-warning .fl-progress-bar .fl-progress{background-color:var(--minimal-warning)}.fl-minimal.fl-error .fl-dot,.fl-minimal.fl-error .fl-progress-bar .fl-progress{background-color:var(--minimal-error)}.fl-minimal.fl-rtl{direction:rtl}.fl-minimal.fl-rtl .fl-progress .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-minimal{animation:none}}.fl-minimal.fl-auto-dark,body.fl-dark .fl-minimal,html.fl-dark .fl-minimal{background-color:var(--minimal-bg-dark);border-color:var(--minimal-border-color-dark);box-shadow:var(--minimal-shadow-dark);color:var(--minimal-text-dark)}
src/Prime/Resources/dist/themes/neon/neon.min.css
Vendored
+1 -1
View File
@@ -1 +1 @@
.fl-neon{--neon-bg-light:hsla(0,0%,100%,.9);--neon-bg-dark:rgba(15,23,42,.9);--neon-text-light:#334155;--neon-text-dark:#f1f5f9;--neon-shadow:0 8px 30px rgba(0,0,0,.12);--neon-shadow-dark:0 8px 30px rgba(0,0,0,.25);--neon-border-radius:12px;--neon-success:#10b981;--neon-info:#3b82f6;--neon-warning:#f59e0b;--neon-error:#ef4444;--neon-glow-strength:10px;--neon-animation-duration:0.35s}@keyframes neonEntrance{0%{filter:blur(3px);opacity:0;transform:translateY(-15px)}to{filter:blur(0);opacity:1;transform:translateY(0)}}@keyframes neonGlow{0%,to{filter:drop-shadow(0 0 var(--neon-glow-strength) currentColor)}50%{filter:drop-shadow(0 0 calc(var(--neon-glow-strength)*.7) currentColor)}}.fl-neon{animation:neonEntrance var(--neon-animation-duration) ease-out;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background-color:var(--neon-bg-light);border-radius:var(--neon-border-radius);box-shadow:var(--neon-shadow);color:var(--neon-text-light);font-family:"Inter",var(--fl-font),sans-serif;margin:12px 0;padding:14px 18px;position:relative;will-change:transform,opacity,filter}.fl-neon .fl-icon-box{align-items:center;animation:neonGlow 3s ease-in-out infinite;border-radius:50%;display:flex;height:24px;justify-content:center;left:16px;position:absolute;top:-12px;width:24px}.fl-neon .fl-icon-box:before{border-radius:50%;content:"";height:100%;opacity:.4;position:absolute;width:100%}.fl-neon .fl-icon-box:after{border-radius:50%;content:"";height:10px;position:relative;width:10px;z-index:1}.fl-neon .fl-content{align-items:center;display:flex}.fl-neon .fl-message{flex:1;font-size:.9375rem;font-weight:500;line-height:1.5}.fl-neon .fl-close{align-items:center;background:none;border:none;border-radius:50%;color:inherit;cursor:pointer;display:flex;flex-shrink:0;font-size:1.2rem;height:28px;justify-content:center;margin-left:16px;opacity:.6;padding:0;transition:all .2s ease;width:28px}.fl-neon .fl-close:focus,.fl-neon .fl-close:hover{background-color:rgba(0,0,0,.06);opacity:1}.fl-neon .fl-progress-bar{border-radius:0 0 var(--neon-border-radius) var(--neon-border-radius);bottom:0;height:3px;left:0;overflow:hidden;position:absolute;right:0}.fl-neon .fl-progress-bar .fl-progress{height:100%;width:100%}.fl-neon.fl-success .fl-icon-box{color:var(--neon-success)}.fl-neon.fl-success .fl-icon-box:after,.fl-neon.fl-success .fl-icon-box:before,.fl-neon.fl-success .fl-progress{background-color:var(--neon-success)}.fl-neon.fl-info .fl-icon-box{color:var(--neon-info)}.fl-neon.fl-info .fl-icon-box:after,.fl-neon.fl-info .fl-icon-box:before,.fl-neon.fl-info .fl-progress{background-color:var(--neon-info)}.fl-neon.fl-warning .fl-icon-box{color:var(--neon-warning)}.fl-neon.fl-warning .fl-icon-box:after,.fl-neon.fl-warning .fl-icon-box:before,.fl-neon.fl-warning .fl-progress{background-color:var(--neon-warning)}.fl-neon.fl-error .fl-icon-box{color:var(--neon-error)}.fl-neon.fl-error .fl-icon-box:after,.fl-neon.fl-error .fl-icon-box:before,.fl-neon.fl-error .fl-progress{background-color:var(--neon-error)}.fl-neon.fl-rtl{direction:rtl}.fl-neon.fl-rtl .fl-icon-box{left:auto;right:16px}.fl-neon.fl-rtl .fl-close{margin-left:0;margin-right:16px}.fl-neon.fl-rtl .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-neon,.fl-neon .fl-icon-box{animation:none}}.fl-neon.fl-auto-dark,body.fl-dark .fl-neon,html.fl-dark .fl-neon{background-color:var(--neon-bg-dark);box-shadow:var(--neon-shadow-dark);color:var(--neon-text-dark)}.fl-neon.fl-auto-dark .fl-close:focus,.fl-neon.fl-auto-dark .fl-close:hover,body.fl-dark .fl-neon .fl-close:focus,body.fl-dark .fl-neon .fl-close:hover,html.fl-dark .fl-neon .fl-close:focus,html.fl-dark .fl-neon .fl-close:hover{background-color:hsla(0,0%,100%,.1)}
.fl-neon{--neon-bg-light:hsla(0,0%,100%,.9);--neon-bg-dark:rgba(15,23,42,.9);--neon-text-light:#334155;--neon-text-dark:#f1f5f9;--neon-shadow:0 8px 30px rgba(0,0,0,.12);--neon-shadow-dark:0 8px 30px rgba(0,0,0,.25);--neon-border-radius:12px;--neon-success:#10b981;--neon-info:#3b82f6;--neon-warning:#f59e0b;--neon-error:#ef4444;--neon-glow-strength:10px;--neon-animation-duration:0.35s}@keyframes neonEntrance{0%{filter:blur(3px);opacity:0;transform:translateY(-15px)}to{filter:blur(0);opacity:1;transform:translateY(0)}}@keyframes neonGlow{0%,to{filter:drop-shadow(0 0 var(--neon-glow-strength) currentColor)}50%{filter:drop-shadow(0 0 calc(var(--neon-glow-strength)*.7) currentColor)}}.fl-neon{animation:neonEntrance var(--neon-animation-duration) ease-out;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background-color:var(--neon-bg-light);border-radius:var(--neon-border-radius);box-shadow:var(--neon-shadow);color:var(--neon-text-light);font-family:"Inter",var(--fl-font),sans-serif;margin:12px 0;overflow:hidden;padding:14px 18px;position:relative;will-change:transform,opacity,filter}.fl-neon .fl-icon-box{align-items:center;animation:neonGlow 3s ease-in-out infinite;border-radius:50%;display:flex;height:24px;justify-content:center;left:16px;position:absolute;top:-12px;width:24px}.fl-neon .fl-icon-box:before{border-radius:50%;content:"";height:100%;opacity:.4;position:absolute;width:100%}.fl-neon .fl-icon-box:after{border-radius:50%;content:"";height:10px;position:relative;width:10px;z-index:1}.fl-neon .fl-content{align-items:center;display:flex}.fl-neon .fl-message{flex:1;font-size:.9375rem;font-weight:500;line-height:1.5}.fl-neon .fl-close{align-items:center;background:none;border:none;border-radius:50%;color:inherit;cursor:pointer;display:flex;flex-shrink:0;font-size:1.2rem;height:28px;justify-content:center;margin-left:16px;opacity:.6;padding:0;transition:all .2s ease;width:28px}.fl-neon .fl-close:focus,.fl-neon .fl-close:hover{background-color:rgba(0,0,0,.06);opacity:1}.fl-neon .fl-progress-bar{border-radius:0 0 var(--neon-border-radius) var(--neon-border-radius);bottom:0;height:3px;left:0;overflow:hidden;position:absolute;right:0}.fl-neon .fl-progress-bar .fl-progress{height:100%;width:100%}.fl-neon.fl-success .fl-icon-box{color:var(--neon-success)}.fl-neon.fl-success .fl-icon-box:after,.fl-neon.fl-success .fl-icon-box:before,.fl-neon.fl-success .fl-progress{background-color:var(--neon-success)}.fl-neon.fl-info .fl-icon-box{color:var(--neon-info)}.fl-neon.fl-info .fl-icon-box:after,.fl-neon.fl-info .fl-icon-box:before,.fl-neon.fl-info .fl-progress{background-color:var(--neon-info)}.fl-neon.fl-warning .fl-icon-box{color:var(--neon-warning)}.fl-neon.fl-warning .fl-icon-box:after,.fl-neon.fl-warning .fl-icon-box:before,.fl-neon.fl-warning .fl-progress{background-color:var(--neon-warning)}.fl-neon.fl-error .fl-icon-box{color:var(--neon-error)}.fl-neon.fl-error .fl-icon-box:after,.fl-neon.fl-error .fl-icon-box:before,.fl-neon.fl-error .fl-progress{background-color:var(--neon-error)}.fl-neon.fl-rtl{direction:rtl}.fl-neon.fl-rtl .fl-icon-box{left:auto;right:16px}.fl-neon.fl-rtl .fl-close{margin-left:0;margin-right:16px}.fl-neon.fl-rtl .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-neon,.fl-neon .fl-icon-box{animation:none}}.fl-neon.fl-auto-dark,body.fl-dark .fl-neon,html.fl-dark .fl-neon{background-color:var(--neon-bg-dark);box-shadow:var(--neon-shadow-dark);color:var(--neon-text-dark)}.fl-neon.fl-auto-dark .fl-close:focus,.fl-neon.fl-auto-dark .fl-close:hover,body.fl-dark .fl-neon .fl-close:focus,body.fl-dark .fl-neon .fl-close:hover,html.fl-dark .fl-neon .fl-close:focus,html.fl-dark .fl-neon .fl-close:hover{background-color:hsla(0,0%,100%,.1)}
src/Prime/Resources/dist/themes/sapphire/sapphire.min.css
Vendored
+1 -1
View File
@@ -1 +1 @@
.fl-sapphire{--sapphire-bg-base:rgba(30,30,30,.9);--sapphire-text:#f0f0f0;--sapphire-shadow:rgba(0,0,0,.15);--sapphire-progress-bg:hsla(0,0%,100%,.2);--sapphire-progress-fill:hsla(0,0%,100%,.9);--sapphire-success:rgba(16,185,129,.95);--sapphire-error:rgba(239,68,68,.95);--sapphire-warning:rgba(245,158,11,.95);--sapphire-info:rgba(59,130,246,.95);--sapphire-animation:0.4s cubic-bezier(0.25,0.46,0.45,0.94)}@keyframes sapphireIn{0%{opacity:0;transform:translateY(10px)}60%{transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}.fl-sapphire{animation:sapphireIn var(--sapphire-animation);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background-color:var(--sapphire-bg-base);border-radius:.5em;box-shadow:0 6px 16px var(--sapphire-shadow);color:var(--sapphire-text);font-family:Roboto,var(--fl-font),serif;margin:0 0 .75em;min-width:200px;padding:1em 1.5em;position:relative;transition:all .3s ease;will-change:transform,opacity}.fl-sapphire:last-child{margin-bottom:0}.fl-sapphire .fl-message{color:var(--sapphire-text);font-size:.925em;line-height:1.4}.fl-sapphire .fl-progress-bar{background-color:var(--sapphire-progress-bg);border-radius:0 0 .375em .375em;bottom:0;height:4px;left:0;overflow:hidden;position:absolute;right:0}.fl-sapphire .fl-progress-bar .fl-progress{background-color:var(--sapphire-progress-fill);height:100%;transform-origin:left center;width:100%;will-change:transform}.fl-sapphire.fl-success{background-color:var(--sapphire-success)}.fl-sapphire.fl-error{background-color:var(--sapphire-error)}.fl-sapphire.fl-warning{background-color:var(--sapphire-warning)}.fl-sapphire.fl-info{background-color:var(--sapphire-info)}.fl-sapphire.fl-rtl{direction:rtl}.fl-sapphire.fl-rtl .fl-progress .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-sapphire{animation:none}}
.fl-sapphire{--sapphire-bg-base:rgba(30,30,30,.9);--sapphire-text:#f0f0f0;--sapphire-shadow:rgba(0,0,0,.15);--sapphire-progress-bg:hsla(0,0%,100%,.2);--sapphire-progress-fill:hsla(0,0%,100%,.9);--sapphire-success:rgba(16,185,129,.95);--sapphire-error:rgba(239,68,68,.95);--sapphire-warning:rgba(245,158,11,.95);--sapphire-info:rgba(59,130,246,.95);--sapphire-animation:0.4s cubic-bezier(0.25,0.46,0.45,0.94)}@keyframes sapphireIn{0%{opacity:0;transform:translateY(10px)}60%{transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}.fl-sapphire{animation:sapphireIn var(--sapphire-animation);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background-color:var(--sapphire-bg-base);border-radius:.5em;box-shadow:0 6px 16px var(--sapphire-shadow);color:var(--sapphire-text);font-family:Roboto,var(--fl-font),serif;margin:0 0 .75em;min-width:200px;padding:1em 1.5em;position:relative;transition:all .3s ease;will-change:transform,opacity}.fl-sapphire .fl-message{color:var(--sapphire-text);font-size:.925em;line-height:1.4}.fl-sapphire .fl-progress-bar{background-color:var(--sapphire-progress-bg);border-radius:0 0 .375em .375em;bottom:0;height:4px;left:0;overflow:hidden;position:absolute;right:0}.fl-sapphire .fl-progress-bar .fl-progress{background-color:var(--sapphire-progress-fill);height:100%;transform-origin:left center;width:100%;will-change:transform}.fl-sapphire.fl-success{background-color:var(--sapphire-success)}.fl-sapphire.fl-error{background-color:var(--sapphire-error)}.fl-sapphire.fl-warning{background-color:var(--sapphire-warning)}.fl-sapphire.fl-info{background-color:var(--sapphire-info)}.fl-sapphire.fl-rtl{direction:rtl}.fl-sapphire.fl-rtl .fl-progress .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-sapphire{animation:none}}
src/Prime/Resources/public/flasher.min.css
Vendored
+6 -6
View File
File diff suppressed because one or more lines are too long
src/Prime/Resources/public/themes/amber/amber.min.css
Vendored
+1 -1
View File
@@ -1 +1 @@
.fl-amber{--amber-bg-light:#fff;--amber-bg-dark:#1e293b;--amber-text-light:#4b5563;--amber-text-dark:#f1f5f9;--amber-shadow:0 5px 15px rgba(0,0,0,.08);--amber-shadow-dark:0 5px 15px rgba(0,0,0,.2);--amber-border-radius:0.4rem;--amber-success:#10b981;--amber-info:#3b82f6;--amber-warning:#f59e0b;--amber-error:#ef4444}@keyframes amberIn{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.fl-amber{animation:amberIn .3s ease-out;background-color:var(--amber-bg-light);border-radius:var(--amber-border-radius);box-shadow:var(--amber-shadow);color:var(--amber-text-light);font-family:var(--fl-font),serif;margin:.6rem 0;padding:.85rem 1rem;position:relative;will-change:transform,opacity}.fl-amber:last-child{margin-bottom:0}.fl-amber .fl-content{align-items:center;display:flex}.fl-amber .fl-icon{font-size:1.85em;margin-right:.8rem}.fl-amber .fl-text{flex:1}.fl-amber .fl-message{font-size:.875em;line-height:1.4}.fl-amber .fl-close{background:none;border:none;color:currentColor;cursor:pointer;flex-shrink:0;font-size:1.15rem;margin-left:1rem;opacity:.6;padding:.25rem;touch-action:manipulation;transition:opacity .2s}.fl-amber .fl-close:focus,.fl-amber .fl-close:hover{opacity:1}.fl-amber .fl-progress-bar{bottom:0;height:3px;left:0;overflow:hidden;position:absolute;right:0}.fl-amber .fl-progress-bar .fl-progress{height:100%;width:100%}.fl-amber.fl-success .fl-close{color:var(--amber-success)}.fl-amber.fl-info .fl-close{color:var(--amber-info)}.fl-amber.fl-warning .fl-close{color:var(--amber-warning)}.fl-amber.fl-error .fl-close{color:var(--amber-error)}.fl-amber.fl-rtl{direction:rtl}.fl-amber.fl-rtl .fl-icon{margin-left:.8rem;margin-right:0}.fl-amber.fl-rtl .fl-close{margin-left:0;margin-right:1rem}.fl-amber.fl-rtl .fl-progress .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-amber{animation:none}}.fl-amber.fl-auto-dark,body.fl-dark .fl-amber,html.fl-dark .fl-amber{background-color:var(--amber-bg-dark);box-shadow:var(--amber-shadow-dark);color:var(--amber-text-dark)}
.fl-amber{--amber-bg-light:#fff;--amber-bg-dark:#1e293b;--amber-text-light:#4b5563;--amber-text-dark:#f1f5f9;--amber-shadow:0 5px 15px rgba(0,0,0,.08);--amber-shadow-dark:0 5px 15px rgba(0,0,0,.2);--amber-border-radius:0.4rem;--amber-success:#10b981;--amber-info:#3b82f6;--amber-warning:#f59e0b;--amber-error:#ef4444}@keyframes amberIn{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.fl-amber{animation:amberIn .3s ease-out;background-color:var(--amber-bg-light);border-radius:var(--amber-border-radius);box-shadow:var(--amber-shadow);color:var(--amber-text-light);font-family:var(--fl-font),serif;margin:.6rem 0;padding:.85rem 1rem;position:relative;will-change:transform,opacity}.fl-amber .fl-content{align-items:center;display:flex}.fl-amber .fl-icon{font-size:1.85em;margin-right:.8rem}.fl-amber .fl-text{flex:1}.fl-amber .fl-message{font-size:.875em;line-height:1.4}.fl-amber .fl-close{background:none;border:none;color:currentColor;cursor:pointer;flex-shrink:0;font-size:1.15rem;margin-left:1rem;opacity:.6;padding:.25rem;touch-action:manipulation;transition:opacity .2s}.fl-amber .fl-close:focus,.fl-amber .fl-close:hover{opacity:1}.fl-amber .fl-progress-bar{bottom:0;height:3px;left:0;overflow:hidden;position:absolute;right:0}.fl-amber .fl-progress-bar .fl-progress{height:100%;width:100%}.fl-amber.fl-success .fl-close{color:var(--amber-success)}.fl-amber.fl-info .fl-close{color:var(--amber-info)}.fl-amber.fl-warning .fl-close{color:var(--amber-warning)}.fl-amber.fl-error .fl-close{color:var(--amber-error)}.fl-amber.fl-rtl{direction:rtl}.fl-amber.fl-rtl .fl-icon{margin-left:.8rem;margin-right:0}.fl-amber.fl-rtl .fl-close{margin-left:0;margin-right:1rem}.fl-amber.fl-rtl .fl-progress .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-amber{animation:none}}.fl-amber.fl-auto-dark,body.fl-dark .fl-amber,html.fl-dark .fl-amber{background-color:var(--amber-bg-dark);box-shadow:var(--amber-shadow-dark);color:var(--amber-text-dark)}
src/Prime/Resources/public/themes/crystal/crystal.min.css
Vendored
+1 -1
View File
@@ -1 +1 @@
.fl-crystal{--crystal-bg-light:#fff;--crystal-bg-dark:rgba(30,30,30,.95);--crystal-text-light:#2c3e50;--crystal-text-dark:hsla(0,0%,100%,.95);--crystal-shadow:rgba(0,0,0,.08);--crystal-shadow-dark:rgba(0,0,0,.25)}@keyframes crystalIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes crystalPulse{0%{box-shadow:0 2px 8px var(--crystal-shadow)}50%{box-shadow:0 4px 12px var(--crystal-shadow)}to{box-shadow:0 2px 8px var(--crystal-shadow)}}.fl-crystal{animation:crystalIn .3s ease-out;background:var(--crystal-bg-light,var(--fl-bg-light));border-radius:var(--fl-border-radius,4px);box-shadow:0 2px 8px var(--crystal-shadow);font-family:var(--fl-font),serif;margin:0 0 1rem;max-width:380px;position:relative;transition:box-shadow .3s ease;will-change:transform,opacity}.fl-crystal:hover{animation:crystalPulse 2s ease-in-out infinite}.fl-crystal:last-child{margin-bottom:0}.fl-crystal .fl-content{align-items:center;display:flex;gap:.75rem;padding:1rem 2.5rem 1rem 1rem}.fl-crystal .fl-text{flex:1}.fl-crystal .fl-message{color:var(--crystal-text-light,var(--fl-text-light));font-size:.9375rem;line-height:1.4;margin:0}.fl-crystal .fl-close{background:none;border:none;color:currentColor;cursor:pointer;font-size:1.25rem;line-height:1;opacity:.5;padding:.25rem;position:absolute;right:.75rem;top:50%;touch-action:manipulation;transform:translateY(-50%);transition:all .2s ease}.fl-crystal .fl-close:focus,.fl-crystal .fl-close:hover{opacity:1;transform:translateY(-50%) scale(1.1)}.fl-crystal .fl-progress-bar{bottom:0;height:3px;left:0;overflow:hidden;position:absolute;right:0}.fl-crystal .fl-progress-bar .fl-progress{height:100%;transform-origin:left center;width:100%}.fl-crystal.fl-success,.fl-crystal.fl-success .fl-message{color:var(--success-color,var(--fl-success))}.fl-crystal.fl-error,.fl-crystal.fl-error .fl-message{color:var(--error-color,var(--fl-error))}.fl-crystal.fl-warning,.fl-crystal.fl-warning .fl-message{color:var(--warning-color,var(--fl-warning))}.fl-crystal.fl-info,.fl-crystal.fl-info .fl-message{color:var(--info-color,var(--fl-info))}.fl-crystal.fl-rtl{direction:rtl}.fl-crystal.fl-rtl .fl-content{padding:1rem 1rem 1rem 2.5rem}.fl-crystal.fl-rtl .fl-close{left:.75rem;right:auto}.fl-crystal.fl-rtl .fl-progress .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-crystal{animation:none}.fl-crystal:hover{animation:none;box-shadow:0 2px 8px var(--crystal-shadow)}}.fl-crystal.fl-auto-dark,body.fl-dark .fl-crystal,html.fl-dark .fl-crystal{background-color:var(--crystal-bg-dark,var(--fl-bg-dark));box-shadow:0 2px 8px var(--crystal-shadow-dark)}.fl-crystal.fl-auto-dark .fl-message,body.fl-dark .fl-crystal .fl-message,html.fl-dark .fl-crystal .fl-message{color:var(--crystal-text-dark,var(--fl-text-dark))}.fl-crystal.fl-auto-dark:hover,body.fl-dark .fl-crystal:hover,html.fl-dark .fl-crystal:hover{animation:none;box-shadow:0 4px 16px var(--crystal-shadow-dark)}
.fl-crystal{--crystal-bg-light:#fff;--crystal-bg-dark:rgba(30,30,30,.95);--crystal-text-light:#2c3e50;--crystal-text-dark:hsla(0,0%,100%,.95);--crystal-shadow:rgba(0,0,0,.08);--crystal-shadow-dark:rgba(0,0,0,.25)}@keyframes crystalIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes crystalPulse{0%{box-shadow:0 2px 8px var(--crystal-shadow)}50%{box-shadow:0 4px 12px var(--crystal-shadow)}to{box-shadow:0 2px 8px var(--crystal-shadow)}}.fl-crystal{animation:crystalIn .3s ease-out;background:var(--crystal-bg-light,var(--fl-bg-light));border-radius:var(--fl-border-radius,4px);box-shadow:0 2px 8px var(--crystal-shadow);font-family:var(--fl-font),serif;margin:0 0 1rem;max-width:380px;position:relative;transition:box-shadow .3s ease;will-change:transform,opacity}.fl-crystal:hover{animation:crystalPulse 2s ease-in-out infinite}.fl-crystal .fl-content{align-items:center;display:flex;gap:.75rem;padding:1rem 2.5rem 1rem 1rem}.fl-crystal .fl-text{flex:1}.fl-crystal .fl-message{color:var(--crystal-text-light,var(--fl-text-light));font-size:.9375rem;line-height:1.4;margin:0}.fl-crystal .fl-close{background:none;border:none;color:currentColor;cursor:pointer;font-size:1.25rem;line-height:1;opacity:.5;padding:.25rem;position:absolute;right:.75rem;top:50%;touch-action:manipulation;transform:translateY(-50%);transition:all .2s ease}.fl-crystal .fl-close:focus,.fl-crystal .fl-close:hover{opacity:1;transform:translateY(-50%) scale(1.1)}.fl-crystal .fl-progress-bar{bottom:0;height:3px;left:0;overflow:hidden;position:absolute;right:0}.fl-crystal .fl-progress-bar .fl-progress{height:100%;transform-origin:left center;width:100%}.fl-crystal.fl-success,.fl-crystal.fl-success .fl-message{color:var(--success-color,var(--fl-success))}.fl-crystal.fl-error,.fl-crystal.fl-error .fl-message{color:var(--error-color,var(--fl-error))}.fl-crystal.fl-warning,.fl-crystal.fl-warning .fl-message{color:var(--warning-color,var(--fl-warning))}.fl-crystal.fl-info,.fl-crystal.fl-info .fl-message{color:var(--info-color,var(--fl-info))}.fl-crystal.fl-rtl{direction:rtl}.fl-crystal.fl-rtl .fl-content{padding:1rem 1rem 1rem 2.5rem}.fl-crystal.fl-rtl .fl-close{left:.75rem;right:auto}.fl-crystal.fl-rtl .fl-progress .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-crystal{animation:none}.fl-crystal:hover{animation:none;box-shadow:0 2px 8px var(--crystal-shadow)}}.fl-crystal.fl-auto-dark,body.fl-dark .fl-crystal,html.fl-dark .fl-crystal{background-color:var(--crystal-bg-dark,var(--fl-bg-dark));box-shadow:0 2px 8px var(--crystal-shadow-dark)}.fl-crystal.fl-auto-dark .fl-message,body.fl-dark .fl-crystal .fl-message,html.fl-dark .fl-crystal .fl-message{color:var(--crystal-text-dark,var(--fl-text-dark))}.fl-crystal.fl-auto-dark:hover,body.fl-dark .fl-crystal:hover,html.fl-dark .fl-crystal:hover{animation:none;box-shadow:0 4px 16px var(--crystal-shadow-dark)}
src/Prime/Resources/public/themes/facebook/facebook.min.js
Vendored
+1 -1
View File
@@ -1 +1 @@
!function(n,i){"object"==typeof exports&&"undefined"!=typeof module?i(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],i):i((n="undefined"!=typeof globalThis?globalThis:n||self).flasher)}(this,(function(n){"use strict";const i={render:n=>{var i;const{type:s,message:e}=n,l="error"===s||"warning"===s,t=l?"alert":"status",o=l?"assertive":"polite",r=String((null===(i=n.options)||void 0===i?void 0:i.timestamp)||"2025-03-02 06:49:21").split(" ")[1].substring(0,5);return`\n <div class="fl-facebook fl-${s}" role="${t}" aria-live="${o}" aria-atomic="true">\n <div class="fl-fb-notification">\n <div class="fl-icon-container">\n ${(()=>{switch(s){case"success":return'<div class="fl-fb-icon fl-fb-icon-success">\n <svg viewBox="0 0 24 24" width="16" height="16">\n <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z"/>\n </svg>\n </div>';case"error":return'<div class="fl-fb-icon fl-fb-icon-error">\n <svg viewBox="0 0 24 24" width="16" height="16">\n <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.5c-.69 0-1.25.56-1.25 1.25S11.31 13 12 13s1.25-.56 1.25-1.25S12.69 10.5 12 10.5zM12 9c.552 0 1-.448 1-1V7c0-.552-.448-1-1-1s-1 .448-1 1v1c0 .552.448 1 1 1z"/>\n </svg>\n </div>';case"warning":return'<div class="fl-fb-icon fl-fb-icon-warning">\n <svg viewBox="0 0 24 24" width="16" height="16">\n <path fill="currentColor" d="M12.865 3.00017L22.3912 19.5002C22.6674 19.9785 22.5035 20.5901 22.0252 20.8662C21.8732 20.954 21.7008 21.0002 21.5252 21.0002H2.47266C1.92037 21.0002 1.47266 20.5525 1.47266 20.0002C1.47266 19.8246 1.51886 19.6522 1.60663 19.5002L11.1329 3.00017C11.409 2.52187 12.0206 2.358 12.4989 2.63414C12.651 2.72192 12.7772 2.84815 12.865 3.00017ZM11 16.0002V18.0002H13V16.0002H11ZM11 8.00017V14.0002H13V8.00017H11Z"/>\n </svg>\n </div>';case"info":return'<div class="fl-fb-icon fl-fb-icon-info">\n <svg viewBox="0 0 24 24" width="16" height="16">\n <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 100-16 8 8 0 000 16zm-1-5h2v-2h-2v2zm0-4h2V7h-2v4z"/>\n </svg>\n </div>'}return""})()}\n </div>\n <div class="fl-content">\n <div class="fl-message">\n ${e}\n </div>\n <div class="fl-meta">\n <span class="fl-time">${r}</span>\n </div>\n </div>\n <div class="fl-actions">\n <button class="fl-button fl-close" aria-label="Close ${s} message">\n <div class="fl-button-icon">\n <svg viewBox="0 0 24 24" width="20" height="20">\n <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>\n </svg>\n </div>\n </button>\n </div>\n </div>\n </div>`}};n.addTheme("facebook",i)}));
!function(n,i){"object"==typeof exports&&"undefined"!=typeof module?i(require("@flasher/flasher")):"function"==typeof define&&define.amd?define(["@flasher/flasher"],i):i((n="undefined"!=typeof globalThis?globalThis:n||self).flasher)}(this,(function(n){"use strict";const i={render:n=>{const{type:i,message:e}=n,s="error"===i||"warning"===i,t=s?"alert":"status",l=s?"assertive":"polite",o=(new Date).toLocaleTimeString([],{hour:"numeric",minute:"2-digit"});return`\n <div class="fl-facebook fl-${i}" role="${t}" aria-live="${l}" aria-atomic="true">\n <div class="fl-fb-notification">\n <div class="fl-icon-container">\n ${(()=>{switch(i){case"success":return'<div class="fl-fb-icon fl-fb-icon-success">\n <svg viewBox="0 0 24 24" width="16" height="16">\n <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z"/>\n </svg>\n </div>';case"error":return'<div class="fl-fb-icon fl-fb-icon-error">\n <svg viewBox="0 0 24 24" width="16" height="16">\n <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.5c-.69 0-1.25.56-1.25 1.25S11.31 13 12 13s1.25-.56 1.25-1.25S12.69 10.5 12 10.5zM12 9c.552 0 1-.448 1-1V7c0-.552-.448-1-1-1s-1 .448-1 1v1c0 .552.448 1 1 1z"/>\n </svg>\n </div>';case"warning":return'<div class="fl-fb-icon fl-fb-icon-warning">\n <svg viewBox="0 0 24 24" width="16" height="16">\n <path fill="currentColor" d="M12.865 3.00017L22.3912 19.5002C22.6674 19.9785 22.5035 20.5901 22.0252 20.8662C21.8732 20.954 21.7008 21.0002 21.5252 21.0002H2.47266C1.92037 21.0002 1.47266 20.5525 1.47266 20.0002C1.47266 19.8246 1.51886 19.6522 1.60663 19.5002L11.1329 3.00017C11.409 2.52187 12.0206 2.358 12.4989 2.63414C12.651 2.72192 12.7772 2.84815 12.865 3.00017ZM11 16.0002V18.0002H13V16.0002H11ZM11 8.00017V14.0002H13V8.00017H11Z"/>\n </svg>\n </div>';case"info":return'<div class="fl-fb-icon fl-fb-icon-info">\n <svg viewBox="0 0 24 24" width="16" height="16">\n <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 100-16 8 8 0 000 16zm-1-5h2v-2h-2v2zm0-4h2V7h-2v4z"/>\n </svg>\n </div>'}return""})()}\n </div>\n <div class="fl-content">\n <div class="fl-message">\n ${e}\n </div>\n <div class="fl-meta">\n <span class="fl-time">${o}</span>\n </div>\n </div>\n <div class="fl-actions">\n <button class="fl-button fl-close" aria-label="Close ${i} message">\n <div class="fl-button-icon">\n <svg viewBox="0 0 24 24" width="20" height="20">\n <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>\n </svg>\n </div>\n </button>\n </div>\n </div>\n </div>`}};n.addTheme("facebook",i)}));
src/Prime/Resources/public/themes/jade/jade.min.css
Vendored
+1 -1
View File
@@ -1 +1 @@
.fl-jade{--jade-text-light:#5f6c7b;--jade-text-dark:#e2e8f0;--jade-shadow:0 8px 24px hsla(210,8%,62%,.1);--jade-shadow-dark:0 8px 24px rgba(0,0,0,.2);--jade-border-radius:1rem;--jade-transition:0.3s cubic-bezier(0.4,0,0.2,1);--jade-success-bg:#f0fdf4;--jade-success-color:#16a34a;--jade-info-bg:#eff6ff;--jade-info-color:#3b82f6;--jade-warning-bg:#fffbeb;--jade-warning-color:#f59e0b;--jade-error-bg:#fef2f2;--jade-error-color:#dc2626;--jade-success-bg-dark:rgba(22,163,74,.15);--jade-info-bg-dark:rgba(59,130,246,.15);--jade-warning-bg-dark:rgba(245,158,11,.15);--jade-error-bg-dark:rgba(220,38,38,.15)}@keyframes jadeIn{0%{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.fl-jade{animation:jadeIn .4s var(--jade-transition);border:1px solid transparent;border-radius:var(--jade-border-radius);box-shadow:var(--jade-shadow);font-family:var(--fl-font),serif;margin:.5rem 0;overflow:hidden;padding:1rem 1.25rem;position:relative;will-change:transform,opacity}.fl-jade:last-child{margin-bottom:0}.fl-jade .fl-content{align-items:center;display:flex}.fl-jade .fl-message{flex:1;font-size:.875rem;font-weight:500;line-height:1.5;padding-right:.75rem}.fl-jade .fl-close{align-items:center;background:none;border:none;border-radius:50%;cursor:pointer;display:flex;flex-shrink:0;font-size:1.125rem;height:1.875rem;justify-content:center;opacity:.6;padding:.375rem;transition:all var(--jade-transition);width:1.875rem}.fl-jade .fl-close:focus,.fl-jade .fl-close:hover{background-color:rgba(0,0,0,.05);opacity:1}.fl-jade .fl-progress-bar{border-radius:0 0 var(--jade-border-radius) var(--jade-border-radius);bottom:0;height:3px;left:0;opacity:.7;overflow:hidden;position:absolute;right:0}.fl-jade .fl-progress-bar .fl-progress{height:100%;width:100%}.fl-jade.fl-success{background-color:var(--jade-success-bg);border-color:rgba(22,163,74,.1)}.fl-jade.fl-success,.fl-jade.fl-success .fl-close{color:var(--jade-success-color)}.fl-jade.fl-success .fl-close:focus,.fl-jade.fl-success .fl-close:hover{background-color:rgba(22,163,74,.1)}.fl-jade.fl-success .fl-progress-bar .fl-progress{background-color:var(--jade-success-color)}.fl-jade.fl-info{background-color:var(--jade-info-bg);border-color:rgba(59,130,246,.1)}.fl-jade.fl-info,.fl-jade.fl-info .fl-close{color:var(--jade-info-color)}.fl-jade.fl-info .fl-close:focus,.fl-jade.fl-info .fl-close:hover{background-color:rgba(59,130,246,.1)}.fl-jade.fl-info .fl-progress-bar .fl-progress{background-color:var(--jade-info-color)}.fl-jade.fl-warning{background-color:var(--jade-warning-bg);border-color:rgba(245,158,11,.1)}.fl-jade.fl-warning,.fl-jade.fl-warning .fl-close{color:var(--jade-warning-color)}.fl-jade.fl-warning .fl-close:focus,.fl-jade.fl-warning .fl-close:hover{background-color:rgba(245,158,11,.1)}.fl-jade.fl-warning .fl-progress-bar .fl-progress{background-color:var(--jade-warning-color)}.fl-jade.fl-error{background-color:var(--jade-error-bg);border-color:rgba(220,38,38,.1)}.fl-jade.fl-error,.fl-jade.fl-error .fl-close{color:var(--jade-error-color)}.fl-jade.fl-error .fl-close:focus,.fl-jade.fl-error .fl-close:hover{background-color:rgba(220,38,38,.1)}.fl-jade.fl-error .fl-progress-bar .fl-progress{background-color:var(--jade-error-color)}.fl-jade.fl-rtl{direction:rtl}.fl-jade.fl-rtl .fl-message{padding-left:.75rem;padding-right:0}.fl-jade.fl-rtl .fl-progress .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-jade{animation:none}}.fl-jade.fl-auto-dark,body.fl-dark .fl-jade,html.fl-dark .fl-jade{box-shadow:var(--jade-shadow-dark);color:var(--jade-text-dark)}.fl-jade.fl-auto-dark.fl-success,body.fl-dark .fl-jade.fl-success,html.fl-dark .fl-jade.fl-success{background-color:var(--jade-success-bg-dark);border-color:rgba(22,163,74,.2)}.fl-jade.fl-auto-dark.fl-info,body.fl-dark .fl-jade.fl-info,html.fl-dark .fl-jade.fl-info{background-color:var(--jade-info-bg-dark);border-color:rgba(59,130,246,.2)}.fl-jade.fl-auto-dark.fl-warning,body.fl-dark .fl-jade.fl-warning,html.fl-dark .fl-jade.fl-warning{background-color:var(--jade-warning-bg-dark);border-color:rgba(245,158,11,.2)}.fl-jade.fl-auto-dark.fl-error,body.fl-dark .fl-jade.fl-error,html.fl-dark .fl-jade.fl-error{background-color:var(--jade-error-bg-dark);border-color:rgba(220,38,38,.2)}.fl-jade.fl-auto-dark .fl-close:focus,.fl-jade.fl-auto-dark .fl-close:hover,body.fl-dark .fl-jade .fl-close:focus,body.fl-dark .fl-jade .fl-close:hover,html.fl-dark .fl-jade .fl-close:focus,html.fl-dark .fl-jade .fl-close:hover{background-color:hsla(0,0%,100%,.1)}
.fl-jade{--jade-text-light:#5f6c7b;--jade-text-dark:#e2e8f0;--jade-shadow:0 8px 24px hsla(210,8%,62%,.1);--jade-shadow-dark:0 8px 24px rgba(0,0,0,.2);--jade-border-radius:1rem;--jade-transition:0.3s cubic-bezier(0.4,0,0.2,1);--jade-success-bg:#f0fdf4;--jade-success-color:#16a34a;--jade-info-bg:#eff6ff;--jade-info-color:#3b82f6;--jade-warning-bg:#fffbeb;--jade-warning-color:#f59e0b;--jade-error-bg:#fef2f2;--jade-error-color:#dc2626;--jade-success-bg-dark:rgba(22,163,74,.15);--jade-info-bg-dark:rgba(59,130,246,.15);--jade-warning-bg-dark:rgba(245,158,11,.15);--jade-error-bg-dark:rgba(220,38,38,.15)}@keyframes jadeIn{0%{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.fl-jade{animation:jadeIn .4s var(--jade-transition);border:1px solid transparent;border-radius:var(--jade-border-radius);box-shadow:var(--jade-shadow);font-family:var(--fl-font),serif;margin:.5rem 0;overflow:hidden;padding:1rem 1.25rem;position:relative;will-change:transform,opacity}.fl-jade .fl-content{align-items:center;display:flex}.fl-jade .fl-message{flex:1;font-size:.875rem;font-weight:500;line-height:1.5;padding-right:.75rem}.fl-jade .fl-close{align-items:center;background:none;border:none;border-radius:50%;cursor:pointer;display:flex;flex-shrink:0;font-size:1.125rem;height:1.875rem;justify-content:center;opacity:.6;padding:.375rem;transition:all var(--jade-transition);width:1.875rem}.fl-jade .fl-close:focus,.fl-jade .fl-close:hover{background-color:rgba(0,0,0,.05);opacity:1}.fl-jade .fl-progress-bar{border-radius:0 0 var(--jade-border-radius) var(--jade-border-radius);bottom:0;height:3px;left:0;opacity:.7;overflow:hidden;position:absolute;right:0}.fl-jade .fl-progress-bar .fl-progress{height:100%;width:100%}.fl-jade.fl-success{background-color:var(--jade-success-bg);border-color:rgba(22,163,74,.1)}.fl-jade.fl-success,.fl-jade.fl-success .fl-close{color:var(--jade-success-color)}.fl-jade.fl-success .fl-close:focus,.fl-jade.fl-success .fl-close:hover{background-color:rgba(22,163,74,.1)}.fl-jade.fl-success .fl-progress-bar .fl-progress{background-color:var(--jade-success-color)}.fl-jade.fl-info{background-color:var(--jade-info-bg);border-color:rgba(59,130,246,.1)}.fl-jade.fl-info,.fl-jade.fl-info .fl-close{color:var(--jade-info-color)}.fl-jade.fl-info .fl-close:focus,.fl-jade.fl-info .fl-close:hover{background-color:rgba(59,130,246,.1)}.fl-jade.fl-info .fl-progress-bar .fl-progress{background-color:var(--jade-info-color)}.fl-jade.fl-warning{background-color:var(--jade-warning-bg);border-color:rgba(245,158,11,.1)}.fl-jade.fl-warning,.fl-jade.fl-warning .fl-close{color:var(--jade-warning-color)}.fl-jade.fl-warning .fl-close:focus,.fl-jade.fl-warning .fl-close:hover{background-color:rgba(245,158,11,.1)}.fl-jade.fl-warning .fl-progress-bar .fl-progress{background-color:var(--jade-warning-color)}.fl-jade.fl-error{background-color:var(--jade-error-bg);border-color:rgba(220,38,38,.1)}.fl-jade.fl-error,.fl-jade.fl-error .fl-close{color:var(--jade-error-color)}.fl-jade.fl-error .fl-close:focus,.fl-jade.fl-error .fl-close:hover{background-color:rgba(220,38,38,.1)}.fl-jade.fl-error .fl-progress-bar .fl-progress{background-color:var(--jade-error-color)}.fl-jade.fl-rtl{direction:rtl}.fl-jade.fl-rtl .fl-message{padding-left:.75rem;padding-right:0}.fl-jade.fl-rtl .fl-progress .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-jade{animation:none}}.fl-jade.fl-auto-dark,body.fl-dark .fl-jade,html.fl-dark .fl-jade{box-shadow:var(--jade-shadow-dark);color:var(--jade-text-dark)}.fl-jade.fl-auto-dark.fl-success,body.fl-dark .fl-jade.fl-success,html.fl-dark .fl-jade.fl-success{background-color:var(--jade-success-bg-dark);border-color:rgba(22,163,74,.2)}.fl-jade.fl-auto-dark.fl-info,body.fl-dark .fl-jade.fl-info,html.fl-dark .fl-jade.fl-info{background-color:var(--jade-info-bg-dark);border-color:rgba(59,130,246,.2)}.fl-jade.fl-auto-dark.fl-warning,body.fl-dark .fl-jade.fl-warning,html.fl-dark .fl-jade.fl-warning{background-color:var(--jade-warning-bg-dark);border-color:rgba(245,158,11,.2)}.fl-jade.fl-auto-dark.fl-error,body.fl-dark .fl-jade.fl-error,html.fl-dark .fl-jade.fl-error{background-color:var(--jade-error-bg-dark);border-color:rgba(220,38,38,.2)}.fl-jade.fl-auto-dark .fl-close:focus,.fl-jade.fl-auto-dark .fl-close:hover,body.fl-dark .fl-jade .fl-close:focus,body.fl-dark .fl-jade .fl-close:hover,html.fl-dark .fl-jade .fl-close:focus,html.fl-dark .fl-jade .fl-close:hover{background-color:hsla(0,0%,100%,.1)}
src/Prime/Resources/public/themes/minimal/minimal.min.css
Vendored
+1 -1
View File
@@ -1 +1 @@
.fl-minimal{--minimal-bg-light:hsla(0,0%,100%,.8);--minimal-bg-dark:rgba(25,25,25,.8);--minimal-text-light:#333;--minimal-text-dark:#f5f5f5;--minimal-shadow:0 2px 8px rgba(0,0,0,.08);--minimal-shadow-dark:0 2px 8px rgba(0,0,0,.15);--minimal-border-radius:6px;--minimal-border-color:rgba(0,0,0,.05);--minimal-border-color-dark:hsla(0,0%,100%,.1);--minimal-success:rgba(34,197,94,.9);--minimal-info:rgba(14,165,233,.9);--minimal-warning:rgba(245,158,11,.9);--minimal-error:rgba(239,68,68,.9)}@keyframes minimalIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.fl-minimal{animation:minimalIn .2s ease-out;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background-color:var(--minimal-bg-light);border:1px solid var(--minimal-border-color);border-radius:var(--minimal-border-radius);box-shadow:var(--minimal-shadow);color:var(--minimal-text-light);font-family:-apple-system,BlinkMacSystemFont,var(--fl-font),sans-serif;margin:.5rem 0;max-width:320px;padding:.75rem 1rem;position:relative;will-change:transform,opacity}.fl-minimal:last-child{margin-bottom:0}.fl-minimal .fl-content{align-items:center;display:flex;gap:.75rem}.fl-minimal .fl-dot{border-radius:50%;flex-shrink:0;height:8px;width:8px}.fl-minimal .fl-message{flex:1;font-size:.875rem;font-weight:450;line-height:1.4;margin:0}.fl-minimal .fl-close{align-items:center;background:none;border:none;color:currentColor;cursor:pointer;display:flex;flex-shrink:0;font-size:1rem;height:1.5rem;justify-content:center;opacity:.5;padding:.25rem;transition:opacity .15s;width:1.5rem}.fl-minimal .fl-close:focus,.fl-minimal .fl-close:hover{opacity:.8}.fl-minimal .fl-progress-bar{border-radius:0 0 var(--minimal-border-radius) var(--minimal-border-radius);bottom:0;height:2px;left:0;opacity:.7;overflow:hidden;position:absolute;right:0}.fl-minimal .fl-progress-bar .fl-progress{height:100%;width:100%}.fl-minimal.fl-success .fl-dot,.fl-minimal.fl-success .fl-progress-bar .fl-progress{background-color:var(--minimal-success)}.fl-minimal.fl-info .fl-dot,.fl-minimal.fl-info .fl-progress-bar .fl-progress{background-color:var(--minimal-info)}.fl-minimal.fl-warning .fl-dot,.fl-minimal.fl-warning .fl-progress-bar .fl-progress{background-color:var(--minimal-warning)}.fl-minimal.fl-error .fl-dot,.fl-minimal.fl-error .fl-progress-bar .fl-progress{background-color:var(--minimal-error)}.fl-minimal.fl-rtl{direction:rtl}.fl-minimal.fl-rtl .fl-progress .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-minimal{animation:none}}.fl-minimal.fl-auto-dark,body.fl-dark .fl-minimal,html.fl-dark .fl-minimal{background-color:var(--minimal-bg-dark);border-color:var(--minimal-border-color-dark);box-shadow:var(--minimal-shadow-dark);color:var(--minimal-text-dark)}
.fl-minimal{--minimal-bg-light:hsla(0,0%,100%,.8);--minimal-bg-dark:rgba(25,25,25,.8);--minimal-text-light:#333;--minimal-text-dark:#f5f5f5;--minimal-shadow:0 2px 8px rgba(0,0,0,.08);--minimal-shadow-dark:0 2px 8px rgba(0,0,0,.15);--minimal-border-radius:6px;--minimal-border-color:rgba(0,0,0,.05);--minimal-border-color-dark:hsla(0,0%,100%,.1);--minimal-success:rgba(34,197,94,.9);--minimal-info:rgba(14,165,233,.9);--minimal-warning:rgba(245,158,11,.9);--minimal-error:rgba(239,68,68,.9)}@keyframes minimalIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.fl-minimal{animation:minimalIn .2s ease-out;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background-color:var(--minimal-bg-light);border:1px solid var(--minimal-border-color);border-radius:var(--minimal-border-radius);box-shadow:var(--minimal-shadow);color:var(--minimal-text-light);font-family:-apple-system,BlinkMacSystemFont,var(--fl-font),sans-serif;margin:.5rem 0;max-width:320px;padding:.75rem 1rem;position:relative;will-change:transform,opacity}.fl-minimal .fl-content{align-items:center;display:flex;gap:.75rem}.fl-minimal .fl-dot{border-radius:50%;flex-shrink:0;height:8px;width:8px}.fl-minimal .fl-message{flex:1;font-size:.875rem;font-weight:450;line-height:1.4;margin:0}.fl-minimal .fl-close{align-items:center;background:none;border:none;color:currentColor;cursor:pointer;display:flex;flex-shrink:0;font-size:1rem;height:1.5rem;justify-content:center;opacity:.5;padding:.25rem;transition:opacity .15s;width:1.5rem}.fl-minimal .fl-close:focus,.fl-minimal .fl-close:hover{opacity:.8}.fl-minimal .fl-progress-bar{border-radius:0 0 var(--minimal-border-radius) var(--minimal-border-radius);bottom:0;height:2px;left:0;opacity:.7;overflow:hidden;position:absolute;right:0}.fl-minimal .fl-progress-bar .fl-progress{height:100%;width:100%}.fl-minimal.fl-success .fl-dot,.fl-minimal.fl-success .fl-progress-bar .fl-progress{background-color:var(--minimal-success)}.fl-minimal.fl-info .fl-dot,.fl-minimal.fl-info .fl-progress-bar .fl-progress{background-color:var(--minimal-info)}.fl-minimal.fl-warning .fl-dot,.fl-minimal.fl-warning .fl-progress-bar .fl-progress{background-color:var(--minimal-warning)}.fl-minimal.fl-error .fl-dot,.fl-minimal.fl-error .fl-progress-bar .fl-progress{background-color:var(--minimal-error)}.fl-minimal.fl-rtl{direction:rtl}.fl-minimal.fl-rtl .fl-progress .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-minimal{animation:none}}.fl-minimal.fl-auto-dark,body.fl-dark .fl-minimal,html.fl-dark .fl-minimal{background-color:var(--minimal-bg-dark);border-color:var(--minimal-border-color-dark);box-shadow:var(--minimal-shadow-dark);color:var(--minimal-text-dark)}
src/Prime/Resources/public/themes/neon/neon.min.css
Vendored
+1 -1
View File
@@ -1 +1 @@
.fl-neon{--neon-bg-light:hsla(0,0%,100%,.9);--neon-bg-dark:rgba(15,23,42,.9);--neon-text-light:#334155;--neon-text-dark:#f1f5f9;--neon-shadow:0 8px 30px rgba(0,0,0,.12);--neon-shadow-dark:0 8px 30px rgba(0,0,0,.25);--neon-border-radius:12px;--neon-success:#10b981;--neon-info:#3b82f6;--neon-warning:#f59e0b;--neon-error:#ef4444;--neon-glow-strength:10px;--neon-animation-duration:0.35s}@keyframes neonEntrance{0%{filter:blur(3px);opacity:0;transform:translateY(-15px)}to{filter:blur(0);opacity:1;transform:translateY(0)}}@keyframes neonGlow{0%,to{filter:drop-shadow(0 0 var(--neon-glow-strength) currentColor)}50%{filter:drop-shadow(0 0 calc(var(--neon-glow-strength)*.7) currentColor)}}.fl-neon{animation:neonEntrance var(--neon-animation-duration) ease-out;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background-color:var(--neon-bg-light);border-radius:var(--neon-border-radius);box-shadow:var(--neon-shadow);color:var(--neon-text-light);font-family:"Inter",var(--fl-font),sans-serif;margin:12px 0;padding:14px 18px;position:relative;will-change:transform,opacity,filter}.fl-neon .fl-icon-box{align-items:center;animation:neonGlow 3s ease-in-out infinite;border-radius:50%;display:flex;height:24px;justify-content:center;left:16px;position:absolute;top:-12px;width:24px}.fl-neon .fl-icon-box:before{border-radius:50%;content:"";height:100%;opacity:.4;position:absolute;width:100%}.fl-neon .fl-icon-box:after{border-radius:50%;content:"";height:10px;position:relative;width:10px;z-index:1}.fl-neon .fl-content{align-items:center;display:flex}.fl-neon .fl-message{flex:1;font-size:.9375rem;font-weight:500;line-height:1.5}.fl-neon .fl-close{align-items:center;background:none;border:none;border-radius:50%;color:inherit;cursor:pointer;display:flex;flex-shrink:0;font-size:1.2rem;height:28px;justify-content:center;margin-left:16px;opacity:.6;padding:0;transition:all .2s ease;width:28px}.fl-neon .fl-close:focus,.fl-neon .fl-close:hover{background-color:rgba(0,0,0,.06);opacity:1}.fl-neon .fl-progress-bar{border-radius:0 0 var(--neon-border-radius) var(--neon-border-radius);bottom:0;height:3px;left:0;overflow:hidden;position:absolute;right:0}.fl-neon .fl-progress-bar .fl-progress{height:100%;width:100%}.fl-neon.fl-success .fl-icon-box{color:var(--neon-success)}.fl-neon.fl-success .fl-icon-box:after,.fl-neon.fl-success .fl-icon-box:before,.fl-neon.fl-success .fl-progress{background-color:var(--neon-success)}.fl-neon.fl-info .fl-icon-box{color:var(--neon-info)}.fl-neon.fl-info .fl-icon-box:after,.fl-neon.fl-info .fl-icon-box:before,.fl-neon.fl-info .fl-progress{background-color:var(--neon-info)}.fl-neon.fl-warning .fl-icon-box{color:var(--neon-warning)}.fl-neon.fl-warning .fl-icon-box:after,.fl-neon.fl-warning .fl-icon-box:before,.fl-neon.fl-warning .fl-progress{background-color:var(--neon-warning)}.fl-neon.fl-error .fl-icon-box{color:var(--neon-error)}.fl-neon.fl-error .fl-icon-box:after,.fl-neon.fl-error .fl-icon-box:before,.fl-neon.fl-error .fl-progress{background-color:var(--neon-error)}.fl-neon.fl-rtl{direction:rtl}.fl-neon.fl-rtl .fl-icon-box{left:auto;right:16px}.fl-neon.fl-rtl .fl-close{margin-left:0;margin-right:16px}.fl-neon.fl-rtl .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-neon,.fl-neon .fl-icon-box{animation:none}}.fl-neon.fl-auto-dark,body.fl-dark .fl-neon,html.fl-dark .fl-neon{background-color:var(--neon-bg-dark);box-shadow:var(--neon-shadow-dark);color:var(--neon-text-dark)}.fl-neon.fl-auto-dark .fl-close:focus,.fl-neon.fl-auto-dark .fl-close:hover,body.fl-dark .fl-neon .fl-close:focus,body.fl-dark .fl-neon .fl-close:hover,html.fl-dark .fl-neon .fl-close:focus,html.fl-dark .fl-neon .fl-close:hover{background-color:hsla(0,0%,100%,.1)}
.fl-neon{--neon-bg-light:hsla(0,0%,100%,.9);--neon-bg-dark:rgba(15,23,42,.9);--neon-text-light:#334155;--neon-text-dark:#f1f5f9;--neon-shadow:0 8px 30px rgba(0,0,0,.12);--neon-shadow-dark:0 8px 30px rgba(0,0,0,.25);--neon-border-radius:12px;--neon-success:#10b981;--neon-info:#3b82f6;--neon-warning:#f59e0b;--neon-error:#ef4444;--neon-glow-strength:10px;--neon-animation-duration:0.35s}@keyframes neonEntrance{0%{filter:blur(3px);opacity:0;transform:translateY(-15px)}to{filter:blur(0);opacity:1;transform:translateY(0)}}@keyframes neonGlow{0%,to{filter:drop-shadow(0 0 var(--neon-glow-strength) currentColor)}50%{filter:drop-shadow(0 0 calc(var(--neon-glow-strength)*.7) currentColor)}}.fl-neon{animation:neonEntrance var(--neon-animation-duration) ease-out;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background-color:var(--neon-bg-light);border-radius:var(--neon-border-radius);box-shadow:var(--neon-shadow);color:var(--neon-text-light);font-family:"Inter",var(--fl-font),sans-serif;margin:12px 0;overflow:hidden;padding:14px 18px;position:relative;will-change:transform,opacity,filter}.fl-neon .fl-icon-box{align-items:center;animation:neonGlow 3s ease-in-out infinite;border-radius:50%;display:flex;height:24px;justify-content:center;left:16px;position:absolute;top:-12px;width:24px}.fl-neon .fl-icon-box:before{border-radius:50%;content:"";height:100%;opacity:.4;position:absolute;width:100%}.fl-neon .fl-icon-box:after{border-radius:50%;content:"";height:10px;position:relative;width:10px;z-index:1}.fl-neon .fl-content{align-items:center;display:flex}.fl-neon .fl-message{flex:1;font-size:.9375rem;font-weight:500;line-height:1.5}.fl-neon .fl-close{align-items:center;background:none;border:none;border-radius:50%;color:inherit;cursor:pointer;display:flex;flex-shrink:0;font-size:1.2rem;height:28px;justify-content:center;margin-left:16px;opacity:.6;padding:0;transition:all .2s ease;width:28px}.fl-neon .fl-close:focus,.fl-neon .fl-close:hover{background-color:rgba(0,0,0,.06);opacity:1}.fl-neon .fl-progress-bar{border-radius:0 0 var(--neon-border-radius) var(--neon-border-radius);bottom:0;height:3px;left:0;overflow:hidden;position:absolute;right:0}.fl-neon .fl-progress-bar .fl-progress{height:100%;width:100%}.fl-neon.fl-success .fl-icon-box{color:var(--neon-success)}.fl-neon.fl-success .fl-icon-box:after,.fl-neon.fl-success .fl-icon-box:before,.fl-neon.fl-success .fl-progress{background-color:var(--neon-success)}.fl-neon.fl-info .fl-icon-box{color:var(--neon-info)}.fl-neon.fl-info .fl-icon-box:after,.fl-neon.fl-info .fl-icon-box:before,.fl-neon.fl-info .fl-progress{background-color:var(--neon-info)}.fl-neon.fl-warning .fl-icon-box{color:var(--neon-warning)}.fl-neon.fl-warning .fl-icon-box:after,.fl-neon.fl-warning .fl-icon-box:before,.fl-neon.fl-warning .fl-progress{background-color:var(--neon-warning)}.fl-neon.fl-error .fl-icon-box{color:var(--neon-error)}.fl-neon.fl-error .fl-icon-box:after,.fl-neon.fl-error .fl-icon-box:before,.fl-neon.fl-error .fl-progress{background-color:var(--neon-error)}.fl-neon.fl-rtl{direction:rtl}.fl-neon.fl-rtl .fl-icon-box{left:auto;right:16px}.fl-neon.fl-rtl .fl-close{margin-left:0;margin-right:16px}.fl-neon.fl-rtl .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-neon,.fl-neon .fl-icon-box{animation:none}}.fl-neon.fl-auto-dark,body.fl-dark .fl-neon,html.fl-dark .fl-neon{background-color:var(--neon-bg-dark);box-shadow:var(--neon-shadow-dark);color:var(--neon-text-dark)}.fl-neon.fl-auto-dark .fl-close:focus,.fl-neon.fl-auto-dark .fl-close:hover,body.fl-dark .fl-neon .fl-close:focus,body.fl-dark .fl-neon .fl-close:hover,html.fl-dark .fl-neon .fl-close:focus,html.fl-dark .fl-neon .fl-close:hover{background-color:hsla(0,0%,100%,.1)}
src/Prime/Resources/public/themes/sapphire/sapphire.min.css
Vendored
+1 -1
View File
@@ -1 +1 @@
.fl-sapphire{--sapphire-bg-base:rgba(30,30,30,.9);--sapphire-text:#f0f0f0;--sapphire-shadow:rgba(0,0,0,.15);--sapphire-progress-bg:hsla(0,0%,100%,.2);--sapphire-progress-fill:hsla(0,0%,100%,.9);--sapphire-success:rgba(16,185,129,.95);--sapphire-error:rgba(239,68,68,.95);--sapphire-warning:rgba(245,158,11,.95);--sapphire-info:rgba(59,130,246,.95);--sapphire-animation:0.4s cubic-bezier(0.25,0.46,0.45,0.94)}@keyframes sapphireIn{0%{opacity:0;transform:translateY(10px)}60%{transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}.fl-sapphire{animation:sapphireIn var(--sapphire-animation);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background-color:var(--sapphire-bg-base);border-radius:.5em;box-shadow:0 6px 16px var(--sapphire-shadow);color:var(--sapphire-text);font-family:Roboto,var(--fl-font),serif;margin:0 0 .75em;min-width:200px;padding:1em 1.5em;position:relative;transition:all .3s ease;will-change:transform,opacity}.fl-sapphire:last-child{margin-bottom:0}.fl-sapphire .fl-message{color:var(--sapphire-text);font-size:.925em;line-height:1.4}.fl-sapphire .fl-progress-bar{background-color:var(--sapphire-progress-bg);border-radius:0 0 .375em .375em;bottom:0;height:4px;left:0;overflow:hidden;position:absolute;right:0}.fl-sapphire .fl-progress-bar .fl-progress{background-color:var(--sapphire-progress-fill);height:100%;transform-origin:left center;width:100%;will-change:transform}.fl-sapphire.fl-success{background-color:var(--sapphire-success)}.fl-sapphire.fl-error{background-color:var(--sapphire-error)}.fl-sapphire.fl-warning{background-color:var(--sapphire-warning)}.fl-sapphire.fl-info{background-color:var(--sapphire-info)}.fl-sapphire.fl-rtl{direction:rtl}.fl-sapphire.fl-rtl .fl-progress .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-sapphire{animation:none}}
.fl-sapphire{--sapphire-bg-base:rgba(30,30,30,.9);--sapphire-text:#f0f0f0;--sapphire-shadow:rgba(0,0,0,.15);--sapphire-progress-bg:hsla(0,0%,100%,.2);--sapphire-progress-fill:hsla(0,0%,100%,.9);--sapphire-success:rgba(16,185,129,.95);--sapphire-error:rgba(239,68,68,.95);--sapphire-warning:rgba(245,158,11,.95);--sapphire-info:rgba(59,130,246,.95);--sapphire-animation:0.4s cubic-bezier(0.25,0.46,0.45,0.94)}@keyframes sapphireIn{0%{opacity:0;transform:translateY(10px)}60%{transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}.fl-sapphire{animation:sapphireIn var(--sapphire-animation);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background-color:var(--sapphire-bg-base);border-radius:.5em;box-shadow:0 6px 16px var(--sapphire-shadow);color:var(--sapphire-text);font-family:Roboto,var(--fl-font),serif;margin:0 0 .75em;min-width:200px;padding:1em 1.5em;position:relative;transition:all .3s ease;will-change:transform,opacity}.fl-sapphire .fl-message{color:var(--sapphire-text);font-size:.925em;line-height:1.4}.fl-sapphire .fl-progress-bar{background-color:var(--sapphire-progress-bg);border-radius:0 0 .375em .375em;bottom:0;height:4px;left:0;overflow:hidden;position:absolute;right:0}.fl-sapphire .fl-progress-bar .fl-progress{background-color:var(--sapphire-progress-fill);height:100%;transform-origin:left center;width:100%;will-change:transform}.fl-sapphire.fl-success{background-color:var(--sapphire-success)}.fl-sapphire.fl-error{background-color:var(--sapphire-error)}.fl-sapphire.fl-warning{background-color:var(--sapphire-warning)}.fl-sapphire.fl-info{background-color:var(--sapphire-info)}.fl-sapphire.fl-rtl{direction:rtl}.fl-sapphire.fl-rtl .fl-progress .fl-progress{transform-origin:right center}@media (prefers-reduced-motion:reduce){.fl-sapphire{animation:none}}