Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-28 15:00:42 +00:00
Code Issues Projects Releases Packages Wiki Activity

Mimimize progress bar when not used

Browse source
This commit is contained in:
An Phan 2016-08-07 20:05:35 +07:00
parent 82b44ef63c
commit 470730853d
No known key found for this signature in database
GPG key ID: 05536BB4BCDC02A2
4 changed files with 19 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
resources/assets/js/components/site-footer/index.vue
View file

@ -459,6 +459,16 @@ export default {
left: 0;
}
.plyr__progress {
overflow: hidden;
height: 1px;
html.touch &, .middle-pane:hover & {
overflow: visible;
height: $plyr-volume-track-height;
}
}
.plyr__controls {
position: absolute;
top: 0;

8
resources/assets/sass/app.scss
View file

@ -4,14 +4,6 @@
@import "partials/_mixins.scss";
@import "partials/_hacks.scss";
// Here we set some default variables to tweak plyr to our theme.
$plyr-blue: $colorHighlight;
$plyr-control-color: $colorHighlight;
$plyr-control-bg-hover: $colorHighlight;
$plyr-volume-track-height: 6px;
$plyr-control-spacing: 6px;
@import "vendor/_plyr.scss";
@import "vendor/_nprogress.scss";
@import "partials/_shared.scss";

7
resources/assets/sass/partials/_vars.scss
View file

@ -36,3 +36,10 @@ $footerHeightMobile: 74px;
$mainHeadingHeight: 64px;
$extraPanelWidth: 334px;
$plyr-blue: $colorHighlight;
$plyr-control-color: $colorHighlight;
$plyr-control-color-hover: $colorHighlight;
$plyr-control-bg-hover: $colorHighlight;
$plyr-volume-track-height: 6px;
$plyr-control-spacing: 6px;

17
resources/assets/sass/vendor/_plyr.scss vendored
View file

@ -1,3 +1,5 @@
@import '../partials/_vars.scss';
// ==========================================================================
// Plyr styles
// https://github.com/selz/plyr
@ -28,21 +30,6 @@ $plyr-control-spacing: 10px !default;
$plyr-controls-bg: #fff !default;
$plyr-control-bg-hover: $plyr-blue !default;
$plyr-control-color-hover: null;
// Contrast
@if lightness($plyr-controls-bg) >= 65% {
$plyr-control-color: $plyr-gray-light !default;
}
@else {
$plyr-control-color: $plyr-gray-lighter !default;
}
@if lightness($plyr-control-bg-hover) >= 65% {
$plyr-control-color-hover: $plyr-gray !default;
}
@else {
$plyr-control-color-hover: #fff !default;
}
// Tooltips
$plyr-tooltip-bg: $plyr-controls-bg !default;
$plyr-tooltip-border-color: transparentize($plyr-gray-dark, .1) !default;