source: binary-improvements/webserver/js/tablesorter/css/less/bootstrap.less@ 306

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

Mod stuff
File size: 9.1 KB
Line 
1/* Tablesorter Custom Bootstrap 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-bootstrap;
16
17/*** fonts ***/
18@tableHeaderFont : 14px bold Arial, Sans-serif;
19@tableBodyFont : 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
20
21/*** color definitions ***/
22/* for best results, only change the hue (240),
23 leave the saturation (60%) and luminosity (80%) alone
24 pick the color from here: http://hslpicker.com/#99E699 */
25@headerBackground : hsl(240, 60%, 80%);
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@headerMargin : 0 0 18px;
50
51/* url(icons/loading.gif); */
52@processingIcon : url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=');
53
54/* zebra striping */
55.allRows {
56 background-color: @bodyBackground;
57 color: @bodyTextColor;
58}
59.evenRows {
60 background-color: lighten(@headerBackground, 35%);
61}
62.oddRows {
63 background-color: lighten(@headerBackground, 18%);
64}
65
66/* hovered rows */
67.oddHovered {
68 background-color: desaturate(@headerBackground, 60%);
69}
70.evenHovered {
71 background-color: lighten( desaturate(@headerBackground, 60%), 10% );
72}
73
74/* Columns widget */
75@primaryOdd : spin(@headerBackground, 10); /* saturate( darken( desaturate(@headerBackground, 10%), 10% ), 30%); */
76@primaryEven : lighten( @primaryOdd, 10% );
77@secondaryOdd : @primaryEven;
78@secondaryEven : lighten( @primaryEven, 5% );
79@tertiaryOdd : @secondaryEven;
80@tertiaryEven : lighten( @secondaryEven, 5% );
81
82/* Filter widget transition */
83.filterWidgetTransition {
84 -webkit-transition: line-height @filterTransitionTime ease;
85 -moz-transition: line-height @filterTransitionTime ease;
86 -o-transition: line-height @filterTransitionTime ease;
87 transition: line-height @filterTransitionTime ease;
88}
89
90/*** icon block ***/
91.iconPosition {
92 font-size: 11px;
93 position: absolute;
94 right: 2px;
95 top: 50%;
96 margin-top: -7px; /* half the icon height; older IE doesn't like this */
97 width: 14px;
98 height: 14px;
99 background-repeat: no-repeat;
100 line-height: 14px;
101}
102
103/* black */
104@unsortedBlack : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAOCAMAAADOvxanAAAAVFBMVEUAAABCQkJZWVkZGRnJyckgICAZGRkZGRn8/PweHh4dHR0aGhoaGhpUVFQbGxvQ0NDc3NxMTExSUlIbGxvr6+s4ODhKSkogICAtLS00NDQzMzMnJydSEPrQAAAAGHRSTlMA1ssZRLgdAQbDyisqsZo8QdXUq0r9xPepSRwiAAAAX0lEQVQI13XHSQKAIAwEwQAKxn13Ev7/T2Pu9qmarJKPXIicI4PH4hxaKNrhm2S8bJK5h4YzKHrzJNtK6yYT/TdXzpS5zuYg4MSQYF6i4IHExdw1UVRi05HPrrvT53a+qyMFC9t04gcAAAAASUVORK5CYII=);
105
106/* white */
107@unsortedWhite : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAOBAMAAAALT/umAAAAKlBMVEUAAAD///////////////////////////////////////////////////+Gu8ovAAAADXRSTlMA4EXKBtQqvR0+sxmalc142gAAAFdJREFUCNdjYGDoamAAAjZbMxCVfvd6AgMDd+3du9UMDKx3hWSvMjBwXZww8RYDGuC53NB8h4GB8a617UUGBs7Yu3cjGRhYVO9eVQFKOskKOQApFmUgBwBZ+xXRTttNdAAAAABJRU5ErkJggg==);
108
109/* automatically choose the correct arrow/text color */
110.headerText (@a) when (lightness(@a) >= 50%) {
111 color: @headerTextColor;
112}
113.headerText (@a) when (lightness(@a) < 50%) {
114 color: lighten(@headerTextColor, 90%);
115}
116.unsorted (@a) when (lightness(@a) >= 50%) {
117 background-image: @unsortedBlack;
118 color: @headerTextColor;
119}
120.unsorted (@a) when (lightness(@a) < 50%) {
121 background-image: @unsortedWhite;
122 color: lighten(@headerTextColor, 90%);
123}
124
125/* variable theme name - requires less.js 1.3+;
126 or just replace (!".@{theme}") with the contents of @theme
127*/
128.@{theme} {
129 font: @tableBodyFont;
130 background-color: @borderAndBackground;
131 width: 100%;
132
133 /* style th's outside of the thead */
134 th, thead td {
135 font: @tableHeaderFont;
136 font-weight: bold;
137 background-color: @headerBackground;
138 .headerText(@headerBackground);
139 border-collapse: collapse;
140 margin: @headerMargin;
141 padding: @overallPadding;
142 }
143
144 tbody td, tfoot th, tfoot td {
145 padding: @overallPadding;
146 vertical-align: top;
147 }
148
149 /* style header */
150 .tablesorter-header {
151 cursor: pointer;
152 }
153
154 .tablesorter-header-inner {
155 position: relative;
156 padding: @headerPadding;
157 }
158
159 /* bootstrap uses <i> for icons */
160 .tablesorter-header-inner i.tablesorter-icon {
161 .iconPosition
162 }
163
164 .tablesorter-header.sorter-false {
165 background-image: none;
166 cursor: default;
167
168 }
169
170 .tablesorter-headerAsc {
171 background-color: @headerAsc;
172 }
173
174 .tablesorter-headerDesc {
175 background-color: @headerDesc;
176 }
177
178 .bootstrap-icon-unsorted {
179 .unsorted(@headerBackground);
180 }
181
182
183 /* tfoot */
184 tfoot .tablesorter-headerAsc,
185 tfoot .tablesorter-headerDesc {
186 /* remove sort arrows from footer */
187 background-image: none;
188 }
189
190 /* optional disabled input styling */
191 .disabled {
192 opacity: 0.5;
193 filter: alpha(opacity=50);
194 cursor: not-allowed;
195 }
196
197 /* body */
198 tbody {
199
200 td {
201 .allRows;
202 padding: @overallPadding;
203 vertical-align: top;
204 }
205
206 /* Zebra Widget - row alternating colors */
207 tr.odd > td {
208 .oddRows;
209 }
210 tr.even > td {
211 .evenRows;
212 }
213
214 }
215
216 /* hovered row colors
217 you'll need to add additional lines for
218 rows with more than 2 child rows
219 */
220 tbody > tr.hover > td,
221 tbody > tr:hover > td,
222 tbody > tr:hover + tr.tablesorter-childRow > td,
223 tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
224 tbody > tr.even.hover > td,
225 tbody > tr.even:hover > td,
226 tbody > tr.even:hover + tr.tablesorter-childRow > td,
227 tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
228 .evenHovered;
229 }
230 tbody > tr.odd.hover > td,
231 tbody > tr.odd:hover > td,
232 tbody > tr.odd:hover + tr.tablesorter-childRow > td,
233 tbody > tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
234 .oddHovered;
235 }
236
237 /* table processing indicator - indeterminate spinner */
238 .tablesorter-processing {
239 background-image: @processingIcon;
240 background-position: center center;
241 background-repeat: no-repeat;
242 }
243
244 /* Column Widget - column sort colors */
245 tr.odd td.primary {
246 background-color: @primaryOdd;
247 }
248 td.primary, tr.even td.primary {
249 background-color: @primaryEven;
250 }
251 tr.odd td.secondary {
252 background-color: @secondaryOdd;
253 }
254 td.secondary, tr.even td.secondary {
255 background-color: @secondaryEven;
256 }
257 tr.odd td.tertiary {
258 background-color: @tertiaryOdd;
259 }
260 td.tertiary, tr.even td.tertiary {
261 background-color: @tertiaryEven;
262 }
263
264 /* caption (non-theme matching) */
265 caption {
266 background-color: @captionBackground ;
267 }
268
269 /* filter widget */
270 .tablesorter-filter-row input,
271 .tablesorter-filter-row select{
272 width: 98%;
273 margin: 0;
274 padding: @overallPadding;
275 color: @filterElementTextColor;
276 background-color: @filterElementBkgd;
277 border: @filterElementBorder;
278 -webkit-box-sizing: border-box;
279 -moz-box-sizing: border-box;
280 box-sizing: border-box;
281 .filterWidgetTransition;
282 }
283 .tablesorter-filter-row {
284 background-color: @filterCellBackground;
285 }
286 .tablesorter-filter-row td {
287 text-align: center;
288 background-color: @filterCellBackground;
289 line-height: normal;
290 text-align: center; /* center the input */
291 .filterWidgetTransition;
292 }
293 /* hidden filter row */
294 .tablesorter-filter-row.hideme td {
295 padding: @filterRowHiddenHeight / 2;
296 margin: 0;
297 line-height: 0;
298 cursor: pointer;
299 }
300 .tablesorter-filter-row.hideme * {
301 height: 1px;
302 min-height: 0;
303 border: 0;
304 padding: 0;
305 margin: 0;
306 /* don't use visibility: hidden because it disables tabbing */
307 opacity: 0;
308 filter: alpha(opacity=0);
309 }
310 /* rows hidden by filtering (needed for child rows) */
311 .filtered {
312 display: none;
313 }
314
315 /* ajax error row */
316 .tablesorter-errorRow td {
317 text-align: center;
318 cursor: pointer;
319 background-color: @errorBackground;
320 }
321
322}
Note: See TracBrowser for help on using the repository browser.