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/univers/tmp/cache/skel/ |
<?php /* * Squelette : ../prive/themes/spip/box.css.html * Date : Sat, 29 Jun 2024 13:04:45 GMT * Compile : Tue, 13 Aug 2024 14:53:55 GMT * Boucles : */ // // Fonction principale du squelette ../prive/themes/spip/box.css.html // Temps de compilation total: 0.180 ms // function html_517d6170aa4b7bd2bdcdbc7a062a2547($Cache, $Pile, $doublons = array(), $Numrows = array(), $SP = 0) { if (isset($Pile[0]["doublons"]) AND is_array($Pile[0]["doublons"])) $doublons = nettoyer_env_doublons($Pile[0]["doublons"]); $connect = ''; $page = ( ' ' . '<'.'?php header("X-Spip-Cache: 360000"); ?'.'>'.'<'.'?php header("Cache-Control: max-age=360000"); ?'.'>'.'<'.'?php header("X-Spip-Statique: oui"); ?'.'>' . '<'.'?php header(' . _q('Content-Type: text/css; charset=utf-8') . '); ?'.'>' . '<'.'?php header(' . _q('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-' . interdire_scripts(($Pile[0]['left'] ?? null)) . ': 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-' . interdire_scripts(($Pile[0]['left'] ?? null)) . ': 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-' . interdire_scripts(($Pile[0]['left'] ?? null)) . '-color: hsl(var(--spip-color-notice--h), var(--spip-color-notice--s), 60%); } .box.notice .box__footer { border-' . interdire_scripts(($Pile[0]['left'] ?? null)) . '-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((string)'warning-32.png') . '"); } /* Erreur */ .box.error .box__header, .box.error .box__body { border-' . interdire_scripts(($Pile[0]['left'] ?? null)) . '-color: hsl(var(--spip-color-error--h), var(--spip-color-error--s), 60%); } .box.error .box__footer { border-' . interdire_scripts(($Pile[0]['left'] ?? null)) . '-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((string)'erreur-32.png') . '"); } /* Succès */ .box.success .box__header, .box.success .box__body { border-' . interdire_scripts(($Pile[0]['left'] ?? null)) . '-color: hsl(var(--spip-color-success--h), var(--spip-color-success--s), 55%); } .box.success .box__footer { border-' . interdire_scripts(($Pile[0]['left'] ?? null)) . '-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((string)'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-' . interdire_scripts(($Pile[0]['right'] ?? null)) . '-radius: 0; border-bottom-' . interdire_scripts(($Pile[0]['right'] ?? null)) . '-radius: 0; } .box.sous-rub .titrem.depliant a:last-of-type:not(:only-of-type) { border-top-' . interdire_scripts(($Pile[0]['left'] ?? null)) . '-radius: 0; border-bottom-' . interdire_scripts(($Pile[0]['left'] ?? null)) . '-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-' . interdire_scripts(($Pile[0]['right'] ?? null)) . ': calc((var(--spip-box-spacing-x) / 2) * -1); margin-' . interdire_scripts(($Pile[0]['left'] ?? null)) . ': auto; padding-' . interdire_scripts(($Pile[0]['right'] ?? null)) . ': 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; ' . interdire_scripts(($Pile[0]['right'] ?? null)) . ': 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((string)'deplierhaut.svg') . '); } .box .deplie .titremancre { background-image: url("' . chemin_image((string)'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; } '); return analyse_resultat_skel('html_517d6170aa4b7bd2bdcdbc7a062a2547', $Cache, $page, '../prive/themes/spip/box.css.html'); }