You are here

fivestar.css in Fivestar 5

/* Plain HTML Version */
form.fivestar-widget {
  clear: both;
  display: block;
}
form.fivestar-widget select,
form.fivestar-widget input {
  margin: 0;
}

/* Combo Static and Rate Widget */
.fivestar-combo-stars .fivestar-static-form-item {
  float: left; /* RTL */
  margin-right: 40px; /* RTL */
}
.fivestar-combo-stars .fivestar-form-item {
  float: left; /* RTL */
}

/* Fivestar form items */
.fivestar-static-form-item .form-item,
.fivestar-form-item .form-item {
  margin: 0;
}

/* Static View-only Star Version */
div.fivestar-widget-static {
  display: block;
}

div.fivestar-widget-static br {
  clear: left; /* RTL */
}

div.fivestar-widget-static .star {
  float: left; /* RTL */
  width: 17px;
  height: 15px;
  overflow: hidden;
  text-indent: -999em;
  background: url(../widgets/default/star.gif) no-repeat 0 0px;
}

div.fivestar-widget-static .star span.on {
  display: block;
  width: 100%;
  height: 100%;
  background: url(../widgets/default/star.gif) no-repeat 0 -32px;
}

div.fivestar-widget-static .star span.off {
  display: block;
  width: 100%;
  height: 100%;
  background: url(../widgets/default/star.gif) no-repeat 0 0px;
}

/* Javascript Star Version */
div.fivestar-widget {
  display: block;
}

div.fivestar-widget .cancel, div.fivestar-widget .star {
  float: left; /* RTL */
  width: 17px;
  height: 15px;
  overflow: hidden;
  text-indent: -999em;
}
div.fivestar-widget .cancel, div.fivestar-widget .cancel a {
  background: url(../widgets/default/delete.gif) no-repeat 0 -16px;
  text-decoration: none;
}

div.fivestar-widget .star, div.fivestar-widget .star a {
  background: url(../widgets/default/star.gif) no-repeat 0 0px;
  text-decoration: none;
}

div.fivestar-widget .cancel a, div.fivestar-widget .star a {
  display: block;
  width: 100%;
  height: 100%;
  background-position: 0 0px;
  cursor: pointer;
}

div.fivestar-widget div.on a {
  background-position: 0 -16px;
}
div.fivestar-widget div.hover a, div.rating div a:hover {
  background-position: 0 -32px;
}
form.fivestar-widget div.description {
  margin-bottom: 0;
}

File

css/fivestar.css
View source
  1. /* Plain HTML Version */
  2. form.fivestar-widget {
  3. clear: both;
  4. display: block;
  5. }
  6. form.fivestar-widget select,
  7. form.fivestar-widget input {
  8. margin: 0;
  9. }
  10. /* Combo Static and Rate Widget */
  11. .fivestar-combo-stars .fivestar-static-form-item {
  12. float: left; /* RTL */
  13. margin-right: 40px; /* RTL */
  14. }
  15. .fivestar-combo-stars .fivestar-form-item {
  16. float: left; /* RTL */
  17. }
  18. /* Fivestar form items */
  19. .fivestar-static-form-item .form-item,
  20. .fivestar-form-item .form-item {
  21. margin: 0;
  22. }
  23. /* Static View-only Star Version */
  24. div.fivestar-widget-static {
  25. display: block;
  26. }
  27. div.fivestar-widget-static br {
  28. clear: left; /* RTL */
  29. }
  30. div.fivestar-widget-static .star {
  31. float: left; /* RTL */
  32. width: 17px;
  33. height: 15px;
  34. overflow: hidden;
  35. text-indent: -999em;
  36. background: url(../widgets/default/star.gif) no-repeat 0 0px;
  37. }
  38. div.fivestar-widget-static .star span.on {
  39. display: block;
  40. width: 100%;
  41. height: 100%;
  42. background: url(../widgets/default/star.gif) no-repeat 0 -32px;
  43. }
  44. div.fivestar-widget-static .star span.off {
  45. display: block;
  46. width: 100%;
  47. height: 100%;
  48. background: url(../widgets/default/star.gif) no-repeat 0 0px;
  49. }
  50. /* Javascript Star Version */
  51. div.fivestar-widget {
  52. display: block;
  53. }
  54. div.fivestar-widget .cancel, div.fivestar-widget .star {
  55. float: left; /* RTL */
  56. width: 17px;
  57. height: 15px;
  58. overflow: hidden;
  59. text-indent: -999em;
  60. }
  61. div.fivestar-widget .cancel, div.fivestar-widget .cancel a {
  62. background: url(../widgets/default/delete.gif) no-repeat 0 -16px;
  63. text-decoration: none;
  64. }
  65. div.fivestar-widget .star, div.fivestar-widget .star a {
  66. background: url(../widgets/default/star.gif) no-repeat 0 0px;
  67. text-decoration: none;
  68. }
  69. div.fivestar-widget .cancel a, div.fivestar-widget .star a {
  70. display: block;
  71. width: 100%;
  72. height: 100%;
  73. background-position: 0 0px;
  74. cursor: pointer;
  75. }
  76. div.fivestar-widget div.on a {
  77. background-position: 0 -16px;
  78. }
  79. div.fivestar-widget div.hover a, div.rating div a:hover {
  80. background-position: 0 -32px;
  81. }
  82. form.fivestar-widget div.description {
  83. margin-bottom: 0;
  84. }