music.css

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

body {
  background-color: #000;
  color: #fff;
  font-family: "MozTT", sans-serif;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/*
 * 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;
  width: 100%;
  height: 100%;

  /* 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-family: "MozTT", Sans-serif;
  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: 110px 25px 0px 25px;
}

#overlay-title {
  font-weight: normal;
  text-transform:capitalize;
  font-size: 1.9rem;
  color: #fff;
  margin: 0 5px -10px 5px;
}

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

/* the indeterminate progress bar displayed while scanning */
#progress {
  position: absolute;
  top: 5rem;
  left: 0px;
  width: 100%;
  height: 3px;
  border: none;
  overflow: hidden;
  z-index: 31;
}

#throbber {
  height: 24px;
  background-image: url(images/progress.png);
}

#throbber.throb {
  animation: 1s throb infinite steps(7);
}

@keyframes throb {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-21px);
  }
}

body.tiles-mode #title-back {
  display: none;
}

body.list-mode #title-back {
  display: none;
}

body.player-mode #tabs {
  transition: opacity 400ms ease;
  opacity: 0;
  z-index: 1;
}

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

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

body.sublist-mode #views {
  transform: translateX(-50%);
}

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

#title-text:active {
  color: rgb(0, 138, 170);
  transition: color 200ms ease;
}

#search {
  width: 100%;
  height: 10%;
}

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

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

#views-tiles,
#views-list,
#views-sublist,
#views-player {
  position: relative;
  float: left;
}

#views-tiles,
#views-list,
#views-sublist {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: -moz-linear-gradient(center top, #303030 0%, #000000 100%) repeat scroll 0 0 transparent;
}

#views-sublist {
  overflow-y: hidden;
}

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

#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 1px rgba(255, 255, 255, 0.1);
}

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

#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;
}

#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: 0px;
  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;
}

.main-tile {
  width: 318px;
  height: 318px;
  border: 1px solid rgba(0, 0, 0, 1);
  background-color: black;
  overflow: hidden;
}

.sub-tile {
  width: 158px;
  height: 158px;
  border: 1px solid rgba(0, 0, 0, 1);
  font-weight: lighter;
  background-color: #303030;
  overflow: hidden;
}

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

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

.tile-container:active {
  opacity: 0.3;
  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 1px 1px;
  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;
  position: relative;
  top: -5px;
}

.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);
}

.tile-image {
  position: absolute;
  pointer-events: none;
}

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

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

.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%;
}

/* 320x480 phones */
@media (orientation: portrait) and (width: 320px),
       (orientation: landscape) and (width: 480px) {

  .main-tile {
    width: 210px;
    height: 210px;
  }

  .sub-tile {
    width: 104px;
    height: 104px;
  }

  .float-right {
    right: 2px;
  }
}

/* 480x800 phones */
@media (orientation: portrait) and (width: 480px),
       (orientation: landscape) and (width: 800px) {

  .main-tile {
    width: 318px;
    height: 318px;
  }

  .sub-tile {
    width: 158px;
    height: 158px;
  }
}

#player-cover {
  position: relative;
  width: 100%;
  height: calc(100% - 10rem);
  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 1px 1px;
  line-height: 2.5rem;
}

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

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

#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% - 20px);
  height: 80%;
  padding: 0px;
  border-radius: 35px;
  margin: 0 10px;
  font-weight: 500;
  background-position: center center;
  background-repeat: no-repeat;
}

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

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

#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.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;
}

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

#player-seek {
  position: relative;
  width: 100%;
  height: 4.5rem;
  background: url('./images/scroll_bar_bg.png');
  background-position: center center;
  background-repeat: repeat-x;
  background-color: #151515;
  overflow: hidden;
}

#player-seek-elapsed, 
#player-seek-bar, 
#player-seek-remaining {
  position: relative;
  float: left;
}

