[Summary view] [Print] [Text view]

   1  /* $Id: imce-content.css,v 1.2.2.6 2010/10/06 04:38:09 ufku Exp $ */
   2  
   3  /*Body*/
   4  body.imce {
   5    padding: 2px;
   6    background: none;
   7    text-align: left;
   8  }
   9  
  10  /*Main container*/
  11  /*reset all tags.*/
  12  #imce-content, #imce-content * {
  13    font: 11px/16px Verdana, sans-serif;
  14    margin: 0;
  15    padding: 0;
  16    color: #444;
  17    background: none;
  18    border: none;
  19    float: none;
  20    list-style: none;
  21  }
  22  #imce-content {
  23    position: relative;
  24    background-color: #fff;
  25  }
  26  #imce-content a {
  27    text-decoration: none;
  28  }
  29  #imce-content label {
  30    font-weight: bold;
  31  }
  32  #imce-content label.option {
  33    font-weight: normal;
  34  }
  35  #imce-content input.form-text, #imce-content input[type=text], #imce-content input.form-file, #imce-content input[type=file], #imce-content select, #imce-content textarea {
  36    border: 1px inset #aaa;
  37    padding: 2px;
  38    background-color: #fff;
  39    margin: 1px;
  40    width: auto;
  41  }
  42  #imce-content input.form-submit, #imce-content input[type=submit], #imce-content button {
  43    border: 2px groove #fff;
  44    padding: 2px 6px 2px 20px;
  45    margin: 2px 0;
  46    background: #e8e8d8 url(submit.png) no-repeat 2px 50%;
  47  }
  48  #imce-content [disabled], #imce-content .disabled {
  49    color: #999;
  50    cursor: default;
  51    text-decoration: none !important;
  52  }
  53  #imce-content input.loading {
  54    background-image: url(loading.gif) !important;
  55  }
  56  #imce-content .form-item {
  57    margin: 4px 0;
  58  }
  59  #imce-content .form-item .description {
  60    font-size: 0.9em;
  61  }
  62  #imce-content strong, #imce-content h4 {
  63    font-weight: bold;
  64  }
  65  #imce-content em {
  66    font-style: italic;
  67  }
  68  #imce-content ul.tips {
  69    margin: 2px 8px;
  70  }
  71  #imce-content ul.tips li {
  72    list-style: circle inside;
  73    line-height: 18px;
  74  }
  75  
  76  /*Main sections under imce-content*/
  77  #ops-wrapper {
  78    margin-bottom: 2px;
  79    background: #d0d7e7 url(ops.png) repeat-x;
  80    border: 1px solid #a5b9cd;
  81  }
  82  #browse-wrapper {
  83    overflow: hidden;
  84    height: 260px;
  85    clear: both;
  86  }
  87  #browse-resizer {}
  88  #preview-wrapper {
  89    height: 180px;
  90    overflow: auto;
  91  }
  92  
  93  /*columns of browse-wrapper*/
  94  #navigation-wrapper {
  95    width: 25%;
  96    height: 100%;
  97    overflow: auto;
  98    float: left;
  99    position: relative;
 100  }
 101  #navigation-resizer {
 102    height: 100%;
 103    float: left;
 104  }
 105  #sub-browse-wrapper {
 106    height: 100%;
 107    overflow: auto;
 108    position: relative;
 109  }
 110  
 111  /*rows of sub-browse wrapper*/
 112  #file-header-wrapper {
 113    height: 25px;
 114    background: url(header.png) repeat-x 0 0;
 115    position: relative;
 116  }
 117  #file-list-wrapper {
 118    padding-bottom: 20px;/*#dir-stat height*/
 119    outline: none;
 120  }
 121  #dir-stat {
 122    position: absolute;
 123    z-index: 1;
 124    bottom: 0;
 125    padding: 2px 5px;
 126    background-color: #e9ecef;
 127  }
 128  
 129  #dir-stat, #dir-stat * {
 130    font-size: 0.9em;
 131  }
 132  
 133  /*Navigation header*/
 134  #navigation-header {
 135    background: url(header.png) repeat-x 0 0;
 136    position: absolute;
 137    z-index: 1;
 138    width: 100%;
 139    height: 25px;
 140  }
 141  #navigation-header span {
 142    display: inline-block;
 143    padding: 4px 4px 5px 20px;
 144    font-weight: bold;
 145    background: url(tree.png) no-repeat 0 50%;
 146  }
 147  
 148  /*Navigation tree (ul)*/
 149  #navigation-tree {
 150    margin-top: 25px;/*navigation-header height*/
 151  }
 152  #navigation-tree ul {
 153    margin-left: 15px;
 154  }
 155  #navigation-tree li {
 156    padding: 2px;
 157    background: transparent url(collapsed.png) no-repeat 3px 6px;
 158    white-space: nowrap;
 159  }
 160  #navigation-tree li.expanded {
 161    background-image: url(expanded.png);
 162  }
 163  #navigation-tree li.leaf {
 164    background-image: url(leaf.png);
 165  }
 166  #navigation-tree li.loading {
 167    background-image: url(loading.gif);
 168    background-position: 0 2px;
 169  }
 170  #navigation-tree li span.expander {
 171    display: inline-block;
 172    width: 12px;
 173    cursor: pointer;
 174    margin-right: 1px;
 175  }
 176  #navigation-tree li a {
 177    display: inline-block;
 178  }
 179  #navigation-tree li a:hover {
 180    text-decoration: underline;
 181  }
 182  #navigation-tree li a.folder {
 183    margin-left: 2px;
 184    padding-left: 18px;
 185    background: transparent url(folder.png) no-repeat 0 50%;
 186  }
 187  #navigation-tree li a.active {
 188    font-weight: bold;
 189    background-image: url(folder-open.png);
 190    background-color: #ecf0f4;
 191  }
 192  #navigation-tree li.root > a.folder {
 193    background-image: url(folder-root.png);
 194  }
 195  
 196  /*File list and header. (Accessible by #file-list and #file-header. Both have the classname "files")*/
 197  #file-header, #file-list {
 198    table-layout: fixed;
 199    width: 100%;
 200  }
 201  #file-header td {
 202    padding: 4px;
 203    font-weight: bold;
 204    cursor: default;
 205  }
 206  #file-header td.asc {
 207    color: #f60;
 208  }
 209  #file-header td.asc:after {
 210    content: "\2193";
 211    font-weight: normal;
 212  }
 213  #file-header td.desc {
 214    color: #09f;
 215  }
 216  #file-header td.desc:after {
 217    content: "\2191";
 218    font-weight: normal;
 219  }
 220  #file-list td {
 221    overflow: hidden;
 222    border-top: 1px solid #ccf;
 223    border-bottom: 1px solid #ccf;
 224    padding: 4px;
 225    cursor: default;
 226  }
 227  #file-list td.name, #file-header td.name {
 228    min-width: 12em;
 229    white-space: nowrap;
 230  }
 231  #file-list td.size, #file-header td.size {
 232    width: 6.5em;
 233    text-align: right;
 234  }
 235  #file-list td.width, #file-header td.width {
 236    width: 5em;
 237    text-align: right;
 238  }
 239  #file-list td.height, #file-header td.height {
 240    width: 5em;
 241  }
 242  #file-list td.date, #file-header td.date {
 243    width: 12em;
 244    text-align: center;
 245  }
 246  #file-list tr:hover td {
 247    background-color: #e9ecef;
 248  }
 249  #file-list tr.selected td {
 250    background-color: #07f;
 251    color: #fff;
 252  }
 253  #file-list td.name img {
 254    vertical-align: middle;
 255    margin-right: 3px;
 256  }
 257  
 258  
 259  /*File operations*/
 260  #op-items {
 261    min-height: 26px;
 262  }
 263  #op-contents {
 264    position: absolute;
 265    z-index: 2;
 266  }
 267  #op-contents .op-content {
 268    display: none;
 269    padding: 16px;
 270    border: 2px solid #344454;
 271    background-color: #f5f5f5;
 272    position: relative;
 273  }
 274  #op-close-link {
 275    display: none;
 276    position: absolute;
 277    z-index: 3;
 278    top: 2px;
 279    right: 2px;
 280    width: 16px;
 281    height: 16px;
 282    background: url(close.png) no-repeat 50% 50%;
 283  }
 284  #ops-list {
 285  }
 286  #ops-list li {
 287    display: block;
 288    float: left;
 289  }
 290  #ops-list a {
 291    display: block;
 292    padding: 5px 8px 5px 20px;
 293    text-decoration: none;
 294    background: url(op.png) no-repeat 2px 50%;
 295  }
 296  #ops-list a:hover {
 297    background-color: #e9ecef;
 298  }
 299  #ops-list li.active a {
 300    background-color: #f9f8f7;
 301  }
 302  #ops-list a span {
 303    display: inline-block;
 304    color: #0e1f43;
 305  }
 306  #ops-list li.loading a {
 307    background-image: url(loading.gif);
 308  }
 309  
 310  /*Custom op styles*/
 311  #op-item-upload a, #imce-content #edit-upload {
 312    background-image: url(upload.png);
 313  }
 314  #op-item-thumb a, #imce-content #edit-thumb {
 315    background-image: url(thumb.png);
 316  }
 317  #op-item-resize a, #imce-content #edit-resize {
 318    background-image: url(resize.png);
 319  }
 320  #op-item-delete a {
 321    background-image: url(delete.png);
 322  }
 323  #op-item-sendto a {
 324    background-image: url(sendto.png);
 325  }
 326  #op-item-help a {
 327    background-image: url(help.png);
 328  }
 329  #op-item-changeview a {
 330    background-image: url(view-box.png);
 331  }
 332  .box-view #op-item-changeview a {
 333    background-image: url(view-list.png);
 334  }
 335  #op-item-help a, #op-item-changeview a {
 336    white-space: nowrap;
 337    overflow: hidden;
 338    width: 1px;
 339    padding: 5px 0 5px 25px;
 340    background-position: 5px 50%;
 341  }
 342  #op-item-help, #op-item-changeview {
 343    float: right !important;
 344  }
 345  
 346  /*resizers*/
 347  #imce-content .y-resizer {
 348    height: 5px;
 349    cursor: n-resize;
 350    background: #f4f5f6 url(y-resizer.png) no-repeat 50% 50%;
 351    border-top: 1px solid #e0e3e5;
 352    border-bottom: 1px solid #e0e3e5;
 353  }
 354  #imce-content .x-resizer {
 355    width: 5px;
 356    cursor: e-resize;
 357    background: #f4f5f6 url(x-resizer.png) no-repeat 50% 50%;
 358    border-left: 1px solid #e0e3e5;
 359    border-right: 1px solid #e0e3e5;
 360  }
 361  
 362  /*Message box*/
 363  #message-box {
 364    display: none;
 365    position: absolute;
 366    width: 60%;
 367    left: 20%;
 368    top: 32%;
 369    z-index: 10;
 370    padding: 5px;
 371    background-color: #fff;
 372    border: 2px solid #000;
 373  }
 374  #message-box  * {
 375    font-size: 1.1em;
 376    font-weight: bold;
 377    color: #000;
 378  }
 379  #imce-content div.message {
 380    background: url(status.png) no-repeat 0 0;
 381    padding-left: 20px;
 382    margin: 2px 0;
 383  }
 384  #imce-content div.error {
 385    background: url(error.png) no-repeat 0 0;
 386    padding-left: 20px;
 387  }
 388  #imce-content div.warning {
 389    background: url(warning.png) no-repeat 0 0;
 390    padding-left: 20px;
 391  }
 392  #log-messages {
 393    height: 60px;
 394    overflow: auto;
 395    border: 1px solid #000;
 396    padding: 2px 4px;
 397  }
 398  #log-messages * {
 399    font-family: monospace;
 400  }
 401  
 402  #file-preview {
 403    text-align: center;
 404  }
 405  .imce-hide, .js #forms-wrapper, #help-box {
 406    display: none;
 407  }
 408  
 409  /*IE*/
 410  .ie #imce-content input, .ie #imce-content select {
 411    vertical-align: middle;
 412    line-height: 1.2em;
 413  }
 414  .ie-7 #navigation-tree li {
 415    list-style-image: none;
 416  }
 417  .ie-7 #imce-content input.form-submit, .ie-7 #imce-content input[type=submit], .ie-7 #imce-content button {
 418    border-style: outset;
 419  }
 420  .ie-7 #ops-list a span {
 421    cursor: pointer;
 422  }
 423  .ie-7 #file-list-wrapper {
 424    display: inline-block; /* Gives hasLayout */
 425  }
 426  
 427  /* File list in box view */
 428  .box-view #file-list tr {
 429    display: block;
 430    float: left;
 431    border: 1px solid #ccf;
 432    margin: 10px;
 433  }
 434  .box-view #file-list td {
 435    border: 0;
 436  }
 437  .box-view #file-list td.name {
 438    min-width: 0;
 439    padding: 5px;
 440    text-align: center;
 441    vertical-align: middle;
 442  }
 443  .box-view #file-list td.name img {
 444    margin: 0;
 445  }
 446  .box-view #file-list td.name span {
 447    display: block;
 448    overflow: hidden;
 449    white-space: nowrap;
 450  }
 451  .box-view #file-list td.size, .box-view #file-list td.date, .box-view #file-list td.width, .box-view #file-list td.height {
 452    display: none;
 453  }