search

executablebooks / sphinx-design

A sphinx extension for designing beautiful, screen-size responsive web components.
https://sphinx-design.readthedocs.io/en/furo-theme/
MIT License
193 stars 60 forks source link

Scope of tabs is visually unclear #173

Open timhoffm opened 10 months ago

timhoffm commented 10 months ago

Context

The tab content is only bounded by a top and bottom line. It's difficult to associate the bottom line with the end of the tab area.

Example: https://matplotlib.org/stable/devel/development_setup.html#create-a-dedicated-environment

grafik

Proposal

The tab scope should be visually more clear.

I suggest to draw a full box, e.g.

grafik

which I generated using the (not necessarily best) CSS:

  border-left: 0.0625rem solid var(--sd-color-tabs-underline);
  padding-left: 0.5rem;
  border-right: 0.0625rem solid var(--sd-color-tabs-underline);
  padding-right: 0.5rem;

Alternatively, one could add a background color to the tab content, but this may make consistent color styling harder.

Tasks and updates

No response

welcome[bot] commented 10 months ago

Thanks for opening your first issue here! Engagement like this is essential for open source projects! :hugs:
If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.
If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).
Welcome to the EBP community! :tada:

timhoffm commented 4 months ago

Related: pydata-sphinx-theme has added styling for tabs within their theme, which solves this issue on their side: https://github.com/pydata/pydata-sphinx-theme/pull/1555