Mercurial > repos > saskia-hiltemann > ireport

comparison DataTables-1.9.4/media/css/demo_table_jui.css @ 0:ac5f9272033b draft

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