[Files.app] Initial implementation of new audio player

chrome/browser/resources/file_manager/audio_player/elements/volume_controller.css

Index: chrome/browser/resources/file_manager/audio_player/elements/volume_controller.css
diff --git a/chrome/browser/resources/file_manager/audio_player/elements/volume_controller.css b/chrome/browser/resources/file_manager/audio_player/elements/volume_controller.css
new file mode 100644
index 0000000000000000000000000000000000000000..c7189012986feda57649016e0d19d7c6f00efd33
--- /dev/null
+++ b/chrome/browser/resources/file_manager/audio_player/elements/volume_controller.css
@@ -0,0 +1,54 @@
+/* Cpyright (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. */
+

[mtomasz, 2014/01/23 08:05:09]

nit: Shadow for the volume controller is too strong comparing to the mocks.

[yoshiki, 2014/01/24 15:34:19]

Done.

+:host {
+  background: white;
+  display: block;
+  height: 100px;
+  position: relative;
+  width: 32px;
+}
+
+#background {
+  height: 100%;  /* will be overridden by javascript */
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+input[type='range'] {
+  -webkit-appearance: none !important;
+  -webkit-transform: rotate(90deg);
+  background: transparent;
+  outline: none;
+  position: absolute;
+  z-index: 2;
+}
+
+input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  -webkit-transform: rotate(-90deg);
+  background-image: -webkit-image-set(
+      url(../assets/100/player_timeline_handler.png) 1x,
+      url(../assets/100/player_timeline_handler.png) 2x);

[mtomasz, 2014/01/23 08:05:09]

100 -> 200, please double check other places too.

[yoshiki, 2014/01/24 15:34:19]

Done.

+  background-position: 50% 50%;
+  background-repeat: no-repeat no-repeat;
+  height: 24px;
+  position: relative;
+  width: 24px;
+  z-index: 2;
+}
+
+#bar {
+  background: #000;
+  bottom: 14px;
+  position: absolute;
+  top: 14px;
+  z-index: 1;

[mtomasz, 2014/01/23 08:05:09]

Is the z-index needed?

[yoshiki, 2014/01/24 15:34:19]

Removed.

+}
+
+#bar .filled {
+  background: #aaa;
+}