/* * bs5-compat.css — assoturcupra.it * * Il sito resta su Bootstrap 3.3.7. Helix3 3.1.4 però, in una manciata di * punti che NON sono sovrascrivibili da un override di template, emette le * utility di Bootstrap 5: * * - plugins/system/helix3/core/helix3.php (generatelayout): le sezioni * nascoste da backend prendono d-none / d-md-none / d-lg-block ... * - lo stesso file inietta inline un cap `max-width: 1140px` sul .container * sopra i 1400px, che in Bootstrap 3 non esisteva. * * Qui quelle utility sono ridefinite con la semantica e i breakpoint ORIGINALI * di Bootstrap 5, così il markup vendor si comporta come previsto senza toccare * un solo file di Helix. * * File aggiunto da noi: nessun aggiornamento di Helix3 lo tocca. * Caricato da index.php a fine , dopo template.css. */ /* --- display --- */ .d-none { display: none !important; } .d-inline { display: inline !important; } .d-inline-block { display: inline-block !important; } .d-block { display: block !important; } .d-flex { display: flex !important; } @media (min-width: 576px) { .d-sm-none { display: none !important; } .d-sm-block { display: block !important; } .d-sm-flex { display: flex !important; } .d-sm-inline-block { display: inline-block !important; } } @media (min-width: 768px) { .d-md-none { display: none !important; } .d-md-block { display: block !important; } .d-md-flex { display: flex !important; } .d-md-inline-block { display: inline-block !important; } } @media (min-width: 992px) { .d-lg-none { display: none !important; } .d-lg-block { display: block !important; } .d-lg-flex { display: flex !important; } .d-lg-inline-block { display: inline-block !important; } } @media (min-width: 1200px) { .d-xl-none { display: none !important; } .d-xl-block { display: block !important; } } @media print { .d-print-none { display: none !important; } } /* --- float / text (proprieta' logiche BS5 -> LTR) --- */ .float-start { float: left !important; } .float-end { float: right !important; } .float-none { float: none !important; } .text-start { text-align: left !important; } .text-end { text-align: right !important; } /* --- accessibilita': BS5 .visually-hidden == BS3 .sr-only --- */ .visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* --- .btn-close (BS5) == pulsante di chiusura .close di BS3 --- */ .btn-close { box-sizing: content-box; width: 1em; height: 1em; padding: .25em; color: #000; background: transparent; border: 0; border-radius: .25rem; opacity: .5; cursor: pointer; font-size: 1.25rem; line-height: 1; } .btn-close::before { content: "\00d7"; display: block; line-height: 1em; } .btn-close:hover { opacity: .85; text-decoration: none; } /* ------------------------------------------------------------------ * * Cap del .container iniettato inline dalla 3.1.4 * * core/helix3.php (riga ~289) fa addInlineCSS di * @media (min-width: 1400px) { .container { max-width: 1140px; } } * ogni volta che il nuovo parametro `container_width` vale 1140, che e' il * suo default: quindi SEMPRE, finche' nessuno lo cambia dal backend. * * Bootstrap 3 porta il .container a 1170px da 1200px in su e non ha nessun * cap oltre: sopra i 1400px il sito si stringerebbe di 30px. Lo annulliamo. * Si vede solo su viewport >= 1400px, per questo e' facile non accorgersene. * ------------------------------------------------------------------ */ @media (min-width: 1400px) { .container { max-width: none; } }