From e49bb9da7ad72fefdea5d3e1c8aea7c93b168e79 Mon Sep 17 00:00:00 2001 From: Eshita Badhe Date: Wed, 18 Feb 2026 18:37:42 +0530 Subject: [PATCH] fix(guides): resolve white hover background in dark mode cards - Removed hardcoded #ffffff hover background - Applied dark-mode specific hover styling - Ensured consistent card elevation and contrast --- frontend/css/guides.css | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/frontend/css/guides.css b/frontend/css/guides.css index 67ed87d..312eb2e 100644 --- a/frontend/css/guides.css +++ b/frontend/css/guides.css @@ -888,4 +888,34 @@ html { .dark-mode .mistakes-list li:hover p { color: #f9fafb !important; +} + +/* ========================================= + DARK MODE – FIX WHITE HOVER BACKGROUND + ========================================= */ + +body.dark-mode .practice-item, +body.dark-mode .pr-steps li, +body.dark-mode .guide-list li, +body.dark-mode .mistakes-list li { + background: #111827; /* dark card base */ + border: 1px solid #1f2937; +} + +/* Hover state stays dark */ +body.dark-mode .practice-item:hover, +body.dark-mode .pr-steps li:hover, +body.dark-mode .guide-list li:hover, +body.dark-mode .mistakes-list li:hover { + background: #1f2937; /* slightly lifted dark */ + box-shadow: 0 14px 38px rgba(0, 0, 0, 0.75); + transform: translateY(-6px); +} + +/* Ensure text stays visible */ +body.dark-mode .practice-item h4, +body.dark-mode .pr-steps h4, +body.dark-mode .guide-list h4, +body.dark-mode .mistakes-list p { + color: #f9fafb; } \ No newline at end of file