@even-color: #FFFFFF; @sorting-even-color: #EAEBFF; @odd-color: #E2E4FF; @sorting-odd-color: #D3D6FF; @red: #FF0000; .rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } .dataTables_wrapper { position: relative; min-height: 302px; clear: both; zoom: 1; /* Feeling sorry for IE */ } .dataTables_processing { position: absolute; top: 50%; left: 50%; width: 250px; height: 30px; margin-left: -125px; margin-top: -15px; padding: 14px 0 2px 0; border: 1px solid #ddd; text-align: center; color: #999; font-size: 14px; background-color: white; } .dataTables_length { width: 40%; float: left; margin-bottom: 10px; } .dataTables_filter { text-align: right; margin-bottom: 10px; } .dataTables_info { width: 60%; float: left; } .dataTables_paginate { width: 44px; float: right; text-align: right; } /* Pagination nested */ .paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next { height: 19px; width: 19px; margin-left: 3px; float: left; } .paginate_disabled_previous { background-image: url('../images/back_disabled.jpg'); } .paginate_enabled_previous { background-image: url('../images/back_enabled.jpg'); } .paginate_disabled_next { background-image: url('../images/forward_disabled.jpg'); } .paginate_enabled_next { background-image: url('../images/forward_enabled.jpg'); } /* ---------------------------- Dislpay --------------------------------- */ table.display { margin: 0 auto; clear: both; width: 100%; thead th { padding: 3px 18px 3px 10px; border-bottom: 1px solid black; font-weight: bold; cursor: pointer; } tfoot th { padding: 3px 18px 3px 10px; border-top: 1px solid black; font-weight: bold; } tr.heading2 td { border-bottom: 1px solid #aaa; } td { padding: 10px 10px; } td.center { text-align: center; } } /* ---------------------------- Sorting --------------------------------- */ .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 { background: url('../images/sort_both.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; } /* ----------------------------- Rows ----------------------------------- */ tr.odd { background-color: @odd-color; } tr.even { background-color: @even-color; } /* ----------------------------- Misc ----------------------------------- */ .dataTables_scroll { clear: both; } .dataTables_scrollBody { margin-top: -1px; } .top, .bottom { } .top .dataTables_info { float: none; } .clear { clear: both; } .dataTables_empty { text-align: center; } tfoot input { margin: 0.5em 0; width: 100%; color: #444; } tfoot input.search_init { color: #999; } td.group { background-color: #d1cfd0; border-bottom: 2px solid #A19B9E; border-top: 2px solid #A19B9E; } td.details { background-color: #d1cfd0; border: 2px solid #A19B9E; } .example_alt_pagination div.dataTables_info { width: 40%; } .paging_full_numbers { width: 400px; height: 22px; line-height: 22px; } .paging_full_numbers span.paginate_button, .paging_full_numbers span.paginate_active { border: 1px solid #aaa; -webkit-border-radius: 5px; -moz-border-radius: 5px; padding: 2px 5px; margin: 0 3px; cursor: pointer; } .paging_full_numbers span.paginate_button { background-color: #ddd; } .paging_full_numbers span.paginate_button:hover { background-color: #ccc; } .paging_full_numbers span.paginate_active { background-color: #99B3FF; } table.display tr.even.row_selected td { background-color: #B0BED9; } table.display tr.odd.row_selected td { background-color: #9FAFD1; } /* ------------------------ Sorting classes ----------------------------- */ tr.odd { td.sorting_1 { background-color: @sorting-odd-color; } td.sorting_2 { background-color: #DADCFF; } td.sorting_3 { background-color: #E0E2FF; } } tr.even { td.sorting_1 { background-color: @sorting-even-color; } td.sorting_2 { background-color: #F2F3FF; } td.sorting_3 { background-color: #F9F9FF; } } /* ------------------------------ Tags ---------------------------------- */ table.display span.tag { color: white; padding: 5px 10px; background: desaturate(@red, 30%); .rounded-corners(3px); }