/* * Lingue dell'interfaccia del portale — regole comuni a tutte le pagine (head-*-css, legal). * Ricalca css/i18n.css del web on-prem (stesse scelte), adattato al tema Miniable. * * Gli agganci sono gli attributi di scritti dal server (html_locale_attrs(), * app/Helpers/locale_helper.php): lang="zh-CN" per il cinese, lang="ar" + dir="rtl" per l'arabo, * che carica anche bootstrap.rtl.min.css e app.rtl.min.css (tools/build_rtl_css.js). * * Nessun font esterno (la CSP del portale ammette solo font serviti da sé). */ /* ------------------------------------------------------------------ cinese semplificato */ /* Pila di sistema con i font CJK di ogni piattaforma; le lettere latine restano nel font di sistema, gli ideogrammi prendono il primo font CJK presente. */ html:lang(zh) { --ms-font-cjk: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Microsoft YaHei UI", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", "WenQuanYi Micro Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --bs-font-sans-serif: var(--ms-font-cjk); --bs-body-font-family: var(--ms-font-cjk); --cg-font: var(--ms-font-cjk); } html:lang(zh) :is(body, body.login-body, body.legal-body, .msc, .home-wrapper, .tooltip, .popover, .jqx-widget, .jqx-widget-content, .jqx-widget-header, .tabulator, .leaflet-container) { font-family: var(--ms-font-cjk); } /* Gli ideogrammi non hanno maiuscole né corsivo: niente spaziatura da maiuscoletto. */ html:lang(zh) :is(.text-uppercase, .menu-title, .ms-badge, .badge) { letter-spacing: normal; } /* ------------------------------------------------------------------ arabo: font */ html:lang(ar) { --ms-font-arabic: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", "SF Arabic", Roboto, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --bs-font-sans-serif: var(--ms-font-arabic); --bs-body-font-family: var(--ms-font-arabic); --cg-font: var(--ms-font-arabic); } html:lang(ar) :is(body, body.login-body, body.legal-body, .msc, .home-wrapper, .tooltip, .popover, .jqx-widget, .jqx-widget-content, .jqx-widget-header, .tabulator) { font-family: var(--ms-font-arabic); } /* La scrittura araba è legata: niente spaziatura tra le lettere. */ html:lang(ar) * { letter-spacing: normal !important; } /* ------------------------------------------------------------------ pagine specchiate (RTL) */ /* Dati tecnici sempre da sinistra a destra: numeri di licenza, indirizzi MAC, UUID, codici, impronte, date e orari. unicode-bidi: plaintext sceglie la direzione dal contenuto: una cella con solo cifre e segni (19/09/2026 10:30, 00:1A:2B:3C:4D:5E) resta da sinistra a destra, una cella in arabo va da destra a sinistra, senza che le cifre si scambino di posto. */ html[dir="rtl"] :where(td, th, .list-group-item, .badge, .dropdown-item, .form-text, small, time, dd, dt, option, .toast-body, .alert, .modal-title, .card-title, .nav-link, .page-title-box h4, .tabulator-cell, .tabulator-col-title, .jqx-grid-cell) { unicode-bidi: plaintext; } /* plaintext decide la direzione di ogni cella, ma l'allineamento resta quello della colonna (a destra in arabo): senza questa regola un nome latino in una colonna araba andrebbe a sinistra. Specificità zero: .text-end, .text-center e le regole delle tabelle vincono. */ :where(html[dir="rtl"] td, html[dir="rtl"] th, html[dir="rtl"] .tabulator-cell) { text-align: right; } html[dir="rtl"] :where(code, kbd, samp, pre, .font-monospace, .text-monospace, .ms-ltr) { direction: ltr; unicode-bidi: isolate; } html[dir="rtl"] pre, html[dir="rtl"] .ms-ltr-block { direction: ltr; text-align: left; } /* Campi che contengono dati da sinistra a destra (e-mail, URL, numeri, password, date). */ html[dir="rtl"] input:is([type="email"], [type="url"], [type="tel"], [type="number"], [type="password"], [type="date"], [type="time"], [type="datetime-local"]), html[dir="rtl"] textarea.font-monospace { direction: ltr; text-align: right; } /* Campi di testo liberi: direzione dal contenuto (un UUID o un MAC restano leggibili). */ html[dir="rtl"] input:is([type="text"], [type="search"], :not([type])), html[dir="rtl"] textarea { unicode-bidi: plaintext; } /* Icone con un verso: frecce e chevron si specchiano con la pagina. */ html[dir="rtl"] :is(.fa-chevron-right, .fa-chevron-left, .fa-arrow-right, .fa-arrow-left, .fa-angle-right, .fa-angle-left, .fa-caret-right, .fa-caret-left, .fa-right-to-bracket, .fa-arrow-right-to-bracket, .fa-right-from-bracket, .fa-arrow-right-from-bracket, .fa-arrow-up-right-from-square, .fa-share-from-square, .uil-sign-out-alt, .uil-arrow-circle-right, .uil-arrow-right, .uil-arrow-left, .uil-angle-right, .uil-angle-left, .mdi-chevron-right, .mdi-chevron-left, .mdi-arrow-right, .mdi-arrow-left) { transform: scaleX(-1); } /* Zone che NON si specchiano: grafici e mappe, tabelle jqWidgets (posizioni calcolate in JS da sinistra). Il testo arabo all'interno resta leggibile grazie a plaintext. */ html[dir="rtl"] :is(.leaflet-container, canvas, .apexcharts-canvas, .jqx-grid, .jqx-chart) { direction: ltr; } html[dir="rtl"] :is(.leaflet-popup-content, .leaflet-tooltip, .jqx-grid-cell, .jqx-grid-column-header, .apexcharts-legend-text, .apexcharts-tooltip) { unicode-bidi: plaintext; } /* Banner dei cookie: l'interruttore scorre verso il lato di fine riga. */ html[dir="rtl"] .msc-switch:checked::after { transform: translateX(-20px); } /* Etichetta della lingua senza bandiera (arabo) nella barra in alto. */ .lang-flag-code { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 16px; padding: 0 3px; border-radius: 2px; font: 700 10px/1 system-ui, sans-serif; letter-spacing: .3px; color: var(--bs-body-color, #495057); background: var(--bs-tertiary-bg, #eff2f7); border: 1px solid var(--bs-border-color, #ced4da); vertical-align: middle; } .dropdown-item .lang-flag-code { min-width: 18px; height: 12px; font-size: 8px; } /* Frecce scritte come carattere (←, →): la freccia di «indietro» punta verso l'inizio riga. */ html[dir="rtl"] .ms-dir-arrow { display: inline-block; transform: scaleX(-1); } /* Login e recupero password (auth-modern.css): i campi e-mail e password restano da sinistra a destra anche in arabo, quindi i loro margini logici si leggono da sinistra. L'icona del campo sta però a destra (inizio riga della pagina) e l'occhio della password a sinistra. */ html[dir="rtl"] .form-control-modern:is([type="email"], [type="url"], [type="tel"], [type="number"], [type="password"]) { padding-left: 18px; padding-right: 46px; } html[dir="rtl"] .form-control-modern.no-icon:is([type="email"], [type="url"], [type="tel"], [type="number"], [type="password"]) { padding-right: 18px; } html[dir="rtl"] .input-group-modern:has(.toggle-password) .form-control-modern[type="password"] { padding-left: 46px; } /* Riga del copyright (about.FOOTER): ragione sociale e marchi da sinistra a destra, anche con la frase araba in mezzo (altrimenti il punto di «S.r.l.» finisce dall'altra parte). */ html[dir="rtl"] .ms-copyright { unicode-bidi: plaintext; }