823 lines
12 KiB
CSS
823 lines
12 KiB
CSS
@charset "utf-8";
|
|
|
|
/*缓冲效果开始 2.3加入的*/
|
|
|
|
#shearphoto_main {
|
|
visibility: hidden;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
#shearphoto_loading {
|
|
width: 100px;
|
|
text-align: center;
|
|
line-height: 130px;
|
|
color: #999;
|
|
margin: 0 auto;
|
|
background: url(../images/loading.gif) no-repeat
|
|
}
|
|
|
|
|
|
/*缓冲效果结束*/
|
|
|
|
/*预览开始*/
|
|
|
|
#shearphoto_main #preview {
|
|
float: left;
|
|
position: relative;
|
|
}
|
|
|
|
#shearphoto_main #preview a {
|
|
display: inline;
|
|
float: left;
|
|
-moz-border-radius: 5px;
|
|
border-radius: 5px;
|
|
-moz-box-shadow: 1px 1px 3px 1px #999;
|
|
box-shadow: 1px 1px 3px 1px #999;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
#shearphoto_main #preview a img {
|
|
position: relative;
|
|
}
|
|
|
|
|
|
/*预览结束*/
|
|
|
|
.bottom a:hover {
|
|
color: #39F;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
|
|
/*旋转开始*/
|
|
|
|
#Shearbar #LeftRotate {
|
|
margin: 0 10px;
|
|
}
|
|
|
|
#Shearbar #LeftRotate em,
|
|
#Shearbar #RightRotate em {
|
|
display: inline-block;
|
|
height: 21px;
|
|
vertical-align: middle;
|
|
width: 15px;
|
|
margin: 1px 3px 0 0;
|
|
background: url(../images/bch.jpg) no-repeat;
|
|
}
|
|
|
|
#Shearbar #LeftRotate,
|
|
#Shearbar #RightRotate {
|
|
-moz-border-radius: 5px;
|
|
border: 1px solid #CCC;
|
|
border-radius: 5px;
|
|
color: #666;
|
|
cursor: pointer;
|
|
float: left;
|
|
font-size: 12px;
|
|
margin-top: -5px;
|
|
text-align: center;
|
|
width: 80px;
|
|
padding: 5px 0;
|
|
}
|
|
|
|
#Shearbar #LeftRotate:hover,
|
|
#Shearbar #RightRotate:hover {
|
|
border: 1px solid #919191;
|
|
color: #414141
|
|
}
|
|
|
|
#Shearbar #RightRotate {
|
|
margin-left: 10px
|
|
}
|
|
|
|
#Shearbar #RightRotate em {
|
|
background-position: -91px 0;
|
|
margin: 1px 0 0 3px;
|
|
}
|
|
|
|
#Shearbar .hint {
|
|
color: #333;
|
|
display: block;
|
|
float: left;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
height: 19px;
|
|
line-height: 15px;
|
|
width: 19px
|
|
}
|
|
|
|
#Shearbar .hint.L,
|
|
#Shearbar .hint.R {
|
|
background: url(../images/zoom.png) no-repeat -2px -1px
|
|
}
|
|
|
|
#Shearbar .hint.R {
|
|
background-position: -43px -1px
|
|
}
|
|
|
|
|
|
/*旋转结束*/
|
|
|
|
|
|
/*选择图片方式开始*/
|
|
|
|
#shearphoto_main #SelectBox {
|
|
background: url(../images/bg.png);
|
|
position: absolute;
|
|
z-index: 180
|
|
}
|
|
|
|
#SelectBox #selectImage input {
|
|
height: 74px;
|
|
width: 224px;
|
|
background-color: #FFF;
|
|
filter: alpha(opacity=0);
|
|
opacity: 0;
|
|
position: absolute;
|
|
float: left;
|
|
cursor: pointer;
|
|
display: block;
|
|
}
|
|
|
|
.displayNone {
|
|
display: none;
|
|
}
|
|
|
|
#SelectBox #selectImage,
|
|
#SelectBox #PhotoLoading,
|
|
#SelectBox #camerasImage {
|
|
-moz-border-radius: 10px;
|
|
border-radius: 10px;
|
|
-moz-box-shadow: 2px 2px 7px 1px #3e4044;
|
|
box-shadow: 2px 2px 7px 1px #3e4044;
|
|
display: block;
|
|
height: 74px;
|
|
outline: 0 none;
|
|
position: absolute;
|
|
width: 223px;
|
|
overflow: hidden;
|
|
margin: -37px 0 0 -112px;
|
|
background: url(../images/Select.jpg) no-repeat;
|
|
}
|
|
|
|
#SelectBox #PhotoLoading {
|
|
background-position: 0 -148px;
|
|
left: 50%;
|
|
top: 52%
|
|
}
|
|
|
|
#SelectBox #selectImage {
|
|
left: 50%;
|
|
top: 25%
|
|
}
|
|
|
|
#SelectBox #camerasImage {
|
|
background-position: 0 -74px;
|
|
left: 50%;
|
|
top: 79%
|
|
}
|
|
|
|
#SelectBox #selectImage:hover,
|
|
#SelectBox #PhotoLoading:hover,
|
|
#SelectBox #camerasImage:hover {
|
|
border: 3px solid #666;
|
|
margin: -40px 0 0 -115px;
|
|
}
|
|
|
|
|
|
/*选择图片方式结束*/
|
|
|
|
|
|
/*工具条开始*/
|
|
|
|
#shearphoto_main #Shearbar {
|
|
padding-top: 10px;
|
|
width: 442px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
#Shearbar .Psava {
|
|
clear: both;
|
|
height: 40px;
|
|
padding: 20px 0 0 110px
|
|
}
|
|
|
|
#Shearbar .Psava #againIMG,
|
|
#Shearbar .Psava #saveShear {
|
|
background: url(../images/btn5.jpg) no-repeat;
|
|
color: #666;
|
|
float: left;
|
|
line-height: 31px;
|
|
margin-right: 20px;
|
|
text-align: center;
|
|
width: 79px;
|
|
height: 31px;
|
|
}
|
|
|
|
#Shearbar .Psava #againIMG:hover {
|
|
background-position: 0px -31px;
|
|
}
|
|
|
|
#Shearbar .Psava #saveShear {
|
|
background-position: -79px 0px;
|
|
color: #FFF;
|
|
}
|
|
|
|
#Shearbar .Psava #saveShear:hover {
|
|
background-position: -79px -31px
|
|
}
|
|
|
|
#Shearbar #ZoomDist {
|
|
float: left;
|
|
height: 20px;
|
|
position: relative;
|
|
width: 200px
|
|
}
|
|
|
|
#Shearbar #ZoomDist #ZoomBar {
|
|
background: url(../images/ZoomBar.gif) no-repeat;
|
|
filter: alpha(opacity=80);
|
|
opacity: 0.8;
|
|
height: 20px;
|
|
left: 0;
|
|
position: absolute;
|
|
width: 15px
|
|
}
|
|
|
|
#ZoomDist #Zoomcentre {
|
|
filter: alpha(opacity=100);
|
|
height: 9px;
|
|
left: 50%;
|
|
top: 25px;
|
|
position: absolute;
|
|
width: 10px;
|
|
margin-left: -4px;
|
|
background: url(../images/Zoomcentre.jpg) no-repeat
|
|
}
|
|
|
|
#ZoomDist .progress {
|
|
-moz-border-radius: 15px;
|
|
border-radius: 15px;
|
|
background: #999;
|
|
display: block;
|
|
float: left;
|
|
height: 8px;
|
|
margin-top: 4px;
|
|
overflow: hidden;
|
|
width: 100%
|
|
}
|
|
|
|
|
|
/*工具条结束*/
|
|
|
|
|
|
/*主功能界面开始*/
|
|
|
|
#shearphoto_main #black {
|
|
position: absolute;
|
|
z-index: 99
|
|
}
|
|
|
|
#shearphoto_main .primary {
|
|
float: left;
|
|
}
|
|
|
|
#shearphoto_main #main {
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
-webkit-user-select: none;
|
|
background: url(../images/bg.png);
|
|
overflow: hidden;
|
|
position: relative;
|
|
z-index: 50;
|
|
border: 1px solid #CCC;
|
|
float: left;
|
|
}
|
|
|
|
#main .BigImg {
|
|
float: left;
|
|
position: relative;
|
|
z-index: 51
|
|
}
|
|
|
|
#main .MoveImg {
|
|
position: relative;
|
|
z-index: 98
|
|
}
|
|
|
|
#main #imgID {
|
|
display: block;
|
|
z-index: 51
|
|
}
|
|
|
|
#main #movebox {
|
|
position: absolute;
|
|
z-index: 100;
|
|
float: left;
|
|
}
|
|
|
|
|
|
/*动态边框开始*/
|
|
|
|
#movebox #borderTop,
|
|
#movebox #borderLeft,
|
|
#movebox #borderRight,
|
|
#movebox #borderBottom {
|
|
background: url(../images/border.gif) #FFF;
|
|
display: inline-block;
|
|
filter: alpha(opacity=50);
|
|
opacity: 0.5;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
z-index: 104;
|
|
}
|
|
|
|
#movebox #borderTop {
|
|
height: 1px;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
#movebox #borderLeft {
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
width: 1px;
|
|
}
|
|
|
|
#movebox #borderRight {
|
|
height: 100%;
|
|
right: 0;
|
|
top: 0;
|
|
width: 1px;
|
|
}
|
|
|
|
#movebox #borderBottom {
|
|
bottom: 0;
|
|
height: 1px;
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
/*动态边框结束*/
|
|
|
|
|
|
/*拉伸截框的八个点开始*/
|
|
|
|
#main #movebox #BottomRight,
|
|
#main #movebox #TopRight,
|
|
#main #movebox #Topleft,
|
|
#main #movebox #Bottomleft,
|
|
#main #movebox #Topmiddle,
|
|
#main #movebox #leftmiddle,
|
|
#main #movebox #Rightmiddle,
|
|
#main #movebox #Bottommiddle {
|
|
background: #000;
|
|
border: 1px solid #FFF;
|
|
bottom: -5px;
|
|
cursor: nw-resize;
|
|
display: block;
|
|
filter: alpha(opacity=50);
|
|
height: 8px;
|
|
opacity: 0.5;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
right: -5px;
|
|
width: 8px;
|
|
z-index: 105;
|
|
}
|
|
|
|
#main #movebox #Bottomleft {
|
|
bottom: -5px;
|
|
cursor: ne-resize;
|
|
left: -5px
|
|
}
|
|
|
|
#main #movebox #Bottommiddle {
|
|
bottom: -5px;
|
|
cursor: n-resize;
|
|
left: 50%;
|
|
margin-left: -5px
|
|
}
|
|
|
|
#main #movebox #Rightmiddle {
|
|
cursor: e-resize;
|
|
margin-top: -5px;
|
|
right: -5px;
|
|
top: 50%
|
|
}
|
|
|
|
#main #movebox #TopRight {
|
|
cursor: ne-resize;
|
|
right: -5px;
|
|
top: -5px
|
|
}
|
|
|
|
#main #movebox #Topleft {
|
|
cursor: nw-resize;
|
|
left: -5px;
|
|
top: -5px
|
|
}
|
|
|
|
#main #movebox #Topmiddle {
|
|
cursor: n-resize;
|
|
left: 50%;
|
|
margin-left: -5px;
|
|
top: -5px
|
|
}
|
|
|
|
#main #movebox #leftmiddle {
|
|
cursor: e-resize;
|
|
left: -5px;
|
|
margin-top: -5px;
|
|
top: 50%
|
|
}
|
|
|
|
|
|
/*拉伸截框的八个点结束*/
|
|
|
|
#main #relat {
|
|
position: relative;
|
|
z-index: 60
|
|
}
|
|
|
|
#main #smallbox {
|
|
background: url();
|
|
overflow: hidden;
|
|
position: relative;
|
|
z-index: 100
|
|
}
|
|
|
|
|
|
/*主功能界面结束*/
|
|
|
|
|
|
/*上滚下滚提示的CSS*/
|
|
|
|
#main .point {
|
|
width: 100%;
|
|
line-height: 35px;
|
|
font-size: 12px;
|
|
position: absolute;
|
|
z-index: 200;
|
|
filter: alpha(opacity=70);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.point i {
|
|
display: inline-block;
|
|
height: 16px;
|
|
width: 15px;
|
|
float: left;
|
|
margin: 10px 10px 0 20px;
|
|
background: url(../images/bg_repno.png) no-repeat;
|
|
}
|
|
|
|
|
|
/*上滚下滚提示的CSS结束*/
|
|
|
|
|
|
/*截图完成后的CSS开始*/
|
|
|
|
#shearphoto_main .complete {
|
|
float: left;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
width: 100%;
|
|
z-index: 250;
|
|
padding: 10px 0 0 5px;
|
|
background: url(../images/bg.jpg) #CCC;
|
|
}
|
|
|
|
.complete .completeTxt {
|
|
-moz-border-radius: 10px;
|
|
-moz-box-shadow: 0 0 15px 0 #666;
|
|
border-radius: 10px;
|
|
bottom: 30px;
|
|
box-shadow: 0 0 15px 0 #666;
|
|
position: absolute;
|
|
right: 30px;
|
|
text-align: center;
|
|
width: 280px;
|
|
padding: 30px 0;
|
|
background: #FBFDFF;
|
|
}
|
|
|
|
.complete .completeTxt a {
|
|
color: #FFF;
|
|
display: block;
|
|
font-size: 14px;
|
|
line-height: 40px;
|
|
width: 128px;
|
|
margin: 0 auto;
|
|
background: url(../images/bg_index.gif) no-repeat 0 -2px;
|
|
}
|
|
|
|
.complete .completeTxt a:hover {
|
|
background-position: -137px -2px
|
|
}
|
|
|
|
.complete .completeTxt p {
|
|
color: #666;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.complete .completeTxt strong {
|
|
font-size: 14px
|
|
}
|
|
|
|
.complete img {
|
|
border: 1px solid #CCC;
|
|
display: inline-block;
|
|
float: left;
|
|
margin: 5px 5px;
|
|
padding: 2px;
|
|
}
|
|
|
|
.complete .completeTxt strong i {
|
|
display: inline-block;
|
|
height: 16px;
|
|
width: 15px;
|
|
vertical-align: middle;
|
|
margin: -3px 5px 0 0;
|
|
background: url(../images/bg_repno.png) no-repeat;
|
|
}
|
|
|
|
|
|
/*截图完成后的CSS结束*/
|
|
|
|
|
|
/*弹出相册开始*/
|
|
|
|
#photoalbum {
|
|
-moz-border-radius: 10px;
|
|
-moz-box-shadow: 3px 3px 10px 0 #000;
|
|
border: 8px solid #999;
|
|
border-radius: 10px;
|
|
box-shadow: 3px 3px 10px 0 #000;
|
|
display: none;
|
|
height: 340px;
|
|
left: 50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 465px;
|
|
z-index: 210;
|
|
margin: -178px 0 0 -240.5px;
|
|
background: #DFEFFF;
|
|
}
|
|
|
|
#photoalbum h1 {
|
|
background: #999;
|
|
color: #FFF;
|
|
font-size: 15px;
|
|
height: 40px;
|
|
line-height: 30px;
|
|
padding-left: 10px;
|
|
width: 455px
|
|
}
|
|
|
|
#photoalbum i {
|
|
background: url(../images/fancybox_sprite.png) no-repeat;
|
|
display: block;
|
|
float: left;
|
|
height: 37px;
|
|
left: 429px;
|
|
position: absolute;
|
|
top: 0;
|
|
cursor: pointer;
|
|
width: 36px
|
|
}
|
|
|
|
#photoalbum ul {
|
|
height: auto;
|
|
width: 100%
|
|
}
|
|
|
|
#photoalbum ul li {
|
|
border: 1px solid #CCC;
|
|
cursor: pointer;
|
|
display: inline;
|
|
float: left;
|
|
height: 133px;
|
|
margin: 5px;
|
|
padding: 2px;
|
|
width: 100px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#photoalbum ul li img {
|
|
width: 100%
|
|
}
|
|
|
|
#photoalbum ul li:hover {
|
|
border: 1px solid #09F
|
|
}
|
|
|
|
|
|
/*弹出相册结束*/
|
|
|
|
|
|
/*弹出拍照开始*/
|
|
|
|
#CamBox {
|
|
-moz-border-radius: 10px;
|
|
border-radius: 10px;
|
|
left: 50%;
|
|
position: absolute;
|
|
-moz-box-shadow: 5px 5px 10px 0 #3b3b3f;
|
|
box-shadow: 5px 5px 10px 0 #3b3b3f;
|
|
width: 550px;
|
|
z-index: 250;
|
|
display: none;
|
|
top: 50%;
|
|
margin: -285px 0 0 -276px;
|
|
background: url(../images/cam_bg.jpg) #d5d5d5;
|
|
}
|
|
|
|
#CamBox #CamFlash {
|
|
height: 450px;
|
|
width: 450px;
|
|
margin: 0 auto;
|
|
background: #fff;
|
|
}
|
|
|
|
#CamBox #timing {
|
|
color: #F60;
|
|
display: none;
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
height: 200px;
|
|
left: 50%;
|
|
line-height: 200px;
|
|
position: absolute;
|
|
text-align: center;
|
|
top: 50%;
|
|
width: 200px;
|
|
margin: -100px 0 0 -100px;
|
|
}
|
|
|
|
#CamBox .cambar {
|
|
height: 50px;
|
|
padding-top: 20px;
|
|
width: 300px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
#CamBox .cambar a {
|
|
background: url(../images/btn5.jpg) no-repeat;
|
|
float: left;
|
|
height: 31px;
|
|
line-height: 31px;
|
|
text-align: center;
|
|
width: 79px
|
|
}
|
|
|
|
#CamBox .lens {
|
|
background: url(../images/cam.png) no-repeat 50%;
|
|
height: 50px;
|
|
width: 100%
|
|
}
|
|
|
|
#CamBox .cambar #camClose,
|
|
#CamBox .cambar #setCam {
|
|
color: #333;
|
|
}
|
|
|
|
#CamBox .cambar #setCam {
|
|
margin-right: 30px;
|
|
}
|
|
|
|
#CamBox .cambar #camClose:hover,
|
|
#CamBox .cambar #setCam:hover {
|
|
background-position: 0 -31px;
|
|
}
|
|
|
|
#CamBox .cambar #CamOk {
|
|
background-position: -79px 0;
|
|
color: #fff;
|
|
margin-right: 30px;
|
|
}
|
|
|
|
#CamBox .cambar #CamOk:hover {
|
|
background-position: -79px -31px;
|
|
}
|
|
|
|
|
|
/*弹出拍照结束*/
|
|
|
|
|
|
/*图片特效*/
|
|
|
|
#shearphoto_main .Effects {
|
|
color: #FFF;
|
|
overflow-x: hidden;
|
|
width: 155px;
|
|
display: none;
|
|
float: left;
|
|
border-color: #CCC;
|
|
border-style: solid none;
|
|
border-width: 1px;
|
|
background: url(../images/Effects/cardboard.png);
|
|
}
|
|
|
|
#shearphoto_main .Effects .EffectsStrong {
|
|
border-bottom: solid 1px #676767;
|
|
display: block;
|
|
font-size: 14px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
width: 100%
|
|
}
|
|
|
|
#shearphoto_main .Effects a {
|
|
border-bottom: solid 1px #676767;
|
|
color: #FFF;
|
|
display: block;
|
|
vertical-align: middle;
|
|
text-shadow: #000 0 2px 0;
|
|
width: 100%;
|
|
padding: 5px 0 7px;
|
|
}
|
|
|
|
#shearphoto_main .Effects a:hover,
|
|
#shearphoto_main .Effects .Aclick {
|
|
background-color: #A7A7A7;
|
|
}
|
|
|
|
#shearphoto_main .Effects a img {
|
|
-moz-border-radius: 3px;
|
|
border-radius: 3px;
|
|
display: inline-block;
|
|
height: 42px;
|
|
vertical-align: middle;
|
|
-moz-box-shadow: 0 0 5px 0 #000;
|
|
box-shadow: 0 0 5px 0 #000;
|
|
width: 70px;
|
|
margin: 2px 7px 0;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
height: 13px;
|
|
width: 13px
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: padding-box #c2c2c2;
|
|
border: 1px solid #979797;
|
|
min-height: 28px
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #929292;
|
|
border: 1px solid #636363
|
|
}
|
|
|
|
::-webkit-scrollbar-track-piece {
|
|
background: #f5f5f5;
|
|
border-left: 1px solid #d2d2d2
|
|
}
|
|
|
|
|
|
/*图片特效结束*/
|
|
|
|
|
|
/*底部开始*/
|
|
|
|
.bottom {
|
|
width: 1000px;
|
|
left: 2px;
|
|
color: #666;
|
|
clear: both;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
padding: 0 0 10px 5px
|
|
}
|
|
|
|
.bottom span {
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
margin: 0 5px 0 2px
|
|
}
|
|
|
|
.bottom a {
|
|
color: #666;
|
|
}
|
|
|
|
.header h1 a {
|
|
font-size: 14px;
|
|
color: #fff;
|
|
}
|
|
|
|
.bottom span img {
|
|
border-radius: 30px;
|
|
-moz-border-radius: 30px;
|
|
}
|
|
|
|
|
|
/*底部结束*/ |