fonts
1 month ago
vendor
1 month ago
admin-notices.css
1 month ago
admin.build.css
1 month ago
admin.css
1 month ago
analytics.build.css
1 month ago
blocks.build.css
1 month ago
carousel.min.css
1 month ago
custom-player.build.css
1 month ago
el-icon.css
1 month ago
embedpress-elementor.css
1 month ago
embedpress.css
1 month ago
ep-pdf-lightbox.css
1 month ago
feature-notices.css
1 month ago
font.css
1 month ago
glider.min.css
1 month ago
index.html
1 month ago
instagram-shortcode-generator.css
1 month ago
lazy-load.css
1 month ago
meetup-events.css
1 month ago
modal.css
1 month ago
onboarding.build.css
1 month ago
pdf-gallery.css
1 month ago
plyr.css
1 month ago
preview.css
1 month ago
release-notes.css
1 month ago
settings-icons.css
1 month ago
settings.css
1 month ago
lazy-load.css
120 lines
| 1 | /** |
| 2 | * EmbedPress Lazy Load Styles |
| 3 | * |
| 4 | * Styles for lazy loading placeholders and transitions |
| 5 | * |
| 6 | * @package EmbedPress |
| 7 | * @since 4.0.0 |
| 8 | */ |
| 9 | |
| 10 | /* Lazy load placeholder */ |
| 11 | .ep-lazy-iframe-placeholder, .ose-embedpress-responsive iframe { |
| 12 | display: block; |
| 13 | position: relative; |
| 14 | background: #f5f5f5; |
| 15 | border: 1px solid #e0e0e0; |
| 16 | border-radius: 4px; |
| 17 | overflow: hidden; |
| 18 | transition: opacity 0.3s ease-in-out; |
| 19 | } |
| 20 | |
| 21 | /* Maintain aspect ratio and prevent layout shift */ |
| 22 | .ep-lazy-iframe-placeholder::before, .ose-embedpress-responsive iframe::before { |
| 23 | content: ''; |
| 24 | display: block; |
| 25 | padding-top: 56.25%; /* 16:9 aspect ratio by default */ |
| 26 | } |
| 27 | |
| 28 | /* Loading spinner */ |
| 29 | .ep-lazy-iframe-placeholder::after, .ose-embedpress-responsive iframe::after { |
| 30 | content: ''; |
| 31 | position: absolute; |
| 32 | top: 50%; |
| 33 | left: 50%; |
| 34 | width: 40px; |
| 35 | height: 40px; |
| 36 | margin: -20px 0 0 -20px; |
| 37 | border: 3px solid #e0e0e0; |
| 38 | border-top-color: #5B4E96; |
| 39 | border-radius: 50%; |
| 40 | animation: ep-lazy-spin 0.8s linear infinite; |
| 41 | } |
| 42 | |
| 43 | /* Loading state */ |
| 44 | .ep-lazy-loading { |
| 45 | opacity: 0.7; |
| 46 | } |
| 47 | |
| 48 | /* Loaded state - iframe is now visible */ |
| 49 | .ep-lazy-loaded { |
| 50 | opacity: 1; |
| 51 | animation: ep-lazy-fade-in 0.3s ease-in-out; |
| 52 | } |
| 53 | |
| 54 | /* Fade in animation */ |
| 55 | @keyframes ep-lazy-fade-in { |
| 56 | from { |
| 57 | opacity: 0; |
| 58 | } |
| 59 | to { |
| 60 | opacity: 1; |
| 61 | } |
| 62 | } |
| 63 | |
| 64 | /* Error state */ |
| 65 | .ep-lazy-error { |
| 66 | background: #ffebee; |
| 67 | border-color: #ef5350; |
| 68 | } |
| 69 | |
| 70 | .ep-lazy-error::after { |
| 71 | content: '⚠'; |
| 72 | font-size: 40px; |
| 73 | color: #ef5350; |
| 74 | border: none; |
| 75 | animation: none; |
| 76 | width: auto; |
| 77 | height: auto; |
| 78 | margin: -20px 0 0 -20px; |
| 79 | } |
| 80 | |
| 81 | /* Spinner animation */ |
| 82 | @keyframes ep-lazy-spin { |
| 83 | 0% { |
| 84 | transform: rotate(0deg); |
| 85 | } |
| 86 | 100% { |
| 87 | transform: rotate(360deg); |
| 88 | } |
| 89 | } |
| 90 | |
| 91 | /* Ensure iframes loaded via lazy load maintain proper sizing */ |
| 92 | iframe[data-ep-lazy-loaded="true"] { |
| 93 | display: block; |
| 94 | max-width: 100%; |
| 95 | } |
| 96 | |
| 97 | /* Responsive adjustments */ |
| 98 | @media (max-width: 768px) { |
| 99 | .ep-lazy-iframe-placeholder::after { |
| 100 | width: 30px; |
| 101 | height: 30px; |
| 102 | margin: -15px 0 0 -15px; |
| 103 | border-width: 2px; |
| 104 | } |
| 105 | } |
| 106 | |
| 107 | /* Dark mode support */ |
| 108 | /* @media (prefers-color-scheme: dark) { |
| 109 | .ep-lazy-iframe-placeholder { |
| 110 | background: #2a2a2a; |
| 111 | border-color: #404040; |
| 112 | } |
| 113 | |
| 114 | .ep-lazy-iframe-placeholder::after { |
| 115 | border-color: #404040; |
| 116 | border-top-color: #8B7EC8; |
| 117 | } |
| 118 | } */ |
| 119 | |
| 120 |