diff options
Diffstat (limited to 'docs/src')
| -rw-r--r-- | docs/src/less/components/base.less | 5 | ||||
| -rw-r--r-- | docs/src/less/components/buttons.less | 3 | ||||
| -rw-r--r-- | docs/src/less/components/examples.less | 49 | ||||
| -rw-r--r-- | docs/src/less/components/type.less | 5 | ||||
| -rw-r--r-- | docs/src/less/lib/fontface.less | 4 | ||||
| -rw-r--r-- | docs/src/less/variables.less | 21 |
6 files changed, 36 insertions, 51 deletions
diff --git a/docs/src/less/components/base.less b/docs/src/less/components/base.less index 05b5fb52..c584b57e 100644 --- a/docs/src/less/components/base.less +++ b/docs/src/less/components/base.less @@ -16,10 +16,11 @@ // Base html { height: 100%; - background: linear-gradient(#fff, @body-background) fixed; + background: @body-background fixed; } body { - padding: 0 (@padding-base / 2); + margin: 0; + padding: (@padding-base / 2); } // Header diff --git a/docs/src/less/components/buttons.less b/docs/src/less/components/buttons.less index 7970a861..c99a0836 100644 --- a/docs/src/less/components/buttons.less +++ b/docs/src/less/components/buttons.less @@ -93,12 +93,13 @@ nav { vertical-align: middle; border-radius: @border-radius-base; user-select: none; + font-weight: @font-weight-bold; } // Buttons .btn { padding: (@padding-base / 2) ((@padding-base / 2) + 2); - background: linear-gradient(lighten(@body-background, 2%), darken(@body-background, 3%)); + background: linear-gradient(lighten(@off-white, 2%), darken(@off-white, 3%)); border: 1px solid @gray-light; box-shadow: 0 1px 1px rgba(0,0,0, .05); text-shadow: 0 1px 1px #fff; diff --git a/docs/src/less/components/examples.less b/docs/src/less/components/examples.less index b57763fd..24bf1e9c 100644 --- a/docs/src/less/components/examples.less +++ b/docs/src/less/components/examples.less @@ -7,49 +7,30 @@ section { max-width: @example-width-video; } -video, -.plyr__video-embed { +// For non supported browsers +video { max-width: 100%; vertical-align: middle; } -.plyr__video-embed { - -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); -} // Example players .plyr { margin: 0 auto; - border-radius: @border-radius-base; - - &--fullscreen, - &--fullscreen-active { - max-width: none; - - .plyr-controls, - video, - iframe { - border-radius: 0; - } - iframe { - -webkit-mask-image: none; - } - } + border-radius: @border-radius-large; } .plyr--audio { max-width: @example-width-audio; - - /*.plyr__controls { - border-radius: @border-radius-base; - } - .plyr__progress { - border-radius: @border-radius-base @border-radius-base 0 0; - - progress, - [type='range'] { - border-radius: @border-radius-base @border-radius-base 0 0; - overflow: hidden; - } - }*/ +} +.plyr--video::after { + content: ""; + pointer-events: none; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: 1px solid fade(#000, 15%); + border-radius: inherit; } // Style full supported player @@ -62,7 +43,7 @@ video, } } -.plyr--video ~ ul .plyr__cite--video, +.plyr--video:not(.plyr--youtube):not(.plyr--vimeo) ~ ul .plyr__cite--video, .plyr--audio ~ ul .plyr__cite--audio, .plyr--youtube ~ ul .plyr__cite--youtube, .plyr--vimeo ~ ul .plyr__cite--vimeo { diff --git a/docs/src/less/components/type.less b/docs/src/less/components/type.less index d16a8865..951be36d 100644 --- a/docs/src/less/components/type.less +++ b/docs/src/less/components/type.less @@ -12,21 +12,20 @@ body { text-align: center; color: @gray; font-weight: @font-weight-base; + .font-smoothing(); } // Headings h1, h2 { letter-spacing: -.025em; - color: #2E3C44; + color: @brand-primary; margin: 0 0 (@padding-base / 2); line-height: 1.2; - .font-smoothing(); font-weight: @font-weight-bold; } h1 { .font-size(@font-size-h1); - color: #3498DB; } // Paragraph and small diff --git a/docs/src/less/lib/fontface.less b/docs/src/less/lib/fontface.less index 7372023c..a7da5ad9 100644 --- a/docs/src/less/lib/fontface.less +++ b/docs/src/less/lib/fontface.less @@ -2,7 +2,7 @@ // Fonts // ========================================================================== -/*@font-face { +@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"); @@ -15,4 +15,4 @@ url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff"); font-style: normal; font-weight: @font-weight-bold; -}*/
\ No newline at end of file +}
\ No newline at end of file diff --git a/docs/src/less/variables.less b/docs/src/less/variables.less index 4629d98d..4768cdd6 100644 --- a/docs/src/less/variables.less +++ b/docs/src/less/variables.less @@ -3,43 +3,46 @@ // ========================================================================== // Colors -@blue: #3498db; @gray-dark: #343f4a; @gray: #55646b; @gray-light: #cbd0d3; @gray-lighter: #dbe3e8; @off-white: #f2f5f7; +@brand-primary: #3498db; +@brand-secondary: #02BD9B; + // Brands @color-twitter: #4BAAF4; @color-youtube: #cc181e; @color-vimeo: #19b7ed; // Base -@body-background: @off-white; +@body-background: @off-white; //linear-gradient(to left top, @brand-secondary, @brand-primary); // Type @font-size-base: 16; @font-size-small: 14; @font-size-h1: 64; -@font-weight-base: 500; -@font-weight-bold: 700; +@font-weight-base: 500; +@font-weight-bold: 700; // Elements -@link-color: @blue; +@link-color: @brand-primary; @padding-base: 20px; @arrow-size: 8px; // Icons -@icon-size: 18px; +@icon-size: 18px; // Breakpoints @screen-sm: 480px; @screen-md: 768px; // Radii -@border-radius-base: 4px; +@border-radius-base: 4px; +@border-radius-large: 6px; // Examples -@example-width-audio: 520px; -@example-width-video: 1200px; +@example-width-audio: 520px; +@example-width-video: 1200px; |