Themes: add Metro theme/LESS file; add Bootstrap LESS file

2024-11-15 23:54:22 +00:00 · 2014-05-05 14:19:29 -05:00 · 2014-05-05 14:19:29 -05:00 · 47fd40fa0f
commit 47fd40fa0f
parent 6b2db42a73
16 changed files with 928 additions and 43 deletions
--- a/css/bootstrap.less
+++ b/css/bootstrap.less
@ -0,0 +1,317 @@
+/* Tablesorter Custom Bootstrap 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 these custom less files live
+ Basic Theme : http://codepen.io/Mottie/pen/eqBbn
+ Bootstrap   : http://codepen.io/Mottie/pen/Ltzpi
+ Metro Style : http://codepen.io/Mottie/pen/gCslk
+
+*/
+
+/*** theme ***/
+@theme                 : tablesorter-bootstrap;
+
+/*** fonts ***/
+@tableHeaderFont       : 14px bold Arial, Sans-serif;
+@tableBodyFont         : 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+/*** color definitions ***/
+/* for best results, only change the hue (240),
+   leave the saturation (60%) and luminosity (80%) alone
+   pick the color from here: http://hslpicker.com/#99E699 */
+@headerBackground      : hsl(240, 60%, 80%);
+@borderAndBackground   : #cdcdcd;
+@overallBorder         : @borderAndBackground 1px solid;
+@headerTextColor       : #000;
+
+@bodyBackground        : #fff;
+@bodyTextColor         : #000;
+
+@headerAsc             : darken(spin(@headerBackground, 5), 10%); /* darken(@headerBackground, 10%); */
+@headerDesc            : lighten(spin(@headerBackground, -5), 10%); /* desaturate(@headerAsc, 5%); */
+
+@captionBackground     : #fff; /* it might be best to match the document body background color here */
+@errorBackground       : #e6bf99; /* ajax error message (added to thead) */
+
+@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;
+@headerMargin          : 0 0 18px;
+
+/* 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, 35%);
+}
+.oddRows {
+	background: lighten(@headerBackground, 18%);
+}
+
+/* hovered rows */
+.oddHovered {
+	background: desaturate(@headerBackground, 60%);
+}
+.evenHovered {
+	background: lighten( desaturate(@headerBackground, 60%), 10% );
+}
+
+/* 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;
+}
+
+/*** icon block ***/
+.iconPosition {
+	font-size: 11px;
+	position: absolute;
+	right: 2px;
+	top: 50%;
+	margin-top: -7px; /* half the icon height; older IE doesn't like this */
+	width: 14px;
+	height: 14px;
+	background-repeat: no-repeat;
+	line-height: 14px;
+}
+
+/* black */
+@unsortedBlack : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAOCAMAAADOvxanAAAAVFBMVEUAAABCQkJZWVkZGRnJyckgICAZGRkZGRn8/PweHh4dHR0aGhoaGhpUVFQbGxvQ0NDc3NxMTExSUlIbGxvr6+s4ODhKSkogICAtLS00NDQzMzMnJydSEPrQAAAAGHRSTlMA1ssZRLgdAQbDyisqsZo8QdXUq0r9xPepSRwiAAAAX0lEQVQI13XHSQKAIAwEwQAKxn13Ev7/T2Pu9qmarJKPXIicI4PH4hxaKNrhm2S8bJK5h4YzKHrzJNtK6yYT/TdXzpS5zuYg4MSQYF6i4IHExdw1UVRi05HPrrvT53a+qyMFC9t04gcAAAAASUVORK5CYII=);
+
+/* white */
+@unsortedWhite : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAOBAMAAAALT/umAAAAKlBMVEUAAAD///////////////////////////////////////////////////+Gu8ovAAAADXRSTlMA4EXKBtQqvR0+sxmalc142gAAAFdJREFUCNdjYGDoamAAAjZbMxCVfvd6AgMDd+3du9UMDKx3hWSvMjBwXZww8RYDGuC53NB8h4GB8a617UUGBs7Yu3cjGRhYVO9eVQFKOskKOQApFmUgBwBZ+xXRTttNdAAAAABJRU5ErkJggg==);
+
+/* automatically choose the correct arrow/text color */
+.headerText (@a) when (lightness(@a) >= 50%) {
+	color: @headerTextColor;
+}
+.headerText (@a) when (lightness(@a) < 50%) {
+	color: lighten(@headerTextColor, 90%);
+}
+.unsorted (@a) when (lightness(@a) >= 50%) {
+	background-image: @unsortedBlack;
+	color: @headerTextColor;
+}
+.unsorted (@a) when (lightness(@a) < 50%) {
+	background-image: @unsortedWhite;
+	color: lighten(@headerTextColor, 90%);
+}
+
+/* variable theme name - requires less.js 1.3+;
+   or just replace (!".@{theme}") with the contents of @theme
+*/
+.@{theme} {
+	font: @tableBodyFont;
+	background-color: @borderAndBackground;
+	width: 100%;
+
+	/* style th's outside of the thead */
+	th, thead td {
+		font: @tableHeaderFont;
+		font-weight: bold;
+		background-color: @headerBackground;
+		.headerText(@headerBackground);
+		border-collapse: collapse;
+		margin: @headerMargin;
+		padding: @overallPadding;
+	}
+
+	tbody td, tfoot th, tfoot td {
+		padding: @overallPadding;
+		vertical-align: top;
+	}
+
+	/* style header */
+	.tablesorter-header {
+		cursor: pointer;
+	}
+
+	.tablesorter-header-inner {
+		position: relative;
+		padding: @headerPadding;
+	}
+
+	/* bootstrap uses <i> for icons */
+	.tablesorter-header-inner i {
+		.iconPosition
+	}
+
+	.tablesorter-header.sorter-false {
+		background-image: none;
+		cursor: default;
+		
+	}
+
+	.tablesorter-headerAsc {
+		background-color: @headerAsc;
+	}
+
+	.tablesorter-headerDesc {
+		background-color: @headerDesc;
+	}
+
+	.bootstrap-icon-unsorted {
+		.unsorted(@headerBackground);
+	}
+
+
+	/* tfoot */
+	tfoot .tablesorter-headerAsc,
+	tfoot .tablesorter-headerDesc {
+		/* 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;
+	}
+
+	/* 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;
+	}
+
+	/* caption (non-theme matching) */
+	caption {
+		background: @captionBackground ;
+	}
+
+	/* filter widget */
+	.tablesorter-filter-row input,
+	.tablesorter-filter-row select{
+		width: 98%;
+		height: auto;
+		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);
+	}
+	/* rows hidden by filtering (needed for child rows) */
+	.filtered {
+		display: none;
+	}
+
+	/* ajax error row */
+	.tablesorter-errorRow td {
+		text-align: center;
+		cursor: pointer;
+		background-color: @errorBackground;
+	}
+
+}
--- a/css/images/bootstrap-black-unsorted.png
+++ b/css/images/bootstrap-black-unsorted.png
--- a/css/images/bootstrap-white-unsorted.png
+++ b/css/images/bootstrap-white-unsorted.png
--- a/css/images/metro-black-asc.png
+++ b/css/images/metro-black-asc.png
--- a/css/images/metro-black-desc.png
+++ b/css/images/metro-black-desc.png
--- a/css/images/metro-loading.gif
+++ b/css/images/metro-loading.gif
--- a/css/images/metro-unsorted.png
+++ b/css/images/metro-unsorted.png
--- a/css/images/metro-white-asc.png
+++ b/css/images/metro-white-asc.png
--- a/css/images/metro-white-desc.png
+++ b/css/images/metro-white-desc.png
--- a/css/metro.less
+++ b/css/metro.less
@ -0,0 +1,351 @@
+/* Tablesorter Custom Metro 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 these custom less files live
+ Basic Theme : http://codepen.io/Mottie/pen/eqBbn
+ Bootstrap   : http://codepen.io/Mottie/pen/Ltzpi
+ Metro Style : http://codepen.io/Mottie/pen/gCslk
+
+*/
+
+/*** theme ***/
+@theme                 : tablesorter-metro;
+
+/*** fonts ***/
+@tableHeaderFont       : 14px 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
+@tableBodyFont         : 14px 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
+
+/*** 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/#825a2b
+
+  Inspired by http://www.jtable.org/ metro themes:
+    Blue:        hsl(212, 86%, 35%)
+    Brown        hsl(32, 50%, 30%)
+    Crimson      hsl(0, 100%, 38%)
+    Dark Grey    hsl(0, 0%, 27%)
+    Dark Orange  hsl(13, 70%, 51%)
+    Green        hsl(120, 100%, 32%)
+    Light Gray   hsl(0, 0%, 44%)
+    Pink         hsl(297, 100%, 33%)
+    Purple       hsl(257, 51%, 48%)
+    Red          hsl(5, 100%, 40%)
+
+ */
+@headerBackground      : hsl(32, 50%, 30%);
+@borderAndBackground   : #cdcdcd;
+@headerTextColor       : #eee;
+
+@bodyBackground        : #fff;
+@bodyTextColor         : #000;
+
+@captionBackground     : #fff; /* it might be best to match the document body background color here */
+@errorBackground       : #e6bf99; /* ajax error message (added to thead) */
+
+@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,R0lGODlhEAAQAPIAAP///1VVVdbW1oCAgFVVVZaWlqurq7a2tiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==');
+
+/* zebra striping */
+.allRows {
+	background: @bodyBackground;
+	color: @bodyTextColor;
+}
+.evenRows {
+	background: lighten( desaturate(@headerBackground, 80%), 70%);
+	color: @bodyTextColor;
+}
+.oddRows {
+	background: lighten( desaturate(@headerBackground, 80%), 50%);
+}
+
+/* hovered rows */
+.oddHovered {
+	background: lighten( desaturate(@headerBackground, 50%), 40%);
+	color: @bodyTextColor;
+}
+.evenHovered {
+	background: lighten( desaturate(@headerBackground, 50%), 30%);
+	color: @bodyTextColor;
+}
+
+/* Columns widget */
+@primaryOdd    : lighten( spin(@headerBackground, 10), 40%);
+@primaryEven   : lighten( @primaryOdd, 8% );
+@secondaryOdd  : @primaryEven;
+@secondaryEven : lighten( @primaryEven, 8% );
+@tertiaryOdd   : @secondaryEven;
+@tertiaryEven  : lighten( @secondaryEven, 8% );
+
+/* 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,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQBAMAAADQT4M0AAAAIVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABt0UjBAAAACnRSTlMAMwsqXt+gIBUGxGoDMAAAAFlJREFUCNctzC0SQAAUReEzGNQ3AlHRiSRZFCVZYgeswRL8hLdK7834wj3tAlGP6y7fYHpKS6w6WwbVG0I1NZVnZPG8/DYxOYlnhUYkA06R1s9ESsxR4NIdPhkPFDFYuEnMAAAAAElFTkSuQmCC);
+@sortAscBlack  : url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQBAMAAADQT4M0AAAAIVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABt0UjBAAAACnRSTlMAMwsqXt+gIBUGxGoDMAAAAFlJREFUCNctzC0SQAAUReEzGNQ3AlHRiSRZFCVZYgeswRL8hLdK7834wj3tAlGP6y7fYHpKS6w6WwbVG0I1NZVnZPG8/DYxOYlnhUYkA06R1s9ESsxR4NIdPhkPFDFYuEnMAAAAAElFTkSuQmCC);
+@sortDescBlack : url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQBAMAAADQT4M0AAAALVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADBoCg+AAAADnRSTlMAMiweCQITTvDctZZqaTlM310AAABcSURBVAjXY2BgYEtgAAFHERDJqigUAKSYBQUNgFSioKAYAwOLIBA4MASBKFUGQxAlzAAF+94BwWuGKBC1lIFl3rt3Lx0YGCzevWsGSjK9e6cAUlT3HKyW9wADAwDRrBiDy6bKzwAAAABJRU5ErkJggg==);
+
+/* white */
+@unsortedWhite : url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQBAMAAADQT4M0AAAAElBMVEUAAADu7u7u7u7u7u7u7u7u7u7yb344AAAABnRSTlMAMhIHKyAHBrhHAAAATElEQVQI12NgYGBSYAABQ2Ew5SgCIlkFBQOAlKKgoBADA7MgEBgwsIAoB4ZAECXKAAFQHkg9WIejoCBIv4mgoDOQYgZpAxkDNARqEQBTkAYuMZEHPgAAAABJRU5ErkJggg==);
+@sortAscWhite  : url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQBAMAAADQT4M0AAAAHlBMVEUAAADu7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u4+jEeEAAAACXRSTlMAMwkqFV7roCD4hW+/AAAAWUlEQVQI1y3MrQ5AABSG4Xd+Rj0jiDabjKZxB6qqaarGNRh27tY5myd8b/uAeML1l2+wPqUlUd0ss+oNoZqG2rOwe15+p5iC1HNAK5IBlUjnZyIlZsxx0QAfzokSZgp96u4AAAAASUVORK5CYII=);
+@sortDescWhite : url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQBAMAAADQT4M0AAAAJ1BMVEUAAADu7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u4RJgHSAAAADHRSTlMAMiweCQITaU7olrlu2HdvAAAAXElEQVQI12NgYGBLYAABRxEQyaooFACkmAUFDYBUoqCgGAMDiyAQODAEgShVBkMQJcwABWvOAMEphmgQtZWBZc6ZMycdGBhszpw5DJRkOnNGAaSo5wRYLXsBAwMAi4YWQHRX4F0AAAAASUVORK5CYII=);
+
+/* automatically choose the correct arrow/text color */
+.headerText (@a) when (lightness(@a) >= 50%) {
+	color: @headerTextColor;
+}
+.headerText (@a) when (lightness(@a) < 50%) {
+	color: lighten(@headerTextColor, 90%);
+}
+.unsorted (@a) when (lightness(@a) >= 50%) {
+	background-image: @unsortedBlack;
+}
+.unsorted (@a) when (lightness(@a) < 50%) {
+	background-image: @unsortedWhite;
+}
+.sortAsc (@a) when (lightness(@a) >= 50%) {
+	background-image: @sortAscBlack;
+}
+.sortAsc (@a) when (lightness(@a) < 50%) {
+	background-image: @sortAscWhite;
+}
+.sortDesc (@a) when (lightness(@a) >= 50%) {
+	background-image: @sortDescBlack;
+}
+.sortDesc (@a) when (lightness(@a) < 50%) {
+	background-image: @sortDescWhite;
+}
+
+/* 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: 0;
+
+	th, td {
+		border: 0;
+	}
+
+	/* style th's outside of the thead */
+	th, thead td {
+		font: @tableHeaderFont;
+		font-weight: bold;
+		background-color: @headerBackground;
+		color: @headerTextColor;
+		.headerText(@headerBackground);
+		border-collapse: collapse;
+		padding: @overallPadding;
+	}
+
+  .dark-row th, .dark-row td {
+    background-color: darken( @headerBackground, 10% );
+  }
+  
+	tbody td, tfoot th, tfoot td {
+		padding: @overallPadding;
+		vertical-align: top;
+	}
+
+	/* style header */
+	.tablesorter-header {
+		.unsorted(@headerBackground);
+		background-repeat: no-repeat;
+		background-position: @arrowPosition;
+		cursor: pointer;
+		white-space: normal;
+	}
+
+	.tablesorter-header-inner {
+		padding: @headerPadding;
+	}
+
+	.tablesorter-header.sorter-false {
+		background-image: none;
+		cursor: default;
+		padding: @overallPadding;
+	}
+
+	.tablesorter-headerAsc {
+		.sortAsc(@headerBackground);
+	}
+
+	.tablesorter-headerDesc {
+		.sortDesc(@headerBackground);
+	}
+
+	/* tfoot */
+	tfoot .tablesorter-headerAsc,
+	tfoot .tablesorter-headerDesc {
+		/* 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;
+	}
+
+	/* pager */
+	div.tablesorter-pager {
+		button {
+			background-color: lighten( @headerBackground, 7% );
+			color: @headerTextColor;
+			border: lighten( @headerBackground, 15% ) 1px solid;
+			cursor: pointer;
+		}
+		button:hover {
+			background-color: lighten( @headerBackground, 15% );
+		}
+	}
+
+	/* 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;
+	}
+
+	/* caption (non-theme matching) */
+	caption {
+		background: @captionBackground ;
+	}
+
+	/* filter widget */
+	.tablesorter-filter-row input,
+	.tablesorter-filter-row select{
+		width: 98%;
+		height: auto;
+		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);
+	}
+	/* rows hidden by filtering (needed for child rows) */
+	.filtered {
+		display: none;
+	}
+
+	/* ajax error row */
+	.tablesorter-errorRow td {
+		text-align: center;
+		cursor: pointer;
+		background-color: @errorBackground;
+	}
+
+}
--- a/css/psd/metro-style.psd
+++ b/css/psd/metro-style.psd
--- a/css/theme.bootstrap.css
+++ b/css/theme.bootstrap.css
@ -37,10 +37,18 @@
 	line-height: 14px;
 	display: inline-block;
 }
