141 lines
2.3 KiB
SCSS
141 lines
2.3 KiB
SCSS
// ==========================================================================
|
|
// HTML5 Video Player Demo Page
|
|
// ==========================================================================
|
|
|
|
// Reset
|
|
@import "docs/normalize";
|
|
// Mixins
|
|
@import "docs/mixins";
|
|
|
|
// 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;
|
|
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;
|
|
@include font-smoothing();
|
|
}
|
|
h1 {
|
|
@include font-size(64);
|
|
color: #3498DB;
|
|
}
|
|
p,
|
|
small {
|
|
margin: 0 0 $padding-base;
|
|
}
|
|
small {
|
|
display: block;
|
|
padding: 0 ($padding-base / 2);
|
|
@include font-size(14);
|
|
}
|
|
|
|
// Header
|
|
header {
|
|
padding: $padding-base;
|
|
margin-bottom: $padding-base;
|
|
|
|
p {
|
|
@include 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 {
|
|
@include tab-focus();
|
|
}
|
|
}
|
|
.btn {
|
|
display: inline-block;
|
|
padding: ($padding-base / 2) ($padding-base * 1.5);
|
|
background: $link-color;
|
|
border: 0;
|
|
color: #fff;
|
|
@include 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-active {
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
// Fonts
|
|
// Last to not block rendering
|
|
@import "docs/fontface.less";
|