Publish Vulpes Preview 15 sources for desktop, Android and Tundra

Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.

gaia/apps/video/style/info.css

@@ -0,0 +1,48 @@
+#info-view > section {
+  vertical-align: top;  /* override confirm.css */
+  margin: 0;
+  padding: 0;
+}
+
+#info-view > section > dl {
+  border-top: none;     /* override confirm.css */
+  margin: 0.6rem 2rem 0 2rem;
+  padding: 0;
+}
+
+#info-view > section > dl > dt {
+  display: block;
+  font-size: 1.6rem;
+  line-height: 1;
+  font-weight: 400;
+  color: #8a9699;
+  margin: 1rem 0 0.3rem 0;
+  padding: 0 1rem;
+
+  /* override confirm.css */
+  width: 100% !important;
+  float: none !important;
+}
+
+/* 1. Text in the info view should not be selectable */
+#info-view > section > dl > dd {
+  display: block;
+  color: #ffffff;
+  font-size: 1.9rem;
+  line-height: 1;
+  font-weight: 400;
+  margin: 0;
+  padding: 0 1rem 1.2rem 1rem;
+  border-bottom: 0.1rem solid rgba(255,255,255,0.1);
+  -moz-user-select: none; /* 1 */
+}
+
+#info-view > section > dl > dd:last-child {
+  /* no separator after the last item in the list */
+  border-bottom: none;
+}
+
+#info-name {
+ /* file name is not directional and stays LTR */
+ direction: ltr;
+}

gaia/apps/video/style/spinner.css

