Question about 3rd party "DataTables"

[Jerome-Herbinet]

@Rello

I would have liked to improve columns' sorting arrows design (for better readability) but their CSS properties are stored in this minified CSS file : datatables.min.css

Do you think I can override datatables.min.css CSS properties by adding new properties in :
style.css

Thanks

[Rello]

Hi,
we can make it work. what do you want to change? i can also compare it against the most recent version of datatables

[Jerome-Herbinet]

Hi @Rello,

The desired changes (made with my browser's dev inspector tool) :

table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order::after, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after, table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order::after, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order::after {
  /* top: 50%; */
  top: calc(50% + 1px);
}

table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order::before, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::before, table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order::before, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order::before {
  /* bottom: 50%; */
  bottom: calc(50% + 1px);
}

table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order::before, table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order::after, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order::before, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order::after, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::before, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::after, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after, table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order::before, table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order::after, table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order::before, table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order::after, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order::before, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order::after, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order::before, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order::after {
  /* opacity: .125; */
  opacity: .3;
}

table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order::before, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order::after {
  /* opacity: .6; */
  opacity: 1;
}

Before light theme

After with light theme

Before with dark theme

After with dark theme

The expected effect : better sorting arrows readability on white and dark background and a better visibility of selected arrow (more separated and more contrasty)