web/notify.moe
Code Issues Pull Requests Activity

Added skip controls UI

Browse Source
This commit is contained in:
Eduard Urbach 2018-03-11 21:28:07 +01:00
parent 3d02c3d7b2
commit 220549b30b
2 changed files with 40 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
layout/sidebar/audioplayer.pixy
View File

@ -1,10 +1,17 @@
component AudioPlayer component AudioPlayer
#audio-player #audio-player
.audio-player-play-pause-container #audio-player-controls
button#audio-player-play.action(data-action="resumeAudio", data-trigger="click") button#audio-player-prev.audio-player-side-button
RawIcon("play") RawIcon("step-backward")
button#audio-player-pause.fade-out.action(data-action="pauseAudio", data-trigger="click") .audio-player-play-pause-container
RawIcon("pause") button#audio-player-play.action(data-action="resumeAudio", data-trigger="click")
RawIcon("play")
button#audio-player-pause.fade-out.action(data-action="pauseAudio", data-trigger="click")
RawIcon("pause")
button#audio-player-next.audio-player-side-button
RawIcon("step-forward")
input#audio-player-volume.action(data-action="setVolume", data-trigger="input", type="range", min="0", max="100", value="50") input#audio-player-volume.action(data-action="setVolume", data-trigger="input", type="range", min="0", max="100", value="50")

32
layout/sidebar/audioplayer.scarlet
View File

@ -2,11 +2,15 @@
vertical vertical
default-transition default-transition
position relative position relative
justify-content center
align-items center
margin 0.8rem 0 margin 0.8rem 0
min-height 90px min-height 90px
#audio-player-controls
horizontal
justify-content center
align-items center
justify-content space-evenly
.audio-player-play-pause-container .audio-player-play-pause-container
position relative position relative
width 48px width 48px
@ -21,9 +25,7 @@
justify-content center justify-content center
align-items center align-items center
font-size 1.5rem font-size 1.5rem
color text-color
background rgba(0, 0, 0, 0.03)
border none
border-radius 50% border-radius 50%
width 100% width 100%
height 100% height 100%
@ -38,6 +40,26 @@
.icon-play .icon-play
transform translateX(3px) 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 mixin volume-slider-thumb
appearance none appearance none
width 18px width 18px