Mercurial > libervia-templates
changeset 278:672b6137ef29
bulma (components): template for the alternative media player
author | Goffi <goffi@goffi.org> |
---|---|
date | Sat, 15 Aug 2020 16:40:29 +0200 |
parents | 4efd3d23de17 |
children | a35ddf972ad2 |
files | sat_templates/templates/bulma/components/video_player.html sat_templates/templates/bulma/static/styles.css |
diffstat | 2 files changed, 132 insertions(+), 0 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/components/video_player.html Sat Aug 15 16:40:29 2020 +0200 @@ -0,0 +1,36 @@ +<div class="video_player"> + <div class="video_elt"></div> + <div class="video_overlay_play is-flex has-items-centered"> + <span class="icon"> + <i class="icon-play-circled"></i> + </span> + </div> + <div class="video_controls columns is-mobile has-items-vcentered"> + <div class="column is-narrow"> + <span class="icon is-medium click_to_play"> + <i class="icon-play video_play is-size-4"></i> + <i class="icon-pause video_pause is-size-4"></i> + </span> + </div> + <div class="column"> + <progress class="progress" value="0"></progress> + </div> + <div class="column is-narrow"> + <div class="content timer click_to_change_timer_mode"> + 0:00/0:00 + </div> + </div> + <div class="column is-narrow"> + <span class="icon is-medium click_to_change_volume"> + <i class="icon-volume-up video_sound_on is-size-4"></i> + <i class="icon-volume-off video_sound_off is-size-4"></i> + </span> + </div> + <div class="column is-narrow"> + <span class="icon is-medium click_to_fullscreen"> + <i class="icon-resize-full video_resize_full is-size-4"></i> + <i class="icon-resize-small video_resize_small is-size-4"></i> + </span> + </div> + </div> +</div>
--- a/sat_templates/templates/bulma/static/styles.css Fri Aug 14 08:47:06 2020 +0200 +++ b/sat_templates/templates/bulma/static/styles.css Sat Aug 15 16:40:29 2020 +0200 @@ -206,6 +206,102 @@ transition: width 0.3s ease-out; } +/**************** + * video player * + ****************/ + +div.video_player>div.video_elt, div.video_player>div.video_elt>ogvjs { + width: 100%; +} + +div.video_player:fullscreen>div.video_elt, div.video_player:fullscreen>div.video_elt>ogvjs { + height: 100%; +} + +div.video_player { + position: relative; + background-color: black; +} + +div.video_player>div.video_overlay_play { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +div.video_player>div.video_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 { + display: none; +} + +div.video_player.playing .video_pause { + display: inline-block; +} + +div.video_player.playing .video_play { + display: none; +} + +div.video_player.muted .video_sound_off { + display: inline-block; +} + +div.video_player.muted .video_sound_on { + display: none; +} + +div.video_player:fullscreen .video_resize_small { + display: inline-block; +} + +div.video_player:fullscreen .video_resize_full { + display: none; +} + +div.video_controls { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + margin: 0; + background-color: #000A; + color: #eee; +} + +div.video_player.playing:hover>.video_controls, +div.video_player.playing>.video_controls.hidden:hover +{ + opacity: 1; + transition: opacity 0.5s; +} + +div.video_player.playing>.video_controls, +div.video_player.playing>.video_controls.hidden { + opacity: 0; + transition: opacity 2s; +} + +div.video_player .video_controls .icon:hover { + background-color: #777; + cursor: pointer; +} + +div.video_player .timer { + cursor: pointer; + width: 5em; + text-align: center; +} + + /************* * slideshow * *************/