WP File Manager

Current Path: /home/argothem/www/organecyberpresse/prive/themes/spip/

Name	Action
..
ajax.css	Edit
alertes.css	Edit
bando.css	Edit
bando.css.html	Edit
boutons.css	Edit
box.css	Edit
clear.css	Edit
code.css	Edit
content.css	Edit
exceptions.css	Edit
forms.css	Edit
grids.css	Edit
icons.css	Edit
images
installation.css	Edit
layout.css	Edit
lists.css.html	Edit
login_prive.css	Edit
minipage.css	Edit
minipage.vars.css	Edit
minipres.css	Edit
onglets.css	Edit
picker.css.html	Edit
reset.css	Edit
style_prive.css.html	Edit
style_prive_defaut.css	Edit
tables.css	Edit
theme.css	Edit
typo.css.html	Edit
utils.css	Edit
vars.css.html	Edit
vars.css_fonctions.php	Edit

Editing: layout.css

/**
 * ======
 * Layout
 * ======
 *
 * Organisation :
 *
 * 1. Layout général de la page
 *    1.1. Disposition par défaut
 *    1.x. Autres dispositions : pleine largeur, etc.
 * 2. Utilitaires
 * 3. Grenier / à ranger
 *
 * Breakpoints : 780px / 960px / 1200px
 *
 * Markup :
 *
 * body
 *   #bando_haut
 *     #bando_xxx (x4)
 *       .largeur
 *   #page
 *     .largeur
 *       #haut
 *       #conteneur[.<disposition>]
 *         #navigation
 *         #extra
 *         #contenu
 *   #pied
 *     .largeur
 */

/**
 * ============
 * 0. Variables
 * ============
 */

:root {
	/* Gouttière horizontale */
	--spip-layout-gap: 10px; /* clamp(10px, 2vw, 25px); */
	/* Largeur max de la page, */
	--spip-layout-page-width: 1480px;
	/* Largeur des colonnes */
	--spip-layout-column-width: 25%;
	/* Largeur limitée afin que les textes fassent environ 70 caractères max par ligne */
	--spip-layout-text-width: 75ch;
	/* Largeur limitée de certains formulaires */
	--spip-layout-form-width: 50em;
	/* Largeur réellement disponible, en tenant compte des gouttières */
	--spip-vw: calc(var(--spip-layout-page-width) - (var(--spip-layout-gap) * 2));
}
@media (min-width: 720px) {
	:root {
		--spip-layout-gap: 20px;
	}
}
@media (min-width: 1200px) {
	:root {
		--spip-layout-gap: 25px;
		--spip-layout-column-width: 20%; /* 3 colonnes donc plus petit */
	}
}

/**
 * ============================
 * 1. Layout général de la page
 * ============================
 */

html, body {
	width: 100%;
	min-height: 100vh;
	box-sizing: border-box;
}
.largeur {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--spip-layout-page-width);
	margin-inline: auto;
	padding-inline: var(--spip-layout-gap);
}
#haut {
	margin-block-start: var(--spip-spacing-y);
}
/* Coller le footer en bas */
body {
	display: flex;
	flex-flow: column;
}
#page {
	overflow: initial !important; /* Sinon aucun élément en position sticky ne fonctionne */
	flex-grow: 1;
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
}
#page>:last-child {
	margin-top: auto;
}

/**
 * 1.1. Contenu central : disposition par défaut
 * =============================================
 */

/**
 * Mobiles : 1 seule colonne
 */
#conteneur {
	display: flex;
	flex-flow: column;
}
#contenu {
	order: 2;
	overflow-x: scroll; /* Tableaux qui dépassent : ne pas faire scroller toute la page */
	min-width: 0; /* Fix grid avec tableaux qui dépassent */
}
#navigation {
	order: 1;
	overflow-wrap: break-word;
}
#extra {
	order: 3;
	overflow-wrap: break-word;
}
/* Safeguard pour placer des éléments en sticky dans les 3 blocs principaux : .ajaxbloc doit prendre toute la hauteur du parent */
#contenu > .ajaxbloc:only-child,
#navigation > .ajaxbloc:only-child,
#extra > .ajaxbloc:only-child {
	height: 100%;
}

/**
 * Écrans moyens : 2 colonnes
 */
@media (min-width: 720px) {
	#conteneur {
		display: grid;
		column-gap: var(--spip-layout-gap); /* pas de gap sur les rows pour l'instant, car les éléments à l'intérieur ont déjà des marges basses en général */
		grid-template-rows: auto 1fr;
		grid-template-columns:
			var(--spip-layout-column-width) /* navigation & extra */
			1fr;                            /* contenu */
		grid-template-areas:
			"navigation contenu"
			"extra      contenu";
	}
	#contenu {
		grid-area: contenu;
		overflow-x: initial;
	}
	#navigation {
		grid-area: navigation;
	}
	#extra {
		grid-area: extra;
	}
}

/**
 * Écrans larges : 3 colonnes
 */
@media (min-width: 1200px) {
	#conteneur {
		grid-template-columns:
			var(--spip-layout-column-width)  /* navigation */
			1fr                              /* contenu */
			var(--spip-layout-column-width); /* extra */
		grid-template-areas:
			"navigation contenu extra"
			"navigation contenu extra";
	}
}

/**
 * 1.2. Disposition : pleine-largeur
 * ===================================
 * Pas de contenus complémentaires #nav ni #extra
 * Nb : pleine_largeur conservé un temps pour rétro-compat
 */
