mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-25 02:31:59 -05:00
Updated audio card frontend rendering
Refs https://github.com/TryGhost/Team/issues/1230
This commit is contained in:
Sanne de Vries
parent
0aaa1b9c75
commit
b6544afff5
2 changed files with 212 additions and 175 deletions
|
|
@ -1,186 +1,223 @@
|
|||
.kg-audio-card {
|
||||
margin-top: 7vmin;
|
||||
}
|
||||
|
||||
.kg-audio-player-container button {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.kg-audio-player-container {
|
||||
position: relative;
|
||||
/* margin: 0 2.5% auto 2.5%; */
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 96px;
|
||||
box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
|
||||
}
|
||||
|
||||
.kg-audio-thumbnail {
|
||||
width: 80px;
|
||||
margin: 8px;
|
||||
object-fit: cover;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.kg-player-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
/* max-width: 500px; */
|
||||
height: 132px;
|
||||
background: #fff;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
--seek-before-width: 0%;
|
||||
--volume-before-width: 100%;
|
||||
--buffered-width: 0%;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
.kg-audio-player-container::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: calc(100% + 4px);
|
||||
height: calc(100% + 4px);
|
||||
left: -2px;
|
||||
top: -2px;
|
||||
background: linear-gradient(to left, #007db5, #ff8a00);
|
||||
z-index: -1;
|
||||
}
|
||||
.kg-audio-player-container p {
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
right: 5%;
|
||||
padding: 0 5px;
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
background: #fff;
|
||||
}
|
||||
.kg-audio-play-icon {
|
||||
margin: 20px 2.5% 10px 2.5%;
|
||||
}
|
||||
.kg-audio-player-container path {
|
||||
stroke: #007db5;
|
||||
}
|
||||
.kg-audio-duration,
|
||||
.kg-audio-current-time {
|
||||
display: inline-block;
|
||||
width: 37px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
margin: 28.5px 0 18.5px 0;
|
||||
float: left;
|
||||
}
|
||||
.kg-audio-player-container output {
|
||||
display: inline-block;
|
||||
width: 32px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
margin: 10px 2.5% 0 5%;
|
||||
float: left;
|
||||
clear: left;
|
||||
}
|
||||
.kg-audio-volume-slider {
|
||||
margin: 10px 2.5% !important;
|
||||
width: 58% !important;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.kg-audio-mute-icon {
|
||||
margin: 0 2.5%;
|
||||
}
|
||||
.kg-audio-player-container input[type="range"] {
|
||||
position: relative;
|
||||
-webkit-appearance: none;
|
||||
width: 48%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 19px;
|
||||
margin: 30px 2.5% 20px 2.5%;
|
||||
float: left;
|
||||
outline: none;
|
||||
}
|
||||
.kg-audio-player-container input[type="range"]::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
cursor: pointer;
|
||||
background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
|
||||
}
|
||||
.kg-audio-player-container input[type="range"]::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 8px;
|
||||
left: 0;
|
||||
width: var(--seek-before-width);
|
||||
height: 3px;
|
||||
background-color: #007db5;
|
||||
cursor: pointer;
|
||||
}
|
||||
.kg-audio-player-container input[type="range"]::-webkit-slider-thumb {
|
||||
position: relative;
|
||||
-webkit-appearance: none;
|
||||
box-sizing: content-box;
|
||||
border: 1px solid #007db5;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
margin: -7px 0 0 0;
|
||||
}
|
||||
.kg-audio-player-container input[type="range"]:active::-webkit-slider-thumb {
|
||||
transform: scale(1.2);
|
||||
background: #007db5;
|
||||
}
|
||||
.kg-audio-player-container input[type="range"]::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
cursor: pointer;
|
||||
background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
|
||||
}
|
||||
.kg-audio-player-container input[type="range"]::-moz-range-progress {
|
||||
background-color: #007db5;
|
||||
}
|
||||
.kg-audio-player-container input[type="range"]::-moz-focus-outer {
|
||||
border: 0;
|
||||
}
|
||||
.kg-audio-player-container input[type="range"]::-moz-range-thumb {
|
||||
box-sizing: content-box;
|
||||
border: 1px solid #007db5;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.kg-audio-player-container input[type="range"]:active::-moz-range-thumb {
|
||||
transform: scale(1.2);
|
||||
background: #007db5;
|
||||
}
|
||||
|
||||
.kg-audio-player-container input[type="range"]::-ms-track {
|
||||
.kg-audio-title {
|
||||
width: 100%;
|
||||
margin: 8px 0 0 0;
|
||||
padding: 8px 12px 0;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
font-size: 1em;
|
||||
font-weight: 700;
|
||||
= background: transparent;
|
||||
}
|
||||
|
||||
.kg-player {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.kg-audio-current-time {
|
||||
min-width: 38px;
|
||||
padding: 0 4px;
|
||||
font-family: inherit;
|
||||
font-size: .85em;
|
||||
font-weight: 500;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.kg-audio-time {
|
||||
color: #ababab;
|
||||
font-family: inherit;
|
||||
font-size: .85em;
|
||||
font-weight: 500;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.kg-audio-duration {
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.kg-audio-play-icon {
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
padding: 0px 4px 0 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.kg-audio-play-icon svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.kg-audio-seek-slider {
|
||||
flex-grow: 1;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.kg-audio-playback-rate {
|
||||
padding: 0 4px;
|
||||
font-family: inherit;
|
||||
font-size: .85em;
|
||||
font-weight: 600;
|
||||
line-height: 1.4em;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.kg-audio-mute-icon {
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
padding: 0 4px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.kg-audio-mute-icon svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.kg-audio-volume-slider {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
/* Resetting browser styles
|
||||
/* --------------------------------------------------------------- */
|
||||
|
||||
.kg-player-container input[type=range] {
|
||||
position: relative;
|
||||
-webkit-appearance: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.kg-player-container input[type=range]:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.kg-player-container input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.kg-player-container input[type=range]::-ms-track {
|
||||
cursor: pointer;
|
||||
border-color: transparent;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Chrome & Safari styles
|
||||
/* --------------------------------------------------------------- */
|
||||
|
||||
.kg-player-container input[type="range"]::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
cursor: pointer;
|
||||
background: rgba(124, 139, 154, 0.25);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.kg-player-container input[type="range"]::-webkit-slider-thumb {
|
||||
position: relative;
|
||||
box-sizing: content-box;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin: -5px 0 0 0;
|
||||
border: 1px solid rgba(124,139,154,.7);
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.kg-player-container input[type="range"]:active::-webkit-slider-thumb {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
/* Firefox styles
|
||||
/* --------------------------------------------------------------- */
|
||||
|
||||
.kg-player-container input[type="range"]::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
cursor: pointer;
|
||||
background: rgba(124, 139, 154, 0.25);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.kg-player-container input[type="range"]::-moz-range-progress {
|
||||
background: rgba(124,139,154,.7);
|
||||
bordfer-radius: 2px;
|
||||
}
|
||||
|
||||
.kg-player-container input[type="range"]::-moz-range-thumb {
|
||||
box-sizing: content-box;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 1px solid rgba(124,139,154,.7);
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.kg-player-container input[type="range"]:active::-moz-range-thumb {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
/* Edge & IE styles
|
||||
/* --------------------------------------------------------------- */
|
||||
|
||||
.kg-player-container input[type="range"]::-ms-track {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: solid transparent;
|
||||
color: transparent;
|
||||
}
|
||||
.kg-audio-player-container input[type="range"]::-ms-fill-lower {
|
||||
background-color: #007db5;
|
||||
}
|
||||
.kg-audio-player-container input[type="range"]::-ms-fill-upper {
|
||||
background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
|
||||
}
|
||||
.kg-audio-player-container input[type="range"]::-ms-thumb {
|
||||
box-sizing: content-box;
|
||||
border: 1px solid #007db5;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
}
|
||||
.kg-audio-player-container input[type="range"]:active::-ms-thumb {
|
||||
|
||||
.kg-player-container input[type="range"]::-ms-fill-lower {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.kg-player-container input[type="range"]::-ms-fill-upper {
|
||||
background: rgba(124, 139, 154, 0.25);
|
||||
}
|
||||
|
||||
.kg-player-container input[type="range"]::-ms-thumb {
|
||||
box-sizing: content-box;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 1px solid rgba(124,139,154,.7);
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.kg-player-container input[type="range"]:active::-ms-thumb {
|
||||
transform: scale(1.2);
|
||||
background: #007db5;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
const handleAudioPlayer = function (audioElementContainer) {
|
||||
const audioPlayerContainer = audioElementContainer.querySelector('.kg-audio-player-container');
|
||||
const audioPlayerContainer = audioElementContainer.querySelector('.kg-player-container');
|
||||
const playIconContainer = audioElementContainer.querySelector('.kg-audio-play-icon');
|
||||
const seekSlider = audioElementContainer.querySelector('.kg-audio-seek-slider');
|
||||
const volumeSlider = audioElementContainer.querySelector('.kg-audio-volume-slider');
|
||||
const muteIconContainer = audioElementContainer.querySelector('.kg-audio-mute-icon');
|
||||
const playbackRateContainer = audioElementContainer.querySelector('.kg-audio-playback-rate');
|
||||
const muteIconContainer = audioElementContainer.querySelector('.kg-audio-mute-icon');
|
||||
const volumeSlider = audioElementContainer.querySelector('.kg-audio-volume-slider');
|
||||
const audio = audioElementContainer.querySelector('audio');
|
||||
const durationContainer = audioElementContainer.querySelector('.kg-audio-duration');
|
||||
const currentTimeContainer = audioElementContainer.querySelector('.kg-audio-current-time');
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue