mirror of
https://gitee.com/coder-xiaomo/flashsale
synced 2025-01-29 04:30:27 +08:00
174 lines
2.8 KiB
CSS
174 lines
2.8 KiB
CSS
@CHARSET "UTF-8";
|
|
/* BACKGROUND */
|
|
.image-preview-background{
|
|
position:fixed;
|
|
left:0;
|
|
top:0;
|
|
width:100%;
|
|
height:100%;
|
|
padding:60px 32px 90px;
|
|
background:rgba(0,0,0,.85);
|
|
z-index:1020;
|
|
-webkit-transition: all .3s;
|
|
transition: all .3s;
|
|
-webkit-transform:scale(0);
|
|
transform:scale(0);
|
|
}
|
|
.image-preview-background-hover{
|
|
-webkit-transform:scale(1);
|
|
transform:scale(1);
|
|
}
|
|
/* IMAGE-PREVIEW-CTRL */
|
|
.image-preview-ctrl{
|
|
position:absolute;
|
|
color:#ccc;
|
|
font-size:36px;
|
|
width:36px;
|
|
height:36px;
|
|
line-height:36px;
|
|
cursor:pointer;
|
|
}
|
|
.image-preview-close{
|
|
right:32px;
|
|
top:60px;
|
|
}
|
|
.image-preview-next,
|
|
.image-preview-prev{
|
|
font-size:56px;
|
|
width:45px;
|
|
height:80px;
|
|
line-height:80px;
|
|
top:50%;
|
|
margin-top:-40px;
|
|
padding-left:3px;
|
|
}
|
|
.image-preview-next{
|
|
-webkit-transform:rotate(-180deg);
|
|
-ms-transform:rotate(-180deg);
|
|
transform:rotate(-180deg);
|
|
right:32px;
|
|
}
|
|
.image-preview-prev{
|
|
left:32px;
|
|
}
|
|
.image-preview-close:hover{
|
|
color:#fe190f;
|
|
}
|
|
.image-preview-next:hover,
|
|
.image-preview-prev:hover{
|
|
background:#000;
|
|
color:#fff;
|
|
}
|
|
/* WRAPPER */
|
|
.image-preview-wrapper{
|
|
position:relative;
|
|
width:-webkit-calc(100% - 90px);
|
|
width:calc(100% - 90px);
|
|
height:100%;
|
|
margin:0 45px;
|
|
overflow:hidden;
|
|
}
|
|
|
|
/* IMAGE-PREVIEW-CONTAINER */
|
|
.image-preview-container{
|
|
width:100%;
|
|
height:100%;
|
|
opacity:1;
|
|
}
|
|
.image-preview-container-next{
|
|
-webkit-transition: all .7s;
|
|
transition: all .7s;
|
|
-webkit-transform:translateX(120%);
|
|
transform:translateX(120%);
|
|
opacity:0;
|
|
}
|
|
.image-preview-container-prev{
|
|
-webkit-transition: all .7s;
|
|
transition: all .7s;
|
|
-webkit-transform:translateX(-120%);
|
|
transform:translateX(-120%);
|
|
opacity:0;
|
|
}
|
|
.image-preview-container .column{
|
|
height:100%;
|
|
font-size:14px;
|
|
position: relative;
|
|
}
|
|
.image-preview-container .main-image{
|
|
height:100%;
|
|
}
|
|
.image-preview-container .fastKey{
|
|
font-size:12px;
|
|
margin-top: 20px;
|
|
}
|
|
.image-preview-container .like-icon{
|
|
color:#fff;
|
|
margin-top:28px;
|
|
}
|
|
.edit-screenshots-items{
|
|
margin-top:16px;
|
|
}
|
|
.edit-btn{
|
|
font-size:12px;
|
|
padding:6px 10px;
|
|
display:inline-block;
|
|
background:#ccc;
|
|
cursor:pointer;
|
|
margin-right:8px;
|
|
}
|
|
.edit-btn:hover{
|
|
background: #b0b0b0;
|
|
}
|
|
|
|
.edit-btn:link,
|
|
.edit-btn:visited,
|
|
.edit-btn:hover,
|
|
.edit-btn:active{
|
|
color: #666;
|
|
}
|
|
.horizontal-line{
|
|
width:274px;
|
|
margin:16px 0;
|
|
}
|
|
.screenshot-info li{
|
|
margin:28px 0;
|
|
}
|
|
.app-logo{
|
|
width:42px;
|
|
height:42px;
|
|
}
|
|
.app-name{
|
|
position: relative;
|
|
top: -14px;
|
|
left:10px;
|
|
font-size:18px;
|
|
}
|
|
.app-version,
|
|
.updateTime,
|
|
.Marks{
|
|
margin-top:10px;
|
|
}
|
|
.downloadPic-area{
|
|
position:absolute;
|
|
left:0;
|
|
bottom:0;
|
|
}
|
|
.downloadPic-btn{
|
|
font-size:14px;
|
|
margin-left:8px;
|
|
}
|
|
.downloadPic-btn:link,
|
|
.downloadPic-btn:visited,
|
|
.downloadPic-btn:hover,
|
|
.downloadPic-btn:active,
|
|
.app-name:link,
|
|
.app-name:visited,
|
|
.app-name:hover,
|
|
.app-name:active{
|
|
color:#fff;
|
|
}
|
|
.downloadPic-btn:hover,
|
|
.app-name:hover{
|
|
cursor:pointer;
|
|
text-decoration:underline;
|
|
} |