308 lignes
10 KiB
CSS
308 lignes
10 KiB
CSS
|
/*
|
||
|
|
RoxyFileman - web based file manager. Ready to use with CKEditor, TinyMCE.
|
||
|
|
Can be easily integrated with any other WYSIWYG editor or CMS.
|
||
|
|
|
||
|
|
Copyright (C) 2013, RoxyFileman.com - Lyubomir Arsov. All rights reserved.
|
||
|
|
For licensing, see LICENSE.txt or http://RoxyFileman.com/license
|
||
|
|
|
||
|
|
This program is free software: you can redistribute it and/or modify
|
||
|
|
it under the terms of the GNU General Public License as published by
|
||
|
|
the Free Software Foundation, either version 3 of the License.
|
||
|
|
|
||
|
|
This program is distributed in the hope that it will be useful,
|
||
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||
|
|
GNU General Public License for more details.
|
||
|
|
|
||
|
|
You should have received a copy of the GNU General Public License
|
||
|
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||
|
|
|
||
|
|
Contact: Lyubomir Arsov, liubo (at) web-lobby.com
|
||
|
|
*/
|
||
|
|
body{
|
||
|
|
font-family: Verdana;
|
||
|
|
font-size: 11px;
|
||
|
|
padding:0;
|
||
|
|
margin:0;
|
||
|
|
background:#FFF;
|
||
|
|
height:100%;
|
||
|
|
width:100%;
|
||
|
|
}
|
||
|
|
a{text-decoration:none;color:#DD7700;}
|
||
|
|
ul{
|
||
|
|
list-style:none;
|
||
|
|
margin:0;
|
||
|
|
padding:0;
|
||
|
|
}
|
||
|
|
#wraper{
|
||
|
|
width:100%;
|
||
|
|
height:100%;
|
||
|
|
}
|
||
|
|
#wraper,#dlgNewDir,#dlgFileProp,#dlgAddFile,#menuDir,
|
||
|
|
#menuFile,#pnlRenameFile,#pnlLoadingDirs,
|
||
|
|
#pnlDirName,#pnlLoading,#pnlEmptyDir,
|
||
|
|
#pnlSearchNoFiles,#pnlFileProp, #pnlDirList ul{
|
||
|
|
display:none;
|
||
|
|
}
|
||
|
|
.contextMenu a:hover,
|
||
|
|
#pnlFileList .selected,#pnlFileList .selected:hover,
|
||
|
|
#menuFile a:hover{
|
||
|
|
background-color: #000099 !important;
|
||
|
|
color:#FFF;
|
||
|
|
}
|
||
|
|
#pnlDirList .selected,#pnlDirList div.selected:hover{background-color: #DFD !important;}
|
||
|
|
.dialog input{width:97%;}
|
||
|
|
.filesize{font-weight:bold;margin-top:4px;display:inline-block;}
|
||
|
|
.pnlDragFile,.pnlDragDir{
|
||
|
|
background:#FFF;
|
||
|
|
opacity:0.8;
|
||
|
|
float:left;
|
||
|
|
width:auto !important;
|
||
|
|
}
|
||
|
|
#pnlStatus{
|
||
|
|
padding:5px;
|
||
|
|
}
|
||
|
|
.scrollPane{
|
||
|
|
height:400px;
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
.bottomLine{background:#DDD;border-top:1px solid #CCC;}
|
||
|
|
.pale{opacity:0.5;}
|
||
|
|
/* Search and order fields */
|
||
|
|
#txtSearch,#ddlOrder{
|
||
|
|
border:1px solid #CCC;
|
||
|
|
border-radius:3px;
|
||
|
|
}
|
||
|
|
#txtSearch{
|
||
|
|
padding:0 22px 0 3px;
|
||
|
|
background:url(../images/sprite.png) no-repeat 87px -314px;
|
||
|
|
width:80px;
|
||
|
|
height:20px;
|
||
|
|
}
|
||
|
|
input[type=text]::-ms-clear { display: none; }
|
||
|
|
/* END OF Search and order fields */
|
||
|
|
|
||
|
|
/* Directory tree */
|
||
|
|
.pnlDirs{
|
||
|
|
width:260px;
|
||
|
|
overflow:auto;
|
||
|
|
border-right:1px solid #DDD;
|
||
|
|
}
|
||
|
|
#pnlDirList{margin-left:4px;}
|
||
|
|
#pnlDirList ul{padding:0 0 0 20px;}
|
||
|
|
#pnlDirList .dir{
|
||
|
|
line-height:30px;
|
||
|
|
float:left;
|
||
|
|
margin-right:5px;
|
||
|
|
}
|
||
|
|
#pnlDirList .dirPlus{
|
||
|
|
float:left;
|
||
|
|
margin: 3px 3px 0 0;
|
||
|
|
}
|
||
|
|
#pnlDirList li,#pnlDirList div{
|
||
|
|
float:left;
|
||
|
|
clear:both;
|
||
|
|
width:98%;
|
||
|
|
}
|
||
|
|
#pnlDirList div{padding:3px;cursor:pointer;}
|
||
|
|
#pnlLoadingDirs{margin-left:5px;}
|
||
|
|
/* END OF Directory tree */
|
||
|
|
|
||
|
|
/* File list */
|
||
|
|
.pnlFiles{padding-left:4px;}
|
||
|
|
#pnlFileList .icon{float:left;margin-right:3px;}
|
||
|
|
#pnlFileList li{float:left;padding:3px;clear:both;width:98%;cursor:pointer;}
|
||
|
|
#pnlFileList li:hover,#pnlDirList li div:hover{background:#FFFFCC !important;}
|
||
|
|
#pnlFileList .size{float:right;margin-left:20px;}
|
||
|
|
#pnlFileList .time{float:right;margin-left:15px;width:130px;}
|
||
|
|
.imgPreview{max-width:300px;}
|
||
|
|
/* END OF File list */
|
||
|
|
|
||
|
|
/* Context menus */
|
||
|
|
.contextMenu{
|
||
|
|
position:absolute;
|
||
|
|
background-color:#DDD;
|
||
|
|
border:1px solid #BBB;
|
||
|
|
min-width:100px;
|
||
|
|
font-weight: bold;
|
||
|
|
z-index:1000 !important;
|
||
|
|
}
|
||
|
|
.contextMenu a{
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: 4px 6px;
|
||
|
|
padding: 5px 25px 5px 20px;
|
||
|
|
display:block;
|
||
|
|
color:#000;
|
||
|
|
text-decoration:none;
|
||
|
|
}
|
||
|
|
hr{margin:0;color:#AAA;}
|
||
|
|
/* END OF Context menus */
|
||
|
|
|
||
|
|
/* Buttons */
|
||
|
|
.actions{padding:3px 0 10px 5px;}
|
||
|
|
.actions input{
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: 3px center;
|
||
|
|
padding:0 3px 0 18px;
|
||
|
|
height:22px;
|
||
|
|
font-size: 11px;
|
||
|
|
border:1px solid #CCC;
|
||
|
|
background-color: #EEE;
|
||
|
|
border-radius:3px;
|
||
|
|
margin-bottom: 3px;
|
||
|
|
}
|
||
|
|
.actions input[type=button]:hover,.actions input.selected{background-color: #DFD;cursor:pointer;}
|
||
|
|
#btnAddDir{background-image:url(../images/sprite.png);background-position: 4px -213px;}
|
||
|
|
#mnuCreateDir{background-image:url(../images/sprite.png);background-position: 4px -210px;}
|
||
|
|
#mnuDownloadDir{background-image:url(../images/sprite.png);background-position: 4px 7px;}
|
||
|
|
#btnDeleteDir{background-image:url(../images/sprite.png);background-position: 4px -237px;}
|
||
|
|
#mnuDeleteDir{background-image:url(../images/sprite.png);background-position: 4px -235px;}
|
||
|
|
#btnAddFile{background-image:url(../images/sprite.png);background-position: 4px -81px;}
|
||
|
|
#btnDeleteFile{background-image:url(../images/sprite.png);background-position: 4px -104px;}
|
||
|
|
#mnuDeleteFile{background-image:url(../images/sprite.png);background-position: 4px -102px;}
|
||
|
|
#btnDeleteFile{margin-right:15px;}
|
||
|
|
#btnDownloadFile{background-image:url(../images/sprite.png);background-position: 4px -128px;}
|
||
|
|
#mnuDownload{background-image:url(../images/sprite.png);background-position: 4px -126px;}
|
||
|
|
#btnPreviewFile{background-image:url(../images/sprite.png);background-position: 4px -285px;}
|
||
|
|
#mnuPreview{background-image:url(../images/sprite.png);background-position: 4px -283px;}
|
||
|
|
#btnSelectFile{background-image:url(../images/sprite.png);background-position: 4px -399px;}
|
||
|
|
#mnuSelectFile{background-image:url(../images/sprite.png);background-position: 4px -397px;}
|
||
|
|
#btnThumbView{background-image:url(../images/sprite.png);background-position: center -447px;}
|
||
|
|
#btnListView{background-image:url(../images/sprite.png);background-position: center -483px;}
|
||
|
|
#btnRenameFile,#btnRenameDir{background-image:url(../images/sprite.png);background-position: 4px 4px;}
|
||
|
|
#mnuRenameDir,#mnuRenameFile{background-image:url(../images/sprite.png);background-position: 4px 7px;}
|
||
|
|
#mnuDirCut,#mnuFileCut{background-image:url(../images/sprite.png);background-position: 4px -47px;}
|
||
|
|
#mnuDirCopy,#mnuFileCopy{background-image:url(../images/sprite.png);background-position: 4px -20px;}
|
||
|
|
#mnuDirPaste,#mnuFilePaste{background-image:url(../images/sprite.png);background-position: 4px -370px;}
|
||
|
|
|
||
|
|
/* END OF Buttons */
|
||
|
|
/* File list views */
|
||
|
|
ul#pnlFileList.thumbView li{
|
||
|
|
/*
|
||
|
|
width:140px;
|
||
|
|
height: 140px;
|
||
|
|
*/
|
||
|
|
float:left !important;
|
||
|
|
clear:none;
|
||
|
|
margin:0 6px 6px 0;
|
||
|
|
overflow:hidden;
|
||
|
|
padding:10px;
|
||
|
|
text-align:center;
|
||
|
|
vertical-align:middle;
|
||
|
|
border: 1px solid #EEE;
|
||
|
|
border-radius: 5px;
|
||
|
|
position:relative;
|
||
|
|
background:#EEE;
|
||
|
|
}
|
||
|
|
ul#pnlFileList.thumbView .name,ul#pnlFileList.thumbView .time{display:none;}
|
||
|
|
ul#pnlFileList.thumbView .icon{
|
||
|
|
clear:both;
|
||
|
|
float:none;
|
||
|
|
margin:0 !important;
|
||
|
|
text-align:center;
|
||
|
|
vertical-align:middle;
|
||
|
|
background-position:center center;
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
/*
|
||
|
|
width:140px;
|
||
|
|
height:120px;
|
||
|
|
*/
|
||
|
|
}
|
||
|
|
ul#pnlFileList.thumbView .size{
|
||
|
|
display:block !important;
|
||
|
|
width:95% !important;
|
||
|
|
position:absolute;
|
||
|
|
bottom:5px;
|
||
|
|
margin:0;
|
||
|
|
}
|
||
|
|
/* END OF File list views */
|
||
|
|
#fileUploads{width:100%;}
|
||
|
|
.uploadFilesList{
|
||
|
|
width:100%;
|
||
|
|
height:300px;
|
||
|
|
overflow:auto;
|
||
|
|
}
|
||
|
|
#uploadResult{
|
||
|
|
|
||
|
|
}
|
||
|
|
div.ui-tooltip {
|
||
|
|
max-width: 90%;
|
||
|
|
}
|
||
|
|
/* Upload dialog */
|
||
|
|
.uploadFilesList{
|
||
|
|
font-size: 11px;
|
||
|
|
}
|
||
|
|
.fileUpload{
|
||
|
|
margin: 8px 0 0 0;
|
||
|
|
position: relative;
|
||
|
|
border:1px solid #EEE;
|
||
|
|
}
|
||
|
|
.fileUpload .error{font-weight:bold;}
|
||
|
|
.fileName{
|
||
|
|
z-index:2;
|
||
|
|
line-height: 20px;
|
||
|
|
height:20px;
|
||
|
|
overflow: hidden;
|
||
|
|
padding:0 13px 0 5px;
|
||
|
|
}
|
||
|
|
.progressPercent{z-index:2;}
|
||
|
|
.stripes{
|
||
|
|
background: url('../images/stripes.gif') repeat-x;
|
||
|
|
-moz-opacity: 0.40;
|
||
|
|
-khtml-opacity: 0.40;
|
||
|
|
opacity: 0.40;
|
||
|
|
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
|
||
|
|
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
|
||
|
|
filter: alpha(opacity=40);
|
||
|
|
width:100%;
|
||
|
|
height:100%;
|
||
|
|
z-index:-1;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.uploadProgress{
|
||
|
|
position: absolute;
|
||
|
|
width:0;
|
||
|
|
height:100%;
|
||
|
|
top:0;
|
||
|
|
left:0;
|
||
|
|
z-index:-1;
|
||
|
|
background: #d3edff;
|
||
|
|
background: -moz-linear-gradient(top, #d3edff 0%, #cbebff 47%, #a1dbff 100%);
|
||
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3edff), color-stop(47%,#cbebff), color-stop(100%,#a1dbff));
|
||
|
|
background: -webkit-linear-gradient(top, #d3edff 0%,#cbebff 47%,#a1dbff 100%);
|
||
|
|
background: -o-linear-gradient(top, #d3edff 0%,#cbebff 47%,#a1dbff 100%);
|
||
|
|
background: -ms-linear-gradient(top, #d3edff 0%,#cbebff 47%,#a1dbff 100%);
|
||
|
|
background: linear-gradient(to bottom, #d3edff 0%,#cbebff 47%,#a1dbff 100%);
|
||
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3edff', endColorstr='#a1dbff',GradientType=0 );
|
||
|
|
}
|
||
|
|
.uploadError{
|
||
|
|
background: #ff8787;
|
||
|
|
background: -moz-linear-gradient(top, #ff8787 0%, #ffa3a3 45%, #ff5e5e 100%);
|
||
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8787), color-stop(45%,#ffa3a3), color-stop(100%,#ff5e5e));
|
||
|
|
background: -webkit-linear-gradient(top, #ff8787 0%,#ffa3a3 45%,#ff5e5e 100%);
|
||
|
|
background: -o-linear-gradient(top, #ff8787 0%,#ffa3a3 45%,#ff5e5e 100%);
|
||
|
|
background: -ms-linear-gradient(top, #ff8787 0%,#ffa3a3 45%,#ff5e5e 100%);
|
||
|
|
background: linear-gradient(to bottom, #ff8787 0%,#ffa3a3 45%,#ff5e5e 100%);
|
||
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8787', endColorstr='#ff5e5e',GradientType=0 );
|
||
|
|
}
|
||
|
|
.uploadComplete{
|
||
|
|
background: #dbff87;
|
||
|
|
background: -moz-linear-gradient(top, #dbff87 0%, #e0f49c 45%, #bddd49 100%);
|
||
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dbff87), color-stop(45%,#e0f49c), color-stop(100%,#bddd49));
|
||
|
|
background: -webkit-linear-gradient(top, #dbff87 0%,#e0f49c 45%,#bddd49 100%);
|
||
|
|
background: -o-linear-gradient(top, #dbff87 0%,#e0f49c 45%,#bddd49 100%);
|
||
|
|
background: -ms-linear-gradient(top, #dbff87 0%,#e0f49c 45%,#bddd49 100%);
|
||
|
|
background: linear-gradient(to bottom, #dbff87 0%,#e0f49c 45%,#bddd49 100%);
|
||
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbff87', endColorstr='#bddd49',GradientType=0 );
|
||
|
|
}
|
||
|
|
.uploadError .stripes,.uploadComplete .stripes{display:none;}
|
||
|
|
.removeUpload{
|
||
|
|
background:url(../images/sprite.png) no-repeat 6px -421px;
|
||
|
|
position:absolute;
|
||
|
|
right:0;
|
||
|
|
top:0;
|
||
|
|
height: 100%;
|
||
|
|
width:20px;
|
||
|
|
cursor:pointer;
|
||
|
|
}
|
||
|
|
/* END OF Upload dialog */
|