mark/msos
0
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign language switcher with circular flag icons

Browse Source 
Desktop dropdown and mobile modal now show circular country flags (flag-icons) with clean language names and an active-language highlight, driven by the page lang via main.js.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
popovskikandClaude Opus 4.8 committed 2026-07-31 22:06:10 +02:00
1 parent 44433d4145
commit 95b2484117
182 files changed
+1294 -1095
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

css/layout/_header.css
+32 -15
View File
@@ -120,17 +120,19 @@
.current-lang .fa-chevron-down { transition: transform 0.3s ease-in-out; }
.lang-dropdown {
display: block;
display: flex;
flex-direction: column;
gap: 4px;
position: absolute;
top: calc(100% + 8px);
right: 0;
background-color: #FFFFFF;
border: 1px solid #EAECF0;
border-radius: 8px;
box-shadow: 0 8px 16px rgba(0,0,0,0.08);
border-radius: 12px;
box-shadow: 0 20px 24px -4px rgba(16,24,40,0.10), 0 8px 8px -4px rgba(16,24,40,0.04);
padding: 8px;
z-index: 1001;
min-width: 180px;
min-width: 200px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
@@ -144,16 +146,29 @@
.language-selector.active .current-lang .fa-chevron-down { transform: rotate(180deg); }
.lang-dropdown a {
display: block;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
color: #344054;
text-decoration: none;
font-weight: 500;
font-size: 16px;
font-weight: 600;
font-size: 15px;
white-space: nowrap;
border-radius: 6px;
border-radius: 8px;
transition: background-color 0.15s ease, color 0.15s ease;
}
.lang-dropdown a:hover { background-color: #F5FAFB; }
.lang-dropdown a.is-current { background-color: #F0F6F8; color: #2D738C; }
/* Circular flags used in both the dropdown and the mobile modal */
.lang-dropdown .fi,
.language-modal-body .fi {
font-size: 24px;
border-radius: 50%;
flex: 0 0 auto;
box-shadow: inset 0 0 0 1px rgba(16,24,40,0.10);
}
.lang-dropdown a:hover { background-color: #F9FAFB; }
/* 4. Stili za namizni "dropdown" meni */
.dropdown-menu {
@@ -438,20 +453,22 @@
}
.language-modal-body a {
display: block;
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
text-align: center;
text-decoration: none;
font-size: 18px;
font-weight: 500;
font-size: 17px;
font-weight: 600;
color: #344054;
background-color: #F9FAFB;
border: 1px solid #EAECF0;
border-radius: 8px;
transition: background-color 0.2s ease, border-color 0.2s ease;
border-radius: 10px;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.language-modal-body a:hover,
.language-modal-body a.is-current,
.language-modal-body a.active-lang {
background-color: #FFFFFF;
border-color: #2D738C;