@@ -0,0 +1,38 @@
+/* Spinner */
+#spinner-overlay { /* just like the #overlay element */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+}
+
+/*
+ * spinner animation styles copied from
+ * shared/style/progress_activity.css
+ */
+#spinner {
+  position: absolute;
+  top: calc(50% - 1.5rem);
+  left: calc(50% - 1.5rem);
+  width: 2.9rem;
+  height: 2.9rem;
+  background: url(images/spinner.png) no-repeat center center / 100%;
+  animation: 0.9s spinner-animation infinite steps(30);
+  border: none;
+  z-index: 100;
+}
+
+#spinner-overlay.hidden {
+  display: none;
+}
+
+@keyframes spinner-animation {
+  from {
+    transform: rotate(1deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

gaia/apps/video/style/video.css

@@ -0,0 +1,757 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  font-size: 10px;
+  height: 100%;
+}
+
+body {
+  background-color: #0E1214;
+  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;
+}
+
+ul {
+  padding: 0;
+  margin: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-color: #0E1214;
+}
+
+li .inner {
+  height: 12rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+
+/* unwatched doesn't participate in the flexbox because its position is
+   absolute so that it appears on top of the image instead of beside it */
+.unwatched {
+  background: url(images/unwatched.png) no-repeat center / 100%;
+  position: absolute;
+  bottom: 0;
+  width: 0.4rem;
+  top: 0;
+}
+
+li .inner .img {
+  width: 21rem;
+  overflow: hidden;
+}
+
+li .img.default {
+  width: 6rem;
+}
+
+/* 1. Leave room for two rem when computing width of details
+      to account for one rem margin left and right */
+li .inner .details {
+  line-height: 1.6rem;
+  margin: 1.6rem 1rem; /* 1 */
+  font-size: 1.4rem;
+  color: #fff;
+  width: calc(100% - 23rem); /* 1 */
+  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-views, #player-view {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  font-size: 2.1rem;
+}
+
+/*
+ * 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;
+}
+
+/*
+ * give the very last thumbnail a large bottom margin so that it doesn't
+ * get stuck hidden behind the overlaid toolbar.
+ * for normal thumbnails-list case, it is 4rem at bottom.
+ */
+#thumbnails>li:last-child{
+  margin-bottom: 4rem;
+}
+/*
+ * for normal thumbnails-select 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;
+  -moz-padding-start: 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%;
+}
+
+#video-container:active {
+  background: none;
+}
+
+#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;
+}
+
+/*
+ * 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,
+#in-use-overlay,
+#confirm-dialog {
+  /* it takes up the whole screen */
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+#overlay,
+#in-use-overlay {
+  /* almost transparent gray */
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+#confirm-dialog {
+  background-color: #2d2d2d;
+}
+
+/*
+ * In view.html (but not index.html) we put the in-use-overlay element
+ * inside video-controls. In that case there is a 5rem title bar that needs
+ * to be visible, so we alter the top position. And if we're handling
+ * a pick activity, we also need the title bar with the back button to show.
+ */
+.video-controls > #in-use-overlay,
+body.pick-activity > #in-use-overlay {
+  top: 5rem;
+}
+
+
+/*
+ * 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, #in-use-overlay-content {
+  background-color: #2d2d2d;
+  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, #in-use-overlay-title {
+  font-weight: normal;
+  font-size: 1.9rem;
+  color: #fff;
+  margin: 0 0.5rem 0 0.5rem;
+  padding: 0;
+}
+
+#overlay-text, #in-use-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;
+}
+
+#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;
+  background-size: 1rem;
+  background-image: repeating-linear-gradient(135deg,
+                                              #000 0%,  #000 42%,
+                                              #32D1F2 42%, #32D1F2 57%,
+                                              #000 57%, #000 100%);
+  z-index: 100;
+}
+
+#throbber.throb {
+  animation: throb 1s steps(10) infinite;
+}
+
+@keyframes throb {
+  from { background-position: 0 0; }
+  to   { background-position: -1rem 0; }
+}
+
+/* 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 */
+.video-controls {
+  position: absolute;
+  width: 100%;
+  z-index: 10;
+  opacity: 1;
+  will-change: opacity, visibility;
+  transition: visibility 0s, opacity var(--transition-duration);
+}
+.video-controls-hidden .video-controls {
+  opacity: 0;
+  visibility: hidden;
+  transition-delay: 0.5s, 0s;
+}
+
+.video-controls.bottom {
+  bottom: 0;
+}
+
+/* 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;
+  font-size: 1.4rem;
+}
+
+/* elapsed-text and duration-text have padding on left and right
+   to support ltr and rtl locales */
+#elapsed-text {
+  width: 3.8rem;
+  padding: 0 1.5rem;
+  text-align: center;
+}
+
+#duration-text {
+  width: 3.8rem;
+  padding: 0 1.5rem;
+  text-align: center;
+}
+
+/* time slider */
+#timeSlider {
+  position: relative;
+  width: 100%;
+  z-index: 10;
+}
+
+#slider-wrapper {
+  /* Take into account width and padding of elapsed and duration text */
+  width: calc(100% - 13.6rem);
+  height: 4.2rem;
+}
+
+#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;
+  direction: ltr
+}
+
+#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;
+
+  /* For LTR langauges, position the playhead 1.15 rems to the left 
+   * so that the center of the playhead aligns with the beginning of
+   * the time slider.
+   */
+  margin-left: -1.15rem;
+
+  /* For RTL langauges, position the playhead 1.15 rems to the right 
+   * so that the center of the playhead aligns with the end of
+   * the time slider.
+   */
+  margin-right: -1.15rem;
+ 
+  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,
+body:not(.pick-activity) #picker-header {
+  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;
+  direction: ltr /* the title is from the file name : always ltr */
+}
+
+.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 */
+}
+
+/* not selection mode */
+body:not(.layout-selection) .thumbnails-select,
+/* not list mode */
+body:not(.layout-list) .thumbnails-list,
+/* not fullscreen-player mode */
+body:not(.layout-fullscreen-player) #player-view {
+  display: none !important; /* 1 */
+}
+
+.layout-fullscreen-player #thumbnails {
+  display: none;
+}
+
+/* overlay mode */
+.overlay #app-container, .info-view #app-container,
+.options-view #app-container, .in-use-overlay #app-container,
+.confirm-dialog #app-container {
+  visibility: hidden;
+}
+
+/* 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 .video-controls #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;
+}
+
+/*
+ * By default do not allow any user text selection, only enable
+ * on a per-element/region area.
+ */
+* {
+  -moz-user-select: none;
+}
+
+html[dir=rtl] #video-title {
+  direction: ltr;
+}

