@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; } /*底部结束*/