#player-seek-elapsed, 
#player-seek-remaining {  
  top: calc(50% - 0.69rem);
  width: 18%;
  line-height: 1.38rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: #a1afb2;
  text-align: center;
}

#player-seek-bar {
  width: 60%;
  height: 100%;
  padding: 0 2%;
}

#player-seek-bar-progress {
  pointer-events: none;
  -moz-appearance: none;
  position: absolute;
  top: calc(50% - 0.15rem);
  left: 2.5%;
  width: 95%;
  height: 0.3rem;
  border-radius: 5px;
  border-width: 0px;
  box-shadow: 1px 1px rgba(255, 255, 255, 0.2);
  background: url("./images/timeline.png");
  background-position: center center;
  background-repeat: repeat-x;
}

#player-seek-bar-progress::-moz-progress-bar {
  border-radius: 5px;
  background: url("./images/timeline_filled.png");
  background-position: center center;
  background-repeat: repeat-x;
}

#player-seek-bar-indicator {
  position: absolute;
  top: calc(50% - 4.05rem);
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  background-image: url("./images/scrubber.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-color: transparent;
  border: solid 0.8rem transparent;
  transition: background-color 300ms ease,
              border 300ms ease;
  pointer-events: none;
}

#player-seek-bar-indicator.highlight {
  /* background-image does not support transition
   * so here we use background-color and border on a div
   * to draw an image just like
   * url("./images/scrubber_pressed.png")
   * that image is also committed
   * if UX wants to use the original image
   */
  background-color: rgba(0, 180, 225, 0.85);
  border: solid 0.8rem rgba(0, 0, 0, 0.3);
}

#player-controls {
  position: relative;
  width: 100%;
  height: 5.5rem;
  overflow: hidden;
  background: rgba(0, 0, 0, 1);
}

#player-controls-previous, 
#player-controls-play, 
#player-controls-next {
  position: relative;
  float: left;
  height: 100%;
  padding: 0px;
  border-width: 0px;
  font-weight: 500;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
}

#player-controls-previous, 
#player-controls-next {
  width: 30%;
}

#player-controls-play {
  width: 40%;
}

#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: 0px;
  background: transparent;
  transition: background 200ms ease;
}
.player-controls-button:hover {
  background: transparent;
}
.player-controls-button:active {
  background: rgb(0, 138, 170);
}
.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;
  transition: opacity 800ms ease;
  background: rgba(0, 0, 0, 0.75);
}

#tabs-mix,
#tabs-playlists,
#tabs-artists,
#tabs-albums {
  position: relative;
  float: left;
  width: 25%;
  height: 100%;
  padding: 0px;
  font-size: 1.7rem;
  background-position: center center;
  background-repeat: no-repeat;
}

#tabs-mix {
  background-image: url("./images/IconAction_Camera_GridView_30x30.png");
}

#tabs-playlists {
  background-image: url("./images/IconAction_Media_PlayList_30x30.png");
}

#tabs-artists {
  background-image: url("./images/IconAction_Media_ArtistFilter_30x30.png");
}

#tabs-albums {
  background-image: url("./images/IconAction_Media_AlbumFilter_30x30.png");
}

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

.player-cover-button {
  border: none;
  border-radius: 0px;
  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;
}

.invisible {
  visibility: hidden;
}

li:last-child {
  padding-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 1px rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

li.list-item {
  list-style-type: none;
  position: relative;
  width: 100%;
}

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

li.list-item a:active {
  color: black;
  text-shadow: rgba(255, 255, 255, 0.5) 1px 1px;
  background: rgb(0, 138, 170);
}

/* 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 1px 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");
  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 1px rgba(255, 255, 255, 0.1);
}

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

.list-image-parent {
  position: absolute;
  right: 2.5rem;
  top: 0px;
  height: 6rem;
  width: 6rem;
  overflow: hidden;
  background-color: #8a9699;
  box-shadow: 0 0 1px black;
  pointer-events: none;
}

.list-image {
  position: absolute;
}