tablesorter/css/theme.less

/* LESS Theme by Rob Garrison

 To create your own theme, modify the code below and run it through
 a LESS compiler, like this one: http://leafo.net/lessphp/editor.html
 or download less.js from http://lesscss.org/

 */

/*** fonts ***/
@tableHeaderFont       : 11px 'trebuchet ms', verdana, arial;
@tableBodyFont         : 11px 'trebuchet ms', verdana, arial;

/*** color definitions ***/
/* for best results, only change the hue (210),
   leave the saturation and luminosity alone
   pick the color from here: http://hslpicker.com/#99CCE6 */
@headerBackground      : hsl(120, 60%, 75%);
@borderAndBackground   : #cdcdcd;
@overallBorder         : @borderAndBackground 1px solid;
@headerTextColor       : #000;

@bodyBackground        : #fff;
@bodyTextColor         : #000;

@headerSortUp          : desaturate(@headerBackground, 10%);
@headerSortDown        : darken(@headerSortUp, 5%);

@filterCellBackground  : #eee;

@overallPadding        : 4px;
/* 20px should be slightly wider than the icon width to avoid overlap */
@headerPadding         : 4px 20px 4px 4px;

/* url(icons/loading.gif); */
@processingIcon        : url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=');

/* zebra striping */
.allRows {
	background: @bodyBackground;
	color: @bodyTextColor;
}
.evenRows {
	background: lighten(@headerBackground, 40%);
	color: @bodyTextColor;
}
.oddRows {
	background: lighten(@headerBackground, 20%);
}

/* hovered rows */
.oddHovered {
	background: desaturate(@headerBackground, 60%);
	color: @bodyTextColor;
}
.evenHovered {
	background: lighten( desaturate(@headerBackground, 60%), 10% );
	color: @bodyTextColor;
}

/* Columns widget */
@primaryOdd            : spin(@headerBackground, 10); /* saturate( darken( desaturate(@headerBackground, 10%), 10% ), 30%); */
@primaryEven           : lighten( @primaryOdd, 10% );
@secondaryOdd          : @primaryEven;
@secondaryEven         : lighten( @primaryEven, 5% );
@tertiaryOdd           : @secondaryEven;
@tertiaryEven          : lighten( @secondaryEven, 5% );

/* black */
@unsortedBlack         : url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
@sortUpBlack           : url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
@sortDownBlack         : url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);

@filterIconBlack       : url(data:image/gif;base64,R0lGODlhCgAMALMAAEpKSklJSUNDQ0FBQUBAQDk5OTc3NzY2NiQkJP///wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAAkALAAAAAAKAAwAAAQnEMlJk72YamQE+KBgJEcAAsFxFWeBJcRHvInxjfRHW/oODLsEEBMBADs=);

/* white */
@unsortedWhite         : url(data:image/gif;base64,R0lGODlhFQAJAIAAAP///////yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
@sortUpWhite           : url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
@sortDownWhite         : url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);

@filterIconWhite       : url(data:image/gif;base64,R0lGODlhCgANALMAAP////r6+u7u7ufn5+Hh4d3d3cXFxb+/v76+vru7u7m5uf///wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAA0AAAQpUMhJl72YanEG+OBwLEkAAkFyGaeBLcVXvAvyIfTy5TrAAwQeQcEjYiIAOw==);

/*** Arrows ***/
.unsorted (@a) when (lightness(@a) >= 50%) {
	background-image: @unsortedBlack;
	color: @headerTextColor;
}
.unsorted (@a) when (lightness(@a) < 50%) {
	background-image: @unsortedWhite;
	color: lighten(@headerTextColor, 90%);
}
.sortUp (@a) when (lightness(@a) >= 50%) {
	background-image: @sortUpBlack;
	color: @headerTextColor;
}
.sortUp (@a) when (lightness(@a) < 50%) {
	background-image: @sortUpWhite;
	color: lighten(@headerTextColor, 90%);
}
.sortDown (@a) when (lightness(@a) >= 50%) {
	background-image: @sortDownBlack;
	color: @headerTextColor;
}
.sortDown (@a) when (lightness(@a) < 50%) {
	background-image: @sortDownWhite;
	color: lighten(@headerTextColor, 90%);
}
.filterIcon (@a) when (lightness(@a) >= 50%) {
	background-image: @filterIconBlack;
}
.filterIcon (@a) when (lightness(@a) < 50%) {
	background-image: @filterIconWhite;
}

table.tablesorter {
	font: @tableBodyFont;
	background-color: @borderAndBackground;
	margin: 10px 0 15px;
	width: 100%;
	text-align: left;
	border-spacing: 0;

	th, td {
		border: @overallBorder;
	}

	/* style th's outside of the thead */
	th, thead td {
		background-color: @headerBackground;
		color: @headerTextColor;
		border-collapse: collapse;
		font: @tableHeaderFont;
		font-weight: bold;
		padding: @overallPadding;
	}

	/* style header */
	.tablesorter-header {
		.unsorted(@headerBackground);
		background-repeat: no-repeat;
		background-position: center right;
		padding: @headerPadding;
		cursor: pointer;
	}

	.tablesorter-headerSortUp {
		background-color: @headerSortUp;
		.sortUp(@headerBackground);
	}

	.tablesorter-headerSortDown {
		background-color: @headerSortDown;
		.sortDown(@headerBackground);
	}

	/* Column Widget - column sort colors */
	tr.odd td.primary {
		background-color: @primaryOdd;
	}
	td.primary, tr.even td.primary {
		background-color: @primaryEven;
	}
	tr.odd td.secondary {
		background-color: @secondaryOdd;
	}
	td.secondary, tr.even td.secondary {
		background-color: @secondaryEven;
	}
	tr.odd td.tertiary {
		background-color: @tertiaryOdd;
	}
	td.tertiary, tr.even td.tertiary {
		background-color: @tertiaryEven;
	}

	/* optional disabled input styling */ 
	.disabled {
		opacity: 0.5;
		filter: alpha(opacity=50);
		cursor: not-allowed;
	}

	/* filter widget */
	.tablesorter-filter-row input,
	.tablesorter-filter-row select{
		width: 95%;
		height: inherit;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	.tablesorter-filter-row td {
		text-align: center;
		background: @filterCellBackground;
	}

	/* body */
	tbody {

		td {
			.allRows;
			padding: @overallPadding;
			vertical-align: top;
		}

		/* Zebra Widget - row alternating colors */
		tr.odd td {
			.oddRows;
		}
		tr.even td {
			.evenRows;
		}

		/* hovered row colors
		 you'll need to add additional lines for
		 rows with more than 2 child rows
		*/
		tr:hover td,
		tr:hover + tr.tablesorter-childRow td,
		tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow td,
		tr.even:hover td,
		tr.even:hover + tr.tablesorter-childRow td,
		tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow td {
			.evenHovered;
		}
		tr.odd:hover td,
		tr.odd:hover + tr.tablesorter-childRow td,
		tr.odd:hover + tr.tablesorter-childRow + tr.tablesorter-childRow td {
			.oddHovered;
		}

	}

	/* table processing indicator - indeterminate spinner */
	.tablesorter-processing {
		background-image: @processingIcon;
		background-position: center center;
		background-repeat: no-repeat;
		position: absolute;
		z-index: 1000;
	}

}