source: binary-improvements/webserver/js/tablesorter/css/less/metro.less@ 405

Last change on this file since 405 was 279, checked in by alloc, 8 years ago

Mod stuff
File size: 11.4 KB
Line 
1/* Tablesorter Custom Metro LESS Theme by Rob Garrison
2
3To create your own theme, modify the code below and run it through
4a LESS compiler, like this one: http://leafo.net/lessphp/editor.html
5or download less.js from http://lesscss.org/
6
7Test out these custom less files live
8 Basic Theme : http://codepen.io/Mottie/pen/eqBbn
9 Bootstrap : http://codepen.io/Mottie/pen/Ltzpi
10 Metro Style : http://codepen.io/Mottie/pen/gCslk
11
12*/
13
14/*** theme ***/
15@theme : tablesorter-metro;
16
17/*** fonts ***/
18@tableHeaderFont : 14px 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
19@tableBodyFont : 14px 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
20
21/*** color definitions ***/
22/* for best results, only change the hue (120),
23 leave the saturation (60%) and luminosity (75%) alone
24 pick the color from here: http://hslpicker.com/#825a2b
25
26 Inspired by http://www.jtable.org/ metro themes:
27 Blue: hsl(212, 86%, 35%)
28 Brown hsl(32, 50%, 30%)
29 Crimson hsl(0, 100%, 38%)
30 Dark Grey hsl(0, 0%, 27%)
31 Dark Orange hsl(13, 70%, 51%)
32 Green hsl(120, 100%, 32%)
33 Light Gray hsl(0, 0%, 44%)
34 Pink hsl(297, 100%, 33%)
35 Purple hsl(257, 51%, 48%)
36 Red hsl(5, 100%, 40%)
37
38 */
39@headerBackground : hsl(32, 50%, 30%);
40@borderAndBackground : #cdcdcd;
41@headerTextColor : #eee;
42
43@bodyBackground : #fff;
44@bodyTextColor : #000;
45
46@captionBackground : #fff; /* it might be best to match the document body background color here */
47@errorBackground : #e6bf99; /* ajax error message (added to thead) */
48
49@filterCellBackground : #eee;
50@filterElementTextColor: #333;
51@filterElementBkgd : #fff;
52@filterElementBorder : 1px solid #bbb;
53@filterTransitionTime : 0.1s;
54@filterRowHiddenHeight : 4px; /* becomes height using padding (so it's divided by 2) */
55
56@overallPadding : 4px;
57/* 20px should be slightly wider than the icon width to avoid overlap */
58@headerPadding : 4px 20px 4px 4px;
59
60/* url(icons/loading.gif); */
61@processingIcon : url('data:image/gif;base64,R0lGODlhEAAQAPIAAP///1VVVdbW1oCAgFVVVZaWlqurq7a2tiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==');
62
63/* zebra striping */
64.allRows {
65 background-color: @bodyBackground;
66 color: @bodyTextColor;
67}
68.evenRows {
69 background-color: lighten( desaturate(@headerBackground, 80%), 70%);
70 color: @bodyTextColor;
71}
72.oddRows {
73 background-color: lighten( desaturate(@headerBackground, 80%), 50%);
74}
75
76/* hovered rows */
77.oddHovered {
78 background-color: lighten( desaturate(@headerBackground, 50%), 40%);
79 color: @bodyTextColor;
80}
81.evenHovered {
82 background-color: lighten( desaturate(@headerBackground, 50%), 30%);
83 color: @bodyTextColor;
84}
85
86/* Columns widget */
87@primaryOdd : lighten( spin(@headerBackground, 10), 40%);
88@primaryEven : lighten( @primaryOdd, 8% );
89@secondaryOdd : @primaryEven;
90@secondaryEven : lighten( @primaryEven, 8% );
91@tertiaryOdd : @secondaryEven;
92@tertiaryEven : lighten( @secondaryEven, 8% );
93
94/* Filter widget transition */
95.filterWidgetTransition {
96 -webkit-transition: line-height @filterTransitionTime ease;
97 -moz-transition: line-height @filterTransitionTime ease;
98 -o-transition: line-height @filterTransitionTime ease;
99 transition: line-height @filterTransitionTime ease;
100}
101
102/*** Arrows ***/
103@arrowPosition : right 5px center;
104
105/* black */
106@unsortedBlack : url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQBAMAAADQT4M0AAAAIVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABt0UjBAAAACnRSTlMAMwsqXt+gIBUGxGoDMAAAAFlJREFUCNctzC0SQAAUReEzGNQ3AlHRiSRZFCVZYgeswRL8hLdK7834wj3tAlGP6y7fYHpKS6w6WwbVG0I1NZVnZPG8/DYxOYlnhUYkA06R1s9ESsxR4NIdPhkPFDFYuEnMAAAAAElFTkSuQmCC);
107@sortAscBlack : url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQBAMAAADQT4M0AAAAIVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABt0UjBAAAACnRSTlMAMwsqXt+gIBUGxGoDMAAAAFlJREFUCNctzC0SQAAUReEzGNQ3AlHRiSRZFCVZYgeswRL8hLdK7834wj3tAlGP6y7fYHpKS6w6WwbVG0I1NZVnZPG8/DYxOYlnhUYkA06R1s9ESsxR4NIdPhkPFDFYuEnMAAAAAElFTkSuQmCC);
108@sortDescBlack : url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQBAMAAADQT4M0AAAALVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADBoCg+AAAADnRSTlMAMiweCQITTvDctZZqaTlM310AAABcSURBVAjXY2BgYEtgAAFHERDJqigUAKSYBQUNgFSioKAYAwOLIBA4MASBKFUGQxAlzAAF+94BwWuGKBC1lIFl3rt3Lx0YGCzevWsGSjK9e6cAUlT3HKyW9wADAwDRrBiDy6bKzwAAAABJRU5ErkJggg==);
109
110/* white */
111@unsortedWhite : url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQBAMAAADQT4M0AAAAElBMVEUAAADu7u7u7u7u7u7u7u7u7u7yb344AAAABnRSTlMAMhIHKyAHBrhHAAAATElEQVQI12NgYGBSYAABQ2Ew5SgCIlkFBQOAlKKgoBADA7MgEBgwsIAoB4ZAECXKAAFQHkg9WIejoCBIv4mgoDOQYgZpAxkDNARqEQBTkAYuMZEHPgAAAABJRU5ErkJggg==);
112@sortAscWhite : url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQBAMAAADQT4M0AAAAHlBMVEUAAADu7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u4+jEeEAAAACXRSTlMAMwkqFV7roCD4hW+/AAAAWUlEQVQI1y3MrQ5AABSG4Xd+Rj0jiDabjKZxB6qqaarGNRh27tY5myd8b/uAeML1l2+wPqUlUd0ss+oNoZqG2rOwe15+p5iC1HNAK5IBlUjnZyIlZsxx0QAfzokSZgp96u4AAAAASUVORK5CYII=);
113@sortDescWhite : url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQBAMAAADQT4M0AAAAJ1BMVEUAAADu7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u4RJgHSAAAADHRSTlMAMiweCQITaU7olrlu2HdvAAAAXElEQVQI12NgYGBLYAABRxEQyaooFACkmAUFDYBUoqCgGAMDiyAQODAEgShVBkMQJcwABWvOAMEphmgQtZWBZc6ZMycdGBhszpw5DJRkOnNGAaSo5wRYLXsBAwMAi4YWQHRX4F0AAAAASUVORK5CYII=);
114
115/* automatically choose the correct arrow/text color */
116.headerText (@a) when (lightness(@a) >= 50%) {
117 color: @headerTextColor;
118}
119.headerText (@a) when (lightness(@a) < 50%) {
120 color: lighten(@headerTextColor, 90%);
121}
122.unsorted (@a) when (lightness(@a) >= 50%) {
123 background-image: @unsortedBlack;
124}
125.unsorted (@a) when (lightness(@a) < 50%) {
126 background-image: @unsortedWhite;
127}
128.sortAsc (@a) when (lightness(@a) >= 50%) {
129 background-image: @sortAscBlack;
130}
131.sortAsc (@a) when (lightness(@a) < 50%) {
132 background-image: @sortAscWhite;
133}
134.sortDesc (@a) when (lightness(@a) >= 50%) {
135 background-image: @sortDescBlack;
136}
137.sortDesc (@a) when (lightness(@a) < 50%) {
138 background-image: @sortDescWhite;
139}
140
141/* variable theme name - requires less.js 1.3+;
142 or just replace (!".@{theme}") with the contents of @theme
143*/
144.@{theme} {
145 font: @tableBodyFont;
146 background-color: @borderAndBackground;
147 margin: 10px 0 15px;
148 width: 100%;
149 text-align: left;
150 border-spacing: 0;
151 border: 0;
152
153 th, td {
154 border: 0;
155 }
156
157 /* style th's outside of the thead */
158 th, thead td {
159 font: @tableHeaderFont;
160 font-weight: bold;
161 background-color: @headerBackground;
162 color: @headerTextColor;
163 .headerText(@headerBackground);
164 border-collapse: collapse;
165 padding: @overallPadding;
166 }
167
168 .dark-row th, .dark-row td, caption.dark-row {
169 background-color: darken( @headerBackground, 10% );
170 }
171
172 tbody td, tfoot th, tfoot td {
173 padding: @overallPadding;
174 vertical-align: top;
175 }
176
177 /* style header */
178 .tablesorter-header {
179 .unsorted(@headerBackground);
180 background-repeat: no-repeat;
181 background-position: @arrowPosition;
182 cursor: pointer;
183 white-space: normal;
184 }
185
186 .tablesorter-header-inner {
187 padding: @headerPadding;
188 }
189
190 .tablesorter-header.sorter-false {
191 background-image: none;
192 cursor: default;
193 padding: @overallPadding;
194 }
195
196 .tablesorter-headerAsc {
197 .sortAsc(@headerBackground);
198 }
199
200 .tablesorter-headerDesc {
201 .sortDesc(@headerBackground);
202 }
203
204 /* tfoot */
205 tfoot .tablesorter-headerAsc,
206 tfoot .tablesorter-headerDesc {
207 /* remove sort arrows from footer */
208 background-image: none;
209 }
210
211 /* optional disabled input styling */
212 .disabled {
213 opacity: 0.5;
214 filter: alpha(opacity=50);
215 cursor: not-allowed;
216 }
217
218 /* body */
219 tbody {
220
221 td {
222 .allRows;
223 padding: @overallPadding;
224 vertical-align: top;
225 }
226
227 /* Zebra Widget - row alternating colors */
228 tr.odd > td {
229 .oddRows;
230 }
231 tr.even > td {
232 .evenRows;
233 }
234
235 }
236
237 /* hovered row colors
238 you'll need to add additional lines for
239 rows with more than 2 child rows
240 */
241 tbody > tr.hover > td,
242 tbody > tr:hover > td,
243 tbody > tr:hover + tr.tablesorter-childRow > td,
244 tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
245 tbody > tr.even.hover > td,
246 tbody > tr.even:hover > td,
247 tbody > tr.even:hover + tr.tablesorter-childRow > td,
248 tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
249 .evenHovered;
250 }
251 tbody > tr.odd.hover > td,
252 tbody > tr.odd:hover > td,
253 tbody > tr.odd:hover + tr.tablesorter-childRow > td,
254 tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
255 .oddHovered;
256 }
257
258 /* table processing indicator - indeterminate spinner */
259 .tablesorter-processing {
260 background-image: @processingIcon;
261 background-position: center center;
262 background-repeat: no-repeat;
263 }
264
265 /* pager */
266 div.tablesorter-pager {
267 button {
268 background-color: lighten( @headerBackground, 7% );
269 color: @headerTextColor;
270 border: lighten( @headerBackground, 15% ) 1px solid;
271 cursor: pointer;
272 }
273 button:hover {
274 background-color: lighten( @headerBackground, 15% );
275 }
276 }
277
278 /* Column Widget - column sort colors */
279 tr.odd td.primary {
280 background-color: @primaryOdd;
281 }
282 td.primary, tr.even td.primary {
283 background-color: @primaryEven;
284 }
285 tr.odd td.secondary {
286 background-color: @secondaryOdd;
287 }
288 td.secondary, tr.even td.secondary {
289 background-color: @secondaryEven;
290 }
291 tr.odd td.tertiary {
292 background-color: @tertiaryOdd;
293 }
294 td.tertiary, tr.even td.tertiary {
295 background-color: @tertiaryEven;
296 }
297
298 /* caption (non-theme matching) */
299 caption {
300 background-color: @captionBackground ;
301 }
302
303 /* filter widget */
304 .tablesorter-filter-row input,
305 .tablesorter-filter-row select{
306 width: 98%;
307 height: auto;
308 margin: 0;
309 padding: @overallPadding;
310 color: @filterElementTextColor;
311 background-color: @filterElementBkgd;
312 border: @filterElementBorder;
313 -webkit-box-sizing: border-box;
314 -moz-box-sizing: border-box;
315 box-sizing: border-box;
316 .filterWidgetTransition;
317 }
318 .tablesorter-filter-row {
319 background-color: @filterCellBackground;
320 }
321 .tablesorter-filter-row td {
322 text-align: center;
323 background-color: @filterCellBackground;
324 line-height: normal;
325 text-align: center; /* center the input */
326 .filterWidgetTransition;
327 }
328 /* hidden filter row */
329 .tablesorter-filter-row.hideme td {
330 padding: @filterRowHiddenHeight / 2;
331 margin: 0;
332 line-height: 0;
333 cursor: pointer;
334 }
335 .tablesorter-filter-row.hideme * {
336 height: 1px;
337 min-height: 0;
338 border: 0;
339 padding: 0;
340 margin: 0;
341 /* don't use visibility: hidden because it disables tabbing */
342 opacity: 0;
343 filter: alpha(opacity=0);
344 }
345 /* rows hidden by filtering (needed for child rows) */
346 .filtered {
347 display: none;
348 }
349
350 /* ajax error row */
351 .tablesorter-errorRow td {
352 text-align: center;
353 cursor: pointer;
354 background-color: @errorBackground;
355 }
356
357}
Note: See TracBrowser for help on using the repository browser.