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/histoire/prive/themes/spip/ |
#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.25rem;
--spip-alert-spacing-y: 1.25rem;
--spip-alert-iconsize: 1.25em;
--spip-alert-closesize: 1.25em;
}
}
:root {
--spip-alert-spacing-x: 0.75rem;
--spip-alert-spacing-y: 0.75rem;
--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.75rem;
--spip-alert-spacing-y: 0.75rem;
--spip-alert-iconsize: 1em;
--spip-alert-closesize: 1em;
}
.msg-alert.large,
.formulaire_spip .reponse_formulaire {
--spip-alert-spacing-x: 1.5rem;
--spip-alert-spacing-y: 1.5rem;
--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);
/* gouttière + taille icone + espacement arbitraire avec le texte */
padding-#LEFT: calc(var(--spip-alert-spacing-x) + var(--spip-alert-iconsize) + 0.75em);
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: [(#LEFT)] var(--spip-alert-spacing-x) top 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);
box-shadow: inset 0 0 1.5em hsla(0, 0%, 0%, 0.02);
background-color: var(--spip-color-gray-lighter);
border-#LEFT: 0.5rem solid var(--spip-color-gray-light);
}
/* 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), 90%, 88%);
border-color: hsl(var(--spip-color-notice--h), 100%, 48%);
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), 60%, 95%);
border-color: hsl(var(--spip-color-error--h), var(--spip-color-error--s), 50%);
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), 55%, 90%);
border-color: hsl(var(--spip-color-success--h), var(--spip-color-success--s), 45%);
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), 45%, 93%);
border-color: hsl(var(--spip-color-info--h), var(--spip-color-info--s), 60%);
background-image: url("#CHEMIN_IMAGE{info-24.png}");
}
/**
* ===================
* 3. Autres variantes
* ===================
* Ces variantes peuvent se conjuguer aux variantes principales : .notice.mini, .error.large, etc.
*/
/* 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 {
/* font-size: 1.1em; */
}
/* 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;
}
/* Bloc ajax invalid apres reload */
.ajaxbloc.invalid {
box-shadow: 0 0 var(--spip-alert-spacing-x) hsl(var(--spip-color-error--h), var(--spip-color-error--s), 50%);
}