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/ |
[(#REM)
Ce squelette définit les styles des boîtes de l'espace privé.
Ce composant correspond aux balises #BOITE_OUVRIR et cie.
L'entête et le pied sont optionnels.
Les boîtes simples reprennent un style proche des formulaires.
Organisation du fichier :
0. Variables
1. Layout et rythme vertical
2. Base graphique commune
3. Variantes principales
4. Variantes d'états
5. Autres variantes
6. Cas particuliers
7. Déprécations
Markup :
.box
.box__header
.box__body
.box__footer
<style>]
#CACHE{3600*100,cache-client}
#HTTP_HEADER{Content-Type: text/css; charset=utf-8}
#HTTP_HEADER{Vary: Accept-Encoding}
/**
* ============
* 0. Variables
* ============
*
* LISEZ MOI :)
*
* Certains aspects de ce composant sont mutualisés avec les formulaires et les listes,
* qui sont également de sortes de « boîtes » avec entête, corps et pieds.
* On essaie de garder une unité graphique entre les 3 : bordure, espacements…
*
* Pour cela il y a une série de variables réutilisées entre eux.
* Leurs valeurs pouvant changer selon les breakpoints ou les variantes de tailles,
* on est obligé de passer par des variables intermédiaires --spip-box-xxx-mini
* plutôt que de réutiliser directement --spip-box-xxx ailleurs : cela ne fonctionnerait pas tout le temps.
*/
/* D'abord les variable intermédiaires mutualisées : ne pas les utiliser directement. */
:root {
/* Taille réduite */
--spip-box-spacing-x-mini: 0.66rem;
--spip-box-spacing-y-mini: 0.66rem;
--spip-box-heading-fontsize-mini: 1em;
--spip-box-heading-iconsize-mini: 16px;
/* Taille normale */
--spip-box-spacing-x-normal: 1.15rem;
--spip-box-spacing-y-normal: 1.15rem;
--spip-box-heading-fontsize-normal: 1.125em;
--spip-box-heading-iconsize-normal: 24px;
}
/* Puis les variables propres à ce composant */
:root {
/* Espacements */
--spip-box-spacing-x: var(--spip-box-spacing-x-mini);
--spip-box-spacing-y: var(--spip-box-spacing-x-mini);
/* Entête */
--spip-box-heading-fontsize: var(--spip-box-heading-fontsize-mini);
--spip-box-heading-iconsize: var(--spip-box-heading-iconsize-mini);
--spip-box-heading-iconpadding: calc(var(--spip-box-heading-iconsize-mini) + (var(--spip-box-spacing-x-mini) * 1.5));
/* Couleurs */
--spip-box-border-color: hsla(0, 0%, 0%, 0.125); /* bordure externe */
--spip-box-border-color-plus: hsla(0, 0%, 0%, 0.2); /* bordure + foncée pour démarquer si fond de couleur :-/ */
--spip-box-sep-color: hsla(0, 0%, 0%, 0.06); /* bordures séparations internes */
/* Titre */
--spip-box-heading-fontweight: 600;
/* Divers */
--spip-box-border-radius: var(--spip-border-radius);
--spip-box-highlightsize: 1rem;
--spip-box-caretsize: 2rem; /* picto dépliant */
}
@media (min-width: 768px) {
:root {
/* Espacements */
--spip-box-spacing-x: var(--spip-box-spacing-x-normal);
--spip-box-spacing-y: var(--spip-box-spacing-x-normal);
/* Entête */
--spip-box-heading-fontsize: var(--spip-box-heading-fontsize-normal);
--spip-box-heading-iconsize: var(--spip-box-heading-iconsize-normal);
--spip-box-heading-iconpadding: calc(var(--spip-box-heading-iconsize-normal) + (var(--spip-box-spacing-x-normal) * 1.5));
/* Divers */
--spip-box-highlightsize: 1.5rem;
}
/* Taille réduite */
.box.mini,
.lat,
.affiche_milieu,
.formulaire_editer_liens,
.formulaire_dater {
/* Espacements */
--spip-box-spacing-x: var(--spip-box-spacing-x-mini);
--spip-box-spacing-y: var(--spip-box-spacing-x-mini);
/* Entête */
--spip-box-heading-fontsize: var(--spip-box-heading-fontsize-mini);
--spip-box-heading-iconsize: var(--spip-box-heading-iconsize-mini);
--spip-box-heading-iconpadding: calc(var(--spip-box-heading-iconsize-mini) + (var(--spip-box-spacing-x-mini) * 1.5));
/* Divers */
--spip-box-highlightsize: 1rem;
}
}
/**
* ============================
* 1. Layout et rythme vertical
* ============================
*/
.box,
.box * {
box-sizing: border-box;
}
/* La marge externe doit être identique entre plusieurs composants (formulaires, …).
Plus tard il faudra se baser sur spip-spacing-y quand ça sera au point.
Pour l'instant on laisse la valeur historique. */
.box {
position: relative;
margin: calc(var(--spip-margin-bottom) * 1.5) 0;
}
/* Même padding partout, ajusté pour le footer */
.box__header, .box__body, .box__footer {
position: relative;
padding: var(--spip-box-spacing-y) var(--spip-box-spacing-x);
}
.box__footer {
padding-top: calc(var(--spip-box-spacing-y) / 2);
padding-bottom: calc(var(--spip-box-spacing-y) / 2);
}
/* Annuler marges inutiles au début et à la fin */
.box__body > :first-child,
.box__body > :first-child > :first-child {
margin-top: 0;
}
.box__body > :last-child {
margin-bottom: 0;
}
.box__header h1, .box__header h2, .box__header h3, .box__header h4, .box__header h5, .box__header h6 {
margin-bottom: 0;
}
.box__footer .btn,
.box__footer button,
.box__footer .groupe-btns {
margin-bottom: 0;
}
/**
* =========================
* 2. Base graphique commune
* =========================
*/
/* Conteneur + obligé de reset les styles des vieux messages d'alertes */
.box,
.box.notice, .box.error, .box.success {
padding: 0;
background: var(--spip-color-white);
border: 1px solid var(--spip-box-border-color);
border-radius: var(--spip-box-border-radius);
color: var(--spip-color-black);
box-shadow: none;
transition: box-shadow 0.2s;
}
/* Header */
.box__header {
border-top-left-radius: inherit;
border-top-right-radius: inherit;
border-bottom: 1px solid var(--spip-box-sep-color);
}
/* Body : sans titre et/ou sans footer, ajuster l'arrondi */
.box__body:first-child {
border-top-left-radius: var(--spip-box-border-radius);
border-top-right-radius: var(--spip-box-border-radius);
}
.box__body:only-child {
border-bottom-left-radius: var(--spip-box-border-radius);
border-bottom-right-radius: var(--spip-box-border-radius);
}
/* Footer */
.box__footer {
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
background-color: var(--spip-color-theme-lightest);
text-align: var(--spip-right);
}
/* Titres
Règle : si h3, c'est le style par défaut.
Si autre balise et qu'on veut forcer le style par défaut, utiliser la variante .titrem sur le header. */
.box__header h3,
.box__header.titrem h1, .box__header.titrem h2, .box__header.titrem h4, .box__header.titrem h5, .box__header.titrem h6 {
font-size: var(--spip-box-heading-fontsize);
font-weight: var(--spip-box-heading-fontweight);
}
/**
* ========================
* 3. Variantes principales
* ========================
*/
/* Simple = boîte par défaut */
.box.simple {}
/* Sobre */
.box.sobre {
background-color: var(--spip-color-gray-lightest);
border: 0;
}
/* Info */
.box.info {
border: 3px solid var(--spip-color-theme-light);
background-color: var(--spip-color-white);
}
/* Note */
.box.note {
border: 3px solid var(--spip-color-theme-lighter);
background-color: var(--spip-color-theme-lightest);
}
/* Raccourcis */
.box.raccourcis {
background-color: var(--spip-color-gray-lighter);
border: 0;
}
/* Important */
.box.important {
border: 3px solid var(--spip-color-theme);
background: var(--spip-color-white);
}
/* Highlight */
.box.highlight {
background-color: var(--spip-color-theme-light);
border: 0;
}
.box.highlight .box_header {
border-bottom-color: var(--spip-box-sep-color);
}
.box.highlight .box_header * {
color: inherit;
}
/* Inverse */
.box.inverse {
background-color: var(--spip-color-gray-darker);
color: var(--spip-color-white);
}
.box.inverse .box__header {
border-bottom-color: hsla(0, 0%, 100%, 0.1);
}
.box.inverse .box__header * {
color: inherit;
}
/**
* ====================
* 4. Variantes d'états
* ====================
*/
/* Emballage */
.box.notice, .box.error, .box.success {
box-shadow: var(--spip-box-shadow);
border: 0;
}
.box.notice:hover, .box.error:hover, .box.success:hover,
.box.notice:focus-within, .box.error:focus-within, .box.success:focus-within {
box-shadow: var(--spip-box-shadow-hover);
}
/* Icône centrée verticalement dans le header */
.box.notice .box__header, .box.error .box__header, .box.success .box__header,
.box.notice .box__body, .box.error .box__body, .box.success .box__body {
background-repeat: no-repeat;
background-size: var(--spip-box-heading-iconsize);
background-position: var(--spip-left) var(--spip-box-spacing-x) center;
}
/* Décommenter s'il faut centrer l'icône sur la 1ère ligne de texte dans le body */
/*.notice .box__body, .error .box__body, .success .box__body {
background-position: var(--spip-left) var(--spip-box-spacing-x) top calc(var(--spip-box-spacing-y) - ((var(--spip-box-heading-iconsize) - var(--spip-line-height)) / 2));
}*/
/* Espacement pour l'icône selon qu'elle soit dans le header ou dans le body */
.box.notice .box__header, .box.error .box__header, .box.success .box__header,
.box.notice .box__body:first-child, .box.error .box__body:first-child, .box.success .box__body:first-child {
padding-#LEFT: var(--spip-box-heading-iconpadding);
}
/* Bordure sur le côté */
.box.notice .box__header, .box.error .box__header, .box.success .box__header,
.box.notice .box__body, .box.error .box__body, .box.success .box__body,
.box.notice .box__footer, .box.error .box__footer, .box.success .box__footer {
border-#LEFT: var(--spip-box-highlightsize) solid transparent;
}
/* Mini hack : sous le header on met la bordure basse en pseudo pour ne pas empiéter la bordure latérale colorée */
.box.notice .box__header, .box.error .box__header, .box.success .box__header {
border-bottom: 0;
}
.box.notice .box__header:before, .box.error .box__header:before, .box.success .box__header:before {
content: "";
display: block;
z-index: 2;
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 1px solid var(--spip-box-sep-color);
}
/* Notice */
.box.notice .box__header,
.box.notice .box__body {
border-#LEFT-color: hsl(var(--spip-color-notice--h), var(--spip-color-notice--s), 60%);
}
.box.notice .box__footer {
border-#LEFT-color: hsl(var(--spip-color-notice--h), var(--spip-color-notice--s), 50%);
}
.box.notice .box__header,
.box.notice .box__body:first-child {
background-image: url("#CHEMIN_IMAGE{warning-32.png}");
}
/* Erreur */
.box.error .box__header,
.box.error .box__body {
border-#LEFT-color: hsl(var(--spip-color-error--h), var(--spip-color-error--s), 60%);
}
.box.error .box__footer {
border-#LEFT-color: hsl(var(--spip-color-error--h), var(--spip-color-error--s), 50%);
}
.box.error .box__header,
.box.error .box__body:first-child {
background-image: url("#CHEMIN_IMAGE{erreur-32.png}");
}
/* Succès */
.box.success .box__header,
.box.success .box__body {
border-#LEFT-color: hsl(var(--spip-color-success--h), var(--spip-color-success--s), 55%);
}
.box.success .box__footer {
border-#LEFT-color: hsl(var(--spip-color-success--h), var(--spip-color-success--s), 48%);
}
.box.success .box__header,
.box.success .box__body:first-child {
background-image: url("#CHEMIN_IMAGE{ok-32.png}");
}
/**
* ===================
* 5. Autres variantes
* ===================
*/
/* En colonne latérale : cf. variables */
.lat .box {}
/* Taille réduite : cf. variables */
.box.mini {}
/* Flat : sans ombre portée.
Peut se conjuguer aux autres quand on veut forcer.
Certaines le sont d'office, notamment les boîtes imbriquées.
Une bordure est ajoutée si nécessaire. */
.box.flat,
.box .box:not(.pop) /* imbriquées */
{
box-shadow: none !important;
}
.box.notice.flat,
.box.error.flat,
.box.success.flat,
.box .box.notice:not(.pop), /* imbriquées */
.box .box.error:not(.pop),
.box .box.success:not(.pop) {
border: 1px solid var(--spip-box-border-color);
}
/* Pop : avec une ombre portée.
Peut se conjuguer aux autres quand on veut forcer.
Il faut ajuster la bordure dans certains cas */
.box.pop {
box-shadow: var(--spip-box-shadow);
}
.box.pop:hover,
.box.pop:focus-within {
box-shadow: var(--spip-box-shadow-hover);
}
.box.pop:not(.note):not(.info):not(.important) {
border: 0;
}
/**
* ===================
* 6. Cas particuliers
* ===================
*/
/**
* Menu des rubriques dépliables.
* Ici principalement la décoration de base.
* Pour les choses propres au JS, voir plus bas.
*/
.box.sous-rub {}
.box.sous-rub a {
transition: background 0.1s;
}
.box.sous-rub a:hover {
background-color: var(--spip-color-theme-lightest);
}
/* Header :
.box__header
.titrem
a.titremancre
a.titremlien
.logo
.descriptif */
.box.sous-rub .box__header {
padding: 0;
border-bottom: 0;
border-radius: inherit;
}
/* Conteneur titre + logo + picto */
.box.sous-rub .titrem {
display: flex;
font-size: 1em;
background-repeat: no-repeat;
border-radius: inherit;
}
.box.sous-rub .titrem.deplie/*,
.box.sous-rub .titrem.deplie .logo*/ {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* Titre
On met le padding sur le lien pour maximiser la zone cliquable.
Le JS ajoute un <a> au même niveau pour déplier/replier */
.box.sous-rub .titrem a {
border-radius: inherit;
}
.box.sous-rub .titrem a.titremlien {
direction: var(--spip-dir); /* Forcer car le lien met sa propre direction */
flex: 1 1 auto;
display: flex;
align-items: center; /* Pour aligner les one-liners avec le logo éventuel */
padding: var(--spip-box-spacing-y) calc(var(--spip-box-spacing-x) / 2);
font-weight: normal;
}
.box.sous-rub .rang {
opacity: 60%;
}
.box.sous-rub .titrem a.titremlien[hreflang]:after {
font-weight: normal;
}
/* Si titre dépliable */
.box.sous-rub .titrem.depliant a:first-of-type:not(:only-of-type) {
border-top-#RIGHT-radius: 0;
border-bottom-#RIGHT-radius: 0;
}
.box.sous-rub .titrem.depliant a:last-of-type:not(:only-of-type) {
border-top-#LEFT-radius: 0;
border-bottom-#LEFT-radius: 0;
}
.box.sous-rub .titrem.depliant a:hover,
.box.sous-rub .titrem.depliant a:focus {
background-color: var(--spip-color-theme-lighter);
color: var(--spip-color-black);
}
/* Logo : voir surtout dans lists.css */
.box.sous-rub .box__header .logo-carre {
margin-top: calc(var(--spip-box-spacing-y) * -1);
margin-bottom: calc(var(--spip-box-spacing-y) * -1);
margin-#RIGHT: calc((var(--spip-box-spacing-x) / 2) * -1);
margin-#LEFT: auto;
padding-#RIGHT: 0.25em;
order: 10; /* Doit être en dernier, après le :after éventuel du <a> */
}
/* Descriptif */
.box.sous-rub .descriptif {
padding: calc(var(--spip-box-spacing-y) / 2) calc(var(--spip-box-spacing-x) / 2);
padding-left: calc(var(--spip-box-caretsize) + (var(--spip-box-spacing-x) / 2));
padding-top: 0;
padding-bottom: var(--spip-box-spacing-y);
font-size: 0.85em;
}
.box.sous-rub .descriptif *:last-child {
margin-bottom: 0;
}
/* Body */
.box.sous-rub .box__body {
padding: 0;
border-top: 0;
}
.box.sous-rub .box__body > * {
border-top: 1px solid var(--spip-box-sep-color);
}
.box.sous-rub a:hover {
color: black;
}
.box.sous-rub .liste-items {
font-size: 0.85em;
line-height: 1.2;
border-top: 0;
}
.box.sous-rub .liste-items .item {
padding: 0;
border-color: var(--spip-box-sep-color);
}
.box.sous-rub .liste-items .item a {
display: block;
padding: 0.75em;
}
.box.sous-rub .liste-items > .item:last-child {
border-bottom: 0;
}
.box.sous-rub .sous-sous-rub {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
/**
* ===============
* 7. Déprécations
* ===============
* Vieilles boîtes dépliables/repliables encore maintenues mais dépréciées.
* Exemple : menu des rubriques dépliables (utilisé ailleurs ?)
* Ici juste les styles propres au JS, pour la déco voir plus haut.
*/
/* Titre
- non dépliable : .titrem.impliable
- dépliable / init : .titrem.depliant.replie
- dépliable / déplié : .titrem.depliant.deplie.blocdeplie
- dépliable / replié : .titrem.depliant.replie.blocreplie */
/* Picto déplier / Replier */
.box .titremancre {
position: relative;
display: block;
flex: 0 0 var(--spip-box-caretsize);
background-position: center center;
background-repeat: no-repeat;
background-size: 1.5em auto;
opacity: 0.5;
}
.box .titremancre:hover,
.box .titremancre:focus {
opacity: 1;
}
.box .titremancre:after {
content: "";
display: block;
position: absolute;
#RIGHT: 0;
top: 50%;
transform: translateY(-50%);
height: 1em;
border-left: 1px solid hsla(0, 0%, 0%, 0.5);
}
.box .replie .titremancre {
background-image: url([(#CHEMIN_IMAGE{deplierhaut.svg})]);
}
.box .deplie .titremancre {
background-image: url("#CHEMIN_IMAGE{deplierbas.svg}");
}
.box .impliable .titremancre {
display: none;
}
/* Bloc masqué
- replié : .bloc_depliable.blocreplie
- déplié : idem (bug ? pas de .blocdeplie ajouté) */
.js .box .bloc_depliable.blocreplie {
display: none;
}
.js .box .bloc_depliable.blocdeplie {
display: block;
}
.box .bloc_depliable .pagination {
white-space: normal;
}