« MediaWiki:Chameleon.css » : différence entre les versions

Version du 29 septembre 2025 à 14:51

body
{
	overflow-wrap: break-word; /* Les mots se coupent s'ils n'ont pas assez de place */
}

/*Modifie la hauteur du bandeau de navigation*/

nav#mw-navigation{
	min-height:10vh;
}

/*Annule le désafichage du sommaire introduit par CHameleon 4.4.0
cf :
https://github.com/ProfessionalWiki/chameleon/releases
https://github.com/ProfessionalWiki/chameleon/blob/4.x/docs/components.md#component-toc
https://github.com/ProfessionalWiki/chameleon/commits/master/resources/styles/Components/Toc.scss
*/
#bodyContent #toc{
 	display:table;
 }
 
/*Supprime la ligne de séparation du titre avec le contenu sur la page d'accueil (titre qui a été retiré par le wikicode)*/
body.rootpage-Accueil #firstHeading{
	border: none;
	margin:0;
	padding:0;
}
/*Affiche l'image de fond*/
body.rootpage-Accueil #ImageAccueil{
  background-color: transparent;
  background-size: cover;
  background-position: 20% bottom;
  height: 90vh; /*100vh - 10vh de nav*/
  position:relative;/*pour placement du titre en absolute*/
  overflow-x:visible;
  overflow-y:clip;
}

body.rootpage-Accueil #ImageAccueil::before{
  content: " ";
  position: absolute;
  width: 100vw;
  height: 100%;
  z-index: -1;
  left: calc(0px - (100vw - 100%)/2);
  background-image: url(https://wikimontessori.org/images/4/4e/Vue_d%27ensemble.jpg);
  background-position:0% center;
  background-size:cover;
}

/* Évite la scrollbar liée à l'image de fond de la page d'accueil*/
body.rootpage-Accueil{
	overflow-x:hidden;
}

/*Titre principal*/
body.rootpage-Accueil #ImageAccueilContent{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
body.rootpage-Accueil #ImageAccueilContent h1{
	font-size:3rem;
	margin-top:0;
	padding-top:0;
	color:white;
	text-shadow: 0.04em 0.04em 0.04em rgba(0,0,0,1);
	border-bottom: 0.03rem solid white;
	padding-bottom: 20px;
}

body.rootpage-Accueil #ImageAccueilContent p{
  margin-top: 30px;
  font-size:1.5rem;
  color:white;
  text-shadow: 0.04em 0.04em 0.04em rgba(0,0,0,1);
}

@media (min-width: 768px){
	body.rootpage-Accueil #ImageAccueilContent h1{
		font-size:4rem;
	}
	body.rootpage-Accueil #ImageAccueilContent p{
		font-size:2rem;
	}
}

@media (min-width: 992px){
	body.rootpage-Accueil #ImageAccueilContent h1{
		font-size:5rem;
	}
	body.rootpage-Accueil #ImageAccueilContent p{
		font-size:3rem;
	}
}

/*GUILLEMETS*/

cite {
  quotes: "«" "»";
  font-style: normal;
}

cite::before {
  content: open-quote;
  white-space: pre; /* Assure un espace insécable */
}

cite::after {
  content: close-quote;
  white-space: pre; /* Assure un espace insécable */
}

/*CARTES*/

/*Dimensions des img dans les cards*/
.card .card-img-top {
    width: 100%;
    object-fit: cover;
}
/*Définit la hauteur de l'image en fonction du type de carte : s, m, l*/
.card-s .card-img-top {
    height: 25vh;
}

.card-m .card-img-top {
    height: 40vh;
}

.card-l .card-img-top {
    height: 50vh;
}

.card-body{
	padding:.75rem;
}

.card .card-title{
	margin:0;
	padding:0;
	margin-bottom: 0.5rem;
	font-size: 1.4rem;
	font-family: ArchitectsDaughter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	font-weight: 500;
	line-height: 1.2;
}

/*Suppression des effets de la balise <p> insérée par MW*/
.card p{
	margin:0;
}

/*Suppression des effets de la balise <pre> insérée par MW*/
.card pre{
	padding:0;
	border:none;
	margin:0;
	font-size:0;
}

/*Espacement des cartes*/
.card{
	margin-top:1rem;
	margin-bottom:1rem;
}

/*Titre invisible des cartes pour la navigation (l'ancre pointe en haut de la carte et non pas sous l'image)*/
.invisible_title{
	visibility:hidden;
	line-height:0;
	padding:0;
	margin:0;
}

