dataTables.tableTools.css 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337
  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,
  85. div.DTTT_button:hover,
  86. a.DTTT_button:hover {
  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_disabled,
  103. div.DTTT_disabled,
  104. a.DTTT_disabled {
  105. color: #999;
  106. border: 1px solid #d0d0d0;
  107. background: #ffffff; /* Old browsers */
  108. background: -webkit-linear-gradient(top, #ffffff 0%,#f9f9f9 89%,#fafafa 100%); /* Chrome10+,Safari5.1+ */
  109. background: -moz-linear-gradient(top, #ffffff 0%,#f9f9f9 89%,#fafafa 100%); /* FF3.6+ */
  110. background: -ms-linear-gradient(top, #ffffff 0%,#f9f9f9 89%,#fafafa 100%); /* IE10+ */
  111. background: -o-linear-gradient(top, #ffffff 0%,#f9f9f9 89%,#fafafa 100%); /* Opera 11.10+ */
  112. background: linear-gradient(top, #ffffff 0%,#f9f9f9 89%,#fafafa 100%); /* W3C */
  113. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fafafa',GradientType=0 ); /* IE6-9 */
  114. }
  115. /*
  116. * BUTTON_STYLES
  117. * Action specific button styles
  118. * If you want images - comment this back in
  119. a.DTTT_button_csv,
  120. a.DTTT_button_xls,
  121. a.DTTT_button_copy,
  122. a.DTTT_button_pdf,
  123. a.DTTT_button_print {
  124. padding-right: 0px;
  125. }
  126. a.DTTT_button_csv span,
  127. a.DTTT_button_xls span,
  128. a.DTTT_button_copy span,
  129. a.DTTT_button_pdf span,
  130. a.DTTT_button_print span {
  131. display: inline-block;
  132. height: 24px;
  133. line-height: 24px;
  134. padding-right: 30px;
  135. }
  136. a.DTTT_button_csv span { background: url(../images/csv.png) no-repeat bottom right; }
  137. a.DTTT_button_csv:hover span { background: url(../images/csv_hover.png) no-repeat center right; }
  138. a.DTTT_button_xls span { background: url(../images/xls.png) no-repeat center right; }
  139. a.DTTT_button_xls:hover span { background: #f0f0f0 url(../images/xls_hover.png) no-repeat center right; }
  140. a.DTTT_button_copy span { background: url(../images/copy.png) no-repeat center right; }
  141. a.DTTT_button_copy:hover span { background: #f0f0f0 url(../images/copy_hover.png) no-repeat center right; }
  142. a.DTTT_button_pdf span { background: url(../images/pdf.png) no-repeat center right; }
  143. a.DTTT_button_pdf:hover span { background: #f0f0f0 url(../images/pdf_hover.png) no-repeat center right; }
  144. a.DTTT_button_print span { background: url(../images/print.png) no-repeat center right; }
  145. a.DTTT_button_print:hover span { background: #f0f0f0 url(../images/print_hover.png) no-repeat center right; }
  146. */
  147. button.DTTT_button_collection span {
  148. padding-right: 17px;
  149. background: url(../images/collection.png) no-repeat center right;
  150. }
  151. button.DTTT_button_collection:hover span {
  152. padding-right: 17px;
  153. background: #f0f0f0 url(../images/collection_hover.png) no-repeat center right;
  154. }
  155. /*
  156. * SELECTING
  157. * Row selection styles
  158. */
  159. table.DTTT_selectable tbody tr {
  160. cursor: pointer;
  161. *cursor: hand;
  162. }
  163. table.dataTable tr.DTTT_selected.odd {
  164. background-color: #9FAFD1;
  165. }
  166. table.dataTable tr.DTTT_selected.odd td.sorting_1 {
  167. background-color: #9FAFD1;
  168. }
  169. table.dataTable tr.DTTT_selected.odd td.sorting_2 {
  170. background-color: #9FAFD1;
  171. }
  172. table.dataTable tr.DTTT_selected.odd td.sorting_3 {
  173. background-color: #9FAFD1;
  174. }
  175. table.dataTable tr.DTTT_selected.even {
  176. background-color: #B0BED9;
  177. }
  178. table.dataTable tr.DTTT_selected.even td.sorting_1 {
  179. background-color: #B0BED9;
  180. }
  181. table.dataTable tr.DTTT_selected.even td.sorting_2 {
  182. background-color: #B0BED9;
  183. }
  184. table.dataTable tr.DTTT_selected.even td.sorting_3 {
  185. background-color: #B0BED9;
  186. }
  187. /*
  188. * COLLECTIONS
  189. * Drop down list (collection) styles
  190. */
  191. div.DTTT_collection {
  192. width: 150px;
  193. padding: 8px 8px 4px 8px;
  194. border: 1px solid #ccc;
  195. border: 1px solid rgba( 0, 0, 0, 0.4 );
  196. background-color: #f3f3f3;
  197. background-color: rgba( 255, 255, 255, 0.3 );
  198. overflow: hidden;
  199. z-index: 2002;
  200. -webkit-border-radius: 5px;
  201. -moz-border-radius: 5px;
  202. -ms-border-radius: 5px;
  203. -o-border-radius: 5px;
  204. border-radius: 5px;
  205. -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  206. -moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  207. -ms-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  208. -o-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  209. box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  210. }
  211. div.DTTT_collection_background {
  212. background: transparent url(../images/background.png) repeat top left;
  213. z-index: 2001;
  214. }
  215. div.DTTT_collection button.DTTT_button,
  216. div.DTTT_collection div.DTTT_button,
  217. div.DTTT_collection a.DTTT_button {
  218. position: relative;
  219. left: 0;
  220. right: 0;
  221. display: block;
  222. float: none;
  223. margin-bottom: 4px;
  224. -webkit-box-shadow: 1px 1px 3px #999;
  225. -moz-box-shadow: 1px 1px 3px #999;
  226. -ms-box-shadow: 1px 1px 3px #999;
  227. -o-box-shadow: 1px 1px 3px #999;
  228. box-shadow: 1px 1px 3px #999;
  229. }
  230. /*
  231. * PRINTING
  232. * Print display styles
  233. */
  234. .DTTT_print_info {
  235. position: fixed;
  236. top: 50%;
  237. left: 50%;
  238. width: 400px;
  239. height: 150px;
  240. margin-left: -200px;
  241. margin-top: -75px;
  242. text-align: center;
  243. color: #333;
  244. padding: 10px 30px;
  245. background: #ffffff; /* Old browsers */
  246. background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* Chrome10+,Safari5.1+ */
  247. background: -moz-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* FF3.6+ */
  248. background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* IE10+ */
  249. background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* Opera 11.10+ */
  250. background: linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* W3C */
  251. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f9f9f9',GradientType=0 ); /* IE6-9 */
  252. opacity: 0.95;
  253. border: 1px solid black;
  254. border: 1px solid rgba(0, 0, 0, 0.5);
  255. -webkit-border-radius: 6px;
  256. -moz-border-radius: 6px;
  257. -ms-border-radius: 6px;
  258. -o-border-radius: 6px;
  259. border-radius: 6px;
  260. -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
  261. -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
  262. -ms-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
  263. -o-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
  264. box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
  265. }
  266. .DTTT_print_info h6 {
  267. font-weight: normal;
  268. font-size: 28px;
  269. line-height: 28px;
  270. margin: 1em;
  271. }
  272. .DTTT_print_info p {
  273. font-size: 14px;
  274. line-height: 20px;
  275. }