Free cookie consent management tool by TermsFeed Policy Generator

source: branches/WebApplication/MVC2/HeuristicLabWeb.PluginHost/HLWebPluginHost/Content/jQuery/css/datatable_jui.css @ 6286

Last change on this file since 6286 was 6286, checked in by dkahn, 13 years ago

#1198 Added jQuery plus plugins

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