genindex.html, Hlists (and possibly more table-based items) become funky after 0.15.3 upgrade

[abjarna]

This page uses version 0.15.3:
https://pydata-sphinx-theme.readthedocs.io/en/v0.15.3/genindex.html

This page uses version 0.15.2:
https://pydata-sphinx-theme.readthedocs.io/en/v0.15.2/genindex.html

The style in genindex.html is as expected in version 0.15.2, but in version 0.15.3 the indextable has dark grey color and purple color when hovering.

See attached screenshots:

[trallard]

Thanks for raising this @abjarna.
This was introduced in #1757, when the table styling was improved. So while not a bug it is an unexpected result from this PR.

Adding a screenshot of the dark version:

I do not think the grey background is an issue since this is a table (albeit a special case of a table), but perhaps the hover colour (purple) could be removed as the focus item for interaction will be the links inside a given cell.

Thoughts @gabalafou @smeragoel

[abjarna]

Ok, thank you! I wasn't aware of #1757, but in my opinion this makes the genindex.html look really bad. In addition, the genindex.html now looks totally different from previous versions, which was probably not the intention of #1757.

Also, the grey background either overlaps between left and right column, or creates a thin table border. This results in a thin line in front of the right column in the genindex.html. See attachment.

I haven't yet tried to fix this in my custom.css, but it's probably an easy fix.

However, I recommend a more permanent fix to prevent the above changes to genindex.html.

[abjarna]

I also found similar issues when using Hlists.

This page uses version 0.15.3:
https://pydata-sphinx-theme.readthedocs.io/en/v0.15.3/examples/kitchen-sink/lists.html

This page uses version 0.15.2:
https://pydata-sphinx-theme.readthedocs.io/en/v0.15.2/examples/kitchen-sink/lists.html

Are you @trallard aware of any ways to disable these grey colors and purple color when hovering, besides using custom CSS?

[trallard]

Aha! Another item we did not realise was a table.

Edit the correct PR that introduced this is #1757

Are you @trallard aware of any ways to disable these grey colors and purple color when hovering, besides using custom CSS?

Unfortunately, right now, you'd need to add custom styles specifically to override these lines

pydata-sphinx-theme/src/pydata_sphinx_theme/assets/styles/abstracts/_mixins.scss

Lines 44 to 55 in 97e60ba

	tbody {
	tr {
	&:nth-child(odd) {
	background-color: var(--pst-color-table-row-zebra-low-bg);
	}
	&:nth-child(even) {
	background-color: var(--pst-color-table-row-zebra-high-bg);
	}
	&:hover {
	background-color: var(--pst-color-table-row-hover-bg);

tough this would affect all tables on your site.
However, it seems we'd need to make some further improvements to these at the theme level anyway.

[abjarna]

Thank you for the quick response @trallard !

And also thanks for all your hard work on the PyData theme. Best Sphinx theme out there by far! 🙏

[trallard]

Thank you for reporting these style mishaps 🙏🏽

I am tagging @gabalafou and @smeragoel here as they were the main folks working on tables restyling: folks let's chat about this and scope any further improvements needed

[gabalafou]

Quick fix: #1864.

Ideally, we would change the output for both hlists and the index page to not use tables. These are using tables only for layout, not semantically to actually communicate tabular data.

[drammock]

Ideally, we would change the output for both hlists and the index page to not use tables.

Are you suggesting we do that in the theme? Or as an upstream change to sphinx?

[gabalafou]

Upstream, if we can

[trallard]

So that would more than likely be at the Sphinx level

[abjarna]

Hi again, I see this has been fixed in the latest version (v0.15.4dev0).

Both the latest version (v0.15.4dev0) and version 0.15.3, show table-hover behaviour in "kitchen-sink/tables.html":
https://pydata-sphinx-theme.readthedocs.io/en/v0.15.3/examples/kitchen-sink/tables.html
https://pydata-sphinx-theme.readthedocs.io/en/latest/examples/kitchen-sink/tables.html

And only version 0.15.3 show table-hover behaviour in "genindex.html", but NOT the latest version (v0.15.4dev0):
https://pydata-sphinx-theme.readthedocs.io/en/v0.15.3/genindex.html
https://pydata-sphinx-theme.readthedocs.io/en/latest/genindex.html

And finally, only version 0.15.3 show table-hover behaviour in "kitchen-sink/lists.html", but NOT the latest version (v0.15.4dev0):
https://pydata-sphinx-theme.readthedocs.io/en/v0.15.3/examples/kitchen-sink/lists.html
https://pydata-sphinx-theme.readthedocs.io/en/latest/examples/kitchen-sink/lists.html

I've been trying to replicate the quick fix #1864 from @gabalafou in my local environment, by removing the line "@include table-colors;" from _tables.scss in my virtual environment folder, and then rebuilding with "make clean && make html", but still no luck 😢

Am I missing something obvious, or are there additional steps I need to make to replicate the behaviour in latest version (v0.15.4dev0)?

[abjarna]

And a quick note to other users who might also be struggling with the same issue, this addition to custom.css temporarily undoes the table-hover behaviour in "genindex.html":

table.indextable.genindextable {
    border: none !important;
}

table.indextable.genindextable td {
    border-left: none !important;
}

table.indextable.genindextable tr {
    background-color: inherit !important;
}

[drammock]

I've been trying to replicate the quick fix #1864 from @gabalafou in my local environment, by removing the line "@include table-colors;" from _tables.scss in my virtual environment folder, and then rebuilding with "make clean && make html", but still no luck 😢

the .scss files need to get compiled into .css files for the changes to propogate to the built site. make clean && make html won't do that; it's handled (along with minifying our javascript assets) by webpack.

If you're testing on the theme's own website, you could do tox -e docs-dev for example, which will run webpack first. To do it for your own site, you'd need to figure out what CSS rules the @include actually includes, and then remove them manually from the relevant spot(s) in the compiled .css file

[abjarna]

Thank you @drammock! In that case, I’ll stick to the custom.css in my previous comment for now.