Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Updated audio player class-names

Browse source 
Refs https://github.com/TryGhost/Team/issues/1230
This commit is contained in:
Sanne de Vries 2021-12-13 13:46:19 +01:00
parent c10db9a885
commit 10d59e9795
3 changed files with 23 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
core/frontend/apps/amp/lib/views/amp.hbs
View file

@ -665,7 +665,7 @@
fill: white;
}
.kg-player-container {
.kg-audio-player-container {
position: relative;
display: flex;
flex-direction: column;
@ -691,7 +691,7 @@
max-height: 40px !important;
}
.kg-player {
.kg-audio-player {
display: none;
}

40
core/frontend/src/cards/css/audio.css
View file

@ -28,7 +28,7 @@
fill: white;
}
.kg-player-container {
.kg-audio-player-container {
position: relative;
display: flex;
flex-direction: column;
@ -50,7 +50,7 @@
background: transparent;
}
.kg-player {
.kg-audio-player {
display: flex;
flex-grow: 1;
align-items: center;
@ -187,34 +187,34 @@
/* Resetting browser styles
/* --------------------------------------------------------------- */
.kg-player-container input[type=range] {
.kg-audio-player-container input[type=range] {
position: relative;
-webkit-appearance: none;
background: transparent;
}
.kg-player-container input[type=range]:focus {
.kg-audio-player-container input[type=range]:focus {
outline: none;
}
.kg-player-container input[type=range]::-webkit-slider-thumb {
.kg-audio-player-container input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
.kg-player-container input[type=range]::-ms-track {
.kg-audio-player-container input[type=range]::-ms-track {
cursor: pointer;
border-color: transparent;
color: transparent;
background: transparent;
}
.kg-player-container button {
.kg-audio-player-container button {
display: flex;
align-items: center;
border: 0;
}
.kg-player-container input[type="range"] {
.kg-audio-player-container input[type="range"] {
height: auto;
padding: 0;
border: 0;
@ -223,7 +223,7 @@
/* 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%;
height: 4px;
cursor: pointer;
@ -231,7 +231,7 @@
border-radius: 2px;
}
.kg-player-container input[type="range"]::-webkit-slider-thumb {
.kg-audio-player-container input[type="range"]::-webkit-slider-thumb {
position: relative;
box-sizing: content-box;
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);
}
.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);
}
/* Firefox styles
/* --------------------------------------------------------------- */
.kg-player-container input[type="range"]::-moz-range-track {
.kg-audio-player-container input[type="range"]::-moz-range-track {
width: 100%;
height: 4px;
cursor: pointer;
@ -259,12 +259,12 @@
border-radius: 2px;
}
.kg-player-container input[type="range"]::-moz-range-progress {
.kg-audio-player-container input[type="range"]::-moz-range-progress {
background: currentColor;
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;
width: 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);
}
.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);
}
/* Edge & IE styles
/* --------------------------------------------------------------- */
.kg-player-container input[type="range"]::-ms-track {
.kg-audio-player-container input[type="range"]::-ms-track {
width: 100%;
height: 3px;
border: solid transparent;
@ -291,15 +291,15 @@
background: transparent;
}
.kg-player-container input[type="range"]::-ms-fill-lower {
.kg-audio-player-container input[type="range"]::-ms-fill-lower {
background: #fff;
}
.kg-player-container input[type="range"]::-ms-fill-upper {
.kg-audio-player-container input[type="range"]::-ms-fill-upper {
background: currentColor;
}
.kg-player-container input[type="range"]::-ms-thumb {
.kg-audio-player-container input[type="range"]::-ms-thumb {
box-sizing: content-box;
width: 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);
}
.kg-player-container input[type="range"]:active::-ms-thumb {
.kg-audio-player-container input[type="range"]:active::-ms-thumb {
transform: scale(1.2);
}

2
core/frontend/src/cards/js/audio.js
View file

@ -1,6 +1,6 @@
(function() {
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 pauseIconContainer = audioElementContainer.querySelector('.kg-audio-pause-icon');
const seekSlider = audioElementContainer.querySelector('.kg-audio-seek-slider');