/actions/src/main/webapp/styles/demo_table.css

  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_filter input {
 69    width: 200px;
 70    height: 27px;
 71    outline: none;
 72    font: normal 1.2em/1 Arial, Helvetica, sans-serif;
 73    padding: 0 12px;
 74    margin: 0 12px 6px 0;
 75    border: 1px #a5acb2 solid;
 76    float: left;
 77
 78    float: none;
 79    margin-right: 9px;
 80
 81}
 82
 83.dataTables_info {
 84    width: 60%;
 85    float: left;
 86}
 87
 88.dataTables_paginate {
 89    width: 44px;
 90    *width: 50px;
 91    float: right;
 92    text-align: right;
 93}
 94
 95/* Pagination nested */
 96.paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next {
 97    height: 19px;
 98    width: 19px;
 99    margin-left: 3px;
100    float: left;
101}
102
103.paginate_disabled_previous {
104    background-image: url('../images/back_disabled.jpg');
105}
106
107.paginate_enabled_previous {
108    background-image: url('../images/back_enabled.jpg');
109}
110
111.paginate_disabled_next {
112    background-image: url('../images/forward_disabled.jpg');
113}
114
115.paginate_enabled_next {
116    background-image: url('../images/forward_enabled.jpg');
117}
118
119/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
120 * DataTables display
121*/
122table.display {
123    margin: 0 auto;
124    clear: both;
125    width: 100%;
126
127    /* Note Firefox 3.5 and before have a bug with border-collapse
128	 * ( https://bugzilla.mozilla.org/show%5Fbug.cgi?id=155955 ) 
129	 * border-spacing: 0; is one possible option. Conditional-css.com is
130	 * useful for this kind of thing
131	 *
132	 * Further note IE 6/7 has problems when calculating widths with border width.
133	 * It subtracts one px relative to the other browsers from the first column, and
134	 * adds one to the end...
135	 *
136	 * If you want that effect I'd suggest setting a border-top/left on th/td's and 
137	 * then filling in the gaps with other borders.
138	 */
139}
140
141table.display thead th {
142    padding: 3px 18px 3px 10px;
143    border-bottom: 1px solid black;
144    font-weight: bold;
145    cursor: pointer;
146    *cursor: hand;
147}
148
149table.display tfoot th {
150    padding: 3px 18px 3px 10px;
151    border-top: 1px solid black;
152    font-weight: bold;
153}
154
155table.display tr.heading2 td {
156    border-bottom: 1px solid #aaa;
157}
158
159table.display td {
160    padding: 3px 10px;
161}
162
163table.display td.center {
164    text-align: center;
165}
166
167/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
168 * DataTables sorting
169*/
170
171.sorting_asc {
172    background: url('../images/sort_asc.png') no-repeat center right;
173}
174
175.sorting_desc {
176    background: url('../images/sort_desc.png') no-repeat center right;
177}
178
179.sorting {
180    background: url('../images/sort_both.png') no-repeat center right;
181}
182
183.sorting_asc_disabled {
184    background: url('../images/sort_asc_disabled.png') no-repeat center right;
185}
186
187.sorting_desc_disabled {
188    background: url('../images/sort_desc_disabled.png') no-repeat center right;
189}
190
191/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
192 * DataTables row classes
193*/
194
195tr.odd {
196    /*background-color: #E2E4FF;*/
197}
198
199tr.even {
200    /*background-color: white;*/
201}
202
203/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
204 * Misc
205*/
206.dataTables_scroll {
207    clear: both;
208}
209
210.dataTables_scrollBody {
211    *margin-top: -1px;
212}
213
214.top, .bottom {
215    padding: 15px;
216    background-color: #F5F5F5;
217    border: 1px solid #CCCCCC;
218}
219
220.top .dataTables_info {
221    float: none;
222}
223
224.clear {
225    clear: both;
226}
227
228.dataTables_empty {
229    text-align: center;
230}
231
232tfoot input {
233    margin: 0.5em 0;
234    width: 100%;
235    color: #444;
236}
237
238tfoot input.search_init {
239    color: #999;
240}
241
242td.group {
243    background-color: #d1cfd0;
244    border-bottom: 2px solid #A19B9E;
245    border-top: 2px solid #A19B9E;
246}
247
248td.details {
249    background-color: #d1cfd0;
250    border: 2px solid #A19B9E;
251}
252
253.example_alt_pagination div.dataTables_info {
254    width: 40%;
255}
256
257.paging_full_numbers {
258    width: 400px;
259    height: 22px;
260    line-height: 22px;
261}
262
263.paging_full_numbers span.paginate_button,
264.paging_full_numbers span.paginate_active {
265    border: 1px solid #aaa;
266    -webkit-border-radius: 5px;
267    -moz-border-radius: 5px;
268    padding: 2px 5px;
269    margin: 0 3px;
270    cursor: pointer;
271    *cursor: hand;
272}
273
274.paging_full_numbers span.paginate_button {
275    background-color: #ddd;
276}
277
278.paging_full_numbers span.paginate_button:hover {
279    background-color: #ccc;
280}
281
282.paging_full_numbers span.paginate_active {
283    background-color: #99B3FF;
284}
285
286table.display tr.even.row_selected td {
287    background-color: #B0BED9;
288}
289
290table.display tr.odd.row_selected td {
291    background-color: #9FAFD1;
292}
293
294/*
295 * Sorting classes for columns
296*/
297/* For the standard odd/even */
298/*
299tr.odd td.sorting_1 {
300    background-color: #D3D6FF;
301}
302
303tr.odd td.sorting_2 {
304    background-color: #DADCFF;
305}
306
307tr.odd td.sorting_3 {
308    background-color: #E0E2FF;
309}
310
311tr.even td.sorting_1 {
312    background-color: #EAEBFF;
313}
314
315tr.even td.sorting_2 {
316    background-color: #F2F3FF;
317}
318
319tr.even td.sorting_3 {
320    background-color: #F9F9FF;
321}
322*/
323
324/* For the Conditional-CSS grading rows */
325/*
326 	Colour calculations (based off the main row colours)
327  Level 1:
328		dd > c4
329		ee > d5
330	Level 2:
331	  dd > d1
332	  ee > e2
333*/
334tr.odd.gradeA td.sorting_1 {
335    background-color: #c4ffc4;
336}
337
338tr.odd.gradeA td.sorting_2 {
339    background-color: #d1ffd1;
340}
341
342tr.odd.gradeA td.sorting_3 {
343    background-color: #d1ffd1;
344}
345
346tr.even.gradeA td.sorting_1 {
347    background-color: #d5ffd5;
348}
349
350tr.even.gradeA td.sorting_2 {
351    background-color: #e2ffe2;
352}
353
354tr.even.gradeA td.sorting_3 {
355    background-color: #e2ffe2;
356}
357
358tr.odd.gradeC td.sorting_1 {
359    background-color: #c4c4ff;
360}
361
362tr.odd.gradeC td.sorting_2 {
363    background-color: #d1d1ff;
364}
365
366tr.odd.gradeC td.sorting_3 {
367    background-color: #d1d1ff;
368}
369
370tr.even.gradeC td.sorting_1 {
371    background-color: #d5d5ff;
372}
373
374tr.even.gradeC td.sorting_2 {
375    background-color: #e2e2ff;
376}
377
378tr.even.gradeC td.sorting_3 {
379    background-color: #e2e2ff;
380}
381
382tr.odd.gradeX td.sorting_1 {
383    background-color: #ffc4c4;
384}
385
386tr.odd.gradeX td.sorting_2 {
387    background-color: #ffd1d1;
388}
389
390tr.odd.gradeX td.sorting_3 {
391    background-color: #ffd1d1;
392}
393
394tr.even.gradeX td.sorting_1 {
395    background-color: #ffd5d5;
396}
397
398tr.even.gradeX td.sorting_2 {
399    background-color: #ffe2e2;
400}
401
402tr.even.gradeX td.sorting_3 {
403    background-color: #ffe2e2;
404}
405
406tr.odd.gradeU td.sorting_1 {
407    background-color: #c4c4c4;
408}
409
410tr.odd.gradeU td.sorting_2 {
411    background-color: #d1d1d1;
412}
413
414tr.odd.gradeU td.sorting_3 {
415    background-color: #d1d1d1;
416}
417
418tr.even.gradeU td.sorting_1 {
419    background-color: #d5d5d5;
420}
421
422tr.even.gradeU td.sorting_2 {
423    background-color: #e2e2e2;
424}
425
426tr.even.gradeU td.sorting_3 {
427    background-color: #e2e2e2;
428}
429
430/*
431 * Row highlighting example
432*/
433.ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
434    background-color: #ECFFB3;
435}
436
437.ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
438    background-color: #E6FF99;
439}
440
441.ex_highlight_row #example tr.even:hover {
442    background-color: #ECFFB3;
443}
444
445.ex_highlight_row #example tr.even:hover td.sorting_1 {
446    background-color: #DDFF75;
447}
448
449.ex_highlight_row #example tr.even:hover td.sorting_2 {
450    background-color: #E7FF9E;
451}
452
453.ex_highlight_row #example tr.even:hover td.sorting_3 {
454    background-color: #E2FF89;
455}
456
457.ex_highlight_row #example tr.odd:hover {
458    background-color: #E6FF99;
459}
460
461.ex_highlight_row #example tr.odd:hover td.sorting_1 {
462    background-color: #D6FF5C;
463}
464
465.ex_highlight_row #example tr.odd:hover td.sorting_2 {
466    background-color: #E0FF84;
467}
468
469.ex_highlight_row #example tr.odd:hover td.sorting_3 {
470    background-color: #DBFF70;
471}
472
473/*
474 * KeyTable
475*/
476table.KeyTable td {
477    border: 3px solid transparent;
478}
479
480table.KeyTable td.focus {
481    border: 3px solid #3366FF;
482}
483
484table.display tr.gradeA {
485    background-color: #eeffee;
486}
487
488table.display tr.gradeC {
489    background-color: #ddddff;
490}
491
492table.display tr.gradeX {
493    background-color: #ffdddd;
494}
495
496table.display tr.gradeU {
497    background-color: #ddd;
498}
499
500div.box {
501    height: 100px;
502    padding: 10px;
503    overflow: auto;
504    border: 1px solid #8080FF;
505    background-color: #E5E5FF;
506}