Blame view
sources/apps/files/css/files.css
8.71 KB
|
03e52840d
|
1 2 3 4 5 6 7 |
/* 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; }
|
|
31b7f2792
|
8 9 |
.actions .button a { color: #555; }
.actions .button a:hover, .actions .button a:active { color: #333; }
|
|
03e52840d
|
10 11 |
#new {
|
|
31b7f2792
|
12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
z-index: 1010;
float: left;
padding: 0 !important; /* override default control bar button padding */
}
#trash {
margin-right: 8px;
float: right;
z-index: 1010;
padding: 10px;
font-weight: normal;
}
#new>a {
padding: 14px 10px;
position: relative;
top: 7px;
}
#new.active {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: none;
|
|
03e52840d
|
32 |
} |
|
03e52840d
|
33 |
#new>ul {
|
|
31b7f2792
|
34 35 36 37 38 39 40 41 |
display: none; position: fixed; min-width: 7em; z-index: 10; padding: .5em; padding-bottom: 0; margin-top: 14px; margin-left: -1px; |
|
03e52840d
|
42 |
text-align:left; |
|
31b7f2792
|
43 44 45 46 |
background: #f8f8f8; border: 1px solid #ddd; border-radius: 5px; border-top-left-radius: 0; |
|
03e52840d
|
47 48 |
box-shadow:0 2px 7px rgba(170,170,170,.4); } |
|
31b7f2792
|
49 |
#new>ul>li { height:36px; margin:.3em; padding-left:3em; padding-bottom:0.1em;
|
|
03e52840d
|
50 |
background-repeat:no-repeat; cursor:pointer; } |
|
31b7f2792
|
51 52 53 54 55 56 57 58 59 |
#new>ul>li>p { cursor:pointer; padding-top: 7px; padding-bottom: 7px;}
#new .error, #fileList .error {
color: #e9322d;
border-color: #e9322d;
-webkit-box-shadow: 0 0 6px #f8b9b7;
-moz-box-shadow: 0 0 6px #f8b9b7;
box-shadow: 0 0 6px #f8b9b7;
}
|
|
03e52840d
|
60 |
|
|
31b7f2792
|
61 |
/* FILE TABLE */ |
|
03e52840d
|
62 |
|
|
31b7f2792
|
63 64 65 66 |
#filestable {
position: relative;
top: 44px;
width: 100%;
|
|
03e52840d
|
67 |
} |
|
31b7f2792
|
68 69 |
#filestable, #controls {
min-width: 680px;
|
|
03e52840d
|
70 |
} |
|
31b7f2792
|
71 72 73 |
#filestable tbody tr { background-color:#fff; height:2.5em; }
#filestable tbody tr:hover, tbody tr:active {
background-color: rgb(240,240,240);
|
|
03e52840d
|
74 |
} |
|
31b7f2792
|
75 76 |
#filestable tbody tr.selected {
background-color: rgb(230,230,230);
|
|
03e52840d
|
77 |
} |
|
31b7f2792
|
78 79 |
#filestable tbody tr.searchresult {
background-color: rgb(240,240,240);
|
|
03e52840d
|
80 |
} |
|
03e52840d
|
81 82 83 84 85 86 |
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; }
|
|
31b7f2792
|
87 88 89 90 91 |
table th .name {
position: absolute;
left: 55px;
top: 15px;
}
|
|
03e52840d
|
92 |
table th, table td { border-bottom:1px solid #ddd; text-align:left; font-weight:normal; }
|
|
31b7f2792
|
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 |
table td {
border-bottom: 1px solid #eee;
font-style: normal;
background-position: 8px center;
background-repeat: no-repeat;
}
table th#headerName {
position: relative;
width: 100em; /* not really sure why this works better than 100% … table styling */
padding: 0;
}
#headerName-container {
position: relative;
height: 50px;
}
table th#headerSize, table td.filesize {
min-width: 3em;
padding: 0 1em;
text-align: right;
}
table th#headerDate, table td.date {
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
min-width: 11em;
}
|
|
03e52840d
|
119 120 |
/* Multiselect bar */ |
|
31b7f2792
|
121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 |
#filestable.multiselect {
top: 95px;
}
table.multiselect thead {
position: fixed;
top: 89px;
z-index: 10;
-moz-box-sizing: border-box;
box-sizing: border-box;
left: 0;
padding-left: 80px;
width: 100%;
}
table.multiselect thead th {
background-color: rgba(220,220,220,.8);
color: #000;
font-weight: bold;
border-bottom: 0;
}
table.multiselect #headerName {
position: relative;
width: 100%;
}
|
|
03e52840d
|
145 |
table td.selection, table th.selection, table td.fileaction { width:2em; text-align:center; }
|
|
31b7f2792
|
146 147 148 149 150 151 152 153 154 |
table td.filename a.name {
position:relative; /* Firefox needs to explicitly have this default set … */
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
height: 50px;
vertical-align: middle;
padding: 0;
}
|
|
03e52840d
|
155 |
table tr[data-type="dir"] td.filename a.name span.nametext {font-weight:bold; }
|
|
31b7f2792
|
156 157 158 159 160 161 162 163 |
table td.filename input.filename {
width: 80%;
font-size: 14px;
margin-top: 8px;
margin-left: 2px;
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 .3em; }
|
|
03e52840d
|
164 |
table td.filename .nametext, .uploadtext, .modified { float:left; padding:.3em 0; }
|
|
31b7f2792
|
165 166 167 168 169 170 171 172 |
#modified {
position: absolute;
top: 15px;
}
.modified {
position: relative;
}
|
|
03e52840d
|
173 |
/* TODO fix usability bug (accidental file/folder selection) */ |
|
31b7f2792
|
174 175 176 177 178 179 180 181 182 |
table td.filename .nametext {
position: absolute;
top: 16px;
left: 55px;
padding: 0;
overflow: hidden;
text-overflow: ellipsis;
max-width: 800px;
}
|
|
03e52840d
|
183 184 |
table td.filename .uploadtext { font-weight:normal; margin-left:.5em; }
table td.filename form { font-size:.85em; margin-left:3em; margin-right:3em; }
|
|
31b7f2792
|
185 186 187 |
.ie8 input[type="checkbox"]{
padding: 0;
}
|
|
03e52840d
|
188 |
/* File checkboxes */ |
|
31b7f2792
|
189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 |
#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: 32px 0 4px 32px; /* bigger clickable area doesn’t work in FF width:2.8em; height:2.4em;*/
}
/* Show checkbox when hovering, checked, or selected */
#fileList tr:hover td.filename>input[type="checkbox"]:first-child,
#fileList tr td.filename>input[type="checkbox"]:checked:first-child,
#fileList tr.selected td.filename>input[type="checkbox"]:first-child {
opacity: 1;
}
.lte9 #fileList tr:hover td.filename>input[type="checkbox"]:first-child,
.lte9 #fileList tr td.filename>input[type="checkbox"][checked=checked]:first-child,
.lte9 #fileList tr.selected td.filename>input[type="checkbox"]:first-child {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
}
/* Use label to have bigger clickable size for checkbox */
#fileList tr td.filename>input[type="checkbox"] + label,
#select_all + label {
height: 50px;
position: absolute;
width: 50px;
z-index: 5;
}
#fileList tr td.filename>input[type="checkbox"] + label {
left: 0;
}
#select_all + label {
top: 0;
}
#select_all {
position: absolute;
top: 18px;
left: 18px;
}
|
|
03e52840d
|
228 229 230 231 232 |
#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;
}
|
|
31b7f2792
|
233 234 235 236 237 238 |
#fileList tr td.filename a.name label {
position: absolute;
width: 100%;
height: 50px;
}
|
|
03e52840d
|
239 240 241 242 |
#uploadsize-message,#delete-confirm { display:none; }
/* File actions */
.fileactions {
|
|
31b7f2792
|
243 244 245 |
position: absolute; top: 14px; right: 0; |
|
03e52840d
|
246 |
} |
|
31b7f2792
|
247 |
|
|
03e52840d
|
248 |
#fileList img.move2trash { display:inline; margin:-.5em 0; padding:1em .5em 1em .5em !important; float:right; }
|
|
31b7f2792
|
249 250 251 252 253 |
#fileList a.action.delete {
position: absolute;
right: 0;
padding: 9px 14px 19px !important;
}
|
|
03e52840d
|
254 |
a.action>img { max-height:16px; max-width:16px; vertical-align:text-bottom; }
|
|
31b7f2792
|
255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 |
/* Actions for selected files */
.selectedActions {
display: none;
position: absolute;
top: -1px;
right: 0;
padding: 15px 8px;
}
.selectedActions a {
display: inline;
padding: 17px 5px;
}
.selectedActions a img {
position:relative;
top:.3em;
}
|
|
03e52840d
|
272 273 |
#fileList a.action {
|
|
31b7f2792
|
274 275 276 |
display: inline; margin: -.5em 0; padding: 18px 8px !important; |
|
03e52840d
|
277 278 279 280 281 282 |
-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 {
|
|
31b7f2792
|
283 284 |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); |
|
03e52840d
|
285 286 287 288 |
opacity: .5;
display:inline;
}
#fileList tr:hover a.action:hover {
|
|
31b7f2792
|
289 290 |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); |
|
03e52840d
|
291 292 293 |
opacity: 1; display:inline; } |
|
31b7f2792
|
294 295 296 297 298 299 |
.summary {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: .3;
height: 70px;
}
|
|
03e52840d
|
300 |
|
|
31b7f2792
|
301 302 303 304 305 306 307 308 309 310 311 312 313 314 |
.summary:hover, .summary, table tr.summary td {
background-color: transparent;
}
.summary td {
padding-top: 8px;
padding-bottom: 8px;
border-bottom: none;
}
.summary .info {
margin-left: 55px;
}
#scanning-message{ top:40%; left:40%; position:absolute; display:none; }
|
|
03e52840d
|
315 316 317 318 319 |
table.dragshadow {
width:auto;
}
table.dragshadow td.filename {
|
|
31b7f2792
|
320 |
padding-left:60px; |
|
03e52840d
|
321 |
padding-right:16px; |
|
31b7f2792
|
322 |
height: 36px; |
|
03e52840d
|
323 324 325 326 327 328 329 330 331 332 333 334 |
}
table.dragshadow td.size {
padding-right:8px;
}
#upgrade {
width: 400px;
position: absolute;
top: 200px;
left: 50%;
text-align: center;
margin-left: -200px;
}
|
|
31b7f2792
|
335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 |
.mask {
z-index: 50;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
background-repeat: no-repeat no-repeat;
background-position: 50%;
opacity: 0.7;
filter: alpha(opacity=70);
transition: opacity 100ms;
-moz-transition: opacity 100ms;
-o-transition: opacity 100ms;
-ms-transition: opacity 100ms;
-webkit-transition: opacity 100ms;
}
.mask.transparent{
opacity: 0;
|
|
03e52840d
|
355 |
} |