You are here

Home » API reference » jCarousel 6

skin.css in jCarousel 6

Same filename in this branch
  1. 6 jcarousel/skins/ie7/skin.css
  2. 6 jcarousel/skins/tango/skin.css
.jcarousel-skin-tango .jcarousel-container {
    -moz-border-radius: 10px;
    background: #F0F6F9;
    border: 1px solid #346F97;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 245px;
    padding: 20px 40px;
}

.jcarousel-skin-tango .jcarousel-container-vertical {
    width: 75px;
    height: 245px;
    padding: 40px 20px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  245px;
    height: 75px;
}

.jcarousel-skin-tango .jcarousel-clip-vertical {
    width:  75px;
    height: 245px;
}

.jcarousel-skin-tango .jcarousel-item {
    width: 75px;
    height: 75px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-right: 10px;
}

.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 10px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

File

jcarousel/skins/tango/skin.css
View source 
  1. .jcarousel-skin-tango .jcarousel-container {

  2.     -moz-border-radius: 10px;

  3.     background: #F0F6F9;

  4.     border: 1px solid #346F97;

  5. }

  6. 

  7. .jcarousel-skin-tango .jcarousel-container-horizontal {

  8.     width: 245px;

  9.     padding: 20px 40px;

  10. }

  11. 

  12. .jcarousel-skin-tango .jcarousel-container-vertical {

  13.     width: 75px;

  14.     height: 245px;

  15.     padding: 40px 20px;

  16. }

  17. 

  18. .jcarousel-skin-tango .jcarousel-clip-horizontal {

  19.     width:  245px;

  20.     height: 75px;

  21. }

  22. 

  23. .jcarousel-skin-tango .jcarousel-clip-vertical {

  24.     width:  75px;

  25.     height: 245px;

  26. }

  27. 

  28. .jcarousel-skin-tango .jcarousel-item {

  29.     width: 75px;

  30.     height: 75px;

  31. }

  32. 

  33. .jcarousel-skin-tango .jcarousel-item-horizontal {

  34.     margin-right: 10px;

  35. }

  36. 

  37. .jcarousel-skin-tango .jcarousel-item-vertical {

  38.     margin-bottom: 10px;

  39. }

  40. 

  41. .jcarousel-skin-tango .jcarousel-item-placeholder {

  42.     background: #fff;

  43.     color: #000;

  44. }

  45. 

  46. /**

  47.  *  Horizontal Buttons

  48.  */

  49. .jcarousel-skin-tango .jcarousel-next-horizontal {

  50.     position: absolute;

  51.     top: 43px;

  52.     right: 5px;

  53.     width: 32px;

  54.     height: 32px;

  55.     cursor: pointer;

  56.     background: transparent url(next-horizontal.png) no-repeat 0 0;

  57. }

  58. 

  59. .jcarousel-skin-tango .jcarousel-next-horizontal:hover {

  60.     background-position: -32px 0;

  61. }

  62. 

  63. .jcarousel-skin-tango .jcarousel-next-horizontal:active {

  64.     background-position: -64px 0;

  65. }

  66. 

  67. .jcarousel-skin-tango .jcarousel-next-disabled-horizontal,

  68. .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,

  69. .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {

  70.     cursor: default;

  71.     background-position: -96px 0;

  72. }

  73. 

  74. .jcarousel-skin-tango .jcarousel-prev-horizontal {

  75.     position: absolute;

  76.     top: 43px;

  77.     left: 5px;

  78.     width: 32px;

  79.     height: 32px;

  80.     cursor: pointer;

  81.     background: transparent url(prev-horizontal.png) no-repeat 0 0;

  82. }

  83. 

  84. .jcarousel-skin-tango .jcarousel-prev-horizontal:hover {

  85.     background-position: -32px 0;

  86. }

  87. 

  88. .jcarousel-skin-tango .jcarousel-prev-horizontal:active {

  89.     background-position: -64px 0;

  90. }

  91. 

  92. .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,

  93. .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,

  94. .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {

  95.     cursor: default;

  96.     background-position: -96px 0;

  97. }

  98. 

  99. /**

  100.  *  Vertical Buttons

  101.  */

  102. .jcarousel-skin-tango .jcarousel-next-vertical {

  103.     position: absolute;

  104.     bottom: 5px;

  105.     left: 43px;

  106.     width: 32px;

  107.     height: 32px;

  108.     cursor: pointer;

  109.     background: transparent url(next-vertical.png) no-repeat 0 0;

  110. }

  111. 

  112. .jcarousel-skin-tango .jcarousel-next-vertical:hover {

  113.     background-position: 0 -32px;

  114. }

  115. 

  116. .jcarousel-skin-tango .jcarousel-next-vertical:active {

  117.     background-position: 0 -64px;

  118. }

  119. 

  120. .jcarousel-skin-tango .jcarousel-next-disabled-vertical,

  121. .jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,

  122. .jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {

  123.     cursor: default;

  124.     background-position: 0 -96px;

  125. }

  126. 

  127. .jcarousel-skin-tango .jcarousel-prev-vertical {

  128.     position: absolute;

  129.     top: 5px;

  130.     left: 43px;

  131.     width: 32px;

  132.     height: 32px;

  133.     cursor: pointer;

  134.     background: transparent url(prev-vertical.png) no-repeat 0 0;

  135. }

  136. 

  137. .jcarousel-skin-tango .jcarousel-prev-vertical:hover {

  138.     background-position: 0 -32px;

  139. }

  140. 

  141. .jcarousel-skin-tango .jcarousel-prev-vertical:active {

  142.     background-position: 0 -64px;

  143. }

  144. 

  145. .jcarousel-skin-tango .jcarousel-prev-disabled-vertical,

  146. .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,

  147. .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {

  148.     cursor: default;

  149.     background-position: 0 -96px;

  150. }