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.

overrides/gallery.gaiamobile.org/style/VideoPlayer.css

@@ -0,0 +1,194 @@
+.videoPlayer:focus {
+  outline: none;
+}
+
+/* video player controls */
+.videoPlayerPlayButton:before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 9.2rem;
+  height: 9.2rem;
+  margin: -4.6rem 0 0 -4.6rem;
+  border-radius: 50%;
+  background-color: rgba(0,0,0, .65);
+}
+
+.videoPlayerPlayButton {
+  position: absolute;
+  width: 10rem;
+  height: 10rem;
+  left: calc(50% - 5rem);
+  top: calc(50% - 5rem);
+  border-radius: 50%;
+  border-width: 0;
+}
+
+.videoPlayerPlayButton:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 10rem;
+  height: 10rem;
+  border-radius: 50%;
+  background-image: image-set(url("images/video_play_button.png") 1x, url("images/video_play_button@1.5x.png") 1.5x, url("images/video_play_button@2x.png") 2x, url("images/video_play_button@2.25x.png") 2.25x);
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: 10rem;
+}
+
+.videoPlayerPlayButton:active:before {
+  background-color: rgba(13,108,128, .8);
+}
+
+.videoPlayerPlayButton.hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.videoPlayerFooter {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 5rem;
+  margin: 0;
+  padding: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  opacity: 1;
+  transition: opacity var(--transition-duration), visibility 0s;
+  visibility: visible;
+  -moz-user-select: none;
+}
+
+.videoPlayerFooter.hidden {
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+  transition-delay: 0s, 0.5s;
+}
+
+.videoPlayerPauseButton {
+  position: absolute;
+  width: 10rem;
+  height: 10rem;
+  padding: 0;
+  margin: 0;
+  background: image-set(url("images/video_pause_button.png") 1x, url("images/video_pause_button@1.5x.png") 1.5x, url("images/video_pause_button@2x.png") 2x, url("images/video_pause_button@2.25x.png") 2.25x) no-repeat center center / 3rem,
+              rgba(0,0,0,.5);
+  border-radius: 5.3rem;
+  border: solid #ccc 0.3rem;
+  top: -2.5rem;
+  left: 1rem;
+}
+
+.videoPlayerPauseButton:active {
+  background: image-set(url("images/video_pause_button.png") 1x, url("images/video_pause_button@1.5x.png") 1.5x, url("images/video_pause_button@2x.png") 2x, url("images/video_pause_button@2.25x.png") 2.25x) no-repeat center center / 3rem,
+              url("images/video_play_focus.png") no-repeat center center / 10.6rem;
+}
+
+button::-moz-focus-inner {
+  padding: 0;
+  border: none;
+}
+
+/* time slider */
+.videoPlayerSlider {
+  position: absolute;
+  left: 11rem;
+  top: 0;
+  right: 0;
+  height: 100%;
+}
+
+.videoPlayerSlider > span {
+  display: block;
+  width: 4.5rem;
+  position: absolute;
+  color: white;
+  height: 100%;
+  line-height: 5rem;
+  text-align: center;
+  font-size: 1.5rem;
+}
+
+.videoPlayerElapsedText {
+  left: 1rem;
+}
+
+html[dir="rtl"] .videoPlayerElapsedText {
+  right: 1rem;
+  left: unset;
+}
+
+.videoPlayerDurationText {
+  right: 1rem;
+}
+
+html[dir="rtl"] .videoPlayerDurationText {
+  left: 1rem;
+  right: unset;
+}
+
+.videoPlayerProgress {
+  position: absolute;
+  top: 0;
+  left: 7rem;
+  right: 7rem;
+  height: 100%;
+}
+
+.videoPlayerProgress > div {
+  position: absolute;
+  pointer-events: none;
+}
+
+.videoPlayerElapsedBar, .videoPlayerBackgroundBar {
+  height: 0.4rem;
+  width: 0;
+  top: 50%;
+  margin-top: -0.2rem;
+  border-radius: 0.6rem;
+}
+
+.videoPlayerElapsedBar {
+  background-color: #0ac;
+}
+
+.videoPlayerBackgroundBar {
+  background-color: #333;
+  width: 100%;
+}
+
+.videoPlayerPlayHead {
+  display: block;
+  height: 2rem;
+  width: 2.5rem;
+  border-radius: 2.5rem;
+  background-color: white;
+  top: 50%;
+  margin-top: -1rem;
+  -moz-margin-start: -1.2rem;
+}
+
+
+.videoPlayerFullscreenButton {
+  position: absolute;
+  display: none;
+  border: none;
+  width: 8rem;
+  height: 8rem;
+  padding: 3.4rem;
+  margin: 0;
+  background: url("images/fullscreen.png") no-repeat center center / 4.6rem,
+              transparent;
+  right: 0;
+}
+
+.videoPlayerFullscreenButton:active {
+  background: url("images/fullscreen_pressed.png") no-repeat center center / 4.6rem,
+              transparent;
+}

overrides/gallery.gaiamobile.org/style/gallery.css

