Improve language toggle button design

- Add globe icon to language toggle
- Style with border, proper padding, and hover effects
- Match overall nav design language
- Use Inter font for Arabic mode to show 'EN' consistently
This commit is contained in:
fahed
2026-02-03 16:32:31 +03:00
parent fa43cf8dd1
commit 0c7987493e
2 changed files with 39 additions and 0 deletions

View File

@@ -307,6 +307,40 @@ html[dir="rtl"] {
opacity: 1;
}
/* Language Toggle Button */
.nav-lang-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 14px;
border-radius: 8px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
background: transparent;
border: 1px solid var(--border);
color: var(--text-muted);
min-width: 44px;
letter-spacing: 0.02em;
}
.nav-lang-toggle:hover {
background: var(--surface);
color: var(--text-primary);
border-color: var(--primary);
}
.nav-lang-toggle:active {
transform: scale(0.96);
}
/* RTL adjustments */
html[dir="rtl"] .nav-lang-toggle {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* Main Content */
.dashboard,
.comparison {