/*Chargement des polices de caractère*/
@font-face {
  font-family: Abel;
  src: url("resources/assets/Abel-Regular.ttf") format("truetype");
}
@font-face {
  font-family: ArchitectsDaughter;
  src: url("resources/assets/ArchitectsDaughter-Regular.ttf") format("truetype");
}

/*MINIATURES*/

/*Dimensions des img dans les miniatures*/

.miniature a.image{
	display:block;
	width:100%;
}
.miniature .miniature_image {
	display:block;
	width:100%;
    object-fit: contain;
    max-height: 100% !important;
    /*max-height: 10rem !important;*/
    height: auto !important;
}

.miniature .miniature_legende {
	text-align:center;
	font-size: 0.8rem;
}


/*BARRE DE PROGRESSION*/
div.progress_bar{
	position:absolute;
	top:3px;
	right:3px;
	border:1px solid white;
	border-radius:2px;
	background-color:rgba(211,211,211,0.7);
	height:10px;
	width:20%;
}
div.progress{
	height:100%;
	background-color:rgba(92, 184, 92,0.7);
	float:left;
	border-radius:0;
}
div.progress_bar .wip{
	position:absolute;
	top:5px;
	right:5px;
}

div.progress-3{
	width:3%;
}

div.progress-5{
	width:5%;
}

div.progress-13{
	width:13%;
}
div.no-progress:only-child{
	background-color:rgba(217, 83, 79,0.7);
	width:6%;
}


/* -------------------------------------------------------------*/
/* Page Objectifs de l'Éducation Nationale */
/* -------------------------------------------------------------*/
td.domaineEN{
	padding: 0px 5px;
}

td.domaineEN h2{
	border-bottom:none;
	text-shadow: 1px 1px 1px white;
}
/* -------------------------------------------------------------*/
/* Présentation de matériel */
/* -------------------------------------------------------------*/





/* -------------------------------------------------------------*/
/* Menu supérieur */
/* -------------------------------------------------------------*/

/* Augmentation de la taille de la barre de recherche (en flex) */
@media (min-width: 1105px)
{
	/* Supprime la règle étrange de marge à gauche pour pousser les éléments à droite */
	/* Utilise la règle flex-end, faite pour cela */
	.p-navbar .navbar-nav.right {
	  /*margin-left: 0 !important;*/
	  justify-content: flex-end !important;
	  flex-grow: 1;
	}
	
	/* La barre prend 50% de l'espace restant disponible */
	#p-search {
	  flex-grow: 0.5;
	}
}

/* Suppression des icones */
a.n-mainpage-description::before
{
	display:none ;
}

/* Texte des menus plus grand */
#mw-navigation .nav-link
{
  font-size: large;
}

/* Menus soulignés au survol */
#mw-navigation .nav-link:hover
{
	text-decoration: underline;
}

/* La zone de clic des résultats de recherche est plus haute */
.mw-searchSuggest-link > .suggestions-result
{
	padding: 0.75em 0.25em;
}

/* -------------------------------------------------------------*/
/* Gestion des commentaires */
/* -------------------------------------------------------------*/

/* Les commentaires prennent l'espace de leur conteneur */
.comments-body .full, .comments-body .reply, .comments-body #comment
{
	width: auto;
}

.comments-body #comment
{
	width: 100%;
}

/* -------------------------------------------------------------*/
/* Gestion du pied de page */
/* -------------------------------------------------------------*/

.msd-block
{
	display: flex;
	align-items: end;
	color: black;
	margin-top: 10px;
}

.msd-block .p-navbar
{
	border-radius: 5px 5px 0 0;
}

.msd-block .footer-info
{
  justify-content: flex-end;
  flex-grow: 1;
  font-style: italic;
}

.msd-block .footer-info > div
{
	margin:0 5px;
}

@media (max-width: 1000px)
{
	.msd-block
	{
		align-items: flex-start;
		flex-direction: column-reverse;
	}
	.msd-block .footer-info
	{
		justify-content: center;
		margin: 10px 0;
		text-align:center;
	}
}

.msd-footer
{
	display: flex;
	color: white ;
	align-items: center;
	background-color: #252c62;
	padding: 15px;
}

.msd-footer a
{
	color: inherit ;
}

.msd-footer .footer-icons
{
  flex-grow: 1;
}

.footer-info
{
	margin: 0;
	text-align: justify;
}

/*
 * Ce block apparaît après avoir édité une page avec l'éditeur visuel
 * et vient casser l'affichage du pied de page en plus de créer un doublon.
 */
