Video Player: Update the design of cast menu.

BUG=417113
TEST=manually tested.

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

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

ui/file_manager/video_player/css/cast_menu.css

@@ -3,19 +3,42 @@
  * found in the LICENSE file. */
 
 .cast-menu {
-  background: #222;
+  background-color: rgba(0, 0, 0, 0.85);
   border: 0;
   border-radius: 1px;
   min-width: 120px;
-  padding: 0 15px 15px;
+  outline: none;
+  overflow: hidden;
+  padding: 0 0 5px;
   position: absolute;
   z-index: 1000;
 }
 
 .cast-menu:before {
+  -webkit-margin-start: 10px;
+  border-bottom: solid 1px rgba(255, 255, 255, 0.25);
   color: #fff;
   content: attr(playon-text);
-  line-height: 42px;
+  display: block;
+  font-size: 12px;
+  margin-bottom: 5px;
+  padding-bottom: 6px;
+  padding-top: 6px;
+}
+
+/* Make the width of the horizontal border one device pixel even on HiDPI.
+ * crbug.com/417113. */
+@media (-webkit-min-device-pixel-ratio: 2) {
+  .cast-menu:before {
+    border-bottom: none;
+    background-image: linear-gradient(rgba(255, 255, 255, 0.25),
+                                      rgba(255, 255, 255, 0.25),
+                                      rgba(255, 255, 255, 0),
+                                      rgba(255, 255, 255, 0));
+    background-position: bottom;
+    background-size: 100% 1px;
+    background-repeat: no-repeat;
+  }
 }
 
 .cast-menu.hidden {
@@ -23,36 +46,30 @@
 }
 
 .cast-menu > :not(hr) {
-  -webkit-padding-end: 14px;
-  -webkit-padding-start: 19px;
-  background-color: #e6e6e6;
+  -webkit-padding-end: 10px;
+  -webkit-padding-start: 30px;
+  color: rgba(255, 255, 255, 0.5);
   font-size: 12px;
   padding-bottom: 5px;
-  padding-top: 5px;
+  padding-top: 6px;
   text-overflow: ellipsis;
 }
 
-.cast-menu > [checked]:not(hr) {
-  /* A checkmark has 19 px width. */
-  -webkit-padding-start: 0;
-}
-
-.cast-menu > [selected]:not(hr) {
-  background-color: #888;
-  color: #fff;
+.cast-menu > :not(hr):hover {
+  background-color: rgba(48, 48, 48, 0.85);
 }
 
-.cast-menu > [selected]:not(hr):active {
-  background-color: #888;
+.cast-menu > [checked]:not(hr) {
+  /* A checkmark has corresponding width and margin. */
+  -webkit-padding-start: 0;
   color: #fff;
 }
 
-.cast-menu > [checked]:hover:before,
-.cast-menu > [checked]:active:before {
-  content: url('../../../webui/resources/images/checkbox_white.png');
-}
-
-.cast-menu > :not(hr):hover {
-  background-color: #555;
-  color: #fff;
+.cast-menu > [checked]:before {
+  content: -webkit-image-set(
+      url('../images/media/media_check.png') 1x,
+      url('../images/media/2x/media_check.png') 2x);
+  height: 8px;
+  margin: 0 10px;
+  width: 10px;
 }