New custom wallpaper picker UI

chrome/browser/resources/chromeos/wallpaper_manager/css/wallpaper_manager.css

 /* Copyright (c) 2013 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. */
 
 html {
   height: 100%;
 }
 
 body {
   background-color: rgba(20, 20, 20, 0.93);
@@ skipping 81 matching lines @@
   position: absolute;
   top: 0;
 }
 
 .dialog-main {
   -webkit-box-align: stretch;
   -webkit-box-flex: 1;
   display: -webkit-box;
 }
 
-#category-container,
-#custom-container {
+#category-container {
   -webkit-box-flex: 1;
   -webkit-box-orient: vertical;
   display: -webkit-box;
 }
 
-#custom-container {
-  margin: 10px;
-  padding: 10px;
-}
-
-#custom-container > div {
-  margin: 10px 0 5px 0;
-}
-
 .image-picker {
   -webkit-padding-end: 5px;
   -webkit-padding-start: 15px;
   display: block;
   /* Set font size to 0 to remove the extra vertical margin between two rows of
    * thumbnails.
    * TODO(bshe): Find the root cause of the margin.
    */
   font-size: 0;
   height: 287px;
@@ skipping 87 matching lines @@
   width: 54px;
 }
 
 #author-website {
   color: #999;
   overflow: hidden;
   white-space: nowrap;
   width: 240px;
 }
 
-/* Custom wallpaper thumbnail container. */
-#preview {
-  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-  height: 80px;
-  width: 128px;
-}
-
 /* [hidden] does display:none, but its priority is too low. */
 [hidden] {
   display: none !important;
 }
 
 .progress-bar {
   background-color: rgba(255, 255, 255, 0.7);
   height: 6px;
   position: absolute;
   top: 62px;
   width: 100%;
 }
 
 .progress-track {
   -webkit-transition: width 1ms linear;
   background-color: rgb(66, 129, 244);
   height: 100%;
   width: 0;
 }
 
-#error-container {
+.overlay-container {
   -webkit-box-align: center;
   -webkit-box-orient: vertical;
   -webkit-box-pack: center;
   background-color: rgba(25, 25, 25, 0.25);
   bottom: 0;
   display: -webkit-box;
   left: 0;
   overflow: auto;
   position: fixed;
   right: 0;
   top: 0;
   z-index: 4;
 }
 
-#error-container .page {
+.overlay-container .page {
   -webkit-border-radius: 3px;
   -webkit-box-orient: vertical;
   background: rgb(255, 255, 255);
   box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
   color: #333;
   display: -webkit-box;
   padding: 20px;
   position: relative;
   width: 302px;
 }
 
-#close-error {
+#error-container {
+  z-index: 5;
+}
+
+.close-overlay {
   background-image: url('../images/ui/close-error.png');
   height: 14px;
   position: absolute;
   right: 10px;
   top: 10px;
   width: 14px
 }
 
-#close-error:hover {
+.close-overlay:hover {
   background-image: url('../images/ui/close-error-hover.png');
 }
+
+/* Custom wallpaper thumbnail container. */
+#add-new img {
+  content: url('../images/ui/add-wallpaper-thumbnail.png');
+}
+
+#add-new:hover img {
+  content: url('../images/ui/add-wallpaper-thumbnail-hover.png');
+}
+
+#wallpaper-selection-container #content div {
+  margin: 20px 0 5px 0;
+}
+
+#wallpaper-selection-container #warning span {
+  line-height: 17px;
+}
+
+#wallpaper-selection-container select {
+  height: 30px;
+}
+
+#wallpaper-selection-container input[type='file']::-webkit-file-upload-button {
+  height: 30px;
+}
+
+#wallpaper-selection-container .remember-icon {
+  content: url('../images/ui/remember.png');
+}