Add Media Router issue-banner.

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

Index: chrome/browser/resources/media_router/elements/issue_banner/issue_banner.css
diff --git a/chrome/browser/resources/media_router/elements/issue_banner/issue_banner.css b/chrome/browser/resources/media_router/elements/issue_banner/issue_banner.css
new file mode 100644
index 0000000000000000000000000000000000000000..5c419380c52d21f1469d405c9d449ac0dc15f869
--- /dev/null
+++ b/chrome/browser/resources/media_router/elements/issue_banner/issue_banner.css
@@ -0,0 +1,95 @@
+/* Copyright 2015 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 {
+  -webkit-appearance: none;
+  border: 1px solid rgb(193, 193, 195);
+  color: rgb(44, 44, 44);
+  cursor: pointer;
+  font-size: 0.875em;
+  font-weight: bold;
+  height: 32px;
+  overflow: hidden;
+  text-align: center;
+  width: 100%;
+}
+
+.button-secondary {
+  background: linear-gradient(to top, rgb(254, 254, 254), rgb(222, 222, 222));
+}
+
+.button-action {
+  background: linear-gradient(to top, rgb(89, 158, 244), rgb(75, 134, 241));
+  border: 1px solid rgb(55, 113, 206);
+  color: white;
+}
+
+.issue-action {
+  color: black;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.blocking-issue-header {
+  overflow: hidden;
+}
+
+.blocking-issue-message {
+  color: rgb(125, 125, 125);
+  display: block;

[James Hawkins, 2015/04/06 21:52:47]

Why is this necessary?

[apacible, 2015/04/06 22:50:41]

Removed; changed <span> tags to <div>.

+  line-height: 18px;

[James Hawkins, 2015/04/06 21:52:47]

Hmm, I'm thinking this should probably be expressed in em, as this won't scale
as the user modifies font size.

[apacible, 2015/04/06 22:50:41]

Updated all line-heights to em.

+  vertical-align: middle;
+}
+
+.blocking-issue-title {
+  display: block;
+  font-weight: bold;
+  line-height: 18px;
+  vertical-align: top;
+}
+
+:host-context(html[dir='ltr']) .blocking-issue-message,
+:host-context(html[dir='ltr']) .blocking-issue-title {
+  padding-left: 8px;

[James Hawkins, 2015/04/06 21:52:47]

You're gonna kill me: we can just use -webkit-padding-start: 8px (which
automatically handles direction appropriately).

[apacible, 2015/04/06 22:50:41]

Fixed.

+}
+
+:host-context(html[dir='rtl']) .blocking-issue-message,
+:host-context(html[dir='rtl']) .blocking-issue-title {
+  padding-right: 8px;
+}
+
+.non-blocking-issue {
+  background-color: rgb(249, 236, 191);
+  display: block;
+  line-height: 20px;
+  padding-bottom: 6px;
+  padding-top: 6px;
+}
+
+:host-context(html[dir='ltr']) .non-blocking-issue {
+  padding-left: 12px;
+}
+
+:host-context(html[dir='rtl']) .non-blocking-issue {
+  padding-right: 12px;
+}
+
+.sad-face {
+  background-image: -webkit-image-set(
+    url(../icon/sad-face.png) 1x,
+    url(../icon/sad-face2x.png) 2x);
+  background-repeat: no-repeat;
+  height: 32px;
+  width: 32px;
+}
+
+:host-context(html[dir='ltr']) .sad-face {
+  float: left;
+  left: 4px;
+}
+
+:host-context(html[dir='rtl']) .sad-face {
+  float: right;
+  right: 4px;
+}