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

Refacto des styles des boîtes de l'espace privé (#4727). 

* D'une façon générale, on aligne les styles des boîtes avec ceux des formulaires : bordure, espacements, ombre portée, etc.
* Les styles des variantes principales sont un peu ajustés, mais restent les mêmes dans les grandes lignes : couleurs, bordures, etc.
* En revanche on revient plus profondément sur les variantes d'états `notice`, `error` et `success`. Elle ne doivent pas être confondues ni se substituer à de vrais messages d'alerte, ce que pouvaient laisser à penser les styles actuels. On se contente d’ajouter une bordure  de couleur sur le côté, l'icône est au niveau du titre quand il est présent, sinon dans le body.
* Ajout de quelques variantes à combiner aux précédentes pour des cas précis : `flat` pour supprimer l'ombre portée, `pop` pour l’inverse, et `mini` pour une version plus petite (apliquée automatiquement en colonne latérale).
* Les boîtes imbriquées sont toujours en mode « flat ».
* En variantes de header on ne laisse que `titrem`, toutes les autres sont inutiles (et quasi pas utilisées).
* Réorganisation complète de la CSS
parent 423442bd

prive/themes/spip/box_skins.css.html

+522 −119
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff 
[(#REM)



	Ce squelette definit les styles de l'espace prive



	Note: l'entete "Vary:" sert a repousser l'entete par

	defaut "Vary: Cookie,Accept-Encoding", qui est (un peu)

	genant en cas de "rotation du cookie de session" apres

	un changement d'IP (effet de clignotement).

	<style>

]

	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. Base lib

	2. Layout et rythme vertical

	3. Base graphique commune

	4. Variantes principales

	5. Variantes d'états

	6. Autres variantes

	7. Cas particuliers

	8. Déprécations



	Markup :



	.box

	  .inner

	    .hd (header)

	    .bd (body)

	    .ft (footer)



<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-box-iconsize: 32px;

		--spip-box-highlightsize: 1.5em;

	}

}

/* On reprend certaines valeurs des formulaires pour harmoniser */

:root {

	/* base pour les espacements internes */

	--spip-box-spacing-x: var(--spip-form-spacing-x);

	--spip-box-spacing-y: var(--spip-form-spacing-y);

	/* couleurs */

	--spip-box-sep-color: hsla(0, 0%, 0%, 0.125);

	--spip-box-border-color: hsla(0, 0%, 0%, 0.125); /* bordure basique */

	--spip-box-sep-color-inverse: hsla(0, 0%, 100%, 0.1);

	/* divers */

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

	--spip-box-iconsize: 24px;

	--spip-box-highlightsize: 1em; /* largeur bordure colorée sur boîtes d'états */

}

.lat .box,

.box.mini {

	--spip-box-iconsize: 24px;

	--spip-box-highlightsize: 1em;

	/* Obligé de reprendre à la main les mêmes valeurs que les forms */

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

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

}





/**

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

 * 1. Base lib

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

 */

