From 7161aaa03d8d4ea844601361a891014d6f5b607e Mon Sep 17 00:00:00 2001 From: Darren Griffin Date: Tue, 11 Nov 2025 20:04:53 +0000 Subject: [PATCH 1/8] Fix mobile navigation --- themes/esphome-theme/assets/css/main.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/themes/esphome-theme/assets/css/main.css b/themes/esphome-theme/assets/css/main.css index fcc5a5651c..059f8e55e1 100644 --- a/themes/esphome-theme/assets/css/main.css +++ b/themes/esphome-theme/assets/css/main.css @@ -1262,9 +1262,6 @@ figcaption { top: 0; right: 0; } - .nav-links.active { - overflow-y: auto; - } } /* Responsive */ From 8297e5058a62d424c10b714650888dc80ef62526 Mon Sep 17 00:00:00 2001 From: Darren Griffin Date: Tue, 11 Nov 2025 20:16:03 +0000 Subject: [PATCH 2/8] Improvement to layout --- themes/esphome-theme/assets/css/main.css | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/themes/esphome-theme/assets/css/main.css b/themes/esphome-theme/assets/css/main.css index 059f8e55e1..464ce3ccb8 100644 --- a/themes/esphome-theme/assets/css/main.css +++ b/themes/esphome-theme/assets/css/main.css @@ -1300,14 +1300,11 @@ figcaption { } .nav-links { - position: absolute; - top: 100%; - right: 0; - background-color: var(--nav-bg); + background-color: var(--background-color); flex-direction: column; align-items: stretch; padding: 1em; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + text-align: right; z-index: 0; display: none; height: 0; From b8827a8464a3ea04381ef413d90ddc55a10e5a78 Mon Sep 17 00:00:00 2001 From: Darren Griffin Date: Wed, 12 Nov 2025 09:48:16 +0000 Subject: [PATCH 3/8] Fix floating nav --- themes/esphome-theme/assets/css/main.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/themes/esphome-theme/assets/css/main.css b/themes/esphome-theme/assets/css/main.css index 464ce3ccb8..4fc6cd4f01 100644 --- a/themes/esphome-theme/assets/css/main.css +++ b/themes/esphome-theme/assets/css/main.css @@ -1300,11 +1300,14 @@ figcaption { } .nav-links { - background-color: var(--background-color); + position: absolute; + top: 100%; + right: 0; + background-color: var(--nav-bg); flex-direction: column; align-items: stretch; padding: 1em; - text-align: right; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); z-index: 0; display: none; height: 0; @@ -1336,9 +1339,6 @@ figcaption { } .dropdown-content { - position: absolute; - top: 0; - right: 200px; box-shadow: none; margin-top: 0.5em; padding-left: 1em; From ae04f95e40ee0fdcbff3e6ec7101963280e144d9 Mon Sep 17 00:00:00 2001 From: Darren Griffin Date: Wed, 12 Nov 2025 09:54:21 +0000 Subject: [PATCH 4/8] Style fixes --- themes/esphome-theme/assets/css/main.css | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/themes/esphome-theme/assets/css/main.css b/themes/esphome-theme/assets/css/main.css index 4fc6cd4f01..96f7bef880 100644 --- a/themes/esphome-theme/assets/css/main.css +++ b/themes/esphome-theme/assets/css/main.css @@ -23,7 +23,7 @@ --getting-started-text: #333; --nav-bg: #fff; --nav-text: #333; - --dropdown-bg: #fff; + --dropdown-bg: var(--background-color); --dropdown-text: #333; --footer-bg: #111; --footer-text: #e1e1e1; @@ -522,7 +522,7 @@ img.align-right, figure.align-right, .figure.align-right, object.align-right { position: absolute; background-color: var(--dropdown-bg); min-width: 200px; - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); + text-align: right; z-index: 1; border-radius: 4px; } @@ -533,11 +533,6 @@ img.align-right, figure.align-right, .figure.align-right, object.align-right { display: block; } -.dropdown-content a:hover { - background-color: var(--sidebar-background); - color: var(--nav-text); -} - /* Search Box Styles */ .nav-search { margin-left: 20px; @@ -1341,8 +1336,6 @@ figcaption { .dropdown-content { box-shadow: none; margin-top: 0.5em; - padding-left: 1em; - padding-right: 1em; } .dropdown-content a { From 62f760f640183fc86b4b08577ada0e675b79b96d Mon Sep 17 00:00:00 2001 From: Darren Griffin Date: Wed, 12 Nov 2025 09:57:50 +0000 Subject: [PATCH 5/8] Add overflow property --- themes/esphome-theme/assets/css/main.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/themes/esphome-theme/assets/css/main.css b/themes/esphome-theme/assets/css/main.css index 96f7bef880..fbe97a9d06 100644 --- a/themes/esphome-theme/assets/css/main.css +++ b/themes/esphome-theme/assets/css/main.css @@ -13,7 +13,7 @@ --nav-transition-down: transform 0.1s ease-out; --max-page-width: 1500px; --feature-card-bg: #fff; - --feature-card-text: #111; + --feature-card-text: #111;f --feature-icon-color: #00bfff; --btn-primary-color: #007BBB; --btn-primary-hover-color: #0399e1; @@ -1304,6 +1304,7 @@ figcaption { padding: 1em; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); z-index: 0; + overflow: auto; display: none; height: 0; scrollbar-width: none; /* Firefox */ From 09418695c31037154b9ad6f04ba10fb887073aba Mon Sep 17 00:00:00 2001 From: Darren Griffin Date: Wed, 12 Nov 2025 09:58:13 +0000 Subject: [PATCH 6/8] Fix typo in CSS variable declaration --- themes/esphome-theme/assets/css/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/esphome-theme/assets/css/main.css b/themes/esphome-theme/assets/css/main.css index fbe97a9d06..cbab46ce29 100644 --- a/themes/esphome-theme/assets/css/main.css +++ b/themes/esphome-theme/assets/css/main.css @@ -13,7 +13,7 @@ --nav-transition-down: transform 0.1s ease-out; --max-page-width: 1500px; --feature-card-bg: #fff; - --feature-card-text: #111;f + --feature-card-text: #111; --feature-icon-color: #00bfff; --btn-primary-color: #007BBB; --btn-primary-hover-color: #0399e1; From b5a22d0a1101edaa9e73f560d2ee77b1af9ae7cc Mon Sep 17 00:00:00 2001 From: Darren Griffin Date: Wed, 12 Nov 2025 10:06:53 +0000 Subject: [PATCH 7/8] Remove shadow --- themes/esphome-theme/assets/css/main.css | 1 - 1 file changed, 1 deletion(-) diff --git a/themes/esphome-theme/assets/css/main.css b/themes/esphome-theme/assets/css/main.css index cbab46ce29..8fce8813e4 100644 --- a/themes/esphome-theme/assets/css/main.css +++ b/themes/esphome-theme/assets/css/main.css @@ -705,7 +705,6 @@ img.align-right, figure.align-right, .figure.align-right, object.align-right { .dropdown-content { background: #23272e; color: #f1f1f1; - box-shadow: 0 8px 16px rgba(0,0,0,0.7); } .dropdown-content a { From b9b027eae7fd2d28a6157d65d9352c3f85ba01e7 Mon Sep 17 00:00:00 2001 From: Darren Griffin Date: Wed, 12 Nov 2025 10:07:57 +0000 Subject: [PATCH 8/8] Remove hover styles from dropdown links Removed hover styles for dropdown links. --- themes/esphome-theme/assets/css/main.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/themes/esphome-theme/assets/css/main.css b/themes/esphome-theme/assets/css/main.css index 8fce8813e4..8237f4bc40 100644 --- a/themes/esphome-theme/assets/css/main.css +++ b/themes/esphome-theme/assets/css/main.css @@ -711,11 +711,6 @@ img.align-right, figure.align-right, .figure.align-right, object.align-right { color: #99e6fc; } - .dropdown-content a:hover { - background: #1f2937; - color: #fff; - } - .footer, .footer-content { background: #181c20; color: #f1f1f1;