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/

 Test out this less file live at http://codepen.io/Mottie/pen/eqBbn

 */

/*** theme ***/
@theme                 : 'tablesorter-custom';

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

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

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

@headerSortUp          : lighten(spin(@headerBackground, 5), 10%); /* desaturate(@headerBackground, 10%); */
@headerSortDown        : darken(spin(@headerBackground, -5), 10%); /* darken(@headerSortUp, 5%); */

@filterCellBackground  : #eee;
@filterElementTextColor: #333;
@filterElementBkgd     : #fff;
@filterElementBorder   : 1px solid #bbb;
@filterTransitionTime  : 0.1s;
@filterRowHiddenHeight : 4px; /* becomes height using padding (so it's divided by 2) */

@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% );

/* Filter widget transition */
.filterWidgetTransition {
	-webkit-transition: line-height @filterTransitionTime ease;
	-moz-transition: line-height @filterTransitionTime ease;
	-o-transition: line-height @filterTransitionTime ease;
	transition: line-height @filterTransitionTime ease;
}

/*** Arrows ***/
@arrowPosition         : center right;

/* 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==);

/* automatically choose the correct arrow/text color */
.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;
}

/* variable theme name - requires less.js 1.3+;
  or just replace (!".@{theme}") with the contents of @theme
 */
(~".@{theme}") {
	font: @tableBodyFont;
	background-color: @borderAndBackground;
	margin: 10px 0 15px;
	width: 100%;
	text-align: left;
	border-spacing: 0;
	border: @overallBorder;
	border-width: 1px 0 0 1px;

	th, td {
		border: @overallBorder;
		border-width: 0 1px 1px 0;
	}

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

	tbody td, tfoot th, tfoot td {
		padding: @overallPadding;
		vertical-align: top;
	}

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

	.tablesorter-header.sorter-false {
		background-image: url();
		padding: @overallPadding;
	}

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

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

	/* tfoot */
	tfoot .tablesorter-headerSortUp,
	tfoot .tablesorter-headerSortDown {
		/* remove sort arrows from footer */
		background-image: none;
	}

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

	/* 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
	*/
	tbody > tr:hover td,
	tbody > tr:hover + tr.tablesorter-childRow > td,
	tbody > tr:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td,
	tbody > tr.even:hover > td,
	tbody > tr.even:hover + tr.tablesorter-childRow > td,
	tbody > tr.even:hover + tr.tablesorter-childRow + tr.tablesorter-childRow > td {
		.evenHovered;
	}
	tbody > tr.odd:hover > td,
	tbody > tr.odd:hover + tr.tablesorter-childRow > td,
	tbody > 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;
	}

	/* 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;
	}

	/* filter widget */
	.tablesorter-filter-row input,
	.tablesorter-filter-row select{
		width: 98%;
		height: inherit;
		margin: 0;
		padding: @overallPadding;
		color: @filterElementTextColor;
		background: @filterElementBkgd;
		border: @filterElementBorder;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		.filterWidgetTransition;
	}
	.tablesorter-filter-row td {
		text-align: center;
		background: @filterCellBackground;
		line-height: normal;
		text-align: center; /* center the input */
		.filterWidgetTransition;
	}
	/* hidden filter row */
	.tablesorter-filter-row.hideme td {
		padding: @filterRowHiddenHeight / 2;
		margin: 0;
		line-height: 0;
		cursor: pointer;
	}
	.tablesorter-filter-row.hideme .tablesorter-filter {
		height: 1px;
		min-height: 0;
		border: 0;
		padding: 0;
		margin: 0;
		/* don't use visibility: hidden because it disables tabbing */
		opacity: 0;
		filter: alpha(opacity=0);
	}

}