[(#INCLURE{prive/themes/spip/box.css})]

/* ajustement des marges selon grille verticale en em */

.box{margin:[(#ENV{margin-bottom}|strmult{1.5})em] 0;}

.bd {padding:[(#ENV{margin-bottom}|strdiv{2})em] 10px;}

.bd > :first-child,.bd > :first-child > :first-child {margin-top:0;}

.bd > :last-child {margin-bottom:0;}

.hd, .ft {padding:[(#ENV{margin-bottom}|strdiv{2})em] 10px;}

.hd h1,.hd h2,.hd h3,.hd h4,.hd h5,.hd h6 {margin-bottom:0;}



/* **************** BLOCK SKINS ***************** */

/* ====== Contour blocks ====== */

/* remove *background-image:" to default to square corners for IE */

/* ----- simple (extends box) ----- */

.simple .inner {border:1px solid #ccc;background-color:#fcfcfc;color:#333;}

.simple .inner .hd {}

.simple b{}

/* ----- info (extends box) ----- */

.info .inner {border:2px solid #ENV{claire};background:#fcfcfc;}

.info .inner .hd {}

.info b{}

/* ----- note (extends box) ----- */

.note,.note .inner{border:1px solid #c2c2c2;}

.note .inner{border-color:#eee; border-width:4px; background-color:[#(#ENV{claire}|couleur_eclaircir{0.85})];}

.note .inner .hd {}



/* ----- raccourcis (extends box) ----- */

.raccourcis .inner{border:1px solid #ccc;background-color:#eee;}

.note .inner .hd {}



/* ----- important (extends box) ----- */

.important .inner{border: 3px solid [(#ENV{foncee})]; border-bottom-width:10px;background:#fff;}

.important b{}



/* ----- basic (extends box) ----- */

.basic {/*margin-bottom: -1px*/}

.basic .inner {/*padding-bottom: 1px;*/border: 1px solid #aaa;}

.basic .inner .hd {}

.basic b{}



/* ----- error, success, notice (extends box) ----- */

.box.error, .box.success, .box.notice {padding:0;backround-image:none;}

.error .inner,.success .inner,.notice .inner{border:2px solid;font-weight: normal;color:#333;}

.error .bd,.success .bd,.notice .bd {padding-[(#ENV{left})]:40px;min-height:24px;background-repeat:no-repeat;background-position: [(#ENV{left}) ]2px top 5px;background-size:32px;}

.box.error .hd,.box.success .hd,.box.notice .hd {padding-[(#ENV{left})]:40px;}

.error .ft,.success .ft,.notice .ft {padding-[(#ENV{left})]:40px;}

.box.error .ft,.box.success .ft,.box.notice .ft {border-color:#ddd;background-color:#eee;}



.success .inner{color: #264409;border-color: #C6D880;background-color:#E6EFC2;}

.success .bd{background-image:url(#CHEMIN_IMAGE{ok-32.png});}

.box.success .inner .hd {background-color:#C6DF61;}

.box.success .hd h1,.box.success .hd h2,.box.success .hd h3,.box.success .hd h4,.box.success .hd h5,.box.success .hd h6 {background-color:#C6DF61;}



.error .inner{color: #8A1F11;border-color: #FBC2C4;background-color:#FBE3E4;}

.error .bd{background-image:url(#CHEMIN_IMAGE{erreur-32.png});}

.box.error .inner .hd {background-color:#DF454F;color:#fff;}

.box.error .hd h1,.box.error .hd h2,.box.error .hd h3,.box.error .hd h4,.box.error .hd h5,.box.error .hd h6 {background-color:#DF454F;color:#fff;}



.notice .inner{color: #514721;border-color: #FFD324;background-color:#FFF6BF;}

.notice .bd{background-image:url(#CHEMIN_IMAGE{warning-32.png});}

.box.notice .inner .hd {background-color:#FFD83F;}

.box.notice .hd h1,.box.notice .hd h2,.box.notice .hd h3,.box.notice .hd h4,.box.notice .hd h5,.box.notice .hd h6 {background-color:#FFD83F;}





/* ====== Background blocks ====== */

.highlight > .inner{background-color:#ENV{claire}; border: 0; box-shadow: 0 0 15px #ccc;}

.inverse .inner{background-color:#ENV{foncee};color:#ffffff}



/* ====== Block headers and footers ====== */

.hd.titrem { background-repeat: no-repeat; padding-[(#ENV{left})]:16px; padding-[(#ENV{right})]:10px;

background-color: [#(#ENV{foncee}|couleur_eclaircir)];color: #4A4A4A; font-size:[(#ENV{line-height}|strmult{1})em];position:relative;line-height: 1;}

.hd.titrem h1,.hd.titrem h2,.hd.titrem h3,.hd.titrem h4,.hd.titrem h5,.hd.titrem h6{ font-size: 1em; color:#4A4A4A;}



.section{ background-repeat: no-repeat; padding-[(#ENV{left})]:16px; padding-[(#ENV{right})]:10px;

background-color: #ENV{foncee}; color: #4A4A4A;font-size:1.2em;position:relative;}

.section h1,.section h2,.section h3,.section h4,.section h5,.section h6{font-size:100%;color:#4A4A4A;padding:0;margin:0;}



.bam{ background-repeat: no-repeat; padding-[(#ENV{left})]:16px; padding-[(#ENV{right})]:10px;

background-color: [#(#ENV{foncee}|couleur_foncer)]; color: #fff;font-size:1.2em; position:relative;}

.bam h1,.bam h2,.bam h3,.bam h4,.bam h5,.bam h6{font-size:100%;color:#fff;padding:0;margin:0;}



.topper{ background-repeat: no-repeat; padding-[(#ENV{left})]:16px; padding-[(#ENV{right})]:10px;

background-color: #fff; color: #4A4A4A;font-size:1.2em; position:relative;}

.topper h1,.topper h2,.topper h3,.topper h4,.topper h5,.topper h6{font-size:100%;color:#4A4A4A;padding:0;margin:0;}



.act{	[background-color: #(#ENV{claire}|couleur_eclaircir);]

	[border-top: 1px solid (#ENV{claire});]

	margin-top:-1px;

	clear:both;

	text-align: #ENV{right};

}



/* Cas particuliers */

.simple.sous-rub .inner .hd {padding:0}

.simple.sous-rub .inner .hd .logo {float:#ENV{right};margin: 1px 5px 0;margin-#ENV{right}: -9px;z-index:2;position:relative;}

.simple.sous-rub .sous-sous-rub {margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;}



/* vieilles boites depliables/repliables

  encore maintenues mais depreciees





/**

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

 * 2. 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 {

	margin: calc(var(--spip-margin-bottom) * 1.5) 0;

}

.box .inner {

	position: relative;

}

/* Même padding partout, sauf footer */

.box .bd, .box .hd, .box .ft {

	position: relative;

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

}

.box .ft {

	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 .bd > :first-child,

.box .bd > :first-child > :first-child {

	margin-top: 0;

}

.box .bd > :last-child {

	margin-bottom: 0;

}

.box .hd h1, .box .hd h2, .box .hd h3, .box .hd h4, .box .hd h5, .box .hd h6 {

	margin-bottom: 0;

}

.box .ft .btn,

.box .ft button,

.box .ft .groupe-btns {

	margin-bottom: 0;

}





/**

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

 * 3. Base graphique commune

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

 *

 * Nb : les styles s’appliquent au .inner, pas sur le .box lui-même.

 */





/* Conteneur interne */

.box .inner {

	background-color: var(--spip-color-white);

	transition: box-shadow 0.2s;

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

	border: 0;

	box-shadow: var(--spip-box-shadow);

}

.box .inner:hover,

.box .inner:focus-within {

	box-shadow: var(--spip-box-shadow-hover);

}



/* Header */

.box .hd {

	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 .bd:first-child {

	border-top-left-radius: var(--spip-box-border-radius);

	border-top-right-radius: var(--spip-box-border-radius);

}

.box .bd:only-child {

	border-bottom-left-radius: var(--spip-box-border-radius);

	border-bottom-right-radius: var(--spip-box-border-radius);

}



/* Footer */

.box .ft {

	border-bottom-left-radius: inherit;

	border-bottom-right-radius: inherit;

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

	text-align: var(--spip-right);

}



/* Titres

   Règle : avec le h3 par défaut on raccorde avec les titres des formulaires (taille, graisse, …).

	 Si on veut forcer avec une autre balise (h2…), utilisez la variante .titrem sur le header.  */

.box .hd h3,

.box .hd.titrem h1, .box .hd.titrem h2, .box .hd.titrem h3, .box .hd.titrem h4, .box .hd.titrem h5, .box .hd.titrem h6,

.formulaire_spip .titrem {

	font-size: calc(1em * var(--spip-form-titrem-factor));

	font-weight: 600;

	/* color: var(--spip-color-theme-dark); */

}



/* En colonne latérale (+ voir variables au début) */

.lat .box {

	font-size: 0.95em;

}

.lat .box .hd h1, .lat .box .hd h2, .lat .box .hd h3, .lat .box .hd h4, .lat .box .hd h5, .lat .box .hd h6,

.lat .formulaire_spip .titrem  {

	font-size: 1em;

}





/**

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

 * 4. Variantes principales

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

 */





/* Simple */

.box.simple .inner {

	background-color: var(--spip-color-white);

}



/* Info */

.box.info .inner {

	border: 3px solid var(--spip-color-theme-light);

	background-color: var(--spip-color-white);

}



/* Note */

.box.note .inner {

	border: 3px solid var(--spip-color-theme-lighter);

	background-color: var(--spip-color-theme-lightest);

}



/* Raccourcis */

.box.raccourcis .inner {

	border-bottom: 1px solid hsla(0, 0%, 0%, 0.1);

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

}



/* Important */

.box.important .inner {

	border: 3px solid var(--spip-color-theme);

	background: var(--spip-color-white);

}



/* Highlight */

.box.highlight .inner {

	background-color: hsl(var(--spip-color-theme--h), var(--spip-color-theme--s), calc(var(--spip-color-theme--l) * 0.8));

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

}

.box.highlight .hd {

	border-bottom-color: var(--spip-box-sep-color-inverse);

}

.box.highlight .hd * {

	color: inherit;

}



/* Inverse */

.box.inverse .inner {

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

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

}

.box.inverse .hd {

	border-bottom-color: var(--spip-box-sep-color-inverse);

}

.box.inverse .hd * {

	color: inherit;

}





/**

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

 * 5. Variantes d'états

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

 */





/* Reset des styles des "messages" qui sont pour l'instant dans forms.css */

.box.notice, .box.error, .box.success {

	border: 0;

	background: transparent;

	padding: 0;

	color: inherit;

}

/* Icône centrée verticalement dans le header */

.box.notice .hd, .box.error .hd, .box.success .hd,

.box.notice .bd, .box.error .bd, .box.success .bd {

	background-repeat: no-repeat;

	background-size: var(--spip-box-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 .bd, .error .bd, .success .bd {

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

}*/

/* Espacement pour l'icône selon qu'elle soit dans le header ou dans le body */

.box.notice .hd, .box.error .hd, .box.success .hd,

.box.notice .bd:first-child, .box.error .bd:first-child, .box.success .bd:first-child {

	padding-#LEFT: calc(var(--spip-box-iconsize) + (var(--spip-box-spacing-x) * 2));

}

/* Bordure sur le côté */

.box.notice .hd, .box.error .hd, .box.success .hd,

.box.notice .bd, .box.error .bd, .box.success .bd,

.box.notice .ft, .box.error .ft, .box.success .ft {

	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 .hd, .box.error .hd, .box.success .hd {

	border-bottom: 0;

}

.box.notice .hd:before, .box.error .hd:before, .box.success .hd: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 .hd,

.box.notice .bd {

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

}

.box.notice .ft {

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

}

.box.notice .hd,

.box.notice .bd:first-child {

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

}



/* Erreur */

.box.error .hd,

.box.error .bd {

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

}

.box.error .ft {

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

}

.box.error .hd,

.box.error .bd:first-child {

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

}



/* Succès */

.box.success .hd,

.box.success .bd {

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

}

.box.success .ft {

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

}

.box.success .hd,

.box.success .bd:first-child {

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

}





/**

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

 * 6. Autres variantes

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

 */





/* 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 .inner,

.box.info:not(.pop) .inner,

.box.note:not(.pop) .inner,

.box.important:not(.pop) .inner,

.box.raccourcis:not(.pop) .inner,

.box .box:not(.pop) .inner /* imbriquées */

{

	box-shadow: none !important;

}

.box.simple.flat .inner,

.box.notice.flat .inner,

.box.error.flat .inner,

.box.success.flat .inner,

.box .box.simple:not(.pop) .inner, /* imbriquées */

.box .box.notice:not(.pop) .inner,

.box .box.error:not(.pop) .inner,

.box .box.success:not(.pop) .inner {

	border: 1px solid var(--spip-box-border-color);

}



/* pop : avec une ombre portée.

   Peut se conjuguer aux autres quand on veut forcer */

.box.pop .inner {

	box-shadow: var(--spip-box-shadow);

}

.box.pop .inner:hover,

.box.pop .inner:focus-within {

	box-shadow: var(--spip-box-shadow-hover);

}





/**

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

 * 7. Cas particuliers

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

 */

.titrem { font-weight: bold; }

div.titrem, h3.titrem { display: block; padding-top: [(#ENV{margin-bottom}|strdiv{2})em]; padding-bottom: [(#ENV{margin-bottom}|strdiv{2})em]; background-repeat: no-repeat; padding-[(#ENV{left})]:16px; padding-[(#ENV{right})]:10px;}

div.titrem a.titremancre,h3.titrem a.titremancre {padding:15px 0 0 16px;background-position: [(#ENV{left})] top;background-repeat: no-repeat; position:relative;float:[(#ENV{left})];margin-[(#ENV{left})]:-16px;}

/* Deplier / Replier */

.deplie a.titremancre, .deplie a.titremancre, .depliant a.titremancre, .replie a.titremancre { height: 1px; padding-bottom: 0px; }

.replie a.titremancre { background-image: url([(#CHEMIN_IMAGE{deplierhaut[(#ENV{rtl})].gif})]); }

.titrem.hover { background-color: #ENV{claire}; }

.deplie a.titremancre { background-image: url(#CHEMIN_IMAGE{deplierbas.gif}); }

.impliable {}

.js .blocreplie { display: none; }

.js .titrem.blocreplie { display: block; }

.blocdeplie { display: block; background: none; }

.bloc_depliable .pagination{ white-space:normal; }
 
 No newline at end of file
 




/**

 * Menu des rubriques dépliables sur la home

 * (voir aussi styles boîtes dépliables plus bas)

 */

.box.sous-rub .inner {

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

	box-shadow: none !important;

}

/* titre */

.box.sous-rub .hd {

	padding: 0; /* padding dans le titre cliquable plutôt */

	border-bottom: 0;

}

.box.sous-rub .titrem.hover,

.box.sous-rub .titrem.deplie,

.box.sous-rub .titrem:hover,

.box.sous-rub .titrem:focus {

	background-color: var(--spip-color-theme-light);

}

.box.sous-rub .titrem.hover a,

.box.sous-rub .titrem.deplie a,

.box.sous-rub .titrem:hover a,

.box.sous-rub .titrem:focus a {

	color: var(--spip-color-theme-darker);

}

.box.sous-rub .titrem:not(.deplie):hover,

.box.sous-rub .titrem:not(.deplie):focus {

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

}

.box.sous-rub .hd .logo {

	float: var(--spip-right);

	margin: 1px 5px 0;

	margin-#ENV{right}: -9px;

	z-index: 2;

	position: relative;

	border-top-#RIGHT-radius:5px;

}

/* Body */

.box.sous-rub .bd {

	padding: 0;

	border-top: 0;

}

.box.sous-rub .descriptif {

	padding: 0px 10px 1px 16px;

	font-size: 0.95em;

}

.box.sous-rub a:hover {

	color: black;

}

.box.sous-rub .liste-items {

	font-size: 0.85em;

	line-height: 1.2;

	/* border-top: 1px solid var(--spip-box-sep-color); */

	border-top: 0;

}

.box.sous-rub .liste-items .item {

	padding: 0px;

	border-color: var(--spip-box-sep-color);

}

.box.sous-rub .liste-items .item a {

	display: block;

	padding: calc(var(--spip-box-spacing-y) / 2) calc(var(--spip-box-spacing-x) / 2);

}

.box.sous-rub .liste-items .item:hover {

	background-color: var(--spip-color-theme-light);

}

.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;

}





/**

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

 * 8. Déprécations

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

 * Vieilles boîtes dépliables/repliables encore maintenues mais dépréciées

 * Exemple : menu des rubriques dépliables sur la home (utilisé ailleurs ?)

 */



/* Titre

   - init :   .replie

   - déplié : .depliant.deplie

   - replié : .depliant.replie */

.box .titrem.replie,

.box .titrem.depliant,

.box .titrem.impliable {

	display: block;

	font-size: 1em;

	line-height: 1.25;

	padding: calc(var(--spip-box-spacing-y) / 2) calc(var(--spip-box-spacing-x) / 2);

	background-repeat: no-repeat;

	border-radius: inherit;

}



/* Picto déplier / Replier */

.box .titremancre {

	display: inline-block;

	position: relative;

	width: 1em;

	height: 1em;

	float: var(--spip-left);

	margin-#RIGHT: calc(var(--spip-box-spacing-x) / 3);

	background-position: center center;

	background-repeat: no-repeat;

}

.box .replie .titremancre {

	background-image: url([(#CHEMIN_IMAGE{deplierhaut[(#ENV{rtl})].gif})]);

}

.box .deplie .titremancre {

	background-image: url(#CHEMIN_IMAGE{deplierbas.gif});

}

/* Afficher / Masquer */

.js .box .blocreplie {

	display: none;

}

.js .box .titrem.blocreplie {

	display: block;

}

.box .blocdeplie {

	display: block;

	background: none;

}

.box .bloc_depliable .pagination {

	white-space: normal;

}

prive/themes/spip/theme.css.html

+0 −22
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -63,9 +63,6 @@ body { 
.navigation_avec_icones #bando1_menu_administration {background-image: url("plugins/details_interface_3/images/maintenance-48.png");}

.navigation_avec_icones #bando1_menu_configuration {background-image: url("plugins/details_interface_3/images/configuration-48.png");}

*/

.simple .inner {border-radius:5px;border: 1px solid #d7d7d7;position:relative;}

.simple .inner:hover {box-shadow:0px 0px 2px #dddddd;position:relative;}

.simple .inner .hd { background-color: #f0f0f0; color: #444;}

.simple.fiche_objet .inner .hd { line-height: 120%; }

#contenu .fiche_objet .propose .inner {border: 0;border-radius:0;background-color: #ffde00;margin: 0px -15px;padding:15px;position:relative;}

#contenu .fiche_objet .propose .inner p {margin: 0;}
@@ -84,19 +81,6 @@ body { 
h1 {font-size: 2em;line-height: 125%;}

.h1 {font-size: 2em;line-height: 125%;}



.sous-rub .inner {border: 0;background-color: #[(#ENV{foncee}|couleur_luminance{0.15})];box-shadow:0px 0px 10px #[(#ENV{foncee}|couleur_luminance{0.20})] inset;position:relative;}

.sous-rub .inner:hover {box-shadow:0px 0px 10px #[(#ENV{foncee}|couleur_luminance{0.20})] inset;position:relative;}

.sous-rub .inner .hd {background-color: transparent;font-size: 100%;}

.simple.sous-rub .inner .hd .logo {border-top-#ENV{right}-radius:5px;}

.sous-rub .inner .bd {padding: 0;}

.sous-rub .inner .bd .descriptif {padding:0px 10px 1px 16px; font-size: 0.95em;}

.sous-rub .inner .bd .liste-items {font-size: 0.85em;line-height: 120%;}

.sous-rub .inner .bd .liste-items .item {padding: 0px;}

.sous-rub .inner .bd .liste-items .item a {padding: 5px 18px;display: block;}

.sous-rub .inner .bd .liste-items .item:hover {background-color: #[(#ENV{foncee}|couleur_luminance{0.25})];}

.sous-rub .inner .bd .liste-items .item:hover a {color: black;}

.sous-rub .inner .bd .liste-items > .item:last-child {border-bottom: 0px;}



.liste-objets {border:1px solid #e5e5e5;border-top-left-radius:5px;border-top-right-radius:5px;position: relative;z-index: 1;display: block;}



/*
@@ -119,16 +103,10 @@ h1 {font-size: 2em;line-height: 125%;} 
.liste-objets-lies.mots thead {display: none;}



.en-edition {line-height: 120%;}

div.titrem {font-size: 1em;line-height: 125%;padding-top: 7px;padding-bottom: 7px;}

h3.titrem {font-size: 1em;line-height: 125%;padding-top: 7px;padding-bottom: 7px;}



#chemin {}

#chemin .bouton_deplacer {font-size: 10px;color: #GET{lien};opacity:0.6;filter:alpha(opacity=60);}

#chemin:hover .bouton_deplacer {opacity:1.0;filter:alpha(opacity=100);}

.box, .box .inner  {border-radius:5px;}

.box .inner .hd  {border-top-left-radius:5px; border-top-right-radius:5px;}

.note {border: 0;}

.box.error,.box.success,.box.notice {border: 0;}



.lat #documents_joints {border-top:0}

.lat #documents_joints .item {border-radius:5px;}

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