+
+/* black unsorted icon */
 .tablesorter-bootstrap .bootstrap-icon-unsorted {
-	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAOCAYAAAD5YeaVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWVJREFUeNqUUL9Lw2AUTGP8mqGlpBQkNeCSRcckEBcHq1jImMElToKuDvpHFMGhU0BQcHBwLji6CE1B4uB/INQsDi4d2jQ/fPeZxo764OV6915f7lLJ81xot9tCURXqdVEUr7IsO6ffH9Q5BlEUCaLwWxWqTcbYnaIoh0Dw4gAvcWlxq1qt9hqNxg6hUGAP+uIPUrGs0qXLer2+v/pTX6QpxLtkc2U2m53ACb8sSdIDXerSEms2m6+DweAICA4d89KGbduf9MpEVdXQ9/2LVqv1CASHjjn3iq/x1xKFfxQPqGnada1W86bT6SiO42OS3qk3KPStLMvbk8nkfjwen/LLuq6blFymMB0KdUPSGhAcOualjX6/f0bCiC7NaWGPQr0BwaFjzn0gYJqmLAiCA8/zni3LmhuGkQPBoWPOPwQeaPIqD4fDruu6L6Zp5kBw6IudchmdJAkLw3DXcZwnIPjy/FuAAQCiqqWWCAFKcwAAAABJRU5ErkJggg==);
+	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAOCAMAAADOvxanAAAAVFBMVEUAAABCQkJZWVkZGRnJyckgICAZGRkZGRn8/PweHh4dHR0aGhoaGhpUVFQbGxvQ0NDc3NxMTExSUlIbGxvr6+s4ODhKSkogICAtLS00NDQzMzMnJydSEPrQAAAAGHRSTlMA1ssZRLgdAQbDyisqsZo8QdXUq0r9xPepSRwiAAAAX0lEQVQI13XHSQKAIAwEwQAKxn13Ev7/T2Pu9qmarJKPXIicI4PH4hxaKNrhm2S8bJK5h4YzKHrzJNtK6yYT/TdXzpS5zuYg4MSQYF6i4IHExdw1UVRi05HPrrvT53a+qyMFC9t04gcAAAAASUVORK5CYII=);
 }

