Change color of ripple effects and tab focus of toolbar buttons in Files

ui/file_manager/video_player/css/media_controls.css

 /* Copyright (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. */
 
 /* Common styles for media buttons. */
 
 .media-button {
   background-position: center;
   background-repeat: no-repeat;
   flex: none;
@@ skipping 111 matching lines @@
 
 .video-controls {
   background: rgb(250, 250, 250);
   display: flex;
   font-size: 13px;
   height: 32px;
   padding: 8px;
   pointer-events: auto;
 }
 
+.video-controls .ripple {

[yamaguchi, 2016/11/07 09:15:13]

Now I am seeing this doesn't work because style for .files-toggle-ripple-0
.ripple.files-toggle-ripple takes higher precedence.
It is affected by the addition of @apply(--files-ripple); to the
files_ripple.html by patchset 6.

+  background-color: black;
+}
+
 /* Cast button. */
 
 .media-button.cast,
 .media-button.cast-button {
   background-image: -webkit-image-set(
     url(../images/media/media_chromecast.png) 1x,
     url(../images/media/2x/media_chromecast.png) 2x);
   display: none;
   border-radius: 2px;
 }
@@ skipping 131 matching lines @@
     url(../images/media/media_play_onscreen.png) 1x,
     url(../images/media/2x/media_play_onscreen.png) 2x);
 }
 
 .playback-state-icon[state='pause'] {
   -webkit-animation: blowup 500ms;
   background-image: -webkit-image-set(
     url(../images/media/media_pause_onscreen.png) 1x,
     url(../images/media/2x/media_pause_onscreen.png) 2x);
 }