resources/css/grid.css

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 /* Grid3 styles */\r
  10 .x-grid3 {\r
  11         position:relative;\r
  12         overflow:hidden;\r
  13     background-color:#fff;\r
  14 }\r
  15 \r
  16 .x-grid-panel .x-panel-body {\r
  17     overflow:hidden !important;\r
  18 }\r
  19 \r
  20 .x-grid-panel .x-panel-mc .x-panel-body {\r
  21     border:1px solid #99bbe8;\r
  22 }\r
  23 \r
  24 .x-grid3 table {\r
  25     table-layout:fixed;\r
  26 }\r
  27 .x-grid3-viewport{\r
  28         overflow:hidden;\r
  29 }\r
  30 .x-grid3-hd-row td, .x-grid3-row td, .x-grid3-summary-row td{\r
  31         font:normal 11px arial, tahoma, helvetica, sans-serif;\r
  32     -moz-outline: none;\r
  33         -moz-user-focus: normal;\r
  34 }\r
  35 .x-grid3-row td, .x-grid3-summary-row td {\r
  36     line-height:13px;\r
  37     vertical-align: top;\r
  38         padding-left:1px;\r
  39     padding-right:1px;\r
  40     -moz-user-select: none;\r
  41 }\r
  42 .x-grid3-hd-row td {\r
  43     line-height:15px;\r
  44     vertical-align:middle;\r
  45     border-left:1px solid #eee;\r
  46     border-right:1px solid #d0d0d0;\r
  47 }\r
  48 \r
  49 .x-grid3-hd-row .x-grid3-marker-hd {\r
  50     padding:3px;\r
  51 }\r
  52 \r
  53 .x-grid3-row .x-grid3-marker {\r
  54     padding:3px;\r
  55 }\r
  56 \r
  57 .x-grid3-cell-inner, .x-grid3-hd-inner{\r
  58         overflow:hidden;\r
  59         -o-text-overflow: ellipsis;\r
  60         text-overflow: ellipsis;\r
  61     padding:3px 3px 3px 5px;\r
  62     white-space: nowrap;\r
  63 }\r
  64 \r
  65 .x-grid3-hd-inner {\r
  66     position:relative;\r
  67          cursor:inherit;\r
  68          padding:4px 3px 4px 5px;\r
  69 }\r
  70 \r
  71 .x-grid3-row-body {\r
  72     white-space:normal;\r
  73 }\r
  74 \r
  75 .x-grid3-body-cell {\r
  76     -moz-outline:0 none;\r
  77     outline:0 none;\r
  78 }\r
  79 /* IE Quirks to clip */\r
  80 .ext-ie .x-grid3-cell-inner, .ext-ie .x-grid3-hd-inner{\r
  81         width:100%;\r
  82 }\r
  83 /* reverse above in strict mode */\r
  84 .ext-strict .x-grid3-cell-inner, .ext-strict .x-grid3-hd-inner{\r
  85         width:auto;\r
  86 }\r
  87 \r
  88 .x-grid3-col {\r
  89         \r
  90 }\r
  91 \r
  92 .x-grid-row-loading {\r
  93     background: #fff url(../images/default/shared/loading-balls.gif) no-repeat center center;\r
  94 }\r
  95 .x-grid-page {\r
  96     overflow:hidden;\r
  97 }\r
  98 .x-grid3-row {\r
  99         cursor: default;\r
 100     border:1px solid #ededed;\r
 101     border-top-color:#fff;\r
 102     /*border-bottom: 1px solid #ededed;*/\r
 103     width:100%;\r
 104 }\r
 105 .x-grid3-row-alt{\r
 106         background-color:#fafafa;\r
 107 }\r
 108 \r
 109 .x-grid3-row-over {\r
 110         border:1px solid #dddddd;\r
 111     background: #efefef url(../images/default/grid/row-over.gif) repeat-x left top;\r
 112 }\r
 113 \r
 114 .x-grid3-resize-proxy {\r
 115         width:1px;\r
 116     left:0;\r
 117     background-color:#777;\r
 118         cursor: e-resize;\r
 119         cursor: col-resize;\r
 120         position:absolute;\r
 121         top:0;\r
 122         height:100px;\r
 123         overflow:hidden;\r
 124         visibility:hidden;\r
 125         border:0 none;\r
 126         z-index:7;\r
 127 }\r
 128 .x-grid3-resize-marker {\r
 129         width:1px;\r
 130         left:0;\r
 131     background-color:#777;\r
 132         position:absolute;\r
 133         top:0;\r
 134         height:100px;\r
 135         overflow:hidden;\r
 136         visibility:hidden;\r
 137         border:0 none;\r
 138         z-index:7;\r
 139 }\r
 140 .x-grid3-focus {\r
 141         position:absolute;\r
 142         left:0;\r
 143         top:0;\r
 144         width:1px;\r
 145         height:1px;\r
 146     line-height:1px;\r
 147     font-size:1px;\r
 148     -moz-outline:0 none;\r
 149     outline:0 none;\r
 150     -moz-user-select: text;\r
 151     -khtml-user-select: text;\r
 152 }\r
 153 \r
 154 /* header styles */\r
 155 .x-grid3-header{\r
 156         background: #f9f9f9 url(../images/default/grid/grid3-hrow.gif) repeat-x 0 bottom;\r
 157         cursor:default;\r
 158     zoom:1;\r
 159     padding:1px 0 0 0;\r
 160 }\r
 161 \r
 162 .x-grid3-header-pop {\r
 163     border-left:1px solid #d0d0d0;\r
 164     float:right;\r
 165     clear:none;\r
 166 }\r
 167 .x-grid3-header-pop-inner {\r
 168     border-left:1px solid #eee;\r
 169     width:14px;\r
 170     height:19px;\r
 171     background: transparent url(../images/default/grid/hd-pop.gif) no-repeat center center;\r
 172 }\r
 173 .ext-ie .x-grid3-header-pop-inner {\r
 174     width:15px;\r
 175 }\r
 176 .ext-strict .x-grid3-header-pop-inner {\r
 177     width:14px; \r
 178 }\r
 179 .x-grid3-header-inner {\r
 180     overflow:hidden;\r
 181     zoom:1;\r
 182     float:left;\r
 183 }\r
 184 .x-grid3-header-offset {\r
 185     padding-left:1px;\r
 186          width:10000px;\r
 187 }\r
 188 \r
 189 td.x-grid3-hd-over, td.sort-desc, td.sort-asc, td.x-grid3-hd-menu-open {\r
 190     border-left:1px solid #aaccf6;\r
 191     border-right:1px solid #aaccf6;\r
 192 }\r
 193 td.x-grid3-hd-over .x-grid3-hd-inner, td.sort-desc .x-grid3-hd-inner, td.sort-asc .x-grid3-hd-inner, td.x-grid3-hd-menu-open .x-grid3-hd-inner {\r
 194     background: #ebf3fd url(../images/default/grid/grid3-hrow-over.gif) repeat-x left bottom;\r
 195 \r
 196 }\r
 197 .x-grid3-sort-icon{\r
 198         background-repeat: no-repeat;\r
 199         display: none;\r
 200         height: 4px;\r
 201         width: 13px;\r
 202         margin-left:3px;\r
 203         vertical-align: middle;\r
 204 }\r
 205 .sort-asc .x-grid3-sort-icon {\r
 206         background-image: url(../images/default/grid/sort_asc.gif);\r
 207         display: inline;\r
 208 }\r
 209 .sort-desc .x-grid3-sort-icon {\r
 210         background-image: url(../images/default/grid/sort_desc.gif);\r
 211         display: inline;\r
 212 }\r
 213 \r
 214 /* Header position fixes for IE strict mode */\r
 215 .ext-strict .ext-ie .x-grid3-header-inner{position:relative;}\r
 216 .ext-strict .ext-ie6 .x-grid3-hd{position:relative;}\r
 217 .ext-strict .ext-ie6 .x-grid3-hd-inner{position:static;}\r
 218 \r
 219 /* Body Styles */\r
 220 .x-grid3-body {\r
 221         zoom:1;\r
 222 }\r
 223 .x-grid3-scroller {\r
 224         overflow:auto;\r
 225     zoom:1;\r
 226     position:relative;\r
 227 }\r
 228 .x-grid3-cell-text, .x-grid3-hd-text {\r
 229         display: block;\r
 230         padding: 3px 5px 3px 5px;\r
 231         -moz-user-select: none;\r
 232         -khtml-user-select: none;\r
 233         color:black;\r
 234 }\r
 235 .x-grid3-split {\r
 236         background-image: url(../images/default/grid/grid-split.gif);\r
 237         background-position: center;\r
 238         background-repeat: no-repeat;\r
 239         cursor: e-resize;\r
 240         cursor: col-resize;\r
 241         display: block;\r
 242         font-size: 1px;\r
 243         height: 16px;\r
 244         overflow: hidden;\r
 245         position: absolute;\r
 246         top: 2px;\r
 247         width: 6px;\r
 248         z-index: 3;\r
 249 }\r
 250 \r
 251 .x-grid3-hd-text {\r
 252         color:#15428b;\r
 253 }\r
 254 /* Column Reorder DD */\r
 255 .x-dd-drag-proxy .x-grid3-hd-inner{\r
 256         background: #ebf3fd url(../images/default/grid/grid3-hrow-over.gif) repeat-x left bottom;\r
 257         width:120px;\r
 258         padding:3px;\r
 259         border:1px solid #aaccf6;\r
 260         overflow:hidden;\r
 261 }\r
 262 \r
 263 .col-move-top, .col-move-bottom{\r
 264         width:9px;\r
 265         height:9px;\r
 266         position:absolute;\r
 267         top:0;\r
 268         line-height:1px;\r
 269         font-size:1px;\r
 270         overflow:hidden;\r
 271         visibility:hidden;\r
 272         z-index:20000;\r
 273 }\r
 274 .col-move-top{\r
 275         background:transparent url(../images/default/grid/col-move-top.gif) no-repeat left top;\r
 276 }\r
 277 .col-move-bottom{\r
 278         background:transparent url(../images/default/grid/col-move-bottom.gif) no-repeat left top;\r
 279 }\r
 280 \r
 281 /* Selection Styles */\r
 282 .x-grid3-row-selected {\r
 283         background: #DFE8F6 !important;\r
 284         border:1px dotted #a3bae9;\r
 285 }\r
 286 \r
 287 .x-grid3-cell-selected{\r
 288         background-color: #B8CFEE !important;\r
 289         color: black;\r
 290 }\r
 291 .x-grid3-cell-selected span{\r
 292         color: black !important;\r
 293 }\r
 294 .x-grid3-cell-selected .x-grid3-cell-text{\r
 295         color: black;\r
 296 }\r
 297 \r
 298 .x-grid3-locked td.x-grid3-row-marker, .x-grid3-locked .x-grid3-row-selected td.x-grid3-row-marker{\r
 299     background: #ebeadb url(../images/default/grid/grid-hrow.gif) repeat-x 0 bottom !important;\r
 300     vertical-align:middle !important;\r
 301     color:black;\r
 302     padding:0;\r
 303     border-top:1px solid white;\r
 304     border-bottom:none !important;\r
 305     border-right:1px solid #6fa0df !important;\r
 306     text-align:center;\r
 307 }\r
 308 .x-grid3-locked td.x-grid3-row-marker div, .x-grid3-locked .x-grid3-row-selected td.x-grid3-row-marker div{\r
 309     padding:0 4px;\r
 310     color:#15428b !important;\r
 311     text-align:center;\r
 312 }\r
 313 \r
 314 /* dirty cells */\r
 315 .x-grid3-dirty-cell {\r
 316     background: transparent url(../images/default/grid/dirty.gif) no-repeat 0 0;\r
 317 }\r
 318 \r
 319 /* Grid Toolbars */\r
 320 .x-grid3-topbar, .x-grid3-bottombar{\r
 321         font:normal 11px arial, tahoma, helvetica, sans-serif;\r
 322     overflow:hidden;\r
 323         display:none;\r
 324         zoom:1;\r
 325     position:relative;\r
 326 }\r
 327 .x-grid3-topbar .x-toolbar{\r
 328         border-right:0 none;\r
 329 }\r
 330 .x-grid3-bottombar .x-toolbar{\r
 331         border-right:0 none;\r
 332         border-bottom:0 none;\r
 333         border-top:1px solid #a9bfd3;\r
 334 }\r
 335 /* Props Grid Styles */\r
 336 .x-props-grid .x-grid3-cell{\r
 337         padding:1px;\r
 338 }\r
 339 .x-props-grid .x-grid3-td-name .x-grid3-cell-inner{\r
 340         background:transparent url(../images/default/grid/grid3-special-col-bg.gif) repeat-y -16px !important;\r
 341     padding-left:12px;\r
 342     color:black !important;\r
 343 }\r
 344 .x-props-grid .x-grid3-body .x-grid3-td-name{\r
 345     padding:1px;\r
 346     padding-right:0;\r
 347     background:white !important;\r
 348     border:0 none;\r
 349     border-right:1px solid #eeeeee;\r
 350 }\r
 351 \r
 352 /* header menu */\r
 353 .xg-hmenu-sort-asc .x-menu-item-icon{\r
 354         background-image: url(../images/default/grid/hmenu-asc.gif);\r
 355 }\r
 356 .xg-hmenu-sort-desc .x-menu-item-icon{\r
 357         background-image: url(../images/default/grid/hmenu-desc.gif);\r
 358 }\r
 359 .xg-hmenu-lock .x-menu-item-icon{\r
 360         background-image: url(../images/default/grid/hmenu-lock.gif);\r
 361 }\r
 362 .xg-hmenu-unlock .x-menu-item-icon{\r
 363         background-image: url(../images/default/grid/hmenu-unlock.gif);\r
 364 }\r
 365 \r
 366 /* dd */\r
 367 .x-grid3-col-dd {\r
 368     border:0 none;\r
 369     padding:0;\r
 370     background:transparent;\r
 371 }\r
 372 \r
 373 .x-dd-drag-ghost .x-grid3-dd-wrap {\r
 374     padding:1px 3px 3px 1px;\r
 375 }\r
 376 \r
 377 .x-grid3-hd {\r
 378     -moz-user-select:none;\r
 379 }\r
 380 \r
 381 .x-grid3-hd-btn {\r
 382     display:none;\r
 383     position:absolute;\r
 384     width:14px;\r
 385     background:#c3daf9 url(../images/default/grid/grid3-hd-btn.gif) no-repeat left center;\r
 386     right:0;\r
 387     top:0;\r
 388     z-index:2;\r
 389          cursor:pointer;\r
 390 }\r
 391 \r
 392 .x-grid3-hd-over .x-grid3-hd-btn, .x-grid3-hd-menu-open .x-grid3-hd-btn {\r
 393     display:block;\r
 394 }\r
 395 \r
 396 a.x-grid3-hd-btn:hover {\r
 397     background-position:-14px center;\r
 398 }\r
 399 \r
 400 /* Expanders */\r
 401 \r
 402 .x-grid3-body .x-grid3-td-expander {\r
 403     background:transparent url(../images/default/grid/grid3-special-col-bg.gif) repeat-y right;\r
 404 }\r
 405 .x-grid3-body .x-grid3-td-expander .x-grid3-cell-inner {\r
 406     padding:0 !important;\r
 407     height:100%;\r
 408 }\r
 409 .x-grid3-row-expander {\r
 410     width:100%;\r
 411     height:18px;\r
 412     background-position:4px 2px;\r
 413     background-repeat:no-repeat;\r
 414     background-color:transparent;\r
 415          background-image:url(../images/default/grid/row-expand-sprite.gif);\r
 416 }\r
 417 .x-grid3-row-collapsed .x-grid3-row-expander {\r
 418     background-position:4px 2px;\r
 419 }\r
 420 .x-grid3-row-expanded .x-grid3-row-expander {\r
 421     background-position:-21px 2px;\r
 422 }\r
 423 .x-grid3-row-collapsed .x-grid3-row-body {\r
 424     display:none !important;\r
 425 }\r
 426 .x-grid3-row-expanded .x-grid3-row-body {\r
 427     display:block !important;\r
 428 }\r
 429 \r
 430 /* Checkers */\r
 431 \r
 432 .x-grid3-body .x-grid3-td-checker {\r
 433     background:transparent url(../images/default/grid/grid3-special-col-bg.gif) repeat-y right;\r
 434 }\r
 435 \r
 436 .x-grid3-body .x-grid3-td-checker .x-grid3-cell-inner, .x-grid3-header .x-grid3-td-checker .x-grid3-hd-inner {\r
 437     padding:0 !important;\r
 438     height:100%;\r
 439 }\r
 440 \r
 441 .x-grid3-row-checker, .x-grid3-hd-checker {\r
 442     width:100%;\r
 443     height:18px;\r
 444     background-position:2px 2px;\r
 445     background-repeat:no-repeat;\r
 446     background-color:transparent;\r
 447          background-image:url(../images/default/grid/row-check-sprite.gif);\r
 448 }\r
 449 .x-grid3-row .x-grid3-row-checker {\r
 450     background-position:2px 2px;\r
 451 }\r
 452 .x-grid3-row-selected .x-grid3-row-checker, .x-grid3-hd-checker-on .x-grid3-hd-checker {\r
 453     background-position:-23px 2px;\r
 454 }\r
 455 .x-grid3-hd-checker {\r
 456     background-position:2px 3px;\r
 457 }\r
 458 .x-grid3-hd-checker-on .x-grid3-hd-checker {\r
 459     background-position:-23px 3px;\r
 460 }\r
 461 \r
 462 /* Numberer */\r
 463 \r
 464 .x-grid3-body .x-grid3-td-numberer {\r
 465     background:transparent url(../images/default/grid/grid3-special-col-bg.gif) repeat-y right;\r
 466 }\r
 467 .x-grid3-body .x-grid3-td-numberer .x-grid3-cell-inner {\r
 468     padding:3px 5px 0 0 !important;\r
 469     text-align:right;\r
 470          color:#444;\r
 471 }\r
 472 \r
 473 /* All specials */\r
 474 \r
 475 .x-grid3-body .x-grid3-row-selected .x-grid3-td-numberer,\r
 476 .x-grid3-body .x-grid3-row-selected .x-grid3-td-checker,\r
 477 .x-grid3-body .x-grid3-row-selected .x-grid3-td-expander {\r
 478         background:transparent url(../images/default/grid/grid3-special-col-sel-bg.gif) repeat-y right;\r
 479 }\r
 480 .x-grid3-body .x-grid3-check-col-td .x-grid3-cell-inner {\r
 481     padding: 1px 0 0 0 !important;\r
 482 }\r
 483 \r
 484 .x-grid3-check-col {\r
 485     width:100%;\r
 486     height:16px;\r
 487     background-position:center center;\r
 488     background-repeat:no-repeat;\r
 489     background-color:transparent;\r
 490         background-image:url(../images/default/menu/unchecked.gif);\r
 491 }\r
 492 \r
 493 \r
 494 .x-grid3-check-col-on {\r
 495     width:100%;\r
 496     height:16px;\r
 497     background-position:center center;\r
 498     background-repeat:no-repeat;\r
 499     background-color:transparent;\r
 500         background-image:url(../images/default/menu/checked.gif);\r
 501 }\r
 502 \r
 503 /* Grouping classes */\r
 504 .x-grid-group, .x-grid-group-body, .x-grid-group-hd {\r
 505     zoom:1;\r
 506 }\r
 507 .x-grid-group-hd {\r
 508     border-bottom: 2px solid #99bbe8;\r
 509     cursor:pointer;\r
 510     padding-top:6px;\r
 511 }\r
 512 .x-grid-group-hd div {\r
 513     background:transparent url(../images/default/grid/group-expand-sprite.gif) no-repeat 3px -47px;\r
 514     padding:4px 4px 4px 17px;\r
 515     color:#3764a0;\r
 516     font:bold 11px tahoma, arial, helvetica, sans-serif;\r
 517 }\r
 518 .x-grid-group-collapsed .x-grid-group-hd div {\r
 519     background-position: 3px 3px;\r
 520 }\r
 521 .x-grid-group-collapsed .x-grid-group-body {\r
 522     display:none;\r
 523 }\r
 524 \r
 525 .x-group-by-icon {\r
 526     background-image:url(../images/default/grid/group-by.gif);\r
 527 }\r
 528 .x-cols-icon {\r
 529     background-image:url(../images/default/grid/columns.gif);\r
 530 }\r
 531 .x-show-groups-icon {\r
 532     background-image:url(../images/default/grid/group-by.gif);\r
 533 }\r
 534 \r
 535 .ext-ie .x-grid3 .x-editor .x-form-text {\r
 536     position:relative;\r
 537     top:-1px;\r
 538 }\r
 539 .ext-ie .x-props-grid .x-editor .x-form-text {\r
 540     position:static;\r
 541     top:0;\r
 542 }\r
 543 \r
 544 .x-grid-empty {\r
 545     padding:10px;\r
 546     color:gray;\r
 547     font:normal 11px tahoma, arial, helvetica, sans-serif;\r
 548 }\r
 549 \r
 550 \r
 551 /* fix floating toolbar issue */\r
 552 .ext-ie7 .x-grid-panel .x-panel-bbar {\r
 553     position:relative;\r
 554 }\r