/actions/src/main/webapp/styles/demo_table.css

http://alageospatialportal.googlecode.com/ · 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. * DataTables features
  30. */
  31. .dataTables_wrapper {
  32. position: relative;
  33. min-height: 302px;
  34. clear: both;
  35. _height: 302px;
  36. zoom: 1; /* Feeling sorry for IE */
  37. }
  38. .dataTables_processing {
  39. position: absolute;
  40. top: 50%;
  41. left: 50%;
  42. width: 250px;
  43. height: 30px;
  44. margin-left: -125px;
  45. margin-top: -15px;
  46. padding: 14px 0 2px 0;
  47. border: 1px solid #ddd;
  48. text-align: center;
  49. color: #999;
  50. font-size: 14px;
  51. background-color: white;
  52. }
  53. .dataTables_length {
  54. /*width: 40%;*/
  55. float: left;
  56. }
  57. .dataTables_filter {
  58. width: 50%;
  59. float: right;
  60. text-align: right;
  61. }
  62. .dataTables_filter input {
  63. width: 200px;
  64. height: 27px;
  65. outline: none;
  66. font: normal 1.2em/1 Arial, Helvetica, sans-serif;
  67. padding: 0 12px;
  68. margin: 0 12px 6px 0;
  69. border: 1px #a5acb2 solid;
  70. float: left;
  71. float: none;
  72. margin-right: 9px;
  73. }
  74. .dataTables_info {
  75. width: 60%;
  76. float: left;
  77. }
  78. .dataTables_paginate {
  79. width: 44px;
  80. *width: 50px;
  81. float: right;
  82. text-align: right;
  83. }
  84. /* Pagination nested */
  85. .paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next {
  86. height: 19px;
  87. width: 19px;
  88. margin-left: 3px;
  89. float: left;
  90. }
  91. .paginate_disabled_previous {
  92. background-image: url('../images/back_disabled.jpg');
  93. }
  94. .paginate_enabled_previous {
  95. background-image: url('../images/back_enabled.jpg');
  96. }
  97. .paginate_disabled_next {
  98. background-image: url('../images/forward_disabled.jpg');
  99. }
  100. .paginate_enabled_next {
  101. background-image: url('../images/forward_enabled.jpg');
  102. }
  103. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  104. * DataTables display
  105. */
  106. table.display {
  107. margin: 0 auto;
  108. clear: both;
  109. width: 100%;
  110. /* Note Firefox 3.5 and before have a bug with border-collapse
  111. * ( https://bugzilla.mozilla.org/show%5Fbug.cgi?id=155955 )
  112. * border-spacing: 0; is one possible option. Conditional-css.com is
  113. * useful for this kind of thing
  114. *
  115. * Further note IE 6/7 has problems when calculating widths with border width.
  116. * It subtracts one px relative to the other browsers from the first column, and
  117. * adds one to the end...
  118. *
  119. * If you want that effect I'd suggest setting a border-top/left on th/td's and
  120. * then filling in the gaps with other borders.
  121. */
  122. }
  123. table.display thead th {
  124. padding: 3px 18px 3px 10px;
  125. border-bottom: 1px solid black;
  126. font-weight: bold;
  127. cursor: pointer;
  128. *cursor: hand;
  129. }
  130. table.display tfoot th {
  131. padding: 3px 18px 3px 10px;
  132. border-top: 1px solid black;
  133. font-weight: bold;
  134. }
  135. table.display tr.heading2 td {
  136. border-bottom: 1px solid #aaa;
  137. }
  138. table.display td {
  139. padding: 3px 10px;
  140. }
  141. table.display td.center {
  142. text-align: center;
  143. }
  144. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  145. * DataTables sorting
  146. */
  147. .sorting_asc {
  148. background: url('../images/sort_asc.png') no-repeat center right;
  149. }
  150. .sorting_desc {
  151. background: url('../images/sort_desc.png') no-repeat center right;
  152. }
  153. .sorting {
  154. background: url('../images/sort_both.png') no-repeat center right;
  155. }
  156. .sorting_asc_disabled {
  157. background: url('../images/sort_asc_disabled.png') no-repeat center right;
  158. }
  159. .sorting_desc_disabled {
  160. background: url('../images/sort_desc_disabled.png') no-repeat center right;
  161. }
  162. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  163. * DataTables row classes
  164. */
  165. tr.odd {
  166. /*background-color: #E2E4FF;*/
  167. }
  168. tr.even {
  169. /*background-color: white;*/
  170. }
  171. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  172. * Misc
  173. */
  174. .dataTables_scroll {
  175. clear: both;
  176. }
  177. .dataTables_scrollBody {
  178. *margin-top: -1px;
  179. }
  180. .top, .bottom {
  181. padding: 15px;
  182. background-color: #F5F5F5;
  183. border: 1px solid #CCCCCC;
  184. }
  185. .top .dataTables_info {
  186. float: none;
  187. }
  188. .clear {
  189. clear: both;
  190. }
  191. .dataTables_empty {
  192. text-align: center;
  193. }
  194. tfoot input {
  195. margin: 0.5em 0;
  196. width: 100%;
  197. color: #444;
  198. }
  199. tfoot input.search_init {
  200. color: #999;
  201. }
  202. td.group {
  203. background-color: #d1cfd0;
  204. border-bottom: 2px solid #A19B9E;
  205. border-top: 2px solid #A19B9E;
  206. }
  207. td.details {
  208. background-color: #d1cfd0;
  209. border: 2px solid #A19B9E;
  210. }
  211. .example_alt_pagination div.dataTables_info {
  212. width: 40%;
  213. }
  214. .paging_full_numbers {
  215. width: 400px;
  216. height: 22px;
  217. line-height: 22px;
  218. }
  219. .paging_full_numbers span.paginate_button,
  220. .paging_full_numbers span.paginate_active {
  221. border: 1px solid #aaa;
  222. -webkit-border-radius: 5px;
  223. -moz-border-radius: 5px;
  224. padding: 2px 5px;
  225. margin: 0 3px;
  226. cursor: pointer;
  227. *cursor: hand;
  228. }
  229. .paging_full_numbers span.paginate_button {
  230. background-color: #ddd;
  231. }
  232. .paging_full_numbers span.paginate_button:hover {
  233. background-color: #ccc;
  234. }
  235. .paging_full_numbers span.paginate_active {
  236. background-color: #99B3FF;
  237. }
  238. table.display tr.even.row_selected td {
  239. background-color: #B0BED9;
  240. }
  241. table.display tr.odd.row_selected td {
  242. background-color: #9FAFD1;
  243. }
  244. /*
  245. * Sorting classes for columns
  246. */
  247. /* For the standard odd/even */
  248. /*
  249. tr.odd td.sorting_1 {
  250. background-color: #D3D6FF;
  251. }
  252. tr.odd td.sorting_2 {
  253. background-color: #DADCFF;
  254. }
  255. tr.odd td.sorting_3 {
  256. background-color: #E0E2FF;
  257. }
  258. tr.even td.sorting_1 {
  259. background-color: #EAEBFF;
  260. }
  261. tr.even td.sorting_2 {
  262. background-color: #F2F3FF;
  263. }
  264. tr.even td.sorting_3 {
  265. background-color: #F9F9FF;
  266. }
  267. */
  268. /* For the Conditional-CSS grading rows */
  269. /*
  270. Colour calculations (based off the main row colours)
  271. Level 1:
  272. dd > c4
  273. ee > d5
  274. Level 2:
  275. dd > d1
  276. ee > e2
  277. */
  278. tr.odd.gradeA td.sorting_1 {
  279. background-color: #c4ffc4;
  280. }
  281. tr.odd.gradeA td.sorting_2 {
  282. background-color: #d1ffd1;
  283. }
  284. tr.odd.gradeA td.sorting_3 {
  285. background-color: #d1ffd1;
  286. }
  287. tr.even.gradeA td.sorting_1 {
  288. background-color: #d5ffd5;
  289. }
  290. tr.even.gradeA td.sorting_2 {
  291. background-color: #e2ffe2;
  292. }
  293. tr.even.gradeA td.sorting_3 {
  294. background-color: #e2ffe2;
  295. }
  296. tr.odd.gradeC td.sorting_1 {
  297. background-color: #c4c4ff;
  298. }
  299. tr.odd.gradeC td.sorting_2 {
  300. background-color: #d1d1ff;
  301. }
  302. tr.odd.gradeC td.sorting_3 {
  303. background-color: #d1d1ff;
  304. }
  305. tr.even.gradeC td.sorting_1 {
  306. background-color: #d5d5ff;
  307. }
  308. tr.even.gradeC td.sorting_2 {
  309. background-color: #e2e2ff;
  310. }
  311. tr.even.gradeC td.sorting_3 {
  312. background-color: #e2e2ff;
  313. }
  314. tr.odd.gradeX td.sorting_1 {
  315. background-color: #ffc4c4;
  316. }
  317. tr.odd.gradeX td.sorting_2 {
  318. background-color: #ffd1d1;
  319. }
  320. tr.odd.gradeX td.sorting_3 {
  321. background-color: #ffd1d1;
  322. }
  323. tr.even.gradeX td.sorting_1 {
  324. background-color: #ffd5d5;
  325. }
  326. tr.even.gradeX td.sorting_2 {
  327. background-color: #ffe2e2;
  328. }
  329. tr.even.gradeX td.sorting_3 {
  330. background-color: #ffe2e2;
  331. }
  332. tr.odd.gradeU td.sorting_1 {
  333. background-color: #c4c4c4;
  334. }
  335. tr.odd.gradeU td.sorting_2 {
  336. background-color: #d1d1d1;
  337. }
  338. tr.odd.gradeU td.sorting_3 {
  339. background-color: #d1d1d1;
  340. }
  341. tr.even.gradeU td.sorting_1 {
  342. background-color: #d5d5d5;
  343. }
  344. tr.even.gradeU td.sorting_2 {
  345. background-color: #e2e2e2;
  346. }
  347. tr.even.gradeU td.sorting_3 {
  348. background-color: #e2e2e2;
  349. }
  350. /*
  351. * Row highlighting example
  352. */
  353. .ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
  354. background-color: #ECFFB3;
  355. }
  356. .ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
  357. background-color: #E6FF99;
  358. }
  359. .ex_highlight_row #example tr.even:hover {
  360. background-color: #ECFFB3;
  361. }
  362. .ex_highlight_row #example tr.even:hover td.sorting_1 {
  363. background-color: #DDFF75;
  364. }
  365. .ex_highlight_row #example tr.even:hover td.sorting_2 {
  366. background-color: #E7FF9E;
  367. }
  368. .ex_highlight_row #example tr.even:hover td.sorting_3 {
  369. background-color: #E2FF89;
  370. }
  371. .ex_highlight_row #example tr.odd:hover {
  372. background-color: #E6FF99;
  373. }
  374. .ex_highlight_row #example tr.odd:hover td.sorting_1 {
  375. background-color: #D6FF5C;
  376. }
  377. .ex_highlight_row #example tr.odd:hover td.sorting_2 {
  378. background-color: #E0FF84;
  379. }
  380. .ex_highlight_row #example tr.odd:hover td.sorting_3 {
  381. background-color: #DBFF70;
  382. }
  383. /*
  384. * KeyTable
  385. */
  386. table.KeyTable td {
  387. border: 3px solid transparent;
  388. }
  389. table.KeyTable td.focus {
  390. border: 3px solid #3366FF;
  391. }
  392. table.display tr.gradeA {
  393. background-color: #eeffee;
  394. }
  395. table.display tr.gradeC {
  396. background-color: #ddddff;
  397. }
  398. table.display tr.gradeX {
  399. background-color: #ffdddd;
  400. }
  401. table.display tr.gradeU {
  402. background-color: #ddd;
  403. }
  404. div.box {
  405. height: 100px;
  406. padding: 10px;
  407. overflow: auto;
  408. border: 1px solid #8080FF;
  409. background-color: #E5E5FF;
  410. }