| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215 |
- /**
- * Master Slider
- * Light 4
- */
-
- .ms-skin-light-4 .ms-slide .ms-slide-vpbtn,
- .ms-skin-light-4 .ms-video-btn{
- width: 54px;
- height: 54px;
- background: url(light-skin-4.png) no-repeat -14px -150px;
- top: 50%;
- left: 50%;
- margin: -27px 0 0 -27px;
- }
-
- .ms-skin-light-4 .ms-slide .ms-slide-vcbtn {
- width: 27px;
- height: 26px;
- background: url(light-skin-4.png) no-repeat -24px -29px;
- top: 30px;
- right: 30px;
- }
-
- /* controls */
-
- .ms-skin-light-4 .ms-nav-next,
- .ms-skin-light-4 .ms-nav-prev {
- width: 54px;
- background: url(light-skin-4.png);
- background-position: -77px -5px;
- height: 68px;
- cursor: pointer;
- top: 50%;
- left: -27px;
- margin-top: -40px;
- position: absolute;
- z-index: 110;
- }
- .ms-skin-light-4 .ms-nav-next {
- right: -27px;
- left: auto;
- background-position: -79px -83px;
- }
-
- .ms-skin-light-4 .ms-thumb-frame-selected {
- opacity: 0.6;
- }
-
- .ms-skin-light-4 .ms-thumb-list.ms-dir-h {
- bottom: -60px;
- width: 100%;
- height: 60px;
- }
-
- .ms-skin-light-4 .ms-thumb-list.ms-dir-v {
- height: 100%;
- width: 60px;
- right: -60px;
- top: 0;
- }
-
- .ms-skin-light-4 .ms-thumb-frame {
- cursor: pointer;
- float: left;
- width: 60px;
- height: 60px;
- margin: 1px 0 0 1px;
- overflow: hidden;
- }
-
- .ms-skin-light-4 .ms-bullets.ms-dir-h {
- position: absolute;
- bottom: 20px;
- right: 50%;
- width: 100px;
- }
-
- .ms-skin-light-4 .ms-bullets.ms-dir-h .ms-bullets-count {
- position: relative;
- right: -50%;
- }
-
- .ms-skin-light-4 .ms-bullet {
- width: 9px;
- height: 9px;
- background: #b9b9b9;
- margin: 4px;
- border: solid 1px rgb(163, 163, 163);
- }
-
- .ms-skin-light-4 .ms-bullet-selected {
- background-color: white;
- }
-
- .ms-skin-light-4 .ms-timerbar {
- background: rgba(0, 0, 0, 0.16);
- height: 6px;
- }
-
- .ms-skin-light-4 .ms-time-bar {
- height: 100%;
- background: #FFFFFF;
- }
-
- .ms-skin-light-4 .ms-tooltip{
- position: absolute;
- z-index: 210;
- cursor: auto;
- }
-
- .ms-skin-light-4 .ms-tooltip-top .ms-tooltip-arrow,
- .ms-skin-light-4 .ms-tooltip-bottom .ms-tooltip-arrow{
- border-left: solid 10px transparent;
- border-right: solid 10px transparent;
- position: absolute;
- left: 50%;
- margin-left: -10px;
- }
-
- .ms-skin-light-4 .ms-tooltip-top .ms-tooltip-arrow{
- border-top: solid 10px;
- border-top-color: silver;
- border-top-color: rgba(240, 240, 240, 0.88);
- bottom: -10px;
- }
-
- .ms-skin-light-4 .ms-tooltip-bottom .ms-tooltip-arrow {
- border-bottom: solid 10px;
- border-bottom-color: silver;
- border-bottom-color: rgba(240, 240, 240, 0.88);
- top: -10px;
- }
-
- .ms-skin-light-4 .ms-tooltip-right .ms-tooltip-arrow,
- .ms-skin-light-4 .ms-tooltip-left .ms-tooltip-arrow{
- border-top: solid 10px transparent;
- border-bottom: solid 10px transparent;
- position: absolute;
- top: 50%;
- margin-top: -10px;
- }
-
- .ms-skin-light-4 .ms-tooltip-right .ms-tooltip-arrow{
- border-right: solid 10px;
- border-right-color: silver;
- border-right-color: rgba(240, 240, 240, 0.88);
- left: -10px;
- }
-
- .ms-skin-light-4 .ms-tooltip-left .ms-tooltip-arrow {
- border-left: solid 10px;
- border-left-color: white;
- border-left-color: rgba(240, 240, 240, 0.88);
- right: -10px;
- }
-
- .ms-skin-light-4 .ms-tooltip-point {cursor: pointer;}
- .ms-skin-light-4 .ms-tooltip-point .ms-point-center {
- width: 12px;
- height: 12px;
- border-radius: 15px;
- border: solid 2px #E0E0E0;
- background: #4b8aac;
- margin: -8px 0 0 -8px;
- position: absolute;
- z-index: 105;
- }
-
- .ms-skin-light-4 .ms-tooltip-point .ms-point-border {
- width: 22px;
- height: 22px;
- background: white;
- margin: -11px 0 0 -11px;
- position: absolute;
- border-radius: 15px;
-
- animation: point-anim 1.5s infinite ;
- -moz-animation: point-anim 1.5s infinite;
- -webkit-animation: point-anim 1.5s infinite;
- -o-animation: point-anim 1.5s infinite;
- }
-
-
- .ms-skin-light-4 .ms-tooltip {
- max-width:200px;
- }
-
- .ms-skin-light-4 .ms-tooltip-cont {
- padding: 10px;
- background: silver;
- background: rgba(240, 240, 240, 0.88);
- text-shadow: 0 1px 0px white;
- box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.04);
- }
-
- /* retina */
- @media
- only screen and (-webkit-min-device-pixel-ratio: 2),
- only screen and ( min--moz-device-pixel-ratio: 2),
- only screen and ( -o-min-device-pixel-ratio: 2/1),
- only screen and ( min-device-pixel-ratio: 2),
- only screen and ( min-resolution: 192dpi),
- only screen and ( min-resolution: 2dppx) {
-
- .ms-skin-light-4 .ms-slide .ms-slide-vpbtn,
- .ms-skin-light-4 .ms-video-btn,
- .ms-skin-light-4 .ms-slide .ms-slide-vcbtn,
- .ms-skin-light-4 .ms-nav-next,
- .ms-skin-light-4 .ms-nav-prev{
- background-image:url(light-skin-4-retina.png);
- background-size: 152px 225px;
- }
-
- }
|