+/* white unsorted icon
+.tablesorter-bootstrap .bootstrap-icon-unsorted {
+	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAOBAMAAAALT/umAAAAKlBMVEUAAAD///////////////////////////////////////////////////+Gu8ovAAAADXRSTlMA4EXKBtQqvR0+sxmalc142gAAAFdJREFUCNdjYGDoamAAAjZbMxCVfvd6AgMDd+3du9UMDKx3hWSvMjBwXZww8RYDGuC53NB8h4GB8a617UUGBs7Yu3cjGRhYVO9eVQFKOskKOQApFmUgBwBZ+xXRTttNdAAAAABJRU5ErkJggg==);
+}
+ */
+
 /* since bootstrap (table-striped) uses nth-child(), we just use this to add a zebra stripe color */
 .tablesorter-bootstrap > tbody > tr.odd > td,
 .tablesorter-bootstrap > tbody > tr.tablesorter-hasChildRow.odd:hover ~ tr.tablesorter-hasChildRow.odd ~ .tablesorter-childRow.odd > td {
@ -62,8 +70,6 @@
 	background-image: url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=');
 	background-position: center center !important;
 	background-repeat: no-repeat !important;
-	position: absolute;
-	z-index: 1000;
 }

 /* caption */
--- a/css/theme.less
+++ b/css/theme.less
@ -1,10 +1,13 @@
-/* LESS Theme by Rob Garrison
+/* Tablesorter Custom 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
+Test out these custom less files live
+ Basic Theme : http://codepen.io/Mottie/pen/eqBbn
+ Bootstrap   : http://codepen.io/Mottie/pen/Ltzpi
+ Metro Style : http://codepen.io/Mottie/pen/gCslk

 */

