You are here

craft.css in Fivestar 6

/**
 * Settings for all stars.
 */
div.fivestar-widget-static .star,
div.fivestar-widget .star,
div.fivestar-widget div.on a {
  height: 31px;
}

div.fivestar-widget .star,
div.fivestar-widget .star a,
div.fivestar-widget-static .star,
div.fivestar-widget-static .star span.on {
  background: no-repeat 0 -62px;
}

/**
 * Unique default setting for each star.
 */
div.fivestar-widget .star-1,
div.fivestar-widget .star-1 a,
div.fivestar-widget-static .star-1,
div.fivestar-widget-static .star-1 span.on {
  width: 8px;
  background-image: url(craft-01.png);
}
div.fivestar-widget .star-2,
div.fivestar-widget .star-2 a,
div.fivestar-widget-static .star-2,
div.fivestar-widget-static .star-2 span.on {
  width: 9px;
  background-image: url(craft-02.png);
}
div.fivestar-widget .star-3,
div.fivestar-widget .star-3 a,
div.fivestar-widget-static .star-3,
div.fivestar-widget-static .star-3 span.on {
  width: 9px;
  background-image: url(craft-03.png);
}
div.fivestar-widget .star-4,
div.fivestar-widget .star-4 a,
div.fivestar-widget-static .star-4,
div.fivestar-widget-static .star-4 span.on {
  width: 10px;
  background-image: url(craft-04.png);
}
div.fivestar-widget .star-5,
div.fivestar-widget .star-5 a,
div.fivestar-widget-static .star-5,
div.fivestar-widget-static .star-5 span.on {
  width: 10px;
  background-image: url(craft-05.png);
}
div.fivestar-widget .star-6,
div.fivestar-widget .star-6 a,
div.fivestar-widget-static .star-6,
div.fivestar-widget-static .star-6 span.on {
  width: 12px;
  background-image: url(craft-06.png);
}
div.fivestar-widget .star-7,
div.fivestar-widget .star-7 a,
div.fivestar-widget-static .star-7,
div.fivestar-widget-static .star-7 span.on {
  width: 15px;
  background-image: url(craft-07.png);
}
div.fivestar-widget .star-8,
div.fivestar-widget .star-8 a,
div.fivestar-widget-static .star-8,
div.fivestar-widget-static .star-8 span.on {
  width: 16px;
  background-image: url(craft-08.png);
}
div.fivestar-widget .star-9,
div.fivestar-widget .star-9 a,
div.fivestar-widget-static .star-9,
div.fivestar-widget-static .star-9 span.on {
  width: 22px;
  background-image: url(craft-09.png);
}
div.fivestar-widget .star-10,
div.fivestar-widget .star-10 a,
div.fivestar-widget-static .star-10,
div.fivestar-widget-static .star-10 span.on {
  width: 27px;
  background-image: url(craft-10.png);
}

/**
 * Some specific settings for the 5-star count version.
 */
div.fivestar-widget-5 .star-2,
div.fivestar-widget-5 .star-2 a,
div.fivestar-widget-static-5 .star-2,
div.fivestar-widget-static-5 .star-2 span.on {
  width: 9px;
  background-image: url(craft-03.png);
}
div.fivestar-widget-5 .star-3,
div.fivestar-widget-5 .star-3 a,
div.fivestar-widget-static-5 .star-3,
div.fivestar-widget-static-5 .star-3 span.on {
  width: 15px;
  background-image: url(craft-07.png);
}
div.fivestar-widget-5 .star-4,
div.fivestar-widget-5 .star-4 a,
div.fivestar-widget-static-5 .star-4,
div.fivestar-widget-static-5 .star-4 span.on {
  width: 16px;
  background-image: url(craft-08.png);
}
div.fivestar-widget-5 .star-5,
div.fivestar-widget-5 .star-5 a,
div.fivestar-widget-static-5 .star-5,
div.fivestar-widget-static-5 .star-5 span.on {
  width: 27px;
  background-image: url(craft-10.png);
}


/**
 * Dynamic rollovers.
 */
div.fivestar-widget-static .star span.on,
div.fivestar-widget-static .star span.on a,
div.fivestar-widget div.on a {
  background-position: 0 0;
}
div.fivestar-widget div.hover a,
div.rating div a:hover {
  background-position: 0 -31px;
}
div.fivestar-widget-static .star span.off {
  background-position: 0 -62px;
}

/**
 * Cancel button.
 */
div.fivestar-widget .cancel,
div.fivestar-widget .cancel a {
  width: 9px;
  height: 31px;
  background: url(craft-cancel.png) no-repeat 0 0;
}
div.fivestar-widget .cancel a:hover {
  width: 9px;
  height: 31px;
  background-position: 0 -31px;
}

File

