# HG changeset patch # User Goffi # Date 1598338172 -7200 # Node ID f8026bf77a4ca3b294ab247f280a1f0c8c7750d1 # Parent 2ed424742e72371bdce36fbbb563ef0910060681 bulma (CSS): updated classed to handle native video player + video in slideshow diff -r 2ed424742e72 -r f8026bf77a4c sat_templates/templates/bulma/static/styles.css --- a/sat_templates/templates/bulma/static/styles.css Tue Aug 25 08:48:22 2020 +0200 +++ b/sat_templates/templates/bulma/static/styles.css Tue Aug 25 08:49:32 2020 +0200 @@ -18,6 +18,16 @@ overflow: hidden; } +.is-video-thumbnail-wrapper { + background-color: black; +} + +.is-video-thumbnail-wrapper, .is-video-thumbnail { + height: 100%; + width: 100%; +} + + .is-photo-thumbnail { max-height: var(--photo-height); max-width: 100%; @@ -25,6 +35,7 @@ .is-photo-thumbnail-container { height: var(--photo-height); + } .has-items-centered { @@ -108,6 +119,10 @@ user-select: none; } +.selected_for_action { + outline: solid var(--col-primary) 0.25rem; +} + .selected_for_deletion { outline: solid red 0.25rem; } @@ -207,23 +222,29 @@ } /**************** - * video player * + * media player * ****************/ -div.video_player>div.video_elt, div.video_player>div.video_elt>ogvjs { +div.media_player>div.media_elt, +div.media_player>div.media_elt>ogvjs, +div.media_player>div.media_elt>video { width: 100%; -} - -div.video_player:fullscreen>div.video_elt, div.video_player:fullscreen>div.video_elt>ogvjs { height: 100%; } -div.video_player { +/* div.media_player:fullscreen>div.media_elt, */ +/* div.media_player:fullscreen>div.media_elt>ogvjs, */ +/* div.media_player:fullscreen>div.media_elt>video */ +/* { */ +/* height: 100%; */ +/* } */ + +div.media_player { position: relative; background-color: black; } -div.video_player>div.video_overlay_play { +div.media_overlay_play { position: absolute; top: 0; left: 0; @@ -231,43 +252,47 @@ height: 100%; } -div.video_player>div.video_overlay_play>.icon { +div.media_overlay_play>.icon { height: 12rem; width: 12rem; font-size: 10rem; color: #eee; } -div.video_player .video_pause, div.video_player .video_sound_off, -div.video_player .video_resize_small { +div.media_player.in_use>div.media_overlay_play { + display: none !important; +} + +div.media_player .media_pause, div.media_player .media_sound_off, +div.media_player .media_resize_small { display: none; } -div.video_player.playing .video_pause { +div.media_player.playing .media_pause { display: inline-block; } -div.video_player.playing .video_play { +div.media_player.playing .media_play { display: none; } -div.video_player.muted .video_sound_off { +div.media_player.muted .media_sound_off { display: inline-block; } -div.video_player.muted .video_sound_on { +div.media_player.muted .media_sound_on { display: none; } -div.video_player:fullscreen .video_resize_small { +div.media_player:fullscreen .media_resize_small { display: inline-block; } -div.video_player:fullscreen .video_resize_full { +div.media_player:fullscreen .media_resize_full { display: none; } -div.video_controls { +div.media_controls { position: absolute; bottom: 0; left: 0; @@ -275,32 +300,41 @@ margin: 0; background-color: #000A; color: #eee; + z-index: 150; } -div.video_player.playing:hover>.video_controls, -div.video_player.playing>.video_controls.hidden:hover +div.media_controls progress { + cursor: pointer; +} + +div.media_player.playing:hover>.media_controls, +div.media_player.playing>.media_controls.hidden:hover { opacity: 1; transition: opacity 0.5s; } -div.video_player.playing>.video_controls, -div.video_player.playing>.video_controls.hidden { +div.media_player.playing>.media_controls, +div.media_player.playing>.media_controls.hidden { opacity: 0; transition: opacity 2s; } -div.video_player .video_controls .icon:hover { +div.media_player .media_controls .icon:hover { background-color: #777; cursor: pointer; } -div.video_player .timer { +div.media_player .timer { cursor: pointer; width: 5em; text-align: center; } +div.media_player.no_fullscreen>div.media_controls>div.click_to_fullscreen { + display: none; +} + /************* * slideshow * @@ -330,7 +364,7 @@ z-index: 100; position: absolute; right: 1.7rem; - bottom: 2rem; + bottom: 3rem; cursor: pointer; } @@ -356,11 +390,13 @@ .swiper-button-prev { left: 2.1rem !important; color: #f1f1f1 !important; + z-index: 150; } .swiper-button-next { right: 2.1rem !important; color: #f1f1f1 !important; + z-index: 150; } .slide_img { @@ -368,6 +404,20 @@ max-width: 100%; } +.slide_video { + height: 100%; + width: 100%; +} + +div.slideshow.flag_no_pagination>div.swiper-container>div.swiper-pagination { + display: none; +} + +div.slideshow.flag_no_scrollbar>div.swiper-container>div.swiper-scrollbar { + display: none; +} + + /*************** * progression * ***************/