Advertisement
geminilabs

[site-reviews] Multicoloured ratings (coloured by rating level)

Jul 1st, 2021 (edited)
1,474
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.96 KB | None | 0 0
  1. /**
  2.  * https://www.dropbox.com/s/kuriexc1azfmrwt/multi-coloured-stars.zip?dl=1
  3.  */
  4.  
  5. :root {
  6.     --glc-star-color-0: #333333;
  7.     --glc-star-color-1: #ff6f31;
  8.     --glc-star-color-2: #ff9f02;
  9.     --glc-star-color-3: #ffcf02;
  10.     --glc-star-color-4: #9ace6a;
  11.     --glc-star-color-5: #57bb8a;
  12.     --glc-star-empty-0: url(/uploads/star-empty-0.svg);
  13.     --glc-star-empty-1: url(/uploads/star-empty-1.svg);
  14.     --glc-star-empty-2: url(/uploads/star-empty-2.svg);
  15.     --glc-star-empty-3: url(/uploads/star-empty-3.svg);
  16.     --glc-star-empty-4: url(/uploads/star-empty-4.svg);
  17.     --glc-star-empty-5: url(/uploads/star-empty-5.svg);
  18.     --glc-star-half-0: url(/uploads/star-half-0.svg);
  19.     --glc-star-half-1: url(/uploads/star-half-1.svg);
  20.     --glc-star-half-2: url(/uploads/star-half-2.svg);
  21.     --glc-star-half-3: url(/uploads/star-half-3.svg);
  22.     --glc-star-half-4: url(/uploads/star-half-4.svg);
  23.     --glc-star-half-5: url(/uploads/star-half-5.svg);
  24.     --glc-star-full-0: url(/uploads/star-full-0.svg);
  25.     --glc-star-full-1: url(/uploads/star-full-1.svg);
  26.     --glc-star-full-2: url(/uploads/star-full-2.svg);
  27.     --glc-star-full-3: url(/uploads/star-full-3.svg);
  28.     --glc-star-full-4: url(/uploads/star-full-4.svg);
  29.     --glc-star-full-5: url(/uploads/star-full-5.svg);
  30. }
  31.  
  32. /* Form stars */
  33.  
  34. .glsr-form .gl-star-rating--stars.s0 > span {
  35.     background-image: var(--glc-star-empty-0) !important;
  36. }
  37. .glsr-form .gl-star-rating--stars.s10>span {
  38.     background-image: var(--glc-star-empty-1) !important;
  39. }
  40. .glsr-form .gl-star-rating--stars.s10>span:first-child {
  41.     background-image: var(--glc-star-full-1) !important;
  42. }
  43. .glsr-form .gl-star-rating--stars.s20>span {
  44.     background-image: var(--glc-star-empty-2) !important;
  45. }
  46. .glsr-form .gl-star-rating--stars.s20>span:nth-child(-1n+2) {
  47.     background-image: var(--glc-star-full-2) !important;
  48. }
  49. .glsr-form .gl-star-rating--stars.s30>span {
  50.     background-image: var(--glc-star-empty-3) !important;
  51. }
  52. .glsr-form .gl-star-rating--stars.s30>span:nth-child(-1n+3) {
  53.     background-image: var(--glc-star-full-3) !important;
  54. }
  55. .glsr-form .gl-star-rating--stars.s40>span {
  56.     background-image: var(--glc-star-empty-4) !important;
  57. }
  58. .glsr-form .gl-star-rating--stars.s40>span:nth-child(-1n+4) {
  59.     background-image: var(--glc-star-full-4) !important;
  60. }
  61. .glsr-form .gl-star-rating--stars.s50>span {
  62.     background-image: var(--glc-star-empty-5) !important;
  63. }
  64. .glsr-form .gl-star-rating--stars.s50>span:nth-child(-1n+5) {
  65.     background-image: var(--glc-star-full-5) !important;
  66. }
  67.  
  68. /* Review stars */
  69.  
  70. .glsr-review .glsr-stars[data-rating="0"] > .glsr-star {
  71.     background-image: var(--glc-star-empty-0) !important;
  72. }
  73. .glsr-review .glsr-stars[data-rating="0"] > .glsr-star-full {
  74.     background-image: var(--glc-star-full-0) !important;
  75. }
  76. .glsr-review .glsr-stars[data-rating="1"] > .glsr-star {
  77.     background-image: var(--glc-star-empty-1) !important;
  78. }
  79. .glsr-review .glsr-stars[data-rating="1"] > .glsr-star-full {
  80.     background-image: var(--glc-star-full-1) !important;
  81. }
  82. .glsr-review .glsr-stars[data-rating="2"] > .glsr-star {
  83.     background-image: var(--glc-star-empty-2) !important;
  84. }
  85. .glsr-review .glsr-stars[data-rating="2"] > .glsr-star-full {
  86.     background-image: var(--glc-star-full-2) !important;
  87. }
  88. .glsr-review .glsr-stars[data-rating="3"] > .glsr-star {
  89.     background-image: var(--glc-star-empty-3) !important;
  90. }
  91. .glsr-review .glsr-stars[data-rating="3"] > .glsr-star-full {
  92.     background-image: var(--glc-star-full-3) !important;
  93. }
  94. .glsr-review .glsr-stars[data-rating="4"] > .glsr-star {
  95.     background-image: var(--glc-star-empty-4) !important;
  96. }
  97. .glsr-review .glsr-stars[data-rating="4"] > .glsr-star-full {
  98.     background-image: var(--glc-star-full-4) !important;
  99. }
  100. .glsr-review .glsr-stars[data-rating="5"] > .glsr-star {
  101.     background-image: var(--glc-star-empty-5) !important;
  102. }
  103. .glsr-review .glsr-stars[data-rating="5"] > .glsr-star-full {
  104.     background-image: var(--glc-star-full-5) !important;
  105. }
  106.  
  107. /* Summary stars */
  108.  
  109. .glsr-summary .glsr-stars > .glsr-star-empty {
  110.     background-image: var(--glc-star-empty-0) !important;
  111. }
  112. .glsr-summary .glsr-stars > .glsr-star-half {
  113.     background-image: var(--glc-star-half-0) !important;
  114. }
  115. .glsr-summary .glsr-stars > .glsr-star-full {
  116.     background-image: var(--glc-star-full-0) !important;
  117. }
  118.  
  119. /* Summary percentage bars */
  120.  
  121. .glsr-summary .glsr-bar:nth-child(0n+1) .glsr-bar-background-percent {
  122.     background-color: var(--glc-star-color-5);
  123. }
  124. .glsr-summary .glsr-bar:nth-child(0n+2) .glsr-bar-background-percent {
  125.     background-color: var(--glc-star-color-4);
  126. }
  127. .glsr-summary .glsr-bar:nth-child(0n+3) .glsr-bar-background-percent {
  128.     background-color: var(--glc-star-color-3);
  129. }
  130. .glsr-summary .glsr-bar:nth-child(0n+4) .glsr-bar-background-percent {
  131.     background-color: var(--glc-star-color-2);
  132. }
  133. .glsr-summary .glsr-bar:nth-child(0n+5) .glsr-bar-background-percent {
  134.     background-color: var(--glc-star-color-1);
  135. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement