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; 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;
} }

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

@ -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);
} }

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

@ -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');