mirror of
https://github.com/php-flasher/php-flasher.git
synced 2026-03-31 15:07:47 +01:00
Fix SCSS syntax errors and TypeScript build error
- Fix 15 theme SCSS files with orphaned comment closing markers - Add type assertion to notyf.ts for private property access - Regenerate build artifacts after fixes The SCSS files had broken syntax from previous comment removal where orphaned '*/' markers were left behind, causing SCSS parsing errors.
This commit is contained in:
@@ -24,8 +24,9 @@ export default class NotyfPlugin extends AbstractPlugin {
|
||||
|
||||
try {
|
||||
if (this.notyf) {
|
||||
const container = this.notyf.view.container
|
||||
const a11yContainer = this.notyf.view.a11yContainer
|
||||
const view = (this.notyf as unknown as { view: { container: { dataset?: DOMStringMap }; a11yContainer: { dataset?: DOMStringMap } } }).view
|
||||
const container = view.container
|
||||
const a11yContainer = view.a11yContainer
|
||||
|
||||
if (container && container.dataset) {
|
||||
container.dataset.turboTemporary = ''
|
||||
|
||||
+3
-2
@@ -523,8 +523,9 @@ class NotyfPlugin extends AbstractPlugin {
|
||||
});
|
||||
try {
|
||||
if (this.notyf) {
|
||||
const container = this.notyf.view.container;
|
||||
const a11yContainer = this.notyf.view.a11yContainer;
|
||||
const view = this.notyf.view;
|
||||
const container = view.container;
|
||||
const a11yContainer = view.a11yContainer;
|
||||
if (container && container.dataset) {
|
||||
container.dataset.turboTemporary = '';
|
||||
}
|
||||
|
||||
+3
-2
@@ -527,8 +527,9 @@
|
||||
});
|
||||
try {
|
||||
if (this.notyf) {
|
||||
const container = this.notyf.view.container;
|
||||
const a11yContainer = this.notyf.view.a11yContainer;
|
||||
const view = this.notyf.view;
|
||||
const container = view.container;
|
||||
const a11yContainer = view.a11yContainer;
|
||||
if (container && container.dataset) {
|
||||
container.dataset.turboTemporary = '';
|
||||
}
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
@@ -1,8 +1,3 @@
|
||||
*/
|
||||
* Amber Theme Variables
|
||||
*
|
||||
* Custom properties that define the appearance of Amber theme notifications.
|
||||
*/
|
||||
.fl-amber {
|
||||
/* Base colors and appearance */
|
||||
--amber-bg-light: #ffffff; /* Light mode background */
|
||||
@@ -18,9 +13,6 @@
|
||||
--amber-warning: #f59e0b; /* Warning color (orange) */
|
||||
--amber-error: #ef4444; /* Error color (red) */
|
||||
}
|
||||
* Entrance animation for Amber theme
|
||||
* Slides in from the top with a subtle fade effect
|
||||
*/
|
||||
@keyframes amberIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
@@ -31,9 +23,6 @@
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
* Base Amber theme styling
|
||||
* Defines the core appearance and behavior of notifications
|
||||
*/
|
||||
.fl-amber {
|
||||
background-color: var(--amber-bg-light);
|
||||
color: var(--amber-text-light);
|
||||
@@ -166,9 +155,6 @@
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
* Dark mode support
|
||||
* Applies dark theme colors when in dark mode
|
||||
*/
|
||||
body.fl-dark .fl-amber,
|
||||
html.fl-dark .fl-amber,
|
||||
.fl-amber.fl-auto-dark {
|
||||
|
||||
@@ -1,9 +1,3 @@
|
||||
*/
|
||||
* PHPFlasher - Aurora Theme
|
||||
*
|
||||
* Elegant notifications with subtle gradients, backdrop blur, and soft edges.
|
||||
* Features a modern "glass morphism" style with translucent backgrounds.
|
||||
*/
|
||||
.fl-aurora {
|
||||
/* Theme variables - Defines the visual appearance of Aurora notifications */
|
||||
/* Base colors and appearance */
|
||||
@@ -26,9 +20,6 @@
|
||||
--aurora-warning: #f59e0b; /* Warning color (orange) */
|
||||
--aurora-error: #ef4444; /* Error color (red) */
|
||||
}
|
||||
* Entrance animation for Aurora theme
|
||||
* Combines fade-in with a subtle scale effect
|
||||
*/
|
||||
@keyframes auroraFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
@@ -39,8 +30,6 @@
|
||||
transform: translateY(0) scale(1); /* End at full size */
|
||||
}
|
||||
}
|
||||
* Base Aurora theme styling
|
||||
*/
|
||||
.fl-aurora {
|
||||
/* Core appearance */
|
||||
background-color: var(--aurora-bg-light);
|
||||
@@ -179,9 +168,6 @@
|
||||
animation: none; /* Disable animation */
|
||||
}
|
||||
}
|
||||
* Dark mode support
|
||||
* Different styling when in dark mode
|
||||
*/
|
||||
body.fl-dark .fl-aurora,
|
||||
html.fl-dark .fl-aurora,
|
||||
.fl-aurora.fl-auto-dark {
|
||||
|
||||
@@ -1,12 +1,3 @@
|
||||
*/
|
||||
* PHPFlasher - Crystal Theme
|
||||
*
|
||||
* A clean, elegant notification theme with subtle animations
|
||||
* and a focus on simplicity and readability.
|
||||
*/
|
||||
* Theme-specific variables
|
||||
* Define the color palette and styling attributes for Crystal theme
|
||||
*/
|
||||
.fl-crystal {
|
||||
/* Base colors for light and dark modes */
|
||||
--crystal-bg-light: #ffffff; /* Pure white background in light mode */
|
||||
@@ -17,9 +8,6 @@
|
||||
--crystal-shadow: rgba(0, 0, 0, 0.08); /* Subtle shadow for light mode */
|
||||
--crystal-shadow-dark: rgba(0, 0, 0, 0.25); /* Stronger shadow for dark mode */
|
||||
}
|
||||
* Entrance animation
|
||||
* Slides in from the top with a fade effect
|
||||
*/
|
||||
@keyframes crystalIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
@@ -30,9 +18,6 @@
|
||||
transform: translateY(0); /* End at natural position */
|
||||
}
|
||||
}
|
||||
* Hover animation
|
||||
* Creates a subtle pulsing shadow effect
|
||||
*/
|
||||
@keyframes crystalPulse {
|
||||
0% {
|
||||
box-shadow: 0 2px 8px var(--crystal-shadow); /* Start with normal shadow */
|
||||
@@ -44,8 +29,6 @@
|
||||
box-shadow: 0 2px 8px var(--crystal-shadow); /* Return to normal shadow */
|
||||
}
|
||||
}
|
||||
* Base Crystal theme styling
|
||||
*/
|
||||
.fl-crystal {
|
||||
position: relative;
|
||||
background: var(--crystal-bg-light, var(--fl-bg-light));
|
||||
@@ -184,9 +167,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
* Dark mode support
|
||||
* Different styling when in dark mode
|
||||
*/
|
||||
body.fl-dark .fl-crystal,
|
||||
html.fl-dark .fl-crystal,
|
||||
.fl-crystal.fl-auto-dark {
|
||||
|
||||
@@ -1,12 +1,3 @@
|
||||
*/
|
||||
* PHPFlasher - Emerald Theme
|
||||
*
|
||||
* An elegant, minimalist theme with glass-like appearance and bounce animation.
|
||||
* Features translucent backgrounds with blur effects and colored text.
|
||||
*/
|
||||
* Theme-specific variables
|
||||
* Define the color palette and styling attributes for Emerald theme
|
||||
*/
|
||||
.fl-emerald {
|
||||
/* Base colors and appearance */
|
||||
--emerald-bg-light: rgba(255, 255, 255); /* Semi-transparent white background */
|
||||
@@ -21,9 +12,6 @@
|
||||
--emerald-warning: var(--warning-color, #f39c12); /* Orange for warnings */
|
||||
--emerald-info: var(--info-color, #3498db); /* Blue for information */
|
||||
}
|
||||
* Entrance animation with bounce effect
|
||||
* Combines scaling and vertical movement for a dynamic entrance
|
||||
*/
|
||||
@keyframes emeraldIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
@@ -38,8 +26,6 @@
|
||||
transform: scale(1) translateY(0); /* Settle at final size and position */
|
||||
}
|
||||
}
|
||||
* Base Emerald theme styling
|
||||
*/
|
||||
.fl-emerald {
|
||||
position: relative;
|
||||
background: var(--emerald-bg-light); /* Semi-transparent background */
|
||||
@@ -127,9 +113,6 @@
|
||||
animation: none; /* Disable animation */
|
||||
}
|
||||
}
|
||||
* Dark mode support
|
||||
* Different styling when in dark mode
|
||||
*/
|
||||
body.fl-dark .fl-emerald,
|
||||
html.fl-dark .fl-emerald,
|
||||
.fl-emerald.fl-auto-dark {
|
||||
|
||||
@@ -1,9 +1,3 @@
|
||||
*/
|
||||
* PHPFlasher - Facebook Theme
|
||||
*
|
||||
* Classic notifications inspired by Facebook's instantly recognizable interface.
|
||||
* Familiar to billions of users worldwide.
|
||||
*/
|
||||
.fl-facebook {
|
||||
/* Theme variables - Define the visual appearance of Facebook notifications */
|
||||
/* Base colors for light and dark modes */
|
||||
@@ -38,9 +32,6 @@
|
||||
/* Animation timing */
|
||||
--fb-animation-duration: 0.2s; /* Duration for entrance animation */
|
||||
}
|
||||
* Entrance animation for Facebook theme
|
||||
* Slides in from above with a fade effect
|
||||
*/
|
||||
@keyframes fbFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
@@ -51,8 +42,6 @@
|
||||
transform: translateY(0); /* End at natural position */
|
||||
}
|
||||
}
|
||||
* Base Facebook theme styling
|
||||
*/
|
||||
.fl-facebook {
|
||||
position: relative;
|
||||
margin: 8px 0; /* Spacing between notifications */
|
||||
@@ -226,9 +215,6 @@
|
||||
animation: none; /* Disable animation */
|
||||
}
|
||||
}
|
||||
* Dark mode support
|
||||
* Different styling when in dark mode
|
||||
*/
|
||||
body.fl-dark .fl-facebook,
|
||||
html.fl-dark .fl-facebook,
|
||||
.fl-facebook.fl-auto-dark {
|
||||
|
||||
@@ -1,9 +1,3 @@
|
||||
*/
|
||||
* PHPFlasher - Google Theme
|
||||
*
|
||||
* Google's Material Design-inspired notifications.
|
||||
* One of the most recognized design systems worldwide.
|
||||
*/
|
||||
.fl-google {
|
||||
/* Theme variables - Define the visual appearance of Material Design notifications */
|
||||
/* Base colors and appearance for light and dark modes */
|
||||
@@ -30,9 +24,6 @@
|
||||
--md-animation-duration: 0.3s; /* Standard Material motion duration */
|
||||
--md-ripple-duration: 0.6s; /* Ripple effect duration */
|
||||
}
|
||||
* Entrance animation for Google theme
|
||||
* Material Design-style slide up with easing
|
||||
*/
|
||||
@keyframes mdSlideUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
@@ -43,17 +34,12 @@
|
||||
transform: translateY(0); /* End at final position */
|
||||
}
|
||||
}
|
||||
* Material Design ripple effect animation
|
||||
* Creates expanding circle from point of interaction
|
||||
*/
|
||||
@keyframes mdRipple {
|
||||
to {
|
||||
transform: scale(4); /* Expand to 4x original size */
|
||||
opacity: 0; /* Fade out completely */
|
||||
}
|
||||
}
|
||||
* Base Google Material Design theme styling
|
||||
*/
|
||||
.fl-google {
|
||||
position: relative;
|
||||
margin: 8px 0; /* Spacing between notifications */
|
||||
@@ -264,9 +250,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
* Dark mode support
|
||||
* Material Design dark theme implementation
|
||||
*/
|
||||
body.fl-dark .fl-google,
|
||||
html.fl-dark .fl-google,
|
||||
.fl-google.fl-auto-dark {
|
||||
|
||||
@@ -1,9 +1,3 @@
|
||||
*/
|
||||
* PHPFlasher - iOS Theme
|
||||
*
|
||||
* Clean, sleek notifications inspired by Apple's iOS design language.
|
||||
* Mimics the native notifications seen on iPhone and iPad devices.
|
||||
*/
|
||||
.fl-ios {
|
||||
/* Theme variables - Define the visual appearance of iOS notifications */
|
||||
/* Base colors and appearance */
|
||||
@@ -26,9 +20,6 @@
|
||||
/* Animation timing */
|
||||
--ios-animation-duration: 0.4s; /* Duration for entrance animation */
|
||||
}
|
||||
* Slide-in entrance animation for iOS theme
|
||||
* Combines movement, scaling, and fade for realistic iOS appearance
|
||||
*/
|
||||
@keyframes iosSlideIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
@@ -39,9 +30,6 @@
|
||||
transform: translateY(0) scale(1); /* End at normal size and position */
|
||||
}
|
||||
}
|
||||
* Content expansion animation
|
||||
* Creates a subtle unfold effect for the notification content
|
||||
*/
|
||||
@keyframes iosExpand {
|
||||
0% {
|
||||
max-height: 0; /* Start collapsed */
|
||||
@@ -52,8 +40,6 @@
|
||||
opacity: 1; /* Fade in */
|
||||
}
|
||||
}
|
||||
* Base iOS theme styling
|
||||
*/
|
||||
.fl-ios {
|
||||
position: relative;
|
||||
margin: 10px 0; /* Space between notifications */
|
||||
@@ -254,9 +240,6 @@
|
||||
width: 100%; /* Full width on mobile */
|
||||
}
|
||||
}
|
||||
* Dark mode support
|
||||
* iOS-style dark appearance
|
||||
*/
|
||||
body.fl-dark .fl-ios,
|
||||
html.fl-dark .fl-ios,
|
||||
.fl-ios.fl-auto-dark {
|
||||
|
||||
@@ -1,9 +1,3 @@
|
||||
*/
|
||||
* PHPFlasher - Jade Theme
|
||||
*
|
||||
* Calm, soothing notification style with elegant minimalism.
|
||||
* Features soft colors, generous rounded corners, and subtle animations.
|
||||
*/
|
||||
.fl-jade {
|
||||
/* Theme variables - Define the visual appearance of Jade notifications */
|
||||
/* Base colors and appearance */
|
||||
@@ -28,9 +22,6 @@
|
||||
--jade-warning-bg-dark: rgba(245, 158, 11, 0.15); /* Semi-transparent orange */
|
||||
--jade-error-bg-dark: rgba(220, 38, 38, 0.15); /* Semi-transparent red */
|
||||
}
|
||||
* Entrance animation for Jade theme
|
||||
* Combines subtle upward movement with scaling for a refined appearance
|
||||
*/
|
||||
@keyframes jadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
@@ -41,8 +32,6 @@
|
||||
transform: translateY(0) scale(1); /* End at normal size and position */
|
||||
}
|
||||
}
|
||||
* Base Jade theme styling
|
||||
*/
|
||||
.fl-jade {
|
||||
padding: 1rem 1.25rem; /* Comfortable padding */
|
||||
margin: 0.5rem 0; /* Vertical spacing */
|
||||
@@ -214,9 +203,6 @@
|
||||
animation: none; /* Disable animation */
|
||||
}
|
||||
}
|
||||
* Dark mode support
|
||||
* Different styling when in dark mode
|
||||
*/
|
||||
body.fl-dark .fl-jade,
|
||||
html.fl-dark .fl-jade,
|
||||
.fl-jade.fl-auto-dark {
|
||||
|
||||
@@ -1,9 +1,3 @@
|
||||
*/
|
||||
* PHPFlasher - Material Design Theme
|
||||
*
|
||||
* Google's Material Design-inspired notifications with a minimalist approach.
|
||||
* Clean and focused implementation of the widely recognized design system.
|
||||
*/
|
||||
.fl-material {
|
||||
/* Theme variables - Define the visual appearance of Material Design notifications */
|
||||
/* Base colors and appearance for light and dark modes */
|
||||
@@ -30,9 +24,6 @@
|
||||
--md-animation-duration: 0.3s; /* Standard Material motion duration */
|
||||
--md-ripple-duration: 0.6s; /* Ripple effect duration */
|
||||
}
|
||||
* Entrance animation for Material theme
|
||||
* Material Design-style slide up with easing
|
||||
*/
|
||||
@keyframes mdSlideUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
@@ -43,17 +34,12 @@
|
||||
transform: translateY(0); /* End at final position */
|
||||
}
|
||||
}
|
||||
* Material Design ripple effect animation
|
||||
* Creates expanding circle from point of interaction
|
||||
*/
|
||||
@keyframes mdRipple {
|
||||
to {
|
||||
transform: scale(4); /* Expand to 4x original size */
|
||||
opacity: 0; /* Fade out completely */
|
||||
}
|
||||
}
|
||||
* Base Material Design theme styling
|
||||
*/
|
||||
.fl-material {
|
||||
position: relative;
|
||||
margin: 8px 0; /* Spacing between notifications */
|
||||
@@ -246,9 +232,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
* Dark mode support
|
||||
* Material Design dark theme implementation
|
||||
*/
|
||||
body.fl-dark .fl-material,
|
||||
html.fl-dark .fl-material,
|
||||
.fl-material.fl-auto-dark {
|
||||
|
||||
@@ -1,9 +1,3 @@
|
||||
*/
|
||||
* PHPFlasher - Minimal Theme
|
||||
*
|
||||
* Ultra-clean and minimal notifications that stay out of the way.
|
||||
* Features semi-transparent backgrounds, subtle blur effects, and compact design.
|
||||
*/
|
||||
.fl-minimal {
|
||||
/* Theme variables - Define the visual appearance of Minimal notifications */
|
||||
/* Base colors and appearance */
|
||||
@@ -22,9 +16,6 @@
|
||||
--minimal-warning: rgba(245, 158, 11, 0.9); /* Orange with slight transparency */
|
||||
--minimal-error: rgba(239, 68, 68, 0.9); /* Red with slight transparency */
|
||||
}
|
||||
* Entrance animation for Minimal theme
|
||||
* Quick, subtle slide-in from above
|
||||
*/
|
||||
@keyframes minimalIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
@@ -35,8 +26,6 @@
|
||||
transform: translateY(0); /* End at natural position */
|
||||
}
|
||||
}
|
||||
* Base Minimal theme styling
|
||||
*/
|
||||
.fl-minimal {
|
||||
background-color: var(--minimal-bg-light);
|
||||
color: var(--minimal-text-light);
|
||||
@@ -164,9 +153,6 @@
|
||||
animation: none; /* Disable animation */
|
||||
}
|
||||
}
|
||||
* Dark mode support
|
||||
* Different styling when in dark mode
|
||||
*/
|
||||
body.fl-dark .fl-minimal,
|
||||
html.fl-dark .fl-minimal,
|
||||
.fl-minimal.fl-auto-dark {
|
||||
|
||||
@@ -1,9 +1,3 @@
|
||||
*/
|
||||
* PHPFlasher - Neon Theme
|
||||
*
|
||||
* Notifications with subtle glowing accents and elegant typography.
|
||||
* Features frosted glass backgrounds and gentle illumination effects.
|
||||
*/
|
||||
.fl-neon {
|
||||
/* Theme variables - Define the visual appearance of Neon notifications */
|
||||
/* Base colors and appearance */
|
||||
@@ -23,9 +17,6 @@
|
||||
--neon-glow-strength: 10px; /* How far the glow extends */
|
||||
--neon-animation-duration: 0.35s; /* Duration for entrance animation */
|
||||
}
|
||||
* Entrance animation for Neon theme
|
||||
* Combines movement, fade, and blur transitions
|
||||
*/
|
||||
@keyframes neonEntrance {
|
||||
0% {
|
||||
opacity: 0;
|
||||
@@ -38,9 +29,6 @@
|
||||
filter: blur(0); /* End with clear focus */
|
||||
}
|
||||
}
|
||||
* Pulsing glow animation for the indicator
|
||||
* Creates a gentle breathing effect for the glow
|
||||
*/
|
||||
@keyframes neonGlow {
|
||||
0%, 100% {
|
||||
filter: drop-shadow(0 0 var(--neon-glow-strength) currentColor); /* Full glow */
|
||||
@@ -49,8 +37,6 @@
|
||||
filter: drop-shadow(0 0 calc(var(--neon-glow-strength) * 0.7) currentColor); /* Reduced glow */
|
||||
}
|
||||
}
|
||||
* Base Neon theme styling
|
||||
*/
|
||||
.fl-neon {
|
||||
background-color: var(--neon-bg-light);
|
||||
color: var(--neon-text-light);
|
||||
@@ -230,9 +216,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
* Dark mode support
|
||||
* Different styling when in dark mode
|
||||
*/
|
||||
body.fl-dark .fl-neon,
|
||||
html.fl-dark .fl-neon,
|
||||
.fl-neon.fl-auto-dark {
|
||||
|
||||
@@ -1,9 +1,3 @@
|
||||
*/
|
||||
* PHPFlasher - Onyx Theme
|
||||
*
|
||||
* Modern notification style with floating appearance and subtle accents.
|
||||
* Features elegant shadows, accent dots, and smooth animations.
|
||||
*/
|
||||
.fl-onyx {
|
||||
/* Theme variables - Define the visual appearance of Onyx notifications */
|
||||
/* Base colors and appearance */
|
||||
@@ -20,9 +14,6 @@
|
||||
--onyx-warning: #f59e0b; /* Amber for warning */
|
||||
--onyx-error: #ef4444; /* Red for error */
|
||||
}
|
||||
* Entrance animation for Onyx theme
|
||||
* Combines upward movement, fade, and blur transitions
|
||||
*/
|
||||
@keyframes onyxIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
@@ -35,8 +26,6 @@
|
||||
filter: blur(0); /* End with clear focus */
|
||||
}
|
||||
}
|
||||
* Base Onyx theme styling
|
||||
*/
|
||||
.fl-onyx {
|
||||
background-color: var(--onyx-bg-light);
|
||||
color: var(--onyx-text-light);
|
||||
@@ -208,9 +197,6 @@
|
||||
animation: none; /* Disable animation */
|
||||
}
|
||||
}
|
||||
* Dark mode support
|
||||
* Different styling when in dark mode
|
||||
*/
|
||||
body.fl-dark .fl-onyx,
|
||||
html.fl-dark .fl-onyx,
|
||||
.fl-onyx.fl-auto-dark {
|
||||
|
||||
@@ -1,9 +1,3 @@
|
||||
*/
|
||||
* PHPFlasher - Ruby Theme
|
||||
*
|
||||
* Vibrant notification style with gradient backgrounds and gemstone effects.
|
||||
* Features animated shine effect, circular icon container, and smooth animations.
|
||||
*/
|
||||
.fl-ruby {
|
||||
/* Theme variables - Define the visual appearance of Ruby notifications */
|
||||
/* Base colors and appearance */
|
||||
@@ -17,9 +11,6 @@
|
||||
--ruby-warning-gradient: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); /* Amber gradient */
|
||||
--ruby-error-gradient: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%); /* Red gradient */
|
||||
}
|
||||
* Shine animation for Ruby theme
|
||||
* Creates a moving highlight effect like light reflecting off a gemstone
|
||||
*/
|
||||
@keyframes rubyShine {
|
||||
0% {
|
||||
left: -100%; /* Start off-screen left */
|
||||
@@ -34,9 +25,6 @@
|
||||
opacity: 0; /* Fade out at the end */
|
||||
}
|
||||
}
|
||||
* Entrance animation for Ruby theme
|
||||
* Smooth scale-in effect
|
||||
*/
|
||||
@keyframes rubyIn {
|
||||
0% {
|
||||
opacity: 0; /* Start invisible */
|
||||
@@ -47,8 +35,6 @@
|
||||
transform: scale(1); /* End at normal size */
|
||||
}
|
||||
}
|
||||
* Base Ruby theme styling
|
||||
*/
|
||||
.fl-ruby {
|
||||
color: var(--ruby-text); /* White text for readability on gradients */
|
||||
padding: 0; /* No padding at the container level */
|
||||
|
||||
@@ -1,9 +1,3 @@
|
||||
*/
|
||||
* PHPFlasher - Sapphire Theme
|
||||
*
|
||||
* Modern glassmorphic notifications with blurred backdrop effect.
|
||||
* Features clean, minimal design and subtle animations.
|
||||
*/
|
||||
/* Theme-specific variables - override these to customize the sapphire theme */
|
||||
.fl-sapphire {
|
||||
/* Base appearance */
|
||||
@@ -21,9 +15,6 @@
|
||||
/* Animation timing */
|
||||
--sapphire-animation: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth bounce easing */
|
||||
}
|
||||
* Entrance animation keyframes
|
||||
* Includes a subtle bounce effect for a more dynamic appearance
|
||||
*/
|
||||
@keyframes sapphireIn {
|
||||
0% {
|
||||
opacity: 0; /* Start invisible */
|
||||
@@ -37,8 +28,6 @@
|
||||
transform: translateY(0); /* End at natural position */
|
||||
}
|
||||
}
|
||||
* Main theme styling
|
||||
*/
|
||||
.fl-sapphire {
|
||||
/* Base appearance */
|
||||
background-color: var(--sapphire-bg-base); /* Semi-transparent background */
|
||||
|
||||
@@ -1,9 +1,3 @@
|
||||
*/
|
||||
* PHPFlasher - Slack Theme
|
||||
*
|
||||
* Familiar notifications inspired by Slack's popular messaging platform.
|
||||
* Used by millions of professionals worldwide.
|
||||
*/
|
||||
.fl-slack {
|
||||
/* Theme variables - Define the visual appearance of Slack notifications */
|
||||
/* Base colors and appearance */
|
||||
@@ -28,9 +22,6 @@
|
||||
/* Animation timing */
|
||||
--slack-animation-duration: 150ms; /* Quick animation for responsive feel */
|
||||
}
|
||||
* Simple fade in animation
|
||||
* Quick and subtle to match Slack's responsive feel
|
||||
*/
|
||||
@keyframes slackFadeIn {
|
||||
from {
|
||||
opacity: 0; /* Start invisible */
|
||||
@@ -39,8 +30,6 @@
|
||||
opacity: 1; /* End fully visible */
|
||||
}
|
||||
}
|
||||
* Base Slack theme styling
|
||||
*/
|
||||
.fl-slack {
|
||||
position: relative;
|
||||
margin: 4px 0; /* Minimal spacing between messages */
|
||||
@@ -198,9 +187,6 @@
|
||||
animation: none; /* Disable animation */
|
||||
}
|
||||
}
|
||||
* Dark mode support
|
||||
* Slack-like dark theme
|
||||
*/
|
||||
body.fl-dark .fl-slack,
|
||||
html.fl-dark .fl-slack,
|
||||
.fl-slack.fl-auto-dark {
|
||||
|
||||
@@ -60,7 +60,7 @@ const facebookTheme = {
|
||||
<button class="fl-button fl-close" aria-label="Close ${type} 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 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"/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
+1
-1
@@ -64,7 +64,7 @@
|
||||
<button class="fl-button fl-close" aria-label="Close ${type} 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 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"/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
@@ -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=>{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)}));
|
||||
!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 12z"/>\n </svg>\n </div>\n </button>\n </div>\n </div>\n </div>`}};n.addTheme("facebook",i)}));
|
||||
|
||||
@@ -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=>{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)}));
|
||||
!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 12z"/>\n </svg>\n </div>\n </button>\n </div>\n </div>\n </div>`}};n.addTheme("facebook",i)}));
|
||||
|
||||
Reference in New Issue
Block a user