Nav apraksta

style.css 5.4KB

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