ho impostato questo css per i selettori di lingua.
.custom-language-switcher {
position: fixed;
top: 24px; /* Regola questo valore per spostarlo più in alto o in basso */
right: 120px; /* Regola questo valore per spostarlo più a destra o a sinistra */
z-index: 9999; /* Assicura che sia sopra gli altri elementi */
background-color: transparent; /* Rimuovi il colore di sfondo */
/*background-color: #fff; */
padding: 5px;
border-radius: 5px;
/* box-shadow: 0 2px 10px rgba(0,0,0,0.2); */
box-shadow: none;
}
/* per gli schermi Mobile */
@media (max-width: 768px) { /* Applica questi stili solo su schermi più piccoli */
.custom-language-switcher {
position: fixed; /* Rende il selettore flottante rispetto alla finestra del browser */
top: 10px; /* L'altezza va bene, lo manteniamo a 10px dal bordo superiore */
right: 75px; /* Manteniamo la posizione a 70px dal bordo destro */
z-index: 9999; /* Assicura che sia visualizzato sopra altri elementi */
padding: 0; /* Rimuovi il padding dal contenitore principale */
}
.custom-language-switcher ul.wpml-ls-container {
display: flex;
flex-wrap: wrap;
justify-content: flex-end; /* Assicura che gli elementi siano allineati a destra all'interno del flex container */
list-style: none;
margin: 0;
padding: 0;
}
.custom-language-switcher ul.wpml-ls-container li {
margin: 5px 0px; /* Ridotto ulteriormente il margine orizzontale per avvicinare le bandiere */
}
.custom-language-switcher .wpml-ls-item-toggle,
.custom-language-switcher .wpml-ls-item {
font-size: 14px; /* Dimensione del testo */
padding: 1px 3px; /* Padding interno dei tasti */
line-height: 1.2; /* Altezza della riga */
display: inline-flex; /* Assicura che bandiera e testo siano allineati */
align-items: center;
border-radius: 3px; /* Bordi arrotondati */
border: none; /* Rimuovi il bordo */
background-color: transparent; /* Rimuovi il colore di sfondo */
color: #333;
text-decoration: none;
}
.custom-language-switcher .wpml-ls-flag {
max-width: 26px; /* Aumentata leggermente la dimensione delle bandiere (da 20px a 24px) */
height: auto;
margin-right: 3px; /* Spazio tra bandiera e testo */
}
}
/* per creare l'effetto premuto sulla lingua corrente/attiva */
.custom-language-switcher .wpml-ls-item.wpml-ls-current-language {
background-color: #a7a7a7; /* Un grigio visibile per l'area */
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3); /* Ombra interna scura per effetto premuto sul rosso */
/* Il border-radius è già definito a 4px dagli stili precedenti, quindi si adatterà automaticamente */
}
Vorrei che lo spazio in grigio attorno al selettore attivo (vedi immagine allegata) fosse molto più ristretto , su quali parametri devo agire ?
