airsonic-ui/src/sass/app.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
    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-grow: 3
    height: 1rem

    .progress-info-text
      color: whitesmoke
      font-size: $size-7
      flex-shrink: 0
      flex-grow: 0

    .progress-bars
      margin-left: .6rem
      margin-right: .6rem
      position: relative
      flex-grow: 1

    .complete-song-bar,
    .buffered-part-bar,
    .played-back-bar
      height: 1rem
      position: absolute
      top: 0
      left: 0

      // these are the actual bars
      &:after
        content: ''
        display: block
        height: 1px
        position: relative
        top: 50%


    .complete-song-bar
      width: 100%

      &:after
        background: rgb(93,93,93)

    .buffered-part-bar
      cursor: pointer

      &:after
        background: rgb(143,143,143)

    .played-back-bar
      pointer-events: none

      &:after
        background: whitesmoke

      .played-back-knob
        position: absolute
        width: 5px
        height: 5px
        left: 100%
        top: 50%
        margin-left: -2.5px
        margin-top: -2.5px
        background: whitesmoke
        border-radius: 100%

  // 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: 48px

  &.is-128x128 .missing-cover
    width: 128px
    height: 128px

  &.is-256x256 .missing-cover
    width: 256px
    height: 256px

// 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