video.css

html, body {
  margin: 0;
  padding: 0;
  font-size: 10px;
  height: 100%;
  background-color: #0E1214;
}

body {
  color: #fff;
  font-size: 10px;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding-bottom: 5rem;
}

body > section {
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-size: 1.4rem;
  background-color: #0E1214;
}

.hidden {
  display: none;
}

/*
 * while videoControls is hidden,
 * it should be stay on screen for mousedown event
 */
#videoControls.hidden {
  display: block;
  visibility: visible;
}

ul {
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #0E1214;
}

li .inner {
  height: 12rem;
}
.unwatched {
  background: url(images/unwatched.png) no-repeat center / 100%;
  position: absolute;
  bottom: 0;
  width: 0.4rem;
  top: 0;
}
li .img {
  /* background image will be configure in video.js, and it is croped with
   * 210 * devicePixelRatio, 120 * devicePixelRatio. So, we just need to make
   * it be fullsize in this container.
   */
  background-size: 100%;
  height: 12rem;
  width: 21rem;
  overflow: hidden;
  left: 0;
  margin: 0;
  padding: 0;
}

li .img.default {
  background-size: 6rem;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #333333;
}

li .details {
  line-height: 1.6rem;
  position: absolute;
  margin: 1.6rem 0;
  font-size: 1.4rem;
  color: #fff;
  width: calc(100% - 22rem);
  height: 9.3rem;
  top: 0;
  right: 0;
  overflow: hidden;
}
li .details[data-visible] {
  visibility: visible;
}
li .after {
  color: #95a3a6;
}

span.line-break {
  display:block;
}

/* All of the main views fill the screen */
#thumbnail-list-view, #thumbnail-select-view, #player-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-size: 2.1rem;
}

@media not all and (-moz-physical-home-button) {
  @media (orientation: portrait) {
    #thumbnail-list-view, #thumbnail-select-view {
      height: calc(100% - 5rem);
      width: 100%;
    }
  }
  @media (orientation: landscape) {
    #thumbnail-list-view, #thumbnail-select-view {
      height: 100%;
      width: calc(100% - 5rem);
    }
  }
}

/*
 * Thumbnails are implemented as <li> elements in a <ul> with background-image
 * set to display the image. We use background-size: cover to automatically
 * resize the image as needed.
 * The thumbnail list appears in regular browsing mode, in selection mode,
 * and in pick mode.
 */

#thumbnails {
  position: absolute;
  left: 0;
  right: 0;
  /* top and bottom are set depending on view below */
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  /*
   * the body background is black, but remind the UA of that here to
   * keep the thumbnail view opaque if possible.
   */
  background-color: #0E1214;
  height: 100%;
}

/* thumbnails in thumbnail select view where there is a top bar */
#thumbnails.select,
#thumbnails.pick {
  top: 5rem;
  bottom: 0;
}

.thumbnail {
  border-top: 0.1rem solid;
  border-color:rgba(255,255,255, 0.1);
  margin: 0;
  height: 12rem;
  overflow: hidden;
  position: relative;
  list-style-type: none;
}

.thumbnail.selected > .inner {
  outline: solid #00aacc 0.3rem;
  outline-offset: -0.2rem;
}

/*
 * When the user holds their finger over a thumbnail, change the background
 * color to highlight it
 */
.thumbnail:active {
  background-color: #0ac;
}

/*
 * And make all the children translucent so the color shows through
 */
.thumbnail:active div {
  opacity: 0.85;
}

/*
 * And make all the text color to white while selection
 */
.thumbnail:active span {
  color: #FFF;
}

/*
 * give the very last thumbnail a large bottom margin so that it doesn't
 * get stuck hidden behind the overlaid toolbar.
 * for normal thumbnail-list-view case, it is 4rem at bottom.
 */
#thumbnails>li:last-child{
  margin-bottom: 4rem;
}
/*
 * for normal thumbnail-select-view case, it is 5rem at top and 4rem at bottom.
 */
#thumbnails.select>li:last-child{
  margin-bottom: 9rem;
}

.thumbnail-group-header {
  font-size: 1.6rem;
  font-weight: 400;
  color: #8a9699;
  padding: 0 0 0 1rem;
  height: 4rem;
  line-height: 4rem;
}

#thumbnails>li:first-child .thumbnail-group-header {
  border-top: 0.1rem solid;
  border-color:rgba(255,255,255, 0.1);
}

