skin.css 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. /* LayerSlider Glass Skin */
  2. .ls-glass {
  3. padding: 10px;
  4. background: #fff;
  5. border-radius: 6px;
  6. }
  7. .ls-glass .ls-bottom-nav-wrapper {
  8. margin-top: 10px;
  9. }
  10. .ls-glass .ls-playvideo {
  11. width: 50px;
  12. height: 50px;
  13. margin-left: -25px;
  14. margin-top: -25px;
  15. }
  16. .ls-glass .ls-playvideo,
  17. .ls-glass .ls-nav-sides,
  18. .ls-glass .ls-bottom-slidebuttons a,
  19. .ls-glass .ls-nav-prev,
  20. .ls-glass .ls-nav-next,
  21. .ls-glass .ls-nav-start,
  22. .ls-glass .ls-nav-stop,
  23. .ls-glass .ls-fullscreen,
  24. .ls-glass .ls-loading-container {
  25. background-image: url(skin.png);
  26. }
  27. .ls-glass .ls-playvideo {
  28. background-position: -300px -150px;
  29. }
  30. .ls-glass .ls-playvideo:hover,
  31. .ls-glass .ls-vpcontainer:hover .ls-playvideo {
  32. background-position: -375px -150px;
  33. }
  34. .ls-glass .ls-nav-prev {
  35. background-position: 0px 0px;
  36. }
  37. .ls-glass .ls-nav-prev:hover {
  38. background-position: 0px -75px;
  39. }
  40. .ls-glass .ls-nav-next {
  41. background-position: -150px 0px;
  42. }
  43. .ls-glass .ls-nav-next:hover {
  44. background-position: -150px -75px;
  45. }
  46. .ls-glass .ls-nav-start {
  47. background-position: -300px 0px;
  48. }
  49. .ls-glass .ls-nav-start:hover,
  50. .ls-glass .ls-nav-start-active {
  51. background-position: -300px -75px;
  52. }
  53. .ls-glass .ls-nav-stop {
  54. background-position: -450px 0px;
  55. }
  56. .ls-glass .ls-nav-stop:hover,
  57. .ls-glass .ls-nav-stop-active {
  58. background-position: -450px -75px;
  59. }
  60. .ls-glass .ls-bottom-slidebuttons a {
  61. background-position: 0px -150px;
  62. }
  63. .ls-glass .ls-bottom-slidebuttons a.ls-nav-active,
  64. .ls-glass .ls-bottom-slidebuttons a:hover {
  65. background-position: -75px -150px;
  66. }
  67. .ls-glass .ls-nav-sideleft {
  68. background-position: -150px -150px;
  69. }
  70. .ls-glass .ls-nav-sideright {
  71. background-position: -225px -150px;
  72. }
  73. .ls-glass .ls-nav-prev,
  74. .ls-glass .ls-nav-next {
  75. width: 22px;
  76. height: 50px;
  77. z-index: 10000;
  78. top: 50%;
  79. margin-top: -25px;
  80. position: absolute;
  81. }
  82. .ls-glass .ls-nav-prev {
  83. left: -22px;
  84. }
  85. .ls-glass .ls-nav-next {
  86. right: -22px;
  87. }
  88. .ls-glass .ls-bottom-slidebuttons,
  89. .ls-glass .ls-bottom-slidebuttons a,
  90. .ls-glass .ls-nav-start,
  91. .ls-glass .ls-nav-stop,
  92. .ls-glass .ls-nav-sides {
  93. height: 30px;
  94. }
  95. .ls-glass .ls-bottom-slidebuttons,
  96. .ls-glass .ls-bottom-slidebuttons a,
  97. .ls-glass .ls-nav-start,
  98. .ls-glass .ls-nav-stop,
  99. .ls-glass .ls-nav-sides {
  100. display: inline-block;
  101. }
  102. .ls-glass .ls-nav-start,
  103. .ls-glass .ls-nav-stop {
  104. width: 28px;
  105. }
  106. .ls-glass .ls-bottom-slidebuttons a {
  107. width: 18px;
  108. }
  109. .ls-glass .ls-nav-sides {
  110. width: 9px;
  111. }
  112. .ls-glass .ls-thumbnail-hover {
  113. bottom: 50px;
  114. padding: 4px;
  115. margin-left: 1px;
  116. }
  117. .ls-glass .ls-thumbnail-hover-bg {
  118. background: white;
  119. box-shadow: 0px 2px 12px -4px black;
  120. border-radius: 4px;
  121. }
  122. .ls-glass .ls-thumbnail-hover span {
  123. border: 5px solid white;
  124. margin-left: -5px;
  125. }
  126. .ls-glass .ls-thumbnail {
  127. top: -20px;
  128. }
  129. .ls-glass .ls-thumbnail-inner {
  130. padding: 5px;
  131. margin-left: -5px;
  132. background: white;
  133. box-shadow: 0px 3px 35px -10px black;
  134. border-radius: 4px;
  135. }
  136. .ls-glass .ls-thumbnail-slide a {
  137. margin-right: 5px;
  138. }
  139. .ls-glass .ls-nothumb {
  140. background: #eee;
  141. }
  142. .ls-glass .ls-above-thumbnails {
  143. display: none;
  144. }
  145. .ls-glass .ls-below-thumbnails {
  146. display: block;
  147. margin-top: -20px;
  148. }
  149. .ls-glass .ls-shadow {
  150. display: block;
  151. }
  152. .ls-glass .ls-loading-container {
  153. width: 40px;
  154. height: 40px;
  155. margin-left: -20px;
  156. margin-top: -20px;
  157. background-position: -450px -150px;
  158. }
  159. .ls-glass .ls-loading-indicator {
  160. width: 22px;
  161. height: 22px;
  162. margin-top: 9px;
  163. background-image: url(loading.gif);
  164. }
  165. .ls-glass .ls-fullscreen {
  166. width: 30px;
  167. height: 30px;
  168. right: 10px;
  169. top: 10px;
  170. background-position: -525px -150px;
  171. }
  172. .ls-glass .ls-fullscreen:hover {
  173. background-position: -525px -190px;
  174. }