Introduce new bot-page UI

appengine/swarming/elements/res/imp/common/swarming-app.html

Index: appengine/swarming/elements/res/imp/common/swarming-app.html
diff --git a/appengine/swarming/elements/res/imp/common/swarming-app.html b/appengine/swarming/elements/res/imp/common/swarming-app.html
index 96964dc40d89de7ccfedb981f8f514c938ebf3cc..89c13185fe36fc2f3616745da5551f02277fa3e2 100644
--- a/appengine/swarming/elements/res/imp/common/swarming-app.html
+++ b/appengine/swarming/elements/res/imp/common/swarming-app.html
@@ -183,5 +183,80 @@
       a[href] {
         color: #1F78B4;
       }
+
+      /*
+       * A set of styles to make buttons and select/options look more Material
+       * Design-ish.
+       */
+      button {
+        min-width: 5.14em;
+        background-color: #fff;
+        color: #1f78b4;
+        text-align: center;
+        text-transform: uppercase;
+        outline: none;
+        border-radius: 3px;
+        padding: 0.6em 1.2em;
+        border: solid lightgray 1px;
+        margin: 0.6em;
+      }
+
+      button:hover {
+        background: #eee;
+      }
+
+      button:focus {
+        background-color: #ddd;
+        transition: background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      button:active,
+      button.raised:active {
+        background-color: #999;
+        transition: background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      button:disabled {
+        color: #999;
+      }
+
+      button.action:active {
+        background-color: #A6CEE3;
+        transition: background-color 0.1s color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      button.action {
+        color: white;
+        background: #1f78b4;
+        border: none;
+      }
+
+      button.action:disabled {
+        color: white;
+        background: #999;
+        border: none;
+      }
+
+      button.raised {
+        transition: box-shadow 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: 5px 5px 18px 0 rgba(0, 0, 0, 0.3);
+      }
+
+      button.raised:active {
+        box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.1);
+      }
+
+      select,
+      option {
+        padding: 0.4em 1.2em;
+        background-color: white;
+        border: none;
+        line-height: 20px;
+        vertical-align: middle;
+      }
+
+      select {
+        overflow-y: auto;
+      }
   </style>
 </dom-module>