source: main/trunk/model-sites-dev/cambridge-museum/collect/waikato-independent/pre-import/EditableDatabaseTable/WebContent/media/dataTables/demo_table_jui.css@ 34493

Last change on this file since 34493 was 34493, checked in by davidb, 4 years ago

Base project for providing jquery/jquery-ui controlled interface to editing a database table

File size: 8.7 KB
Line 
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: #E2E4FF;
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: #D3D6FF;
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: #EAEBFF;
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.