mainasara.dev
An entry for the streamplace vod showcase
1/* Video List */
2.video-list {
3 max-width: 1200px;
4 margin: 0 auto;
5 padding: 2rem;
6}
7
8.video-list h1 {
9 margin-bottom: 2rem;
10 font-size: 2rem;
11 font-weight: 600;
12}
13
14.video-grid {
15 display: grid;
16 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
17 gap: 1.5rem;
18}
19
20.video-card {
21 background: var(--card-bg, #1a1a1a);
22 border-radius: 12px;
23 overflow: hidden;
24 cursor: pointer;
25 transition: transform 0.2s, box-shadow 0.2s;
26}
27
28.video-card:hover {
29 transform: translateY(-4px);
30 box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
31}
32
33.video-thumbnail {
34 aspect-ratio: 16 / 9;
35 background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
36 display: flex;
37 align-items: flex-end;
38 justify-content: flex-end;
39 padding: 0.5rem;
40}
41
42.video-thumbnail .duration {
43 background: rgba(0, 0, 0, 0.8);
44 padding: 0.25rem 0.5rem;
45 border-radius: 4px;
46 font-size: 0.875rem;
47 font-weight: 500;
48}
49
50.video-info {
51 padding: 1rem;
52}
53
54.video-info h3 {
55 font-size: 1rem;
56 font-weight: 500;
57 margin: 0 0 0.5rem;
58 line-height: 1.4;
59 display: -webkit-box;
60 -webkit-line-clamp: 2;
61 -webkit-box-orient: vertical;
62 overflow: hidden;
63}
64
65.video-info .video-date {
66 font-size: 0.875rem;
67 color: var(--text-muted, #888);
68 margin: 0;
69}
70
71.loading {
72 text-align: center;
73 padding: 2rem;
74 color: var(--text-muted, #888);
75}
76
77.load-more {
78 display: block;
79 width: 100%;
80 max-width: 300px;
81 margin: 2rem auto 0;
82 padding: 0.75rem 1.5rem;
83 background: var(--accent, #646cff);
84 color: white;
85 border: none;
86 border-radius: 8px;
87 font-size: 1rem;
88 cursor: pointer;
89 transition: background 0.2s;
90}
91
92.load-more:hover {
93 background: var(--accent-hover, #535bf2);
94}
95
96/* Watch Page - YouTube Style Layout */
97.watch-page {
98 display: grid;
99 grid-template-columns: 1fr 380px;
100 gap: 1.5rem;
101 max-width: 1800px;
102 margin: 0 auto;
103 padding: 1rem 2rem;
104}
105
106.watch-main {
107 min-width: 0;
108}
109
110.back-button {
111 display: inline-flex;
112 align-items: center;
113 gap: 0.5rem;
114 padding: 0.5rem 1rem;
115 margin-bottom: 1rem;
116 background: transparent;
117 border: 1px solid var(--border, #333);
118 border-radius: 6px;
119 color: inherit;
120 cursor: pointer;
121 transition: background 0.2s;
122}
123
124.back-button:hover {
125 background: var(--card-bg, #1a1a1a);
126}
127
128.video-container {
129 position: relative;
130 width: 100%;
131 aspect-ratio: 16 / 9;
132 background: #000;
133 border-radius: 12px;
134 overflow: hidden;
135}
136
137.video-element {
138 position: absolute;
139 top: 0;
140 left: 0;
141 width: 100%;
142 height: 100%;
143 object-fit: contain;
144}
145
146.error-overlay {
147 position: absolute;
148 top: 1rem;
149 left: 1rem;
150 right: 1rem;
151 background: rgba(255, 68, 68, 0.9);
152 color: white;
153 padding: 0.75rem 1rem;
154 border-radius: 8px;
155 z-index: 10;
156}
157
158.video-details {
159 padding: 1rem 0;
160}
161
162.video-title {
163 font-size: 1.25rem;
164 font-weight: 600;
165 margin: 0 0 0.75rem;
166 line-height: 1.4;
167}
168
169.video-meta {
170 display: flex;
171 align-items: center;
172 gap: 1rem;
173 margin-bottom: 1rem;
174 color: var(--text-muted, #888);
175 font-size: 0.875rem;
176}
177
178.quality-select {
179 padding: 0.375rem 0.75rem;
180 background: var(--card-bg, #1a1a1a);
181 border: 1px solid var(--border, #333);
182 border-radius: 6px;
183 color: inherit;
184 font-size: 0.875rem;
185 cursor: pointer;
186}
187
188.creator-info {
189 display: flex;
190 align-items: center;
191 gap: 1rem;
192 padding: 1rem;
193 background: var(--card-bg, #1a1a1a);
194 border-radius: 12px;
195}
196
197.creator-avatar,
198.creator-avatar-img {
199 width: 48px;
200 height: 48px;
201 border-radius: 50%;
202 flex-shrink: 0;
203}
204
205.creator-avatar {
206 background: linear-gradient(135deg, #646cff, #535bf2);
207 display: flex;
208 align-items: center;
209 justify-content: center;
210 font-size: 1.25rem;
211 font-weight: 600;
212 color: white;
213}
214
215.creator-avatar-img {
216 object-fit: cover;
217}
218
219.creator-details {
220 display: flex;
221 flex-direction: column;
222 gap: 0.25rem;
223}
224
225.creator-link {
226 color: inherit;
227 text-decoration: none;
228 font-weight: 500;
229}
230
231.creator-link:hover {
232 color: var(--accent, #646cff);
233}
234
235.creator-handle {
236 font-size: 0.875rem;
237 color: var(--text-muted, #888);
238}
239
240/* Sidebar */
241.watch-sidebar {
242 min-width: 0;
243}
244
245.sidebar-title {
246 font-size: 1rem;
247 font-weight: 600;
248 margin: 0 0 1rem;
249}
250
251.related-videos {
252 display: flex;
253 flex-direction: column;
254 gap: 0.75rem;
255}
256
257.related-video-card {
258 display: grid;
259 grid-template-columns: 168px 1fr;
260 gap: 0.75rem;
261 cursor: pointer;
262 border-radius: 8px;
263 transition: background 0.2s;
264}
265
266.related-video-card:hover {
267 background: var(--card-bg, #1a1a1a);
268}
269
270.related-thumbnail {
271 aspect-ratio: 16 / 9;
272 background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
273 border-radius: 8px;
274 display: flex;
275 align-items: flex-end;
276 justify-content: flex-end;
277 padding: 0.25rem;
278}
279
280.related-thumbnail .duration {
281 background: rgba(0, 0, 0, 0.8);
282 padding: 0.125rem 0.375rem;
283 border-radius: 4px;
284 font-size: 0.75rem;
285 font-weight: 500;
286}
287
288.related-info {
289 padding: 0.25rem 0;
290 min-width: 0;
291}
292
293.related-info h4 {
294 font-size: 0.875rem;
295 font-weight: 500;
296 margin: 0 0 0.25rem;
297 line-height: 1.4;
298 display: -webkit-box;
299 -webkit-line-clamp: 2;
300 -webkit-box-orient: vertical;
301 overflow: hidden;
302}
303
304.related-info p {
305 font-size: 0.75rem;
306 color: var(--text-muted, #888);
307 margin: 0;
308}
309
310/* Responsive */
311@media (max-width: 1100px) {
312 .watch-page {
313 grid-template-columns: 1fr;
314 padding: 1rem;
315 }
316
317 .watch-sidebar {
318 border-top: 1px solid var(--border, #333);
319 padding-top: 1.5rem;
320 }
321
322 .related-videos {
323 display: grid;
324 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
325 gap: 1rem;
326 }
327
328 .related-video-card {
329 grid-template-columns: 1fr;
330 }
331
332 .related-thumbnail {
333 width: 100%;
334 }
335}
336
337/* Error state for video list */
338.video-list.error {
339 text-align: center;
340 padding: 4rem 2rem;
341}
342
343.video-list.error button {
344 margin-top: 1rem;
345 padding: 0.75rem 2rem;
346 background: var(--accent, #646cff);
347 color: white;
348 border: none;
349 border-radius: 8px;
350 cursor: pointer;
351}
352
353/* Responsive */
354@media (max-width: 640px) {
355 .video-list {
356 padding: 1rem;
357 }
358
359 .video-list h1 {
360 font-size: 1.5rem;
361 }
362
363 .video-grid {
364 grid-template-columns: 1fr;
365 }
366
367 .video-header {
368 flex-direction: column;
369 align-items: stretch;
370 }
371
372 .video-header h2 {
373 order: -1;
374 }
375}