Use same throbber styles as Spartacus (bug 1066100)

mozilla · Sep 24, 2014 · 2278231 · 2278231
1 parent 29e922f
commit 2278231
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 35 deletions.
diff --git a/media/images/throbber-53.gif b/media/images/throbber-53.gif
diff --git a/media/images/throbber.png b/media/images/throbber.png
diff --git a/media/stylus/_throbber.styl b/media/stylus/_throbber.styl
@@ -1,55 +1,29 @@
 .throbber {
+    // This will normally be overlaid hence it needs it's own background.
     background: rgba(244, 244, 244, 0.9);
     bottom: 0;
-    min-height: 100%;
+    grain();
     left: 0;
-    padding-top: 90px;
+    padding-top: 80px;
     position: fixed;
     right: 0;
     top: 0;
-    width: 100%;
+    z-index: 10;
 
     &:before {
-        // embedurl will embed as base64.
-        background-image: embedurl('throbber.png');
+        background: transparent embedurl('throbber-53.gif') no-repeat 50% 50%;
         content: '';
         display: block;
+        height: 53px;
         margin: 0 auto;
-        width: 50px;
-        height: 50px;
-        animation(unquote('.9s spin infinite linear'));
+        width: 53px;
     }
+
     span {
         display: block;
+        margin-top: 1em;
         margin: 0 auto;
         max-width: 320px;
         text-align: center;
-        margin-top: 1em;
-    }
-}
-
-@-webkit-keyframes spin {
-    from {
-        -webkit-transform: rotate(0deg);
-    }
-    to {
-        -webkit-transform: rotate(365deg);
     }
 }
-@-moz-keyframes spin {
-    from {
-        -moz-transform: rotate(0deg);
-    }
-    to {
-        -moz-transform: rotate(365deg);
-    }
-}
-@keyframes spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(365deg);
-    }
-}
-
diff --git a/templates/base.html b/templates/base.html
@@ -2,6 +2,7 @@
 <html lang="{% if lang %}{{ lang }}{% else %}en-us{% endif %}" dir="{% if lang_dir %}{{ lang_dir }}{% else %}ltr{% endif %}">
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
   <title>{% block title %}{{ title }}{% endblock %}</title>
   {% block style %}<link rel="stylesheet" href="/css/docs.css">{% endblock %}
 </head>