You are here

Home » API reference » Fivestar 7.2

craft.css in Fivestar 7.2

Same filename and directory in other branches
  1. 8 widgets/craft/craft.css
  2. 5 widgets/craft/craft.css
  3. 6.2 widgets/craft/craft.css
  4. 6 widgets/craft/craft.css
/**
 * Settings for all stars.
 */
.fivestar-craft div.fivestar-widget-static .star,
.fivestar-craft div.fivestar-widget .star,
.fivestar-craft div.fivestar-widget div.on a {
  height: 31px;
}

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

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


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

/**
 * Cancel button.
 */
.fivestar-craft div.fivestar-widget .cancel,
.fivestar-craft div.fivestar-widget .cancel a {
  width: 9px;
  height: 31px;
  background: url(craft-cancel.png) no-repeat 0 0;
}
.fivestar-craft 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. .fivestar-craft div.fivestar-widget-static .star,

  5. .fivestar-craft div.fivestar-widget .star,

  6. .fivestar-craft div.fivestar-widget div.on a {

  7.   height: 31px;

  8. }

  9. 

  10. .fivestar-craft div.fivestar-widget .star,

  11. .fivestar-craft div.fivestar-widget .star a,

  12. .fivestar-craft div.fivestar-widget-static .star,

  13. .fivestar-craft div.fivestar-widget-static .star span.on {

  14.   background: no-repeat 0 -62px;

  15. }

  16. 

  17. /**

  18.  * Unique default setting for each star.

  19.  */

  20. .fivestar-craft div.fivestar-widget .star-1,

  21. .fivestar-craft div.fivestar-widget .star-1 a,

  22. .fivestar-craft div.fivestar-widget-static .star-1,

  23. .fivestar-craft div.fivestar-widget-static .star-1 span.on {

  24.   width: 8px;

  25.   background-image: url(craft-01.png);

  26. }

  27. .fivestar-craft div.fivestar-widget .star-2,

  28. .fivestar-craft div.fivestar-widget .star-2 a,

  29. .fivestar-craft div.fivestar-widget-static .star-2,

  30. .fivestar-craft div.fivestar-widget-static .star-2 span.on {

  31.   width: 9px;

  32.   background-image: url(craft-02.png);

  33. }

  34. .fivestar-craft div.fivestar-widget .star-3,

  35. .fivestar-craft div.fivestar-widget .star-3 a,

  36. .fivestar-craft div.fivestar-widget-static .star-3,

  37. .fivestar-craft div.fivestar-widget-static .star-3 span.on {

  38.   width: 9px;

  39.   background-image: url(craft-03.png);

  40. }

  41. .fivestar-craft div.fivestar-widget .star-4,

  42. .fivestar-craft div.fivestar-widget .star-4 a,

  43. .fivestar-craft div.fivestar-widget-static .star-4,

  44. .fivestar-craft div.fivestar-widget-static .star-4 span.on {

  45.   width: 10px;

  46.   background-image: url(craft-04.png);

  47. }

  48. .fivestar-craft div.fivestar-widget .star-5,

  49. .fivestar-craft div.fivestar-widget .star-5 a,

  50. .fivestar-craft div.fivestar-widget-static .star-5,

  51. .fivestar-craft div.fivestar-widget-static .star-5 span.on {

  52.   width: 10px;

  53.   background-image: url(craft-05.png);

  54. }

  55. .fivestar-craft div.fivestar-widget .star-6,

  56. .fivestar-craft div.fivestar-widget .star-6 a,

  57. .fivestar-craft div.fivestar-widget-static .star-6,

  58. .fivestar-craft div.fivestar-widget-static .star-6 span.on {

  59.   width: 12px;

  60.   background-image: url(craft-06.png);

  61. }

  62. .fivestar-craft div.fivestar-widget .star-7,

  63. .fivestar-craft div.fivestar-widget .star-7 a,

  64. .fivestar-craft div.fivestar-widget-static .star-7,

  65. .fivestar-craft div.fivestar-widget-static .star-7 span.on {

  66.   width: 15px;

  67.   background-image: url(craft-07.png);

  68. }

  69. .fivestar-craft div.fivestar-widget .star-8,

  70. .fivestar-craft div.fivestar-widget .star-8 a,

  71. .fivestar-craft div.fivestar-widget-static .star-8,

  72. .fivestar-craft div.fivestar-widget-static .star-8 span.on {

  73.   width: 16px;

  74.   background-image: url(craft-08.png);

  75. }

  76. .fivestar-craft div.fivestar-widget .star-9,

  77. .fivestar-craft div.fivestar-widget .star-9 a,

  78. .fivestar-craft div.fivestar-widget-static .star-9,

  79. .fivestar-craft div.fivestar-widget-static .star-9 span.on {

  80.   width: 22px;

  81.   background-image: url(craft-09.png);

  82. }

  83. .fivestar-craft div.fivestar-widget .star-10,

  84. .fivestar-craft div.fivestar-widget .star-10 a,

  85. .fivestar-craft div.fivestar-widget-static .star-10,

  86. .fivestar-craft div.fivestar-widget-static .star-10 span.on {

  87.   width: 27px;

  88.   background-image: url(craft-10.png);

  89. }

  90. 

  91. /**

  92.  * Some specific settings for the 5-star count version.

  93.  */

  94. .fivestar-craft div.fivestar-widget-5 .star-2,

  95. .fivestar-craft div.fivestar-widget-5 .star-2 a,

  96. .fivestar-craft div.fivestar-widget-static-5 .star-2,

  97. .fivestar-craft div.fivestar-widget-static-5 .star-2 span.on {

  98.   width: 9px;

  99.   background-image: url(craft-03.png);

  100. }

  101. .fivestar-craft div.fivestar-widget-5 .star-3,

  102. .fivestar-craft div.fivestar-widget-5 .star-3 a,

  103. .fivestar-craft div.fivestar-widget-static-5 .star-3,

  104. .fivestar-craft div.fivestar-widget-static-5 .star-3 span.on {

  105.   width: 15px;

  106.   background-image: url(craft-07.png);

  107. }

  108. .fivestar-craft div.fivestar-widget-5 .star-4,

  109. .fivestar-craft div.fivestar-widget-5 .star-4 a,

  110. .fivestar-craft div.fivestar-widget-static-5 .star-4,

  111. .fivestar-craft div.fivestar-widget-static-5 .star-4 span.on {

  112.   width: 16px;

  113.   background-image: url(craft-08.png);

  114. }

  115. .fivestar-craft div.fivestar-widget-5 .star-5,

  116. .fivestar-craft div.fivestar-widget-5 .star-5 a,

  117. .fivestar-craft div.fivestar-widget-static-5 .star-5,

  118. .fivestar-craft div.fivestar-widget-static-5 .star-5 span.on {

  119.   width: 27px;

  120.   background-image: url(craft-10.png);

  121. }

  122. 

  123. 

  124. /**

  125.  * Dynamic rollovers.

  126.  */

  127. .fivestar-craft div.fivestar-widget-static .star span.on,

  128. .fivestar-craft div.fivestar-widget-static .star span.on a,

  129. .fivestar-craft div.fivestar-widget div.on a {

  130.   background-position: 0 0;

  131. }

  132. .fivestar-craft div.fivestar-widget div.hover a,

  133. div.rating div a:hover {

  134.   background-position: 0 -31px;

  135. }

  136. .fivestar-craft div.fivestar-widget-static .star span.off {

  137.   background-position: 0 -62px;

  138. }

  139. 

  140. /**

  141.  * Cancel button.

  142.  */

  143. .fivestar-craft div.fivestar-widget .cancel,

  144. .fivestar-craft div.fivestar-widget .cancel a {

  145.   width: 9px;

  146.   height: 31px;

  147.   background: url(craft-cancel.png) no-repeat 0 0;

  148. }

  149. .fivestar-craft div.fivestar-widget .cancel a:hover {

  150.   width: 9px;

  151.   height: 31px;

  152.   background-position: 0 -31px;

  153. }