wisemapping-open-source/wise-webapp/src/main/webapp/html/css/table.less

@even-color: #FFFFFF;
@sorting-even-color: #EAEBFF;
@odd-color: #E2E4FF;
@sorting-odd-color: #D3D6FF;

.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;
    }
}