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