@ -71,12 +74,12 @@
 }

 /* 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% );
+@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 {
@ -87,56 +90,46 @@
 }

 /*** Arrows ***/
-@arrowPosition         : center right;
+@arrowPosition : 95% center;

 /* black */
-@unsortedBlack         : url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
-@sortAscBlack          : url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
-@sortDescBlack         : url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
-
-@filterIconBlack       : url(data:image/gif;base64,R0lGODlhCgAMALMAAEpKSklJSUNDQ0FBQUBAQDk5OTc3NzY2NiQkJP///wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAAkALAAAAAAKAAwAAAQnEMlJk72YamQE+KBgJEcAAsFxFWeBJcRHvInxjfRHW/oODLsEEBMBADs=);
+@unsortedBlack : url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
+@sortAscBlack  : url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
+@sortDescBlack : url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);

 /* white */
-@unsortedWhite         : url(data:image/gif;base64,R0lGODlhFQAJAIAAAP///////yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
-@sortAscWhite          : url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
-@sortDescWhite         : url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
-
-@filterIconWhite       : url(data:image/gif;base64,R0lGODlhCgANALMAAP////r6+u7u7ufn5+Hh4d3d3cXFxb+/v76+vru7u7m5uf///wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAA0AAAQpUMhJl72YanEG+OBwLEkAAkFyGaeBLcVXvAvyIfTy5TrAAwQeQcEjYiIAOw==);
+@unsortedWhite : url(data:image/gif;base64,R0lGODlhFQAJAIAAAP///////yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
+@sortAscWhite  : url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
+@sortDescWhite : url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);

 /* automatically choose the correct arrow/text color */
+.headerText (@a) when (lightness(@a) >= 50%) {
+	color: @headerTextColor;
+}
+.headerText (@a) when (lightness(@a) < 50%) {
+	color: lighten(@headerTextColor, 90%);
+}
 .unsorted (@a) when (lightness(@a) >= 50%) {
 	background-image: @unsortedBlack;
-	color: @headerTextColor;
 }
 .unsorted (@a) when (lightness(@a) < 50%) {
 	background-image: @unsortedWhite;
-	color: lighten(@headerTextColor, 90%);
 }
 .sortAsc (@a) when (lightness(@a) >= 50%) {
 	background-image: @sortAscBlack;
-	color: @headerTextColor;
 }
 .sortAsc (@a) when (lightness(@a) < 50%) {
 	background-image: @sortAscWhite;
-	color: lighten(@headerTextColor, 90%);
 }
 .sortDesc (@a) when (lightness(@a) >= 50%) {
 	background-image: @sortDescBlack;
-	color: @headerTextColor;
 }
 .sortDesc (@a) when (lightness(@a) < 50%) {
 	background-image: @sortDescWhite;
-	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
+   or just replace (!".@{theme}") with the contents of @theme
 */
 .@{theme} {
 	font: @tableBodyFont;
@ -157,8 +150,8 @@
 	th, thead td {
 		font: @tableHeaderFont;
 		font-weight: bold;
-		color: @headerTextColor;
 		background-color: @headerBackground;
+		.headerText(@headerBackground);
 		border-collapse: collapse;
 		padding: @overallPadding;
 	}
@ -227,8 +220,8 @@
 	}

 	/* hovered row colors
-	 you'll need to add additional lines for
-	 rows with more than 2 child rows
+	   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,
@ -249,8 +242,6 @@
 		background-image: @processingIcon;
 		background-position: center center;
 		background-repeat: no-repeat;
-		position: absolute;
-		z-index: 1000;
 	}

 	/* Column Widget - column sort colors */
--- a/css/theme.metro-dark.css
+++ b/css/theme.metro-dark.css
@ -0,0 +1,192 @@
+/*************
+Metro Dark Theme
+*************/
+/* overall */
+.tablesorter-metro-dark {
+	width: 100%;
+	font: 12px/18px 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
+	color: #000;
+	background-color: #333;
+	border-spacing: 0;
+	margin: 10px 0 15px;
+	text-align: left;
+}
+
+.tablesorter-metro-dark tr.dark-row th, .tablesorter-metro-dark tr.dark-row td {
+	background-color: #222;
+	color: #fff;
+	padding: 2px;
+	text-align: left;
+	font-size: 14px;
+}
+
+/* header/footer */
+.tablesorter-metro-dark caption,
+.tablesorter-metro-dark th,
+.tablesorter-metro-dark thead td,
+.tablesorter-metro-dark tfoot th,
+.tablesorter-metro-dark tfoot td {
+	font-weight: 300;
+	font-size: 15px;
+	color: #ddd;
+	background-color: #333;
+	padding: 4px;
+}
+
+.tablesorter-metro-dark .header,
+.tablesorter-metro-dark .tablesorter-header {
+	background-image: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQBAMAAADQT4M0AAAAGFBMVEUAAADu7u7u7u7u7u7u7u7u7u7u7u7u7u5jNePWAAAACHRSTlMAMxIHKwEgMWD59H4AAABSSURBVAjXY2BgYFJgAAHzYhDJ6igSAKTYBAUTgJSioKAQAwNzoaCguAFDiCAQuDIkgigxBgiA8cJAVCpQt6AgSL+JoKAzA0gjUBsQqBcBCYhFAAE/CV4zeSzxAAAAAElFTkSuQmCC);
+	background-position: center right;
+	background-repeat: no-repeat;
+	cursor: pointer;
+	white-space: normal;
+}
+.tablesorter-metro-dark .tablesorter-header-inner {
+	padding: 0 18px 0 4px;
+}
+.tablesorter-metro-dark thead .headerSortUp,
+.tablesorter-metro-dark thead .tablesorter-headerSortUp,
+.tablesorter-metro-dark thead .tablesorter-headerAsc {
+	background-image: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQBAMAAADQT4M0AAAAIVBMVEUAAADu7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u5meJAOAAAACnRSTlMAMwsqXt+gIBUGxGoDMAAAAFlJREFUCNctzC0SQAAUReEzGNQ3AlHRiSRZFCVZYgeswRL8hLdK7834wj3tAlGP6y7fYHpKS6w6WwbVG0I1NZVnZPG8/DYxOYlnhUYkA06R1s9ESsxR4NIdPhkPFDFYuEnMAAAAAElFTkSuQmCC);
+}
+.tablesorter-metro-dark thead .headerSortDown,
+.tablesorter-metro-dark thead .tablesorter-headerSortDown,
+.tablesorter-metro-dark thead .tablesorter-headerDesc {
+	background-image: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQBAMAAADQT4M0AAAALVBMVEUAAADu7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7i0NViAAAADnRSTlMAMiweCQITTvDctZZqaTlM310AAABcSURBVAjXY2BgYEtgAAFHERDJqigUAKSYBQUNgFSioKAYAwOLIBA4MASBKFUGQxAlzAAF+94BwWuGKBC1lIFl3rt3Lx0YGCzevWsGSjK9e6cAUlT3HKyW9wADAwDRrBiDy6bKzwAAAABJRU5ErkJggg==);
+}
+.tablesorter-metro-dark thead .sorter-false {
+	background-image: none;
+	cursor: default;
+	padding: 4px;
+}
+
+/* tbody */
+.tablesorter-metro-dark td {
+	background-color: #fff;
+	padding: 4px;
+	vertical-align: top;
+}
+
+/* hovered row colors */
+.tablesorter-metro-dark tbody > tr:hover > td,
+.tablesorter-metro-dark tbody > tr.even:hover > td,
+.tablesorter-metro-dark tbody > tr.odd:hover > td {
+	background: #bbb;
+	color: #000;
+}
+
+/* table processing indicator */
+.tablesorter-metro-dark .tablesorter-processing {
+	background-position: center center !important;
+	background-repeat: no-repeat !important;
+	/* background-image: url(../addons/pager/icons/loading.gif) !important; */
+	background-image: url(data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=) !important;
+}
+
+/* pager */
+.tablesorter-metro-dark .tablesorter-pager button {
+	background-color: #444;
+	color: #eee;
+	border: #555 1px solid;
+	cursor: pointer;
+}
+.tablesorter-metro-dark .tablesorter-pager button:hover {
+	background-color: #555;
+}
+
+/* Zebra Widget - row alternating colors */
+.tablesorter-metro-dark tr.odd td {
+	background-color: #eee;
+}
+.tablesorter-metro-dark tr.even td {
+	background-color: #fff;
+}
+
+/* Column Widget - column sort colors */
+.tablesorter-metro-dark tr.odd td.primary {
+	background-color: #bfbfbf;
+}
+.tablesorter-metro-dark td.primary,
+.tablesorter-metro-dark tr.even td.primary {
+	background-color: #d9d9d9;
+}
+.tablesorter-metro-dark tr.odd td.secondary {
+	background-color: #d9d9d9;
+}
+.tablesorter-metro-dark td.secondary,
+.tablesorter-metro-dark tr.even td.secondary {
+	background-color: #e6e6e6;
+}
+.tablesorter-metro-dark tr.odd td.tertiary {
+	background-color: #e6e6e6;
+}
+.tablesorter-metro-dark td.tertiary,
+.tablesorter-metro-dark tr.even td.tertiary {
+	background-color: #f2f2f2;
+}
+
+/* filter widget */
+.tablesorter-metro-dark .tablesorter-filter-row td {
+	background: #eee;
+	line-height: normal;
+	text-align: center; /* center the input */
+	-webkit-transition: line-height 0.1s ease;
+	-moz-transition: line-height 0.1s ease;
+	-o-transition: line-height 0.1s ease;
+	transition: line-height 0.1s ease;
+}
+/* optional disabled input styling */
+.tablesorter-metro-dark .tablesorter-filter-row .disabled {
+	opacity: 0.5;
+	filter: alpha(opacity=50);
+	cursor: not-allowed;
+}
+/* hidden filter row */
+.tablesorter-metro-dark .tablesorter-filter-row.hideme td {
+	/*** *********************************************** ***/
+	/*** change this padding to modify the thickness     ***/
+	/*** of the closed filter row (height = padding x 2) ***/
+	padding: 2px;
+	/*** *********************************************** ***/
+	margin: 0;
+	line-height: 0;
+	cursor: pointer;
+}
+.tablesorter-metro-dark .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);
+}
+/* filters */
+.tablesorter-metro-dark .tablesorter-filter {
+	width: 95%;
+	height: auto;
+	margin: 4px;
+	padding: 4px;
+	background-color: #fff;
+	border: 1px solid #bbb;
+	color: #333;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	-webkit-transition: height 0.1s ease;
+	-moz-transition: height 0.1s ease;
+	-o-transition: height 0.1s ease;
+	transition: height 0.1s ease;
+}
+/* rows hidden by filtering (needed for child rows) */
+.tablesorter .filtered {
+	display: none;
+}
+
+/* ajax error row */
+.tablesorter .tablesorter-errorRow td {
+	text-align: center;
+	cursor: pointer;
+	background-color: #e6bf99;
+}
--- a/docs/index.html
+++ b/docs/index.html
@ -444,7 +444,13 @@
 		<li><a href="http://jsfiddle.net/Mottie/4mVfu/">tablesorter basic demo</a> (includes widgets)</li>
 		<li><a href="http://jsfiddle.net/Mottie/abkNM/325/">tablesorter basic demo using jQuery UI theme</a></li>
 		<li><a href="http://jsfiddle.net/Mottie/4mVfu/1/">tablesorter basic demo with pager plugin</a></li>
