simplePagination.css 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. /**
  2. * CSS themes for simplePagination.js
  3. * Author: Flavius Matis - http://flaviusmatis.github.com/
  4. * URL: https://github.com/flaviusmatis/simplePagination.js
  5. */
  6. ul.simple-pagination {
  7. list-style: none;
  8. }
  9. .simple-pagination {
  10. display: block;
  11. overflow: hidden;
  12. padding: 0 5px 5px 0;
  13. margin: 0;
  14. }
  15. .simple-pagination ul {
  16. list-style: none;
  17. padding: 0;
  18. margin: 0;
  19. }
  20. .simple-pagination li {
  21. list-style: none;
  22. padding: 0;
  23. margin: 0;
  24. float: left;
  25. }
  26. span.ellipse.clickable {
  27. cursor: pointer;
  28. }
  29. .ellipse input {
  30. width: 3em;
  31. }
  32. /*------------------------------------*\
  33. Compact Theme Styles
  34. \*------------------------------------*/
  35. .compact-theme span {
  36. cursor:pointer;
  37. }
  38. .compact-theme a, .compact-theme span {
  39. float: left;
  40. color: #333;
  41. font-size:14px;
  42. line-height:24px;
  43. font-weight: normal;
  44. text-align: center;
  45. border: 1px solid #AAA;
  46. border-left: none;
  47. min-width: 14px;
  48. padding: 0 7px;
  49. box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
  50. background: #efefef; /* Old browsers */
  51. background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%); /* FF3.6+ */
  52. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
  53. background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */
  54. background: -o-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Opera11.10+ */
  55. background: -ms-linear-gradient(top, #ffffff 0%,#efefef 100%); /* IE10+ */
  56. background: linear-gradient(top, #ffffff 0%,#efefef 100%); /* W3C */
  57. }
  58. .compact-theme a:hover, .compact-theme li:not(.disabled):not(.active) span:hover {
  59. text-decoration: none;
  60. background: #efefef; /* Old browsers */
  61. background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); /* FF3.6+ */
  62. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#bbbbbb)); /* Chrome,Safari4+ */
  63. background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* Chrome10+,Safari5.1+ */
  64. background: -o-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* Opera11.10+ */
  65. background: -ms-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* IE10+ */
  66. background: linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* W3C */
  67. }
  68. .compact-theme li:first-child a, .compact-theme li:first-child span {
  69. border-left: 1px solid #AAA;
  70. border-radius: 3px 0 0 3px;
  71. }
  72. .compact-theme li:last-child a, .compact-theme li:last-child span {
  73. border-radius: 0 3px 3px 0;
  74. }
  75. .compact-theme .current {
  76. background: #bbbbbb; /* Old browsers */
  77. background: -moz-linear-gradient(top, #bbbbbb 0%, #efefef 100%); /* FF3.6+ */
  78. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbbbbb), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
  79. background: -webkit-linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */
  80. background: -o-linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* Opera11.10+ */
  81. background: -ms-linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* IE10+ */
  82. background: linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* W3C */
  83. cursor: default;
  84. }
  85. .compact-theme .ellipse {
  86. background: #EAEAEA;
  87. padding: 0 10px;
  88. cursor: default;
  89. }
  90. /*------------------------------------*\
  91. Light Theme Styles
  92. \*------------------------------------*/
  93. .light-theme span {
  94. cursor:pointer;
  95. }
  96. .light-theme a, .light-theme span {
  97. float: left;
  98. color: #666;
  99. font-size:14px;
  100. line-height:24px;
  101. font-weight: normal;
  102. text-align: center;
  103. border: 1px solid #BBB;
  104. min-width: 14px;
  105. padding: 0 7px;
  106. margin: 0 5px 0 0;
  107. border-radius: 3px;
  108. box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  109. background: #efefef; /* Old browsers */
  110. background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%); /* FF3.6+ */
  111. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
  112. background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */
  113. background: -o-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Opera11.10+ */
  114. background: -ms-linear-gradient(top, #ffffff 0%,#efefef 100%); /* IE10+ */
  115. background: linear-gradient(top, #ffffff 0%,#efefef 100%); /* W3C */
  116. }
  117. .light-theme a:hover, .light-theme li:not(.disabled):not(.active) span:hover {
  118. text-decoration: none;
  119. background: #FCFCFC;
  120. }
  121. .light-theme .current {
  122. background: #666;
  123. color: #FFF;
  124. border-color: #444;
  125. box-shadow: 0 1px 0 rgba(255,255,255,1), 0 0 2px rgba(0, 0, 0, 0.3) inset;
  126. cursor: default;
  127. }
  128. .light-theme .ellipse {
  129. background: none;
  130. border: none;
  131. border-radius: 0;
  132. box-shadow: none;
  133. font-weight: bold;
  134. cursor: default;
  135. }
  136. /*------------------------------------*\
  137. Dark Theme Styles
  138. \*------------------------------------*/
  139. .dark-theme span {
  140. cursor:pointer;
  141. }
  142. .dark-theme a, .dark-theme span {
  143. float: left;
  144. color: #CCC;
  145. font-size:14px;
  146. line-height:24px;
  147. font-weight: normal;
  148. text-align: center;
  149. border: 1px solid #222;
  150. min-width: 14px;
  151. padding: 0 7px;
  152. margin: 0 5px 0 0;
  153. border-radius: 3px;
  154. box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  155. background: #555; /* Old browsers */
  156. background: -moz-linear-gradient(top, #555 0%, #333 100%); /* FF3.6+ */
  157. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555), color-stop(100%,#333)); /* Chrome,Safari4+ */
  158. background: -webkit-linear-gradient(top, #555 0%,#333 100%); /* Chrome10+,Safari5.1+ */
  159. background: -o-linear-gradient(top, #555 0%,#333 100%); /* Opera11.10+ */
  160. background: -ms-linear-gradient(top, #555 0%,#333 100%); /* IE10+ */
  161. background: linear-gradient(top, #555 0%,#333 100%); /* W3C */
  162. }
  163. .dark-theme a:hover, .dark-theme li:not(.disabled):not(.active) span:hover {
  164. text-decoration: none;
  165. background: #444;
  166. }
  167. .dark-theme .current {
  168. background: #222;
  169. color: #FFF;
  170. border-color: #000;
  171. box-shadow: 0 1px 0 rgba(255,255,255,0.2), 0 0 1px 1px rgba(0, 0, 0, 0.1) inset;
  172. cursor: default;
  173. }
  174. .dark-theme .ellipse {
  175. background: none;
  176. border: none;
  177. border-radius: 0;
  178. box-shadow: none;
  179. font-weight: bold;
  180. cursor: default;
  181. }