Owen Leonard
a54eb7fd5c
This patch revises our custom DataTables CSS to give a more colorful style to the columns configuration and export menus. The primary goal of this change is to make it easier to tell which columns are visible and which are hidden. To test, apply the patch and clear your browser cache if necessary. View a table with columns configuration and export options, e.e. Tools -> Notices & slip. Test the DataTables menus and confirm that they work as expected. Signed-off-by: Liz Rea <wizzyrea@gmail.com> This is a nice update to the styles. Signed-off-by: Jose-Mario Monteiro-Santos <jose-mario.monteiro-santos@inLibro.com> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de> Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
427 lines
No EOL
10 KiB
CSS
427 lines
No EOL
10 KiB
CSS
input.search_init {
|
|
color: #999999;
|
|
}
|
|
.sorting_asc {
|
|
padding-right: 19px;
|
|
background: url("../img/asc.gif") no-repeat scroll right center #EEEEEE;
|
|
}
|
|
.sorting_desc {
|
|
padding-right: 19px;
|
|
background: url("../img/desc.gif") no-repeat scroll right center #EEEEEE;
|
|
}
|
|
.sorting {
|
|
padding-right: 19px;
|
|
background: url("../img/ascdesc.gif") no-repeat scroll right center #EEEEEE;
|
|
}
|
|
.sorting_asc_disabled {
|
|
padding-right: 19px;
|
|
background: url("../img/datatables/sort_asc_disabled.png") no-repeat scroll right center #EEEEEE;
|
|
}
|
|
.sorting_desc_disabled {
|
|
padding-right: 19px;
|
|
background: url("../img/datatables/sort_desc_disabled.png") no-repeat scroll right center #EEEEEE;
|
|
}
|
|
.sorting_disabled {
|
|
padding-right: 19px;
|
|
background-color: #EEEEEE;
|
|
}
|
|
|
|
div.top {clear : both; }
|
|
|
|
div.top.pager,
|
|
div.bottom.pager {
|
|
background-color : #E5E5E5;
|
|
padding : 0;
|
|
}
|
|
|
|
div.bottom.pager div.dataTables_paginate.paging_full_numbers,
|
|
div.bottom.pager div.dataTables_paginate.paging_four_button {
|
|
border-right-width : 0;
|
|
}
|
|
|
|
div.dataTables_filter,
|
|
div.dataTables_length,
|
|
div.dataTables_info,
|
|
div.dataTables_paginate {
|
|
float: left;
|
|
padding : .3em .5em .3em .5em;
|
|
}
|
|
|
|
div.dataTables_filter label,
|
|
div.dataTables_length label,
|
|
div.dataTables_info label,
|
|
div.dataTables_paginate label,
|
|
div.dataTables_filter input,
|
|
div.dataTables_length input,
|
|
div.dataTables_info input,
|
|
div.dataTables_paginate input {
|
|
padding: 0;
|
|
}
|
|
|
|
div.dataTables_length {
|
|
border-right : 1px solid #686868;
|
|
line-height:1.9em;
|
|
}
|
|
div.dataTables_info {
|
|
border-right : 1px solid #AAA;
|
|
line-height:1.9em;
|
|
}
|
|
div.dataTables_length,
|
|
div.dataTables_filter {
|
|
border-left : 1px solid #FFF;
|
|
border-right : 1px solid #AAAAAA;
|
|
}
|
|
div.dataTables_length label {
|
|
display: inline;
|
|
}
|
|
div.dataTables_filter {
|
|
line-height : inherit;
|
|
}
|
|
div.dataTables_paginate {
|
|
padding : 0;
|
|
}
|
|
|
|
.paging_full_numbers a.paginate_button,
|
|
.paging_full_numbers a.paginate_active,
|
|
.paging_full_numbers > span > span {
|
|
border-right : 1px solid #AAA;
|
|
border-left : 1px solid #FFF;
|
|
color: #000;
|
|
display : block;
|
|
float : left;
|
|
line-height:1.9em;
|
|
padding : 0.4em 0.7em;
|
|
}
|
|
.paging_full_numbers a.paginate_button,
|
|
.paging_full_numbers a.paginate_active {
|
|
cursor: pointer;
|
|
}
|
|
.paging_full_numbers a.paginate_button,
|
|
.paging_full_numbers > span > span {
|
|
background-color : #FFF;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.paging_full_numbers a.paginate_button.first {
|
|
background-color: transparent;
|
|
background-image : url('../img/first.png');
|
|
background-position : 3px center;
|
|
padding-left : 23px;
|
|
}
|
|
.paging_full_numbers a.paginate_button.previous {
|
|
background-color: transparent;
|
|
background-image : url('../img/prev.png');
|
|
background-position : 3px center;
|
|
padding-left : 23px;
|
|
}
|
|
.paging_full_numbers a.paginate_button.next {
|
|
background-color: transparent;
|
|
background-image : url('../img/next.png');
|
|
background-position : 93% center;
|
|
padding-right : 25px;
|
|
}
|
|
.paging_full_numbers a.paginate_button.last {
|
|
background-color: transparent;
|
|
background-image : url('../img/last.png');
|
|
background-position : 93% center;
|
|
border-right : 0;
|
|
padding-right : 25px;
|
|
}
|
|
|
|
div.bottom.pager .paging_full_numbers a.paginate_button.last {
|
|
border-right-width : 0;
|
|
}
|
|
|
|
div.bottom.pager div:first-child {
|
|
border-left : 0;
|
|
}
|
|
|
|
.paging_full_numbers a.paginate_active {
|
|
background-color : #FFFFEA;
|
|
color : #000;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.paging_full_numbers a.current {
|
|
background-color : #FFFFCC;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.paging_full_numbers a.paginate_button:hover {
|
|
background-color: #FFC;
|
|
}
|
|
|
|
.paging_full_numbers a.paginate_button.paginate_button_disabled {
|
|
color : #666;
|
|
}
|
|
|
|
/* Two-button version */
|
|
|
|
div.dataTables_paginate.paging_two_button,
|
|
div.dataTables_paginate.paging_four_button {
|
|
background-color : transparent;
|
|
border-right : 1px solid #686868;
|
|
border-left : 1px solid #FFF;
|
|
line-height : 2.5em;
|
|
}
|
|
.paginate_disabled_first,
|
|
.paginate_enabled_first,
|
|
.paginate_disabled_previous,
|
|
.paginate_enabled_previous,
|
|
.paginate_disabled_next,
|
|
.paginate_enabled_next,
|
|
.paginate_disabled_last,
|
|
.paginate_enabled_last {
|
|
cursor: pointer;
|
|
*cursor: hand;
|
|
padding: .2em 0;
|
|
}
|
|
|
|
.paginate_disabled_previous,
|
|
.paginate_enabled_previous,
|
|
.paginate_disabled_next,
|
|
.paginate_enabled_next {
|
|
color: #111 !important;
|
|
}
|
|
|
|
.paginate_disabled_first,
|
|
.paginate_enabled_first,
|
|
.paginate_disabled_previous,
|
|
.paginate_enabled_previous {
|
|
padding-left: 23px;
|
|
}
|
|
.paginate_disabled_next,
|
|
.paginate_enabled_next,
|
|
.paginate_disabled_last,
|
|
.paginate_enabled_last {
|
|
padding-right: 23px;
|
|
margin-left: 10px;
|
|
margin-right : .3em;
|
|
}
|
|
|
|
.paging_four_button .paginate_disabled_first,
|
|
.paging_four_button .paginate_disabled_previous,
|
|
.paging_four_button .paginate_enabled_first,
|
|
.paging_four_button .paginate_enabled_previous {
|
|
margin-left : .3em;
|
|
}
|
|
|
|
.paging_full_numbers a.paginate_button.first.disabled,
|
|
.paginate_disabled_first {
|
|
background: transparent url("../img/first-disabled.png") no-repeat 3px top;
|
|
color: #666;
|
|
cursor: default;
|
|
}
|
|
.paginate_enabled_first {
|
|
background: transparent url("../img/first.png") no-repeat 3px top;
|
|
cursor: pointer;
|
|
}
|
|
.paging_full_numbers a.paginate_button.previous.disabled,
|
|
.paginate_disabled_previous {
|
|
background: transparent url("../img/prev-disabled.png") no-repeat 3px top;
|
|
color: #666;
|
|
cursor: default;
|
|
}
|
|
.paginate_enabled_previous {
|
|
background: transparent url("../img/prev.png") no-repeat 3px top;
|
|
cursor: pointer;
|
|
}
|
|
.paging_full_numbers a.paginate_button.next.disabled,
|
|
.paginate_disabled_next {
|
|
background: transparent url("../img/next-disabled.png") no-repeat right top;
|
|
color: #666;
|
|
cursor: default;
|
|
}
|
|
.paginate_enabled_next {
|
|
background: transparent url("../img/next.png") no-repeat right top;
|
|
cursor: pointer;
|
|
}
|
|
.paging_full_numbers a.paginate_button.last.disabled,
|
|
.paginate_disabled_last {
|
|
background: transparent url("../img/last-disabled.png") no-repeat right top;
|
|
color: #666;
|
|
cursor: default;
|
|
}
|
|
.paginate_enabled_last {
|
|
background: transparent url("../img/last.png") no-repeat right top;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.paging_full_numbers a.paginate_button.first.disabled,
|
|
.paging_full_numbers a.paginate_button.previous.disabled,
|
|
.paging_full_numbers a.paginate_button.next.disabled,
|
|
.paging_full_numbers a.paginate_button.last.disabled {
|
|
background-position-y: 7px;
|
|
}
|
|
|
|
.dataTables_processing {
|
|
background-color: white;
|
|
border: 1px solid #999;
|
|
-webkit-box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.2);
|
|
box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.2);
|
|
color: #333;
|
|
font-size: 14px;
|
|
left: 50%;
|
|
margin-left: -125px;
|
|
margin-top: -15px;
|
|
padding: 10px 14px 12px;
|
|
position: fixed;
|
|
text-align: center;
|
|
top: 50%;
|
|
}
|
|
|
|
tr.odd.selected td {
|
|
background-color: #D3D3D3;
|
|
}
|
|
|
|
tr.even.selected td {
|
|
background-color: #D3D3D3;
|
|
}
|
|
|
|
/* ColumnFilter */
|
|
span.filter_column > input[type="text"] {
|
|
font-size: 80%;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Row grouping */
|
|
td.group,
|
|
table.group td.group {
|
|
background-color: #D1CFD0;
|
|
border-bottom: 2px solid #A19B9E;
|
|
border-top: 2px solid #A19B9E;
|
|
}
|
|
|
|
table.group tr.odd td {
|
|
background-color : #F3F3F3;
|
|
border : 1px solid #BCBCBC;
|
|
border-right : 1px solid #BCBCBC;
|
|
}
|
|
|
|
table.group tr.even td {
|
|
background-color: #FFF;
|
|
border-right : 1px solid #BCBCBC;
|
|
}
|
|
|
|
button.dt-button,
|
|
div.dt-button,
|
|
a.dt-button,
|
|
a.dt-button:link,
|
|
a.dt-button:visited,
|
|
a.dt-button:hover,
|
|
a.dt-button:active {
|
|
color: #000;
|
|
font-size: 1em;
|
|
margin: 3px 3px 0;
|
|
}
|
|
|
|
button.dt-button::before,
|
|
div.dt-button::before,
|
|
a.dt-button::before {
|
|
content: '';
|
|
}
|
|
|
|
button.dt-button:active:not(.disabled):hover:not(.disabled),
|
|
button.dt-button.active:not(.disabled):hover:not(.disabled),
|
|
div.dt-button:active:not(.disabled):hover:not(.disabled),
|
|
div.dt-button.active:not(.disabled):hover:not(.disabled),
|
|
a.dt-button:active:not(.disabled):hover:not(.disabled),
|
|
a.dt-button.active:not(.disabled):hover:not(.disabled) {
|
|
background: #FFC none;
|
|
border-color: #CCC;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
}
|
|
|
|
div.dt-button-collection {
|
|
width: auto;
|
|
}
|
|
|
|
div.dt-button-collection a.dt-button {
|
|
background: #FFF none;
|
|
border-color: #EEE;
|
|
text-shadow: none;
|
|
}
|
|
|
|
div.dt-button-collection a.dt-button::before {
|
|
color: #CCC;
|
|
content: "\f00d";
|
|
display: inline-block;
|
|
font-family: FontAwesome;
|
|
margin-right: .5em;
|
|
width: 1em;
|
|
}
|
|
|
|
div.dt-button-collection a.dt-button:active:not(.disabled),
|
|
div.dt-button-collection a.dt-button.active:not(.disabled) {
|
|
background: #E6F0F2 none;
|
|
border: 1px solid #999;
|
|
box-shadow: none;
|
|
}
|
|
|
|
div.dt-button-collection a.dt-button:active:not(.disabled)::before,
|
|
div.dt-button-collection a.dt-button.active:not(.disabled)::before {
|
|
color: #538200;
|
|
content: "\f00c";
|
|
display: inline-block;
|
|
font-family: FontAwesome;
|
|
margin-right: .5em;
|
|
width: 1em;
|
|
}
|
|
|
|
div.dt-button-collection a.dt-button:not(.disabled):hover,
|
|
div.dt-button-collection a.dt-button.active:not(.disabled):hover {
|
|
box-shadow: none;
|
|
border: 1px solid #999;
|
|
background: #FFC none;
|
|
}
|
|
|
|
|
|
div.dt-button-collection a.dt-button:not(.disabled)::before,
|
|
div.dt-button-collection a.dt-button.active:not(.disabled):hover::before {
|
|
color: #CC0000;
|
|
content: "\f00d";
|
|
display: inline-block;
|
|
font-family: FontAwesome;
|
|
margin-right: .5em;
|
|
width: 1em;
|
|
}
|
|
|
|
div.dt-button-collection a.dt-button.buttons-html5:not(.disabled)::before {
|
|
color: #222BAC;
|
|
display: inline-block;
|
|
font-family: FontAwesome;
|
|
margin-right: .5em;
|
|
width: 1em;
|
|
}
|
|
|
|
div.dt-button-collection a.dt-button.buttons-excel:not(.disabled)::before {
|
|
content: "\f1c3";
|
|
}
|
|
|
|
div.dt-button-collection a.dt-button.buttons-csv:not(.disabled)::before {
|
|
content: "\f0ce";
|
|
}
|
|
|
|
div.dt-button-collection a.dt-button.buttons-copy:not(.disabled)::before {
|
|
content: "\f0c5";
|
|
}
|
|
|
|
div.dt-button-collection a.dt-button.buttons-print:not(.disabled)::before {
|
|
color: #222BAC;
|
|
content: "\f02f";
|
|
display: inline-block;
|
|
font-family: FontAwesome;
|
|
margin-right: .5em;
|
|
width: 1em;
|
|
}
|
|
|
|
.dt-button-text {
|
|
display: none;
|
|
}
|
|
|
|
@media (min-width: 1028px) {
|
|
.dt-button-text {
|
|
display: inline;
|
|
}
|
|
} |