diff options
author | Daniel Narvaez <dwnarvaez@gmail.com> | 2013-02-06 13:49:14 (GMT) |
---|---|---|
committer | Daniel Narvaez <dwnarvaez@gmail.com> | 2013-02-06 13:49:14 (GMT) |
commit | 821413607a0718156f9d25d895e89b1c3d37aa8b (patch) | |
tree | 01c285af734ed5bba64b73b489e1e0226a94a262 /apps/system/camera/style/VideoPlayer.css | |
parent | c110fb485b3af0066c6df7aeac8c055e9d767efa (diff) |
Copy various bits from gaia
Diffstat (limited to 'apps/system/camera/style/VideoPlayer.css')
-rw-r--r-- | apps/system/camera/style/VideoPlayer.css | 152 |
1 files changed, 152 insertions, 0 deletions
diff --git a/apps/system/camera/style/VideoPlayer.css b/apps/system/camera/style/VideoPlayer.css new file mode 100644 index 0000000..bc2b23c --- /dev/null +++ b/apps/system/camera/style/VideoPlayer.css @@ -0,0 +1,152 @@ +/* styles for the video element itself */ +.videoPlayer { + position: absolute; + left: 0; /* we position it with a transform */ + top:0; + transform-origin: 0 0; +} + +/* video player controls */ +.videoPlayerControls { + position: absolute; + left: 0px; + right: 0px; + top: 0px; + bottom: 0px; + margin: 0; + padding: 0; +} + +.videoPlayerPlayButton { + position: absolute; + width: 106px; + height: 106px; + left: calc(50% - 53px); + top: calc(50% - 53px); + background: url("images/video_play_button.png") center no-repeat, + url("images/video_play_normal.png") center no-repeat; + border-width: 0; +} + +.videoPlayerPlayButton:active { + background: url("images/video_play_button.png") center no-repeat, + url("images/video_play_focus.png") center no-repeat +} + +.videoPlayerPlayButton.hidden { + opacity: 0; +} + +.videoPlayerFooter { + position: absolute; + left: 0px; + right: 0px; + bottom: 0px; + height: 50px; + margin: 0; + padding: 0; + background-color: rgba(0, 0, 0, 0.3); + overflow: hidden; + opacity: 1; + transition: opacity 0.5s; + font-family: "MozTT", sans-serif; + -moz-user-select: none; +} + +.videoPlayerFooter.hidden { + opacity: 0; + pointer-events: none; +} + +.videoPlayerPauseButton { + position: absolute; + width: 100px; + height: 100px; + padding: 0; + margin: 0; + background: url("images/video_pause_button.png") center no-repeat, + rgba(0,0,0,.5); + border-radius: 53px; + border: solid #ccc 3px; + top: -25px; + left: 10px; +} + +.videoPlayerPauseButton:active { + background: url("images/video_pause_button.png") center no-repeat, + url("images/video_play_focus.png") center no-repeat +} + +button::-moz-focus-inner { + padding: 0; + border: none; +} + +/* time slider */ +.videoPlayerSlider { + position: absolute; + left: 110px; + top: 0px; + right: 0px; + height: 100%; +} + +.videoPlayerSlider > span { + display: block; + width: 45px; + position: absolute; + color: white; + height: 100%; + line-height: 50px; + text-align: center; + font-size: 15px; +} + +.videoPlayerElapsedText { + left: 10px; +} + +.videoPlayerDurationText { + right: 10px; +} + +.videoPlayerProgress { + position: absolute; + top: 0px; + left: 70px; + right: 70px; + height: 100%; +} + +.videoPlayerProgress > div { + position: absolute; + pointer-events: none; +} + +.videoPlayerElapsedBar, .videoPlayerBackgroundBar { + height: 4px; + width: 0%; + top: 50%; + margin-top: -2px; + border-radius: 6px; +} + +.videoPlayerElapsedBar { + background-color: #0ac; +} + +.videoPlayerBackgroundBar { + background-color: #333; + width: 100%; +} + +.videoPlayerPlayHead { + display: block; + height: 20px; + width: 25px; + border-radius: 25px; + background-color: white; + top: 50%; + margin: -10px 0 0 -12px; +} + |