nikan
/
jukebox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Styled the duration and remaining time

pull/29/head
Nikan Dalvand 2019-07-28 12:46:46 +04:30
parent 70555d1b8c
commit 27601f6901
3 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/renderer/layouts/PlayerBar.vue
View File

@ -1,17 +1,17 @@
<template> <template>
<section class="player"> <section class="player">
<img @load="onArtworkLoad" class="artwork" src="/static/demo/artwork.jpg" /> <img @load="onArtworkLoad" class="artwork" src="/static/demo/yellow.jpeg" />
<div> <div>
<p class="title">Don't Let Me Down</p> <p class="title">Yellow</p>
<p class="artist">The Chainsmokers</p> <p class="artist">Rich Brian</p>
</div> </div>
<div class="visualizer"> <div class="visualizer">
<div id="visualizer"></div> <div id="visualizer"></div>
<div id="minimap" class="shade"></div> <div id="minimap" class="shade"></div>
</div> </div>
<div class="duration"> <div class="duration">
<p class="progress active">00:00</p> <p class="currentTime progress active">00:00</p>
<p>{{duration}}</p> <p class="remainingTime">{{duration}}</p>
</div> </div>
<div class="control-buttons"> <div class="control-buttons">
<div class="play-pause-button" @click="togglePlay"> <div class="play-pause-button" @click="togglePlay">
@ -162,10 +162,10 @@ section.player
img.artwork img.artwork
height: 4.5rem height: 4.5rem
width: 4.5rem width: 4.5rem
p.title,p.artist p.title,p.artist,.currentTime,.remainingTime
font-size: .8rem font-size: .8rem
margin: 8px 10px margin: 8px 10px
p.artist p.artist,.remainingTime
color: lighten(black,45) color: lighten(black,45)
.visualizer .visualizer
flex-grow: 1 flex-grow: 1

BIN
static/demo/music.mp3
View File

Binary file not shown.

BIN
static/demo/yellow.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB