music.css

html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  font-size: 10px;
  overflow: hidden;
}

body {
  color: #fff;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: black;
}

/*
 * The overlay is where we display messages like Scanning, No Songs,
 * No SD card and SD Card in Use along with instructions for resolving
 * the issue.  The user can't interact with the app while the overlay
 * is displayed.
 */
#overlay {
  /* it takes up the whole screen */
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  /* almost transparent gray */
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 30;
}

/*
 * The overlay content area holds the text of the overlay.
 * It has borders and a less transparent background so that
 * the overlay text shows up more clearly
 */
#overlay-content {
  background:
  url(images/ui/pattern.png) repeat left top,
  url(images/ui/gradient.png) no-repeat left top;
  background-size: auto auto, 100% 100%;
  /* We can't use shortand with background size because is not implemented yet:
  https://bugzilla.mozilla.org/show_bug.cgi?id=570326; */
  overflow: hidden;
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 0;
  /* Using font-size: 0; we avoid the unwanted visual space (about 3px)
  created by white-spaces and break lines in the code betewen inline-block elements */
  color: #fff;
  padding: 11rem 2.5rem 0 2.5rem;
}

#overlay-title {
  font-weight: normal;
  font-size: 1.9rem;
  color: #fff;
  margin: 0 0.5rem 0 0.5rem;
  padding: 0;
}

#overlay-text {
  padding: 1rem 0.5rem 0 0.5rem;
  border-top: 0.1rem solid #686868;
  font-weight: 300;
  font-size: 2.5rem;
  color: #ebebeb;
}

#overlay-menu {
  z-index: 100;
}

/* For overriding the style from BB */
#overlay-menu.hidden {
  display: none;
}

/* Spinner */
#spinner-overlay { /* just like the #overlay element above */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

/*
 * spinner animation styles copied from
 * shared/style_unstable/progress_activity.css
 */
#spinner {
  position: absolute;
  top: calc(50% - 1.5rem);
  left: calc(50% - 1.5rem);
}


/* Display the names of the songs we scan here */
#scan-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5rem;
  border: none;
  overflow: hidden;
  z-index: 31;
  background-color: #333;
  color: #fff;
}

#scan-spinner {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

#scan-count {
  position: absolute;
  top: 0;
  left: 0;
  width: 5rem;
  height: 5rem;
  border: none;
  background-color: rgba(0,0,0,0);
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  padding-top: 1.7rem;
}

#scan-artist {
  position: absolute;
  top: 0;
  left: 5rem;
  right: 0;
  height: 3rem;
  line-height: 3rem;
  padding-left: .5rem;
  font-size: 1.9rem;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#scan-title {
  position: absolute;
  top: 3rem;
  left: 5rem;
  right: 0;
  height: 2rem;
  line-height: 1.9rem;
  padding-left: .5rem;
  font-size: 1.4rem;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.tiles-mode #title-back,
body.list-mode #title-back,
body.search-from-tiles-mode #title-back,
body.search-from-list-mode #title-back {
  display: none;
}

body.search-from-tiles-mode #title,
body.search-from-list-mode #title {
  transform: translateY(-5rem);
}

body.player-mode #tabs {
  z-index: 1;
}

body.tiles-mode #views {
  transform: translateX(0%);
}

body.search-from-tiles-mode #views {
  transform: translateX(0%) translateY(-5rem);
}

body.list-mode #views,
body.picker-mode #views {
  transform: translateX(-100%);
}

body.search-from-list-mode #views {
  transform: translateX(-100%) translateY(-5rem);
}

body.search-from-tiles-mode #search,
body.search-from-list-mode #search {
  transform: translateY( calc(-100%) );
}

body.search-from-tiles-mode #views-tiles,
body.search-from-list-mode #views-list {
  overflow-y: hidden;
}

body.search-from-tiles-mode #tabs,
body.search-from-list-mode #tabs,
body.picker-mode #tabs {
  display: none;
}

body.sublist-mode #views {
  transform: translateX(-200%);
  z-index: 20;
}

body.player-mode #views {
  transform: translateX(-300%);
  z-index: 30;
}

body.picker-mode #views {
  transition: transform 0ms ease;
}

body.player-mode #title-player,
body.picker-mode #title-player {
  display: none;
}

#title-player > .icon-player {
  background-image: url("./images/now_playing.png");
}

#title-done > .icon-done {
  background-image: url("./images/IconAction_Done_30x30.png");
}

#title {
  transition: transform 300ms ease;
}

#views {
  position: relative;
  width: 100%;
  height: calc(100% - 5rem);
  background-color: rgba(255, 255, 255, 0.2);
  transition: transform 300ms ease;
}

#search {
  position: relative;
  width: 100%;
  height: calc(100% - 3.6rem);
  overflow-x: hidden;
  overflow-y: auto;
  background: -moz-linear-gradient(center top, #303030 0%, #000000 100%) repeat scroll 0 0 transparent;
  z-index: 10;
  transition: transform 300ms ease;
}

.view {
  width: 100%;
  height: auto;
}

#views-tiles,
#views-list,
#views-sublist,
#views-player {
  position: absolute;
}

#views-tiles,
#views-list,
#views-sublist {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #0E1214;
}

#views-tiles {
  left: 0%;
}

#views-list {
  left: 100%;
}

#views-sublist {
  left: 200%;
  overflow-y: hidden;
}

#views-player {
  left: 300%;
  height: 100%;
  overflow: hidden;
}

#views-player.open-mode {
  left: 0%;
}

/* Make sure the tiles and list views are tall enough that we can scroll the
 * search box off-screen. */
#views-tiles-anchor,
#views-list-anchor {
  min-height: 100%;
}

#views-sublist-header,
#views-sublist-anchor {
  position: relative;
  float: left;
  width: 100%;
}

#views-sublist-header {
  height: 8rem;
}

#views-sublist-anchor {
  width: 100%;
  height: calc(100% - 8rem);
  overflow-x: hidden;
  overflow-y: auto;
}

#views-sublist-header-default,
#views-sublist-header-controls {
  position: relative;
  float: left;
  left: 3rem;
  border-bottom: solid 0.1rem rgba(255, 255, 255, 0.1);
}

#views-sublist-header-default {
  width: 8rem;
  height: 8rem;
  overflow: hidden;
  background-clip: content-box;
}

#views-sublist-header-image {
  position: absolute;
  opacity: 0;
}

#views-sublist-header-name {
  position:relative;
  font-size: 1.9rem;
  padding: 0 1rem;
  width: calc(100% - 2rem);
  height: 4rem;
  line-height: 4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#views-sublist-header-controls {
  /* left: 3rem and album-art: 8rem */
  width: calc(100% - 3rem - 8rem);
  height: 8rem;
}

#views-sublist-controls-play,
#views-sublist-controls-shuffle {
  position:relative;
  float: left;
  font-size: 1.9rem;
  padding: 0 1rem;
  width: 50%;
  height: 4rem;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 3rem;
}

#views-sublist-controls-play {
  background-image: url("./images/IconAction_Media_Play_30x30.png");
}

#views-sublist-controls-shuffle {
  background-image: url("./images/IconAction_Media_ShuffleOn_30x30.png");
}

.album-controls-button {
  border: none;
  border-radius: 0;
  background: transparent;
  transition: background 200ms ease;
}

.album-controls-button:hover {
  background: transparent;
}

.album-controls-button:active {
  background: rgb(0, 138, 170);
}

.album-controls-button:disabled {
  opacity: 0.3;
}

.album-controls-button:disabled:active {
  background: transparent;
}

.tile {
  position: relative;
  background-position: center;
  background-size: cover;

  /* We set a background URL here when the thumbnail loads */
}

.main-tile {
  width: 66%;
  height: 0;
  padding-bottom: 66%;
  background-color: black;
  overflow: hidden;
}

.tile:after {
  display:block;
  width: 100%;
  height: 100%;
  border:0.1rem solid black;
  -moz-box-sizing: border-box;
  content: ' ';
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
}

.sub-tile {
  width: 33%;
  height: 0;
  padding-bottom: 33%;
  font-weight: lighter;
  background-color: #303030;
  overflow: hidden;
}

.main-tile:last-child,
.sub-tile:last-child {
  margin-bottom: 4rem;
}

.tile-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-color: rgba(0 ,0, 0, 0);
  transition: background-color 166ms ease-in-out;
}

.tile-container:active {
  background-color: rgba(0 ,0, 0, 0.5);
}

.tile-title-bar {
  width: 100%;
  height: auto;
  pointer-events: none;
}

