165 lines
3.4 KiB
CSS
165 lines
3.4 KiB
CSS
@charset "utf-8";
|
|
|
|
|
|
|
|
.sp-slider-wrapper {
|
|
|
|
box-sizing: content-box;
|
|
-webkit-box-sizing: content-box;
|
|
-moz-box-sizing: content-box;
|
|
padding: 15px 65px;
|
|
position: relative;
|
|
margin:0 auto;
|
|
|
|
width: 0px;
|
|
top:0px;
|
|
text-align:right;
|
|
left:0px;
|
|
-webkit-transition: width 150ms ease-out;
|
|
transition: width 150ms ease-out;
|
|
|
|
}
|
|
|
|
|
|
.sp-slider-wrapper .pageNum {
|
|
|
|
position: absolute;
|
|
width: 30px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
top: 0;
|
|
left:-50px;
|
|
color:#fff;
|
|
text-indent: -9000px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sp-slider-wrapper nav a {
|
|
position: absolute;
|
|
width: 30px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
top: 0;
|
|
cursor: pointer;
|
|
text-indent: -9000px;
|
|
background:url(../images/arrow-l-r.gif) no-repeat;
|
|
}
|
|
|
|
.sp-slider-wrapper nav a.sp-prev {
|
|
left: 0px;
|
|
background-position:0 16px;
|
|
}
|
|
|
|
.sp-slider-wrapper nav a.sp-next {
|
|
right: 0px;
|
|
background-position:100% 16px;
|
|
}
|
|
|
|
.sp-slider-wrapper nav a:after {
|
|
font-family: 'arrowicons';
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
speak: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
line-height: inherit;
|
|
text-indent: 0px;
|
|
font-size: 30px;
|
|
color: #fff;
|
|
text-shadow: 0 1px 1px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.sp-slider {
|
|
background: rgba(151,151,151,0.1);
|
|
border: 1px solid rgba(108,108,108, 0.2);
|
|
border-bottom: 1px solid rgba(108,108,108, 0.05);
|
|
box-shadow: 0 1px 0 rgba(255,255,255,0.7);
|
|
height: 20px;
|
|
border-radius: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.sp-slider .ui-slider-handle {
|
|
outline: none;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
border: none;
|
|
top: -12px;
|
|
margin-left: -20px;
|
|
left: 0;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
background-color: #fff;
|
|
background-image: -webkit-linear-gradient(-90deg, transparent, rgba(0,0,0,0.07) 80%);
|
|
background-image: -moz-linear-gradient(-90deg, transparent, rgba(0,0,0,0.07) 80%);
|
|
background-image: -o-linear-gradient(-90deg, transparent, rgba(0,0,0,0.07) 80%);
|
|
background-image: linear-gradient(-90deg, transparent, rgba(0,0,0,0.07) 80%);
|
|
box-shadow:
|
|
0 -1px 0 rgba(0,0,0,0.1),
|
|
0 1px 0 rgba(255,255,255,0.7),
|
|
inset 1px -1px 1px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.sp-slider .ui-slider-handle.ui-state-active {
|
|
box-shadow:
|
|
0 -1px 0 rgba(0,0,0,0.1),
|
|
0 1px 0 rgba(255,255,255,0.7),
|
|
inset 1px -1px 2px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.sp-slider-open .ui-slider-handle {
|
|
box-shadow:
|
|
0 1px 2px rgba(0,0,0,0.1),
|
|
0 6px 3px -3px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.sp-slider-open .ui-slider-handle.ui-state-active {
|
|
box-shadow:
|
|
0 1px 2px rgba(0,0,0,0.1),
|
|
0 4px 3px -3px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.sp-slider .ui-slider-handle:after,
|
|
.sp-slider .ui-slider-handle:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 10%;
|
|
top: 10%;
|
|
width: 80%;
|
|
height: 80%;
|
|
border-radius: 50%;
|
|
opacity: 0.8;
|
|
background-color: #fff;
|
|
background-image: -webkit-linear-gradient(-90deg, rgba(0,0,0,0.06), transparent 80%);
|
|
background-image: -moz-linear-gradient(-90deg, rgba(0,0,0,0.06), transparent 80%);
|
|
background-image: -o-linear-gradient(-90deg, rgba(0,0,0,0.06), transparent 80%);
|
|
background-image: linear-gradient(-90deg, rgba(0,0,0,0.06), transparent 80%);
|
|
}
|
|
|
|
.sp-slider .ui-slider-handle span {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 10;
|
|
text-align: center;
|
|
background: transparent;
|
|
color: #ccc;
|
|
font-family: 'Lato', Arial, sans-serif;
|
|
font-weight: 900;
|
|
line-height: 40px;
|
|
font-size: 14px;
|
|
text-shadow: 0 1px 1px rgba(255,255,255,0.9);
|
|
}
|
|
|
|
.sp-slider-open .ui-slider-handle span {
|
|
color: #aaa;
|
|
} |