Merge branch 'master' into develop

# Conflicts:
#	dist/plyr.css
#	dist/plyr.js
#	docs/dist/docs.css
#	docs/src/less/components/examples.less
#	src/js/plyr.js
This commit is contained in:
Sam Potts
2015-08-27 07:36:17 +10:00
32 changed files with 675 additions and 370 deletions

View File

@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
// plyr.js v1.3.4
// plyr.js v1.3.5
// https://github.com/selz/plyr
// License: The MIT License (MIT)
// ==========================================================================
@ -1398,6 +1398,7 @@
player.embed.api('seekTo', targetTime);
}
// Trigger timeupdate
_triggerEvent(player.media, 'timeupdate');
if (paused) {
@ -2047,6 +2048,10 @@
if (player.type == 'video' || player.type == 'audio') {
// Bail if no support
if (!player.supported.full) {
// Successful setup
player.init = true;
// Don't inject controls if no full support
return;
}
@ -2197,4 +2202,4 @@
return players;
};
}(this.plyr = this.plyr || {}));
}(this.plyr = this.plyr || {}));

View File

@ -17,7 +17,11 @@
// Font sizes
@font-size-small: 14px;
@font-size-base: 16px;
@font-size-large: ceil((@font-size-base * 1.5));
// Captions
@font-size-captions-base: ceil(@font-size-base * 1.25);
@font-size-captions-medium: ceil(@font-size-base * 1.5);
@font-size-captions-large: (@font-size-base * 2);
// Controls
@control-spacing: 10px;
@ -28,7 +32,8 @@
// Tooltips
@tooltip-bg: @controls-bg;
@tooltip-color: #fff;
@tooltip-border-color: @off-white;
@tooltip-color: @control-color;
@tooltip-padding: @control-spacing;
@tooltip-arrow-size: 5px;
@tooltip-radius: 3px;
@ -197,26 +202,31 @@
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
min-height: 2.5em;
padding: (@control-spacing * 2) (@control-spacing * 2) (@control-spacing * 3);
color: #fff;
font-size: @font-size-base;
font-weight: 600;
text-shadow:
-1px -1px 0 @gray,
1px -1px 0 @gray,
-1px 1px 0 @gray,
1px 1px 0 @gray;
font-size: @font-size-captions-base;
text-align: center;
.font-smoothing();
span {
border-radius: 2px;
padding: 3px 10px;
background: rgba(0,0,0, .9);
}
span:empty {
display: none;
}
@media (min-width: @bp-captions-large) {
font-size: @font-size-large;
font-size: @font-size-captions-medium;
}
}
&.captions-active &-captions {
display: block;
}
&.fullscreen-active &-captions {
font-size: @font-size-captions-large;
}
// Player controls
&-controls {
@ -244,17 +254,20 @@
}
}
input + label,
// Buttons
button {
display: inline-block;
vertical-align: middle;
margin: 0 2px;
padding: (@control-spacing / 2) @control-spacing;
transition: background .3s ease, color .3s ease, opacity .3s ease;
overflow: hidden;
border: 0;
background: transparent;
border-radius: 3px;
cursor: pointer;
color: @control-color;
transition: background .3s ease, color .3s ease, opacity .3s ease;
svg {
width: 18px;
height: 18px;
@ -262,41 +275,27 @@
fill: currentColor;
transition: fill .3s ease;
}
}
input + label,
.inverted:checked + label {
opacity: .5;
}
button,
.inverted + label,
input:checked + label {
color: @control-color;
opacity: 1;
}
button {
border: 0;
background: transparent;
overflow: hidden;
}
// Specificity for overriding .inverted
button:focus,
button:hover,
[type="checkbox"]:focus + label,
[type="checkbox"] + label:hover {
background: @control-bg-hover;
color: @control-color-hover;
opacity: 1;
}
button:focus,
input:focus + label {
outline: 0;
// Hover and tab focus
&.tab-focus,
&:hover {
background: @control-bg-hover;
color: @control-color-hover;
}
// Default focus
&:focus {
outline: 0;
}
}
// Hide toggle icons by default
.icon-exit-fullscreen,
.icon-muted,
.icon-captions-on {
display: none;
}
// Player time
.player-time {
display: inline-block;
vertical-align: middle;
@ -317,7 +316,7 @@
// Add a slash in before
&::before {
content: "\2044";
content: '\2044';
margin-right: @control-spacing;
}
}
@ -325,7 +324,6 @@
// Tooltips
&-tooltip {
visibility: hidden;
position: absolute;
z-index: 2;
bottom: 100%;
@ -334,39 +332,38 @@
opacity: 0;
background: @tooltip-bg;
border: 1px solid @tooltip-border-color;
border-radius: @tooltip-radius;
color: @tooltip-color;
font-size: @font-size-small;
line-height: 1.5;
font-weight: 600;
transform: translate(-50%, (@tooltip-padding * 3));
transition: transform .2s .2s ease, opacity .2s .2s ease;
transform: translate(-50%, (@tooltip-padding * 3)) scale(0);
transform-origin: 50% 100%;
transition: transform .2s .1s ease, opacity .2s .1s ease;
// Arrow
&::after {
content: "";
display: block;
content: '';
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
bottom: -@tooltip-arrow-size;
margin-left: -@tooltip-arrow-size;
width: 0;
height: 0;
transition: inherit;
border-style: solid;
border-width: @tooltip-arrow-size @tooltip-arrow-size 0 @tooltip-arrow-size;
border-color: @controls-bg transparent transparent;
display: block;
width: 10px;
height: 10px;
background: @tooltip-bg;
transform: translate(-50%, -50%) rotate(45deg) translateY(1px);
border: 1px solid @tooltip-border-color;
border-width: 0 1px 1px 0;
}
}
label:hover .player-tooltip,
input:focus + label .player-tooltip,
button:hover .player-tooltip,
button:focus .player-tooltip {
visibility: visible;
button.tab-focus:focus .player-tooltip {
opacity: 1;
transform: translate(-50%, 0);
transform: translate(-50%, 0) scale(1);
}
label:hover .player-tooltip,
button:hover .player-tooltip {
z-index: 3;
}
@ -384,7 +381,7 @@
&-buffer[value],
&-played[value],
&-seek[type=range] {
&-seek[type='range'] {
position: absolute;
left: 0;
top: 0;
@ -424,7 +421,7 @@
// Seek control
// <input[type='range']> element
// Specificity is for bootstrap compatibility
&-seek[type=range] {
&-seek[type='range'] {
z-index: 4;
cursor: pointer;
outline: 0;
@ -499,7 +496,7 @@
// Volume control
// <input[type='range']> element
// Specificity is for bootstrap compatibility
&-volume[type=range] {
&-volume[type='range'] {
display: inline-block;
vertical-align: middle;
-webkit-appearance: none;
@ -565,7 +562,6 @@
// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
&.ios &-volume,
&.ios [data-player='mute'],
&.ios [data-player='mute'] + label,
&-audio.ios &-controls-right {
display: none;
}
@ -604,16 +600,7 @@
.player-video-wrapper {
height: 100%;
width: 100%;
.player-captions {
top: auto;
bottom: 90px;
@media (min-width: @bp-control-split) {
bottom: 60px;
}
}
}
}
.player-controls {
position: absolute;
bottom: 0;
@ -622,13 +609,29 @@
}
// Hide controls when playing in full screen
&.fullscreen-hide-controls.playing .player-controls {
transform: translateY(100%) translateY(@control-spacing / 2);
transition: transform .3s .2s ease;
&.hover {
&.fullscreen-hide-controls.playing {
.player-controls {
transform: translateY(100%) translateY(@control-spacing / 2);
transition: transform .3s .2s ease;
}
&.player-hover .player-controls {
transform: translateY(0);
}
.player-captions {
bottom: (@control-spacing / 2);
transition: bottom .3s .2s ease;
}
}
// Captions
.player-captions,
&.fullscreen-hide-controls.playing.player-hover .player-captions {
top: auto;
bottom: 90px;
@media (min-width: @bp-control-split) {
bottom: 60px;
}
}
}
@ -645,15 +648,11 @@
// Some options are hidden by default
[data-player='captions'],
[data-player='captions'] + label,
[data-player='fullscreen'],
[data-player='fullscreen'] + label {
[data-player='fullscreen'] {
display: none;
}
&.captions-enabled [data-player='captions'],
&.captions-enabled [data-player='captions'] + label,
&.fullscreen-enabled [data-player='fullscreen'],
&.fullscreen-enabled [data-player='fullscreen'] + label {
&.fullscreen-enabled [data-player='fullscreen'] {
display: inline-block;
}
}

View File

@ -7,50 +7,66 @@
// -------------------------------
// Colors
$blue: #3498DB !default;
$gray-dark: #343F4A !default;
$gray: #565D64 !default;
$gray-light: #6B7D86 !default;
$gray-lighter: #CBD0D3 !default;
$off-white: #D6DADD !default;
$blue: #3498DB !default;
$gray-dark: #343F4A !default;
$gray: #565D64 !default;
$gray-light: #6B7D86 !default;
$gray-lighter: #CBD0D3 !default;
$off-white: #D6DADD !default;
// Font sizes
$font-size-small: 14px !default;
$font-size-base: 16px !default;
$font-size-large: ceil(($font-size-base * 1.5)) !default;
$font-size-small: 14px !default;
$font-size-base: 16px !default;
// Captions
$font-size-captions-base: ceil($font-size-base * 1.25) !default;
$font-size-captions-medium: ceil($font-size-base * 1.5) !default;
$font-size-captions-large: ($font-size-base * 2) !default;
// Controls
$control-spacing: 10px !default;
$controls-bg: #fff !default;
$control-bg-hover: @blue !default;
.contrast-control-color($controls-bg);
.contrast-control-color-hover($control-bg-hover);
$control-spacing: 10px !default;
$controls-bg: #fff !default;
$control-bg-hover: $blue !default;
$control-color: null !default;
$control-color-hover: null !default;
// Contrast
@if lightness($controls-bg) >= 65% {
$control-color: $gray-light;
} @else {
$control-color: $gray-lighter;
}
@if lightness($control-bg-hover) >= 65% {
$control-color-hover: $gray;
} @else {
$control-color-hover: #fff;
}
// Tooltips
$tooltip-bg: $controls-bg !default;
$tooltip-color: #fff !default;
$tooltip-padding: $control-spacing !default;
$tooltip-arrow-size: 5px !default;
$tooltip-radius: 3px !default;
$tooltip-bg: $controls-bg !default;
$tooltip-color: $control-color !default;
$tooltip-padding: $control-spacing !default;
$tooltip-arrow-size: 5px !default;
$tooltip-radius: 3px !default;
// Progress
$progress-bg: rgba(red($gray), green($gray), blue($gray), .2) !default;
$progress-playing-bg: $blue !default;
$progress-buffered-bg: rgba(red($gray), green($gray), blue($gray), .25) !default;
$progress-loading-size: 40px !default;
$progress-loading-bg: rgba(0,0,0, .15) !default;
$progress-bg: rgba(red($gray), green($gray), blue($gray), .2) !default;
$progress-playing-bg: $blue !default;
$progress-buffered-bg: rgba(red($gray), green($gray), blue($gray), .25) !default;
$progress-loading-size: 40px !default;
$progress-loading-bg: rgba(0,0,0, .15) !default;
// Volume
$volume-track-height: 6px !default;
$volume-track-bg: darken($controls-bg, 10%) !default;
$volume-thumb-height: ($volume-track-height * 2) !default;
$volume-thumb-width: ($volume-track-height * 2) !default;
$volume-thumb-bg: $control-color !default;
$volume-thumb-bg-focus: $control-bg-hover !default;
$volume-track-height: 6px !default;
$volume-track-bg: darken($controls-bg, 10%) !default;
$volume-thumb-height: ($volume-track-height * 2) !default;
$volume-thumb-width: ($volume-track-height * 2) !default;
$volume-thumb-bg: $control-color !default;
$volume-thumb-bg-focus: $control-bg-hover !default;
// Breakpoints
$bp-control-split: 560px !default; // When controls split into left/right
$bp-captions-large: 768px !default; // When captions jump to the larger font size
$bp-control-split: 560px !default; // When controls split into left/right
$bp-captions-large: 768px !default; // When captions jump to the larger font size
// Animation
// ---------------------------------------
@ -59,46 +75,25 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
to { background-position: $progress-loading-size 0; }
}
// Mixins
// -------------------------------
// Contrast
@mixin contrast-control-color($color: "") {
@if (lightness($color) >= 65%) {
$control-color: $gray-light;
}
@else if(lightness(@color) < 65%) {
$control-color: $gray-lighter;
}
}
@mixin contrast-control-color-hover($color: "") {
@if (lightness($color) >= 65%) {
$control-color-hover: $gray;
}
@else if (lightness($color) < 65%) {
$control-color-hover: #fff;
}
}
// Font smoothing
@mixin font-smoothing($mode: on)
{
@if ($mode == 'on') {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
@else if ($mode == 'off') {
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: subpixel-antialiased;
}
@if ($mode == 'on') {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
@else if ($mode == 'off') {
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: subpixel-antialiased;
}
}
// Contain floats: nicolasgallagher.com/micro-clearfix-hack/
@mixin clearfix()
{
zoom: 1;
&:before,
&:after { content: ""; display: table; }
&:before,
&:after { content: ''; display: table; }
&:after { clear: both; }
}
// Tab focus styles
@ -108,7 +103,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
outline-offset: 0;
}
// Range mixins
// <input type="range"> styling
@mixin volume-thumb()
{
height: $volume-thumb-height;
@ -153,7 +148,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
// Styles
// -------------------------------
// Base
// Base
.player {
position: relative;
max-width: 100%;
@ -164,8 +159,8 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
&,
*,
*::after,
*::before {
box-sizing: border-box;
*::before {
box-sizing: border-box;
}
// For video
@ -179,6 +174,21 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
vertical-align: middle;
}
// For embeds
&-video-embed {
padding-bottom: 56.25%; /* 16:9 */
height: 0;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
}
// Captions
&-captions {
display: none;
@ -186,26 +196,31 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
min-height: 2.5em;
padding: ($control-spacing * 2) ($control-spacing * 2) ($control-spacing * 3);
color: #fff;
font-size: $font-size-base;
font-weight: 600;
text-shadow:
-1px -1px 0 $gray,
1px -1px 0 $gray,
-1px 1px 0 $gray,
1px 1px 0 $gray;
font-size: $font-size-captions-base;
text-align: center;
@include font-smoothing();
span {
border-radius: 2px;
padding: 3px 10px;
background: rgba(0,0,0, .9);
}
span:empty {
display: none;
}
@media (min-width: $bp-captions-large) {
font-size: $font-size-large;
font-size: $font-size-captions-medium;
}
}
&.captions-active &-captions {
display: block;
}
&.fullscreen-active &-captions {
font-size: $font-size-captions-large;
}
// Player controls
&-controls {
@ -232,18 +247,21 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
margin-top: 0;
}
}
input + label,
// Buttons
button {
display: inline-block;
vertical-align: middle;
margin: 0 2px;
padding: ($control-spacing / 2) $control-spacing;
background .3s ease, color .3s ease, opacity .3s ease;
overflow: hidden;
border: 0;
background: transparent;
border-radius: 3px;
cursor: pointer;
color: $control-color;
transition: background .3s ease, color .3s ease, opacity .3s ease;
svg {
width: 18px;
height: 18px;
@ -251,41 +269,27 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
fill: currentColor;
transition: fill .3s ease;
}
// Hover and tab focus
&.tab-focus,
&:hover {
background: $control-bg-hover;
color: $control-color-hover;
}
// Default focus
&:focus {
outline: 0;
}
}
input + label,
.inverted:checked + label {
opacity: .5;
}
button,
.inverted + label,
input:checked + label {
color: $control-color;
opacity: 1;
}
button {
border: 0;
background: transparent;
overflow: hidden;
}
// Specificity for overriding .inverted
button:focus,
button:hover,
[type="checkbox"]:focus + label,
[type="checkbox"] + label:hover {
background: $control-bg-hover;
color: $control-color-hover;
opacity: 1;
}
button:focus,
input:focus + label {
outline: 0;
}
// Hide toggle icons by default
.icon-exit-fullscreen,
.icon-muted,
.icon-captions-on {
display: none;
}
// Time display
.player-time {
display: inline-block;
vertical-align: middle;
@ -306,7 +310,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
// Add a slash in before
&::before {
content: "\2044";
content: '\2044';
margin-right: $control-spacing;
}
}
@ -314,7 +318,6 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
// Tooltips
&-tooltip {
visibility: hidden;
position: absolute;
z-index: 2;
bottom: 100%;
@ -329,11 +332,12 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
line-height: 1.5;
font-weight: 600;
transform: translate(-50%, ($tooltip-padding * 3));
transition: transform .2s .2s ease, opacity .2s .2s ease;
transform: translate(-50%, ($tooltip-padding * 3)) scale(0);
transform-origin: 50% 100%;
transition: transform .2s .1s ease, opacity .2s .1s ease;
&::after {
content: "";
content: '';
display: block;
position: absolute;
left: 50%;
@ -347,15 +351,11 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
border-color: $controls-bg transparent transparent;
}
}
label:hover .player-tooltip,
input:focus + label .player-tooltip,
button:hover .player-tooltip,
button:focus .player-tooltip {
visibility: visible;
opacity: 1;
transform: translate(-50%, 0);
transform: translate(-50%, 0) scale(1);
}
label:hover .player-tooltip,
button:hover .player-tooltip {
z-index: 3;
}
@ -373,7 +373,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
&-buffer[value],
&-played[value],
&-seek[type=range] {
&-seek[type='range'] {
position: absolute;
left: 0;
top: 0;
@ -389,7 +389,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
background: transparent;
}
&-buffer[value],
&-played[value] {
&-played[value] {
&::-webkit-progress-bar {
background: transparent;
}
@ -413,7 +413,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
// Seek control
// <input[type='range']> element
// Specificity is for bootstrap compatibility
&-seek[type=range] {
&-seek[type='range'] {
z-index: 4;
cursor: pointer;
outline: 0;
@ -435,7 +435,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
-moz-appearance: none;
@include seek-thumb();
}
// Microsoft
&::-ms-track {
color: transparent;
@ -465,15 +465,15 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
background-repeat: repeat-x;
background-color: $progress-buffered-bg;
background-image: linear-gradient(
-45deg,
$progress-loading-bg 25%,
transparent 25%,
transparent 50%,
$progress-loading-bg 50%,
-45deg,
$progress-loading-bg 25%,
transparent 25%,
transparent 50%,
$progress-loading-bg 50%,
$progress-loading-bg 75%,
transparent 75%,
transparent 75%,
transparent);
color: transparent;
color: transparent;
}
// States
@ -488,18 +488,18 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
// Volume control
// <input[type='range']> element
// Specificity is for bootstrap compatibility
&-volume[type=range] {
&-volume[type='range'] {
display: inline-block;
vertical-align: middle;
-webkit-appearance: none;
-moz-appearance: none;
width: 100px;
margin: 0 $control-spacing 0 0;
padding: 0;
padding: 0;
cursor: pointer;
background: transparent;
border: none;
// Webkit
&::-webkit-slider-runnable-track {
@include volume-track();
@ -517,7 +517,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
&::-moz-range-thumb {
@include volume-thumb();
}
// Microsoft
&::-ms-track {
height: $volume-track-height;
@ -554,7 +554,6 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
&.ios &-volume,
&.ios [data-player='mute'],
&.ios [data-player='mute'] + label,
&-audio.ios &-controls-right {
display: none;
}
@ -593,15 +592,6 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
.player-video-wrapper {
height: 100%;
width: 100%;
.player-captions {
top: auto;
bottom: 90px;
@media (min-width: $bp-control-split) {
bottom: 60px;
}
}
}
.player-controls {
position: absolute;
@ -611,13 +601,29 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
}
// Hide controls when playing in full screen
&.fullscreen-hide-controls.playing .player-controls {
transform: translateY(100%) translateY($control-spacing / 2);
transition: transform .3s .2s ease;
&.hover {
&.fullscreen-hide-controls.playing {
.player-controls {
transform: translateY(100%) translateY($control-spacing / 2);
transition: transform .3s .2s ease;
}
&.player-hover .player-controls {
transform: translateY(0);
}
.player-captions {
bottom: ($control-spacing / 2);
transition: bottom .3s .2s ease;
}
}
// Captions
.player-captions,
&.fullscreen-hide-controls.playing.player-hover .player-captions {
top: auto;
bottom: 90px;
@media (min-width: $bp-control-split) {
bottom: 60px;
}
}
}
@ -634,15 +640,11 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
// Some options are hidden by default
[data-player='captions'],
[data-player='captions'] + label,
[data-player='fullscreen'],
[data-player='fullscreen'] + label {
[data-player='fullscreen'] {
display: none;
}
&.captions-enabled [data-player='captions'],
&.captions-enabled [data-player='captions'] + label,
&.fullscreen-enabled [data-player='fullscreen'],
&.fullscreen-enabled [data-player='fullscreen'] + label {
&.fullscreen-enabled [data-player='fullscreen'] {
display: inline-block;
}
}
}

View File

@ -1,8 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>icon-captions-off</title>
<desc>Created with Sketch.</desc>
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
<path d="M1,2 C0.448,2 0,2.448 0,3 L0,15 C0,15.552 0.448,16 1,16 L17,16 C17.552,16 18,15.552 18,15 L18,3 C18,2.448 17.552,2 17,2 L1,2 Z M2,14 L2,4 L16,4 L16,14 L2,14 L2,14 Z" id="Shape" sketch:type="MSShapeGroup"></path>

Before

Width:  |  Height:  |  Size: 747 B

After

Width:  |  Height:  |  Size: 562 B

View File

@ -1,8 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>icon-captions-on</title>
<desc>Created with Sketch.</desc>
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
<path d="M1,2 C0.448,2 0,2.448 0,3 L0,15 C0,15.552 0.448,16 1,16 L17,16 C17.552,16 18,15.552 18,15 L18,3 C18,2.448 17.552,2 17,2 L1,2 Z M2,14 L2,4 L16,4 L16,14 L2,14 L2,14 Z" id="Shape" sketch:type="MSShapeGroup"></path>

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 863 B

View File

@ -1,8 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>expand</title>
<desc>Created with Sketch.</desc>
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
<g id="expand" sketch:type="MSLayerGroup" transform="translate(-1.000000, -1.000000)">

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -1,8 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>collapse</title>
<desc>Created with Sketch.</desc>
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1">
<g id="collapse" sketch:type="MSLayerGroup" transform="translate(-1.000000, -1.000000)">

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -1,6 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M17.569 8.246l-10.569-6.246c-0.552 0-1 0.448-1 1v1.954l-5-2.954c-0.552 0-1 0.448-1 1v12c0 0.552 0.448 1 1 1l5-2.955v1.955c0 0.552 0.448 1 1 1l10.569-6.246c0.267-0.158 0.431-0.444 0.431-0.754s-0.164-0.597-0.431-0.754zM6 10.722l-4 2.364v-8.172l4 2.364v3.444zM8 13.086v-8.172l6.915 4.086-6.915 4.086z"></path>
</svg>

Before

Width:  |  Height:  |  Size: 635 B

After

Width:  |  Height:  |  Size: 480 B

View File

@ -1,9 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>muted</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
<g id="sound" sketch:type="MSLayerGroup" transform="translate(0.000000, 2.000000)">
<path d="M9.214,0 C9.103,0 8.989,0.032 8.88,0.101 L4.832,2.911 C4.749,2.969 4.65,3 4.549,3 L0.996,3 C0.446,3 1.33226763e-15,3.448 1.33226763e-15,4 L1.33226763e-15,10 C1.33226763e-15,10.552 0.446,11 0.996,11 L4.549,11 C4.651,11 4.749,11.031 4.832,11.089 L8.88,13.899 C8.989,13.968 9.103,14 9.214,14 C9.606,14 9.961,13.6 9.961,13.051 L9.961,0.95 C9.961,0.4 9.606,0.001 9.214,0.001 L9.214,0 Z M7.969,10.834 L5.582,9.177 C5.416,9.062 5.218,8.999 5.016,8.999 L2.491,8.999 C2.216,8.999 1.993,8.775 1.993,8.499 L1.993,5.499 C1.993,5.223 2.216,4.999 2.491,4.999 L5.016,4.999 C5.218,4.999 5.416,4.937 5.582,4.821 L7.969,3.164 L7.969,10.833 L7.969,10.834 Z" id="Shape" sketch:type="MSShapeGroup"></path>

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -1,8 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>pause</title>
<desc>Created with Sketch.</desc>
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
<g id="pause" sketch:type="MSLayerGroup" transform="translate(2.000000, 2.000000)">

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 927 B

View File

@ -1,6 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M5 4.914l6.915 4.086-6.915 4.086v-8.172zM4 2c-0.552 0-1 0.448-1 1v12c0 0.552 0.448 1 1 1l10.569-6.246c0.267-0.158 0.431-0.444 0.431-0.754s-0.164-0.597-0.431-0.754l-10.569-6.246z"></path>
</svg>

Before

Width:  |  Height:  |  Size: 515 B

After

Width:  |  Height:  |  Size: 360 B

View File

@ -1,9 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>icon-restart</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
<path d="M17,2 C16.448,2 16,2.448 16,3 L16,7.318 L7,2 C6.448,2 6,2.448 6,3 L6,4.954 L1,2 C0.448,2 0,2.448 0,3 L0,15 C0,15.552 0.448,16 1,16 L6,13.045 L6,15 C6,15.552 6.448,16 7,16 L16,10.682 L16,15 C16,15.552 16.448,16 17,16 C17.552,16 18,15.552 18,15 L18,3 C18,2.448 17.552,2 17,2 L17,2 Z M6,10.722 L2,13.086 L2,4.914 L6,7.278 L6,10.722 L6,10.722 Z M8,13.086 L8,4.914 L14.915,9 L8,13.086 L8,13.086 Z" id="Shape" sketch:type="MSShapeGroup" transform="translate(9.000000, 9.000000) scale(-1, 1) translate(-9.000000, -9.000000) "></path>
</g>

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 859 B

View File

@ -1,8 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="18px" height="21px" viewBox="0 0 18 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>rewind</title>
<desc>Created with Sketch.</desc>
<svg viewBox="0 0 18 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
<path d="M17.569,9.246 L7,3 C6.448,3 6,3.448 6,4 L6,5.954 L1,3 C0.448,3 0,3.448 0,4 L0,16 C0,16.552 0.448,17 1,17 L6,14.045 L6,16 C6,16.552 6.448,17 7,17 L17.569,10.754 C17.836,10.596 18,10.31 18,10 C18,9.69 17.836,9.403 17.569,9.246 L17.569,9.246 Z M6,11.722 L2,14.086 L2,5.914 L6,8.278 L6,11.722 L6,11.722 Z M8,14.086 L8,5.914 L14.915,10 L8,14.086 L8,14.086 Z" id="Shape" sketch:type="MSShapeGroup" transform="translate(9.000000, 10.000000) rotate(-180.000000) translate(-9.000000, -10.000000) "></path>

Before

Width:  |  Height:  |  Size: 1021 B

After

Width:  |  Height:  |  Size: 847 B

View File

@ -1,7 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M10.214 2c-0.111 0-0.225 0.032-0.334 0.101l-4.048 2.81c-0.083 0.058-0.182 0.089-0.283 0.089h-3.553c-0.55 0-0.996 0.448-0.996 1v6c0 0.552 0.446 1 0.996 1h3.553c0.102 0 0.2 0.031 0.283 0.089l4.048 2.81c0.109 0.069 0.223 0.101 0.334 0.101 0.392 0 0.747-0.4 0.747-0.949v-12.101c0-0.55-0.355-0.949-0.747-0.949zM8.969 12.834l-2.387-1.657c-0.166-0.115-0.364-0.178-0.566-0.178h-2.525c-0.275 0-0.498-0.224-0.498-0.5v-3c0-0.276 0.223-0.5 0.498-0.5h2.525c0.202 0 0.4-0.062 0.566-0.178l2.387-1.657v7.669z"></path>
<path d="M16.934 8.799c-0.086-1.748-1.514-2.991-2.507-3.649-0.47-0.312-1.094-0.122-1.325 0.408l-0.038 0.086c-0.188 0.431-0.045 0.939 0.336 1.194 0.706 0.473 1.586 1.247 1.624 2.065 0.032 0.676-0.553 1.468-1.663 2.27-0.398 0.288-0.529 0.839-0.285 1.275l0.042 0.075c0.266 0.475 0.866 0.624 1.3 0.312 1.74-1.251 2.586-2.606 2.516-4.037z"></path>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1018 B