theme/bootstrapbase/less/moodle/filemanager.less

   1  // File Picker and File Manager
   2 .filemanager,
   3 .filepicker,
   4 .file-picker {
   5     font-size: 11px;
   6 }
   7 .filemanager a,
   8 .file-picker a,
   9 .filemanager a:hover,
  10 .file-picker a:hover {
  11     color: #555555;
  12     text-decoration: none;
  13 }
  14 .filemanager input[type="text"],
  15 .file-picker input[type="text"] {
  16     width: 265px;
  17 }
  18 .filemanager .fp-license,
  19 .file-picker .fp-setlicense {
  20     td {
  21         max-width: 265px;
  22     }
  23     select {
  24         max-width: 100%;
  25     }
  26 }
  27 .fp-content-center {
  28     height: 100%;
  29     width: 100%;
  30     display: table-cell;
  31     vertical-align: middle;
  32 }
  33 .fp-content-hidden {
  34     visibility: hidden;
  35 }
  36 // Dialogue (File Picker and File Manager)
  37 .yui3-panel-focused {
  38     outline: none;
  39 }
  40 #filesskin .yui3-panel-content {
  41     padding-bottom: 20px;
  42     background: #F2F2F2;
  43     .border-radius(8px);
  44     border: 1px solid #fff;
  45     display: inline-block;
  46     .ie7-inline-block();
  47     .box-shadow(5px 5px 20px 0 #666);
  48 }
  49 #filesskin .yui3-widget-hd {
  50     .border-radius(10px 10px 0 0);
  51     border-bottom: 1px solid #BBBBBB;
  52     padding: 5px;
  53     text-align: center;
  54     font-size: 12px;
  55     color: #333;
  56     letter-spacing: 1px;
  57     text-shadow: 1px 1px 1px #fff;
  58     filter: dropshadow(color=#FFFFFF, offx=1, offy=1);
  59     #gradient > .vertical (#fff, #ccc);
  60 }
  61 .fp-panel-button {
  62     background: #fff;
  63     padding: 3px 20px 2px 20px;
  64     text-align: center;
  65     margin: 10px;
  66     .border-radius(10px);
  67     display: inline-block;
  68     .ie7-inline-block();
  69     .box-shadow(2px 2px 3px .1px #999);
  70 }
  71
  72 .filepicker .moodle-dialogue-wrap .moodle-dialogue-bd {
  73     padding: 0px;
  74 }
  75 // File Picker layout
  76 #filesskin .file-picker.fp-generallayout {
  77     width: 859px;
  78     background: #FFFFFF;
  79     .border-radius(10px);
  80     border: 1px solid #CCCCCC;
  81     position: relative;
  82 }
  83 .file-picker .fp-repo-area {
  84     width: 180px;
  85     overflow: auto;
  86     display: inline-block;
  87     .ie7-inline-block();
  88     float: left;
  89     height: 525px;
  90     border-right: 1px solid #BBBBBB;
  91 }
  92 .dir-rtl .file-picker .fp-repo-area {
  93     border-left: 1px solid #BBBBBB;
  94     border-right: none;
  95     float: right;
  96 }
  97 .file-picker .fp-repo-items {
  98     float: left;
  99     width: 693px;
 100 }
 101 .dir-rtl .file-picker .fp-repo-items {
 102     float: right;
 103 }
 104 .file-picker .fp-navbar {
 105     background: #F2F2F2;
 106     min-height: 22px;
 107     border-bottom: 1px solid #BBBBBB;
 108     padding: 5px 8px;
 109 }
 110 .file-picker .fp-content {
 111     background: #FFFFFF;
 112     clear: both;
 113     overflow: auto;
 114     height: 468px;
 115 }
 116 .filepicker.moodle-dialogue-fullscreen .file-picker .fp-content {
 117     width: 100%;
 118     height: 100%;
 119 }
 120 .dir-rtl .file-picker .fp-repo-items {
 121     margin-right: 181px;
 122 }
 123 .file-picker .fp-content-loading {
 124     height: 100%;
 125     width: 100%;
 126     display: table;
 127     text-align: center;
 128 }
 129 .file-picker .fp-content .fp-object-container {
 130     width: 98%;
 131     height: 98%;
 132 }
 133 .dir-rtl .file-picker .fp-list {
 134     text-align: right;
 135 }
 136 .dir-rtl .file-picker .fp-toolbar {
 137     padding: 0;
 138 }
 139 .dir-rtl .file-picker .fp-list {
 140     text-align: right;
 141 }
 142 .dir-rtl .file-picker .fp-repo-name {
 143     display: inline;
 144 }
 145 .dir-rtl .file-picker .fp-pathbar {
 146     text-align: right;
 147     display: block;
 148     border-top: none;
 149 }
 150 .dir-rtl .file-picker div.bd {
 151     text-align: right;
 152 }
 153 .dir-rtl #filemenu .yuimenuitemlabel {
 154     text-align: right;
 155 }
 156 .dir-rtl .filepicker .yui-layout-unit-left {
 157     left: 500px;
 158 }
 159 .dir-rtl .filepicker .yui-layout-unit-center {
 160     left: 0;
 161 }
 162 // File Manager
 163 .dir-rtl .filemanager-toolbar a {
 164     padding: 0;
 165 }
 166 // Repositories on fp-repo-area (File Picker only)
 167 .file-picker .fp-list {
 168     list-style-type: none;
 169     padding: 0;
 170     float: left;
 171     width: 100%;
 172     margin: 0;
 173 }
 174 .dir-rtl .file-picker .fp-list {
 175     text-align: right;
 176     float: left;
 177 }
 178 .file-picker .fp-list .fp-repo a {
 179     display: block;
 180     padding: .5em .7em;
 181 }
 182 .file-picker .fp-list .fp-repo.active {
 183     background: #F2F2F2;
 184 }
 185 .file-picker .fp-list .fp-repo-icon {
 186     padding: 0 7px 0 5px;
 187 }
 188 // Tools, Path & View on fp-navbar (File Picker and File Manager)
 189 .fp-toolbar {
 190     display: table-row;
 191     line-height: 22px;
 192     float: left;
 193     max-width: 70%;
 194 }
 195 .dir-rtl .fp-toolbar {
 196     float: right;
 197 }
 198 .fp-toolbar.empty {
 199     display: none;
 200 }
 201 .fp-toolbar .disabled {
 202     display: none;
 203 }
 204 .fp-toolbar div {
 205     display: inline-block;
 206     .ie7-inline-block();
 207     padding: 0 2px;
 208     padding-right: 10px;
 209 }
 210 .dir-rtl .fp-toolbar div {
 211     width: 100px;
 212     padding-right: 0px;
 213 }
 214 .fp-toolbar img {
 215     vertical-align: -15%;
 216     margin-right: 5px;
 217 }
 218 .fp-toolbar .fp-tb-search {
 219     width: 228px;
 220     height: 14px;
 221 }
 222 .fp-toolbar .fp-tb-search input {
 223     background: #FFFFFF url('[[pix:a/search]]') no-repeat 3px 3px;
 224     padding: 2px 6px 1px 20px;
 225     width: 200px;
 226     height: 16px;
 227     border: 1px solid #BBBBBB;
 228 }
 229 .fp-viewbar {
 230     float: right;
 231     width: 69px;
 232     height: 22px;
 233     margin-right: 8px;
 234 }
 235 .dir-rtl .fp-toolbar img {
 236     vertical-align: -35%;
 237 }
 238 .dir-rtl .fp-viewbar {
 239     float: left;
 240     width: 100px;
 241 }
 242 .fp-vb-icons {
 243     background: url('[[pix:theme|fp/view_icon_active]]') no-repeat 0 0;
 244     width: 22px;
 245     height: 22px;
 246     display: inline-block;
 247     .ie7-inline-block();
 248 }
 249 .dir-rtl .fp-vb-icons {
 250     background: url('[[pix:theme|fp/view_icon_active]]') no-repeat 0 0;
 251     display: block;
 252     float: left;
 253     margin-right: 4px;
 254 }
 255 .fp-vb-icons.checked {
 256     background: url('[[pix:theme|fp/view_icon_selected]]');
 257 }
 258 .dir-rtl .fp-vb-icons.checked {
 259     background: url('[[pix:theme|fp/view_icon_selected]]');
 260     display: block;
 261     float: left;
 262     margin-right: 4px;
 263 }
 264 .fp-viewbar.disabled .fp-vb-icons {
 265     background: url('[[pix:theme|fp/view_icon_inactive]]');
 266 }
 267 .fp-vb-details {
 268     background: url('[[pix:theme|fp/view_list_active]]') no-repeat 0 0;
 269     width: 23px;
 270     height: 22px;
 271     display: inline-block;
 272     .ie7-inline-block();
 273     margin-left: -4px;
 274 }
 275 .dir-rtl .fp-vb-details {
 276     background: url('[[pix:theme|fp/view_list_active]]') no-repeat 0 0;
 277     display: block;
 278     float: left;
 279     margin-right: 4px;
 280 }
 281 .fp-vb-details.checked {
 282     background: url('[[pix:theme|fp/view_list_selected]]');
 283 }
 284 .dir-rtl .fp-vb-details.checked {
 285     background: url('[[pix:theme|fp/view_list_selected]]');
 286     display: block;
 287     float: left;
 288     margin-right: 4px;
 289 }
 290 .fp-viewbar.disabled .fp-vb-details {
 291     background: url('[[pix:theme|fp/view_list_inactive]]');
 292 }
 293 .fp-vb-tree {
 294     background: url('[[pix:theme|fp/view_tree_active]]') no-repeat 0 0;
 295     width: 23px;
 296     height: 22px;
 297     display: inline-block;
 298     .ie7-inline-block();
 299     margin-left: -4px;
 300 }
 301 .dir-rtl .fp-vb-tree {
 302     background: url('[[pix:theme|fp/view_tree_active]]') no-repeat 0 0;
 303     display: block;
 304     float: left;
 305     margin-right: 4px;
 306 }
 307 .fp-vb-tree.checked {
 308     background: url('[[pix:theme|fp/view_tree_selected]]');
 309 }
 310 .dir-rtl .fp-vb-tree.checked {
 311     background: url('[[pix:theme|fp/view_tree_selected]]');
 312     display: block;
 313     float: left;
 314     margin-right: 4px;
 315 }
 316 .fp-viewbar.disabled .fp-vb-tree {
 317     background: url('[[pix:theme|fp/view_tree_inactive]]');
 318 }
 319 .file-picker .fp-clear-left {
 320     clear: left;
 321 }
 322 // over ride hover rule from core.css
 323 .dir-rtl .filemanager-toolbar .fp-vb-icons a:hover {
 324     background: url('[[pix:theme|fp/view_icon_selected]]');
 325 }
 326 .dir-rtl .filemanager-toolbar .fp-vb-icons.checked a:hover {
 327     background: url('[[pix:theme|fp/view_icon_active]]') no-repeat 0 0;
 328 }
 329 .dir-rtl .fp-vb-details a:hover {
 330     background: none;
 331     border: 20px solid black;
 332 }
 333 .dir-rtl .fp-vb-details.checked a:hover {
 334     background: none;
 335     border: 40px solid black;
 336 }
 337 .dir-rtl .fp-vb-tree a:hover {
 338     background: none;
 339     border: 30px solid black;
 340 }
 341 .dir-rtl .fp-vb-tree.checked a:hover {
 342     background: none;
 343     border: 50px solid black;
 344 }
 345 .file-picker .fp-pathbar {
 346     display: table-row;
 347 }
 348 .fp-pathbar.empty {
 349     display: none;
 350 }
 351 .fp-pathbar .fp-path-folder {
 352     background: url('[[pix:theme|fp/path_folder]]') no-repeat 0 0;
 353     width: 27px;
 354     height: 12px;
 355     margin-left: 4px;
 356 }
 357 .dir-rtl .fp-pathbar .fp-path-folder {
 358     background: url('[[pix:theme|fp/path_folder_rtl]]') no-repeat right top;
 359     width: auto;
 360     height: 12px;
 361     margin-left: 4px;
 362 }
 363 .dir-rtl .fp-pathbar span {
 364     display: inline-block;
 365     .ie7-inline-block();
 366     float: right;
 367     margin-left: 32px;
 368 }
 369 .fp-pathbar .fp-path-folder-name {
 370     margin-left: 32px;
 371     line-height: 20px;
 372 }
 373 .dir-rtl .fp-pathbar .fp-path-folder-name {
 374     margin-right: 32px;
 375     line-height: 20px;
 376 }
 377 // Icon view (File Picker and File Manager)
 378 .fp-iconview .fp-file {
 379     float: left;
 380     text-align: center;
 381     position: relative;
 382     margin: 10px 10px 35px;
 383 }
 384 .fp-iconview .fp-thumbnail {
 385     min-width: 110px;
 386     min-height: 110px;
 387     line-height: 110px;
 388     text-align: center;
 389     border: 1px solid #FFFFFF;
 390     display: block;
 391 }
 392 .fp-iconview .fp-thumbnail img {
 393     border: 1px solid #ddd;
 394     padding: 3px;
 395     vertical-align: middle;
 396     .box-shadow(1px 1px 2px 0 #ccc);
 397 }
 398 .fp-iconview .fp-thumbnail:hover {
 399     background: #fff;
 400     border: 1px solid #ddd;
 401     .box-shadow(inset 0 0 10px 0px #ccc);
 402 }
 403 .fp-iconview .fp-filename-field {
 404     height: 33px;
 405     word-wrap: break-word;
 406     overflow: hidden;
 407     position: absolute;
 408 }
 409 .fp-iconview .fp-filename-field:hover {
 410     overflow: visible;
 411     z-index: 1000;
 412 }
 413 .fp-iconview .fp-filename-field .fp-filename {
 414     background: #FFFFFF;
 415     padding-top: 5px;
 416     padding-bottom: 12px;
 417     min-width: 112px;
 418 }
 419 .dir-rtl .fp-iconview .fp-file {
 420     float: right;
 421 }
 422 // Table view (File Picker only)
 423 .file-picker .yui3-datatable table {
 424     border: 0 solid #BBBBBB;
 425     width: 100%;
 426 }
 427 #filesskin .file-picker .yui3-datatable-header {
 428     background: #FFFFFF;
 429     border-bottom: 1px solid #CCCCCC;
 430     border-left: 0 solid #FFFFFF;
 431     color: #555555;
 432 }
 433 #filesskin .file-picker .yui3-datatable-odd .yui3-datatable-cell {
 434     background-color: #F6F6F6;
 435     border-left: 0 solid #F6F6F6;
 436 }
 437 #filesskin .file-picker .yui3-datatable-even .yui3-datatable-cell {
 438     background-color: #FFFFFF;
 439     border-left: 0 solid #FFFFFF;
 440 }
 441 .dir-rtl .file-picker .yui3-datatable-header {
 442     text-align: right;
 443 }
 444 // Tree view (File Manager only)
 445
 446 // first or middle sibling, no children
 447 .file-picker .ygtvtn,
 448 .filemanager .ygtvtn {
 449     background: url('[[pix:moodle|y/tn]]') 0 0 no-repeat;
 450     width: 17px;
 451     height: 22px;
 452 }
 453 .dir-rtl .filemanager .ygtvtn,
 454 .dir-rtl .file-picker .ygtvtn {
 455     background: url('[[pix:moodle|y/tn_rtl]]') 0 0 no-repeat;
 456     width: 17px;
 457     height: 22px;
 458 }
 459 // first or middle sibling, collapsable
 460 .file-picker .ygtvtm,
 461 .filemanager .ygtvtm {
 462     background: url('[[pix:moodle|y/tm]]') 0 10px no-repeat;
 463     width: 13px;
 464     height: 12px;
 465     cursor: pointer;
 466 }
 467 // first or middle sibling, collapsable, hover
 468 .file-picker .ygtvtmh,
 469 .filemanager .ygtvtmh {
 470     background: url('[[pix:moodle|y/tm]]') 0 10px no-repeat;
 471     width: 13px;
 472     height: 12px;
 473     cursor: pointer;
 474 }
 475 // first or middle sibling, expandable
 476 .file-picker .ygtvtp,
 477 .filemanager .ygtvtp {
 478     background: url('[[pix:moodle|y/tp]]') 0 10px no-repeat;
 479     width: 13px;
 480     height: 12px;
 481     cursor: pointer;
 482 }
 483 .dir-rtl .file-picker .ygtvtp,
 484 .dir-rtl .filemanager .ygtvtp {
 485     background: url('[[pix:moodle|y/tp_rtl]]') 0 10px no-repeat;
 486 }
 487 // first or middle sibling, expandable, hover
 488 .file-picker .ygtvtph,
 489 .filemanager .ygtvtph {
 490     background: url('[[pix:moodle|y/tp]]') 0 10px no-repeat;
 491     width: 13px;
 492     height: 22px;
 493     cursor: pointer;
 494 }
 495 .dir-rtl .file-picker .ygtvtph,
 496 .dir-rtl .filemanager .ygtvtph {
 497     background: url('[[pix:moodle|y/tp_rtl]]') 0 10px no-repeat;
 498 }
 499 // last sibling, no children
 500 .file-picker .ygtvln,
 501 .filemanager .ygtvln {
 502     background: url('[[pix:moodle|y/ln]]') 0 0 no-repeat;
 503     width: 17px;
 504     height: 22px;
 505 }
 506 .dir-rtl .file-picker .ygtvln,
 507 .dir-rtl .filemanager .ygtvln {
 508     background: url('[[pix:moodle|y/ln_rtl]]') 0 0 no-repeat;
 509 }
 510 // Last sibling, collapsable
 511 .file-picker .ygtvlm,
 512 .filemanager .ygtvlm {
 513     background: url('[[pix:moodle|y/lm]]') 0 10px no-repeat;
 514     width: 13px;
 515     height: 12px;
 516     cursor: pointer;
 517 }
 518 // Last sibling, collapsable, hover
 519 .file-picker .ygtvlmh,
 520 .filemanager .ygtvlmh {
 521     background: url('[[pix:moodle|y/lm]]') 0 10px no-repeat;
 522     width: 13px;
 523     height: 12px;
 524     cursor: pointer;
 525 }
 526 // Last sibling, expandable
 527 .file-picker .ygtvlp,
 528 .filemanager .ygtvlp {
 529     background: url('[[pix:moodle|y/lp]]') 0 10px no-repeat;
 530     width: 13px;
 531     height: 12px;
 532     cursor: pointer;
 533 }
 534 .dir-rtl .file-picker .ygtvlp,
 535 .dir-rtl .filemanager .ygtvlp {
 536     background: url('[[pix:moodle|y/lp_rtl]]') 0 10px no-repeat;
 537 }
 538 // Last sibling, expandable, hover
 539 .file-picker .ygtvlph,
 540 .filemanager .ygtvlph {
 541     background: url('[[pix:moodle|y/lp]]') 0 10px no-repeat;
 542     width: 13px;
 543     height: 12px;
 544     cursor: pointer;
 545 }
 546 .dir-rtl .file-picker .ygtvlph,
 547 .dir-rtl .filemanager .ygtvlph {
 548     background: url('[[pix:moodle|y/lp_rtl]]') 0 10px no-repeat;
 549 }
 550 // Loading icon
 551 .file-picker .ygtvloading,
 552 .filemanager .ygtvloading {
 553     background: transparent url('[[pix:moodle|y/loading]]') 0 0 no-repeat;
 554     width: 16px;
 555     height: 22px;
 556 }
 557 // the style for the empty cells that are used for rendering the depth of the node
 558 .file-picker .ygtvdepthcell,
 559 .filemanager .ygtvdepthcell {
 560     background: url('[[pix:moodle|y/vline]]') 0 0 no-repeat;
 561     width: 17px;
 562     height: 32px;
 563 }
 564 .file-picker .ygtvblankdepthcell,
 565 .filemanager .ygtvblankdepthcell {
 566     width: 17px;
 567     height: 22px;
 568 }
 569 a.ygtvspacer:hover {
 570     color: transparent;
 571     text-decoration: none;
 572 }
 573 .ygtvlabel,
 574 .ygtvlabel:link,
 575 .ygtvlabel:visited,
 576 .ygtvlabel:hover {
 577     background-color: transparent;
 578     cursor: pointer;
 579     margin-left: 2px;
 580     text-decoration: none;
 581 }
 582 .file-picker .ygtvfocus,
 583 .filemanager .ygtvfocus {
 584     background-color: #EEEEEE;
 585 }
 586 .fp-filename-icon {
 587     margin-top: 10px;
 588     display: block;
 589     position: relative;
 590 }
 591 .fp-icon {
 592     float: left;
 593     margin-top: -7px;
 594     width: 24px;
 595     height: 24px;
 596     margin-right: 10px;
 597     text-align: center;
 598     line-height: 24px;
 599 }
 600 .dir-rtl .fp-icon {
 601     float: right;
 602     margin-left: 10px;
 603     margin-right: 0;
 604 }
 605 .fp-icon img {
 606     max-height: 24px;
 607     max-width: 24px;
 608     vertical-align: middle;
 609 }
 610 .fp-filename {
 611     padding-right: 10px;
 612 }
 613 .dir-rtl .fp-filename {
 614     padding-left: 10px;
 615     padding-right: 0;
 616 }
 617 // Repositories Login on fp-content (File Picker only)
 618
 619 .file-picker .fp-login-form {
 620     height: 100%;
 621     width: 100%;
 622     display: table;
 623 }
 624 .file-picker .fp-login-form table {
 625     margin: 0 auto;
 626 }
 627 .file-picker .fp-login-form p {
 628     text-align: center;
 629     margin-top: 3em;
 630 }
 631 .file-picker .fp-login-form .fp-login-input label {
 632     text-align: right;
 633     display: block;
 634 }
 635 .file-picker .fp-login-form .fp-login-input .input {
 636     text-align: left;
 637 }
 638 .file-picker .fp-login-form input[type="checkbox"]{
 639     width: 15px;
 640     height: 15px;
 641 }
 642 // Upload on fp-content (File Picker only)
 643 .file-picker .fp-upload-form {
 644     height: 100%;
 645     width: 100%;
 646     display: table;
 647 }
 648 .file-picker .fp-upload-form table {
 649     margin: 0 auto;
 650 }
 651 // File exists dialogue on Upload (File Picker only)
 652 .file-picker.fp-dlg {
 653     text-align: center;
 654 }
 655 .file-picker.fp-dlg .fp-dlg-text {
 656     padding: 30px 20px 10px;
 657     font-size: 12px;
 658 }
 659 .file-picker.fp-dlg .fp-dlg-buttons {
 660     margin: 0 20px;
 661 }
 662 // Error dialogue on Upload (File Picker only)
 663 .file-picker.fp-msg {
 664     text-align: center;
 665 }
 666 .file-picker.fp-msg .fp-msg-text {
 667     padding: 40px 20px 10px 20px;
 668     min-width: 200px;
 669     max-width: 500px;
 670     max-height: 300px;
 671     overflow: auto;
 672     font-size: 12px;
 673 }
 674 .file-picker.fp-msg.fp-msg-error .fp-msg-text {
 675     padding: 40px 20px 10px 20px;
 676     font-size: 12px;
 677 }
 678 // Error on fp-content (File Picker only)
 679 .file-picker .fp-content-error {
 680     height: 100%;
 681     width: 100%;
 682     display: table;
 683     text-align: center;
 684 }
 685 .file-picker .fp-content-error .fp-error {
 686     height: 100%;
 687     width: 100%;
 688     display: table-cell;
 689     vertical-align: middle;
 690     padding: 40px 20px 10px 20px;
 691     font-size: 12px;
 692 }
 693 // Lazy loading on fp-content (File Picker only)
 694 .file-picker .fp-nextpage {
 695     clear: both;
 696 }
 697 .file-picker .fp-nextpage .fp-nextpage-loading {
 698     display: none;
 699 }
 700 .file-picker .fp-nextpage.loading .fp-nextpage-link {
 701     display: none;
 702 }
 703 .file-picker .fp-nextpage.loading .fp-nextpage-loading {
 704     display: block;
 705     text-align: center;
 706     height: 100px;
 707     padding-top: 50px;
 708 }
 709 // Select Dialogue (File Picker and File Manager)
 710 .fp-select form {
 711     padding: 20px 20px 0;
 712 }
 713 .fp-select .fp-select-loading {
 714     text-align: center;
 715     margin-top: 20px;
 716 }
 717 .fp-select .fp-hr {
 718     clear: both;
 719     height: 1px;
 720     background-color: #FFFFFF;
 721     border-bottom: 1px solid #BBBBBB;
 722     width: auto;
 723     margin: 10px 0;
 724 }
 725 .fp-select table {
 726     padding: 0 0 10px;
 727 }
 728 .fp-select table .mdl-right {
 729     min-width: 84px;
 730 }
 731 .fp-select .fp-reflist .mdl-right {
 732     vertical-align: top;
 733 }
 734 .fp-select .fp-select-buttons {
 735     float: right;
 736 }
 737 .fp-select .fp-info {
 738     display: block;
 739     clear: both;
 740     padding: 1px 20px 0;
 741 }
 742 .fp-select .fp-thumbnail {
 743     float: left;
 744     min-width: 110px;
 745     min-height: 110px;
 746     line-height: 110px;
 747     text-align: center;
 748     margin: 10px 20px 0 0;
 749     background: #fff;
 750     border: 1px solid #ddd;
 751     .box-shadow(inset 0 0 10px 0 #ccc);
 752 }
 753 .fp-select .fp-thumbnail img {
 754     border: 1px solid #DDDDDD;
 755     padding: 3px;
 756     vertical-align: middle;
 757     margin: 10px;
 758 }
 759 .fp-select .fp-fileinfo {
 760     display: inline-block;
 761     .ie7-inline-block();
 762     margin-top: 10px;
 763 }
 764 .file-picker.fp-select .fp-fileinfo {
 765     max-width: 240px;
 766 }
 767 .fp-select .fp-fileinfo div {
 768     padding-bottom: 5px;
 769 }
 770 .file-picker.fp-select .uneditable {
 771     display: none;
 772 }
 773 .file-picker.fp-select .fp-select-loading {
 774     display: none;
 775 }
 776 .file-picker.fp-select.loading .fp-select-loading {
 777     display: block;
 778 }
 779 .file-picker.fp-select.loading form {
 780     display: none;
 781 }
 782 .fp-select .fp-dimensions.fp-unknown {
 783     display: none;
 784 }
 785 // File Manager
 786 .filemanager-loading{
 787     display: none;
 788 }
 789 .jsenabled .filemanager-loading{
 790     display: block;
 791     margin-top: 100px;
 792 }
 793 .filemanager.fm-loading .filemanager-toolbar,
 794 .filemanager.fm-loading .fp-pathbar,
 795 .filemanager.fm-loading .filemanager-container,
 796 .filemanager.fm-loaded .filemanager-loading,
 797 .filemanager.fm-maxfiles .fp-btn-add,
 798 .filemanager.fm-maxfiles .dndupload-message,
 799 .filemanager.fm-noitems .fp-btn-download,
 800 .filemanager .fm-empty-container,
 801 .filemanager.fm-noitems .filemanager-container .fp-content {
 802     display: none;
 803 }
 804 .filemanager .filemanager-updating {
 805     display: none;
 806     text-align: center;
 807 }
 808 .filemanager.fm-updating .filemanager-updating {
 809     display: block;
 810     margin-top: 37px;
 811 }
 812 .filemanager.fm-updating .fm-content-wrapper,
 813 .filemanager.fm-nomkdir .fp-btn-mkdir,
 814 .fitem.disabled .filemanager .filemanager-toolbar,
 815 .fitem.disabled .filemanager .fp-pathbar,
 816 .fitem.disabled .filemanager .fp-restrictions,
 817 .fitem.disabled .filemanager .fm-content-wrapper {
 818     display: none;
 819 }
 820 // File Manager layout
 821 .fp-restrictions{
 822     text-align: right;
 823 }
 824 .filemanager .fp-navbar {
 825     background: #F2F2F2;
 826     border: 1px solid #BBBBBB;
 827     border-bottom: none;
 828 }
 829 .filemanager-toolbar{
 830     padding: 5px 8px;
 831     min-height: 22px;
 832     overflow: hidden;
 833 }
 834 .fp-pathbar {
 835     border-top: 1px solid #BBBBBB;
 836     padding: 5px 8px 1px;
 837     min-height: 20px;
 838 }
 839 .filemanager .fp-pathbar.empty {
 840     display: none;
 841 }
 842 .filepicker-filelist,
 843 .filemanager-container {
 844     background: #FFFFFF;
 845     clear: both;
 846     overflow: auto;
 847     border: 1px solid #BBBBBB;
 848     min-height: 140px;
 849     position: relative;
 850 }
 851 .filemanager .fp-content{
 852     overflow: auto;
 853     max-height: 472px;
 854     min-height: 157px;
 855 }
 856 .filemanager-container,
 857 .filepicker-filelist {
 858     overflow: hidden;
 859 }
 860 .fitem.disabled .filepicker-filelist,
 861 .fitem.disabled .filemanager-container {
 862     background-color: #EBEBE4;
 863 }
 864 .fitem.disabled .fp-btn-choose {
 865     .muted
 866 }
 867 .fitem.disabled .filepicker-filelist .filepicker-filename {
 868     display: none;
 869 }
 870 // Icon view (File Manager only)
 871 .fp-iconview .fp-reficons1 {
 872     position: absolute;
 873     height: 100%;
 874     width: 100%;
 875     top: 0;
 876     left: 0;
 877     z-index: 1000;
 878 }
 879 .fp-iconview .fp-reficons2 {
 880     position: absolute;
 881     height: 100%;
 882     width: 100%;
 883     top: 0;
 884     left: 0;
 885     z-index: 1001;
 886 }
 887 .fp-iconview .fp-file.fp-hasreferences .fp-reficons1 {
 888     background: url('[[pix:theme|fp/link]]') no-repeat;
 889     background-position: bottom right;
 890 }
 891 .fp-iconview .fp-file.fp-isreference .fp-reficons2 {
 892     background: url('[[pix:theme|fp/alias]]') no-repeat;
 893     background-position: bottom left;
 894 }
 895 .filemanager .fp-iconview .fp-file.fp-originalmissing .fp-thumbnail img {
 896     display: none;
 897 }
 898 .filemanager .fp-iconview .fp-file.fp-originalmissing .fp-thumbnail {
 899     background: url([[pix:s/dead]]) no-repeat;
 900     background-position: center center;
 901 }
 902 // Table view (File Manager only)
 903 .filemanager .yui3-datatable table {
 904     border: 0 solid #BBBBBB;
 905     width: 100%;
 906 }
 907 .filemanager .yui3-datatable-header {
 908     background: #FFFFFF!important;
 909     border-bottom: 1px solid #CCCCCC!important;
 910     border-left: 0 solid #FFFFFF!important;
 911     color: #555555!important;
 912 }
 913 .filemanager .yui3-datatable-odd .yui3-datatable-cell {
 914     background-color: #F6F6F6!important;
 915     border-left: 0 solid #F6F6F6;
 916 }
 917 .filemanager .yui3-datatable-even .yui3-datatable-cell {
 918     background-color: #FFFFFF!important;
 919     border-left: 0 solid #FFFFFF;
 920 }
 921 .filemanager .fp-filename-icon.fp-hasreferences .fp-reficons1{
 922     background: url('[[pix:theme|fp/link_sm]]') no-repeat 0 0;
 923     height: 100%;
 924     width: 100%;
 925     position: absolute;
 926     top: 8px;
 927     left: 17px;
 928     z-index: 1000;
 929 }
 930 .filemanager .fp-filename-icon.fp-isreference .fp-reficons2 {
 931     background: url('[[pix:theme|fp/alias_sm]]') no-repeat 0 0;
 932     height: 100%;
 933     width: 100%;
 934     position: absolute;
 935     top: 9px;
 936     left: -6px;
 937     z-index: 1001;
 938 }
 939 // Folder Context Menu (File Manager only)
 940 .filemanager .fp-contextmenu {
 941     display: none;
 942 }
 943 .filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu {
 944     display: block;
 945     position: absolute;
 946     right: 7px;
 947     bottom: 5px;
 948 }
 949 .filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu,
 950 .filemanager .fp-tableview .fp-folder.fp-hascontextmenu .fp-contextmenu {
 951     display: inline;
 952     position: absolute;
 953     left: 14px;
 954     margin-right: -20px;
 955     top: 6px;
 956 }
 957 .dir-rtl .filemanager .fp-iconview .fp-folder.fp-hascontextmenu .fp-contextmenu {
 958     left: 7px;
 959     right: inherit;
 960 }
 961 .dir-rtl .filemanager .fp-treeview .fp-folder.fp-hascontextmenu .fp-contextmenu,
 962 .dir-rtl .filemanager .fp-tableview .fp-folder.fp-hascontextmenu .fp-contextmenu {
 963     left: inherit;
 964     right: 16px;
 965     margin-right: 0;
 966 }
 967
 968 // Drag and drop support (filemanager and filepicker form elements)
 969 .filepicker-filelist .filepicker-container,
 970 .filemanager.fm-noitems .fm-empty-container {
 971     display: block;
 972     position: absolute;
 973     top: 10px;
 974     bottom: 10px;
 975     left: 10px;
 976     right: 10px;
 977     border: 2px dashed #BBBBBB;
 978     padding-top: 85px;
 979     text-align: center;
 980 }
 981 .filepicker-filelist .dndupload-target,
 982 .filemanager-container .dndupload-target {
 983     background: #FFFFFF;
 984     position: absolute;
 985     top: 10px;
 986     bottom: 10px;
 987     left: 10px;
 988     right: 10px;
 989     border: 2px dashed #fb7979;
 990     padding-top: 85px;
 991     text-align: center;
 992     .box-shadow(0px 0 0 10px #fff);
 993 }
 994 .filepicker-filelist.dndupload-over .dndupload-target,
 995 .filemanager-container.dndupload-over .dndupload-target {
 996     background: #FFFFFF;
 997     position: absolute;
 998     top: 10px;
 999     bottom: 10px;
1000     left: 10px;
1001     right: 10px;
1002     border: 2px dashed #6c8cd3;
1003     padding-top: 85px;
1004     text-align: center;
1005 }
1006 .dndupload-message {
1007     display: none;
1008 }
1009 .dndsupported .dndupload-message {
1010     display: inline;
1011 }
1012 .dnduploadnotsupported-message {
1013     display: none;
1014 }
1015 .dndnotsupported .dnduploadnotsupported-message {
1016     display: inline;
1017 }
1018 .dndupload-target {
1019     display: none;
1020 }
1021 .dndsupported .dndupload-ready .dndupload-target {
1022     display: block;
1023 }
1024 .dndupload-uploadinprogress {
1025     display: none;
1026     text-align: center;
1027 }
1028 .dndupload-uploading .dndupload-uploadinprogress {
1029     display: block;
1030 }
1031 .dndupload-arrow {
1032     background: url([[pix:theme|fp/dnd_arrow]]) center no-repeat;
1033     width: 100%;
1034     height: 80px;
1035     position: absolute;
1036     margin-left: -28px;
1037     top: 5px;
1038 }
1039 .fitem.disabled .filepicker-container,
1040 .fitem.disabled .fm-empty-container {
1041     display: none;
1042 }
1043 .dndupload-progressbars {
1044     padding: 10px;
1045     display: none;
1046 }
1047 .dndupload-inprogress .dndupload-progressbars {
1048     display: block;
1049 }
1050 .dndupload-inprogress .fp-content {
1051     display: none;
1052 }
1053 .filemanager.fm-noitems .dndupload-inprogress .fm-empty-container {
1054     display: none;
1055 }
1056 .filepicker-filelist.dndupload-inprogress .filepicker-container {
1057     display: none;
1058 }
1059 .filepicker-filelist.dndupload-inprogress a {
1060     display: none;
1061 }
1062 // Select Dialogue (File Manager only)
1063 .filemanager.fp-select .fp-select-loading {
1064     display: none;
1065 }
1066 .filemanager.fp-select.loading .fp-select-loading {
1067     display: block;
1068 }
1069 .filemanager.fp-select.loading form {
1070     display: none;
1071 }
1072 .filemanager.fp-select.fp-folder .fp-license,
1073 .filemanager.fp-select.fp-folder .fp-author,
1074 .filemanager.fp-select.fp-file .fp-file-unzip,
1075 .filemanager.fp-select.fp-folder .fp-file-unzip,
1076 .filemanager.fp-select.fp-file .fp-file-zip,
1077 .filemanager.fp-select.fp-zip .fp-file-zip {
1078     display: none;
1079 }
1080 .filemanager.fp-select .fp-file-setmain {
1081     display: none;
1082 }
1083 .filemanager.fp-select.fp-cansetmain .fp-file-setmain {
1084     display: inline-block;
1085     .ie7-inline-block();
1086 }
1087 .filemanager .fp-mainfile .fp-filename {
1088     font-weight: bold;
1089 }
1090 .filemanager.fp-select.fp-folder .fp-file-download {
1091     display: none;
1092 }
1093 // to be implemented
1094 .fm-operation {
1095     font-weight: bold;
1096 }
1097 .filemanager.fp-select .fp-original.fp-unknown,
1098 .filemanager.fp-select .fp-original .fp-originloading {
1099     display: none;
1100 }
1101 .filemanager.fp-select .fp-original.fp-loading .fp-originloading {
1102     display: inline;
1103 }
1104 .filemanager.fp-select .fp-reflist.fp-unknown,
1105 .filemanager.fp-select .fp-reflist .fp-reflistloading {
1106     display: none;
1107 }
1108 .filemanager.fp-select .fp-refcount {
1109     max-width: 265px;
1110 }
1111 .filemanager.fp-select .fp-reflist.fp-loading .fp-reflistloading {
1112     display: inline;
1113 }
1114 .filemanager.fp-select .fp-reflist .fp-value {
1115     background: #F9F9F9;
1116     border: 1px solid #BBBBBB;
1117     padding: 8px 7px;
1118     margin: 0;
1119     max-width: 265px;
1120     max-height: 75px;
1121     overflow: auto;
1122 }
1123 .filemanager.fp-select .fp-reflist .fp-value li {
1124     padding-bottom: 7px;
1125 }
1126 // Create folder dialogue (File Manager only)
1127 .filemanager.fp-mkdir-dlg {
1128     text-align: center;
1129 }
1130 .filemanager.fp-mkdir-dlg .fp-mkdir-dlg-text {
1131     text-align: left;
1132     margin: 20px;
1133 }
1134 .dir-rtl .filemanager .fp-mkdir-dlg p {
1135     text-align: right;
1136 }
1137 // Confirm dialogue for delete (File Manager only)
1138 .filemanager.fp-dlg {
1139     text-align: center;
1140 }
1141 .filemanager.fp-dlg .fp-dlg-text {
1142     padding: 0 10px;
1143     min-width: 200px;
1144     max-width: 340px;
1145     max-height: 300px;
1146     overflow: auto;
1147     line-height: 22px;
1148     margin: 40px 20px 20px;
1149     font-size: 12px;
1150 }
1151 // file picker search dialog
1152 .file-picker div.bd {
1153     text-align: left;
1154 }
1155 // RTL Overrides
1156 .dir-rtl .file-picker div.bd,
1157 .dir-rtl .file-picker .fp-pathbar,
1158 .dir-rtl .file-picker .fp-list,
1159 .dir-rtl #filemenu .yuimenuitemlabel,
1160 .dir-rtl .filemanager-container .yui3-skin-sam .yui3-datatable-header {
1161     text-align: right;
1162 }
1163 .dir-rtl .filepicker .yui-layout-unit-left {
1164     left: 500px;
1165 }
1166 .dir-rtl .filepicker .yui-layout-unit-center {
1167     left: 0;
1168 }