.footer-info #footer-info-lastmod
{
	display: none; 
}


/* -------------------------------------------------------------*/
/* Pages de matériel */
/* -------------------------------------------------------------*/

.page_de_materiel .imagePrincipale{
	margin-left:15px;
}

.page_de_materiel li{
	margin-bottom:0.3em;
}
.page_de_materiel ul{
	margin-top:0.6em;
	margin-bottom:0.6em;
}

.page_de_materiel blockquote, .page_de_materiel blockquote p{
	margin:0;
}


table.competences td, table.competences th
{
	margin: 20px 0;
	padding: 10px;
	border: 1px dashed black;
}

/*Image principale d'une page de matériel - Float à partir d'une certaine largeur d'écran*/

div.imagePrincipale .thumbimage{
	max-height: 20rem;
	width: auto;
}
@media (min-width: 768px){
	div.imagePrincipale{
	float:right; 
	max-width:30vw; 
	max-height:60vw; 
	clear:right;
	}
}

div.imagePrincipale .thumbcaption{
	text-align:center;
}

/* -------------------------------------------------------------*/
/* En commun page de matériel et fiches */
/* -------------------------------------------------------------*/

/* Gestion des paroles de l'enseignant et des enfants */

.page_de_materiel blockquote, .fiche blockquote{
	quotes: "— « " " »";
	display:block;
}

.page_de_materiel blockquote::before, .fiche blockquote::before{
    content: open-quote;
}

.page_de_materiel blockquote::after, .fiche blockquote::after{
    content: close-quote;
}

.page_de_materiel blockquote p, .page_de_materiel blockquote p strong, .fiche blockquote p, .fiche blockquote p strong{
	display:inline;
}

.page_de_materiel q, .fiche q{
	quotes: "« " " »";
}

.page_de_materiel q::before, .fiche q::before{
    content: open-quote;
}

.page_de_materiel q::after, .fiche q::after{
    content: close-quote;
}
/* -------------------------------------------------------------*/
/* Fiches */
/* -------------------------------------------------------------*/

:root {
  --fiche-color: rgb(227, 108, 9);
  --fiche-border-width: 3px ;
}

.fiche
{
	font-family: Avenir, 'Avenir Next LT Pro', Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
	padding: 25px;
	box-shadow: 0 0 15px 1px gray ;
	margin: 20px 0;
}

/*
 * Suppression de paragraphes parasites à la fin des fiches
 */
.fiche > p
{
	display:none;
}

.fiche h3
{
	line-height:normal; /* Évite que les "j" soient "croqués" */
	margin: 5px 0 5px 0;
	padding: 0;
}

.fiche p, .fiche p, .fiche li
{
	margin: 0;
	text-align: justify;
}

.fiche ul{
	margin-top:0;
	margin-right:0;
}

.fiche ul:not(ul ul){
	margin-left:0;
}

.fiche ul
{
	list-style-position:inside;
}

.fiche li
{
	list-style-image: none;
}

.fiche li::marker
{
	color:var(--fiche-color);
}

.fiche .table-responsive
{
	margin: 5px 0 15px 0 ;
}

/* Centre les textes des petites colonnes pour éviter qu'ils ne soit justifiés */
.fiche .table-responsive td:nth-child(1) p, .fiche .table-responsive td:nth-child(2) p {
  text-align:center;
}

.fiche table
{
	border-collapse:collapse;	
}

.fiche table.competences td, .fiche table.competences th
{
	margin: 20px 0;
	padding: 10px;
	border: 1px dashed var(--fiche-color);
}

/* Mise en forme des thèmes de l'éducation nationale */

.fiche #tag_entete ul
{
	list-style-type: none;
	list-style-image: none;
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
}

@media (max-width: 768px)
{
	.fiche #tag_entete ul
	{
		justify-content: center;
	}
}

.fiche #tag_entete li
{
	margin-left: 10px;
	margin-bottom: 3px;
	border: 2px solid var(--fiche-color);
	padding: 0px 10px;
	border-radius: 5px;
}

@media (max-width: 768px)
{
	.fiche #tag_entete li
	{
		margin: 5px 0;
	}
}


/* Mise en forme du numéro de la fiche */

.fiche #numero_fiche
{
	color: var(--fiche-color);
	font-family: "ArchitectsDaughter";
	font-size: 150%;
}

@media (max-width: 768px)
{
	.fiche #numero_fiche
	{
		text-align:center;
	}
}

/* Mise en forme du titre */

