/* ========================================================================= * B1 — Google Translate jezični dropdown u headeru (Blato 1902) * Kohezivno s glavnim izbornikom: bijeli tekst u tamnom/transparentnom * navbaru, brand zelena (#316747) kao akcent. Ne dira se plugin — samo * override-amo .sgt-* klase iz child teme. * ========================================================================= */ /* Stavka u izborniku */ .blato-b01.menu-item { display: inline-block; vertical-align: middle; } /* Plugin je float:right unutar containera — poništavamo unutar menija */ .blato-b01 .sgt-dropdown-container { float: none; display: inline-block; } .blato-b01 .sgt-custom-dropdown { min-width: 0; } /* Glavni gumb dropdowna — transparentan, bijeli tekst, suptilni okvir */ .blato-b01 .sgt-dropdown-button { background: transparent; color: #ffffff; font-size: 16px; font-weight: 500; line-height: 1.4; min-width: 0; padding: 8px 30px 8px 14px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 3px; } .blato-b01 .sgt-dropdown-text { color: #ffffff; font-size: 16px !important; } .blato-b01 .sgt-dropdown-button::after { border-top-color: #ffffff; } .blato-b01 .sgt-dropdown-button:hover, .blato-b01 .sgt-dropdown-button:focus { background: #316747; border-color: #316747; box-shadow: none; outline: none; } /* Floating lista (plugin je kopira na , izvan menija) — brand akcent */ .sgt-floating-dropdown .sgt-dropdown-option { color: #222222; } .sgt-floating-dropdown .sgt-dropdown-option:hover { background-color: #316747; color: #ffffff; } .sgt-floating-dropdown .sgt-dropdown-option.active { background-color: #eef3ef; color: #316747; font-weight: 600; } /* ------------------------------------------------------------------ * * TABLET 768–1023: malo kompaktnije, da ne lomi izbornik * ------------------------------------------------------------------ */ @media screen and (min-width: 768px) and (max-width: 1023px) { .blato-b01 .sgt-dropdown-button { font-size: 14px; padding: 7px 26px 7px 10px; } .blato-b01 .sgt-dropdown-text { font-size: 14px !important; } } /* ------------------------------------------------------------------ * * MOBITEL ≤767: stavka je blok u otvorenom izborniku. Modernizirani * jezični gumb kao translucent zaobljena kontrola (globus + strelica), * a padajuća lista (plugin je klonira na kao position:fixed) je * tamna i uklopljena. Sve scoped na mobile viewport -> desktop netaknut. * ------------------------------------------------------------------ */ @media screen and (max-width: 767px) { .blato-b01.menu-item { display: block; padding: 20px 16px; } .blato-b01 .sgt-dropdown-container, .blato-b01 .sgt-custom-dropdown { display: block; width: 100%; } /* Gumb: translucent "pill" uklopljen u tamni meni; mjesto za globus lijevo i strelicu desno; tap meta ≥48px. */ .blato-b01 .sgt-dropdown-button { display: flex; align-items: center; width: 100%; min-height: 48px; padding: 8px 42px 8px 44px; font-size: 16px; font-weight: 500; text-align: left; color: #ffffff; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; box-shadow: none; } /* Globus ikona (FontAwesome 4 je učitana na temi). */ .blato-b01 .sgt-dropdown-button::before { content: "\f0ac"; font-family: "FontAwesome"; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 16px; line-height: 1; color: rgba(255, 255, 255, 0.75); } .blato-b01 .sgt-dropdown-button:hover, .blato-b01 .sgt-dropdown-button:focus { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.28); } .blato-b01 .sgt-dropdown-text { font-size: 16px !important; text-align: left; } /* Čišća, translucent bijela strelica. */ .blato-b01 .sgt-dropdown-button::after { right: 16px; border-top-color: rgba(255, 255, 255, 0.7); } /* Padajuća lista jezika (floating klon na ) — tamna, zaobljena, uklopljena; scoped na mobile viewport pa desktop popup ostaje bijeli. */ .sgt-floating-dropdown.notranslate { background: rgba(20, 20, 20, 0.98); border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 12px !important; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); overflow: hidden; } .sgt-floating-dropdown .sgt-dropdown-option { color: #ffffff; background: transparent; padding: 13px 16px; text-align: left; } .sgt-floating-dropdown .sgt-dropdown-option + .sgt-dropdown-option { border-top: 1px solid rgba(255, 255, 255, 0.07); } .sgt-floating-dropdown .sgt-dropdown-option:hover { background-color: #316747; color: #ffffff; } .sgt-floating-dropdown .sgt-dropdown-option.active { background-color: rgba(49, 103, 71, 0.38); color: #ffffff; font-weight: 600; } }