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 min-height: 302px; 36 clear: both; 37 _height: 302px; 38 zoom: 1; /* Feeling sorry for IE */ 39} 40 41.dataTables_processing { 42 position: absolute; 43 top: 50%; 44 left: 50%; 45 width: 250px; 46 height: 30px; 47 margin-left: -125px; 48 margin-top: -15px; 49 padding: 14px 0 2px 0; 50 border: 1px solid #ddd; 51 text-align: center; 52 color: #999; 53 font-size: 14px; 54 background-color: white; 55} 56 57.dataTables_length { 58 width: 40%; 59 float: left; 60} 61 62.dataTables_filter { 63 width: 50%; 64 float: right; 65 text-align: right; 66} 67 68.dataTables_info { 69 width: 60%; 70 float: left; 71} 72 73.dataTables_paginate { 74 width: 44px; 75 * width: 50px; 76 float: right; 77 text-align: right; 78} 79 80/* Pagination nested */ 81.paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next { 82 height: 19px; 83 width: 19px; 84 margin-left: 3px; 85 float: left; 86} 87 88.paginate_disabled_previous { 89 background-image: url('images/back_disabled.jpg'); 90} 91 92.paginate_enabled_previous { 93 background-image: url('images/back_enabled.jpg'); 94} 95 96.paginate_disabled_next { 97 background-image: url('images/forward_disabled.jpg'); 98} 99 100.paginate_enabled_next { 101 background-image: url('images/forward_enabled.jpg'); 102} 103 104 105 106/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 107 * DataTables display 108 */ 109table.display { 110 margin: 0 auto; 111 clear: both; 112 width: 100%; 113 114 /* Note Firefox 3.5 and before have a bug with border-collapse 115 * ( https://bugzilla.mozilla.org/show%5Fbug.cgi?id=155955 ) 116 * border-spacing: 0; is one possible option. Conditional-css.com is 117 * useful for this kind of thing 118 * 119 * Further note IE 6/7 has problems when calculating widths with border width. 120 * It subtracts one px relative to the other browsers from the first column, and 121 * adds one to the end... 122 * 123 * If you want that effect I'd suggest setting a border-top/left on th/td's and 124 * then filling in the gaps with other borders. 125 */ 126} 127 128table.display thead th { 129 padding: 3px 18px 3px 10px; 130 border-bottom: 1px solid black; 131 font-weight: bold; 132 cursor: pointer; 133 * cursor: hand; 134} 135 136table.display tfoot th { 137 padding: 3px 18px 3px 10px; 138 border-top: 1px solid black; 139 font-weight: bold; 140} 141 142table.display tr.heading2 td { 143 border-bottom: 1px solid #aaa; 144} 145 146table.display td { 147 padding: 3px 10px; 148} 149 150table.display td.center { 151 text-align: center; 152} 153 154 155 156/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 157 * DataTables sorting 158 */ 159 160.sorting_asc { 161 background: url('images/sort_asc.png') no-repeat center right; 162} 163 164.sorting_desc { 165 background: url('images/sort_desc.png') no-repeat center right; 166} 167 168.sorting { 169 background: url('images/sort_both.png') no-repeat center right; 170} 171 172.sorting_asc_disabled { 173 background: url('images/sort_asc_disabled.png') no-repeat center right; 174} 175 176.sorting_desc_disabled { 177 background: url('images/sort_desc_disabled.png') no-repeat center right; 178} 179 180 181 182 183 184/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 185 * DataTables row classes 186 */ 187table.display tr.odd.gradeA { 188 background-color: #ddffdd; 189} 190 191table.display tr.even.gradeA { 192 background-color: #eeffee; 193} 194 195table.display tr.odd.gradeC { 196 background-color: #ddddff; 197} 198 199table.display tr.even.gradeC { 200 background-color: #eeeeff; 201} 202 203table.display tr.odd.gradeX { 204 background-color: #ffdddd; 205} 206 207table.display tr.even.gradeX { 208 background-color: #ffeeee; 209} 210 211table.display tr.odd.gradeU { 212 background-color: #ddd; 213} 214 215table.display tr.even.gradeU { 216 background-color: #eee; 217} 218 219 220tr.odd { 221 background-color: #E2E4FF; 222} 223 224tr.even { 225 background-color: white; 226} 227 228 229 230 231 232/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 233 * Misc 234 */ 235.dataTables_scroll { 236 clear: both; 237} 238 239.dataTables_scrollBody { 240 *margin-top: -1px; 241} 242 243.top, .bottom { 244 padding: 15px; 245 background-color: #F5F5F5; 246 border: 1px solid #CCCCCC; 247} 248 249.top .dataTables_info { 250 float: none; 251} 252 253.clear { 254 clear: both; 255} 256 257.dataTables_empty { 258 text-align: center; 259} 260 261tfoot input { 262 margin: 0.5em 0; 263 width: 100%; 264 color: #444; 265} 266 267tfoot input.search_init { 268 color: #999; 269} 270 271td.group { 272 background-color: #d1cfd0; 273 border-bottom: 2px solid #A19B9E; 274 border-top: 2px solid #A19B9E; 275} 276 277td.details { 278 background-color: #d1cfd0; 279 border: 2px solid #A19B9E; 280} 281 282 283.example_alt_pagination div.dataTables_info { 284 width: 40%; 285} 286 287.paging_full_numbers { 288 width: 400px; 289 height: 22px; 290 line-height: 22px; 291} 292 293.paging_full_numbers span.paginate_button, 294 .paging_full_numbers span.paginate_active { 295 border: 1px solid #aaa; 296 -webkit-border-radius: 5px; 297 -moz-border-radius: 5px; 298 padding: 2px 5px; 299 margin: 0 3px; 300 cursor: pointer; 301 *cursor: hand; 302} 303 304.paging_full_numbers span.paginate_button { 305 background-color: #ddd; 306} 307 308.paging_full_numbers span.paginate_button:hover { 309 background-color: #ccc; 310} 311 312.paging_full_numbers span.paginate_active { 313 background-color: #99B3FF; 314} 315 316table.display tr.even.row_selected td { 317 background-color: #B0BED9; 318} 319 320table.display tr.odd.row_selected td { 321 background-color: #9FAFD1; 322} 323 324 325/* 326 * Sorting classes for columns 327 */ 328/* For the standard odd/even */ 329tr.odd td.sorting_1 { 330 background-color: #D3D6FF; 331} 332 333tr.odd td.sorting_2 { 334 background-color: #DADCFF; 335} 336 337tr.odd td.sorting_3 { 338 background-color: #E0E2FF; 339} 340 341tr.even td.sorting_1 { 342 background-color: #EAEBFF; 343} 344 345tr.even td.sorting_2 { 346 background-color: #F2F3FF; 347} 348 349tr.even td.sorting_3 { 350 background-color: #F9F9FF; 351} 352 353 354/* For the Conditional-CSS grading rows */ 355/* 356 Colour calculations (based off the main row colours) 357 Level 1: 358 dd > c4 359 ee > d5 360 Level 2: 361 dd > d1 362 ee > e2 363 */ 364tr.odd.gradeA td.sorting_1 { 365 background-color: #c4ffc4; 366} 367 368tr.odd.gradeA td.sorting_2 { 369 background-color: #d1ffd1; 370} 371 372tr.odd.gradeA td.sorting_3 { 373 background-color: #d1ffd1; 374} 375 376tr.even.gradeA td.sorting_1 { 377 background-color: #d5ffd5; 378} 379 380tr.even.gradeA td.sorting_2 { 381 background-color: #e2ffe2; 382} 383 384tr.even.gradeA td.sorting_3 { 385 background-color: #e2ffe2; 386} 387 388tr.odd.gradeC td.sorting_1 { 389 background-color: #c4c4ff; 390} 391 392tr.odd.gradeC td.sorting_2 { 393 background-color: #d1d1ff; 394} 395 396tr.odd.gradeC td.sorting_3 { 397 background-color: #d1d1ff; 398} 399 400tr.even.gradeC td.sorting_1 { 401 background-color: #d5d5ff; 402} 403 404tr.even.gradeC td.sorting_2 { 405 background-color: #e2e2ff; 406} 407 408tr.even.gradeC td.sorting_3 { 409 background-color: #e2e2ff; 410} 411 412tr.odd.gradeX td.sorting_1 { 413 background-color: #ffc4c4; 414} 415 416tr.odd.gradeX td.sorting_2 { 417 background-color: #ffd1d1; 418} 419 420tr.odd.gradeX td.sorting_3 { 421 background-color: #ffd1d1; 422} 423 424tr.even.gradeX td.sorting_1 { 425 background-color: #ffd5d5; 426} 427 428tr.even.gradeX td.sorting_2 { 429 background-color: #ffe2e2; 430} 431 432tr.even.gradeX td.sorting_3 { 433 background-color: #ffe2e2; 434} 435 436tr.odd.gradeU td.sorting_1 { 437 background-color: #c4c4c4; 438} 439 440tr.odd.gradeU td.sorting_2 { 441 background-color: #d1d1d1; 442} 443 444tr.odd.gradeU td.sorting_3 { 445 background-color: #d1d1d1; 446} 447 448tr.even.gradeU td.sorting_1 { 449 background-color: #d5d5d5; 450} 451 452tr.even.gradeU td.sorting_2 { 453 background-color: #e2e2e2; 454} 455 456tr.even.gradeU td.sorting_3 { 457 background-color: #e2e2e2; 458} 459 460 461/* 462 * Row highlighting example 463 */ 464.ex_highlight tbody tr.even:hover, tbody tr.even td.highlighted { 465 background-color: #ECFFB3; 466} 467 468.ex_highlight tbody tr.odd:hover, tbody tr.odd td.highlighted { 469 background-color: #E6FF99; 470} 471 472.ex_highlight_row tr.even:hover { 473 background-color: #ECFFB3; 474} 475 476.ex_highlight_row tr.even:hover td.sorting_1 { 477 background-color: #DDFF75; 478} 479 480.ex_highlight_row tr.even:hover td.sorting_2 { 481 background-color: #E7FF9E; 482} 483 484.ex_highlight_row tr.even:hover td.sorting_3 { 485 background-color: #E2FF89; 486} 487 488.ex_highlight_row tr.odd:hover { 489 background-color: #E6FF99; 490} 491 492.ex_highlight_row tr.odd:hover td.sorting_1 { 493 background-color: #D6FF5C; 494} 495 496.ex_highlight_row tr.odd:hover td.sorting_2 { 497 background-color: #E0FF84; 498} 499 500.ex_highlight_row tr.odd:hover td.sorting_3 { 501 background-color: #DBFF70; 502} 503 504 505/* 506 * KeyTable 507 */ 508table.KeyTable td { 509 border: 3px solid transparent; 510} 511 512table.KeyTable td.focus { 513 border: 3px solid #3366FF; 514} 515 516table.display tr.gradeA { 517 background-color: #eeffee; 518} 519 520table.display tr.gradeC { 521 background-color: #ddddff; 522} 523 524table.display tr.gradeX { 525 background-color: #ffdddd; 526} 527 528table.display tr.gradeU { 529 background-color: #ddd; 530} 531 532div.box { 533 height: 100px; 534 padding: 10px; 535 overflow: auto; 536 border: 1px solid #8080FF; 537 background-color: #E5E5FF; 538} 539 540/* 541 * File: demo_table_jui.css 542 * CVS: $Id$ 543 * Description: CSS descriptions for DataTables demo pages 544 * Author: Allan Jardine 545 * Created: Tue May 12 06:47:22 BST 2009 546 * Modified: $Date$ by $Author$ 547 * Language: CSS 548 * Project: DataTables 549 * 550 * Copyright 2009 Allan Jardine. All Rights Reserved. 551 * 552 * *************************************************************************** 553 * DESCRIPTION 554 * 555 * The styles given here are suitable for the demos that are used with the standard DataTables 556 * distribution (see www.datatables.net). You will most likely wish to modify these styles to 557 * meet the layout requirements of your site. 558 * 559 * Common issues: 560 * 'full_numbers' pagination - I use an extra selector on the body tag to ensure that there is 561 * no conflict between the two pagination types. If you want to use full_numbers pagination 562 * ensure that you either have "example_alt_pagination" as a body class name, or better yet, 563 * modify that selector. 564 * Note that the path used for Images is relative. All images are by default located in 565 * images/ - relative to this CSS file. 566 */ 567 568 569/* 570 * jQuery UI specific styling 571 */ 572 573.paging_two_button .ui-button { 574 float: left; 575 cursor: pointer; 576 * cursor: hand; 577} 578 579.paging_full_numbers .ui-button { 580 padding: 2px 6px; 581 margin: 0; 582 cursor: pointer; 583 * cursor: hand; 584} 585 586.dataTables_paginate .ui-button { 587 margin-right: -0.1em !important; 588} 589 590.paging_full_numbers { 591 width: 350px !important; 592} 593 594.dataTables_wrapper .ui-toolbar { 595 padding: 5px; 596} 597 598.dataTables_paginate { 599 width: auto; 600} 601 602.dataTables_info { 603 padding-top: 3px; 604} 605 606table.display thead th { 607 padding: 3px 0px 3px 10px; 608 cursor: pointer; 609 * cursor: hand; 610} 611 612div.dataTables_wrapper .ui-widget-header { 613 font-weight: normal; 614} 615 616 617/* 618 * Sort arrow icon positioning 619 */ 620table.display thead th div.DataTables_sort_wrapper { 621 position: relative; 622 padding-right: 20px; 623 padding-right: 20px; 624} 625 626table.display thead th div.DataTables_sort_wrapper span { 627 position: absolute; 628 top: 50%; 629 margin-top: -8px; 630 right: 0; 631} 632 633 634 635 636/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 637 * 638 * Everything below this line is the same as demo_table.css. This file is 639 * required for 'cleanliness' of the markup 640 * 641 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ 642 643 644 645/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 646 * DataTables features 647 */ 648 649.dataTables_wrapper { 650 position: relative; 651 min-height: 302px; 652 _height: 302px; 653 clear: both; 654} 655 656.dataTables_processing { 657 position: absolute; 658 top: 0px; 659 left: 50%; 660 width: 250px; 661 margin-left: -125px; 662 border: 1px solid #ddd; 663 text-align: center; 664 color: #999; 665 font-size: 11px; 666 padding: 2px 0; 667} 668 669.dataTables_length { 670 width: 40%; 671 float: left; 672} 673 674.dataTables_filter { 675 width: 50%; 676 float: right; 677 text-align: right; 678} 679 680.dataTables_info { 681 width: 50%; 682 float: left; 683} 684 685.dataTables_paginate { 686 float: right; 687 text-align: right; 688} 689 690/* Pagination nested */ 691.paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next { 692 height: 19px; 693 width: 19px; 694 margin-left: 3px; 695 float: left; 696} 697 698.paginate_disabled_previous { 699 background-image: url('images/back_disabled.jpg'); 700} 701 702.paginate_enabled_previous { 703 background-image: url('images/back_enabled.jpg'); 704} 705 706.paginate_disabled_next { 707 background-image: url('images/forward_disabled.jpg'); 708} 709 710.paginate_enabled_next { 711 background-image: url('images/forward_enabled.jpg'); 712} 713 714 715 716/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 717 * DataTables display 718 */ 719table.display { 720 margin: 0 auto; 721 width: 100%; 722 clear: both; 723 border-collapse: collapse; 724} 725 726table.display tfoot th { 727 padding: 3px 0px 3px 10px; 728 font-weight: bold; 729 font-weight: normal; 730} 731 732table.display tr.heading2 td { 733 border-bottom: 1px solid #aaa; 734} 735 736table.display td { 737 padding: 3px 10px; 738} 739 740table.display td.center { 741 text-align: center; 742} 743 744 745 746/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 747 * DataTables sorting 748 */ 749 750.sorting_asc { 751 background: url('images/sort_asc.png') no-repeat center right; 752} 753 754.sorting_desc { 755 background: url('images/sort_desc.png') no-repeat center right; 756} 757 758.sorting { 759 background: url('images/sort_both.png') no-repeat center right; 760} 761 762.sorting_asc_disabled { 763 background: url('images/sort_asc_disabled.png') no-repeat center right; 764} 765 766.sorting_desc_disabled { 767 background: url('images/sort_desc_disabled.png') no-repeat center right; 768} 769 770 771 772 773/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 774 * DataTables row classes 775 */ 776 777 778 779table.display tr.odd.status_good { 780 background-color: #ddffdd; 781} 782 783table.display tr.even.status_good { 784 background-color: #eeffee; 785} 786 787table.display tr.odd.status_normal { 788 background-color: #ddddff; 789} 790 791table.display tr.even.status_normal { 792 background-color: #eeeeff; 793} 794 795table.display tr.odd.status_bad { 796 background-color: #ffdddd; 797} 798 799table.display tr.even.status_bad { 800 background-color: #ffeeee; 801} 802 803/*table.display tr.odd.status3 { 804 background-color: #ddd; 805} 806 807table.display tr.even.status3 { 808 background-color: #eee; 809}*/ 810 811 812table.display tr.odd { 813 background-color: #E2E4FF; 814} 815 816table.display tr.even { 817 background-color: white; 818} 819 820 821 822 823 824/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 825 * Misc 826 */ 827.dataTables_scroll { 828 clear: both; 829} 830 831.top, .bottom { 832 padding: 15px; 833 background-color: #F5F5F5; 834 border: 1px solid #CCCCCC; 835} 836 837.top .dataTables_info { 838 float: none; 839} 840 841.clear { 842 clear: both; 843} 844 845.dataTables_empty { 846 text-align: center; 847} 848 849tfoot input { 850 margin: 0.5em 0; 851 width: 100%; 852 color: #444; 853} 854 855tfoot input.search_init { 856 color: #999; 857} 858 859td.group { 860 background-color: #d1cfd0; 861 border-bottom: 2px solid #A19B9E; 862 border-top: 2px solid #A19B9E; 863} 864 865td.details { 866 background-color: #d1cfd0; 867 border: 2px solid #A19B9E; 868} 869 870 871.example_alt_pagination div.dataTables_info { 872 width: 40%; 873} 874 875.paging_full_numbers span.paginate_button, 876 .paging_full_numbers span.paginate_active { 877 border: 1px solid #aaa; 878 -webkit-border-radius: 5px; 879 -moz-border-radius: 5px; 880 padding: 2px 5px; 881 margin: 0 3px; 882 cursor: pointer; 883 *cursor: hand; 884} 885 886.paging_full_numbers span.paginate_button { 887 background-color: #ddd; 888} 889 890.paging_full_numbers span.paginate_button:hover { 891 background-color: #ccc; 892} 893 894.paging_full_numbers span.paginate_active { 895 background-color: #99B3FF; 896} 897 898table.display tr.even.row_selected td { 899 background-color: #B0BED9; 900} 901 902table.display tr.odd.row_selected td { 903 background-color: #9FAFD1; 904} 905 906 907/* 908 * Sorting classes for columns 909 */ 910/* For the standard odd/even */ 911tr.odd td.sorting_1 { 912 background-color: #D3D6FF; 913} 914 915tr.odd td.sorting_2 { 916 background-color: #DADCFF; 917} 918 919tr.odd td.sorting_3 { 920 background-color: #E0E2FF; 921} 922 923tr.even td.sorting_1 { 924 background-color: #EAEBFF; 925} 926 927tr.even td.sorting_2 { 928 background-color: #F2F3FF; 929} 930 931tr.even td.sorting_3 { 932 background-color: #F9F9FF; 933} 934 935 936/* For the Conditional-CSS grading rows */ 937/* 938 Colour calculations (based off the main row colours) 939 Level 1: 940 dd > c4 941 ee > d5 942 Level 2: 943 dd > d1 944 ee > e2 945 */ 946tr.odd.gradeA td.sorting_1 { 947 background-color: #c4ffc4; 948} 949 950tr.odd.gradeA td.sorting_2 { 951 background-color: #d1ffd1; 952} 953 954tr.odd.gradeA td.sorting_3 { 955 background-color: #d1ffd1; 956} 957 958tr.even.gradeA td.sorting_1 { 959 background-color: #d5ffd5; 960} 961 962tr.even.gradeA td.sorting_2 { 963 background-color: #e2ffe2; 964} 965 966tr.even.gradeA td.sorting_3 { 967 background-color: #e2ffe2; 968} 969 970tr.odd.gradeC td.sorting_1 { 971 background-color: #c4c4ff; 972} 973 974tr.odd.gradeC td.sorting_2 { 975 background-color: #d1d1ff; 976} 977 978tr.odd.gradeC td.sorting_3 { 979 background-color: #d1d1ff; 980} 981 982tr.even.gradeC td.sorting_1 { 983 background-color: #d5d5ff; 984} 985 986tr.even.gradeC td.sorting_2 { 987 background-color: #e2e2ff; 988} 989 990tr.even.gradeC td.sorting_3 { 991 background-color: #e2e2ff; 992} 993 994tr.odd.gradeX td.sorting_1 { 995 background-color: #ffc4c4; 996} 997 998tr.odd.gradeX td.sorting_2 { 999 background-color: #ffd1d1; 1000} 1001 1002tr.odd.gradeX td.sorting_3 { 1003 background-color: #ffd1d1; 1004} 1005 1006tr.even.gradeX td.sorting_1 { 1007 background-color: #ffd5d5; 1008} 1009 1010tr.even.gradeX td.sorting_2 { 1011 background-color: #ffe2e2; 1012} 1013 1014tr.even.gradeX td.sorting_3 { 1015 background-color: #ffe2e2; 1016} 1017 1018tr.odd.gradeU td.sorting_1 { 1019 background-color: #c4c4c4; 1020} 1021 1022tr.odd.gradeU td.sorting_2 { 1023 background-color: #d1d1d1; 1024} 1025 1026tr.odd.gradeU td.sorting_3 { 1027 background-color: #d1d1d1; 1028} 1029 1030tr.even.gradeU td.sorting_1 { 1031 background-color: #d5d5d5; 1032} 1033 1034tr.even.gradeU td.sorting_2 { 1035 background-color: #e2e2e2; 1036} 1037 1038tr.even.gradeU td.sorting_3 { 1039 background-color: #e2e2e2; 1040} 1041 1042 1043/* 1044 * Row highlighting example 1045 */ 1046.ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted { 1047 background-color: #ECFFB3; 1048} 1049 1050.ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted { 1051 background-color: #E6FF99; 1052} 1053