#video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#player {
  /* size and position are set in JS depending on*/
  /* video size and screen orientation */
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  z-index: 10;
}

/*
 * The overlay is where we display messages like Scanning, No Videos,
 * 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,
#confirm-dialog {
  /* 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);
}

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

/* localization */
body.hidden *[data-l10n-id] {
  visibility: hidden;
}
*[dir=rtl] li {
  padding: 0 14.4rem 0 2rem;
}
*[dir=rtl] li img {
  left: auto;
  right: 0;
}

#close {
  outline: none;
}

#h1 {
  background: none !important;
}

section[role="region"] > header {
  /* Need to use !important,else color is not reflecting */
  background: rgba(0, 0, 0, 0.85) !important;
}

section[role="region"] header:first-child h1 {
  font-size: 2.5rem;
  line-height: 5rem;
  margin: 0 0 0 3.4rem;
}

/* the indeterminate progress bar displayed while scanning */
#throbber {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.3rem;
  overflow: hidden;
  z-index: 100;
}

#throbber > div {
  height: 2.4rem;
  background-image: url(images/progress.png);
  background-size: auto 100%;
}

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

@keyframes throb {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-2.1rem);
  }
}

/* buttons */
a.button {
  display: block;
  padding: 0;
  margin: 0;
  border-width: 0;

  /* for buttons that display text */
  font-size: 1.4rem;
  text-align: center;
  line-height: 4rem;
}

a.button:active, a.button:focus {
  outline: none;
}

a.button.disabled {
  opacity: 0.4;
  pointer-events: none;
}

footer {
  background: rgba(0, 0, 0, 0.75);
  height: 4rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

#thumbnails-video-button {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0;
}

#thumbnails-select-button {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 50%;
}

#thumbnails-delete-button {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0;
  border-right: 0.1rem solid #000;
}

#thumbnails-share-button {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 50%;
}

header .icon:after {
  background: none !important;
}

/* video player controls */
#videoControls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  opacity: 1;
  -moz-transition: opacity 0.5s;
}
#videoControls.hidden {
  opacity: 0;
}

#videoControls.hidden > * {
  pointer-events: none;
}

/* 
 * Adjust video controls when software home button is present
*/
@media (orientation: portrait) {
  #videoControls.software-button-present {
    height: calc(100% - 5rem);
    width: 100%;
  }
}

@media (orientation: landscape) {
  #videoControls.software-button-present {
    height: 100%;
    width: calc(100% - 5rem);
  }
}

/* main control bar: play|pause, timeupdate, rwd|fwd
   For landscape mode here. Settings for portrait mode is written in
   media query at bottom */
#videoBar {
  position: absolute;
  right: 0;
  bottom: 4.4rem;
  left: 0;
  height: 4rem;
  font-size: 0;
  border-bottom: 0.1rem solid rgba(255,255,255, 0.1);
  background-color: rgba(0,0,0, 0.85);
  white-space: nowrap;
  z-index: 10;
}

#videoBar:last-child {
  bottom: 0;
}

#elapsed-text,
#timeSlider,
#slider-wrapper,
#duration-text {
  display: inline-block;
  position: relative;
  line-height: 4.2rem;
  vertical-align: top;
}

#elapsed-text, #duration-text {
  color: #ffffff;
  text-align: center;
  font-size: 1.4rem;
}

#elapsed-text {
  width: 3.2rem;
  margin-left: 2.0rem;
}

#duration-text {
  width: 3.2rem;
  margin-right: 2.0rem;
}

/* time slider */
#timeSlider {
  position: relative;
  /* 12.4rem means width of button 4.4rem + right padding 4rem + left padding 4rem */
  width: calc(100% - 12.4rem);
  z-index: 10;
}

#slider-wrapper {
  width: 100%;
  height: 4.1rem;
  margin-left: 1.0rem;
  margin-right: 1.0rem;
}

#slider-wrapper div {
  position: absolute;
  pointer-events: none;
}

.progress {
  height: 0.3rem;
  width: 0;
  top: 50%;
  margin-top: -0.1rem;
}

#elapsedTime {
  background-color: #00caf2;
  z-index: 30;
  margin-top: -0.2rem;
}

#bufferedTime {
  background-color: blue;
  z-index: 20;
}

#timeBackground {
  width: 100%;
  height: 0.1rem;
  background-color: #a6b4b6;
  z-index: 10;
}

