Server : Apache System : Linux webd348.cluster026.gra.hosting.ovh.net 5.15.148-ovh-vps-grsec-zfs-classid #1 SMP Thu Feb 8 09:41:04 UTC 2024 x86_64 User : hednacluml ( 122243) PHP Version : 8.3.9 Disable Function : _dyuweyrj4,_dyuweyrj4r,dl Directory : /home/hednacluml/infant/prive/themes/spip/ |
/** * Styles pour les pages d’installation * * Ces styles viennent en complément/surcharge de minipage.css et minipage.vars.css * * Inutile de redéclarer ici les styles déjà présents dans minipage.ss, * à moins qu'il faille les surcharger pour des cas précis. */ /* Menu des étapes ---------------------------------------------- */ :root { --minipage-install-menu-color-base: hsl(0, 0%, 90%); --minipage-install-menu-color-active: hsl(0, 0%, 33%); --minipage-install-menu-color-done: hsl(var(--minipage-color-success--h), var(--minipage-color-success--s), 33%); --minipage-install-menu-color-error: hsl(var(--minipage-color-error--h), var(--minipage-color-error--s), var(--minipage-color-error--l)); --minipage-install-menu-arrow-width: 1em; --minipage-install-menu-padding: 0.75em; } /* Conteneur des étapes <ul> */ #infos_etapes { display: flex; flex-flow: column wrap; gap: 1px; padding: 0; margin-block-end: var(--minipage-margin-bottom); text-align: start; list-style: none; color: hsl(0, 0%, 33%); font-size: 0.9em; line-height: 1.2; } #infos_etapes.infos_etape_4 { background-color: var(--minipage-install-menu-color-active); } /* Étape <li> */ #infos_etapes li { position: relative; display: flex; padding: var(--minipage-install-menu-padding); background-color: var(--minipage-install-menu-color-base); } /* Conteneur texte interne */ #infos_etapes li .fond { display: flex; column-gap: 0.5em; align-items: center; } /* Label invisible */ #infos_etapes li em { float: inline-start; position: absolute; top: -1000px; } #infos_etapes li .numero_etape { display: none; font-weight: bold; font-size: 2.8em; /* = à peu près 2 lignes */ } /* Étapes pas faites */ #infos_etapes li.prochains {} /* Étape actuelle */ #infos_etapes li.on { color: white; font-weight: bold; } #infos_etapes li.on { background-color: var(--minipage-install-menu-color-active); } /* Étapes faites */ #infos_etapes li.valides { color: white; } #infos_etapes li.valides { background-color: var(--minipage-install-menu-color-done); } /* Étape en erreur */ #infos_etapes li.erreur { color: white; } #infos_etapes li.erreur { background-color: var(--minipage-install-menu-color-error); } /* Responsive : écrans moyens et plus */ @media (min-width: 680px) { #infos_etapes { display: grid; /* Pour avoir des colonnes de même largeur */ grid-template-columns: repeat(4, 1fr); /* Le nb ne change pas tous les 4 matins à priori */ gap: 1.5px; /* 1px trop petit avec les formes en flèche */ } #infos_etapes li .numero_etape { display: inline-block; margin-inline-end: 0.1em; } /* Étape en forme de flèche */ #infos_etapes li { padding-inline: calc(var(--minipage-install-menu-padding) + var(--minipage-install-menu-arrow-width)); margin-inline-start: calc(var(--minipage-install-menu-arrow-width) * -1); clip-path: polygon( calc(100% - var(--minipage-install-menu-arrow-width)) 0%, 100% 50%, calc(100% - var(--minipage-install-menu-arrow-width)) 100%, 0% 100%, var(--minipage-install-menu-arrow-width) 50%, 0% 0% ); box-shadow: inset 0 0 1em hsla(0, 0%, 0%, 0.025); } #infos_etapes li:first-child { padding-inline-start: var(--minipage-install-menu-padding); margin-inline-start: 0; clip-path: polygon( 0% 0%, calc(100% - var(--minipage-install-menu-arrow-width)) 0%, 100% 50%, calc(100% - var(--minipage-install-menu-arrow-width)) 100%, 0% 100% ); border-top-left-radius: var(--minipage-border-radius); border-bottom-left-radius: var(--minipage-border-radius); } #infos_etapes li:last-child { padding-inline-end: var(--minipage-install-menu-padding); clip-path: polygon( 100% 0%, 100% 100%, 0% 100%, var(--minipage-install-menu-arrow-width) 50%, 0% 0% ); border-top-right-radius: var(--minipage-border-radius); border-bottom-right-radius: var(--minipage-border-radius); } } /* Habillage (en vrac) ---------------------------------------------- */ .petit-centre { width: 300px; margin: auto; margin-bottom: 1.5em; text-align: center; } .petit-centre .logo { margin-bottom: 1.5em; } /* installation des plugins */ .install-plugins {position:relative;margin-bottom: 0;} .install-plugins.success + .install-plugins.success {margin-top: 0;border-top: 0;} .install-plugins.error + .install-plugins.error {margin-top: 0;border-top: 0;} .install-plugins .result {display:block;position:absolute;top:0.8em;right:0.8em;font-weight:bold;} .install-plugins .success {display: none;} /* ne pas afficher les installations ok mais seulement les echecs */ /* end */