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

Simplify remaining comments in global.d.ts and SCSS theme files

Browse Source 
- Remove file headers and verbose documentation from 2 global.d.ts files
- Simplify 12 SCSS theme files by removing multi-line documentation blocks
- Remove verbose inline comments that just repeat what the code does
- Keep helpful inline comments for non-obvious code

Files modified:
- src/Prime/Resources/assets/global.d.ts
- src/Toastr/Prime/Resources/assets/global.d.ts
- src/Prime/Resources/assets/themes/aurora/aurora.scss
- src/Prime/Resources/assets/themes/facebook/facebook.scss
- src/Prime/Resources/assets/themes/google/google.scss
- src/Prime/Resources/assets/themes/ios/ios.scss
- src/Prime/Resources/assets/themes/jade/jade.scss
- src/Prime/Resources/assets/themes/material/material.scss
- src/Prime/Resources/assets/themes/minimal/minimal.scss
- src/Prime/Resources/assets/themes/neon/neon.scss
- src/Prime/Resources/assets/themes/onyx/onyx.scss
- src/Prime/Resources/assets/themes/ruby/ruby.scss
- src/Prime/Resources/assets/themes/sapphire/sapphire.scss
- src/Prime/Resources/assets/themes/slack/slack.scss
This commit is contained in:
Younes ENNAJI
2026-01-16 01:28:29 +01:00
parent 34d780b0b7
commit 521746f813
14 changed files with 757 additions and 1391 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Prime/Resources/assets/global.d.ts
Vendored
-16
View File
@@ -1,23 +1,7 @@
/**
* @file TypeScript Global Declarations
* @description Type definitions for global objects
* @author Younes ENNAJI
*/
import type Flasher from './flasher' import type Flasher from './flasher'
/**
* Extend the Window interface to include the global flasher instance.
*
* This allows TypeScript to recognize window.flasher as a valid property
* with proper type information.
*/
declare global { declare global {
interface Window { interface Window {
/**
* Global PHPFlasher instance.
*
* Available as window.flasher in browser environments.
*/
flasher: Flasher flasher: Flasher
} }
} }
src/Prime/Resources/assets/themes/aurora/aurora.scss
+39 -83
View File
@@ -1,94 +1,72 @@
.fl-aurora { .fl-aurora {
/* Theme variables - Defines the visual appearance of Aurora notifications */ --aurora-bg-light: rgba(255, 255, 255);
/* Base colors and appearance */ --aurora-bg-dark: rgba(20, 20, 28);
--aurora-bg-light: rgba(255, 255, 255); /* Semi-transparent light background */ --aurora-text-light: #1e293b;
--aurora-bg-dark: rgba(20, 20, 28); /* Semi-transparent dark background */ --aurora-text-dark: #f8fafc;
--aurora-text-light: #1e293b; /* Light mode text color */ --aurora-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
--aurora-text-dark: #f8fafc; /* Dark mode text color */ --aurora-shadow-dark: 0 10px 30px rgba(0, 0, 0, 0.16);
--aurora-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* Light mode shadow */ --aurora-border-radius: 4px;
--aurora-shadow-dark: 0 10px 30px rgba(0, 0, 0, 0.16); /* Dark mode shadow */ --aurora-blur: 15px;
--aurora-border-radius: 4px; /* Rounded corners radius */
--aurora-blur: 15px; /* Amount of backdrop blur */
/* Gradient overlays for each notification type - Light mode */
--aurora-success-gradient: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.2) 100%); --aurora-success-gradient: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.2) 100%);
--aurora-info-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.2) 100%); --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-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%); --aurora-error-gradient: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.2) 100%);
/* Type-specific accent colors for progress bars */ --aurora-success: #10b981;
--aurora-success: #10b981; /* Success color (green) */ --aurora-info: #3b82f6;
--aurora-info: #3b82f6; /* Info color (blue) */ --aurora-warning: #f59e0b;
--aurora-warning: #f59e0b; /* Warning color (orange) */ --aurora-error: #ef4444;
--aurora-error: #ef4444; /* Error color (red) */
} }
@keyframes auroraFadeIn { @keyframes auroraFadeIn {
from { from {
opacity: 0; opacity: 0;
transform: translateY(-12px) scale(0.98); /* Start slightly smaller */ transform: translateY(-12px) scale(0.98);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0) scale(1); /* End at full size */ transform: translateY(0) scale(1);
} }
} }
.fl-aurora { .fl-aurora {
/* Core appearance */
background-color: var(--aurora-bg-light); background-color: var(--aurora-bg-light);
color: var(--aurora-text-light); color: var(--aurora-text-light);
border-radius: var(--aurora-border-radius) var(--aurora-border-radius) 0 0; /* Rounded top corners */ border-radius: var(--aurora-border-radius) var(--aurora-border-radius) 0 0;
box-shadow: var(--aurora-shadow); box-shadow: var(--aurora-shadow);
padding: 16px 18px; padding: 16px 18px;
margin: 10px 0; margin: 10px 0;
position: relative; position: relative;
animation: auroraFadeIn 0.35s cubic-bezier(0.21, 1.02, 0.73, 1); /* Custom easing */ animation: auroraFadeIn 0.35s cubic-bezier(0.21, 1.02, 0.73, 1);
font-family: var(--fl-font), sans-serif; font-family: var(--fl-font), sans-serif;
overflow: hidden; /* Prevents gradient from leaking */ overflow: hidden;
will-change: transform, opacity; /* Optimize for animation performance */ will-change: transform, opacity;
/* Glass morphism effect with backdrop blur */ backdrop-filter: blur(var(--aurora-blur));
backdrop-filter: blur(var(--aurora-blur)); /* Creates frosted glass look */ -webkit-backdrop-filter: blur(var(--aurora-blur));
-webkit-backdrop-filter: blur(var(--aurora-blur)); /* Safari support */
/**
* Gradient overlay
* Creates a colored gradient based on notification type
*/
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; /* Cover the entire notification */ inset: 0;
z-index: 0; /* Place behind content */ z-index: 0;
opacity: 0.8; opacity: 0.8;
border-radius: inherit; /* Match parent's border radius */ border-radius: inherit;
} }
/**
* Content container
* Holds message and close button
*/
.fl-content { .fl-content {
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
z-index: 1; /* Place above gradient overlay */ z-index: 1;
} }
/**
* Message styling
* The main notification text
*/
.fl-message { .fl-message {
flex: 1; /* Take available space */ flex: 1;
font-size: 0.9375rem; /* 15px at default font size */ font-size: 0.9375rem;
line-height: 1.5; line-height: 1.5;
font-weight: 500; /* Medium weight for better readability */ font-weight: 500;
margin-right: 10px; margin-right: 10px;
} }
/**
* Close button styling
* Circular button with hover effect
*/
.fl-close { .fl-close {
flex-shrink: 0; /* Prevent shrinking */ flex-shrink: 0;
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; /* Perfectly circular */ border-radius: 50%;
background: rgba(0, 0, 0, 0.05); /* Subtle background */ background: rgba(0, 0, 0, 0.05);
border: none; border: none;
font-size: 1rem; font-size: 1rem;
display: flex; display: flex;
@@ -100,13 +78,9 @@
color: inherit; color: inherit;
&:hover, &:focus { &:hover, &:focus {
opacity: 1; opacity: 1;
background: rgba(0, 0, 0, 0.1); /* Darker on hover/focus */ background: rgba(0, 0, 0, 0.1);
} }
} }
/**
* Progress bar container
* Holds the animated progress indicator
*/
.fl-progress-bar { .fl-progress-bar {
position: absolute; position: absolute;
left: 2px; left: 2px;
@@ -114,22 +88,14 @@
bottom: 2px; bottom: 2px;
height: 3px; height: 3px;
overflow: hidden; overflow: hidden;
border-radius: 6px; /* Rounded ends */ border-radius: 6px;
opacity: 0.7; /* Slightly transparent */ opacity: 0.7;
z-index: 1; /* Above gradient, below content */ z-index: 1;
} }
/**
* Progress indicator
* Animated by JavaScript to show remaining time
*/
.fl-progress { .fl-progress {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
/**
* Type-specific styling
* Each notification type gets its own gradient and progress bar color
*/
&.fl-success { &.fl-success {
&::before { background: var(--aurora-success-gradient); } &::before { background: var(--aurora-success-gradient); }
.fl-progress { background-color: var(--aurora-success); } .fl-progress { background-color: var(--aurora-success); }
@@ -146,26 +112,18 @@
&::before { background: var(--aurora-error-gradient); } &::before { background: var(--aurora-error-gradient); }
.fl-progress { background-color: var(--aurora-error); } .fl-progress { background-color: var(--aurora-error); }
} }
/**
* RTL support
* Right-to-left language direction support
*/
&.fl-rtl { &.fl-rtl {
direction: rtl; direction: rtl;
.fl-message { .fl-message {
margin-right: 0; margin-right: 0;
margin-left: 10px; /* Swap margins */ margin-left: 10px;
} }
.fl-progress { .fl-progress {
transform-origin: right center; /* Animation starts from right */ transform-origin: right center;
} }
} }
/**
* Accessibility
* Respects reduced motion preferences
*/
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
animation: none; /* Disable animation */ animation: none;
} }
} }
body.fl-dark .fl-aurora, body.fl-dark .fl-aurora,
@@ -174,14 +132,12 @@ html.fl-dark .fl-aurora,
background-color: var(--aurora-bg-dark); background-color: var(--aurora-bg-dark);
color: var(--aurora-text-dark); color: var(--aurora-text-dark);
box-shadow: var(--aurora-shadow-dark); box-shadow: var(--aurora-shadow-dark);
/* Adjusted close button for dark mode */
.fl-close { .fl-close {
background: rgba(255, 255, 255, 0.1); /* Lighter background in dark mode */ background: rgba(255, 255, 255, 0.1);
&:hover, &:focus { &:hover, &:focus {
background: rgba(255, 255, 255, 0.15); /* Lighter hover in dark mode */ background: rgba(255, 255, 255, 0.15);
} }
} }
/* Stronger gradients for better visibility in dark mode */
&.fl-success::before { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.25) 100%); } &.fl-success::before { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.25) 100%); }
&.fl-info::before { background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.25) 100%); } &.fl-info::before { background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.25) 100%); }
&.fl-warning::before { background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.25) 100%); } &.fl-warning::before { background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.25) 100%); }
src/Prime/Resources/assets/themes/facebook/facebook.scss
+56 -122
View File
@@ -1,96 +1,74 @@
.fl-facebook { .fl-facebook {
/* Theme variables - Define the visual appearance of Facebook notifications */ --fb-bg-light: #ffffff;
/* Base colors for light and dark modes */ --fb-bg-dark: #242526;
--fb-bg-light: #ffffff; /* White background in light mode */ --fb-text-light: #050505;
--fb-bg-dark: #242526; /* Dark gray in dark mode */ --fb-text-secondary-light: #65676b;
--fb-text-light: #050505; /* Near-black text in light mode */ --fb-text-dark: #e4e6eb;
--fb-text-secondary-light: #65676b; /* Gray secondary text in light mode */ --fb-text-secondary-dark: #b0b3b8;
--fb-text-dark: #e4e6eb; /* Off-white text in dark mode */ --fb-hover-light: #f0f2f5;
--fb-text-secondary-dark: #b0b3b8; /* Light gray secondary text in dark mode */ --fb-hover-dark: #3a3b3c;
--fb-hover-light: #f0f2f5; /* Light gray hover state in light mode */ --fb-border-light: #e4e6eb;
--fb-hover-dark: #3a3b3c; /* Dark gray hover state in dark mode */ --fb-border-dark: #3e4042;
--fb-border-light: #e4e6eb; /* Light gray borders in light mode */ --fb-blue: #1876f2;
--fb-border-dark: #3e4042; /* Dark gray borders in dark mode */ --fb-name-color: #050505;
--fb-blue: #1876f2; /* Facebook's signature blue */ --fb-name-color-dark: #e4e6eb;
--fb-name-color: #050505; /* Username color in light mode */ --fb-success: #31a24c;
--fb-name-color-dark: #e4e6eb; /* Username color in dark mode */ --fb-info: #1876f2;
/* Type-specific colors for icons */ --fb-warning: #f7b928;
--fb-success: #31a24c; /* Green for success notifications */ --fb-error: #e41e3f;
--fb-info: #1876f2; /* Blue for info notifications */ --fb-success-bg: #e7f3ff;
--fb-warning: #f7b928; /* Yellow for warning notifications */ --fb-info-bg: #e7f3ff;
--fb-error: #e41e3f; /* Red for error notifications */ --fb-warning-bg: #fff5cc;
/* Icon background colors - Light mode */ --fb-error-bg: #ffebe9;
--fb-success-bg: #e7f3ff; /* Light blue background for success icons */ --fb-success-bg-dark: #263c4b;
--fb-info-bg: #e7f3ff; /* Light blue background for info icons */ --fb-info-bg-dark: #263c4b;
--fb-warning-bg: #fff5cc; /* Light yellow background for warning icons */ --fb-warning-bg-dark: #3e3c26;
--fb-error-bg: #ffebe9; /* Light red background for error icons */ --fb-error-bg-dark: #472835;
/* Icon background colors - Dark mode */ --fb-animation-duration: 0.2s;
--fb-success-bg-dark: #263c4b; /* Dark blue background for success icons */
--fb-info-bg-dark: #263c4b; /* Dark blue background for info icons */
--fb-warning-bg-dark: #3e3c26; /* Dark yellow background for warning icons */
--fb-error-bg-dark: #472835; /* Dark red background for error icons */
/* Animation timing */
--fb-animation-duration: 0.2s; /* Duration for entrance animation */
} }
@keyframes fbFadeIn { @keyframes fbFadeIn {
from { from {
opacity: 0; opacity: 0;
transform: translateY(-8px); /* Start slightly above final position */ transform: translateY(-8px);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0); /* End at natural position */ transform: translateY(0);
} }
} }
.fl-facebook { .fl-facebook {
position: relative; position: relative;
margin: 8px 0; /* Spacing between notifications */ margin: 8px 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Facebook's font stack */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
animation: fbFadeIn var(--fb-animation-duration) ease-out; animation: fbFadeIn var(--fb-animation-duration) ease-out;
/**
* Main notification card
* Contains icon, message, and actions
*/
.fl-fb-notification { .fl-fb-notification {
background-color: var(--fb-bg-light); background-color: var(--fb-bg-light);
color: var(--fb-text-light); color: var(--fb-text-light);
border-radius: 8px; /* Rounded corners */ border-radius: 8px;
padding: 12px; padding: 12px;
display: flex; display: flex;
align-items: flex-start; /* Align items to top for proper icon alignment */ align-items: flex-start;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow */ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
transition: background-color 0.1s ease; /* Smooth hover transition */ transition: background-color 0.1s ease;
&:hover { &:hover {
background-color: var(--fb-hover-light); /* Background change on hover */ background-color: var(--fb-hover-light);
} }
} }
/**
* Icon container
* Holds the notification type icon
*/
.fl-icon-container { .fl-icon-container {
margin-right: 12px; margin-right: 12px;
flex-shrink: 0; /* Prevent icon from shrinking */ flex-shrink: 0;
} }
/**
* Icon styling
* Circular background with centered icon
*/
.fl-fb-icon { .fl-fb-icon {
width: 36px; width: 36px;
height: 36px; height: 36px;
border-radius: 50%; /* Perfectly circular */ border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; /* Center the SVG icon */ justify-content: center;
svg { svg {
color: white; /* Icon color is white in light mode */ color: white;
} }
} }
/**
* Type-specific icon styling
* Each notification type has its own icon color
*/
.fl-fb-icon-success { .fl-fb-icon-success {
background-color: var(--fb-success); background-color: var(--fb-success);
} }
@@ -103,65 +81,37 @@
.fl-fb-icon-error { .fl-fb-icon-error {
background-color: var(--fb-error); background-color: var(--fb-error);
} }
/**
* Content container
* Holds message and timestamp
*/
.fl-content { .fl-content {
flex: 1; /* Take available space */ flex: 1;
min-width: 0; /* Enable text truncation */ min-width: 0;
} }
/**
* Message styling
* Main notification text
*/
.fl-message { .fl-message {
font-size: 15px; /* Facebook's standard text size */ font-size: 15px;
line-height: 1.33; /* Improved readability */ line-height: 1.33;
margin-bottom: 4px; margin-bottom: 4px;
} }
/**
* Username styling
* For displaying user names in bold
*/
.fl-user-name { .fl-user-name {
font-weight: 600; /* Bold weight for usernames */ font-weight: 600;
color: var(--fb-name-color); color: var(--fb-name-color);
margin-right: 4px; margin-right: 4px;
} }
/**
* Metadata container
* Holds timestamp and additional info
*/
.fl-meta { .fl-meta {
display: flex; display: flex;
align-items: center; align-items: center;
} }
/**
* Timestamp styling
* Shows when the notification was created
*/
.fl-time { .fl-time {
font-size: 13px; /* Smaller text for timestamp */ font-size: 13px;
color: var(--fb-text-secondary-light); /* Gray secondary text color */ color: var(--fb-text-secondary-light);
} }
/**
* Action buttons container
* Holds interactive buttons like close
*/
.fl-actions { .fl-actions {
display: flex; display: flex;
margin-left: 12px; margin-left: 12px;
align-items: center; align-items: center;
} }
/**
* Button styling
* Circular buttons with hover effect
*/
.fl-button { .fl-button {
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 50%; /* Circular button */ border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -170,49 +120,37 @@
cursor: pointer; cursor: pointer;
color: var(--fb-text-secondary-light); color: var(--fb-text-secondary-light);
margin-left: 8px; margin-left: 8px;
transition: background-color 0.1s; /* Quick hover transition */ transition: background-color 0.1s;
&:hover { &:hover {
background-color: var(--fb-border-light); /* Darker background on hover */ background-color: var(--fb-border-light);
} }
} }
/**
* Button icon container
* Centers SVG icons within buttons
*/
.fl-button-icon { .fl-button-icon {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
/**
* RTL Support
* Right-to-left language direction support
*/
&.fl-rtl { &.fl-rtl {
direction: rtl; direction: rtl;
.fl-icon-container { .fl-icon-container {
margin-right: 0; margin-right: 0;
margin-left: 12px; /* Swap margins for RTL */ margin-left: 12px;
} }
.fl-user-name { .fl-user-name {
margin-right: 0; margin-right: 0;
margin-left: 4px; /* Swap margins for RTL */ margin-left: 4px;
} }
.fl-actions { .fl-actions {
margin-left: 0; margin-left: 0;
margin-right: 12px; /* Swap margins for RTL */ margin-right: 12px;
} }
.fl-button { .fl-button {
margin-left: 0; margin-left: 0;
margin-right: 8px; /* Swap margins for RTL */ margin-right: 8px;
} }
} }
/**
* Accessibility
* Respects reduced motion preferences
*/
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
animation: none; /* Disable animation */ animation: none;
} }
} }
body.fl-dark .fl-facebook, body.fl-dark .fl-facebook,
@@ -221,7 +159,7 @@ html.fl-dark .fl-facebook,
.fl-fb-notification { .fl-fb-notification {
background-color: var(--fb-bg-dark); background-color: var(--fb-bg-dark);
color: var(--fb-text-dark); color: var(--fb-text-dark);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Stronger shadow in dark mode */ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
&:hover { &:hover {
background-color: var(--fb-hover-dark); background-color: var(--fb-hover-dark);
} }
@@ -239,13 +177,9 @@ html.fl-dark .fl-facebook,
background-color: var(--fb-border-dark); background-color: var(--fb-border-dark);
} }
} }
/**
* Type-specific icon styling for dark mode
* Uses darker backgrounds with colored icons for better visibility
*/
.fl-fb-icon-success { .fl-fb-icon-success {
background-color: var(--fb-success-bg-dark); background-color: var(--fb-success-bg-dark);
svg { color: var(--fb-success); } /* Icon color matches type in dark mode */ svg { color: var(--fb-success); }
} }
.fl-fb-icon-info { .fl-fb-icon-info {
background-color: var(--fb-info-bg-dark); background-color: var(--fb-info-bg-dark);
src/Prime/Resources/assets/themes/google/google.scss
+83 -144
View File
@@ -1,252 +1,191 @@
.fl-google { .fl-google {
/* Theme variables - Define the visual appearance of Material Design notifications */ --md-bg-light: #ffffff;
/* Base colors and appearance for light and dark modes */ --md-bg-dark: #2d2d2d;
--md-bg-light: #ffffff; /* Card background in light mode */ --md-text-light: rgba(0, 0, 0, 0.87);
--md-bg-dark: #2d2d2d; /* Card background in dark mode */ --md-text-secondary-light: rgba(0, 0, 0, 0.6);
--md-text-light: rgba(0, 0, 0, 0.87); /* Primary text in light mode (87% black) */ --md-text-dark: rgba(255, 255, 255, 0.87);
--md-text-secondary-light: rgba(0, 0, 0, 0.6); /* Secondary text in light mode (60% black) */ --md-text-secondary-dark: rgba(255, 255, 255, 0.6);
--md-text-dark: rgba(255, 255, 255, 0.87); /* Primary text in dark mode (87% white) */ --md-elevation: 0 3px 5px -1px rgba(0,0,0,0.2),
--md-text-secondary-dark: rgba(255, 255, 255, 0.6); /* Secondary text in dark mode (60% white) */ 0 6px 10px 0 rgba(0,0,0,0.14),
/* Material Design elevation - multi-layered shadows */ 0 1px 18px 0 rgba(0,0,0,0.12);
--md-elevation: 0 3px 5px -1px rgba(0,0,0,0.2), /* Ambient shadow */ --md-elevation-dark: 0 3px 5px -1px rgba(0,0,0,0.4),
0 6px 10px 0 rgba(0,0,0,0.14), /* Penumbra shadow */ 0 6px 10px 0 rgba(0,0,0,0.28),
0 1px 18px 0 rgba(0,0,0,0.12); /* Umbra shadow */ 0 1px 18px 0 rgba(0,0,0,0.24);
--md-elevation-dark: 0 3px 5px -1px rgba(0,0,0,0.4), /* Darker ambient shadow */ --md-border-radius: 4px;
0 6px 10px 0 rgba(0,0,0,0.28), /* Darker penumbra shadow */ --md-success: #43a047;
0 1px 18px 0 rgba(0,0,0,0.24); /* Darker umbra shadow */ --md-info: #1e88e5;
--md-border-radius: 4px; /* Material Design default corner radius */ --md-warning: #fb8c00;
/* Material Design color palette for notification types */ --md-error: #e53935;
--md-success: #43a047; /* Green 600 from Material palette */ --md-animation-duration: 0.3s;
--md-info: #1e88e5; /* Blue 600 from Material palette */ --md-ripple-duration: 0.6s;
--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 */
} }
@keyframes mdSlideUp { @keyframes mdSlideUp {
0% { 0% {
opacity: 0; opacity: 0;
transform: translateY(20px); /* Start below final position */ transform: translateY(20px);
} }
100% { 100% {
opacity: 1; opacity: 1;
transform: translateY(0); /* End at final position */ transform: translateY(0);
} }
} }
@keyframes mdRipple { @keyframes mdRipple {
to { to {
transform: scale(4); /* Expand to 4x original size */ transform: scale(4);
opacity: 0; /* Fade out completely */ opacity: 0;
} }
} }
.fl-google { .fl-google {
position: relative; position: relative;
margin: 8px 0; /* Spacing between notifications */ margin: 8px 0;
font-family: Roboto, "Segoe UI", Helvetica, Arial, sans-serif; /* Material uses Roboto */ font-family: Roboto, "Segoe UI", Helvetica, Arial, sans-serif;
animation: mdSlideUp var(--md-animation-duration) cubic-bezier(0.4, 0, 0.2, 1); /* Material standard easing */ animation: mdSlideUp var(--md-animation-duration) cubic-bezier(0.4, 0, 0.2, 1);
/**
* Main card container
* Follows Material Design card component styling
*/
.fl-md-card { .fl-md-card {
background-color: var(--md-bg-light); background-color: var(--md-bg-light);
color: var(--md-text-light); color: var(--md-text-light);
border-radius: var(--md-border-radius); border-radius: var(--md-border-radius);
box-shadow: var(--md-elevation); /* Multi-layered shadow for depth */ box-shadow: var(--md-elevation);
overflow: hidden; /* Contains progress bar */ overflow: hidden;
} }
/**
* Content section
* Contains icon and text content
*/
.fl-content { .fl-content {
padding: 16px; /* Standard Material padding */ padding: 16px;
display: flex; display: flex;
align-items: flex-start; /* Align items to top */ align-items: flex-start;
} }
/**
* Icon container
* Holds the Material Design SVG icon
*/
.fl-icon-wrapper { .fl-icon-wrapper {
margin-right: 16px; /* Space between icon and text */ margin-right: 16px;
color: var(--md-text-secondary-light); /* Default icon color */ color: var(--md-text-secondary-light);
flex-shrink: 0; /* Prevent icon from shrinking */ flex-shrink: 0;
} }
/**
* Text content container
* Holds title and message
*/
.fl-text-content { .fl-text-content {
flex: 1; /* Take available space */ flex: 1;
} }
/**
* Title styling
* Following Material Design typography
*/
.fl-title { .fl-title {
font-size: 1rem; /* 16px - Material body 1 */ font-size: 1rem;
font-weight: 500; /* Medium weight per Material guidelines */ font-weight: 500;
margin-bottom: 4px; margin-bottom: 4px;
} }
/**
* Message styling
* Following Material Design typography
*/
.fl-message { .fl-message {
font-size: 0.875rem; /* 14px - Material body 2 */ font-size: 0.875rem;
line-height: 1.43; /* Material line height for body 2 */ line-height: 1.43;
color: var(--md-text-secondary-light); /* Secondary text color (60% opacity) */ color: var(--md-text-secondary-light);
} }
/**
* Action buttons section
* Contains dismiss button
*/
.fl-actions { .fl-actions {
display: flex; display: flex;
justify-content: flex-end; /* Align buttons to right */ justify-content: flex-end;
padding: 8px; /* Standard Material padding */ padding: 8px;
} }
/**
* Action button styling
* Following Material Design "text button" guidelines
*/
.fl-action-button { .fl-action-button {
background: transparent; background: transparent;
border: none; border: none;
color: currentColor; /* Inherit color from parent */ color: currentColor;
font-family: inherit; font-family: inherit;
font-weight: 500; /* Medium weight per Material specs */ font-weight: 500;
font-size: 0.8125rem; /* 13px - Material button text size */ font-size: 0.8125rem;
text-transform: uppercase; /* Material buttons use uppercase */ text-transform: uppercase;
letter-spacing: 0.0892857143em; /* Material's letter spacing for buttons */ letter-spacing: 0.0892857143em;
padding: 8px 12px; /* Material button padding */ padding: 8px 12px;
border-radius: 4px; /* Rounded corners per Material */ border-radius: 4px;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s; /* Smooth hover effect */ transition: background-color 0.2s;
position: relative; /* For ripple positioning */ position: relative;
overflow: hidden; /* Contain ripple effect */ overflow: hidden;
&:hover, &:focus { &:hover, &:focus {
background-color: rgba(0, 0, 0, 0.04); /* Material hover state - 4% opacity */ background-color: rgba(0, 0, 0, 0.04);
} }
/**
* Ripple effect
* Material Design's signature ink ripple on interaction
*/
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
width: 5px; /* Initial small circle */ width: 5px;
height: 5px; height: 5px;
background: currentColor; /* Use button text color */ background: currentColor;
opacity: 0; opacity: 0;
border-radius: 50%; /* Perfect circle */ border-radius: 50%;
transform: scale(1); transform: scale(1);
pointer-events: none; /* Don't interfere with clicks */ pointer-events: none;
} }
&:active::after { &:active::after {
opacity: 0.3; /* Material ripple opacity */ opacity: 0.3;
animation: mdRipple var(--md-ripple-duration) linear; /* Expand and fade */ animation: mdRipple var(--md-ripple-duration) linear;
} }
} }
/**
* Type-specific styling
* Each notification type has its own color based on Material palette
*/
&.fl-success { &.fl-success {
.fl-icon-wrapper { .fl-icon-wrapper {
color: var(--md-success); /* Green icon */ color: var(--md-success);
} }
.fl-action-button { .fl-action-button {
color: var(--md-success); /* Green button */ color: var(--md-success);
} }
} }
&.fl-info { &.fl-info {
.fl-icon-wrapper { .fl-icon-wrapper {
color: var(--md-info); /* Blue icon */ color: var(--md-info);
} }
.fl-action-button { .fl-action-button {
color: var(--md-info); /* Blue button */ color: var(--md-info);
} }
} }
&.fl-warning { &.fl-warning {
.fl-icon-wrapper { .fl-icon-wrapper {
color: var(--md-warning); /* Orange icon */ color: var(--md-warning);
} }
.fl-action-button { .fl-action-button {
color: var(--md-warning); /* Orange button */ color: var(--md-warning);
} }
} }
&.fl-error { &.fl-error {
.fl-icon-wrapper { .fl-icon-wrapper {
color: var(--md-error); /* Red icon */ color: var(--md-error);
} }
.fl-action-button { .fl-action-button {
color: var(--md-error); /* Red button */ color: var(--md-error);
} }
} }
/**
* Progress bar
* Material Design linear progress indicator
*/
.fl-progress-bar { .fl-progress-bar {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 4px; /* Material's standard progress height */ height: 4px;
overflow: hidden; overflow: hidden;
.fl-progress { .fl-progress {
height: 100%; height: 100%;
width: 100%; width: 100%;
transform-origin: left center; /* Animation starts from left */ transform-origin: left center;
} }
} }
/**
* Type-specific progress colors
* Each notification type has its own progress bar color
*/
&.fl-success .fl-progress { &.fl-success .fl-progress {
background-color: var(--md-success); /* Green progress */ background-color: var(--md-success);
} }
&.fl-info .fl-progress { &.fl-info .fl-progress {
background-color: var(--md-info); /* Blue progress */ background-color: var(--md-info);
} }
&.fl-warning .fl-progress { &.fl-warning .fl-progress {
background-color: var(--md-warning); /* Orange progress */ background-color: var(--md-warning);
} }
&.fl-error .fl-progress { &.fl-error .fl-progress {
background-color: var(--md-error); /* Red progress */ background-color: var(--md-error);
} }
/**
* RTL Support
* Right-to-left language direction support
*/
&.fl-rtl { &.fl-rtl {
direction: rtl; direction: rtl;
.fl-content { .fl-content {
flex-direction: row-reverse; /* Reverse flex direction */ flex-direction: row-reverse;
} }
.fl-icon-wrapper { .fl-icon-wrapper {
margin-right: 0; margin-right: 0;
margin-left: 16px; /* Swap margins for RTL */ margin-left: 16px;
} }
.fl-actions { .fl-actions {
justify-content: flex-start; /* Align buttons to left in RTL */ justify-content: flex-start;
} }
.fl-progress { .fl-progress {
transform-origin: right center; /* Animation starts from right */ transform-origin: right center;
} }
} }
/**
* Accessibility
* Respects reduced motion preferences
*/
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
animation: none; /* Disable slide animation */ animation: none;
.fl-action-button:active::after { .fl-action-button:active::after {
animation: none; /* Disable ripple animation */ animation: none;
} }
} }
} }
@@ -254,16 +193,16 @@ body.fl-dark .fl-google,
html.fl-dark .fl-google, html.fl-dark .fl-google,
.fl-google.fl-auto-dark { .fl-google.fl-auto-dark {
.fl-md-card { .fl-md-card {
background-color: var(--md-bg-dark); /* Darker background */ background-color: var(--md-bg-dark);
color: var(--md-text-dark); /* Lighter text */ color: var(--md-text-dark);
box-shadow: var(--md-elevation-dark); /* Stronger shadows */ box-shadow: var(--md-elevation-dark);
} }
.fl-message { .fl-message {
color: var(--md-text-secondary-dark); /* Lighter secondary text */ color: var(--md-text-secondary-dark);
} }
.fl-action-button { .fl-action-button {
&:hover, &:focus { &:hover, &:focus {
background-color: rgba(255, 255, 255, 0.08); /* Material dark hover - 8% opacity */ background-color: rgba(255, 255, 255, 0.08);
} }
} }
} }
src/Prime/Resources/assets/themes/ios/ios.scss
+68 -129
View File
@@ -1,55 +1,47 @@
.fl-ios { .fl-ios {
/* Theme variables - Define the visual appearance of iOS notifications */ --ios-bg-light: rgba(255, 255, 255);
/* Base colors and appearance */ --ios-bg-dark: rgba(30, 30, 30);
--ios-bg-light: rgba(255, 255, 255); /* Semi-transparent white in light mode */ --ios-text-light: #000000;
--ios-bg-dark: rgba(30, 30, 30); /* Semi-transparent dark in dark mode */ --ios-text-secondary-light: #6e6e6e;
--ios-text-light: #000000; /* Black text in light mode */ --ios-text-dark: #ffffff;
--ios-text-secondary-light: #6e6e6e; /* Gray secondary text in light mode */ --ios-text-secondary-dark: #a8a8a8;
--ios-text-dark: #ffffff; /* White text in dark mode */ --ios-border-radius: 13px;
--ios-text-secondary-dark: #a8a8a8; /* Light gray secondary text in dark mode */ --ios-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
--ios-border-radius: 13px; /* iOS notification corner radius */ --ios-shadow-dark: 0 2px 12px rgba(0, 0, 0, 0.35);
--ios-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); /* Light shadow in light mode */ --ios-icon-size: 18px;
--ios-shadow-dark: 0 2px 12px rgba(0, 0, 0, 0.35); /* Darker shadow in dark mode */ --ios-blur: 30px;
--ios-icon-size: 18px; /* Size for icons */ --ios-success: #34c759;
--ios-blur: 30px; /* Amount of backdrop blur for glass effect */ --ios-info: #007aff;
/* Type-specific colors following iOS palette */ --ios-warning: #ff9500;
--ios-success: #34c759; /* iOS green */ --ios-error: #ff3b30;
--ios-info: #007aff; /* iOS blue */ --ios-animation-duration: 0.4s;
--ios-warning: #ff9500; /* iOS orange */
--ios-error: #ff3b30; /* iOS red */
/* Animation timing */
--ios-animation-duration: 0.4s; /* Duration for entrance animation */
} }
@keyframes iosSlideIn { @keyframes iosSlideIn {
0% { 0% {
opacity: 0; opacity: 0;
transform: translateY(-15px) scale(0.96); /* Start smaller and above */ transform: translateY(-15px) scale(0.96);
} }
100% { 100% {
opacity: 1; opacity: 1;
transform: translateY(0) scale(1); /* End at normal size and position */ transform: translateY(0) scale(1);
} }
} }
@keyframes iosExpand { @keyframes iosExpand {
0% { 0% {
max-height: 0; /* Start collapsed */ max-height: 0;
opacity: 0; /* Start hidden */ opacity: 0;
} }
100% { 100% {
max-height: 100px; /* Expand to fit content */ max-height: 100px;
opacity: 1; /* Fade in */ opacity: 1;
} }
} }
.fl-ios { .fl-ios {
position: relative; position: relative;
margin: 10px 0; /* Space between notifications */ margin: 10px 0;
font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Apple system fonts */ font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Arial, sans-serif;
animation: iosSlideIn var(--ios-animation-duration) cubic-bezier(0.23, 1, 0.32, 1); /* iOS-like easing */ animation: iosSlideIn var(--ios-animation-duration) cubic-bezier(0.23, 1, 0.32, 1);
will-change: transform, opacity; /* Optimize for animation performance */ will-change: transform, opacity;
/**
* Main notification container
* Replicates iOS notification card with frosted glass effect
*/
.fl-ios-notification { .fl-ios-notification {
background-color: var(--ios-bg-light); background-color: var(--ios-bg-light);
color: var(--ios-text-light); color: var(--ios-text-light);
@@ -57,202 +49,149 @@
box-shadow: var(--ios-shadow); box-shadow: var(--ios-shadow);
padding: 12px 15px; padding: 12px 15px;
position: relative; position: relative;
/* iOS-typical frosted glass effect */
backdrop-filter: blur(var(--ios-blur)); backdrop-filter: blur(var(--ios-blur));
-webkit-backdrop-filter: blur(var(--ios-blur)); -webkit-backdrop-filter: blur(var(--ios-blur));
} }
/**
* Header section
* Contains app icon, app name, and timestamp
*/
.fl-header { .fl-header {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 8px; margin-bottom: 8px;
padding-right: 20px; /* Space for close button */ padding-right: 20px;
} }
/**
* App icon container
* Square with rounded corners like iOS app icons
*/
.fl-app-icon { .fl-app-icon {
width: 22px; /* Standard iOS notification icon size */ width: 22px;
height: 22px; height: 22px;
border-radius: 5px; /* iOS app icon corner radius */ border-radius: 5px;
background-color: currentColor; /* Color based on notification type */ background-color: currentColor;
margin-right: 8px; margin-right: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0; /* Prevent icon from shrinking */ flex-shrink: 0;
} }
/**
* SVG icon styling
* White icon on colored background
*/
.fl-icon-svg { .fl-icon-svg {
color: white; /* Icon is always white */ color: white;
width: 14px; width: 14px;
height: 14px; height: 14px;
} }
/**
* App info container
* Holds app name and timestamp
*/
.fl-app-info { .fl-app-info {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
justify-content: space-between; justify-content: space-between;
flex: 1; flex: 1;
} }
/**
* App name styling
* Bold text like in iOS notifications
*/
.fl-app-name { .fl-app-name {
font-weight: 600; /* Semi-bold like iOS */ font-weight: 600;
font-size: 0.85rem; /* iOS app name size */ font-size: 0.85rem;
} }
/**
* Time display
* Shows current time in iOS style
*/
.fl-time { .fl-time {
font-size: 0.75rem; /* Smaller text for time */ font-size: 0.75rem;
color: var(--ios-text-secondary-light); /* Gray secondary text */ color: var(--ios-text-secondary-light);
margin-left: 5px; margin-left: 5px;
flex-shrink: 0; /* Prevent time from wrapping */ flex-shrink: 0;
} }
/**
* Content/message area
* Contains the notification message
*/
.fl-content { .fl-content {
animation: iosExpand 0.3s forwards; /* Expand content after header appears */ animation: iosExpand 0.3s forwards;
animation-delay: 0.1s; /* Slight delay for sequenced animation */ animation-delay: 0.1s;
overflow: hidden; /* Contain expansion animation */ overflow: hidden;
} }
/**
* Message styling
* Main notification text
*/
.fl-message { .fl-message {
font-size: 0.95rem; /* iOS notification text size */ font-size: 0.95rem;
line-height: 1.3; line-height: 1.3;
margin: 0; margin: 0;
padding-right: 15px; /* Space for close button */ padding-right: 15px;
} }
/**
* Close button styling
* Circular close button like in iOS
*/
.fl-close { .fl-close {
position: absolute; /* Positioned in top right */ position: absolute;
top: 10px; top: 10px;
right: 12px; right: 12px;
width: 18px; /* Small circular button */ width: 18px;
height: 18px; height: 18px;
border-radius: 50%; /* Perfectly circular */ border-radius: 50%;
border: none; border: none;
background-color: rgba(0, 0, 0, 0.1); /* Subtle background */ background-color: rgba(0, 0, 0, 0.1);
color: var(--ios-text-light); color: var(--ios-text-light);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 14px; font-size: 14px;
line-height: 1; line-height: 1;
opacity: 0.7; /* Semi-transparent by default */ opacity: 0.7;
cursor: pointer; cursor: pointer;
transition: opacity 0.2s; transition: opacity 0.2s;
padding: 0; padding: 0;
&:hover, &:focus { &:hover, &:focus {
opacity: 1; /* Full opacity on hover/focus */ opacity: 1;
} }
} }
/**
* Type-specific styling
* Each notification type gets its own app icon color
*/
&.fl-success { &.fl-success {
.fl-app-icon { .fl-app-icon {
color: var(--ios-success); /* Green for success */ color: var(--ios-success);
} }
} }
&.fl-info { &.fl-info {
.fl-app-icon { .fl-app-icon {
color: var(--ios-info); /* Blue for info */ color: var(--ios-info);
} }
} }
&.fl-warning { &.fl-warning {
.fl-app-icon { .fl-app-icon {
color: var(--ios-warning); /* Orange for warning */ color: var(--ios-warning);
} }
} }
&.fl-error { &.fl-error {
.fl-app-icon { .fl-app-icon {
color: var(--ios-error); /* Red for error */ color: var(--ios-error);
} }
} }
/**
* RTL Support
* Right-to-left language direction support
*/
&.fl-rtl { &.fl-rtl {
direction: rtl; direction: rtl;
.fl-header { .fl-header {
padding-right: 0; padding-right: 0;
padding-left: 20px; /* Swap padding for RTL */ padding-left: 20px;
} }
.fl-app-icon { .fl-app-icon {
margin-right: 0; margin-right: 0;
margin-left: 8px; /* Swap margins for RTL */ margin-left: 8px;
} }
.fl-time { .fl-time {
margin-left: 0; margin-left: 0;
margin-right: 5px; /* Swap margins for RTL */ margin-right: 5px;
} }
.fl-message { .fl-message {
padding-right: 0; padding-right: 0;
padding-left: 15px; /* Swap padding for RTL */ padding-left: 15px;
} }
.fl-close { .fl-close {
right: auto; right: auto;
left: 12px; /* Move close button to left for RTL */ left: 12px;
} }
} }
/**
* Accessibility
* Respects reduced motion preferences
*/
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
animation: none; /* Disable entrance animation */ animation: none;
.fl-content { .fl-content {
animation: none; /* Disable content expansion */ animation: none;
max-height: none; /* Show full content */ max-height: none;
opacity: 1; /* Ensure content is visible */ opacity: 1;
} }
} }
/**
* Mobile optimization
* Full width on small screens
*/
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
width: 100%; /* Full width on mobile */ width: 100%;
} }
} }
body.fl-dark .fl-ios, body.fl-dark .fl-ios,
html.fl-dark .fl-ios, html.fl-dark .fl-ios,
.fl-ios.fl-auto-dark { .fl-ios.fl-auto-dark {
.fl-ios-notification { .fl-ios-notification {
background-color: var(--ios-bg-dark); /* Dark, semi-transparent background */ background-color: var(--ios-bg-dark);
color: var(--ios-text-dark); /* Light text */ color: var(--ios-text-dark);
box-shadow: var(--ios-shadow-dark); /* Stronger shadow */ box-shadow: var(--ios-shadow-dark);
} }
.fl-time { .fl-time {
color: var(--ios-text-secondary-dark); /* Lighter secondary text */ color: var(--ios-text-secondary-dark);
} }
.fl-close { .fl-close {
background-color: rgba(255, 255, 255, 0.2); /* Lighter background for close button */ background-color: rgba(255, 255, 255, 0.2);
color: var(--ios-text-dark); /* Light text color */ color: var(--ios-text-dark);
} }
} }
src/Prime/Resources/assets/themes/jade/jade.scss
+69 -126
View File
@@ -1,95 +1,75 @@
.fl-jade { .fl-jade {
/* Theme variables - Define the visual appearance of Jade notifications */ --jade-text-light: #5f6c7b;
/* Base colors and appearance */ --jade-text-dark: #e2e8f0;
--jade-text-light: #5f6c7b; /* Soft slate gray for text */ --jade-shadow: 0 8px 24px rgba(149, 157, 165, 0.1);
--jade-text-dark: #e2e8f0; /* Light gray for dark mode text */ --jade-shadow-dark: 0 8px 24px rgba(0, 0, 0, 0.2);
--jade-shadow: 0 8px 24px rgba(149, 157, 165, 0.1); /* Subtle shadow */ --jade-border-radius: 4px;
--jade-shadow-dark: 0 8px 24px rgba(0, 0, 0, 0.2); /* Stronger shadow for dark mode */ --jade-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--jade-border-radius: 4px; /* Large rounded corners */ --jade-success-bg: #f0fdf4;
--jade-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Material-inspired transition */ --jade-success-color: #16a34a;
/* Type-specific colors and backgrounds - Light mode */ --jade-info-bg: #eff6ff;
--jade-success-bg: #f0fdf4; /* Very light green background */ --jade-info-color: #3b82f6;
--jade-success-color: #16a34a; /* Green text */ --jade-warning-bg: #fffbeb;
--jade-info-bg: #eff6ff; /* Very light blue background */ --jade-warning-color: #f59e0b;
--jade-info-color: #3b82f6; /* Blue text */ --jade-error-bg: #fef2f2;
--jade-warning-bg: #fffbeb; /* Very light yellow background */ --jade-error-color: #dc2626;
--jade-warning-color: #f59e0b; /* Orange text */ --jade-success-bg-dark: rgba(22, 163, 74, 0.15);
--jade-error-bg: #fef2f2; /* Very light red background */ --jade-info-bg-dark: rgba(59, 130, 246, 0.15);
--jade-error-color: #dc2626; /* Red text */ --jade-warning-bg-dark: rgba(245, 158, 11, 0.15);
/* Dark mode backgrounds - Semi-transparent colored overlays */ --jade-error-bg-dark: rgba(220, 38, 38, 0.15);
--jade-success-bg-dark: rgba(22, 163, 74, 0.15); /* Semi-transparent green */
--jade-info-bg-dark: rgba(59, 130, 246, 0.15); /* Semi-transparent blue */
--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 */
} }
@keyframes jadeIn { @keyframes jadeIn {
0% { 0% {
opacity: 0; opacity: 0;
transform: translateY(-10px) scale(0.95); /* Start smaller and above */ transform: translateY(-10px) scale(0.95);
} }
100% { 100% {
opacity: 1; opacity: 1;
transform: translateY(0) scale(1); /* End at normal size and position */ transform: translateY(0) scale(1);
} }
} }
.fl-jade { .fl-jade {
padding: 1rem 1.25rem; /* Comfortable padding */ padding: 1rem 1.25rem;
margin: 0.5rem 0; /* Vertical spacing */ margin: 0.5rem 0;
position: relative; position: relative;
box-shadow: var(--jade-shadow); /* Subtle shadow for depth */ box-shadow: var(--jade-shadow);
border-radius: var(--jade-border-radius) var(--jade-border-radius) 0 0; /* Large rounded corners */ border-radius: var(--jade-border-radius) var(--jade-border-radius) 0 0;
animation: jadeIn 0.4s var(--jade-transition); /* Smooth entrance animation */ animation: jadeIn 0.4s var(--jade-transition);
font-family: var(--fl-font), serif; font-family: var(--fl-font), serif;
will-change: transform, opacity; /* Optimize for animation performance */ will-change: transform, opacity;
border: 1px solid transparent; /* Border for type-specific colors */ border: 1px solid transparent;
overflow: hidden; /* Contain progress bar */ overflow: hidden;
/**
* Content container
* Holds message and close button
*/
.fl-content { .fl-content {
display: flex; display: flex;
align-items: center; /* Vertically center content */ align-items: center;
} }
/**
* Message styling
* Main notification text
*/
.fl-message { .fl-message {
flex: 1; /* Take available space */ flex: 1;
font-size: 0.875rem; /* 14px at default size */ font-size: 0.875rem;
line-height: 1.5; /* Comfortable line height */ line-height: 1.5;
font-weight: 500; /* Medium weight for better readability */ font-weight: 500;
padding-right: 0.75rem; /* Space between text and close button */ padding-right: 0.75rem;
} }
/**
* Close button styling
* Circular button with hover effect
*/
.fl-close { .fl-close {
background: none; background: none;
border: none; border: none;
font-size: 1.125rem; /* 18px close icon */ font-size: 1.125rem;
padding: 0.375rem; padding: 0.375rem;
cursor: pointer; cursor: pointer;
opacity: 0.6; /* Subtle appearance by default */ opacity: 0.6;
transition: all var(--jade-transition); /* Smooth hover transition */ transition: all var(--jade-transition);
border-radius: 50%; /* Circular button */ border-radius: 50%;
width: 1.875rem; /* 30px diameter */ width: 1.875rem;
height: 1.875rem; height: 1.875rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0; /* Prevent button from shrinking */ flex-shrink: 0;
&:hover, &:focus { &:hover, &:focus {
opacity: 1; /* Full opacity on hover/focus */ opacity: 1;
background-color: rgba(0, 0, 0, 0.05); /* Subtle background on hover */ background-color: rgba(0, 0, 0, 0.05);
} }
} }
/**
* Progress bar container
* Holds the animated progress indicator
*/
.fl-progress-bar { .fl-progress-bar {
position: absolute; position: absolute;
left: 0; left: 0;
@@ -97,141 +77,104 @@
bottom: 0; bottom: 0;
height: 3px; height: 3px;
overflow: hidden; overflow: hidden;
border-radius: 0 0 var(--jade-border-radius) var(--jade-border-radius); /* Match parent corners */ border-radius: 0 0 var(--jade-border-radius) var(--jade-border-radius);
opacity: 0.7; /* Slightly transparent */ opacity: 0.7;
/**
* Progress indicator
* Animated by JavaScript to show remaining time
*/
.fl-progress { .fl-progress {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
} }
/* Type-specific styling for each notification type */
/**
* Success notification styling
* Green theme with appropriate hover states
*/
&.fl-success { &.fl-success {
background-color: var(--jade-success-bg); background-color: var(--jade-success-bg);
color: var(--jade-success-color); color: var(--jade-success-color);
border-color: rgba(22, 163, 74, 0.1); /* Very subtle border */ border-color: rgba(22, 163, 74, 0.1);
.fl-close { .fl-close {
color: var(--jade-success-color); /* Green close button */ color: var(--jade-success-color);
&:hover, &:focus { &:hover, &:focus {
background-color: rgba(22, 163, 74, 0.1); /* Green hover state */ background-color: rgba(22, 163, 74, 0.1);
} }
} }
.fl-progress-bar .fl-progress { .fl-progress-bar .fl-progress {
background-color: var(--jade-success-color); /* Green progress bar */ background-color: var(--jade-success-color);
} }
} }
/**
* Info notification styling
* Blue theme with appropriate hover states
*/
&.fl-info { &.fl-info {
background-color: var(--jade-info-bg); background-color: var(--jade-info-bg);
color: var(--jade-info-color); color: var(--jade-info-color);
border-color: rgba(59, 130, 246, 0.1); /* Very subtle border */ border-color: rgba(59, 130, 246, 0.1);
.fl-close { .fl-close {
color: var(--jade-info-color); /* Blue close button */ color: var(--jade-info-color);
&:hover, &:focus { &:hover, &:focus {
background-color: rgba(59, 130, 246, 0.1); /* Blue hover state */ background-color: rgba(59, 130, 246, 0.1);
} }
} }
.fl-progress-bar .fl-progress { .fl-progress-bar .fl-progress {
background-color: var(--jade-info-color); /* Blue progress bar */ background-color: var(--jade-info-color);
} }
} }
/**
* Warning notification styling
* Orange theme with appropriate hover states
*/
&.fl-warning { &.fl-warning {
background-color: var(--jade-warning-bg); background-color: var(--jade-warning-bg);
color: var(--jade-warning-color); color: var(--jade-warning-color);
border-color: rgba(245, 158, 11, 0.1); /* Very subtle border */ border-color: rgba(245, 158, 11, 0.1);
.fl-close { .fl-close {
color: var(--jade-warning-color); /* Orange close button */ color: var(--jade-warning-color);
&:hover, &:focus { &:hover, &:focus {
background-color: rgba(245, 158, 11, 0.1); /* Orange hover state */ background-color: rgba(245, 158, 11, 0.1);
} }
} }
.fl-progress-bar .fl-progress { .fl-progress-bar .fl-progress {
background-color: var(--jade-warning-color); /* Orange progress bar */ background-color: var(--jade-warning-color);
} }
} }
/**
* Error notification styling
* Red theme with appropriate hover states
*/
&.fl-error { &.fl-error {
background-color: var(--jade-error-bg); background-color: var(--jade-error-bg);
color: var(--jade-error-color); color: var(--jade-error-color);
border-color: rgba(220, 38, 38, 0.1); /* Very subtle border */ border-color: rgba(220, 38, 38, 0.1);
.fl-close { .fl-close {
color: var(--jade-error-color); /* Red close button */ color: var(--jade-error-color);
&:hover, &:focus { &:hover, &:focus {
background-color: rgba(220, 38, 38, 0.1); /* Red hover state */ background-color: rgba(220, 38, 38, 0.1);
} }
} }
.fl-progress-bar .fl-progress { .fl-progress-bar .fl-progress {
background-color: var(--jade-error-color); /* Red progress bar */ background-color: var(--jade-error-color);
} }
} }
/**
* RTL Support
* Right-to-left language direction support
*/
&.fl-rtl { &.fl-rtl {
direction: rtl; direction: rtl;
.fl-message { .fl-message {
padding-right: 0; padding-right: 0;
padding-left: 0.75rem; /* Swap padding for RTL */ padding-left: 0.75rem;
} }
.fl-progress .fl-progress { .fl-progress .fl-progress {
transform-origin: right center; /* Animation starts from right */ transform-origin: right center;
} }
} }
/**
* Accessibility
* Respects reduced motion preferences
*/
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
animation: none; /* Disable animation */ animation: none;
} }
} }
body.fl-dark .fl-jade, body.fl-dark .fl-jade,
html.fl-dark .fl-jade, html.fl-dark .fl-jade,
.fl-jade.fl-auto-dark { .fl-jade.fl-auto-dark {
box-shadow: var(--jade-shadow-dark); /* Stronger shadow in dark mode */ box-shadow: var(--jade-shadow-dark);
color: var(--jade-text-dark); /* Lighter text */ color: var(--jade-text-dark);
/**
* Type-specific backgrounds for dark mode
* Uses semi-transparent colored overlays
*/
&.fl-success { &.fl-success {
background-color: var(--jade-success-bg-dark); background-color: var(--jade-success-bg-dark);
border-color: rgba(22, 163, 74, 0.2); /* Slightly stronger border */ border-color: rgba(22, 163, 74, 0.2);
} }
&.fl-info { &.fl-info {
background-color: var(--jade-info-bg-dark); background-color: var(--jade-info-bg-dark);
border-color: rgba(59, 130, 246, 0.2); /* Slightly stronger border */ border-color: rgba(59, 130, 246, 0.2);
} }
&.fl-warning { &.fl-warning {
background-color: var(--jade-warning-bg-dark); background-color: var(--jade-warning-bg-dark);
border-color: rgba(245, 158, 11, 0.2); /* Slightly stronger border */ border-color: rgba(245, 158, 11, 0.2);
} }
&.fl-error { &.fl-error {
background-color: var(--jade-error-bg-dark); background-color: var(--jade-error-bg-dark);
border-color: rgba(220, 38, 38, 0.2); /* Slightly stronger border */ border-color: rgba(220, 38, 38, 0.2);
} }
/**
* Dark mode hover states
* Lighter background for better visibility
*/
.fl-close:hover, .fl-close:focus { .fl-close:hover, .fl-close:focus {
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }
src/Prime/Resources/assets/themes/material/material.scss
+78 -131
View File
@@ -1,234 +1,181 @@
.fl-material { .fl-material {
/* Theme variables - Define the visual appearance of Material Design notifications */ --md-bg-light: #ffffff;
/* Base colors and appearance for light and dark modes */ --md-bg-dark: #2d2d2d;
--md-bg-light: #ffffff; /* Card background in light mode */ --md-text-light: rgba(0, 0, 0, 0.87);
--md-bg-dark: #2d2d2d; /* Card background in dark mode */ --md-text-secondary-light: rgba(0, 0, 0, 0.6);
--md-text-light: rgba(0, 0, 0, 0.87); /* Primary text in light mode (87% black) */ --md-text-dark: rgba(255, 255, 255, 0.87);
--md-text-secondary-light: rgba(0, 0, 0, 0.6); /* Secondary text in light mode (60% black) */ --md-text-secondary-dark: rgba(255, 255, 255, 0.6);
--md-text-dark: rgba(255, 255, 255, 0.87); /* Primary text in dark mode (87% white) */ --md-elevation: 0 3px 5px -1px rgba(0,0,0,0.2),
--md-text-secondary-dark: rgba(255, 255, 255, 0.6); /* Secondary text in dark mode (60% white) */ 0 6px 10px 0 rgba(0,0,0,0.14),
/* Material Design elevation - multi-layered shadows */ 0 1px 18px 0 rgba(0,0,0,0.12);
--md-elevation: 0 3px 5px -1px rgba(0,0,0,0.2), /* Ambient shadow */ --md-elevation-dark: 0 3px 5px -1px rgba(0,0,0,0.4),
0 6px 10px 0 rgba(0,0,0,0.14), /* Penumbra shadow */ 0 6px 10px 0 rgba(0,0,0,0.28),
0 1px 18px 0 rgba(0,0,0,0.12); /* Umbra shadow */ 0 1px 18px 0 rgba(0,0,0,0.24);
--md-elevation-dark: 0 3px 5px -1px rgba(0,0,0,0.4), /* Darker ambient shadow */ --md-border-radius: 4px;
0 6px 10px 0 rgba(0,0,0,0.28), /* Darker penumbra shadow */ --md-success: #43a047;
0 1px 18px 0 rgba(0,0,0,0.24); /* Darker umbra shadow */ --md-info: #1e88e5;
--md-border-radius: 4px; /* Material Design default corner radius */ --md-warning: #fb8c00;
/* Material Design color palette for notification types */ --md-error: #e53935;
--md-success: #43a047; /* Green 600 from Material palette */ --md-animation-duration: 0.3s;
--md-info: #1e88e5; /* Blue 600 from Material palette */ --md-ripple-duration: 0.6s;
--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 */
} }
@keyframes mdSlideUp { @keyframes mdSlideUp {
0% { 0% {
opacity: 0; opacity: 0;
transform: translateY(20px); /* Start below final position */ transform: translateY(20px);
} }
100% { 100% {
opacity: 1; opacity: 1;
transform: translateY(0); /* End at final position */ transform: translateY(0);
} }
} }
@keyframes mdRipple { @keyframes mdRipple {
to { to {
transform: scale(4); /* Expand to 4x original size */ transform: scale(4);
opacity: 0; /* Fade out completely */ opacity: 0;
} }
} }
.fl-material { .fl-material {
position: relative; position: relative;
margin: 8px 0; /* Spacing between notifications */ margin: 8px 0;
font-family: Roboto, "Segoe UI", Helvetica, Arial, sans-serif; /* Material uses Roboto */ font-family: Roboto, "Segoe UI", Helvetica, Arial, sans-serif;
animation: mdSlideUp var(--md-animation-duration) cubic-bezier(0.4, 0, 0.2, 1); /* Material standard easing */ animation: mdSlideUp var(--md-animation-duration) cubic-bezier(0.4, 0, 0.2, 1);
/**
* Main card container
* Follows Material Design card component styling
*/
.fl-md-card { .fl-md-card {
background-color: var(--md-bg-light); background-color: var(--md-bg-light);
color: var(--md-text-light); color: var(--md-text-light);
border-radius: var(--md-border-radius); border-radius: var(--md-border-radius);
box-shadow: var(--md-elevation); /* Multi-layered shadow for depth */ box-shadow: var(--md-elevation);
overflow: hidden; /* Contains progress bar */ overflow: hidden;
} }
/**
* Content section
* Contains message text
*/
.fl-content { .fl-content {
padding: 16px; /* Standard Material padding */ padding: 16px;
display: flex; display: flex;
align-items: flex-start; /* Align items to top */ align-items: flex-start;
} }
/**
* Text content container
* Holds message
*/
.fl-text-content { .fl-text-content {
flex: 1; /* Take available space */ flex: 1;
} }
/**
* Message styling
* Following Material Design typography
*/
.fl-message { .fl-message {
font-size: 0.875rem; /* 14px - Material body 2 */ font-size: 0.875rem;
line-height: 1.43; /* Material line height for body 2 */ line-height: 1.43;
color: var(--md-text-secondary-light); /* Secondary text color (60% opacity) */ color: var(--md-text-secondary-light);
} }
/**
* Action buttons section
* Contains dismiss button
*/
.fl-actions { .fl-actions {
display: flex; display: flex;
justify-content: flex-end; /* Align buttons to right */ justify-content: flex-end;
padding: 8px; /* Standard Material padding */ padding: 8px;
} }
/**
* Action button styling
* Following Material Design "text button" guidelines
*/
.fl-action-button { .fl-action-button {
background: transparent; background: transparent;
border: none; border: none;
color: currentColor; /* Inherit color from parent */ color: currentColor;
font-family: inherit; font-family: inherit;
font-weight: 500; /* Medium weight per Material specs */ font-weight: 500;
font-size: 0.8125rem; /* 13px - Material button text size */ font-size: 0.8125rem;
text-transform: uppercase; /* Material buttons use uppercase */ text-transform: uppercase;
letter-spacing: 0.0892857143em; /* Material's letter spacing for buttons */ letter-spacing: 0.0892857143em;
padding: 8px 12px; /* Material button padding */ padding: 8px 12px;
border-radius: 4px; /* Rounded corners per Material */ border-radius: 4px;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s; /* Smooth hover effect */ transition: background-color 0.2s;
position: relative; /* For ripple positioning */ position: relative;
overflow: hidden; /* Contain ripple effect */ overflow: hidden;
&:hover, &:focus { &:hover, &:focus {
background-color: rgba(0, 0, 0, 0.04); /* Material hover state - 4% opacity */ background-color: rgba(0, 0, 0, 0.04);
} }
/**
* Ripple effect
* Material Design's signature ink ripple on interaction
*/
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
width: 5px; /* Initial small circle */ width: 5px;
height: 5px; height: 5px;
background: currentColor; /* Use button text color */ background: currentColor;
opacity: 0; opacity: 0;
border-radius: 50%; /* Perfect circle */ border-radius: 50%;
transform: scale(1); transform: scale(1);
pointer-events: none; /* Don't interfere with clicks */ pointer-events: none;
} }
&:active::after { &:active::after {
opacity: 0.3; /* Material ripple opacity */ opacity: 0.3;
animation: mdRipple var(--md-ripple-duration) linear; /* Expand and fade */ animation: mdRipple var(--md-ripple-duration) linear;
} }
} }
/**
* Type-specific styling
* Each notification type has its own color based on Material palette
*/
&.fl-success { &.fl-success {
.fl-icon-wrapper { .fl-icon-wrapper {
color: var(--md-success); /* Green icon */ color: var(--md-success);
} }
.fl-action-button { .fl-action-button {
color: var(--md-success); /* Green button */ color: var(--md-success);
} }
} }
&.fl-info { &.fl-info {
.fl-icon-wrapper { .fl-icon-wrapper {
color: var(--md-info); /* Blue icon */ color: var(--md-info);
} }
.fl-action-button { .fl-action-button {
color: var(--md-info); /* Blue button */ color: var(--md-info);
} }
} }
&.fl-warning { &.fl-warning {
.fl-icon-wrapper { .fl-icon-wrapper {
color: var(--md-warning); /* Orange icon */ color: var(--md-warning);
} }
.fl-action-button { .fl-action-button {
color: var(--md-warning); /* Orange button */ color: var(--md-warning);
} }
} }
&.fl-error { &.fl-error {
.fl-icon-wrapper { .fl-icon-wrapper {
color: var(--md-error); /* Red icon */ color: var(--md-error);
} }
.fl-action-button { .fl-action-button {
color: var(--md-error); /* Red button */ color: var(--md-error);
} }
} }
/**
* Progress bar
* Material Design linear progress indicator
*/
.fl-progress-bar { .fl-progress-bar {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 4px; /* Material's standard progress height */ height: 4px;
overflow: hidden; overflow: hidden;
.fl-progress { .fl-progress {
height: 100%; height: 100%;
width: 100%; width: 100%;
transform-origin: left center; /* Animation starts from left */ transform-origin: left center;
} }
} }
/**
* Type-specific progress colors
* Each notification type has its own progress bar color
*/
&.fl-success .fl-progress { &.fl-success .fl-progress {
background-color: var(--md-success); /* Green progress */ background-color: var(--md-success);
} }
&.fl-info .fl-progress { &.fl-info .fl-progress {
background-color: var(--md-info); /* Blue progress */ background-color: var(--md-info);
} }
&.fl-warning .fl-progress { &.fl-warning .fl-progress {
background-color: var(--md-warning); /* Orange progress */ background-color: var(--md-warning);
} }
&.fl-error .fl-progress { &.fl-error .fl-progress {
background-color: var(--md-error); /* Red progress */ background-color: var(--md-error);
} }
/**
* RTL Support
* Right-to-left language direction support
*/
&.fl-rtl { &.fl-rtl {
direction: rtl; direction: rtl;
.fl-content { .fl-content {
flex-direction: row-reverse; /* Reverse flex direction */ flex-direction: row-reverse;
} }
.fl-icon-wrapper { .fl-icon-wrapper {
margin-right: 0; margin-right: 0;
margin-left: 16px; /* Swap margins for RTL */ margin-left: 16px;
} }
.fl-actions { .fl-actions {
justify-content: flex-start; /* Align buttons to left in RTL */ justify-content: flex-start;
} }
.fl-progress { .fl-progress {
transform-origin: right center; /* Animation starts from right */ transform-origin: right center;
} }
} }
/**
* Accessibility
* Respects reduced motion preferences
*/
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
animation: none; /* Disable slide animation */ animation: none;
.fl-action-button:active::after { .fl-action-button:active::after {
animation: none; /* Disable ripple animation */ animation: none;
} }
} }
} }
@@ -236,16 +183,16 @@ body.fl-dark .fl-material,
html.fl-dark .fl-material, html.fl-dark .fl-material,
.fl-material.fl-auto-dark { .fl-material.fl-auto-dark {
.fl-md-card { .fl-md-card {
background-color: var(--md-bg-dark); /* Darker background */ background-color: var(--md-bg-dark);
color: var(--md-text-dark); /* Lighter text */ color: var(--md-text-dark);
box-shadow: var(--md-elevation-dark); /* Stronger shadows */ box-shadow: var(--md-elevation-dark);
} }
.fl-message { .fl-message {
color: var(--md-text-secondary-dark); /* Lighter secondary text */ color: var(--md-text-secondary-dark);
} }
.fl-action-button { .fl-action-button {
&:hover, &:focus { &:hover, &:focus {
background-color: rgba(255, 255, 255, 0.08); /* Material dark hover - 8% opacity */ background-color: rgba(255, 255, 255, 0.08);
} }
} }
} }
src/Prime/Resources/assets/themes/minimal/minimal.scss
+49 -88
View File
@@ -1,124 +1,93 @@
.fl-minimal { .fl-minimal {
/* Theme variables - Define the visual appearance of Minimal notifications */ --minimal-bg-light: rgba(255, 255, 255);
/* Base colors and appearance */ --minimal-bg-dark: rgba(25, 25, 25);
--minimal-bg-light: rgba(255, 255, 255); /* Semi-transparent white in light mode */ --minimal-text-light: #333333;
--minimal-bg-dark: rgba(25, 25, 25); /* Semi-transparent dark in dark mode */ --minimal-text-dark: #f5f5f5;
--minimal-text-light: #333333; /* Dark gray text in light mode */ --minimal-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
--minimal-text-dark: #f5f5f5; /* Off-white text in dark mode */ --minimal-shadow-dark: 0 2px 8px rgba(0, 0, 0, 0.15);
--minimal-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Very subtle shadow */ --minimal-border-radius: 4px;
--minimal-shadow-dark: 0 2px 8px rgba(0, 0, 0, 0.15); /* Slightly stronger shadow for dark mode */ --minimal-border-color: rgba(0, 0, 0, 0.05);
--minimal-border-radius: 4px; /* Modest border radius */ --minimal-border-color-dark: rgba(255, 255, 255, 0.1);
--minimal-border-color: rgba(0, 0, 0, 0.05); /* Nearly invisible border in light mode */ --minimal-success: rgba(34, 197, 94, 0.9);
--minimal-border-color-dark: rgba(255, 255, 255, 0.1); /* Subtle border in dark mode */ --minimal-info: rgba(14, 165, 233, 0.9);
/* Type-specific colors - semi-transparent for subtlety */ --minimal-warning: rgba(245, 158, 11, 0.9);
--minimal-success: rgba(34, 197, 94, 0.9); /* Green with slight transparency */ --minimal-error: rgba(239, 68, 68, 0.9);
--minimal-info: rgba(14, 165, 233, 0.9); /* Blue with slight transparency */
--minimal-warning: rgba(245, 158, 11, 0.9); /* Orange with slight transparency */
--minimal-error: rgba(239, 68, 68, 0.9); /* Red with slight transparency */
} }
@keyframes minimalIn { @keyframes minimalIn {
from { from {
opacity: 0; opacity: 0;
transform: translateY(-8px); /* Start slightly above final position */ transform: translateY(-8px);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0); /* End at natural position */ transform: translateY(0);
} }
} }
.fl-minimal { .fl-minimal {
background-color: var(--minimal-bg-light); background-color: var(--minimal-bg-light);
color: var(--minimal-text-light); color: var(--minimal-text-light);
padding: 0.75rem 1rem; /* Compact padding */ padding: 0.75rem 1rem;
margin: 0.5rem 0; /* Modest vertical spacing */ margin: 0.5rem 0;
position: relative; position: relative;
box-shadow: var(--minimal-shadow); /* Very subtle shadow */ box-shadow: var(--minimal-shadow);
border-radius: var(--minimal-border-radius); border-radius: var(--minimal-border-radius);
animation: minimalIn 0.2s ease-out; /* Quick, subtle animation */ animation: minimalIn 0.2s ease-out;
font-family: -apple-system, BlinkMacSystemFont, var(--fl-font), sans-serif; /* System font stack */ font-family: -apple-system, BlinkMacSystemFont, var(--fl-font), sans-serif;
will-change: transform, opacity; /* Optimize for animation performance */ will-change: transform, opacity;
backdrop-filter: blur(8px); /* Frosted glass effect */ backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px); /* Safari support */ -webkit-backdrop-filter: blur(8px);
border: 1px solid var(--minimal-border-color); /* Nearly invisible border */ border: 1px solid var(--minimal-border-color);
/**
* Content container
* Holds message and close button
*/
.fl-content { .fl-content {
display: flex; display: flex;
align-items: center; /* Vertically center content */ align-items: center;
gap: 0.75rem; /* Space between elements */ gap: 0.75rem;
} }
/**
* Small colored dot indicator
* Used instead of large icons for minimal appearance
*/
.fl-dot { .fl-dot {
width: 8px; /* Small dot size */ width: 8px;
height: 8px; height: 8px;
border-radius: 50%; /* Perfectly circular */ border-radius: 50%;
flex-shrink: 0; /* Prevent dot from shrinking */ flex-shrink: 0;
} }
/**
* Message styling
* Main notification text
*/
.fl-message { .fl-message {
font-size: 0.875rem; /* 14px at default font size */ font-size: 0.875rem;
line-height: 1.4; /* Comfortable line height */ line-height: 1.4;
font-weight: 450; /* Slightly heavier than normal */ font-weight: 450;
flex: 1; /* Take available space */ flex: 1;
margin: 0; margin: 0;
} }
/**
* Close button styling
* Simple, minimal close button
*/
.fl-close { .fl-close {
background: none; background: none;
border: none; border: none;
padding: 0.25rem; padding: 0.25rem;
cursor: pointer; cursor: pointer;
opacity: 0.5; /* Subtle appearance by default */ opacity: 0.5;
transition: opacity 0.15s; /* Quick hover transition */ transition: opacity 0.15s;
color: currentColor; /* Inherit color from parent */ color: currentColor;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 1.5rem; /* 24px clickable area */ width: 1.5rem;
height: 1.5rem; height: 1.5rem;
font-size: 1rem; /* 16px × symbol */ font-size: 1rem;
flex-shrink: 0; /* Prevent button from shrinking */ flex-shrink: 0;
&:hover, &:focus { &:hover, &:focus {
opacity: 0.8; /* More visible on hover/focus, but still subtle */ opacity: 0.8;
} }
} }
/**
* Progress bar container
* Holds the animated progress indicator
*/
.fl-progress-bar { .fl-progress-bar {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
height: 2px; /* Very thin progress bar */ height: 2px;
overflow: hidden; overflow: hidden;
border-radius: 0 0 var(--minimal-border-radius) var(--minimal-border-radius); /* Match parent corners */ border-radius: 0 0 var(--minimal-border-radius) var(--minimal-border-radius);
opacity: 0.7; /* Slightly transparent */ opacity: 0.7;
/**
* Progress indicator
* Animated by JavaScript to show remaining time
*/
.fl-progress { .fl-progress {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
} }
/**
* Type-specific styling
* Each notification type gets its own color for the dot and progress bar
*/
&.fl-success { &.fl-success {
.fl-dot { background-color: var(--minimal-success); } .fl-dot { background-color: var(--minimal-success); }
.fl-progress-bar .fl-progress { background-color: var(--minimal-success); } .fl-progress-bar .fl-progress { background-color: var(--minimal-success); }
@@ -135,29 +104,21 @@
.fl-dot { background-color: var(--minimal-error); } .fl-dot { background-color: var(--minimal-error); }
.fl-progress-bar .fl-progress { background-color: var(--minimal-error); } .fl-progress-bar .fl-progress { background-color: var(--minimal-error); }
} }
/**
* RTL Support
* Right-to-left language direction support
*/
&.fl-rtl { &.fl-rtl {
direction: rtl; direction: rtl;
.fl-progress .fl-progress { .fl-progress .fl-progress {
transform-origin: right center; /* Animation starts from right */ transform-origin: right center;
} }
} }
/**
* Accessibility
* Respects reduced motion preferences
*/
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
animation: none; /* Disable animation */ animation: none;
} }
} }
body.fl-dark .fl-minimal, body.fl-dark .fl-minimal,
html.fl-dark .fl-minimal, html.fl-dark .fl-minimal,
.fl-minimal.fl-auto-dark { .fl-minimal.fl-auto-dark {
background-color: var(--minimal-bg-dark); /* Dark, semi-transparent background */ background-color: var(--minimal-bg-dark);
color: var(--minimal-text-dark); /* Light text */ color: var(--minimal-text-dark);
box-shadow: var(--minimal-shadow-dark); /* Slightly stronger shadow */ box-shadow: var(--minimal-shadow-dark);
border-color: var(--minimal-border-color-dark); /* More visible border in dark mode */ border-color: var(--minimal-border-color-dark);
} }
src/Prime/Resources/assets/themes/neon/neon.scss
+67 -114
View File
@@ -1,113 +1,90 @@
.fl-neon { .fl-neon {
/* Theme variables - Define the visual appearance of Neon notifications */ --neon-bg-light: rgba(255, 255, 255);
/* Base colors and appearance */ --neon-bg-dark: rgba(15, 23, 42);
--neon-bg-light: rgba(255, 255, 255); /* Translucent white in light mode */ --neon-text-light: #334155;
--neon-bg-dark: rgba(15, 23, 42); /* Translucent slate in dark mode */ --neon-text-dark: #f1f5f9;
--neon-text-light: #334155; /* Slate gray text in light mode */ --neon-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
--neon-text-dark: #f1f5f9; /* Light gray text in dark mode */ --neon-shadow-dark: 0 8px 30px rgba(0, 0, 0, 0.25);
--neon-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); /* Soft, spread shadow */ --neon-border-radius: 4px;
--neon-shadow-dark: 0 8px 30px rgba(0, 0, 0, 0.25); /* Deeper shadow for dark mode */ --neon-success: #10b981;
--neon-border-radius: 4px; /* Rounded corners */ --neon-info: #3b82f6;
/* Glow colors for different notification types */ --neon-warning: #f59e0b;
--neon-success: #10b981; /* Emerald green for success */ --neon-error: #ef4444;
--neon-info: #3b82f6; /* Blue for info */ --neon-glow-strength: 10px;
--neon-warning: #f59e0b; /* Amber for warning */ --neon-animation-duration: 0.35s;
--neon-error: #ef4444; /* Red for error */
/* Glow and animation properties */
--neon-glow-strength: 10px; /* How far the glow extends */
--neon-animation-duration: 0.35s; /* Duration for entrance animation */
} }
@keyframes neonEntrance { @keyframes neonEntrance {
0% { 0% {
opacity: 0; opacity: 0;
transform: translateY(-15px); /* Start above final position */ transform: translateY(-15px);
filter: blur(3px); /* Start blurred */ filter: blur(3px);
} }
100% { 100% {
opacity: 1; opacity: 1;
transform: translateY(0); /* End at natural position */ transform: translateY(0);
filter: blur(0); /* End with clear focus */ filter: blur(0);
} }
} }
@keyframes neonGlow { @keyframes neonGlow {
0%, 100% { 0%, 100% {
filter: drop-shadow(0 0 var(--neon-glow-strength) currentColor); /* Full glow */ filter: drop-shadow(0 0 var(--neon-glow-strength) currentColor);
} }
50% { 50% {
filter: drop-shadow(0 0 calc(var(--neon-glow-strength) * 0.7) currentColor); /* Reduced glow */ filter: drop-shadow(0 0 calc(var(--neon-glow-strength) * 0.7) currentColor);
} }
} }
.fl-neon { .fl-neon {
background-color: var(--neon-bg-light); background-color: var(--neon-bg-light);
color: var(--neon-text-light); color: var(--neon-text-light);
border-radius: var(--neon-border-radius) var(--neon-border-radius) 0 0; /* Rounded top corners */ border-radius: var(--neon-border-radius) var(--neon-border-radius) 0 0;
box-shadow: var(--neon-shadow); box-shadow: var(--neon-shadow);
padding: 14px 18px; /* Comfortable padding */ padding: 14px 18px;
margin: 12px 0; /* Vertical spacing */ margin: 12px 0;
position: relative; position: relative;
animation: neonEntrance var(--neon-animation-duration) ease-out; animation: neonEntrance var(--neon-animation-duration) ease-out;
font-family: 'Inter', var(--fl-font), sans-serif; /* Prefer Inter font for elegant typography */ font-family: 'Inter', var(--fl-font), sans-serif;
will-change: transform, opacity, filter; /* Optimize for animation performance */ will-change: transform, opacity, filter;
overflow: hidden; /* Contain progress bar */ overflow: hidden;
/* Frosted glass effect */
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
/**
* Floating illuminated indicator
* Creates a glowing circle that appears to float above the notification
*/
.fl-icon-box { .fl-icon-box {
position: absolute; position: absolute;
top: -12px; /* Position above the notification */ top: -12px;
left: 16px; left: 16px;
width: 24px; width: 24px;
height: 24px; height: 24px;
border-radius: 50%; /* Perfectly circular */ border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
animation: neonGlow 3s ease-in-out infinite; /* Continuous gentle pulsing */ animation: neonGlow 3s ease-in-out infinite;
/* Semi-transparent circular background */
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
opacity: 0.4; /* Subtle background */ opacity: 0.4;
} }
/* Solid colored center dot */
&::after { &::after {
content: ''; content: '';
width: 10px; width: 10px;
height: 10px; height: 10px;
border-radius: 50%; border-radius: 50%;
position: relative; position: relative;
z-index: 1; /* Ensure dot appears above the glow */ z-index: 1;
} }
} }
/**
* Content container
* Holds message and close button
*/
.fl-content { .fl-content {
display: flex; display: flex;
align-items: center; /* Vertically center content */ align-items: center;
} }
/**
* Message styling
* Main notification text
*/
.fl-message { .fl-message {
flex: 1; /* Take available space */ flex: 1;
font-size: 0.9375rem; /* 15px at default font size */ font-size: 0.9375rem;
line-height: 1.5; /* Comfortable line height */ line-height: 1.5;
font-weight: 500; /* Medium weight for better readability */ font-weight: 500;
} }
/**
* Close button styling
* Circular button with hover effect
*/
.fl-close { .fl-close {
background: none; background: none;
border: none; border: none;
@@ -115,25 +92,21 @@
margin-left: 16px; margin-left: 16px;
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%; /* Circular button */ border-radius: 50%;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: inherit; /* Inherit text color */ color: inherit;
opacity: 0.6; /* Subtle appearance by default */ opacity: 0.6;
transition: all 0.2s ease; /* Smooth hover transition */ transition: all 0.2s ease;
font-size: 1.2rem; font-size: 1.2rem;
flex-shrink: 0; /* Prevent button from shrinking */ flex-shrink: 0;
&:hover, &:focus { &:hover, &:focus {
opacity: 1; /* Full opacity on hover/focus */ opacity: 1;
background-color: rgba(0, 0, 0, 0.06); /* Subtle background on hover */ background-color: rgba(0, 0, 0, 0.06);
} }
} }
/**
* Progress bar container
* Holds the animated progress indicator
*/
.fl-progress-bar { .fl-progress-bar {
position: absolute; position: absolute;
left: 0; left: 0;
@@ -141,91 +114,71 @@
bottom: 0; bottom: 0;
height: 3px; height: 3px;
overflow: hidden; overflow: hidden;
border-radius: 0 0 var(--neon-border-radius) var(--neon-border-radius); /* Match parent corners */ border-radius: 0 0 var(--neon-border-radius) var(--neon-border-radius);
/**
* Progress indicator
* Animated by JavaScript to show remaining time
*/
.fl-progress { .fl-progress {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
} }
/**
* Type-specific styling for each notification type
* Each type gets its own color for the indicator and progress bar
*/
&.fl-success { &.fl-success {
.fl-icon-box { .fl-icon-box {
color: var(--neon-success); /* Green glow */ color: var(--neon-success);
&::before { background-color: var(--neon-success); } /* Transparent green circle */ &::before { background-color: var(--neon-success); }
&::after { background-color: var(--neon-success); } /* Solid green dot */ &::after { background-color: var(--neon-success); }
} }
.fl-progress { background-color: var(--neon-success); } /* Green progress bar */ .fl-progress { background-color: var(--neon-success); }
} }
&.fl-info { &.fl-info {
.fl-icon-box { .fl-icon-box {
color: var(--neon-info); /* Blue glow */ color: var(--neon-info);
&::before { background-color: var(--neon-info); } /* Transparent blue circle */ &::before { background-color: var(--neon-info); }
&::after { background-color: var(--neon-info); } /* Solid blue dot */ &::after { background-color: var(--neon-info); }
} }
.fl-progress { background-color: var(--neon-info); } /* Blue progress bar */ .fl-progress { background-color: var(--neon-info); }
} }
&.fl-warning { &.fl-warning {
.fl-icon-box { .fl-icon-box {
color: var(--neon-warning); /* Amber glow */ color: var(--neon-warning);
&::before { background-color: var(--neon-warning); } /* Transparent amber circle */ &::before { background-color: var(--neon-warning); }
&::after { background-color: var(--neon-warning); } /* Solid amber dot */ &::after { background-color: var(--neon-warning); }
} }
.fl-progress { background-color: var(--neon-warning); } /* Amber progress bar */ .fl-progress { background-color: var(--neon-warning); }
} }
&.fl-error { &.fl-error {
.fl-icon-box { .fl-icon-box {
color: var(--neon-error); /* Red glow */ color: var(--neon-error);
&::before { background-color: var(--neon-error); } /* Transparent red circle */ &::before { background-color: var(--neon-error); }
&::after { background-color: var(--neon-error); } /* Solid red dot */ &::after { background-color: var(--neon-error); }
} }
.fl-progress { background-color: var(--neon-error); } /* Red progress bar */ .fl-progress { background-color: var(--neon-error); }
} }
/**
* RTL Support
* Right-to-left language direction support
*/
&.fl-rtl { &.fl-rtl {
direction: rtl; direction: rtl;
.fl-icon-box { .fl-icon-box {
left: auto; left: auto;
right: 16px; /* Move icon to right side */ right: 16px;
} }
.fl-close { .fl-close {
margin-left: 0; margin-left: 0;
margin-right: 16px; /* Swap margins */ margin-right: 16px;
} }
.fl-progress { .fl-progress {
transform-origin: right center; /* Animation starts from right */ transform-origin: right center;
} }
} }
/**
* Accessibility
* Respects reduced motion preferences
*/
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
animation: none; /* Disable entrance animation */ animation: none;
.fl-icon-box { .fl-icon-box {
animation: none; /* Disable glow animation */ animation: none;
} }
} }
} }
body.fl-dark .fl-neon, body.fl-dark .fl-neon,
html.fl-dark .fl-neon, html.fl-dark .fl-neon,
.fl-neon.fl-auto-dark { .fl-neon.fl-auto-dark {
background-color: var(--neon-bg-dark); /* Darker, semi-transparent background */ background-color: var(--neon-bg-dark);
color: var(--neon-text-dark); /* Light text */ color: var(--neon-text-dark);
box-shadow: var(--neon-shadow-dark); /* Stronger shadow */ box-shadow: var(--neon-shadow-dark);
/**
* Adjust hover effect for dark mode
* Use white instead of black with appropriate opacity
*/
.fl-close:hover, .fl-close:focus { .fl-close:hover, .fl-close:focus {
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }
src/Prime/Resources/assets/themes/onyx/onyx.scss
+59 -109
View File
@@ -1,182 +1,140 @@
.fl-onyx { .fl-onyx {
/* Theme variables - Define the visual appearance of Onyx notifications */ --onyx-bg-light: #ffffff;
/* Base colors and appearance */ --onyx-bg-dark: #1e1e1e;
--onyx-bg-light: #ffffff; /* Pure white background in light mode */ --onyx-text-light: #333333;
--onyx-bg-dark: #1e1e1e; /* Dark background in dark mode */ --onyx-text-dark: #f5f5f5;
--onyx-text-light: #333333; /* Dark gray text in light mode */ --onyx-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
--onyx-text-dark: #f5f5f5; /* Light gray text in dark mode */ --onyx-shadow-dark: 0 8px 30px rgba(0, 0, 0, 0.25);
--onyx-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); /* Soft, spread shadow */ --onyx-border-radius: 4px;
--onyx-shadow-dark: 0 8px 30px rgba(0, 0, 0, 0.25); /* Deeper shadow for dark mode */ --onyx-success: #10b981;
--onyx-border-radius: 4px; /* Generous rounded corners */ --onyx-info: #3b82f6;
/* Type-specific colors for accent dots and progress bar */ --onyx-warning: #f59e0b;
--onyx-success: #10b981; /* Green for success */ --onyx-error: #ef4444;
--onyx-info: #3b82f6; /* Blue for info */
--onyx-warning: #f59e0b; /* Amber for warning */
--onyx-error: #ef4444; /* Red for error */
} }
@keyframes onyxIn { @keyframes onyxIn {
0% { 0% {
opacity: 0; opacity: 0;
transform: translateY(15px); /* Start below final position */ transform: translateY(15px);
filter: blur(3px); /* Start blurred */ filter: blur(3px);
} }
100% { 100% {
opacity: 1; opacity: 1;
transform: translateY(0); /* End at natural position */ transform: translateY(0);
filter: blur(0); /* End with clear focus */ filter: blur(0);
} }
} }
.fl-onyx { .fl-onyx {
background-color: var(--onyx-bg-light); background-color: var(--onyx-bg-light);
color: var(--onyx-text-light); color: var(--onyx-text-light);
padding: 1rem 1.25rem; /* Comfortable padding */ padding: 1rem 1.25rem;
margin: 0.75rem 0; /* Vertical spacing */ margin: 0.75rem 0;
position: relative; position: relative;
box-shadow: var(--onyx-shadow); /* Elegant floating shadow */ box-shadow: var(--onyx-shadow);
animation: onyxIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Refined animation with custom easing */ animation: onyxIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
font-family: var(--fl-font), serif; font-family: var(--fl-font), serif;
will-change: transform, opacity, filter; /* Optimize for animation performance */ will-change: transform, opacity, filter;
border-radius: var(--onyx-border-radius) var(--onyx-border-radius) 0 0; /* Rounded corners */ border-radius: var(--onyx-border-radius) var(--onyx-border-radius) 0 0;
overflow: hidden; /* Contain progress bar */ overflow: hidden;
/**
* Accent dots at the corners
* Small circular indicators of notification type
*/
&::before, &::after { &::before, &::after {
content: ''; content: '';
position: absolute; position: absolute;
width: 6px; /* Small dot size */ width: 6px;
height: 6px; height: 6px;
border-radius: 50%; /* Perfectly circular */ border-radius: 50%;
z-index: 1; /* Ensure dots appear above content */ z-index: 1;
} }
/* Top-left dot */
&::before { &::before {
top: 10px; top: 10px;
left: 10px; left: 10px;
} }
/* Bottom-right dot */
&::after { &::after {
bottom: 10px; bottom: 10px;
right: 10px; right: 10px;
} }
/**
* Content container
* Holds message and close button
*/
.fl-content { .fl-content {
display: flex; display: flex;
align-items: center; /* Vertically center content */ align-items: center;
padding-left: 0.4rem; /* Space after the dot */ padding-left: 0.4rem;
} }
/**
* Text container
* Wraps the message
*/
.fl-text { .fl-text {
flex: 1; /* Take available space */ flex: 1;
position: relative; position: relative;
} }
/**
* Message styling
* Main notification text
*/
.fl-message { .fl-message {
font-size: 0.925rem; /* Slightly smaller than 15px */ font-size: 0.925rem;
line-height: 1.5; /* Comfortable line height */ line-height: 1.5;
font-weight: 400; /* Regular weight for clean appearance */ font-weight: 400;
letter-spacing: 0.01rem; /* Slight letter spacing for readability */ letter-spacing: 0.01rem;
} }
/**
* Close button styling
* Circular button with hover effect
*/
.fl-close { .fl-close {
background: none; background: none;
border: none; border: none;
font-size: 1.25rem; /* 20px × symbol */ font-size: 1.25rem;
padding: 0.25rem; padding: 0.25rem;
cursor: pointer; cursor: pointer;
opacity: 0.6; /* Subtle appearance by default */ opacity: 0.6;
transition: all 0.2s ease; /* Smooth hover transition */ transition: all 0.2s ease;
color: currentColor; /* Inherit text color */ color: currentColor;
margin-left: 1rem; /* Space between message and button */ margin-left: 1rem;
flex-shrink: 0; /* Prevent button from shrinking */ flex-shrink: 0;
border-radius: 50%; /* Circular button */ border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 1.75rem; /* 28px diameter */ width: 1.75rem;
height: 1.75rem; height: 1.75rem;
&:hover, &:focus { &:hover, &:focus {
opacity: 1; /* Full opacity on hover/focus */ opacity: 1;
background-color: rgba(0, 0, 0, 0.05); /* Subtle background on hover */ background-color: rgba(0, 0, 0, 0.05);
} }
} }
/**
* Progress bar container
* Holds the animated progress indicator
*/
.fl-progress-bar { .fl-progress-bar {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
height: 3px; /* Thin progress bar */ height: 3px;
overflow: hidden; overflow: hidden;
/**
* Progress indicator
* Animated by JavaScript to show remaining time
*/
.fl-progress { .fl-progress {
height: 100%; height: 100%;
width: 100%; width: 100%;
transform-origin: left center; /* Animation starts from left */ transform-origin: left center;
} }
} }
/**
* Type-specific styling for each notification type
* Each type gets its own color for the dots and progress bar
*/
&.fl-success { &.fl-success {
&::before, &::after { background-color: var(--onyx-success); } /* Green dots */ &::before, &::after { background-color: var(--onyx-success); }
.fl-progress-bar .fl-progress { .fl-progress-bar .fl-progress {
background-color: var(--onyx-success); /* Green progress bar */ background-color: var(--onyx-success);
} }
} }
&.fl-info { &.fl-info {
&::before, &::after { background-color: var(--onyx-info); } /* Blue dots */ &::before, &::after { background-color: var(--onyx-info); }
.fl-progress-bar .fl-progress { .fl-progress-bar .fl-progress {
background-color: var(--onyx-info); /* Blue progress bar */ background-color: var(--onyx-info);
} }
} }
&.fl-warning { &.fl-warning {
&::before, &::after { background-color: var(--onyx-warning); } /* Amber dots */ &::before, &::after { background-color: var(--onyx-warning); }
.fl-progress-bar .fl-progress { .fl-progress-bar .fl-progress {
background-color: var(--onyx-warning); /* Amber progress bar */ background-color: var(--onyx-warning);
} }
} }
&.fl-error { &.fl-error {
&::before, &::after { background-color: var(--onyx-error); } /* Red dots */ &::before, &::after { background-color: var(--onyx-error); }
.fl-progress-bar .fl-progress { .fl-progress-bar .fl-progress {
background-color: var(--onyx-error); /* Red progress bar */ background-color: var(--onyx-error);
} }
} }
/**
* RTL Support
* Right-to-left language direction support
*/
&.fl-rtl { &.fl-rtl {
direction: rtl; direction: rtl;
.fl-content { .fl-content {
padding-left: 0; padding-left: 0;
padding-right: 0.4rem; /* Swap padding for RTL */ padding-right: 0.4rem;
} }
.fl-close { .fl-close {
margin-left: 0; margin-left: 0;
margin-right: 1rem; /* Swap margins for RTL */ margin-right: 1rem;
} }
/* Swap dot positions for RTL */
&::before { &::before {
left: auto; left: auto;
right: 10px; right: 10px;
@@ -186,27 +144,19 @@
left: 10px; left: 10px;
} }
.fl-progress .fl-progress { .fl-progress .fl-progress {
transform-origin: right center; /* Animation starts from right */ transform-origin: right center;
} }
} }
/**
* Accessibility
* Respects reduced motion preferences
*/
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
animation: none; /* Disable animation */ animation: none;
} }
} }
body.fl-dark .fl-onyx, body.fl-dark .fl-onyx,
html.fl-dark .fl-onyx, html.fl-dark .fl-onyx,
.fl-onyx.fl-auto-dark { .fl-onyx.fl-auto-dark {
background-color: var(--onyx-bg-dark); /* Dark background */ background-color: var(--onyx-bg-dark);
color: var(--onyx-text-dark); /* Light text */ color: var(--onyx-text-dark);
box-shadow: var(--onyx-shadow-dark); /* Stronger shadow */ box-shadow: var(--onyx-shadow-dark);
/**
* Adjust hover effect for dark mode
* Use white instead of black with appropriate opacity
*/
.fl-close:hover, .fl-close:focus { .fl-close:hover, .fl-close:focus {
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }
src/Prime/Resources/assets/themes/ruby/ruby.scss
+74 -125
View File
@@ -1,219 +1,168 @@
.fl-ruby { .fl-ruby {
/* Theme variables - Define the visual appearance of Ruby notifications */ --ruby-text: #ffffff;
/* Base colors and appearance */ --ruby-text-dark: #f8fafc;
--ruby-text: #ffffff; /* White text for good contrast on gradients */ --ruby-border-radius: 4px;
--ruby-text-dark: #f8fafc; /* Slightly off-white text for dark mode */ --ruby-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.2);
--ruby-border-radius: 4px; /* Rounded corners (18px) */ --ruby-success-gradient: linear-gradient(135deg, #059669 0%, #10b981 100%);
--ruby-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */ --ruby-info-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
/* Type-specific gradients - rich, vibrant color combinations */ --ruby-warning-gradient: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
--ruby-success-gradient: linear-gradient(135deg, #059669 0%, #10b981 100%); /* Green gradient */ --ruby-error-gradient: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%);
--ruby-info-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); /* Blue gradient */
--ruby-warning-gradient: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); /* Amber gradient */
--ruby-error-gradient: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%); /* Red gradient */
} }
@keyframes rubyShine { @keyframes rubyShine {
0% { 0% {
left: -100%; /* Start off-screen left */ left: -100%;
opacity: 0.6; /* Semi-transparent */ opacity: 0.6;
} }
60% { 60% {
left: 100%; /* Move to right edge */ left: 100%;
opacity: 0.6; /* Maintain opacity during animation */ opacity: 0.6;
} }
100% { 100% {
left: 100%; /* Stay at right edge */ left: 100%;
opacity: 0; /* Fade out at the end */ opacity: 0;
} }
} }
@keyframes rubyIn { @keyframes rubyIn {
0% { 0% {
opacity: 0; /* Start invisible */ opacity: 0;
transform: scale(0.96); /* Start slightly smaller */ transform: scale(0.96);
} }
100% { 100% {
opacity: 1; /* End fully visible */ opacity: 1;
transform: scale(1); /* End at normal size */ transform: scale(1);
} }
} }
.fl-ruby { .fl-ruby {
color: var(--ruby-text); /* White text for readability on gradients */ color: var(--ruby-text);
padding: 0; /* No padding at the container level */ padding: 0;
margin: 0.75rem 0; /* Vertical spacing between notifications */ margin: 0.75rem 0;
position: relative; position: relative;
box-shadow: var(--ruby-shadow); /* Soft shadow for depth */ box-shadow: var(--ruby-shadow);
border-radius: var(--ruby-border-radius) var(--ruby-border-radius) 0 0; /* Rounded corners */ border-radius: var(--ruby-border-radius) var(--ruby-border-radius) 0 0;
animation: rubyIn 0.35s cubic-bezier(0.21, 1.02, 0.73, 1); /* Custom easing for natural feel */ animation: rubyIn 0.35s cubic-bezier(0.21, 1.02, 0.73, 1);
font-family: var(--fl-font), serif; font-family: var(--fl-font), serif;
will-change: transform, opacity; /* Optimize for animation performance */ will-change: transform, opacity;
overflow: hidden; /* Contain the shine effect and progress bar */ overflow: hidden;
/**
* Shine effect overlay
* Creates the gemstone-like reflecting light animation
*/
.fl-shine { .fl-shine {
position: absolute; position: absolute;
top: 0; top: 0;
left: -100%; /* Start off-screen */ left: -100%;
width: 50%; /* Cover half the width */ width: 50%;
height: 100%; height: 100%;
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
rgba(255,255,255,0) 0%, /* Transparent at edges */ rgba(255,255,255,0) 0%,
rgba(255,255,255,0.3) 50%, /* Semi-transparent white in middle */ rgba(255,255,255,0.3) 50%,
rgba(255,255,255,0) 100% rgba(255,255,255,0) 100%
); );
transform: skewX(-20deg); /* Angle the shine effect */ transform: skewX(-20deg);
animation: rubyShine 6s infinite; /* Repeating shine animation */ animation: rubyShine 6s infinite;
animation-delay: 1s; /* Delay before first shine */ animation-delay: 1s;
z-index: 1; /* Above the background, below content */ z-index: 1;
} }
/**
* Content container
* Holds icon, message and close button
*/
.fl-content { .fl-content {
display: flex; display: flex;
align-items: center; /* Vertically center content */ align-items: center;
padding: 0.9rem 1.1rem; /* Content padding */ padding: 0.9rem 1.1rem;
position: relative; position: relative;
z-index: 2; /* Ensure content is above shine effect */ z-index: 2;
} }
/**
* Circular icon container
* Translucent white circle holding the icon
*/
.fl-icon-circle { .fl-icon-circle {
flex-shrink: 0; /* Prevent circle from shrinking */ flex-shrink: 0;
width: 2.25rem; /* 36px diameter */ width: 2.25rem;
height: 2.25rem; height: 2.25rem;
margin-right: 1rem; /* Space between icon and text */ margin-right: 1rem;
background-color: rgba(255, 255, 255, 0.25); /* Translucent white */ background-color: rgba(255, 255, 255, 0.25);
border-radius: 50%; /* Perfectly circular */ border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
/**
* Icon styling
* Icon within the circular container
*/
.fl-icon { .fl-icon {
margin: 0; margin: 0;
font-size: 1rem; /* 16px icon size */ font-size: 1rem;
color: var(--ruby-text); /* White icon */ color: var(--ruby-text);
background-color: transparent; background-color: transparent;
} }
/**
* Text container
* Holds the message
*/
.fl-text { .fl-text {
flex: 1; /* Take available space */ flex: 1;
} }
/**
* Message styling
* Main notification text
*/
.fl-message { .fl-message {
font-size: 0.925rem; /* ~15px at default font size */ font-size: 0.925rem;
line-height: 1.5; /* Comfortable line height */ line-height: 1.5;
font-weight: 500; /* Medium weight for better readability on colored backgrounds */ font-weight: 500;
} }
/**
* Close button styling
* Circular button with hover effect
*/
.fl-close { .fl-close {
background: rgba(255, 255, 255, 0.2); /* Translucent white background */ background: rgba(255, 255, 255, 0.2);
border: none; border: none;
font-size: 1.1rem; /* ~17.6px × symbol */ font-size: 1.1rem;
padding: 0.1rem; padding: 0.1rem;
width: 1.6rem; /* ~25.6px diameter */ width: 1.6rem;
height: 1.6rem; height: 1.6rem;
border-radius: 50%; /* Perfectly circular */ border-radius: 50%;
cursor: pointer; cursor: pointer;
opacity: 0.8; /* Slightly transparent by default */ opacity: 0.8;
transition: all 0.2s; /* Smooth hover transition */ transition: all 0.2s;
color: var(--ruby-text); /* White text */ color: var(--ruby-text);
margin-left: 0.75rem; /* Space between message and button */ margin-left: 0.75rem;
flex-shrink: 0; /* Prevent button from shrinking */ flex-shrink: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
&:hover, &:focus { &:hover, &:focus {
opacity: 1; /* Full opacity on hover/focus */ opacity: 1;
background: rgba(255, 255, 255, 0.3); /* Lighter background on hover */ background: rgba(255, 255, 255, 0.3);
transform: scale(1.05); /* Subtle grow effect on hover */ transform: scale(1.05);
} }
} }
/**
* Progress bar container
* Holds the animated progress indicator
*/
.fl-progress-bar { .fl-progress-bar {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
height: 5px; /* Taller than typical progress bars */ height: 5px;
background-color: rgba(0, 0, 0, 0.1); /* Slightly dark background */ background-color: rgba(0, 0, 0, 0.1);
overflow: hidden; overflow: hidden;
z-index: 3; /* Above other elements */ z-index: 3;
/**
* Progress indicator
* Animated by JavaScript to show remaining time
*/
.fl-progress { .fl-progress {
height: 100%; height: 100%;
width: 100%; width: 100%;
background: rgba(255, 255, 255, 0.4); /* Translucent white progress */ background: rgba(255, 255, 255, 0.4);
} }
} }
/**
* Type-specific styling
* Each notification type gets its own gradient background
*/
&.fl-success { &.fl-success {
background: var(--ruby-success-gradient); /* Green gradient */ background: var(--ruby-success-gradient);
} }
&.fl-info { &.fl-info {
background: var(--ruby-info-gradient); /* Blue gradient */ background: var(--ruby-info-gradient);
} }
&.fl-warning { &.fl-warning {
background: var(--ruby-warning-gradient); /* Amber gradient */ background: var(--ruby-warning-gradient);
} }
&.fl-error { &.fl-error {
background: var(--ruby-error-gradient); /* Red gradient */ background: var(--ruby-error-gradient);
} }
/**
* RTL Support
* Right-to-left language direction support
*/
&.fl-rtl { &.fl-rtl {
direction: rtl; direction: rtl;
.fl-icon-circle { .fl-icon-circle {
margin-right: 0; margin-right: 0;
margin-left: 1rem; /* Swap margins for RTL */ margin-left: 1rem;
} }
.fl-close { .fl-close {
margin-left: 0; margin-left: 0;
margin-right: 0.75rem; /* Swap margins for RTL */ margin-right: 0.75rem;
} }
.fl-shine { .fl-shine {
transform: skewX(20deg); /* Reverse shine angle for RTL */ transform: skewX(20deg);
} }
.fl-progress .fl-progress { .fl-progress .fl-progress {
transform-origin: right center; /* Animation starts from right */ transform-origin: right center;
} }
} }
/**
* Accessibility
* Respects reduced motion preferences
*/
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
animation: none; /* Disable entrance animation */ animation: none;
.fl-shine { .fl-shine {
display: none; /* Remove shine effect for reduced motion */ display: none;
} }
} }
} }
src/Prime/Resources/assets/themes/sapphire/sapphire.scss
+44 -78
View File
@@ -1,117 +1,83 @@
/* Theme-specific variables - override these to customize the sapphire theme */
.fl-sapphire { .fl-sapphire {
/* Base appearance */ --sapphire-bg-base: rgba(30, 30, 30, 0.9);
--sapphire-bg-base: rgba(30, 30, 30, 0.9); /* Dark semi-transparent background */ --sapphire-text: #f0f0f0;
--sapphire-text: #f0f0f0; /* Light text for contrast */ --sapphire-shadow: rgba(0, 0, 0, 0.15);
--sapphire-shadow: rgba(0, 0, 0, 0.15); /* Subtle shadow */ --sapphire-progress-bg: rgba(255, 255, 255, 0.2);
/* Progress bar colors */ --sapphire-progress-fill: rgba(255, 255, 255, 0.9);
--sapphire-progress-bg: rgba(255, 255, 255, 0.2); /* Light translucent background */ --sapphire-success: rgba(16, 185, 129, 0.95);
--sapphire-progress-fill: rgba(255, 255, 255, 0.9); /* Nearly white progress indicator */ --sapphire-error: rgba(239, 68, 68, 0.95);
/* Notification type colors - all with high transparency */ --sapphire-warning: rgba(245, 158, 11, 0.95);
--sapphire-success: rgba(16, 185, 129, 0.95); /* Transparent green */ --sapphire-info: rgba(59, 130, 246, 0.95);
--sapphire-error: rgba(239, 68, 68, 0.95); /* Transparent red */ --sapphire-animation: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--sapphire-warning: rgba(245, 158, 11, 0.95); /* Transparent amber */
--sapphire-info: rgba(59, 130, 246, 0.95); /* Transparent blue */
/* Animation timing */
--sapphire-animation: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth bounce easing */
} }
@keyframes sapphireIn { @keyframes sapphireIn {
0% { 0% {
opacity: 0; /* Start invisible */ opacity: 0;
transform: translateY(10px); /* Start below final position */ transform: translateY(10px);
} }
60% { 60% {
transform: translateY(-3px); /* Slight overshoot (bounce) */ transform: translateY(-3px);
} }
100% { 100% {
opacity: 1; /* End fully visible */ opacity: 1;
transform: translateY(0); /* End at natural position */ transform: translateY(0);
} }
} }
.fl-sapphire { .fl-sapphire {
/* Base appearance */ background-color: var(--sapphire-bg-base);
background-color: var(--sapphire-bg-base); /* Semi-transparent background */ color: var(--sapphire-text);
color: var(--sapphire-text); /* Light text color */ padding: 1em 1.5em;
padding: 1em 1.5em; /* Comfortable padding */ margin: 0 0 0.75em 0;
margin: 0 0 0.75em 0; /* Bottom spacing between notifications */
position: relative; position: relative;
box-shadow: 0 6px 16px var(--sapphire-shadow); /* Soft shadow for depth */ box-shadow: 0 6px 16px var(--sapphire-shadow);
transition: all 0.3s ease; /* Smooth transitions */ transition: all 0.3s ease;
animation: sapphireIn var(--sapphire-animation); /* Entrance animation with bounce */ animation: sapphireIn var(--sapphire-animation);
font-family: Roboto, var(--fl-font), serif; /* Prefer Roboto font */ font-family: Roboto, var(--fl-font), serif;
border-radius: 4px 4px 0 0; /* Rounded corners */ border-radius: 4px 4px 0 0;
will-change: transform, opacity; /* Optimize for animation performance */ will-change: transform, opacity;
/** backdrop-filter: blur(12px);
* Glassmorphism effect -webkit-backdrop-filter: blur(12px);
* Creates the frosted glass appearance
*/
backdrop-filter: blur(12px); /* Strong blur effect */
-webkit-backdrop-filter: blur(12px); /* Safari support */
/**
* Message styling
* Clean, readable text
*/
.fl-message { .fl-message {
font-size: 0.925em; /* ~15px at default font size */ font-size: 0.925em;
line-height: 1.4; /* Comfortable line height */ line-height: 1.4;
color: var(--sapphire-text); /* Consistent text color */ color: var(--sapphire-text);
} }
/**
* Progress bar styling
* Indicates time remaining before dismissal
*/
.fl-progress-bar { .fl-progress-bar {
position: absolute; position: absolute;
bottom: 0; /* Positioned at the bottom */ bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 4px; /* Thin progress bar */ height: 4px;
background-color: var(--sapphire-progress-bg); /* Semi-transparent background */ background-color: var(--sapphire-progress-bg);
overflow: hidden; overflow: hidden;
border-radius: 0 0 0.375em 0.375em; /* Rounded bottom corners */ border-radius: 0 0 0.375em 0.375em;
/**
* Progress indicator
* The actual moving part of the progress bar
*/
.fl-progress { .fl-progress {
background-color: var(--sapphire-progress-fill); /* Lighter fill color */ background-color: var(--sapphire-progress-fill);
height: 100%; height: 100%;
width: 100%; width: 100%;
transform-origin: left center; /* Animation starts from left */ transform-origin: left center;
will-change: transform; /* Optimize animation performance */ will-change: transform;
} }
} }
/**
* Type-specific colors
* Each notification type gets its own semi-transparent background
*/
&.fl-success { &.fl-success {
background-color: var(--sapphire-success); /* Green background */ background-color: var(--sapphire-success);
} }
&.fl-error { &.fl-error {
background-color: var(--sapphire-error); /* Red background */ background-color: var(--sapphire-error);
} }
&.fl-warning { &.fl-warning {
background-color: var(--sapphire-warning); /* Amber background */ background-color: var(--sapphire-warning);
} }
&.fl-info { &.fl-info {
background-color: var(--sapphire-info); /* Blue background */ background-color: var(--sapphire-info);
} }
/**
* RTL language support
* Right-to-left text direction
*/
&.fl-rtl { &.fl-rtl {
direction: rtl; /* Right-to-left text */ direction: rtl;
.fl-progress .fl-progress { .fl-progress .fl-progress {
transform-origin: right center; /* Animation starts from right */ transform-origin: right center;
} }
} }
/**
* Accessibility
* Respects reduced motion preferences
*/
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
animation: none; /* Disable animation */ animation: none;
} }
} }
src/Prime/Resources/assets/themes/slack/slack.scss
+71 -119
View File
@@ -1,209 +1,161 @@
.fl-slack { .fl-slack {
/* Theme variables - Define the visual appearance of Slack notifications */ --slack-bg-light: #ffffff;
/* Base colors and appearance */ --slack-bg-dark: #1a1d21;
--slack-bg-light: #ffffff; /* White background in light mode */ --slack-hover-light: #f8f8f8;
--slack-bg-dark: #1a1d21; /* Dark background in dark mode (Slack dark) */ --slack-hover-dark: #222529;
--slack-hover-light: #f8f8f8; /* Light hover state */ --slack-text-light: #1d1c1d;
--slack-hover-dark: #222529; /* Dark hover state */ --slack-text-secondary-light: #616061;
--slack-text-light: #1d1c1d; /* Dark text in light mode */ --slack-text-dark: #e0e0e0;
--slack-text-secondary-light: #616061; /* Gray secondary text in light mode */ --slack-text-secondary-dark: #ababad;
--slack-text-dark: #e0e0e0; /* Light text in dark mode */ --slack-border-light: #e0e0e0;
--slack-text-secondary-dark: #ababad; /* Gray secondary text in dark mode */ --slack-border-dark: #393a3e;
--slack-border-light: #e0e0e0; /* Light border color */ --slack-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
--slack-border-dark: #393a3e; /* Dark border color */ --slack-shadow-dark: 0 1px 0 rgba(0, 0, 0, 0.2);
--slack-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); /* Subtle shadow in light mode */ --slack-avatar-size: 36px;
--slack-shadow-dark: 0 1px 0 rgba(0, 0, 0, 0.2); /* Stronger shadow in dark mode */ --slack-success: #2bac76;
--slack-avatar-size: 36px; /* Size of avatar/icon container */ --slack-info: #1264a3;
/* Type-specific colors matching Slack's color scheme */ --slack-warning: #e8912d;
--slack-success: #2bac76; /* Green */ --slack-error: #e01e5a;
--slack-info: #1264a3; /* Blue */ --slack-animation-duration: 150ms;
--slack-warning: #e8912d; /* Orange */
--slack-error: #e01e5a; /* Red/Pink */
/* Animation timing */
--slack-animation-duration: 150ms; /* Quick animation for responsive feel */
} }
@keyframes slackFadeIn { @keyframes slackFadeIn {
from { from {
opacity: 0; /* Start invisible */ opacity: 0;
} }
to { to {
opacity: 1; /* End fully visible */ opacity: 1;
} }
} }
.fl-slack { .fl-slack {
position: relative; position: relative;
margin: 4px 0; /* Minimal spacing between messages */ margin: 4px 0;
font-family: "Lato", "Slack-Lato", "Helvetica Neue", "Helvetica", sans-serif; /* Slack's font stack */ font-family: "Lato", "Slack-Lato", "Helvetica Neue", "Helvetica", sans-serif;
animation: slackFadeIn var(--slack-animation-duration) ease-out; /* Quick fade in */ animation: slackFadeIn var(--slack-animation-duration) ease-out;
/**
* Message bubble
* The main container that resembles a Slack message
*/
.fl-slack-message { .fl-slack-message {
background-color: var(--slack-bg-light); background-color: var(--slack-bg-light);
color: var(--slack-text-light); color: var(--slack-text-light);
padding: 8px 20px 8px 8px; /* More padding on right for close button */ padding: 8px 20px 8px 8px;
border-radius: 4px; /* Slightly rounded corners */ border-radius: 4px;
display: flex; display: flex;
align-items: flex-start; /* Align content to top */ align-items: flex-start;
transition: background-color 0.1s ease; /* Smooth hover transition */ transition: background-color 0.1s ease;
border: 1px solid var(--slack-border-light); /* Subtle border */ border: 1px solid var(--slack-border-light);
box-shadow: var(--slack-shadow); /* Slight shadow for depth */ box-shadow: var(--slack-shadow);
&:hover { &:hover {
background-color: var(--slack-hover-light); /* Background change on hover */ background-color: var(--slack-hover-light);
} }
} }
/**
* Avatar container
* Colored square that holds the type icon
*/
.fl-avatar { .fl-avatar {
width: var(--slack-avatar-size); /* Fixed size avatar */ width: var(--slack-avatar-size);
height: var(--slack-avatar-size); height: var(--slack-avatar-size);
border-radius: 4px; /* Slightly rounded corners */ border-radius: 4px;
margin-right: 8px; /* Space between avatar and text */ margin-right: 8px;
flex-shrink: 0; /* Prevent avatar from shrinking */ flex-shrink: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: currentColor; /* Uses the type color */ background-color: currentColor;
} }
/**
* Type icon
* Symbol within the colored avatar
*/
.fl-type-icon { .fl-type-icon {
color: white; /* White icon on colored background */ color: white;
font-weight: bold; /* Bold symbol */ font-weight: bold;
font-size: 16px; /* Icon size */ font-size: 16px;
} }
/**
* Message content container
* Holds the message text
*/
.fl-message-content { .fl-message-content {
flex: 1; /* Take available space */ flex: 1;
min-width: 0; /* Allows text to wrap */ min-width: 0;
} }
/**
* Message text styling
* Follows Slack's text appearance
*/
.fl-message-text { .fl-message-text {
font-size: 15px; /* Slack's standard message size */ font-size: 15px;
line-height: 1.46668; /* Slack's line height */ line-height: 1.46668;
word-break: break-word; /* Allows breaking long words */ word-break: break-word;
} }
/**
* Actions container
* Holds the close button that appears on hover
*/
.fl-actions { .fl-actions {
visibility: hidden; /* Hidden by default */ visibility: hidden;
position: absolute; position: absolute;
right: 6px; /* Positioned in top-right */ right: 6px;
top: 8px; top: 8px;
opacity: 0; /* Transparent by default */ opacity: 0;
transition: opacity 0.1s ease; /* Smooth fade in/out */ transition: opacity 0.1s ease;
} }
/**
* Show actions on hover
* Makes the close button appear when hovering the message
*/
.fl-slack-message:hover .fl-actions { .fl-slack-message:hover .fl-actions {
visibility: visible; /* Show on hover */ visibility: visible;
opacity: 1; /* Fade in */ opacity: 1;
} }
/**
* Close button styling
* Simple button with hover effect
*/
.fl-close { .fl-close {
background: none; background: none;
border: none; border: none;
color: var(--slack-text-secondary-light); /* Gray icon by default */ color: var(--slack-text-secondary-light);
cursor: pointer; cursor: pointer;
padding: 4px; padding: 4px;
border-radius: 4px; /* Slightly rounded corners */ border-radius: 4px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
&:hover { &:hover {
color: var(--slack-text-light); /* Darker on hover */ color: var(--slack-text-light);
background-color: var(--slack-hover-light); /* Light background on hover */ background-color: var(--slack-hover-light);
} }
} }
/**
* Type-specific styling
* Each notification type gets its own colored avatar
*/
&.fl-success { &.fl-success {
.fl-avatar { .fl-avatar {
color: var(--slack-success); /* Green avatar */ color: var(--slack-success);
} }
} }
&.fl-info { &.fl-info {
.fl-avatar { .fl-avatar {
color: var(--slack-info); /* Blue avatar */ color: var(--slack-info);
} }
} }
&.fl-warning { &.fl-warning {
.fl-avatar { .fl-avatar {
color: var(--slack-warning); /* Orange avatar */ color: var(--slack-warning);
} }
} }
&.fl-error { &.fl-error {
.fl-avatar { .fl-avatar {
color: var(--slack-error); /* Red avatar */ color: var(--slack-error);
} }
} }
/**
* RTL Support
* Right-to-left language direction support
*/
&.fl-rtl { &.fl-rtl {
direction: rtl; /* Right-to-left text */ direction: rtl;
.fl-avatar { .fl-avatar {
margin-right: 0; margin-right: 0;
margin-left: 8px; /* Swap margins */ margin-left: 8px;
} }
.fl-username { .fl-username {
margin-right: 0; margin-right: 0;
margin-left: 4px; /* Swap margins */ margin-left: 4px;
} }
.fl-actions { .fl-actions {
right: auto; right: auto;
left: 6px; /* Move to top-left */ left: 6px;
} }
.fl-slack-message { .fl-slack-message {
padding: 8px 8px 8px 20px; /* Swap padding */ padding: 8px 8px 8px 20px;
} }
} }
/**
* Accessibility
* Respects reduced motion preferences
*/
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
animation: none; /* Disable animation */ animation: none;
} }
} }
body.fl-dark .fl-slack, body.fl-dark .fl-slack,
html.fl-dark .fl-slack, html.fl-dark .fl-slack,
.fl-slack.fl-auto-dark { .fl-slack.fl-auto-dark {
.fl-slack-message { .fl-slack-message {
background-color: var(--slack-bg-dark); /* Dark background */ background-color: var(--slack-bg-dark);
color: var(--slack-text-dark); /* Light text */ color: var(--slack-text-dark);
border-color: var(--slack-border-dark); /* Darker border */ border-color: var(--slack-border-dark);
box-shadow: var(--slack-shadow-dark); /* Stronger shadow */ box-shadow: var(--slack-shadow-dark);
&:hover { &:hover {
background-color: var(--slack-hover-dark); /* Dark hover state */ background-color: var(--slack-hover-dark);
} }
} }
.fl-close { .fl-close {
color: var(--slack-text-secondary-dark); /* Lighter gray icon */ color: var(--slack-text-secondary-dark);
&:hover { &:hover {
color: var(--slack-text-dark); /* White on hover */ color: var(--slack-text-dark);
background-color: var(--slack-hover-dark); /* Dark background on hover */ background-color: var(--slack-hover-dark);
} }
} }
} }
src/Toastr/Prime/Resources/assets/global.d.ts
Vendored
-7
View File
@@ -1,10 +1,3 @@
/**
* @file TypeScript Global Declarations for Toastr
* @description Type definitions for jQuery and Toastr globals
* @author Younes ENNAJI
*/
// Declare jQuery on the global window object
interface Window { interface Window {
jQuery?: any jQuery?: any
$?: any $?: any