From b4bfe432ce7047c3f5a3242ea16568cdac344d60 Mon Sep 17 00:00:00 2001 From: egrace479 Date: Fri, 12 Dec 2025 20:28:46 -0500 Subject: [PATCH 1/4] fix #87: set gh panel color to match on mobile/small screens --- docs/stylesheets/extra.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index d38ac35..da7edc4 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -47,6 +47,15 @@ Adjust admonitions and links to match (where otherwise clashed) --md-accent-fg-color: #9bcb5e; } +/* GitHub panel color (mobile and small screen, issue 87) */ +.md-nav__source { + background-color: var(--md-primary-fg-color); +} + +.md-source { + background-color: var(--md-primary-fg-color); +} + /* Set admonition (Note) colors to match Dark Teal used for URLs */ /* border color */ .md-typeset .admonition.note, .md-typeset details.note { From 49e86abef34978c144db9aad270e6beaf5f5fd31 Mon Sep 17 00:00:00 2001 From: egrace479 Date: Fri, 12 Dec 2025 20:37:23 -0500 Subject: [PATCH 2/4] fix menu sidbar links in darkmode mobile/narrow screen --- docs/stylesheets/extra.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index da7edc4..43ec4f7 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -107,3 +107,8 @@ Adjust admonitions and links to match (where otherwise clashed) --md-primary-fg-color: #5d8095; --md-accent-fg-color: #92991c; } + +/* Dark mode active link color set separately for menu links on mobile/narrow screens */ +[data-md-color-scheme="slate"] .md-nav .md-nav__link--active { + color: #0097b2; +} From 9318260ce1f5c49bec6c4a3cbbe0a72ab418479a Mon Sep 17 00:00:00 2001 From: egrace479 Date: Thu, 18 Dec 2025 12:15:03 -0500 Subject: [PATCH 3/4] Set color variables for more efficient and clear code --- docs/stylesheets/extra.css | 53 ++++++++++++++++++-------------------- 1 file changed, 25 insertions(+), 28 deletions(-) diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index 43ec4f7..8a12509 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -27,24 +27,21 @@ based on this suggestion: https://github.com/squidfunk/mkdocs-material/discussio } /* -Define Imageomics colors for theme (light and dark) -Primary Colors: -- Imageomics Green: #92991c -- Imageomics Blue: #5d8095 -- Dark Teal: #0097b2 -- White: #FFFFFF -Accent Colors: -- Light Green: #9bcb5e -- Red: #bb0000 -- NSF Gold: #caae54 -- NSF Blue: #61a5d6 -Adjust admonitions and links to match (where otherwise clashed) -*/ - -/* Light mode colors: Imageomics Blue and Light Green */ +Define Imageomics colors for theme (light and dark) */ +body { + --color-imageomics-green: #92991c; + --color-imageomics-blue: #5d8095; + --color-dark-teal: #0097b2; + --color-dark-teal-10: #0097b21a; /* 10% alpha */ + --color-white: #FFFFFF; + --color-light-green: #9bcb5e; + --color-light-green-10: #9bcb5e1a; /* 10% alpha */ +} + +/* Light mode colors */ [data-md-color-scheme="default"] { - --md-primary-fg-color: #5d8095; - --md-accent-fg-color: #9bcb5e; + --md-primary-fg-color: var(--color-imageomics-blue); + --md-accent-fg-color: var(--color-light-green); } /* GitHub panel color (mobile and small screen, issue 87) */ @@ -59,18 +56,18 @@ Adjust admonitions and links to match (where otherwise clashed) /* Set admonition (Note) colors to match Dark Teal used for URLs */ /* border color */ .md-typeset .admonition.note, .md-typeset details.note { - border-color: #0097b2; - box-shadow: #0097b21a; + border-color: var(--color-dark-teal); + box-shadow: var(--color-dark-teal-10); } /* icon color */ .md-typeset .admonition.note > .admonition-title::before { - background-color: #0097b2; + background-color: var(--color-dark-teal); } /* shaded part (title/heading) */ .md-typeset .note>.admonition-title,.md-typeset .note>summary { - background-color: #0097b21a; + background-color: var(--color-dark-teal-10); } /* Set admonition (question) colors to match the accent green @@ -78,7 +75,7 @@ Adjust admonitions and links to match (where otherwise clashed) /* border color */ .md-typeset .admonition.question, .md-typeset details.question { border-color: var(--md-accent-fg-color); - box-shadow: #9bcb5e1a; + box-shadow: var(--color-light-green-10); } /* icon color */ @@ -88,27 +85,27 @@ Adjust admonitions and links to match (where otherwise clashed) /* shaded part (title/heading) */ .md-typeset .question>.admonition-title,.md-typeset .question>summary { - background-color: #9bcb5e1a; + background-color: var(--color-light-green-10); } /* Set URL colors to Dark Teal for better contrast */ /* Content URLs */ .md-typeset a { - color: #0097b2; + color: var(--color-dark-teal); } /* Navigation URL (side panel contents) */ .md-nav .md-nav__link--active { - color: #0097b2; + color: var(--color-dark-teal); } /* Dark mode colors: Imageomics Blue and Imageomics Green */ [data-md-color-scheme="slate"] { - --md-primary-fg-color: #5d8095; - --md-accent-fg-color: #92991c; + --md-primary-fg-color: var(--color-imageomics-blue); + --md-accent-fg-color: var(--color-imageomics-green); } /* Dark mode active link color set separately for menu links on mobile/narrow screens */ [data-md-color-scheme="slate"] .md-nav .md-nav__link--active { - color: #0097b2; + color: var(--color-dark-teal); } From 80c8cf4a128b3b5dd175c38504b6c8dbc4010285 Mon Sep 17 00:00:00 2001 From: egrace479 Date: Thu, 18 Dec 2025 12:27:34 -0500 Subject: [PATCH 4/4] Add fix for #87, following what was done in ABC Guide ref: https://github.com/ABC-Center/ABC-guide/pull/19 --- docs/stylesheets/extra.css | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index 8a12509..e27c1b6 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -105,7 +105,15 @@ body { --md-accent-fg-color: var(--color-imageomics-green); } -/* Dark mode active link color set separately for menu links on mobile/narrow screens */ -[data-md-color-scheme="slate"] .md-nav .md-nav__link--active { - color: var(--color-dark-teal); +/* Small screen adjustments (from ABC-Guide) */ +@media screen and (max-width: 76.2344em) { + /* Dark mode custom active parent color (side panel) */ + [data-md-color-scheme="slate"] .md-nav .md-nav__item--active > .md-nav__link { + color: var(--color-dark-teal); + } + + /* Dark mode custom active parent hover color (side panel) */ + [data-md-color-scheme="slate"] .md-nav .md-nav__item--active:hover > .md-nav__link { + color: var(--color-imageomics-green); + } }