/** * Základní styl přepínače jazyků vloženého do menu (viz * WAT_Shortcode::render_menu_item(), maybe_append_to_menu() a placeholder * #wat_language_switcher v assets/js/frontend-switcher.js). * * Vidět je jen aktuální jazyk, ostatní se schovají do ".sub-menu" a zobrazí * se až po najetí myší nebo kliknutí. Tato pravidla jsou úmyslně jednoduchá * (žádné !important) – pokud vaše šablona třídu ".sub-menu"/".menu-item-has-children" * už vlastní stylem/JS ovládá (typické u většiny WP šablon), její styl má * přirozeně vyšší prioritu a tato pravidla ho jen doplní/nahradí tam, kde * chybí. */ .wat-switcher-menu-item { position: relative; /* Šablona občas dá položkám menu úzkou/flexibilní šířku a náš přepínač se pak smrskne — název jazyka se pak láme PO JEDNOTLIVÝCH PÍSMENECH a rozhodí celou hlavičku (nahlášeno 2026-08-24 na webu s jinou šablonou než Astra). Položka se proto nesmí zmenšit pod obsah. */ flex-shrink: 0; white-space: nowrap; } .wat-switcher-menu-item > .wat-switcher-toggle { cursor: pointer; /* Vlaječka (emoji) má jiné výškové metriky než běžný text, což bez tohoto zarovnání typicky posune odkaz mimo úroveň sousedních položek menu ("ujíždí") – inline-flex + align-items to spolehlivě opraví bez ohledu na to, jaký font/line-height má šablona. */ display: inline-flex; align-items: center; gap: 0.3em; /* Nikdy nelámat název jazyka — viz komentář u .wat-switcher-menu-item. */ white-space: nowrap; flex-shrink: 0; max-width: none; overflow: visible; word-break: normal; } /* Popisek i vlaječka drží pohromadě bez ohledu na styly šablony. */ .wat-switcher-menu-item > .wat-switcher-toggle > .wat-switcher-label, .wat-language-switcher .wat-switcher-label { white-space: nowrap; word-break: normal; overflow-wrap: normal; hyphens: none; } .wat-language-switcher .wat-switcher-flag { flex-shrink: 0; display: inline-flex; align-items: center; } /* Pevná velikost vlaječky — některé šablony roztáhnou obrázky a SVG uvnitř menu na plnou šířku položky (2026-08-24). Rozměry drží poměr stran vlajky a shodují se s pravidlem `.wat-switcher-flag .wat-flag` níž. */ .wat-language-switcher .wat-switcher-flag > svg { width: 1.3em; height: 0.87em; max-width: none; flex-shrink: 0; } /* Obrázek z vlastní sady (2.15.0): pevná jen výška, ať se vlajka s jiným poměrem stran nezdeformuje. Strop na šířku brání tomu, aby nezvykle široký obrázek roztáhl položku menu. */ .wat-language-switcher .wat-switcher-flag > img { height: 0.87em; width: auto; max-width: 1.8em; flex-shrink: 0; } .wat-switcher-menu-item > .wat-language-switcher.sub-menu { display: none; visibility: hidden; opacity: 0; pointer-events: none; position: absolute; top: 100%; left: 0; z-index: 999; /* Šířka podle nejdelšího názvu jazyka, ne podle šablony (2026-08-24). Šablony (typicky Astra) umí podnabídce vnutit šířku a výšku svých vlastních rozbalovacích menu — vznikaly pak obří mezery a rozházené rozvržení, kvůli kterým si redaktoři psali vlastní CSS s !important. Tohle to řeší rovnou v pluginu. */ width: max-content; min-width: 160px; max-width: 280px; height: auto; min-height: 0; margin: 0; padding: 6px 0; list-style: none; background: #fff; box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.15 ); } /* Schování přes "display" i "visibility/opacity" – šablony to dělají oběma způsoby (druhý typicky pro plynulý přechod), takže rozbalujeme oba. Klik (třída "wat-switcher-open") i hover navíc řeší i JS s inline "!important" stylem – viz assets/js/frontend-switcher.js – pro případ, že by CSS šablony mělo vyšší prioritu než tato pravidla. */ .wat-switcher-menu-item:hover > .wat-language-switcher.sub-menu, .wat-switcher-menu-item.wat-switcher-open > .wat-language-switcher.sub-menu { display: block; visibility: visible; opacity: 1; pointer-events: auto; } .wat-switcher-menu-item > .wat-language-switcher.sub-menu li { display: block; /* Vynulování výšek, které šablona dává vlastním položkám menu — bez toho měl každý jazyk zbytečně vysoký řádek (viz komentář výše). */ margin: 0; padding: 0; height: auto; min-height: 0; line-height: normal; } .wat-switcher-menu-item > .wat-language-switcher.sub-menu a { /* Flex místo block: vlaječka a název drží na jednom řádku i tehdy, když jim šablona nastaví vlastní zarovnání (2026-08-24). */ display: flex; align-items: center; gap: 0.5em; width: auto; padding: 6px 16px; min-height: 0; line-height: 1.3; white-space: nowrap; text-decoration: none; } .wat-switcher-menu-item > .wat-language-switcher.sub-menu li.wat-lang-active > a { font-weight: 700; } /* Inline SVG vlajky (WAT_Flags) — ostré, cross-platform (i Windows). */ .wat-switcher-flag{display:inline-flex;align-items:center;line-height:0} .wat-switcher-flag .wat-flag{width:1.3em;height:.87em;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.15);vertical-align:middle} /* Vlastní sada vlajek (2.15.0) — obrázek z cizí sady může mít jiný poměr stran než vestavěná SVG (GB je 2:1, některé sady kreslí kolečka), proto se drží jen VÝŠKA a šířka se dopočítá. Bez tohohle pravidla by obrázku nikdo velikost nedal a šablona by mohla vykreslit vlajku v plné šířce. */ .wat-switcher-flag > img{height:.87em;width:auto;max-width:1.8em;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.15);vertical-align:middle} .wat-switcher-current{cursor:default} /* * Odolnost vůči stylům šablony (2026-08-24). * * Plugin se nasazuje na weby s různými šablonami a některé dávají * položkám menu úzkou nebo flexibilní šířku. Náš přepínač se pak smrskl * a název jazyka se lámal po jednotlivých písmenech přes celou výšku * hlavičky. Pravidla níž to drží pohromadě bez ohledu na to, co dělá * šablona — a záměrně NEPŘEBÍJEJÍ barvy ani písmo, aby přepínač dál * vypadal jako zbytek menu. */ .wat-language-switcher, .wat-language-switcher li, .wat-language-switcher a { word-break: normal; overflow-wrap: normal; hyphens: none; } .wat-language-switcher > li { flex-shrink: 0; } /* Samostatný přepínač (shortcode/widget) — vodorovný seznam bez odrážek, ať se nerozsype v místech, kde šablona nepočítá s