webapp/resources/datatables-1.9.4/media/css/demo_table.css

   1 /*
   2  *  File:         demo_table.css
   3  *  CVS:          $Id$
   4  *  Description:  CSS descriptions for DataTables demo pages
   5  *  Author:       Allan Jardine
   6  *  Created:      Tue May 12 06:47:22 BST 2009
   7  *  Modified:     $Date$ by $Author$
   8  *  Language:     CSS
   9  *  Project:      DataTables
  10  *
  11  *  Copyright 2009 Allan Jardine. All Rights Reserved.
  12  *
  13  * ***************************************************************************
  14  * DESCRIPTION
  15  *
  16  * The styles given here are suitable for the demos that are used with the standard DataTables
  17  * distribution (see www.datatables.net). You will most likely wish to modify these styles to
  18  * meet the layout requirements of your site.
  19  *
  20  * Common issues:
  21  *   'full_numbers' pagination - I use an extra selector on the body tag to ensure that there is
  22  *     no conflict between the two pagination types. If you want to use full_numbers pagination
  23  *     ensure that you either have "example_alt_pagination" as a body class name, or better yet,
  24  *     modify that selector.
  25  *   Note that the path used for Images is relative. All images are by default located in
  26  *     ../images/ - relative to this CSS file.
  27  */
  28
  29 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  30  * DataTables features
  31  */
  32
  33 .dataTables_wrapper {
  34         position: relative;
  35         clear: both;
  36         zoom: 1; /* Feeling sorry for IE */
  37 }
  38
  39 .dataTables_processing {
  40         position: absolute;
  41         top: 50%;
  42         left: 50%;
  43         width: 250px;
  44         height: 30px;
  45         margin-left: -125px;
  46         margin-top: -15px;
  47         padding: 14px 0 2px 0;
  48         border: 1px solid #ddd;
  49         text-align: center;
  50         color: #999;
  51         font-size: 14px;
  52         background-color: white;
  53 }
  54
  55 .dataTables_length {
  56         width: 40%;
  57         float: left;
  58 }
  59
  60 .dataTables_filter {
  61         width: 50%;
  62         float: right;
  63         text-align: right;
  64 }
  65
  66 .dataTables_info {
  67         width: 60%;
  68         float: left;
  69 }
  70
  71 .dataTables_paginate {
  72         float: right;
  73         text-align: right;
  74 }
  75
  76 /* Pagination nested */
  77 .paginate_disabled_previous, .paginate_enabled_previous,
  78 .paginate_disabled_next, .paginate_enabled_next {
  79         height: 19px;
  80         float: left;
  81         cursor: pointer;
  82         *cursor: hand;
  83         color: #111 !important;
  84 }
  85 .paginate_disabled_previous:hover, .paginate_enabled_previous:hover,
  86 .paginate_disabled_next:hover, .paginate_enabled_next:hover {
  87         text-decoration: none !important;
  88 }
  89 .paginate_disabled_previous:active, .paginate_enabled_previous:active,
  90 .paginate_disabled_next:active, .paginate_enabled_next:active {
  91         outline: none;
  92 }
  93
  94 .paginate_disabled_previous,
  95 .paginate_disabled_next {
  96         color: #666 !important;
  97 }
  98 .paginate_disabled_previous, .paginate_enabled_previous {
  99         padding-left: 23px;
 100 }
 101 .paginate_disabled_next, .paginate_enabled_next {
 102         padding-right: 23px;
 103         margin-left: 10px;
 104 }
 105
 106 .paginate_disabled_previous {
 107         background: url('../images/back_disabled.png') no-repeat top left;
 108 }
 109
 110 .paginate_enabled_previous {
 111         background: url('../images/back_enabled.png') no-repeat top left;
 112 }
 113 .paginate_enabled_previous:hover {
 114         background: url('../images/back_enabled_hover.png') no-repeat top left;
 115 }
 116
 117 .paginate_disabled_next {
 118         background: url('../images/forward_disabled.png') no-repeat top right;
 119 }
 120
 121 .paginate_enabled_next {
 122         background: url('../images/forward_enabled.png') no-repeat top right;
 123 }
 124 .paginate_enabled_next:hover {
 125         background: url('../images/forward_enabled_hover.png') no-repeat top right;
 126 }
 127
 128
 129
 130 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 131  * DataTables display
 132  */
 133 table.display {
 134         margin: 0 auto;
 135         clear: both;
 136         width: 100%;
 137
 138         /* Note Firefox 3.5 and before have a bug with border-collapse
 139          * ( https://bugzilla.mozilla.org/show%5Fbug.cgi?id=155955 )
 140          * border-spacing: 0; is one possible option. Conditional-css.com is
 141          * useful for this kind of thing
 142          *
 143          * Further note IE 6/7 has problems when calculating widths with border width.
 144          * It subtracts one px relative to the other browsers from the first column, and
 145          * adds one to the end...
 146          *
 147          * If you want that effect I'd suggest setting a border-top/left on th/td's and
 148          * then filling in the gaps with other borders.
 149          */
 150 }
 151
 152 table.display thead th {
 153         padding: 3px 18px 3px 10px;
 154         border-bottom: 1px solid black;
 155         font-weight: bold;
 156         cursor: pointer;
 157         * cursor: hand;
 158 }
 159
 160 table.display tfoot th {
 161         padding: 3px 18px 3px 10px;
 162         border-top: 1px solid black;
 163         font-weight: bold;
 164 }
 165
 166 table.display tr.heading2 td {
 167         border-bottom: 1px solid #aaa;
 168 }
 169
 170 table.display td {
 171         padding: 3px 10px;
 172 }
 173
 174 table.display td.center {
 175         text-align: center;
 176 }
 177
 178
 179
 180 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 181  * DataTables sorting
 182  */
 183
 184 .sorting_asc {
 185         background: url('../images/sort_asc.png') no-repeat center right;
 186 }
 187
 188 .sorting_desc {
 189         background: url('../images/sort_desc.png') no-repeat center right;
 190 }
 191
 192 .sorting {
 193         background: url('../images/sort_both.png') no-repeat center right;
 194 }
 195
 196 .sorting_asc_disabled {
 197         background: url('../images/sort_asc_disabled.png') no-repeat center right;
 198 }
 199
 200 .sorting_desc_disabled {
 201         background: url('../images/sort_desc_disabled.png') no-repeat center right;
 202 }
 203
 204 table.display thead th:active,
 205 table.display thead td:active {
 206         outline: none;
 207 }
 208
 209
 210
 211
 212 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 213  * DataTables row classes
 214  */
 215 table.display tr.odd.gradeA {
 216         background-color: #ddffdd;
 217 }
 218
 219 table.display tr.even.gradeA {
 220         background-color: #eeffee;
 221 }
 222
 223 table.display tr.odd.gradeC {
 224         background-color: #ddddff;
 225 }
 226
 227 table.display tr.even.gradeC {
 228         background-color: #eeeeff;
 229 }
 230
 231 table.display tr.odd.gradeX {
 232         background-color: #ffdddd;
 233 }
 234
 235 table.display tr.even.gradeX {
 236         background-color: #ffeeee;
 237 }
 238
 239 table.display tr.odd.gradeU {
 240         background-color: #ddd;
 241 }
 242
 243 table.display tr.even.gradeU {
 244         background-color: #eee;
 245 }
 246
 247
 248 tr.odd {
 249         background-color: #E2E4FF;
 250 }
 251
 252 tr.even {
 253         background-color: white;
 254 }
 255
 256
 257
 258
 259
 260 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 261  * Misc
 262  */
 263 .dataTables_scroll {
 264         clear: both;
 265 }
 266
 267 .dataTables_scrollBody {
 268         *margin-top: -1px;
 269         -webkit-overflow-scrolling: touch;
 270 }
 271
 272 .top, .bottom {
 273         padding: 15px;
 274         background-color: #F5F5F5;
 275         border: 1px solid #CCCCCC;
 276 }
 277
 278 .top .dataTables_info {
 279         float: none;
 280 }
 281
 282 .clear {
 283         clear: both;
 284 }
 285
 286 .dataTables_empty {
 287         text-align: center;
 288 }
 289
 290 tfoot input {
 291         margin: 0.5em 0;
 292         width: 100%;
 293         color: #444;
 294 }
 295
 296 tfoot input.search_init {
 297         color: #999;
 298 }
 299
 300 td.group {
 301         background-color: #d1cfd0;
 302         border-bottom: 2px solid #A19B9E;
 303         border-top: 2px solid #A19B9E;
 304 }
 305
 306 td.details {
 307         background-color: #d1cfd0;
 308         border: 2px solid #A19B9E;
 309 }
 310
 311
 312 .example_alt_pagination div.dataTables_info {
 313         width: 40%;
 314 }
 315
 316 .paging_full_numbers {
 317         width: 400px;
 318         height: 22px;
 319         line-height: 22px;
 320 }
 321
 322 .paging_full_numbers a:active {
 323         outline: none
 324 }
 325
 326 .paging_full_numbers a:hover {
 327         text-decoration: none;
 328 }
 329
 330 .paging_full_numbers a.paginate_button,
 331         .paging_full_numbers a.paginate_active {
 332         border: 1px solid #aaa;
 333         -webkit-border-radius: 5px;
 334         -moz-border-radius: 5px;
 335         padding: 2px 5px;
 336         margin: 0 3px;
 337         cursor: pointer;
 338         *cursor: hand;
 339         color: #333 !important;
 340 }
 341
 342 .paging_full_numbers a.paginate_button {
 343         background-color: #ddd;
 344 }
 345
 346 .paging_full_numbers a.paginate_button:hover {
 347         background-color: #ccc;
 348         text-decoration: none !important;
 349 }
 350
 351 .paging_full_numbers a.paginate_active {
 352         background-color: #99B3FF;
 353 }
 354
 355 table.display tr.even.row_selected td {
 356         background-color: #B0BED9;
 357 }
 358
 359 table.display tr.odd.row_selected td {
 360         background-color: #9FAFD1;
 361 }
 362
 363
 364 /*
 365  * Sorting classes for columns
 366  */
 367 /* For the standard odd/even */
 368 tr.odd td.sorting_1 {
 369         background-color: #D3D6FF;
 370 }
 371
 372 tr.odd td.sorting_2 {
 373         background-color: #DADCFF;
 374 }
 375
 376 tr.odd td.sorting_3 {
 377         background-color: #E0E2FF;
 378 }
 379
 380 tr.even td.sorting_1 {
 381         background-color: #EAEBFF;
 382 }
 383
 384 tr.even td.sorting_2 {
 385         background-color: #F2F3FF;
 386 }
 387
 388 tr.even td.sorting_3 {
 389         background-color: #F9F9FF;
 390 }
 391
 392
 393 /* For the Conditional-CSS grading rows */
 394 /*
 395         Colour calculations (based off the main row colours)
 396   Level 1:
 397                 dd > c4
 398                 ee > d5
 399         Level 2:
 400           dd > d1
 401           ee > e2
 402  */
 403 tr.odd.gradeA td.sorting_1 {
 404         background-color: #c4ffc4;
 405 }
 406
 407 tr.odd.gradeA td.sorting_2 {
 408         background-color: #d1ffd1;
 409 }
 410
 411 tr.odd.gradeA td.sorting_3 {
 412         background-color: #d1ffd1;
 413 }
 414
 415 tr.even.gradeA td.sorting_1 {
 416         background-color: #d5ffd5;
 417 }
 418
 419 tr.even.gradeA td.sorting_2 {
 420         background-color: #e2ffe2;
 421 }
 422
 423 tr.even.gradeA td.sorting_3 {
 424         background-color: #e2ffe2;
 425 }
 426
 427 tr.odd.gradeC td.sorting_1 {
 428         background-color: #c4c4ff;
 429 }
 430
 431 tr.odd.gradeC td.sorting_2 {
 432         background-color: #d1d1ff;
 433 }
 434
 435 tr.odd.gradeC td.sorting_3 {
 436         background-color: #d1d1ff;
 437 }
 438
 439 tr.even.gradeC td.sorting_1 {
 440         background-color: #d5d5ff;
 441 }
 442
 443 tr.even.gradeC td.sorting_2 {
 444         background-color: #e2e2ff;
 445 }
 446
 447 tr.even.gradeC td.sorting_3 {
 448         background-color: #e2e2ff;
 449 }
 450
 451 tr.odd.gradeX td.sorting_1 {
 452         background-color: #ffc4c4;
 453 }
 454
 455 tr.odd.gradeX td.sorting_2 {
 456         background-color: #ffd1d1;
 457 }
 458
 459 tr.odd.gradeX td.sorting_3 {
 460         background-color: #ffd1d1;
 461 }
 462
 463 tr.even.gradeX td.sorting_1 {
 464         background-color: #ffd5d5;
 465 }
 466
 467 tr.even.gradeX td.sorting_2 {
 468         background-color: #ffe2e2;
 469 }
 470
 471 tr.even.gradeX td.sorting_3 {
 472         background-color: #ffe2e2;
 473 }
 474
 475 tr.odd.gradeU td.sorting_1 {
 476         background-color: #c4c4c4;
 477 }
 478
 479 tr.odd.gradeU td.sorting_2 {
 480         background-color: #d1d1d1;
 481 }
 482
 483 tr.odd.gradeU td.sorting_3 {
 484         background-color: #d1d1d1;
 485 }
 486
 487 tr.even.gradeU td.sorting_1 {
 488         background-color: #d5d5d5;
 489 }
 490
 491 tr.even.gradeU td.sorting_2 {
 492         background-color: #e2e2e2;
 493 }
 494
 495 tr.even.gradeU td.sorting_3 {
 496         background-color: #e2e2e2;
 497 }
 498
 499
 500 /*
 501  * Row highlighting example
 502  */
 503 .ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
 504         background-color: #ECFFB3;
 505 }
 506
 507 .ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
 508         background-color: #E6FF99;
 509 }
 510
 511 .ex_highlight_row #example tr.even:hover {
 512         background-color: #ECFFB3;
 513 }
 514
 515 .ex_highlight_row #example tr.even:hover td.sorting_1 {
 516         background-color: #DDFF75;
 517 }
 518
 519 .ex_highlight_row #example tr.even:hover td.sorting_2 {
 520         background-color: #E7FF9E;
 521 }
 522
 523 .ex_highlight_row #example tr.even:hover td.sorting_3 {
 524         background-color: #E2FF89;
 525 }
 526
 527 .ex_highlight_row #example tr.odd:hover {
 528         background-color: #E6FF99;
 529 }
 530
 531 .ex_highlight_row #example tr.odd:hover td.sorting_1 {
 532         background-color: #D6FF5C;
 533 }
 534
 535 .ex_highlight_row #example tr.odd:hover td.sorting_2 {
 536         background-color: #E0FF84;
 537 }
 538
 539 .ex_highlight_row #example tr.odd:hover td.sorting_3 {
 540         background-color: #DBFF70;
 541 }
 542
 543
 544 /*
 545  * KeyTable
 546  */
 547 table.KeyTable td {
 548         border: 3px solid transparent;
 549 }
 550
 551 table.KeyTable td.focus {
 552         border: 3px solid #3366FF;
 553 }
 554
 555 table.display tr.gradeA {
 556         background-color: #eeffee;
 557 }
 558
 559 table.display tr.gradeC {
 560         background-color: #ddddff;
 561 }
 562
 563 table.display tr.gradeX {
 564         background-color: #ffdddd;
 565 }
 566
 567 table.display tr.gradeU {
 568         background-color: #ddd;
 569 }
 570
 571 div.box {
 572         height: 100px;
 573         padding: 10px;
 574         overflow: auto;
 575         border: 1px solid #8080FF;
 576         background-color: #E5E5FF;
 577 }