Initial restyle of the gallery.

chrome/browser/resources/file_manager/css/gallery.css

 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 body {
   -webkit-user-select: none;
   font-family: Open Sans, Droid Sans Fallback, sans-serif;
   font-size: 84%;
   margin: 0;
 }
@@ skipping 18 matching lines @@
 /* We actually want (left,top) to be (0,0) but for some weird reason
   this triggers :hover style on page reload which is ugly. */
 .gallery > .close {
   cursor: pointer;
   left: 1px;
   position: absolute;
   top: 1px;
   z-index: 200;
 }
 
+body[new-ui] .tools .gallery > .close {
+  opacity: 0;
+}
+
 /* The close icon is in a nested div so that its opacity can be manipulated
    independently from its parent (which can be dimmed when the crop frame
    overlaps it) */
 .gallery > .close div {
   background-image: -webkit-image-set(
     url('../images/gallery/back_to_files.png') 1x,
     url('../images/gallery/2x/back_to_files.png') 2x);
   background-position: center center;
   background-repeat: no-repeat;
   height: 40px;
@@ skipping 110 matching lines @@
   }
 
   /* Print video at the center of the page */
   .gallery .image-container > video.image {
     position: auto !important;
   }
 }
 
 /* Toolbar */
 
+body[new-ui] .gallery > .header,
 .gallery > .toolbar {
   -webkit-box-align: stretch;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: start;
   -webkit-transition: opacity 300ms ease;
   background-color: rgba(18, 18, 18, 0.875);
-  border-top: 1px solid rgba(31, 31, 31, 0.875);
-  bottom: 0;
-  box-sizing: border-box;
   display: -webkit-box;
-  height: 55px;
   min-width: 800px;
   opacity: 0;
   padding: 0 8px;
   pointer-events: none;
   position: absolute;
   width: 100%;
 }
 
+body[new-ui] .gallery > .header,
+body[new-ui] .gallery > .toolbar {
+  background-color: rgba(30, 30, 30, 0.8);
+}
+
+body[new-ui] .gallery > .header {
+  border-bottom: 1px solid rgba(50, 50, 50, 0.8);
+  height: 45px;
+  top: 0;
+}
+
+.gallery > .toolbar {
+  border-top: 1px solid rgba(31, 31, 31, 0.7);
+  bottom: 0;
+  height: 55px;
+}
+
+body[new-ui] .gallery > .toolbar {
+  border-top: 1px solid rgba(50, 50, 50, 0.8);
+  bottom: 0;
+  height: 55px;
+}
+
+body[new-ui] .gallery[tools]:not([slideshow]) > .header,
 .gallery[tools]:not([slideshow]) > .toolbar {
   opacity: 1;
   pointer-events: auto;
 }
 
 /* Hide immediately when entering the slideshow. */
 .gallery[tools][slideshow] > .toolbar {
   -webkit-transition-duration: 0;
 }
 
@@ skipping 302 matching lines @@
   height: 45px;
   overflow: hidden;
   position: relative;
   width: 45px;
 }
 
 .gallery .image-wrapper > img {
   position: absolute;
 }
 
+body[new-ui] .gallery .image-wrapper > img:not(.cached) {
+  -webkit-animation: fadeIn 500ms ease-in;
+}
+
 /* Editor buttons */
 
 .gallery .edit-bar-spacer {
   -webkit-box-align: center;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: center;
   -webkit-transition: opacity 180ms linear, visibility 0 linear 180ms;
   display: -webkit-box;
   height: 100%;
   left: 280px;
@@ skipping 787 matching lines @@
     url('../images/gallery/slideshow-pause.png') 1x,
     url('../images/gallery/2x/slideshow-pause.png') 2x);
 }
 
 .slideshow-toolbar > .slideshow-end {
   background-image: -webkit-image-set(
     url('../images/gallery/slideshow-end.png') 1x,
     url('../images/gallery/2x/slideshow-end.png') 2x);
   margin-left: -2px;
 }