mirror of
https://github.com/heyarne/airsonic-ui.git
synced 2026-05-06 18:33:38 +02:00
Arne Schlüter
a75cdca9e1* Implement variadic url parameters * Trying to make the audio player more mobile friendly All good but progress bar is missing * Implement progress bar with html elements, fixes #39 * Add duration text next to progress bar * Simplify audio player structure * Make albums more comfortably browsable on mobile * Implement responsive generated covers with SVG * Restrict progress bar to 100% max-width * Make search results somewhat usable on mobile * Implement progress bar with svg
285 lines
4.8 KiB
Sass
285 lines
4.8 KiB
Sass
@import "../../node_modules/bulma/bulma"
|
|
@import "../../node_modules/open-iconic/font/css/open-iconic.scss"
|
|
|
|
// area holding content & side navi
|
|
#app
|
|
main
|
|
margin-bottom: 0
|
|
|
|
// big loading spinner
|
|
.app-loading
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
height: 100vh
|
|
font-size: 4.8rem
|
|
color: $grey-light
|
|
.loader
|
|
+loader
|
|
|
|
// bottom bar
|
|
.has-navbar-fixed-bottom
|
|
padding-bottom: 64px
|
|
|
|
.audio-player
|
|
+navbar-fixed
|
|
bottom: 0
|
|
|
|
// first clear some of that navigation styling
|
|
background-color: $dark
|
|
color: $dark-invert
|
|
min-height: 64px
|
|
display: flex
|
|
align-items: center
|
|
|
|
// now off to the contents
|
|
|
|
// when no song is playing
|
|
.idle-notification
|
|
color: inherit
|
|
|
|
// ... or with all the bells and whistles
|
|
.audio-interaction
|
|
display: flex
|
|
flex-grow: 1
|
|
align-items: center
|
|
|
|
.playback-info
|
|
// shows cover and current track
|
|
align-items: center
|
|
flex-grow: 1
|
|
flex-basis: 25%
|
|
color: inherit
|
|
|
|
.media-left
|
|
margin-right: .6rem
|
|
|
|
.artist-and-title
|
|
margin-right: .6rem
|
|
|
|
.artist,
|
|
.song-title
|
|
display: block
|
|
white-space: nowrap
|
|
width: 100%
|
|
max-width: 100%
|
|
overflow: hidden
|
|
text-overflow: ellipsis
|
|
|
|
.progress-indicators
|
|
// hide progress bar on mobile
|
|
display: none
|
|
+tablet
|
|
display: flex
|
|
|
|
flex-basis: 75%
|
|
height: 1rem
|
|
|
|
.progress-info-text
|
|
color: $dark-invert
|
|
font-size: $size-7
|
|
flex-shrink: 0
|
|
flex-grow: 0
|
|
|
|
svg
|
|
overflow: visible
|
|
|
|
.progress-bars
|
|
margin-left: .6rem
|
|
margin-right: .6rem
|
|
position: relative
|
|
flex-grow: 1
|
|
|
|
.complete-song-bar,
|
|
.buffered-part-bar,
|
|
.played-back-bar
|
|
height: 1rem
|
|
|
|
.complete-song-bar
|
|
width: 100%
|
|
|
|
rect
|
|
fill: rgb(93,93,93)
|
|
|
|
.buffered-part-bar
|
|
rect
|
|
fill: rgb(143,143,143)
|
|
|
|
.click-dummy
|
|
cursor: pointer
|
|
fill: transparent
|
|
|
|
.played-back-bar
|
|
pointer-events: none
|
|
|
|
circle,
|
|
rect
|
|
fill: $dark-invert
|
|
|
|
// buttons to control current playback and playlist behavior
|
|
.playback-controls,
|
|
.playback-mode-controls
|
|
flex-shrink: 0
|
|
padding-right: .6rem
|
|
|
|
.playback-controls
|
|
padding-left: .6rem
|
|
|
|
// preview card for album or artist listings
|
|
.preview-card
|
|
.card-content > div,
|
|
.title,
|
|
.subtitle
|
|
overflow: hidden
|
|
white-space: nowrap
|
|
text-overflow: ellipsis
|
|
|
|
.image.is-256x256
|
|
width: auto
|
|
height: auto
|
|
max-width: 256px
|
|
max-height: 256px
|
|
margin: 0
|
|
|
|
.image
|
|
.missing-cover
|
|
display: block
|
|
max-width: 100%
|
|
|
|
&.is-48x48 .missing-cover
|
|
width: 48px
|
|
height: auto
|
|
|
|
&.is-128x128 .missing-cover
|
|
width: 128px
|
|
height: auto
|
|
|
|
&.is-256x256 .missing-cover
|
|
width: 256px
|
|
height: auto
|
|
|
|
// occurs in album detail view
|
|
.table
|
|
.grow
|
|
width: 100%
|
|
|
|
// duh
|
|
.song-list
|
|
.song
|
|
.duration
|
|
padding-left: .5rem
|
|
color: $grey-light
|
|
font-weight: normal
|
|
|
|
&.is-playing
|
|
background-color: $light !important
|
|
font-weight: bold
|
|
|
|
// useful in general to pull elements closer together; bulma es very generous
|
|
// with whitespace
|
|
.section.is-small
|
|
padding-top: 24px
|
|
padding-bottom: 24px
|
|
|
|
// occurs on many pages at the top to show details
|
|
.hero
|
|
&.is-small + .section
|
|
padding-top: 0
|
|
|
|
.media-content
|
|
align-self: center
|
|
|
|
|
|
// floating notifications
|
|
.notifications:not(:empty)
|
|
@extend .container
|
|
z-index: 100
|
|
position: fixed
|
|
left: 0
|
|
right: 0
|
|
padding-top: 3.2rem
|
|
|
|
// loading indicator
|
|
@keyframes you-spin-my-head-right-round
|
|
from
|
|
transform: rotate(0deg)
|
|
transform-origin: 50% 46%
|
|
|
|
to
|
|
transform: rotate(359deg)
|
|
transform-origin: 50% 46%
|
|
|
|
.loading-spinner
|
|
.icon
|
|
animation: 1s infinite you-spin-my-head-right-round
|
|
|
|
|
|
// route specific styling
|
|
.search
|
|
.content .section
|
|
padding: 1.5rem 0
|
|
|
|
.preview-card
|
|
.card-content
|
|
padding: 0.375rem 0.75rem 0.75rem
|
|
|
|
.missing-cover
|
|
display: inline-block
|
|
|
|
.artist.overview
|
|
.alphabetical-list
|
|
column-count: 2
|
|
column-gap: 1.2rem
|
|
|
|
ol
|
|
list-style: none
|
|
|
|
+tablet
|
|
column-count: 3
|
|
+widescreen
|
|
column-count: 4
|
|
|
|
.group
|
|
margin-bottom: 1.5rem
|
|
.subtitle.is-4
|
|
margin-bottom: 1rem
|
|
|
|
.album.detail
|
|
.collection-header
|
|
display: block
|
|
|
|
.media-left
|
|
margin-right: 0
|
|
margin-bottom: 1rem
|
|
|
|
+tablet
|
|
display: flex
|
|
|
|
.media-left
|
|
margin-right: 1rem
|
|
margin-bottom: 0
|
|
|
|
.collection-info
|
|
list-style: none
|
|
|
|
li
|
|
display: inline-block
|
|
margin-left: 0.75rem
|
|
|
|
&:first-child
|
|
margin-left: 0
|
|
|
|
|
|
.song-list
|
|
counter-reset: track
|
|
|
|
tbody
|
|
tr
|
|
counter-increment: track
|
|
|
|
td:first-child > div::before
|
|
color: $grey-light
|
|
content: counter(track)
|
|
font-weight: normal
|
|
display: inline
|
|
padding-right: 0.375rem
|