@@ -0,0 +1,922 @@
+* { -moz-box-sizing: border-box;
+  /**
+    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;
+  overflow: hidden;
+  font-size: 10px;
+}
+
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  color: #fff;
+  font-size: 1rem;
+  background-color: #0E1214;
+  overflow: hidden;
+}
+
+section {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  font-size: 1.4rem;
+}
+
+.large-only {
+  display: none !important;
+}
+
+.hidden {
+  display: none;
+}
+
+/* hide sections from screen reader when modal dialogs are showing */
+body.showing-dialog > section {
+  visibility: hidden;
+}
+
+/* All of the main views fill the screen */
+#fullscreen-view, #edit-view, #crop-view, #thumbnail-views {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  font-size: 2.1rem;
+  /* display will be determined by LAYOUT_MODE */
+  display: none;
+}
+
+/* Hide unresolved gaia-header elements */
+gaia-header:unresolved {
+  visibility:hidden;
+}
+
+#thumbnail-views > gaia-header {
+  position: absolute;
+  width: 100%;
+  top: 0;
+}
+
+/* Bug 1111735 - !important is needed because of the shadow CSS polyfill */
+.thumbnails-list, .thumbnails-select, .thumbnails-pick {
+  /* display will be determined by LAYOUT_MODE */
+  display: none !important;
+}
+
+body.thumbnailListView .thumbnails-list,
+body.thumbnailSelectView .thumbnails-select,
+body.pickView .thumbnails-pick {
+  display: block !important;
+}
+
+body.thumbnailListView #thumbnail-views,
+body.thumbnailSelectView #thumbnail-views,
+body.pickView #thumbnail-views,
+body.fullscreenView #fullscreen-view,
+body.editView #edit-view,
+body.cropView #crop-view {
+  display: block;
+}
+
+/* Header in default thumbnail list in tablets only, see gallery_tablet.css */
+body.thumbnailListView #thumbnails-list-top {
+  display: none !important;
+}
+
+/*
+ * 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:
+  image-set(url("images/ui/pattern.png") 1x, url("images/ui/pattern@1.5x.png") 1.5x, url("images/ui/pattern@2x.png") 2x, url("images/ui/pattern@2.25x.png") 2.25x) repeat left top,
+  image-set(url("images/ui/gradient.png") 1x, url("images/ui/gradient@1.5x.png") 1.5x, url("images/ui/gradient@2x.png") 2x, url("images/ui/gradient@2.25x.png") 2.25x) 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: 1;
+  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: 1;
+}
+
+/* For overriding the style from BB */
+#overlay-menu.hidden {
+  display: none;
+}
+
+#overlay-menu button.hidden {
+  display: none;
+}
+
+#overlay-menu button.full {
+  margin: 0;
+}
+
+/*
+ * 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.
+ */
+
+#thumbnails {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  top: 0;
+  bottom: 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;
+  will-change: scroll-position;
+  /*
+   * set it visible/hidden by LAYOUT_MODE
+   */
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/*
+ * The thumbnail list appears in regular browsing mode, in selection mode,
+ * and in pick mode.
+ */
+body.thumbnailSelectView #thumbnails,
+body.pickView #thumbnails,
+body.thumbnailListView #thumbnails {
+  visibility: visible;
+  pointer-events: auto;
+  bottom: 0;
+}
+
+body.thumbnailSelectView #thumbnails,
+body.pickView #thumbnails {
+  top: 5rem;
+}
+
+/*
+ * Give the very last thumbnail a large bottom margin so that it doesn't
+ * hide behind the overlaid toolbar in thumbnail list and select view.
+ */
+body.thumbnailSelectView #thumbnails > li:last-child .thumbnail:last-child,
+body.thumbnailListView #thumbnails > li:last-child .thumbnail:last-child {
+  margin-bottom: 4.5rem;
+}
+
+.thumbnail-group-header {
+  font-size: 1.6rem;
+  font-weight: 400;
+  color: #8a9699;
+  -moz-padding-start: 0.5rem;
+  height: 4rem;
+  line-height: 4rem;
+  width:100%;
+  float:left;
+}
+
+/* Bug 968311 - Keep Gallery in scrollable
+ * background color. Need in all four
+ * containers below.
+ */
+#thumbnails > li,
+#thumbnails > li > ul,
+.thumbnail-group-header,
+.thumbnail-group-container {
+  background-color: #0E1214;
+}
+
+.thumbnail-group-container {
+  padding: 0;
+}
+
+#thumbnails>li {
+  /* no list item bullets */
+  list-style-type: none;
+}
+
+#thumbnails>li:first-child .thumbnail-group-header {
+  border-top: 0.1rem solid;
+  border-color:rgba(255,255,255, 0.1);
+}
+
+.thumbnail {
+  -moz-margin-end: 0.1rem;
+  margin-bottom: 0.1rem;
+  padding: 0;
+  /* default to left-to-right, but overridden for rtl languages below */
+  float: left;
+  /* don't let the user select the items */
+  -moz-user-select: none;
+  background-color: #444;
+
+  /*
+   * Here's the thumbnail size for portrait mode. We have 3 thumbnails
+   * for each row. The size for landscape mode is handled below by
+   * media query.
+   * Padding-bottom is used here in order to set div height with respect
+   * to device width.
+   */
+  width: calc((100% - 0.2rem) / 3 );
+  height: 0;
+  padding-bottom: calc((100% - 0.2rem) / 3 );
+  outline: none;
+}
+
+.thumbnail:nth-child(3n) {
+  -moz-margin-end: 0;
+}
+
+.thumbnailImage{
+  width: 100%;
+}
+
+.thumbnailImage.selected {
+  outline: solid #00aacc 0.3rem;
+  outline-offset: -0.2rem;
+}
+
+/* RTL modifications */
+html[dir=rtl] #thumbnails-number-selected {
+  direction: rtl;
+}
+
+@media (orientation: landscape) {
+  /* 4 thumbnails for each row in landscape mode. */
+  .thumbnail {
+    width: calc((100% - 0.3rem) / 4);
+    padding-bottom: calc((100%  - 0.3rem) / 4);
+  }
+  .thumbnail:nth-child(3n) {
+    -moz-margin-end: 0.1rem;
+  }
+  .thumbnail:nth-child(4n) {
+    -moz-margin-end: 0;
+  }
+}
+
+#fullscreen-back-button-tiny {
+  /*
+    these particular sizes, positions, and colors are chosen
+    to line up with the focus mode button of the camera app
+  */
+  position: absolute;
+  top: 2rem;
+  left: 1.4rem;
+  width: 5rem;
+  height: 5rem;
+  font-size: 0;
+  border-radius: 50%;
+  border: none;
+  background: rgba(95, 95, 95, 0.3);
+  color: inherit;
+  transition: opacity 0.2s linear;
+  z-index: 10;
+}
+
+/**
+ * 1. Make sure icon is aligned inside circle
+ */
+
+#fullscreen-back-button-tiny:before {
+  margin-left: -0.3rem; /* 1 */
+}
+
+#fullscreen-back-button-tiny:active {
+  background-color: #008eab;
+}
+
+#frames {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+.frame {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  -moz-user-select: none;
+  will-change: scroll-position;
+}
+
+.frame > .image-view {
+  top: 0;  /* javascript modifies this position with a transform */
+  left: 0;
+  position: absolute;
+  border-width: 0;
+  padding: 0;
+  margin: 0;
+  pointer-events: none;
+  -moz-user-select: none;
+  transition: opacity 100ms ease-in;
+}
+
+.frame > video {
+  transform-origin: 0 0;
+}
+
+/* localization */
+body.hidden *[data-l10n-id] {
+  visibility: hidden;
+}
+
+*[dir=rtl] .thumbnail {
+  float: right;
+}
+
+/* the indeterminate progress bar displayed while scanning */
+#throbber {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 0.3rem;
+  border: none;
+  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: 10; /* has to be higher than pick-top */
+}
+
+#throbber.throb {
+  animation: throb 1s steps(10) infinite;
+}
+
+@keyframes throb {
+  from { background-position: 0 0; }
+  to   { background-position: -1rem 0; }
+}
+
+#spinner {
+  position: absolute;
+  top: calc(50% - 1.5rem);
+  left: calc(50% - 1.5rem);
+  z-index: 1000;
+}
+
+/* override progress_activity.css */
+#spinner.hidden {
+  display: none;
+}
+
+/* buttons */
+a.button {
+  display: block;
+  padding: 0;
+  margin: 0;
+  border-width: 0;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 3rem;
+
+  /* for buttons that display text */
+  font-size: 1.4rem;
+  text-align: center;
+  line-height: 4.5rem;
+}
+
+a.button:active, a.button:focus {
+  outline: none;
+}
+
+a.button.disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.icon.icon-done {
+  background: image-set(url("images/iconaction_done_30x30.png") 1x, url("images/iconaction_done_30x30@1.5x.png") 1.5x, url("images/iconaction_done_30x30@2x.png") 2x, url("images/iconaction_done_30x30@2.25x.png") 2.25x) no-repeat center center / 3rem !important;
+}
+
+footer {
+  background: rgba(0, 0, 0, 0.75);
+  height: 4.5rem;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  box-shadow: 0 -0.2rem 0.5rem rgba(50, 50, 50, 0.75);
+}
+
+.icon.icon-done {
+  background-image: image-set(url("images/iconaction_done_30x30.png") 1x, url("images/iconaction_done_30x30@1.5x.png") 1.5x, url("images/iconaction_done_30x30@2x.png") 2x, url("images/iconaction_done_30x30@2.25x.png") 2.25x) !important;
+}
+
+#thumbnails-camera-button {
+  position: absolute;
+  width: 50%;
+  height: 100%;
+  left: 0;
+  border-right: 0.1rem solid #000;
+}
+
+#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%;
+}
+
+#fullscreen-toolbar {
+  height: 4.5rem;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  font-size: 0;
+  visibility: visible;
+  direction: ltr; /* buttons in toolbar are not directional and stays LTR */
+
+  /**
+    Bug 991367 - This is a temporary workaround for an issue where
+    the `tap` event on the video player "Pause" button causes a
+    `click` event to bleed through to the "Camera" button on the
+    toolbar. To get around this issue, we add 0.1s delay before
+    restoring the toolbar from hidden state and transition the
+    `visibility` property as well.
+   */
+  transition: visibility 0.2s linear 0.1s, transform 0.2s linear 0.1s;
+}
+
+/* only for large screen */
+#fullscreen-toolbar-header {
+  display: none;
+}
+
+#fullscreen-toolbar-header > menu {
+  display: none;
+}
+
+#fullscreen-toolbar > a {
+  display: inline-block;
+  width: 20%;
+  height: 100%;
+}
+
+#fullscreen-view.toolbar-hidden #fullscreen-toolbar {
+  pointer-events: none;
+  visibility: hidden;
+  transform: translate(0, 4.5rem);
+  transition-delay: 0s;
+}
+
+#fullscreen-view.toolbar-hidden #fullscreen-back-button-tiny {
+  opacity: 0;
+  pointer-events: none;
+}
+
+#pick-header {
+  /*
+   * we want the user to be able to push the close button even if
+   * an overlay is displayed, so be sure that this titlebar/toolbar
+   * is above the overlay
+   */
+  z-index: 2;
+}
+
+/* like .frame */
+#crop-frame {
+  position: absolute;
+  top: 5rem;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  -moz-user-select: none;
+}
+
+#crop-image {
+  top: 0;  /* javascript modifies this position with a transform */
+  left: 0;
+  position: relative;
+  border-width: 0;
+  padding: 0;
+  margin: 0;
+  transform-origin: 0 0;
+  pointer-events: none;
+  -moz-user-select: none;
+}
+
+#edit-preview-area {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 5rem;
+  bottom: 4.5rem; /* 4.5rem for edit-toolbar */
+}
+
+#edit-preview-canvas {
+  position: absolute;
+  top: 1.5rem;
+  left: 2.5rem;
+  width: calc(100% - 5rem);  /* I can't do right: 2.5rem here. Bug? */
+  height: calc(100% - 3rem);  /* can't just set bottom: 1.5rem here */
+}
+
+#edit-crop-canvas {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+}
+
+#edit-options {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 5rem;
+  bottom: 0;
+  background: image-set(url("images/options-background.png") 1x, url("images/options-background@1.5x.png") 1.5x, url("images/options-background@2x.png") 2x, url("images/options-background@2.25x.png") 2.25x);
+}
+
+/* The progress has higer selectivity css in progress.css to control display.
+ * The hidden attribute in progress is not working in this case. We need to use
+ * css to override it. */
+#save-progress.hidden {
+  display: none;
+}
+
+/* All the effect options radio buttons share these styles */
+#edit-effect-options a.radio.button {
+  position: absolute;
+  display: block;
+  top: 0;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  margin: 0;
+  padding: 0;
+  border-width: 0;
+  border-right: solid black 0.1rem;
+  overflow: hidden;
+}
+
+#edit-effect-options a.selected.radio.button {
+  outline: solid #00aacc 0.2rem;
+  outline-offset: -0.2rem;
+}
+
+#edit-crop-options a.button {
+  position: absolute;
+  display: block;
+  top: 0;
+  bottom: 0;
+  width: 20%;
+  margin: 0;
+  padding: 0;
+  border-width: 0;
+  border-right: solid black 0.1rem;
+  overflow: hidden;
+  font-size: 1.4rem;
+  background-position: center;
+}
+
+#edit-crop-options a.selected.radio.button {
+  outline: solid #00aacc 0.2rem;
+  outline-offset: -0.2rem;
+}
+
+#edit-crop-aspect-free {
+  left: 0;
+  background-image: image-set(url("images/iconaction_camera_freecrop_30x30.png") 1x, url("images/iconaction_camera_freecrop_30x30@1.5x.png") 1.5x, url("images/iconaction_camera_freecrop_30x30@2x.png") 2x, url("images/iconaction_camera_freecrop_30x30@2.25x.png") 2.25x);
+}
+#edit-crop-aspect-portrait {
+  left: 20%;
+  background-image: image-set(url("images/iconaction_camera_crop2x3_30x30.png") 1x, url("images/iconaction_camera_crop2x3_30x30@1.5x.png") 1.5x, url("images/iconaction_camera_crop2x3_30x30@2x.png") 2x, url("images/iconaction_camera_crop2x3_30x30@2.25x.png") 2.25x);
+}
+#edit-crop-aspect-landscape {
+  left: 40%;
+  background-image: image-set(url("images/iconaction_camera_crop3x2_30x30.png") 1x, url("images/iconaction_camera_crop3x2_30x30@1.5x.png") 1.5x, url("images/iconaction_camera_crop3x2_30x30@2x.png") 2x, url("images/iconaction_camera_crop3x2_30x30@2.25x.png") 2.25x);
+}
+#edit-crop-aspect-square {
+  left: 60%;
+  background-image: image-set(url("images/iconaction_camera_crop1x1_30x30.png") 1x, url("images/iconaction_camera_crop1x1_30x30@1.5x.png") 1.5x, url("images/iconaction_camera_crop1x1_30x30@2x.png") 2x, url("images/iconaction_camera_crop1x1_30x30@2.25x.png") 2.25x);
+}
+
+#edit-crop-aspect-more {
+  left: 80%;
+}
+
+/* instead of using images inside the buttons above, just draw boxes */
+#edit-free-frame {
+  margin-left: 0.5rem;
+  margin-top: 0.5rem;
+  width: 3rem;
+  height: 2.5rem;
+  border: dotted white 0.1rem;
+}
+
+#edit-portrait-frame {
+  margin-left: 1.1rem;
+  margin-top: 0.6rem;
+  width: 2.6rem;
+  height: 3.9rem;
+  border: solid white 0.1rem;
+}
+
+#edit-landscape-frame {
+  margin-left: 0.5rem;
+  margin-top: 1.2rem;
+  width: 3.9rem;
+  height: 2.6rem;
+  border: solid white 0.1rem;
+}
+
+#edit-square-frame {
+  margin-left: 0.8rem;
+  margin-top: 0.9rem;
+  width: 3.2rem;
+  height: 3.2rem;
+  border: solid white 0.1rem;
+}
+
+/* All the effects radio buttons share these styles */
+#edit-effect-options > a.radio.button {
+  width: 20%;
+  padding-top: 1.5rem;
+}
+
+#edit-effect-none {
+  left:0;
+}
+#edit-effect-bw {
+  left:20%
+}
+#edit-effect-sepia {
+  left:40%
+}
+#edit-effect-bluesteel {
+  left:60%
+}
+#edit-effect-faded {
+  left:80%
+}
+a.filter-bw {
+  filter: url(../index.html#filter-bw);
+}
+a.filter-sepia {
+  filter: url(../index.html#filter-sepia);
+}
+a.filter-bluesteel {
+  filter: url(../index.html#filter-bluesteel);
+}
+a.filter-faded {
+  filter: url(../index.html#filter-faded);
+}
+
+#edit-toolbar {
+  height: 4.5rem;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  font-size: 0;
+  transition: transform 0.2s linear;
+  direction: ltr; /* buttons in toolbar are not directional and stays LTR */
+}
+
+/* all buttons in the toolbar share these styles */
+#edit-toolbar > a {
+  display: inline-block;
+  vertical-align: top;
+  width: 25%;
+  height: 100%;
+}
+
+#edit-toolbar > a.selected {
+  color: #00CAF2;
+}
+
+#edit-exposure-button {
+  left: 0;
+}
+
+#edit-crop-button {
+  left: 20%;
+}
+
+#edit-effect-button {
+  left: 40%;
+}
+
+#edit-border-button {
+  left: 60%;
+}
+
+#edit-enhance-button {
+  left: 80%;
+}
+
+/* Override the styles from shared/styles/status.css */
+#edit-copy-save-banner.banner, #edit-enhance-banner.banner {
+  position: absolute;
+  left: 0;
+  bottom: 4.5rem;
+  background-color: #0E1214;
+}
+
+#edit-copy-save-banner > p, #edit-enhance-banner > p {
+  text-align: center;
+}
+
+#edit-effect-button {
+  background-image: image-set(url("images/actionicon_gallery_edit_effects_30x30.png") 1x, url("images/actionicon_gallery_edit_effects_30x30@1.5x.png") 1.5x, url("images/actionicon_gallery_edit_effects_30x30@2x.png") 2x, url("images/actionicon_gallery_edit_effects_30x30@2.25x.png") 2.25x);
+}
+
+#edit-border-button {
+  background-image: url('images/actionicon_gallery_edit_borders_30x30.png');
+}
+
+#edit-enhance-button {
+  background-image: image-set(url("images/actionicon_gallery_edit_enhance_30x30.png") 1x, url("images/actionicon_gallery_edit_enhance_30x30@1.5x.png") 1.5x, url("images/actionicon_gallery_edit_enhance_30x30@2x.png") 2x, url("images/actionicon_gallery_edit_enhance_30x30@2.25x.png") 2.25x);
+}
+
+#edit-enhance-button.on {
+  background-image: image-set(url("images/actionicon_gallery_edit_enhance_on_30x30.png") 1x, url("images/actionicon_gallery_edit_enhance_on_30x30@1.5x.png") 1.5x, url("images/actionicon_gallery_edit_enhance_on_30x30@2x.png") 2x, url("images/actionicon_gallery_edit_enhance_on_30x30@2.25x.png") 2.25x);
+}
+
+/*
+ * All of these slider styles are for the exposure compensation slider
+ * If this app ever needs another slider, we'll have lots of name
+ * collisions.  Ideally, this slider stuff should all be packaged up
+ * into a reusable component. But this is one-off for now
+ */
+#exposure-slider {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 5rem;
+  font-size: 1.4rem;
+}
+
+#sliderbar {
+  position: relative;
+  height: 2.6rem;
+  padding: 0;
+  margin: 0;
+  background: image-set(url("images/slider-background.png") 1x, url("images/slider-background@1.5x.png") 1.5x, url("images/slider-background@2x.png") 2x, url("images/slider-background@2.25x.png") 2.25x);
+}
+
+#sliderline {
+  position: absolute;
+  height: 0.5rem;
+  top: 1rem;
+  left: 3.5rem;
+  right: 3.5rem;
+  margin: 0;
+  border-radius: 3px;
+  background: image-set(url("images/slider-line.png") 1x, url("images/slider-line@1.5x.png") 1.5x, url("images/slider-line@2x.png") 2x, url("images/slider-line@2.25x.png") 2.25x) repeat-x;
+  border: none;
+}
+
+#sliderthumb {
+  position: absolute;
+  width: 3.6rem;
+  height: 2.6rem;
+  -moz-margin-start: calc(3.9rem - 1.8rem);
+  background: image-set(url("images/slider-scrubber.png") 1x, url("images/slider-scrubber@1.5x.png") 1.5x, url("images/slider-scrubber@2x.png") 2x, url("images/slider-scrubber@2.25x.png") 2.25x) no-repeat center center / 100%;
+  font: 0/0 a;
+}
+
+#sliderthumb.active {
+  background-image: image-set(url("images/slider-scrubber-active.png") 1x, url("images/slider-scrubber-active@1.5x.png") 1.5x, url("images/slider-scrubber-active@2x.png") 2x, url("images/slider-scrubber-active@2.25x.png") 2.25x);
+}
+
+#sliderlabels {
+  position: relative;
+  height: 3rem;
+  padding: 0;
+  margin: 0;
+  color: white;
+}
+
+.sliderlabel {
+  position: absolute;
+  top: -0.2rem;
+  height: 0.8rem;
+  background: image-set(url("images/slider-marker.png") 1x, url("images/slider-marker@1.5x.png") 1.5x, url("images/slider-marker@2x.png") 2x, url("images/slider-marker@2.25x.png") 2.25x) no-repeat top left;
+  color: #8a9699;
+  font-size: 1.5rem;
+}
+
+html[dir="rtl"] .sliderlabel {
+  background: image-set(url("images/slider-marker.png") 1x, url("images/slider-marker@1.5x.png") 1.5x, url("images/slider-marker@2x.png") 2x, url("images/slider-marker@2.25x.png") 2.25x) no-repeat top right;
+}
+
+.sliderlabel:after {
+  content: attr(data-label);
+  position: relative;
+  text-align: center;
+  top: 0.9rem;
+  width: 1rem;
+  margin: 0 calc(-50% + 0.1rem);
+
+  /* Slider labels are numbers */
+  direction: ltr;
+  unicode-bidi: -moz-isolate;
+}
+
+#slider-3 {
+  -moz-margin-start: 3.9rem;
+}
+#slider-2 {
+  -moz-margin-start: calc(3.9rem + (100% - 2 * 3.9rem) / 6);
+}
+#slider-1 {
+  -moz-margin-start: calc(3.9rem + (100% - 2 * 3.9rem) * 2 / 6);
+}
+#slider0 {
+  -moz-margin-start: calc(3.9rem + (100% - 2 * 3.9rem) * 3 / 6);
+  color: #fff;
+}
+#slider1 {
+  -moz-margin-start: calc(3.9rem + (100% - 2 * 3.9rem) * 4 / 6);
+}
+#slider2 {
+  -moz-margin-start: calc(3.9rem + (100% - 2 * 3.9rem) * 5 / 6);
+}
+#slider3 {
+  -moz-margin-start: calc(3.9rem + (100% - 2 * 3.9rem));
+}

