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 281table.display tr.odd { 282 background-color: #E2E4FF; 283} 284 285table.display tr.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} 522