[webui] Fix the color picker positioning in cr-customize-themes

A hidden <input type="color"> element displays the color picker in the
top left corner. This CL replaces the hidden attribute with the
"visibility:hidden" style and zero element size.

Screenshot: https://drive.google.com/file/d/1egjk4ZrO_cj0D7Tu5fMOL3INqwAhY6F7/view?usp=sharing

Fixed: 1126668, 1047800
Change-Id: Ia7d91759e3a76ea3efa5b45d742e77765e101071
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2401141
Commit-Queue: Alex Ilin <alexilin@chromium.org>
Auto-Submit: Alex Ilin <alexilin@chromium.org>
Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#805574}

ui/webui/resources/cr_components/customize_themes/customize_themes.html

@@ -68,9 +68,19 @@
 
   #autogeneratedThemeContainer {
     display: flex;
+    flex-direction: column;
     position: relative;
   }
 
+  #colorPicker {
+    border: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+    visibility: hidden;
+    width: 0;
+  }
+
   #colorPickerIcon {
     -webkit-mask-image: url(chrome://resources/cr_components/customize_themes/colorize.svg);
     -webkit-mask-repeat: no-repeat;
@@ -124,9 +134,6 @@
     </cr-button>
   </div>
 </div>
-<input id="colorPicker" type="color" on-change="onCustomFrameColorChange_"
-    hidden>
-</input>
 <cr-grid id="themesContainer" columns="6">
   <div id="autogeneratedThemeContainer" title="[[i18n('colorPickerLabel')]]"
       tabindex="0" on-click="onAutogeneratedThemeClick_">
@@ -134,6 +141,8 @@
         selected$="[[isThemeIconSelected_('autogenerated', selectedTheme)]]">
     </cr-theme-icon>
     <div id="colorPickerIcon"></div>
+    <input id="colorPicker" type="color" on-change="onCustomFrameColorChange_">
+    </input>
   </div>
   <cr-theme-icon id="defaultTheme" title="[[i18n('defaultThemeLabel')]]"
       on-click="onDefaultThemeClick_" tabindex="0"