Gallery: Match the color of selection UI.

ui/file_manager/gallery/css/gallery.css

 /* Copyright (c) 2014 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;
 }
 
+input:focus, button:focus {
+  outline: 1px solid rgb(77, 144, 254);
+}
+
+input[type='checkbox'] {
+  width: 15px;
+  height: 15px;
+  background: -webkit-image-set(
+      url(../../file_manager/foreground/images/common/checkbox_white_unchecked.png) 1x,
+      url(../../file_manager/foreground/images/common/2x/checkbox_white_unchecked.png) 2x)
+      -1px -1px;
+  -webkit-appearance: none;
+  display: inline-block;
+  margin: 1px 6px 1px 1px;
+  vertical-align: text-bottom;
+}
+
+input[type='checkbox']:checked {
+  background: -webkit-image-set(
+      url(../../file_manager/foreground/images/common/checkbox_white_checked.png) 1x,
+      url(../../file_manager/foreground/images/common/2x/checkbox_white_checked.png) 2x)
+      -1px -1px;
+}
+
 .gallery,
 .gallery .content {
   bottom: 0;
   left: 0;
   overflow: hidden;
   position: absolute;
   right: 0;
   top: 0;
 }
 
 /* Common background for both mosaic and slide mode. */
 .gallery .content {
   background-color: black;
 }
 
-/* Close button */
-
-/* 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 > .back-button {
-  cursor: pointer;
-  left: 1px;
-  position: absolute;
-  top: 1px;
-  z-index: 200;
-}
-
-/* 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 > .back-button div {
-  background-image: -webkit-image-set(
-      url(../images/100/back_to_files.png) 1x,
-      url(../images/200/back_to_files.png) 2x);
-  background-position: center center;
-  background-repeat: no-repeat;
-  height: 40px;
-  opacity: 0;
-  width: 64px;
-}
-
-.gallery[tools] > .back-button div {
-  opacity: 0.5;
-}
-
-.gallery[tools] > .back-button div:hover {
-  opacity: 1;
-}
-
 /* Image container and canvas elements */
 
 .gallery .image-container {
   cursor: none;   /* Only visible when the toolbar is active */
   height: 100%;
   position: absolute;
   width: 100%;
 }
 
 .gallery[tools] .image-container[cursor='default'] {
@@ skipping 324 matching lines @@
 .gallery[editing] .options[saved] .overwrite-original {
   opacity: 0.5;
 }
 
 .gallery[editing] .options[saved] .overwrite-original,
 .gallery[editing] .options[saved] .overwrite-original > * {
   cursor: default;
   pointer-events: none;
 }
 
-.gallery .filename-spacer .overwrite-original input {
-  margin-bottom: -2px;
-  margin-right: 6px;
-}
-
 .gallery .filename-spacer .saved[highlighted] {
   -webkit-transform: scaleX(1.1) scaleY(1.1) rotate(0);
   opacity: 1;
 }
 
 /* Bubble */
 .gallery .toolbar .bubble {
   bottom: 65px;
   font-size: 85%;
   left: 50px;
@@ skipping 58 matching lines @@
 
 .ribbon-image[vanishing='smooth'] {
   border-left-width: 0;
   border-right-width: 0;
   margin-left: 0;
   margin-right: 0;
   width: 0;
 }
 
 .gallery .ribbon-image[selected] {
-  border: 2px solid rgba(255, 233, 168, 1);
+  border: 2px solid rgb(77, 144, 254);
 }
 
 .gallery .toolbar .ribbon.fade-left {
   -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0,
                                                 rgba(0, 0, 0, 1) 40px);
 }
 
 .gallery .toolbar .ribbon.fade-right {
   -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0,
                                                rgba(0, 0, 0, 1) 40px);
@@ skipping 78 matching lines @@
 }
 
 .gallery .header button,
 .gallery .toolbar button {
   height: 40px;
   margin: 6px 0;
   min-width: 40px;  /* Reset. */
   width: 40px;
 }
 
+.gallery .toolbar button:focus {
+  z-index: 11;
+}
+
 /* By default, labels are hidden. */
 .gallery > .toolbar button span {
   display: none;
 }
 
 /* Show labels if there is enough space. */
 @media (min-width: 1180px) {
 
   .gallery .edit-main button,
   .gallery .edit-main button[disabled] {
@@ skipping 446 matching lines @@
 
 .gallery .prompt[state='fadeout'] {
   opacity: 0;
   top: 0;
 }
 
 .gallery .prompt-wrapper[pos=top] .prompt {
   padding-right: 10px;
 }
 
-.gallery .prompt .back-button {
-  background-image: -webkit-image-set(
-      url(../images/100/butterbar_close_button.png) 1x,
-      url(../images/200/butterbar_close_button.png) 2x);
-  background-position: center center;
-  background-repeat: no-repeat;
-  height: 16px;
-  margin-left: 16px;
-  opacity: 0.65;
-  pointer-events: auto;
-  width: 16px;
-}
-
-.gallery .prompt .back-button:hover {
-  background-color: rgba(81, 81, 81, 1);
-  opacity: 1.0;
-}
-
 .gallery .share-menu {
   -webkit-box-align: stretch;
   -webkit-box-orient: vertical;
   -webkit-box-pack: start;
   background-color: white;
   border: 1px solid #7f7f7f;
   border-radius: 1px;
   bottom: 60px;
   display: -webkit-box;
   opacity: 1.0;
@@ skipping 269 matching lines @@
       url(chrome://resources/images/2x/apps/topbar_button_maximize.png) 2x)
       center;
 }
 
 .gallery > .header > .close-button {
   background: -webkit-image-set(
       url(chrome://resources/images/apps/topbar_button_close.png) 1x,
       url(chrome://resources/images/2x/apps/topbar_button_close.png) 2x)
       center;
 }