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