1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
|
/* Copyright (c) 2011, Jan-Christoph Borchardt, http://jancborchardt.net
This file is licensed under the Affero General Public License version 3 or later.
See the COPYING-README file. */
/* FILE MENU */
.actions { padding:.3em; height:2em; width: 100%; }
.actions input, .actions button, .actions .button { margin:0; float:left; }
#new {
height:17px; margin:0 0 0 1em; z-index:1010; float:left;
}
#new.active { border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom:none; }
#new>a { padding:.5em 1.2em .3em; }
#new>ul {
display:none; position:fixed; min-width:7em; z-index:10;
padding:.5em; padding-bottom:0; margin-top:.075em; margin-left:-.5em;
text-align:left;
background:#f8f8f8; border:1px solid #ddd; border-radius:10px; border-top-left-radius:0;
box-shadow:0 2px 7px rgba(170,170,170,.4);
}
#new>ul>li { height:20px; margin:.3em; padding-left:2em; padding-bottom:0.1em;
background-repeat:no-repeat; cursor:pointer; }
#new>ul>li>p { cursor:pointer; }
#new>ul>li>form>input { padding:0.3em; margin:-0.3em; }
#trash { height:17px; margin: 0 1em; z-index:1010; float: right; }
#upload {
height:27px; padding:0; margin-left:0.2em; overflow:hidden;
}
#upload a {
position:relative; display:block; width:100%; height:27px;
cursor:pointer; z-index:10;
background-image:url('%webroot%/core/img/actions/upload.svg');
background-repeat:no-repeat;
background-position:7px 6px;
}
.file_upload_target { display:none; }
.file_upload_form { display:inline; float:left; margin:0; padding:0; cursor:pointer; overflow:visible; }
#file_upload_start {
left:0; top:0; width:28px; height:27px; padding:0;
font-size:1em;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0;
z-index:20; position:relative; cursor:pointer; overflow:hidden;
}
#uploadprogresswrapper { float: right; position: relative; }
#uploadprogresswrapper #uploadprogressbar { position:relative; display:inline-block; width:10em; height:1.5em; top:.4em; }
/* FILE TABLE */
#emptyfolder {
position:absolute;
margin:10em 0 0 10em;
font-size:1.5em; font-weight:bold;
color:#888; text-shadow:#fff 0 1px 0;
}
#filestable { position: relative; top:37px; width:100%; }
tbody tr { background-color:#fff; height:2.5em; }
tbody tr:hover, tbody tr:active, tbody tr.selected { background-color:#f8f8f8; }
tbody tr.selected { background-color:#eee; }
tbody a { color:#000; }
span.extension, span.uploading, td.date { color:#999; }
span.extension { text-transform:lowercase; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); opacity:.7; -webkit-transition:opacity 300ms; -moz-transition:opacity 300ms; -o-transition:opacity 300ms; transition:opacity 300ms; }
tr:hover span.extension { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; color:#777; }
table tr.mouseOver td { background-color:#eee; }
table th { height:2em; padding:0 .5em; color:#999; }
table th .name { float:left; margin-left:.5em; }
table th, table td { border-bottom:1px solid #ddd; text-align:left; font-weight:normal; }
table td { border-bottom:1px solid #eee; font-style:normal; background-position:1em .5em; background-repeat:no-repeat; }
table th#headerName { width:100em; /* not really sure why this works better than 100% … table styling */ }
table th#headerSize, table td.filesize { min-width:3em; padding:0 1em; text-align:right; }
table th#headerDate, table td.date { min-width:11em; padding:0 .1em 0 1em; text-align:left; }
/* Multiselect bar */
#filestable.multiselect { top:63px; }
table.multiselect thead { position:fixed; top:82px; z-index:1; -moz-box-sizing: border-box; box-sizing: border-box; left: 0; padding-left: 64px; width:100%; }
table.multiselect thead th { background:rgba(230,230,230,.8); color:#000; font-weight:bold; border-bottom:0; }
table.multiselect #headerName { width: 100%; }
table td.selection, table th.selection, table td.fileaction { width:2em; text-align:center; }
table td.filename a.name { display:block; height:1.5em; vertical-align:middle; margin-left:3em; }
table tr[data-type="dir"] td.filename a.name span.nametext {font-weight:bold; }
table td.filename input.filename { width:100%; cursor:text; }
table td.filename a, table td.login, table td.logout, table td.download, table td.upload, table td.create, table td.delete { padding:.2em .5em .5em 0; }
table td.filename .nametext, .uploadtext, .modified { float:left; padding:.3em 0; }
/* TODO fix usability bug (accidental file/folder selection) */
table td.filename .nametext { overflow:hidden; text-overflow:ellipsis; width:800px; }
table td.filename .uploadtext { font-weight:normal; margin-left:.5em; }
table td.filename form { font-size:.85em; margin-left:3em; margin-right:3em; }
/* File checkboxes */
#fileList tr td.filename>input[type="checkbox"]:first-child { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; float:left; margin:.7em 0 0 1em; /* bigger clickable area doesn’t work in FF width:2.8em; height:2.4em;*/ -webkit-transition:opacity 200ms; -moz-transition:opacity 200ms; -o-transition:opacity 200ms; transition:opacity 200ms; }
#fileList tr td.filename>input[type="checkbox"]:hover:first-child { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter:alpha(opacity=80); opacity:.8; }
/* Always show checkbox when selected */
#fileList tr td.filename>input[type="checkbox"]:checked:first-child { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; }
#fileList tr.selected td.filename>input[type="checkbox"]:first-child { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; }
#fileList tr td.filename {
position:relative; width:100%;
-webkit-transition:background-image 500ms; -moz-transition:background-image 500ms; -o-transition:background-image 500ms; transition:background-image 500ms;
}
#select_all { float:left; margin:.3em 0.6em 0 .5em; }
#uploadsize-message,#delete-confirm { display:none; }
/* File actions */
.fileactions {
position:absolute; top:.6em; right:0;
font-size:.8em;
}
#fileList .name { position:relative; /* Firefox needs to explicitly have this default set … */ }
#fileList tr:hover .fileactions { /* background to distinguish when overlaying with file names */
background:rgba(248,248,248,.9); box-shadow:-5px 0 7px rgba(248,248,248,.9);
}
#fileList tr.selected:hover .fileactions, #fileList tr.mouseOver .fileactions { /* slightly darker color for selected rows */
background:rgba(238,238,238,.9); box-shadow:-5px 0 7px rgba(238,238,238,.9);
}
#fileList .fileactions a.action img { position:relative; top:.2em; }
#fileList a.action { display:inline; margin:-.5em 0; padding:1em .5em 1em .5em !important; }
#fileList img.move2trash { display:inline; margin:-.5em 0; padding:1em .5em 1em .5em !important; float:right; }
a.action.delete { float:right; }
a.action>img { max-height:16px; max-width:16px; vertical-align:text-bottom; }
.selectedActions { display:none; float:right; }
.selectedActions a { display:inline; margin:-.5em 0; padding:.5em !important; }
.selectedActions a img { position:relative; top:.3em; }
#fileList a.action {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
display:none;
}
#fileList tr:hover a.action, #fileList a.action.permanent {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=.5)";
filter: alpha(opacity=.5);
opacity: .5;
display:inline;
}
#fileList tr:hover a.action:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
filter: alpha(opacity=1);
opacity: 1;
display:inline;
}
#scanning-message{ top:40%; left:40%; position:absolute; display:none; }
div.crumb a{ padding:0.9em 0 0.7em 0; }
table.dragshadow {
width:auto;
}
table.dragshadow td.filename {
padding-left:36px;
padding-right:16px;
}
table.dragshadow td.size {
padding-right:8px;
}
#upgrade {
width: 400px;
position: absolute;
top: 200px;
left: 50%;
text-align: center;
margin-left: -200px;
}
|
