diff --git a/static/css/components/languageSelector.css b/static/css/components/languageSelector.css index 9f1456a7..aad23037 100644 --- a/static/css/components/languageSelector.css +++ b/static/css/components/languageSelector.css @@ -1,7 +1,6 @@ /* Language Selector - Custom Dropdown */ .language-selector { position: relative; - margin-right: 15px; } .language-selector-toggle { @@ -108,3 +107,71 @@ .language-option.active .lang-check { opacity: 1; } + +/* ── Language selector inside user menu ── */ +.user-menu .language-selector { + width: 100%; +} + +/* Match user-menu-item appearance exactly */ +.user-menu .language-selector-toggle { + width: 100%; + background: none !important; + border: none !important; + border-radius: 0 !important; + box-shadow: none !important; + outline: none !important; + padding: 12px 20px; + gap: 12px; + color: var(--color-text-dark); + font-size: 14px; + cursor: pointer; +} + +.user-menu .language-selector-toggle:hover, +.user-menu .language-selector-toggle:focus { + background: var(--color-bg-hover) !important; + border: none !important; + outline: none !important; +} + +.user-menu .language-selector-toggle i.fa-globe { + width: 20px; + text-align: center; + font-size: 15px; + color: var(--color-text-subtle); +} + +.user-menu .language-selector-toggle .lang-code { + font-weight: 500; + font-size: 13px; + color: var(--color-text-dark); +} + +/* Inline accordion — no floating */ +.user-menu .language-selector-dropdown { + position: static !important; + box-shadow: none !important; + border: none !important; + border-top: 1px solid var(--color-border-light); + border-radius: 0 !important; + background: var(--color-bg-muted); + max-height: 0; + overflow: hidden; + opacity: 1 !important; + visibility: visible !important; + transform: none !important; + transition: max-height 0.25s ease; + z-index: auto !important; +} + +.user-menu .language-selector.open .language-selector-dropdown { + max-height: 260px; + overflow-y: auto; +} + +/* Language options inside user menu — compact rows */ +.user-menu .language-option { + padding: 10px 20px 10px 28px; + font-size: 13.5px; +} diff --git a/static/css/components/userMenu.css b/static/css/components/userMenu.css index e5a3dedc..29ec2e66 100644 --- a/static/css/components/userMenu.css +++ b/static/css/components/userMenu.css @@ -48,6 +48,7 @@ position: absolute; top: calc(100% + 10px); right: 0; + left: auto; width: 300px; background: var(--color-bg-surface); border-radius: 16px; @@ -63,6 +64,11 @@ display: block; } +[dir="rtl"] .user-menu { + right: auto; + left: 0; +} + @keyframes userMenuIn { from { opacity: 0; diff --git a/static/css/layout/topbar.css b/static/css/layout/topbar.css index 687ce831..d0a392ea 100644 --- a/static/css/layout/topbar.css +++ b/static/css/layout/topbar.css @@ -45,17 +45,45 @@ font-size: 20px; } -/* Mobile responsive styles for top bar */ -@media (max-width: 768px) { - .top-bar { - padding: 0 16px; - } +/* Mobile search toggle button — hidden on desktop */ +.search-toggle-btn { + display: none; + background: none; + border: none; + padding: 10px; + cursor: pointer; + color: var(--color-text-secondary); + border-radius: 8px; + font-size: 18px; + transition: + background-color 0.2s, + color 0.2s; + flex-shrink: 0; +} - .sidebar-toggle { - display: flex; - align-items: center; - justify-content: center; - } +.search-toggle-btn:hover { + background-color: var(--color-border); +} + +/* Back button inside expanded mobile search — hidden everywhere by default */ +.search-back-btn { + display: none; + background: none; + border: none; + padding: 10px; + cursor: pointer; + color: var(--color-text-secondary); + border-radius: 8px; + font-size: 18px; + transition: + background-color 0.2s, + color 0.2s; + flex-shrink: 0; +} + +.search-back-btn:hover { + background-color: var(--color-border); + color: var(--color-text-heading); } .search-container { @@ -163,3 +191,57 @@ align-items: center; gap: 12px; } + +/* Mobile responsive styles for top bar */ +@media (max-width: 768px) { + .top-bar { + padding: 0 16px; + } + + .sidebar-toggle { + display: flex; + align-items: center; + justify-content: center; + } + + /* Hide full search bar on mobile by default */ + .search-container { + display: none; + } + + /* Show icon-only search button; push it to the right before user-controls */ + .search-toggle-btn { + display: flex; + align-items: center; + justify-content: center; + margin-left: auto; + } + + /* Expanded mobile search: full-width overlay of the top bar */ + .top-bar--search-active .search-back-btn { + display: flex; + align-items: center; + justify-content: center; + } + + .top-bar--search-active .search-container { + display: flex; + flex-grow: 1; + max-width: none; + margin: 0; + } + + .top-bar--search-active .search-icon { + display: none; + } + + .top-bar--search-active .search-container input { + padding-left: 16px; + } + + .top-bar--search-active .sidebar-toggle, + .top-bar--search-active .search-toggle-btn, + .top-bar--search-active .user-controls { + display: none; + } +} diff --git a/static/index.html b/static/index.html index e2ad42c0..c32cdcbd 100644 --- a/static/index.html +++ b/static/index.html @@ -118,6 +118,14 @@ + + + +
@@ -127,8 +135,6 @@
-
-
+