source: binary-improvements/webserver/js/tablesorter/css/less/theme.less@ 347

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

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