php-flasher/docs/pages/themes/ios.md

layout, permalink, title, subtitle, description, theme_name, theme_name_short, theme_class, icon, color, has_assets, visual_features, accessibility_features, css_variables, html_structure

layout	permalink	title	subtitle	description	theme_name	theme_name_short	theme_class	icon	color	has_assets	visual_features	accessibility_features	css_variables	html_structure
theme	/theme/ios/	iOS Theme	Apple-style notification system	Add Apple iOS-style notifications to your application with the iOS theme for PHPFlasher. Featuring frosted glass effects, app icons, and animations that mimic native iOS notifications.	theme.ios	ios	fl-ios	fa-brands fa-apple	slate	true	Apple's signature frosted glass backdrop effect App icon design with colored backgrounds Real-time timestamp display in iOS format Smooth entrance and content expansion animations Adaptive design that matches iOS light and dark mode	Type-specific ARIA roles for screen readers Appropriate aria-live regions based on message importance Reduced motion option for motion-sensitive users High contrast text that adapts to light and dark modes Fully keyboard accessible close button Mobile-optimized responsive layout	:root { /* Base appearance */ --ios-bg-light: rgba(255, 255, 255, 0.85); /* Light mode background */ --ios-bg-dark: rgba(30, 30, 30, 0.85); /* Dark mode background */ --ios-text-light: #000000; /* Light mode text */ --ios-text-secondary-light: #6e6e6e; /* Light mode secondary text */ --ios-text-dark: #ffffff; /* Dark mode text */ --ios-text-secondary-dark: #a0a0a0; /* Dark mode secondary text */ --ios-border-radius: 13px; /* Corner radius */ --ios-blur: 30px; /* Backdrop blur amount */ /* Type colors - based on iOS system colors */ --ios-success: #34c759; /* iOS green */ --ios-info: #007aff; /* iOS blue */ --ios-warning: #ff9500; /* iOS orange */ --ios-error: #ff3b30; /* iOS red */ }	<div class="fl-ios fl-[type]" role="[role]" aria-live="[ariaLive]" aria-atomic="true"> <div class="fl-ios-notification"> <div class="fl-header"> <div class="fl-app-icon"> <!-- SVG icon --> </div> <div class="fl-app-info"> <div class="fl-app-name">App Name/Title</div> <div class="fl-time">2025-03-10 00:14:11</div> </div> </div> <div class="fl-content"> <div class="fl-message">Message text</div> </div> <button class="fl-close" aria-label="Close [type] message"> <span aria-hidden="true">×</span> </button> </div> </div>