[Media Router] Custom Controls 4 - Implement details view WebUI

chrome/browser/resources/media_router/elements/route_controls/route_controls.css

+/* Copyright 2017 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. */
+
+#button-holder {
+  float: left;
+}
+
+#current-time {
+  left: 20px;
+  position: absolute;
+}
+
+#duration {
+  position: absolute;
+  right: 20px;
+}
+
+.ellipsis {
+  padding: 0 1%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 90%;
+}
+
+#media-controls {
+  font-size: 1.25em;
+  margin: 0 8px;
+}
+
+#play-pause-volume-controls {
+  display: block;
+  margin-top: 13px;
+  overflow: hidden;
+}
+
+#route-description {
+  margin: 15px 8px 3px 8px;
+  overflow: hidden;
+}
+
+#route-time-controls {
+  display: block;
+  margin-top: 3px;
+  overflow: hidden;
+}
+
+#route-time-slider {
+  --paper-slider-knob-color: rgb(16, 16, 16);
+  --paper-slider-active-color: rgb(16, 16, 16);
+  --paper-slider-pin-color: rgb(16, 16, 16);
+  width: 100%;
+}
+
+#route-title {
+  color: rgb(125, 125, 125);
+  margin: 3px 8px;
+  overflow: hidden;
+}
+
+#route-volume-slider {
+  --paper-slider-knob-color: rgb(16, 16, 16);
+  --paper-slider-active-color: rgb(33, 150, 243);
+  --paper-slider-pin-color: rgb(16, 16, 16);
+  width: 100%;
+}
+
+#timeline {
+  font-size: 0.75em;
+}
+
+#volume-holder {
+  display: block;
+  overflow: hidden;
+  padding: 0.3em 0;
+}