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

@import "css/common.css";

@html-background: #dedede repeat-x scroll;
@body-width: 956px;

@font-family: "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif";
@base-font-size: 11px;

@base-margin: 10px;
@base-padding: @base-margin;
@base-border-size: 1px;
@base-color: #111;

/* ----------------------------- General -------------------------------- */

#mindmapListContainer {
    background: #FFFFFF;
    margin: 0 auto;
    width: @body-width;
    padding: @base-padding;
}

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

/* ------------------------------ Tags ---------------------------------- */

@tags-width: 20%;
@tags-border-size: @base-border-size;
@tags-padding: @base-padding;

#tags {
    width: @tags-width;
    opacity: 0;
    padding: @tags-padding;
    float: left;
    border-right: none;
    position: absolute;
    background: @base-color * 14.5;
    border: @base-border-size solid @base-color * 14;

    h2 {
        font-size: @base-font-size * 1.5;
        margin-top: 0px;
    }

    div.tag {
        margin-bottom: @base-margin;

        .ui-icon {
            float:left;
            margin-right: @base-margin / 2;
            position: relative;
            top: -2px;
        }
    }

    #tags-actions {
        margin-top: @base-margin;
    }
}

/* ------------------------------ Table --------------------------------- */

@table-gap: 2%;
@table-width: 100% - (@tags-width + (@tags-padding / @body-width * 100) + @table-gap);

#map-table {
    width:  100% !important;
    display: inline-block;
}

input#selectAll {
    position: relative;
    left: 4px;
}

/* ----------------------------- Toolbar -------------------------------- */

#toolbar {
    border: @tags-border-size solid @base-color * 11;
    padding: @base-padding;
    margin-bottom: @base-margin;
}


/* ----------------------------- Buttons -------------------------------- */
#buttons {
    margin-left: @tags-width;
    margin-bottom: @base-margin;
}

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

@red: #FF0000;
@base-border-size: 1px;
@base-color: #111;
@base-margin: 10px;

@th-background-color: #FFFFFF;

.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 {
	float: right;
    margin-bottom: 10px;
}

.dataTables_filter {
	text-align: right;
    margin-bottom: @base-margin;
}

.dataTables_info {
	width: 60%;
	float: left;
    margin-top: @base-margin;
}

.dataTables_paginate {
	width: 44px;
	float: right;
	text-align: right;
   margin-top: @base-margin;
}

/* 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;
    float:right;
	width: 100%;
    border: @base-border-size solid @base-color * 5;
    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: @th-background-color url('../images/sort_asc.png') no-repeat center right;
}

.sorting_desc {
	background: @th-background-color url('../images/sort_desc.png') no-repeat center right;
}

.sorting {
	background: @th-background-color url('../images/sort_both.png') no-repeat center right;
}

.sorting_disabled {
	background: @th-background-color;
}

.sorting_asc_disabled {
	background: @th-background-color url('../images/sort_asc_disabled.png') no-repeat center right;
}

.sorting_desc_disabled {
	background: @th-background-color 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 .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);
}

#mindmapListTable .columName {
    cursor: pointer
}

#mindmapListTable tr:hover {
    background: #e0ffff;
}