diff options
Diffstat (limited to 'docs/src/less/components')
-rw-r--r-- | docs/src/less/components/base.less | 9 | ||||
-rw-r--r-- | docs/src/less/components/buttons.less | 6 | ||||
-rw-r--r-- | docs/src/less/components/examples.less | 17 |
3 files changed, 21 insertions, 11 deletions
diff --git a/docs/src/less/components/base.less b/docs/src/less/components/base.less index 81a68058..b4e5ddf1 100644 --- a/docs/src/less/components/base.less +++ b/docs/src/less/components/base.less @@ -8,17 +8,24 @@ box-sizing: border-box; } +// Hidden +[hidden] { + display: none; +} + // Base html { + height: 100%; font-size: 100%; + background: linear-gradient(#fff, @body-background) fixed; } 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); + padding: 0 (@padding-base / 2); } // Header diff --git a/docs/src/less/components/buttons.less b/docs/src/less/components/buttons.less index 749cd11f..68c1f5d3 100644 --- a/docs/src/less/components/buttons.less +++ b/docs/src/less/components/buttons.less @@ -25,6 +25,7 @@ nav { position: relative; margin: 0 auto @padding-base; max-width: @example-width-video; + white-space: nowrap; &::before { content: ""; @@ -101,7 +102,8 @@ nav { } } .btn-primary { - background: linear-gradient(@link-color, darken(@link-color, 3%)); + background-image: linear-gradient(@link-color, darken(@link-color, 3%)); + background-color: @link-color; 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); @@ -123,7 +125,7 @@ nav { position: relative; margin-left: 6px; padding: ((@padding-base / 2) - 1px); - background: @body-background; + background: #fff; border: 1px solid @gray-light; &::before { diff --git a/docs/src/less/components/examples.less b/docs/src/less/components/examples.less index d91bf727..97087b02 100644 --- a/docs/src/less/components/examples.less +++ b/docs/src/less/components/examples.less @@ -6,7 +6,6 @@ .example-audio .player, .example-video .player { margin: 0 auto @padding-base; - box-shadow: 0 1px 1px rgba(0,0,0, .1); &-controls { border-radius: 0 0 @border-radius-base @border-radius-base; @@ -31,29 +30,31 @@ iframe { border-radius: @border-radius-base; } + iframe { + -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); + } } // Style full supported player .example-video .player-video, -.example-video .player-youtube, -.example-video .player-vimeo { +.example-video .player-youtube { video, - .player-video-wrapper { + iframe { border-radius: @border-radius-base @border-radius-base 0 0; } - .player-video-wrapper { + iframe { -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); } &-fullscreen, &.fullscreen-active { max-width: none; - video, .player-controls, - .player-video-wrapper { + video, + iframe { border-radius: 0; } - .player-video-wrapper { + iframe { -webkit-mask-image: none; } } |