You are here

thumbs.css in Vote Up/Down 8

.vud-widget-thumbs {
  margin: 5px 10px;
  position: relative;
}

.vud-widget-thumbs p {
  margin: 0;
}

.vud-widget-thumbs a.vud-link-up span,
.vud-widget-thumbs a.vud-link-down span {
  text-decoration: none;
  margin-right: 7px;
}

.vud-widget-thumbs .up-score .up-current-score,
.vud-widget-thumbs .down-score .down-current-score {
  display: block;
  font-size: 16px;
  margin-left: 25px;
  text-align: right;
  padding-top: 2px;
}

.vud-widget-thumbs .up-score {
  color: #333;
  display: inline-block;
  border-right: 1px solid #999;
  padding: 0 3px 0 10px;
}

.vud-widget-thumbs .down-score {
  color: #333;
  display: inline-block;
  padding-left: 3px;
}

.vote-current-score {
  padding-top: 10px;
}

.voted-how {
  font-size: 0.8em
}

.vud-widget-thumbs .up.active,
.vud-widget-thumbs .down.active {
}

.vote-thumb {
  cursor: pointer;
}

.vud-widget-thumbs .up.inactive,
.vud-widget-thumbs .down.inactive,
.vud-widget-thumbs .up.active,
.vud-widget-thumbs .down.active {
  float: left;
  display: block;
  width: 27px;
  height: 28px;
  font-weight: bold;
  text-align: center;
  background: url(thumbs.png) 0 0 no-repeat;
}

.vud-widget-thumbs .up.active {
  background-position: -54px -0px;
}

.vud-widget-thumbs .down.active {
  background-position: -27px -0px;
}

.vud-widget-thumbs .up.inactive {
  background-position: -81px -0px;
}

.vud-widget-thumbs .down.inactive {
  background-position: -0px -0px;
}

.vud-widget-thumbs .up.inactive:hover {
  background-position: -54px -0px;
}

.vud-widget-thumbs .down.inactive:hover {
  background-position: -27px -0px;
}

/**
 * Hide elements visually, but keep them available for screen-readers.
 *
 * Used for information required for screen-reader users to understand and use
 * the site where visual display is undesirable. Information provided in this
 * manner should be kept concise, to avoid unnecessary burden on the user. Must
 * not be used for focusable elements (such as links and form elements) as this
 * causes issues for keyboard only or voice recognition users. "!important" is
 * used to prevent unintentional overrides.
 */
.element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

File

widgets/thumbs/thumbs.css
View source
  1. .vud-widget-thumbs {
  2. margin: 5px 10px;
  3. position: relative;
  4. }
  5. .vud-widget-thumbs p {
  6. margin: 0;
  7. }
  8. .vud-widget-thumbs a.vud-link-up span,
  9. .vud-widget-thumbs a.vud-link-down span {
  10. text-decoration: none;
  11. margin-right: 7px;
  12. }
  13. .vud-widget-thumbs .up-score .up-current-score,
  14. .vud-widget-thumbs .down-score .down-current-score {
  15. display: block;
  16. font-size: 16px;
  17. margin-left: 25px;
  18. text-align: right;
  19. padding-top: 2px;
  20. }
  21. .vud-widget-thumbs .up-score {
  22. color: #333;
  23. display: inline-block;
  24. border-right: 1px solid #999;
  25. padding: 0 3px 0 10px;
  26. }
  27. .vud-widget-thumbs .down-score {
  28. color: #333;
  29. display: inline-block;
  30. padding-left: 3px;
  31. }
  32. .vote-current-score {
  33. padding-top: 10px;
  34. }
  35. .voted-how {
  36. font-size: 0.8em
  37. }
  38. .vud-widget-thumbs .up.active,
  39. .vud-widget-thumbs .down.active {
  40. }
  41. .vote-thumb {
  42. cursor: pointer;
  43. }
  44. .vud-widget-thumbs .up.inactive,
  45. .vud-widget-thumbs .down.inactive,
  46. .vud-widget-thumbs .up.active,
  47. .vud-widget-thumbs .down.active {
  48. float: left;
  49. display: block;
  50. width: 27px;
  51. height: 28px;
  52. font-weight: bold;
  53. text-align: center;
  54. background: url(thumbs.png) 0 0 no-repeat;
  55. }
  56. .vud-widget-thumbs .up.active {
  57. background-position: -54px -0px;
  58. }
  59. .vud-widget-thumbs .down.active {
  60. background-position: -27px -0px;
  61. }
  62. .vud-widget-thumbs .up.inactive {
  63. background-position: -81px -0px;
  64. }
  65. .vud-widget-thumbs .down.inactive {
  66. background-position: -0px -0px;
  67. }
  68. .vud-widget-thumbs .up.inactive:hover {
  69. background-position: -54px -0px;
  70. }
  71. .vud-widget-thumbs .down.inactive:hover {
  72. background-position: -27px -0px;
  73. }
  74. /**
  75. * Hide elements visually, but keep them available for screen-readers.
  76. *
  77. * Used for information required for screen-reader users to understand and use
  78. * the site where visual display is undesirable. Information provided in this
  79. * manner should be kept concise, to avoid unnecessary burden on the user. Must
  80. * not be used for focusable elements (such as links and form elements) as this
  81. * causes issues for keyboard only or voice recognition users. "!important" is
  82. * used to prevent unintentional overrides.
  83. */
  84. .element-invisible {
  85. position: absolute !important;
  86. clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  87. clip: rect(1px, 1px, 1px, 1px);
  88. }