aboutsummaryrefslogtreecommitdiffstats
path: root/demo
diff options
context:
space:
mode:
Diffstat (limited to 'demo')
-rw-r--r--demo/dist/demo.css2
-rw-r--r--demo/dist/error.css2
-rw-r--r--demo/index.html15
-rw-r--r--demo/src/less/components/buttons.less5
-rw-r--r--demo/src/less/components/header.less1
-rw-r--r--demo/src/less/components/icons.less4
-rw-r--r--demo/src/less/components/players.less2
-rw-r--r--demo/src/less/lib/fontface.less40
-rw-r--r--demo/src/less/settings/type.less16
-rw-r--r--demo/src/less/type/base.less3
-rw-r--r--demo/src/less/type/headings.less2
11 files changed, 56 insertions, 36 deletions
diff --git a/demo/dist/demo.css b/demo/dist/demo.css
index 809bec06..0d3a12d5 100644
--- a/demo/dist/demo.css
+++ b/demo/dist/demo.css
@@ -1 +1 @@
-@-webkit-keyframes fadein{0%{opacity:0}100%{opacity:1}}@keyframes fadein{0%{opacity:0}100%{opacity:1}}@font-face{font-family:Avenir;src:local('Avenir-Medium'),url(https://cdn.plyr.io/static/fonts/avenir-medium.woff2) format('woff2'),url(https://cdn.plyr.io/static/fonts/avenir-medium.woff) format('woff');font-style:normal;font-weight:500;font-display:swap}@font-face{font-family:Avenir;src:local('Avenir-Heavy'),url(https://cdn.plyr.io/static/fonts/avenir-bold.woff2) format('woff2'),url(https://cdn.plyr.io/static/fonts/avenir-bold.woff) format('woff');font-style:normal;font-weight:700;font-display:swap}@font-face{font-family:Avenir;src:local('Avenir-Black'),url(https://cdn.plyr.io/static/fonts/avenir-black.woff2?v=3) format('woff2'),url(https://cdn.plyr.io/static/fonts/avenir-black.woff?v=3) format('woff');font-style:normal;font-weight:900;font-display:swap}/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a,button.faux-link{background:0 0}a:focus,button.faux-link:focus{outline:thin dotted}a:active,a:hover,button.faux-link:active,button.faux-link:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:'\201C' '\201D' '\2018' '\2019'}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}*,::after,::before{box-sizing:border-box}body,html{display:-webkit-box;display:flex;width:100%}html{background:linear-gradient(to left top,#67caff,#0085cd);background-attachment:fixed;height:100%}body{display:-webkit-box;display:flex;min-height:100%;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.grid{-webkit-box-flex:1;flex:1;overflow:auto}main{margin:auto;text-align:center}aside{position:relative;display:-webkit-box;display:flex;flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;width:100%;padding:15px;background:#fff;text-align:center;color:#55646b;text-shadow:none}aside .icon{margin-right:10px;fill:#4baaf4}aside p{margin:0}aside a,aside button.faux-link{color:#4baaf4}aside a.tab-focus,aside button.faux-link.tab-focus{outline:0;box-shadow:0 0 0 3px rgba(75,170,244,.35)}.grid{margin:0 auto;padding:20px}@media only screen and (min-width:768px){.grid{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;width:100%;max-width:1280px}.grid>*{-webkit-box-flex:1;flex:1}}html{font-size:100%}body{font-family:Avenir,'Helvetica Neue',sans-serif;line-height:1.5;color:#fff;font-weight:500;text-shadow:0 1px 1px rgba(0,0,0,.15);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}p,small{margin:0 0 20px}small{display:block;font-size:14px;font-size:.875rem}h1{margin:0 0 10px;font-weight:900;letter-spacing:-.025em;font-size:64px;font-size:4rem}.button,.button__count{position:relative;display:-webkit-inline-box;display:inline-flex;vertical-align:middle;-webkit-box-align:center;align-items:center;padding:15px;border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,.1);background:#fff;border:0;color:#55646b;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:700;text-shadow:none}.button{padding-left:20px;padding-right:20px;transition:all .2s ease}.button:focus,.button:hover{color:#343f4a;outline:0}.button:focus::after,.button:hover::after{display:none}.button.tab-focus{outline:0;box-shadow:0 0 0 3px rgba(255,255,255,.35)}.button__count{margin-left:10px;-webkit-animation:fadein .2s ease;animation:fadein .2s ease}.button__count::before{content:'';position:absolute;width:0;height:0;right:100%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);border:5px solid transparent;border-right-color:#fff;border-left-width:0}header{padding-bottom:20px;text-align:center}header p{margin-bottom:30px;font-size:18px;font-size:1.125rem}header .action{display:-webkit-inline-box;display:inline-flex}header .action .button .icon{flex-shrink:0}@media only screen and (min-width:768px){header{max-width:400px;margin-right:40px;padding-bottom:40px;text-align:left}}.icon{fill:currentColor;width:16px;height:16px;vertical-align:-.15em}a svg,button svg,button.faux-link svg,label svg{pointer-events:none}.btn .icon,a .icon,button.faux-link .icon{margin-right:5px}button.faux-link{position:relative;margin:0;padding:0;width:auto;border:0;background:0 0;vertical-align:baseline;text-align:inherit;font:inherit;line-height:1.5;cursor:pointer;-moz-user-select:text;text-shadow:inherit;border-radius:0}a,button.faux-link{position:relative;border-bottom:1px dotted currentColor;transition:all .2s ease;text-decoration:none;color:#fff;font-weight:700}a::after,button.faux-link::after{content:'';position:absolute;top:100%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:0;height:1px;transition:width .2s ease;background:currentColor}a:focus,a:hover,button.faux-link:focus,button.faux-link:hover{border-bottom-color:transparent;outline:0}a:focus::after,a:hover::after,button.faux-link:focus::after,button.faux-link:hover::after{width:100%}a.tab-focus,button.faux-link.tab-focus{outline:0;box-shadow:0 0 0 3px rgba(255,255,255,.35)}li,ul{list-style:none;margin:0;padding:0}nav{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;margin-bottom:20px}video{max-width:100%;vertical-align:middle}.plyr{margin:20px auto;border-radius:4px;box-shadow:0 2px 5px rgba(0,0,0,.2)}.plyr__video-wrapper::after{content:'';pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0;border:1px solid rgba(0,0,0,.15);border-radius:inherit}.plyr__cite{display:none;margin-top:20px}.plyr__cite .icon{margin-right:5px}.plyr--audio~ul .plyr__cite--audio,.plyr--video:not(.plyr--youtube):not(.plyr--vimeo)~ul .plyr__cite--video,.plyr--vimeo~ul .plyr__cite--vimeo,.plyr--youtube~ul .plyr__cite--youtube{display:block} \ No newline at end of file
+@-webkit-keyframes fadein{0%{opacity:0}100%{opacity:1}}@keyframes fadein{0%{opacity:0}100%{opacity:1}}@font-face{font-family:Gordita;src:url(https://cdn.plyr.io/static/fonts/gordita-light.woff2) format('woff2'),url(https://cdn.plyr.io/static/fonts/gordita-light.woff) format('woff2');font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Gordita;src:url(https://cdn.plyr.io/static/fonts/gordita-regular.woff2) format('woff2'),url(https://cdn.plyr.io/static/fonts/gordita-regular.woff) format('woff2');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Gordita;src:url(https://cdn.plyr.io/static/fonts/gordita-medium.woff2) format('woff2'),url(https://cdn.plyr.io/static/fonts/gordita-medium.woff) format('woff2');font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Gordita;src:url(https://cdn.plyr.io/static/fonts/gordita-bold.woff2) format('woff2'),url(https://cdn.plyr.io/static/fonts/gordita-bold.woff) format('woff2');font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Gordita;src:url(https://cdn.plyr.io/static/fonts/gordita-black.woff2) format('woff2'),url(https://cdn.plyr.io/static/fonts/gordita-black.woff) format('woff2');font-weight:900;font-style:normal;font-display:swap}/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a,button.faux-link{background:0 0}a:focus,button.faux-link:focus{outline:thin dotted}a:active,a:hover,button.faux-link:active,button.faux-link:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:'\201C' '\201D' '\2018' '\2019'}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}*,::after,::before{box-sizing:border-box}body,html{display:-webkit-box;display:flex;width:100%}html{background:linear-gradient(to left top,#67caff,#0085cd);background-attachment:fixed;height:100%}body{display:-webkit-box;display:flex;min-height:100%;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.grid{-webkit-box-flex:1;flex:1;overflow:auto}main{margin:auto;text-align:center}aside{position:relative;display:-webkit-box;display:flex;flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;width:100%;padding:15px;background:#fff;text-align:center;color:#55646b;text-shadow:none}aside .icon{margin-right:10px;fill:#4baaf4}aside p{margin:0}aside a,aside button.faux-link{color:#4baaf4}aside a.tab-focus,aside button.faux-link.tab-focus{outline:0;box-shadow:0 0 0 3px rgba(75,170,244,.35)}.grid{margin:0 auto;padding:20px}@media only screen and (min-width:768px){.grid{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;width:100%;max-width:1280px}.grid>*{-webkit-box-flex:1;flex:1}}html{font-size:100%}body{font-family:Gordita,Avenir,'Helvetica Neue',sans-serif;line-height:1.75;color:#fff;font-weight:500;text-shadow:0 1px 1px rgba(0,0,0,.15);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:15px;font-size:.938rem}button,input,select,textarea{font:inherit}p,small{margin:0 0 20px}small{display:block;font-size:13px;font-size:.813rem}h1{margin:0 0 10px;font-weight:600;letter-spacing:-.025em;font-size:64px;font-size:4rem}.button,.button__count{position:relative;display:-webkit-inline-box;display:inline-flex;vertical-align:middle;-webkit-box-align:center;align-items:center;padding:15px;border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,.1);background:#fff;border:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-shadow:none;color:#55646b}.button{padding-left:20px;padding-right:20px;transition:all .2s ease;font-weight:600}.button:focus,.button:hover{color:#343f4a;outline:0}.button:focus::after,.button:hover::after{display:none}.button.tab-focus{outline:0;box-shadow:0 0 0 3px rgba(255,255,255,.35)}.button__count{margin-left:10px;-webkit-animation:fadein .2s ease;animation:fadein .2s ease;font-weight:500}.button__count::before{content:'';position:absolute;width:0;height:0;right:100%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);border:5px solid transparent;border-right-color:#fff;border-left-width:0}header{padding-bottom:20px;text-align:center}header p{margin-bottom:30px}header .action{display:-webkit-inline-box;display:inline-flex}header .action .button .icon{flex-shrink:0}@media only screen and (min-width:768px){header{max-width:400px;margin-right:40px;padding-bottom:40px;text-align:left}}.icon{fill:currentColor;width:16px;height:16px;vertical-align:-3px}a svg,button svg,button.faux-link svg,label svg{pointer-events:none}.btn .icon,a .icon,button.faux-link .icon{margin-right:6px}button.faux-link{position:relative;margin:0;padding:0;width:auto;border:0;background:0 0;vertical-align:baseline;text-align:inherit;font:inherit;line-height:1.75;cursor:pointer;-moz-user-select:text;text-shadow:inherit;border-radius:0}a,button.faux-link{position:relative;border-bottom:1px dotted currentColor;transition:all .2s ease;text-decoration:none;color:#fff;font-weight:600}a::after,button.faux-link::after{content:'';position:absolute;top:100%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:0;height:1px;transition:width .2s ease;background:currentColor}a:focus,a:hover,button.faux-link:focus,button.faux-link:hover{border-bottom-color:transparent;outline:0}a:focus::after,a:hover::after,button.faux-link:focus::after,button.faux-link:hover::after{width:100%}a.tab-focus,button.faux-link.tab-focus{outline:0;box-shadow:0 0 0 3px rgba(255,255,255,.35)}li,ul{list-style:none;margin:0;padding:0}nav{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;margin-bottom:20px}video{max-width:100%;vertical-align:middle}.plyr{margin:20px auto;border-radius:4px;box-shadow:0 2px 5px rgba(0,0,0,.2)}.plyr__video-wrapper::after{content:'';pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0;border:1px solid rgba(0,0,0,.15);border-radius:inherit}.plyr__cite{display:none;margin-top:20px}.plyr__cite .icon{margin-right:4px}.plyr--audio~ul .plyr__cite--audio,.plyr--video:not(.plyr--youtube):not(.plyr--vimeo)~ul .plyr__cite--video,.plyr--vimeo~ul .plyr__cite--vimeo,.plyr--youtube~ul .plyr__cite--youtube{display:block} \ No newline at end of file
diff --git a/demo/dist/error.css b/demo/dist/error.css
index 7ab25fd0..b99116cd 100644
--- a/demo/dist/error.css
+++ b/demo/dist/error.css
@@ -1 +1 @@
-@font-face{font-family:Avenir;src:local('Avenir-Medium'),url(https://cdn.plyr.io/static/fonts/avenir-medium.woff2) format('woff2'),url(https://cdn.plyr.io/static/fonts/avenir-medium.woff) format('woff');font-style:normal;font-weight:500;font-display:swap}@font-face{font-family:Avenir;src:local('Avenir-Heavy'),url(https://cdn.plyr.io/static/fonts/avenir-bold.woff2) format('woff2'),url(https://cdn.plyr.io/static/fonts/avenir-bold.woff) format('woff');font-style:normal;font-weight:700;font-display:swap}@font-face{font-family:Avenir;src:local('Avenir-Black'),url(https://cdn.plyr.io/static/fonts/avenir-black.woff2?v=3) format('woff2'),url(https://cdn.plyr.io/static/fonts/avenir-black.woff?v=3) format('woff');font-style:normal;font-weight:900;font-display:swap}/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a,button.faux-link{background:0 0}a:focus,button.faux-link:focus{outline:thin dotted}a:active,a:hover,button.faux-link:active,button.faux-link:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:'\201C' '\201D' '\2018' '\2019'}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}.error body,html.error{height:100%}html.error{background:linear-gradient(to left top,#67caff,#0085cd);background-attachment:fixed}.error body{width:100%;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.error main{width:100%;padding:20px;text-align:center}.error main p{font-size:18px;font-size:1.125rem}html{font-size:100%}body{font-family:Avenir,'Helvetica Neue',sans-serif;line-height:1.5;color:#fff;font-weight:500;text-shadow:0 1px 1px rgba(0,0,0,.15);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}p,small{margin:0 0 20px}small{display:block;font-size:14px;font-size:.875rem}h1{margin:0 0 10px;font-weight:900;letter-spacing:-.025em;font-size:64px;font-size:4rem}.button,.button__count{position:relative;display:-webkit-inline-box;display:inline-flex;vertical-align:middle;-webkit-box-align:center;align-items:center;padding:15px;border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,.1);background:#fff;border:0;color:#55646b;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:700;text-shadow:none}.button{padding-left:20px;padding-right:20px;transition:all .2s ease}.button:focus,.button:hover{color:#343f4a;outline:0}.button:focus::after,.button:hover::after{display:none}.button.tab-focus{outline:0;box-shadow:0 0 0 3px rgba(255,255,255,.35)}.button__count{margin-left:10px;-webkit-animation:fadein .2s ease;animation:fadein .2s ease}.button__count::before{content:'';position:absolute;width:0;height:0;right:100%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);border:5px solid transparent;border-right-color:#fff;border-left-width:0}button.faux-link{position:relative;margin:0;padding:0;width:auto;border:0;background:0 0;vertical-align:baseline;text-align:inherit;font:inherit;line-height:1.5;cursor:pointer;-moz-user-select:text;text-shadow:inherit;border-radius:0}a,button.faux-link{position:relative;border-bottom:1px dotted currentColor;transition:all .2s ease;text-decoration:none;color:#fff;font-weight:700}a::after,button.faux-link::after{content:'';position:absolute;top:100%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:0;height:1px;transition:width .2s ease;background:currentColor}a:focus,a:hover,button.faux-link:focus,button.faux-link:hover{border-bottom-color:transparent;outline:0}a:focus::after,a:hover::after,button.faux-link:focus::after,button.faux-link:hover::after{width:100%}a.tab-focus,button.faux-link.tab-focus{outline:0;box-shadow:0 0 0 3px rgba(255,255,255,.35)} \ No newline at end of file
+@font-face{font-family:Gordita;src:url(https://cdn.plyr.io/static/fonts/gordita-light.woff2) format('woff2'),url(https://cdn.plyr.io/static/fonts/gordita-light.woff) format('woff2');font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Gordita;src:url(https://cdn.plyr.io/static/fonts/gordita-regular.woff2) format('woff2'),url(https://cdn.plyr.io/static/fonts/gordita-regular.woff) format('woff2');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Gordita;src:url(https://cdn.plyr.io/static/fonts/gordita-medium.woff2) format('woff2'),url(https://cdn.plyr.io/static/fonts/gordita-medium.woff) format('woff2');font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Gordita;src:url(https://cdn.plyr.io/static/fonts/gordita-bold.woff2) format('woff2'),url(https://cdn.plyr.io/static/fonts/gordita-bold.woff) format('woff2');font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Gordita;src:url(https://cdn.plyr.io/static/fonts/gordita-black.woff2) format('woff2'),url(https://cdn.plyr.io/static/fonts/gordita-black.woff) format('woff2');font-weight:900;font-style:normal;font-display:swap}/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a,button.faux-link{background:0 0}a:focus,button.faux-link:focus{outline:thin dotted}a:active,a:hover,button.faux-link:active,button.faux-link:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:'\201C' '\201D' '\2018' '\2019'}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}.error body,html.error{height:100%}html.error{background:linear-gradient(to left top,#67caff,#0085cd);background-attachment:fixed}.error body{width:100%;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.error main{width:100%;padding:20px;text-align:center}.error main p{font-size:18px;font-size:1.125rem}html{font-size:100%}body{font-family:Gordita,Avenir,'Helvetica Neue',sans-serif;line-height:1.75;color:#fff;font-weight:500;text-shadow:0 1px 1px rgba(0,0,0,.15);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:15px;font-size:.938rem}button,input,select,textarea{font:inherit}p,small{margin:0 0 20px}small{display:block;font-size:13px;font-size:.813rem}h1{margin:0 0 10px;font-weight:600;letter-spacing:-.025em;font-size:64px;font-size:4rem}.button,.button__count{position:relative;display:-webkit-inline-box;display:inline-flex;vertical-align:middle;-webkit-box-align:center;align-items:center;padding:15px;border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,.1);background:#fff;border:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-shadow:none;color:#55646b}.button{padding-left:20px;padding-right:20px;transition:all .2s ease;font-weight:600}.button:focus,.button:hover{color:#343f4a;outline:0}.button:focus::after,.button:hover::after{display:none}.button.tab-focus{outline:0;box-shadow:0 0 0 3px rgba(255,255,255,.35)}.button__count{margin-left:10px;-webkit-animation:fadein .2s ease;animation:fadein .2s ease;font-weight:500}.button__count::before{content:'';position:absolute;width:0;height:0;right:100%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);border:5px solid transparent;border-right-color:#fff;border-left-width:0}button.faux-link{position:relative;margin:0;padding:0;width:auto;border:0;background:0 0;vertical-align:baseline;text-align:inherit;font:inherit;line-height:1.75;cursor:pointer;-moz-user-select:text;text-shadow:inherit;border-radius:0}a,button.faux-link{position:relative;border-bottom:1px dotted currentColor;transition:all .2s ease;text-decoration:none;color:#fff;font-weight:600}a::after,button.faux-link::after{content:'';position:absolute;top:100%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:0;height:1px;transition:width .2s ease;background:currentColor}a:focus,a:hover,button.faux-link:focus,button.faux-link:hover{border-bottom-color:transparent;outline:0}a:focus::after,a:hover::after,button.faux-link:focus::after,button.faux-link:hover::after{width:100%}a.tab-focus,button.faux-link.tab-focus{outline:0;box-shadow:0 0 0 3px rgba(255,255,255,.35)} \ No newline at end of file
diff --git a/demo/index.html b/demo/index.html
index 6a8ce4ff..aaeb0191 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -33,16 +33,15 @@
<link rel="stylesheet" href="dist/demo.css">
<!-- Preload -->
- <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-medium.woff2">
- <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-bold.woff2">
- <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-black.woff2?v=3">
+ <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2">
+ <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2">
</head>
<body>
<div class="grid">
<header>
<h1>Plyr</h1>
- <p>A simple, accessible
+ <p>A simple, accessible and customisable media player for
<button type="button" class="faux-link" data-source="video">
<svg class="icon" title="HTML5">
<path d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"></path>
@@ -62,7 +61,7 @@
<path d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5
C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4
c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"></path>
- </svg>Vimeo</button> media player.
+ </svg>Vimeo</button>
</p>
<span class="action">
@@ -84,7 +83,7 @@
<main>
<video controls crossorigin playsinline poster="media/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
<!-- Video files -->
- <source src="media/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
+ <!--<source src="media/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">-->
<source src="media/View_From_A_Blue_Moon_Trailer-UHD.mp4" type="video/mp4">
<!-- Text track file -->
@@ -114,7 +113,7 @@
</li>
<li class="plyr__cite plyr__cite--youtube" hidden>
<small>
- <a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on
+ <a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on&nbsp;
<span class="color--youtube">
<svg class="icon" title="YouTube">
<path d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8
@@ -126,7 +125,7 @@
</li>
<li class="plyr__cite plyr__cite--vimeo" hidden>
<small>
- <a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on
+ <a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on&nbsp;
<span class="color--vimeo">
<svg class="icon" title="Vimeo">
<path d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5
diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less
index 530addc2..e7e5bac3 100644
--- a/demo/src/less/components/buttons.less
+++ b/demo/src/less/components/buttons.less
@@ -14,10 +14,9 @@
box-shadow: 0 1px 1px fade(#000, 10%);
background: #fff;
border: 0;
- color: @gray;
user-select: none;
- font-weight: @font-weight-bold;
text-shadow: none;
+ color: @gray;
}
// Buttons
@@ -25,6 +24,7 @@
padding-left: @spacing-base;
padding-right: @spacing-base;
transition: all 0.2s ease;
+ font-weight: @font-weight-bold;
&:hover,
&:focus {
@@ -45,6 +45,7 @@
.button__count {
margin-left: (@spacing-base / 2);
animation: fadein 0.2s ease;
+ font-weight: @font-weight-medium;
&::before {
content: '';
diff --git a/demo/src/less/components/header.less b/demo/src/less/components/header.less
index 83ba6c5d..5842bf92 100644
--- a/demo/src/less/components/header.less
+++ b/demo/src/less/components/header.less
@@ -8,7 +8,6 @@ header {
p {
margin-bottom: (@spacing-base * 1.5);
- .font-size(@font-size-large);
}
.action {
diff --git a/demo/src/less/components/icons.less b/demo/src/less/components/icons.less
index 9180e4b3..92b0567e 100644
--- a/demo/src/less/components/icons.less
+++ b/demo/src/less/components/icons.less
@@ -7,7 +7,7 @@
fill: currentColor;
width: @icon-size;
height: @icon-size;
- vertical-align: -0.15em;
+ vertical-align: -3px;
}
// Within elements
@@ -19,5 +19,5 @@ label svg {
a .icon,
.btn .icon {
- margin-right: (@spacing-base / 4);
+ margin-right: floor(@spacing-base / 3);
}
diff --git a/demo/src/less/components/players.less b/demo/src/less/components/players.less
index c7cc0839..8dfdcfe3 100644
--- a/demo/src/less/components/players.less
+++ b/demo/src/less/components/players.less
@@ -33,7 +33,7 @@ video {
margin-top: @spacing-base;
.icon {
- margin-right: (@spacing-base / 4);
+ margin-right: ceil(@spacing-base / 6);
}
}
diff --git a/demo/src/less/lib/fontface.less b/demo/src/less/lib/fontface.less
index 2ae6e8f4..0056e36d 100644
--- a/demo/src/less/lib/fontface.less
+++ b/demo/src/less/lib/fontface.less
@@ -3,28 +3,46 @@
// ==========================================================================
@font-face {
- font-family: 'Avenir';
- src: local('Avenir-Medium'), url('https://cdn.plyr.io/static/fonts/avenir-medium.woff2') format('woff2'),
- url('https://cdn.plyr.io/static/fonts/avenir-medium.woff') format('woff');
+ font-family: 'Gordita';
+ src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'),
+ url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff2');
+ font-weight: @font-weight-light;
font-style: normal;
- font-weight: @font-weight-base;
font-display: swap;
}
@font-face {
- font-family: 'Avenir';
- src: local('Avenir-Heavy'), url('https://cdn.plyr.io/static/fonts/avenir-bold.woff2') format('woff2'),
- url('https://cdn.plyr.io/static/fonts/avenir-bold.woff') format('woff');
+ font-family: 'Gordita';
+ src: url('https://cdn.plyr.io/static/fonts/gordita-regular.woff2') format('woff2'),
+ url('https://cdn.plyr.io/static/fonts/gordita-regular.woff') format('woff2');
+ font-weight: @font-weight-regular;
font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Gordita';
+ src: url('https://cdn.plyr.io/static/fonts/gordita-medium.woff2') format('woff2'),
+ url('https://cdn.plyr.io/static/fonts/gordita-medium.woff') format('woff2');
+ font-weight: @font-weight-medium;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Gordita';
+ src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'),
+ url('https://cdn.plyr.io/static/fonts/gordita-bold.woff') format('woff2');
font-weight: @font-weight-bold;
+ font-style: normal;
font-display: swap;
}
@font-face {
- font-family: 'Avenir';
- src: local('Avenir-Black'), url('https://cdn.plyr.io/static/fonts/avenir-black.woff2?v=3') format('woff2'),
- url('https://cdn.plyr.io/static/fonts/avenir-black.woff?v=3') format('woff');
+ font-family: 'Gordita';
+ src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'),
+ url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff2');
+ font-weight: @font-weight-black;
font-style: normal;
- font-weight: @font-weight-heavy;
font-display: swap;
}
diff --git a/demo/src/less/settings/type.less b/demo/src/less/settings/type.less
index 8375858d..dc6dbce1 100644
--- a/demo/src/less/settings/type.less
+++ b/demo/src/less/settings/type.less
@@ -2,17 +2,19 @@
// Typography
// ==========================================================================
-@font-sans-serif: 'Avenir', 'Helvetica Neue', sans-serif;
+@font-sans-serif: 'Gordita', 'Avenir', 'Helvetica Neue', sans-serif;
-@font-size-base: 16;
-@font-size-small: 14;
+@font-size-base: 15;
+@font-size-small: 13;
@font-size-large: 18;
@font-size-h1: 64;
-@font-weight-base: 500;
-@font-weight-bold: 700;
-@font-weight-heavy: 900;
+@font-weight-light: 300;
+@font-weight-regular: 400;
+@font-weight-medium: 500;
+@font-weight-bold: 600;
+@font-weight-black: 900;
-@line-height-base: 1.5;
+@line-height-base: 1.75;
@letter-spacing-headings: -0.025em;
diff --git a/demo/src/less/type/base.less b/demo/src/less/type/base.less
index f65fb634..70eddcb4 100644
--- a/demo/src/less/type/base.less
+++ b/demo/src/less/type/base.less
@@ -11,9 +11,10 @@ body {
font-family: @font-sans-serif;
line-height: @line-height-base;
color: @color-text;
- font-weight: @font-weight-base;
+ font-weight: @font-weight-medium;
text-shadow: 0 1px 1px fade(#000, 15%);
.font-smoothing();
+ .font-size(@font-size-base);
}
button,
diff --git a/demo/src/less/type/headings.less b/demo/src/less/type/headings.less
index ee289ae0..5e46bf34 100644
--- a/demo/src/less/type/headings.less
+++ b/demo/src/less/type/headings.less
@@ -4,7 +4,7 @@
h1 {
margin: 0 0 (@spacing-base / 2);
- font-weight: @font-weight-heavy;
+ font-weight: @font-weight-bold;
letter-spacing: @letter-spacing-headings;
.font-size(@font-size-h1);
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-09-14 13:23:39 +0000