Prettier progress bars.

2 files changed, 82 insertions, 59 deletions

diff --git a/css/profile.css b/css/achievements.css
index 3adf15e..24fd034 100644
--- a/css/profile.css
+++ b/css/achievements.css
@@ -1,56 +1,79 @@
-

-

-@keyframes badgeAnimate

-{

-0%   {transform: rotate(-90deg);}

-80% {transform: rotate(10deg);}

-95% {transform: rotate(-4deg);}

-97% {transform: rotate(1deg);}

-99% {transform: rotate(-1deg);}

-100% {transform: rotate(0deg);}

-}

-@-moz-keyframes badgeAnimate /* Firefox */

-{

-0%   {-moz-transform: rotate(-90deg);}

-80% {-moz-transform: rotate(10deg);}

-95% {-moz-transform: rotate(-4deg);}

-97% {-moz-transform: rotate(1deg);}

-99% {-moz-transform: rotate(-1deg);}

-100% {-moz-transform: rotate(0deg);}

-}

-@-o-keyframes badgeAnimate /* Opera */

-{

-0%   {-o-transform: rotate(-90deg);}

-80% {-o-transform: rotate(10deg);}

-95% {-o-transform: rotate(-4deg);}

-97% {-o-transform: rotate(1deg);}

-99% {-o-transform: rotate(-1deg);}

-100% {-o-transform: rotate(0deg);}

-}

-@-webkit-keyframes badgeAnimate /* Safari and Chrome */

-{

-0%   {-webkit-transform: rotate(-90deg);}

-90% {-webkit-transform: rotate(8deg);}

-95% {-webkit-transform: rotate(-4deg);}

-97% {-webkit-transform: rotate(1deg);}

-99% {-webkit-transform: rotate(-1deg);}

-100% {-webkit-transform: rotate(0deg);}

-}

-

-.badge

-{

-	animation: badgeAnimate 1s linear;

-	-moz-animation: badgeAnimate 1s linear; /* Firefox */

-	-o-animation: badgeAnimate 1s linear;  /* Opera */

-	-webkit-animation: badgeAnimate 1s linear; /* Safari and Chrome */

-

-	width:45px;

-	height:45px;

-	background-color: #666666;

-	background-size:100%;

-	padding: 1px 1px;

-	border-radius: 5px;

-	text-decoration: none;

-	border: 2px solid #888;

-	box-shadow: 0 0 3px #445;

+
+.progressBar {
+	align:left;
+	width:310px;
+	height:16px;
+	background-color:#222;
+	border:1px solid #26b;
+	border-radius: 0px 6px 6px 0px;
+}
+
+.progressBar div {
+	border-right:1px solid #37e;
+	height:16px;
+	border-radius: 0px 6px 6px 0px;
+	background: #1e5799; /* Old browsers */
+	background: -moz-linear-gradient(45deg,  #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(45deg,  #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(45deg,  #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(45deg,  #1e5799 0%,#7db9e8 100%); /* IE10+ */
+	background: linear-gradient(45deg,  #1e5799 0%,#7db9e8 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+}
+
+
+@keyframes badgeAnimate
+{
+0%   {transform: rotate(-90deg);}
+80% {transform: rotate(10deg);}
+95% {transform: rotate(-4deg);}
+97% {transform: rotate(1deg);}
+99% {transform: rotate(-1deg);}
+100% {transform: rotate(0deg);}
+}
+@-moz-keyframes badgeAnimate /* Firefox */
+{
+0%   {-moz-transform: rotate(-90deg);}
+80% {-moz-transform: rotate(10deg);}
+95% {-moz-transform: rotate(-4deg);}
+97% {-moz-transform: rotate(1deg);}
+99% {-moz-transform: rotate(-1deg);}
+100% {-moz-transform: rotate(0deg);}
+}
+@-o-keyframes badgeAnimate /* Opera */
+{
+0%   {-o-transform: rotate(-90deg);}
+80% {-o-transform: rotate(10deg);}
+95% {-o-transform: rotate(-4deg);}
+97% {-o-transform: rotate(1deg);}
+99% {-o-transform: rotate(-1deg);}
+100% {-o-transform: rotate(0deg);}
+}
+@-webkit-keyframes badgeAnimate /* Safari and Chrome */
+{
+0%   {-webkit-transform: rotate(-90deg);}
+90% {-webkit-transform: rotate(8deg);}
+95% {-webkit-transform: rotate(-4deg);}
+97% {-webkit-transform: rotate(1deg);}
+99% {-webkit-transform: rotate(-1deg);}
+100% {-webkit-transform: rotate(0deg);}
+}
+
+.badge
+{
+	animation: badgeAnimate 1s linear;
+	-moz-animation: badgeAnimate 1s linear; /* Firefox */
+	-o-animation: badgeAnimate 1s linear;  /* Opera */
+	-webkit-animation: badgeAnimate 1s linear; /* Safari and Chrome */
+
+	width:45px;
+	height:45px;
+	background-color: #666666;
+	background-size:100%;
+	padding: 1px 1px;
+	border-radius: 5px;
+	text-decoration: none;
+	border: 2px solid #888;
+	box-shadow: 0 0 3px #445;
 }
\ No newline at end of file
diff --git a/pages/achievements.php b/pages/achievements.php
index 6717cbe..249077c 100644
--- a/pages/achievements.php
+++ b/pages/achievements.php
@@ -1,5 +1,5 @@
 <?php

-htmlHeader(array('profile'), 'Pathery Achievements');

+htmlHeader(array('achievements'), 'Pathery Achievements');

 ?>

 

 <body>

@@ -533,9 +533,9 @@ foreach($achievements as $aType => $a) {
 	echo "Last level earned $aCompleted";

 	echo "<br />Currently $pronoun $nUCurrent $currency";

 	echo "

-	<div title='$percent% to $nRequired' style='align:left;width:210px;height:16px;background-color:#222;border:1px solid #26b;'> 

-	<div style='border-right:1px solid #37e;width:$percent%;height:16px;background-color:#26b;'>

-	</div>

+	<div class='progressBar' title='$percent% to $nRequired'> 

+		<div style='width:$percent%;'>

+		</div>

 	</div>

 	";

 	echo "Next level at $nRequired will unlock: ";