Fix circle theme

CodeByZach · Oct 11, 2013 · 5c150a5 · 5c150a5
1 parent eb7e2bd
commit 5c150a5
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 25 deletions.
diff --git a/templates/pace-theme-center-circle.tmpl.css b/templates/pace-theme-center-circle.tmpl.css
@@ -30,16 +30,12 @@
 .pace .pace-progress {
   position: fixed;
   z-index: 2000;
-}
-
-.pace .pace-progress:after {
-  content: attr(data-progress-text);
   display: block;
   position: absolute;
   left: 0;
   top: 0;
   height: 6rem;
-  width: 6rem;
+  width: 6rem !important;
   line-height: 6rem;
   font-size: 2rem;
   border-radius: 50%;
@@ -62,6 +58,11 @@
   transform-style: preserve-3d;
 }
 
+.pace .pace-progress:after {
+  content: attr(data-progress-text);
+  display: block;
+}
+
 @-webkit-keyframes pace-3d-spinner {
   from {
     -webkit-transform: rotateY(0deg);
@@ -105,4 +106,4 @@
   to {
     transform: rotateY(360deg);
   }
-}
+}
diff --git a/tests/demo.html b/tests/demo.html
@@ -1,24 +1,13 @@
 <head>
-  <style>
-    .pace-progress {
-      position: absolute;
-      top: 0;
-      left: 0;
-      height: 3px;
-      background-color: #FFC01F;
-    }
-    .pace-inactive {
-      display: none;
-    }
-  </style>
+  <link rel="stylesheet" href="../themes/pace-theme-center-circle.css" />
 
   <script>
     paceOptions = {
       elements: false,
       restartOnRequestAfter: false
     };
   </script>
-  <script src="pace.js"></script>
+  <script src="../pace.js"></script>
   <script>
     function load(time){
       var x = new XMLHttpRequest()

diff --git a/themes/pace-theme-center-circle.css b/themes/pace-theme-center-circle.css
@@ -2,11 +2,17 @@
 .pace {
   -webkit-pointer-events: none;
   pointer-events: none;
+
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
 
   -webkit-perspective: 12rem;
+  -moz-perspective: 12rem;
+  -ms-perspective: 12rem;
+  -o-perspective: 12rem;
+  perspective: 12rem;
+
   z-index: 2000;
   position: fixed;
   height: 6rem;
@@ -25,16 +31,12 @@
 .pace .pace-progress {
   position: fixed;
   z-index: 2000;
-}
-
-.pace .pace-progress:after {
-  content: attr(data-progress-text);
   display: block;
   position: absolute;
   left: 0;
   top: 0;
   height: 6rem;
-  width: 6rem;
+  width: 6rem !important;
   line-height: 6rem;
   font-size: 2rem;
   border-radius: 50%;
@@ -57,6 +59,11 @@
   transform-style: preserve-3d;
 }
 
+.pace .pace-progress:after {
+  content: attr(data-progress-text);
+  display: block;
+}
+
 @-webkit-keyframes pace-3d-spinner {
   from {
     -webkit-transform: rotateY(0deg);
@@ -100,4 +107,4 @@
   to {
     transform: rotateY(360deg);
   }
-}
+}