Audio Player: Update design of playlist scroll bar.

Spec: https://code.google.com/p/chromium/issues/detail?id=570588#c8

BUG=570588
TEST=manually

Review URL: https://codereview.chromium.org/1582753002

Cr-Commit-Position: refs/heads/master@{#369117}

1 files changed, 6 insertions, 21 deletions

diff --git a/ui/file_manager/audio_player/css/audio_player.css b/ui/file_manager/audio_player/css/audio_player.css
index 06c0163..2ba0d15 100644
--- a/ui/file_manager/audio_player/css/audio_player.css
+++ b/ui/file_manager/audio_player/css/audio_player.css
@@ -38,8 +38,8 @@ div.audio-player {
 /* Customized scrollbar for the playlist. */
 
 ::-webkit-scrollbar {
-  height: 16px;
-  width: 16px;
+  height: 11px;
+  width: 11px;
 }
 
 ::-webkit-scrollbar-button {
@@ -49,20 +49,16 @@ div.audio-player {
 
 ::-webkit-scrollbar-thumb {
   background-clip: padding-box;
-  background-color: rgba(255, 255, 255, 0.15);
-  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.10),
-              inset 0 -1px 0  rgba(0, 0, 0, 0.07);
+  background-color: rgba(0, 0, 0, 0.2);
   min-height: 28px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(255, 255, 255, 0.20);
-  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
+  background-color: rgba(0, 0, 0, 0.3);
 }
 
 ::-webkit-scrollbar-thumb:active {
-  background-color: rgba(255, 255, 255, 0.25);
-  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
+  background-color: rgba(0, 0, 0, 0.4);
 }
 
 ::-webkit-scrollbar-thumb:vertical {
@@ -72,20 +68,9 @@ div.audio-player {
   border-top: 0 solid transparent;
 }
 
-::-webkit-scrollbar-track:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.10);
-}
-
-::-webkit-scrollbar-track:active {
-  background-color: rgba(0, 0, 0, 0.05);
-  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.14),
-              inset -1px -1px 0 rgba(0, 0, 0, 0.07);
-}
-
 ::-webkit-scrollbar-track:vertical {
   background-clip: padding-box;
-  background-color: transparent;
+  background-color: rgba(255, 255, 255, 0.5);
   border-left: 5px solid transparent;
   border-right: 0 solid transparent;
 }