638 lines
11 KiB
CSS
Executable File
638 lines
11 KiB
CSS
Executable File
/*!
|
|
* - v1.0.2
|
|
* Homepage: http://sucaijiayuan.com
|
|
*/.slider-pro
|
|
{
|
|
position: relative;
|
|
margin: 0 auto;
|
|
padding-right:124px!important;
|
|
}
|
|
|
|
.sp-slides-container
|
|
{
|
|
position: relative
|
|
}
|
|
|
|
.sp-mask
|
|
{
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin-left:92px;
|
|
}
|
|
|
|
.sp-slides
|
|
{
|
|
position: relative;
|
|
-webkit-backface-visibility: hidden;
|
|
-webkit-perspective: 1000
|
|
}
|
|
|
|
.sp-slide
|
|
{
|
|
position: absolute
|
|
}
|
|
|
|
.sp-image-container
|
|
{
|
|
overflow: hidden
|
|
}
|
|
|
|
.sp-image
|
|
{
|
|
position: relative;
|
|
display: block;
|
|
border: none;
|
|
margin-top:0px!important;
|
|
}
|
|
|
|
.sp-thumbnails-container
|
|
{
|
|
position: relative;
|
|
overflow: hidden
|
|
}
|
|
|
|
.sp-bottom-thumbnails,.sp-top-thumbnails
|
|
{
|
|
left: 0;
|
|
margin: 0 auto
|
|
}
|
|
|
|
.sp-left-thumbnails,.sp-right-thumbnails,.sp-top-thumbnails
|
|
{
|
|
position: absolute;
|
|
top: 0
|
|
}
|
|
|
|
.sp-right-thumbnails
|
|
{
|
|
left: 0
|
|
}
|
|
|
|
.sp-left-thumbnails
|
|
{
|
|
right: 0
|
|
}
|
|
|
|
.sp-thumbnails
|
|
{
|
|
position: relative
|
|
}
|
|
|
|
.sp-thumbnail
|
|
{
|
|
border: none
|
|
}
|
|
|
|
.sp-thumbnail-container
|
|
{
|
|
position: relative;
|
|
display: block;
|
|
overflow: hidden;
|
|
float: left;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box
|
|
}
|
|
|
|
.sp-bottom-thumbnails .sp-thumbnail-container,.sp-top-thumbnails .sp-thumbnail-container
|
|
{
|
|
margin-left: 2px;
|
|
margin-right: 2px
|
|
}
|
|
|
|
.sp-bottom-thumbnails .sp-thumbnail-container:first-child,.sp-top-thumbnails .sp-thumbnail-container:first-child
|
|
{
|
|
margin-left: 0
|
|
}
|
|
|
|
.sp-bottom-thumbnails .sp-thumbnail-container:last-child,.sp-top-thumbnails .sp-thumbnail-container:last-child
|
|
{
|
|
margin-right: 0
|
|
}
|
|
|
|
.sp-left-thumbnails .sp-thumbnail-container,.sp-right-thumbnails .sp-thumbnail-container
|
|
{
|
|
margin-top: 2px;
|
|
margin-bottom: 2px
|
|
}
|
|
|
|
.sp-left-thumbnails .sp-thumbnail-container:first-child,.sp-right-thumbnails .sp-thumbnail-container:first-child
|
|
{
|
|
margin-top: 0
|
|
}
|
|
|
|
.sp-left-thumbnails .sp-thumbnail-container:last-child,.sp-right-thumbnails .sp-thumbnail-container:last-child
|
|
{
|
|
margin-bottom: 0
|
|
}
|
|
|
|
.sp-right-thumbnails.sp-has-pointer
|
|
{
|
|
margin-left:0px
|
|
}
|
|
|
|
.sp-right-thumbnails.sp-has-pointer .sp-thumbnail
|
|
{
|
|
position: absolute;
|
|
left: 0px;
|
|
margin-left: 0!important
|
|
}
|
|
|
|
/*.sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:before
|
|
{
|
|
content: '';
|
|
position: absolute;
|
|
height: 100%;
|
|
border-left: 5px solid red;
|
|
left: 0;
|
|
top: 0;
|
|
margin-left: 13px
|
|
}
|
|
*/
|
|
/*.sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:after
|
|
{
|
|
content: '\25c0';
|
|
position: absolute;
|
|
font-family: Arial;
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
color: red;
|
|
left: 0;
|
|
top: 50%;
|
|
margin-top: -6px
|
|
}
|
|
*/
|
|
/*.ie10 .sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:after,.ie11 .sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:after,.ie9 .sp-right-thumbnails.sp-has-pointer .sp-selected-thumbnail:after
|
|
{
|
|
content: '\25bc';
|
|
-ms-transform: rotate(90deg);
|
|
transform: rotate(90deg)
|
|
}*/
|
|
|
|
/*.sp-left-thumbnails.sp-has-pointer
|
|
{
|
|
margin-right: -13px
|
|
}*/
|
|
|
|
.sp-left-thumbnails.sp-has-pointer .sp-thumbnail
|
|
{
|
|
position: absolute;
|
|
right: 18px
|
|
}
|
|
/*.sp-left-thumbnails.sp-has-pointer .sp-selected-thumbnail:before{content:'';position:absolute;height:100%;border-left:5px solid red;right:0;top:0;margin-right:13px}*//*.sp-left-thumbnails.sp-has-pointer .sp-selected-thumbnail:after{content:'\25ba';position:absolute;font-family:Arial;font-size:16px;line-height:1;color:red;right:0;top:50%;margin-top:-6px}*/
|
|
/*.ie10 .sp-left-thumbnails.sp-has-pointer .sp-selected-thumbnail:after,.ie11 .sp-left-thumbnails.sp-has-pointer .sp-selected-thumbnail:after,.ie9 .sp-left-thumbnails.sp-has-pointer .sp-selected-thumbnail:after
|
|
{
|
|
content: '\25b2';
|
|
-ms-transform: rotate(90deg);
|
|
transform: rotate(90deg)
|
|
}*/
|
|
|
|
.sp-bottom-thumbnails.sp-has-pointer
|
|
{
|
|
margin-top: -13px
|
|
}
|
|
|
|
.sp-bottom-thumbnails.sp-has-pointer .sp-thumbnail
|
|
{
|
|
position: absolute;
|
|
top: 18px;
|
|
margin-top: 0!important
|
|
}
|
|
|
|
.sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:before
|
|
{
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
border-bottom: 5px solid red;
|
|
top: 0;
|
|
margin-top: 13px
|
|
}
|
|
|
|
.sp-bottom-thumbnails.sp-has-pointer .sp-selected-thumbnail:after
|
|
{
|
|
content: '\25b2';
|
|
position: absolute;
|
|
font-family: Arial;
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
color: red;
|
|
left: 50%;
|
|
top: 0;
|
|
margin-left: -9px
|
|
}
|
|
|
|
.sp-top-thumbnails.sp-has-pointer
|
|
{
|
|
margin-bottom: -13px
|
|
}
|
|
|
|
.sp-top-thumbnails.sp-has-pointer .sp-thumbnail
|
|
{
|
|
position: absolute;
|
|
bottom: 18px
|
|
}
|
|
|
|
.sp-top-thumbnails.sp-has-pointer .sp-selected-thumbnail:before
|
|
{
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
border-bottom: 5px solid red;
|
|
bottom: 0;
|
|
margin-bottom: 13px
|
|
}
|
|
|
|
.sp-top-thumbnails.sp-has-pointer .sp-selected-thumbnail:after
|
|
{
|
|
content: '\25bc';
|
|
position: absolute;
|
|
font-family: Arial;
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
color: red;
|
|
left: 50%;
|
|
bottom: 0;
|
|
margin-left: -9px
|
|
}
|
|
|
|
.sp-layer
|
|
{
|
|
position: absolute;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
-webkit-font-smoothing: subpixel-antialiased;
|
|
-webkit-backface-visibility: hidden
|
|
}
|
|
|
|
.sp-black
|
|
{
|
|
color: #FFF;
|
|
background: #000;
|
|
background: rgba(0,0,0,.7)
|
|
}
|
|
|
|
.sp-white
|
|
{
|
|
color: #000;
|
|
background: #fff;
|
|
background: rgba(255,255,255,.7)
|
|
}
|
|
|
|
.sp-rounded
|
|
{
|
|
border-radius: 10px
|
|
}
|
|
|
|
.sp-padding
|
|
{
|
|
padding: 10px
|
|
}
|
|
|
|
/*.sp-grab
|
|
{
|
|
cursor: url(images/openhand.cur),move
|
|
}
|
|
|
|
.sp-grabbing
|
|
{
|
|
cursor: url(images/closedhand.cur),move
|
|
}*/
|
|
|
|
.sp-selectable
|
|
{
|
|
cursor: default;
|
|
}
|
|
|
|
.sp-caption-container
|
|
{
|
|
text-align: center;
|
|
margin-top: 10px
|
|
}
|
|
|
|
.sp-full-screen
|
|
{
|
|
margin: 0!important;
|
|
background-color: #000
|
|
}
|
|
|
|
.sp-full-screen-button
|
|
{
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 10px;
|
|
font-size: 30px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
-webkit-transform: rotate(45deg);
|
|
-ms-transform: rotate(45deg);
|
|
transform: rotate(45deg)
|
|
}
|
|
|
|
.sp-full-screen-button:before
|
|
{
|
|
content: '\2195'
|
|
}
|
|
|
|
.sp-fade-full-screen
|
|
{
|
|
opacity: 0;
|
|
-webkit-transition: opacity .5s;
|
|
transition: opacity .5s
|
|
}
|
|
|
|
.slider-pro:hover .sp-fade-full-screen
|
|
{
|
|
opacity: 1
|
|
}
|
|
|
|
.sp-buttons
|
|
{
|
|
position: relative;
|
|
width: 100%;
|
|
text-align: center;
|
|
padding-top: 10px
|
|
}
|
|
|
|
.sp-button
|
|
{
|
|
width: 10px;
|
|
height: 10px;
|
|
border: 2px solid #000;
|
|
border-radius: 50%;
|
|
margin: 4px;
|
|
display: inline-block;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
cursor: pointer
|
|
}
|
|
|
|
.sp-selected-button
|
|
{
|
|
background-color: #000
|
|
}
|
|
|
|
@media only screen and (min-width:768px) and (max-width:1024px)
|
|
{
|
|
.sp-button
|
|
{
|
|
width: 14px;
|
|
height: 14px
|
|
}
|
|
|
|
.sp-has-buttons
|
|
{
|
|
margin-bottom: 36px
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width:568px) and (max-width:768px)
|
|
{
|
|
.sp-button
|
|
{
|
|
width: 16px;
|
|
height: 16px
|
|
}
|
|
|
|
.sp-has-buttons
|
|
{
|
|
margin-bottom: 38px
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width:320px) and (max-width:568px)
|
|
{
|
|
.sp-button
|
|
{
|
|
width: 18px;
|
|
height: 18px
|
|
}
|
|
|
|
.sp-has-buttons
|
|
{
|
|
margin-bottom: 40px
|
|
}
|
|
}
|
|
|
|
.sp-fade-arrows
|
|
{
|
|
opacity: 0;
|
|
-webkit-transition: opacity .5s;
|
|
transition: opacity .5s
|
|
}
|
|
|
|
.sp-slides-container:hover .sp-fade-arrows
|
|
{
|
|
opacity: 1
|
|
}
|
|
|
|
.sp-arrow
|
|
{
|
|
position: absolute;
|
|
font-size: 40px;
|
|
color: #FFF;
|
|
text-shadow: 1px 1px 1px #666;
|
|
cursor: pointer
|
|
}
|
|
|
|
.sp-vertical .sp-arrow
|
|
{
|
|
-webkit-transform: rotate(90deg);
|
|
-ms-transform: rotate(90deg);
|
|
transform: rotate(90deg)
|
|
}
|
|
|
|
.sp-horizontal .sp-arrow
|
|
{
|
|
top: 65%;
|
|
margin-top: -20px
|
|
}
|
|
|
|
.sp-vertical .sp-arrow
|
|
{
|
|
left: 65%;
|
|
margin-left: -10px
|
|
}
|
|
|
|
.sp-previous-arrow:before
|
|
{
|
|
content: '\276e'
|
|
}
|
|
|
|
.ie7 .sp-previous-arrow:before,.ie8 .sp-previous-arrow:before,.ie9 .sp-previous-arrow:before,.ios .sp-previous-arrow:before
|
|
{
|
|
content: '\25c0'
|
|
}
|
|
|
|
.ie7.sp-vertical .sp-previous-arrow:before,.ie8.sp-vertical .sp-previous-arrow:before
|
|
{
|
|
content: '\25b2'
|
|
}
|
|
|
|
.sp-next-arrow:before
|
|
{
|
|
content: '\276f'
|
|
}
|
|
|
|
.ie7 .sp-next-arrow:before,.ie8 .sp-next-arrow:before,.ie9 .sp-next-arrow:before,.ios .sp-next-arrow:before
|
|
{
|
|
content: '\25b6'
|
|
}
|
|
|
|
.ie7.sp-vertical .sp-next-arrow:before,.ie8.sp-vertical .sp-next-arrow:before
|
|
{
|
|
content: '\25bc'
|
|
}
|
|
|
|
.sp-horizontal .sp-previous-arrow
|
|
{
|
|
left: 20px
|
|
}
|
|
|
|
.sp-horizontal .sp-next-arrow
|
|
{
|
|
right: 20px
|
|
}
|
|
|
|
.sp-vertical .sp-previous-arrow
|
|
{
|
|
top: 20px
|
|
}
|
|
|
|
.sp-vertical .sp-next-arrow
|
|
{
|
|
bottom: 20px
|
|
}
|
|
|
|
.sp-thumbnail-arrows
|
|
{
|
|
position: absolute
|
|
}
|
|
|
|
.sp-fade-thumbnail-arrows
|
|
{
|
|
opacity: 0;
|
|
-webkit-transition: opacity .5s;
|
|
transition: opacity .5s
|
|
}
|
|
|
|
.sp-thumbnails-container:hover .sp-fade-thumbnail-arrows
|
|
{
|
|
opacity: 1
|
|
}
|
|
|
|
.sp-bottom-thumbnails .sp-thumbnail-arrows,.sp-top-thumbnails .sp-thumbnail-arrows
|
|
{
|
|
width: 100%;
|
|
top: 50%;
|
|
left: 0;
|
|
margin-top: -10px
|
|
}
|
|
|
|
.sp-left-thumbnails .sp-thumbnail-arrows,.sp-right-thumbnails .sp-thumbnail-arrows
|
|
{
|
|
height: 100%;
|
|
top: 0;
|
|
left: 50%;
|
|
margin-left: -5px
|
|
}
|
|
|
|
.sp-thumbnail-arrow
|
|
{
|
|
position: absolute;
|
|
font-size: 20px;
|
|
color: #FFF;
|
|
text-shadow: 1px 1px 1px #666;
|
|
cursor: pointer
|
|
}
|
|
|
|
.sp-left-thumbnails .sp-thumbnail-arrows .sp-thumbnail-arrow,.sp-right-thumbnails .sp-thumbnail-arrows .sp-thumbnail-arrow
|
|
{
|
|
-ms-transform: rotate(90deg);
|
|
-webkit-transform: rotate(90deg);
|
|
transform: rotate(90deg)
|
|
}
|
|
|
|
.sp-previous-thumbnail-arrow:before
|
|
{
|
|
content: '\276e'
|
|
}
|
|
|
|
.ie7 .sp-previous-thumbnail-arrow:before,.ie8 .sp-previous-thumbnail-arrow:before,.ie9 .sp-previous-thumbnail-arrow:before,.ios .sp-previous-thumbnail-arrow:before
|
|
{
|
|
content: '\25c0'
|
|
}
|
|
|
|
.ie7.sp-vertical .sp-previous-thumbnail-arrow:before,.ie8.sp-vertical .sp-previous-thumbnail-arrow:before
|
|
{
|
|
content: '\25b2'
|
|
}
|
|
|
|
.sp-next-thumbnail-arrow:before
|
|
{
|
|
content: '\276f'
|
|
}
|
|
|
|
.ie7 .sp-next-thumbnail-arrow:before,.ie8 .sp-next-thumbnail-arrow:before,.ie9 .sp-next-thumbnail-arrow:before,.ios .sp-next-thumbnail-arrow:before
|
|
{
|
|
content: '\25b6'
|
|
}
|
|
|
|
.ie7.sp-vertical .sp-next-thumbnail-arrow:before,.ie8.sp-vertical .sp-next-thumbnail-arrow:before
|
|
{
|
|
content: '\25bc'
|
|
}
|
|
|
|
.sp-bottom-thumbnails .sp-previous-thumbnail-arrow,.sp-top-thumbnails .sp-previous-thumbnail-arrow
|
|
{
|
|
left: 0
|
|
}
|
|
|
|
.sp-bottom-thumbnails .sp-next-thumbnail-arrow,.sp-top-thumbnails .sp-next-thumbnail-arrow
|
|
{
|
|
right: 0
|
|
}
|
|
|
|
.sp-left-thumbnails .sp-previous-thumbnail-arrow,.sp-right-thumbnails .sp-previous-thumbnail-arrow
|
|
{
|
|
top: 0
|
|
}
|
|
|
|
.sp-left-thumbnails .sp-next-thumbnail-arrow,.sp-right-thumbnails .sp-next-thumbnail-arrow
|
|
{
|
|
bottom: 0
|
|
}
|
|
|
|
a.sp-video
|
|
{
|
|
text-decoration: none
|
|
}
|
|
|
|
a.sp-video img
|
|
{
|
|
-webkit-backface-visibility: hidden;
|
|
border: none
|
|
}
|
|
|
|
a.sp-video:after
|
|
{
|
|
content: '\25B6';
|
|
position: absolute;
|
|
width: 45px;
|
|
padding-left: 5px;
|
|
height: 50px;
|
|
border: 2px solid #FFF;
|
|
text-align: center;
|
|
font-size: 30px;
|
|
border-radius: 30px;
|
|
top: 0;
|
|
color: #FFF;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: rgba(0,0,0,.2);
|
|
margin: auto;
|
|
line-height: 52px
|
|
} |