aboutsummaryrefslogtreecommitdiffstats
path: root/docs/src/less
diff options
context:
space:
mode:
Diffstat (limited to 'docs/src/less')
-rw-r--r--docs/src/less/components/base.less45
-rw-r--r--docs/src/less/components/buttons.less144
-rw-r--r--docs/src/less/components/error.less19
-rw-r--r--docs/src/less/components/examples.less39
-rw-r--r--docs/src/less/components/panels.less13
-rw-r--r--docs/src/less/components/type.less47
-rw-r--r--docs/src/less/docs.less240
-rw-r--r--docs/src/less/lib/animation.less9
-rw-r--r--docs/src/less/lib/fontface.less10
-rw-r--r--docs/src/less/variables.less30
10 files changed, 369 insertions, 227 deletions
diff --git a/docs/src/less/components/base.less b/docs/src/less/components/base.less
new file mode 100644
index 00000000..81a68058
--- /dev/null
+++ b/docs/src/less/components/base.less
@@ -0,0 +1,45 @@
+// ==========================================================================
+// Base layout
+// ==========================================================================
+
+// BORDER-BOX ALL THE THINGS!
+// http://paulirish.com/2012/box-sizing-border-box-ftw/
+*, *::after, *::before {
+ box-sizing: border-box;
+}
+
+// Base
+html {
+ font-size: 100%;
+}
+body {
+ font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ background: @body-background;
+ line-height: 1.5;
+ text-align: center;
+ color: @gray;
+ .font-smoothing(on);
+}
+
+// Header
+header {
+ padding: @padding-base;
+ margin-bottom: @padding-base;
+
+ p {
+ .font-size(18);
+ }
+ @media (min-width: @screen-sm) {
+ padding-top: (@padding-base * 3);
+ padding-bottom: (@padding-base * 3);
+ }
+}
+
+// Sections
+section {
+ padding-bottom: @padding-base;
+
+ @media (min-width: @screen-sm) {
+ padding-bottom: (@padding-base * 2);
+ }
+} \ No newline at end of file
diff --git a/docs/src/less/components/buttons.less b/docs/src/less/components/buttons.less
new file mode 100644
index 00000000..749cd11f
--- /dev/null
+++ b/docs/src/less/components/buttons.less
@@ -0,0 +1,144 @@
+// ==========================================================================
+// Buttons
+// ==========================================================================
+
+nav {
+ ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ font-size: 0;
+ }
+ li {
+ display: inline-block;
+ margin-top: (@padding-base / 2);
+ .font-size();
+ white-space: nowrap;
+ }
+ li + li {
+ margin-left: @padding-base;
+ }
+}
+
+// Tabs
+.btn-bar {
+ position: relative;
+ margin: 0 auto @padding-base;
+ max-width: @example-width-video;
+
+ &::before {
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 0;
+ right: 0;
+ height: 1px;
+ background: @gray-lighter;
+ }
+
+ ul {
+ position: relative;
+ z-index: 1;
+ display: inline-block;
+ user-select: none;
+ }
+ li {
+ margin: 0;
+
+ &:first-child .btn {
+ border-radius: 4px 0 0 4px;
+ }
+ &:last-child .btn {
+ border-radius: 0 4px 4px 0;
+ }
+ & + li .btn {
+ margin-left: -1px;
+ }
+ }
+ .btn {
+ display: block;
+ border-radius: 0;
+ }
+ .active {
+ &:extend(.btn-primary);
+ }
+ .btn.active {
+ box-shadow: inset 0 1px 1px rgba(0,0,0, .2);
+ position: relative;
+ z-index: 1;
+ }
+
+ @media (min-width: 560px) {
+ margin-bottom: (@padding-base * 2);
+ }
+}
+
+// Shared
+.btn,
+.btn-count {
+ display: inline-block;
+ vertical-align: middle;
+ border-radius: @border-radius-base;
+ font-weight: 600;
+ user-select: none;
+}
+
+// Buttons
+.btn {
+ padding: (@padding-base / 2) @padding-base;
+ background: @body-background;
+ border: 1px solid @gray-light;
+ box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0, .05);
+ text-shadow: 0 1px 1px #fff;
+ color: @gray;
+
+ &:hover,
+ &:focus {
+ background-color: #fff;
+ border-color: darken(@gray-light, 5%);
+ color: @link-color;
+ outline: 0;
+ }
+}
+.btn-primary {
+ background: linear-gradient(@link-color, darken(@link-color, 3%));
+ border-color: darken(@link-color, 10%);
+ box-shadow: 0 1px 1px rgba(0,0,0, .15);
+ text-shadow: 0 1px 1px rgba(0,0,0, .1);
+ color: #fff;
+
+ &:hover,
+ &:focus {
+ color: #fff;
+ border-color: darken(@link-color, 20%);
+ }
+}
+.btn-small {
+ padding-top: ceil(@padding-base / 3);
+ padding-bottom: ceil(@padding-base / 3);
+}
+
+// Count bubble
+.btn-count {
+ position: relative;
+ margin-left: 6px;
+ padding: ((@padding-base / 2) - 1px);
+ background: @body-background;
+ border: 1px solid @gray-light;
+
+ &::before {
+ content: "";
+ position: absolute;
+ display: block;
+ width: @arrow-size;
+ height: @arrow-size;
+ left: 1px;
+ top: 50%;
+ margin-top: -(@arrow-size / 2);
+
+ background: inherit;
+ border: inherit;
+ border-width: 1px 0 0 1px;
+ transform: rotate(-45deg) translate(-50%, -50%);
+ }
+} \ No newline at end of file
diff --git a/docs/src/less/components/error.less b/docs/src/less/components/error.less
new file mode 100644
index 00000000..b1427173
--- /dev/null
+++ b/docs/src/less/components/error.less
@@ -0,0 +1,19 @@
+// ==========================================================================
+// Errors (AWS pages)
+// ==========================================================================
+
+// Error page
+html.error,
+.error body {
+ height: 100%;
+}
+.error body {
+ width: 100%;
+ display: table;
+ table-layout: fixed;
+}
+.error main {
+ display: table-cell;
+ width: 100%;
+ vertical-align: middle;
+} \ No newline at end of file
diff --git a/docs/src/less/components/examples.less b/docs/src/less/components/examples.less
new file mode 100644
index 00000000..9c145847
--- /dev/null
+++ b/docs/src/less/components/examples.less
@@ -0,0 +1,39 @@
+// ==========================================================================
+// Examples
+// ==========================================================================
+
+// Example players
+.example-audio .player,
+.example-video .player {
+ margin: 0 auto @padding-base;
+
+ &-controls {
+ border-radius: 0 0 @border-radius-base @border-radius-base;
+ }
+}
+.example-audio .player {
+ max-width: @example-width-audio;
+
+ &-controls {
+ border-radius: @border-radius-base;
+ }
+ &-progress {
+ border-radius: @border-radius-base @border-radius-base 0 0;
+ overflow: hidden;
+ }
+}
+.example-video .player {
+ max-width: @example-width-video;
+
+ video,
+ iframe {
+ border-radius: @border-radius-base @border-radius-base 0 0;
+ }
+ iframe {
+ -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
+ }
+ &-fullscreen,
+ &.fullscreen-active {
+ max-width: none;
+ }
+} \ No newline at end of file
diff --git a/docs/src/less/components/panels.less b/docs/src/less/components/panels.less
new file mode 100644
index 00000000..290e5dfc
--- /dev/null
+++ b/docs/src/less/components/panels.less
@@ -0,0 +1,13 @@
+// ==========================================================================
+// Panels
+// ==========================================================================
+
+// Panels
+.panel {
+ display: none;
+
+ &.active {
+ display: block;
+ animation: fade-in .3s ease;
+ }
+} \ No newline at end of file
diff --git a/docs/src/less/components/type.less b/docs/src/less/components/type.less
new file mode 100644
index 00000000..97652342
--- /dev/null
+++ b/docs/src/less/components/type.less
@@ -0,0 +1,47 @@
+// ==========================================================================
+// Typography
+// ==========================================================================
+
+// Headings
+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;
+}
+
+// Paragraph and small
+p,
+small {
+ margin: 0 0 @padding-base;
+}
+small {
+ display: block;
+ padding: 0 (@padding-base / 2);
+ .font-size(14);
+}
+
+// Links
+a {
+ text-decoration: none;
+ color: @link-color;
+ border-bottom: 1px solid currentColor;
+ transition: background .3s ease, color .3s ease;
+
+ &:hover,
+ &:focus {
+ color: @gray-dark;
+ }
+ &:focus {
+ .tab-focus();
+ }
+ &.logo {
+ border: 0;
+ }
+} \ No newline at end of file
diff --git a/docs/src/less/docs.less b/docs/src/less/docs.less
index 12b0674a..cea3a2af 100644
--- a/docs/src/less/docs.less
+++ b/docs/src/less/docs.less
@@ -2,239 +2,33 @@
// HTML5 Video Player Demo Page
// ==========================================================================
-// Reset
+// CSS Reset
@import "lib/normalize.less";
+
// Mixins
@import "lib/mixins.less";
-// Fonts - docs only!
-@import "lib/fontface.less";
// Variables
-// ---------------------------------------
-// Colors
-@blue: #3498db;
-@gray-dark: #343f4a;
-@gray: #565d64;
-@gray-light: #cbd0d3;
-@off-white: #f2f5f7;
-
-// Elements
-@link-color: @blue;
-@padding-base: 20px;
-@arrow-size: 8px;
-
-// Breakpoints
-@screen-md: 768px;
-
-// BORDER-BOX ALL THE THINGS!
-// http://paulirish.com/2012/box-sizing-border-box-ftw/
-*, *::after, *::before {
- box-sizing: border-box;
-}
+@import "variables.less";
-// Base
-html {
- font-size: 100%;
-}
-body {
- font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
- background: @off-white;
- line-height: 1.5;
- text-align: center;
- color: @gray;
- .font-smoothing(on);
-}
+// Animation
+@import "lib/animation.less";
-// Error page
-html.error,
-.error body {
- height: 100%;
-}
-.error body {
- width: 100%;
- display: table;
- table-layout: fixed;
-}
-.error main {
- display: table-cell;
- width: 100%;
- vertical-align: middle;
-}
+// Base layout
+@import "components/base.less";
// 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
-.actions {
- list-style: none;
- margin: 0;
- padding: 0;
- font-size: 0;
-
- li {
- display: inline-block;
- margin-top: (@padding-base / 2);
- .font-size();
- white-space: nowrap;
- }
- li + li {
- margin-left: @padding-base;
- }
-}
-a {
- text-decoration: none;
- color: @link-color;
- border-bottom: 1px solid currentColor;
- transition: all .3s ease;
-
- &:hover,
- &:focus {
- color: #000;
- }
- &:focus {
- .tab-focus();
- }
- &.logo {
- border: 0;
- }
-}
-.btn,
-.btn-count {
- display: inline-block;
- vertical-align: middle;
- border-radius: 3px;
- font-weight: 600;
- user-select: none;
-}
-.btn {
- padding: (@padding-base / 2) @padding-base;
- background: @link-color;
- border: 0;
- color: #fff;
-
- &:hover,
- &:focus {
- color: #fff;
- background: darken(@link-color, 5%);
- }
-
- &-twitter {
- background: #8799A2;
-
- &:hover,
- &:focus {
- background: darken(#8799A2, 5%);
- }
- }
-}
-.btn-count {
- position: relative;
- margin-left: 6px;
- padding: ((@padding-base / 2) - 1px);
- background: #fff;
- border: 1px solid @gray-light;
-
- &::before {
- content: "";
- position: absolute;
- display: block;
- width: @arrow-size;
- height: @arrow-size;
- left: 1px;
- top: 50%;
- margin-top: -(@arrow-size / 2);
-
- background: inherit;
- border: inherit;
- border-width: 1px 0 0 1px;
- transform: rotate(-45deg) translate(-50%, -50%);
- }
-}
-
-// Example players
-.example-audio .player,
-.example-video .player {
- margin: 0 auto @padding-base;
-
- &-controls {
- border-radius: 0 0 4px 4px;
- }
-}
-.example-audio .player {
- max-width: 520px;
+@import "lib/fontface.less";
+@import "components/type.less";
- &-controls {
- border-radius: 4px;
- }
- &-progress {
- border-radius: 4px 4px 0 0;
- overflow: hidden;
- }
-}
-.example-video .player {
- max-width: 1200px;
+// Buttons
+@import "components/buttons.less";
- video,
- iframe {
- border-radius: 4px 4px 0 0;
- }
- iframe {
- -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
- }
- &-fullscreen,
- &.fullscreen-active {
- max-width: none;
- }
-}
+// Panels
+@import "components/panels.less";
-// Footer
-footer {
- margin-bottom: @padding-base;
+// Error
+@import "components/error.less";
- p {
- margin-bottom: (@padding-base / 2);
- }
-} \ No newline at end of file
+// Examples
+@import "components/examples.less"; \ No newline at end of file
diff --git a/docs/src/less/lib/animation.less b/docs/src/less/lib/animation.less
new file mode 100644
index 00000000..386c6613
--- /dev/null
+++ b/docs/src/less/lib/animation.less
@@ -0,0 +1,9 @@
+// ==========================================================================
+// Animations
+// ==========================================================================
+
+// Fade
+@keyframes fade-in {
+ 0% { opacity: 0 }
+ 100% { opacity: 1 }
+} \ No newline at end of file
diff --git a/docs/src/less/lib/fontface.less b/docs/src/less/lib/fontface.less
index 479f7fa4..9442f17d 100644
--- a/docs/src/less/lib/fontface.less
+++ b/docs/src/less/lib/fontface.less
@@ -1,16 +1,18 @@
+// ==========================================================================
+// Fonts
+// ==========================================================================
+
@font-face {
font-family: "Avenir";
src: url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"),
- url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff"),
- url("//cdn.plyr.io/fonts/avenir-medium.ttf") format("truetype");
+ url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Avenir";
src: url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"),
- url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff"),
- url("//cdn.plyr.io/fonts/avenir-bold.ttf") format("truetype");
+ url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff");
font-style: normal;
font-weight: 600;
} \ No newline at end of file
diff --git a/docs/src/less/variables.less b/docs/src/less/variables.less
new file mode 100644
index 00000000..4ea34d84
--- /dev/null
+++ b/docs/src/less/variables.less
@@ -0,0 +1,30 @@
+// ==========================================================================
+// Variables
+// ==========================================================================
+
+// Colors
+@blue: #3498db;
+@gray-dark: #343f4a;
+@gray: #55646b;
+@gray-light: #cbd0d3;
+@gray-lighter: #dbe3e8;
+@off-white: #f2f5f7;
+
+// Base
+@body-background: @off-white;
+
+// Elements
+@link-color: @blue;
+@padding-base: 20px;
+@arrow-size: 8px;
+
+// Breakpoints
+@screen-sm: 480px;
+@screen-md: 768px;
+
+// Radii
+@border-radius-base: 4px;
+
+// Examples
+@example-width-audio: 520px;
+@example-width-video: 1200px; \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-10 02:25:57 +0000