/* * =================================================================== * STYLE HYBRYDOWEGO PRZEŁĄCZNIKA JĘZYKÓW * =================================================================== */ /* 1. LAYOUT KONTENERA */ #jm-logo-nav-in { position: relative; } #jm-top-menu .lang-menu-wrapper { display: flex; align-items: center; justify-content: flex-end; position: absolute; bottom: 5px; right: 0; padding-top: 0; margin-left: 0; } #jm-top-menu .lang-menu-wrapper .jm-module-raw { margin-left: 0; } /* 2. NORMALIZACJA LIST MODUŁÓW */ #jm-top-menu .lang-menu-wrapper .jezyki-native ul.lang-inline, #jm-top-menu .lang-menu-wrapper .jezyki-custom ul.nav.menu.mod-list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; } #jm-top-menu .lang-menu-wrapper .jezyki-native li, #jm-top-menu .lang-menu-wrapper .jezyki-custom li { margin: 0 4px; padding: 0; line-height: 1; } /* * =================================================================== * 3. UJEDNOLICENIE WYGLĄDU FLAG (DESKTOP) - Wersja SVG * =================================================================== */ /* 3a. Ukrywamy natywne flagi .gif, ale zachowujemy ich 'alt' dla WCAG */ #jm-top-menu .lang-menu-wrapper .jezyki-native a img { /* Czyni obrazek .gif niewidzialnym, ale wciąż obecnym dla czytników */ opacity: 0; /* Upewnia się, że obrazek nie blokuje kliknięcia linku */ position: absolute; /* Upewnia się, że nie jest widoczny żaden border z .gifa */ border: 0; } /* 3b. UJEDNOLICAMY wygląd WSZYSTKICH linków */ /* (Zarówno natywnych PL/CSB, jak i customowych EN/DE) */ #jm-top-menu .lang-menu-wrapper .jezyki-native li a, #jm-top-menu .lang-menu-wrapper .jezyki-custom a.lang-icon { display: block; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #e2e2e2; background-size: cover; background-position: center; transition: all 0.2s ease; /* Reset dla custom (EN/DE) */ padding: 0; margin-left: 0; /* WCAG: Ukrywanie tekstu (tylko dla custom EN/DE) */ text-indent: -9999px; overflow: hidden; white-space: nowrap; font-size: 0; } /* 3c. Przypisanie obrazków tła (WEKTOROWE SVG jako Data URI) */ #jm-top-menu a.lang-en { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='a'%3E%3Cpath d='M0 0v30h60V0z'/%3E%3C/clipPath%3E%3Cpath d='M0 0v30h60V0z' fill='%23012169'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' stroke='%23fff' stroke-width='6' clip-path='url(%23a)'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' stroke='%23C8102E' stroke-width='4' clip-path='url(%23a)'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10' clip-path='url(%23a)'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6' clip-path='url(%23a)'/%3E%3C/svg%3E"); } #jm-top-menu a.lang-de { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Crect width='5' height='3' fill='%23000'/%3E%3Crect width='5' height='2' y='1' fill='%23D00'/%3E%3Crect width='5' height='1' y='2' fill='%23FFCE00'/%3E%3C/svg%3E"); } /* 3d. NOWOŚĆ: Przypisanie SVG dla flag natywnych (PL, CSB) */ /* Używamy :has() do znalezienia linku , który zawiera z danym src */ #jm-top-menu .lang-menu-wrapper .jezyki-native a:has(img[src*="pl.gif"]) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Crect width='8' height='5' fill='%23fff'/%3E%3Crect width='8' height='2.5' y='2.5' fill='%23DC143C'/%3E%3C/svg%3E"); } #jm-top-menu .lang-menu-wrapper .jezyki-native a:has(img[src*="csb.gif"]) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Crect width='8' height='5' fill='%23FDD900'/%3E%3Crect width='8' height='2.5' fill='%23000'/%3E%3C/svg%3E"); } /* * =================================================================== * 4. EFEKTY INTERAKCJI i DOSTĘPNOŚĆ (WCAG) - Wersja SVG (Uproszczona) * =================================================================== */ /* 4a. Efekt HOVER i FOCUS dla WSZYSTKICH flag */ /* Teraz mamy jeden wspólny selektor dla wszystkich */ #jm-top-menu .lang-menu-wrapper .jezyki-native li a:hover, #jm-top-menu .lang-menu-wrapper .jezyki-custom a.lang-icon:hover { border-color: #1b74a8; transform: scale(1.1); outline: none !important; /* Usuwa czerwone kropki z :hover */ } #jm-top-menu .lang-menu-wrapper .jezyki-native li a:focus, #jm-top-menu .lang-menu-wrapper .jezyki-native li a:focus-visible, #jm-top-menu .lang-menu-wrapper .jezyki-custom a.lang-icon:focus, #jm-top-menu .lang-menu-wrapper .jezyki-custom a.lang-icon:focus-visible { border-color: #1b74a8; transform: scale(1.1); outline: 2px solid #1b74a8 !important; /* Nadpisuje czerwone kropki z :focus */ outline-offset: 0; } /* * =================================================================== * STYLE MOBILNE - Wersja SVG * =================================================================== */ @media (max-width: 991px) { /* 1. Reset pozycjonowania z desktopu */ #jm-logo-nav-in { position: static; } /* 2. Ustawienie kontenera - teraz jest pionowy */ #jm-top-menu .lang-menu-wrapper { position: static; flex-direction: column; align-items: flex-end; width: auto; margin-top: 10px; border-top: none; } /* 3. Ustawienie modułów (odstępy) */ #jm-top-menu .lang-menu-wrapper .jm-module-raw { margin-left: 0 !important; width: auto; } #jm-top-menu .mod-languages.jezyki-native { margin-bottom: 8px; } /* 4. Listy