XWIKI-22135: Separations between Live Data entries are not visible enough on mobile`

[Sereza7]

Jira URL

https://jira.xwiki.org/browse/XWIKI-22135

Changes

Description

• Reduced visibility of the separators between fields

Clarifications

• This allows to spot out the entry separators more easily.
• I usually don't like using color theme values with transparency (a dotted line from far away is the same as a semi transparent solid line...). However here
  • We don't have any other color in the theme that would make sense to use here. No variation similar to @table-border-muted exists.
  • This is a very specific use case. It's the only place in the UI we want this specific color semantic, and it's only for low width screens.
  • It could be argued that the table displayed like that does not need any separator between the fields. The layout already conveys the structure corrrectly. Even with a bad combination of color, it's not a large issue to have the separators being barely visible.

Screenshots & Video

On the left : state before the PR;
On the right: state with the changes proposed in this PR

Executed Tests

Manual test only (see above), minor style change. Changing the LESS and forcing LESS recomputation by saving the current color theme do update the style as expected.

Expected merging strategy

• Prefers squash: Yes
• Backport on branches:
  • 15.10.X
  • 16.4.X

[surli]

It doesn't impact only LD, does it?

[Sereza7]

No, it impacts all .responsive-tables.

See https://www.xwiki.org/xwiki/bin/view/Documentation/DevGuide/FrontendResources/SpecialCSSClasses/#HClassesfortheresponsiveness

However I just got a look at an example of such a table in XS, the inline history:

before changes in the PR on the left, after changes in the PR on the right.
IMO it's an improvement for this use case.

Making the separation between entries (one line) and different fields of the same lines more different is something that would improve the user experience for all of these responsive tables in my opinion.
What do you think?

[Sereza7]

By the way, this class should not be mistaken for .table-responsive which comes from bootstrap 🙃