soroushdes/hamkadr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Fix] Mobile hamburger invisible + tour spotlighting hidden nav
CI/CD / CI · dotnet build (push) Successful in 52s
Details
CI/CD / Deploy · hamkadr (push) Successful in 57s
Details

Browse Source 
Hamburger bars used the undefined var(--text) (this theme defines --ink), so they rendered transparent and the button looked blank on mobile. Switch the three var(--text) uses (burger bars, toast, tour bubble) to var(--ink). Tour: visible() used offsetParent/rect, which the collapsed mobile nav (visibility:hidden) still satisfies, so the tour tried to spotlight hidden links and looked broken on mobile. Use element.checkVisibility({checkVisibilityCSS}) (with a computed-style ancestor-walk fallback) so only truly-visible targets are toured — mobile now shows welcome + menu, desktop shows the full nav walkthrough.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-04 18:06:23 +03:30
parent cea27c8684
commit 42deac1261
2 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/JobsMedical.Web/wwwroot/css/site.css
+3 -3
View File
@@ -82,7 +82,7 @@ a { color: inherit; text-decoration: none; }
width: 42px; height: 42px; padding: 9px; border-radius: 10px; cursor: pointer;
border: 1px solid var(--line); background: var(--surface);
}
.nav-burger span { display: block; height: 2px; border-radius: 2px; background: var(--text); transition: transform .2s, opacity .2s; }
.nav-burger span { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .2s, opacity .2s; }
.nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
.nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@@ -96,7 +96,7 @@ a { color: inherit; text-decoration: none; }
.toast {
display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--primary);
border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.16); color: var(--text);
border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.16); color: var(--ink);
opacity: 0; transform: translateY(12px); transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: translateY(0); }
@@ -243,7 +243,7 @@ label { font-size: 13px; }
outline: 2px solid var(--accent); transition: all .2s ease;
}
.tour-bubble {
position: fixed; z-index: 1001; background: var(--surface); color: var(--text);
position: fixed; z-index: 1001; background: var(--surface); color: var(--ink);
border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.28);
padding: 16px; max-width: 320px;
}