music.css

/*
 * By default do not allow any user text selection, only enable
 * for certain parts on a per-element/region area.
*/
* {
  -moz-user-select: none;
}

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/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.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.tiles-mode #tabs,
body.list-mode #tabs,
body.sublist-mode #tabs {
  display: inherit;
}

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 !important;
}

#title-player[hidden],
#title-done[hidden] {
  display: none;
}

#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.7rem);
  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: calc(100% - 4.5rem);
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #0E1214;
  will-change: scroll-position;
}

#views-tiles {
  transform: translateX(0);
}

#views-list {
  transform: translateX(100%);
}

#views-sublist {
  transform: translateX(200%);
  overflow-y: hidden;
}

#views-player {
  transform: translateX(300%);
  height: 100%;
  overflow: hidden;
}

#views-player.open-mode {
  transform: translateX(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%;
}

/*
 * Enable the text selection in the tiles and list search inputs.
 */
#views-tiles-search-input,
#views-list-search-input {
  -moz-user-select: text;
}

/*
 * Bug 968456 - Ensure background
 * scrolls w/ the content
 */
#views-tiles-anchor,
#views-list-anchor,
#views-sublist-anchor {
  background-color: #0E1214;
}

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

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

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

#views-sublist-anchor {
  width: 100%;
  height: calc(100% - 8rem);
  will-change: scroll-position;
}

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

#views-sublist-header-image {
  width: 8rem;
  height: 8rem;
  overflow: hidden;
  background-clip: content-box;
  background-size: cover;
  background-position: center center;
  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;
  color: #fff;
}

.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 */
}

/* Tiles are grouped in 6. Left and right groups. */
html[dir="ltr"] .tile:nth-child(12n+1),
html[dir="ltr"] .tile:nth-child(12n+2),
html[dir="ltr"] .tile:nth-child(12n+3),
html[dir="ltr"] .tile:nth-child(12n+4),
html[dir="ltr"] .tile:nth-child(12n+5),
html[dir="ltr"] .tile:nth-child(12n+6),
html[dir="rtl"] .tile:nth-child(12n+7),
html[dir="rtl"] .tile:nth-child(12n+8),
html[dir="rtl"] .tile:nth-child(12n+9),
html[dir="rtl"] .tile:nth-child(12n+10),
html[dir="rtl"] .tile:nth-child(12n+11),
html[dir="rtl"] .tile:nth-child(12n+12) {
  float: left;
  left: 0.5%;
}

/* right groups */
html[dir="ltr"] .tile:nth-child(12n+7),
html[dir="ltr"] .tile:nth-child(12n+8),
html[dir="ltr"] .tile:nth-child(12n+9),
html[dir="ltr"] .tile:nth-child(12n+10),
html[dir="ltr"] .tile:nth-child(12n+11),
html[dir="ltr"] .tile:nth-child(12n+12),
html[dir="rtl"] .tile:nth-child(12n+1),
html[dir="rtl"] .tile:nth-child(12n+2),
html[dir="rtl"] .tile:nth-child(12n+3),
html[dir="rtl"] .tile:nth-child(12n+4),
html[dir="rtl"] .tile:nth-child(12n+5),
html[dir="rtl"] .tile:nth-child(12n+6) {
  float: right;
  right: 0.5%;
}

/* Favor scrolling performance over quality while scrolling */
#views.scroll li.list-item,
#views.scrolling .tile {
  image-rendering: -moz-crisp-edges;
  text-rendering: optimizeSpeed;
}

.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: 300;
  background-color: #303030;
  overflow: hidden;
}

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

#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: 500ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 50ms;
}

#player-cover-image {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-position: center;
  background-size: cover;
}

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

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

#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, visibility 700ms ease-in-out;
  visibility: hidden;
}

#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-align: left;
  text-indent: 3rem;
  text-shadow: black 0.1rem 0.1rem;
  line-height: 2.5rem;
  width: 75%;
  height: auto;
}

#player-cover-artist {
  font-size: 1.9rem;
}

#player-cover-album {
  font-size: 1.7rem;
}

html[dir="rtl"] #player-cover-artist,
html[dir="rtl"] #player-cover-album {
  text-align: right;
}

#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;
  position: absolute;
  top: 10%;
  right: -2%;
  z-index: 1;
  color: #fff;
}

html[dir="rtl"] #player-cover-share {
  right: unset;
  left: -2%;
  margin: 0 0 0 1rem;
}

#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;
  color: #777;
}

#player-album-shuffle.shuffle-on {
  color: #fff;
}

#player-album-shuffle:disabled {
  color: #777;
}

#player-album-repeat:disabled {
  color: #777;
}

#player-album-repeat.repeat-list,
#player-album-repeat.repeat-song {
  color: #fff;
}

#player-album-repeat.repeat-song:before {
  content: 'repeat-once';
}

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

html[dir="rtl"] .rating-star {
  float: right;
}

.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.disabled {
  pointer-events: none;
  opacity: 0.3;
}

#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: calc(100% - 13.6rem);
  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.15rem);
  width: 2.3rem;
  height: 2.3rem;
  pointer-events: none;
}

#player-seek-bar-indicator:after {
  content: "";
  position: absolute;
  top: calc(50% - 1.25rem);
  left: calc(50% - 1.15rem);
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 0.1rem solid #ffffff;
  background-color: #ffffff;
}


#player-seek-bar-indicator.highlight:before {
  content: "";
  position: absolute;
  top: calc(50% - 3.05rem);
  left: calc(50% - 3.05rem);
  width: 6.1rem;
  height: 6.1rem;
  border-radius: 50%;
  background-color: #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 {
  width: 33%;
}

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

#player-controls-play.is-pause:before {
  content: 'play';
}

#player-controls-next {
  width: 33%;
}

.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%;
  z-index: 20;
  display: none;
}

#tabs li:last-child {
  margin-bottom: 0;
}

#tabs a {
  outline: none;
}

#tabs li {
  overflow: hidden;
}

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

html[dir="rtl"] li.list-header {
  margin: 0 3rem 0 8rem;
}

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

html[dir="rtl"] li.list-item {
  background-position: calc(0% + 2.5rem) -0.1rem;
}

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

html[dir="rtl"] .list-main-title {
  padding: 0 3rem 0 0.5rem;
}

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

html[dir="rtl"] .list-sub-title {
  padding: 0 3rem 0 0.5rem;
}

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

html[dir="rtl"] .list-single-title {
  padding: 0 3rem 0 0.5rem;
}

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

html[dir="rtl"] .list-playlist-title {
  padding-left: 0.5rem;
  padding-right: 3rem;
}

.list-playlist-icon {
  position: absolute;
  top: 0;
  right: 2rem;
  width: 4rem;
  height: 6rem;
  line-height: 6rem;
  pointer-events: none;
}

html[dir="rtl"] .list-playlist-icon {
  right: unset;
  left: 2rem;
}

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

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

#info-banner {
  z-index: -1;
  opacity: 0;
  transition: all 600ms ease;
}

#info-banner.visible {
  z-index: 100;
  opacity: 1;
  transition: all 600ms ease;
}