141 lines
2.3 KiB
Plaintext
141 lines
2.3 KiB
Plaintext
// ==========================================================================
|
|
// HTML5 Video Player Demo Page
|
|
// ==========================================================================
|
|
|
|
// Reset
|
|
@import "docs/normalize.less";
|
|
// Mixins
|
|
@import "docs/mixins.less";
|
|
|
|
// Variables
|
|
// ---------------------------------------
|
|
// Colors
|
|
@blue: #3498DB;
|
|
@gray-dark: #343f4a;
|
|
@gray: #565d64;
|
|
@gray-light: #cbd0d3;
|
|
|
|
// Elements
|
|
@link-color: @blue;
|
|
@padding-base: 20px;
|
|
|
|
// Breakpoints
|
|
@screen-md: 768px;
|
|
|
|
// BORDER-BOX ALL THE THINGS!
|
|
// http://paulirish.com/2012/box-sizing-border-box-ftw/
|
|
*, *::after, *::before {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
// Base
|
|
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;
|
|
}
|
|
|
|
// Type
|
|
h1,
|
|
h2 {
|
|
letter-spacing: -.025em;
|
|
color: #2E3C44;
|
|
margin: 0 0 (@padding-base / 2);
|
|
line-height: 1.2;
|
|
.font-smoothing();
|
|
}
|
|
h1 {
|
|
.font-size(64);
|
|
color: #3498DB;
|
|
}
|
|
p,
|
|
small {
|
|
margin: 0 0 @padding-base;
|
|
}
|
|
small {
|
|
display: block;
|
|
padding: 0 (@padding-base / 2);
|
|
.font-size(14);
|
|
}
|
|
|
|
// Header
|
|
header {
|
|
padding: @padding-base;
|
|
margin-bottom: @padding-base;
|
|
|
|
p {
|
|
.font-size(18);
|
|
}
|
|
@media (min-width: 560px) {
|
|
padding-top: (@padding-base * 3);
|
|
padding-bottom: (@padding-base * 3);
|
|
}
|
|
}
|
|
|
|
// Sections
|
|
section {
|
|
padding-bottom: @padding-base;
|
|
|
|
@media (min-width: 560px) {
|
|
padding-bottom: (@padding-base * 2);
|
|
}
|
|
}
|
|
|
|
// Links & Buttons
|
|
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: (@padding-base / 2) (@padding-base * 1.5);
|
|
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%);
|
|
}
|
|
}
|
|
|
|
// Players
|
|
.example-audio .player {
|
|
max-width: 480px;
|
|
}
|
|
.example-video .player {
|
|
max-width: 1200px;
|
|
}
|
|
.example-audio .player,
|
|
.example-video .player {
|
|
margin: 0 auto @padding-base;
|
|
|
|
&:fullscreen,
|
|
&-fullscreen {
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
// Fonts
|
|
// Last to not block rendering
|
|
@import "docs/fontface.less"; |