/* LESS Theme by Rob Garrison To create your own theme, modify the code below and run it through a LESS compiler, like this one: http://leafo.net/lessphp/editor.html or download less.js from http://lesscss.org/ */ /*** fonts ***/ @tableHeaderFont : 11px 'trebuchet ms', verdana, arial; @tableBodyFont : 11px 'trebuchet ms', verdana, arial; /*** color definitions ***/ /* for best results, only change the hue (210), leave the saturation and luminosity alone pick the color from here: http://hslpicker.com/#99CCE6 */ @headerBackground : hsl(120, 60%, 75%); @borderAndBackground : #cdcdcd; @overallBorder : @borderAndBackground 1px solid; @headerTextColor : #000; @bodyBackground : #fff; @bodyTextColor : #000; @headerSortUp : desaturate(@headerBackground, 10%); @headerSortDown : darken(@headerSortUp, 5%); @filterCellBackground : #eee; @overallPadding : 4px; /* 20px should be slightly wider than the icon width to avoid overlap */ @headerPadding : 4px 20px 4px 4px; /* url(icons/loading.gif); */ @processingIcon : url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs='); /* zebra striping */ .allRows { background: @bodyBackground; color: @bodyTextColor; } .evenRows { background: lighten(@headerBackground, 40%); color: @bodyTextColor; } .oddRows { background: lighten(@headerBackground, 20%); } /* hovered rows */ .oddHovered { background: desaturate(@headerBackground, 60%); color: @bodyTextColor; } .evenHovered { background: lighten( desaturate(@headerBackground, 60%), 10% ); color: @bodyTextColor; } /* Columns widget */ @primaryOdd : spin(@headerBackground, 10); /* saturate( darken( desaturate(@headerBackground, 10%), 10% ), 30%); */ @primaryEven : lighten( @primaryOdd, 10% ); @secondaryOdd : @primaryEven; @secondaryEven : lighten( @primaryEven, 5% ); @tertiaryOdd : @secondaryEven; @tertiaryEven : lighten( @secondaryEven, 5% ); /* black */ @unsortedBlack : url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==); @sortUpBlack : url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7); @sortDownBlack : url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7); @filterIconBlack : url(data:image/gif;base64,R0lGODlhCgAMALMAAEpKSklJSUNDQ0FBQUBAQDk5OTc3NzY2NiQkJP///wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAAkALAAAAAAKAAwAAAQnEMlJk72YamQE+KBgJEcAAsFxFWeBJcRHvInxjfRHW/oODLsEEBMBADs=); /* white */ @unsortedWhite : url(data:image/gif;base64,R0lGODlhFQAJAIAAAP///////yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==); @sortUpWhite : url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7); @sortDownWhite : url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7); @filterIconWhite : url(data:image/gif;base64,R0lGODlhCgANALMAAP////r6+u7u7ufn5+Hh4d3d3cXFxb+/v76+vru7u7m5uf///wAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAKAA0AAAQpUMhJl72YanEG+OBwLEkAAkFyGaeBLcVXvAvyIfTy5TrAAwQeQcEjYiIAOw==); /*** Arrows ***/ .unsorted (@a) when (lightness(@a) >= 50%) { background-image: @unsortedBlack; color: @headerTextColor; } .unsorted (@a) when (lightness(@a) < 50%) { background-image: @unsortedWhite; color: lighten(@headerTextColor, 90%); } .sortUp (@a) when (lightness(@a) >= 50%) { background-image: @sortUpBlack; color: @headerTextColor; } .sortUp (@a) when (lightness(@a) < 50%) { background-image: @sortUpWhite; color: lighten(@headerTextColor, 90%); } .sortDown (@a) when (lightness(@a) >= 50%) { background-image: @sortDownBlack; color: @headerTextColor; } .sortDown (@a) when (lightness(@a) < 50%) { background-image: @sortDownWhite; color: lighten(@headerTextColor, 90%); } .filterIcon (@a) when (lightness(@a) >= 50%) { background-image: @filterIconBlack; } .filterIcon (@a) when (lightness(@a) < 50%) { background-image: @filterIconWhite; } .tablesorter { font: @tableBodyFont; background-color: @borderAndBackground; margin: 10px 0 15px; width: 100%; text-align: left; border-spacing: 0; th, td { border: @overallBorder; } /* style th's outside of the thead */ th, thead td { background-color: @headerBackground; color: @headerTextColor; border-collapse: collapse; font: @tableHeaderFont; font-weight: bold; padding: @overallPadding; } /* style header */ .tablesorter-header { .unsorted(@headerBackground); background-repeat: no-repeat; background-position: center right; padding: @headerPadding; cursor: pointer; } .tablesorter-headerSortUp { background-color: @headerSortUp; .sortUp(@headerBackground); } .tablesorter-headerSortDown { background-color: @headerSortDown; .sortDown(@headerBackground); } /* Column Widget - column sort colors */ tr.odd td.primary { background-color: @primaryOdd; } td.primary, tr.even td.primary { background-color: @primaryEven; } tr.odd td.secondary { background-color: @secondaryOdd; } td.secondary, tr.even td.secondary { background-color: @secondaryEven; } tr.odd td.tertiary { background-color: @tertiaryOdd; } td.tertiary, tr.even td.tertiary { background-color: @tertiaryEven; } /* optional disabled input styling */ .disabled { opacity: 0.5; filter: alpha(opacity=50); cursor: not-allowed; } /* filter widget */ .tablesorter-filter-row input, .tablesorter-filter-row select{ width: 95%; height: inherit; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .tablesorter-filter-row td { text-align: center; background: @filterCellBackground; } /* body */ tbody { td { .allRows; padding: @overallPadding; vertical-align: top; } /* Zebra Widget - row alternating colors */ tr.odd td { .oddRows; } tr.even td { .evenRows; } /* hovered row colors you'll need to add additional lines for rows with more than 2 child rows */ tr:hover td, tr.even:hover td, tr.even:hover + tr.tablesorter-child-row td, tr.even:hover + tr.tablesorter-child-row + tr.tablesorter-child-row td { .evenHovered; } tr.odd:hover td, tr.odd:hover + tr.tablesorter-child-row td, tr.odd:hover + tr.tablesorter-child-row + tr.tablesorter-child-row 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; } }