overrides/gallery.gaiamobile.org/style/gallery_tablet.css

@@ -0,0 +1,709 @@
+/* separator between thumbnail list and preview picture */
+body.thumbnailListView #fullscreen-toolbar-header:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: -1;
+  height: 5rem;
+  width: 0.2rem;
+  background: url("images/ui/tablet_section_divider.png") no-repeat left;
+}
+
+/* prevent user click on the preview in select mode */
+body.thumbnailSelectView #fullscreen-view {
+  pointer-events: none;
+}
+
+.tiny-only {
+  display: none !important;
+}
+
+footer {
+  background: rgba(28, 33, 36, 0.9);
+  height: 6rem;
+}
+
+/* Frames */
+#frames {
+  top: 5rem;
+  height: calc(100% - 5rem);
+  background-color: #1c2124;
+}
+
+.frame {
+  top: 0.2rem;
+  left: 0.2rem;
+  height: calc(100% - 0.4rem);
+  width: calc(100% - 0.4rem);
+}
+
+body.fullscreenView #frames {
+  height: 100%;
+}
+
+body.fullscreenView #frames .frame {
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+body.fullscreenView #fullscreen-view.toolbar-hidden #fullscreen-toolbar-header {
+  transform: translateY(-5rem);
+}
+
+/* player_mask for player footer */
+body.thumbnailListView #fullscreen-view.toolbar-hidden:after {
+  content: '';
+  background: url("images/player_mask.png") repeat-x center center / 0.1rem;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 8rem;
+  pointer-events: none;
+}
+body.thumbnailListView #frames:before {
+  content: '';
+  background: url("images/ui/pane_divider.png") no-repeat center center / 0.2rem;
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 0.2rem;
+  pointer-events: none;
+}
+
+body.fullscreenView .videoPlayerFooter {
+  background: url("images/player_mask.png") repeat-x center center / 0.1rem;
+}
+
+/* Thumbnails */
+body.thumbnailListView #thumbnails {
+  top: 5rem;
+}
+
+#thumbnails.offscreen {
+  top: 5rem;
+  visibility: visible;
+}
+
+/* Header in default thumbnail list appears in tablets only */
+body.thumbnailListView #thumbnail-list-top {
+  display: block !important;
+}
+
+#thumbnails.list {
+  top: 5rem;
+  bottom: 0;
+}
+
+.thumbnail.selected {
+  outline: 0.2rem solid #0AC;
+  box-shadow: 0 0 0 4px rgb(0, 202, 242) inset;
+}
+
+/* Fullscreen */
+body.fullscreenView #fullscreen-toolbar-header > menu {
+  display: block;
+}
+
+#fullscreen-back-button-large {
+  display: none;
+}
+
+/* back button only shows in fullscreen */
+body.fullscreenView #fullscreen-back-button-large {
+  display: block;
+}
+
+#fullscreen-toolbar {
+  display: none;
+}
+
+#fullscreen-view.toolbar-hidden #fullscreen-toolbar {
+  transform: translate(0, 6rem);
+}
+
+#fullscreen-camera-button-large > .icon-camera {
+  background-image: image-set(url("images/iconaction_camera_30x30.png") 1x, url("images/iconaction_camera_30x30@1.5x.png") 1.5x, url("images/iconaction_camera_30x30@2x.png") 2x, url("images/iconaction_camera_30x30@2.25x.png") 2.25x);
+}
+
+#fullscreen-edit-button-large > .icon-picedit {
+  background-image: image-set(url("images/iconaction_camera_editphoto_30x30.png") 1x, url("images/iconaction_camera_editphoto_30x30@1.5x.png") 1.5x, url("images/iconaction_camera_editphoto_30x30@2x.png") 2x, url("images/iconaction_camera_editphoto_30x30@2.25x.png") 2.25x);
+}
+
+#fullscreen-share-button-large > .icon-share {
+  background-image: image-set(url("images/iconaction_share_30x30.png") 1x, url("images/iconaction_share_30x30@1.5x.png") 1.5x, url("images/iconaction_share_30x30@2x.png") 2x, url("images/iconaction_share_30x30@2.25x.png") 2.25x);
+}
+
+#fullscreen-info-button-large > .icon-info {
+  background-image: image-set(url("images/iconaction_media_info_30x30.png") 1x, url("images/iconaction_media_info_30x30@1.5x.png") 1.5x, url("images/iconaction_media_info_30x30@2x.png") 2x, url("images/iconaction_media_info_30x30@2.25x.png") 2.25x);
+}
+
+#fullscreen-delete-button-large > .icon-delete {
+  background-image: image-set(url("images/iconaction_delete_30x30.png") 1x, url("images/iconaction_delete_30x30@1.5x.png") 1.5x, url("images/iconaction_delete_30x30@2x.png") 2x, url("images/iconaction_delete_30x30@2.25x.png") 2.25x);
+}
+
+#fullscreen-view a.disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+/* Edit */
+#save-progress {
+  position: absolute;
+  top: 5rem;
+  z-index: 10;
+}
+
+#edit-preview-area {
+  background-color: #1c2124;
+  /* 100% - header 5rem
+   *      - margin between edit options and edit button 0.2rem
+   *      - edit button 6rem
+   *      - edit option 14.4rem
+   */
+  height: calc(100%  - 5rem - 0.2rem - 6rem - 14.4rem);
+}
+
+/* Edit - toolbar */
+#edit-toolbar {
+  height: 6rem;
+}
+
+#edit-toolbar > .button {
+  font-size: 1.8rem;
+  line-height: 7rem;
+}
+
+#edit-toolbar a.selected.radio.button {
+  outline: none;
+  outline-offset: 0;
+}
+
+#edit-options {
+  background: url("images/slider-bg.png") repeat-x scroll 0 0 #1c2124;
+  bottom: 6.2rem;
+  height: 14.4rem;
+}
+
+#edit-effect-options > a.radio.button {
+  padding-top: 0;
+}
+
+#edit-effect-none:before,
+#edit-border-none:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  display: block;
+  background: url("images/selection_mask_L.png") repeat-y scroll 0 0 transparent;
+  height: 100%;
+  width: 5rem;
+}
+
+#edit-border-thick-black:after,
+#edit-effect-faded:after {
+  content: "";
+  display: block;
+  position: absolute;
+  right: 0;
+  background: url("images/selection_mask_R.png") repeat-y scroll 0 0 transparent;
+  height: 100%;
+  width: 5rem;
+}
+
+/* Edit - slider */
+#exposure-slider {
+  top: 7rem;
+  height: 10rem;
+  font-size: 1.8rem;
+}
+
+#sliderthumb {
+  width: 5.4rem;
+  top: -5.4rem;
+  height: 8rem;
+  left: calc(100% - 3rem);
+  padding-top: 3.6rem;
+  font-size: 1.8rem;
+  text-align: center;
+  background: url("images/slider-indicator.png") no-repeat scroll center center transparent;
+}
+
+#sliderthumb.active {
+  background: url("images/slider-indicator.png") no-repeat scroll center center transparent;
+}
+
+#sliderbar {
+  position: static;
+  height: 1.9rem;
+  background: none;
+}
+
+#sliderline {
+  top: 0;
+  background: white;
+  height: 0.4rem;
+  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
+}
+
+#sliderlabels {
+  top: -1.5rem;
+  height: auto;
+}
+
+.sliderlabel {
+  height: 1rem;
+  font-size: 1.8rem;
+}
+
+.sliderlabel:after {
+  top: 1.5rem;
+}
+
+/*
+ * It replaces 'save' text with image and also keep the press effect from
+ * building block.
+ */
+#crop-done-button:after,
+#edit-save-button:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: image-set(url("images/iconaction_done_30x30.png") 1x, url("images/iconaction_done_30x30@1.5x.png") 1.5x, url("images/iconaction_done_30x30@2x.png") 2x, url("images/iconaction_done_30x30@2.25x.png") 2.25x) no-repeat center center / 3rem;
+}
+#crop-done-button,
+#edit-save-button {
+  font-size: 0;
+}
+
+/* Edit - effect buttons */
+#edit-exposure-button {
+  background: url("images/actionicon_gallery_edit_exposure_30x30.png") no-repeat center/3rem, image-set(url("images/tab.png") 1x, url("images/tab@1.5x.png") 1.5x, url("images/tab@2x.png") 2x, url("images/tab@2.25x.png") 2.25x) repeat-x center;
+}
+
+#edit-exposure-button.selected {
+  background: url("images/actionicon_gallery_edit_exposure_30x30.png") no-repeat center/3rem, image-set(url("images/tab_selected.png") 1x, url("images/tab_selected@1.5x.png") 1.5x, url("images/tab_selected@2x.png") 2x, url("images/tab_selected@2.25x.png") 2.25x) repeat-x center;
+}
+
+#edit-crop-button {
+  background: url("images/actionicon_gallery_edit_crop_30x30.png") no-repeat center/3rem, image-set(url("images/tab.png") 1x, url("images/tab@1.5x.png") 1.5x, url("images/tab@2x.png") 2x, url("images/tab@2.25x.png") 2.25x) repeat-x center;
+}
+
+#edit-crop-button.selected {
+  background: url("images/actionicon_gallery_edit_crop_30x30.png") no-repeat center/3rem, image-set(url("images/tab_selected.png") 1x, url("images/tab_selected@1.5x.png") 1.5x, url("images/tab_selected@2x.png") 2x, url("images/tab_selected@2.25x.png") 2.25x) repeat-x center;
+}
+
+#edit-effect-button {
+  background: image-set(url("images/actionicon_gallery_edit_effects_30x30.png") 1x, url("images/actionicon_gallery_edit_effects_30x30@1.5x.png") 1.5x, url("images/actionicon_gallery_edit_effects_30x30@2x.png") 2x, url("images/actionicon_gallery_edit_effects_30x30@2.25x.png") 2.25x) no-repeat center/3rem, image-set(url("images/tab.png") 1x, url("images/tab@1.5x.png") 1.5x, url("images/tab@2x.png") 2x, url("images/tab@2.25x.png") 2.25x) repeat-x center;
+}
+
+#edit-effect-button.selected {
+  background: image-set(url("images/actionicon_gallery_edit_effects_30x30.png") 1x, url("images/actionicon_gallery_edit_effects_30x30@1.5x.png") 1.5x, url("images/actionicon_gallery_edit_effects_30x30@2x.png") 2x, url("images/actionicon_gallery_edit_effects_30x30@2.25x.png") 2.25x) no-repeat center/3rem, image-set(url("images/tab_selected.png") 1x, url("images/tab_selected@1.5x.png") 1.5x, url("images/tab_selected@2x.png") 2x, url("images/tab_selected@2.25x.png") 2.25x) repeat-x center;
+}
+
+#edit-border-button {
+  background: url("images/actionicon_gallery_edit_borders_30x30.png") no-repeat center/3rem, image-set(url("images/tab.png") 1x, url("images/tab@1.5x.png") 1.5x, url("images/tab@2x.png") 2x, url("images/tab@2.25x.png") 2.25x) repeat-x center;
+}
+
+#edit-border-button.selected {
+  background: url("images/actionicon_gallery_edit_borders_30x30.png") no-repeat center/3rem, image-set(url("images/tab_selected.png") 1x, url("images/tab_selected@1.5x.png") 1.5x, url("images/tab_selected@2x.png") 2x, url("images/tab_selected@2.25x.png") 2.25x) repeat-x center;
+}
+
+#edit-enhance-button {
+  background: image-set(url("images/actionicon_gallery_edit_enhance_selected_30x30.png") 1x, url("images/actionicon_gallery_edit_enhance_selected_30x30@1.5x.png") 1.5x, url("images/actionicon_gallery_edit_enhance_selected_30x30@2x.png") 2x, url("images/actionicon_gallery_edit_enhance_selected_30x30@2.25x.png") 2.25x) no-repeat center/3rem, image-set(url("images/tab.png") 1x, url("images/tab@1.5x.png") 1.5x, url("images/tab@2x.png") 2x, url("images/tab@2.25x.png") 2.25x) repeat-x center;
+}
+
+#edit-enhance-button.on {
+  background: image-set(url("images/actionicon_gallery_edit_enhance_on_selected_30x30.png") 1x, url("images/actionicon_gallery_edit_enhance_on_selected_30x30@1.5x.png") 1.5x, url("images/actionicon_gallery_edit_enhance_on_selected_30x30@2x.png") 2x, url("images/actionicon_gallery_edit_enhance_on_selected_30x30@2.25x.png") 2.25x) no-repeat center/3rem, image-set(url("images/tab.png") 1x, url("images/tab@1.5x.png") 1.5x, url("images/tab@2x.png") 2x, url("images/tab@2.25x.png") 2.25x) repeat-x center;
+}
+
+#edit-enhance-button.selected {
+  background: image-set(url("images/actionicon_gallery_edit_enhance_selected_30x30.png") 1x, url("images/actionicon_gallery_edit_enhance_selected_30x30@1.5x.png") 1.5x, url("images/actionicon_gallery_edit_enhance_selected_30x30@2x.png") 2x, url("images/actionicon_gallery_edit_enhance_selected_30x30@2.25x.png") 2.25x) no-repeat center/3rem, image-set(url("images/tab_selected.png") 1x, url("images/tab_selected@1.5x.png") 1.5x, url("images/tab_selected@2x.png") 2x, url("images/tab_selected@2.25x.png") 2.25x) repeat-x center;
+}
+
+#edit-enhance-button.selected.on {
+  background: image-set(url("images/actionicon_gallery_edit_enhance_on_selected_30x30.png") 1x, url("images/actionicon_gallery_edit_enhance_on_selected_30x30@1.5x.png") 1.5x, url("images/actionicon_gallery_edit_enhance_on_selected_30x30@2x.png") 2x, url("images/actionicon_gallery_edit_enhance_on_selected_30x30@2.25x.png") 2.25x) no-repeat center/3rem, image-set(url("images/tab_selected.png") 1x, url("images/tab_selected@1.5x.png") 1.5x, url("images/tab_selected@2x.png") 2x, url("images/tab_selected@2.25x.png") 2.25x) repeat-x center;
+}
+
+/*
+ * Dialog. Since delete dialog in select mode and loading dialog
+ * are managed by gallery app itself, we need aditional style here.
+ * We'll modify it until 934326 is landed.
+ */
+#overlay,
+#confirm-dialog {
+  background: rgb(51, 51, 51);
+}
+
+#overlay section,
+#confirm-dialog section {
+  position: absolute;
+  padding: 1rem 6rem 0;
+  left: calc((100% - 68rem) / 2);
+  top: calc((100% - 53rem) / 2);
+  width: 68rem;
+  height: 46rem;
+  box-shadow: 0 0 1rem #000;
+  border: 0.1rem #000;
+  font-size: 2rem;
+  background-color: #333333;
+}
+
+#overlay > section > p {
+  padding: 1rem 1rem 0;
+  margin: 0;
+}
+
+#confirm-dialog > section > p {
+  margin-top: 20rem;
+}
+
+#overlay > section > h1 {
+  line-height: 6rem;
+  margin: 1rem 0 0;
+}
+
+#overlay > menu,
+#confirm-dialog > menu {
+  position: absolute;
+  left: calc((100% - 68rem) / 2);
+  top: calc((100% - 53rem) / 2 + 46rem);
+  width: 68rem;
+  background: #2d2d2d;
+  padding: 1.5rem 14rem;
+  height: 7rem;
+  bottom: 0;
+  box-shadow: 0 0 1rem #000;
+}
+
+#overlay:after,
+#confirm-dialog:after {
+  content: '';
+  position: absolute;
+  width: 68rem;
+  top: calc((100% - 53rem) / 2 + 45rem);
+  left: calc((100% - 68rem) / 2);
+  height: 1rem;
+  background-color: #333;
+}
+/* video player */
+body.fullscreenView .videoPlayerFullscreenButton,
+body.thumbnailSelectView .videoPlayerFullscreenButton {
+  display: none;
+}
+
+/* We don't want the controller of videoplayer hide in preview mode */
+body.thumbnailListView #fullscreen-view.toolbar-hidden .videoPlayerFooter.hidden {
+  display: block;
+  opacity: 1;
+}
+
+/* XXX: Below css will move to building block til bug905065 is closed */
+
+/*
+ * 1. Introduced by bug 1059748
+ * In bug 1019841 we introduced !important for .large-only styles to hide
+ * tablet layout on phone devices, which will cause regression on tablet.
+ * We have to use !important here to override styles from phone layout.
+ */
+#fullscreen-toolbar-header {
+  display: block !important; /* 1 */
+}
+
+@media (min-width: 768px) and (min-height: 768px) {
+  section[role="region"].skin-organic > header:first-child h1,
+  .skin-organic section[role="region"] > header:first-child h1,
+  section[role="region"].skin-dark > header:first-child,
+  .skin-dark section[role="region"] > header:first-child {
+    color: white;
+  }
+
+  section[role="region"] > header:first-child h1 {
+    font-size: 2.4rem;
+    line-height: 5rem;
+    color: #fff;
+    padding: 0 1rem 0 2rem;
+  }
+
+  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-dark > header:first-child menu[type="toolbar"] a:after,
+  section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:after,
+  section[role="region"].skin-organic > header:first-child menu[type="toolbar"] a:after,
+  section[role="region"].skin-organic > 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/ui/tablet_button_separator.png") no-repeat left / 0.2rem transparent;
+  }
+
+  section[role="region"].skin-dark > header:first-child > a:not([aria-disabled="true"]):active:after,
+  section[role="region"].skin-dark > header:first-child > button:not(:disabled):active:after,
+  section[role="region"].skin-dark > header:first-child > a:not([aria-disabled="true"]):hover:after,
+  section[role="region"].skin-dark > header:first-child > button:not(:disabled):hover:after,
+  section[role="region"].skin-dark > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):hover,
+  section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:not(:disabled):hover,
+  section[role="region"].skin-dark > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active,
+  section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:not(:disabled):active,
+  section[role="region"].skin-organic > header:first-child > a:not([aria-disabled="true"]):active:after,
+  section[role="region"].skin-organic > header:first-child > button:not(:disabled):active:after,
+  section[role="region"].skin-organic > header:first-child > a:not([aria-disabled="true"]):hover:after,
+  section[role="region"].skin-organic > header:first-child > button:not(:disabled):hover:after,
+  section[role="region"].skin-organic > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):hover,
+  section[role="region"].skin-organic > header:first-child menu[type="toolbar"] button:not(:disabled):hover,
+  section[role="region"].skin-organic > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active,
+  section[role="region"].skin-organic > header:first-child menu[type="toolbar"] button:not(:disabled):active {
+    background: url("images/ui/tablet_header_pressed.png") repeat-x center / 0.2rem transparent !important;
+  }
+
+  section[role="region"] > header:first-child > button,
+  section[role="region"] > header:first-child > a {
+    position: relative;
+    width: 5rem;
+    height: 5rem;
+    background: none;
+    float: left;
+    overflow: visible;
+    margin: 0;
+  }
+
+  section[role="region"] > header:first-child > button:after,
+  section[role="region"] > header:first-child > a:after {
+    width: 5.2rem;
+    height: 5rem;
+  }
+
+  section[role="region"] > header:first-child .icon {
+    width: 5rem;
+  }
+
+  section[role="region"] > header:first-child .icon.icon-back,
+  section[role="region"].skin-organic > header:first-child .icon.icon-back,
+  .skin-organic section[role="region"] > header:first-child .icon.icon-back,
+  section[role="region"].skin-dark > header:first-child .icon.icon-back,
+  .skin-dark section[role="region"] > header:first-child .icon.icon-back {
+    background-image: url("images/back.png");
+  }
+
+  section[role="region"] > header:first-child .icon.icon-close,
+  section[role="region"].skin-organic > header:first-child .icon.icon-close,
+  .skin-organic section[role="region"] > header:first-child .icon.icon-close,
+  section[role="region"].skin-dark > header:first-child .icon.icon-close,
+  .skin-dark section[role="region"] > header:first-child .icon.icon-close {
+    background-image: url("images/actionicon_cancel.png");
+  }
+
+  section[role="region"].skin-dark  > header:first-child,
+  .skin-dark  section[role="region"] > header:first-child,
+  section[role="region"].skin-organic > header:first-child,
+  .skin-organic section[role="region"] > header:first-child {
+    background: url("images/ui/tablet_header.png") repeat-x scroll 0 0 / auto 100% transparent;
+  }
+
+  section[role="region"].skin-dark > header:first-child a:after,
+  .skin-dark section[role="region"] > header:first-child a:after,
+  section[role="region"].skin-dark > header:first-child button:after,
+  .skin-dark section[role="region"] > header:first-child button:after,
+  section[role="region"].skin-organic > header:first-child a:after,
+  .skin-organic 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 {
+    background: url("images/ui/tablet_button_separator.png") no-repeat right / 0.2rem transparent;
+  }
+}
+
+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/ui/tablet_button_separator.png") no-repeat left / 0.2rem transparent;
+}
+
+@media (orientation: landscape) {
+  /* we have both thumbnail list and preview together when in landscape */
+  body.thumbnailListView #fullscreen-view,
+  body.thumbnailSelectView #fullscreen-view {
+    display: block;
+    width: calc(100% - 40rem);
+    left: 40rem;
+  }
+
+  body.thumbnailListView #thumbnail-views,
+  body.thumbnailSelectView #thumbnail-views {
+    visibility: visible;
+    width: 40rem;
+  }
+
+  /* outline the picture we're focusing on in preview mode */
+  body.thumbnailListView .thumbnail.focus {
+    outline: solid #00aacc 0.3rem;
+    outline-offset: -0.2rem;
+  }
+
+  /* rewrite thumbnail's original size */
+  .thumbnail {
+    width: calc((100% - 0.4rem) / 3);
+    padding: 0 0 calc((100% - 0.4rem) / 3);
+    margin-right: 0.2rem;
+    margin-bottom: 0.2rem;
+  }
+
+  .thumbnail:nth-child(4n) {
+    margin-right: 0.2rem;
+  }
+
+  .thumbnail:nth-child(3n) {
+    margin-right: 0;
+  }
+
+  /* we don't have preview screen when in picking */
+  body.pickView #thumbnails {
+    width: 100%;
+  }
+
+  body.pickView #thumbnails .thumbnail {
+    width: calc((100% - 1rem) / 6);
+    padding: 0 0 calc((100% - 1em) / 6);
+    margin-bottom: 0.2rem;
+  }
+
+  body.pickView #thumbnails .thumbnail:nth-child(3n) {
+    margin-right: 0.2rem;
+  }
+
+  body.pickView #thumbnails .thumbnail:nth-child(4n) {
+    margin-right: 0.2rem;
+  }
+
+  body.pickView #thumbnails .thumbnail:nth-child(6n) {
+    margin-right: 0;
+  }
+
+  /*
+   * slider
+   * We have 7 steps located from the center of sliderline
+   */
+  #sliderline {
+    width: 90rem;
+    left: calc(50% - 45rem);
+  }
+
+  #slider-3 {
+    left: calc(50% - 45rem);
+  }
+
+  #slider-2 {
+    left: calc(50% - 45rem + (100% - 2 * (50% - 45rem)) / 6);
+  }
+
+  #slider-1 {
+    left: calc(50% - 45rem + (100% - 2 * (50% - 45rem)) * 2 / 6);
+  }
+
+  #slider0 {
+    left: calc(50% - 45rem + (100% - 2 * (50% - 45rem)) * 3 / 6);
+    color: #fff;
+  }
+
+  #slider1 {
+    left: calc(50% - 45rem + (100% - 2 * (50% - 45rem)) * 4 / 6);
+  }
+
+  #slider2 {
+    left: calc(50% - 45rem + (100% - 2 * (50% - 45rem)) * 5 / 6);
+  }
+
+  #slider3 {
+    left: calc(50% - 45rem + (100% - 2 * (50% - 45rem)));
+  }
+
+  /* video player */
+  body:not(.fullscreenView) .videoPlayerPauseButton {
+    width: 9rem;
+  }
+
+  body:not(.fullscreenView) .videoPlayerSlider {
+    left: 10rem;
+  }
+
+  body:not(.fullscreenView) .videoPlayerProgress {
+    left: 7rem;
+    right: 15rem;
+  }
+
+  body:not(.fullscreenView) .videoPlayerSlider .videoPlayerDurationText {
+    text-align: center;
+    right: 8rem;
+    width: 5rem;
+  }
+}
+@media (orientation: portrait) {
+  .thumbnail:nth-child(3n) {
+    margin-right: 0.2rem;
+  }
+
+  .thumbnail {
+    width: calc((100% - 0.6rem) / 4);
+    padding: 0 0 calc((100% - 0.6rem) / 4);
+    margin-right: 0.2rem;
+    margin-bottom: 0.2rem;
+  }
+
+  .thumbnail:nth-child(4n) {
+    margin-right: 0;
+  }
+
+  /* slider */
+  #sliderline {
+    width: 60rem;
+    left: calc(50% - 30rem);
+  }
+
+  #slider-3 {
+    left: calc(50% - 30rem);
+  }
+
+  #slider-2 {
+    left: calc(50% - 30rem + (100% - 2 * (50% - 30rem)) / 6);
+  }
+
+  #slider-1 {
+    left: calc(50% - 30rem + (100% - 2 * (50% - 30rem)) * 2 / 6);
+  }
+
+  #slider0 {
+    left: calc(50% - 30rem + (100% - 2 * (50% - 30rem)) * 3 / 6);
+    color: #fff;
+  }
+
+  #slider1 {
+    left: calc(50% - 30rem + (100% - 2 * (50% - 30rem)) * 4 / 6);
+  }
+
+  #slider2 {
+    left: calc(50% - 30rem + (100% - 2 * (50% - 30rem)) * 5 / 6);
+  }
+
+  #slider3 {
+    left: calc(50% - 30rem + (100% - 2 * (50% - 30rem)));
+  }
+}