#videoControlBar {
  height: 4.5rem;
}

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

#seek-backward,
#seek-forward,
#play {
  position: relative;
  height: 100%;
  padding: 0;
  font-weight: 500;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 3rem;
}

#seek-backward,
#seek-forward {
  width: 33%;
}

#play {
  width: 34%;
}

#play.paused:before {
  content: 'play';
  padding-left: 4px;
}

.player-controls-button {
  color: #FFFFFF;
  border: none;
  border-radius: 0;
  background: transparent;
}

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

#playHead {
  position: absolute;
  top: calc(50% - 1.15rem);
  width: 2.3rem;
  height: 2.3rem;
  border: none;
  background: none;
  pointer-events: none;
  z-index: 40;
}

#playHead:after {
  content: "";
  position: absolute;
  top: calc(50% - 1.15rem);
  left: calc(50% - 1.15rem);
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background-color: #fff;
}

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

/* layout changes for pick activity */
body:not(.pick-activity) #picker-title,
body:not(.pick-activity) #picker-done,
body:not(.pick-activity) #picker-close {
  display: none;
}

/**
 * 1. COMPLEX: Scoped style-sheets within <gaia-header>
 *    trump all other rules. !important is required
 *    for an app to over-ride the default appearance
 *    of content within the custom-element. This may
 *    change when we get `:host` and `:content` selectors
 *    in shadow-dom.
 */

body:not(.pick-activity) #picker-done {
  display: none !important; /* 1 */
}

/* hide options when picking */
body.pick-activity #options,
body.pick-activity #thumbnails-bottom {
  display: none !important; /* 1 */
}

#two-column-spearator {
  display: none;
}

/* details of a thumbnail */
.thumbnail .details {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.thumbnail .details .title {
  order: 1;
  align-self: auto;
  word-break: break-all;
}

.thumbnail .details .duration-text {
  order: 2;
  align-self: auto;
}

.thumbnail .details .size-type-group {
  order: 3;
  align-self: auto;
}

/**
 * 1. COMPLEX: Scoped style-sheets within <gaia-header>
 *    trump all other rules. !important is required
 *    for an app to over-ride the default appearance
 *    of content within the custom-element. This may
 *    change when we get `:host` and `:content` selectors
 *    in shadow-dom.
 */
#thumbnail-list-title {
  display: none !important; /* 1 */
}

/* we don't have fullscreen button when we are not in large layout */
#fullscreen-button {
  display: none;
}

.large-only {
  display: none !important; /* 1 */
}

/* selection mode */
.layout-selection #thumbnail-list-view,
.layout-selection #player-view {
  display: none;
}

/* list mode */
.layout-list #thumbnail-select-view,
.layout-list #player-view {
  display: none;
}

/* fullscreen-player mode */
.layout-fullscreen-player #thumbnail-select-view,
.layout-fullscreen-player #thumbnail-list-view,
.layout-fullscreen-player #thumbnails {
  display: none;
}

/* spinner is only valid for tablet and landscape mode */
body:not(.view-activity) #spinner-overlay {
  display: none;
}

/* make videocontrolbar visible  when picking */
body.pick-activity #videoControls #videoBar{
  bottom: 4.4rem;
}

/*
 * increase specificity to overwrite confirm.css rules for dialog buttons
 */
form[role="dialog"][data-type="confirm"] button.hidden {
  display: none;
}

@media screen and (orientation: portrait) {
  li.details {
    width: 8rem;
  }
}

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

@media not all and (-moz-physical-home-button) {
  @media (orientation: portrait) {
    #options-view {
      right: 0;
      bottom: 5rem;
    }
  }
  @media (orientation: landscape) {

    #options-view {
      right: 5rem;
      bottom: 0;
    }
  }
}

@media not all and (-moz-physical-home-button) {
  @media (orientation: portrait) {
    #options-cancel-button {
      right: 0;
      bottom: 5rem;
    }
  }

  /*
   * options-cancel-button needs special treatment because its position
   * is 'fixed'. In order for 'right' to be applied, set 'left: auto'.
   * Adjust width by 5+3 ('5' because right is shifted by 5, '3' because
   * width has already been shortened by 3 by here:
   * '[role="dialog"][data-type="action"] > menu > button' in action_menu.css
   */
  @media (orientation: landscape) {
    #options-cancel-button {
      left: auto;
      right: 5rem;
      width: calc(100% - 8rem);
      bottom: 0;
    }
  }
}