From 7c25f6b7a5af6eae0285444cef3319ea441b081e Mon Sep 17 00:00:00 2001 From: Tim Monko Date: Tue, 19 May 2026 17:19:34 -0500 Subject: [PATCH 1/6] WIP shared logic --- docs/_static/custom.css | 131 +++++++++++++++++++--------------------- 1 file changed, 62 insertions(+), 69 deletions(-) diff --git a/docs/_static/custom.css b/docs/_static/custom.css index e5c50e450..66daa6850 100644 --- a/docs/_static/custom.css +++ b/docs/_static/custom.css @@ -1,47 +1,74 @@ -/* -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 */ - -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; +/* ── Homepage accent cards ─────────────────────────────────────────── + Install, Download cards with theme-aware napari blue. + sphinx-design marks every property !important, so we must too. */ + +.homepage-button { + display: block; +} + +/* Reuse the homepage CTA skin for gallery download buttons. */ + +.homepage-button, +.napari-gallery-downloads .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; -} - -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; } -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; +.napari-gallery-downloads .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; +html[data-theme="light"] .homepage-button, +html[data-theme="light"] .napari-gallery-downloads .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; +} + +html[data-theme="dark"] .homepage-button, +html[data-theme="dark"] .napari-gallery-downloads .sphx-glr-download a { + background-color: var(--napari-purple) !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"] .napari-gallery-downloads .sphx-glr-download a:hover { + background-color: color-mix(in srgb, var(--napari-primary-blue), transparent 25%) !important; + text-decoration: underline; +} + +html[data-theme="dark"] .homepage-button:hover, +html[data-theme="dark"] .napari-gallery-downloads .sphx-glr-download a:hover { + background-color: color-mix(in srgb, var(--napari-purple), transparent 25%) !important; + text-decoration: underline; +} + +.napari-gallery-downloads .sphx-glr-download a:hover { + box-shadow: none; +} + +.napari-gallery-downloads { + display: flex; + flex-wrap: wrap; + gap: 0.375rem; + margin: 0 0 0.5rem; +} + +.napari-gallery-downloads .sphx-glr-download { + margin: 0; +} + +.sphx-glr-download-link-note, +.sphx-glr-download-jupyter, +.sphx-glr-download-python, +.sphx-glr-download-zip { + display: none; } /* Version warning banner color */ @@ -63,35 +90,6 @@ html[data-theme="dark"] div.sphx-glr-download a:hover { font-weight: 700; } -/* ── Homepage accent cards ─────────────────────────────────────────── - Install, Download cards with theme-aware napari blue. - sphinx-design marks every property !important, so we must too. */ - -.homepage-button { - display: block; -} - -html[data-theme="light"] .homepage-button { - background-color: var(--napari-primary-blue) !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; - border-color: var(--napari-purple) !important; - color: var(--napari-color-text-base) !important; -} - -html[data-theme="light"] .homepage-button:hover { - text-decoration: underline; - background-color: color-mix(in srgb, var(--napari-primary-blue), transparent 25%) !important; -} - -html[data-theme="dark"] .homepage-button:hover { - text-decoration: underline; - background-color: color-mix(in srgb, var(--napari-purple), transparent 25%) !important; -} /* ── Homepage quicklinks (icon columns) ──────────────────────────────── */ @@ -222,9 +220,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; } \ No newline at end of file From 15cabba52a1b7056cca63b7219ec97736412fa9e Mon Sep 17 00:00:00 2001 From: Tim Monko Date: Tue, 19 May 2026 19:14:03 -0500 Subject: [PATCH 2/6] clean up and comment --- docs/_static/custom.css | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/docs/_static/custom.css b/docs/_static/custom.css index 66daa6850..5e895a598 100644 --- a/docs/_static/custom.css +++ b/docs/_static/custom.css @@ -1,28 +1,13 @@ -/* ── Homepage accent cards ─────────────────────────────────────────── - Install, Download cards with theme-aware napari blue. - sphinx-design marks every property !important, so we must too. */ - -.homepage-button { - display: block; -} - -/* Reuse the homepage CTA skin for gallery download buttons. */ +/* ── Buttons for homepage and gallery ───────────────────────────────────── */ .homepage-button, .napari-gallery-downloads .sphx-glr-download a { background-image: none !important; border-radius: 4px; - font-weight: bold; text-align: center; text-decoration: none; } -.napari-gallery-downloads .sphx-glr-download a { - border: 1px solid transparent; - display: inline-block; - padding: 0.45rem 0.8rem; -} - html[data-theme="light"] .homepage-button, html[data-theme="light"] .napari-gallery-downloads .sphx-glr-download a { background-color: var(--napari-primary-blue) !important; @@ -49,21 +34,37 @@ html[data-theme="dark"] .napari-gallery-downloads .sphx-glr-download a:hover { text-decoration: underline; } -.napari-gallery-downloads .sphx-glr-download a:hover { - box-shadow: none; +/* makes homepage button take up width of column */ +.homepage-button { + display: block; } +/* Allow border override to show through on example buttons */ +.napari-gallery-downloads .sphx-glr-download a { + border: 1px solid transparent; + display: inline-block; + padding: 0.45rem 0.8rem; +} + +/* force sphinx-gallery download code to inherit text color */ +.napari-gallery-downloads .sphx-glr-download a code.download { + color: inherit !important; +} + +/* horizontally align and reduce lower margin of container */ .napari-gallery-downloads { display: flex; flex-wrap: wrap; gap: 0.375rem; - margin: 0 0 0.5rem; + margin: 0 0 0.35rem; } +/* remove spacing around download buttons */ .napari-gallery-downloads .sphx-glr-download { margin: 0; } +/* Remove the sphinx-gallery downloads note and buttons */ .sphx-glr-download-link-note, .sphx-glr-download-jupyter, .sphx-glr-download-python, @@ -90,7 +91,6 @@ html[data-theme="dark"] .napari-gallery-downloads .sphx-glr-download a:hover { font-weight: 700; } - /* ── Homepage quicklinks (icon columns) ──────────────────────────────── */ .homepage-quicklinks { From 1f9eebe9d9649635d4f7b4b855f9232e9fbe6dd2 Mon Sep 17 00:00:00 2001 From: Tim Monko Date: Tue, 19 May 2026 19:14:46 -0500 Subject: [PATCH 3/6] remove gallery download removals --- docs/_static/custom.css | 8 -------- 1 file changed, 8 deletions(-) diff --git a/docs/_static/custom.css b/docs/_static/custom.css index 5e895a598..3d44fdf74 100644 --- a/docs/_static/custom.css +++ b/docs/_static/custom.css @@ -64,14 +64,6 @@ html[data-theme="dark"] .napari-gallery-downloads .sphx-glr-download a:hover { margin: 0; } -/* Remove the sphinx-gallery downloads note and buttons */ -.sphx-glr-download-link-note, -.sphx-glr-download-jupyter, -.sphx-glr-download-python, -.sphx-glr-download-zip { - display: none; -} - /* Version warning banner color */ #bd-header-version-warning { background-color: color-mix(in srgb, var(--pst-color-secondary-bg), transparent 30%); From 7c8fa515a7b1b1e16ce1634024deee8fa9341182 Mon Sep 17 00:00:00 2001 From: Tim Monko Date: Tue, 19 May 2026 19:33:45 -0500 Subject: [PATCH 4/6] clean up for old implementation and add alt styling for homepage --- docs/_static/custom.css | 55 +++++++++++++++++++++++++++++++++++------ 1 file changed, 48 insertions(+), 7 deletions(-) diff --git a/docs/_static/custom.css b/docs/_static/custom.css index 3d44fdf74..9913bd405 100644 --- a/docs/_static/custom.css +++ b/docs/_static/custom.css @@ -1,7 +1,7 @@ /* ── Buttons for homepage and gallery ───────────────────────────────────── */ .homepage-button, -.napari-gallery-downloads .sphx-glr-download a { +div.sphx-glr-download a { background-image: none !important; border-radius: 4px; text-align: center; @@ -9,45 +9,78 @@ } html[data-theme="light"] .homepage-button, -html[data-theme="light"] .napari-gallery-downloads .sphx-glr-download a { +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; } html[data-theme="dark"] .homepage-button, -html[data-theme="dark"] .napari-gallery-downloads .sphx-glr-download a { +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; } html[data-theme="light"] .homepage-button:hover, -html[data-theme="light"] .napari-gallery-downloads .sphx-glr-download a: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="dark"] .homepage-button:hover, -html[data-theme="dark"] .napari-gallery-downloads .sphx-glr-download a: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; } + +.homepage-example-button { + border-radius: 4px; + text-align: center; + text-decoration: none; +} + +html[data-theme="light"] .homepage-example-button { + 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-example-button { + 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-example-button: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; +} + +html[data-theme="dark"] .homepage-example-button:hover { + background-color: var(--pst-color-background) !important; + border-color: var(--napari-purple) !important; + color: var(--napari-color-text-base) !important; + text-decoration: underline; +} + /* makes homepage button take up width of column */ .homepage-button { display: block; } /* Allow border override to show through on example buttons */ -.napari-gallery-downloads .sphx-glr-download a { +div.sphx-glr-download a { border: 1px solid transparent; display: inline-block; padding: 0.45rem 0.8rem; } /* force sphinx-gallery download code to inherit text color */ -.napari-gallery-downloads .sphx-glr-download a code.download { +div.sphx-glr-download a code.download { color: inherit !important; } @@ -64,6 +97,14 @@ html[data-theme="dark"] .napari-gallery-downloads .sphx-glr-download a:hover { margin: 0; } +/* Remove the sphinx-gallery downloads note and footer buttons. */ +/* .sphx-glr-download-link-note, +.sphx-glr-download-jupyter, +.sphx-glr-download-python, +.sphx-glr-download-zip { + display: none; +} */ + /* Version warning banner color */ #bd-header-version-warning { background-color: color-mix(in srgb, var(--pst-color-secondary-bg), transparent 30%); From 9b17021f483666656c5a9c636d2f563a88c9c706 Mon Sep 17 00:00:00 2001 From: Tim Monko Date: Wed, 20 May 2026 14:16:37 -0500 Subject: [PATCH 5/6] reorg css --- docs/_static/custom.css | 76 +++++++++++++++++------------------------ 1 file changed, 31 insertions(+), 45 deletions(-) diff --git a/docs/_static/custom.css b/docs/_static/custom.css index 9913bd405..908f8fd1f 100644 --- a/docs/_static/custom.css +++ b/docs/_static/custom.css @@ -1,6 +1,7 @@ /* ── Buttons for homepage and gallery ───────────────────────────────────── */ .homepage-button, +.homepage-example-button, div.sphx-glr-download a { background-image: none !important; border-radius: 4px; @@ -8,6 +9,36 @@ div.sphx-glr-download a { text-decoration: none; } +/* makes homepage button take up width of column */ +.homepage-button { + display: block; +} + +/* Allow border override to show through on example buttons */ +div.sphx-glr-download a { + border: 1px solid transparent; + display: inline-block; + padding: 0.45rem 0.8rem; +} + +/* force sphinx-gallery download code to inherit text color */ +div.sphx-glr-download a code.download { + color: inherit !important; +} + +/* horizontally align and reduce lower margin of container */ +.napari-gallery-downloads { + display: flex; + flex-wrap: wrap; + gap: 0.375rem; + margin: 0 0 0.35rem; +} + +/* remove spacing around download buttons */ +.napari-gallery-downloads .sphx-glr-download { + margin: 0; +} + html[data-theme="light"] .homepage-button, html[data-theme="light"] div.sphx-glr-download a { background-color: var(--napari-primary-blue) !important; @@ -34,13 +65,6 @@ html[data-theme="dark"] div.sphx-glr-download a:hover { text-decoration: underline; } - -.homepage-example-button { - border-radius: 4px; - text-align: center; - text-decoration: none; -} - html[data-theme="light"] .homepage-example-button { background-color: var(--pst-color-background) !important; border-color: var(--napari-primary-blue) !important; @@ -67,44 +91,6 @@ html[data-theme="dark"] .homepage-example-button:hover { text-decoration: underline; } -/* makes homepage button take up width of column */ -.homepage-button { - display: block; -} - -/* Allow border override to show through on example buttons */ -div.sphx-glr-download a { - border: 1px solid transparent; - display: inline-block; - padding: 0.45rem 0.8rem; -} - -/* force sphinx-gallery download code to inherit text color */ -div.sphx-glr-download a code.download { - color: inherit !important; -} - -/* horizontally align and reduce lower margin of container */ -.napari-gallery-downloads { - display: flex; - flex-wrap: wrap; - gap: 0.375rem; - margin: 0 0 0.35rem; -} - -/* remove spacing around download buttons */ -.napari-gallery-downloads .sphx-glr-download { - margin: 0; -} - -/* Remove the sphinx-gallery downloads note and footer buttons. */ -/* .sphx-glr-download-link-note, -.sphx-glr-download-jupyter, -.sphx-glr-download-python, -.sphx-glr-download-zip { - display: none; -} */ - /* Version warning banner color */ #bd-header-version-warning { background-color: color-mix(in srgb, var(--pst-color-secondary-bg), transparent 30%); From a36aabe9b9e9d34b8b588c2b8b5a6119f42bf568 Mon Sep 17 00:00:00 2001 From: Tim Monko Date: Wed, 20 May 2026 14:37:20 -0500 Subject: [PATCH 6/6] rename button classes --- docs/_static/custom.css | 22 +++++++++++----------- docs/index.md | 6 +++--- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/docs/_static/custom.css b/docs/_static/custom.css index 908f8fd1f..800cecda4 100644 --- a/docs/_static/custom.css +++ b/docs/_static/custom.css @@ -1,7 +1,7 @@ /* ── Buttons for homepage and gallery ───────────────────────────────────── */ -.homepage-button, -.homepage-example-button, +.button-primary, +.button-alt, div.sphx-glr-download a { background-image: none !important; border-radius: 4px; @@ -10,7 +10,7 @@ div.sphx-glr-download a { } /* makes homepage button take up width of column */ -.homepage-button { +.button-primary { display: block; } @@ -39,52 +39,52 @@ div.sphx-glr-download a code.download { margin: 0; } -html[data-theme="light"] .homepage-button, +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; } -html[data-theme="dark"] .homepage-button, +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; } -html[data-theme="light"] .homepage-button:hover, +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="dark"] .homepage-button:hover, +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"] .homepage-example-button { +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-example-button { +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-example-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; } -html[data-theme="dark"] .homepage-example-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; diff --git a/docs/index.md b/docs/index.md index b775ffabb..aa3935234 100644 --- a/docs/index.md +++ b/docs/index.md @@ -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** ``` @@ -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.

- Examples gallery - + Examples gallery +