react-riyils 1.0.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +54 -155
- package/dist/index.css +1 -1
- package/dist/index.esm.css +1 -1
- package/dist/index.esm.js +755 -772
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +754 -781
- package/dist/index.js.map +1 -1
- package/dist/index.umd.css +1 -1
- package/dist/index.umd.js +754 -781
- package/dist/index.umd.js.map +1 -1
- package/dist/src/index.d.ts +10 -39
- package/dist/src/index.d.ts.map +1 -1
- package/dist/src/riyils-viewer.d.ts +7 -7
- package/dist/src/riyils-viewer.d.ts.map +1 -1
- package/package.json +2 -2
- package/assets/demo1.png +0 -0
- package/assets/demo2.png +0 -0
package/README.md
CHANGED
|
@@ -1,59 +1,59 @@
|
|
|
1
|
-
# React Riyils
|
|
2
|
-
|
|
3
|
-
Instagram/TikTok-style vertical video swiper for React.
|
|
4
1
|
|
|
5
2
|
[](https://www.npmjs.com/package/react-riyils)
|
|
6
3
|
[](https://opensource.org/licenses/MIT)
|
|
7
4
|
|
|
8
|
-
|
|
5
|
+
# React Riyils
|
|
6
|
+
|
|
7
|
+
Check out the live demo here: [Demo](https://illegal-instruction-co.github.io/react-riyils/demo.html)
|
|
8
|
+
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
<img src="assets/demo1.png" alt="Demo 1" width="45%" />
|
|
12
|
-
<img src="assets/demo2.png" alt="Demo 2" width="45%" />
|
|
13
|
-
</p>
|
|
10
|
+
React Riyils is a React component for building Instagram-style vertical video stories and reels. It helps you add mobile-friendly, touch-enabled video carousels and fullscreen viewers to your web projects with ease.
|
|
14
11
|
|
|
15
12
|
## Features
|
|
16
13
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
- Mobile and
|
|
20
|
-
-
|
|
21
|
-
-
|
|
14
|
+
Features:
|
|
15
|
+
|
|
16
|
+
- Mobile-first and fully responsive
|
|
17
|
+
- Smooth, high-performance video playback
|
|
18
|
+
- Touch, mouse, and keyboard navigation
|
|
19
|
+
- Infinite scroll and dynamic loading
|
|
22
20
|
- TypeScript support
|
|
23
|
-
- Customizable
|
|
21
|
+
- Customizable UI and translations
|
|
22
|
+
- Lightweight and easy to integrate
|
|
23
|
+
|
|
24
|
+
## Demo
|
|
25
|
+
|
|
26
|
+
See the live demo: [Demo Page](./demo.html)
|
|
24
27
|
|
|
25
28
|
## Installation
|
|
26
29
|
|
|
27
|
-
```
|
|
30
|
+
```
|
|
28
31
|
npm install react-riyils
|
|
29
32
|
```
|
|
30
33
|
|
|
31
34
|
## Usage
|
|
32
35
|
|
|
33
36
|
```jsx
|
|
34
|
-
import React, { useState } from 'react';
|
|
35
37
|
import { ReactRiyils, RiyilsViewer } from 'react-riyils';
|
|
36
|
-
|
|
38
|
+
|
|
39
|
+
const videos = [
|
|
40
|
+
{ id: '1', videoUrl: 'https://media.w3.org/2010/05/sintel/trailer_hd.mp4' },
|
|
41
|
+
{ id: '2', videoUrl: 'https://media.w3.org/2010/05/bunny/trailer.mp4' },
|
|
42
|
+
// ...more videos
|
|
43
|
+
];
|
|
37
44
|
|
|
38
45
|
function App() {
|
|
39
46
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
40
47
|
const [showViewer, setShowViewer] = useState(false);
|
|
41
48
|
|
|
42
|
-
const videos = [
|
|
43
|
-
{ id: '1', videoUrl: 'https://example.com/video1.mp4' },
|
|
44
|
-
{ id: '2', videoUrl: 'https://example.com/video2.mp4' },
|
|
45
|
-
{ id: '3', videoUrl: 'https://example.com/video3.mp4' },
|
|
46
|
-
];
|
|
47
|
-
|
|
48
49
|
return (
|
|
49
50
|
<>
|
|
50
51
|
<ReactRiyils
|
|
51
52
|
videos={videos}
|
|
52
53
|
currentIndex={currentIndex}
|
|
53
|
-
onVideoClick={(
|
|
54
|
+
onVideoClick={() => setShowViewer(true)}
|
|
54
55
|
onVideoChange={setCurrentIndex}
|
|
55
56
|
/>
|
|
56
|
-
|
|
57
57
|
{showViewer && (
|
|
58
58
|
<RiyilsViewer
|
|
59
59
|
videos={videos}
|
|
@@ -67,145 +67,44 @@ function App() {
|
|
|
67
67
|
}
|
|
68
68
|
```
|
|
69
69
|
|
|
70
|
-
##
|
|
71
|
-
|
|
72
|
-
### ReactRiyils Props
|
|
73
|
-
|
|
74
|
-
| Prop | Type | Default | Description |
|
|
75
|
-
|------|------|---------|-------------|
|
|
76
|
-
| `videos` | `Video[]` | required | Array of video objects |
|
|
77
|
-
| `currentIndex` | `number` | required | Current active video index |
|
|
78
|
-
| `onVideoClick` | `(index: number) => void` | required | Click handler |
|
|
79
|
-
| `onVideoChange` | `(index: number) => void` | required | Change handler |
|
|
80
|
-
| `containerHeightMobile` | `number` | `380` | Mobile height (px) |
|
|
81
|
-
| `containerHeightDesktop` | `number` | `500` | Desktop height (px) |
|
|
82
|
-
| `progressBarColor` | `string` | `'#3B82F6'` | Progress bar color |
|
|
83
|
-
| `videoDurationLimit` | `number` | `10` | Auto-next after seconds |
|
|
84
|
-
| `autoPlay` | `boolean` | `true` | Auto-play videos |
|
|
85
|
-
|
|
86
|
-
### RiyilsViewer Props
|
|
87
|
-
|
|
88
|
-
| Prop | Type | Default | Description |
|
|
89
|
-
|------|------|---------|-------------|
|
|
90
|
-
| `videos` | `Video[]` | required | Array of video objects |
|
|
91
|
-
| `initialIndex` | `number` | `0` | Starting video index |
|
|
92
|
-
| `onClose` | `() => void` | - | Close handler |
|
|
93
|
-
| `onVideoChange` | `(index: number) => void` | - | Change handler |
|
|
94
|
-
| `progressBarColor` | `string` | `'#FF0000'` | Progress bar color |
|
|
95
|
-
|
|
96
|
-
### Video Type
|
|
97
|
-
|
|
98
|
-
```typescript
|
|
99
|
-
interface Video {
|
|
100
|
-
id: string;
|
|
101
|
-
videoUrl: string;
|
|
102
|
-
thumbnailUrl?: string;
|
|
103
|
-
duration?: number;
|
|
104
|
-
}
|
|
105
|
-
```
|
|
70
|
+
## Props
|
|
106
71
|
|
|
107
|
-
|
|
72
|
+
### `<ReactRiyils />`
|
|
108
73
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
74
|
+
| Prop | Type | Description |
|
|
75
|
+
|---------------------|----------|--------------------------------------------------|
|
|
76
|
+
| `videos` | array | List of video objects `{ id, videoUrl }` |
|
|
77
|
+
| `currentIndex` | number | Index of the currently active video |
|
|
78
|
+
| `onVideoClick` | func | Called when a video is clicked |
|
|
79
|
+
| `onVideoChange` | func | Called when the active video changes |
|
|
80
|
+
| `translations` | object | (Optional) Custom UI text |
|
|
81
|
+
| `containerHeightMobile` | number | (Optional) Height for mobile view |
|
|
82
|
+
| `containerHeightDesktop` | number | (Optional) Height for desktop view |
|
|
112
83
|
|
|
113
|
-
|
|
114
|
-
const [videos, setVideos] = useState([
|
|
115
|
-
{ id: '1', videoUrl: 'https://example.com/video1.mp4' },
|
|
116
|
-
{ id: '2', videoUrl: 'https://example.com/video2.mp4' },
|
|
117
|
-
]);
|
|
118
|
-
const [currentIndex, setCurrentIndex] = useState(0);
|
|
119
|
-
const [showViewer, setShowViewer] = useState(false);
|
|
120
|
-
const [isLoading, setIsLoading] = useState(false);
|
|
121
|
-
const [hasMore, setHasMore] = useState(true);
|
|
122
|
-
const [page, setPage] = useState(1);
|
|
123
|
-
|
|
124
|
-
const WINDOW_SIZE = 20; // Keep max 20 videos in memory
|
|
125
|
-
const LOAD_THRESHOLD = 3; // Load more when 3 videos away from end
|
|
126
|
-
|
|
127
|
-
const loadMoreVideos = async () => {
|
|
128
|
-
if (isLoading || !hasMore) return;
|
|
129
|
-
|
|
130
|
-
setIsLoading(true);
|
|
131
|
-
try {
|
|
132
|
-
// Replace with your actual API call
|
|
133
|
-
const response = await fetch(`/api/videos?page=${page}&limit=10`);
|
|
134
|
-
const newVideos = await response.json();
|
|
135
|
-
|
|
136
|
-
if (newVideos.length === 0) {
|
|
137
|
-
setHasMore(false);
|
|
138
|
-
} else {
|
|
139
|
-
setVideos(prev => {
|
|
140
|
-
const updated = [...prev, ...newVideos];
|
|
141
|
-
// Memory management: remove old videos if exceeds window size
|
|
142
|
-
if (updated.length > WINDOW_SIZE) {
|
|
143
|
-
const removeCount = updated.length - WINDOW_SIZE;
|
|
144
|
-
return updated.slice(removeCount);
|
|
145
|
-
}
|
|
146
|
-
return updated;
|
|
147
|
-
});
|
|
148
|
-
setPage(prev => prev + 1);
|
|
149
|
-
}
|
|
150
|
-
} catch (error) {
|
|
151
|
-
console.error('Failed to load videos:', error);
|
|
152
|
-
} finally {
|
|
153
|
-
setIsLoading(false);
|
|
154
|
-
}
|
|
155
|
-
};
|
|
156
|
-
|
|
157
|
-
useEffect(() => {
|
|
158
|
-
// Load more videos when approaching the end
|
|
159
|
-
if (currentIndex >= videos.length - LOAD_THRESHOLD && hasMore) {
|
|
160
|
-
loadMoreVideos();
|
|
161
|
-
}
|
|
162
|
-
}, [currentIndex, videos.length, hasMore]);
|
|
163
|
-
|
|
164
|
-
return (
|
|
165
|
-
<>
|
|
166
|
-
<ReactRiyils
|
|
167
|
-
videos={videos}
|
|
168
|
-
currentIndex={currentIndex}
|
|
169
|
-
onVideoClick={(index) => setShowViewer(true)}
|
|
170
|
-
onVideoChange={setCurrentIndex}
|
|
171
|
-
/>
|
|
84
|
+
### `<RiyilsViewer />`
|
|
172
85
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
)}
|
|
181
|
-
</>
|
|
182
|
-
);
|
|
183
|
-
}
|
|
184
|
-
```
|
|
86
|
+
| Prop | Type | Description |
|
|
87
|
+
|---------------------|----------|--------------------------------------------------|
|
|
88
|
+
| `videos` | array | List of video objects `{ id, videoUrl }` |
|
|
89
|
+
| `initialIndex` | number | Index to open the viewer at |
|
|
90
|
+
| `onClose` | func | Called when the viewer is closed |
|
|
91
|
+
| `onVideoChange` | func | Called when the active video changes |
|
|
92
|
+
| `translations` | object | (Optional) Custom UI text |
|
|
185
93
|
|
|
186
|
-
##
|
|
94
|
+
## Customization
|
|
187
95
|
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
import { useVideoControls } from 'react-riyils';
|
|
191
|
-
const { isPlaying, progress, play, pause, togglePlay, seek } = useVideoControls(videoRef.current, isActive);
|
|
96
|
+
- **Translations:** Pass a `translations` object to override default UI text.
|
|
97
|
+
- **Styling:** Use your own CSS or extend the included styles for custom look.
|
|
192
98
|
|
|
193
|
-
|
|
194
|
-
import { useSwiperControl } from 'react-riyils';
|
|
195
|
-
const { swiperRef, currentIndex, goToSlide, nextSlide, prevSlide } = useSwiperControl(0);
|
|
99
|
+
## License
|
|
196
100
|
|
|
197
|
-
|
|
198
|
-
import { useVideoPreload } from 'react-riyils';
|
|
199
|
-
useVideoPreload(videoRefs, activeIndex, preloadDistance);
|
|
200
|
-
```
|
|
101
|
+
MIT
|
|
201
102
|
|
|
202
|
-
##
|
|
103
|
+
## Credits
|
|
203
104
|
|
|
204
|
-
-
|
|
205
|
-
-
|
|
206
|
-
- **M** - Mute/Unmute
|
|
207
|
-
- **↑/↓** - Navigate videos
|
|
105
|
+
- Built with [React](https://reactjs.org/)
|
|
106
|
+
- Video samples from [W3Schools](https://www.w3schools.com/), [Google Sample Videos](https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/)
|
|
208
107
|
|
|
209
|
-
|
|
108
|
+
---
|
|
210
109
|
|
|
211
|
-
|
|
110
|
+
For more details, see the source code and demo.
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.react-riyils .swiper-slide{height:auto!important;opacity:.5!important;overflow:visible!important;transition:opacity .8s ease,transform .8s ease,width .8s ease!important;width:100px!important}.react-riyils .swiper-slide-active{opacity:1!important;width:220px!important}.react-riyils .swiper-wrapper{transition-timing-function:ease!important}@media (min-width:640px){.react-riyils .swiper-slide{opacity:.6!important;width:160px!important}.react-riyils .swiper-slide-active{max-width:none!important;opacity:1!important;width:280px!important}}@media (min-width:768px){.react-riyils .swiper-slide{opacity:.65!important;width:200px!important}.react-riyils .swiper-slide-active{opacity:1!important;width:340px!important}}@media (min-width:1024px){.react-riyils .swiper-slide{opacity:.7!important;width:220px!important}.react-riyils .swiper-slide-active{opacity:1!important;width:380px!important}}.react-riyils__slide-button{background:transparent;border:0;cursor:pointer;height:100%;margin:0;outline:none;padding:0;position:relative;transition:all .6s cubic-bezier(.4,0,.2,1);width:100%}.react-riyils__slide-button--inactive{opacity:1}.react-riyils__video-container{aspect-ratio:9/16;background:linear-gradient(135deg,#1e293b,#0f172a);border-radius:20px;height:100%;overflow:hidden;position:relative;transition:all .6s cubic-bezier(.4,0,.2,1);will-change:transform,box-shadow}.react-riyils__video-container--active{border-radius:24px;box-shadow:0 0 0 3px rgba(59,130,246,.5),0 0 20px rgba(59,130,246,.3),0 4px 12px -4px rgba(0,0,0,.2);transform:scale(.9);z-index:10}.react-riyils__video-container--inactive{border-radius:18px;box-shadow:0 4px 12px -4px rgba(0,0,0,.15);transform:scale(.75)}.react-riyils__video-container--inactive:before{background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.12));border-radius:inherit;content:"";inset:0;pointer-events:none;position:absolute;z-index:1}@media (min-width:768px){.react-riyils__video-container--active{border-radius:28px;box-shadow:0 0 0 4px rgba(59,130,246,.6),0 0 30px rgba(59,130,246,.4),0 6px 16px -6px rgba(0,0,0,.25);transform:scale(.9)}.react-riyils__video-container--inactive{border-radius:22px;box-shadow:0 5px 15px -5px rgba(0,0,0,.18);transform:scale(.72)}.react-riyils__video-container--inactive:hover{box-shadow:0 6px 18px -5px rgba(0,0,0,.2);transform:scale(.93)}.react-riyils__video-container--inactive:before{background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.1))}}.react-riyils__video{height:100%;object-fit:cover;transition:opacity .3s ease-out;width:100%}.react-riyils__loading{align-items:center;background:rgba(0,0,0,.2);display:flex;inset:0;justify-content:center;pointer-events:none;position:absolute;z-index:20}.react-riyils__spinner{animation:react-riyils-spin 1s linear infinite;border:3px solid hsla(0,0%,100%,.2);border-radius:50%;border-top-color:#fff;height:48px;width:48px}@keyframes react-riyils-spin{to{transform:rotate(1turn)}}.react-riyils__progress-container{backdrop-filter:blur(4px);background:hsla(0,0%,100%,.2);border-top-left-radius:inherit;border-top-right-radius:inherit;height:5px;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:20}.react-riyils__progress{appearance:none;background:transparent;border:none;height:100%;width:100%}.react-riyils__progress::-webkit-progress-bar{background:transparent}.react-riyils__progress::-webkit-progress-value{background:currentColor;box-shadow:0 0 8px currentColor;transition:width .15s linear}.react-riyils__progress::-moz-progress-bar{background:currentColor;box-shadow:0 0 8px currentColor;transition:width .15s linear}.react-riyils__overlay-gradient{background:linear-gradient(180deg,rgba(0,0,0,.08) 0,rgba(0,0,0,.15) 50%,rgba(0,0,0,.22));inset:0;position:absolute;transition:opacity .6s ease-out;z-index:2}.react-riyils__overlay-blur{background:rgba(0,0,0,.05);inset:0;position:absolute;transition:background .6s ease-out;z-index:2}.react-riyils__cta-container{background:linear-gradient(0deg,rgba(0,0,0,.95) 0,rgba(0,0,0,.75) 40%,transparent);border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;bottom:0;left:0;padding:40px 12px 12px;pointer-events:auto;position:absolute;right:0;will-change:transform;z-index:10}@media (min-width:768px){.react-riyils__cta-container{padding:50px 20px 20px}}.react-riyils__cta-button{align-items:center;background:transparent;border:0;cursor:pointer;display:flex;gap:8px;padding:0;transform-origin:left center;transition:all .4s cubic-bezier(.4,0,.2,1);will-change:transform}.react-riyils__cta-button:hover{gap:14px;transform:translateX(2px)}@media (min-width:768px){.react-riyils__cta-button{gap:12px}.react-riyils__cta-button:hover{gap:18px;transform:translateX(4px)}}.react-riyils__cta-badge{align-items:center;backdrop-filter:blur(16px);background:linear-gradient(135deg,hsla(0,0%,100%,.15),hsla(0,0%,100%,.08));border:1px solid hsla(0,0%,100%,.25);border-radius:9999px;box-shadow:0 4px 20px rgba(0,0,0,.3),inset 0 1px 0 hsla(0,0%,100%,.2);display:flex;gap:6px;padding:6px 12px;transition:all .4s cubic-bezier(.4,0,.2,1)}.react-riyils__cta-badge:hover{background:linear-gradient(135deg,hsla(0,0%,100%,.22),hsla(0,0%,100%,.12));border-color:hsla(0,0%,100%,.35);box-shadow:0 6px 25px rgba(0,0,0,.4),inset 0 1px 0 hsla(0,0%,100%,.3);transform:translateY(-2px)}@media (min-width:640px){.react-riyils__cta-badge{gap:8px;padding:8px 16px}}@media (min-width:768px){.react-riyils__cta-badge{gap:10px;padding:10px 20px}}.react-riyils__cta-icon{color:#fff;flex-shrink:0;height:10px;width:10px}@media (min-width:640px){.react-riyils__cta-icon{height:12px;width:12px}}@media (min-width:768px){.react-riyils__cta-icon{height:16px;width:16px}}.react-riyils__cta-text{color:#fff;font-size:10px;font-weight:600;letter-spacing:.05em;white-space:nowrap}@media (min-width:640px){.react-riyils__cta-text{font-size:12px}}@media (min-width:768px){.react-riyils__cta-text{font-size:14px}}.react-riyils__container{cursor:pointer;overflow:visible;padding:60px 0;position:relative;user-select:none}.react-riyils__container[data-height-mobile]{height:calc(var(--container-height-mobile)*1.08)}@media (min-width:768px){.react-riyils__container{padding:70px 0}.react-riyils__container[data-height-desktop]{height:calc(var(--container-height-desktop)*1.1)}}.react-riyils-viewer{background:#000;border:0;height:100%;inset:0;margin:0;max-height:none;max-width:none;padding:0;position:fixed;width:100%;z-index:50}.react-riyils-viewer__section{align-items:center;background:#000;display:flex;height:100%;justify-content:center;position:relative;width:100%}.react-riyils-viewer__interaction-area{background:transparent;border:0;cursor:default;inset:0;margin:0;padding:0;position:absolute}.react-riyils-viewer__video{height:auto;max-height:100%;max-width:100%;object-fit:contain;user-select:none;width:auto}.react-riyils-viewer__loading{align-items:center;display:flex;inset:0;justify-content:center;pointer-events:none;position:absolute}.react-riyils-viewer__loading-spinner{animation:react-riyils-spin 1s linear infinite;border:4px solid hsla(0,0%,100%,.2);border-radius:50%;border-top-color:#fff;height:64px;width:64px}.react-riyils-viewer__pause-indicator{align-items:center;display:flex;inset:0;justify-content:center;pointer-events:none;position:absolute}.react-riyils-viewer__pause-icon{align-items:center;background:rgba(0,0,0,.5);border-radius:50%;display:flex;height:80px;justify-content:center;width:80px}.react-riyils-viewer__pause-bars{border-left:12px solid transparent;border-right:12px solid transparent;height:40px;width:20px}.react-riyils-viewer__speed-indicator{pointer-events:none;position:absolute;right:32px;top:50%;transform:translateY(-50%)}.react-riyils-viewer__speed-badge{backdrop-filter:blur(4px);background:rgba(0,0,0,.6);border-radius:9999px;padding:8px 16px}.react-riyils-viewer__speed-text{color:#fff;font-size:18px;font-weight:700}.react-riyils-viewer__overlay{inset:0;pointer-events:none;position:absolute;z-index:50}.react-riyils-viewer__header{left:0;pointer-events:auto;position:absolute;right:0;top:0;z-index:50}.react-riyils-viewer__header-content{align-items:center;display:flex;justify-content:space-between;padding:16px}.react-riyils-viewer__progress-wrapper{flex:1;padding-right:16px}.react-riyils-viewer__progress-track{border-radius:9999px;height:2px;overflow:hidden}.react-riyils-viewer__progress-bar{height:100%;transition:all .1s linear}.react-riyils-viewer__close-button{backdrop-filter:blur(4px);background:rgba(0,0,0,.3);border:0;border-radius:9999px;color:#fff;cursor:pointer;flex-shrink:0;padding:8px;transition:background .3s}.react-riyils-viewer__close-button:hover{background:rgba(0,0,0,.5)}.react-riyils-viewer__close-icon{height:24px;width:24px}.react-riyils-viewer__swipe-tip{bottom:96px;left:50%;pointer-events:none;position:absolute;transform:translateX(-50%);z-index:40}.react-riyils-viewer__swipe-tip-content{align-items:center;backdrop-filter:blur(4px);background:rgba(0,0,0,.3);border-radius:9999px;display:flex;flex-direction:row;gap:16px;padding:12px 24px}.react-riyils-viewer__swipe-tip-text{color:hsla(0,0%,100%,.9);font-size:14px;font-weight:500}.react-riyils-viewer__swipe-tip-icon-wrapper{height:32px;position:relative;width:32px}.react-riyils-viewer__swipe-tip-icon{animation:react-riyils-bounce 1.5s infinite;height:32px;position:absolute;width:32px}.react-riyils-viewer__swipe-tip-icon--1{animation-delay:0ms;color:hsla(0,0%,100%,.9)}.react-riyils-viewer__swipe-tip-icon--2{animation-delay:.2s;color:hsla(0,0%,100%,.5);top:8px}.react-riyils-viewer__swipe-tip-icon--3{animation-delay:.4s;color:hsla(0,0%,100%,.2);top:16px}@keyframes react-riyils-bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:translateY(0)}}.react-riyils-viewer__mute-button-wrapper{bottom:24px;pointer-events:auto;position:absolute;right:24px;z-index:50}.react-riyils-viewer__mute-button{backdrop-filter:blur(4px);background:hsla(0,0%,100%,.1);border:0;border-radius:9999px;color:#fff;cursor:pointer;padding:12px;transition:background .3s}.react-riyils-viewer__mute-button:hover{background:hsla(0,0%,100%,.2)}.react-riyils-viewer__mute-icon{height:24px;width:24px}@media (min-width:640px){.react-riyils .swiper-slide{opacity:.65!important;width:140px!important}.react-riyils .swiper-slide-active{max-width:none!important;opacity:1!important;width:240px!important}}@media (min-width:768px){.react-riyils .swiper-slide{opacity:.7!important;width:190px!important}.react-riyils .swiper-slide-active{opacity:1!important;width:260px!important}}.react-riyils .swiper-button-next,.react-riyils .swiper-button-prev{display:none!important}@media (min-width:768px){.react-riyils .swiper-button-next,.react-riyils .swiper-button-prev{align-items:center!important;backdrop-filter:blur(24px)!important;background:linear-gradient(to bottom right,#fff,#fff,#f9fafb)!important;border:1px solid rgba(229,231,235,.6)!important;border-radius:9999px!important;box-shadow:0 8px 30px rgba(0,0,0,.12)!important;display:flex!important;height:48px!important;justify-content:center!important;transition:all .5s!important;width:48px!important}.react-riyils .swiper-button-next:hover,.react-riyils .swiper-button-prev:hover{background:linear-gradient(to bottom right,#fff,#fff)!important;box-shadow:0 20px 40px rgba(0,0,0,.18)!important;transform:scale(1.1)!important}.react-riyils .swiper-button-next:after,.react-riyils .swiper-button-prev:after{color:#374151!important;font-size:24px!important;font-weight:800!important}.react-riyils .swiper-button-prev{left:24px!important}.react-riyils .swiper-button-next{right:24px!important}}:root{--swiper-theme-color:#007aff}:host{display:block;margin-left:auto;margin-right:auto;position:relative;z-index:1}.swiper{display:block;list-style:none;margin-left:auto;margin-right:auto;overflow:hidden;padding:0;position:relative;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{box-sizing:content-box;display:flex;height:100%;position:relative;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);width:100%;z-index:1}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{display:block;flex-shrink:0;height:100%;position:relative;transition-property:transform;width:100%}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{backface-visibility:hidden;transform:translateZ(0)}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px;.swiper-cube-shadow,.swiper-slide{transform-style:preserve-3d}}.swiper-css-mode{>.swiper-wrapper{-ms-overflow-style:none;overflow:auto;scrollbar-width:none;&::-webkit-scrollbar{display:none}}>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}&.swiper-horizontal{>.swiper-wrapper{scroll-snap-type:x mandatory}}&.swiper-vertical{>.swiper-wrapper{scroll-snap-type:y mandatory}}&.swiper-free-mode{>.swiper-wrapper{scroll-snap-type:none}>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}}&.swiper-centered{>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}}&.swiper-centered.swiper-horizontal{>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}}&.swiper-centered.swiper-vertical{>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:var(--swiper-centered-offset-after);min-width:1px;width:100%}}}.swiper-3d{.swiper-slide-shadow,.swiper-slide-shadow-bottom,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-slide-shadow-left{background-image:linear-gradient(270deg,rgba(0,0,0,.5),transparent)}.swiper-slide-shadow-right{background-image:linear-gradient(90deg,rgba(0,0,0,.5),transparent)}.swiper-slide-shadow-top{background-image:linear-gradient(0deg,rgba(0,0,0,.5),transparent)}.swiper-slide-shadow-bottom{background-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent)}}.swiper-lazy-preloader{border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top:4px solid transparent;box-sizing:border-box;height:42px;left:50%;margin-left:-21px;margin-top:-21px;position:absolute;top:50%;transform-origin:50%;width:42px;z-index:10}.swiper-watch-progress .swiper-slide-visible,.swiper:not(.swiper-watch-progress){.swiper-lazy-preloader{animation:swiper-preloader-spin 1s linear infinite}}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{align-items:center;color:var(--swiper-navigation-color,var(--swiper-theme-color));cursor:pointer;display:flex;height:var(--swiper-navigation-size);justify-content:center;position:absolute;width:var(--swiper-navigation-size);z-index:10;&.swiper-button-disabled{cursor:auto;opacity:.35;pointer-events:none}&.swiper-button-hidden{cursor:auto;opacity:0;pointer-events:none}.swiper-navigation-disabled &{display:none!important}svg{fill:currentColor;height:100%;object-fit:contain;pointer-events:none;transform-origin:center;width:100%}}.swiper-button-lock{display:none}.swiper-button-next,.swiper-button-prev{margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto;.swiper-navigation-icon{transform:rotate(180deg)}}.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}.swiper-horizontal{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{margin-left:0;margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev,&~.swiper-button-next,.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{.swiper-navigation-icon{transform:rotate(180deg)}}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev{.swiper-navigation-icon{transform:rotate(0deg)}}}.swiper-vertical{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{left:var(--swiper-navigation-top-offset,50%);margin-left:calc(0px - var(--swiper-navigation-size)/2);margin-top:0;right:auto}.swiper-button-prev,~.swiper-button-prev{bottom:auto;top:var(--swiper-navigation-sides-offset,4px);.swiper-navigation-icon{transform:rotate(-90deg)}}.swiper-button-next,~.swiper-button-next{bottom:var(--swiper-navigation-sides-offset,4px);top:auto;.swiper-navigation-icon{transform:rotate(90deg)}}}
|
|
1
|
+
:root{--rr-slide-width-mobile:220px;--rr-slide-width-desktop:300px;--rr-slide-height-mobile:400px;--rr-slide-height-desktop:540px;--rr-primary:#3b82f6;--rr-transition-bezier:cubic-bezier(0.25,0.1,0.25,1);--rr-safe-bottom:env(safe-area-inset-bottom,20px)}.react-riyils__container{align-items:center;background:transparent;display:flex;height:auto;justify-content:center;max-width:100%;overflow:hidden;padding:80px 0 120px;position:relative;width:100%}.react-riyils{height:auto;overflow:visible!important;padding:0!important;width:100%;z-index:1}.react-riyils .swiper-wrapper{align-items:center;overflow:visible}.react-riyils .swiper-slide{align-items:center;background-position:50%;background-size:cover;display:flex;height:var(--rr-slide-height-mobile);justify-content:center;transform-style:preserve-3d;transition:all .3s ease;width:var(--rr-slide-width-mobile)}.react-riyils .swiper-slide-active{z-index:20}.react-riyils__card{-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#000;border-radius:24px;box-shadow:0 10px 20px rgba(0,0,0,.3);filter:brightness(.7);height:100%;overflow:hidden;position:relative;transform:translateZ(0);transition:filter .3s ease,box-shadow .3s ease,transform .3s ease;width:100%}.react-riyils__card.active{box-shadow:0 25px 50px -12px rgba(0,0,0,.6),0 0 0 1px hsla(0,0%,100%,.15);filter:brightness(1);transform:scale(1.05)}.react-riyils .swiper-slide-active .swiper-slide-shadow-coverflow,.react-riyils .swiper-slide-active .swiper-slide-shadow-left,.react-riyils .swiper-slide-active .swiper-slide-shadow-right{background:none!important;display:none!important;opacity:0!important}.swiper-slide-shadow-coverflow,.swiper-slide-shadow-left,.swiper-slide-shadow-right{background-image:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.6))!important;border-radius:24px!important;opacity:1!important}.react-riyils__video{display:block;height:100%;object-fit:cover;transform:translateZ(0);width:100%}.react-riyils__slide-button{all:unset;cursor:pointer;display:block;height:100%;position:relative;width:100%}.react-riyils__cta-container{bottom:24px;left:50%;opacity:0;pointer-events:none;position:absolute;transform:translateX(-50%) translateY(15px);transition:opacity .3s ease,transform .3s ease;width:max-content;z-index:30}.react-riyils__card.active .react-riyils__cta-container{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}.react-riyils__cta-button{align-items:center;backdrop-filter:blur(16px);background:hsla(0,0%,8%,.8);border:1px solid hsla(0,0%,100%,.2);border-radius:9999px;box-shadow:0 10px 25px rgba(0,0,0,.4);color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:600;gap:8px;padding:12px 24px;transition:all .2s ease}.react-riyils__cta-button:hover{background:rgba(40,40,40,.9);border-color:hsla(0,0%,100%,.4);transform:scale(1.05)}@media (min-width:768px){.react-riyils__container{padding:100px 0 140px}.react-riyils .swiper-slide{height:var(--rr-slide-height-desktop);width:var(--rr-slide-width-desktop)}}.react-riyils-viewer{background:#000;background-color:#000;display:flex;flex-direction:column;height:100%;inset:0;left:0;overflow:hidden;position:fixed;top:0;touch-action:none;user-select:none;-webkit-user-select:none;width:100%;z-index:99999}.react-riyils-viewer__header{background:linear-gradient(180deg,rgba(0,0,0,.6) 0,transparent);left:0;padding:env(safe-area-inset-top,16px) 16px 16px;position:absolute;right:0;top:0;z-index:60}.react-riyils-viewer__progress-track{background:hsla(0,0%,100%,.2);border-radius:2px;height:2px;margin-bottom:0;overflow:hidden;width:100%}.react-riyils-viewer__progress-bar{background:#fff;border-radius:2px;height:100%;transition:width .1s linear}.react-riyils-viewer__close-button{align-items:center;backdrop-filter:blur(4px);background:hsla(0,0%,100%,.1);border:none;border-radius:50%;cursor:pointer;display:flex;height:36px;justify-content:center;position:absolute;right:24px;top:env(safe-area-inset-top,24px);transition:background .2s;width:36px}.react-riyils-viewer__close-button:hover{background:hsla(0,0%,100%,.2)}.react-riyils-viewer__gradient-top{background:linear-gradient(180deg,rgba(0,0,0,.7) 0,transparent);height:150px;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:40}.react-riyils-viewer__gradient-bottom{background:linear-gradient(0deg,rgba(0,0,0,.9) 0,rgba(0,0,0,.4) 50%,transparent);bottom:0;display:flex;flex-direction:column;justify-content:flex-end;left:0;padding:100px 16px env(safe-area-inset-bottom,20px);pointer-events:none;position:absolute;right:0;z-index:40}.react-riyils-viewer__btn{align-items:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:hsla(0,0%,100%,.15);border:1px solid hsla(0,0%,100%,.1);border-radius:50%;color:hsla(0,0%,100%,.9);cursor:pointer;display:flex;justify-content:center;pointer-events:auto;transition:all .2s ease}.react-riyils-viewer__btn:active{background:hsla(0,0%,100%,.25);transform:scale(.92)}.react-riyils-viewer__btn:hover{background:hsla(0,0%,100%,.2);color:#fff}.react-riyils-viewer__close-container{pointer-events:auto;position:absolute;right:24px;top:24px;top:env(safe-area-inset-top,24px);z-index:50}.react-riyils-viewer__btn-close{height:44px;width:44px}.react-riyils-viewer__controls-row{align-items:flex-end;display:flex;justify-content:flex-end;margin-bottom:16px;pointer-events:auto;width:100%}.react-riyils-viewer__btn-mute{height:48px;width:48px}.react-riyils-viewer__progress-container{background:hsla(0,0%,100%,.25);border-radius:4px;cursor:pointer;height:4px;margin-bottom:12px;overflow:hidden;pointer-events:auto;transition:height .3s ease;width:100%}.react-riyils-viewer__progress-container:hover{height:8px}.react-riyils-viewer__progress-fill{border-radius:4px;box-shadow:0 0 10px hsla(0,0%,100%,.7);height:100%;transition:width .1s linear}.react-riyils-viewer__gesture-grid{display:grid;grid-template-columns:25% 50% 25%;height:100%;inset:0;position:absolute;width:100%;z-index:30}.react-riyils-viewer__gesture-zone{-webkit-tap-highlight-color:transparent;appearance:none;-webkit-appearance:none;background:transparent;border:none;cursor:pointer;height:100%;margin:0;outline:none;padding:0;width:100%}.react-riyils-viewer__gesture-zone:active{background:hsla(0,0%,100%,.05)}@keyframes rr-fade-zoom-in{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes rr-fade-zoom-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.5)}}@keyframes rr-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.react-riyils-viewer__loader{animation:rr-spin 1s linear infinite;border:3px solid hsla(0,0%,100%,.2);border-radius:50%;border-top-color:#fff;height:32px;width:32px}.react-riyils-viewer__feedback-center{align-items:center;display:flex;inset:0;justify-content:center;pointer-events:none;position:absolute;z-index:35}.react-riyils-viewer__feedback-icon{align-items:center;backdrop-filter:blur(4px);background:rgba(0,0,0,.5);border-radius:50%;color:#fff;display:flex;justify-content:center;padding:20px}.react-riyils-viewer__feedback-icon.animate-in{animation:rr-fade-zoom-in .2s cubic-bezier(.175,.885,.32,1.275) forwards}.react-riyils-viewer__feedback-icon.animate-out{animation:rr-fade-zoom-out .5s ease forwards}.react-riyils-viewer__feedback-speed{align-items:center;backdrop-filter:blur(8px);background:rgba(0,0,0,.6);border:1px solid hsla(0,0%,100%,.1);border-radius:20px;color:#fff;display:flex;font-size:13px;font-weight:700;gap:6px;left:50%;opacity:0;padding:8px 16px;pointer-events:none;position:absolute;top:80px;transform:translateX(-50%);transition:opacity .3s,transform .3s;z-index:35}.react-riyils-viewer__feedback-speed.visible{opacity:1;transform:translateX(-50%) translateY(0)}.react-riyils-viewer__feedback-seek{align-items:center;display:flex;inset:0;pointer-events:none;position:absolute;z-index:35}.react-riyils-viewer__feedback-seek.left{justify-content:flex-start;padding-left:15%}.react-riyils-viewer__feedback-seek.right{justify-content:flex-end;padding-right:15%}.react-riyils-viewer__seek-circle{align-items:center;animation:rr-fade-zoom-in .2s cubic-bezier(.175,.885,.32,1.275) forwards;backdrop-filter:blur(8px);background:rgba(0,0,0,.6);border-radius:50%;color:#fff;display:flex;flex-direction:column;height:80px;justify-content:center;width:80px}.react-riyils-viewer__seek-text{font-size:11px;font-weight:700;margin-top:4px}.react-riyils-viewer__video{display:block;height:100%;object-fit:contain;width:100%}.react-riyils-viewer__slide{align-items:center;background:#000;display:flex;height:100%;justify-content:center;position:relative;width:100%}:root{--swiper-theme-color:#007aff}:host{display:block;margin-left:auto;margin-right:auto;position:relative;z-index:1}.swiper{display:block;list-style:none;margin-left:auto;margin-right:auto;overflow:hidden;padding:0;position:relative;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{box-sizing:content-box;display:flex;height:100%;position:relative;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);width:100%;z-index:1}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{display:block;flex-shrink:0;height:100%;position:relative;transition-property:transform;width:100%}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{backface-visibility:hidden;transform:translateZ(0)}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px;.swiper-cube-shadow,.swiper-slide{transform-style:preserve-3d}}.swiper-css-mode{>.swiper-wrapper{-ms-overflow-style:none;overflow:auto;scrollbar-width:none;&::-webkit-scrollbar{display:none}}>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}&.swiper-horizontal{>.swiper-wrapper{scroll-snap-type:x mandatory}}&.swiper-vertical{>.swiper-wrapper{scroll-snap-type:y mandatory}}&.swiper-free-mode{>.swiper-wrapper{scroll-snap-type:none}>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}}&.swiper-centered{>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}}&.swiper-centered.swiper-horizontal{>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}}&.swiper-centered.swiper-vertical{>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:var(--swiper-centered-offset-after);min-width:1px;width:100%}}}.swiper-3d{.swiper-slide-shadow,.swiper-slide-shadow-bottom,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-slide-shadow-left{background-image:linear-gradient(270deg,rgba(0,0,0,.5),transparent)}.swiper-slide-shadow-right{background-image:linear-gradient(90deg,rgba(0,0,0,.5),transparent)}.swiper-slide-shadow-top{background-image:linear-gradient(0deg,rgba(0,0,0,.5),transparent)}.swiper-slide-shadow-bottom{background-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent)}}.swiper-lazy-preloader{border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top:4px solid transparent;box-sizing:border-box;height:42px;left:50%;margin-left:-21px;margin-top:-21px;position:absolute;top:50%;transform-origin:50%;width:42px;z-index:10}.swiper-watch-progress .swiper-slide-visible,.swiper:not(.swiper-watch-progress){.swiper-lazy-preloader{animation:swiper-preloader-spin 1s linear infinite}}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode{.swiper-wrapper:after{content:"";left:0;pointer-events:none;position:absolute;top:0}}.swiper-virtual.swiper-css-mode.swiper-horizontal{.swiper-wrapper:after{height:1px;width:var(--swiper-virtual-size)}}.swiper-virtual.swiper-css-mode.swiper-vertical{.swiper-wrapper:after{height:var(--swiper-virtual-size);width:1px}}
|
package/dist/index.esm.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.react-riyils .swiper-slide{height:auto!important;opacity:.5!important;overflow:visible!important;transition:opacity .8s ease,transform .8s ease,width .8s ease!important;width:100px!important}.react-riyils .swiper-slide-active{opacity:1!important;width:220px!important}.react-riyils .swiper-wrapper{transition-timing-function:ease!important}@media (min-width:640px){.react-riyils .swiper-slide{opacity:.6!important;width:160px!important}.react-riyils .swiper-slide-active{max-width:none!important;opacity:1!important;width:280px!important}}@media (min-width:768px){.react-riyils .swiper-slide{opacity:.65!important;width:200px!important}.react-riyils .swiper-slide-active{opacity:1!important;width:340px!important}}@media (min-width:1024px){.react-riyils .swiper-slide{opacity:.7!important;width:220px!important}.react-riyils .swiper-slide-active{opacity:1!important;width:380px!important}}.react-riyils__slide-button{background:transparent;border:0;cursor:pointer;height:100%;margin:0;outline:none;padding:0;position:relative;transition:all .6s cubic-bezier(.4,0,.2,1);width:100%}.react-riyils__slide-button--inactive{opacity:1}.react-riyils__video-container{aspect-ratio:9/16;background:linear-gradient(135deg,#1e293b,#0f172a);border-radius:20px;height:100%;overflow:hidden;position:relative;transition:all .6s cubic-bezier(.4,0,.2,1);will-change:transform,box-shadow}.react-riyils__video-container--active{border-radius:24px;box-shadow:0 0 0 3px rgba(59,130,246,.5),0 0 20px rgba(59,130,246,.3),0 4px 12px -4px rgba(0,0,0,.2);transform:scale(.9);z-index:10}.react-riyils__video-container--inactive{border-radius:18px;box-shadow:0 4px 12px -4px rgba(0,0,0,.15);transform:scale(.75)}.react-riyils__video-container--inactive:before{background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.12));border-radius:inherit;content:"";inset:0;pointer-events:none;position:absolute;z-index:1}@media (min-width:768px){.react-riyils__video-container--active{border-radius:28px;box-shadow:0 0 0 4px rgba(59,130,246,.6),0 0 30px rgba(59,130,246,.4),0 6px 16px -6px rgba(0,0,0,.25);transform:scale(.9)}.react-riyils__video-container--inactive{border-radius:22px;box-shadow:0 5px 15px -5px rgba(0,0,0,.18);transform:scale(.72)}.react-riyils__video-container--inactive:hover{box-shadow:0 6px 18px -5px rgba(0,0,0,.2);transform:scale(.93)}.react-riyils__video-container--inactive:before{background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.1))}}.react-riyils__video{height:100%;object-fit:cover;transition:opacity .3s ease-out;width:100%}.react-riyils__loading{align-items:center;background:rgba(0,0,0,.2);display:flex;inset:0;justify-content:center;pointer-events:none;position:absolute;z-index:20}.react-riyils__spinner{animation:react-riyils-spin 1s linear infinite;border:3px solid hsla(0,0%,100%,.2);border-radius:50%;border-top-color:#fff;height:48px;width:48px}@keyframes react-riyils-spin{to{transform:rotate(1turn)}}.react-riyils__progress-container{backdrop-filter:blur(4px);background:hsla(0,0%,100%,.2);border-top-left-radius:inherit;border-top-right-radius:inherit;height:5px;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:20}.react-riyils__progress{appearance:none;background:transparent;border:none;height:100%;width:100%}.react-riyils__progress::-webkit-progress-bar{background:transparent}.react-riyils__progress::-webkit-progress-value{background:currentColor;box-shadow:0 0 8px currentColor;transition:width .15s linear}.react-riyils__progress::-moz-progress-bar{background:currentColor;box-shadow:0 0 8px currentColor;transition:width .15s linear}.react-riyils__overlay-gradient{background:linear-gradient(180deg,rgba(0,0,0,.08) 0,rgba(0,0,0,.15) 50%,rgba(0,0,0,.22));inset:0;position:absolute;transition:opacity .6s ease-out;z-index:2}.react-riyils__overlay-blur{background:rgba(0,0,0,.05);inset:0;position:absolute;transition:background .6s ease-out;z-index:2}.react-riyils__cta-container{background:linear-gradient(0deg,rgba(0,0,0,.95) 0,rgba(0,0,0,.75) 40%,transparent);border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;bottom:0;left:0;padding:40px 12px 12px;pointer-events:auto;position:absolute;right:0;will-change:transform;z-index:10}@media (min-width:768px){.react-riyils__cta-container{padding:50px 20px 20px}}.react-riyils__cta-button{align-items:center;background:transparent;border:0;cursor:pointer;display:flex;gap:8px;padding:0;transform-origin:left center;transition:all .4s cubic-bezier(.4,0,.2,1);will-change:transform}.react-riyils__cta-button:hover{gap:14px;transform:translateX(2px)}@media (min-width:768px){.react-riyils__cta-button{gap:12px}.react-riyils__cta-button:hover{gap:18px;transform:translateX(4px)}}.react-riyils__cta-badge{align-items:center;backdrop-filter:blur(16px);background:linear-gradient(135deg,hsla(0,0%,100%,.15),hsla(0,0%,100%,.08));border:1px solid hsla(0,0%,100%,.25);border-radius:9999px;box-shadow:0 4px 20px rgba(0,0,0,.3),inset 0 1px 0 hsla(0,0%,100%,.2);display:flex;gap:6px;padding:6px 12px;transition:all .4s cubic-bezier(.4,0,.2,1)}.react-riyils__cta-badge:hover{background:linear-gradient(135deg,hsla(0,0%,100%,.22),hsla(0,0%,100%,.12));border-color:hsla(0,0%,100%,.35);box-shadow:0 6px 25px rgba(0,0,0,.4),inset 0 1px 0 hsla(0,0%,100%,.3);transform:translateY(-2px)}@media (min-width:640px){.react-riyils__cta-badge{gap:8px;padding:8px 16px}}@media (min-width:768px){.react-riyils__cta-badge{gap:10px;padding:10px 20px}}.react-riyils__cta-icon{color:#fff;flex-shrink:0;height:10px;width:10px}@media (min-width:640px){.react-riyils__cta-icon{height:12px;width:12px}}@media (min-width:768px){.react-riyils__cta-icon{height:16px;width:16px}}.react-riyils__cta-text{color:#fff;font-size:10px;font-weight:600;letter-spacing:.05em;white-space:nowrap}@media (min-width:640px){.react-riyils__cta-text{font-size:12px}}@media (min-width:768px){.react-riyils__cta-text{font-size:14px}}.react-riyils__container{cursor:pointer;overflow:visible;padding:60px 0;position:relative;user-select:none}.react-riyils__container[data-height-mobile]{height:calc(var(--container-height-mobile)*1.08)}@media (min-width:768px){.react-riyils__container{padding:70px 0}.react-riyils__container[data-height-desktop]{height:calc(var(--container-height-desktop)*1.1)}}.react-riyils-viewer{background:#000;border:0;height:100%;inset:0;margin:0;max-height:none;max-width:none;padding:0;position:fixed;width:100%;z-index:50}.react-riyils-viewer__section{align-items:center;background:#000;display:flex;height:100%;justify-content:center;position:relative;width:100%}.react-riyils-viewer__interaction-area{background:transparent;border:0;cursor:default;inset:0;margin:0;padding:0;position:absolute}.react-riyils-viewer__video{height:auto;max-height:100%;max-width:100%;object-fit:contain;user-select:none;width:auto}.react-riyils-viewer__loading{align-items:center;display:flex;inset:0;justify-content:center;pointer-events:none;position:absolute}.react-riyils-viewer__loading-spinner{animation:react-riyils-spin 1s linear infinite;border:4px solid hsla(0,0%,100%,.2);border-radius:50%;border-top-color:#fff;height:64px;width:64px}.react-riyils-viewer__pause-indicator{align-items:center;display:flex;inset:0;justify-content:center;pointer-events:none;position:absolute}.react-riyils-viewer__pause-icon{align-items:center;background:rgba(0,0,0,.5);border-radius:50%;display:flex;height:80px;justify-content:center;width:80px}.react-riyils-viewer__pause-bars{border-left:12px solid transparent;border-right:12px solid transparent;height:40px;width:20px}.react-riyils-viewer__speed-indicator{pointer-events:none;position:absolute;right:32px;top:50%;transform:translateY(-50%)}.react-riyils-viewer__speed-badge{backdrop-filter:blur(4px);background:rgba(0,0,0,.6);border-radius:9999px;padding:8px 16px}.react-riyils-viewer__speed-text{color:#fff;font-size:18px;font-weight:700}.react-riyils-viewer__overlay{inset:0;pointer-events:none;position:absolute;z-index:50}.react-riyils-viewer__header{left:0;pointer-events:auto;position:absolute;right:0;top:0;z-index:50}.react-riyils-viewer__header-content{align-items:center;display:flex;justify-content:space-between;padding:16px}.react-riyils-viewer__progress-wrapper{flex:1;padding-right:16px}.react-riyils-viewer__progress-track{border-radius:9999px;height:2px;overflow:hidden}.react-riyils-viewer__progress-bar{height:100%;transition:all .1s linear}.react-riyils-viewer__close-button{backdrop-filter:blur(4px);background:rgba(0,0,0,.3);border:0;border-radius:9999px;color:#fff;cursor:pointer;flex-shrink:0;padding:8px;transition:background .3s}.react-riyils-viewer__close-button:hover{background:rgba(0,0,0,.5)}.react-riyils-viewer__close-icon{height:24px;width:24px}.react-riyils-viewer__swipe-tip{bottom:96px;left:50%;pointer-events:none;position:absolute;transform:translateX(-50%);z-index:40}.react-riyils-viewer__swipe-tip-content{align-items:center;backdrop-filter:blur(4px);background:rgba(0,0,0,.3);border-radius:9999px;display:flex;flex-direction:row;gap:16px;padding:12px 24px}.react-riyils-viewer__swipe-tip-text{color:hsla(0,0%,100%,.9);font-size:14px;font-weight:500}.react-riyils-viewer__swipe-tip-icon-wrapper{height:32px;position:relative;width:32px}.react-riyils-viewer__swipe-tip-icon{animation:react-riyils-bounce 1.5s infinite;height:32px;position:absolute;width:32px}.react-riyils-viewer__swipe-tip-icon--1{animation-delay:0ms;color:hsla(0,0%,100%,.9)}.react-riyils-viewer__swipe-tip-icon--2{animation-delay:.2s;color:hsla(0,0%,100%,.5);top:8px}.react-riyils-viewer__swipe-tip-icon--3{animation-delay:.4s;color:hsla(0,0%,100%,.2);top:16px}@keyframes react-riyils-bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:translateY(0)}}.react-riyils-viewer__mute-button-wrapper{bottom:24px;pointer-events:auto;position:absolute;right:24px;z-index:50}.react-riyils-viewer__mute-button{backdrop-filter:blur(4px);background:hsla(0,0%,100%,.1);border:0;border-radius:9999px;color:#fff;cursor:pointer;padding:12px;transition:background .3s}.react-riyils-viewer__mute-button:hover{background:hsla(0,0%,100%,.2)}.react-riyils-viewer__mute-icon{height:24px;width:24px}@media (min-width:640px){.react-riyils .swiper-slide{opacity:.65!important;width:140px!important}.react-riyils .swiper-slide-active{max-width:none!important;opacity:1!important;width:240px!important}}@media (min-width:768px){.react-riyils .swiper-slide{opacity:.7!important;width:190px!important}.react-riyils .swiper-slide-active{opacity:1!important;width:260px!important}}.react-riyils .swiper-button-next,.react-riyils .swiper-button-prev{display:none!important}@media (min-width:768px){.react-riyils .swiper-button-next,.react-riyils .swiper-button-prev{align-items:center!important;backdrop-filter:blur(24px)!important;background:linear-gradient(to bottom right,#fff,#fff,#f9fafb)!important;border:1px solid rgba(229,231,235,.6)!important;border-radius:9999px!important;box-shadow:0 8px 30px rgba(0,0,0,.12)!important;display:flex!important;height:48px!important;justify-content:center!important;transition:all .5s!important;width:48px!important}.react-riyils .swiper-button-next:hover,.react-riyils .swiper-button-prev:hover{background:linear-gradient(to bottom right,#fff,#fff)!important;box-shadow:0 20px 40px rgba(0,0,0,.18)!important;transform:scale(1.1)!important}.react-riyils .swiper-button-next:after,.react-riyils .swiper-button-prev:after{color:#374151!important;font-size:24px!important;font-weight:800!important}.react-riyils .swiper-button-prev{left:24px!important}.react-riyils .swiper-button-next{right:24px!important}}:root{--swiper-theme-color:#007aff}:host{display:block;margin-left:auto;margin-right:auto;position:relative;z-index:1}.swiper{display:block;list-style:none;margin-left:auto;margin-right:auto;overflow:hidden;padding:0;position:relative;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{box-sizing:content-box;display:flex;height:100%;position:relative;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);width:100%;z-index:1}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{display:block;flex-shrink:0;height:100%;position:relative;transition-property:transform;width:100%}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{backface-visibility:hidden;transform:translateZ(0)}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px;.swiper-cube-shadow,.swiper-slide{transform-style:preserve-3d}}.swiper-css-mode{>.swiper-wrapper{-ms-overflow-style:none;overflow:auto;scrollbar-width:none;&::-webkit-scrollbar{display:none}}>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}&.swiper-horizontal{>.swiper-wrapper{scroll-snap-type:x mandatory}}&.swiper-vertical{>.swiper-wrapper{scroll-snap-type:y mandatory}}&.swiper-free-mode{>.swiper-wrapper{scroll-snap-type:none}>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}}&.swiper-centered{>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}}&.swiper-centered.swiper-horizontal{>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}}&.swiper-centered.swiper-vertical{>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:var(--swiper-centered-offset-after);min-width:1px;width:100%}}}.swiper-3d{.swiper-slide-shadow,.swiper-slide-shadow-bottom,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-slide-shadow-left{background-image:linear-gradient(270deg,rgba(0,0,0,.5),transparent)}.swiper-slide-shadow-right{background-image:linear-gradient(90deg,rgba(0,0,0,.5),transparent)}.swiper-slide-shadow-top{background-image:linear-gradient(0deg,rgba(0,0,0,.5),transparent)}.swiper-slide-shadow-bottom{background-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent)}}.swiper-lazy-preloader{border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top:4px solid transparent;box-sizing:border-box;height:42px;left:50%;margin-left:-21px;margin-top:-21px;position:absolute;top:50%;transform-origin:50%;width:42px;z-index:10}.swiper-watch-progress .swiper-slide-visible,.swiper:not(.swiper-watch-progress){.swiper-lazy-preloader{animation:swiper-preloader-spin 1s linear infinite}}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{align-items:center;color:var(--swiper-navigation-color,var(--swiper-theme-color));cursor:pointer;display:flex;height:var(--swiper-navigation-size);justify-content:center;position:absolute;width:var(--swiper-navigation-size);z-index:10;&.swiper-button-disabled{cursor:auto;opacity:.35;pointer-events:none}&.swiper-button-hidden{cursor:auto;opacity:0;pointer-events:none}.swiper-navigation-disabled &{display:none!important}svg{fill:currentColor;height:100%;object-fit:contain;pointer-events:none;transform-origin:center;width:100%}}.swiper-button-lock{display:none}.swiper-button-next,.swiper-button-prev{margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto;.swiper-navigation-icon{transform:rotate(180deg)}}.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}.swiper-horizontal{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{margin-left:0;margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev,&~.swiper-button-next,.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{.swiper-navigation-icon{transform:rotate(180deg)}}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev{.swiper-navigation-icon{transform:rotate(0deg)}}}.swiper-vertical{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{left:var(--swiper-navigation-top-offset,50%);margin-left:calc(0px - var(--swiper-navigation-size)/2);margin-top:0;right:auto}.swiper-button-prev,~.swiper-button-prev{bottom:auto;top:var(--swiper-navigation-sides-offset,4px);.swiper-navigation-icon{transform:rotate(-90deg)}}.swiper-button-next,~.swiper-button-next{bottom:var(--swiper-navigation-sides-offset,4px);top:auto;.swiper-navigation-icon{transform:rotate(90deg)}}}
|
|
1
|
+
:root{--rr-slide-width-mobile:220px;--rr-slide-width-desktop:300px;--rr-slide-height-mobile:400px;--rr-slide-height-desktop:540px;--rr-primary:#3b82f6;--rr-transition-bezier:cubic-bezier(0.25,0.1,0.25,1);--rr-safe-bottom:env(safe-area-inset-bottom,20px)}.react-riyils__container{align-items:center;background:transparent;display:flex;height:auto;justify-content:center;max-width:100%;overflow:hidden;padding:80px 0 120px;position:relative;width:100%}.react-riyils{height:auto;overflow:visible!important;padding:0!important;width:100%;z-index:1}.react-riyils .swiper-wrapper{align-items:center;overflow:visible}.react-riyils .swiper-slide{align-items:center;background-position:50%;background-size:cover;display:flex;height:var(--rr-slide-height-mobile);justify-content:center;transform-style:preserve-3d;transition:all .3s ease;width:var(--rr-slide-width-mobile)}.react-riyils .swiper-slide-active{z-index:20}.react-riyils__card{-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#000;border-radius:24px;box-shadow:0 10px 20px rgba(0,0,0,.3);filter:brightness(.7);height:100%;overflow:hidden;position:relative;transform:translateZ(0);transition:filter .3s ease,box-shadow .3s ease,transform .3s ease;width:100%}.react-riyils__card.active{box-shadow:0 25px 50px -12px rgba(0,0,0,.6),0 0 0 1px hsla(0,0%,100%,.15);filter:brightness(1);transform:scale(1.05)}.react-riyils .swiper-slide-active .swiper-slide-shadow-coverflow,.react-riyils .swiper-slide-active .swiper-slide-shadow-left,.react-riyils .swiper-slide-active .swiper-slide-shadow-right{background:none!important;display:none!important;opacity:0!important}.swiper-slide-shadow-coverflow,.swiper-slide-shadow-left,.swiper-slide-shadow-right{background-image:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.6))!important;border-radius:24px!important;opacity:1!important}.react-riyils__video{display:block;height:100%;object-fit:cover;transform:translateZ(0);width:100%}.react-riyils__slide-button{all:unset;cursor:pointer;display:block;height:100%;position:relative;width:100%}.react-riyils__cta-container{bottom:24px;left:50%;opacity:0;pointer-events:none;position:absolute;transform:translateX(-50%) translateY(15px);transition:opacity .3s ease,transform .3s ease;width:max-content;z-index:30}.react-riyils__card.active .react-riyils__cta-container{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}.react-riyils__cta-button{align-items:center;backdrop-filter:blur(16px);background:hsla(0,0%,8%,.8);border:1px solid hsla(0,0%,100%,.2);border-radius:9999px;box-shadow:0 10px 25px rgba(0,0,0,.4);color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:600;gap:8px;padding:12px 24px;transition:all .2s ease}.react-riyils__cta-button:hover{background:rgba(40,40,40,.9);border-color:hsla(0,0%,100%,.4);transform:scale(1.05)}@media (min-width:768px){.react-riyils__container{padding:100px 0 140px}.react-riyils .swiper-slide{height:var(--rr-slide-height-desktop);width:var(--rr-slide-width-desktop)}}.react-riyils-viewer{background:#000;background-color:#000;display:flex;flex-direction:column;height:100%;inset:0;left:0;overflow:hidden;position:fixed;top:0;touch-action:none;user-select:none;-webkit-user-select:none;width:100%;z-index:99999}.react-riyils-viewer__header{background:linear-gradient(180deg,rgba(0,0,0,.6) 0,transparent);left:0;padding:env(safe-area-inset-top,16px) 16px 16px;position:absolute;right:0;top:0;z-index:60}.react-riyils-viewer__progress-track{background:hsla(0,0%,100%,.2);border-radius:2px;height:2px;margin-bottom:0;overflow:hidden;width:100%}.react-riyils-viewer__progress-bar{background:#fff;border-radius:2px;height:100%;transition:width .1s linear}.react-riyils-viewer__close-button{align-items:center;backdrop-filter:blur(4px);background:hsla(0,0%,100%,.1);border:none;border-radius:50%;cursor:pointer;display:flex;height:36px;justify-content:center;position:absolute;right:24px;top:env(safe-area-inset-top,24px);transition:background .2s;width:36px}.react-riyils-viewer__close-button:hover{background:hsla(0,0%,100%,.2)}.react-riyils-viewer__gradient-top{background:linear-gradient(180deg,rgba(0,0,0,.7) 0,transparent);height:150px;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:40}.react-riyils-viewer__gradient-bottom{background:linear-gradient(0deg,rgba(0,0,0,.9) 0,rgba(0,0,0,.4) 50%,transparent);bottom:0;display:flex;flex-direction:column;justify-content:flex-end;left:0;padding:100px 16px env(safe-area-inset-bottom,20px);pointer-events:none;position:absolute;right:0;z-index:40}.react-riyils-viewer__btn{align-items:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:hsla(0,0%,100%,.15);border:1px solid hsla(0,0%,100%,.1);border-radius:50%;color:hsla(0,0%,100%,.9);cursor:pointer;display:flex;justify-content:center;pointer-events:auto;transition:all .2s ease}.react-riyils-viewer__btn:active{background:hsla(0,0%,100%,.25);transform:scale(.92)}.react-riyils-viewer__btn:hover{background:hsla(0,0%,100%,.2);color:#fff}.react-riyils-viewer__close-container{pointer-events:auto;position:absolute;right:24px;top:24px;top:env(safe-area-inset-top,24px);z-index:50}.react-riyils-viewer__btn-close{height:44px;width:44px}.react-riyils-viewer__controls-row{align-items:flex-end;display:flex;justify-content:flex-end;margin-bottom:16px;pointer-events:auto;width:100%}.react-riyils-viewer__btn-mute{height:48px;width:48px}.react-riyils-viewer__progress-container{background:hsla(0,0%,100%,.25);border-radius:4px;cursor:pointer;height:4px;margin-bottom:12px;overflow:hidden;pointer-events:auto;transition:height .3s ease;width:100%}.react-riyils-viewer__progress-container:hover{height:8px}.react-riyils-viewer__progress-fill{border-radius:4px;box-shadow:0 0 10px hsla(0,0%,100%,.7);height:100%;transition:width .1s linear}.react-riyils-viewer__gesture-grid{display:grid;grid-template-columns:25% 50% 25%;height:100%;inset:0;position:absolute;width:100%;z-index:30}.react-riyils-viewer__gesture-zone{-webkit-tap-highlight-color:transparent;appearance:none;-webkit-appearance:none;background:transparent;border:none;cursor:pointer;height:100%;margin:0;outline:none;padding:0;width:100%}.react-riyils-viewer__gesture-zone:active{background:hsla(0,0%,100%,.05)}@keyframes rr-fade-zoom-in{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes rr-fade-zoom-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.5)}}@keyframes rr-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.react-riyils-viewer__loader{animation:rr-spin 1s linear infinite;border:3px solid hsla(0,0%,100%,.2);border-radius:50%;border-top-color:#fff;height:32px;width:32px}.react-riyils-viewer__feedback-center{align-items:center;display:flex;inset:0;justify-content:center;pointer-events:none;position:absolute;z-index:35}.react-riyils-viewer__feedback-icon{align-items:center;backdrop-filter:blur(4px);background:rgba(0,0,0,.5);border-radius:50%;color:#fff;display:flex;justify-content:center;padding:20px}.react-riyils-viewer__feedback-icon.animate-in{animation:rr-fade-zoom-in .2s cubic-bezier(.175,.885,.32,1.275) forwards}.react-riyils-viewer__feedback-icon.animate-out{animation:rr-fade-zoom-out .5s ease forwards}.react-riyils-viewer__feedback-speed{align-items:center;backdrop-filter:blur(8px);background:rgba(0,0,0,.6);border:1px solid hsla(0,0%,100%,.1);border-radius:20px;color:#fff;display:flex;font-size:13px;font-weight:700;gap:6px;left:50%;opacity:0;padding:8px 16px;pointer-events:none;position:absolute;top:80px;transform:translateX(-50%);transition:opacity .3s,transform .3s;z-index:35}.react-riyils-viewer__feedback-speed.visible{opacity:1;transform:translateX(-50%) translateY(0)}.react-riyils-viewer__feedback-seek{align-items:center;display:flex;inset:0;pointer-events:none;position:absolute;z-index:35}.react-riyils-viewer__feedback-seek.left{justify-content:flex-start;padding-left:15%}.react-riyils-viewer__feedback-seek.right{justify-content:flex-end;padding-right:15%}.react-riyils-viewer__seek-circle{align-items:center;animation:rr-fade-zoom-in .2s cubic-bezier(.175,.885,.32,1.275) forwards;backdrop-filter:blur(8px);background:rgba(0,0,0,.6);border-radius:50%;color:#fff;display:flex;flex-direction:column;height:80px;justify-content:center;width:80px}.react-riyils-viewer__seek-text{font-size:11px;font-weight:700;margin-top:4px}.react-riyils-viewer__video{display:block;height:100%;object-fit:contain;width:100%}.react-riyils-viewer__slide{align-items:center;background:#000;display:flex;height:100%;justify-content:center;position:relative;width:100%}:root{--swiper-theme-color:#007aff}:host{display:block;margin-left:auto;margin-right:auto;position:relative;z-index:1}.swiper{display:block;list-style:none;margin-left:auto;margin-right:auto;overflow:hidden;padding:0;position:relative;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{box-sizing:content-box;display:flex;height:100%;position:relative;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);width:100%;z-index:1}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{display:block;flex-shrink:0;height:100%;position:relative;transition-property:transform;width:100%}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{backface-visibility:hidden;transform:translateZ(0)}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px;.swiper-cube-shadow,.swiper-slide{transform-style:preserve-3d}}.swiper-css-mode{>.swiper-wrapper{-ms-overflow-style:none;overflow:auto;scrollbar-width:none;&::-webkit-scrollbar{display:none}}>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}&.swiper-horizontal{>.swiper-wrapper{scroll-snap-type:x mandatory}}&.swiper-vertical{>.swiper-wrapper{scroll-snap-type:y mandatory}}&.swiper-free-mode{>.swiper-wrapper{scroll-snap-type:none}>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}}&.swiper-centered{>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}}&.swiper-centered.swiper-horizontal{>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}}&.swiper-centered.swiper-vertical{>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:var(--swiper-centered-offset-after);min-width:1px;width:100%}}}.swiper-3d{.swiper-slide-shadow,.swiper-slide-shadow-bottom,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-slide-shadow-left{background-image:linear-gradient(270deg,rgba(0,0,0,.5),transparent)}.swiper-slide-shadow-right{background-image:linear-gradient(90deg,rgba(0,0,0,.5),transparent)}.swiper-slide-shadow-top{background-image:linear-gradient(0deg,rgba(0,0,0,.5),transparent)}.swiper-slide-shadow-bottom{background-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent)}}.swiper-lazy-preloader{border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top:4px solid transparent;box-sizing:border-box;height:42px;left:50%;margin-left:-21px;margin-top:-21px;position:absolute;top:50%;transform-origin:50%;width:42px;z-index:10}.swiper-watch-progress .swiper-slide-visible,.swiper:not(.swiper-watch-progress){.swiper-lazy-preloader{animation:swiper-preloader-spin 1s linear infinite}}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode{.swiper-wrapper:after{content:"";left:0;pointer-events:none;position:absolute;top:0}}.swiper-virtual.swiper-css-mode.swiper-horizontal{.swiper-wrapper:after{height:1px;width:var(--swiper-virtual-size)}}.swiper-virtual.swiper-css-mode.swiper-vertical{.swiper-wrapper:after{height:var(--swiper-virtual-size);width:1px}}
|