You are here

skin.css in jCarousel 5

/**
 * Based on the default jCarousel tango skin. Adapted for use with the Mini
 * Panels module by Wim Leers. GPL icons created by Kaj Heijmans.
 */

.jcarousel-skin-default.jcarousel-container {
  -moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
  background: #F0F6F9;
  border: 1px solid #346F97;
}

.jcarousel-skin-default.jcarousel-container-horizontal {
  width: 16em;
  padding: 40px 0;
	padding-bottom: 0;
}

.jcarousel-skin-default.jcarousel-container-vertical {
  width: 16em;
  height: 100%;
  padding: 40px 0;
}

.jcarousel-skin-default .jcarousel-clip-horizontal {
  width:  16em;
  height: 100%;
}

.jcarousel-skin-default .jcarousel-clip-vertical {
  width:  16em;
  height: 18em;
}

.jcarousel-skin-default .jcarousel-item {
	width: 100%;
	height: 100%;
	padding: 0;
}

.jcarousel-skin-default .jcarousel-item .block {
	padding: 0 0 0 15px;
}

.jcarousel-skin-default .jcarousel-item-horizontal {
}

.jcarousel-skin-default .jcarousel-item-vertical {
	margin: 0;
}

.jcarousel-skin-default .jcarousel-item-placeholder {
  background: #fff;
  color: #000;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-default .jcarousel-next-horizontal {
    position: absolute;
    top: 5px;
    left: 37px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-default .jcarousel-next-horizontal:hover {
  background-position: -32px 0;
}

.jcarousel-skin-default .jcarousel-next-horizontal:active {
  background-position: -64px 0;
}

.jcarousel-skin-default .jcarousel-next-disabled-horizontal,
.jcarousel-skin-default .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-default .jcarousel-next-disabled-horizontal:active {
  cursor: default;
  background-position: -96px 0;
}

.jcarousel-skin-default .jcarousel-prev-horizontal {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  background: transparent url(prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-default .jcarousel-prev-horizontal:hover {
  background-position: -32px 0;
}

.jcarousel-skin-default .jcarousel-prev-horizontal:active {
  background-position: -64px 0;
}

.jcarousel-skin-default .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-default .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-default .jcarousel-prev-disabled-horizontal:active {
  cursor: default;
  background-position: -96px 0;
}

/**
 *  Vertical Buttons
 */
.jcarousel-skin-default .jcarousel-next-vertical {
  position: absolute;
  bottom: 5px;
  left: 5px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  background: transparent url(next-vertical.png) no-repeat 0 0;
}

.jcarousel-skin-default .jcarousel-next-vertical:hover {
  background-position: 0 -32px;
}

.jcarousel-skin-default .jcarousel-next-vertical:active {
  background-position: 0 -64px;
}

.jcarousel-skin-default .jcarousel-next-disabled-vertical,
.jcarousel-skin-default .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-default .jcarousel-next-disabled-vertical:active {
  cursor: default;
  background-position: 0 -96px;
}

.jcarousel-skin-default .jcarousel-prev-vertical {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  background: transparent url(prev-vertical.png) no-repeat 0 0;
}

.jcarousel-skin-default .jcarousel-prev-vertical:hover {
  background-position: 0 -32px;
}

.jcarousel-skin-default .jcarousel-prev-vertical:active {
  background-position: 0 -64px;
}

.jcarousel-skin-default .jcarousel-prev-disabled-vertical,
.jcarousel-skin-default .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-default .jcarousel-prev-disabled-vertical:active {
  cursor: default;
  background-position: 0 -96px;
}

File

skins/default/skin.css
View source
  1. /**
  2. * Based on the default jCarousel tango skin. Adapted for use with the Mini
  3. * Panels module by Wim Leers. GPL icons created by Kaj Heijmans.
  4. */
  5. .jcarousel-skin-default.jcarousel-container {
  6. -moz-border-radius: 20px;
  7. -webkit-border-radius: 20px;
  8. border-radius: 20px;
  9. background: #F0F6F9;
  10. border: 1px solid #346F97;
  11. }
  12. .jcarousel-skin-default.jcarousel-container-horizontal {
  13. width: 16em;
  14. padding: 40px 0;
  15. padding-bottom: 0;
  16. }
  17. .jcarousel-skin-default.jcarousel-container-vertical {
  18. width: 16em;
  19. height: 100%;
  20. padding: 40px 0;
  21. }
  22. .jcarousel-skin-default .jcarousel-clip-horizontal {
  23. width: 16em;
  24. height: 100%;
  25. }
  26. .jcarousel-skin-default .jcarousel-clip-vertical {
  27. width: 16em;
  28. height: 18em;
  29. }
  30. .jcarousel-skin-default .jcarousel-item {
  31. width: 100%;
  32. height: 100%;
  33. padding: 0;
  34. }
  35. .jcarousel-skin-default .jcarousel-item .block {
  36. padding: 0 0 0 15px;
  37. }
  38. .jcarousel-skin-default .jcarousel-item-horizontal {
  39. }
  40. .jcarousel-skin-default .jcarousel-item-vertical {
  41. margin: 0;
  42. }
  43. .jcarousel-skin-default .jcarousel-item-placeholder {
  44. background: #fff;
  45. color: #000;
  46. }
  47. /**
  48. * Horizontal Buttons
  49. */
  50. .jcarousel-skin-default .jcarousel-next-horizontal {
  51. position: absolute;
  52. top: 5px;
  53. left: 37px;
  54. width: 32px;
  55. height: 32px;
  56. cursor: pointer;
  57. background: transparent url(next-horizontal.png) no-repeat 0 0;
  58. }
  59. .jcarousel-skin-default .jcarousel-next-horizontal:hover {
  60. background-position: -32px 0;
  61. }
  62. .jcarousel-skin-default .jcarousel-next-horizontal:active {
  63. background-position: -64px 0;
  64. }
  65. .jcarousel-skin-default .jcarousel-next-disabled-horizontal,
  66. .jcarousel-skin-default .jcarousel-next-disabled-horizontal:hover,
  67. .jcarousel-skin-default .jcarousel-next-disabled-horizontal:active {
  68. cursor: default;
  69. background-position: -96px 0;
  70. }
  71. .jcarousel-skin-default .jcarousel-prev-horizontal {
  72. position: absolute;
  73. top: 5px;
  74. left: 5px;
  75. width: 32px;
  76. height: 32px;
  77. cursor: pointer;
  78. background: transparent url(prev-horizontal.png) no-repeat 0 0;
  79. }
  80. .jcarousel-skin-default .jcarousel-prev-horizontal:hover {
  81. background-position: -32px 0;
  82. }
  83. .jcarousel-skin-default .jcarousel-prev-horizontal:active {
  84. background-position: -64px 0;
  85. }
  86. .jcarousel-skin-default .jcarousel-prev-disabled-horizontal,
  87. .jcarousel-skin-default .jcarousel-prev-disabled-horizontal:hover,
  88. .jcarousel-skin-default .jcarousel-prev-disabled-horizontal:active {
  89. cursor: default;
  90. background-position: -96px 0;
  91. }
  92. /**
  93. * Vertical Buttons
  94. */
  95. .jcarousel-skin-default .jcarousel-next-vertical {
  96. position: absolute;
  97. bottom: 5px;
  98. left: 5px;
  99. width: 32px;
  100. height: 32px;
  101. cursor: pointer;
  102. background: transparent url(next-vertical.png) no-repeat 0 0;
  103. }
  104. .jcarousel-skin-default .jcarousel-next-vertical:hover {
  105. background-position: 0 -32px;
  106. }
  107. .jcarousel-skin-default .jcarousel-next-vertical:active {
  108. background-position: 0 -64px;
  109. }
  110. .jcarousel-skin-default .jcarousel-next-disabled-vertical,
  111. .jcarousel-skin-default .jcarousel-next-disabled-vertical:hover,
  112. .jcarousel-skin-default .jcarousel-next-disabled-vertical:active {
  113. cursor: default;
  114. background-position: 0 -96px;
  115. }
  116. .jcarousel-skin-default .jcarousel-prev-vertical {
  117. position: absolute;
  118. top: 5px;
  119. left: 5px;
  120. width: 32px;
  121. height: 32px;
  122. cursor: pointer;
  123. background: transparent url(prev-vertical.png) no-repeat 0 0;
  124. }
  125. .jcarousel-skin-default .jcarousel-prev-vertical:hover {
  126. background-position: 0 -32px;
  127. }
  128. .jcarousel-skin-default .jcarousel-prev-vertical:active {
  129. background-position: 0 -64px;
  130. }
  131. .jcarousel-skin-default .jcarousel-prev-disabled-vertical,
  132. .jcarousel-skin-default .jcarousel-prev-disabled-vertical:hover,
  133. .jcarousel-skin-default .jcarousel-prev-disabled-vertical:active {
  134. cursor: default;
  135. background-position: 0 -96px;
  136. }