Added basic UI for anime display

This commit is contained in:
2018-03-11 22:42:58 +01:00
parent e94f8800de
commit 8898413804
3 changed files with 42 additions and 5 deletions

View File

@ -1,6 +1,11 @@
component AudioPlayer
#audio-player
#audio-player-anime-info
a#audio-player-anime-link.ajax(href="", title="")
img#audio-player-anime-image.hidden(data-src="", data-webp="true", alt="Anime cover")
a#audio-player-track-title.ajax(href="")
#audio-player-controls
button#audio-player-prev.audio-player-side-button.action(data-action="playPreviousTrack", data-trigger="click")
RawIcon("step-backward")

View File

@ -1,20 +1,49 @@
#audio-player
vertical
default-transition
justify-content center
position relative
margin 0.8rem 0
min-height 90px
min-height 147px
#audio-player-anime-info
display flex
justify-content center
align-items center
width 100%
#audio-player-anime-image
opacity 0.15 !important
width 39px
height 39px
border-radius 3px
object-fit cover
default-transition
animation rotate-y-once 5s ease infinite alternate
:hover
filter saturate(130%)
opacity 1.0 !important
animation rotate-y-once
0%
transform rotateY(0)
90%
transform rotateY(0)
100%
transform rotateY(90deg)
#audio-player-track-title
width 100%
color text-color
font-size 0.7rem
line-height 1.7em
opacity 0.8
text-align center
padding 0.8rem
animation title-flow 5s ease infinite alternate
animation rotate-x-once 5s ease infinite alternate
animation title-flow
animation rotate-x-once
0%
transform rotateX(0)
90%