Refined audio card player sliders

refs https://github.com/TryGhost/Team/issues/1230

- refines seek and volume sliders for audio player to show progress marker with background color
This commit is contained in:
Rishabh 2021-12-08 00:16:32 +05:30
parent 1dd012d9f4
commit 27ced6cc84

View File

@ -32,7 +32,7 @@
font-family: inherit;
font-size: 1em;
font-weight: 700;
= background: transparent;
background: transparent;
}
.kg-player {
@ -117,6 +117,41 @@
width: 80px;
}
.kg-audio-seek-slider::before {
position: absolute;
content: "";
left: 0;
width: var(--seek-before-width) !important;
height: 3px;
background-color: rgba(0, 125, 181, 0.6);
cursor: pointer;
}
.kg-audio-volume-slider::before {
position: absolute;
content: "";
left: 0;
width: var(--volume-before-width) !important;
height: 3px;
background-color: rgba(0, 125, 181, 0.6);
cursor: pointer;
}
/* Browser styles for slider */
/* .kg-audio-volume-slider::-webkit-slider-runnable-track {
background: rgba(0, 125, 181, 0.6) !important;
}
.kg-audio-volume-slider::-moz-range-track {
background: rgba(0, 125, 181, 0.6) !important;
}
.kg-audio-volume-slider::-ms-fill-upper {
background: rgba(0, 125, 181, 0.6) !important;
}
.kg-audio-volume-slider::before {
width: var(--volume-before-width) !important;
} */
/* Resetting browser styles
/* --------------------------------------------------------------- */