diff --git a/media/css/jquery.dataTables.css b/media/css/jquery.dataTables.css index 99254123..64ebce3b 100644 --- a/media/css/jquery.dataTables.css +++ b/media/css/jquery.dataTables.css @@ -1,256 +1,231 @@ +/* + * THIS IS A GENREATED FILE FROM jquery.dataTables.scss + */ /* - * Table + * Table styles */ table.dataTable { - margin: 0 auto; - clear: both; - width: 100%; - border-collapse: separate; -} - -table.dataTable thead th, -table.dataTable thead td { - padding: 10px 18px; - border-bottom: 1px solid #111; -} - -table.dataTable tfoot th, -table.dataTable tfoot td { - padding: 10px 18px; - border-top: 1px solid #111; -} - -table.dataTable thead th, -table.dataTable tfoot th { - font-weight: bold; -} - -/* Body styles */ -table.dataTable tbody th, -table.dataTable tbody td { - padding: 8px 10px; -} - -table.dataTable tbody tr:first-child th, -table.dataTable tbody tr:first-child td { - border-top: none; -} - -table.dataTable td.center, -table.dataTable td.dataTables_empty { - text-align: center; -} - -/* Border classes - add "row-border" or "cell-border" class to the table to activate */ -table.dataTable.row-border tbody th, -table.dataTable.row-border tbody td { - padding: 8px 10px; - border-top: 1px solid #ddd; -} - -table.dataTable.cell-border tbody th, -table.dataTable.cell-border tbody td { - padding: 8px 10px; - border-top: 1px solid #ddd; - border-right: 1px solid #ddd; -} - -table.dataTable tbody>:last-child th, -table.dataTable tbody tr:last-child td { - border-bottom: none; -} - -table.dataTable.cell-border tbody tr th:first-child, -table.dataTable.cell-border tbody tr td:first-child { - border-left: 1px solid #ddd; -} - - -/* Stripe classes - add "stripe" class to the table to activate */ -table.dataTable.stripe tbody tr.odd { background-color: #f9f9f9; } -table.dataTable.stripe tbody tr.even { background-color: white; } - - -/* Hover classes - add "hover" class to the table to activate */ -table.dataTable.hover tbody tr:hover, -table.dataTable.hover tbody tr.odd:hover, -table.dataTable.hover tbody tr.even:hover { - background-color: #f5f5f5; -} - -/* Sort column highlighting */ -table.dataTable.stripe.sort-column tbody tr.odd td.sorting_1 { background-color: #f1f1f1; } -table.dataTable.stripe.sort-column tbody tr.odd td.sorting_2 { background-color: #f3f3f3; } -table.dataTable.stripe.sort-column tbody tr.odd td.sorting_3 { background-color: #f5f5f5; } - -table.dataTable.stripe.sort-column tbody tr.even td.sorting_1 { background-color: #fafafa; } -table.dataTable.stripe.sort-column tbody tr.even td.sorting_2 { background-color: #fcfcfc; } -table.dataTable.stripe.sort-column tbody tr.even td.sorting_3 { background-color: #fefefe; } - -table.dataTable.hover.sort-column tbody tr:hover td.sorting_1, -table.dataTable.hover.sort-column tbody tr.odd:hover td.sorting_1, -table.dataTable.hover.sort-column tbody tr.even:hover td.sorting_1 { - background-color: #eaeaea; -} - -table.dataTable.hover.sort-column tbody tr:hover td.sorting_2, -table.dataTable.hover.sort-column tbody tr.odd:hover td.sorting_2, -table.dataTable.hover.sort-column tbody tr.even:hover td.sorting_2 { - background-color: #eaeaea; -} - -table.dataTable.hover.sort-column tbody tr:hover td.sorting_3, -table.dataTable.hover.sort-column tbody tr.odd:hover td.sorting_3, -table.dataTable.hover.sort-column tbody tr.even:hover td.sorting_3 { - background-color: #eaeaea; -} - + width: 100%; + margin: 0 auto; + clear: both; + border-collapse: separate; + /* + * Header and footer styles + */ + /* + * Body styles + */ } + table.dataTable thead th, + table.dataTable thead td, + table.dataTable tfoot th, + table.dataTable tfoot td { + padding: 10px 18px; } + table.dataTable thead th, + table.dataTable tfoot th { + font-weight: bold; } + table.dataTable thead th, + table.dataTable thead td { + border-bottom: 1px solid #111111; } + table.dataTable thead th:active, + table.dataTable thead td:active { + outline: none; } + table.dataTable tfoot th, + table.dataTable tfoot td { + border-top: 1px solid #111111; } + table.dataTable thead .sorting_asc, + table.dataTable thead .sorting_desc, + table.dataTable thead .sorting { + cursor: pointer; + *cursor: hand; } + table.dataTable thead .sorting { + background: url("../images/sort_both.png") no-repeat center right; } + table.dataTable thead .sorting_asc { + background: url("../images/sort_asc.png") no-repeat center right; } + table.dataTable thead .sorting_desc { + background: url("../images/sort_desc.png") no-repeat center right; } + table.dataTable thead .sorting_asc_disabled { + background: url("../images/sort_asc_disabled.png") no-repeat center right; } + table.dataTable thead .sorting_desc_disabled { + background: url("../images/sort_desc_disabled.png") no-repeat center right; } + table.dataTable tbody th, + table.dataTable tbody td { + padding: 8px 10px; } + table.dataTable th.center, + table.dataTable td.center, + table.dataTable td.dataTables_empty { + text-align: center; } + table.dataTable th.right, + table.dataTable td.right { + text-align: right; } + table.dataTable.row-border tbody th, table.dataTable.row-border tbody td { + border-top: 1px solid #dddddd; } + table.dataTable.row-border tbody tr:first-child th, + table.dataTable.row-border tbody tr:first-child td { + border-top: none; } + table.dataTable.cell-border tbody th, table.dataTable.cell-border tbody td { + border-top: 1px solid #dddddd; + border-right: 1px solid #dddddd; } + table.dataTable.cell-border tbody tr th:first-child, + table.dataTable.cell-border tbody tr td:first-child { + border-left: 1px solid #dddddd; } + table.dataTable.cell-border tbody tr:first-child th, + table.dataTable.cell-border tbody tr:first-child td, + table.dataTable.cell-border tbody tr:last-child th, + table.dataTable.cell-border tbody tr:last-child td { + border-top: none; } + table.dataTable.stripe tr.odd { + background-color: #f9f9f9; } + table.dataTable.stripe tr.even { + background-color: white; } + table.dataTable.hover tbody tr:hover, + table.dataTable.hover tbody tr.odd:hover, + table.dataTable.hover tbody tr.even:hover { + background-color: whitesmoke; } + table.dataTable.sort-column tbody tr > .sorting_1, + table.dataTable.sort-column tbody tr > .sorting_2, + table.dataTable.sort-column tbody tr > .sorting_3 { + background-color: #f9f9f9; } + table.dataTable.sort-column.stripe tbody tr.odd > .sorting_1 { + background-color: #f1f1f1; } + table.dataTable.sort-column.stripe tbody tr.odd > .sorting_2 { + background-color: #f3f3f3; } + table.dataTable.sort-column.stripe tbody tr.odd > .sorting_3 { + background-color: whitesmoke; } + table.dataTable.sort-column.stripe tbody tr.even > .sorting_1 { + background-color: #f9f9f9; } + table.dataTable.sort-column.stripe tbody tr.even > .sorting_2 { + background-color: #fbfbfb; } + table.dataTable.sort-column.stripe tbody tr.even > .sorting_3 { + background-color: #fdfdfd; } + table.dataTable.sort-column.hover tbody tr:hover > .sorting_1, + table.dataTable.sort-column.hover tbody tr.odd:hover > .sorting_1, + table.dataTable.sort-column.hover tbody tr.even:hover > .sorting_1 { + background-color: #eaeaea; } + table.dataTable.sort-column.hover tbody tr:hover > .sorting_2, + table.dataTable.sort-column.hover tbody tr.odd:hover > .sorting_2, + table.dataTable.sort-column.hover tbody tr.even:hover > .sorting_2 { + background-color: #ebebeb; } + table.dataTable.sort-column.hover tbody tr:hover > .sorting_3, + table.dataTable.sort-column.hover tbody tr.odd:hover > .sorting_3, + table.dataTable.sort-column.hover tbody tr.even:hover > .sorting_3 { + background-color: #eeeeee; } /* - * Table wrapper + * Control feature layout */ .dataTables_wrapper { - position: relative; - clear: both; - *zoom: 1; -} - - -/* - * Page length menu - */ -.dataTables_length { - float: left; - color: #333; -} - - -/* - * Filter - */ -.dataTables_filter { - float: right; - text-align: right; - color: #333; -} - - -/* - * Table information - */ -.dataTables_info { - clear: both; - float: left; - color: #333; - padding-top: 0.55em; -} - - -/* - * Pagination - */ -.dataTables_paginate { - float: right; - text-align: right; -} - -.paginate_button { - box-sizing: border-box; - display: inline-block; - min-width: 1.5em; - padding: 0.5em 1em; - color: #333 !important; - margin-left: 2px; - text-align: center; - text-decoration: none !important; - cursor: pointer; - *cursor: hand; - border: 1px solid transparent; -} - -.paginate_button.current { - color: white !important; - background-color: black; - border: 1px solid black !important; - background: -webkit-linear-gradient(top, rgba(72,72,72,1) 0%, rgba(0,0,0,1) 100%) !important; -} - -.paginate_button:hover { - border: 1px solid #dcdcdc; - background: -webkit-linear-gradient(top, rgba(250,250,250,1) 0%, rgba(226,226,226,1) 100%); -} - -.paginate_button.disabled { - color: #666 !important; - border: 1px solid transparent !important; - background: transparent !important; -} - -.paginate_button:active { - outline: none; -} - - -/* - * Processing indicator - */ - - .dataTables_processing { - position: absolute; - top: 50%; - left: 50%; - width: 100%; - height: 40px; - margin-left: -50%; - margin-top: -25px; - padding-top: 20px; - - text-align: center; - font-size: 1.2em; - - background-color: white; - background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(25%,rgba(255,255,255,0.9)), color-stop(75%,rgba(255,255,255,0.9)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */ - background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%); /* FF3.6+ */ - background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%); /* IE10+ */ - background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%); /* Opera 11.10+ */ - background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%); /* W3C */ - } - - -/* - * Sorting - */ -table.dataTable thead th.sorting_asc, -table.dataTable thead th.sorting_desc, -table.dataTable thead th.sorting { - cursor: pointer; - *cursor: hand; -} - -.sorting { background: url('../images/sort_both.png') no-repeat center right; } -.sorting_asc { background: url('../images/sort_asc.png') no-repeat center right; } -.sorting_desc { background: url('../images/sort_desc.png') no-repeat center right; } - -.sorting_asc_disabled { background: url('../images/sort_asc_disabled.png') no-repeat center right; } -.sorting_desc_disabled { background: url('../images/sort_desc_disabled.png') no-repeat center right; } - -table.dataTable thead th:active, -table.dataTable thead td:active { - outline: none; -} - - -/* - * Scrolling - */ -.dataTables_scroll { - clear: both; -} - -.dataTables_scrollBody { - *margin-top: -1px; - -webkit-overflow-scrolling: touch; -} - + position: relative; + clear: both; + *zoom: 1; } + .dataTables_wrapper .dataTables_length { + float: left; } + .dataTables_wrapper .dataTables_filter { + float: right; + text-align: right; } + .dataTables_wrapper .dataTables_info { + clear: both; + float: left; + padding-top: 0.55em; } + .dataTables_wrapper .dataTables_paginate { + float: right; + text-align: right; } + .dataTables_wrapper .dataTables_paginate .paginate_button { + box-sizing: border-box; + display: inline-block; + min-width: 1.5em; + padding: 0.5em 1em; + margin-left: 2px; + text-align: center; + text-decoration: none !important; + cursor: pointer; + *cursor: hand; + color: #333 !important; + border: 1px solid transparent; } + .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { + color: white !important; + border: 1px solid black; + background-color: #474747; + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #474747), color-stop(100%, black)); + /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #474747 0%, black 100%); + /* Chrome10+,Safari5.1+ */ + background: -moz-linear-gradient(top, #474747 0%, black 100%); + /* FF3.6+ */ + background: -ms-linear-gradient(top, #474747 0%, black 100%); + /* IE10+ */ + background: -o-linear-gradient(top, #474747 0%, black 100%); + /* Opera 11.10+ */ + background: linear-gradient(to bottom, #474747 0%, #000000 100%); + /* W3C */ } + .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active { + color: #666 !important; + border: 1px solid transparent; + background: transparent; + box-shadow: none; } + .dataTables_wrapper .dataTables_paginate .paginate_button:hover { + border: 1px solid gainsboro; + background-color: white; + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, gainsboro)); + /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, white 0%, gainsboro 100%); + /* Chrome10+,Safari5.1+ */ + background: -moz-linear-gradient(top, white 0%, gainsboro 100%); + /* FF3.6+ */ + background: -ms-linear-gradient(top, white 0%, gainsboro 100%); + /* IE10+ */ + background: -o-linear-gradient(top, white 0%, gainsboro 100%); + /* Opera 11.10+ */ + background: linear-gradient(to bottom, #ffffff 0%, #dcdcdc 100%); + /* W3C */ } + .dataTables_wrapper .dataTables_paginate .paginate_button:active { + outline: none; + background-color: #f6f6f6; + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f6f6f6), color-stop(100%, #d7d7d7)); + /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #f6f6f6 0%, #d7d7d7 100%); + /* Chrome10+,Safari5.1+ */ + background: -moz-linear-gradient(top, #f6f6f6 0%, #d7d7d7 100%); + /* FF3.6+ */ + background: -ms-linear-gradient(top, #f6f6f6 0%, #d7d7d7 100%); + /* IE10+ */ + background: -o-linear-gradient(top, #f6f6f6 0%, #d7d7d7 100%); + /* Opera 11.10+ */ + background: linear-gradient(to bottom, #f6f6f6 0%, #d7d7d7 100%); + /* W3C */ + box-shadow: inset 0 0 3px #111; } + .dataTables_wrapper .dataTables_processing { + position: absolute; + top: 50%; + left: 50%; + width: 100%; + height: 40px; + margin-left: -50%; + margin-top: -25px; + padding-top: 20px; + text-align: center; + font-size: 1.2em; + background-color: white; + background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0))); + /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%); + /* Chrome10+,Safari5.1+ */ + background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%); + /* FF3.6+ */ + background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%); + /* IE10+ */ + background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%); + /* Opera 11.10+ */ + background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%); + /* W3C */ } + .dataTables_wrapper .dataTables_length, + .dataTables_wrapper .dataTables_filter, + .dataTables_wrapper .dataTables_info, + .dataTables_wrapper .dataTables_processing, + .dataTables_wrapper .dataTables_paginate { + color: #333333; } + .dataTables_wrapper .dataTables_scroll { + clear: both; } + .dataTables_wrapper .dataTables_scrollBody { + *margin-top: -1px; + -webkit-overflow-scrolling: touch; } \ No newline at end of file diff --git a/media/css/jquery.dataTables.scss b/media/css/jquery.dataTables.scss index 440f5eb8..3ef6890c 100644 --- a/media/css/jquery.dataTables.scss +++ b/media/css/jquery.dataTables.scss @@ -1,10 +1,38 @@ + // + // Colour customisation + // + +// Border between the header (and footer) and the table body +$table-header-border: 1px solid #111; + +// Border of rows / cells +$table-body-border: 1px solid #ddd; + +// Row background colour (hover, striping etc are all based on this colour and +// calculated automatically) +$table-row-background: #ffffff; + +// Text colour of the interaction control elements (info, filter, paging etc) +$table-control-color: #333; + +// Highlight colour of the paging button for the current page +$table-paging-button-active: #000; + +// Hover colour of paging buttons on mouse over +$table-paging-button-hover: #dcdcdc; + + + +// +// Functions / mixins +// @function tint( $color, $percent ) { - @return mix(white, $color, $percent); + @return mix(white, $color, $percent); } @function shade( $color, $percent ) { - @return mix(black, $color, $percent); + @return mix(black, $color, $percent); } @mixin gradient( $from, $to ) { @@ -18,19 +46,18 @@ } -$table-header-border: 1px solid #111; -$table-body-border: 1px solid #ddd; -$table-row-background: #ffffff; -$table-control-color: #333; - - +/* + * Table styles + */ table.dataTable { width: 100%; margin: 0 auto; clear: both; border-collapse: separate; - // Header and footer styles + /* + * Header and footer styles + */ thead, tfoot { th, @@ -46,6 +73,10 @@ table.dataTable { thead th, thead td { border-bottom: $table-header-border; + + &:active { + outline: none; + } } tfoot th, @@ -53,7 +84,36 @@ table.dataTable { border-top: $table-header-border; } - // Body styles + // Sorting + thead { + .sorting_asc, + .sorting_desc, + .sorting { + cursor: pointer; + *cursor: hand; + } + + .sorting { + background: url('../images/sort_both.png') no-repeat center right; + } + .sorting_asc { + background: url('../images/sort_asc.png') no-repeat center right; + } + .sorting_desc { + background: url('../images/sort_desc.png') no-repeat center right; + } + .sorting_asc_disabled { + background: url('../images/sort_asc_disabled.png') no-repeat center right; + } + .sorting_desc_disabled { + background: url('../images/sort_desc_disabled.png') no-repeat center right; + } + } + + + /* + * Body styles + */ tbody { th, td { @@ -184,7 +244,6 @@ table.dataTable { - /* * Control feature layout */ @@ -193,22 +252,25 @@ table.dataTable { clear: both; *zoom: 1; - + // Page length options .dataTables_length { float: left; } + // Filtering input .dataTables_filter { float: right; text-align: right; } + // Table info .dataTables_info { clear: both; float: left; padding-top: 0.55em; } + // Paging .dataTables_paginate { float: right; text-align: right; @@ -230,28 +292,42 @@ table.dataTable { &.current, &.current:hover { color: white !important; - border: 1px solid black; - @include gradient( rgba(72,72,72,1), rgba(0,0,0,1) ); + border: 1px solid $table-paging-button-active; + @include gradient( + lighten($table-paging-button-active, 28%), + $table-paging-button-active + ); } &.disabled, - &.disabled:hover { + &.disabled:hover, + &.disabled:active { color: #666 !important; border: 1px solid transparent; background: transparent; + box-shadow: none; } &:hover { - border: 1px solid #dcdcdc; - @include gradient( rgba(250,250,250,1), rgba(226,226,226,1) ); + border: 1px solid $table-paging-button-hover; + @include gradient( + lighten($table-paging-button-hover, 28%), + $table-paging-button-hover + ); } &:active { outline: none; + @include gradient( + lighten($table-paging-button-hover, 10%), + darken($table-paging-button-hover, 2%) + ); + box-shadow: inset 0 0 3px #111; } } } + // Processing .dataTables_processing { position: absolute; top: 50%; @@ -281,57 +357,15 @@ table.dataTable { .dataTables_paginate { color: $table-control-color; } -} - - - -.paginate_button { - display: inline-block; - min-width: 1em; - padding: 0.25em; -} - -.paginate_button.current { - -} - -.paginate_button.disabled { - -} - - -/* - * Sorting - */ -table.dataTable thead th.sorting_asc, -table.dataTable thead th.sorting_desc, -table.dataTable thead th.sorting { - cursor: pointer; - *cursor: hand; -} - -.sorting { background: url('../images/sort_both.png') no-repeat center right; } -.sorting_asc { background: url('../images/sort_asc.png') no-repeat center right; } -.sorting_desc { background: url('../images/sort_desc.png') no-repeat center right; } - -.sorting_asc_disabled { background: url('../images/sort_asc_disabled.png') no-repeat center right; } -.sorting_desc_disabled { background: url('../images/sort_desc_disabled.png') no-repeat center right; } - -table.dataTable thead th:active, -table.dataTable thead td:active { - outline: none; -} - - -/* - * Scrolling - */ -.dataTables_scroll { - clear: both; -} - -.dataTables_scrollBody { - *margin-top: -1px; - -webkit-overflow-scrolling: touch; + + // Scrolling + .dataTables_scroll { + clear: both; + } + + .dataTables_scrollBody { + *margin-top: -1px; + -webkit-overflow-scrolling: touch; + } }