PageRenderTime 51ms CodeModel.GetById 22ms RepoModel.GetById 0ms app.codeStats 0ms

/ajax/libs/jquery.tablesorter/2.22.0/css/less/theme.less

https://gitlab.com/Mirros/cdnjs
LESS | 329 lines | 241 code | 38 blank | 50 comment | 0 complexity | 73e914bf005adb8a7f4584146e307412 MD5 | raw file
  1. /* Tablesorter Custom LESS Theme by Rob Garrison
  2. To create your own theme, modify the code below and run it through
  3. a LESS compiler, like this one: http://leafo.net/lessphp/editor.html
  4. or download less.js from http://lesscss.org/
  5. Test out these custom less files live
  6. Basic Theme : http://codepen.io/Mottie/pen/eqBbn
  7. Bootstrap : http://codepen.io/Mottie/pen/Ltzpi
  8. Metro Style : http://codepen.io/Mottie/pen/gCslk
  9. */
  10. /*** theme ***/
  11. @theme : tablesorter-custom;
  12. /*** fonts ***/
  13. @tableHeaderFont : 11px 'trebuchet ms', verdana, arial;
  14. @tableBodyFont : 11px 'trebuchet ms', verdana, arial;
  15. /*** color definitions ***/
  16. /* for best results, only change the hue (120),
  17. leave the saturation (60%) and luminosity (75%) alone
  18. pick the color from here: http://hslpicker.com/#99E699 */
  19. @headerBackground : hsl(120, 60%, 75%);
  20. @borderAndBackground : #cdcdcd;
  21. @overallBorder : @borderAndBackground 1px solid;
  22. @headerTextColor : #000;
  23. @bodyBackground : #fff;
  24. @bodyTextColor : #000;
  25. @headerAsc : darken(spin(@headerBackground, 5), 10%); /* darken(@headerBackground, 10%); */
  26. @headerDesc : lighten(spin(@headerBackground, -5), 10%); /* desaturate(@headerAsc, 5%); */
  27. @captionBackground : #fff; /* it might be best to match the document body background color here */
  28. @errorBackground : #e6bf99; /* ajax error message (added to thead) */
  29. @filterCellBackground : #eee;
  30. @filterElementTextColor: #333;
  31. @filterElementBkgd : #fff;
  32. @filterElementBorder : 1px solid #bbb;
  33. @filterTransitionTime : 0.1s;
  34. @filterRowHiddenHeight : 4px; /* becomes height using padding (so it's divided by 2) */
  35. @overallPadding : 4px;
  36. /* 20px should be slightly wider than the icon width to avoid overlap */
  37. @headerPadding : 4px 20px 4px 4px;
  38. /* url(icons/loading.gif); */
  39. @processingIcon : url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=');
  40. /* zebra striping */
  41. .allRows {
  42. background-color: @bodyBackground;
  43. color: @bodyTextColor;
  44. }
  45. .evenRows {
  46. background-color: lighten(@headerBackground, 40%);
  47. color: @bodyTextColor;
  48. }
  49. .oddRows {
  50. background-color: lighten(@headerBackground, 20%);
  51. }
  52. /* hovered rows */
  53. .oddHovered {
  54. background-color: desaturate(@headerBackground, 60%);
  55. color: @bodyTextColor;
  56. }
  57. .evenHovered {
  58. background-color: lighten( desaturate(@headerBackground, 60%), 10% );
  59. color: @bodyTextColor;
  60. }
  61. /* Columns widget */
  62. @primaryOdd : spin(@headerBackground, 10); /* saturate( darken( desaturate(@headerBackground, 10%), 10% ), 30%); */
  63. @primaryEven : lighten( @primaryOdd, 10% );
  64. @secondaryOdd : @primaryEven;
  65. @secondaryEven : lighten( @primaryEven, 5% );
  66. @tertiaryOdd : @secondaryEven;
  67. @tertiaryEven : lighten( @secondaryEven, 5% );
  68. /* Filter widget transition */
  69. .filterWidgetTransition {
  70. -webkit-transition: line-height @filterTransitionTime ease;
  71. -moz-transition: line-height @filterTransitionTime ease;
  72. -o-transition: line-height @filterTransitionTime ease;
  73. transition: line-height @filterTransitionTime ease;
  74. }
  75. /*** Arrows ***/
  76. @arrowPosition : right 5px center;
  77. /* black */
  78. @unsortedBlack : url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
  79. @sortAscBlack : url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
  80. @sortDescBlack : url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
  81. /* white */
  82. @unsortedWhite : url(data:image/gif;base64,R0lGODlhFQAJAIAAAP///////yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
  83. @sortAscWhite : url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
  84. @sortDescWhite : url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
  85. /* automatically choose the correct arrow/text color */
  86. .headerText (@a) when (lightness(@a) >= 50%) {
  87. color: @headerTextColor;
  88. }
  89. .headerText (@a) when (lightness(@a) < 50%) {
  90. color: lighten(@headerTextColor, 90%);
  91. }
  92. .unsorted (@a) when (lightness(@a) >= 50%) {
  93. background-image: @unsortedBlack;
  94. }
  95. .unsorted (@a) when (lightness(@a) < 50%) {
  96. background-image: @unsortedWhite;
  97. }
  98. .sortAsc (@a) when (lightness(@a) >= 50%) {
  99. background-image: @sortAscBlack;
  100. }
  101. .sortAsc (@a) when (lightness(@a) < 50%) {
  102. background-image: @sortAscWhite;
  103. }
  104. .sortDesc (@a) when (lightness(@a) >= 50%) {
  105. background-image: @sortDescBlack;
  106. }
  107. .sortDesc (@a) when (lightness(@a) < 50%) {
  108. background-image: @sortDescWhite;
  109. }
  110. /* variable theme name - requires less.js 1.3+;
  111. or just replace (!".@{theme}") with the contents of @theme
  112. */
  113. .@{theme} {
  114. font: @tableBodyFont;
  115. background-color: @borderAndBackground;
  116. margin: 10px 0 15px;
  117. width: 100%;
  118. text-align: left;
  119. border-spacing: 0;
  120. border: @overallBorder;
  121. border-width: 1px 0 0 1px;
  122. th, td {
  123. border: @overallBorder;
  124. border-width: 0 1px 1px 0;
  125. }
  126. /* style th's outside of the thead */
  127. th, thead td {
  128. font: @tableHeaderFont;
  129. font-weight: bold;
  130. background-color: @headerBackground;
  131. .headerText(@headerBackground);
  132. border-collapse: collapse;
  133. padding: @overallPadding;
  134. }
  135. tbody td, tfoot th, tfoot td {
  136. padding: @overallPadding;
  137. vertical-align: top;
  138. }
  139. /* style header */
  140. .tablesorter-header {
  141. .unsorted(@headerBackground);
  142. background-repeat: no-repeat;
  143. background-position: @arrowPosition;
  144. padding: @headerPadding;
  145. cursor: pointer;
  146. }
  147. .tablesorter-header.sorter-false {
  148. background-image: none;
  149. cursor: default;
  150. padding: @overallPadding;
  151. }
  152. .tablesorter-headerAsc {
  153. background-color: @headerAsc;
  154. .sortAsc(@headerBackground);
  155. }
  156. .tablesorter-headerDesc {
  157. background-color: @headerDesc;
  158. .sortDesc(@headerBackground);
  159. }
  160. /* tfoot */
  161. tfoot .tablesorter-headerAsc,
  162. tfoot .tablesorter-headerDesc {
  163. /* remove sort arrows from footer */
  164. background-image: none;
  165. }
  166. /* optional disabled input styling */
  167. .disabled {
  168. opacity: 0.5;
  169. filter: alpha(opacity=50);
  170. cursor: not-allowed;
  171. }
  172. /* body */
  173. tbody {
  174. td {
  175. .allRows;
  176. padding: @overallPadding;
  177. vertical-align: top;
  178. }
  179. /* Zebra Widget - row alternating colors */
  180. tr.odd > td {
  181. .oddRows;
  182. }
  183. tr.even > td {
  184. .evenRows;
  185. }
  186. }
  187. /* hovered row colors
  188. you'll need to add additional lines for
  189. rows with more than 2 child rows
  190. */
  191. tbody > tr.hover td,
  192. tbody > tr:hover td,
  193. tbody > tr:hover + tr.tablesorter-childRow > td,
  194. tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
  195. tbody > tr.even.hover > td,
  196. tbody > tr.even:hover > td,
  197. tbody > tr.even:hover + tr.tablesorter-childRow > td,
  198. tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
  199. .evenHovered;
  200. }
  201. tbody > tr.odd.hover > td,
  202. tbody > tr.odd:hover > td,
  203. tbody > tr.odd:hover + tr.tablesorter-childRow > td,
  204. tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
  205. .oddHovered;
  206. }
  207. /* table processing indicator - indeterminate spinner */
  208. .tablesorter-processing {
  209. background-image: @processingIcon;
  210. background-position: center center;
  211. background-repeat: no-repeat;
  212. }
  213. /* Column Widget - column sort colors */
  214. tr.odd td.primary {
  215. background-color: @primaryOdd;
  216. }
  217. td.primary, tr.even td.primary {
  218. background-color: @primaryEven;
  219. }
  220. tr.odd td.secondary {
  221. background-color: @secondaryOdd;
  222. }
  223. td.secondary, tr.even td.secondary {
  224. background-color: @secondaryEven;
  225. }
  226. tr.odd td.tertiary {
  227. background-color: @tertiaryOdd;
  228. }
  229. td.tertiary, tr.even td.tertiary {
  230. background-color: @tertiaryEven;
  231. }
  232. /* caption (non-theme matching) */
  233. caption {
  234. background-color: @captionBackground ;
  235. }
  236. /* filter widget */
  237. .tablesorter-filter-row input,
  238. .tablesorter-filter-row select {
  239. width: 98%;
  240. height: auto;
  241. margin: 0;
  242. padding: @overallPadding;
  243. color: @filterElementTextColor;
  244. background-color: @filterElementBkgd;
  245. border: @filterElementBorder;
  246. -webkit-box-sizing: border-box;
  247. -moz-box-sizing: border-box;
  248. box-sizing: border-box;
  249. .filterWidgetTransition;
  250. }
  251. .tablesorter-filter-row {
  252. background-color: @filterCellBackground;
  253. }
  254. .tablesorter-filter-row td {
  255. text-align: center;
  256. background-color: @filterCellBackground;
  257. line-height: normal;
  258. text-align: center; /* center the input */
  259. .filterWidgetTransition;
  260. }
  261. /* hidden filter row */
  262. .tablesorter-filter-row.hideme td {
  263. padding: @filterRowHiddenHeight / 2;
  264. margin: 0;
  265. line-height: 0;
  266. cursor: pointer;
  267. }
  268. .tablesorter-filter-row.hideme * {
  269. height: 1px;
  270. min-height: 0;
  271. border: 0;
  272. padding: 0;
  273. margin: 0;
  274. /* don't use visibility: hidden because it disables tabbing */
  275. opacity: 0;
  276. filter: alpha(opacity=0);
  277. }
  278. /* rows hidden by filtering (needed for child rows) */
  279. .filtered {
  280. display: none;
  281. }
  282. /* ajax error row */
  283. .tablesorter-errorRow td {
  284. text-align: center;
  285. cursor: pointer;
  286. background-color: @errorBackground;
  287. }
  288. }