.tile-title-artist,
.tile-title-album {
  padding: 0.15rem 1rem;
  width: calc(100% - 2rem);
  height: 2.5rem;
  line-height: 2.5rem;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: black 0.1rem 0.1rem;
  background-color: rgba(0, 0, 0, 0.5);
}

.tile-title-artist {
  color: rgba(255, 255, 255, 1);
  font-size: 1.4rem;
}

.tile-title-album {
  color: rgba(255, 255, 255, 0.65);
  font-size: 1.4rem;
}

.main-tile-title {
  font-size: 1.9rem;
}

.sub-tile-title {
  padding: 0.15rem 0.5rem;
  width: calc(100% - 1rem);
  color: rgba(255, 255, 255, 0.8);
}

.float-left {
  position: relative;
  float: left;
  left: 0.5%;
}

.float-right {
  position: relative;
  float: right;
  right: 0.5%;
}

.default-album-0 {
  background-image: url('./images/AlbumArt1_small.png');
  background-size: 100% 100%;
}

.default-album-1 {
  background-image: url('./images/AlbumArt2_small.png');
  background-size: 100% 100%;
}

.default-album-2 {
  background-image: url('./images/AlbumArt3_small.png');
  background-size: 100% 100%;
}

.default-album-3 {
  background-image: url('./images/AlbumArt4_small.png');
  background-size: 100% 100%;
}

.default-album-4 {
  background-image: url('./images/AlbumArt5_small.png');
  background-size: 100% 100%;
}

.default-album-5 {
  background-image: url('./images/AlbumArt6_small.png');
  background-size: 100% 100%;
}

.default-album-6 {
  background-image: url('./images/AlbumArt7_small.png');
  background-size: 100% 100%;
}

.default-album-7 {
  background-image: url('./images/AlbumArt8_small.png');
  background-size: 100% 100%;
}

.default-album-8 {
  background-image: url('./images/AlbumArt9_small.png');
  background-size: 100% 100%;
}

.default-album-9 {
  background-image: url('./images/AlbumArt10_small.png');
  background-size: 100% 100%;
}

#player-cover {
  position: relative;
  width: 100%;
  height: calc(100% - 9.1rem);
  overflow: hidden;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
  animation-duration: 1500ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 500ms;
}

#player-cover-image {
  position: absolute;
  opacity: 0;
}

#player-cover.slideOut #player-cover-caption {
  transform: translateY(100%);
}

#player-cover.slideOut #player-cover-buttons {
  transform: translateY(-100%);
}

#player-cover-caption,
#player-cover-buttons {
  position: relative;
  width: 100%;
  height: 5rem;
  background-color: rgba(0, 0, 0, 0.5);
  transition: transform 700ms ease-in-out;
}

#player-cover-caption {
  top: -5rem;
}

#player-cover-artist,
#player-cover-album {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-indent: 3rem;
  text-shadow: black 0.1rem 0.1rem;
  line-height: 2.5rem;
}

#player-cover-artist {
  width: 75%;
  height: auto;
  text-align: left;
  font-size: 1.9rem;
}

#player-cover-album {
  width: 75%;
  height: auto;
  text-align: left;
  font-size: 1.7rem;
}

#player-cover-artist.hidden-cover-share,
#player-cover-album.hidden-cover-share {
  width: 100%;
}

#player-cover-share {
  width: calc(25% - 2rem);
  height: 80%;
  padding: 0;
  border-radius: 3.5rem;
  margin: 0 1rem;
  font-weight: 500;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 3rem;
  background-image: url("./images/iconaction_media_share_30x30.png");
  position: absolute;
  top: 10%;
  right: -2%;
  z-index: 1;
}

#player-cover-buttons {
  bottom: calc(-100% + 5rem);
}

#player-album-shuffle,
#player-album-rating,
#player-album-repeat {
  position: relative;
  float: left;
}

#player-album-shuffle,
#player-album-repeat {
  top: 10%;
  width: calc(25% - 2rem);
  height: 80%;
  padding: 0;
  border-radius: 3.5rem;
  margin: 0 1rem;
  font-weight: 500;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 3rem;
}

#player-album-shuffle {
  background-image: url("./images/IconAction_Media_ShuffleOff_30x30.png");
}

#player-album-shuffle:disabled,
#player-album-shuffle.shuffle-on {
  background-image: url("./images/IconAction_Media_ShuffleOn_30x30.png");
}