.fiche .titre_fiche
{
	margin:25px 0 ;
	padding: 20px 0;
	background-color: var(--fiche-color);
	border-radius: 10px;
	padding: 20px 5px;
	text-align: center;
}

.fiche .titre_fiche h1
{
	padding: 0;
	margin: 0;
	font-size: 2.2rem;
	border:0;
	color: white;
}

.fiche #sous-titre_fiche
{
	font-size: 1.5rem;
	text-align:center;
	color:white;
	font-family: "ArchitectsDaughter";
}

/* Mise en forme du premier encart */
.fiche #encart_1
{
	margin: 25px 0;
}

.fiche #encart_1 p
{
	text-align:center;
}

.fiche #encart_1 .col-md-4 p 
{
	margin: 10px;
}
.fiche #encart_1 .encart_1_label 
{
	font-weight: bold;
}

/* Mise en forme du premier tableau */
.fiche .section_partie_1, .fiche .partie_1
{
	border: 0px solid var(--fiche-color);
}

.fiche .partie_1
{
	border-top-width: var(--fiche-border-width);
	border-left-width: var(--fiche-border-width);
	margin:0; /* Annule les marges à -15px de bootstrap */
}

.fiche img
{
	max-width: 100%;
	height: auto;
}

/* Gestion de l'image de la fiche */
.fiche .image_fiche p, .fiche .image_fiche a
{
	height:100%;
}

.fiche .image_fiche a
{
	display: flex;
	align-items: center;
}

.fiche .image_fiche img
{
	height: 100%;
	max-height: 250px;
	width: 100%;
	object-fit: contain;
}

.fiche .icone_flottante
{
	float:right;
	margin-left: 5px;
	margin-bottom: 5px;
}

@media (max-width: 768px)
{
	.fiche .icone_flottante
	{
		float:none;
		margin:10px;
		text-align: center;
		
	}
}

.fiche .section_partie_1
{
	border-right-width: var(--fiche-border-width);
	border-bottom-width: var(--fiche-border-width);
}

.fiche .contenu_partie_1
{
	margin-bottom:10px ;
}

.fiche .partie
{
	margin: 20px 0;
}

/* Affiche des onglets pour les titres des parties 1/2 */

.fiche .partie h2 > span
{
	display:none;
}

.fiche .partie h2 {
  border-bottom: var(--fiche-border-width) solid var(--fiche-color);
  margin: 20px 0;
  padding: 0;
  text-align: left;
  color: white;
}

/* Affiche des onglets pour les titres des parties 2/2 */
.fiche .partie h2 .mw-headline {
  display: inline-block;
  background-color: var(--fiche-color);
  border: 1px solid var(--fiche-color);
  padding: 5px 15px;
  border-radius: 10px 10px 0 0;
}

.fiche .section_presentation h3, h3.dans_section_presentation {
	margin-top:0.3em;
  color: var(--fiche-color);
}

/* -------------------------------------------------------------*/
/* Liens des catégories */
/* -------------------------------------------------------------*/

#catlinks, #catlinks ul, #catlinks li
{
	margin:0;
	padding:0;
	border: none ;
	background-color: inherit;
}

#catlinks
{
	margin-top: 30px;
}

#catlinks li > a
{
	border: 1px solid #aaa ;
	background-color: #eee;
	padding: 0 5px ;
	margin-right: 5px;
	border-radius: 5px;
}

#catlinks li > a:hover
{
	color: #0b0080;
	border-color: #0b0080 ;
	text-decoration: none;
}

#catlinks li > a.new:hover
{
	color: #9b1b2f ;
	border: 1px solid #9b1b2f ;
}

/* -------------------------------------------------------------*/
/* SocialProfile : UpdateProfile */
/* -------------------------------------------------------------*/

.profile-tab, .profile-tab-on
{
	margin: 0 5px 5px 0 !important ;
	padding: 0;
	font-size: inherit;
	background-color: inherit;
	height: inherit;
	min-width: inherit;
}

.profile-tab a, .profile-tab-on a
{
	display: block;
	margin:0;
	padding: 5px 20px;
	border-radius: 5px;
	background-color: #252c62;
}

.profile-tab a:hover
{
	color:white;
}

.profile-tab-on a
{
	text-decoration: underline;
}

.eye-container .title {
  color: black;
}

/* Cette partie n'est pas responsive, 
 * on ajoute une barre de défilement.
 * Idéalement, il faudrait rendre les éléments au dessous responsive
 * ou le signaler au développeurs du plug-in
 */
#mw-content-text > form
{
	overflow: scroll;
}