dataTables.tableTools.css 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361
  1. /*
  2. * File: TableTools.css
  3. * Description: Styles for TableTools 2
  4. * Author: Allan Jardine (www.sprymedia.co.uk)
  5. * Language: Javascript
  6. * License: GPL v2 / 3 point BSD
  7. * Project: DataTables
  8. *
  9. * Copyright 2009-2012 Allan Jardine, all rights reserved.
  10. *
  11. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  12. *
  13. * CSS name space:
  14. * DTTT DataTables TableTools
  15. *
  16. * Style sheet provides:
  17. * CONTAINER TableTools container element and styles applying to all components
  18. * BUTTON_STYLES Action specific button styles
  19. * SELECTING Row selection styles
  20. * COLLECTIONS Drop down list (collection) styles
  21. * PRINTING Print display styles
  22. */
  23. /*
  24. * CONTAINER
  25. * TableTools container element and styles applying to all components
  26. */
  27. div.DTTT_container {
  28. position: relative;
  29. float: right;
  30. margin-bottom: 1em;
  31. }
  32. @media screen and (max-width: 640px) {
  33. div.DTTT_container {
  34. float: none !important;
  35. text-align: center;
  36. }
  37. div.DTTT_container:after {
  38. visibility: hidden;
  39. display: block;
  40. content: "";
  41. clear: both;
  42. height: 0;
  43. }
  44. }
  45. button.DTTT_button,
  46. div.DTTT_button,
  47. a.DTTT_button {
  48. position: relative;
  49. display: inline-block;
  50. margin-right: 3px;
  51. padding: 5px 8px;
  52. border: 1px solid #999;
  53. cursor: pointer;
  54. *cursor: hand;
  55. font-size: 0.88em;
  56. color: black !important;
  57. -webkit-border-radius: 2px;
  58. -moz-border-radius: 2px;
  59. -ms-border-radius: 2px;
  60. -o-border-radius: 2px;
  61. border-radius: 2px;
  62. -webkit-box-shadow: 1px 1px 3px #ccc;
  63. -moz-box-shadow: 1px 1px 3px #ccc;
  64. -ms-box-shadow: 1px 1px 3px #ccc;
  65. -o-box-shadow: 1px 1px 3px #ccc;
  66. box-shadow: 1px 1px 3px #ccc;
  67. /* Generated by http://www.colorzilla.com/gradient-editor/ */
  68. background: #ffffff; /* Old browsers */
  69. background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* Chrome10+,Safari5.1+ */
  70. background: -moz-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* FF3.6+ */
  71. background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* IE10+ */
  72. background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* Opera 11.10+ */
  73. background: linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* W3C */
  74. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f9f9f9',GradientType=0 ); /* IE6-9 */
  75. }
  76. /* Buttons are cunning border-box sizing - we can't just use that for A and DIV due to IE6/7 */
  77. button.DTTT_button {
  78. height: 30px;
  79. padding: 3px 8px;
  80. }
  81. .DTTT_button embed {
  82. outline: none;
  83. }
  84. button.DTTT_button:hover:not(.DTTT_disabled),
  85. div.DTTT_button:hover:not(.DTTT_disabled),
  86. a.DTTT_button:hover:not(.DTTT_disabled) {
  87. border: 1px solid #666;
  88. text-decoration: none !important;
  89. -webkit-box-shadow: 1px 1px 3px #999;
  90. -moz-box-shadow: 1px 1px 3px #999;
  91. -ms-box-shadow: 1px 1px 3px #999;
  92. -o-box-shadow: 1px 1px 3px #999;
  93. box-shadow: 1px 1px 3px #999;
  94. background: #f3f3f3; /* Old browsers */
  95. background: -webkit-linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* Chrome10+,Safari5.1+ */
  96. background: -moz-linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* FF3.6+ */
  97. background: -ms-linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* IE10+ */
  98. background: -o-linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* Opera 11.10+ */
  99. background: linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* W3C */
  100. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-9 */
  101. }
  102. button.DTTT_button:focus,
  103. div.DTTT_button:focus,
  104. a.DTTT_button:focus {
  105. border: 1px solid #426c9e;
  106. text-shadow: 0 1px 0 #c4def1;
  107. outline: none;
  108. background-color: #a3d0ef 100%;
  109. background-image: -webkit-linear-gradient(top, #a3d0ef 0%, #79ace9 65%, #a3d0ef 100%);
  110. background-image: -moz-linear-gradient(top, #a3d0ef 0%, #79ace9 65%, #a3d0ef 100%);
  111. background-image: -ms-linear-gradient(top, #a3d0ef 0%, #79ace9 65%, #a3d0ef 100%);
  112. background-image: -o-linear-gradient(top, #a3d0ef 0%, #79ace9 65%, #a3d0ef 100%);
  113. background-image: linear-gradient(top, #a3d0ef 0%, #79ace9 65%, #a3d0ef 100%);
  114. filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#a3d0ef', EndColorStr='#a3d0ef');
  115. }
  116. button.DTTT_button:active:not(.DTTT_disabled),
  117. div.DTTT_button:active:not(.DTTT_disabled),
  118. a.DTTT_button:active:not(.DTTT_disabled) {
  119. -webkit-box-shadow: inset 1px 1px 3px #999999;
  120. -moz-box-shadow: inset 1px 1px 3px #999999;
  121. box-shadow: inset 1px 1px 3px #999999;
  122. }
  123. button.DTTT_disabled,
  124. div.DTTT_disabled,
  125. a.DTTT_disabled {
  126. color: #999 !important;
  127. border: 1px solid #d0d0d0;
  128. cursor: default;
  129. background: #ffffff; /* Old browsers */
  130. background: -webkit-linear-gradient(top, #ffffff 0%,#f9f9f9 89%,#fafafa 100%); /* Chrome10+,Safari5.1+ */
  131. background: -moz-linear-gradient(top, #ffffff 0%,#f9f9f9 89%,#fafafa 100%); /* FF3.6+ */
  132. background: -ms-linear-gradient(top, #ffffff 0%,#f9f9f9 89%,#fafafa 100%); /* IE10+ */
  133. background: -o-linear-gradient(top, #ffffff 0%,#f9f9f9 89%,#fafafa 100%); /* Opera 11.10+ */
  134. background: linear-gradient(top, #ffffff 0%,#f9f9f9 89%,#fafafa 100%); /* W3C */
  135. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fafafa',GradientType=0 ); /* IE6-9 */
  136. }
  137. /*
  138. * BUTTON_STYLES
  139. * Action specific button styles
  140. * If you want images - comment this back in
  141. a.DTTT_button_csv,
  142. a.DTTT_button_xls,
  143. a.DTTT_button_copy,
  144. a.DTTT_button_pdf,
  145. a.DTTT_button_print {
  146. padding-right: 0px;
  147. }
  148. a.DTTT_button_csv span,
  149. a.DTTT_button_xls span,
  150. a.DTTT_button_copy span,
  151. a.DTTT_button_pdf span,
  152. a.DTTT_button_print span {
  153. display: inline-block;
  154. height: 24px;
  155. line-height: 24px;
  156. padding-right: 30px;
  157. }
  158. a.DTTT_button_csv span { background: url(../images/csv.png) no-repeat bottom right; }
  159. a.DTTT_button_csv:hover span { background: url(../images/csv_hover.png) no-repeat center right; }
  160. a.DTTT_button_xls span { background: url(../images/xls.png) no-repeat center right; }
  161. a.DTTT_button_xls:hover span { background: #f0f0f0 url(../images/xls_hover.png) no-repeat center right; }
  162. a.DTTT_button_copy span { background: url(../images/copy.png) no-repeat center right; }
  163. a.DTTT_button_copy:hover span { background: #f0f0f0 url(../images/copy_hover.png) no-repeat center right; }
  164. a.DTTT_button_pdf span { background: url(../images/pdf.png) no-repeat center right; }
  165. a.DTTT_button_pdf:hover span { background: #f0f0f0 url(../images/pdf_hover.png) no-repeat center right; }
  166. a.DTTT_button_print span { background: url(../images/print.png) no-repeat center right; }
  167. a.DTTT_button_print:hover span { background: #f0f0f0 url(../images/print_hover.png) no-repeat center right; }
  168. */
  169. button.DTTT_button_collection span {
  170. padding-right: 17px;
  171. background: url(../images/collection.png) no-repeat center right;
  172. }
  173. button.DTTT_button_collection:hover span {
  174. padding-right: 17px;
  175. background: #f0f0f0 url(../images/collection_hover.png) no-repeat center right;
  176. }
  177. /*
  178. * SELECTING
  179. * Row selection styles
  180. */
  181. table.DTTT_selectable tbody tr {
  182. cursor: pointer;
  183. *cursor: hand;
  184. }
  185. table.dataTable tr.DTTT_selected.odd {
  186. background-color: #9FAFD1;
  187. }
  188. table.dataTable tr.DTTT_selected.odd td.sorting_1 {
  189. background-color: #9FAFD1;
  190. }
  191. table.dataTable tr.DTTT_selected.odd td.sorting_2 {
  192. background-color: #9FAFD1;
  193. }
  194. table.dataTable tr.DTTT_selected.odd td.sorting_3 {
  195. background-color: #9FAFD1;
  196. }
  197. table.dataTable tr.DTTT_selected.even {
  198. background-color: #B0BED9;
  199. }
  200. table.dataTable tr.DTTT_selected.even td.sorting_1 {
  201. background-color: #B0BED9;
  202. }
  203. table.dataTable tr.DTTT_selected.even td.sorting_2 {
  204. background-color: #B0BED9;
  205. }
  206. table.dataTable tr.DTTT_selected.even td.sorting_3 {
  207. background-color: #B0BED9;
  208. }
  209. /*
  210. * COLLECTIONS
  211. * Drop down list (collection) styles
  212. */
  213. div.DTTT_collection {
  214. width: 150px;
  215. padding: 8px 8px 4px 8px;
  216. border: 1px solid #ccc;
  217. border: 1px solid rgba( 0, 0, 0, 0.4 );
  218. background-color: #f3f3f3;
  219. background-color: rgba( 255, 255, 255, 0.3 );
  220. overflow: hidden;
  221. z-index: 2002;
  222. -webkit-border-radius: 5px;
  223. -moz-border-radius: 5px;
  224. -ms-border-radius: 5px;
  225. -o-border-radius: 5px;
  226. border-radius: 5px;
  227. -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  228. -moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  229. -ms-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  230. -o-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  231. box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  232. }
  233. div.DTTT_collection_background {
  234. background: black;
  235. z-index: 2001;
  236. }
  237. div.DTTT_collection button.DTTT_button,
  238. div.DTTT_collection div.DTTT_button,
  239. div.DTTT_collection a.DTTT_button {
  240. position: relative;
  241. left: 0;
  242. right: 0;
  243. display: block;
  244. float: none;
  245. margin-bottom: 4px;
  246. -webkit-box-shadow: 1px 1px 3px #999;
  247. -moz-box-shadow: 1px 1px 3px #999;
  248. -ms-box-shadow: 1px 1px 3px #999;
  249. -o-box-shadow: 1px 1px 3px #999;
  250. box-shadow: 1px 1px 3px #999;
  251. }
  252. /*
  253. * PRINTING
  254. * Print display styles
  255. */
  256. .DTTT_print_info {
  257. position: fixed;
  258. top: 50%;
  259. left: 50%;
  260. width: 400px;
  261. height: 150px;
  262. margin-left: -200px;
  263. margin-top: -75px;
  264. text-align: center;
  265. color: #333;
  266. padding: 10px 30px;
  267. background: #ffffff; /* Old browsers */
  268. background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* Chrome10+,Safari5.1+ */
  269. background: -moz-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* FF3.6+ */
  270. background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* IE10+ */
  271. background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* Opera 11.10+ */
  272. background: linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* W3C */
  273. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f9f9f9',GradientType=0 ); /* IE6-9 */
  274. opacity: 0.95;
  275. border: 1px solid black;
  276. border: 1px solid rgba(0, 0, 0, 0.5);
  277. -webkit-border-radius: 6px;
  278. -moz-border-radius: 6px;
  279. -ms-border-radius: 6px;
  280. -o-border-radius: 6px;
  281. border-radius: 6px;
  282. -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
  283. -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
  284. -ms-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
  285. -o-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
  286. box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
  287. }
  288. .DTTT_print_info h6 {
  289. font-weight: normal;
  290. font-size: 28px;
  291. line-height: 28px;
  292. margin: 1em;
  293. }
  294. .DTTT_print_info p {
  295. font-size: 14px;
  296. line-height: 20px;
  297. }