diff --git a/css/bootstrap.less b/css/bootstrap.less new file mode 100644 index 00000000..c8a56ab8 --- /dev/null +++ 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 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; + } + +} diff --git a/css/images/bootstrap-black-unsorted.png b/css/images/bootstrap-black-unsorted.png new file mode 100644 index 00000000..4e161a65 Binary files /dev/null and b/css/images/bootstrap-black-unsorted.png differ diff --git a/css/images/bootstrap-white-unsorted.png b/css/images/bootstrap-white-unsorted.png new file mode 100644 index 00000000..fb227a15 Binary files /dev/null and b/css/images/bootstrap-white-unsorted.png differ diff --git a/css/images/metro-black-asc.png b/css/images/metro-black-asc.png new file mode 100644 index 00000000..f7a781be Binary files /dev/null and b/css/images/metro-black-asc.png differ diff --git a/css/images/metro-black-desc.png b/css/images/metro-black-desc.png new file mode 100644 index 00000000..ef5f48e0 Binary files /dev/null and b/css/images/metro-black-desc.png differ diff --git a/css/images/metro-loading.gif b/css/images/metro-loading.gif new file mode 100644 index 00000000..ae274c6c Binary files /dev/null and b/css/images/metro-loading.gif differ diff --git a/css/images/metro-unsorted.png b/css/images/metro-unsorted.png new file mode 100644 index 00000000..653b0834 Binary files /dev/null and b/css/images/metro-unsorted.png differ diff --git a/css/images/metro-white-asc.png b/css/images/metro-white-asc.png new file mode 100644 index 00000000..63327188 Binary files /dev/null and b/css/images/metro-white-asc.png differ diff --git a/css/images/metro-white-desc.png b/css/images/metro-white-desc.png new file mode 100644 index 00000000..ca7c363e Binary files /dev/null and b/css/images/metro-white-desc.png differ diff --git a/css/metro.less b/css/metro.less new file mode 100644 index 00000000..55a30010 --- /dev/null +++ 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; + } + +} diff --git a/css/psd/metro-style.psd b/css/psd/metro-style.psd new file mode 100644 index 00000000..1fe712ab Binary files /dev/null and b/css/psd/metro-style.psd differ diff --git a/css/theme.bootstrap.css b/css/theme.bootstrap.css index cab2b0d1..8de3d716 100644 --- 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 */ diff --git a/css/theme.less b/css/theme.less index e4c2a164..a116e5f0 100644 --- 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; } @@ -200,7 +193,7 @@ background-image: none; } - /* optional disabled input styling */ + /* optional disabled input styling */ .disabled { opacity: 0.5; filter: alpha(opacity=50); @@ -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 */ diff --git a/css/theme.metro-dark.css b/css/theme.metro-dark.css new file mode 100644 index 00000000..a2c8ec19 --- /dev/null +++ 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; +} diff --git a/docs/index.html b/docs/index.html index 1e018551..a8a4160c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -444,7 +444,13 @@
  • tablesorter basic demo (includes widgets)
  • tablesorter basic demo using jQuery UI theme
  • tablesorter basic demo with pager plugin
    • -
  • tablesorter LESS theme; modify the colors dynamically in this LESS theme demo!
    • +
  • LESS themes (modify the colors in these demos dynamically): + +
  • Check out the home wiki page more demos!
    • @@ -1311,7 +1317,7 @@ From the example function above, you'll end up with something similar to this HT String "default" - This option will add a theme css class name to the table "tablesorter-{theme}" for styling (v2.4). + This option will add a theme css class name to the table "tablesorter-{theme}" for styling (v2.4; v2.16.4).

    When changing this theme option, make sure that the appropriate css theme file has also been loaded. Included theme files include: see all themes
    diff --git a/docs/themes.html b/docs/themes.html index 8db9e109..98ed69d3 100644 --- a/docs/themes.html +++ b/docs/themes.html @@ -34,6 +34,7 @@ + @@ -224,6 +225,27 @@ $(function() {
    +
    +

    Metro Dark

    + + + + + + + + + + + + + + + + +
    Title
    ABCD
    ABCD
     
    1234
    1415165
    1320176
    1219187
    111098
    +
    +