1
0
mirror of https://github.com/videojs/video.js.git synced 2024-12-14 11:23:30 +02:00
video.js/sandbox/icons.html.example
Matthew McClure 4ac762cf48 @mmcc added a new default skin, switched to SASS, modified the html closes #1999
- removed old less style. no going back now.
- switched back to video-js.scss naming and added a base-style injection class
- cleaned up and simplified big play btn
- Flexbox straight flexin.
- move to using variables for text and icon font families
- use table layout for IE 8 and 9
- moved to using extend for icons
- Switched to SASS, added a new default theme, updated the html
- added horizontal classes
- added connect-watch grunt task
- show all the things in the control bar so everything is available
  by default (and hidden via css
- reignore dist for now
- removing trailing comma to get the tests passing
- Switched to using libsass and removed incompatible "black magic"
- updating to es6 syntax
- removed old separator, added grunt task for dev, and updated example
- singular time-control and live-control. remove playing class on pause
- updated separator control styles
- Show full control bar when a player goes to fullscreen.
  Also added a grunt task specifically for skin development (only watches sass file changes and runs sass)
- allow poster image to toggle playback
- This allows the poster image to toggle play / pause on audio-only sources
- fixed issue with scrollbars in Chrome on Linux
- make the control bar not-quite-black
- added back some focus highlights until we decide on another path
2015-04-28 09:52:27 -07:00

39 lines
2.0 KiB
Plaintext

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Video.js Icons Sandbox</title>
<link href="../build/temp/video-js.css" rel="stylesheet" type="text/css">
<style>
.icon-list li span { font-size: 150% }
</style>
</head>
<body>
<h1>Video.js Icons</h1>
<p>This is a list of all of the icons available in the Video.js base stylesheet. The appropriate class is to the right of each icon.</p>
<ul class="icon-list">
<li><span class="vjs-icon-play"></span> <code>.vjs-icon-play</code></li>
<li><span class="vjs-icon-pause"></span> <code>.vjs-icon-pause</code></li>
<li><span class="vjs-icon-volume-mute"></span> <code>.vjs-icon-volume-mute</code></li>
<li><span class="vjs-icon-volume-low"></span> <code>.vjs-icon-volume-low</code></li>
<li><span class="vjs-icon-volume-mid"></span> <code>.vjs-icon-volume-mid</code></li>
<li><span class="vjs-icon-volume-high"></span> <code>.vjs-icon-volume-high</code></li>
<li><span class="vjs-icon-fullscreen-enter"></span> <code>.vjs-icon-fullscreen-enter</code></li>
<li><span class="vjs-icon-fullscreen-exit"></span> <code>.vjs-icon-fullscreen-exit</code></li>
<li><span class="vjs-icon-square"></span> <code>.vjs-icon-square</code></li>
<li><span class="vjs-icon-spinner"></span> <code>.vjs-icon-spinner</code></li>
<li><span class="vjs-icon-subtitles"></span> <code>.vjs-icon-subtitles</code></li>
<li><span class="vjs-icon-captions"></span> <code>.vjs-icon-captions</code></li>
<li><span class="vjs-icon-chapters"></span> <code>.vjs-icon-chapters</code></li>
<li><span class="vjs-icon-share"></span> <code>.vjs-icon-share</code></li>
<li><span class="vjs-icon-cog"></span> <code>.vjs-icon-cog</code></li>
<li><span class="vjs-icon-circle"></span> <code>.vjs-icon-circle</code></li>
<li><span class="vjs-icon-circle-outline"></span> <code>.vjs-icon-circle-outline</code></li>
<li><span class="vjs-icon-circle-inner-circle"></span> <code>.vjs-icon-circle-inner-circle</code></li>
</ul>
</body>
</html>