mirror of
https://github.com/php-flasher/php-flasher.git
synced 2026-03-31 15:07:47 +01:00
Younes ENNAJI
61f991f379
Remove verbose JSDoc and SCSS comments from: - Theme TypeScript files (17 amazon, amber, aurora, crystal, emerald, facebook, flasher, google, ios, jade, material, minimal, neon, onyx, ruby, sapphire, slack) - Theme SCSS files (21 theme stylesheets including icons, progress, wrapper, and all theme variants) - Theme index.ts registration files (17 files) - Entry point and export files (index.ts, exports.ts) - Adapter index.ts files (Noty, Notyf, SweetAlert, Toastr) - Remaining plugin files (toastr.ts, notyf.ts) Kept type annotations and removed only descriptive comments, examples, and file headers following Symfony's concise documentation style.
287 lines
11 KiB
SCSS
287 lines
11 KiB
SCSS
*/
|
|
* 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 */
|
|
--md-bg-light: #ffffff; /* Card background in light mode */
|
|
--md-bg-dark: #2d2d2d; /* Card background in dark mode */
|
|
--md-text-light: rgba(0, 0, 0, 0.87); /* Primary text in light mode (87% black) */
|
|
--md-text-secondary-light: rgba(0, 0, 0, 0.6); /* Secondary text in light mode (60% black) */
|
|
--md-text-dark: rgba(255, 255, 255, 0.87); /* Primary text in dark mode (87% white) */
|
|
--md-text-secondary-dark: rgba(255, 255, 255, 0.6); /* Secondary text in dark mode (60% white) */
|
|
/* Material Design elevation - multi-layered shadows */
|
|
--md-elevation: 0 3px 5px -1px rgba(0,0,0,0.2), /* Ambient shadow */
|
|
0 6px 10px 0 rgba(0,0,0,0.14), /* Penumbra shadow */
|
|
0 1px 18px 0 rgba(0,0,0,0.12); /* Umbra shadow */
|
|
--md-elevation-dark: 0 3px 5px -1px rgba(0,0,0,0.4), /* Darker ambient shadow */
|
|
0 6px 10px 0 rgba(0,0,0,0.28), /* Darker penumbra shadow */
|
|
0 1px 18px 0 rgba(0,0,0,0.24); /* Darker umbra shadow */
|
|
--md-border-radius: 4px; /* Material Design default corner radius */
|
|
/* Material Design color palette for notification types */
|
|
--md-success: #43a047; /* Green 600 from Material palette */
|
|
--md-info: #1e88e5; /* Blue 600 from Material palette */
|
|
--md-warning: #fb8c00; /* Orange 600 from Material palette */
|
|
--md-error: #e53935; /* Red 600 from Material palette */
|
|
/* Animation timing variables */
|
|
--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;
|
|
transform: translateY(20px); /* Start below final position */
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
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 */
|
|
font-family: Roboto, "Segoe UI", Helvetica, Arial, sans-serif; /* Material uses Roboto */
|
|
animation: mdSlideUp var(--md-animation-duration) cubic-bezier(0.4, 0, 0.2, 1); /* Material standard easing */
|
|
/**
|
|
* Main card container
|
|
* Follows Material Design card component styling
|
|
*/
|
|
.fl-md-card {
|
|
background-color: var(--md-bg-light);
|
|
color: var(--md-text-light);
|
|
border-radius: var(--md-border-radius);
|
|
box-shadow: var(--md-elevation); /* Multi-layered shadow for depth */
|
|
overflow: hidden; /* Contains progress bar */
|
|
}
|
|
/**
|
|
* Content section
|
|
* Contains icon and text content
|
|
*/
|
|
.fl-content {
|
|
padding: 16px; /* Standard Material padding */
|
|
display: flex;
|
|
align-items: flex-start; /* Align items to top */
|
|
}
|
|
/**
|
|
* Icon container
|
|
* Holds the Material Design SVG icon
|
|
*/
|
|
.fl-icon-wrapper {
|
|
margin-right: 16px; /* Space between icon and text */
|
|
color: var(--md-text-secondary-light); /* Default icon color */
|
|
flex-shrink: 0; /* Prevent icon from shrinking */
|
|
}
|
|
/**
|
|
* Text content container
|
|
* Holds title and message
|
|
*/
|
|
.fl-text-content {
|
|
flex: 1; /* Take available space */
|
|
}
|
|
/**
|
|
* Title styling
|
|
* Following Material Design typography
|
|
*/
|
|
.fl-title {
|
|
font-size: 1rem; /* 16px - Material body 1 */
|
|
font-weight: 500; /* Medium weight per Material guidelines */
|
|
margin-bottom: 4px;
|
|
}
|
|
/**
|
|
* Message styling
|
|
* Following Material Design typography
|
|
*/
|
|
.fl-message {
|
|
font-size: 0.875rem; /* 14px - Material body 2 */
|
|
line-height: 1.43; /* Material line height for body 2 */
|
|
color: var(--md-text-secondary-light); /* Secondary text color (60% opacity) */
|
|
}
|
|
/**
|
|
* Action buttons section
|
|
* Contains dismiss button
|
|
*/
|
|
.fl-actions {
|
|
display: flex;
|
|
justify-content: flex-end; /* Align buttons to right */
|
|
padding: 8px; /* Standard Material padding */
|
|
}
|
|
/**
|
|
* Action button styling
|
|
* Following Material Design "text button" guidelines
|
|
*/
|
|
.fl-action-button {
|
|
background: transparent;
|
|
border: none;
|
|
color: currentColor; /* Inherit color from parent */
|
|
font-family: inherit;
|
|
font-weight: 500; /* Medium weight per Material specs */
|
|
font-size: 0.8125rem; /* 13px - Material button text size */
|
|
text-transform: uppercase; /* Material buttons use uppercase */
|
|
letter-spacing: 0.0892857143em; /* Material's letter spacing for buttons */
|
|
padding: 8px 12px; /* Material button padding */
|
|
border-radius: 4px; /* Rounded corners per Material */
|
|
cursor: pointer;
|
|
transition: background-color 0.2s; /* Smooth hover effect */
|
|
position: relative; /* For ripple positioning */
|
|
overflow: hidden; /* Contain ripple effect */
|
|
&:hover, &:focus {
|
|
background-color: rgba(0, 0, 0, 0.04); /* Material hover state - 4% opacity */
|
|
}
|
|
/**
|
|
* Ripple effect
|
|
* Material Design's signature ink ripple on interaction
|
|
*/
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 5px; /* Initial small circle */
|
|
height: 5px;
|
|
background: currentColor; /* Use button text color */
|
|
opacity: 0;
|
|
border-radius: 50%; /* Perfect circle */
|
|
transform: scale(1);
|
|
pointer-events: none; /* Don't interfere with clicks */
|
|
}
|
|
&:active::after {
|
|
opacity: 0.3; /* Material ripple opacity */
|
|
animation: mdRipple var(--md-ripple-duration) linear; /* Expand and fade */
|
|
}
|
|
}
|
|
/**
|
|
* Type-specific styling
|
|
* Each notification type has its own color based on Material palette
|
|
*/
|
|
&.fl-success {
|
|
.fl-icon-wrapper {
|
|
color: var(--md-success); /* Green icon */
|
|
}
|
|
.fl-action-button {
|
|
color: var(--md-success); /* Green button */
|
|
}
|
|
}
|
|
&.fl-info {
|
|
.fl-icon-wrapper {
|
|
color: var(--md-info); /* Blue icon */
|
|
}
|
|
.fl-action-button {
|
|
color: var(--md-info); /* Blue button */
|
|
}
|
|
}
|
|
&.fl-warning {
|
|
.fl-icon-wrapper {
|
|
color: var(--md-warning); /* Orange icon */
|
|
}
|
|
.fl-action-button {
|
|
color: var(--md-warning); /* Orange button */
|
|
}
|
|
}
|
|
&.fl-error {
|
|
.fl-icon-wrapper {
|
|
color: var(--md-error); /* Red icon */
|
|
}
|
|
.fl-action-button {
|
|
color: var(--md-error); /* Red button */
|
|
}
|
|
}
|
|
/**
|
|
* Progress bar
|
|
* Material Design linear progress indicator
|
|
*/
|
|
.fl-progress-bar {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px; /* Material's standard progress height */
|
|
overflow: hidden;
|
|
.fl-progress {
|
|
height: 100%;
|
|
width: 100%;
|
|
transform-origin: left center; /* Animation starts from left */
|
|
}
|
|
}
|
|
/**
|
|
* Type-specific progress colors
|
|
* Each notification type has its own progress bar color
|
|
*/
|
|
&.fl-success .fl-progress {
|
|
background-color: var(--md-success); /* Green progress */
|
|
}
|
|
&.fl-info .fl-progress {
|
|
background-color: var(--md-info); /* Blue progress */
|
|
}
|
|
&.fl-warning .fl-progress {
|
|
background-color: var(--md-warning); /* Orange progress */
|
|
}
|
|
&.fl-error .fl-progress {
|
|
background-color: var(--md-error); /* Red progress */
|
|
}
|
|
/**
|
|
* RTL Support
|
|
* Right-to-left language direction support
|
|
*/
|
|
&.fl-rtl {
|
|
direction: rtl;
|
|
.fl-content {
|
|
flex-direction: row-reverse; /* Reverse flex direction */
|
|
}
|
|
.fl-icon-wrapper {
|
|
margin-right: 0;
|
|
margin-left: 16px; /* Swap margins for RTL */
|
|
}
|
|
.fl-actions {
|
|
justify-content: flex-start; /* Align buttons to left in RTL */
|
|
}
|
|
.fl-progress {
|
|
transform-origin: right center; /* Animation starts from right */
|
|
}
|
|
}
|
|
/**
|
|
* Accessibility
|
|
* Respects reduced motion preferences
|
|
*/
|
|
@media (prefers-reduced-motion: reduce) {
|
|
animation: none; /* Disable slide animation */
|
|
.fl-action-button:active::after {
|
|
animation: none; /* Disable ripple animation */
|
|
}
|
|
}
|
|
}
|
|
* Dark mode support
|
|
* Material Design dark theme implementation
|
|
*/
|
|
body.fl-dark .fl-google,
|
|
html.fl-dark .fl-google,
|
|
.fl-google.fl-auto-dark {
|
|
.fl-md-card {
|
|
background-color: var(--md-bg-dark); /* Darker background */
|
|
color: var(--md-text-dark); /* Lighter text */
|
|
box-shadow: var(--md-elevation-dark); /* Stronger shadows */
|
|
}
|
|
.fl-message {
|
|
color: var(--md-text-secondary-dark); /* Lighter secondary text */
|
|
}
|
|
.fl-action-button {
|
|
&:hover, &:focus {
|
|
background-color: rgba(255, 255, 255, 0.08); /* Material dark hover - 8% opacity */
|
|
}
|
|
}
|
|
}
|