File "installation.css"

Full path: /home/argothem/www/organecyberpresse/prive/themes/spip/installation.css
File size: 4.49 KB
MIME-type: text/plain
Charset: utf-8

/**
 * 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 */