// ========================================================================== // HTML5 Video Player Demo Page // ========================================================================== // Reset @import "docs/normalize.less"; // Mixins @import "docs/mixins.less"; // Fonts @import "docs/fontface.less"; // Variables // --------------------------------------- // Colors @blue: #3498DB; @gray-dark: #343f4a; @gray: #565d64; @gray-light: #cbd0d3; // Elements @link-color: @blue; // BORDER-BOX ALL THE THINGS! // http://paulirish.com/2012/box-sizing-border-box-ftw/ *, *::after, *::before { box-sizing: border-box; } html { font-size: 62.5%; } body { font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif; background: #fff; .font-size(16); line-height: 1.5; text-align: center; color: #6D797F; } h1, h2 { letter-spacing: -.025em; color: #2E3C44; margin: 0 0 10px; line-height: 1.2; .font-smoothing(); } h1 { .font-size(64); color: #3498DB; } p, small { margin: 0 0 20px; } small { display: block; .font-size(14); } header { padding: 60px 0; margin-bottom: 20px; p { .font-size(18); } } a { text-decoration: none; color: @link-color; border-bottom: 1px solid currentColor; transition: all .3s ease; &:hover, &:focus { color: #000; } &:focus { .tab-focus(); } } .btn { display: inline-block; padding: 10px 25px; background: @link-color; border: 0; color: #fff; .font-smoothing(on); font-weight: 600; border-radius: 3px; &:hover, &:focus { color: #fff; background: darken(@link-color, 5%); } } section { padding-bottom: 80px; } // Players .example-audio .player { max-width: 480px; } .example-video .player { max-width: 1200px; } .example-audio .player, .example-video .player { margin: 0 auto 20px; &:fullscreen, &-fullscreen { max-width: none; } }