Implemented UI for the meetings controller out-of-box.

chrome/browser/resources/chromeos/login/controller_pairing_page.css

Index: chrome/browser/resources/chromeos/login/controller_pairing_page.css
diff --git a/chrome/browser/resources/chromeos/login/controller_pairing_page.css b/chrome/browser/resources/chromeos/login/controller_pairing_page.css
new file mode 100644
index 0000000000000000000000000000000000000000..035170abfa17f60fc657ae14136d510d54150523
--- /dev/null
+++ b/chrome/browser/resources/chromeos/login/controller_pairing_page.css
@@ -0,0 +1,110 @@
+/* Copyright 2014 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.
+ */
+
+:host {
+  background-color: rgb(15, 157, 88);
+  color: white;
+}
+
+content::content strong {
+  font-weight: 500;
+}
+
+/* Top part of a page. */
+
+#top {
+  box-sizing: border-box;
+  font-size: 23px;
+  height: 266px;
+  padding: 34px 48px 22px;
+}
+
+:host(.split) #top {
+  padding-bottom: 33px;
+}
+
+:host(.big) #top {
+  font-size: 33px;
+}
+
+/* Separator. */
+
+#separator {
+  background-color: rgba(255, 255, 255, 0.4);
+  bottom: 0;
+  display: block;
+  height: 1px;
+  left: 48px;
+  position: absolute;
+  right: 0;
+}
+
+:host(.split) #separator {
+  display: none;
+}
+
+#separator indeterminate-progress {
+  display: none;
+}
+
+:host(.progress) #separator indeterminate-progress {
+  display: block;
+}
+
+:host(.progress) #separator {
+  bottom: -2px;
+  height: 4px;
+}
+
+/* Bottom part of a page. */
+
+#bottom {
+  font-size: 16px;
+  padding: 20px 48px 34px;
+}
+
+:host(.split) #bottom {
+  background: white;
+  color: black;
+  padding-top: 35px;
+}
+
+:host(.big) #bottom {
+  font-size: 24px;
+}
+
+/* Controls. */
+
+#controls {
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: calc(-0.5em - 6px);
+}
+
+#controls :first-child {
+  margin-left: -0.5em;
+}
+
+#controls content[select='paper-button']::content :last-child {
+  margin-right: -0.5em;
+}
+
+#controls content[select='paper-button']::content :not(:last-child) {
+  margin-right: 1em;
+}
+
+:host(.split) #controls content[select='paper-button']::content
+    :last-child {
+  color: rgb(15, 157, 88);
+}
+
+content::content paper-button[disabled] {
+  /* In Polymer 0.3 disabled button 'background-color' defined with '!important'
+   * flag, so we need '!important' here to override it.
+   * TODO(dzhioev): remove '!important' when Polymer is updated.
+   */
+  background: transparent !important;
+}
+