-		<li><a href="http://codepen.io/Mottie/pen/eqBbn">tablesorter LESS theme; modify the colors dynamically in this LESS theme demo!</a></li>
+		<li>LESS themes (modify the colors in these demos dynamically):
+			<ul>
+				<li><a href="http://codepen.io/Mottie/pen/eqBbn">tablesorter LESS theme</a></li>
+				<li><a href="http://codepen.io/Mottie/pen/Ltzpi">tablesorter Bootstrap LESS theme</a> (<span class="version">v2.16.4</span>)</li>
+				<li><a href="http://codepen.io/Mottie/pen/gCslk">tablesorter Metro LESS theme</a> (<span class="version">v2.16.4</span>)</li>
+			</ul>
+		</li>
 		<li>Check out the <a href="https://github.com/Mottie/tablesorter/wiki">home wiki page</a> <span class="label label-info">more demos</span>!</li>
 	</ul>

@ -1311,7 +1317,7 @@ From the example function above, you'll end up with something similar to this HT
 				<td><a href="#" class="permalink">theme</a></td>
 				<td>String</td>
 				<td>&quot;default&quot;</td>
-				<td>This option will add a theme css class name to the table <code>&quot;tablesorter-{theme}&quot;</code> for styling (v2.4).
+				<td>This option will add a theme css class name to the table <code>&quot;tablesorter-{theme}&quot;</code> for styling (v2.4; <span class="version updated">v2.16.4</span>).
 					<div class="collapsible">
 						<br>When changing this theme option, make sure that the appropriate css theme file has also been loaded. Included theme files include:
 						<a href="themes.html" target="_blank" title="open themes in a new window">see all themes</a><br>
