mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-11 02:12:21 -05:00
Updated audio player class-names
Refs https://github.com/TryGhost/Team/issues/1230
This commit is contained in:
parent
c10db9a885
commit
10d59e9795
3 changed files with 23 additions and 23 deletions
|
@ -665,7 +665,7 @@
|
||||||
fill: white;
|
fill: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-player-container {
|
.kg-audio-player-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -691,7 +691,7 @@
|
||||||
max-height: 40px !important;
|
max-height: 40px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-player {
|
.kg-audio-player {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -28,7 +28,7 @@
|
||||||
fill: white;
|
fill: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-player-container {
|
.kg-audio-player-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -50,7 +50,7 @@
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-player {
|
.kg-audio-player {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -187,34 +187,34 @@
|
||||||
/* Resetting browser styles
|
/* Resetting browser styles
|
||||||
/* --------------------------------------------------------------- */
|
/* --------------------------------------------------------------- */
|
||||||
|
|
||||||
.kg-player-container input[type=range] {
|
.kg-audio-player-container input[type=range] {
|
||||||
position: relative;
|
position: relative;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-player-container input[type=range]:focus {
|
.kg-audio-player-container input[type=range]:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-player-container input[type=range]::-webkit-slider-thumb {
|
.kg-audio-player-container input[type=range]::-webkit-slider-thumb {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-player-container input[type=range]::-ms-track {
|
.kg-audio-player-container input[type=range]::-ms-track {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
color: transparent;
|
color: transparent;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-player-container button {
|
.kg-audio-player-container button {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-player-container input[type="range"] {
|
.kg-audio-player-container input[type="range"] {
|
||||||
height: auto;
|
height: auto;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
@ -223,7 +223,7 @@
|
||||||
/* Chrome & Safari styles
|
/* Chrome & Safari styles
|
||||||
/* --------------------------------------------------------------- */
|
/* --------------------------------------------------------------- */
|
||||||
|
|
||||||
.kg-player-container input[type="range"]::-webkit-slider-runnable-track {
|
.kg-audio-player-container input[type="range"]::-webkit-slider-runnable-track {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 4px;
|
height: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -231,7 +231,7 @@
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-player-container input[type="range"]::-webkit-slider-thumb {
|
.kg-audio-player-container input[type="range"]::-webkit-slider-thumb {
|
||||||
position: relative;
|
position: relative;
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
width: 12px;
|
width: 12px;
|
||||||
|
@ -244,14 +244,14 @@
|
||||||
box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,0.24);
|
box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,0.24);
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-player-container input[type="range"]:active::-webkit-slider-thumb {
|
.kg-audio-player-container input[type="range"]:active::-webkit-slider-thumb {
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Firefox styles
|
/* Firefox styles
|
||||||
/* --------------------------------------------------------------- */
|
/* --------------------------------------------------------------- */
|
||||||
|
|
||||||
.kg-player-container input[type="range"]::-moz-range-track {
|
.kg-audio-player-container input[type="range"]::-moz-range-track {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 4px;
|
height: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -259,12 +259,12 @@
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-player-container input[type="range"]::-moz-range-progress {
|
.kg-audio-player-container input[type="range"]::-moz-range-progress {
|
||||||
background: currentColor;
|
background: currentColor;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-player-container input[type="range"]::-moz-range-thumb {
|
.kg-audio-player-container input[type="range"]::-moz-range-thumb {
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
|
@ -275,14 +275,14 @@
|
||||||
box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,0.24);
|
box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,0.24);
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-player-container input[type="range"]:active::-moz-range-thumb {
|
.kg-audio-player-container input[type="range"]:active::-moz-range-thumb {
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Edge & IE styles
|
/* Edge & IE styles
|
||||||
/* --------------------------------------------------------------- */
|
/* --------------------------------------------------------------- */
|
||||||
|
|
||||||
.kg-player-container input[type="range"]::-ms-track {
|
.kg-audio-player-container input[type="range"]::-ms-track {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 3px;
|
height: 3px;
|
||||||
border: solid transparent;
|
border: solid transparent;
|
||||||
|
@ -291,15 +291,15 @@
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-player-container input[type="range"]::-ms-fill-lower {
|
.kg-audio-player-container input[type="range"]::-ms-fill-lower {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-player-container input[type="range"]::-ms-fill-upper {
|
.kg-audio-player-container input[type="range"]::-ms-fill-upper {
|
||||||
background: currentColor;
|
background: currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-player-container input[type="range"]::-ms-thumb {
|
.kg-audio-player-container input[type="range"]::-ms-thumb {
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
|
@ -310,6 +310,6 @@
|
||||||
box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,0.24);
|
box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,0.24);
|
||||||
}
|
}
|
||||||
|
|
||||||
.kg-player-container input[type="range"]:active::-ms-thumb {
|
.kg-audio-player-container input[type="range"]:active::-ms-thumb {
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
(function() {
|
(function() {
|
||||||
const handleAudioPlayer = function (audioElementContainer) {
|
const handleAudioPlayer = function (audioElementContainer) {
|
||||||
const audioPlayerContainer = audioElementContainer.querySelector('.kg-player-container');
|
const audioPlayerContainer = audioElementContainer.querySelector('.kg-audio-player-container');
|
||||||
const playIconContainer = audioElementContainer.querySelector('.kg-audio-play-icon');
|
const playIconContainer = audioElementContainer.querySelector('.kg-audio-play-icon');
|
||||||
const pauseIconContainer = audioElementContainer.querySelector('.kg-audio-pause-icon');
|
const pauseIconContainer = audioElementContainer.querySelector('.kg-audio-pause-icon');
|
||||||
const seekSlider = audioElementContainer.querySelector('.kg-audio-seek-slider');
|
const seekSlider = audioElementContainer.querySelector('.kg-audio-seek-slider');
|
||||||
|
|
Loading…
Add table
Reference in a new issue