改善上传面板在全屏下的效果

This commit is contained in:
祁宁
2014-09-26 22:58:34 +08:00
parent 3e5a01637b
commit fbda6bc514
7 changed files with 329 additions and 103 deletions
+33 -2
View File
@@ -148,6 +148,27 @@
}
}
/* 上传面板动画效果 */
@keyframes fullscreen-upload {
0% {opacity: 0; right: -280px; }
100% {opacity: 1; right: -1px; }
}
@-moz-keyframes fullscreen-upload {
0% {opacity: 0; right: -280px; }
100% {opacity: 1; right: -1px; }
}
@-webkit-keyframes fullscreen-upload {
0% {opacity: 0; right: -280px; }
100% {opacity: 1; right: -1px; }
}
@-o-keyframes fullscreen-upload {
0% {opacity: 0; right: -280px; }
100% {opacity: 1; right: -1px; }
}
/* 编辑器全屏 */
.fullscreen {
#wmd-button-bar, #text, #wmd-preview, .submit {
@@ -192,14 +213,24 @@
padding: 10px 20px;
border-bottom: 1px solid #F3F3F0;
}
#upload-panel {
-webkit-box-shadow: 0 4px 16px rgba(0,0,0,0.225);
box-shadow: 0 4px 16px rgba(0,0,0,0.225);
border-style: solid;
}
// 全屏附件上传
#tab-files {
position: absolute;
top: 52px;
right: 20px;
right: -1px;
width: 280px;
z-index: 1001;
animation: fullscreen-upload 0.5s;
-moz-animation: fullscreen-upload 0.5s;
-webkit-animation: fullscreen-upload 0.5s;
-o-animation: fullscreen-upload 0.5s;
}
.wmd-edittab,
@@ -214,4 +245,4 @@
#btn-fullscreen-upload {
visibility: visible;
}
}
}