pagination styling

views/search/anime.html.php

@@ -1,3 +1,6 @@
+<?php
+$this->styles($this->html->style('pagination'));
+?>
 
 <div class="container_12">
 <div class="grid_4">
@@ -24,4 +27,4 @@
 <?=$this->Paginator->paginate(array('separator' => '', 'action' => 'index/anime')); ?>
 </div>
 <br class="cl">
-</div>
+</div>

views/search/index.html.php

@@ -1,4 +1,5 @@
 <?php 
+$this->styles($this->html->style('pagination'));
 
 //table helper
 function table($data, array $headers = array(), array $options = array()) {
@@ -47,4 +48,4 @@ function table($data, array $headers = array(), array $options = array()) {
 <?=$this->Paginator->paginate(array('separator' => '', 'action' => 'index/anime')); ?>
 </div>
 <br class="cl">
-</div>
+</div>

webroot/css/base.css

@@ -344,35 +344,6 @@ div#login label, input {
 	margin-right:10px;
 }
 
-.pagination {
-	display: inline-block;
-	font-size: 77%;
-	text-decoration: none;
-}
-.pagination a, .pagination .dots {
-	background:url("../img/grad-grey.gif") repeat-x scroll center top #C3C3C3;
-	border:1px solid #C3C3C3;
-	display: inline-block;
-	color:#444444 !important;
-	margin-right: 2px;
-	padding: 6px 8px;
-	text-decoration:none;
-	-moz-border-radius: 3px;
-	-webkit-border-radius: 3px;
-	border-radius: 3px;
-}
-.pagination a:hover {
-	background: url("../img/grad-grey-hover.gif") repeat-x scroll center top #C3C3C3;
-	color: #444444;
-}
-.pagination a.current {
-	background: url("../img/grad-grey-rev.gif") repeat-x scroll center top #C3C3C3;
-	color: #444444;
-}
-.pagination a.number.current {
-	color: #444;
-}
-
 .table {
 	border:1px solid #CCCCCC;
 	width:100%;

webroot/css/pagination.css

@@ -0,0 +1,39 @@
+.pagination {
+	font-size: 80%;
+	text-decoration: none;
+	margin: 15px auto;
+	width: 800px;
+	text-align: center;
+}
+.pagination a, .pagination .dots, .pagination span.disabled {
+	box-shadow: 0 0 1px #ddd;
+	border: 1px solid #ccc;
+	display: inline-block;
+	color: #444;
+	margin-right: 3px;
+	padding: 6px 8px;
+	text-decoration: none;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+}
+.pagination a, .pagination .dots {
+	background: #ccc;
+	background: -moz-linear-gradient(top, #eee, #ddd);
+	background: -webkit-linear-gradient(top, #eee, #ddd);
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd');
+	text-shadow: 0 0 2px #bbb;
+}
+.pagination span.disabled {
+	cursor: default;
+	text-shadow: 0 0 1px #ddd;
+}
+.pagination a:hover {
+	background: #ddd;
+}
+.pagination a.current {
+	background: #ccc;
+	background: -moz-linear-gradient(top, #bbb, #ddd);
+	background: -webkit-linear-gradient(top, #eee, #ddd);
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd');
+}