Mercurial > libervia-templates

comparison sat_templates/templates/bulma/static/styles.css @ 286:f8026bf77a4c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
bulma (CSS): updated classed to handle native video player + video in slideshow
author Goffi <goffi@goffi.org>
date Tue, 25 Aug 2020 08:49:32 +0200
parents 672b6137ef29
children f1a39607d6a5
comparison
equal deleted inserted replaced
285:2ed424742e72 286:f8026bf77a4c
16 border: 1px solid #bbb; 16 border: 1px solid #bbb;
17 background-color: #eee; 17 background-color: #eee;
18 overflow: hidden; 18 overflow: hidden;
19 } 19 }
20 20
21 .is-video-thumbnail-wrapper {
22 background-color: black;
23 }
24
25 .is-video-thumbnail-wrapper, .is-video-thumbnail {
26 height: 100%;
27 width: 100%;
28 }
29
30
21 .is-photo-thumbnail { 31 .is-photo-thumbnail {
22 max-height: var(--photo-height); 32 max-height: var(--photo-height);
23 max-width: 100%; 33 max-width: 100%;
24 } 34 }
25 35
26 .is-photo-thumbnail-container { 36 .is-photo-thumbnail-container {
27 height: var(--photo-height); 37 height: var(--photo-height);
38
28 } 39 }
29 40
30 .has-items-centered { 41 .has-items-centered {
31 align-items: center; 42 align-items: center;
32 justify-content: center; 43 justify-content: center;
104 * selections * 115 * selections *
105 **************/ 116 **************/
106 117
107 .is-not-selectable { 118 .is-not-selectable {
108 user-select: none; 119 user-select: none;
120 }
121
122 .selected_for_action {
123 outline: solid var(--col-primary) 0.25rem;
109 } 124 }
110 125
111 .selected_for_deletion { 126 .selected_for_deletion {
112 outline: solid red 0.25rem; 127 outline: solid red 0.25rem;
113 } 128 }
205 width: 55rem; 220 width: 55rem;
206 transition: width 0.3s ease-out; 221 transition: width 0.3s ease-out;
207 } 222 }
208 223
209 /**************** 224 /****************
210 * video player * 225 * media player *
211 ****************/ 226 ****************/
212 227
213 div.video_player>div.video_elt, div.video_player>div.video_elt>ogvjs { 228 div.media_player>div.media_elt,
229 div.media_player>div.media_elt>ogvjs,
230 div.media_player>div.media_elt>video {
214 width: 100%; 231 width: 100%;
215 }
216
217 div.video_player:fullscreen>div.video_elt, div.video_player:fullscreen>div.video_elt>ogvjs {
218 height: 100%; 232 height: 100%;
219 } 233 }
220 234
221 div.video_player { 235 /* div.media_player:fullscreen>div.media_elt, */
236 /* div.media_player:fullscreen>div.media_elt>ogvjs, */
237 /* div.media_player:fullscreen>div.media_elt>video */
238 /* { */
239 /* height: 100%; */
240 /* } */
241
242 div.media_player {
222 position: relative; 243 position: relative;
223 background-color: black; 244 background-color: black;
224 } 245 }
225 246
226 div.video_player>div.video_overlay_play { 247 div.media_overlay_play {
227 position: absolute; 248 position: absolute;
228 top: 0; 249 top: 0;
229 left: 0; 250 left: 0;
230 width: 100%; 251 width: 100%;
231 height: 100%; 252 height: 100%;
232 } 253 }
233 254
234 div.video_player>div.video_overlay_play>.icon { 255 div.media_overlay_play>.icon {
235 height: 12rem; 256 height: 12rem;
236 width: 12rem; 257 width: 12rem;
237 font-size: 10rem; 258 font-size: 10rem;
238 color: #eee; 259 color: #eee;
239 } 260 }
240 261
241 div.video_player .video_pause, div.video_player .video_sound_off, 262 div.media_player.in_use>div.media_overlay_play {
242 div.video_player .video_resize_small { 263 display: none !important;
243 display: none; 264 }
244 } 265
245 266 div.media_player .media_pause, div.media_player .media_sound_off,
246 div.video_player.playing .video_pause { 267 div.media_player .media_resize_small {
268 display: none;
269 }
270
271 div.media_player.playing .media_pause {
247 display: inline-block; 272 display: inline-block;
248 } 273 }
249 274
250 div.video_player.playing .video_play { 275 div.media_player.playing .media_play {
251 display: none; 276 display: none;
252 } 277 }
253 278
254 div.video_player.muted .video_sound_off { 279 div.media_player.muted .media_sound_off {
255 display: inline-block; 280 display: inline-block;
256 } 281 }
257 282
258 div.video_player.muted .video_sound_on { 283 div.media_player.muted .media_sound_on {
259 display: none; 284 display: none;
260 } 285 }
261 286
262 div.video_player:fullscreen .video_resize_small { 287 div.media_player:fullscreen .media_resize_small {
263 display: inline-block; 288 display: inline-block;
264 } 289 }
265 290
266 div.video_player:fullscreen .video_resize_full { 291 div.media_player:fullscreen .media_resize_full {
267 display: none; 292 display: none;
268 } 293 }
269 294
270 div.video_controls { 295 div.media_controls {
271 position: absolute; 296 position: absolute;
272 bottom: 0; 297 bottom: 0;
273 left: 0; 298 left: 0;
274 width: 100%; 299 width: 100%;
275 margin: 0; 300 margin: 0;
276 background-color: #000A; 301 background-color: #000A;
277 color: #eee; 302 color: #eee;
278 } 303 z-index: 150;
279 304 }
280 div.video_player.playing:hover>.video_controls, 305
281 div.video_player.playing>.video_controls.hidden:hover 306 div.media_controls progress {
307 cursor: pointer;
308 }
309
310 div.media_player.playing:hover>.media_controls,
311 div.media_player.playing>.media_controls.hidden:hover
282 { 312 {
283 opacity: 1; 313 opacity: 1;
284 transition: opacity 0.5s; 314 transition: opacity 0.5s;
285 } 315 }
286 316
287 div.video_player.playing>.video_controls, 317 div.media_player.playing>.media_controls,
288 div.video_player.playing>.video_controls.hidden { 318 div.media_player.playing>.media_controls.hidden {
289 opacity: 0; 319 opacity: 0;
290 transition: opacity 2s; 320 transition: opacity 2s;
291 } 321 }
292 322
293 div.video_player .video_controls .icon:hover { 323 div.media_player .media_controls .icon:hover {
294 background-color: #777; 324 background-color: #777;
295 cursor: pointer; 325 cursor: pointer;
296 } 326 }
297 327
298 div.video_player .timer { 328 div.media_player .timer {
299 cursor: pointer; 329 cursor: pointer;
300 width: 5em; 330 width: 5em;
301 text-align: center; 331 text-align: center;
332 }
333
334 div.media_player.no_fullscreen>div.media_controls>div.click_to_fullscreen {
335 display: none;
302 } 336 }
303 337
304 338
305 /************* 339 /*************
306 * slideshow * 340 * slideshow *
328 362
329 div.slideshow>div.click_to_comment { 363 div.slideshow>div.click_to_comment {
330 z-index: 100; 364 z-index: 100;
331 position: absolute; 365 position: absolute;
332 right: 1.7rem; 366 right: 1.7rem;
333 bottom: 2rem; 367 bottom: 3rem;
334 cursor: pointer; 368 cursor: pointer;
335 } 369 }
336 370
337 div.slideshow>div.comments__count { 371 div.slideshow>div.comments__count {
338 z-index: 100; 372 z-index: 100;
354 } 388 }
355 389
356 .swiper-button-prev { 390 .swiper-button-prev {
357 left: 2.1rem !important; 391 left: 2.1rem !important;
358 color: #f1f1f1 !important; 392 color: #f1f1f1 !important;
393 z-index: 150;
359 } 394 }
360 395
361 .swiper-button-next { 396 .swiper-button-next {
362 right: 2.1rem !important; 397 right: 2.1rem !important;
363 color: #f1f1f1 !important; 398 color: #f1f1f1 !important;
399 z-index: 150;
364 } 400 }
365 401
366 .slide_img { 402 .slide_img {
367 max-height: 100%; 403 max-height: 100%;
368 max-width: 100%; 404 max-width: 100%;
369 } 405 }
406
407 .slide_video {
408 height: 100%;
409 width: 100%;
410 }
411
412 div.slideshow.flag_no_pagination>div.swiper-container>div.swiper-pagination {
413 display: none;
414 }
415
416 div.slideshow.flag_no_scrollbar>div.swiper-container>div.swiper-scrollbar {
417 display: none;
418 }
419
370 420
371 /*************** 421 /***************
372 * progression * 422 * progression *
373 ***************/ 423 ***************/
374 424