Link color for select

Loren Maxwell

Link to test case:
https://live.datatables.net/mobotutu/1/edit

Description of problem:

When a table has links and are selected, the following CSS rule is applied causing the link to be too dark (at least in my opinion):

table.dataTable > tbody > tr.selected a {
    color: rgb(9, 10, 11);
    color: rgb(var(--dt-row-selected-link));
}

There might be a reason for this, but I always find myself overwriting it with the standard selected CSS to show the link as white:

/* Make links white when selected */
table.table.dataTable>tbody>tr.selected a {
    box-shadow: inset 0 0 0 9999px rgb(13, 110, 253);
    box-shadow: inset 0 0 0 9999px rgb(var(--dt-row-selected));
    color: rgb(255, 255, 255);
    color: rgb(var(--dt-row-selected-text));
}

I would vote to just use the normal CSS to make the link white and let a user modify it for the cases where they want a different color.

allan

Hi,

I've updated thetest case to have a link and I agree - that colouring isn't right. I'll get a fix committed for that at the start of the week. Thanks for flagging it up.

Allan

allan

I've committed a change for this. Rather than pure white, I've used a slightly off-white, which isn't ideal, but I'm not sure what an ideal colour for this is! It needs to be a little different from the plain text, although this is a good use case for underlining links!

With the CSS variable it is easy to change if one wants:

:root {
  --dt-row-selected-link: 255 0 0;
}

Allan

Loren Maxwell

Thanks @allan -- I agree, there's not quite a perfect color for it.

I'll offer up a brighter color with a slight yellow tint on the link: rgb(255, 255, 191)

Or a stronger yellow to make it pop out a little bit: rgb(255, 255, 63)

Yellow is not normally associated with a link so it's not obvious to me either of those is better than the slightly off-white, but they do contrast a little more with the "select-blue" while still being readable.

But the slightly off-white is an improvement over the previous!