#conteneur:is(.layout-full-width, .layout-pleine-largeur, .layout-pleine_largeur) {
	grid-template-areas: "contenu";
	grid-template-columns: 1fr;
}
#conteneur:is(.layout-full-width, .layout-pleine-largeur, .layout-pleine_largeur) #navigation,
#conteneur:is(.layout-full-width, .layout-pleine-largeur, .layout-pleine_largeur) #extra  {
	display: none;
}
/* Limiter la largeur de certains éléments */
#conteneur:is(.layout-full-width, .layout-pleine-largeur, .layout-pleine_largeur) .formulaire_spip {
	max-width: var(--spip-layout-form-width);
	margin-inline: auto;
}

/**
 * 1.3. Disposition : complements-gauche
 * =======================================
 * Contenus complémentaires #nav et #extra à gauche
 */
@media (min-width: 1200px) {
	#conteneur.layout-aside-inline-start,
	#conteneur.layout-complements-gauche {
		grid-template-areas:
			"navigation contenu"
			"extra      contenu";
		grid-template-columns: var(--spip-layout-column-width) 1fr;
	}
}

/**
 * 1.4. Disposition : complements-droite
 * =======================================
 * Contenus complémentaires #nav et #extra à droite
 */
@media (min-width: 1200px) {
	#conteneur.layout-aside-inline-end,
	#conteneur.layout-complements-droite {
		grid-template-areas:
			"contenu navigation"
			"contenu extra";
		grid-template-columns: 1fr var(--spip-layout-column-width);
	}
}

/**
 * 1.5. Disposition : complements-bas
 * ====================================
 * Contenus complémentaires #nav et #extra sous le contenu principal
 */
 @media (min-width: 1200px) {
	#conteneur.layout-aside-block-end,
	#conteneur.layout-complements-bas {
		grid-template-areas:
			"contenu contenu"
			"navigation extra";
		grid-template-columns: 1fr 1fr;
	}
}

/**
 * 1.6. Disposition : complements-bas-inverse
 * ============================================
 * Contenus complémentaires #nav et #extra sous le contenu principal
 */
 @media (min-width: 1200px) {
	#conteneur.layout-aside-block-end-reverse,
	#conteneur.layout-complements-bas-inverse {
		grid-template-areas:
			"contenu contenu"
			"extra navigation";
		grid-template-columns: 1fr 1fr;
	}
}

/**
 * 1.7. Disposition : fluide
 * ===========================
 * Idem disposition de base, sauf que le contenu principal prend tout l'espace disponible.
 * Un peu touchy pour détecter si les blocs sont vides ou pas :
 * en général ils contiennent un .ajaxbloc, mais il peut y avoir des exceptions.
 * Il faut donc prendre en compte ces 2 cas à chaque fois.
 */
 @media (min-width: 1200px) {
	/* extra est vide */
	:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#extra > *)),
	:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#extra > .ajaxbloc > *)) {
		grid-template-areas: "navigation contenu";
		grid-template-columns: var(--spip-layout-column-width) 1fr;
	}
	:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#extra > *))             #extra,
	:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#extra > .ajaxbloc > *)) #extra {
		display: none;
	}
	/* navigation est vide */
	:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#navigation > *)),
	:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#navigation > .ajaxbloc > *)) {
		grid-template-areas: "contenu extra";
		grid-template-columns: 1fr var(--spip-layout-column-width);
	}
	:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#navigation > *))             #navigation,
	:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#navigation > .ajaxbloc > *)) #navigation {
		display: none;
	}
	/* extra et navigation sont vides */
	/* comme en pleine largeur, limiter la largeur de certains éléments */
	:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#extra > *)):not(:has(#navigation > *)),
	:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#extra > .ajaxbloc > *)):not(:has(#navigation > *)),
	:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#extra > *)):not(:has(#navigation > .ajaxbloc > *)),
	:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#extra > .ajaxbloc > *)):not(:has(#navigation > .ajaxbloc > *)) {
		grid-template-areas: "contenu";
		grid-template-columns: 1fr;
	}
	:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#extra > *)):not(:has(#navigation > *))                         .formulaire_spip,
	:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#extra > .ajaxbloc > *)):not(:has(#navigation > *))             .formulaire_spip,
	:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#extra > *)):not(:has(#navigation > .ajaxbloc > *))             .formulaire_spip,
	:is(#conteneur.layout-fluide, #conteneur.layout-fluid):not(:has(#extra > .ajaxbloc > *)):not(:has(#navigation > .ajaxbloc > *)) .formulaire_spip {
		max-width: var(--spip-layout-form-width);
		margin-inline: auto;
	}
}

/**
 * ==============
 * 2. Utilitaires
 * ==============
 * Classes utilitaires applicables à n'importe quel élément
 */

.centered {
	margin: 0 auto;
	text-align: center; /* Vraiment nécessaire ? */
}

/**
 * =====================
 * 3. Grenier + à ranger
 * =====================
 */

/* ??? */
.table_page {
	max-width: var(--spip-layout-page-width);
	/* min-width: 960px; */ /* pour > 720px  */
	margin-inline: auto;
	margin-block-start: 1em;
	clear: both;
	text-align: start;
}

/* Messages alertes old school, ex. : crash de la bdd */
.wrap-messages-alertes {
	padding: 5px 10px;
	background-color: var(--spip-color-gray-lighter);
}
@media (min-width: 960px) {
	.wrap-messages-alertes {
		padding: 5px 20px;
	}
}
.messages-alertes {
	max-width: var(--spip-layout-page-width);
	/* min-width: 960px; */ /* pour > 720px  */
	margin-inline: auto;
	text-align: end;
	clear: both;
}