From 924e858b3a2a23b9e137851fc1c58488df73bd57 Mon Sep 17 00:00:00 2001
From: Sean Dague <sdague@linux.vnet.ibm.com>
Date: Sun, 11 Aug 2013 07:13:15 -0400
Subject: [PATCH] unified styling on progress bars

turns out, with much interesting difficulty, you can actually
style html5 progress bars accross browsers. Do this so that the
colors are more consistent with what's already on the page. This
makes things a bit less visually jarring than chromes default
progress bars which completely dominate the page.

Change-Id: I5815114fbb3703e84c0cd696b5a3f285146c9025
---
 .../openstack_project/files/zuul/status.html  | 61 +++++++++++++++++++
 1 file changed, 61 insertions(+)

diff --git a/modules/openstack_project/files/zuul/status.html b/modules/openstack_project/files/zuul/status.html
index 8f5c4597af..96d4e5e205 100644
--- a/modules/openstack_project/files/zuul/status.html
+++ b/modules/openstack_project/files/zuul/status.html
@@ -74,6 +74,67 @@ a:link {
     margin-top: 0.25em;
 }
 
+/** Theming for the progress bars to get them consisten across browers:
+      referenced from http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/
+*/
+
+progress,          /* All HTML5 progress enabled browsers */
+progress[role]     /* polyfill */
+{
+      /* Turns off styling - not usually needed, but good to know. */
+      appearance: none;
+      -moz-appearance: none;
+      -webkit-appearance: none;
+
+      /* gets rid of default border in Firefox and Opera. */
+      border: none;
+
+      /* Needs to be in here for Safari polyfill so background images work as expected. */
+      background-size: auto;
+}
+
+/* Polyfill */
+progress[role]:after {
+      background-image: none; /* removes default background from polyfill */
+}
+
+/* Ensure fallback text doesn't appear in polyfill */
+progress[role] strong {
+      display: none;
+}
+
+/** Background color */
+progress,                          /* Firefox  */
+progress[role][aria-valuenow] {    /* Polyfill */
+   background: #e6e6e6 !important; /* !important is needed by the polyfill */
+}
+
+/* Chrome */
+progress::-webkit-progress-bar {
+    background: #e6e6e6;
+}
+
+/** Foreground color */
+/* IE10 */
+progress {
+    color: #6b81a2;
+}
+
+/* Firefox */
+progress::-moz-progress-bar {
+    background: #6b81a2;
+}
+
+/* Chrome */
+progress::-webkit-progress-value {
+    background: #6b81a2;
+}
+
+/* Polyfill */
+progress[aria-valuenow]:before  {
+    background: #6b81a2;
+}
+
 </style>
 
     <TITLE>Zuul Status</TITLE>