UI tweaks

This commit is contained in:
Sam Potts
2016-04-25 19:06:55 +10:00
parent 1ddb4eb60c
commit ffebc7b077
21 changed files with 1286 additions and 961 deletions

File diff suppressed because it is too large Load Diff

View File

@ -7,129 +7,104 @@
// -------------------------------
// Colors
@blue: #3498DB;
@gray-dark: #343F4A;
@gray: #565D64;
@gray-light: #6B7D86;
@gray-lighter: #CBD0D3;
@off-white: #D6DADD;
@plyr-color-main: #3498DB;
// Font sizes
@font-size-small: 14px;
@font-size-base: 16px;
@plyr-font-size-small: 14px;
@plyr-font-size-base: 16px;
// 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);
@plyr-font-size-captions-base: ceil(@plyr-font-size-base * 1.25);
@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5);
@plyr-font-size-captions-large: (@plyr-font-size-base * 2);
// Controls
@control-spacing: 10px;
@controls-bg: #fff;
@control-bg-hover: @blue;
.contrast-control-color(@controls-bg);
.contrast-control-color-hover(@control-bg-hover);
@plyr-controls-bg: #000;
@plyr-control-color: #fff;
@plyr-control-color-hover: #fff;
@plyr-control-spacing: 10px;
@plyr-control-bg-hover: @plyr-color-main;
//.contrast-control-color(@plyr-controls-bg);
//.contrast-control-color-hover(@plyr-control-bg-hover);
// Tooltips
@tooltip-bg: @controls-bg;
@tooltip-border-color: fade(@gray-dark, 10%);
@tooltip-border-width: 1px;
@tooltip-shadow: 0 0 5px @tooltip-border-color, 0 0 0 @tooltip-border-width @tooltip-border-color;
@tooltip-color: @control-color;
@tooltip-padding: @control-spacing;
@tooltip-arrow-size: 6px;
@tooltip-radius: 3px;
@plyr-tooltip-bg: @plyr-controls-bg;
@plyr-tooltip-border-color: fade(darken(@plyr-controls-bg, 75%), 10%);
@plyr-tooltip-arrow-border-color: fade(darken(@plyr-controls-bg, 75%), 20%);
@plyr-tooltip-border-width: 1px;
@plyr-tooltip-shadow: 0 0 5px @plyr-tooltip-border-color, 0 0 0 @plyr-tooltip-border-width @plyr-tooltip-border-color;
@plyr-tooltip-color: @plyr-control-color;
@plyr-tooltip-padding: (@plyr-control-spacing / 2);
@plyr-tooltip-arrow-size: 4px;
@plyr-tooltip-radius: 3px;
// Progress
@progress-bg: fade(@gray, 20%);
@progress-playing-bg: @blue;
@progress-buffered-bg: fade(@gray, 25%);
@progress-loading-size: 40px;
@progress-loading-bg: rgba(0,0,0, .15);
@plyr-progress-bg: fade(@plyr-control-color, 25%);
@plyr-progress-playing-bg: @plyr-color-main;
@plyr-progress-buffered-bg: fade(@plyr-control-color, 25%);
@plyr-progress-loading-size: 25px;
@plyr-progress-loading-bg: fade(#000, 15%);
// Volume
@volume-track-height: 6px;
@volume-track-bg: darken(@controls-bg, 10%);
@volume-thumb-height: (@volume-track-height * 2);
@volume-thumb-width: (@volume-track-height * 2);
@volume-thumb-bg: @control-color;
@volume-thumb-bg-focus: @control-bg-hover;
// Range sliders
@range-track-height: 8px;
@range-track-bg: fade(#fff, 25%);
@range-thumb-height: floor(@range-track-height * 2);
@range-thumb-width: floor(@range-track-height * 2);
@range-thumb-bg: #fff;
@range-thumb-border: 2px solid transparent;
@range-thumb-active-border-color: #fff;
@range-thumb-active-bg: @plyr-control-bg-hover;
@range-thumb-shadow: 0 1px 1px fade(@plyr-controls-bg, 15%);
// Breakpoints
@bp-control-split: 560px; // When controls split into left/right
@bp-captions-large: 768px; // When captions jump to the larger font size
@plyr-bp-control-split: 560px; // When controls split into left/right
@plyr-bp-captions-large: 768px; // When captions jump to the larger font size
// Animation
// ---------------------------------------
@keyframes progress {
to { background-position: @progress-loading-size 0; }
@keyframes plyr-progress {
to { background-position: @plyr-progress-loading-size 0; }
}
// Mixins
// -------------------------------
// Contrast
.contrast-control-color(@color: "") when (lightness(@color) >= 65%) {
@control-color: @gray-light;
/*.contrast-control-color(@plyr-color: "") when (lightness(@plyr-color) >= 65%) {
@plyr-control-color: @plyr-gray-light;
}
.contrast-control-color(@color: "") when (lightness(@color) < 65%) {
@control-color: @gray-lighter;
.contrast-control-color(@plyr-color: "") when (lightness(@plyr-color) < 65%) {
@plyr-control-color: @plyr-gray-lighter;
}
.contrast-control-color-hover(@color: "") when (lightness(@color) >= 65%) {
@control-color-hover: @gray;
}
.contrast-control-color-hover(@color: "") when (lightness(@color) < 65%) {
@control-color-hover: #fff;
}
// Font smoothing
.font-smoothing(@mode: on) when (@mode = on) {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.font-smoothing(@mode: on) when (@mode = off) {
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: subpixel-antialiased;
}
// Contain floats: nicolasgallagher.com/micro-clearfix-hack/
.clearfix() {
zoom: 1;
&:before,
&:after { content: ""; display: table; }
&:after { clear: both; }
}
// Tab focus styles
.tab-focus() {
outline: 1px dotted fade(@gray-dark, 80%);
outline-offset: 3px;
.contrast-control-color-hover(@plyr-color: "") when (lightness(@plyr-color) >= 65%) {
@plyr-control-color-hover: @plyr-gray;
}
.contrast-control-color-hover(@plyr-color: "") when (lightness(@plyr-color) < 65%) {
@plyr-control-color-hover: #fff;
}*/
// <input type="range"> styling
.volume-thumb() {
height: @volume-thumb-height;
width: @volume-thumb-width;
background: @volume-thumb-bg;
.range-track() {
height: @range-track-height;
background: @range-track-bg;
border: 0;
border-radius: (@range-track-height / 2);
user-select: none;
}
.range-thumb() {
position: relative;
height: @range-thumb-height;
width: @range-thumb-width;
background: @range-thumb-bg;
border: @range-thumb-border;
border-radius: 100%;
transition: background .3s ease;
cursor: ew-resize;
transition: background .2s ease, border .2s ease, transform .2s ease;
box-shadow: @range-thumb-shadow;
box-sizing: border-box;
}
.volume-track() {
height: @volume-track-height;
background: @volume-track-bg;
border: 0;
border-radius: (@volume-track-height / 2);
}
.seek-thumb() {
background: transparent;
border: 0;
width: (@control-spacing * 4);
height: @control-spacing;
transform: translateX(-50%);
}
.seek-track() {
background: none;
border: 0;
.range-thumb-active() {
background: @range-thumb-active-bg;
border-color: @range-thumb-active-border-color;
transform: scale(1.25);
}
// Styles
@ -139,6 +114,7 @@
position: relative;
max-width: 100%;
min-width: 290px;
font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
// border-box everything
// http://paulirish.com/2012/box-sizing-border-box-ftw/
@ -168,12 +144,16 @@
// For video
&__video-wrapper {
position: relative;
background: #000;
border-radius: inherit;
//overflow: hidden;
}
video,
audio {
width: 100%;
height: auto;
vertical-align: middle;
border-radius: inherit;
}
// Container for embeds
@ -181,7 +161,7 @@
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
background: #000;
border-radius: inherit;
iframe {
position: absolute;
@ -199,79 +179,215 @@
padding-bottom: 200%;
transform: translateY(-35.95%);
}
// To allow mouse events to be captured if full support
&.plyr iframe {
pointer-events: none;
}
}
// Captions
// Hide default captions
video::-webkit-media-text-track-container {
display: none;
}
&__captions {
display: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: (@control-spacing * 2) (@control-spacing * 2) (@control-spacing * 3);
padding: (@plyr-control-spacing * 2) (@plyr-control-spacing * 2) (@plyr-control-spacing * 8);
color: #fff;
font-size: @font-size-captions-base;
font-size: @plyr-font-size-captions-base;
text-align: center;
.font-smoothing();
font-weight: 400;
span {
border-radius: 2px;
padding: 3px 10px;
background: rgba(0,0,0, .9);
padding: floor(@plyr-control-spacing / 3) @plyr-control-spacing;
background: fade(#000, 85%);
}
span:empty {
display: none;
}
@media (min-width: @bp-captions-large) {
font-size: @font-size-captions-medium;
@media (min-width: @plyr-bp-captions-large) {
font-size: @plyr-font-size-captions-medium;
}
}
&--captions-active &__captions {
display: block;
}
&--fullscreen-active &__captions {
font-size: @font-size-captions-large;
font-size: @plyr-font-size-captions-large;
}
// Common
// Specificity is for bootstrap compatibility
input[type='range'] {
display: block;
height: @range-thumb-height;
width: 100%;
margin: 0;
padding: 0;
vertical-align: middle;
appearance: none;
cursor: pointer;
border: none;
background: transparent;
// Webkit
&::-webkit-slider-runnable-track {
.range-track();
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
margin-top: -((@range-thumb-height - @range-track-height) / 2);
.range-thumb();
}
// Mozilla
&::-moz-range-track {
.range-track();
}
&::-moz-range-thumb {
.range-thumb();
}
&::-moz-focus-outer {
border: 0;
}
// Microsoft
&::-ms-track {
height: @range-track-height;
background: transparent;
border: 0;
color: transparent;
}
&::-ms-fill-lower,
&::-ms-fill-upper {
.range-track();
}
&::-ms-thumb {
.range-thumb();
// For some reason, Edge uses the -webkit margin above
margin-top: 0;
}
&::-ms-tooltip {
display: none;
}
// Focus styles
&:focus {
outline: 0;
}
&::-moz-focus-outer {
border: 0;
}
&.tab-focus:focus {
outline: 1px dotted fade(@plyr-control-color, 50%);
outline-offset: 3px;
}
// Pressed styles
&:active {
&::-webkit-slider-thumb {
.range-thumb-active();
}
&::-moz-range-thumb {
.range-thumb-active();
}
&::-ms-thumb {
.range-thumb-active();
}
}
}
// Large play button
&__play-large {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: @plyr-control-spacing;
background: @plyr-control-bg-hover;
border: 4px solid @plyr-control-color;
border-radius: 100%;
color: @plyr-control-color;
svg {
position: relative;
left: 2px;
width: 20px;
height: 20px;
display: block;
fill: currentColor;
}
&:focus {
outline: 1px dotted fade(@plyr-control-color, 50%);
}
}
// Shared
&__controls,
&__play-large {
transition: visibility .3s ease, opacity .3s ease;
}
&--playing &__play-large {
visibility: hidden;
opacity: 0;
}
// Playback controls
&__controls {
.clearfix();
.font-smoothing();
position: relative;
padding: @control-spacing;
background: @controls-bg;
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing;
background: linear-gradient(fade(@plyr-controls-bg, 0%), fade(@plyr-controls-bg, 25%));
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
line-height: 1;
text-align: center;
box-shadow: 0 1px 1px fade(@gray-dark, 20%);
// Layout
&--right {
display: block;
margin: @control-spacing auto 0;
// Spacing
> button,
.plyr__progress,
.plyr__time,
.plyr__volume[type="range"] {
margin-left: @plyr-control-spacing;
&::first-child {
margin-left: 0;
}
}
@media (min-width: @bp-control-split) {
&--left {
float: left;
}
&--right {
float: right;
margin-top: 0;
}
[data-plyr="mute"] {
margin-left: 0;
}
// Buttons
button {
position: relative;
display: inline-block;
flex-shrink: 0;
vertical-align: middle;
margin: 0 2px;
padding: (@control-spacing / 2) @control-spacing;
overflow: hidden;
padding: (@plyr-control-spacing / 2) @plyr-control-spacing;
border: 0;
background: transparent;
border-radius: 3px;
cursor: pointer;
color: @control-color;
color: @plyr-control-color;
transition: background .3s ease, color .3s ease, opacity .3s ease;
svg {
@ -279,14 +395,13 @@
height: 18px;
display: block;
fill: currentColor;
transition: fill .3s ease;
}
// Hover and tab focus
&.tab-focus:focus,
&:hover {
background: @control-bg-hover;
color: @control-color-hover;
background: @plyr-control-bg-hover;
color: @plyr-control-color-hover;
}
// Default focus
&:focus {
@ -300,53 +415,30 @@
.icon--captions-on {
display: none;
}
// plyr time
.plyr__time {
display: inline-block;
vertical-align: middle;
margin-left: @control-spacing;
color: @control-color;
font-weight: 600;
font-size: @font-size-small;
}
// Media duration hidden on small screens
.plyr__time + .plyr__time {
display: none;
@media (min-width: @bp-control-split) {
display: inline-block;
}
// Add a slash in before
&::before {
content: '\2044';
margin-right: @control-spacing;
}
}
}
// Tooltips
&__tooltip {
visibility: hidden;
position: absolute;
z-index: 2;
bottom: 100%;
margin-bottom: @tooltip-padding;
padding: @tooltip-padding (@tooltip-padding * 1.5);
margin-bottom: (@plyr-tooltip-padding * 2);
padding: @plyr-tooltip-padding (@plyr-tooltip-padding * 1.5);
pointer-events: none;
opacity: 0;
background: @tooltip-bg;
box-shadow: @tooltip-shadow;
border-radius: @tooltip-radius;
color: @tooltip-color;
font-size: @font-size-small;
line-height: 1.5;
font-weight: 600;
background: @plyr-tooltip-bg;
box-shadow: @plyr-tooltip-shadow;
border-radius: @plyr-tooltip-radius;
transform: translate(-50%, (@tooltip-padding * 3)) scale(.8);
color: @plyr-tooltip-color;
font-size: @plyr-font-size-small;
line-height: 1.3;
transform: translate(-50%, 10px) scale(.8);
transform-origin: 50% 100%;
transition: transform .2s .1s ease, opacity .2s .1s ease;
transition: transform .2s .1s ease, opacity .2s .1s ease, visibility .3s ease;
// Arrows
&::after,
@ -361,24 +453,26 @@
}
// The border triangle
&::after {
@border-arrow-size: (@tooltip-arrow-size + (@tooltip-border-width * 1));
bottom: -(@border-arrow-size + @tooltip-border-width);
border-right: @border-arrow-size solid transparent;
border-top: @border-arrow-size solid @tooltip-border-color;
border-left: @border-arrow-size solid transparent;
@plyr-border-arrow-size: (@plyr-tooltip-arrow-size + (@plyr-tooltip-border-width * 1));
bottom: -(@plyr-border-arrow-size + @plyr-tooltip-border-width);
border-right: @plyr-border-arrow-size solid transparent;
border-top: @plyr-border-arrow-size solid @plyr-tooltip-arrow-border-color;
border-left: @plyr-border-arrow-size solid transparent;
z-index: 1;
}
// The background triangle
&::before {
bottom: -@tooltip-arrow-size;
border-right: @tooltip-arrow-size solid transparent;
border-top: @tooltip-arrow-size solid @tooltip-bg;
border-left: @tooltip-arrow-size solid transparent;
bottom: -@plyr-tooltip-arrow-size;
border-right: @plyr-tooltip-arrow-size solid transparent;
border-top: @plyr-tooltip-arrow-size solid @plyr-tooltip-bg;
border-left: @plyr-tooltip-arrow-size solid transparent;
z-index: 2;
}
}
button:hover .plyr__tooltip,
button.tab-focus:focus .plyr__tooltip {
button.tab-focus:focus .plyr__tooltip,
&__tooltip--visible {
visibility: visible;
opacity: 1;
transform: translate(-50%, 0) scale(1);
}
@ -386,122 +480,116 @@
z-index: 3;
}
// Common range styles
input[type='range'].tab-focus:focus {
.tab-focus();
}
// Playback progress
// <progress> element
&__progress {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
width: 100%;
height: @control-spacing;
background: @progress-bg;
position: relative;
flex: 1;
&--buffer[value],
&--played[value],
&--seek[type='range'] {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: @control-spacing;
margin: 0;
padding: 0;
vertical-align: top;
input[type="range"] {
position: relative;
z-index: 2;
-webkit-appearance: none;
-moz-appearance: none;
border: none;
background: transparent;
}
&--buffer[value],
&--played[value] {
&::-webkit-progress-bar {
&::-webkit-slider-runnable-track {
background: transparent;
}
// Inherit from currentColor;
&::-webkit-progress-value {
background: currentColor;
}
&::-moz-progress-bar {
background: currentColor;
}
}
&--played[value] {
z-index: 2;
color: @progress-playing-bg;
}
&--buffer[value] {
color: @progress-buffered-bg;
}
// Seek control
// <input[type='range']> element
// Specificity is for bootstrap compatibility
&--seek[type='range'] {
z-index: 4;
cursor: pointer;
outline: 0;
// Webkit
&::-webkit-slider-runnable-track {
.seek-track();
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
.seek-thumb();
}
// Mozilla
&::-moz-range-track {
.seek-track();
}
&::-moz-range-thumb {
-moz-appearance: none;
.seek-thumb();
}
// Microsoft
&::-ms-track {
color: transparent;
.seek-track();
background: transparent;
}
&::-ms-fill-lower,
&::-ms-fill-upper {
.seek-track();
}
&::-ms-thumb {
.seek-thumb();
background: transparent;
}
}
&:focus {
outline: 0;
&--buffer[value],
&--played[value] {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: @range-track-height;
margin: -(@range-track-height / 2) 0 0;
padding: 0;
vertical-align: top;
appearance: none;
border: none;
border-radius: 100px;
&::-webkit-progress-bar {
background: transparent;
}
&::-moz-focus-outer {
border: 0;
&::-webkit-progress-value {
background: currentColor;
border-radius: 100px;
min-width: @range-track-height;
}
&::-moz-progress-bar {
background: currentColor;
border-radius: 100px;
min-width: @range-track-height;
}
&::-ms-fill {
border-radius: 100px;
}
}
&--played[value] {
z-index: 1;
color: @plyr-progress-playing-bg;
background: transparent;
&::-webkit-progress-value {
background: currentColor;
min-width: @range-track-height;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&::-moz-progress-bar {
background: currentColor;
min-width: @range-track-height;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&::-ms-fill {
min-width: @range-track-height;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
&--buffer[value] {
color: @plyr-progress-buffered-bg;
background: @range-track-bg;
&::-webkit-progress-value {
transition: width .2s ease;
}
&::-moz-progress-bar {
transition: width .2s ease;
}
&::-ms-fill {
transition: width .2s ease;
}
}
// Seek tooltip to show time
.plyr__tooltip {
left: 0;
}
}
// Loading state
&--loading .plyr__progress--buffer {
animation: progress 1s linear infinite;
background-size: @progress-loading-size @progress-loading-size;
animation: plyr-progress 1s linear infinite;
background-size: @plyr-progress-loading-size @plyr-progress-loading-size;
background-repeat: repeat-x;
background-color: @progress-buffered-bg;
background-color: @plyr-progress-buffered-bg;
background-image: linear-gradient(
-45deg,
@progress-loading-bg 25%,
@plyr-progress-loading-bg 25%,
transparent 25%,
transparent 50%,
@progress-loading-bg 50%,
@progress-loading-bg 75%,
@plyr-progress-loading-bg 50%,
@plyr-progress-loading-bg 75%,
transparent 75%,
transparent);
color: transparent;
@ -516,68 +604,35 @@
display: inline-block;
}
// plyr time
&__time {
display: inline-block;
vertical-align: middle;
color: @plyr-control-color;
font-size: @plyr-font-size-small;
line-height: .95;
}
// Media duration hidden on small screens
&__time + &__time {
display: none;
@media (min-width: @plyr-bp-control-split) {
display: inline-block;
}
// Add a slash in before
&::before {
content: '\2044';
margin-right: @plyr-control-spacing;
}
}
// Volume control
// <input[type='range']> element
// Specificity is for bootstrap compatibility
&__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;
cursor: pointer;
background: transparent;
border: none;
// Webkit
&::-webkit-slider-runnable-track {
.volume-track();
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
margin-top: -((@volume-thumb-height - @volume-track-height) / 2);
.volume-thumb();
}
// Mozilla
&::-moz-range-track {
.volume-track();
}
&::-moz-range-thumb {
.volume-thumb();
}
// Microsoft
&::-ms-track {
height: @volume-track-height;
background: transparent;
border-color: transparent;
border-width: ((@volume-thumb-height - @volume-track-height) / 2) 0;
color: transparent;
}
&::-ms-fill-lower,
&::-ms-fill-upper {
.volume-track();
}
&::-ms-thumb {
.volume-thumb();
}
&:focus {
outline: 0;
&::-webkit-slider-thumb {
background: @volume-thumb-bg-focus;
}
&::-moz-range-thumb {
background: @volume-thumb-bg-focus;
}
&::-ms-thumb {
background: @volume-thumb-bg-focus;
}
}
max-width: 100px;
}
// Hide sound controls on iOS
@ -596,16 +651,16 @@
// Audio specific styles
// Position the progress within the container
&--audio .plyr__controls {
padding-top: (@control-spacing * 2);
padding-top: (@plyr-control-spacing * 2);
}
&--audio .plyr__progress {
bottom: auto;
top: 0;
background: @off-white;
background: #fff;
}
// Full screen mode
&--fullscreen,
&.plyr--fullscreen,
&--fullscreen-active {
position: fixed;
top: 0;
@ -633,29 +688,10 @@
}
// Hide controls when playing in full screen
&--fullscreen--hide-controls&--fullscreen-active&--playing {
&.plyr--hide-controls {
.plyr__controls {
transform: translateY(100%) translateY(@control-spacing / 2);
transition: transform .3s .2s ease;
}
&.plyr--hover .plyr__controls {
transform: translateY(0);
}
.plyr__captions {
bottom: (@control-spacing / 2);
transition: bottom .3s .2s ease;
}
}
// Captions
&--fullscreen .plyr__captions,
&--fullscreen-active .plyr__captions,
&--fullscreen--hide-controls&--fullscreen-active&--playing&--hover &__captions {
top: auto;
bottom: 90px;
@media (min-width: @bp-control-split) {
bottom: 60px;
opacity: 0;
visibility: hidden;
}
}

12
src/sprite/icon-fast-forward.svg Executable file → Normal file
View File

@ -1,5 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Fast Forward</title>
<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>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<polygon points="7,6.4 0,1 0,15 7,9.6 7,15 16,8 7,1 "/>
</svg>

Before

Width:  |  Height:  |  Size: 510 B

After

Width:  |  Height:  |  Size: 534 B

View File

@ -1,8 +1,8 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Pause</title>
<g transform="translate(2.000000, 2.000000)">
<path d="M0,2 L0,12 C5.24848613e-17,14 2,14 2,14 L4,14 C4,14 6,14 6,12 C6,11.786438 6,11.572876 6,11 L6,2 C6,3.17446247e-09 4,0 4,0 L2,0 C2,0 0,0 0,2 Z M2,2 L4,2 L4,12 L2,12 L2,2 Z"></path>
<path d="M8,2 L8,12 C8,14 10,14 10,14 L12,14 C12,14 14,14 14,12 C14,11.786438 14,11.572876 14,11 L14,2 C14,3.17446247e-09 12,0 12,0 L10,0 C10,0 8,0 8,2 Z M10,2 L12,2 L12,12 L10,12 L10,2 Z"></path>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<path d="M5,1H2C1.4,1,1,1.4,1,2v12c0,0.6,0.4,1,1,1h3c0.6,0,1-0.4,1-1V2C6,1.4,5.6,1,5,1z"/>
<path d="M14,1h-3c-0.6,0-1,0.4-1,1v12c0,0.6,0.4,1,1,1h3c0.6,0,1-0.4,1-1V2C15,1.4,14.6,1,14,1z"/>
</svg>

Before

Width:  |  Height:  |  Size: 666 B

After

Width:  |  Height:  |  Size: 667 B

12
src/sprite/icon-play.svg Executable file → Normal file
View File

@ -1,5 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Play</title>
<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>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<path d="M13.6,7.2l-10-7C2.9-0.3,2,0.2,2,1v14c0,0.8,0.9,1.3,1.6,0.8l10-7C14.1,8.4,14.1,7.6,13.6,7.2z"/>
</svg>

Before

Width:  |  Height:  |  Size: 382 B

After

Width:  |  Height:  |  Size: 582 B

View File

@ -1,5 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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">
<title>Rewind</title>
<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" transform="translate(9.000000, 10.000000) rotate(-180.000000) translate(-9.000000, -10.000000) "></path>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<polygon points="9,1 0,8 9,15 9,9.6 16,15 16,1 9,6.4 "/>
</svg>

Before

Width:  |  Height:  |  Size: 729 B

After

Width:  |  Height:  |  Size: 535 B