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;

[Nikita (slow), 2014/10/13 17:23:40]

nit: how about having a single common set of rules for fonts?

[dzhioev (left Google), 2014/10/15 14:07:42]

What do you mean by single set of rules? 

[Nikita (slow), 2014/10/15 14:38:38]

There're several css rules that use font-weight 300/500.

I was suggesting introducing css rules like
.font-light {
  font-weight: 300;
}

.font-medium {
  font-weight: 500;
}

Does this sound applicable here or not?

[dzhioev (left Google), 2014/10/16 21:27:58]

I want to isolate all the page's decoration inside controller_pairing_page.css
But if we use suggested 'font-*' classes, we need to set them on elements
definition which happens outside of <controller-pairing-page>. If we do so, we
implicitly make an assumptions on how <controller-pairing-page> decoration
works, which is not good (for example it makes changes in
'controller-pairing-page' styling harder).

+}
+
+/* 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;

[Nikita (slow), 2014/10/13 17:23:40]

RTL

[dzhioev (left Google), 2014/10/15 14:07:42]

Created an issued and added TODO.

+  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;

[Nikita (slow), 2014/10/13 17:23:40]

RTL

[dzhioev (left Google), 2014/10/15 14:07:42]

ditto

+}
+
+#controls content[select='paper-button']::content :last-child {
+  margin-right: -0.5em;

[Nikita (slow), 2014/10/13 17:23:40]

RTL

[dzhioev (left Google), 2014/10/15 14:07:42]

ditto

+}
+
+#controls content[select='paper-button']::content :not(:last-child) {
+  margin-right: 1em;

[Nikita (slow), 2014/10/13 17:23:40]

RTL

[dzhioev (left Google), 2014/10/15 14:07:42]

ditto

+}
+
+: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;
+}
+