You are here

craft.css in Fivestar 5

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

/**
 * 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: url(craft-01.png) no-repeat 0 -62px;
}
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: url(craft-02.png) no-repeat 0 -62px;
}
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: url(craft-03.png) no-repeat 0 -62px;
}
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: url(craft-04.png) no-repeat 0 -62px;
}
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: url(craft-05.png) no-repeat 0 -62px;
}
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: url(craft-06.png) no-repeat 0 -62px;
}
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: url(craft-07.png) no-repeat 0 -62px;
}
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: url(craft-08.png) no-repeat 0 -62px;
}
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: url(craft-09.png) no-repeat 0 -62px;
}
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: url(craft-10.png) no-repeat 0 -62px;
}

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