/actions/src/main/webapp/styles/demo_table.css
CSS | 506 lines | 312 code | 91 blank | 103 comment | 0 complexity | 3146692bd0cb8e45a322a6ab0f2891c5 MD5 | raw file
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}