/* ===================================================================== css/sfa-language.css - ο διακόπτης γλώσσας (αιωρούμενος, κάτω δεξιά) ===================================================================== Ζευγάρι του includes/sfa_language_switcher.php και του js/sfa-language.js. Ίδια θέση και ίδια συμπεριφορά με το WeldGrid, αλλά στα χρώματα της StrataforAll: τα tokens έρχονται από το css/color_palette.css. Δουλεύει και στη σελίδα σύνδεσης και μέσα στο κέλυφος, χωρίς να εξαρτάται από κλάση στο : η σύνδεση δεν έχει το κέλυφος. ===================================================================== */ .sfa-language-switcher { position: fixed; right: 1rem; bottom: 1rem; /* Πάνω από τα modal backdrop του Bootstrap (1050) και τα toast (1060), ώστε να μη «θάβεται» όταν είναι ανοιχτό παράθυρο. */ z-index: 1085; font-family: inherit; } .sfa-language-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-width: 9.5rem; padding: 0.5rem 0.75rem; border: 1px solid color-mix(in srgb, var(--primary-color) 28%, #e5e7eb); border-radius: 999px; background: var(--background-white, #fff); color: var(--text-color, #22223b); box-shadow: 0 6px 18px rgba(15, 23, 42, .12); font-size: 0.875rem; font-weight: 700; cursor: pointer; } .sfa-language-trigger:hover { border-color: var(--primary-color); } .sfa-language-trigger:focus-visible, .sfa-language-option:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; } .sfa-language-current { display: inline-flex; align-items: center; gap: 0.5rem; } .sfa-language-trigger i { color: var(--primary-color); font-size: 1rem; transition: transform 0.15s ease; } .sfa-language-trigger[aria-expanded="true"] i { transform: rotate(180deg); } .sfa-lang-flag { width: 1.5rem; height: 1.05rem; border-radius: 2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-color) 18%, transparent); object-fit: cover; flex: 0 0 auto; } .sfa-language-panel { position: absolute; right: 0; bottom: calc(100% + 0.5rem); min-width: 11rem; padding: 0.25rem; border: 1px solid color-mix(in srgb, var(--primary-color) 28%, #e5e7eb); border-radius: 14px; background: var(--background-white, #fff); box-shadow: 0 12px 28px rgba(15, 23, 42, .18); display: none; } .sfa-language-panel.is-open { display: block; } .sfa-language-option { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.45rem 0.6rem; border: 0; border-radius: 10px; background: transparent; color: var(--text-color, #22223b); font-size: 0.875rem; font-weight: 500; text-align: start; cursor: pointer; transition: background .15s ease, transform .12s ease; } .sfa-language-option:hover { background: color-mix(in srgb, var(--primary-color) 12%, #fff); transform: translateX(2px); } /* Η ΕΝΕΡΓΗ ΓΛΩΣΣΑ ξεχωρίζει με βάρος ΚΑΙ με φόντο, ένα σκαλί πιο σκούρο από το hover, ώστε να μένει αναγνωρίσιμη και όταν περνά από πάνω ο κέρσορας. Το aria-checked μεταφέρει την ίδια πληροφορία σε όποιον δεν βλέπει χρώμα. */ .sfa-language-option.is-active { background: color-mix(in srgb, var(--primary-color) 20%, #fff); font-weight: 700; } .sfa-language-option.is-active:hover { background: color-mix(in srgb, var(--primary-color) 26%, #fff); } /* Όσο γίνεται η αλλαγή, το πάνελ δεν δέχεται δεύτερο πάτημα. */ .sfa-language-switcher.is-busy { pointer-events: none; opacity: .7; } @media (max-width: 700px) { .sfa-language-switcher { right: 0.6rem; bottom: 0.6rem; } .sfa-language-trigger { min-width: 0; } /* Σε στενή οθόνη μένει η σημαία και το βέλος: το όνομα το λέει το ανοιγμένο πάνελ. */ .sfa-language-trigger [data-sfa-current-label] { display: none; } } @media print { .sfa-language-switcher { display: none; } }