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 {
47 .ui-buttonset .ui-button {
48 margin-right: -0.1em !important
;
51 .paging_full_numbers {
52 width: 350px !important
;
59 .dataTables_paginate {
67 table
.display thead th
{
68 padding: 3px 0px 3px 10px;
75 * Sort arrow icon positioning
77 table
.display thead th div
.DataTables_sort_wrapper
{
83 table
.display thead th div
.DataTables_sort_wrapper span
{
93 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
95 * Everything below this line is the same as demo_table.css. This file is
96 * required for 'cleanliness' of the markup
98 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
102 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
103 * DataTables features
106 .dataTables_wrapper {
111 .dataTables_processing {
117 border: 1px solid
#ddd;
140 .dataTables_paginate {
145 /* Pagination nested */
146 .paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next {
153 .paginate_disabled_previous {
154 background-image: url
('../images/back_disabled.jpg');
157 .paginate_enabled_previous {
158 background-image: url
('../images/back_enabled.jpg');
161 .paginate_disabled_next {
162 background-image: url
('../images/forward_disabled.jpg');
165 .paginate_enabled_next {
166 background-image: url
('../images/forward_enabled.jpg');
171 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
178 border-collapse: collapse
;
181 table
.display tfoot th
{
182 padding: 3px 0px 3px 10px;
187 table
.display tr
.heading2 td
{
188 border-bottom: 1px solid
#aaa;
195 table
.display td
.center
{
201 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
214 padding-left:16px !important
;
215 background-repeat : no-repeat
;
221 background-image: url
('../images/sort_asc.png');
222 background-position:-2px 8px;
228 background-image: url
('../images/sort_desc.png');
229 background-position:-2px 0px;
235 background-image: url
('../images/sort_both.png');
236 background-position:-2px 3px;
239 #crm-container a
.sorting
{
240 background-position:-2px -2px;
243 #crm-container a
.sorting_asc
{
244 background-position:-2px 4px;
247 #crm-container a
.sorting_desc
{
248 background-position:-2px -4px;
251 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
252 * DataTables row classes
254 table
.display tr
.odd
.gradeA
{
255 background-color: #ddffdd;
258 table
.display tr
.even
.gradeA
{
259 background-color: #eeffee;
265 table
.display tr
.odd
.gradeA
{
266 background-color: #ddffdd;
269 table
.display tr
.even
.gradeA
{
270 background-color: #eeffee;
273 table
.display tr
.odd
.gradeC
{
274 background-color: #ddddff;
277 table
.display tr
.even
.gradeC
{
278 background-color: #eeeeff;
281 table
.display tr
.odd
.gradeX
{
282 background-color: #ffdddd;
285 table
.display tr
.even
.gradeX
{
286 background-color: #ffeeee;
289 table
.display tr
.odd
.gradeU
{
290 background-color: #ddd;
293 table
.display tr
.even
.gradeU
{
294 background-color: #eee;
299 background-color: #E2E4FF;
303 background-color: white
;
310 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
319 background-color: #F5F5F5;
320 border: 1px solid
#CCCCCC;
323 .top .dataTables_info {
341 tfoot input
.search_init
{
346 background-color: #d1cfd0;
347 border-bottom: 2px solid
#A19B9E;
348 border-top: 2px solid
#A19B9E;
352 background-color: #d1cfd0;
353 border: 2px solid
#A19B9E;
357 .example_alt_pagination div.dataTables_info {
361 .paging_full_numbers span
.paginate_button
,
362 .paging_full_numbers span.paginate_active {
363 border: 1px solid
#aaa;
364 -webkit-border-radius: 5px;
365 -moz-border-radius: 5px;
372 .paging_full_numbers span.paginate_button {
373 background-color: #ddd;
376 .paging_full_numbers span.paginate_button:hover {
377 background-color: #ccc;
380 .paging_full_numbers span.paginate_active {
381 background-color: #99B3FF;
384 table
.display tr
.even
.row_selected td
{
385 background-color: #B0BED9;
388 table
.display tr
.odd
.row_selected td
{
389 background-color: #9FAFD1;
394 * Sorting classes for columns
396 /* For the standard odd/even */
397 tr
.odd td
.sorting_1
{
398 background-color: #D3D6FF;
401 tr
.odd td
.sorting_2
{
402 background-color: #DADCFF;
405 tr
.odd td
.sorting_3
{
406 background-color: #E0E2FF;
409 tr
.even td
.sorting_1
{
410 background-color: #EAEBFF;
413 tr
.even td
.sorting_2
{
414 background-color: #F2F3FF;
417 tr
.even td
.sorting_3
{
418 background-color: #F9F9FF;
422 /* For the Conditional-CSS grading rows */
424 Colour calculations (based off the main row colours)
432 tr
.odd
.gradeA td
.sorting_1
{
433 background-color: #c4ffc4;
436 tr
.odd
.gradeA td
.sorting_2
{
437 background-color: #d1ffd1;
440 tr
.odd
.gradeA td
.sorting_3
{
441 background-color: #d1ffd1;
444 tr
.even
.gradeA td
.sorting_1
{
445 background-color: #d5ffd5;
448 tr
.even
.gradeA td
.sorting_2
{
449 background-color: #e2ffe2;
452 tr
.even
.gradeA td
.sorting_3
{
453 background-color: #e2ffe2;
456 tr
.odd
.gradeC td
.sorting_1
{
457 background-color: #c4c4ff;
460 tr
.odd
.gradeC td
.sorting_2
{
461 background-color: #d1d1ff;
464 tr
.odd
.gradeC td
.sorting_3
{
465 background-color: #d1d1ff;
468 tr
.even
.gradeC td
.sorting_1
{
469 background-color: #d5d5ff;
472 tr
.even
.gradeC td
.sorting_2
{
473 background-color: #e2e2ff;
476 tr
.even
.gradeC td
.sorting_3
{
477 background-color: #e2e2ff;
480 tr
.odd
.gradeX td
.sorting_1
{
481 background-color: #ffc4c4;
484 tr
.odd
.gradeX td
.sorting_2
{
485 background-color: #ffd1d1;
488 tr
.odd
.gradeX td
.sorting_3
{
489 background-color: #ffd1d1;
492 tr
.even
.gradeX td
.sorting_1
{
493 background-color: #ffd5d5;
496 tr
.even
.gradeX td
.sorting_2
{
497 background-color: #ffe2e2;
500 tr
.even
.gradeX td
.sorting_3
{
501 background-color: #ffe2e2;
504 tr
.odd
.gradeU td
.sorting_1
{
505 background-color: #c4c4c4;
508 tr
.odd
.gradeU td
.sorting_2
{
509 background-color: #d1d1d1;
512 tr
.odd
.gradeU td
.sorting_3
{
513 background-color: #d1d1d1;
516 tr
.even
.gradeU td
.sorting_1
{
517 background-color: #d5d5d5;
520 tr
.even
.gradeU td
.sorting_2
{
521 background-color: #e2e2e2;
524 tr
.even
.gradeU td
.sorting_3
{
525 background-color: #e2e2e2;
530 * Row highlighting example
532 .ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
533 background-color: #ECFFB3;
536 .ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
537 background-color: #E6FF99;