From 053b4093cd0c946af0ab5a07a5f4a95d25f3af56 Mon Sep 17 00:00:00 2001
From: Patrick Davison <snapwilliam@gmail.com>
Date: Sun, 24 Feb 2013 03:41:34 -0800
Subject: Prettier progress bars.

---
 css/achievements.css   | 79 ++++++++++++++++++++++++++++++++++++++++++++++++++
 css/profile.css        | 56 -----------------------------------
 pages/achievements.php |  8 ++---
 3 files changed, 83 insertions(+), 60 deletions(-)
 create mode 100644 css/achievements.css
 delete mode 100644 css/profile.css

diff --git a/css/achievements.css b/css/achievements.css
new file mode 100644
index 0000000..24fd034
--- /dev/null
+++ b/css/achievements.css
@@ -0,0 +1,79 @@
+
+.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/css/profile.css b/css/profile.css
deleted file mode 100644
index 3adf15e..0000000
--- a/css/profile.css
+++ /dev/null
@@ -1,56 +0,0 @@
-
-
-@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: ";
-- 
cgit v1.2.3