/*! * bootstrap3-compat.css * --------------------- * Couche de compatibilite transitoire : reimplemente sur Bootstrap 5 le * vocabulaire Bootstrap 3 encore utilise par AdminLTE 2 et par les vues Razor. * * Objectif : migration a iso-visuel (port fidele). Les valeurs reprennent * celles de Bootstrap 3.3.7 afin qu'aucun ecran ne bouge. * * CE FICHIER EST APPELE A DISPARAITRE. Chaque bloc porte le nombre * d'occurrences restantes dans le depot ; quand un compteur tombe a zero, * supprimer le bloc. Ne rien ajouter ici sans compteur. * * A charger APRES bootstrap.min.css et AVANT adminLTE.min.css. * * --------------------------------------------------------------------- * ORDRE DE RESORPTION * * Les classes ci-dessous ne sont pas toutes resorbables au meme moment. * adminLTE.css et skins/*.css ciblent eux-memes certaines d'entre elles : * les renommer dans les vues casserait le style d'AdminLTE. * * VERROUILLEES tant qu'AdminLTE 2 est present * .form-group (14) .label / .label-* (16) * .help-block (3) .has-error (4) * .btn-default (7) * * PURGES (plus aucune occurrence dans le depot) * .panel* .input-group-addon .control-label .table-condensed * .input-group-btn -> bouton place directement dans .input-group (2) * .progress-striped -> .progress-bar-striped sur la barre (1) * .text-right/left .label-default/primary/success/info/danger * .checkbox .well .img-responsive * * LIBRES restantes (pas d'equivalent direct en Bootstrap 5) * .caret (14) .form-control-feedback (4) .btn-block (17) * .nav-stacked .progress-striped .icon-bar (styles par adminLTE.css) * * CONTRASTE -- Bootstrap 5 a bascule certains textes en noir * .btn-warning et .btn-info (blanc en Bootstrap 3) * Verifie : bg-*, btn-secondary, alert-* et progress-bar-* ne sont * pas concernes (non utilises, ou redefinis par adminLTE.css) * * ELEMENTS DE BASE (Reboot) -- sans classe, donc sans signal dans le code * a (soulignement) p ul/ol hr small code * marges hautes des titres h1-h6 (Bootstrap 5 les met a 0) * * STRUCTURE DE NAVIGATION -- Bootstrap 5 a remplace le selecteur * ".nav > li > a" par la classe ".nav-link", que notre markup n'emet pas * .nav > li > a .nav-tabs > li .nav-tabs > li > a * .nav-justified .nav-stacked .nav-pills > li.active > a * .dropdown-menu > li > a .breadcrumb > li (+ separateur) * .progress / .progress-bar (metriques) * .btn-group + .btn-block (boutons scindes) * * ATTENTION : ces classes sont STRUCTURELLES. Les tester isolement ne * revele rien -- il faut les instancier dans leur markup reel (voir la * sonde contextuelle du banc de test). * * DEJA RESORBEES * .col-xs-* -> .col-* (171 occurrences) * .img-responsive-> .img-fluid (10) * .glyphicon-* -> Font Awesome (4) * .sr-only -> .visually-hidden (16) * .hidden-xs -> .d-none .d-md-inline / .d-md-block (5) * .list-inline -> .list-inline + .list-inline-item (8) * .pull-right/left-> .float-end / .float-start (83, + 10 selecteurs * dans adminLTE.css ; .pull-right-container conservee) * .img-circle -> .rounded-circle (14, dont UiAvatar.cs) * .embed-responsive-> .ratio / .ratio-16x9 (3) * .navbar-static-top-> supprimee (classe morte depuis Bootstrap 4) * --------------------------------------------------------------------- */ /* ========================================================================== Base : Bootstrap 3 = 14px / 1.428571429, Bootstrap 5 = 16px / 1.5. Sans cela toute l'application grossit de ~14%. Les composants Bootstrap 5 dimensionnent en rem (donc relativement a , pas a ) : il ne suffit pas de fixer body, il faut aussi ramener chaque composant aux metriques de Bootstrap 3. ========================================================================== */ :root { --bs-body-font-size: 14px; --bs-body-line-height: 1.42857143; --bs-body-color: #333; } body { font-size: 14px; line-height: 1.42857143; color: #333; } /* Titres : Bootstrap 5 les a tous agrandis (h4 : 18px -> 24px) et a porte leur interlignage de 1.1 a 1.2. */ h1, .h1 { font-size: 36px; } h2, .h2 { font-size: 30px; } h3, .h3 { font-size: 24px; } h4, .h4 { font-size: 18px; } h5, .h5 { font-size: 14px; } h6, .h6 { font-size: 12px; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { line-height: 1.1; } /* Bootstrap 5 met margin-top:0 sur tous les titres ; Bootstrap 3 leur donnait un espacement haut, dont depend le rythme vertical des panneaux (barre de configuration, en-tetes de boites). */ h1, h2, h3, .h1, .h2, .h3 { margin-top: 20px; margin-bottom: 10px; } h4, h5, h6, .h4, .h5, .h6 { margin-top: 10px; margin-bottom: 10px; } /* Bootstrap 5 (Reboot) neutralise le style des . */ label { margin-bottom: 5px; font-weight: 700; } /* et : Bootstrap 5 utilise "bolder", valeur RELATIVE au parent. Dans le logo (font-weight:300 chez AdminLTE) cela donne 400 -- le nom de l'application cesse d'etre gras. Bootstrap 3 fixait 700. */ b, strong { font-weight: 700; } /* dans un titre : Bootstrap 3 lui donnait une taille reduite et un gris distinct, que Bootstrap 5 ne reprend pas (sous-titres de page). */ h1 small, h2 small, h3 small, .h1 small, .h2 small, .h3 small { font-size: 65%; } h4 small, h5 small, h6 small, .h4 small, .h5 small, .h6 small { font-size: 75%; } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small { font-weight: 400; line-height: 1; color: #777; } /* Couleurs contextuelles de texte : Bootstrap 5 a change toute la palette (text-muted : #777 -> gris translucide ; text-success : #3c763d -> #198754...). text-muted est utilise 24 fois dans le depot. Bootstrap 5 les declare en !important : il faut le meme poids. */ .text-muted { color: #777 !important; } .text-primary { color: #337ab7 !important; } .text-success { color: #3c763d !important; } .text-info { color: #31708f !important; } .text-warning { color: #8a6d3b !important; } .text-danger { color: #a94442 !important; } /* Liens : Bootstrap 5 souligne TOUS les liens par defaut (text-decoration est ecrit en dur dans son Reboot, sans variable pour le desactiver). Bootstrap 3 ne soulignait qu'au survol -- ce dont dependent AdminLTE et l'ensemble des menus, qui ne redefinissent pas text-decoration. */ a { text-decoration: none; } a:hover, a:focus { text-decoration: underline; } /* .btn-link : meme changement que pour les liens, mais sur une classe -- la regle "a { text-decoration: none }" ne l'atteint pas, car le markup emet