Cleanup
This commit is contained in:
23
layout/sidebar/audioplayer/audioplayer.pixy
Normal file
23
layout/sidebar/audioplayer/audioplayer.pixy
Normal file
@ -0,0 +1,23 @@
|
||||
component AudioPlayer
|
||||
#audio-player
|
||||
#audio-player-anime-info.hidden
|
||||
a#audio-player-anime-link(href="", title="", aria-label="Anime image")
|
||||
img#audio-player-anime-image.lazy.hidden(data-src="", data-webp="true", alt="Anime cover")
|
||||
|
||||
a#audio-player-track-title(href="", aria-label="Track title")
|
||||
|
||||
#audio-player-controls
|
||||
button#audio-player-prev.audio-player-side-button.action(data-action="playPreviousTrack", data-trigger="click", aria-label="Previous track")
|
||||
RawIcon("step-backward")
|
||||
|
||||
.audio-player-play-pause-container
|
||||
button#audio-player-play.action(data-action="resumeAudio", data-trigger="click", aria-label="Play")
|
||||
RawIcon("play")
|
||||
|
||||
button#audio-player-pause.fade-out.action(data-action="pauseAudio", data-trigger="click", aria-label="Pause")
|
||||
RawIcon("pause")
|
||||
|
||||
button#audio-player-next.audio-player-side-button.action(data-action="playNextTrack", data-trigger="click", aria-label="Next track")
|
||||
RawIcon("step-forward")
|
||||
|
||||
input#audio-player-volume.action(data-action="setVolume", data-trigger="input", type="range", min="0", max="100", value="50", aria-label="Change volume")
|
||||
181
layout/sidebar/audioplayer/audioplayer.scarlet
Normal file
181
layout/sidebar/audioplayer/audioplayer.scarlet
Normal file
@ -0,0 +1,181 @@
|
||||
const audio-player-volume-background = rgba(0, 0, 0, 0.03)
|
||||
|
||||
#audio-player
|
||||
vertical
|
||||
default-transition
|
||||
justify-content center
|
||||
position relative
|
||||
margin-bottom 0.8rem
|
||||
flex-shrink 0
|
||||
|
||||
#audio-player-anime-info
|
||||
display flex
|
||||
justify-content center
|
||||
align-items center
|
||||
width 100%
|
||||
margin-top 0.8rem
|
||||
|
||||
#audio-player-anime-link
|
||||
width anime-image-medium-width
|
||||
height anime-image-medium-width
|
||||
overflow-y hidden
|
||||
border-radius ui-element-border-radius
|
||||
opacity 0.75
|
||||
transform opacity transition-speed ease
|
||||
|
||||
:hover
|
||||
opacity 1 !important
|
||||
|
||||
#audio-player-anime-image
|
||||
width 100%
|
||||
transform translateY(0)
|
||||
will-change transform
|
||||
animation bounce-up-down 45s linear infinite
|
||||
|
||||
// The element-found class doesn't set opacity,
|
||||
// because we're overwriting the animation.
|
||||
// That's why we have to manually add it here.
|
||||
&.element-found
|
||||
opacity 1
|
||||
|
||||
animation bounce-up-down
|
||||
50%
|
||||
transform translateY(-30%) rotate(0.002deg)
|
||||
|
||||
#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 rotate-x-once 5s ease infinite alternate
|
||||
|
||||
animation rotate-x-once
|
||||
0%
|
||||
transform rotateX(0)
|
||||
90%
|
||||
transform rotateX(0)
|
||||
100%
|
||||
transform rotateX(90deg)
|
||||
|
||||
#audio-player-controls
|
||||
horizontal
|
||||
justify-content center
|
||||
align-items center
|
||||
justify-content space-evenly
|
||||
|
||||
.audio-player-play-pause-container
|
||||
position relative
|
||||
width 48px
|
||||
height 48px
|
||||
|
||||
#audio-player-play,
|
||||
#audio-player-pause
|
||||
position absolute
|
||||
left 0
|
||||
top 0
|
||||
display flex
|
||||
justify-content center
|
||||
align-items center
|
||||
font-size 1.5rem
|
||||
|
||||
border-radius 50%
|
||||
width 100%
|
||||
height 100%
|
||||
|
||||
:hover
|
||||
color button-hover-color
|
||||
background button-hover-background
|
||||
|
||||
&.fade-out
|
||||
pointer-events none
|
||||
|
||||
svg-icon
|
||||
[name="play"]
|
||||
transform translateX(3px)
|
||||
|
||||
#audio-player-play,
|
||||
#audio-player-pause,
|
||||
.audio-player-side-button
|
||||
color text-color
|
||||
background rgba(0, 0, 0, 0.03)
|
||||
border none
|
||||
|
||||
.audio-player-side-button
|
||||
width 32px
|
||||
height 32px
|
||||
display flex
|
||||
justify-content center
|
||||
align-items center
|
||||
|
||||
#audio-player-prev
|
||||
//
|
||||
|
||||
#audio-player-next
|
||||
//
|
||||
|
||||
mixin volume-slider-thumb
|
||||
appearance none
|
||||
width 18px
|
||||
height 18px
|
||||
transform scale(0.5)
|
||||
border none
|
||||
border-radius 50%
|
||||
background text-color
|
||||
cursor pointer
|
||||
opacity 0.25
|
||||
box-shadow shadow-medium
|
||||
default-transition
|
||||
|
||||
mixin volume-slider-hover-thumb
|
||||
background link-hover-color
|
||||
opacity 1
|
||||
transform scale(1)
|
||||
|
||||
#audio-player-volume
|
||||
appearance none
|
||||
-webkit-appearance none
|
||||
width 100%
|
||||
height 6px
|
||||
background audio-player-volume-background
|
||||
outline none !important
|
||||
border none !important
|
||||
box-shadow none !important
|
||||
border-radius 0
|
||||
padding 0
|
||||
margin 0
|
||||
margin-top 1rem
|
||||
|
||||
::-moz-range-track
|
||||
background transparent
|
||||
|
||||
::-moz-focus-outer
|
||||
border 0
|
||||
|
||||
::-webkit-slider-thumb
|
||||
volume-slider-thumb
|
||||
-webkit-appearance none
|
||||
|
||||
::-moz-range-thumb
|
||||
volume-slider-thumb
|
||||
-moz-appearance none
|
||||
|
||||
:active
|
||||
transform none
|
||||
|
||||
:hover
|
||||
cursor pointer
|
||||
background rgba(0, 0, 0, 0.06)
|
||||
|
||||
// Chrome parsing bug forces us to make the following 2 thumb definitions have different statements.
|
||||
// That is why we're adding the appearance statements here, even though they are not really needed.
|
||||
|
||||
::-webkit-slider-thumb
|
||||
volume-slider-hover-thumb
|
||||
-webkit-appearance none
|
||||
|
||||
::-moz-range-thumb
|
||||
volume-slider-hover-thumb
|
||||
-moz-appearance none
|
||||
Reference in New Issue
Block a user