Mercurial > libervia-templates

view sat_templates/templates/bulma/components/media_player.html @ 295:1de599c5a68f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
bulma (base): loading screen: when the `loading_screen` variable is set before extending `base/base.html`, a loading modal is shown (and must be removed via JavaScript). This avoids the user to try to use an interface which is not reactive or working normally because JS is not fully loaded yet.
author Goffi <goffi@goffi.org>
date Fri, 27 Nov 2020 12:24:03 +0100
parents 742c59641bf5
children
line wrap: on
line source

<div class="media_player">
    <div class="media_elt"></div>
    <div class="media_overlay_play is-flex has-items-centered">
        <span class="icon">
            <i class="icon-play-circled"></i>
        </span>
    </div>
    <div class="media_controls columns is-mobile has-items-vcentered">
        <div class="column is-narrow click_to_play">
            <span class="icon is-medium">
                <i class="icon-play media_play is-size-4"></i>
                <i class="icon-pause media_pause is-size-4"></i>
            </span>
        </div>
        <div class="column">
            <progress class="progress" value="0"></progress>
        </div>
        <div class="column is-narrow click_to_change_timer_mode">
            <div class="content timer">
                0:00/0:00
            </div>
        </div>
        <div class="column is-narrow click_to_change_volume">
            <span class="icon is-medium">
                <i class="icon-volume-up media_sound_on is-size-4"></i>
                <i class="icon-volume-off media_sound_off is-size-4"></i>
            </span>
        </div>
        <div class="column is-narrow click_to_fullscreen">
            <span class="icon is-medium">
                <i class="icon-resize-full media_resize_full is-size-4"></i>
                <i class="icon-resize-small media_resize_small is-size-4"></i>
            </span>
        </div>
    </div>
</div>