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

   1 /*
   2  *  File:         demo_table_jui.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 /*
  31  * jQuery UI specific styling
  32  */
  33
  34 .paging_two_button .ui-button {
  35         float: left;
  36         cursor: pointer;
  37         * cursor: hand;
  38 }
  39
  40 .paging_full_numbers .ui-button {
  41         padding: 2px 6px;
  42         margin: 0;
  43         cursor: pointer;
  44         * cursor: hand;
  45         color: #333 !important;
  46 }
  47
  48 .dataTables_paginate .ui-button {
  49         margin-right: -0.1em !important;
  50 }
  51
  52 .paging_full_numbers {
  53         width: 350px !important;
  54 }
  55
  56 .dataTables_wrapper .ui-toolbar {
  57         padding: 5px;
  58 }
  59
  60 .dataTables_paginate {
  61         width: auto;
  62 }
  63
  64 .dataTables_info {
  65         padding-top: 3px;
  66 }
  67
  68 table.display thead th {
  69         padding: 3px 0px 3px 10px;
  70         cursor: pointer;
  71         * cursor: hand;
  72 }
  73
  74 div.dataTables_wrapper .ui-widget-header {
  75         font-weight: normal;
  76 }
  77
  78
  79 /*
  80  * Sort arrow icon positioning
  81  */
  82 table.display thead th div.DataTables_sort_wrapper {
  83         position: relative;
  84         padding-right: 20px;
  85 }
  86
  87 table.display thead th div.DataTables_sort_wrapper span {
  88         position: absolute;
  89         top: 50%;
  90         margin-top: -8px;
  91         right: 0;
  92 }
  93
  94
  95
  96
  97 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  98  *
  99  * Everything below this line is the same as demo_table.css. This file is
 100  * required for 'cleanliness' of the markup
 101  *
 102  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 103
 104
 105
 106 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 107  * DataTables features
 108  */
 109
 110 .dataTables_wrapper {
 111         position: relative;
 112         clear: both;
 113 }
 114
 115 .dataTables_processing {
 116         position: absolute;
 117         top: 0px;
 118         left: 50%;
 119         width: 250px;
 120         margin-left: -125px;
 121         border: 1px solid #ddd;
 122         text-align: center;
 123         color: #999;
 124         font-size: 11px;
 125         padding: 2px 0;
 126 }
 127
 128 .dataTables_length {
 129         width: 40%;
 130         float: left;
 131 }
 132
 133 .dataTables_filter {
 134         width: 50%;
 135         float: right;
 136         text-align: right;
 137 }
 138
 139 .dataTables_info {
 140         width: 50%;
 141         float: left;
 142 }
 143
 144 .dataTables_paginate {
 145         float: right;
 146         text-align: right;
 147 }
 148
 149
 150
 151 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 152  * DataTables display
 153  */
 154 table.display {
 155         margin: 0 auto;
 156         width: 100%;
 157         clear: both;
 158         border-collapse: collapse;
 159 }
 160
 161 table.display tfoot th {
 162         padding: 3px 0px 3px 10px;
 163         font-weight: bold;
 164         font-weight: normal;
 165 }
 166
 167 table.display tr.heading2 td {
 168         border-bottom: 1px solid #aaa;
 169 }
 170
 171 table.display td {
 172         padding: 3px 10px;
 173 }
 174
 175 table.display td.center {
 176         text-align: center;
 177 }
 178
 179
 180
 181 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 182  * DataTables sorting
 183  */
 184
 185 .sorting_asc {
 186         background: url('../images/sort_asc.png') no-repeat center right;
 187 }
 188
 189 .sorting_desc {
 190         background: url('../images/sort_desc.png') no-repeat center right;
 191 }
 192
 193 .sorting {
 194         background: url('../images/sort_both.png') no-repeat center right;
 195 }
 196
 197 .sorting_asc_disabled {
 198         background: url('../images/sort_asc_disabled.png') no-repeat center right;
 199 }
 200
 201 .sorting_desc_disabled {
 202         background: url('../images/sort_desc_disabled.png') no-repeat center right;
 203 }
 204
 205
 206
 207
 208 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 209  * DataTables row classes
 210  */
 211 table.display tr.odd.gradeA {
 212         background-color: #ddffdd;
 213 }
 214
 215 table.display tr.even.gradeA {
 216         background-color: #eeffee;
 217 }
 218
 219
 220
 221
 222 table.display tr.odd.gradeA {
 223         background-color: #ddffdd;
 224 }
 225
 226 table.display tr.even.gradeA {
 227         background-color: #eeffee;
 228 }
 229
 230 table.display tr.odd.gradeC {
 231         background-color: #ddddff;
 232 }
 233
 234 table.display tr.even.gradeC {
 235         background-color: #eeeeff;
 236 }
 237
 238 table.display tr.odd.gradeX {
 239         background-color: #ffdddd;
 240 }
 241
 242 table.display tr.even.gradeX {
 243         background-color: #ffeeee;
 244 }
 245
 246 table.display tr.odd.gradeU {
 247         background-color: #ddd;
 248 }
 249
 250 table.display tr.even.gradeU {
 251         background-color: #eee;
 252 }
 253
 254
 255 tr.odd {
 256         background-color: #E2E4FF;
 257 }
 258
 259 tr.even {
 260         background-color: white;
 261 }
 262
 263
 264
 265
 266
 267 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 268  * Misc
 269  */
 270 .dataTables_scroll {
 271         clear: both;
 272 }
 273
 274 .dataTables_scrollBody {
 275         -webkit-overflow-scrolling: touch;
 276 }
 277
 278 .top, .bottom {
 279         padding: 15px;
 280         background-color: #F5F5F5;
 281         border: 1px solid #CCCCCC;
 282 }
 283
 284 .top .dataTables_info {
 285         float: none;
 286 }
 287
 288 .clear {
 289         clear: both;
 290 }
 291
 292 .dataTables_empty {
 293         text-align: center;
 294 }
 295
 296 tfoot input {
 297         margin: 0.5em 0;
 298         width: 100%;
 299         color: #444;
 300 }
 301
 302 tfoot input.search_init {
 303         color: #999;
 304 }
 305
 306 td.group {
 307         background-color: #d1cfd0;
 308         border-bottom: 2px solid #A19B9E;
 309         border-top: 2px solid #A19B9E;
 310 }
 311
 312 td.details {
 313         background-color: #d1cfd0;
 314         border: 2px solid #A19B9E;
 315 }
 316
 317
 318 .example_alt_pagination div.dataTables_info {
 319         width: 40%;
 320 }
 321
 322 .paging_full_numbers a.paginate_button,
 323         .paging_full_numbers a.paginate_active {
 324         border: 1px solid #aaa;
 325         -webkit-border-radius: 5px;
 326         -moz-border-radius: 5px;
 327         padding: 2px 5px;
 328         margin: 0 3px;
 329         cursor: pointer;
 330         *cursor: hand;
 331         color: #333 !important;
 332 }
 333
 334 .paging_full_numbers a.paginate_button {
 335         background-color: #ddd;
 336 }
 337
 338 .paging_full_numbers a.paginate_button:hover {
 339         background-color: #ccc;
 340         text-decoration: none !important;
 341 }
 342
 343 .paging_full_numbers a.paginate_active {
 344         background-color: #99B3FF;
 345 }
 346
 347 table.display tr.even.row_selected td {
 348         background-color: #B0BED9;
 349 }
 350
 351 table.display tr.odd.row_selected td {
 352         background-color: #9FAFD1;
 353 }
 354
 355
 356 /*
 357  * Sorting classes for columns
 358  */
 359 /* For the standard odd/even */
 360 tr.odd td.sorting_1 {
 361         background-color: #D3D6FF;
 362 }
 363
 364 tr.odd td.sorting_2 {
 365         background-color: #DADCFF;
 366 }
 367
 368 tr.odd td.sorting_3 {
 369         background-color: #E0E2FF;
 370 }
 371
 372 tr.even td.sorting_1 {
 373         background-color: #EAEBFF;
 374 }
 375
 376 tr.even td.sorting_2 {
 377         background-color: #F2F3FF;
 378 }
 379
 380 tr.even td.sorting_3 {
 381         background-color: #F9F9FF;
 382 }
 383
 384
 385 /* For the Conditional-CSS grading rows */
 386 /*
 387         Colour calculations (based off the main row colours)
 388   Level 1:
 389                 dd > c4
 390                 ee > d5
 391         Level 2:
 392           dd > d1
 393           ee > e2
 394  */
 395 tr.odd.gradeA td.sorting_1 {
 396         background-color: #c4ffc4;
 397 }
 398
 399 tr.odd.gradeA td.sorting_2 {
 400         background-color: #d1ffd1;
 401 }
 402
 403 tr.odd.gradeA td.sorting_3 {
 404         background-color: #d1ffd1;
 405 }
 406
 407 tr.even.gradeA td.sorting_1 {
 408         background-color: #d5ffd5;
 409 }
 410
 411 tr.even.gradeA td.sorting_2 {
 412         background-color: #e2ffe2;
 413 }
 414
 415 tr.even.gradeA td.sorting_3 {
 416         background-color: #e2ffe2;
 417 }
 418
 419 tr.odd.gradeC td.sorting_1 {
 420         background-color: #c4c4ff;
 421 }
 422
 423 tr.odd.gradeC td.sorting_2 {
 424         background-color: #d1d1ff;
 425 }
 426
 427 tr.odd.gradeC td.sorting_3 {
 428         background-color: #d1d1ff;
 429 }
 430
 431 tr.even.gradeC td.sorting_1 {
 432         background-color: #d5d5ff;
 433 }
 434
 435 tr.even.gradeC td.sorting_2 {
 436         background-color: #e2e2ff;
 437 }
 438
 439 tr.even.gradeC td.sorting_3 {
 440         background-color: #e2e2ff;
 441 }
 442
 443 tr.odd.gradeX td.sorting_1 {
 444         background-color: #ffc4c4;
 445 }
 446
 447 tr.odd.gradeX td.sorting_2 {
 448         background-color: #ffd1d1;
 449 }
 450
 451 tr.odd.gradeX td.sorting_3 {
 452         background-color: #ffd1d1;
 453 }
 454
 455 tr.even.gradeX td.sorting_1 {
 456         background-color: #ffd5d5;
 457 }
 458
 459 tr.even.gradeX td.sorting_2 {
 460         background-color: #ffe2e2;
 461 }
 462
 463 tr.even.gradeX td.sorting_3 {
 464         background-color: #ffe2e2;
 465 }
 466
 467 tr.odd.gradeU td.sorting_1 {
 468         background-color: #c4c4c4;
 469 }
 470
 471 tr.odd.gradeU td.sorting_2 {
 472         background-color: #d1d1d1;
 473 }
 474
 475 tr.odd.gradeU td.sorting_3 {
 476         background-color: #d1d1d1;
 477 }
 478
 479 tr.even.gradeU td.sorting_1 {
 480         background-color: #d5d5d5;
 481 }
 482
 483 tr.even.gradeU td.sorting_2 {
 484         background-color: #e2e2e2;
 485 }
 486
 487 tr.even.gradeU td.sorting_3 {
 488         background-color: #e2e2e2;
 489 }
 490
 491
 492 /*
 493  * Row highlighting example
 494  */
 495 .ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
 496         background-color: #ECFFB3;
 497 }
 498
 499 .ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
 500         background-color: #E6FF99;
 501 }