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
@ -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 || {}));
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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 |
@ -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 |
@ -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 |
@ -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 |
@ -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 |
@ -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 |
@ -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 |
@ -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 |
@ -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 |
@ -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 |
@ -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 |