--- a/docs/themes.html
+++ b/docs/themes.html
@ -34,6 +34,7 @@
 	<link href="../css/theme.green.css" rel="stylesheet">
 	<link href="../css/theme.grey.css" rel="stylesheet">
 	<link href="../css/theme.ice.css" rel="stylesheet">
+	<link href="../css/theme.metro-dark.css" rel="stylesheet">

 	<!-- Tablesorter: required -->
 	<script src="../js/jquery.tablesorter.js"></script>
@ -224,6 +225,27 @@ $(function() {
 		</table>
 	</div>

+	<div class="minitable">
+		<h3>Metro Dark</h3>
+		<table class="tablesorter-metro-dark demo">
+			<thead>
+				<tr class="dark-row"><th class="sorter-false" colspan="4">Title</th></tr>
+				<tr><th>A</th><th>B</th><th>C</th><th>D</th></tr>
+			</thead>
+			<tfoot>
+				<tr><th>A</th><th>B</th><th>C</th><th>D</th></tr>
+				<tr class="dark-row"><th colspan="4">&nbsp;</th></tr>
+			</tfoot>
+			<tbody>
+				<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
+				<tr><td>14</td><td>15</td><td>16</td><td>5</td></tr>
+				<tr><td>13</td><td>20</td><td>17</td><td>6</td></tr>
+				<tr><td>12</td><td>19</td><td>18</td><td>7</td></tr>
+				<tr><td>11</td><td>10</td><td>9</td><td>8</td></tr>
+			</tbody>
+		</table>
+	</div>
+
 </div>

 </body>