/* 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/ */ /*** theme ***/ @theme : 'table.tablesorter-custom'; /*** 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 : 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-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); } }