From d56d73dd9880d1f09ca0a71aa275fe3b2d5c588a Mon Sep 17 00:00:00 2001 From: C-Achard Date: Wed, 11 Feb 2026 09:35:04 +0100 Subject: [PATCH 1/3] Add custom CSS --- _config.yml | 2 + docs/_static/custom.css | 113 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 115 insertions(+) create mode 100644 docs/_static/custom.css diff --git a/_config.yml b/_config.yml index a24fcaf718..b6e02a5269 100644 --- a/_config.yml +++ b/_config.yml @@ -7,6 +7,8 @@ sphinx: config: autodoc_mock_imports: ["wx", "matplotlib", "qtpy", "PySide6", "napari", "shiboken6"] mermaid_output_format: raw + html_static_path: ["docs/_static"] + html_css_files: ["custom.css"] extra_extensions: - numpydoc - sphinxcontrib.mermaid diff --git a/docs/_static/custom.css b/docs/_static/custom.css new file mode 100644 index 0000000000..5af6ffa10d --- /dev/null +++ b/docs/_static/custom.css @@ -0,0 +1,113 @@ +/* custom.css */ + +html[data-theme="light"] { + --sidebar-bg-color: #fefefe; /* #d2efff; */ + --sidebar-text-color: #000000; + --sidebar-highlight-color: #95489c; + --sidebar-hover-text-color: #de6be8; /* #0044bd; */ + --header-bg-color: #ffffff; + --logo-filter: none; + --button-color: #fff; + --footer-text-color: #000000; +} + +html[data-theme="dark"] { + --sidebar-bg-color: #455364; /* #053346; */ + --sidebar-text-color: #ffffff; + --sidebar-highlight-color: #95489c; + --sidebar-hover-text-color: #de6be8; /* #00aeef; */ + --header-bg-color: #414141; + --logo-filter: grayscale(100%) brightness(20); + --button-color: #fff; + --footer-text-color: #b9b9b9; +} + +/* Sidebar */ +.bd-sidebar-primary.bd-sidebar { + background-color: var(--sidebar-bg-color); + color: var(--sidebar-text-color); +} + +.bd-sidebar-primary.bd-sidebar a { + color: var(--sidebar-text-color); +} + +.bd-sidebar-primary.bd-sidebar a:hover { + color: var(--sidebar-hover-text-color); +} + +/* Sidebar ToC */ +.toctree-l1.current.active { + color: var(--sidebar-highlight-color); +} + +.toctree-l1.current.active * { + color: inherit; +} + +/* Sidebar footer */ +.sidebar-primary-items__end::after { + content: "DeepLabCut"; + display: block; + text-align: center; + font-size: 12px; + color: var(--footer-text-color); + /* If you want an image at the footer */ + /* background-image: url("images/logo_background.png"); */ + background-size: contain; + background-repeat: no-repeat; + background-position: center; + padding-top: 150px; + height: 100px; + z-index: 1; +} + +/* Logo (top of sidebar) */ +.navbar-brand img { + filter: var(--logo-filter); +} + +/* Header */ +.bd-header-article { + /* position: fixed; */ + /* background-color: var(--header-bg-color); */ + background-color: rgba(0, 0, 0, 0); + backdrop-filter: blur(2px); + z-index: 1000; +} + +/* Header background image */ +.bd-header-article::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + /* background-image: url("images/header.jpg"); */ + /* background-size: cover; */ + /* background-repeat: no-repeat; */ + /* background-position: center; */ + opacity: 0.75; + z-index: -1; +} + +/* Header buttons */ +.article-header-buttons .btn { + color: var(--button-color); + z-index: 1; +} + +.article-header-buttons .btn:hover { + opacity: 0.8; + z-index: 1; +} + +.article-header-buttons .btn:hover { + opacity: 0.8; + -index: 1; +} + +.article-header-buttons .btn:hover { + opacity: 0.8; +} From 28dfee5bfa8f2f4a65ea4133dc294386c8fc452f Mon Sep 17 00:00:00 2001 From: C-Achard Date: Wed, 11 Feb 2026 10:05:47 +0100 Subject: [PATCH 2/3] Update theme colors and header transparency --- docs/_static/custom.css | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/docs/_static/custom.css b/docs/_static/custom.css index 5af6ffa10d..246a311e2c 100644 --- a/docs/_static/custom.css +++ b/docs/_static/custom.css @@ -1,11 +1,11 @@ /* custom.css */ html[data-theme="light"] { - --sidebar-bg-color: #fefefe; /* #d2efff; */ + --sidebar-bg-color: #ac64e67f; /* #d2efff; */ --sidebar-text-color: #000000; - --sidebar-highlight-color: #95489c; - --sidebar-hover-text-color: #de6be8; /* #0044bd; */ - --header-bg-color: #ffffff; + --sidebar-highlight-color: #73439a; + --sidebar-hover-text-color: #39214d; /* #0044bd; */ + --header-bg-color: rgba(115, 67, 154, 0.75); /* #053346; */ --logo-filter: none; --button-color: #fff; --footer-text-color: #000000; @@ -14,10 +14,10 @@ html[data-theme="light"] { html[data-theme="dark"] { --sidebar-bg-color: #455364; /* #053346; */ --sidebar-text-color: #ffffff; - --sidebar-highlight-color: #95489c; - --sidebar-hover-text-color: #de6be8; /* #00aeef; */ - --header-bg-color: #414141; - --logo-filter: grayscale(100%) brightness(20); + --sidebar-highlight-color: #de6be8; + --sidebar-hover-text-color: #ea57f8; /* #00aeef; */ + --header-bg-color: rgba(115, 67, 154, 0.45); /* #053346; */ + /* --logo-filter: grayscale(100%) brightness(20); */ --button-color: #fff; --footer-text-color: #b9b9b9; } @@ -47,7 +47,7 @@ html[data-theme="dark"] { /* Sidebar footer */ .sidebar-primary-items__end::after { - content: "DeepLabCut"; + content: "The DeepLabCut Community"; display: block; text-align: center; font-size: 12px; @@ -70,8 +70,7 @@ html[data-theme="dark"] { /* Header */ .bd-header-article { /* position: fixed; */ - /* background-color: var(--header-bg-color); */ - background-color: rgba(0, 0, 0, 0); + background-color: var(--header-bg-color); backdrop-filter: blur(2px); z-index: 1000; } From 9548caa2b7eb0b5bcbe7fe5e0954f1d121531d5c Mon Sep 17 00:00:00 2001 From: Cyril Achard Date: Wed, 11 Feb 2026 10:19:56 +0100 Subject: [PATCH 3/3] Apply suggestions from code review Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- docs/_static/custom.css | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/docs/_static/custom.css b/docs/_static/custom.css index 246a311e2c..8aaee79994 100644 --- a/docs/_static/custom.css +++ b/docs/_static/custom.css @@ -64,7 +64,7 @@ html[data-theme="dark"] { /* Logo (top of sidebar) */ .navbar-brand img { - filter: var(--logo-filter); + filter: var(--logo-filter, none); } /* Header */ @@ -102,11 +102,3 @@ html[data-theme="dark"] { z-index: 1; } -.article-header-buttons .btn:hover { - opacity: 0.8; - -index: 1; -} - -.article-header-buttons .btn:hover { - opacity: 0.8; -}