Skip to content

Clean up button css for homepage and gallery #1026

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Czaki merged 6 commits into from
May 26, 2026
+80 −68
Merged

Clean up button css for homepage and gallery #1026

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7c25f6b
WIP shared logic
TimMonko May 19, 2026
15cabba
clean up and comment
TimMonko May 20, 2026
1f9eebe
remove gallery download removals
TimMonko May 20, 2026
7c8fa51
clean up for old implementation and add alt styling for homepage
TimMonko May 20, 2026
9b17021
reorg css
TimMonko May 20, 2026
a36aabe
rename button classes
TimMonko May 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 77 additions & 65 deletions docs/_static/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,96 +1,113 @@
/*
Sphinx-Gallery has compatible CSS to fix default sphinx themes
Tested for Sphinx 1.3.1 for all themes: default, alabaster, sphinxdoc,
scrolls, agogo, traditional, nature, haiku, pyramid
Tested for Read the Docs theme 0.1.7 */
/* ── Buttons for homepage and gallery ───────────────────────────────────── */

html[data-theme="light"] div.sphx-glr-download a {
background-color: rgb(255, 255, 255) !important;
background-image: linear-gradient(to bottom, rgb(255, 255, 255), #ffffff) !important;
.button-primary,
.button-alt,
div.sphx-glr-download a {
background-image: none !important;
border-radius: 4px;
border: 1px solid #ffffff !important;
color: #000;
display: inline-block;
font-weight: bold;
padding: 1ex;
text-align: center;
text-decoration: none;
}

html[data-theme="light"] div.sphx-glr-download a:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 1px 5px rgba(0, 0, 0, 0.25);
text-decoration: none;
background-image: none;
background-color: #ffffff !important;
/* makes homepage button take up width of column */
.button-primary {
display: block;
}

html[data-theme="dark"] div.sphx-glr-download a {
background-color: #222832 !important;
background-image: linear-gradient(to bottom, #222832, #222832) !important;
border-radius: 4px;
border: 1px solid #222832 !important;
color: #000;
/* Allow border override to show through on example buttons */
div.sphx-glr-download a {
border: 1px solid transparent;
display: inline-block;
font-weight: bold;
padding: 1ex;
text-align: center;
padding: 0.45rem 0.8rem;
}

html[data-theme="dark"] div.sphx-glr-download a:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 1px 5px rgba(0, 0, 0, 0.25);
text-decoration: none;
background-image: none;
background-color: #222832 !important;
/* force sphinx-gallery download code to inherit text color */
div.sphx-glr-download a code.download {
color: inherit !important;
}

/* Version warning banner color */
#bd-header-version-warning {
background-color: color-mix(in srgb, var(--pst-color-secondary-bg), transparent 30%);
/* horizontally align and reduce lower margin of container */
.napari-gallery-downloads {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
margin: 0 0 0.35rem;
}

#bd-header-version-warning .pst-button-link-to-stable-version {
background-color: color-mix(in srgb, var(--pst-color-secondary-bg), transparent 0%);
border-color: var(--pst-color-secondary-bg);
color: var(--napari-color-text-base);
font-weight: 700;
/* remove spacing around download buttons */
.napari-gallery-downloads .sphx-glr-download {
margin: 0;
}

#bd-header-version-warning .pst-button-link-to-stable-version:hover {
background-color: var(--pst-color-secondary-bg);
border-color: var(--pst-color-secondary-bg);
color: var(--napari-color-text-base);
font-weight: 700;
html[data-theme="light"] .button-primary,
html[data-theme="light"] div.sphx-glr-download a {
background-color: var(--napari-primary-blue) !important;
border-color: var(--napari-primary-blue) !important;
color: var(--napari-color-text-base) !important;
}

/* ── Homepage accent cards ───────────────────────────────────────────
Install, Download cards with theme-aware napari blue.
sphinx-design marks every property !important, so we must too. */
html[data-theme="dark"] .button-primary,
html[data-theme="dark"] div.sphx-glr-download a {
background-color: var(--napari-purple) !important;
border-color: var(--napari-purple) !important;
color: var(--napari-color-text-base) !important;
}

.homepage-button {
display: block;
html[data-theme="light"] .button-primary:hover,
html[data-theme="light"] div.sphx-glr-download a:hover {
background-color: color-mix(in srgb, var(--napari-primary-blue), transparent 25%) !important;
text-decoration: underline;
}

html[data-theme="light"] .homepage-button {
background-color: var(--napari-primary-blue) !important;
html[data-theme="dark"] .button-primary:hover,
html[data-theme="dark"] div.sphx-glr-download a:hover {
background-color: color-mix(in srgb, var(--napari-purple), transparent 25%) !important;
text-decoration: underline;
}

html[data-theme="light"] .button-alt {
background-color: var(--pst-color-background) !important;
border-color: var(--napari-primary-blue) !important;
color: var(--napari-color-text-base) !important;
}

html[data-theme="dark"] .homepage-button {
background-color: var(--napari-purple) !important;
html[data-theme="dark"] .button-alt {
background-color: var(--pst-color-background) !important;
border-color: var(--napari-purple) !important;
color: var(--napari-color-text-base) !important;
}

html[data-theme="light"] .homepage-button:hover {
html[data-theme="light"] .button-alt:hover {
background-color: var(--pst-color-background) !important;
border-color: var(--napari-primary-blue) !important;
color: var(--napari-color-text-base) !important;
text-decoration: underline;
background-color: color-mix(in srgb, var(--napari-primary-blue), transparent 25%) !important;
}

html[data-theme="dark"] .homepage-button:hover {
html[data-theme="dark"] .button-alt:hover {
background-color: var(--pst-color-background) !important;
border-color: var(--napari-purple) !important;
color: var(--napari-color-text-base) !important;
text-decoration: underline;
background-color: color-mix(in srgb, var(--napari-purple), transparent 25%) !important;
}

/* Version warning banner color */
#bd-header-version-warning {
background-color: color-mix(in srgb, var(--pst-color-secondary-bg), transparent 30%);
}

#bd-header-version-warning .pst-button-link-to-stable-version {
background-color: color-mix(in srgb, var(--pst-color-secondary-bg), transparent 0%);
border-color: var(--pst-color-secondary-bg);
color: var(--napari-color-text-base);
font-weight: 700;
}

#bd-header-version-warning .pst-button-link-to-stable-version:hover {
background-color: var(--pst-color-secondary-bg);
border-color: var(--pst-color-secondary-bg);
color: var(--napari-color-text-base);
font-weight: 700;
}

/* ── Homepage quicklinks (icon columns) ──────────────────────────────── */
Expand Down Expand Up @@ -222,9 +239,4 @@ html[data-theme="dark"] .homepage-quicklinks a {

html[data-theme="dark"] img#homepage-featured-example-image {
background-color: var(--pst-color-background) !important;
}

.homepage-example-button:hover {
background-color: var(--pst-color-background) !important;
color: var(--napari-color-text-base) !important;
}
6 changes: 3 additions & 3 deletions docs/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ theme:
:color: primary
:ref-type: myst
:shadow:
:class: homepage-button
:class: button-primary

{material-regular}`arrow_forward;1.2em` **Get started**
```
Expand Down Expand Up @@ -133,8 +133,8 @@ A standalone installer for when you want napari without setting up Python first.
Display an image in napari and explore the viewer with a minimal example.
</p>
<div class="homepage-featured-example__actions">
<a class="sd-btn sd-btn-primary sd-shadow-sm homepage-button" href="gallery.html">Examples gallery</a>
<button class="sd-btn sd-btn-outline-primary sd-shadow-sm homepage-example-button" id="homepage-featured-example-reroll" type="button">Show another example</button>
<a class="sd-btn sd-btn-primary sd-shadow-sm button-primary" href="gallery.html">Examples gallery</a>
<button class="sd-btn sd-btn-outline-primary sd-shadow-sm button-alt" id="homepage-featured-example-reroll" type="button">Show another example</button>
</div>
</div>
<a class="homepage-featured-example__media" href="gallery/add_image.html" aria-label="View the featured napari example">
Expand Down
Loading