Valider d355f610 rédigé par tcharlss's avatar tcharlss Validation de marcimat
Parcourir les fichiers

Refacto des styles des messages d'alerte de l’espace privé (#4727). 

* On les déplace dans un composant à part `alertes.css`.
* Visuellement on fait simple avec un aplat, texte légèrement coloré mais accessible, petite icône de côté.
* On conserve le support des classes actuelles utilisées pour les alertes : `.notice`, `.error`, `.success` et `.information`. Mais ces noms sont trop génériques et les styles peuvent entrer en collision : à déprécier plus tard.
* En remplacement on ajoute un nouveau composant `.msg-alert`, plus sûr.
* Les messages de retour des formulaires sont une extension de ce composant (joie des @extend faits à la main).
* Nouvelle icône info-xxx.svg (d'un usage différent que information-xxx.svg).
parent d84c79cd

prive/themes/spip/alertes.css.html

0 → 100644
+236 −0
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff 
#CACHE{0}

[(#REM)



	Ce squelette définit les styles des messages d'alerte de l'espace privé.



	Ce composant correspond aux balises #ALERTE et cie.



	On maintient pour un temps la compat avec les vieux .notice, .error et .success

	qui pourraient se ballader dans la nature, mais leur utilisation est dépréciée.



	Organisation du fichier :



	0. Variables

	1. Habillage de base

	2. Variantes principales

	3. Autres variantes



	Markup :



	.msg-alert[.type][.simple]

	  .msg-alert__heading

	  .msg-alert__text



<style>]

#CACHE{3600*100,cache-client}

#HTTP_HEADER{Content-Type: text/css; charset=utf-8}

#HTTP_HEADER{Vary: Accept-Encoding}





/**

 * ============

 * 0. Variables

 * ============

 */





/* Nb : la media-query au début sinon pb */

@media (min-width: 768px) {

	:root {

		--spip-alert-spacing-x: 1.25em;

		--spip-alert-spacing-y: 1.25em;

		--spip-alert-iconsize: 1.25em;

		--spip-alert-closesize: 1.25em;

	}

}

:root {

	--spip-alert-spacing-x: 0.75em;

	--spip-alert-spacing-y: 0.75em;

	--spip-alert-border-radius: var(--spip-border-radius);

	--spip-alert-iconsize: 1.25em;

	--spip-alert-closesize: 1em;

}

.lat .msg-alert,

.msg-alert.mini {

	--spip-alert-spacing-x: 0.75em;

	--spip-alert-spacing-y: 0.75em;

	--spip-alert-iconsize: 1em;

	--spip-alert-closesize: 1em;

}

.msg-alert.large,

.formulaire_spip .reponse_formulaire {

	--spip-alert-spacing-x: 1.5em;

	--spip-alert-spacing-y: 1.5em;

	--spip-alert-iconsize: 1.5em;

	--spip-alert-closesize: 1.25em;

}





/**

 * ====================

 * 1. Habillage de base

 * ====================

 */





 /* Conteneur */

.msg-alert,

.msg-alert * {

	box-sizing: border-box;

}

.msg-alert,

.notice, .error, .success,

.formulaire_spip .reponse_formulaire {

	position: relative;

	padding: var(--spip-alert-spacing-y) var(--spip-alert-spacing-x);

	padding-left: calc((var(--spip-alert-spacing-x) * 2) + var(--spip-alert-iconsize));

	margin: calc(var(--spip-margin-bottom) * 1.5) 0; /* Idem boîtes */

	background-repeat: no-repeat;

	/* Aligner icône au niveau de la 1ère ligne de texte */

	background-position: var(--spip-alert-spacing-x) calc(var(--spip-alert-spacing-y) - ((var(--spip-alert-iconsize) - var(--spip-line-height)) / 2));

	background-size: var(--spip-alert-iconsize);

	font-weight: normal;

	border-radius: var(--spip-border-radius);

	background-color: var(--spip-color-gray-lighter);

	box-shadow: inset 0 0 1.5em hsla(0, 0%, 0%, 0.02);

	border: 0;

}



/* Titre */

.msg-alert__heading {

	font-size: 1em;

	font-weight: bold;

	margin-bottom: calc(var(--spip-alert-spacing-y) / 2);

}



/* Rythme vertical des principauxs éléments blocks du texte */

.msg-alert__text p,

.msg-alert__text ul,

.msg-alert__text blockquote,

.msg-alert__text table {

	margin-bottom: calc(var(--spip-alert-spacing-y) / 2);

}

.msg-alert__text > *:last-child {

	margin-bottom: 0 !important; /* obligé car sélecteurs trop spécifiques ailleurs (#conteneur ul.spip) */

}



/* Liens */

.msg-alert a {

	color: var(--spip-color-black);

	text-decoration: underline;

}



/* Code */

.msg-alert tt,

.msg-alert code {

	color: var(--spip-color-black);

}





/**

 * ========================

 * 2. Variantes principales

 * ========================

 */





/* Notice */

.msg-alert.notice,

.notice {

	color:            hsl(var(--spip-color-notice--h), var(--spip-color-notice--s), 18%);

	background-color: hsl(var(--spip-color-notice--h), var(--spip-color-notice--s), 85%);

	background-image: url(#CHEMIN_IMAGE{warning-24.png});

}



/* Erreur */

.msg-alert.error,

.formulaire_spip .reponse_formulaire_erreur,

.error {

	color:            hsl(var(--spip-color-error--h), var(--spip-color-error--s), 18%);

	background-color: hsl(var(--spip-color-error--h), var(--spip-color-error--s), 90%);

	background-image: url(#CHEMIN_IMAGE{erreur-24.png});

}



/* Succès */

.msg-alert.success,

.formulaire_spip .reponse_formulaire_ok,

.success {

	color:            hsl(var(--spip-color-success--h), var(--spip-color-success--s), 15%);

	background-color: hsl(var(--spip-color-success--h), var(--spip-color-success--s), 85%);

	background-image: url(#CHEMIN_IMAGE{ok-24.png});

}



/* Information */

.msg-alert.info,

.information {

	color:            hsl(var(--spip-color-info--h), var(--spip-color-info--s), 25%);

	background-color: hsl(var(--spip-color-info--h), var(--spip-color-info--s), 92%);

	background-image: url(#CHEMIN_IMAGE{info-24.png});

}





/**

 * ===================

 * 3. Autres variantes

 * ===================

 * Ces variantes peuvent se conjuguer aux variantes principales : .notice.mini, .error.simple, etc.

 */





/* Simple = juste une bordure */

.msg-alert.simple {

	border: 2px solid hsla(0, 0%, 0%, 0.1);

	box-shadow: none;

}

.msg-alert.notice.simple {

	border-color:     hsl(var(--spip-color-notice--h), 100%, 48%);

	background-color: transparent;

}

.msg-alert.error.simple {

	border-color:     hsl(var(--spip-color-error--h), var(--spip-color-error--s), 50%);

	background-color: transparent;

}

.msg-alert.success.simple {

	border-color:     hsl(var(--spip-color-success--h), var(--spip-color-success--s), 50%);

	background-color: transparent;

}

.msg-alert.info.simple {

	border-color:     hsl(var(--spip-color-info--h), var(--spip-color-info--s), 75%);

	background-color: transparent;

}



/* Variante mini, automatique en colonne latérale : voir variables */

.msg-alert.mini,

.lat .msg-alert {

	font-size: 0.9em;

	margin: calc(var(--spip-margin-bottom) * 0.75) 0; /* Moitié */

}



/* Variante large : voir variables */

.msg-alert.large,

.formulaire_spip .reponse_formulaire {}



/* Variante fermable */

.msg-alert.fermable {

	padding-#RIGHT: calc((var(--spip-alert-spacing-x) * 2) + 1.5em);

}

.msg-alert__close {

	width: var(--spip-alert-closesize);

	height: var(--spip-alert-closesize);

	position: absolute;

	z-index: 2;

	/* Aligner icône au niveau de la 1ère ligne de texte */

	top: calc(var(--spip-alert-spacing-y) + (var(--spip-line-height) - var(--spip-alert-closesize)));

	/* top: var(--spip-alert-spacing-y); */

	#RIGHT: var(--spip-alert-spacing-x);

	padding: 0;

	background: transparent url("[(#CHEMIN_IMAGE{fermer-16.png})]") center/1em auto no-repeat;

	background-size: contain;

	border: 0;

	opacity: 0.75;

}

.msg-alert__close:hover,

.msg-alert__close:focus {

	opacity: 1;

	background-color: transparent;

}

prive/themes/spip/forms.css.html

+13 −45
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -793,57 +793,25 @@ 




/**

 * =============================

 * 10. Messages de retour et cie

 * =============================

 * ======================

 * 10. Messages de retour

 * ======================

 */





.formulaire_spip .reponse_formulaire,

.error, .success, .notice, .information {

	border: 2px solid;

	color: var(--spip-form-color-text);

	font-weight: normal;

	padding: var(--spip-form-spacing-y) var(--spip-form-spacing-x);

	padding-left: calc(var(--spip-form-spacing-y) + 24px); /* place pour icône */

	min-height: 24px;

	background-repeat: no-repeat;

	background-position: calc(var(--spip-form-spacing-y) / 2) var(--spip-form-spacing-x);

	background-size: 24px;

	margin-bottom: var(--spip-form-spacing-y);

	margin-top: var(--spip-form-spacing-y);

}

.formulaire_spip .reponse_formulaire {

	border-top-#RIGHT-radius: var(--spip-border-radius);

	border-bottom-#RIGHT-radius: var(--spip-border-radius);

	border-width: 0;

/* Les styles sont mutualisés dans alertes.css

   Par défaut, on étend les styles d'une alerte large.

   Ici, ne mettre que les ajustements propres aux formulaires.

   Nb : on double les sélecteurs pour avoir la priorité (joie des @extend) */

.formulaire_spip .reponse_formulaire.reponse_formulaire {

	border-#LEFT-width: 0.6em;

	box-shadow: inset 0 0 1em hsla(0, 0%, 100%, 0.2);

}

.formulaire_spip .reponse_formulaire_ok,

.success {

	color: hsl(var(--spip-color-success--h), var(--spip-color-success--s), 25%);

	border-color: hsl(var(--spip-color-success--h), var(--spip-color-success--s), 66%);

	background-color:hsl(var(--spip-color-success--h), var(--spip-color-success--s), 85%);

	background-image: url(#CHEMIN_IMAGE{ok-24.png});

}

.formulaire_spip .reponse_formulaire_erreur,

.error {

	color: hsl(var(--spip-color-error--h), var(--spip-color-error--s), 45%);

	border-color: hsl(var(--spip-color-error--h), var(--spip-color-error--s), 87%);

	background-color:hsl(var(--spip-color-error--h), var(--spip-color-error--s), 95%);

	background-image: url(#CHEMIN_IMAGE{erreur-24.png});

	border-#LEFT-style: solid;

}

.notice {

	color: hsl(var(--spip-color-notice--h), var(--spip-color-notice--s), 22%);

	border-color: hsl(var(--spip-color-notice--h), var(--spip-color-notice--s), 57%);

	background-color:hsl(var(--spip-color-notice--h), var(--spip-color-notice--s), 87%);

	background-image: url(#CHEMIN_IMAGE{warning-24.png});

.formulaire_spip .reponse_formulaire.reponse_formulaire_ok {

	border-#LEFT-color: hsl(var(--spip-color-success--h), var(--spip-color-success--s), 66%);

}

.information {

	color: hsl(var(--spip-color-info--h), var(--spip-color-info--s), 27%);

	border-color: hsl(var(--spip-color-info--h), var(--spip-color-info--s), 85%);

	background-color:hsl(var(--spip-color-info--h), var(--spip-color-info--s), 94%);

.formulaire_spip .reponse_formulaire.reponse_formulaire_erreur {

	border-#LEFT-color: hsl(var(--spip-color-error--h), var(--spip-color-error--s), 87%);

}

prive/themes/spip/images/info-xx.svg

0 → 100644
+1 −0
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff 
<svg xmlns="http://www.w3.org/2000/svg" height="64" viewBox="0 0 64 64" width="64"><g transform="scale(.125)" stroke-width="8"><circle cx="256" cy="256" fill="#00b0f5" r="256"/><path d="M256 190.667c-25.989 0-47.133-21.145-47.133-47.134S230.011 96.4 256 96.4c25.989 0 47.133 21.144 47.133 47.133 0 25.989-21.144 47.134-47.133 47.134zm0 34.267c-25.989 0-47.133 21.144-47.133 47.133v96.4c0 25.989 21.144 47.133 47.133 47.133 25.989 0 47.133-21.144 47.133-47.133v-96.4c0-25.99-21.144-47.133-47.133-47.133z" fill="#f4f1f1"/></g></svg>
 
 No newline at end of file

prive/themes/spip/style_prive.css.html

+1 −0
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -49,6 +49,7 @@ Valeurs par defaut : 
	forms.css,

	picker.css,

	box_skins.css,

	alertes.css,

	jquery-ui.css,

	content.css,

	exceptions.css,

Forge communautaire SPIP | Charte d'utilisation | Signaler un problème sur ce site