gaia/apps/video/style/video_tablet.css

@@ -0,0 +1,739 @@
+
+section[role="region"] header:first-child h1 {
+  margin: 0;
+}
+
+body {
+  background-color: #1c2124;
+}
+
+#player-view.disabled .video-controls {
+  pointer-events: 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) gaia-header.thumbnails-list,
+#thumbnail-list-title {
+  display: inherit !important; /* 1 */
+}
+
+/* app name field is shown at non-pick mode and list view */
+body.pick-activity #thumbnail-list-title {
+  display: none !important; /* 1 */
+}
+
+/* moves thumbnails down to 5rem for thumbnail list title showing */
+#thumbnails {
+  top: 5rem;
+}
+
+/* change bottom of thumbnails to 11rem (5rem of top + 6rem of footer) */
+#thumbnails>li:last-child,
+#thumbnails.select>li:last-child{
+  margin-bottom: 11rem;
+}
+
+/* pick activity only has top: 5rem */
+body.pick-activity #thumbnails>li:last-child {
+  margin-bottom: 5rem;
+}
+
+#thumbnails-bottom {
+  background-color: rgba(26, 33, 36, 0.9);
+}
+
+
+#videoBar {
+  background: none;
+  box-shadow: none;
+  height: 8rem;
+  background-image: url(images/tablet_player_mask.png);
+  background-repeat: repeat-x;;
+  background-size: 100% 8rem;
+  border: 0;
+}
+
+.player-controls-button {
+  color: #FFFFFF;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  transition: none;
+}
+
+/* player-view of background */
+#player-view {
+  background-color: #1c2124;
+}
+
+/* play/pause button */
+#play:before {
+  border: 0;
+}
+
+#play:active {
+  background: none;
+}
+
+#play:after {
+  background-image: url("images/tablet_pause.png");
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 4.6rem;
+  display: block;
+  z-index: 10;
+}
+
+#play.paused:after {
+  background-image: url("images/tablet_play.png");
+  background-size: 4.6rem;
+}
+
+#play:active:after {
+  background-image: url("images/tablet_pause_pressed.png");
+}
+
+#play.paused:active:after {
+  background-image: url("images/tablet_play_pressed.png");
+}
+
+/* time slider */
+#timeSlider {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: auto;
+}
+
+/* slider text */
+#timeSlider span {
+  display: block;
+  height: 100%;
+  line-height: 8rem;
+  color: #FFFFFF;
+  position: absolute;
+  font-size: 1.8rem;
+  text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+  text-align: left;
+}
+
+span#elapsed-text {
+  width: 6rem;
+}
+
+#duration-text {
+  right: 0;
+  top: 0;
+  padding: 0;
+}
+
+.progress {
+  border-radius: 0.2rem;
+  height: 0;
+}
+
+/* slider */
+#slider-wrapper {
+  top: 0;
+  left: 6rem;
+  height: 100%;
+}
+
+#slider-wrapper div{
+  left: 0;
+}
+
+#elapsedTime {
+  background-color: #00CAF2;
+  border: 0.2rem solid #00CAF2;
+  z-index: 30;
+}
+
+#bufferedTime {
+  background-color: #00CAF2;
+  border: 0.2rem solid #00CAF2;
+  z-index: 20;
+}
+
+#timeBackground {
+  background-color: rgba(255, 255, 255, 0.3);
+  border: 0.2rem solid rgba(255, 255, 255, 0.3);
+  z-index: 10;
+}
+
+/* player head */
+#playHead {
+  position: absolute;
+  background: url(images/tablet_scrubber.png) no-repeat center center;
+  margin: 0 0 0 -2.3rem;
+  background-size: 4.6rem;
+  pointer-events: none;
+  border: none;
+  display: block;
+  height: 100%;
+  width: 4.6rem;
+  z-index: 100;
+  top: 0;
+}
+
+#playHead.active {
+  background: url(images/tablet_scrubber_pressed.png) no-repeat center center;
+  width: 4.6rem;
+  height: 100%;
+  margin: 0 0 0 -2.3rem;
+  top: 0;
+}
+
+footer {
+  height: 6rem;
+}
+
+/* selected thumbnail */
+.thumbnail.selected > .inner {
+  outline: solid #00caf2 0.4rem;
+  outline-offset: -0.4rem;
+}
+
+/* unwatched bar */
+.thumbnail .unwatched {
+  background-image: none;
+  background-color: #00CAF2;
+}
+
+.thumbnail .details .title {
+  margin-bottom: 1rem;
+}
+
+.layout-selection .thumbnails-select,
+.layout-list .thumbnails-list {
+  display: block;
+}
+
+/**
+ * 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.
+ */
+.layout-fullscreen-player .large-only {
+  display: block !important; /* 1 */
+}
+
+/* we don't need to show toolbar buttons in pick mode */
+body.pick-activity .single-delete-button,
+body.pick-activity .single-share-button,
+body.pick-activity .single-info-button {
+  display: none;
+}
+
+@media (orientation: landscape) {
+
+  /* panels of selection mode */
+  .layout-selection .thumbnails-list {
+    display: none !important; /* 1 */
+  }
+
+  .layout-selection #switch-fullscreen,
+  .layout-selection #player-view > *,
+  .layout-selection .single-delete-button,
+  .layout-selection .single-share-button,
+  .layout-selection .single-info-button {
+    display: none;
+  }
+  /* show player-view for displaying background image, but all decendants are
+   * hidden */
+  .layout-selection #player-view {
+    display: block;
+  }
+
+  /* panels of list mode */
+  .layout-list #player-view,
+  .layout-list #player-view #fullscreen-button {
+    display: block;
+  }
+
+  .layout-list .thumbnails-select {
+    display: none !important; /* 1 */
+  }
+
+  .layout-list #switch-fullscreen,
+  .layout-list .video-controls #videoActionBar,
+  .layout-list .video-controls #close,
+  .layout-list .single-delete-button,
+  .layout-list .single-share-button,
+  .layout-list .single-info-button {
+    display: none;
+  }
+
+  /* panels of fullscreen player mode */
+  .layout-fullscreen-player #player-view {
+    display: block;
+  }
+
+  .layout-fullscreen-player .thumbnails-list,
+  .layout-fullscreen-player .thumbnails-select {
+    display: none !important; /* 1 */
+  }
+
+  .layout-fullscreen-player #thumbnails,
+  .layout-fullscreen-player .video-controls #videoActionBar {
+    display: none;
+  }
+
+  /* left pane size */
+  .thumbnails-select,
+  .thumbnails-list,
+  #thumbnails {
+    left: 0;
+    width: 40rem;
+  }
+
+  /* player size */
+  #player-view {
+    left: 40rem;
+    width: calc(100% - 40rem);
+  }
+
+  .layout-list #video-container {
+    margin: 6rem 1rem 1rem 1rem;
+    width: calc(100% - 2rem);
+    height: calc(100% - 7rem); /* top 6rem + bottom 1 rem */
+  }
+
+  .layout-fullscreen-player #player-view {
+    left: 0;
+    width: 100%;
+  }
+
+  /* the separator for two panes */
+  #two-column-spearator {
+    display: block;
+    position: absolute;
+    left: 40rem;
+    width: 0.2rem;
+    top: 5rem;
+    bottom: 0;
+    background-image: url(images/tablet_column_separator.png);
+    background-size: 0.2rem 100%
+  }
+
+  #two-column-spearator:before {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 0.2rem;
+    height: 5rem;
+    top: -5rem;
+    background-image: url(images/tablet_section_divider.png);
+    background-size: 0.2rem 100%
+  }
+
+  .layout-list #player-view header:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: -1;
+    height: 5rem;
+    width: 0.2rem;
+    background: url(images/tablet_section_divider.png) no-repeat left;
+  }
+
+  #fullscreen-button {
+    background-image: url(images/tablet_fullscreen.png);
+    background-size: 4.6rem;
+    background-position: center center;
+    background-repeat: no-repeat;
+    position: absolute;
+    width: 8rem;
+    height: 100%;
+    right: 0;
+  }
+
+  #fullscreen-button:active {
+    background-image: url(images/tablet_fullscreen_pressed.png);
+  }
+
+  /* disable video controls when selected */
+  .layout-selection .video-controls {
+    pointer-events: none;
+  }
+
+  body:not(.layout-selection):not(.pick-activity) .thumbnail.focused > .inner {
+    outline: solid #00caf2 0.4rem;
+    outline-offset: -0.4rem;
+  }
+
+  /* video controls */
+  .layout-list #play{
+    width: 10rem;
+  }
+
+  .layout-list #timeSlider {
+    left: 10rem;
+    right: 8rem;
+    width: auto;
+  }
+
+  .layout-list #slider-wrapper {
+    /* duration text and padding */
+    right: 7rem;
+    /* text at left and right are 6rem and 1rem for additional padding between
+     * fullscreen button and duration text */
+    width: calc(100% - 6rem - 7rem);
+  }
+
+  .layout-list #timeBackground {
+    width: 100%;
+  }
+
+  .layout-list #duration-text {
+    width: 5rem;
+  }
+
+  .layout-fullscreen-player #timeSlider {
+    left: 20rem;
+    right: 0;
+  }
+
+  .layout-fullscreen-player #slider-wrapper {
+    right: 12rem;
+    /* text at left is 6rem, right is 10rem and additional 2rem for padding
+     * between edge and duration text */
+    width: calc(100% - 6rem - 12rem);
+  }
+
+  .layout-fullscreen-player #timeBackground {
+    width: 100%;
+  }
+
+  .layout-fullscreen-player #duration-text {
+    width: 10rem;
+  }
+
+  .layout-fullscreen-player #fullscreen-button {
+    display: none;
+  }
+
+  /* normal case of thumbnail size */
+  .thumbnail {
+    border: 0;
+    margin: 0.2rem 0 0 0;
+    overflow: visible;
+  }
+
+  .thumbnail:before {
+    content: "";
+    width: 40rem;
+    height: 0.2rem;
+    background-image: url(images/tablet_video_divider.png);
+    position: absolute;
+    top: -0.2rem;
+  }
+
+  .thumbnail .details {
+    margin: 1.5rem 1.5rem 1rem 1.5rem;
+    height: 9.5rem;
+    width: calc(100% - 24rem);
+    font-size: 1.4rem;
+    color: #8A9699;
+  }
+
+  .thumbnail .details .title {
+    font-size: 2.4rem;
+    line-height: 2.4rem;
+    color: #FFFFFF;
+  }
+
+  /* spinner is only valid for tablet and landscape mode */
+  #spinner-overlay {
+    display: block;
+  }
+
+  /* pick mode */
+  body.pick-activity.layout-selection #player-view,
+  body.pick-activity.layout-list #player-view {
+    display: none;
+  }
+
+  body.pick-activity #two-column-spearator {
+    display: none;
+  }
+
+  /* left pane size */
+  body.pick-activity .thumbnails-select,
+  body.pick-activity .thumbnails-list,
+  body.pick-activity #thumbnails {
+    left: 0;
+    width: 100%;
+  }
+
+  /* pick view of thumbnail size */
+  body.pick-activity .thumbnail {
+    width: calc(33% - 0.2rem);
+    height: 0;
+    border: 0;
+    margin: 0 0 0.4rem 0;
+    overflow: visible;
+    float: left;
+    /*
+     * Why padding-bottom? We need to keep the same image ratio which 7:4.
+     * According to MDN padding-top, the percentage is referring to width of the
+     * block. So, we use (33% - 0.2rem) to have correct width width and applying
+     * 7:4 ratio to get the correct block height.
+     * See: https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
+     **/
+    padding-bottom: calc((33% - 0.2rem) * 4 / 7);
+  }
+
+  body.pick-activity .thumbnail:nth-child(3n),
+  body.pick-activity .thumbnail:nth-child(3n + 2) {
+    margin-left: 0.4rem;
+  }
+
+  body.pick-activity .thumbnail .inner,
+  body.pick-activity .thumbnail .inner .img {
+    width: 100%;
+    height: 0;
+    padding-bottom: calc(100% * 4 / 7);
+  }
+
+  body.pick-activity .thumbnail .details {
+    margin: 0;
+    /*
+     * We still need display:flex in this case because we need all elements are
+     * vertically aligned to bottom. So, we keep the height as 19.7rem which is
+     * the visual spec in 800x1280. If a device's width is less than 768px, it
+     * turns into tiny mode. Another 1.5rem is for the padding bottom.
+     * The equation is:
+     *      padding top = calculated height - detail's height - padding bottom.
+     **/
+    padding: calc(100% * 4 / 7 - 19.7rem - 1.5rem) 2rem 1.5rem 2rem;
+    width: 16.5rem;
+    height: 19.7rem;
+    font-size: 1.6rem;
+    color: #FFFFFF;
+    text-shadow:0 0 5px #000000;
+    background-image: url(images/tablet_text_mask.png);
+    background-repeat: repeat-y;
+    background-size: 100%;
+    justify-content: flex-end;
+    top: auto;
+    bottom: 0;
+  }
+
+  body.pick-activity .thumbnail .details span {
+    bottom: 0;
+  }
+
+  body.pick-activity .thumbnail .details .after {
+    color: #FFFFFF;
+  }
+
+  body.pick-activity .thumbnail .details .title {
+    font-size: 2.6rem;
+    line-height: 2.6rem;
+  }
+}
+
+@media (orientation: portrait) {
+  .inner {
+    position: relative;
+  }
+
+  /* we don't need fullscreen button in this mode */
+  #fullscreen-button {
+    display: none;
+  }
+
+  /* selection mode */
+  .layout-selection .thumbnails-list {
+    display: none !important; /* 1 */
+  }
+
+  .layout-selection #player-view {
+    display: none;
+  }
+
+  /* list mode */
+  .layout-list .thumbnails-select {
+    display: none !important; /* 1 */
+  }
+
+  .layout-list #player-view {
+    display: none;
+  }
+
+  /* player mode / fullscreen-player mode */
+  .layout-fullscreen-player .thumbnails-select,
+  .layout-fullscreen-player .thumbnails-list {
+    display: none !important; /* 1 */
+  }
+
+  .layout-fullscreen-player #thumbnails,
+  .layout-fullscreen-player .video-controls #videoActionBar {
+    display: none;
+  }
+
+  /* spinner is only valid for tablet and landscape mode */
+  #spinner-overlay {
+    display: none;
+  }
+
+  .layout-fullscreen-player #timeSlider {
+    left: 14rem;
+    right: 0;
+  }
+
+  .layout-fullscreen-player #slider-wrapper {
+    right: 10rem;
+    /* text at left is 6rem, right is 8rem and additional 2rem for padding
+     * between edge and duration text */
+    width: calc(100% - 16rem);
+  }
+
+  .layout-fullscreen-player #timeBackground {
+    width: 100%;
+  }
+
+  .layout-fullscreen-player #duration-text {
+    width: 8rem;
+  }
+
+  /* thumbnail size */
+  .thumbnail {
+    width: calc(50% - 0.2rem);
+    height: 0;
+    border: 0;
+    margin: 0 0 0.4rem 0;
+    overflow: visible;
+    float: left;
+    padding-bottom: calc((50% - 0.2rem) * 4 / 7);
+  }
+
+  .thumbnail:nth-child(even) {
+    margin-left: 0.4rem;
+  }
+
+  .thumbnail .inner,
+  .thumbnail .inner .img {
+    width: 100%;
+    height: 0;
+    padding-bottom: calc(100% * 4 / 7);
+  }
+
+  .thumbnail .details {
+    margin: 0;
+    /*
+     * We still need display:flex in this case because we need all elements are
+     * vertically aligned to bottom. So, we keep the height as 19.7rem which is
+     * the visual spec in 800x1280. If a device's width is less than 768px, it
+     * turns into tiny mode. Another 1.5rem is for the padding bottom.
+     * The equation is:
+     *      padding top = calculated height - detail's height - padding bottom.
+     **/
+    padding: calc(100% * 4 / 7 - 19.7rem - 1.5rem) 2rem 1.5rem 2rem;
+    width: 16.5rem;
+    height: 19.7rem;
+    font-size: 1.6rem;
+    color: #FFFFFF;
+    text-shadow:0 0 5px #000000;
+    background-image: url(images/tablet_text_mask.png);
+    background-repeat: repeat-y;
+    background-size: 100%;
+    justify-content: flex-end;
+    top: auto;
+    bottom: 0;
+  }
+
+  .thumbnail .details span {
+    bottom: 0;
+  }
+
+  .thumbnail .details .after {
+    color: #FFFFFF;
+  }
+
+  .thumbnail .details .title {
+    font-size: 2.6rem;
+    line-height: 2.6rem;
+    color: #FFFFFF;
+  }
+}
+
+/* Override header bar of building block */
+/* XXX: the following css styles should be moved to building blocks,
+ * bug 905056 */
+section[role="region"] > header:first-child > button,
+section[role="region"] > header:first-child > a {
+  position: relative;
+  width: 5rem;
+  height: 4.9rem;
+  background: none;
+  float: left;
+  overflow: visible;
+  margin: 0;
+}
+
+section[role="region"].skin-organic > header:first-child,
+.skin-organic section[role="region"] > header:first-child,
+section[role="region"].skin-dark  > header:first-child,
+.skin-dark  section[role="region"] > header:first-child {
+  background: url("images/tablet_header.png") repeat-x scroll 0 0 / auto 100% transparent;
+}
+section[role="region"] > header:first-child h1 {
+  padding: 0 1rem 0 2rem;
+}
+section[role="region"] > header:first-child .icon {
+  width: 5rem;
+}
+section[role="region"] > header:first-child > a:not([aria-disabled="true"]):active:after,
+section[role="region"] > header:first-child > button:not(:disabled):active:after,
+section[role="region"] > header:first-child > a:not([aria-disabled="true"]):hover:after,
+section[role="region"] > header:first-child > button:not(:disabled):hover:after,
+section[role="region"] > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):hover,
+section[role="region"] > header:first-child menu[type="toolbar"] button:not(:disabled):hover,
+section[role="region"] > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active,
+section[role="region"] > header:first-child menu[type="toolbar"] button:not(:disabled):active  {
+  background: url("images/tablet_header_pressed.png") repeat-x center / 0.2rem transparent !important;
+}
+section[role="region"] > header:first-child menu[type="toolbar"] a,
+section[role="region"] > header:first-child menu[type="toolbar"] button {
+  width: 8.2rem;
+}
+section[role="region"].skin-organic > header:first-child a:after,
+.skin-organic section[role="region"] > header:first-child a:after,
+section[role="region"].skin-dark > header:first-child a:after,
+.skin-dark section[role="region"] > header:first-child a:after,
+section[role="region"].skin-organic > header:first-child button:after,
+.skin-organic section[role="region"] > header:first-child button:after,
+section[role="region"].skin-dark > header:first-child button:after,
+.skin-dark section[role="region"] > header:first-child button:after {
+  background: url("images/tablet_button_separator.png") no-repeat right / 0.2rem transparent;
+}
+
+section[role="region"] > header:first-child > button:after,
+section[role="region"] > header:first-child > a:after {
+  width: 5.2rem;
+}
+
+section[role="region"] > header:first-child menu[type="toolbar"] a:after,
+section[role="region"] > header:first-child menu[type="toolbar"] button:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: -1;
+  height: 5rem;
+  width: 8.2rem;
+  background: url("images/tablet_button_separator.png") no-repeat left / 0.2rem transparent;
+}