2 * File: demo_table_jui.css
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$
11 * Copyright 2009 Allan Jardine. All Rights Reserved.
13 * ***************************************************************************
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.
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.
31 * jQuery UI specific styling
34 .paging_two_button .ui-button {
40 .paging_full_numbers .ui-button {
45 color: #333 !important;
48 .dataTables_paginate .ui-button {
49 margin-right: -0.1em !important;
52 .paging_full_numbers {
53 width: 350px !important;
56 .dataTables_wrapper .ui-toolbar {
60 .dataTables_paginate {
68 table.display thead th {
69 padding: 3px 0px 3px 10px;
74 div.dataTables_wrapper .ui-widget-header {
80 * Sort arrow icon positioning
82 table.display thead th div.DataTables_sort_wrapper {
87 table.display thead th div.DataTables_sort_wrapper span {
97 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
99 * Everything below this line is the same as demo_table.css. This file is
100 * required for 'cleanliness' of the markup
102 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
106 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
107 * DataTables features
110 .dataTables_wrapper {
115 .dataTables_processing {
121 border: 1px solid #ddd;
144 .dataTables_paginate {
151 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
158 border-collapse: collapse;
161 table.display tfoot th {
162 padding: 3px 0px 3px 10px;
167 table.display tr.heading2 td {
168 border-bottom: 1px solid #aaa;
175 table.display td.center {
181 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
186 background: url('images/sort_asc.png') no-repeat center right;
190 background: url('images/sort_desc.png') no-repeat center right;
194 background: url('images/sort_both.png') no-repeat center right;
197 .sorting_asc_disabled {
198 background: url('images/sort_asc_disabled.png') no-repeat center right;
201 .sorting_desc_disabled {
202 background: url('images/sort_desc_disabled.png') no-repeat center right;
208 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
209 * DataTables row classes
211 table.display tr.odd.gradeA {
212 background-color: #ddffdd;
215 table.display tr.even.gradeA {
216 background-color: #eeffee;
222 table.display tr.odd.gradeA {
223 background-color: #ddffdd;
226 table.display tr.even.gradeA {
227 background-color: #eeffee;
230 table.display tr.odd.gradeC {
231 background-color: #ddddff;
234 table.display tr.even.gradeC {
235 background-color: #eeeeff;
238 table.display tr.odd.gradeX {
239 background-color: #ffdddd;
242 table.display tr.even.gradeX {
243 background-color: #ffeeee;
246 table.display tr.odd.gradeU {
247 background-color: #ddd;
250 table.display tr.even.gradeU {
251 background-color: #eee;
256 background-color: #E2E4FF;
260 background-color: white;
267 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
274 .dataTables_scrollBody {
275 -webkit-overflow-scrolling: touch;
281 background-color: #F5F5F5;
282 border: 1px solid #CCCCCC;
285 .top .dataTables_info {
303 tfoot input.search_init {
308 background-color: #d1cfd0;
309 border-bottom: 2px solid #A19B9E;
310 border-top: 2px solid #A19B9E;
314 background-color: #d1cfd0;
315 border: 2px solid #A19B9E;
319 .example_alt_pagination div.dataTables_info {
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;
332 color: #333 !important;
335 .paging_full_numbers a.paginate_button {
336 background-color: #ddd;
339 .paging_full_numbers a.paginate_button:hover {
340 background-color: #ccc;
341 text-decoration: none !important;
344 .paging_full_numbers a.paginate_active {
345 background-color: #99B3FF;
348 table.display tr.even.row_selected td {
349 background-color: #B0BED9;
352 table.display tr.odd.row_selected td {
353 background-color: #9FAFD1;
358 * Sorting classes for columns
360 /* For the standard odd/even */
361 tr.odd td.sorting_1 {
362 background-color: #D3D6FF;
365 tr.odd td.sorting_2 {
366 background-color: #DADCFF;
369 tr.odd td.sorting_3 {
370 background-color: #E0E2FF;
373 tr.even td.sorting_1 {
374 background-color: #EAEBFF;
377 tr.even td.sorting_2 {
378 background-color: #F2F3FF;
381 tr.even td.sorting_3 {
382 background-color: #F9F9FF;
386 /* For the Conditional-CSS grading rows */
388 Colour calculations (based off the main row colours)
396 tr.odd.gradeA td.sorting_1 {
397 background-color: #c4ffc4;
400 tr.odd.gradeA td.sorting_2 {
401 background-color: #d1ffd1;
404 tr.odd.gradeA td.sorting_3 {
405 background-color: #d1ffd1;
408 tr.even.gradeA td.sorting_1 {
409 background-color: #d5ffd5;
412 tr.even.gradeA td.sorting_2 {
413 background-color: #e2ffe2;
416 tr.even.gradeA td.sorting_3 {
417 background-color: #e2ffe2;
420 tr.odd.gradeC td.sorting_1 {
421 background-color: #c4c4ff;
424 tr.odd.gradeC td.sorting_2 {
425 background-color: #d1d1ff;
428 tr.odd.gradeC td.sorting_3 {
429 background-color: #d1d1ff;
432 tr.even.gradeC td.sorting_1 {
433 background-color: #d5d5ff;
436 tr.even.gradeC td.sorting_2 {
437 background-color: #e2e2ff;
440 tr.even.gradeC td.sorting_3 {
441 background-color: #e2e2ff;
444 tr.odd.gradeX td.sorting_1 {
445 background-color: #ffc4c4;
448 tr.odd.gradeX td.sorting_2 {
449 background-color: #ffd1d1;
452 tr.odd.gradeX td.sorting_3 {
453 background-color: #ffd1d1;
456 tr.even.gradeX td.sorting_1 {
457 background-color: #ffd5d5;
460 tr.even.gradeX td.sorting_2 {
461 background-color: #ffe2e2;
464 tr.even.gradeX td.sorting_3 {
465 background-color: #ffe2e2;
468 tr.odd.gradeU td.sorting_1 {
469 background-color: #c4c4c4;
472 tr.odd.gradeU td.sorting_2 {
473 background-color: #d1d1d1;
476 tr.odd.gradeU td.sorting_3 {
477 background-color: #d1d1d1;
480 tr.even.gradeU td.sorting_1 {
481 background-color: #d5d5d5;
484 tr.even.gradeU td.sorting_2 {
485 background-color: #e2e2e2;
488 tr.even.gradeU td.sorting_3 {
489 background-color: #e2e2e2;
494 * Row highlighting example
496 .ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
497 background-color: #ECFFB3;
500 .ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
501 background-color: #E6FF99;
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; }
522 /*border-bottom: 1px solid #AAA*//*{borderColorHeader}*/
531 border: 1px solid #AAA/*{borderColorContent}*/ !important;