/** * bs5-compat.css — Shim de compatibilité Bootstrap 5 → Bootstrap 4.6.2 * (thème dashboard, gh-sender) * * Le thème charge Bootstrap 4.6.2, mais 71 occurrences de classes * Bootstrap 5 (me-*, ms-*, g-*, d-grid, form-select, text-end, rounded-3) * ont été introduites dans les templates custom : sans CSS correspondant, * marges, gouttières et selects étaient silencieusement cassés. * Ce fichier fournit ces utilitaires avec l'échelle de spacing EXACTE du * Bootstrap 4 customisé du thème (1=.1875rem 2=.375rem 3=.75rem 4=1.5rem). * Chargé après bootstrap.min.css dans header.tpl (hors zone PJAX : ). */ /* ── Marges logiques (LTR) ─────────────────────────────────────── */ .me-1 { margin-right: .1875rem !important; } .me-2 { margin-right: .375rem !important; } .me-3 { margin-right: .75rem !important; } .me-4 { margin-right: 1.5rem !important; } .me-5 { margin-right: 2.25rem !important; } .ms-1 { margin-left: .1875rem !important; } .ms-2 { margin-left: .375rem !important; } .ms-3 { margin-left: .75rem !important; } .ms-4 { margin-left: 1.5rem !important; } .ms-5 { margin-left: 2.25rem !important; } .pe-1 { padding-right: .1875rem !important; } .pe-2 { padding-right: .375rem !important; } .pe-3 { padding-right: .75rem !important; } .ps-1 { padding-left: .1875rem !important; } .ps-2 { padding-left: .375rem !important; } .ps-3 { padding-left: .75rem !important; } /* RTL : inversion (le thème charge bootstrap.rtl pour les langues RTL) */ [dir="rtl"] .me-1, html[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: .1875rem !important; } [dir="rtl"] .me-2, html[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: .375rem !important; } [dir="rtl"] .me-3, html[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: .75rem !important; } [dir="rtl"] .me-4, html[dir="rtl"] .me-4 { margin-right: 0 !important; margin-left: 1.5rem !important; } [dir="rtl"] .ms-1, html[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: .1875rem !important; } [dir="rtl"] .ms-2, html[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: .375rem !important; } [dir="rtl"] .ms-3, html[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: .75rem !important; } /* ── Gouttières de grille (BS5 .g-*) ───────────────────────────── */ .row.g-2 { margin-right: -.375rem; margin-left: -.375rem; } .row.g-2 > [class*="col"] { padding-right: .375rem; padding-left: .375rem; margin-top: .75rem; } .row.g-3 { margin-right: -.75rem; margin-left: -.75rem; } .row.g-3 > [class*="col"] { padding-right: .75rem; padding-left: .75rem; margin-top: 1rem; } .row.g-2, .row.g-3 { margin-top: -.75rem; } .row.g-3 { margin-top: -1rem; } /* ── d-grid (boutons pleine largeur BS5) ───────────────────────── */ .d-grid { display: grid !important; } .d-grid.gap-2 { grid-gap: .5rem; gap: .5rem; } .d-grid > .btn { display: block; width: 100%; } /* ── Alignements texte logiques ────────────────────────────────── */ .text-end { text-align: right !important; } .text-start { text-align: left !important; } [dir="rtl"] .text-end { text-align: left !important; } [dir="rtl"] .text-start { text-align: right !important; } .float-end { float: right !important; } .float-start { float: left !important; } /* ── form-select → apparence identique au .custom-select BS4 ───── */ .form-select { display: block; width: 100%; height: calc(1.5em + 1rem + 2px); padding: .5rem 2rem .5rem .75rem; font-size: .9375rem; font-weight: 400; line-height: 1.5; color: #12263f; vertical-align: middle; background: #fff url("data:image/svg+xml,%3csvg viewBox='0 0 9 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1L4.25 4.25L7.5 1' stroke='%2395AAC9' stroke-width='1.08333' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") no-repeat right .75rem center/.5625rem; border: 1px solid #d2ddec; border-radius: .375rem; appearance: none; -webkit-appearance: none; -moz-appearance: none; } .form-select:focus { border-color: #2c7be5; outline: 0; } .form-select-sm { height: calc(1.5em + .25rem + 2px); padding-top: .125rem; padding-bottom: .125rem; font-size: .8125rem; } /* ── Arrondis BS5 ──────────────────────────────────────────────── */ .rounded-3 { border-radius: .5rem !important; } /* ── btn-close (si utilisé dans ce thème à l'avenir) ───────────── */ .btn-close { box-sizing: content-box; width: 1em; height: 1em; padding: .25em; color: #000; background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; border: 0; border-radius: .375rem; opacity: .5; cursor: pointer; } .btn-close:hover { opacity: .75; }