widgets/craft/craft.css
View source
  1. /**
  2. * Settings for all stars.
  3. */
  4. div.fivestar-widget-static .star,
  5. div.fivestar-widget .star,
  6. div.fivestar-widget div.on a {
  7. height: 31px;
  8. }
  9. div.fivestar-widget .star,
  10. div.fivestar-widget .star a,
  11. div.fivestar-widget-static .star,
  12. div.fivestar-widget-static .star span.on {
  13. background: no-repeat 0 -62px;
  14. }
  15. /**
  16. * Unique default setting for each star.
  17. */
  18. div.fivestar-widget .star-1,
  19. div.fivestar-widget .star-1 a,
  20. div.fivestar-widget-static .star-1,
  21. div.fivestar-widget-static .star-1 span.on {
  22. width: 8px;
  23. background-image: url(craft-01.png);
  24. }
  25. div.fivestar-widget .star-2,
  26. div.fivestar-widget .star-2 a,
  27. div.fivestar-widget-static .star-2,
  28. div.fivestar-widget-static .star-2 span.on {
  29. width: 9px;
  30. background-image: url(craft-02.png);
  31. }
  32. div.fivestar-widget .star-3,
  33. div.fivestar-widget .star-3 a,
  34. div.fivestar-widget-static .star-3,
  35. div.fivestar-widget-static .star-3 span.on {
  36. width: 9px;
  37. background-image: url(craft-03.png);
  38. }
  39. div.fivestar-widget .star-4,
  40. div.fivestar-widget .star-4 a,
  41. div.fivestar-widget-static .star-4,
  42. div.fivestar-widget-static .star-4 span.on {
  43. width: 10px;
  44. background-image: url(craft-04.png);
  45. }
  46. div.fivestar-widget .star-5,
  47. div.fivestar-widget .star-5 a,
  48. div.fivestar-widget-static .star-5,
  49. div.fivestar-widget-static .star-5 span.on {
  50. width: 10px;
  51. background-image: url(craft-05.png);
  52. }
  53. div.fivestar-widget .star-6,
  54. div.fivestar-widget .star-6 a,
  55. div.fivestar-widget-static .star-6,
  56. div.fivestar-widget-static .star-6 span.on {
  57. width: 12px;
  58. background-image: url(craft-06.png);
  59. }
  60. div.fivestar-widget .star-7,
  61. div.fivestar-widget .star-7 a,
  62. div.fivestar-widget-static .star-7,
  63. div.fivestar-widget-static .star-7 span.on {
  64. width: 15px;
  65. background-image: url(craft-07.png);
  66. }
  67. div.fivestar-widget .star-8,
  68. div.fivestar-widget .star-8 a,
  69. div.fivestar-widget-static .star-8,
  70. div.fivestar-widget-static .star-8 span.on {
  71. width: 16px;
  72. background-image: url(craft-08.png);
  73. }
  74. div.fivestar-widget .star-9,
  75. div.fivestar-widget .star-9 a,
  76. div.fivestar-widget-static .star-9,
  77. div.fivestar-widget-static .star-9 span.on {
  78. width: 22px;
  79. background-image: url(craft-09.png);
  80. }
  81. div.fivestar-widget .star-10,
  82. div.fivestar-widget .star-10 a,
  83. div.fivestar-widget-static .star-10,
  84. div.fivestar-widget-static .star-10 span.on {
  85. width: 27px;
  86. background-image: url(craft-10.png);
  87. }
  88. /**
  89. * Some specific settings for the 5-star count version.
  90. */
  91. div.fivestar-widget-5 .star-2,
  92. div.fivestar-widget-5 .star-2 a,
  93. div.fivestar-widget-static-5 .star-2,
  94. div.fivestar-widget-static-5 .star-2 span.on {
  95. width: 9px;
  96. background-image: url(craft-03.png);
  97. }
  98. div.fivestar-widget-5 .star-3,
  99. div.fivestar-widget-5 .star-3 a,
  100. div.fivestar-widget-static-5 .star-3,
  101. div.fivestar-widget-static-5 .star-3 span.on {
  102. width: 15px;
  103. background-image: url(craft-07.png);
  104. }
  105. div.fivestar-widget-5 .star-4,
  106. div.fivestar-widget-5 .star-4 a,
  107. div.fivestar-widget-static-5 .star-4,
  108. div.fivestar-widget-static-5 .star-4 span.on {
  109. width: 16px;
  110. background-image: url(craft-08.png);
  111. }
  112. div.fivestar-widget-5 .star-5,
  113. div.fivestar-widget-5 .star-5 a,
  114. div.fivestar-widget-static-5 .star-5,
  115. div.fivestar-widget-static-5 .star-5 span.on {
  116. width: 27px;
  117. background-image: url(craft-10.png);
  118. }
  119. /**
  120. * Dynamic rollovers.
  121. */
  122. div.fivestar-widget-static .star span.on,
  123. div.fivestar-widget-static .star span.on a,
  124. div.fivestar-widget div.on a {
  125. background-position: 0 0;
  126. }
  127. div.fivestar-widget div.hover a,
  128. div.rating div a:hover {
  129. background-position: 0 -31px;
  130. }
  131. div.fivestar-widget-static .star span.off {
  132. background-position: 0 -62px;
  133. }
  134. /**
  135. * Cancel button.
  136. */
  137. div.fivestar-widget .cancel,
  138. div.fivestar-widget .cancel a {
  139. width: 9px;
  140. height: 31px;
  141. background: url(craft-cancel.png) no-repeat 0 0;
  142. }
  143. div.fivestar-widget .cancel a:hover {
  144. width: 9px;
  145. height: 31px;
  146. background-position: 0 -31px;
  147. }