Ei kuvausta

style.css 4.2KB

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