[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..1bba4bd3ae89030147b153072a520ff457cb4af9
--- /dev/null
+++ b/chrome/browser/resources/file_manager/audio_player/elements/volume_controller.css
@@ -0,0 +1,53 @@
+/* Cpyright 2014 The Chromium Authors. All rights reserved.

[mtomasz, 2014/01/27 01:09:24]

typo

[yoshiki, 2014/01/27 07:12:08]

Done.

+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+: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;

[mtomasz, 2014/01/27 01:09:24]

Is this z-index necessary?

[yoshiki, 2014/01/27 07:12:08]

We need to put the <input> element over the bar elements in the volume slider.
It is necessary to do it.

+}
+
+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/200/player_timeline_handler.png) 2x);
+  background-position: 50% 50%;
+  background-repeat: no-repeat no-repeat;
+  height: 24px;
+  position: relative;
+  width: 24px;
+  z-index: 1;
+}
+
+#bar {
+  background: #000;
+  bottom: 14px;
+  position: absolute;
+  top: 14px;
+}
+
+#bar .filled {
+  background: #aaa;
+}