plugins/hazelnut/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: 45%;
 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 /*
 279 .top, .bottom {
 280         padding: 15px;
 281         background-color: #F5F5F5;
 282         border: 1px solid #CCCCCC;
 283 }
 284
 285 .top .dataTables_info {
 286         float: none;
 287 }
 288 */
 289 .clear {
 290         clear: both;
 291 }
 292
 293 .dataTables_empty {
 294         text-align: center;
 295 }
 296
 297 tfoot input {
 298         margin: 0.5em 0;
 299         width: 100%;
 300         color: #444;
 301 }
 302
 303 tfoot input.search_init {
 304         color: #999;
 305 }
 306
 307 td.group {
 308         background-color: #d1cfd0;
 309         border-bottom: 2px solid #A19B9E;
 310         border-top: 2px solid #A19B9E;
 311 }
 312
 313 td.details {
 314         background-color: #d1cfd0;
 315         border: 2px solid #A19B9E;
 316 }
 317
 318
 319 .example_alt_pagination div.dataTables_info {
 320         width: 40%;
 321 }
 322
 323 .paging_full_numbers a.paginate_button,
 324         .paging_full_numbers a.paginate_active {
 325         border: 1px solid #aaa;
 326         -webkit-border-radius: 5px;
 327         -moz-border-radius: 5px;
 328         padding: 2px 5px;
 329         margin: 0 3px;
 330         cursor: pointer;
 331         *cursor: hand;
 332         color: #333 !important;
 333 }
 334
 335 .paging_full_numbers a.paginate_button {
 336         background-color: #ddd;
 337 }
 338
 339 .paging_full_numbers a.paginate_button:hover {
 340         background-color: #ccc;
 341         text-decoration: none !important;
 342 }
 343
 344 .paging_full_numbers a.paginate_active {
 345         background-color: #99B3FF;
 346 }
 347
 348 table.display tr.even.row_selected td {
 349         background-color: #B0BED9;
 350 }
 351
 352 table.display tr.odd.row_selected td {
 353         background-color: #9FAFD1;
 354 }
 355
 356
 357 /*
 358  * Sorting classes for columns
 359  */
 360 /* For the standard odd/even */
 361 tr.odd td.sorting_1 {
 362         background-color: #D3D6FF;
 363 }
 364
 365 tr.odd td.sorting_2 {
 366         background-color: #DADCFF;
 367 }
 368
 369 tr.odd td.sorting_3 {
 370         background-color: #E0E2FF;
 371 }
 372
 373 tr.even td.sorting_1 {
 374         background-color: #EAEBFF;
 375 }
 376
 377 tr.even td.sorting_2 {
 378         background-color: #F2F3FF;
 379 }
 380
 381 tr.even td.sorting_3 {
 382         background-color: #F9F9FF;
 383 }
 384
 385
 386 /* For the Conditional-CSS grading rows */
 387 /*
 388         Colour calculations (based off the main row colours)
 389   Level 1:
 390                 dd > c4
 391                 ee > d5
 392         Level 2:
 393           dd > d1
 394           ee > e2
 395  */
 396 tr.odd.gradeA td.sorting_1 {
 397         background-color: #c4ffc4;
 398 }
 399
 400 tr.odd.gradeA td.sorting_2 {
 401         background-color: #d1ffd1;
 402 }
 403
 404 tr.odd.gradeA td.sorting_3 {
 405         background-color: #d1ffd1;
 406 }
 407
 408 tr.even.gradeA td.sorting_1 {
 409         background-color: #d5ffd5;
 410 }
 411
 412 tr.even.gradeA td.sorting_2 {
 413         background-color: #e2ffe2;
 414 }
 415
 416 tr.even.gradeA td.sorting_3 {
 417         background-color: #e2ffe2;
 418 }
 419
 420 tr.odd.gradeC td.sorting_1 {
 421         background-color: #c4c4ff;
 422 }
 423
 424 tr.odd.gradeC td.sorting_2 {
 425         background-color: #d1d1ff;
 426 }
 427
 428 tr.odd.gradeC td.sorting_3 {
 429         background-color: #d1d1ff;
 430 }
 431
 432 tr.even.gradeC td.sorting_1 {
 433         background-color: #d5d5ff;
 434 }
 435
 436 tr.even.gradeC td.sorting_2 {
 437         background-color: #e2e2ff;
 438 }
 439
 440 tr.even.gradeC td.sorting_3 {
 441         background-color: #e2e2ff;
 442 }
 443
 444 tr.odd.gradeX td.sorting_1 {
 445         background-color: #ffc4c4;
 446 }
 447
 448 tr.odd.gradeX td.sorting_2 {
 449         background-color: #ffd1d1;
 450 }
 451
 452 tr.odd.gradeX td.sorting_3 {
 453         background-color: #ffd1d1;
 454 }
 455
 456 tr.even.gradeX td.sorting_1 {
 457         background-color: #ffd5d5;
 458 }
 459
 460 tr.even.gradeX td.sorting_2 {
 461         background-color: #ffe2e2;
 462 }
 463
 464 tr.even.gradeX td.sorting_3 {
 465         background-color: #ffe2e2;
 466 }
 467
 468 tr.odd.gradeU td.sorting_1 {
 469         background-color: #c4c4c4;
 470 }
 471
 472 tr.odd.gradeU td.sorting_2 {
 473         background-color: #d1d1d1;
 474 }
 475
 476 tr.odd.gradeU td.sorting_3 {
 477         background-color: #d1d1d1;
 478 }
 479
 480 tr.even.gradeU td.sorting_1 {
 481         background-color: #d5d5d5;
 482 }
 483
 484 tr.even.gradeU td.sorting_2 {
 485         background-color: #e2e2e2;
 486 }
 487
 488 tr.even.gradeU td.sorting_3 {
 489         background-color: #e2e2e2;
 490 }
 491
 492
 493 /*
 494  * Row highlighting example
 495  */
 496 .ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
 497         background-color: #ECFFB3;
 498 }
 499
 500 .ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
 501         background-color: #E6FF99;
 502 }
 503
 504
 505
 506
 507
 508
 509 /* jordan */
 510 /*            .dataTables_info { padding-top: 0; }*/
 511             .dataTables_paginate { padding-top: 0; }
 512             .css_right { float: right; }
 513             #example_wrapper .fg-toolbar { font-size: 0.8em }
 514             #theme_links span { float: left; padding: 2px 10px; }
 515
 516 .ui-widget-header {
 517     background: none;
 518     border: none;
 519 }
 520
 521 .ui-tabs-nav {
 522     /*border-bottom: 1px solid #AAA*//*{borderColorHeader}*/
 523 }
 524
 525 .ui-tabs {
 526     border: none;
 527     padding: 0;
 528 }
 529
 530 .ui-tabs-panel {
 531     border: 1px solid #AAA/*{borderColorContent}*/ !important;
 532 }