#player-album-repeat.repeat-off {
  background-image: url("./images/IconAction_Media_RepeatOff_30x30.png");
}

#player-album-repeat:disabled,
#player-album-repeat.repeat-list {
  background-image: url("./images/IconAction_Media_RepeatList_30x30.png");
}

#player-album-repeat.repeat-song {
  background-image: url("./images/IconAction_Media_RepeatSong_30x30.png");
}

#player-album-rating {
  width: 50%;
  height: 100%;
  text-align: center;
}

button::-moz-focus-inner {
  padding: 0;
  border: none;
}

.rating-star {
  position: relative;
  float: left;
  width: 20%;
  height: 100%;
  text-align: center;
  color: rgba(255, 255, 255, 0.3);
  border: 0;
  outline: none;
  background-image: url('./images/star_off.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: 2.2rem;
}

.star-on {
  background-image: url('./images/star_on.png');
}

#player-seek {
  position: relative;
  height: 4.2rem;
  font-size: 0;
  background-color: rgba(0,0,0, 0.85);
}

#player-seek-elapsed,
#player-seek-bar,
#player-seek-remaining {
  display: inline-block;
  position: relative;
  vertical-align: top;
}

#player-seek-elapsed,
#player-seek-remaining {
  width: 5.3rem;
  line-height: 4.2rem;
  font-size: 1.4rem;
  font-weight: 400;
  color: #e7e7e7;
}

#player-seek-elapsed {
  padding-left: 1.5rem;
}

#player-seek-remaining {
  text-align: right;
  padding-right: 1.5rem;
}

#player-seek-bar {
  display: inline-block;
  width: 18.4rem;
  height: 100%;
  z-index: 1;
}

#player-seek-bar-progress {
  pointer-events: none;
  -moz-appearance: none;
  position: absolute;
  top: calc(50% - 0.1rem);
  left: 0;
  height: 0.1rem;
  border-width: 0;
  border-radius: 0;
  background-color: #a6b4b7;
}

#player-seek-bar-progress::-moz-progress-bar {
  height: 0.3rem;
  margin-top: -0.1rem;
  background-color: #00CAF2;
}

#player-seek-bar-indicator {
  position: absolute;
  top: calc(50% - 1.2rem);
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background-color: #fff;
  pointer-events: none;
}

#player-seek-bar-indicator.highlight {
  border-radius: 0;
}

#player-seek-bar-indicator.highlight:before {
  content: "";
  position: absolute;
  top: calc(50% - 3.1rem);
  left: calc(50% - 3.1rem);
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  border: 1.9rem solid #00CAF2;
}

#player-controls {
  position: relative;
  height: 4.8rem;
  font-size: 0;
  vertical-align: top;
  border-top: 0.1rem solid rgba(255,255,255, 0.1);
  background-color: #000;
  overflow: hidden;
}

#player-controls-previous,
#player-controls-play,
#player-controls-next {
  position: relative;
  height: 100%;
  padding: 0;
  font-weight: 500;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 3rem;
}

#player-controls-previous,
#player-controls-next {
  width: 10.7rem;
}

#player-controls-play {
  width: 10.6rem;
}

#player-controls-previous {
  background-image: url("./images/IconAction_Media_SkipBackwards_30x30.png");
}

#player-controls-play {
  background-image: url("./images/IconAction_Media_Pause_30x30.png");
}

#player-controls-play.is-pause {
  background-image: url("./images/IconAction_Media_Play_30x30.png");
}

#player-controls-next {
  background-image: url("./images/IconAction_Media_SkipForward_30x30.png");
}

.player-controls-button {
  color: #FFFFFF;
  border: none;
  border-radius: 0;
  background: transparent;
  transition: background 200ms ease;
}
.player-controls-button:hover {
  background: transparent;
}
.player-controls-button:active {
  background: #00caf2;
}
.player-controls-button:disabled {
  opacity: 0.3;
}
.player-controls-button:disabled:active {
  background: transparent;
}

#tabs {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 4rem;
  z-index: 20;
}

/* Overwrite BB tabs background transparency */
[role="tablist"] > [role="tab"] > a {
  background-color: rgba(0, 0, 0, 0.75);
}

#tabs a {
  outline: none;
}

#mix[role="tab"] a:after {
  background-image: url("./images/iconaction_media_gridview.png");
}

#playlists[role="tab"] a:after {
  background-image: url("./images/iconaction_media_playlistfilter.png");
}

