ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Demo tweaks

Browse Source
This commit is contained in:
Sam Potts 2019-06-03 00:26:08 +10:00
parent 1890a9378d
commit d9d2c4a219
12 changed files with 44 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/dist/demo.css vendored
View File

File diff suppressed because one or more lines are too long

6
demo/dist/demo.js vendored
View File

@ -22776,7 +22776,11 @@ typeof navigator === "object" && (function () {
}
this.getThumbnails().then(function () {
// Render DOM elements
if (!_this.enabled) {
return;
} // Render DOM elements
_this.render(); // Check to see if thumb container size was specified manually in CSS

2
demo/dist/demo.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
demo/dist/demo.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
demo/dist/error.css vendored
View File

File diff suppressed because one or more lines are too long

2
demo/index.html
View File

@ -66,7 +66,7 @@
<body>
<div class="grid">
<header>
<h1>Plyr</h1>
<h1>Pl<span>a</span>y<span>e</span>r</h1>
<p>
A simple, accessible and customisable media player for
<button type="button" class="faux-link" data-source="video">

8
demo/src/sass/components/buttons.scss
View File

@ -22,13 +22,13 @@
// Buttons
.button {
font-weight: $font-weight-bold;
padding-left: $spacing-base;
padding-right: $spacing-base;
padding-left: ($spacing-base * 1.25);
padding-right: ($spacing-base * 1.25);
transition: all 0.2s ease;
&:hover,
&:focus {
color: $gray-dark;
color: $color-button-text-hover;
// Remove the underline/border
&::after {
@ -65,7 +65,7 @@
// Count bubble
.button__count {
animation: fadein 0.2s ease;
margin-left: ($spacing-base / 2);
margin-left: ($spacing-base * 0.75);
&::before {
border: $arrow-size solid transparent;

15
demo/src/sass/components/header.scss
View File

@ -6,12 +6,15 @@ header {
padding-bottom: $spacing-base;
text-align: center;
.call-to-action {
margin-top: ($spacing-base * 1.5);
h1 span {
animation: shrinkHide 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s forwards;
display: inline-block;
font-weight: $font-weight-light;
opacity: 0.5;
}
p:first-of-type {
@include font-size(16);
.call-to-action {
margin-top: ($spacing-base * 1.5);
}
@media only screen and (min-width: $screen-md) {
@ -19,5 +22,9 @@ header {
max-width: 360px;
padding-bottom: ($spacing-base * 2);
text-align: left;
p:first-of-type {
@include font-size($font-size-large);
}
}
}

14
demo/src/sass/lib/animation.scss
View File

@ -11,3 +11,17 @@
opacity: 1;
}
}
@keyframes shrinkHide {
0% {
opacity: 0.5;
width: 38px;
}
20% {
width: 45px;
}
100% {
opacity: 0;
width: 0;
}
}

8
demo/src/sass/settings/colors.scss
View File

@ -5,20 +5,15 @@
// Greyscale
$gray-dark: #343f4a;
$gray: #55646b;
$gray-light: #cbd0d3;
$gray-lighter: #dbe3e8;
$off-white: #f2f5f7;
// Text
$color-text: #fff;
// Plyr
$color-brand-primary: #1aafff;
$color-brand-primary: #1aafff; // #7bc47f
// Brands
$color-twitter: #4baaf4;
$color-youtube: #cc181e;
$color-vimeo: #19b7ed;
// Elements
$color-link: #fff;
@ -27,6 +22,7 @@ $color-background: $color-brand-primary;
// Buttons
$color-button-background: #fff;
$color-button-text: $gray;
$color-button-text-hover: $gray-dark;
// Focus
$tab-focus-default-color: #fff;

2
demo/src/sass/type/base.scss
View File

@ -26,7 +26,7 @@ textarea {
p,
small {
margin: 0 0 $spacing-base;
margin: 0 0 ($spacing-base * 1.5);
}
small {

4
demo/src/sass/type/headings.scss
View File

@ -4,8 +4,8 @@
h1 {
@include font-size($font-size-h1);
font-weight: $font-weight-bold;
font-weight: $font-weight-medium;
letter-spacing: $letter-spacing-headings;
line-height: 1.2;
margin: 0 0 $spacing-base;
margin: 0 0 ($spacing-base * 1.5);
}