mirror of
https://github.com/heyarne/airsonic-ui.git
synced 2026-05-07 02:33:39 +02:00
364 lines
6.3 KiB
Sass
364 lines
6.3 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
|
|
|
|
// small loading indicator at top of content
|
|
.breadcrumb
|
|
.loader
|
|
margin-left: .5em
|
|
|
|
// 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
|
|
.button-controls
|
|
position: relative
|
|
flex-shrink: 0
|
|
padding-right: .6rem
|
|
|
|
&:first-of-type
|
|
padding-left: .6rem
|
|
|
|
.button-menu
|
|
svg.volume-bar
|
|
overflow: visible
|
|
|
|
.inactive
|
|
fill: $background
|
|
|
|
.active
|
|
fill: $link
|
|
|
|
.click-dummy
|
|
cursor: pointer
|
|
fill: transparent
|
|
|
|
.button-menu-closer
|
|
// this element is needed so we can have a "click-outside"
|
|
position: fixed
|
|
z-index: -1
|
|
top: 0
|
|
left: 0
|
|
right: 0
|
|
bottom: 0
|
|
|
|
.button-menu
|
|
position: absolute
|
|
z-index: 100
|
|
width: 36px
|
|
bottom: calc(100% + .3em)
|
|
padding: $button-padding-horizontal $button-padding-horizontal / 2
|
|
|
|
border-radius: $radius
|
|
background: $white
|
|
color: $dark
|
|
box-shadow: 0 0 2px rgba(0,0,0,.1), 0 0 4px rgba(0,0,0,.1)
|
|
|
|
// little arrow at the bottom
|
|
&::after
|
|
position: absolute
|
|
content: ''
|
|
display: block
|
|
width: 6px
|
|
height: 6px
|
|
background: inherit
|
|
top: 100%
|
|
left: 50%
|
|
margin-left: -3px
|
|
margin-top: -3px
|
|
transform: rotate(45deg)
|
|
box-shadow: 2px 2px 1px rgba(0,0,0,.1)
|
|
|
|
// 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
|
|
|
|
// 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
|
|
|
|
.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
|
|
|
|
.collection-info
|
|
list-style: none
|
|
|
|
li
|
|
display: inline-block
|
|
margin-left: 0.75rem
|
|
|
|
&:first-child
|
|
margin-left: 0
|
|
|
|
.song-listing-table
|
|
tr.is-playing
|
|
background-color: $table-row-active-background-color
|
|
color: $table-row-active-color
|
|
|
|
a, strong, td.song-duration, td.sort-handle span
|
|
color: currentColor
|
|
|
|
span.button, div.dropdown
|
|
color: $table-color
|
|
|
|
td
|
|
&.is-narrow
|
|
white-space: nowrap
|
|
|
|
&.song-duration
|
|
text-align: right
|
|
|
|
&.sortable-handle
|
|
-webkit-touch-callout: none
|
|
user-select: none
|
|
|
|
tbody .song-duration
|
|
color: $grey-light
|
|
|
|
tr:hover
|
|
.button
|
|
|
|
// drag'n'drop
|
|
.sortable-handle
|
|
span
|
|
cursor: grabbing
|
|
user-select: none
|
|
|
|
tr.sortable-is-moving.is-playing
|
|
background-color: $table-row-active-background-color
|
|
color: $table-row-active-color
|
|
|
|
a, strong, td.song-duration, td.sort-handle span
|
|
color: currentColor
|