#artists[role="tab"] a:after {
  background-image: url("./images/iconaction_media_artistfilter.png");
}

#albums[role="tab"] a:after {
  background-image: url("./images/iconaction_media_albumfilter.png");
}

#songs[role="tab"] a:after {
  background-image: url("./images/iconaction_media_songsfilter.png");
}

.player-cover-button {
  border: none;
  border-radius: 0;
  background: transparent;
  transition: background 200ms ease;
}
.player-cover-button:hover {
  background: transparent;
}
.player-cover-button:active {
  background: rgb(0, 138, 170);
}
.player-cover-button:disabled {
  opacity: 0.3;
}
.player-cover-button:disabled:active {
  background: transparent;
}

.hidden {
  display: none;
}

li:last-child {
  margin-bottom: 4rem;
}

li.list-header {
  list-style-type: none;
  position: relative;
  margin: 0 8rem 0 3rem;
  width: calc(100% - 11.5rem);
  height: 2.5rem;
  line-height: 2.5rem;
  font-size: 1.9rem;
  color: rgb(0, 138, 170);
  border-bottom: solid 0.1rem rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

li.list-item {
  list-style-type: none;
  position: relative;
  width: 100%;
  background-size: contain;
  background-position: calc(100% - 2.5rem) -0.1rem;
  background-repeat: no-repeat;
}

li.list-item a {
  display: block;
  color: #fff;
  text-decoration: none;
  outline: none;
  margin: 0;
  text-shadow: black 0.1rem 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  height: 6rem;
  background-color: transparent;
  transition: background-color 200ms ease;
}

li.list-item a:active {
  color: black;
  text-shadow: rgba(255, 255, 255, 0.5) 0.1rem 0.1rem;
  background-color: rgba(52,140,158, .6);
}

/* title width is 100% - 1rem(padding) - 6rem(albumArt) */
.list-main-title,
.list-sub-title,
.list-single-title,
.list-playlist-title,
.list-song-title {
  position: absolute;
  top: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}

.list-main-title {
  top: 10%;
  width: calc(100% - 12rem);
  padding: 0 0.5rem 0 3rem;
  font-size: 1.9rem;
  color: white;
}

.list-sub-title {
  top: 3rem;
  width: calc(100% - 12rem);
  padding: 0 0.5rem 0 3rem;
  font-size: 1.7rem;
  color: #8a9699;
}

.list-single-title {
  width: calc(100% - 12rem);
  height: 6rem;
  line-height: 6rem;
  padding: 0 0.5rem 0 3rem;
  font-size: 1.9rem;
  color: white;
}

.list-playlist-title {
  width: calc(100% - 3.5rem);
  height: 6rem;
  padding-left: 3rem;
  padding-right: 0.5rem;
  line-height: 6rem;
  font-size: 1.9rem;
  color: white;
  border-bottom: solid 0.1rem rgba(255, 255, 255, 0.1);
}

.list-playlist-icon {
  position: absolute;
  top: 0;
  right: 2rem;
  width: 4rem;
  height: 6rem;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("./images/IconAction_Media_ShuffleOn_30x30.png");
  background-size: 3rem;
  pointer-events: none;
}

.list-song-index,
.list-song-length {
  position: absolute;
  top: 0;
  height: 6rem;
  line-height: 6rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  pointer-events: none;
}

.list-song-index {
  width: 3rem;
}

.list-song-title {
  left: 3rem;
  width: calc(100% - 3.5rem - 5.5rem);
  height: 6rem;
  line-height: 6rem;
  padding-right: 0.5rem;
  font-size: 1.9rem;
  color: white;
  border-bottom: solid 0.1rem rgba(255, 255, 255, 0.1);
}

.list-song-length {
  right: 0;
  width: 5rem;
  padding-right: 0.5rem;
  border-bottom: solid 0.1rem rgba(255, 255, 255, 0.1);
}

form[role="search"] {
  background: url(/shared/style/headers/images/ui/dark/subheader.png);
}

form[role="search"] button {
  background: url(/shared/style/headers/images/ui/dark/separator.png) no-repeat scroll 2rem center transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  float: left;
  width: calc(2rem + 2px);
}

.search-highlight {
  background-color: rgb(0, 138, 170);
}

form p input + button[type="reset"] {
  width: 4rem;
  padding: 1rem;
}