Nessuna descrizione

style.css 4.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. /**
  2. * Master Slider
  3. * Light 4
  4. */
  5. .ms-skin-light-4 .ms-slide .ms-slide-vpbtn,
  6. .ms-skin-light-4 .ms-video-btn{
  7. width: 54px;
  8. height: 54px;
  9. background: url(light-skin-4.png) no-repeat -14px -150px;
  10. top: 50%;
  11. left: 50%;
  12. margin: -27px 0 0 -27px;
  13. }
  14. .ms-skin-light-4 .ms-slide .ms-slide-vcbtn {
  15. width: 27px;
  16. height: 26px;
  17. background: url(light-skin-4.png) no-repeat -24px -29px;
  18. top: 30px;
  19. right: 30px;
  20. }
  21. /* controls */
  22. .ms-skin-light-4 .ms-nav-next,
  23. .ms-skin-light-4 .ms-nav-prev {
  24. width: 54px;
  25. background: url(light-skin-4.png);
  26. background-position: -77px -5px;
  27. height: 68px;
  28. cursor: pointer;
  29. top: 50%;
  30. left: -27px;
  31. margin-top: -40px;
  32. position: absolute;
  33. z-index: 110;
  34. }
  35. .ms-skin-light-4 .ms-nav-next {
  36. right: -27px;
  37. left: auto;
  38. background-position: -79px -83px;
  39. }
  40. .ms-skin-light-4 .ms-thumb-frame-selected {
  41. opacity: 0.6;
  42. }
  43. .ms-skin-light-4 .ms-thumb-list.ms-dir-h {
  44. bottom: -60px;
  45. width: 100%;
  46. height: 60px;
  47. }
  48. .ms-skin-light-4 .ms-thumb-list.ms-dir-v {
  49. height: 100%;
  50. width: 60px;
  51. right: -60px;
  52. top: 0;
  53. }
  54. .ms-skin-light-4 .ms-thumb-frame {
  55. cursor: pointer;
  56. float: left;
  57. width: 60px;
  58. height: 60px;
  59. margin: 1px 0 0 1px;
  60. overflow: hidden;
  61. }
  62. .ms-skin-light-4 .ms-bullets.ms-dir-h {
  63. position: absolute;
  64. bottom: 20px;
  65. right: 50%;
  66. width: 100px;
  67. }
  68. .ms-skin-light-4 .ms-bullets.ms-dir-h .ms-bullets-count {
  69. position: relative;
  70. right: -50%;
  71. }
  72. .ms-skin-light-4 .ms-bullet {
  73. width: 9px;
  74. height: 9px;
  75. background: #b9b9b9;
  76. margin: 4px;
  77. border: solid 1px rgb(163, 163, 163);
  78. }
  79. .ms-skin-light-4 .ms-bullet-selected {
  80. background-color: white;
  81. }
  82. .ms-skin-light-4 .ms-timerbar {
  83. background: rgba(0, 0, 0, 0.16);
  84. height: 6px;
  85. }
  86. .ms-skin-light-4 .ms-time-bar {
  87. height: 100%;
  88. background: #FFFFFF;
  89. }
  90. .ms-skin-light-4 .ms-tooltip{
  91. position: absolute;
  92. z-index: 210;
  93. cursor: auto;
  94. }
  95. .ms-skin-light-4 .ms-tooltip-top .ms-tooltip-arrow,
  96. .ms-skin-light-4 .ms-tooltip-bottom .ms-tooltip-arrow{
  97. border-left: solid 10px transparent;
  98. border-right: solid 10px transparent;
  99. position: absolute;
  100. left: 50%;
  101. margin-left: -10px;
  102. }
  103. .ms-skin-light-4 .ms-tooltip-top .ms-tooltip-arrow{
  104. border-top: solid 10px;
  105. border-top-color: silver;
  106. border-top-color: rgba(240, 240, 240, 0.88);
  107. bottom: -10px;
  108. }
  109. .ms-skin-light-4 .ms-tooltip-bottom .ms-tooltip-arrow {
  110. border-bottom: solid 10px;
  111. border-bottom-color: silver;
  112. border-bottom-color: rgba(240, 240, 240, 0.88);
  113. top: -10px;
  114. }
  115. .ms-skin-light-4 .ms-tooltip-right .ms-tooltip-arrow,
  116. .ms-skin-light-4 .ms-tooltip-left .ms-tooltip-arrow{
  117. border-top: solid 10px transparent;
  118. border-bottom: solid 10px transparent;
  119. position: absolute;
  120. top: 50%;
  121. margin-top: -10px;
  122. }
  123. .ms-skin-light-4 .ms-tooltip-right .ms-tooltip-arrow{
  124. border-right: solid 10px;
  125. border-right-color: silver;
  126. border-right-color: rgba(240, 240, 240, 0.88);
  127. left: -10px;
  128. }
  129. .ms-skin-light-4 .ms-tooltip-left .ms-tooltip-arrow {
  130. border-left: solid 10px;
  131. border-left-color: white;
  132. border-left-color: rgba(240, 240, 240, 0.88);
  133. right: -10px;
  134. }
  135. .ms-skin-light-4 .ms-tooltip-point {cursor: pointer;}
  136. .ms-skin-light-4 .ms-tooltip-point .ms-point-center {
  137. width: 12px;
  138. height: 12px;
  139. border-radius: 15px;
  140. border: solid 2px #E0E0E0;
  141. background: #4b8aac;
  142. margin: -8px 0 0 -8px;
  143. position: absolute;
  144. z-index: 105;
  145. }
  146. .ms-skin-light-4 .ms-tooltip-point .ms-point-border {
  147. width: 22px;
  148. height: 22px;
  149. background: white;
  150. margin: -11px 0 0 -11px;
  151. position: absolute;
  152. border-radius: 15px;
  153. animation: point-anim 1.5s infinite ;
  154. -moz-animation: point-anim 1.5s infinite;
  155. -webkit-animation: point-anim 1.5s infinite;
  156. -o-animation: point-anim 1.5s infinite;
  157. }
  158. .ms-skin-light-4 .ms-tooltip {
  159. max-width:200px;
  160. }
  161. .ms-skin-light-4 .ms-tooltip-cont {
  162. padding: 10px;
  163. background: silver;
  164. background: rgba(240, 240, 240, 0.88);
  165. text-shadow: 0 1px 0px white;
  166. box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.04);
  167. }
  168. /* retina */
  169. @media
  170. only screen and (-webkit-min-device-pixel-ratio: 2),
  171. only screen and ( min--moz-device-pixel-ratio: 2),
  172. only screen and ( -o-min-device-pixel-ratio: 2/1),
  173. only screen and ( min-device-pixel-ratio: 2),
  174. only screen and ( min-resolution: 192dpi),
  175. only screen and ( min-resolution: 2dppx) {
  176. .ms-skin-light-4 .ms-slide .ms-slide-vpbtn,
  177. .ms-skin-light-4 .ms-video-btn,
  178. .ms-skin-light-4 .ms-slide .ms-slide-vcbtn,
  179. .ms-skin-light-4 .ms-nav-next,
  180. .ms-skin-light-4 .ms-nav-prev{
  181. background-image:url(light-skin-4-retina.png);
  182. background-size: 152px 225px;
  183. }
  184. }